:root{--bg: #14002a;--purple: #2b0a4e;--magenta: #ff2d95;--cyan: #00e5ff;--orange: #ff9a3d;--cream: #fff6e8;--font-display: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body{height:100%;height:100dvh;margin:0;background:var(--bg);color:var(--cream);font-family:var(--font-display);overscroll-behavior:none}body{display:flex;flex-direction:column}#shell-top,#shell-bottom,#shell-side{flex:none}#shell-main{flex:1;display:flex;min-height:0}#play-area{flex:1;position:relative;overflow:hidden;min-width:0;touch-action:manipulation}#play-area canvas{display:block}#screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;z-index:2;padding:1rem}#screen-overlay.hidden{display:none}#screen-overlay h1{margin:0;font-size:clamp(2.5rem,9vw,6rem);font-style:italic;letter-spacing:.12em;color:var(--magenta);text-shadow:0 0 18px rgba(255,45,149,.6),3px 3px 0 var(--cyan)}#screen-overlay p{margin:0;font-size:clamp(1rem,2.5vw,1.3rem)}#screen-overlay button,#screen-overlay input{font-family:var(--font-display);font-size:1.1rem;padding:.6em 1.6em;background:transparent;color:var(--cyan);border:2px solid var(--cyan);border-radius:4px}#screen-overlay button{cursor:pointer;letter-spacing:.15em}#screen-overlay button:hover{background:var(--cyan);color:var(--bg)}#screen-overlay input{color:var(--cream);border-color:var(--magenta);text-align:center;text-transform:lowercase}.board{font-family:var(--font-mono);font-size:.95rem;line-height:1.7;white-space:pre;display:flex;gap:4ch}@media(max-width:620px){.board{flex-direction:column;gap:0}}.board .you{color:var(--orange)}#start-board{margin-top:1.5rem}.install-card{position:absolute;top:calc(3.6rem + env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:4;width:min(30rem,calc(100vw - 2rem));display:flex;align-items:center;background:#2b0a4eeb;border:1px solid var(--cyan);border-radius:8px;box-shadow:0 0 18px #00e5ff59;padding:.2rem}#screen-overlay .install-card .install-open{flex:1;display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;background:none;border:none;border-radius:6px;text-align:left;color:var(--cyan);cursor:pointer;letter-spacing:normal}#screen-overlay .install-card .install-open:hover{background:#00e5ff14}.install-glyph{flex:none;display:grid;place-items:center;color:var(--cyan)}.pwa-glyph{width:1.6rem;height:1.6rem;display:block}.install-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.install-text strong{color:var(--magenta);font-style:italic;letter-spacing:.08em;font-size:.95rem}.install-text span{font-family:var(--font-mono);font-size:.78rem;color:var(--cream);opacity:.85}.install-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:1rem}.install-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0016cc}.install-modal-panel{position:relative;width:min(26rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.4rem;background:linear-gradient(160deg,var(--purple),var(--bg));border:2px solid var(--cyan);border-radius:10px;box-shadow:0 0 30px #00e5ff66;text-align:left}.install-modal-panel h2{margin:0;font-style:italic;letter-spacing:.1em;color:var(--magenta);font-size:1.3rem;text-shadow:0 0 12px rgba(255,45,149,.5)}.install-modal-panel>p{margin:0;font-size:.9rem;color:var(--cream);opacity:.9}.install-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;counter-reset:step}.install-steps li{display:flex;align-items:flex-start;gap:.8rem;font-size:.92rem;line-height:1.5}.install-steps .step-n{counter-increment:step;flex:none;width:1.7rem;height:1.7rem;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:50%;font-family:var(--font-mono);color:var(--cyan);font-size:.9rem}.install-steps .step-n:before{content:counter(step)}.install-steps .step-text strong{color:var(--cyan)}.install-steps .pwa-glyph{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em}.install-modal .install-got-it{align-self:center;margin-top:.2rem;font-family:var(--font-display);font-size:1rem;letter-spacing:.15em;padding:.5em 1.8em;background:transparent;color:var(--cyan);border:2px solid var(--cyan);border-radius:4px;cursor:pointer}.install-modal .install-got-it:hover{background:var(--cyan);color:var(--bg)}.name-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}.name-rules li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;line-height:1.4}.name-rules .rule-mark{flex:none;width:1.3rem;text-align:center;font-weight:700}.name-rules .rule-ok{color:var(--cream)}.name-rules .rule-ok .rule-mark{color:var(--cyan)}.name-rules .rule-bad{color:#ff5470;text-shadow:0 0 10px rgba(255,84,112,.5)}.name-rules .rule-bad .rule-mark{color:#ff5470}#mute-button{position:absolute;bottom:calc(.6rem + env(safe-area-inset-bottom));right:calc(1.2rem + env(safe-area-inset-right));z-index:3;width:2.4rem;height:2.4rem;background:#14002a99;color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;font-size:1.1rem;cursor:pointer}#mute-button.muted{color:var(--magenta);border-color:var(--magenta);text-decoration:line-through}#size-button{bottom:calc(.6rem + env(safe-area-inset-bottom));right:calc(4.2rem + env(safe-area-inset-right));font-size:.8rem}#size-button[data-size=small]{font-size:.55rem}#size-button[data-size=large]{font-size:1.15rem}.hud-btn{position:absolute;z-index:3;min-width:2.4rem;height:2.4rem;padding:0 .6rem;background:#14002a99;color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;font-family:var(--font-display);font-size:1.1rem;cursor:pointer}.hud-btn[hidden]{display:none}#pause-button{bottom:calc(.6rem + env(safe-area-inset-bottom));left:calc(1.2rem + env(safe-area-inset-left))}#exit-button{top:calc(.6rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left))}#howto-button{top:calc(.6rem + env(safe-area-inset-top));right:calc(1.2rem + env(safe-area-inset-right))}#rotate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;background:var(--bg);text-align:center}#rotate-overlay.hidden{display:none}#rotate-overlay p{margin:0;font-size:1.2rem;letter-spacing:.15em;color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,.6)}#rotate-overlay a{color:var(--magenta);font-size:.95rem;letter-spacing:.1em;text-decoration:none;border:1px solid var(--magenta);border-radius:4px;padding:.4em 1em}.rotate-phone{width:2.6rem;height:4.4rem;border:3px solid var(--magenta);border-radius:8px;box-shadow:0 0 18px #ff2d9580;animation:rotate-hint 1.6s ease-in-out infinite alternate}@keyframes rotate-hint{0%{transform:rotate(0)}to{transform:rotate(90deg)}}#rotate-overlay[data-orientation=portrait] .rotate-phone{animation-direction:alternate-reverse}