*{box-sizing:border-box}body{margin:0;background:#19191e;color:#f4f1e8;font:16px/1.45 system-ui,sans-serif}main{max-width:1160px;margin:auto;padding:25px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #424147;padding-bottom:20px}.brand{color:#f4f1e8;text-decoration:none;font-weight:950;letter-spacing:.04em}.quiet{background:none;border:1px solid #77757c;color:#eee8df;border-radius:6px;padding:9px 13px}button,input{font:inherit}button{font-weight:800;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #4ee1cf;outline-offset:3px}.hidden{display:none!important}.home{display:grid;grid-template-columns:1fr 420px;gap:clamp(30px,8vw,100px);align-items:center;min-height:82vh}.eyebrow{font-size:.67rem;font-weight:900;letter-spacing:.16em;color:#4ee1cf}.home h1{font-size:clamp(3.5rem,7vw,6.5rem);line-height:.95;letter-spacing:-.07em;margin:22px 0}em{font-style:normal;color:#ff764d}.lead{max-width:460px;color:#aaa7b0;font-size:1.1rem}.demo{display:grid;grid-template-columns:repeat(3,42px);gap:5px;transform:rotate(-7deg);margin:30px 0}.demo i{height:35px;background:#4ee1cf;border-radius:3px;color:#fff;text-align:center;font-style:normal}.demo i:nth-child(3n){background:repeating-linear-gradient(45deg,#fa7549 0 8px,#923f2b 8px 12px)}.panel{background:#25252c;border:1px solid #4a494f;border-radius:14px;padding:32px;box-shadow:0 20px 50px #0003}.panel h2{font-size:2rem;letter-spacing:-.04em;margin:18px 0 24px}label{display:block;font-weight:850;font-size:.7rem;letter-spacing:.12em;margin:16px 0 8px}input{padding:13px;background:#19191e;border:1px solid #67646e;border-radius:6px;width:100%;color:white}.primary,.secondary,.join button{width:100%;border:0;border-radius:6px;padding:14px;margin-top:12px;background:#ff764d;color:#231b1b}.primary:hover{background:#ff9877}.secondary{background:#3e3d46;color:#eee8df}.divider{font-size:.65rem;letter-spacing:.13em;text-align:center;margin-top:22px;color:#99959f}.join{display:flex;gap:8px}.join button{width:auto;margin:0;padding:12px 22px;background:#4ee1cf}.small{font-size:.8rem;color:#9996a1}.lobby{max-width:580px;margin:40px auto}.codebox{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#19191e;border-radius:6px}.codebox span,.codebox small{font-size:.65rem;color:#a4a0aa}.codebox strong{font-size:2rem;letter-spacing:.12em}.players{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.player{padding:9px 12px;background:#303037;border-radius:6px;font-size:.85rem}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.lobby>.quiet{margin-top:10px}.game{max-width:610px;margin:18px auto}.hud{display:flex;align-items:center;justify-content:space-between}.hud h2{font-size:1.5rem;margin:6px 0 10px}.hint{font-size:.85rem;color:#c3becb;margin-bottom:12px;min-height:24px}.arena{position:relative;aspect-ratio:1;max-height:55dvh;margin:auto;border:5px solid #4b4642;border-radius:8px;background:#d94824;overflow:hidden;box-shadow:0 0 30px #ed582122}.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:3px}.tile{background:#4a8e83;border-radius:3px;border-bottom:4px solid #30685f}.tile.danger{background:repeating-linear-gradient(45deg,#f49551 0 8px,#a05a39 8px 14px);border-bottom-color:#824329}.tile.lava{background:#f25225;border-color:#d73818}.tokens{position:absolute;inset:0;pointer-events:none}.token{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 6px #000;transition:top 65ms linear,left 65ms linear}.token small{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;background:#19191edb;padding:1px 4px;border-radius:3px;color:white}.token.me{outline:2px solid #19191e}.token.out{opacity:.2;filter:grayscale(1)}.countdown{position:absolute;inset:0;display:grid;place-items:center;background:#19191e66;font-size:4rem;font-weight:950}.game-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}.pad{display:grid;grid-template-columns:repeat(3,48px);gap:4px}.pad button{height:42px;background:#3e3e48;border:1px solid #6e6a77;border-radius:6px;color:#eee;touch-action:none;user-select:none}.pad button[data-dir=up]{grid-column:2}.pad button[data-dir=left]{grid-column:1;grid-row:2}.pad button[data-dir=down]{grid-column:2;grid-row:2}.pad button[data-dir=right]{grid-column:3;grid-row:2}.legend{font-size:.65rem;display:grid;gap:6px}.legend span:first-child{color:#4ee1cf}.legend span:nth-child(2){color:#ff9b61}.legend small{color:#918b9b}.reactions{display:flex;align-items:center;gap:7px}.reactions button{background:#303037;border:0;border-radius:5px;padding:7px 12px;font-size:1.1rem}.reactions span{font-size:.8rem;color:#d5baa1}.overlay{position:fixed;inset:0;z-index:20;background:#07070bcd;display:grid;place-items:center;padding:16px}.tutorial,.finish{position:relative;width:min(100%,520px);max-height:92dvh;overflow:auto}.tutorial ol{padding-left:22px;color:#bdb8c5}.tutorial li{padding-left:4px;margin-bottom:16px;font-size:.95rem}.tutorial strong{color:#eee8df}.close{position:absolute;right:16px;top:13px;border:0;background:none;color:#ddd;font-size:1.8rem}.finish{text-align:center}.finish .players{text-align:left}#notice{display:none;position:fixed;z-index:30;top:10px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#af462e;border-radius:8px;color:white}#notice.show{display:block}@media(max-width:740px){main{padding:15px}.home{grid-template-columns:1fr;gap:25px;padding:30px 0}.home h1{font-size:clamp(3.4rem,13vw,5rem)}.panel{padding:24px}.demo{margin:22px 0}.arena{max-height:47dvh}.game{margin:12px auto}.game .players{margin:10px 0}.game .player{font-size:.75rem;padding:6px 8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Larger, separated directional touch targets. */
.pad{grid-template-columns:repeat(3,58px);gap:12px;padding:8px 4px 14px;flex-shrink:0}
.pad button{height:58px;min-width:58px;border-radius:10px;font-size:1.35rem}
.game-footer{gap:22px;align-items:center;margin-top:18px;margin-bottom:10px}
@media(max-width:740px){
 .game-footer{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:16px;padding-bottom:8px}
 .legend{min-width:100px}
 .game{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
@media(max-width:380px){.game-footer .legend{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.legend small{width:100%;text-align:center}}