/* strokeoff — game cartridge styles. Carved from public/index.html (Stage 1 monolith split).
   Loads after platform.css; selectors are game-prefixed. */
        /* ── MasterPieced UI — mobile-first ── */
        #so-memorize-screen { display:none; position:absolute; inset:0; z-index:55; background:#000; flex-direction:column; align-items:center; overflow:hidden; touch-action:none; }
        #so-mem-header { width:100%; display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 14px 8px; background:rgba(0,0,0,0.9); flex-shrink:0; flex-wrap:wrap; }
        #so-mem-countdown { font-family:monospace; font-size:2.2em; font-weight:900; color:var(--c-brand); min-width:52px; text-shadow:0 0 12px rgba(255,235,59,0.6); }
        #so-mem-info { flex:1; min-width:0; }
        #so-mem-title { font-weight:bold; font-size:0.95em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #so-mem-artist { font-size:0.72em; color:#888; }
        #so-mem-part { font-family:monospace; font-size:0.82em; color:var(--c-brand); background:rgba(255,235,59,0.1); border:1px solid rgba(255,235,59,0.3); border-radius:6px; padding:4px 12px; white-space:nowrap; flex-shrink:0; }
        #so-mem-img-wrap { flex:1; width:100%; overflow:hidden; min-height:0; position:relative; cursor:grab; }
        #so-mem-img-wrap:active { cursor:grabbing; }
        /* Spotlight: a huge box-shadow outside the border darkens everything except the highlighted
           fragment. transform-origin/position match #so-mem-img so pinch-zoom/pan move both in sync. */
        #so-mem-highlight { display:none; position:absolute; transform-origin:0 0; box-sizing:border-box; border:3px solid var(--c-brand); box-shadow:0 0 0 2000px rgba(0,0,0,0.6); pointer-events:none; }
        #so-mem-img { display:block; transform-origin:0 0; touch-action:none; user-select:none; -webkit-user-select:none; position:absolute; }
        #so-mem-zoom-hint { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); color:#888; font-size:0.72em; padding:3px 10px; border-radius:20px; pointer-events:none; white-space:nowrap; }
        #so-mem-footer { width:100%; text-align:center; color:#555; font-size:0.75em; padding:6px; flex-shrink:0; }
        .kick-btn { background:none !important; border:none !important; color:#e57373 !important; cursor:pointer; padding:0 4px !important; font-size:0.8em !important; font-weight:bold; flex-grow:0 !important; min-width:0 !important; opacity:0.7; }
        .kick-btn:hover { opacity:1; }
        #so-screen { display:none; position:absolute; inset:0; z-index:45; background:#050508; overflow:hidden; }
        #so-canvas { position:absolute; left:50%; background:#111; touch-action:none; cursor:crosshair; }
        #so-ref-strip { display:none; position:absolute; top:0; left:0; right:0; overflow:hidden; background:#080810; border-bottom:1px solid #1a2030; z-index:2; }
        #so-ref-img { width:100%; height:100%; object-fit:contain; display:block; cursor:crosshair; }
        #so-ref-part-label { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.88); color:var(--c-brand); font-size:0.72em; font-weight:bold; text-align:center; padding:3px 10px 4px; text-transform:uppercase; letter-spacing:0.5px; pointer-events:none; }
        #so-hud-top { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:3; pointer-events:none; padding:0 12px; color:#fff; }
        .so-theme-box { background:rgba(5,5,10,0.85); border:1px solid #444; border-radius:8px; padding:6px 16px; font-size:1em; font-weight:bold; letter-spacing:1px; text-align:center; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
        .so-part-box { background:rgba(255,235,59,0.1); border:1px solid rgba(255,235,59,0.35); border-radius:8px; padding:4px 14px; font-size:0.82em; color:var(--c-brand); font-family:monospace; letter-spacing:1px; text-align:center; }
        #so-timer { position:absolute; top:calc(8px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); font-family:monospace; font-size:2em; font-weight:bold; color:var(--c-brand); text-shadow:0 0 12px rgba(255,235,59,0.7),2px 2px 2px #000; z-index:3; pointer-events:none; }
        #so-toolbar { position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:rgba(10,10,16,0.9); border:1px solid #333; border-radius:30px; padding:8px 18px; z-index:2; white-space:nowrap; }
        #so-brush-label { font-family:monospace; color:#aaa; font-size:0.8em; min-width:28px; text-align:right; }
        .so-tool-btn { background:rgba(255,255,255,0.07); border:2px solid #444; border-radius:8px; padding:7px 11px; color:#bbb; font-size:0.95em; cursor:pointer; line-height:1; flex-shrink:0; transition:all 0.12s; }
        #so-pen-btn.active  { background:rgba(80,160,255,0.2); border-color:#4fa3ff; color:#7ec8ff; }
        #so-eyedrop-btn.active { background:rgba(80,220,120,0.2); border-color:#50dc78; color:#90ffb0; }
        .game-rules-overlay { display:none; position:absolute; inset:0; z-index:70; background:rgba(0,0,0,0.93); flex-direction:column; align-items:center; justify-content:center; }
        .game-rules-box { background:#0e1117; border:1px solid #2a2f3a; border-radius:16px; padding:28px 22px 22px; max-width:390px; width:92%; display:flex; flex-direction:column; gap:14px; }
        .rules-game-title { font-size:1.25em; font-weight:900; letter-spacing:3px; color:var(--c-brand); text-align:center; }
        .rules-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
        .rules-list li { color:#ccc; font-size:0.88em; line-height:1.5; padding-left:18px; position:relative; }
        .rules-list li::before { content:'▸'; position:absolute; left:0; color:#5a8fcf; }
        .rules-skip-btn { background:var(--c-brand); color:#090b12; border:none; border-radius:12px; padding:13px; font-size:0.95em; font-weight:800; letter-spacing:1px; cursor:pointer; text-transform:uppercase; flex-grow:0; }
        .rules-skip-btn:active { filter:brightness(1.1); }
        #so-host-end-btn { display:none; position:absolute; top:calc(10px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left)); background:rgba(120,20,20,0.85); border:1px solid var(--c-danger); border-radius:8px; color:#ff8a80; font-size:0.78em; font-weight:bold; padding:6px 12px; letter-spacing:1px; cursor:pointer; z-index:4; text-transform:uppercase; }
        @media (min-width: 600px) {
            .so-part-box { font-size:1em; padding:6px 18px; }
            .so-theme-box { font-size:1.05em; }
            #so-hud-top { gap:6px; }
        }
        /* Reveal screen */
        #so-reveal-screen { display:none; position:absolute; inset:0; z-index:46; background:#050508; overflow:hidden; }
        #so-reveal-canvas { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#111; }
        #so-reveal-hud { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; pointer-events:none; color:#fff; font-family:monospace; }
        .so-reveal-player { font-size:1.1em; font-weight:bold; color:var(--c-brand); letter-spacing:2px; }
        #so-reveal-hint { font-size:0.8em; color:#556; }
        /* Vote screen */
        #so-vote-screen { display:none; position:absolute; inset:0; z-index:47; background:rgba(5,5,8,0.95); flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#fff; padding:20px; overflow-y:auto; }
        #so-vote-timer { font-family:monospace; font-size:2em; font-weight:bold; color:var(--c-brand); }
        #so-vote-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:440px; }
        .so-vote-btn { padding:14px 20px; background:rgba(255,255,255,0.07); border:2px solid #444; border-radius:10px; font-weight:bold; font-size:0.9em; cursor:pointer; color:#fff; text-transform:uppercase; transition:background .15s,border-color .15s; }
        .so-vote-btn:not(:disabled):hover,.so-vote-btn:not(:disabled):active { background:rgba(198,40,40,0.3); border-color:var(--c-danger); }
        .so-vote-btn:disabled { opacity:0.5; cursor:default; }
        #so-voters-status { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; font-family:monospace; font-size:0.78em; }
        .so-voter-chip { background:rgba(46,125,50,0.25); border:1px solid #2e7d32; border-radius:12px; padding:3px 10px; color:#81c784; }