*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--p:#f6921e;--a:#ffb454;--bg:#2b2b2d;--card:#3d3d3f;--txt:#f4f4f4;--mut:#b5b5b8}
html,body{background:var(--bg);color:var(--txt);font-family:Quicksand,'Century Gothic','Avenir Next',system-ui,sans-serif;min-height:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;position:sticky;top:0;background:var(--bg);z-index:5}
.logo{display:flex;align-items:center;gap:6px;font-weight:400;font-size:1.3rem;color:var(--txt)}.logo img{height:24px}
#evName{color:var(--mut);font-size:.9rem}

#join{padding:40px 20px;display:flex;flex-direction:column;gap:14px;max-width:420px;margin:auto}
input,textarea{width:100%;padding:14px;border-radius:12px;border:1px solid #555;background:var(--card);color:var(--txt);font-size:1rem}
button{padding:12px 16px;border:0;border-radius:12px;background:#4a4a4d;color:var(--txt);font-size:1rem;cursor:pointer}
button.primary{background:var(--p);font-weight:700}
.err{color:var(--p);min-height:1.2em;font-size:.9rem}

main{padding:0 12px 80px}
.card{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.now small{color:var(--mut);letter-spacing:.1em;font-size:.7rem}
#nowTitle{font-weight:700;margin-top:4px}
#nowBy{color:var(--mut);font-size:.85rem}

#tabs{display:flex;gap:5px;margin-bottom:10px}
#tabs button{flex:1;background:transparent;border:1px solid #555;color:var(--mut);padding:10px 4px;font-size:.88rem;white-space:nowrap}
#tabs button.on{background:var(--card);color:var(--txt);border-color:var(--p)}

.list{list-style:none}
.list li{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:12px;padding:10px;margin-bottom:8px}
.list img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.list .t{flex:1;min-width:0}
.list .t div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.list .by{color:var(--mut);font-size:.8rem}
.list .ded{color:var(--a);font-size:.8rem;white-space:normal!important}
.list .pend{color:var(--a);font-size:.75rem}
.vote{display:flex;flex-direction:column;align-items:center;gap:2px}
.vote button{padding:4px 10px;background:#4a4a4d;font-size:.9rem}
.vote button.on{background:var(--p)}
.vote b{color:var(--a)}
.add{background:var(--p);font-weight:700;padding:8px 12px}

.searchbar{display:flex;gap:8px;margin-bottom:8px}
.searchbar button{flex:none}
.sticky{position:fixed;left:12px;right:12px;bottom:12px;background:var(--bg);padding-top:8px}
.hint{color:var(--mut);font-size:.8rem;margin-bottom:10px}

.msgs li{display:block}
.msgs b{color:var(--a)}

#modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;z-index:10}
#modal .box{background:var(--card);width:100%;padding:20px;border-radius:20px 20px 0 0;display:flex;flex-direction:column;gap:12px}
#modal .row{display:flex;gap:8px}
#modal .row button{flex:1}

#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#fff;color:#000;padding:10px 16px;border-radius:999px;font-weight:600;z-index:20;max-width:90vw;text-align:center}
.banner{background:#4a3a20;border:1px solid var(--a);color:var(--a);padding:10px 14px;border-radius:12px;margin-bottom:12px;font-size:.9rem}
.card b{display:block;margin-bottom:4px}
.card p.hint{margin-bottom:10px}
.stat{display:inline-block;background:var(--card);padding:8px 12px;border-radius:10px;margin:0 6px 6px 0;font-size:.85rem}
.stat b{color:var(--a)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
td,th{padding:8px 6px;border-bottom:1px solid #4a4a4d;text-align:left;vertical-align:top}
th{color:var(--mut);font-weight:500;font-size:.8rem}

.inv{width:100%;margin-bottom:12px;background:var(--card);border:1px dashed var(--a);color:var(--a)}
#invite{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:10;padding:20px}
#invite .box{background:#fff;color:#000;border-radius:20px;padding:20px;width:100%;max-width:360px;text-align:center}
#invite img{width:100%;max-width:280px;margin:10px auto;display:block}
#invite .hint{color:#555}
#invite .row{display:flex;gap:8px;margin-top:10px}#invite .row button{flex:1}

.chk{display:flex;gap:8px;align-items:flex-start;color:var(--mut);font-size:.85rem;margin:4px 0}
.chk input{width:auto;margin-top:3px}
.chk a{color:var(--a)}
footer.legal{text-align:center;color:var(--mut);font-size:.75rem;padding:30px 16px 90px}
footer.legal a{color:var(--a)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gallery figure{position:relative;margin:0;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--card)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:.65rem;padding:14px 6px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery .pend{position:absolute;top:4px;left:4px;background:var(--a);color:#000;font-size:.6rem;padding:2px 6px;border-radius:6px}
.gallery .del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:22px;height:22px;padding:0;font-size:.8rem}

.genres{margin:4px 0 10px}
.genres b{display:block;font-size:.7rem;color:var(--mut);letter-spacing:.08em;margin:8px 0 4px}
.genres .row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.genres .row::-webkit-scrollbar{display:none}
.genres button{flex:none;background:var(--card);border:1px solid #555;border-radius:999px;padding:7px 12px;font-size:.85rem;color:var(--txt)}
.genres button.on{border-color:var(--p);background:#4a3a20;color:var(--a)}
.genres button.rnd{border-color:var(--a);color:var(--a)}
#resultsHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#resultsHead button{padding:6px 10px;font-size:.8rem}
.links2{text-align:center;color:var(--mut);font-size:.9rem}.links2 a{color:var(--a);cursor:pointer}
#join{gap:10px}#join button{width:100%}