:root { --g-bg:#f2f0ea; --g-paper:#fbfaf6; --g-ink:#11121a; --g-muted:#74747e; --g-line:rgba(17,18,26,.14); --g-control-bg:rgba(17,18,26,.06); --g-hero-bg:#171820; --g-hero-ink:#f5f3ec; --g-lime:#c8ff3d; --g-blue:#5367ff; --g-success:#36d58a; --g-danger:#ff6673; --g-warning:#f2b84b; }
body[data-theme="dark"] { --g-bg:#0b0c11; --g-paper:#15161d; --g-ink:#f5f3ec; --g-muted:#9b9ba6; --g-line:rgba(255,255,255,.14); --g-control-bg:rgba(255,255,255,.07); --g-hero-bg:#171820; --g-hero-ink:#f5f3ec; }
body { background:var(--g-bg)!important; color:var(--g-ink)!important; }
.app-shell { width:min(1480px,calc(100% - 40px))!important; padding:24px 0 40px!important; }
.theme-toggle { top:22px!important; right:22px!important; display:grid!important; place-items:center!important; width:48px!important; height:48px!important; padding:0!important; border:1px solid rgba(255,255,255,.2)!important; border-radius:16px!important; background:var(--g-blue)!important; color:#fff!important; box-shadow:0 12px 30px rgba(39,54,210,.34)!important; transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease!important; }
body[data-theme="dark"] .theme-toggle { border-color:rgba(255,255,255,.2)!important; background:#4f63ff!important; color:#fff!important; box-shadow:0 12px 30px rgba(39,54,210,.34)!important; }
body[data-theme="light"] .theme-toggle { border-color:rgba(17,18,26,.12)!important; background:#171820!important; color:#c8ff3d!important; box-shadow:0 12px 28px rgba(17,18,26,.18)!important; }
body[data-theme="dark"] .theme-toggle:hover,body[data-theme="light"] .theme-toggle:hover { transform:translateY(-2px) rotate(-3deg)!important; border-color:rgba(200,255,61,.45)!important; background:#c8ff3d!important; color:#11121a!important; box-shadow:0 17px 36px rgba(0,0,0,.3),0 0 24px rgba(200,255,61,.2)!important; }
.theme-toggle #theme-toggle-icon { display:grid!important; place-items:center!important; width:21px!important; height:21px!important; }
.theme-toggle #theme-toggle-icon svg { width:21px!important; height:21px!important; }
.theme-toggle #theme-toggle-text { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
#auth-view .auth-shell { gap:16px!important; }
#auth-view .auth-hero { box-sizing:border-box; min-height:250px!important; padding:26px 28px!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:36px 120px 36px 36px!important; background:radial-gradient(circle at 88% -70%,rgba(83,103,255,.24),transparent 42%),linear-gradient(135deg,#1a1b24 0%,#12131a 76%)!important; color:#f5f3ec!important; box-shadow:0 20px 48px rgba(0,0,0,.2)!important; }
#auth-view .auth-hero :where(h1,p) { margin:0!important; }
#auth-view .auth-hero__copy { align-content:start; }
#auth-view .auth-hero .hero-note { min-height:3em; }
body[data-theme="dark"] #auth-view .auth-hero { background:radial-gradient(circle at 88% -70%,rgba(83,103,255,.24),transparent 42%),linear-gradient(135deg,#1a1b24 0%,#12131a 76%)!important; color:#f5f3ec!important; }
#auth-view .auth-hero::after { width:440px; height:440px; right:-220px; top:-190px; border:1px solid rgba(83,103,255,.24); opacity:.45; box-shadow:0 0 0 70px rgba(83,103,255,.09),0 0 0 140px rgba(83,103,255,.045); }
#auth-view .auth-hero .eyebrow { color:var(--g-blue)!important; }
#auth-view .auth-hero h1 { color:inherit!important; font-family:"Manrope",sans-serif!important; font-size:clamp(2.4rem,4.6vw,4rem)!important; font-weight:800!important; line-height:.95!important; letter-spacing:-.055em!important; text-transform:uppercase; }
#auth-view .auth-hero .hero-note { color:inherit!important; font-weight:600; opacity:.78; }
#auth-view .auth-hero__chips { gap:7px!important; }
#auth-view .auth-hero__chips span { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 11px!important; border:1px solid color-mix(in srgb,currentColor 11%,transparent)!important; border-radius:10px!important; background:color-mix(in srgb,currentColor 7%,transparent)!important; color:inherit!important; font-size:.76rem!important; font-weight:750!important; letter-spacing:.015em; box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 6%,transparent); opacity:.88; }
#auth-view .auth-hero__chips span::before { content:""; width:6px; height:6px; flex:0 0 6px; border-radius:2px; background:var(--g-blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--g-blue) 14%,transparent); }
#auth-view .auth-hero__aside { display:grid!important; grid-template-rows:auto 1fr; align-self:stretch!important; justify-items:stretch!important; gap:18px; padding-top:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:inherit!important; opacity:1; }
#auth-view .auth-hero__actions { display:flex; align-items:center; justify-content:flex-start; justify-self:start; width:max-content; gap:14px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:inherit; }
#auth-view .auth-hero__aside .ghost-link { position:static!important; order:initial; justify-self:auto!important; width:auto!important; min-width:0!important; min-height:40px!important; height:40px; gap:8px; padding:0 14px!important; border:1px solid color-mix(in srgb,currentColor 18%,transparent)!important; background:color-mix(in srgb,currentColor 7%,transparent)!important; color:inherit!important; border-radius:12px!important; box-shadow:none!important; opacity:.86; }
#auth-view .auth-hero__aside .ghost-link:hover { background:color-mix(in srgb,currentColor 13%,transparent)!important; opacity:1; }
#auth-view .auth-hero__aside .ghost-link > span:last-child { display:inline!important; font-size:.82rem; font-weight:750; }
#auth-view .auth-hero__aside p { align-self:end; box-sizing:border-box; width:100%; min-height:4.5em; max-width:none!important; margin:0!important; padding:4px 0 4px 14px!important; border:0!important; border-left:3px solid var(--g-blue)!important; border-radius:0!important; background:transparent!important; color:inherit!important; font-size:.92rem; font-weight:600; line-height:1.5!important; text-align:left!important; box-shadow:none!important; backdrop-filter:none!important; opacity:.76; }
#auth-view .auth-hero__aside p::after { display:none!important; }
#auth-view .streamer-toggle { min-height:40px!important; height:40px; padding:0!important; gap:10px!important; border:0!important; border-radius:0!important; background:transparent!important; color:inherit!important; box-shadow:none!important; opacity:.8; }
#auth-view .streamer-toggle:hover,#auth-view .streamer-toggle:active,#auth-view .streamer-toggle.is-active { background:transparent!important; color:inherit!important; border:0!important; box-shadow:none!important; opacity:1; }
#auth-view .streamer-toggle__label { font-size:.82rem!important; font-weight:700!important; }
#auth-view .streamer-toggle__switch { width:40px!important; height:22px!important; flex-basis:40px!important; border:1px solid color-mix(in srgb,currentColor 12%,transparent); background:color-mix(in srgb,currentColor 20%,transparent)!important; }
#auth-view .streamer-toggle__switch::after { top:3px!important; left:3px!important; width:16px!important; height:16px!important; background:currentColor!important; box-shadow:0 1px 4px rgba(0,0,0,.16)!important; }
#auth-view .streamer-toggle.is-active .streamer-toggle__switch { background:var(--g-blue)!important; }
#auth-view .streamer-toggle.is-active .streamer-toggle__switch::after { transform:translateX(18px)!important; background:#fff!important; }
#auth-view .auth-grid { gap:16px!important; }
#auth-view .auth-card { border:1px solid var(--g-line)!important; border-radius:30px!important; background:var(--g-paper)!important; box-shadow:none!important; }
#auth-view .auth-card::before { color:var(--g-ink)!important; opacity:.055; }
#auth-view .auth-card:first-child,#auth-view .auth-card:last-child { background-image:none!important; }
#auth-view .auth-card .panel__kicker { color:var(--g-blue)!important; }
#auth-view .auth-card h2 { font-size:clamp(1.8rem,3vw,3rem)!important; letter-spacing:-.055em; }
#auth-view .mode-row { display:inline-flex; width:max-content; gap:7px; flex-wrap:nowrap; padding:0; border:0; border-radius:0; background:transparent; }
#auth-view .mode-chip { min-height:40px; padding:0 15px; border:1px solid transparent!important; border-radius:12px!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; box-shadow:none!important; opacity:.76; }
#auth-view .mode-chip:hover { border-color:var(--g-line)!important; background:var(--g-control-bg)!important; opacity:1; }
#auth-view .mode-chip.is-active,body[data-theme="dark"] #auth-view .mode-chip.is-active { background:var(--g-blue)!important; border-color:var(--g-blue)!important; color:#fff!important; box-shadow:0 7px 16px rgba(83,103,255,.24)!important; opacity:1; }
#auth-view :where(input,select,textarea) { min-height:56px!important; border:0!important; border-bottom:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
#auth-view :where(.primary-button,.accent-button) { min-height:58px!important; border-radius:999px!important; color:#11121a!important; }
#auth-view .primary-button { background:var(--g-lime)!important; box-shadow:none!important; }
#auth-view .accent-button { background:var(--g-blue)!important; color:#fff!important; box-shadow:none!important; }

/* Match 3 leaderboard */
#auth-view .leaderboard-card { position:relative; overflow:hidden; margin-top:0!important; padding:22px!important; border:1px solid var(--g-line)!important; border-radius:28px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--g-blue) 4%,var(--g-paper)),var(--g-paper) 58%)!important; color:var(--g-ink)!important; box-shadow:none!important; }
#auth-view .leaderboard-card::before { content:""; position:absolute; inset:0 auto auto 22px; width:72px; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--g-blue),var(--g-lime)); }
#auth-view .leaderboard-card__head { margin-bottom:16px; }
#auth-view .leaderboard-card__head .panel__kicker { margin-bottom:6px; color:var(--g-blue)!important; }
#auth-view .leaderboard-card__head h2 { color:var(--g-ink)!important; font-family:"Manrope",sans-serif; font-size:clamp(1.55rem,2.2vw,2.15rem); font-weight:800; line-height:1; letter-spacing:-.045em; }
#auth-view .leaderboard-card__badge { min-height:36px; padding:0 13px; border:1px solid color-mix(in srgb,var(--g-blue) 28%,transparent)!important; border-radius:12px; background:color-mix(in srgb,var(--g-blue) 11%,transparent)!important; color:var(--g-blue)!important; font-size:.78rem; font-weight:800; }
#auth-view .leaderboard-card__badge::before { content:""; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--g-blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--g-blue) 13%,transparent); }
#auth-view .leaderboard-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#auth-view .leaderboard-row { position:relative; overflow:hidden; grid-template-columns:38px minmax(0,1fr) auto; min-height:70px; padding:12px 15px 12px 14px; border:1px solid transparent; border-radius:17px; background:var(--g-control-bg)!important; color:var(--g-ink); transition:transform .18s ease,border-color .18s ease,background-color .18s ease; }
#auth-view .leaderboard-row::before { content:""; position:absolute; inset:10px auto 10px 0; width:3px; border-radius:0 3px 3px 0; background:color-mix(in srgb,var(--g-blue) 60%,transparent); }
#auth-view .leaderboard-row:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--g-blue) 22%,transparent); background:color-mix(in srgb,var(--g-blue) 8%,var(--g-control-bg))!important; }
#auth-view .leaderboard-row:first-child { grid-column:1/-1; grid-template-columns:44px minmax(0,1fr) auto; min-height:82px; padding:15px 18px 15px 16px; border-color:color-mix(in srgb,var(--g-lime) 24%,transparent); background:linear-gradient(100deg,color-mix(in srgb,var(--g-lime) 12%,var(--g-paper)),color-mix(in srgb,var(--g-blue) 7%,var(--g-paper)))!important; }
#auth-view .leaderboard-row:first-child::before { inset:12px auto 12px 0; width:4px; background:var(--g-lime); box-shadow:0 0 18px color-mix(in srgb,var(--g-lime) 40%,transparent); }
#auth-view .leaderboard-row__place { width:38px; height:38px; border-radius:12px; background:color-mix(in srgb,var(--g-blue) 17%,var(--g-paper))!important; color:var(--g-blue)!important; font-size:.9rem; font-weight:800; box-shadow:none; }
#auth-view .leaderboard-row:first-child .leaderboard-row__place { width:44px; height:44px; border-radius:14px; background:var(--g-lime)!important; color:#11121a!important; box-shadow:0 8px 20px color-mix(in srgb,var(--g-lime) 20%,transparent); }
#auth-view .leaderboard-row:nth-child(2) .leaderboard-row__place { background:var(--g-blue)!important; color:#fff!important; }
#auth-view .leaderboard-row:nth-child(3) .leaderboard-row__place { background:color-mix(in srgb,var(--g-blue) 26%,var(--g-paper))!important; color:var(--g-ink)!important; }
#auth-view .leaderboard-row__meta { gap:4px; }
#auth-view .leaderboard-row__meta strong { color:var(--g-ink)!important; font-size:1rem; font-weight:800; }
#auth-view .leaderboard-row:first-child .leaderboard-row__meta strong { font-size:1.08rem; }
#auth-view .leaderboard-row__meta span { color:var(--g-muted)!important; font-size:.82rem; }
#auth-view .leaderboard-row__score { min-width:92px; color:var(--g-ink)!important; font-size:1.22rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
#auth-view .leaderboard-row:first-child .leaderboard-row__score { color:var(--g-blue)!important; font-size:clamp(1.45rem,2.4vw,2rem); }
#auth-view .leaderboard-empty { padding:18px; border:1px dashed color-mix(in srgb,var(--g-blue) 26%,var(--g-line)); border-radius:16px; background:color-mix(in srgb,var(--g-blue) 5%,transparent); color:var(--g-muted)!important; text-align:center; }
/* Shared in-game design system */
:where(.room-view,.game-view):not([hidden]) { display:grid!important; gap:16px!important; color:var(--g-ink); }
:where(.room-view,.game-view) .topbar { position:relative; isolation:isolate; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:16px!important; overflow:hidden; padding:26px 30px!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:30px 86px 30px 30px!important; background:radial-gradient(circle at 88% -90%,rgba(83,103,255,.22),transparent 42%),linear-gradient(135deg,#1a1b24 0%,#12131a 76%)!important; color:#f5f3ec!important; box-shadow:0 16px 40px rgba(0,0,0,.18)!important; }
:where(.room-view,.game-view) .topbar::after { content:""; position:absolute; z-index:-1; width:330px; height:330px; right:-170px; top:-150px; border:1px solid rgba(83,103,255,.24); border-radius:50%; opacity:.45; box-shadow:0 0 0 54px rgba(83,103,255,.09),0 0 0 108px rgba(83,103,255,.045); pointer-events:none; }
:where(.room-view,.game-view) .topbar > * { position:relative; z-index:1; }
:where(.room-view,.game-view) .topbar > :first-child { min-width:0; }
:where(.room-view,.game-view) .topbar :where(.eyebrow,.panel__kicker) { color:var(--g-blue)!important; }
:where(.room-view,.game-view) .topbar h2 { color:inherit!important; font-family:"Manrope",sans-serif!important; font-size:clamp(1.8rem,3.2vw,3rem)!important; font-weight:800!important; line-height:1!important; letter-spacing:-.055em!important; text-transform:uppercase; }
:where(.room-view,.game-view) .topbar :where(.topbar__subtitle,.topbar__note) { color:inherit!important; font-weight:600; opacity:.62; }
:where(.room-view,.game-view) .topbar__line { justify-content:flex-start!important; gap:10px!important; }
:where(.room-view,.game-view) .topbar :where(.code-chip,.status-pill,.turn-chip,.icon-chip,.ghost-button) { border:1px solid color-mix(in srgb,currentColor 14%,transparent)!important; background:color-mix(in srgb,currentColor 7%,transparent)!important; color:inherit!important; box-shadow:none!important; }
:where(.room-view,.game-view) .topbar :where(.icon-chip,.ghost-button):hover { background:color-mix(in srgb,currentColor 13%,transparent)!important; }
:where(.room-view,.game-view) .topbar .code-chip { min-height:42px; border-radius:12px!important; }
:where(.room-view,.game-view) .topbar .icon-chip { width:42px!important; height:42px!important; border-radius:12px!important; }
:where(.room-view,.game-view) .topbar__actions { display:flex!important; width:auto!important; align-items:center!important; justify-content:flex-end!important; align-self:center!important; gap:8px!important; flex-wrap:wrap!important; }
:where(.room-view,.game-view) .topbar__actions > * { flex:0 0 auto!important; width:auto!important; }
:where(.room-view,.game-view) .topbar__actions .ghost-button { min-height:42px!important; padding-inline:16px!important; border-radius:12px!important; }
:where(.room-view,.game-view) .topbar__actions #leave-room { min-width:0!important; }

:where(.room-view,.game-view) :where(.compact-layout,.game-layout,.layout,.board-layout,.spyfall-layout) { gap:16px!important; align-items:stretch; }
:where(.room-view,.game-view) .panel:not(.topbar) { border:1px solid var(--g-line)!important; border-radius:28px!important; background:var(--g-paper)!important; color:var(--g-ink)!important; box-shadow:none!important; backdrop-filter:none!important; }
:where(.room-view,.game-view) :where(.panel--sidebar,.panel--game,.side-panel,.arena-panel,.opponents-panel,.board-panel,.sidebar,.main-panel,.spyfall-side) { padding:22px!important; }
:where(.room-view,.game-view) :where(.panel__kicker,.eyebrow) { color:var(--g-blue)!important; }
:where(.room-view,.game-view) :where(.panel__head,.game-header,.arena-head,.board-head,.board-header,.main-panel__head) h3 { color:var(--g-ink)!important; font-size:clamp(1.35rem,2vw,2rem)!important; letter-spacing:-.045em!important; }
:where(.room-view,.game-view) :where(.panel__head,.game-header,.arena-head,.board-head,.board-header,.main-panel__head) { margin-bottom:18px!important; }

:where(.room-view,.game-view) :where(.team-tile,.score-row,.words-panel,.feed,.stat-box,.status-strip article,.controls-card,.role-card,.clue-box,.accusation-box,.location-board,.lobby-start-box) { border:0!important; border-radius:18px!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; box-shadow:none!important; backdrop-filter:none!important; }
:where(.room-view,.game-view) :where(.team-tile,.score-row,.stat-box,.status-strip article,.role-card,.clue-box,.accusation-box,.location-board,.lobby-start-box) { padding:15px!important; }
:where(.room-view,.game-view) :where(.words-panel,.feed,.controls-card) { padding:17px!important; }
:where(.room-view,.game-view) :where(.team-lobby,.scoreboard,.players-list,.opponents-grid,.teams-grid,.slots-grid,.location-grid) { gap:10px!important; }
:where(.room-view,.game-view) :where(.team-tile__members,.score-row__meta,.words-panel__status,.word-card__hint,.topbar__subtitle,.topbar__note,.status-pill,.main-panel__meta) { color:var(--g-muted)!important; }

:where(.room-view,.game-view) :where(input,select,textarea) { min-height:46px; border:1px solid transparent!important; border-radius:12px!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; box-shadow:none!important; }
:where(.room-view,.game-view) :where(input,select,textarea):focus { border-color:color-mix(in srgb,var(--g-blue) 60%,transparent)!important; outline:3px solid color-mix(in srgb,var(--g-blue) 16%,transparent)!important; }
:where(.room-view,.game-view) :where(.primary-button,.accent-button,.ghost-button,.action-button,.team-join,.team-action,.clue-form button,.guess-actions button) { min-height:46px; border-radius:12px!important; box-shadow:none!important; }
:where(.room-view,.game-view) .primary-button { border-color:var(--g-lime)!important; background:var(--g-lime)!important; color:#11121a!important; }
:where(.room-view,.game-view) :where(.accent-button,.action-button--accent) { border-color:var(--g-blue)!important; background:var(--g-blue)!important; color:#fff!important; }
:where(.room-view,.game-view) :where(.ghost-button,.action-button:not(.action-button--accent),.team-join,.team-action) { border:1px solid transparent!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; }
:where(.room-view,.game-view) :where(.ghost-button,.action-button:not(.action-button--accent),.team-join,.team-action):hover { border-color:var(--g-line)!important; }
:where(.room-view,.game-view) button:disabled { filter:none!important; opacity:.42!important; }

.invite-card[data-shared-invite] { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid color-mix(in srgb,var(--g-blue) 22%,transparent); border-radius:16px; background:color-mix(in srgb,var(--g-blue) 9%,transparent); }
.invite-card[data-shared-invite] .invite-card__icon { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:var(--g-blue); color:#fff; }
.invite-card[data-shared-invite] .invite-card__icon svg { width:21px; height:21px; }
.invite-card[data-shared-invite] .invite-card__copy { display:grid; gap:2px; min-width:0; color:var(--g-muted); font-size:.78rem; font-weight:700; }
.invite-card[data-shared-invite] .invite-card__copy strong { color:var(--g-ink); font-size:1rem; letter-spacing:.12em; }
.invite-card[data-shared-invite] .invite-card__change { min-width:0!important; min-height:36px!important; padding:0 11px!important; border:0!important; border-radius:10px!important; background:color-mix(in srgb,var(--g-blue) 13%,transparent)!important; color:var(--g-blue)!important; font-size:.75rem; font-weight:800; box-shadow:none!important; transform:none!important; }
.invite-card[data-shared-invite] .invite-card__change:hover { background:color-mix(in srgb,var(--g-blue) 21%,transparent)!important; filter:none!important; transform:none!important; }
@media (max-width:520px) {
  .invite-card[data-shared-invite] { grid-template-columns:38px minmax(0,1fr); }
  .invite-card[data-shared-invite] .invite-card__icon { width:38px; height:38px; }
  .invite-card[data-shared-invite] .invite-card__change { grid-column:2; justify-self:start; }
}

:where(.room-view,.game-view) .timer { min-width:96px; padding:10px 15px!important; border:0!important; border-radius:12px!important; background:var(--g-blue)!important; color:#fff!important; font-size:1rem!important; letter-spacing:.08em!important; box-shadow:none!important; }
:where(.room-view,.game-view) .word-card { position:relative; overflow:hidden; min-height:220px; border:0!important; border-radius:24px 68px 24px 24px!important; background:var(--g-hero-bg)!important; color:var(--g-hero-ink)!important; box-shadow:none!important; }
:where(.room-view,.game-view) .word-card::after { content:""; position:absolute; width:220px; height:220px; right:-120px; top:-105px; border:1px solid currentColor; border-radius:50%; opacity:.06; box-shadow:0 0 0 38px currentColor,0 0 0 76px currentColor; pointer-events:none; }
:where(.room-view,.game-view) .word-card > * { position:relative; z-index:1; }
:where(.room-view,.game-view) .word-card :where(.word-card__team,.word-card__word) { color:inherit!important; }
:where(.room-view,.game-view) .word-card :where(.word-card__player,.word-card__hint) { color:inherit!important; opacity:.62; }
:where(.room-view,.game-view) .word-card__word { font-size:clamp(2.35rem,5vw,5rem)!important; letter-spacing:-.055em!important; }
:where(.room-view,.game-view) .controls { gap:8px!important; }
:where(.room-view,.game-view) .controls > button { min-width:0!important; }
:where(.room-view,.game-view) .event-log { gap:7px!important; }
:where(.room-view,.game-view) .event-log li { border:0!important; border-radius:12px!important; background:color-mix(in srgb,var(--g-paper) 64%,transparent)!important; }
:where(.room-view,.game-view) .winner-banner { border:0!important; border-radius:16px!important; background:color-mix(in srgb,var(--g-lime) 24%,var(--g-paper))!important; color:var(--g-ink)!important; }

:where(.room-view,.game-view) .panel--sidebar { position:relative; overflow:hidden; }
:where(.room-view,.game-view) .panel--sidebar::before { content:""!important; position:absolute!important; inset:0 auto auto 24px!important; width:58px!important; height:4px!important; border-radius:0 0 4px 4px!important; background:var(--g-blue)!important; }
:where(.room-view,.game-view) :where(.board-wrap,.board-stage,.arena-stage,.match-board,.main-board) { border-color:var(--g-line)!important; box-shadow:none!important; }
:where(.room-view,.game-view) :where(.modal__card,.help-section,.packs-list__item) { border:1px solid var(--g-line)!important; border-radius:20px!important; background:var(--g-paper)!important; color:var(--g-ink)!important; box-shadow:none!important; }

/* Game-specific surfaces */
body .theme-toggle { border:1px solid color-mix(in srgb,var(--g-hero-ink) 14%,transparent)!important; background:var(--g-hero-bg)!important; color:var(--g-hero-ink)!important; box-shadow:0 10px 28px rgba(0,0,0,.12)!important; }
:where(.room-view,.game-view) #room-code { padding:0!important; border:0!important; background:transparent!important; color:inherit!important; box-shadow:none!important; }
:where(.room-view,.game-view) .score-row__name { min-width:max-content; white-space:nowrap; }

.tetris-shell .game-layout { grid-template-columns:258px minmax(520px,620px) 258px!important; justify-content:center; }
.tetris-shell .game-layout.game-layout--compact { grid-template-columns:258px minmax(520px,620px)!important; }
.tetris-shell .game-layout--compact .opponents-panel { display:none!important; }
.tetris-shell :where(.team-card,.opponent-card) { border:0!important; border-radius:18px!important; background:var(--g-control-bg)!important; box-shadow:none!important; }
.tetris-shell .teams-grid { gap:9px; }
.tetris-shell .team-card { --team-accent:#ff8a2e; position:relative; min-height:108px; gap:7px; padding:13px 13px 12px 16px!important; overflow:hidden; border:1px solid color-mix(in srgb,var(--team-accent) 25%,transparent)!important; background:linear-gradient(135deg,color-mix(in srgb,var(--team-accent) 11%,var(--g-control-bg)),var(--g-control-bg) 72%)!important; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.tetris-shell .team-card--green { --team-accent:#2ed5c4; }
.tetris-shell .team-card::before { content:""; position:absolute; inset:14px auto 14px 0; width:3px; border-radius:0 3px 3px 0; background:var(--team-accent); }
.tetris-shell .team-card__title { display:inline-flex; align-items:center; gap:8px; color:var(--team-accent)!important; }
.tetris-shell .team-card__title::before { content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,var(--team-accent) 13%,transparent); }
.tetris-shell .team-card__members { color:var(--g-muted)!important; }
.tetris-shell .team-card .team-member--self { color:var(--team-accent)!important; }
.tetris-shell .team-card .team-join { width:38px!important; min-width:38px!important; height:38px!important; min-height:38px!important; padding:0!important; border:1px solid color-mix(in srgb,var(--team-accent) 34%,transparent)!important; border-radius:12px!important; background:color-mix(in srgb,var(--team-accent) 14%,transparent)!important; color:var(--team-accent)!important; }
.tetris-shell .team-card .team-join:not(:disabled):hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--team-accent) 62%,transparent)!important; background:color-mix(in srgb,var(--team-accent) 22%,transparent)!important; }
.tetris-shell .teams-grid:not(:has(.team-join--leave)) .team-join:not(:disabled) { box-shadow:0 0 0 3px color-mix(in srgb,var(--team-accent) 13%,transparent)!important; }
.tetris-shell .team-card__footer span { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--g-success) 13%,transparent); color:var(--g-success); font-size:.65rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.tetris-shell #start-match { border-radius:14px!important; }
.tetris-shell #start-match:disabled { border:1px solid color-mix(in srgb,var(--g-lime) 12%,transparent)!important; background:color-mix(in srgb,var(--g-lime) 16%,var(--g-control-bg))!important; color:color-mix(in srgb,var(--g-ink) 56%,transparent)!important; opacity:1!important; }
.tetris-shell .controls-card--keys { display:grid; gap:13px; padding:14px!important; border:1px solid var(--g-line)!important; border-radius:18px!important; background:color-mix(in srgb,var(--g-control-bg) 76%,var(--g-paper))!important; }
.tetris-shell .controls-card__title { display:flex; align-items:center; gap:9px; }
.tetris-shell .controls-card__icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:10px; background:color-mix(in srgb,var(--g-blue) 14%,transparent); color:var(--g-blue); }
.tetris-shell .controls-card__icon svg { width:17px; height:17px; }
.tetris-shell .control-list { display:grid; gap:7px; }
.tetris-shell .control-row { display:flex; align-items:center; justify-content:space-between; min-width:0; gap:8px; }
.tetris-shell .control-row > span:last-child { color:var(--g-muted); font-size:.72rem; font-weight:700; white-space:nowrap; }
.tetris-shell .control-keys { display:flex; align-items:center; gap:4px; min-width:0; }
.tetris-shell .control-keys em { color:var(--g-muted); font-size:.58rem; font-style:normal; }
.tetris-shell .control-keys kbd { display:inline-grid; place-items:center; min-width:25px; height:25px; padding:0 6px; border:1px solid var(--g-line); border-bottom-color:color-mix(in srgb,var(--g-ink) 28%,transparent); border-radius:7px; background:var(--g-paper); color:var(--g-ink); font:800 .7rem/1 "Manrope",sans-serif; box-shadow:0 2px 0 color-mix(in srgb,var(--g-ink) 10%,transparent); }
.tetris-shell .control-keys .control-key--wide { min-width:52px; font-size:.62rem; }
.tetris-shell .arena-stage { width:max-content; max-width:100%; margin-inline:auto; grid-template-columns:300px 168px!important; justify-content:center; gap:12px!important; border:0!important; border-radius:22px!important; background:transparent!important; }
.tetris-shell .board-stack { justify-self:stretch; }
.tetris-shell .main-board { width:300px!important; max-width:100%; }
.tetris-shell .stats-panel { height:600px; grid-template-columns:1fr!important; grid-template-rows:176px; grid-auto-rows:1fr; gap:8px!important; }
.tetris-shell .stats-panel .stat-box { position:relative; min-width:0; padding:13px 14px!important; align-content:space-between; overflow:hidden; border:1px solid var(--g-line)!important; border-radius:16px!important; background:color-mix(in srgb,var(--g-control-bg) 72%,var(--g-paper))!important; }
.tetris-shell .stats-panel .stat-box::after { content:""; position:absolute; inset:auto 12px 0; height:3px; border-radius:3px 3px 0 0; background:var(--stat-accent,var(--g-blue)); opacity:.9; }
.tetris-shell .stats-panel .stat-box:first-child { place-items:center; align-content:center; gap:10px; background:color-mix(in srgb,var(--g-blue) 7%,var(--g-control-bg))!important; }
.tetris-shell .stats-panel .stat-box:first-child span { justify-self:start; width:100%; }
.tetris-shell .stats-panel .stat-box:first-child::after { display:none; }
.tetris-shell .stats-panel .stat-box:nth-child(2) { --stat-accent:var(--g-blue); }
.tetris-shell .stats-panel .stat-box:nth-child(3) { --stat-accent:var(--g-lime); }
.tetris-shell .stats-panel .stat-box:nth-child(4) { --stat-accent:#9b7cff; }
.tetris-shell .stats-panel .stat-box:nth-child(5) { --stat-accent:var(--g-warning); }
.tetris-shell .stats-panel .stat-box strong { color:var(--stat-accent,var(--g-ink))!important; font-size:1.55rem!important; letter-spacing:-.04em; }
.tetris-shell .stats-panel #next-board { width:112px; height:112px; border-radius:18px!important; }

@media (max-width:1080px) {
  .tetris-shell .game-layout,
  .tetris-shell .game-layout.game-layout--compact { grid-template-columns:1fr!important; }
  .tetris-shell .arena-stage { grid-template-columns:300px 168px!important; }
}

@media (max-width:560px) {
  .tetris-shell .arena-stage { width:100%; grid-template-columns:1fr!important; }
  .tetris-shell .board-stack { justify-self:center; }
  .tetris-shell .main-board { width:min(100%,300px)!important; }
  .tetris-shell .stats-panel { width:min(100%,300px); height:auto; justify-self:center; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto; grid-auto-rows:minmax(92px,auto); }
  .tetris-shell .stats-panel .stat-box:first-child { grid-column:1 / -1; }
}

.game-view .player-row { border:0!important; border-radius:14px!important; background:var(--g-control-bg)!important; box-shadow:none!important; }
.game-view .player-row--self { border:1px solid color-mix(in srgb,var(--g-blue) 32%,transparent)!important; background:color-mix(in srgb,var(--g-blue) 10%,var(--g-paper))!important; }
.game-view .player-row__place { background:color-mix(in srgb,var(--g-blue) 12%,transparent)!important; color:var(--g-blue)!important; }
.game-view .level-progress { background:var(--g-line)!important; }
.game-view .level-progress span { background:var(--g-blue)!important; }
.game-view .stats-grid { gap:0!important; }
.game-view .stat-box { padding:14px 0!important; border:0!important; border-bottom:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; }
.game-view .stat-box:last-child { border-bottom:0!important; }
.game-view .board-wrap { border:0!important; background:transparent!important; }

/* Match 3 room */
.match3-shell #game-view .game-layout { grid-template-columns:242px minmax(560px,1fr) 242px; gap:16px!important; margin-top:16px; }
.match3-shell #game-view :where(.side-panel,.arena-panel) { position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--g-blue) 11%,var(--g-line))!important; }
.match3-shell #game-view :where(.side-panel,.arena-panel)::before { content:""; position:absolute; inset:0 auto auto 22px; width:62px; height:4px; border-radius:0 0 4px 4px; background:var(--g-blue); }
.match3-shell #game-view .arena-panel::before { width:92px; background:linear-gradient(90deg,var(--g-blue),var(--g-lime)); }
.match3-shell #game-view :where(.panel__head,.arena-head) { padding-bottom:15px; border-bottom:1px solid var(--g-line); }
.match3-shell #game-view :where(.panel__head,.arena-head) h2 { color:var(--g-ink)!important; font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.04em; }
.match3-shell #game-view .stats-grid { gap:8px!important; }
.match3-shell #game-view .stat-box { --stat-accent:var(--g-blue); position:relative; overflow:hidden; min-height:66px; padding:12px 14px!important; border:1px solid var(--g-line)!important; border-radius:15px!important; background:color-mix(in srgb,var(--stat-accent) 5%,var(--g-control-bg))!important; box-shadow:inset 3px 0 0 color-mix(in srgb,var(--stat-accent) 78%,transparent)!important; }
.match3-shell #game-view .stat-box:nth-child(2) { --stat-accent:var(--g-lime); }
.match3-shell #game-view .stat-box:nth-child(3) { --stat-accent:#9b7cff; }
.match3-shell #game-view .stat-box:nth-child(4) { --stat-accent:var(--g-blue); }
.match3-shell #game-view .stat-box:nth-child(5) { --stat-accent:var(--g-warning); }
.match3-shell #game-view .stat-box:nth-child(6) { --stat-accent:var(--g-lime); }
.match3-shell #game-view .stat-box > span { color:var(--g-muted)!important; font-size:.74rem; letter-spacing:.02em; }
.match3-shell #game-view .stat-box > strong { color:var(--stat-accent)!important; font-size:1.5rem; font-weight:800; letter-spacing:-.04em; }
.match3-shell #game-view .level-progress { height:6px; margin-top:2px; background:var(--g-line)!important; }
.match3-shell #game-view .level-progress span { background:linear-gradient(90deg,var(--g-warning),var(--g-lime))!important; }
.match3-shell #game-view .arena-head { align-items:center; }
.match3-shell #game-view .status-pill { min-height:36px; padding:0 13px; border:1px solid color-mix(in srgb,var(--g-blue) 24%,transparent)!important; border-radius:12px!important; background:color-mix(in srgb,var(--g-blue) 10%,transparent)!important; color:var(--g-blue)!important; font-size:.78rem; font-weight:800; }
.match3-shell #game-view .board-wrap { max-width:100%; padding:18px!important; overflow:auto; border:1px solid var(--g-line)!important; border-radius:24px; background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--g-blue) 8%,transparent),transparent 56%),color-mix(in srgb,var(--g-control-bg) 72%,transparent)!important; }
.match3-shell #game-view .match-board { border-color:color-mix(in srgb,var(--g-blue) 18%,var(--g-line))!important; background:linear-gradient(180deg,#11141c,#0b0d13)!important; box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04)!important; }
.match3-shell #game-view .overlay-banner { border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(10,12,18,.4),rgba(10,12,18,.78)); color:#f5f3ec; font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.025em; backdrop-filter:blur(2px); }
.match3-shell #game-view .players-list { gap:8px!important; }
.match3-shell #game-view .player-row { grid-template-columns:36px minmax(0,1fr) auto; gap:11px; min-height:64px; padding:10px 12px!important; border:1px solid var(--g-line)!important; border-radius:15px!important; background:var(--g-control-bg)!important; }
.match3-shell #game-view .player-row--self { border-color:color-mix(in srgb,var(--g-blue) 42%,transparent)!important; background:linear-gradient(110deg,color-mix(in srgb,var(--g-blue) 15%,var(--g-paper)),color-mix(in srgb,var(--g-blue) 5%,var(--g-paper)))!important; }
.match3-shell #game-view .player-row__place { width:36px; height:36px; border-radius:11px!important; background:color-mix(in srgb,var(--g-blue) 16%,transparent)!important; color:var(--g-blue)!important; font-weight:800; }
.match3-shell #game-view .player-row__meta strong { color:var(--g-ink); font-weight:800; }
.match3-shell #game-view .player-row__meta span { color:var(--g-muted)!important; }
.match3-shell #game-view .player-row__score strong { color:var(--g-blue); font-size:1.16rem; font-weight:800; font-variant-numeric:tabular-nums; }

@media (max-width:1080px) {
  .match3-shell #game-view .game-layout { grid-template-columns:1fr; }
  .match3-shell #game-view .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .match3-shell #game-view .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .match3-shell #game-view .board-wrap { padding:8px!important; border-radius:18px; }
}

.whoami-shell .board-stage { border:1px solid var(--g-line)!important; border-radius:22px!important; background:transparent!important; box-shadow:none!important; }
.whoami-shell .board-stage::before { color:var(--g-ink)!important; opacity:.035; }
.whoami-shell .seat-card { border:1px solid var(--g-line)!important; background:var(--g-paper)!important; box-shadow:none!important; }
.whoami-shell .seat-card--empty { border-style:dashed!important; background:color-mix(in srgb,var(--g-control-bg) 72%,transparent)!important; }
.whoami-shell .seat-card__word { border:0!important; background:color-mix(in srgb,var(--g-lime) 18%,var(--g-paper))!important; color:var(--g-ink)!important; box-shadow:none!important; }
.whoami-shell .seat-card__name { border-color:transparent!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; }

.codenames-shell .layout { grid-template-columns:minmax(240px,260px) minmax(600px,1fr) minmax(240px,260px)!important; gap:16px!important; }
.codenames-shell .sidebar--red { --team-accent:#df5c63; }
.codenames-shell .sidebar--blue { --team-accent:#5367ff; }
.codenames-shell .sidebar--team { position:relative; min-width:0; overflow:hidden; border-top:1px solid var(--g-line)!important; background:linear-gradient(180deg,color-mix(in srgb,var(--team-accent) 7%,var(--g-paper)) 0,var(--g-paper) 180px)!important; transition:border-color .22s ease,box-shadow .22s ease,background .22s ease; }
.codenames-shell .sidebar--team > * { min-width:0; max-width:100%; }
.codenames-shell .sidebar--team::before { content:""; position:absolute; inset:0 auto auto 22px; width:58px; height:4px; border-radius:0 0 4px 4px; background:var(--team-accent); transition:width .22s ease; }
.codenames-shell .sidebar--team.is-turn { border-color:color-mix(in srgb,var(--team-accent) 46%,transparent)!important; background:linear-gradient(180deg,color-mix(in srgb,var(--team-accent) 13%,var(--g-paper)) 0,var(--g-paper) 220px)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--team-accent) 10%,transparent)!important; }
.codenames-shell .sidebar--team.is-turn::before { width:104px; }
.codenames-shell .sidebar--team .panel__kicker,.codenames-shell .sidebar--team .panel__head h3 { color:var(--team-accent)!important; }
.codenames-shell .sidebar--team .panel__head { min-width:0; gap:8px; padding-bottom:15px; border-bottom:1px solid var(--g-line); }
.codenames-shell .sidebar--team .panel__head > :first-child { min-width:0; }
.codenames-shell .sidebar--team .panel__head h3 { margin-top:4px; font-size:clamp(1.75rem,2.2vw,2.15rem)!important; }
.codenames-shell .team-box { width:100%; min-width:0; max-width:100%; gap:8px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; }
.codenames-shell .team-box--active::after { display:none!important; content:none!important; }
.codenames-shell .team-box__head { justify-content:flex-start!important; padding:0 2px 6px; border:0; }
.codenames-shell .role-pill { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 12px; border:1px solid color-mix(in srgb,var(--team-accent) 20%,transparent)!important; border-radius:999px!important; background:color-mix(in srgb,var(--team-accent) 11%,transparent)!important; color:var(--team-accent)!important; font-size:.75rem; font-weight:900; }
.codenames-shell .team-box--active .role-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,var(--team-accent) 13%,transparent); }
.codenames-shell .team-box__section { width:100%; min-width:0; max-width:100%; gap:5px; padding:11px 12px 12px; border:0; border-radius:15px; background:color-mix(in srgb,var(--team-accent) 7%,var(--g-control-bg)); box-shadow:none; }
.codenames-shell .team-box__section:last-child { padding-bottom:12px; border:0; }
.codenames-shell .team-box__section-head { min-height:34px; }
.codenames-shell .team-box__label { color:color-mix(in srgb,var(--team-accent) 72%,var(--g-muted))!important; font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.codenames-shell .team-box__slot { min-height:30px; align-content:center; padding:2px 0 0; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.codenames-shell .team-box__meta { margin:0; color:color-mix(in srgb,var(--g-muted) 84%,var(--team-accent))!important; font-size:.92rem; }
.codenames-shell .team-box__player-name { color:var(--g-ink); font-weight:750; }
.codenames-shell .team-box__clues { min-height:38px; }
.codenames-shell .team-box__clue-item { min-height:38px; padding:5px 0; border:0!important; border-bottom:1px solid color-mix(in srgb,var(--team-accent) 13%,transparent)!important; border-radius:0!important; background:transparent!important; }
.codenames-shell .team-box__clue-item:last-child { border-bottom:0!important; }
.codenames-shell .team-box__clue-count { background:color-mix(in srgb,var(--team-accent) 13%,transparent)!important; color:var(--team-accent)!important; }
.codenames-shell .team-box__clue-stepper { display:grid; grid-template-columns:30px 22px; grid-template-rows:20px 20px; flex:0 0 auto; overflow:hidden; border:1px solid color-mix(in srgb,var(--team-accent) 22%,transparent); border-radius:12px; background:color-mix(in srgb,var(--team-accent) 9%,transparent); }
.codenames-shell .team-box__clue-stepper .team-box__clue-count { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; min-width:0; max-width:none; padding:0!important; border-radius:0!important; background:transparent!important; font-size:.78rem; font-weight:900; }
.codenames-shell .team-box__clue-controls { grid-column:2; grid-row:1 / 3; display:grid; grid-template-rows:repeat(2,20px); }
.codenames-shell .team-box__clue-controls button { display:grid; place-items:center; width:22px; min-width:22px!important; height:20px; min-height:20px!important; padding:0!important; border:0!important; border-left:1px solid color-mix(in srgb,var(--team-accent) 20%,transparent)!important; border-radius:0!important; background:transparent!important; color:var(--team-accent)!important; box-shadow:none!important; transform:none!important; }
.codenames-shell .team-box__clue-controls button + button { border-top:1px solid color-mix(in srgb,var(--team-accent) 20%,transparent)!important; }
.codenames-shell .team-box__clue-controls button:hover { background:color-mix(in srgb,var(--team-accent) 18%,transparent)!important; filter:none!important; transform:none!important; }
.codenames-shell .team-box__clue-controls svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.codenames-shell .team-role-icon { display:grid!important; place-items:center; width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; padding:0!important; border:0!important; border-radius:50%!important; background:color-mix(in srgb,var(--team-accent) 14%,transparent)!important; color:var(--team-accent)!important; box-shadow:none!important; transform:none!important; }
.codenames-shell .team-role-icon svg { width:15px; height:15px; }
.codenames-shell .team-role-icon:hover { border-color:color-mix(in srgb,var(--team-accent) 55%,transparent)!important; background:color-mix(in srgb,var(--team-accent) 20%,transparent)!important; filter:none!important; transform:none!important; }
.codenames-shell .team-role-icon.is-active { border-color:var(--team-accent)!important; background:var(--team-accent)!important; color:#fff!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--team-accent) 11%,transparent)!important; }
.codenames-shell .sidebar--team :where(.team-action,.team-slot-action) { display:grid!important; place-items:center; width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; padding:0!important; border:0!important; border-radius:50%!important; background:color-mix(in srgb,var(--team-accent) 14%,transparent)!important; color:var(--team-accent)!important; box-shadow:none!important; transform:none!important; }
.codenames-shell .sidebar--team :where(.team-action,.team-slot-action) svg { width:15px; height:15px; }
.codenames-shell .sidebar--team :where(.team-action,.team-slot-action):hover { border-color:color-mix(in srgb,var(--team-accent) 55%,transparent)!important; background:color-mix(in srgb,var(--team-accent) 20%,transparent)!important; filter:none!important; transform:none!important; }
.codenames-shell .sidebar--team .team-slot-action--leave { border:1px solid var(--g-line)!important; background:var(--g-paper)!important; color:var(--g-ink)!important; box-shadow:none!important; }
.codenames-shell .board-panel { --turn-accent:var(--g-blue); gap:16px!important; }
.codenames-shell .board-panel:has(.clue-box--turn-red),.codenames-shell .board-panel--turn-red { --turn-accent:#e45d66; }
.codenames-shell .board-panel:has(.clue-box--turn-blue),.codenames-shell .board-panel--turn-blue { --turn-accent:#5367ff; }
.codenames-shell .clue-box--turn-red { --turn-accent:#df5c63; }
.codenames-shell .clue-box--turn-blue { --turn-accent:#5367ff; }
.codenames-shell .board-header { padding-bottom:16px; border-bottom:1px solid var(--g-line); }
.codenames-shell :where(.board-panel--turn-red,.board-panel--turn-blue) .board-header { border-bottom-color:color-mix(in srgb,var(--turn-accent) 34%,transparent)!important; }
.codenames-shell :where(.board-panel--turn-red,.board-panel--turn-blue) .board-header .panel__kicker { color:var(--turn-accent)!important; }
.codenames-shell :where(.board-panel--turn-red,.board-panel--turn-blue) #board-title { color:var(--turn-accent)!important; }
.codenames-shell #turn-chip:disabled { opacity:1!important; }
.codenames-shell .turn-chip--red { --turn-accent:#e45d66; }
.codenames-shell .turn-chip--blue { --turn-accent:#5367ff; }
.codenames-shell :where(.turn-chip--red,.turn-chip--blue) { border:0!important; background:var(--turn-accent)!important; color:#fff!important; box-shadow:0 10px 24px color-mix(in srgb,var(--turn-accent) 28%,transparent)!important; }
.codenames-shell .clue-box { position:relative; isolation:isolate; display:grid!important; grid-template-columns:minmax(290px,.9fr) minmax(410px,1.55fr); align-items:center!important; gap:22px!important; overflow:hidden; padding:20px!important; border:1px solid color-mix(in srgb,var(--turn-accent) 46%,transparent)!important; border-radius:20px!important; background:linear-gradient(105deg,color-mix(in srgb,var(--turn-accent) 18%,var(--g-paper)) 0,color-mix(in srgb,var(--turn-accent) 7%,var(--g-paper)) 62%,var(--g-paper) 100%)!important; box-shadow:0 14px 36px color-mix(in srgb,var(--turn-accent) 10%,transparent)!important; transition:border-color .3s ease,background .3s ease,box-shadow .3s ease; }
.codenames-shell .clue-box::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 0; width:4px; background:var(--turn-accent); }
.codenames-shell .clue-box:not(:has(.clue-form:not([hidden]))) { grid-template-columns:minmax(0,1fr) auto; }
.codenames-shell .clue-box__info { gap:8px; padding-left:4px; }
.codenames-shell .clue-box__info strong { color:var(--g-ink)!important; font-size:1.08rem; line-height:1.3; }
.codenames-shell .clue-box__info span { max-width:44ch; color:var(--g-muted)!important; font-size:.88rem; line-height:1.45; }
.codenames-shell .clue-form { display:grid!important; grid-template-columns:minmax(0,1fr) 110px auto; align-items:end!important; gap:10px!important; }
.codenames-shell .clue-form[hidden] { display:none!important; }
.codenames-shell .clue-form__field { gap:7px; }
.codenames-shell .clue-form__field--count { min-width:0; }
.codenames-shell .clue-form__field--count > span:first-child { white-space:nowrap; }
.codenames-shell .clue-form__field span { color:var(--turn-accent)!important; font-size:.68rem; letter-spacing:.11em; }
.codenames-shell .clue-form input { min-height:54px!important; border:1px solid color-mix(in srgb,var(--turn-accent) 14%,transparent)!important; background:color-mix(in srgb,var(--turn-accent) 6%,var(--g-control-bg))!important; }
.codenames-shell .clue-form input:focus { border-color:var(--turn-accent)!important; outline:3px solid color-mix(in srgb,var(--turn-accent) 14%,transparent)!important; }
.codenames-shell .number-stepper { display:grid; grid-template-columns:minmax(0,1fr) 30px; grid-template-rows:27px 27px; width:110px; min-height:54px; overflow:hidden; border:1px solid color-mix(in srgb,var(--turn-accent) 24%,transparent); border-radius:14px; background:color-mix(in srgb,var(--turn-accent) 7%,var(--g-control-bg)); }
.codenames-shell .number-stepper #clue-count { grid-column:1; grid-row:1 / 3; width:100%!important; min-width:0!important; min-height:52px!important; padding:0 4px!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--g-ink)!important; font-size:1rem; font-weight:800; text-align:center; outline:0!important; appearance:textfield; }
.codenames-shell .number-stepper #clue-count::-webkit-inner-spin-button,.codenames-shell .number-stepper #clue-count::-webkit-outer-spin-button { margin:0; appearance:none; }
.codenames-shell .clue-form .number-stepper__button { grid-column:2; display:grid; place-items:center; width:30px; min-width:30px; height:27px; min-height:27px!important; padding:0!important; border:0!important; border-left:1px solid color-mix(in srgb,var(--turn-accent) 20%,transparent)!important; border-radius:0!important; background:color-mix(in srgb,var(--turn-accent) 8%,transparent)!important; color:var(--turn-accent)!important; box-shadow:none!important; transition:background .2s ease; }
.codenames-shell .number-stepper__button--up { grid-row:1; }
.codenames-shell .number-stepper__button--down { grid-row:2; border-top:1px solid color-mix(in srgb,var(--turn-accent) 20%,transparent)!important; }
.codenames-shell .number-stepper__button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.codenames-shell .clue-form .number-stepper__button:hover { background:color-mix(in srgb,var(--turn-accent) 18%,transparent)!important; transform:none!important; filter:none!important; box-shadow:none!important; }
.codenames-shell .clue-form .number-stepper__button:active { background:color-mix(in srgb,var(--turn-accent) 26%,transparent)!important; transform:none!important; filter:none!important; box-shadow:none!important; }
.codenames-shell .clue-form .number-stepper__button:focus-visible { outline:2px solid var(--turn-accent)!important; outline-offset:-2px; }
.codenames-shell .clue-form button { min-width:96px; min-height:54px!important; border:0!important; background:var(--turn-accent)!important; color:#fff!important; box-shadow:0 10px 22px color-mix(in srgb,var(--turn-accent) 20%,transparent)!important; }
.codenames-shell .guess-actions { justify-content:flex-end; }
.codenames-shell .lobby-start-box { padding:19px 20px!important; border:1px solid color-mix(in srgb,var(--g-blue) 16%,transparent)!important; border-radius:20px!important; background:linear-gradient(100deg,color-mix(in srgb,var(--g-blue) 8%,var(--g-paper)),var(--g-paper))!important; }
.codenames-shell .board-grid { gap:12px!important; }
.codenames-shell .card { display:grid; place-items:center; min-height:112px; padding:16px 12px!important; border:1px solid color-mix(in srgb,currentColor 10%,transparent)!important; border-radius:17px!important; box-shadow:0 8px 18px rgba(0,0,0,.08)!important; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease!important; }
.codenames-shell .card::after { content:""; position:absolute; top:-21px; right:-21px; width:42px; height:42px; border:1px solid currentColor; border-radius:50%; opacity:.08; box-shadow:0 0 0 10px currentColor; pointer-events:none; }
.codenames-shell .card__word { max-width:100%; overflow-wrap:normal; word-break:normal; color:inherit!important; font-size:.94rem; line-height:1.18; text-align:center; }
.codenames-shell .card.has-long-word .card__word { font-size:.82rem; letter-spacing:-.025em; }
.codenames-shell .card:not([class*="card--"]) { border-color:rgba(255,255,255,.09)!important; background:linear-gradient(145deg,#292c37 0%,#20222b 78%)!important; color:#f5f3ec!important; box-shadow:inset 0 1px rgba(255,255,255,.035),0 9px 20px rgba(0,0,0,.16)!important; }
.codenames-shell .card.is-clickable:hover { z-index:1; transform:translateY(-4px)!important; border-color:color-mix(in srgb,var(--turn-accent) 70%,transparent)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--turn-accent) 18%,#292c37),#20222b 82%)!important; box-shadow:0 14px 28px color-mix(in srgb,var(--turn-accent) 16%,rgba(0,0,0,.18))!important; }
.codenames-shell .card.is-selected,.codenames-shell .card.is-pending { transform:translateY(-3px)!important; border-color:var(--turn-accent)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--turn-accent) 24%,#292c37),#20222b 82%)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--turn-accent) 22%,transparent),0 16px 30px color-mix(in srgb,var(--turn-accent) 16%,transparent)!important; }
.codenames-shell .card__vote-count { background:var(--turn-accent)!important; color:#fff!important; }
.codenames-shell .card__pending-track { background:color-mix(in srgb,var(--turn-accent) 15%,transparent)!important; }
.codenames-shell .card__pending-timer { background:var(--turn-accent)!important; box-shadow:none!important; }
.codenames-shell .card.is-revealed { filter:saturate(.58) brightness(.72)!important; opacity:.72; }
.codenames-shell .card--neutral.is-revealed { border-color:rgba(255,255,255,.08)!important; background:#30323b!important; color:#bfc0c8!important; filter:none!important; opacity:1; }
.codenames-shell .card.is-revealed .card__word { text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:color-mix(in srgb,currentColor 42%,transparent); }
.codenames-shell .card.is-final-reveal { filter:none!important; opacity:.92; }
@media (max-width:1180px) {
  .codenames-shell .layout { grid-template-columns:1fr!important; }
}
@media (min-width:761px) {
  .codenames-shell .clue-box__info strong { white-space:nowrap; }
}
@media (max-width:760px) {
  .codenames-shell .clue-box { grid-template-columns:1fr!important; gap:16px!important; padding:17px!important; }
  .codenames-shell .clue-form { grid-template-columns:minmax(0,1fr) 82px; }
  .codenames-shell .clue-form button { grid-column:1 / -1; }
  .codenames-shell .board-grid { gap:10px!important; }
  .codenames-shell .card { min-height:104px; padding-inline:10px!important; font-size:.92rem; }
}

.spyfall-shell :where(.spyfall-player,.summary-box,.location-tile) { border:0!important; background:var(--g-control-bg)!important; box-shadow:none!important; }
.spyfall-shell .spyfall-briefing { border:1px solid color-mix(in srgb,var(--g-blue) 14%,transparent)!important; background:color-mix(in srgb,var(--g-blue) 6%,transparent)!important; box-shadow:none!important; }
.spyfall-shell .spyfall-player__row { border:0!important; background:color-mix(in srgb,var(--g-paper) 58%,transparent)!important; }
.spyfall-shell .spyfall-score { border:0!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; box-shadow:none!important; }
.spyfall-shell .location-tile { padding:5px!important; border-radius:16px!important; }

/* Spyfall room refinement */
.spyfall-shell .spyfall-layout { grid-template-columns:minmax(190px,220px) minmax(0,1fr) minmax(190px,220px)!important; gap:12px!important; align-items:start!important; }
.spyfall-shell .spyfall-side { position:sticky; top:12px; gap:9px!important; max-height:calc(100vh - 24px); overflow:hidden; padding:10px!important; }
.spyfall-shell .spyfall-side > .spyfall-briefing { min-height:0!important; padding:9px 7px 12px!important; border:0!important; border-bottom:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.spyfall-shell .spyfall-briefing { align-content:start!important; gap:7px!important; }
.spyfall-shell .spyfall-briefing h3 { display:block; min-height:0!important; margin:2px 0 0!important; color:var(--g-ink)!important; font-size:.98rem!important; line-height:1.25!important; text-align:left!important; }
.spyfall-shell .spyfall-briefing .panel__kicker { color:var(--g-blue)!important; font-size:.64rem!important; }
.spyfall-shell .spyfall-briefing p { font-size:.74rem!important; line-height:1.4!important; text-align:left!important; }
.spyfall-shell #location-note,.spyfall-shell #board-status-note { margin:3px 0 0!important; padding:0 0 0 9px!important; border:0!important; border-left:2px solid color-mix(in srgb,var(--g-blue) 58%,transparent)!important; border-radius:0!important; background:transparent!important; color:var(--g-muted)!important; font-weight:650!important; }
.spyfall-shell .spyfall-location-preview { width:min(100%,190px); max-height:126px; margin:8px auto 4px; border:0!important; border-radius:13px!important; box-shadow:0 0 0 1px color-mix(in srgb,var(--g-blue) 18%,transparent),0 12px 26px rgba(0,0,0,.16)!important; }
.spyfall-shell .spyfall-location-preview img { object-position:50% 50%!important; }
.spyfall-shell .spyfall-side > .spyfall-column { min-height:0; max-height:calc(100vh - 250px); overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--g-blue) 42%,transparent) transparent; }
.spyfall-shell .spyfall-player { position:relative; gap:9px!important; overflow:hidden; padding:12px!important; border:0!important; border-radius:16px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--g-blue) 5%,var(--g-control-bg)),var(--g-control-bg))!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-blue) 8%,transparent)!important; }
.spyfall-shell .spyfall-player::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:color-mix(in srgb,var(--g-blue) 35%,transparent); }
.spyfall-shell .spyfall-player.player-card--self { border:0!important; background:linear-gradient(145deg,color-mix(in srgb,var(--g-blue) 13%,var(--g-control-bg)),var(--g-control-bg))!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-blue) 22%,transparent)!important; }
.spyfall-shell .spyfall-player.player-card--self::before { background:var(--g-blue); }
.spyfall-shell .spyfall-player.spyfall-player--spy { background:linear-gradient(145deg,color-mix(in srgb,var(--g-danger) 12%,var(--g-control-bg)),var(--g-control-bg))!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-danger) 22%,transparent)!important; }
.spyfall-shell .spyfall-player.spyfall-player--spy::before { background:var(--g-danger); }
.spyfall-shell .spyfall-player__identity p { display:none; }
.spyfall-shell .spyfall-player__identity h4 { gap:6px; font-size:.78rem; }
.spyfall-shell .spyfall-player__name-icon svg { width:14px; height:14px; }
.spyfall-shell .spyfall-score { min-width:40px; min-height:25px; padding:0 6px; font-size:.68rem; }
.spyfall-shell .spyfall-player__stats { display:flex; flex-wrap:wrap; gap:6px; }
.spyfall-shell .spyfall-player__row { display:inline-flex; align-items:center; gap:6px; width:auto; min-width:0; padding:5px 8px; border:0!important; border-radius:999px; background:color-mix(in srgb,var(--g-blue) 8%,var(--g-paper)); }
.spyfall-shell .spyfall-player__row-icon { width:15px; height:15px; }
.spyfall-shell .spyfall-player__row-icon svg { width:14px; height:14px; }
.spyfall-shell .spyfall-player__row strong { min-width:0; font-size:.68rem; text-align:left; }
.spyfall-shell .spyfall-score { border:0!important; background:color-mix(in srgb,var(--g-blue) 12%,transparent)!important; color:var(--g-ink)!important; }
.spyfall-shell .spyfall-player__row { grid-template-columns:15px minmax(0,1fr); gap:5px; min-height:27px; padding:5px 7px; border-radius:9px!important; }
.spyfall-shell .spyfall-player__row-icon,.spyfall-shell .spyfall-player__row-icon svg { width:14px; height:14px; }
.spyfall-shell .spyfall-player__row strong { font-size:.68rem; }
.spyfall-shell .spyfall-player .ghost-button { min-height:31px!important; font-size:.7rem; }
.spyfall-shell .main-panel { gap:12px!important; padding:14px!important; }
.spyfall-shell .main-panel__head { align-items:center!important; padding-bottom:12px; border-bottom:1px solid var(--g-line); }
.spyfall-shell #turn-chip:disabled { opacity:1!important; }
.spyfall-shell .location-board { gap:10px!important; padding:12px 0 0!important; border:0!important; border-radius:0!important; background:transparent!important; }
.spyfall-shell .location-board__label { align-items:center!important; }
.spyfall-shell .location-board__label p:last-child { max-width:54ch; font-size:.76rem; line-height:1.4; }
.spyfall-shell .location-grid { gap:8px!important; }
.spyfall-shell .location-tile { border-radius:13px!important; }
.spyfall-shell .location-tile__image-wrap { border-radius:10px!important; }
.spyfall-shell .location-tile--reveal-actual { border:2px solid var(--g-success)!important; background:color-mix(in srgb,var(--g-success) 13%,var(--g-control-bg))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--g-success) 20%,transparent),0 14px 28px color-mix(in srgb,var(--g-success) 18%,transparent)!important; }
.spyfall-shell .location-tile--reveal-actual .location-tile__image-wrap { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g-success) 62%,transparent)!important; }
.spyfall-shell .location-tile--spy-guess { border:2px solid var(--g-danger)!important; background:color-mix(in srgb,var(--g-danger) 13%,var(--g-control-bg))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--g-danger) 19%,transparent),0 14px 28px color-mix(in srgb,var(--g-danger) 17%,transparent)!important; }
.spyfall-shell .location-tile--spy-guess .location-tile__image-wrap { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g-danger) 62%,transparent)!important; }
.spyfall-shell .location-tile--correct-guess { border:2px solid var(--g-warning)!important; background:color-mix(in srgb,var(--g-warning) 14%,var(--g-control-bg))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--g-warning) 23%,transparent),0 16px 30px color-mix(in srgb,var(--g-warning) 20%,transparent)!important; }
.spyfall-shell .location-tile--correct-guess .location-tile__image-wrap { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g-warning) 72%,transparent)!important; }
.spyfall-shell .location-tile__result-badge { left:7px; right:auto; bottom:7px; min-height:25px; padding:4px 9px; border:1px solid rgba(255,255,255,.28); font-size:.6rem; letter-spacing:.07em; box-shadow:0 8px 18px rgba(0,0,0,.34)!important; }
.spyfall-shell .location-tile__result-badge--actual { background:color-mix(in srgb,var(--g-success) 88%,#07150f)!important; }
.spyfall-shell .location-tile__result-badge--spy { background:color-mix(in srgb,var(--g-danger) 88%,#25070c)!important; }
.spyfall-shell .location-tile__result-badge--correct { background:color-mix(in srgb,var(--g-warning) 88%,#2a1b05)!important; color:#151008!important; }
.spyfall-shell .location-grid--result .location-tile:not(.location-tile--reveal-actual):not(.location-tile--spy-guess) { opacity:.64!important; filter:saturate(.7) brightness(.84); }
.spyfall-shell .location-grid--result :is(.location-tile--reveal-actual,.location-tile--spy-guess) { position:relative; z-index:2; opacity:1!important; filter:none!important; transform:translateY(-2px); }

@media (max-width:980px) {
  .spyfall-shell .spyfall-layout { grid-template-columns:1fr!important; }
  .spyfall-shell .spyfall-side { position:static; max-height:none; overflow:visible; }
  .spyfall-shell .spyfall-side > .spyfall-column { max-height:360px; }
}

.modal__backdrop { background:rgba(5,6,10,.62)!important; backdrop-filter:blur(10px)!important; }
.modal__card { border:1px solid var(--g-line)!important; border-radius:26px!important; background:var(--g-paper)!important; color:var(--g-ink)!important; box-shadow:0 24px 80px rgba(0,0,0,.24)!important; }
.modal__card :where(.help-section,.help-rule,.packs-list__item) { border:0!important; border-radius:16px!important; background:var(--g-control-bg)!important; color:var(--g-ink)!important; box-shadow:none!important; }

/* Alias semantic states */
.room-view .team-tile { --team-color:var(--g-blue); border:1px solid color-mix(in srgb,var(--team-color) 22%,transparent)!important; background:color-mix(in srgb,var(--team-color) 8%,transparent)!important; }
.room-view .team-tile:nth-child(2) { --team-color:#e66a86; }
.room-view .team-tile:nth-child(3) { --team-color:#d5a52c; }
.room-view .team-tile:nth-child(4) { --team-color:#38bfa8; }
.room-view .team-tile .team-icon { border-color:color-mix(in srgb,var(--team-color) 24%,transparent)!important; background:color-mix(in srgb,var(--team-color) 14%,transparent)!important; }
.room-view .team-tile .team-join { width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; flex:0 0 42px; padding:0!important; border:1px solid color-mix(in srgb,var(--team-color) 34%,transparent)!important; border-radius:12px!important; background:color-mix(in srgb,var(--team-color) 18%,transparent)!important; color:var(--team-color)!important; }
.room-view .team-tile .team-join--leave { border-color:var(--g-line)!important; background:var(--g-paper)!important; color:var(--g-ink)!important; box-shadow:0 8px 20px rgba(0,0,0,.12)!important; }
.room-view .team-tile .team-join--leave:not(:disabled):hover { border-color:color-mix(in srgb,var(--g-danger) 58%,transparent)!important; background:var(--g-paper)!important; color:var(--g-danger)!important; box-shadow:0 10px 24px color-mix(in srgb,var(--g-danger) 20%,transparent)!important; }
.room-view .team-tile .team-join:disabled { opacity:.68!important; }
.room-view #teams-lobby:not(:has(.team-join--leave)) .team-join:not(:disabled) { opacity:1!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--team-color) 18%,transparent),0 10px 24px color-mix(in srgb,var(--team-color) 20%,transparent)!important; }
.room-view #teams-lobby:not(:has(.team-join--leave)) .team-join:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 0 0 4px color-mix(in srgb,var(--team-color) 22%,transparent),0 14px 30px color-mix(in srgb,var(--team-color) 28%,transparent)!important; }
.room-view .panel--sidebar .words-panel { padding:17px 0 0!important; border:0!important; border-top:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; }
.room-view .panel--sidebar .score-row { border:0!important; border-bottom:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; }
.room-view .panel--game .feed { padding:17px 0 0!important; border:0!important; border-top:1px solid var(--g-line)!important; border-radius:0!important; background:transparent!important; }
.room-view #mark-correct { border-color:var(--g-success)!important; background:var(--g-success)!important; color:#07150f!important; }
.room-view #mark-skip { border-color:color-mix(in srgb,var(--g-danger) 34%,transparent)!important; background:color-mix(in srgb,var(--g-danger) 14%,transparent)!important; color:var(--g-danger)!important; }
.room-view .event-log li.event-log__item--correct { border:1px solid color-mix(in srgb,var(--g-success) 30%,transparent)!important; border-left:4px solid var(--g-success)!important; background:color-mix(in srgb,var(--g-success) 12%,transparent)!important; }
.room-view .event-log li.event-log__item--skip { border:1px solid color-mix(in srgb,var(--g-danger) 30%,transparent)!important; border-left:4px solid var(--g-danger)!important; background:color-mix(in srgb,var(--g-danger) 11%,transparent)!important; }
.room-view .event-log li.event-log__item--challenged { border-color:color-mix(in srgb,var(--g-warning) 44%,transparent)!important; box-shadow:inset 3px 0 0 var(--g-warning)!important; }
.room-view .event-log__item--correct .event-log__status { color:var(--g-success)!important; }
.room-view .event-log__item--skip .event-log__status { color:var(--g-danger)!important; }
.share-drawer { left:18px!important; height:132px!important; }
.share-drawer__peek { bottom:-21px!important; width:116px!important; height:116px!important; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform-origin:left bottom; transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease!important; }
.share-drawer__peek::before,.share-drawer__peek::after { display:none!important; content:none!important; }
.share-drawer__peek:hover { transform:scale(1.08)!important; filter:drop-shadow(0 14px 18px rgba(0,0,0,.3))!important; }
.share-drawer__peek:focus-visible { outline:3px solid var(--g-lime)!important; outline-offset:3px; border-radius:24px!important; }
.share-drawer__peek-image { inset:0!important; width:116px!important; height:116px!important; transform:none!important; border-radius:0!important; object-fit:contain!important; object-position:center bottom!important; filter:drop-shadow(0 9px 12px rgba(0,0,0,.3))!important; }
.share-drawer__card { bottom:104px!important; display:block; min-height:258px; overflow:hidden; padding:26px 24px 22px!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:30px!important; background:radial-gradient(circle at 92% 4%,rgba(83,103,255,.28),transparent 42%),linear-gradient(145deg,#181a25 0%,#101118 78%)!important; box-shadow:0 28px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06)!important; }
.share-drawer__card::before { content:""; position:absolute; right:-42px; bottom:-58px; width:150px; height:150px; border-radius:50%; background:rgba(200,255,61,.1); filter:blur(4px); pointer-events:none; }
body[data-theme="light"] .share-drawer__card { border-color:rgba(17,18,26,.1)!important; background:radial-gradient(circle at 92% 4%,rgba(83,103,255,.17),transparent 42%),linear-gradient(145deg,#fff 0%,#f0eee7 80%)!important; box-shadow:0 28px 64px rgba(32,35,48,.2),inset 0 1px #fff!important; }
.share-drawer__bite { position:absolute!important; z-index:1; top:-8px; right:-2px; width:154px!important; height:158px!important; overflow:visible!important; border-radius:0!important; background:transparent!important; }
.share-drawer__image { inset:0!important; width:154px!important; height:158px!important; transform:none!important; border-radius:0!important; object-fit:contain!important; object-position:center bottom!important; filter:drop-shadow(0 14px 18px rgba(0,0,0,.3))!important; }
.share-drawer__content { position:relative; z-index:2; display:grid; gap:0; padding:0!important; }
.share-drawer__eyebrow { width:max-content; margin:0 0 9px; padding:6px 9px; border:1px solid rgba(200,255,61,.24); border-radius:999px; background:rgba(200,255,61,.08); color:var(--g-lime)!important; font-size:.62rem; letter-spacing:.13em; }
.share-drawer__title { max-width:190px; color:#f7f5ef!important; font-size:1.48rem!important; line-height:1.03!important; letter-spacing:-.055em!important; }
body[data-theme="light"] .share-drawer__title { color:#11121a!important; }
.share-drawer__text { max-width:285px; margin-top:34px!important; color:#a7a8b4!important; font-size:.83rem!important; line-height:1.45!important; }
body[data-theme="light"] .share-drawer__text { color:#686975!important; }
.share-drawer__actions { display:grid!important; grid-template-columns:1fr auto; gap:9px!important; margin-top:18px!important; }
.share-drawer__primary,.share-drawer__ghost { min-height:46px!important; border-radius:15px!important; font-size:.84rem!important; white-space:nowrap!important; }
.share-drawer__primary { padding-inline:12px!important; }
.share-drawer__primary { color:#11121a!important; background:var(--g-lime)!important; box-shadow:0 12px 26px rgba(200,255,61,.16)!important; }
.share-drawer__ghost { padding-inline:16px!important; border-color:rgba(255,255,255,.12)!important; background:rgba(255,255,255,.06)!important; color:#d7d5d0!important; }
body[data-theme="light"] .share-drawer__ghost { border-color:rgba(17,18,26,.1)!important; background:rgba(17,18,26,.05)!important; color:#42434b!important; }
@media (max-width:940px) {
  .app-shell { width:min(100%,calc(100% - 20px))!important; padding-top:72px!important; }
  #auth-view .auth-hero { border-radius:28px 72px 28px 28px!important; }
  #auth-view .auth-hero__actions { justify-content:flex-start; justify-self:start; }
  #auth-view .auth-card { border-radius:24px!important; }
}
@media (max-width:760px) {
  :where(.room-view,.game-view) .topbar { grid-template-columns:minmax(0,1fr)!important; }
  :where(.room-view,.game-view) .topbar__actions { width:100%!important; justify-content:flex-start!important; align-self:stretch!important; }
}
@media (max-width:520px) {
  .app-shell { padding-top:70px!important; }
  #auth-view .auth-hero { padding:28px 20px!important; }
  #auth-view .auth-hero__copy,#auth-view .auth-hero__aside { min-width:0!important; width:100%!important; }
  #auth-view .auth-hero__copy h1 { max-width:100%!important; font-size:clamp(2.25rem,11.5vw,2.8rem)!important; line-height:.92!important; white-space:nowrap; }
  #auth-view .auth-hero .hero-note { min-height:6em; }
  #auth-view .auth-hero__chips { min-height:75px; align-content:start; }
  #auth-view .auth-hero__aside { padding:18px 0 0!important; }
  #auth-view .auth-hero__aside p { min-height:calc(6em + 8px); }
  #auth-view .leaderboard-card { padding:18px!important; border-radius:22px!important; }
  #auth-view .leaderboard-card__head { align-items:flex-start; }
  #auth-view .leaderboard-list { grid-template-columns:1fr; }
  #auth-view .leaderboard-row:first-child { grid-column:auto; }
  #auth-view .leaderboard-row__score { min-width:70px; }
  :where(.room-view,.game-view) .topbar { padding:22px 20px!important; border-radius:24px 58px 24px 24px!important; }
  :where(.room-view,.game-view) .topbar__line { flex-wrap:wrap!important; }
  :where(.room-view,.game-view) .topbar__line h2 { flex:0 0 100%; }
  :where(.room-view,.game-view) .topbar__actions { justify-content:flex-start!important; }
  .theme-toggle { top:14px!important; right:14px!important; width:46px!important; height:46px!important; border-radius:15px!important; }
  .share-drawer { left:10px!important; height:116px!important; }
  .share-drawer__peek { bottom:-19px!important; width:100px!important; height:100px!important; }
  .share-drawer__peek-image { width:100px!important; height:100px!important; }
}