/* Scout's stage (top of the homepage). Pairs with scout-stage.js. * * Layout never moves when Scout does: the robot column is pinned to the top, * the speech bubble and chat log have fixed heights (they scroll inside), and * every animation is a transform/opacity on its own layer (head > body > nod), * so states blend instead of restarting. */ #scout-stage { --ink: #ece8fb; --bg: #0d0a19; --panel: #0f0b1c; --line: rgba(157,107,255,.35); --accent: #9d6bff; --win: #34d399; --loss: #f87171; --gold: #fbbf24; max-width: 1200px; margin: 24px auto 8px; padding: 0 16px; color: var(--ink); } #scout-stage * { box-sizing: border-box; } #scout-stage .ss-wrap { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 28px; align-items: start; background: radial-gradient(700px 380px at 25% 40%, rgba(157,107,255,.22), transparent 70%), var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 24px; } /* ── the robot ─────────────────────────────────────────────────────────── */ #scout-stage .ss-robot { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; contain: layout paint; --mouth: 0; --mw: 1; --mh: 1; --gx: 0px; --gy: 0px; --px: 0px; --py: 0px; background: #12081f; } #scout-stage .ss-glow { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 45%, rgba(157,107,255,.35), transparent 60%); transform: translate(calc(var(--px) * -1.4), calc(var(--py) * -1.4)); pointer-events: none; } #scout-stage .ss-head { position: absolute; inset: 0; transform: translate(var(--px), var(--py)); will-change: transform; } #scout-stage .ss-body { position: absolute; inset: 0; transform-origin: 50% 70%; animation: ss-breathe 4.6s ease-in-out infinite; transition: transform .5s ease; } #scout-stage .ss-nod { position: absolute; inset: 0; transform-origin: 50% 60%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); } #scout-stage .ss-robot.is-listening .ss-nod { transform: rotate(-4deg) translateY(1.5%); } #scout-stage .ss-robot.do-nod .ss-nod { animation: ss-nod .7s ease-in-out 1; } #scout-stage .ss-robot img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; } @keyframes ss-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.6%) scale(1.008); } } @keyframes ss-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(0) translateY(2.2%); } 60% { transform: translateY(-.6%); } } /* visor overlays (inside the head so they move with it) */ #scout-stage .ss-visor { position: absolute; left: 27.5%; top: 22%; width: 47.5%; height: 35%; border-radius: 42% / 46%; overflow: hidden; pointer-events: none; } #scout-stage .ss-tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, background 1.2s ease; mix-blend-mode: screen; } #scout-stage .ss-robot.mood-upbeat .ss-tint { opacity: .16; background: radial-gradient(circle, var(--win), transparent 70%); } #scout-stage .ss-robot.mood-careful .ss-tint { opacity: .16; background: radial-gradient(circle, var(--gold), transparent 70%); } #scout-stage .ss-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; } #scout-stage .ss-flash.win { background: radial-gradient(circle, var(--win), transparent 70%); animation: ss-flash 1.6s ease-out 2; } #scout-stage .ss-flash.loss { background: radial-gradient(circle, var(--loss), transparent 70%); animation: ss-flash 1.6s ease-out 1; } #scout-stage .ss-flash.new { background: radial-gradient(circle, var(--gold), transparent 70%); animation: ss-flash 1.4s ease-out 2; } @keyframes ss-flash { 0% { opacity: 0; } 20% { opacity: .75; } 100% { opacity: 0; } } #scout-stage .ss-scan { position: absolute; top: 0; bottom: 0; width: 18%; left: -20%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(214,170,255,.55), transparent); transition: opacity .3s; } #scout-stage .ss-robot.is-thinking .ss-scan { opacity: 1; animation: ss-scan 1.1s linear infinite; } @keyframes ss-scan { from { left: -20%; } to { left: 105%; } } #scout-stage .ss-glint { position: absolute; top: -20%; left: -40%; width: 22%; height: 140%; transform: rotate(20deg); opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); } #scout-stage .ss-robot.do-glint .ss-glint { animation: ss-glint .9s ease-out 1; } @keyframes ss-glint { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 100% { left: 120%; opacity: 0; } } /* eyes: masks hide the painted eyes, then Scout's own eyes sit on top */ #scout-stage .ss-mask { position: absolute; top: 31.3%; width: 12%; height: 15%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #0b0614 62%, rgba(11,6,20,.85) 78%, transparent); } #scout-stage .ss-mask.l { left: 35.6%; } #scout-stage .ss-mask.r { left: 54%; } #scout-stage .ss-eyes { position: absolute; left: 37.6%; top: 32.9%; width: 26.4%; height: 10.6%; pointer-events: none; transform: translate(var(--gx), var(--gy)); transition: transform .12s linear; } #scout-stage .ss-lids { position: absolute; inset: 0; transition: transform .07s ease-in; transform-origin: 50% 55%; } #scout-stage .ss-robot.blink .ss-lids { transform: scaleY(.08); } #scout-stage .ss-eye { position: absolute; top: 0; width: 30.3%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff3ff, #e3a8ff 45%, rgba(190,110,255,.55) 70%, transparent 74%); box-shadow: 0 0 18px rgba(214,140,255,.65); transition: transform .25s ease, border-radius .25s ease, opacity .6s ease, clip-path .25s ease; clip-path: inset(0 0 0 0 round 50%); opacity: .95; } #scout-stage .ss-eye.l { left: 0; } #scout-stage .ss-eye.r { right: 0; } #scout-stage .ss-robot.ex-happy .ss-eye, #scout-stage .ss-robot.ex-wink .ss-eye.l { clip-path: inset(0 0 52% 0 round 50%); transform: translateY(18%); } #scout-stage .ss-robot.ex-wink .ss-eye.r { clip-path: inset(46% 0 46% 0 round 50%); } #scout-stage .ss-robot.ex-sad .ss-eye { clip-path: inset(38% 0 0 0 round 50%); opacity: .7; } #scout-stage .ss-robot.ex-sad .ss-eye.l { transform: rotate(-14deg); } #scout-stage .ss-robot.ex-sad .ss-eye.r { transform: rotate(14deg); } #scout-stage .ss-robot.ex-focused .ss-eye { clip-path: inset(30% 0 30% 0 round 40%); } #scout-stage .ss-robot.ex-excited .ss-eye { transform: scale(1.18); } #scout-stage .ss-robot.is-sleepy .ss-eye { clip-path: inset(44% 0 40% 0 round 40%); opacity: .4; } #scout-stage .ss-robot.is-sleepy .ss-body { animation-duration: 7s; } #scout-stage .ss-robot.tod-morning .ss-eye { filter: brightness(1.15); } #scout-stage .ss-shades { position: absolute; left: 34.5%; top: 31%; width: 32%; height: 13.5%; border-radius: 40% 40% 48% 48% / 30% 30% 70% 70%; background: linear-gradient(160deg, rgba(255,255,255,.35) 0 8%, #06030b 14% 100%); box-shadow: 0 0 0 2px #2a1b44; opacity: 0; transform: translateY(-30%); transition: opacity .6s ease, transform .6s ease; pointer-events: none; } #scout-stage .ss-robot.tod-night:not(.is-sleepy) .ss-shades { opacity: .93; transform: translateY(0); } /* mouth: a light bar on the visor; level + shape (visemes) set per frame */ #scout-stage .ss-mouth { position: absolute; left: 50%; top: 49.2%; width: calc(15% * var(--mw)); height: 2.2%; transform: translate(-50%, -50%) scaleY(calc(.35 + var(--mouth) * 2.6 * var(--mh))); border-radius: 999px; background: linear-gradient(90deg, rgba(214,140,255,.15), rgba(255,236,255,.95), rgba(214,140,255,.15)); box-shadow: 0 0 calc(4px + var(--mouth) * 22px) rgba(210,140,255,calc(.25 + var(--mouth) * .75)); opacity: calc(.18 + var(--mouth) * .82); mix-blend-mode: screen; pointer-events: none; } /* chest star pulses with the voice */ #scout-stage .ss-star { position: absolute; left: 50%; top: 83%; width: 20%; height: 20%; transform: translate(-50%, -50%) scale(calc(.85 + var(--mouth) * .5)); background: radial-gradient(circle, rgba(255,240,255,.9), rgba(200,120,255,.35) 35%, transparent 65%); opacity: calc(.1 + var(--mouth) * .9); mix-blend-mode: screen; pointer-events: none; } /* floating numbers, gestures, idle props */ #scout-stage .ss-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #scout-stage .ss-float { position: absolute; padding: 4px 9px; border-radius: 999px; background: rgba(13,8,26,.85); border: 1px solid var(--accent); font: 700 14px/1 ui-monospace, 'JetBrains Mono', monospace; animation: ss-float 2.6s ease-out forwards; white-space: nowrap; } @keyframes ss-float { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } } #scout-stage .ss-pop { position: absolute; font-size: clamp(28px, 4vw, 42px); animation: ss-pop 1.8s ease-out forwards; } @keyframes ss-pop { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-14px); } } #scout-stage .ss-badge { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(8,6,16,.75); font-size: 12px; } #scout-stage .ss-zzz { position: absolute; right: 20%; top: 18%; font: 700 18px/1 inherit; opacity: 0; transition: opacity 1s; } #scout-stage .ss-robot.is-sleepy .ss-zzz { opacity: .8; animation: ss-float 3s ease-in-out infinite; } /* ── the right side ────────────────────────────────────────────────────── */ #scout-stage .ss-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } #scout-stage .ss-name { font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1; } #scout-stage .ss-light { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; opacity: .8; } #scout-stage .ss-light i { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; display: inline-block; } #scout-stage .ss-light.ok i { background: var(--win); box-shadow: 0 0 8px var(--win); } #scout-stage .ss-light.warn i { background: var(--gold); } #scout-stage .ss-light.bad i { background: var(--loss); } #scout-stage .ss-role { opacity: .75; margin: 6px 0 12px; } #scout-stage .ss-bubble { background: #150f27; border: 1px solid rgba(157,107,255,.4); border-radius: 18px; padding: 14px 16px; height: 196px; overflow-y: auto; overscroll-behavior: contain; } #scout-stage .ss-say { margin: 0 0 8px; font-size: 14px; line-height: 1.5; opacity: .85; } #scout-stage .ss-bets { font-size: 17px; font-weight: 600; margin: 0; opacity: 1; } #scout-stage .ss-sent { transition: background .2s, color .2s; border-radius: 4px; } #scout-stage .ss-sent.now { background: rgba(157,107,255,.28); color: #fff; } #scout-stage .ss-controls, #scout-stage .ss-chips, #scout-stage .ss-interests { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } #scout-stage .ss-btn { padding: 11px 16px; border-radius: 12px; border: 1px solid rgba(157,107,255,.55); background: #1c1434; color: inherit; font: 600 15px/1 inherit; cursor: pointer; } #scout-stage .ss-primary { background: linear-gradient(135deg, #8b5cf6, #6d28d9); border-color: transparent; font-size: 16px; } #scout-stage .ss-btn[aria-pressed="true"] { background: #2d1f55; border-color: #c4a5ff; } #scout-stage .ss-btn:disabled { opacity: .6; cursor: default; } #scout-stage button:focus-visible, #scout-stage input:focus-visible, #scout-stage select:focus-visible { outline: 2px solid #c4a5ff; outline-offset: 2px; } #scout-stage .ss-form { display: flex; gap: 8px; margin-top: 12px; } #scout-stage .ss-form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(157,107,255,.4); background: #07050f; color: inherit; font-size: 15px; } #scout-stage .ss-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(157,107,255,.35); background: transparent; color: inherit; font-size: 13px; cursor: pointer; } #scout-stage .ss-chip[aria-pressed="true"] { background: rgba(157,107,255,.25); border-color: #c4a5ff; } #scout-stage .ss-interests span { font-size: 13px; opacity: .75; align-self: center; } #scout-stage .ss-log { margin-top: 12px; height: 170px; overflow-y: auto; overscroll-behavior: contain; font-size: 15px; line-height: 1.5; background: rgba(7,5,15,.5); border-radius: 12px; padding: 8px 12px; } #scout-stage .ss-line { margin: 6px 0; } #scout-stage .ss-agents { margin-top: 6px; min-height: 17px; font: 12px/1.4 ui-monospace, 'JetBrains Mono', monospace; opacity: .65; } #scout-stage details.ss-settings { margin-top: 10px; font-size: 14px; } #scout-stage details.ss-settings summary { cursor: pointer; opacity: .85; } #scout-stage .ss-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; } #scout-stage .ss-set label { display: grid; gap: 4px; font-size: 12px; opacity: .9; } #scout-stage .ss-set select, #scout-stage .ss-set input[type=range] { width: 100%; background: #07050f; color: inherit; border: 1px solid rgba(157,107,255,.4); border-radius: 8px; padding: 6px; } #scout-stage .ss-set .ss-check { display: flex; gap: 6px; align-items: center; } /* ── below the stage ───────────────────────────────────────────────────── */ #scout-stage .ss-status { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; } #scout-stage .ss-stat { background: var(--panel); border: 1px solid rgba(157,107,255,.25); border-radius: 12px; padding: 10px 12px; } #scout-stage .ss-stat span { display: block; font-size: 12px; opacity: .7; } #scout-stage .ss-stat b { font-size: 18px; } #scout-stage .ss-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #scout-stage .ss-panel { background: var(--panel); border: 1px solid rgba(157,107,255,.25); border-radius: 16px; padding: 16px; min-width: 0; } #scout-stage .ss-panel h3 { margin: 0 0 10px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #scout-stage .ss-panel h3 small { font-weight: 400; opacity: .65; font-size: 12px; } #scout-stage .ss-wide { grid-column: 1 / -1; } #scout-stage .ss-bet { padding: 10px 0; border-top: 1px solid rgba(157,107,255,.15); } #scout-stage .ss-bet:first-child { border-top: 0; } #scout-stage .ss-bet-q { font-weight: 600; } #scout-stage .ss-bet-f, #scout-stage .ss-bet-s { font-size: 13px; opacity: .8; margin-top: 3px; } #scout-stage .ss-meter { position: relative; height: 8px; border-radius: 999px; background: rgba(157,107,255,.15); margin: 8px 0 2px; } #scout-stage .ss-meter b, #scout-stage .ss-meter i { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; } #scout-stage .ss-meter b { background: var(--win); } #scout-stage .ss-meter i { background: #e5e7eb; } #scout-stage .ss-meter-k { display: flex; gap: 12px; font-size: 11px; opacity: .75; } #scout-stage .ss-meter-k b { color: var(--win); } #scout-stage .ss-bet-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } #scout-stage .ss-mini { padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(157,107,255,.35); background: transparent; color: inherit; font-size: 12px; cursor: pointer; } #scout-stage .ss-mini[aria-pressed="true"] { background: rgba(157,107,255,.25); } #scout-stage .ss-story { margin-top: 8px; padding-left: 12px; border-left: 2px solid rgba(157,107,255,.4); font-size: 13px; } #scout-stage .ss-story p { margin: 4px 0; } #scout-stage .ss-chart { width: 100%; height: 64px; display: block; margin-top: 8px; } #scout-stage .ss-act { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; font-size: 14px; border-top: 1px solid rgba(157,107,255,.12); } #scout-stage .ss-act:first-child { border-top: 0; } #scout-stage .ss-kind { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid currentColor; opacity: .85; } #scout-stage .ss-kind.rule { color: #93c5fd; } #scout-stage .ss-kind.agent { color: #c4b5fd; } #scout-stage .ss-kind.veto { color: var(--gold); } #scout-stage .ss-kind.decides { color: var(--win); } #scout-stage .ss-kind.explains { color: #c4b5fd; } #scout-stage .ss-empty { opacity: .7; margin: 0; } #scout-stage .ss-recap { font-size: 14px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(157,107,255,.12); } #scout-stage .ss-recap[hidden] { display: none; } /* ── "Meet Scout's team" pop-up ────────────────────────────────────────── */ #scout-team-dlg { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border-radius: 18px; border: 1px solid rgba(157,107,255,.5); background: #0f0b1c; color: #ece8fb; } #scout-team-dlg::backdrop { background: rgba(5,4,12,.75); } #scout-team-dlg .td-head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #0f0b1c; border-bottom: 1px solid rgba(157,107,255,.25); } #scout-team-dlg h2 { margin: 0; font-size: 20px; } #scout-team-dlg .td-close { margin-left: auto; background: none; border: 0; color: inherit; font-size: 26px; cursor: pointer; line-height: 1; } #scout-team-dlg .td-body { padding: 16px 18px 20px; overflow: auto; } #scout-team-dlg .td-intro { margin: 0 0 14px; opacity: .85; line-height: 1.5; } #scout-team-dlg .td-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } #scout-team-dlg .td-card { border: 1px solid rgba(157,107,255,.3); border-radius: 14px; padding: 14px; background: #140f26; } #scout-team-dlg .td-card h3 { margin: 0 0 2px; font-size: 16px; } #scout-team-dlg .td-role { font-size: 13px; opacity: .7; margin-bottom: 8px; } #scout-team-dlg .td-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; } #scout-team-dlg .td-tools { font: 11px/1.5 ui-monospace, 'JetBrains Mono', monospace; opacity: .7; } #scout-team-dlg .td-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } #scout-team-dlg .td-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; } #scout-team-dlg .td-badge.decides { color: #34d399; } #scout-team-dlg .td-badge.veto { color: #fbbf24; } #scout-team-dlg .td-badge.explains { color: #c4b5fd; } #scout-team-dlg .td-badge.kind { color: #93c5fd; } #scout-team-dlg .td-last { margin-top: 14px; font-size: 13px; opacity: .85; } @media (max-width: 860px) { #scout-stage .ss-wrap, #scout-stage .ss-panels { grid-template-columns: 1fr; } #scout-stage .ss-robot { max-width: 320px; width: 100%; margin: 0 auto; } #scout-stage .ss-status { grid-template-columns: repeat(2, 1fr); } #scout-stage .ss-act { grid-template-columns: 1fr; gap: 2px; } } @media (prefers-reduced-motion: reduce) { #scout-stage .ss-body, #scout-stage .ss-scan, #scout-stage .ss-float, #scout-stage .ss-pop, #scout-stage .ss-zzz, #scout-stage .ss-flash, #scout-stage .ss-glint, #scout-stage .ss-nod { animation: none !important; } #scout-stage .ss-head, #scout-stage .ss-glow, #scout-stage .ss-eyes { transform: none !important; } } /* Windows High Contrast / forced colors: keep every control and badge visible with system colors. */ @media (forced-colors: active) { #scout-stage .ss-btn, #scout-stage .ss-chip, #scout-stage .ss-mini, #scout-stage .ss-kind, #scout-team-dlg .td-badge, #scout-stage .ss-panel, #scout-stage .ss-bubble, #scout-team-dlg .td-card { border: 1px solid CanvasText; forced-color-adjust: auto; } #scout-stage .ss-sent.now { background: Highlight; color: HighlightText; forced-color-adjust: none; } #scout-stage .ss-meter { background: GrayText; forced-color-adjust: none; } #scout-stage .ss-meter b { background: Highlight; } #scout-stage .ss-meter i { background: CanvasText; } #scout-stage .ss-chart path { stroke: Highlight; } #scout-stage .ss-light i { forced-color-adjust: none; border: 1px solid CanvasText; } } /* ── Video Scout (scout-video.js): a LemonSlice avatar where the robot was ─────── */ #scout-stage .sv-box { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; } #scout-stage .sv-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #07050f; border: 1px solid transparent; background: linear-gradient(#07050f, #07050f) padding-box, linear-gradient(135deg, rgba(196,165,255,.9), rgba(109,40,217,.8), rgba(34,211,238,.6)) border-box; box-shadow: 0 0 28px rgba(157,107,255,.22), 0 18px 50px rgba(0,0,0,.45); display: grid; place-items: center; } #scout-stage .sv-stage lemon-slice-widget { display: block; width: 100%; height: 100%; } #scout-stage .sv-poster { position: absolute; inset: 0; display: grid; place-items: center; } #scout-stage .sv-poster[hidden] { display: none; } #scout-stage .sv-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; } #scout-stage .sv-start { position: relative; z-index: 1; padding: 14px 24px; border-radius: 14px; border: 0; cursor: pointer; color: #fff; font: 700 18px/1 inherit; background: linear-gradient(135deg, #8b5cf6, #6d28d9 60%, #0ea5e9); box-shadow: 0 0 24px rgba(139,92,246,.5); } #scout-stage .sv-poster-note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(8,6,16,.78); font-size: 12px; line-height: 1.4; text-align: center; } #scout-stage .sv-speaker { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; cursor: pointer; color: #f1ecff; font: 600 14px/1 inherit; background: rgba(13,8,26,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(196,165,255,.4); } #scout-stage .sv-speaker[hidden] { display: none; } #scout-stage .sv-speaker.is-on { border-color: rgba(34,211,238,.6); box-shadow: 0 0 14px rgba(34,211,238,.25); } #scout-stage .sv-speaker svg, #scout-stage .sv-icon svg { width: 20px; height: 20px; } #scout-stage .sv-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; } #scout-stage .sv-speaker.is-on .sv-eq { display: inline-flex; } #scout-stage .sv-eq i { width: 3px; border-radius: 2px; background: linear-gradient(#34d399, #22d3ee); animation: sv-eq 1s ease-in-out infinite; } #scout-stage .sv-eq i:nth-child(2) { animation-delay: .12s; } #scout-stage .sv-eq i:nth-child(3) { animation-delay: .24s; } #scout-stage .sv-eq i:nth-child(4) { animation-delay: .36s; } #scout-stage .sv-eq i:nth-child(5) { animation-delay: .48s; } @keyframes sv-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } } #scout-stage .sv-bar { display: flex; align-items: center; gap: 8px; } #scout-stage .sv-status { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(52,211,153,.45); color: #34d399; font-size: 13px; font-weight: 600; background: rgba(8,6,16,.6); } #scout-stage .sv-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } #scout-stage .sv-status[data-state="wait"] { color: #22d3ee; border-color: rgba(34,211,238,.45); } #scout-stage .sv-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 13px; cursor: pointer; color: #f1ecff; background: rgba(28,20,52,.8); border: 1px solid rgba(157,107,255,.5); } #scout-stage .sv-icon[hidden] { display: none; } #scout-stage .sv-icon:hover { border-color: #c4a5ff; box-shadow: 0 0 12px rgba(157,107,255,.3); } #scout-stage .sv-mic.is-on { color: #fff; border: 0; background: linear-gradient(135deg, #0ea5e9, #6d28d9); box-shadow: 0 0 16px rgba(14,165,233,.35); } #scout-stage .sv-badge { position: absolute; left: 12px; top: 12px; bottom: auto; z-index: 2; } #scout-stage .sv-box.is-full { position: fixed; inset: 0; z-index: 9999; padding: 16px; background: #05030c; } #scout-stage .sv-box.is-full .sv-stage { flex: 1; aspect-ratio: auto; } #scout-stage .sv-box:fullscreen { padding: 16px; background: #05030c; } #scout-stage .sv-box:fullscreen .sv-stage { flex: 1; aspect-ratio: auto; } @media (prefers-reduced-motion: reduce) { #scout-stage .sv-eq i { animation: none; } } @media (forced-colors: active) { #scout-stage .sv-stage, #scout-stage .sv-icon, #scout-stage .sv-speaker, #scout-stage .sv-status, #scout-stage .sv-start { border: 1px solid CanvasText; } } /* ── Season 2 casino board (always next to Scout, always "play money") ─────────── */ #scout-stage .ss-board { margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: linear-gradient(#0d0a19, #0d0a19) padding-box, linear-gradient(135deg, #fbbf24, #9d6bff 50%, #22d3ee) border-box; box-shadow: 0 0 22px rgba(251,191,36,.18); } #scout-stage .ss-board-flag { font: 800 13px/1 ui-monospace, 'JetBrains Mono', monospace; letter-spacing: .12em; color: #fbbf24; text-align: center; padding: 6px 8px; border-radius: 8px; background: rgba(251,191,36,.1); border: 1px dashed rgba(251,191,36,.6); } #scout-stage .ss-board-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; } #scout-stage .ss-tile { padding: 8px 10px; border-radius: 10px; background: #07050f; border: 1px solid rgba(157,107,255,.3); min-width: 0; } #scout-stage .ss-tile span { display: block; font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #scout-stage .ss-tile b { display: block; font: 800 20px/1.2 ui-monospace, 'JetBrains Mono', monospace; color: #f1ecff; } #scout-stage .ss-tile b.up { color: #34d399; } #scout-stage .ss-tile b.down { color: #f87171; } #scout-stage .ss-board-meter { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(157,107,255,.18); overflow: hidden; } #scout-stage .ss-board-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fbbf24, #9d6bff); transition: width .6s; } #scout-stage .ss-board-note { margin-top: 8px; font-size: 12px; opacity: .75; line-height: 1.4; } @media (max-width: 860px) { #scout-stage .ss-board-grid { grid-template-columns: repeat(2, 1fr); } } @media (forced-colors: active) { #scout-stage .ss-board, #scout-stage .ss-tile, #scout-stage .ss-board-flag { border: 1px solid CanvasText; } #scout-stage .ss-board-meter i { background: Highlight; forced-color-adjust: none; } } #scout-stage .ss-parody { margin: 6px 2px 0; font-size: 11px; line-height: 1.4; opacity: .65; } #scout-stage .sv-quick { display: flex; gap: 6px; flex-wrap: wrap; } #scout-stage .ss-board-live { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.45); font: 12px/1.5 ui-monospace, 'JetBrains Mono', monospace; } #scout-stage .ss-board-live b { color: #34d399; letter-spacing: .08em; } #scout-stage .ss-board-live[hidden] { display: none; } #scout-stage .sv-notice { position: absolute; left: 12px; right: 12px; top: 50px; z-index: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(13,8,26,.9); border: 1px solid #fbbf24; font-size: 13px; } #scout-stage .sv-notice[hidden] { display: none; } /* ── Face v2 (10/2): code-drawn LED face like the reference; the painted eyes stay masked ── */ #scout-stage .ss-face2 { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; forced-color-adjust: none; } #scout-stage .ss-robot.face2 .ss-eyes, #scout-stage .ss-robot.face2 .ss-mouth, #scout-stage .ss-robot.face2 .ss-shades { display: none; } #scout-stage .ss-face2 .ss-halo { stroke: rgba(192,132,252,.45); stroke-width: .35; } #scout-stage .ss-e2-fill, #scout-stage .ss-m2 { fill: url(#ssDots); stroke: #f3e1ff; stroke-width: .35; stroke-linejoin: round; } #scout-stage .ss-brow { fill: none; stroke: #e9d5ff; stroke-width: .55; stroke-linecap: round; transition: transform .15s ease-out; } #scout-stage .ss-e2 { transform-box: fill-box; transform-origin: 50% 80%; transition: transform .09s ease-in, opacity .3s; } #scout-stage .ss-robot.face2.blink .ss-e2 { transform: scaleY(.28); } /* blink: crescents flatten */ #scout-stage .ss-robot.face2.ex-sad .ss-e2 { transform: scaleY(-.7) translateY(-30%); opacity: .75; } #scout-stage .ss-robot.face2.ex-focused .ss-e2 { transform: scaleY(.55); } #scout-stage .ss-robot.face2.ex-excited .ss-e2 { transform: scale(1.12); } #scout-stage .ss-robot.face2.ex-wink .ss-e2.r { transform: scaleY(.18); } #scout-stage .ss-robot.face2.is-sleepy .ss-e2 { transform: scaleY(.22); opacity: .45; } /* ── Hands (10/2): pearl-white, at the bottom of the frame, never over the face ── */ #scout-stage .ss-hands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; forced-color-adjust: none; } #scout-stage .ss-hand { transition: transform .45s cubic-bezier(.4,.1,.3,1); } #scout-stage .ss-hand.l { transform: translate(15px, 0); } #scout-stage .ss-hand-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.4,.1,.3,1); } #scout-stage .ss-wrist { fill: #a855f7; } #scout-stage .ss-fingers { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s ease; } /* positions (SVG user units: % of the frame) */ #scout-stage .ss-hand.l { transform: translate(14px, 104px); } #scout-stage .ss-hand.r { transform: translate(86px, 104px); } #scout-stage .ss-robot.g-idle .ss-hand.l { transform: translate(14px, 100px); animation: ss-sway 5s ease-in-out infinite; } #scout-stage .ss-robot.g-idle .ss-hand.r { transform: translate(86px, 100px); animation: ss-sway 5s ease-in-out -2.5s infinite; } @keyframes ss-sway { 50% { translate: 0 -1px; } } #scout-stage .ss-robot.g-listen .ss-hand.l { transform: translate(16px, 103px); } #scout-stage .ss-robot.g-listen .ss-hand.r { transform: translate(84px, 103px); } #scout-stage .ss-robot.g-explain .ss-hand.l { transform: translate(17px, calc(94px - var(--beat, 0) * 4px)) rotate(-12deg); } #scout-stage .ss-robot.g-explain .ss-hand.r { transform: translate(83px, calc(94px - var(--beat, 0) * 4px)) rotate(12deg); } #scout-stage .ss-robot.g-count .ss-hand.r { transform: translate(80px, 88px) rotate(-6deg); } #scout-stage .ss-robot.g-count .ss-fingers { animation: ss-tap .35s ease-in-out 3; } @keyframes ss-tap { 50% { transform: scaleY(.82); } } #scout-stage .ss-robot.g-fist .ss-hand.r { transform: translate(80px, 82px) rotate(-8deg); } #scout-stage .ss-robot.g-fist .ss-hand.r .ss-fingers { transform: scaleY(.45); } #scout-stage .ss-robot.g-fist .ss-hand.r .ss-hand-in { animation: ss-pump .4s ease-in-out 3; } @keyframes ss-pump { 50% { transform: translateY(-3px); } } #scout-stage .ss-robot.g-shrug .ss-hand.l { transform: translate(10px, 90px) rotate(-38deg); } #scout-stage .ss-robot.g-shrug .ss-hand.r { transform: translate(90px, 90px) rotate(38deg); } #scout-stage .ss-robot.g-point-r .ss-hand.r { transform: translate(86px, 80px) rotate(55deg); } #scout-stage .ss-robot.g-point-l .ss-hand.l { transform: translate(14px, 80px) rotate(-55deg); } @media (prefers-reduced-motion: reduce) { #scout-stage .ss-hand, #scout-stage .ss-hand-in, #scout-stage .ss-fingers, #scout-stage .ss-e2 { transition: none !important; animation: none !important; } #scout-stage .ss-robot .ss-hand.l { transform: translate(14px, 100px) !important; } #scout-stage .ss-robot .ss-hand.r { transform: translate(86px, 100px) !important; } } /* ── Stats scoreboard (10/2): big neon numbers; light text core, colored glow = decoration only ── */ #scout-stage .nz-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid rgba(246,196,83,.55); background: linear-gradient(155deg, #17121f 0%, #050407 46%, #0d0a14 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(168,85,247,.12); } #scout-stage .nz-tag { grid-column: 1 / -1; justify-self: start; padding: 3px 10px; border-radius: 999px; font: 800 11px/1.4 ui-monospace, 'JetBrains Mono', monospace; letter-spacing: .16em; color: #fde68a; border: 1px solid rgba(246,196,83,.7); text-shadow: 0 0 8px rgba(246,196,83,.7); } #scout-stage .nz-stat { min-width: 0; } #scout-stage .nz-stat b { display: block; font: 800 clamp(26px, 2.6vw, 40px)/1.05 system-ui, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #f5f3ff; text-shadow: 0 0 6px rgba(192,132,252,.9), 0 0 18px rgba(168,85,247,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #scout-stage .nz-stat span, #scout-stage .nz-sub { display: block; margin-top: 3px; font-size: 12px; color: #c8c3d5; letter-spacing: .04em; } #scout-stage .nz-bank { grid-column: 1 / -1; } #scout-stage .nz-bank b { font-size: clamp(36px, 4vw, 60px); color: #fffbeb; text-shadow: 0 0 8px rgba(255,217,120,.95), 0 0 26px rgba(246,196,83,.6); } #scout-stage .nz-stat b.up { color: #ecfdf5; text-shadow: 0 0 6px rgba(52,211,153,.95), 0 0 20px rgba(16,185,129,.7); } #scout-stage .nz-stat b.down { color: #fff1f2; text-shadow: 0 0 6px rgba(244,63,94,.95), 0 0 20px rgba(225,29,72,.7); } .kal.casino #scout-stage .cz-cards { display: none; } /* the scoreboard replaces the small stat cards */ /* ── Every bet: polished black panels with a diagonal sheen and a thin gold edge ── */ #scout-stage .nz-bets .ss-list { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; } #scout-stage .nz-row { position: relative; overflow: hidden; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(246,196,83,.45); background: linear-gradient(160deg, #1a1622 0%, #060508 38%, #0b0a10 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } #scout-stage .nz-row::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%); } #scout-stage .nz-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #scout-stage .nz-match { font-weight: 700; font-size: 16px; color: #f8fafc; } #scout-stage .nz-nums { margin-top: 6px; font: 600 15px/1.4 ui-monospace, 'JetBrains Mono', monospace; color: #e9d5ff; text-shadow: 0 0 10px rgba(168,85,247,.45); } #scout-stage .nz-badge { flex: 0 0 auto; padding: 3px 10px; border-radius: 8px; font: 800 12px/1.3 ui-monospace, monospace; letter-spacing: .1em; color: #fff; border: 1px solid currentColor; } #scout-stage .nz-open { color: #e9d5ff; background: rgba(168,85,247,.22); text-shadow: 0 0 8px #a855f7; } #scout-stage .nz-won { color: #d1fae5; background: rgba(16,185,129,.22); text-shadow: 0 0 8px #34d399; } #scout-stage .nz-lost { color: #ffe4e6; background: rgba(244,63,94,.22); text-shadow: 0 0 8px #f43f5e; } #scout-stage .nz-push { color: #e5e7eb; background: rgba(148,163,184,.2); } #scout-stage .nz-low { padding: 2px 8px; border-radius: 6px; font: 700 11px/1.3 ui-monospace, monospace; letter-spacing: .08em; color: #fde68a; border: 1px solid rgba(246,196,83,.6); } @media (max-width: 800px) { #scout-stage .nz-stat b { font-size: clamp(24px, 7vw, 34px); } #scout-stage .nz-bank b { font-size: clamp(32px, 9vw, 40px); } } @media (forced-colors: active) { #scout-stage .nz-board, #scout-stage .nz-row, #scout-stage .nz-badge, #scout-stage .nz-low { border: 1px solid CanvasText; } #scout-stage .nz-stat b, #scout-stage .nz-nums { text-shadow: none; } } #scout-stage .nz-fan { color: #fbcfe8; border-color: rgba(244,114,182,.7); }