/* tacostealth — game cartridge styles. Carved from public/index.html (Stage 1 monolith split).
   Loads after platform.css; selectors are game-prefixed. */
        /* ── Sleight of Hands: spotlight points feedback ── */
        #vp-points-hud.vp-pop { animation: vp-pop 0.35s ease-out; }
        @keyframes vp-pop { 0%{ transform:scale(1);} 35%{ transform:scale(1.55); color:#fff; text-shadow:0 0 14px rgba(255,235,59,1),1px 1px 2px #000;} 100%{ transform:scale(1);} }
        .vp-float { position:fixed; top:calc(86px + env(safe-area-inset-top)); right:18px; z-index:11; font-family:monospace; font-weight:900; font-size:1.6em; color:var(--c-gold); text-shadow:0 0 12px rgba(255,200,0,0.95),1px 1px 2px #000; pointer-events:none; animation: vp-float-up 1.1s ease-out forwards; }
        @keyframes vp-float-up { 0%{ opacity:0; transform:translateY(0) scale(0.6);} 18%{opacity:1;} 100%{ opacity:0; transform:translateY(-70px) scale(1.35);} }

        /* ── TacoStealth UI ── */
        button, .btn-custom { padding:10px; font-weight:bold; cursor:pointer; border:none; border-radius:6px; background:#333; color:#fff; font-size:0.85em; flex-grow:1; text-align:center; text-transform:uppercase; user-select:none; -webkit-user-select:none; }
        .btn-custom { background:#2e7d32; }
        .cam-load { flex:1; background:#37474f; color:#fff; padding:8px 4px; font-size:0.72em; font-weight:bold; text-align:center; border-radius:6px; cursor:pointer; }
        .cam-load:active { background:#455a64; }

        /* Floating right-side action buttons (mid-screen) */
        #float-tools { position:absolute; right:calc(8px + env(safe-area-inset-right)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:11; }
        #float-tools button { width:58px; min-height:52px; flex-grow:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; background:rgba(25,25,30,0.92); border:1px solid #555; border-radius:12px; color:#fff; font-size:1.25em; box-shadow:0 2px 8px rgba(0,0,0,0.6); cursor:pointer; }
        #float-tools button small { font-size:9px; font-weight:bold; letter-spacing:0.5px; opacity:0.85; line-height:1.5; text-transform:uppercase; }
        #modeBtn { display:flex; flex-direction:column; gap:3px; padding:3px; background:rgba(25,25,30,0.92); border:1px solid #555; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.6); }
        /* #float-tools button (id selector) outranks .ts-mode-seg — restate the state colors at higher specificity for the rail copy */
        #float-tools #modeBtn button { width:52px; min-height:40px; padding:5px 4px; font-size:1.05em; border-radius:9px; box-shadow:none; touch-action:none; opacity:0.45; background:#26262e; border:1px solid #444; }
        #float-tools #modeBtn button.active { opacity:1; }
        #float-tools #modeBtn button.seg-move.active { background:#1565c0; border-color:#7CC4FF; box-shadow:0 0 12px rgba(21,101,192,0.7); }
        #float-tools #modeBtn button.seg-paint.active { background:#2e7d32; border-color:#7CFC9A; box-shadow:0 0 12px rgba(46,160,67,0.6); }
        #eyedropperBtn.drop-active { background:#1e88e5; border-color:#90CAF9; }
        /* Persistent bottom dock — brush slider always visible */
        #ui-bar { position:absolute; bottom:calc(8px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:calc(100% - 80px); max-width:380px; display:flex; align-items:center; gap:8px; background:rgba(18,18,28,0.94); padding:8px 14px; border-radius:14px; border:1px solid #3a4a66; z-index:10; box-shadow:0 -2px 14px rgba(0,0,0,0.7); }
        #brush-preview { border-radius:50%; background:#fff; box-shadow:0 0 0 2px #000, 0 0 0 4px rgba(255,255,255,0.8); flex-shrink:0; transition:width 0.1s,height 0.1s; }
        #brushLabel { color:#fff; font-size:14px; font-weight:bold; font-family:monospace; flex-shrink:0; min-width:26px; text-align:right; text-shadow:0 1px 4px rgba(0,0,0,0.9); }
        #brushSize { flex:1; min-width:0; accent-color:#7CC4FF; }
        #drawerToggle { flex-shrink:0; width:36px; height:36px; padding:0; font-size:1.1em; background:var(--c-border); border:1px solid #3a4a66; border-radius:8px; }
        /* Slide-up drawer */
        #ts-drawer { position:absolute; bottom:calc(60px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:calc(100% - 80px); max-width:360px; display:flex; flex-direction:column; gap:8px; background:rgba(10,10,20,0.97); border:1px solid #3a4a66; border-radius:16px; padding:12px; z-index:12; box-shadow:0 -4px 24px rgba(0,0,0,0.8); }
        .ts-drawer-row { display:flex; gap:7px; align-items:center; }
        .ts-drawer-row > * { flex:1 1 0; }
        .ts-drawer-row button { min-height:44px; padding:9px 6px; font-size:0.78em; font-weight:bold; background:rgba(255,255,255,0.07); border:1px solid #3a4a66; border-radius:10px; color:#fff; cursor:pointer; letter-spacing:0.3px; text-transform:uppercase; }
        .ts-drawer-row button:active { background:rgba(255,255,255,0.15); }
        #colorSwatch { min-height:44px; border:2px solid #fff; border-radius:10px; background:#ff0000; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.6); }
        #undoBtn { background:rgba(198,40,40,0.3) !important; border-color:var(--c-danger) !important; color:#ff8a80 !important; }
        #lockBtn.locked, #railReadyBtn.locked { background:#2e7d32; border-color:#7CFC9A; }
        /* Reactions inside drawer */
        #react-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
        #react-row > * { flex:0 0 auto; }
        #react-row button { width:40px; height:40px; font-size:1.1em; padding:0; min-height:0; background:rgba(255,255,255,0.07); border:1px solid #333; border-radius:8px; letter-spacing:0; }
        .modal { position:absolute; top:15%; left:50%; transform:translateX(-50%); background:rgba(20,20,25,0.98); padding:20px; border-radius:12px; border:1px solid #555; display:flex; flex-direction:column; align-items:center; gap:15px; z-index:55; box-shadow:0 10px 40px rgba(0,0,0,0.9); width:280px; max-height:90vh; overflow-y:auto; color:white; }
        #scoreboard.in-entry { position:static; top:auto; right:auto; bottom:auto; left:auto; transform:none; min-width:0; width:100%; max-width:360px; box-shadow:none; margin:10px auto 0; background:rgba(0,0,0,0.25); }
        #scoreboard.in-entry #score-list { max-height:26vh; }
        .modal-title { font-weight:bold; font-size:1.2em; border-bottom:2px solid #444; padding-bottom:5px; width:100%; text-align:center; }
        .setting-row { display:flex; justify-content:space-between; width:100%; align-items:center; }
        .setting-row input { width:60px; padding:5px; border-radius:4px; border:none; text-align:center; font-weight:bold; }
        #wheelCanvas { border-radius:50%; cursor:crosshair; box-shadow:0 0 10px #000; background:#000; }
        #seeker-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index:20; flex-direction:column; align-items:center; justify-content:center; gap:20px; display:none; }
        #seeker-overlay .boot-title { color:#00ff41; font-family:monospace; font-size:1.8em; font-weight:bold; letter-spacing:4px; animation:pulse 1s infinite; }
        #seeker-overlay .boot-timer { color:#00ff41; font-family:monospace; font-size:5em; font-weight:bold; text-shadow:0 0 20px #00ff41; }
        #ts-flip-cvs { border:1px solid rgba(0,255,65,0.35); border-radius:12px; touch-action:none; cursor:pointer; max-height:34vh; }
        #ts-flip-score { color:#00ff41; font-family:monospace; font-size:0.8em; letter-spacing:2px; text-align:center; }
        #seeker-overlay .boot-sub { color:#006622; font-family:monospace; font-size:0.85em; letter-spacing:2px; }
        @keyframes scanline { 0% { top:-10%; } 100% { top:110%; } }
        #seeker-overlay::after { content:''; position:absolute; left:0; width:100%; height:4px; background:rgba(0,255,65,0.15); animation:scanline 3s linear infinite; pointer-events:none; }
        .emoji-bubble { position:absolute; display:flex; flex-direction:column; align-items:center; z-index:11; pointer-events:none; font-size:2.2em; animation:eb-float 3s ease-out forwards; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
        .eb-name { font-size:0.28em; color:#fff; font-family:monospace; background:rgba(0,0,0,0.75); padding:2px 6px; border-radius:3px; white-space:nowrap; margin-top:2px; letter-spacing:1px; }
        @keyframes eb-float { 0%{opacity:1;transform:translateY(0) scale(1)} 25%{transform:translateY(-30px) scale(1.25)} 80%{opacity:1} 100%{opacity:0;transform:translateY(-220px) scale(0.7)} }

        #reconnect-overlay { display:none; position:fixed; inset:0; z-index:600; background:rgba(0,0,8,0.88); flex-direction:column; align-items:center; justify-content:center; color:#fff; font-family:monospace; text-align:center; }
        /* ── Sleight of Hands radial menu ── */
        #hand-menu { position:absolute; z-index:15; display:none; pointer-events:auto; }
        .hand-emoji-btn { position:absolute; font-size:24px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(15,15,20,0.92); border:2px solid #444; cursor:pointer; user-select:none; -webkit-user-select:none; transition:border-color .1s,background .1s; }
        .hand-emoji-btn.selected { border-color:var(--c-brand); background:rgba(255,235,59,0.18); }
        .hand-emoji-btn:active { transform:scale(0.85); }