:root{--paper:#fff6ea;--ink:#4a3424;--rose:#e36a4f;--sky:#8ecae6;--gold:#f2c14e;--leaf:#8fce6b;--shadow:0 10px 24px #4a34241f}*{box-sizing:border-box}html,body,#app{height:100%;min-height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 20% 10%, #ffe8c8 0, transparent 32%), radial-gradient(circle at 90% 0, #d9f1ff 0, transparent 28%), var(--paper);font-family:Trebuchet MS,Apple SD Gothic Neo,sans-serif;overflow:auto}button{font:inherit;cursor:pointer;border:0}.shell{max-width:1100px;margin:0 auto;padding:16px 16px 28px}.shell.play-shell,.play-stage{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;overflow:hidden}.play-stage{background:#fff6ea;width:100vw;height:100dvh;position:relative}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.brand{font-size:1.4rem;font-weight:800}.muted{opacity:.72}.card{box-shadow:var(--shadow);background:#ffffffdb;border-radius:28px;padding:22px}.gate h1{margin:0 0 8px;font-size:2rem}.gate p{font-size:1.15rem;line-height:1.55}.row{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.btn{background:var(--gold);color:var(--ink);border-radius:999px;padding:12px 20px;font-weight:800;box-shadow:0 4px #d7a326}.btn.alt{background:var(--sky);box-shadow:0 4px #6aa8c7}.btn.quiet{box-shadow:none;background:#f0e6d6}#app.is-play{height:100%;touch-action:none;overscroll-behavior:none;height:100dvh;overflow:hidden}body:has(.play-stage){height:100%;touch-action:none;overscroll-behavior:none;height:100dvh;overflow:hidden}.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.tile{text-align:left;color:#fff;min-height:120px;box-shadow:var(--shadow);border-radius:22px;padding:16px;font-size:1.15rem;font-weight:800}.stage-card{color:var(--ink);box-shadow:var(--shadow);background:#fff;border-radius:20px;flex-direction:column;gap:8px;padding:12px;display:flex}.thumb{aspect-ratio:3/2;object-fit:cover;background:#f4e7d4;border-radius:14px;width:100%}.done-art{object-fit:contain;background:#fffaf2;border-radius:20px;width:100%;max-height:360px}.diffs{gap:6px;display:flex}.diffs button{background:#f4e7d4;border-radius:999px;flex:1;padding:6px 0;font-weight:800}.diffs button.done{background:var(--leaf)}.play-wrap,.play-stage{position:relative}canvas#board{aspect-ratio:auto;width:100vw;height:100dvh;max-height:none;box-shadow:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff6ea;border-radius:0;display:block}.play-overlay{pointer-events:none;z-index:3;position:absolute;inset:0}.float-left,.float-right{pointer-events:auto;align-items:flex-start;gap:8px;display:flex;position:absolute;top:14px}.float-left{left:14px}.float-right{flex-direction:column;align-items:flex-end;right:14px}.play-title{box-shadow:var(--shadow);background:#fffaf2eb;border-radius:16px;flex-direction:column;padding:8px 12px;line-height:1.2;display:flex}.play-title span{opacity:.7;font-size:.9rem}.play-status{box-shadow:var(--shadow);background:#fffaf2eb;border-radius:16px;max-width:260px;padding:8px 12px;font-weight:700;line-height:1.35}.hud{justify-content:space-between;align-items:center;gap:10px;margin:4px 0 8px;display:flex}.hud .row{margin-top:0}.cam-box{width:168px;height:126px;box-shadow:var(--shadow);background:#1a1a1a;border-radius:14px;flex:0 0 168px;position:relative;overflow:hidden}.cam-box video{object-fit:cover;background:#222;width:100%;height:100%;display:block;transform:scaleX(-1)}.cam-label{color:#fff;text-shadow:0 1px 2px #000;font-size:.8rem;position:absolute;bottom:6px;left:8px}