:root{--bg:#1d2340;--panel:#262d52;--panel2:#2f3764;--ink:#f3f5ff;--mute:#9aa3d1;--acc:#ffd23f;--ok:#4ade80;--bad:#f87171;--r:12px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}
button{font:inherit;cursor:pointer;border:0;border-radius:var(--r);padding:.55rem .9rem;background:var(--panel2);color:var(--ink);min-height:44px}
button:hover{filter:brightness(1.15)}
button.primary{background:var(--acc);color:#222;font-weight:700}
button.danger{background:#7f1d1d}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font:inherit;border-radius:var(--r);border:2px solid var(--panel2);background:#151a33;color:var(--ink);padding:.55rem .75rem;min-height:44px;width:100%}
.hidden{display:none!important}
/* landing */
.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem;text-align:center}
.landing h1{font-size:clamp(2.4rem,8vw,4.5rem);margin:0;letter-spacing:-.03em}
.landing h1 span{color:var(--acc)}
.landing p{max-width:34rem;color:var(--mute);margin:0}
.landing .row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:26rem}
.landing .row input{flex:1;min-width:10rem}
/* room */
.app{display:grid;grid-template-rows:auto 1fr;height:100dvh}
.top{display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;background:var(--panel);flex-wrap:wrap}
.top .brand{font-weight:800;font-size:1.2rem}.top .brand span{color:var(--acc)}
.top .grow{flex:1}
.top button,.top a.btn{min-height:38px;padding:.3rem .7rem;font-size:.9rem}
a.btn{display:inline-flex;align-items:center;border-radius:var(--r);background:var(--panel2);color:var(--ink);text-decoration:none}
.game{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:.6rem;padding:.6rem;min-height:0}
.col{background:var(--panel);border-radius:var(--r);min-height:0;display:flex;flex-direction:column;overflow:hidden}
.players{overflow:auto;padding:.4rem}
.pl{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:8px}
.pl.guessed{background:rgba(74,222,128,.18)}
.pl.off{opacity:.45}
.pl .dot{width:.9rem;height:.9rem;border-radius:50%;flex:none}
.pl .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .sc{font-variant-numeric:tabular-nums;color:var(--acc);font-weight:700}
.pl .ic{font-size:.85rem}
.pl .act{display:none;gap:.2rem}.pl:hover .act{display:flex}
.pl .act button{min-height:26px;padding:0 .35rem;font-size:.75rem}
.mid{display:flex;flex-direction:column;gap:.5rem;min-height:0;min-width:0}
.hud{display:flex;align-items:center;gap:1rem;background:var(--panel);border-radius:var(--r);padding:.4rem .9rem}
.hud .timer{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;min-width:3ch}
.hud .word{flex:1;text-align:center;font-size:1.7rem;font-weight:800;letter-spacing:.25em;font-family:ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.hud .hint{color:var(--mute);font-size:.85rem}
.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--panel);border-radius:var(--r);padding:.4rem}
.cwrap{position:relative;aspect-ratio:4/3;max-width:100%;max-height:100%;height:100%;width:auto;background:#fff;border-radius:8px;overflow:hidden;touch-action:none;box-shadow:0 2px 12px #0006}
@supports not (height:100dvh){.app{height:100vh}}
.cwrap canvas{width:100%;height:100%;display:block;touch-action:none}
.cwrap.draw canvas{cursor:crosshair}
.overlay{position:absolute;inset:0;background:rgba(15,18,40,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;padding:1rem;z-index:5;border-radius:8px}
.overlay h2{margin:0}
.choices{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.choices button{font-size:1.2rem;padding:.8rem 1.2rem}
.rlist{display:grid;grid-template-columns:auto auto;gap:.2rem 1rem;text-align:left}
.tools{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;background:var(--panel);border-radius:var(--r);padding:.4rem .5rem}
.pal{display:grid;grid-template-columns:repeat(11,26px);gap:3px}
.pal button{width:26px;height:26px;min-height:0;padding:0;border-radius:5px;border:2px solid #0006}
.pal button.sel{outline:3px solid var(--acc);outline-offset:1px}
.sizes{display:flex;gap:.3rem;align-items:center}
.sizes button{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
.sizes button i{display:block;background:#fff;border-radius:50%}
.sizes button.sel,.tools button.sel{outline:3px solid var(--acc)}
.tools input[type=color]{width:44px;padding:2px;min-height:44px}
.chat{flex:1;display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow:auto;padding:.5rem;display:flex;flex-direction:column;gap:.15rem;word-break:break-word;font-size:.95rem}
.msgs .sys{color:var(--mute);font-style:italic}.msgs .ok{color:var(--ok);font-weight:700}.msgs .close{color:var(--acc)}
.msgs .secret{color:#7dd3fc}.msgs b{font-weight:700}
.chat form{padding:.5rem;border-top:2px solid var(--panel2)}
dialog{background:var(--panel);color:var(--ink);border:0;border-radius:var(--r);padding:1.2rem;max-width:min(30rem,92vw);width:100%}
dialog::backdrop{background:#000a}
dialog h2{margin-top:0}
dialog label{display:block;margin:.6rem 0 .2rem;color:var(--mute);font-size:.9rem}
dialog .btns{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--acc);color:#222;padding:.5rem 1rem;border-radius:99px;font-weight:700;z-index:50}
@media (max-width:900px){
 .game{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) 200px;overflow:auto}
 .game{display:flex;flex-direction:column;overflow:auto}
 .players{flex-direction:row;display:flex;overflow-x:auto;max-height:none}
 .pl{flex:none}.pl .act{display:none!important}
 .col.pcol{order:1}.mid{order:2;flex:none}.col.ccol{order:3;height:240px;flex:none}
 .stage{flex:none;padding:.3rem}.cwrap{width:100%;height:auto}
 .pal{grid-template-columns:repeat(11,minmax(22px,1fr));width:100%}.pal button{width:100%;height:30px}
 .hud .word{font-size:1.2rem;letter-spacing:.12em}
}
/* gallery */
.gal{max-width:1200px;margin:0 auto;padding:1rem}
.gal header{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.gal header h1{margin:0;flex:1;font-size:1.5rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.filters>*{width:auto;flex:1;min-width:10rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.card{background:var(--panel);border-radius:var(--r);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.card canvas,.card img{width:100%;aspect-ratio:4/3;background:#fff;display:block;object-fit:contain}
.card .meta{padding:.5rem .7rem;font-size:.85rem;color:var(--mute)}.card .meta b{color:var(--ink);font-size:1rem;display:block}
.lb{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.lb canvas,.lb img{max-width:100%;background:#fff;border-radius:8px;aspect-ratio:4/3;height:auto}
.lb .btns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
dialog.wide{max-width:min(860px,96vw)}
.empty{text-align:center;color:var(--mute);padding:3rem}

@media(min-width:901px){.stage{container-type:size}.cwrap{width:min(100cqw,133.333cqh);height:auto;max-height:none;aspect-ratio:4/3}}
@media(max-width:900px){button,.top button,.top a.btn,a.btn,input,select{min-height:48px}.pal{grid-template-columns:repeat(6,1fr)}.pal button{height:48px;min-height:48px}.sizes button{width:48px;height:48px}.tools input[type=color]{width:48px;min-height:48px}}