/* Selected conservatory art, with real controls and an independent live canvas. */
:root { --bg:#061326; --text:#f1f7ff; --muted:#b4c7d5; --panel:rgba(5,21,38,.88); --panel-2:rgba(11,34,51,.9); --panel-line:rgba(221,182,106,.4); --panel-line-soft:rgba(150,191,202,.2); --gold:#f4cf82; --accent:#a5e9fa; }
body { font-family:"Nunito Sans",system-ui,sans-serif; background:#061326 url("art/conservatory-desktop.webp") center top/cover fixed no-repeat; }
body::after { inset:0; width:auto; height:auto; transform:none; background:rgba(2,9,23,.58); mask-image:none; opacity:1; z-index:0; pointer-events:none; }
body[data-screen="screen-connect"]::after { display:none; }
#app { max-width:none; z-index:1; }
.screen { width:100%; max-width:760px; margin:0 auto; }
.material-symbols-rounded { font-family:"Material Symbols Rounded"; font-weight:500; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; }
.all-games-btn,.icon-btn { border:1px solid #8aa4b7; background:rgba(7,26,51,.9); box-shadow:inset 0 1px 2px #ffffff35,0 3px 12px #0005; color:#eefaff; }
.all-games-btn { font:800 15px "Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; min-height:44px; padding:10px 18px; gap:8px; top:calc(18px + var(--safe-top)); left:calc(20px + var(--safe-left)); }
.icon-btn { border-radius:50%; width:46px; height:46px; display:inline-grid; place-items:center; padding:0; }
.icon-btn.off { opacity:.7; }
.btn { font-family:"Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; font-weight:800; }
.btn:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #fff3ac; outline-offset:4px; }
#screen-connect.active { display:block; width:100%; max-width:none; min-height:max(720px,100svh); padding:0; overflow:hidden; }
#screen-connect .front-audio { position:absolute; top:calc(18px + var(--safe-top)); right:20px; display:flex; gap:10px; }
#screen-connect .front-preview { position:absolute; width:min(28vw,400px); height:35svh; min-height:230px; max-height:390px; top:8svh; left:50%; transform:translateX(-50%); }
#screen-connect .lobby-fx { position:absolute; inset:0; width:100%; height:100%; mask-image:none; -webkit-mask-image:none; opacity:1; filter:none; }
#screen-connect .front-actions { position:absolute; top:43svh; left:50%; transform:translateX(-50%); width:min(560px,78vw); display:flex; flex-direction:column; align-items:center; gap:13px; }
.conservatory-logo { width:110%; height:auto; aspect-ratio:3.8; margin:0 0 2px; overflow:visible; position:relative; }
.conservatory-logo img { display:block; width:100%; height:auto; position:absolute; top:50%; transform:translateY(-50%); }
.front-actions>.btn { width:91%; min-height:72px; border-radius:38px; font-size:clamp(22px,2.2vw,32px); display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 28px; transition:transform .16s,filter .16s; }
.front-actions>.btn:hover { transform:translateY(-2px); filter:brightness(1.12); }
.front-actions>.btn:active { transform:translateY(1px); }
#screen-connect .front-actions #btn-create,#screen-connect .front-actions #btn-join { height:clamp(58px,9svh,92px); min-height:clamp(58px,9svh,92px); padding:8px 24px; border-radius:48px; font:800 clamp(22px,2.5vw,36px) "Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; }
#screen-connect .front-actions #btn-create { color:white; background:linear-gradient(#1cac48,#087b33 65%,#045725); border:2px solid #b9ffb2; box-shadow:inset 0 3px 7px #a2ff9690,inset 0 -4px 5px #002c29a0,0 0 0 4px #0b4b32,0 0 22px #19c46c55; }
#screen-connect .front-actions #btn-create::before,#screen-connect .front-actions #btn-create::after { display:none; }
#screen-connect .front-actions #btn-create span,#screen-connect .front-actions #btn-join span { letter-spacing:0; }
#screen-connect .front-actions #btn-create,#screen-connect .front-actions #btn-join { display:grid; grid-template-columns:36px 1fr 36px; gap:12px; }
#screen-connect .front-actions #btn-create>span,#screen-connect .front-actions #btn-join>span { margin:0; text-align:center; }
#screen-connect .front-actions .action-chevron { border:1px solid #b8ebf366; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; background:#001b2533; }
.front-actions>.btn .material-symbols-rounded { font-size:34px; }
.front-actions>.btn .action-chevron { margin-left:auto; font-size:26px; }
.front-actions>.btn>span:nth-child(2) { margin-right:auto; }
.btn.primary { color:white; background:linear-gradient(#1cac48,#087b33 65%,#045725); border:2px solid #b9ffb2; box-shadow:inset 0 3px 7px #a2ff9690,inset 0 -4px 5px #002c29a0,0 0 0 4px #0b4b32,0 0 22px #19c46c55; }
.front-actions .join-wide { color:white; background:linear-gradient(#1268b4,#063665 72%); border:2px solid #9fe6ff; box-shadow:inset 0 3px 7px #60baff70,inset 0 -4px 5px #001432b0,0 0 0 4px #092a45,0 0 18px #11aaff44; }
.front-actions>.how-home { width:auto; min-height:42px; padding:9px 23px; margin-top:2px; font-size:16px; background:rgba(21,22,26,.95); border:1px solid #b59b6b; box-shadow:0 2px 8px #0008; gap:8px; }
.front-actions>.how-home .material-symbols-rounded { font-size:22px; }
.front-records { background:rgba(4,20,33,.65); border:0; border-radius:20px; color:#d1e6f0; padding:7px 15px; cursor:pointer; font:700 13px "Nunito Sans",sans-serif; }
.front-records:hover { color:white; text-decoration:underline; }
.front-actions .error { max-width:100%; background:#301c28; border-radius:12px; padding:8px 12px; }
.entry-dialog { padding:0; border:1px solid #d9bb77; border-radius:24px; background:#081c30; color:#eef7ff; max-width:min(420px,calc(100vw - 32px)); width:100%; box-shadow:0 24px 100px #000a; }
.entry-dialog::backdrop { background:#030a16b0; backdrop-filter:blur(6px); }
.entry-dialog .card.entry { width:100%; margin:0; border:0; box-shadow:none; background:transparent; padding:32px 28px; }
.entry-dialog h2 { margin:0 0 24px; font:900 26px "Nunito Sans",sans-serif; color:#f5dba2; }
.entry-dialog .field { margin:15px 0; gap:8px; display:flex; flex-direction:column; text-align:left; font-weight:700; }
.entry-dialog .field[hidden] { display:none; }
.entry-dialog input { min-height:48px; width:100%; border-radius:12px; background:#04101f; border:1px solid #8aa4b766; color:white; font:700 18px "Nunito Sans",sans-serif; padding:10px 14px; }
.entry-dialog .btn { min-height:50px; font-size:18px; margin-top:18px; width:100%; letter-spacing:0; }
.entry-dialog .card.entry .btn.primary { background:linear-gradient(#1cac48,#087b33 65%,#045725); border:2px solid #b9ffb2; box-shadow:inset 0 2px 5px #a2ff9666,0 0 16px #19c46c44; border-radius:28px; font:800 18px "Nunito Sans",sans-serif; }
.dialog-close { position:absolute; right:12px; top:12px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#d2e9f7; cursor:pointer; }
.front-rules { padding-left:22px; font-size:16px; line-height:1.65; color:#d2e0ed; }
.front-rules li+li { margin-top:12px; }
/* The room is a clear control surface in the same environment. */
#screen-lobby.active { display:flex; gap:16px; padding-top:calc(72px + var(--safe-top)); padding-bottom:32px; }
#screen-lobby .lobby-fx { opacity:.32; mask-image:none; width:100%; height:100%; position:fixed; }
.lobby-top { min-height:70px; margin:0; }
.lobby-logo { width:260px; height:96px; object-fit:contain; margin:-14px 0; }
.arcs,.chev { display:none; }
.lobby-head { margin:0; }
.marquee-frame { width:100%; }
.marquee-box { border:1px solid #d6b97980; background:rgba(7,24,40,.94); box-shadow:inset 0 1px 0 #fff2,0 12px 35px #0003; border-radius:20px; padding:18px 28px; }
.marquee-box::before,.marquee-box::after { display:none; }
.marquee-box .code-label { font-family:inherit; color:#b4c7d5; font-size:12px; letter-spacing:.12em; }
.marquee-box .code-big { font-family:"Nunito Sans",sans-serif; font-size:clamp(26px,5vw,42px); font-weight:900; letter-spacing:.045em; color:#f4db9e; text-shadow:none; }
.share-btn { border-color:#aac7d655; background:#071d30; }
.panel { background:rgba(4,21,38,.94); border-color:#9bbfc338; box-shadow:0 8px 24px #0003; }
.panel-head,.panel-title { font-family:"Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; }
#screen-lobby .player-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#screen-lobby .player-list li { background:#0e2d41; border:1px solid #9dc5ce2e; border-radius:13px; min-height:64px; }
#screen-lobby .player-list li { position:relative; padding:12px; }
#screen-lobby .player-list .avatar { display:none; }
#screen-lobby .player-list .dot { position:absolute; right:8px; top:8px; width:5px; height:5px; }
#screen-lobby .player-list .tag { position:absolute; right:7px; bottom:5px; font-size:7px; padding:1px 4px; }
#screen-lobby .player-list li>span:not(.avatar):not(.dot):not(.tag) { font-size:13px; font-weight:800; padding-right:4px; }
#screen-lobby .host-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#screen-lobby .control-panel { min-width:0; }
#screen-lobby .stepper { width:100%; min-width:0; gap:5px; }
#screen-lobby .stepper .step { min-width:34px; width:34px; height:38px; }
#screen-lobby .step-value { min-width:28px; font-size:22px; }
#screen-lobby .control-panel .panel-note { font-size:10px; letter-spacing:0; white-space:normal; }
#screen-lobby .panel-head { letter-spacing:0; }
#screen-lobby #btn-start { grid-column:1/-1; min-height:54px; font-size:22px; }
#screen-lobby #btn-start { background:linear-gradient(#1cac48,#087b33 65%,#045725); border:2px solid #b9ffb2; box-shadow:inset 0 3px 6px #a2ff9666,0 0 18px #19c46c44; border-radius:28px; letter-spacing:0; color:white; }
#screen-lobby #btn-start::before,#screen-lobby #btn-start::after { display:none; }
.control-panel { padding:14px 18px; }
.howto { order:10; }
.volume-row { margin:-10px 0 0 auto; width:180px; }
/* Keep the play surface readable; the conservatory supplies depth outside it. */
#screen-game { max-width:620px; min-height:100svh; background:#051125; box-shadow:0 0 70px #020713b0; }
.stage { border-left:1px solid #c9b07880; border-right:1px solid #c9b07880; }
/* The generated botanical frame is exterior to the physical canvas. Shared
   by the real game and local stage viewer; 320px leaves about 270px to play. */
.stage { --court-gutter-x:7.5%; --court-gutter-y:3%; isolation:isolate; }
.stage::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#061326 url("art/ten-stage/court.webp") center/100% 100% no-repeat; filter:hue-rotate(var(--court-hue,0deg)); }
#game-canvas { inset:var(--court-gutter-y) var(--court-gutter-x); width:calc(100% - var(--court-gutter-x) - var(--court-gutter-x)); height:calc(100% - var(--court-gutter-y) - var(--court-gutter-y)); }
.hud { background:#061b30; border-bottom:1px solid #d4b77950; }
.chip { background:#0b263a; border-color:#aac9d033; }
.chip.me { background:#103d45; border-color:#7bddc8; box-shadow:none; }
.chip .chip-name { font-size:12px; }
.chip .chip-sub { color:#c3d7e2; }
.hud .icon-btn { width:36px; height:36px; }
/* Results carry the same material language and prioritize the personal record. */
#screen-round,#screen-match { max-width:900px; }
.rs { --rs-panel:rgba(5,22,38,.96); }
.rs-title { font-family:"Nunito Sans",sans-serif; font-weight:900; color:#fff2d3; text-shadow:0 4px 22px #000; }
.rs-panel { background:rgba(5,22,38,.96); border-color:#bfa66d70; border-radius:20px; }
.rs-card { background:rgba(5,22,38,.96); border-color:#bfa66d70; border-radius:20px; }
.round-history { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:16px; font-size:12px; color:#9db9c8; }
.round-history b { color:#d5edf4; background:#163747; padding:5px 8px; border-radius:8px; font-variant-numeric:tabular-nums; }
.rs-hero { background:rgba(8,31,47,.95); border-color:#d3b37080; box-shadow:0 12px 40px #0005; }
.rs-pb-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rs-pb-list li { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 8px; border-color:#d1ae6550; background:#112b3a; }
.rs-pb-list li:first-child { background:#3d3422; border-color:#ebc871; }
.rs-pb-list .pb-rank { width:32px; height:32px; border:1px solid #d9c489; border-radius:50%; display:grid; place-items:center; color:#efd191; font-size:14px; }
.rs-pb-list .pb-score { font-size:19px; color:#ecf6f9; }
.rs-pb-list .pb-when { font-size:11px; text-align:center; }
.rs-pb-list li.now .pb-when::after { display:block; content:"This game"; margin-top:3px; }
.history-tabs { display:flex; gap:6px; overflow:auto; padding:3px 0 10px; scrollbar-width:thin; scrollbar-color:#668995 #091d30; }
.history-tabs button { flex:0 0 auto; padding:8px 12px; border:1px solid #789aa64d; border-radius:18px; background:#0a263b; color:#cfe4ee; cursor:pointer; font:700 13px "Nunito Sans",sans-serif; }
.history-tabs button[aria-pressed="true"] { background:#d2b16a; color:#112136; }
.history-status { color:#b4c7d5; font-size:12px; margin:7px 0; }
@media(min-width:900px) { body[data-screen="screen-lobby"] #app { padding-top:12px; } .rs-pb-list .pb-score { font-size:24px; } }
@media(max-width:680px) {
  body { background-image:url("art/conservatory-mobile.webp"); background-position:center top; }
  #screen-connect.active { min-height:max(540px,100svh); }
  .all-games-btn { left:12px; top:calc(14px + var(--safe-top)); font-size:13px; padding:8px 12px; min-height:40px; }
  .all-games-word { display:inline; }
  #screen-connect .front-audio { top:calc(14px + var(--safe-top)); right:12px; gap:7px; }
  .icon-btn { width:40px; height:40px; }
  #screen-connect .front-preview { width:46vw; max-width:300px; height:25svh; min-height:175px; top:18svh; }
  #screen-connect .front-actions { width:min(82vw,450px); top:45svh; gap:12px; }
  .conservatory-logo { height:auto; width:100%; margin-bottom:-2px; }
  .front-actions>.btn { width:92%; min-height:54px; font-size:22px; padding:10px 22px; gap:12px; }
  #screen-connect .front-actions #btn-create,#screen-connect .front-actions #btn-join { height:56px; min-height:56px; font-size:clamp(17px,5.4vw,22px); white-space:nowrap; }
  #screen-connect .front-actions #btn-create,#screen-connect .front-actions #btn-join { grid-template-columns:26px 1fr 28px; padding-inline:16px; gap:8px; }
  #screen-connect .front-actions .action-chevron { width:28px; height:28px; }
  .front-actions>.btn .material-symbols-rounded { font-size:28px; }
  .front-actions>.how-home { width:auto; min-height:38px; font-size:14px; padding:7px 18px; margin-top:2px; }
  .front-actions>.how-home .material-symbols-rounded { font-size:20px; }
  .front-records { font-size:11px; padding:4px 12px; }
  #screen-lobby.active { padding:calc(66px + var(--safe-top)) 16px 24px; gap:12px; }
  #screen-lobby .player-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #screen-lobby .lobby-head { order:1; }
  #screen-lobby .host-controls { order:2; }
  #screen-lobby .players-panel { order:3; }
  .lobby-logo { width:205px; height:82px; }
  .marquee-box { padding:13px 18px; }
  .marquee-box .code-big { font-size:28px; }
  .volume-row { margin-top:0; }
  #screen-game { max-width:100%; }
  .rs-chip { flex-basis:58px; min-width:58px; }
  .rs-chip>span { overflow-wrap:normal; }
  .rs-pb-list .pb-score { font-size:17px; }
}
@media(max-height:740px) and (max-width:680px) {
  #screen-connect .front-preview { top:20svh; height:17svh; min-height:90px; }
  #screen-connect .front-actions { top:38svh; gap:10px; }
  .conservatory-logo { height:auto; width:100%; }
}
@media(max-height:800px) and (min-width:681px) {
  #screen-connect .front-preview { height:30svh; min-height:180px; }
  #screen-connect .front-actions { top:39svh; width:min(500px,78vw); }
}
@media(max-height:640px) and (min-width:681px) {
  #screen-connect.active { min-height:620px; }
  #screen-connect .front-preview { height:190px; top:65px; }
  #screen-connect .front-actions { top:250px; width:420px; }
  .conservatory-logo { height:auto; }
  .front-actions>.btn { min-height:54px; font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* The family sound bar: music, its volume, then effects + host. */
.sound-controls { position:fixed; top:calc(14px + var(--safe-top)); right:max(14px,env(safe-area-inset-right)); z-index:120; display:flex; align-items:center; gap:7px; }
.sound-button { width:44px; height:44px; padding:0; display:grid; place-items:center; border:1.5px solid #ead998; border-radius:50%; color:#fff8d8; background:linear-gradient(#397b57,#174832); box-shadow:inset 0 2px 1px #ffffff40,0 3px 0 #071f18,0 5px 14px #0007; cursor:pointer; }
.sound-button.off { background:linear-gradient(#294758,#142738); color:#c0cbd0; border-color:#78939a; }
.sound-button .material-symbols-rounded { font-size:24px; }
.sound-button:focus-visible,.sound-volume:focus-within { outline:3px solid #7ef0dd; outline-offset:4px; }
.sound-volume { display:flex; align-items:center; width:100px; height:44px; padding:0 12px; border:1px solid #dfc778; border-radius:24px; background:linear-gradient(#214a39,#112b28); box-shadow:inset 0 1px 1px #ffffff30,0 3px 0 #071f18,0 5px 14px #0005; }
.sound-volume #music-volume { appearance:none; -webkit-appearance:none; width:100%; height:8px; margin:0; padding:0; border:0; border-radius:8px; background:linear-gradient(to right,#edd482 var(--fill,30%),#0a1f1a var(--fill,30%)); cursor:pointer; }
.sound-volume #music-volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff0ba; border:2px solid #9f863c; box-shadow:0 2px 4px #0006; }
.sound-volume #music-volume::-moz-range-thumb { width:17px; height:17px; border-radius:50%; background:#fff0ba; border:2px solid #9f863c; }
.sound-volume input:focus { outline:none; }
#screen-lobby .lobby-top { justify-content:center; }
#screen-game .hud { padding-top:calc(66px + var(--safe-top)); }
#screen-game .hud::before { display:none; }
.stage-title { flex:1 1 130px; min-width:0; color:#f4d8a0; font:700 clamp(13px,2.8vw,18px)/1.15 "Nunito Sans",sans-serif; }
#screen-game .hud { column-gap:6px; row-gap:6px; padding-inline:max(10px,var(--safe-left)) max(10px,var(--safe-right)); }
#screen-game .hud-right { margin-left:auto; }
@media(max-width:360px) {
  .stage-title { flex-basis:112px; font-size:12px; }
  #screen-game .hud-right { gap:3px; }
  #screen-game .round-pill,#screen-game .timer-pill { padding:5px 6px; font-size:10px; }
}
@media(max-width:420px) { .sound-controls { right:10px; gap:5px; } .sound-volume { width:68px; padding-inline:9px; } }

/* Results: a warm, legible scorebook within the nighttime conservatory. */
#app:has(> #screen-round.active),#app:has(> #screen-match.active) { max-width:1160px; }
body[data-screen="screen-round"] .sound-controls::before,body[data-screen="screen-match"] .sound-controls::before { content:""; position:fixed; top:0; left:0; width:100%; height:calc(70px + var(--safe-top)); background:#07172cef; border-bottom:1px solid #a28e5044; backdrop-filter:blur(12px); z-index:-1; box-shadow:0 4px 14px #0002; pointer-events:none; }
body[data-screen="screen-round"] .all-games-btn,body[data-screen="screen-match"] .all-games-btn { z-index:121; }
#screen-round,#screen-match { max-width:1120px; padding:calc(76px + var(--safe-top)) 22px 30px; }
#screen-round .rs,#screen-match .rs { gap:14px; padding:24px; border:1px solid #c5a860; border-radius:26px; background:linear-gradient(145deg,#fffdf3,#f2ead3); box-shadow:0 22px 80px #0008,inset 0 0 0 5px #fff9; color:#243c36; --muted:#66736a; }
.rs-sparks { display:none; }
.results-wordmark { width:200px; height:70px; object-fit:contain; align-self:center; margin:-8px 0 -14px; }
#screen-round .rs-title,#screen-match .rs-title { color:#254e3a; text-shadow:none; font:900 25px "Nunito Sans",sans-serif; margin:0; line-height:1.2; background:none; border:0; box-shadow:none; padding:0; letter-spacing:0; text-transform:none; }
#screen-round .rs-sub,#screen-match .rs-sub { margin:-7px 0 2px; padding:0; background:none; border:0; color:#697466; font:700 12px "Nunito Sans",sans-serif; letter-spacing:0; }
.rs .rs-card { padding:16px 18px; border:1px solid #d7c897; border-radius:15px; background:#fffdf7; box-shadow:0 3px 9px #b6a46916; }
.rs .rs-card h3,.rs .rs-card h4 { color:#284c3a; font:900 16px "Nunito Sans",sans-serif; text-transform:none; letter-spacing:0; margin:0 0 10px; }
.rs .rs-card h4 { font-size:13px; }
.records-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.record-category { font-size:12px; color:#57745b; background:#eaf0df; border-radius:10px; padding:4px 10px; }
.records-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:24px; align-items:start; }
.records-grid>section { min-width:0; }
.rs .rs-pb-list { gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.rs .rs-pb-list li,.rs .rs-pb-list li:first-child { border:0; background:transparent; padding:0 3px 8px; gap:0; box-shadow:none; }
.rs .rs-pb-list li.now { background:#f4f2d9; outline:1px solid #d9c67b; border-radius:12px; }
/* The record trophy is a BALL, not a gem — it is a ball game. Pure CSS: a lit
   sphere with a highlight, in rainbow / gold / silver for 1st / 2nd / 3rd, so
   the three ranks read at a glance without three image files. */
.record-ball { display:block; width:62px; height:62px; max-width:100%; border-radius:50%; position:relative; filter:drop-shadow(0 4px 3px #534c3d30); }
.record-ball::after { content:""; position:absolute; left:22%; top:16%; width:30%; height:22%; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.record-ball-rainbow { background:radial-gradient(circle at 34% 28%, #fff9, transparent 40%), conic-gradient(from 210deg, #ff5f6d, #ffc371, #47e6b1, #4facfe, #b16cea, #ff5f6d); }
.record-ball-gold { background:radial-gradient(circle at 34% 28%, #fff9, transparent 42%), linear-gradient(150deg, #ffd76e, #e9a725 62%, #b7791f); }
.record-ball-silver { background:radial-gradient(circle at 34% 28%, #fff9, transparent 42%), linear-gradient(150deg, #f2f4f7, #c3cad4 60%, #97a1ad); }
/* An empty slot is a faint outline of the ball you have not won yet. */
.rs-pb-list li:not(.now) .record-ball { opacity:.42; }
.rs .rs-pb-list .pb-score { color:#2c4f3b; font:900 clamp(15px,1.6vw,22px) "Nunito Sans",sans-serif; font-variant-numeric:tabular-nums; }
.rs .rs-pb-list li.now .pb-score { color:#2c4f3b; }
.rs .rs-pb-list .pb-when { color:#687365; font:600 10px "Nunito Sans",sans-serif; margin-top:3px; }
.rs .rs-pb-list li.now .pb-when::after { color:#587948; content:"This game"; display:block; font-weight:900; margin-top:1px; }
.rs .rs-pb-sub { color:#667364; font:600 11px "Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; margin:-5px 0 8px; }
.rs .history-status { color:#667466; font-size:11px; margin:12px 0 0; border-top:1px solid #e7dfc8; padding-top:10px; }
.rs .history-tabs { margin-bottom:6px; padding-bottom:7px; scrollbar-color:#b6be9d #f6f1e3; }
.rs .history-tabs button { color:#48634d; background:#f4f2e6; border-color:#dbd9bb; padding:6px 10px; min-height:36px; font-size:12px; }
.rs .history-tabs button[aria-pressed="true"] { color:#fffbe3; background:#2e6c48; border-color:#245637; }
.rs .rs-hist-graph .hg-axis,.rs .rs-hist-graph .hg-tick { fill:#657567; font-family:"Nunito Sans",sans-serif; }
.rs .rs-hist-graph .hg-grid { stroke:#bcc9b9; stroke-opacity:.55; }
.rs .rs-hist-graph .hg-now { fill:#2b694b; font-family:"Nunito Sans",sans-serif; font-weight:900; }
.rs .rs-hist-graph svg { height:176px; }
.history-chart-caption { margin:-1px 0 0; color:#72806b; text-align:right; font-size:10px; }
.rs .rs-pb-empty { color:#70816b; }
.rs .rs-rules { padding:12px 16px; background:#efefdf; }
.rs .rs-rules-title { color:#4e684b; font:800 13px "Nunito Sans",sans-serif; letter-spacing:0; }
.rs .rs-rules-info { color:#63765b; border-color:#bcc6a7; }
.rs .rs-rule { background:#fffdf5; border-color:#ddd8bf; }
.rs .rs-rn,.rs .rs-rk,.rs .rs-rule-note,.rs .rs-runit { color:#607055; }
.rs .rs-rv { color:#355d43; }
.rs .rs-advance { color:#65765e; }
.rs .rs-actions,.rs .match-actions { justify-content:center; margin-top:0; }
.rs .rs-actions .btn,.rs .match-actions .btn { flex:0 1 auto; min-width:150px; min-height:46px; border-radius:24px; font-size:15px; }
.rs #btn-next,.rs #btn-again { width:auto; align-self:center; flex:0 1 230px; min-height:46px; padding:10px 26px; background:linear-gradient(#398455,#195a38); color:#fffbe8; border:1.5px solid #decd8c; box-shadow:inset 0 2px 1px #fff4,0 3px 0 #15462d,0 5px 10px #14482a25; text-shadow:none; font:900 16px "Nunito Sans",sans-serif; letter-spacing:0; text-transform:none; }
.rs #btn-next::before,.rs #btn-next::after,.rs #btn-again::before,.rs #btn-again::after { display:none; }
.rs .btn.ghost,.rs #btn-board2 { color:#44613f; border-color:#c7cea9; background:#f8f6e9; box-shadow:none; }
.rs .rs-drama { background:#f2f4e7; }
.rs .drama li { background:transparent; border-color:#d2d9bf; }
.rs .dwho { color:#34573f; }.rs .dlabel { color:#65775c; }.rs .dval { color:#48744c; }
@media(max-width:680px) {
  #screen-round,#screen-match { padding:calc(72px + var(--safe-top)) 10px 22px; }
  #screen-round .rs,#screen-match .rs { padding:14px 12px; border-radius:20px; gap:12px; }
  .results-wordmark { width:174px; height:61px; }
  #screen-round .rs-title,#screen-match .rs-title { font-size:23px; }
  .rs .rs-card { padding:13px 11px; }
  .records-grid { grid-template-columns:1fr; gap:16px; }
  .record-ball { width:66px; height:66px; }
  .rs .rs-pb-list .pb-score { font-size:21px; }
  .rs .rs-actions .btn,.rs .match-actions .btn { min-width:130px; flex:1 1 130px; }
}

/* --- everyone's board, under Your records ------------------------------
   One row per player: rank, face, name, when they set it, their best. */
.global-bests { margin-top:14px; padding-top:12px; border-top:1px solid #d8cda545; }
.global-bests h4 { margin:0 0 2px; font-size:13px; color:#235139; }
.global-bests-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:5px; }
.gb-row { display:grid; grid-template-columns:22px 26px 1fr auto auto; align-items:center; gap:9px;
  padding:7px 9px; border:1px solid #d8cda555; border-radius:9px; background:#fdfaf0;
  font-size:12px; font-variant-numeric:tabular-nums; }
.gb-rank { font-family:"Russo One",sans-serif; color:#8a9483; text-align:right; }
.gb-face { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:12px; color:#fff; background:var(--seat,#a78bfa); }
.gb-name { font-weight:700; color:#235139; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.gb-when { color:#7c8a7e; font-size:11px; white-space:nowrap; }
.gb-score { font-family:"Russo One",sans-serif; color:#235139; white-space:nowrap; }
/* Your own row, so you can find yourself on the board at a glance. */
.gb-row.me { border-color:#bccaab; background:linear-gradient(120deg,#e8eedb,#f4f6ea); box-shadow:0 0 0 1px #bccaab55; }
@media(max-width:520px){
  .gb-row { grid-template-columns:20px 24px 1fr auto; gap:7px; }
  .gb-when { display:none; }
}