@font-face { font-family: Fredoka; src: url('/fredoka-knock.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+21, U+4B, U+63, U+6B, U+6E-6F; }
:root { color-scheme: dark; font: 15px/1.45 system-ui, sans-serif; background: #1a141e; color: #f8f1ea; --muted: #c0b3bd; --gold: #ffc97f; --line: #ffffff22; --panel: #281f2c; }
.clicker-page { scrollbar-gutter: stable; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: linear-gradient(145deg,#261e2b,#17131b 70%); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button,input,dialog { border: 1px solid var(--line); border-radius: 7px; }
button { min-height: 36px; padding: 7px 12px; background: #382c3a; color: inherit; cursor: pointer; }
button:hover:not(:disabled) { background: #4b3a49; }
button:disabled { opacity: .5; cursor: default; }
a:focus-visible,button:focus-visible,input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.bar { display: flex; gap: 16px; align-items: center; padding: 12px max(24px,calc((100% - 1020px)/2)); border-bottom: 1px solid var(--line); background: #1c161f; color: var(--muted); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font-weight: 750; }
.brand img { border-radius: 7px; }
.bar > span,.back { border-left: 1px solid var(--line); padding-left: 16px; }
.back:hover { color: var(--gold); }
.icon-button { margin-left: auto; display: grid; place-items: center; width: 38px; padding: 0; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.selector { max-width: 1068px; margin: 0 auto; padding: 40px 24px 48px; }
.section-line,.card-info,.locked-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-line { margin-bottom: 16px; }
.section-line span { color: var(--gold); font: 12px ui-monospace,monospace; }
h1,h2,h3,p { margin: 0; }
h1 { font: 750 40px/1.08 Georgia,serif; }
.featured,.locked-grid { display: grid; gap: 16px; }
.featured { grid-template-columns: repeat(2,minmax(0,1fr)); }
.game-card,.locked { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.game-card { transition: border-color .2s,background .2s; }
.game-card:hover { border-color: #bd895c; background: #372837; }
.cover { position: relative; overflow: hidden; aspect-ratio: 2.1; isolation: isolate; background: #3f263a; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; transition: transform .35s ease-out; }
.game-card:hover .cover img { transform: scale(1.04); }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#1b101e66,transparent 54%); }
.mode-tag { position: absolute; z-index: 1; top: 13px; left: 13px; padding: 4px 7px; border: 1px solid #fff4; border-radius: 4px; color: #ffe3bb; background: #221820df; font: 700 10px ui-monospace,monospace; }
.cover-beats { position: absolute; z-index: 1; right: 18px; bottom: 17px; display: flex; gap: 6px; }
.cover-beats i,.beats i { width: 26px; height: 6px; border-radius: 6px; background: #ffcc7a44; }
.cover-beats i:last-child,.beats i.active { background: var(--gold); }
.card-info { padding: 15px 16px; }
.card-info h2 { font: 700 25px Georgia,serif; }
.card-info p,.locked-copy span { color: var(--muted); font-size: 13px; }
.card-info p { margin-top: 4px; }
.go { color: var(--gold); font-size: 25px; }
.up-next { margin: 27px 0 12px; font-size: 16px; }
.locked-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.locked-art { display: flex; align-items: center; justify-content: center; height: 77px; gap: 8px; overflow: hidden; background: #312330; }
.locked-art span { display: block; width: 14px; height: 29px; border-radius: 5px; background: #bc7250; filter: blur(4px); opacity: .72; transform: rotate(-12deg); }
.rhythm span:nth-child(2n) { height: 47px; }
.rhythm span:nth-child(3) { height: 58px; }
.memory { background: #262838; }
.memory span { width: 27px; height: 27px; background: #898bb7; }
.stack { background: #382629; }
.stack span { width: 35px; height: 12px; background: #b68957; }
.locked-copy { padding: 11px 13px; }
.locked-copy h3 { font-size: 14px; }
.play-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(312px,350px); gap: 36px; align-items: center; max-width: 970px; min-height: calc(100svh - 61px); margin: 0 auto; padding: 28px; }
.scene,.scene:hover:not(:disabled) { position: relative; padding: 0; overflow: hidden; width: 100%; aspect-ratio: 1/1.04; background: linear-gradient(#291f3b,#4d3047 53%,#1a1324); isolation: isolate; border-radius: 8px; touch-action: manipulation; }
.scene:disabled { opacity: 1; }
.scene img { width: 100%; height: 100%; object-fit: cover; }
.night-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.night-art svg { display: block; width: 100%; height: 100%; }
.night-art [data-mascot] { transform-origin: 170px 304px; }
.night-art [data-mallet] { transform-origin: 247px 225px; }
.night-art [data-burst] { transform-origin: 0 0; }
.scene-caption { position: absolute; bottom: 4%; left: 5%; color: #e4d8ea; font: 700 10px ui-monospace,monospace; }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid transparent; transition: border-color .15s; }
.scene.ready::after { border-color: var(--gold); }
.overline { font: 700 11px ui-monospace,monospace; color: var(--gold); margin-bottom: 12px; }
.intro { margin: 13px 0 18px; color: var(--muted); }
.beats { display: flex; gap: 8px; }
#reaction-status { min-height: 25px; margin: 9px 0; }
.primary { background: var(--gold); color: #291a20; border-color: transparent; font-weight: 650; }
.primary:hover:not(:disabled) { background: #ffda9e; }
.action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; padding: 10px 14px; touch-action: manipulation; }
.personal-best { display: flex; justify-content: space-between; margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); }
.personal-best strong { color: var(--gold); }
form,label { display: grid; gap: 7px; }
form { gap: 10px; }
.lobby-controls h1 { margin-bottom: 21px; }
label,.milestone,#rate { color: var(--muted); }
input { color: #fff; padding: 8px 10px; width: 100%; min-width: 0; background: #201924; }
.room-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; background: #211925; border-radius: 7px; }
.room-modes button { border-color: transparent; background: transparent; }
.room-modes button[aria-pressed=true] { background: #4e394b; color: var(--gold); }
#game { display: flex; flex-direction: column; gap: 8px; max-height: min(610px,calc(100svh - 113px)); }
.room-line,.balance,.milestone,.actions { display: flex; align-items: center; gap: 7px; }
.room-line button { font-size: 12px; padding: 5px 8px; }
#room-code { font: 12px ui-monospace,monospace; margin-right: auto; }
.balance,.milestone { justify-content: space-between; }
.balance strong { color: var(--gold); font: 750 30px ui-rounded,system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.coin-label { color: var(--muted); font-size: 12px; margin-inline-start: 5px; }
progress { width: 100%; height: 8px; accent-color: var(--gold); }
#tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
#tabs button { padding-inline: 2px; font-size: 12px; }
#tabs button[aria-pressed=true] { background: #4e394b; color: var(--gold); border-color: #a97658; }
#panel { overflow: auto; min-height: 135px; scrollbar-gutter: stable; }
.row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 3px 8px 0; border-bottom: 1px solid var(--line); }
.row p,#game-status,#lobby-status,.bank p { color: var(--muted); font-size: 12px; margin-top: 3px; }
.row button { min-width: 62px; }
.bank { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 9px; background: #322535; border-radius: 7px; }
#boost { position: absolute; inset: 13px auto auto 50%; translate: -50%; padding: 8px 17px; color: var(--gold); background: #513221; border: 1px solid #aa7048; border-radius: 7px; font: 700 21px Georgia,serif; }
dialog { width: min(390px,90vw); background: #2a202d; color: inherit; padding: 19px; }
dialog::backdrop { background: #100c14bc; }
.actions { justify-content: end; }
@media (max-width: 735px) {
  .play-layout { grid-template-columns: 1fr; max-width: 480px; gap: 19px; padding: 18px; min-height: 0; }
  .scene { aspect-ratio: 1.28; }
  #game { max-height: none; }
  #panel { max-height: 400px; }
}
@media (max-width: 590px) {
  .featured { grid-template-columns: 1fr; }
  .selector { padding-inline: 16px; }
  .locked-grid { grid-template-columns: 1fr; gap: 8px; }
  .locked { display: grid; grid-template-columns: 86px minmax(0,1fr); }
  .locked-art { height: 52px; gap: 3px; }
  .locked-copy { padding: 8px 10px; }
  .cover { aspect-ratio: 2.2; }
  h1 { font-size: 34px; }
  .room-line { flex-wrap: wrap; }
  .room-line button,.room-modes button,.action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; } }

:root { --wood:#b57345; --wood-light:#e6a96d; --wood-dark:#673b28; --input:#201924; --button:#382c3a; --hover:#4b3a49; --bar:#1c161f; --page-top:#261e2b; --page-bottom:#17131b; }
:root[data-theme=light] { color-scheme:light; background:#f3e8d9; color:#302019; --muted:#694f43; --gold:#80502c; --line:#56392336; --panel:#fff5e8; --input:#fffbf3; --button:#f1dfca; --hover:#e8cdb1; --bar:#fff3e4; --page-top:#f5e9db; --page-bottom:#eee0d1; }
body { background:linear-gradient(145deg,var(--page-top),var(--page-bottom) 70%); }
.bar { background:var(--bar); }
.bar #settings { margin-left:auto; }
.bar #sound + #settings { margin-left:0; }
.arcade-home-bar #account-action { margin-left:auto; white-space:nowrap; }
.arcade-home-bar #account-action:not([hidden]) + #settings { margin-left:0; }
.arcade-home-bar:has(#account-action:not([hidden])) { gap:10px; }
@media (max-width:420px) { .arcade-home-bar > span { display:none; } }
#account-status { max-width:1020px; margin:8px auto 0; padding:0 24px; color:var(--muted); }
.tool { width:38px; min-height:38px; padding:0; display:inline-grid; place-items:center; flex:none; }
.tool svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
button { background:var(--button); }
button:hover:not(:disabled) { background:var(--hover); }
input { color:inherit; background:var(--input); }
.primary,.primary:hover:not(:disabled) { background:#ffc97f; color:#291a20; }
.primary:hover:not(:disabled) { background:#ffda9e; }
.game-card:hover { background:var(--button); }
.cover { display:grid; place-items:center; }
.cover img { width:120px; height:120px; object-fit:contain; }
.cover-clicker { background: repeating-linear-gradient(1deg,#df9a5f16 0 2px,transparent 2px 12px),linear-gradient(120deg,#6b3b2e,#321e24); }
.cover-reaction { background:#3c102d; }
.game-card .cover::after { display:none; }
.clicker-layout { max-width:1240px; margin:0 auto; padding:24px; }
#lobby { max-width:450px; margin:clamp(20px,8vh,86px) auto; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.input-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:6px; }
.recent { border-top:1px solid var(--line); margin-top:22px; padding-top:16px; }
.recent h2,.shop-heading h2 { font-size:17px; }
#recent-rooms { color:var(--muted); font-size:13px; margin-top:8px; }
#recent-rooms a { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
#recent-rooms a:hover strong { color:var(--gold); text-decoration:underline; }
#recent-rooms strong { color:inherit; font:600 13px ui-monospace,monospace; }
#game { max-height:none; gap:16px; }
.room-top,.room-layout,.shop-heading { display:grid; gap:12px; }
.room-top { grid-template-columns:minmax(0,1fr) auto; align-items:start; border-bottom:1px solid var(--line); padding-bottom:12px; }
.room-top .balance { display:grid; gap:6px; }
.rates { display:flex; align-content:start; flex-wrap:wrap; min-height:34px; gap:4px 14px; font:600 12px/15px ui-monospace,monospace; color:var(--muted); }
.rates > span { white-space:nowrap; }
.room-layout { grid-template-columns:minmax(0,1fr) minmax(285px,360px); align-items:start; gap:22px; }
.room-stage { position:relative; min-width:0; container-type:inline-size; }
.room-stage .scene { display:block; height:min(76.923cqw,clamp(250px,calc(100svh - 255px),590px)); }
.room-stage .night-art svg { width:100%; height:110%; position:absolute; top:-4%; }
.room-shop { min-width:0; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.shop-heading { grid-template-columns:1fr auto auto; align-items:center; margin-top:12px; gap:7px; }
.shop-heading .tool { width:34px; min-height:34px; }
.shop-section-title { color:var(--gold); font-size:13px; padding:13px 0 5px; }
#panel { max-height:min(430px,52vh); padding-inline-end:5px; }
.wood-action,#boost { background:repeating-linear-gradient(1deg,#4c241a2b 0 1px,transparent 2px 7px),linear-gradient(#d9985c,#98542f); color:#27150e; border:1px solid #e0a366; box-shadow:inset 0 1px #ffd093,inset 0 -3px #4b271b70; }
.wood-action:hover:not(:disabled) { background:repeating-linear-gradient(1deg,#4c241a2b 0 1px,transparent 2px 7px),linear-gradient(#edaf73,#a8643d); }
.wood-action { margin-top:10px; min-height:74px; justify-content:center; text-align:center; font:700 46px/1 Fredoka,ui-rounded,system-ui,sans-serif; letter-spacing:0; }
#boost { width:min(245px,80%); padding:8px 12px; text-align:center; pointer-events:none; }
#boost strong { display:block; font:700 17px Georgia,serif; }
#boost progress { display:block; margin-top:6px; height:6px; accent-color:#fff0ac; }
.bank,.room-modes,dialog { background:var(--panel); }
.room-modes { border:1px solid var(--line); }
.room-modes button[aria-pressed=true] { background:var(--hover); color:var(--gold); }
.theme-options { display:flex; gap:16px; border:1px solid var(--line); border-radius:6px; }
.theme-options label,.check-row { display:flex; align-items:center; gap:6px; }
.theme-options input,.check-row input { width:auto; }
.music-options { display:grid; gap:8px; border:1px solid var(--line); border-radius:6px; }
.music-options .music-row { display:grid; grid-template-columns:auto minmax(72px, 1fr) auto; align-items:center; gap:8px; }
.music-options select { grid-column:2 / -1; }
.music-options output { min-width:4ch; text-align:right; }
.homepage-music { position:fixed; left:12px; bottom:12px; display:flex; gap:6px; }
.homepage-music .tool { width:44px; min-height:44px; }
#arcade-entrance, #arcade-entrance:hover:not(:disabled) {
  position:fixed; inset:0; z-index:100; width:100%; height:100dvh;
  display:grid; align-content:start; justify-items:center; gap:12px; padding:clamp(24px, 11svh, 112px) 24px 24px;
  isolation:isolate; overflow:hidden; border:0; border-radius:0; touch-action:manipulation;
  background:#171b20 url('/woodays-entrance-wide.jpg') center center / cover no-repeat;
  color:#fff4e4; text-align:center;
}
#arcade-entrance::before { content:""; position:absolute; inset:0; z-index:-1; background:#11192145; transition:background-color .45s ease-out; }
#arcade-entrance[data-step="2"]::before { background:#10151d18; }
#arcade-entrance:focus-visible { outline-offset:-9px; }
#arcade-entrance canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.entrance-title,.entrance-hint { position:relative; text-shadow:0 3px 18px #090f17; }
.entrance-title { font:700 84px/1 Georgia,serif; }
.entrance-hint { font-weight:650; }
#arcade-entrance[data-exiting] { pointer-events:none; animation:arcade-entrance-out .35s ease-out both; }
html:has(#arcade-entrance:not([hidden]):not([data-exiting])) { overflow:hidden; }
@keyframes arcade-entrance-out { to { opacity:0; } }
@media (max-width:580px) { .entrance-title { font-size:54px; } }
@media (prefers-reduced-motion:reduce) {
  #arcade-entrance::before { transition:none; }
  #arcade-entrance[data-exiting] { animation:none; }
}
.homepage-music #music-replay:not([data-pending]) [data-play-icon],
.homepage-music #music-replay[data-pending] [data-replay-icon] { display:none; }
.homepage-music [aria-pressed="true"] [data-mute-wave],
.homepage-music [aria-pressed="false"] [data-mute-cross] { display:none; }
.selector:has(~ .homepage-music) { padding-bottom:68px; }
#records { max-height:50vh; overflow:auto; margin:10px 0; }
#records h3 { margin-top:12px; font-size:14px; }
@media (max-width:735px) {
  .clicker-layout { padding:16px; }
  .room-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
  #panel { max-height:450px; }
}
@media (max-width:500px) {
  .room-top { grid-template-columns:1fr; }
  .room-line { justify-content:flex-end; }
  #room-code { margin-right:0; }
  .tool { width:44px; min-height:44px; }
}

.selector { max-width: 790px; }
.selector .cover { aspect-ratio:1.55; }
.selector .cover > img { width:150px; height:150px; border-radius:14px; }
.selector :is(.cover-reaction,.cover-watch) > img { width:130px; height:130px; border-radius:25%; }
.cover-watch { background:#092938; }
.selector .card-info { justify-content:center; text-align:center; }
#play-views {
  position:fixed; z-index:2;
  right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom));
  padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  background:var(--bar); color:var(--gold); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.game-card:has(.cover-clicker) { --title-from:#ffe1a1; --title-to:#efa478; }
.game-card:has(.cover-reaction) { --title-from:#ffc3dd; --title-to:#f487a8; }
.game-card:has(.cover-watch) { --title-from:#a7f0dc; --title-to:#8fcaff; }
:root[data-theme=light] .game-card:has(.cover-clicker) { --title-from:#80502c; --title-to:#9a481f; }
:root[data-theme=light] .game-card:has(.cover-reaction) { --title-from:#762d65; --title-to:#a73353; }
:root[data-theme=light] .game-card:has(.cover-watch) { --title-from:#176554; --title-to:#235d8c; }
.selector .card-info h2 { color:var(--title-from, currentColor); }
@supports (background-clip:text) {
  .selector .game-card:has(.cover-clicker,.cover-reaction,.cover-watch) .card-info h2 {
    background:linear-gradient(105deg,var(--title-from),var(--title-to));
    background-clip:text;
    color:transparent;
  }
}
@media (forced-colors:active) {
  .selector .game-card .card-info h2 { background:none; color:LinkText; }
}
.game-emblem { position:absolute; left:calc(50% + 39px); top:calc(50% + 36px); }
.game-emblem img { width:54px; height:54px; }
.room-layout { grid-template-columns:minmax(0,1fr) minmax(235px,300px) minmax(196px,240px); gap:16px; }
.shop-heading { grid-template-columns:1fr auto; }
#shop-tabs { margin-top:10px; margin-bottom:6px; }
#shop-tabs.single-shop { grid-template-columns:1fr; }
.room-social { display:grid; gap:12px; min-width:0; }
.room-social > section { padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.room-social h2 { font-size:15px; margin-bottom:8px; }
#standings { max-height:205px; overflow:auto; margin:0; padding:0; list-style:none; }
#standings li { display:grid; grid-template-columns:19px minmax(0,1fr) auto; gap:6px; align-items:center; padding:6px 0; font-size:12px; }
#standings li > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#standings .rank,#standings .offline { color:var(--muted); }
#standings strong { font-variant-numeric:tabular-nums; }
#chat-log { height:155px; overflow:auto; overflow-wrap:anywhere; font-size:12px; padding-inline-end:4px; }
#chat-log:empty::after { content:'No messages yet.'; color:var(--muted); }
#chat-log p { padding:4px 0; }
#chat-log strong { color:var(--gold); }
#chat-form { grid-template-columns:minmax(0,1fr) auto; gap:5px; margin-top:8px; }
#chat-form button { padding-inline:8px; }
#knock-tags { position:absolute; inset:18% 8% 25%; pointer-events:none; overflow:hidden; }
.knock-tag { position:absolute; white-space:nowrap; max-width:95%; overflow:hidden; text-overflow:ellipsis; color:#fff2d9; background:#301e22ea; padding:4px 8px; border:1px solid #f3be7770; border-radius:6px; font-size:13px; font-weight:700; animation:knock-tag .62s ease-out both; }
.tag-0 { top:14%; left:6%; }.tag-1 { top:26%; right:3%; }.tag-2 { top:43%; left:12%; }.tag-3 { top:58%; right:7%; }.tag-4 { top:72%; left:20%; }
@keyframes knock-tag { 0% {opacity:1; transform:translateY(8px);} 35% {opacity:1;} 100% {opacity:0; transform:translateY(-21px);} }
#knock,#scene { touch-action:manipulation; user-select:none; -webkit-user-select:none; }
#knock-boost,#streak { color:var(--gold); }
@media (max-width:1000px) and (min-width:736px) {
  .room-layout { grid-template-columns:minmax(0,1fr) minmax(240px,310px); }
  .room-social { grid-column:2; }
  .room-stage { grid-row:span 2; }
}
@media (max-width:735px) {
  .room-layout { grid-template-columns:minmax(0,1fr); }
  .room-stage .scene { height:min(76.923cqw,340px,43svh); }
  .room-top { grid-template-columns:1fr; }
  .room-line { justify-content:flex-end; }
  #room-code { margin-right:auto; }
  #chat-input,#code,#name { font-size:16px; }
  #chat-form button { min-height:44px; }
  .room-social > section { padding:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .knock-tag { animation-name:knock-tag-reduced; }
  @keyframes knock-tag-reduced { 0%,35% {opacity:1;} 100% {opacity:0;} }
}

.clicker-page { --heading:#ffd09c; --detail:#dbb6cb; --player:#dec5ff; --danger:#ffb1a7; --jade:#9de3bd; --sky:#a7d9ff; --berry:#ffafc4; }
.clicker-page[data-theme=light] { --heading:#713f24; --detail:#704861; --player:#60419a; --danger:#a22f32; --jade:#216648; --sky:#235986; --berry:#96324d; }
.clicker-page :is(h1,h2,h3,.row strong,.milestone strong) { color:var(--heading); }
.clicker-page :is(.row p,.intro,#chat-log,.coin-label,label,#lobby-status,#game-status,#member-status) { color:var(--detail); }
.clicker-page :is(#room-code,#rate,#recent-rooms strong,.bar .back,#leaderboard h2) { color:var(--sky); }
.clicker-page :is(#passive,#standings strong,.milestone > span,.bank p) { color:var(--jade); }
.clicker-page :is(#streak,#chat-form button,.shop-section-title,#clear-history) { color:var(--berry); }
.clicker-page :is(.room-modes button,#standings .rank,#recent-rooms time,#entry-colors summary,.member-row button:not(.kick-player)) { color:var(--player); }
.clicker-page .room-modes button[aria-pressed=true] { color:var(--gold); }
.clicker-page :is(.row button,.room-line .tool,.shop-heading .tool,#reward) { color:var(--heading); }
.clicker-page .row button:disabled { color:var(--detail); }
.clicker-page #chat-log:empty::after { color:var(--detail); }
.clicker-page #coins {
  background:linear-gradient(105deg,var(--heading),var(--gold) 45%,var(--detail));
  background-clip:text; color:transparent;
}
.player-name { display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; vertical-align:baseline; color:var(--player); font-weight:700; }
.player-name .nickname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.host-crown { display:inline-flex; flex:none; color:var(--gold); }
.host-crown svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.5; fill:currentColor; }
.knock-tag .player-name { color:#f0d4ff; }
.has-nickname-color { color:var(--nick-0); }
.nickname-gradient {
  background:linear-gradient(var(--nick-angle),var(--nick-0),var(--nick-1),var(--nick-2));
  background-clip:text; color:transparent;
}
#entry-colors { border:1px solid var(--line); border-radius:7px; }
#entry-colors summary { padding:9px 10px; cursor:pointer; }
#style-preview { float:right; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry-color-fields { display:grid; gap:8px; padding:0 10px 10px; }
#entry-colors select { font:inherit; color:var(--sky); background:var(--input); border:1px solid var(--line); border-radius:7px; padding:7px 10px; }
.recent-heading,.recent-room { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.recent-room { border-bottom:1px solid var(--line); }
#recent-rooms a { min-width:0; flex:1; border:0; }
.recent-room button { color:var(--berry); }
#style-colors { display:grid; gap:7px; }
.color-row { display:grid; grid-template-columns:1fr 42px minmax(90px,112px); align-items:center; gap:8px; }
.color-row input[type=color] { width:42px; height:36px; padding:3px; cursor:pointer; }
#style-angle { padding:0; accent-color:var(--gold); }
#style-angle-value { color:var(--gold); }
#member-list { max-height:55svh; overflow:auto; margin-block:10px; }
.member-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:5px; padding:6px 0; border-bottom:1px solid var(--line); }
.member-row button { padding-inline:8px; }
.kick-player { color:var(--danger); }
#member-status { color:var(--muted); min-height:1.4em; }
.room-safety { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }