*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:radial-gradient(circle at 20% 0,#3b1d6e,#1b1035 60%);color:#fff;font:18px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
#app{max-width:560px;margin:0 auto;padding:14px 14px 90px}
body.big #app{max-width:1500px;padding:28px 40px;font-size:30px}
h1{font-size:2em;margin:.2em 0;letter-spacing:1px}h2{margin:.3em 0}.logo{font-weight:900;background:linear-gradient(90deg,#ffd23f,#ff5fa2,#4dd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
button,select,input,textarea{font:inherit;color:inherit}
button{background:#ff5fa2;border:0;border-radius:14px;padding:.7em 1em;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #a0306a;margin:.25em 0;min-height:48px}
button:active{transform:translateY(2px);box-shadow:0 2px 0 #a0306a}
button.alt{background:#4dd8ff;color:#102;box-shadow:0 4px 0 #1b7a99}button.ghost{background:#ffffff1f;box-shadow:none}
button:disabled{opacity:.45}button.sel{outline:4px solid #ffd23f}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:5px solid #ffd23f;outline-offset:2px}
.block{display:block;width:100%}
input,select,textarea{background:#ffffff14;border:2px solid #ffffff40;border-radius:12px;padding:.6em;width:100%;min-height:48px}
select option{color:#000}
.card{background:#ffffff12;border-radius:18px;padding:14px;margin:12px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1}
.code{font-size:3.2em;font-weight:900;letter-spacing:.15em;color:#ffd23f}
.muted{opacity:.7;font-size:.85em}
.players{display:flex;flex-wrap:wrap;gap:8px}.chip{background:#ffffff1f;border-radius:999px;padding:.25em .8em}.chip.off{opacity:.4}.chip.done{background:#3bd16f55}
.games{display:grid;grid-template-columns:1fr 1fr;gap:12px}.games button{min-height:110px;font-size:1.05em}
.g-fib{background:#ffd23f;color:#201;box-shadow:0 4px 0 #a88a12}.g-doodle{background:#4dd8ff;color:#102;box-shadow:0 4px 0 #1b7a99}.g-fun{background:#ff5fa2}.g-triv{background:#7cf29a;color:#102;box-shadow:0 4px 0 #2a8e46}
.q{font-size:1.4em;font-weight:800;margin:.4em 0}body.big .q{font-size:1.6em}
.opts{display:grid;gap:10px}body.big .opts{grid-template-columns:1fr 1fr}
.opt{background:#ffffff1a;border-radius:14px;padding:.6em .9em}.opt.truth{background:#3bd16f;color:#102}.opt .who{font-size:.75em;opacity:.85}
.tri button{text-align:left}.c0{background:#ff5f5f;box-shadow:0 4px 0 #a33}.c1{background:#4d8dff;box-shadow:0 4px 0 #2a52a0}.c2{background:#ffb13b;color:#201;box-shadow:0 4px 0 #a0701e}.c3{background:#3bd16f;color:#102;box-shadow:0 4px 0 #22803f}
#timer{position:fixed;top:10px;right:10px;background:#000a;border-radius:999px;padding:.2em .7em;font-weight:900;font-size:1.4em;z-index:5}#timer.low{color:#ff5f5f}
body.big #timer{font-size:2em}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#000d;padding:.6em 1em;border-radius:12px;display:none;z-index:9;max-width:90vw}
.qr{background:#fff;border-radius:12px;padding:8px;display:inline-block;line-height:0}.qr svg,.qr img{width:200px;height:200px}
.lobbyTop{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
canvas{background:#fff;border-radius:12px;touch-action:none;width:100%;max-width:420px;aspect-ratio:1;display:block;margin:0 auto}
.draw-img{background:#fff;border-radius:16px;max-width:100%;width:420px;display:block;margin:8px auto}body.big .draw-img{width:520px}
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:8px 0}.tools button{min-width:44px;padding:.4em .6em}
.sw{width:44px;height:44px;border-radius:50%;padding:0;border:3px solid #fff3}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vs .opt{font-size:1.2em;min-height:4em}.win{outline:5px solid #ffd23f}
table{width:100%;border-collapse:collapse}td,th{padding:.25em .4em;text-align:left;border-bottom:1px solid #ffffff22}
.big-only{display:none}body.big .big-only{display:block}
.ctrl{position:fixed;left:0;right:0;bottom:0;background:#0009;padding:8px;display:flex;gap:8px;justify-content:center;z-index:4}
.ctrl button{margin:0;flex:0 1 auto}
.pill{display:inline-block;background:#ffd23f;color:#201;border-radius:999px;padding:0 .6em;font-weight:800}
textarea{min-height:120px}