/* A quiet frame for the original handset. One type family, one accent, and consistent spacing. */
html[data-theme="day"] {
  color-scheme: light;
  --ui-bg: #f5ecdf;
  --ui-ink: #292c24;
  --ui-muted: #645f55;
  --ui-line: rgba(56, 51, 43, .2);
  --ui-surface: rgba(255, 252, 247, .85);
  --ui-accent: #31543c;
  --ui-accent-text: #fff;
  --ui-wash: transparent;
}
html[data-theme="night"] {
  color-scheme: dark;
  --ui-bg: #141b17;
  --ui-ink: #f0f3ec;
  --ui-muted: #afbcb0;
  --ui-line: rgba(223, 234, 222, .2);
  --ui-surface: rgba(29, 40, 32, .88);
  --ui-accent: #a8c8a2;
  --ui-accent-text: #17231b;
  --ui-wash: rgba(14, 23, 17, .73);
}
html[data-theme] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[data-theme] body {
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}
html[data-theme] .page-shell { max-width: 1440px; min-height: 100dvh; padding-inline: clamp(22px, 4vw, 60px); }
html[data-theme] .page-shell::before { background: var(--ui-wash); }
html[data-theme] #desk-light { opacity: .06; }
html[data-theme="night"] #desk-light { opacity: .04; }
html[data-theme] .site-grain { display: none; }
html[data-theme] .desk-surface,
html[data-theme] body[data-surface="custom"] .desk-surface { filter: blur(28px) brightness(.61) saturate(.55); }
html[data-theme] body[data-surface="leather"] .desk-surface,
html[data-theme] body[data-surface="walnut"] .desk-surface,
html[data-theme] body[data-surface="stone"] .desk-surface { filter: brightness(.55) saturate(.55); }
html[data-theme="night"] .desk-surface,
html[data-theme="night"] body[data-surface="custom"] .desk-surface { filter: blur(28px) brightness(.28) saturate(.46); }
html[data-theme="night"] body[data-surface="leather"] .desk-surface,
html[data-theme="night"] body[data-surface="walnut"] .desk-surface,
html[data-theme="night"] body[data-surface="stone"] .desk-surface { filter: brightness(.25) saturate(.45); }

/* Keep scene detail visible while the handset remains the brightest object. */
html[data-theme="night"] body[data-surface="arcade"] { --ui-wash: rgba(5, 9, 7, .58); }
html[data-theme="night"] body[data-surface="crt"] { --ui-wash: rgba(12, 18, 21, .35); }
html[data-theme="day"] body[data-surface="arcade"],
html[data-theme="day"] body[data-surface="crt"] { --ui-wash: rgba(237, 240, 234, .74); }
html[data-theme="night"] body[data-surface="arcade"] .desk-surface { filter: blur(2px) brightness(.54) saturate(.72); transform: scale(1.015); }
html[data-theme="night"] body[data-surface="crt"] .desk-surface { filter: blur(3px) brightness(.83) saturate(.84); transform: scale(1.015); }
html[data-theme="day"] body[data-surface="arcade"] .desk-surface,
html[data-theme="day"] body[data-surface="crt"] .desk-surface { filter: blur(3px) brightness(1.12) saturate(.72); transform: scale(1.015); }

html[data-theme] .site-header { position: relative; height: 86px; gap: 20px; border-bottom: 0; background: transparent; }
html[data-theme] .brand { position: absolute; z-index: 2; top: 7px; left: 0; display: block; width: 390px; height: 195px; }
html[data-theme] .brand img { display: block; width: 100%; height: auto; object-fit: contain; }
html[data-theme] .header-actions { gap: 8px; margin-left: auto; }
html[data-theme] .header-button {
  min-height: 44px; border: 1px solid var(--ui-line); border-radius: 10px; padding-inline: 14px;
  background: var(--ui-surface); color: var(--ui-ink); font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0; box-shadow: none; transition: background-color 180ms ease, border-color 180ms ease, scale 180ms ease;
}
html[data-theme] .header-button span:not(.chevron) { color: inherit; }
html[data-theme] .header-button:hover, html[data-theme] .header-button[aria-expanded="true"] { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .header-button:active { scale: .96; }
html[data-theme] .chevron,
html[data-theme] .detail-chevron,
html[data-theme] .country-chevron,
html[data-theme] .board-chevron {
  display: inline-block; flex: 0 0 8px; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  font-size: 0; line-height: 0; transform: rotate(45deg);
  transition: transform 180ms ease;
}
html[data-theme] .chevron { margin: 0 2px 3px 9px; }
html[data-theme] .detail-chevron { margin: 0 5px 4px 0; }
html[data-theme] .country-chevron { margin: 0 4px 4px 0; color: var(--ui-muted); }
html[data-theme] .board-chevron { margin: 0 5px 4px 0; color: var(--ui-muted); }
html[data-theme] .surface-toggle[aria-expanded="true"] .chevron,
html[data-theme] .music-more[open] summary .detail-chevron,
html[data-theme] .leaderboard[data-open="true"] .board-chevron { transform: rotate(225deg); }

html[data-theme] .experience {
  grid-template-columns: minmax(270px, .95fr) minmax(350px, min(39vw, 500px)) minmax(245px, .78fr);
  gap: clamp(26px, 3.3vw, 58px); align-items: center; min-height: 0; padding-block: 30px 34px;
}
html[data-theme] .intro { align-self: center; width: 100%; max-width: 360px; padding: 0; animation: none; }
html[data-theme] .eyebrow,
html[data-theme] .instruction-label,
html[data-theme] .panel-topline,
html[data-theme] .metric-label,
html[data-theme] .music-topline,
html[data-theme] .leaderboard-kicker,
html[data-theme] .room-code { font-family: inherit; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
html[data-theme] .eyebrow { display: block; margin: 0 0 12px; color: var(--ui-muted); animation: none; }
html[data-theme] .eyebrow::before { display: none; }
html[data-theme] .intro h1.hero-logo {
  display: block; width: auto; max-width: 360px; margin: 0; color: var(--ui-ink); font-family: inherit;
  font-size: clamp(45px, 4vw, 60px); font-weight: 760; line-height: 1.02; letter-spacing: -.065em;
  text-wrap: balance; animation: none;
}
html[data-theme] .intro-copy { max-width: 30ch; margin: 17px 0 23px; color: var(--ui-muted); font-size: 16px; font-weight: 450; line-height: 1.5; letter-spacing: -.012em; animation: none; }
html[data-theme] .primary-button, html[data-theme] .secondary-button {
  min-width: 188px; min-height: 48px; border: 1px solid var(--ui-accent); border-radius: 10px; padding-inline: 17px;
  background: var(--ui-accent); color: var(--ui-accent-text); font-family: inherit; font-size: 13px; font-weight: 650;
  letter-spacing: 0; box-shadow: none; transition: background-color 180ms ease, scale 180ms ease;
}
html[data-theme] .intro > .primary-button { animation: none; }
html[data-theme] .primary-button:hover, html[data-theme] .secondary-button:hover { background: var(--ui-ink); color: var(--ui-bg); box-shadow: none; }
html[data-theme] .primary-button:active, html[data-theme] .secondary-button:active { scale: .96; }
html[data-theme] .instructions { max-width: 340px; margin-top: 31px; border-top: 1px solid var(--ui-line); padding-top: 18px; box-shadow: none; animation: none; }
html[data-theme] .instruction-label { color: var(--ui-muted); }
html[data-theme] .instructions p { margin-top: 8px; color: var(--ui-muted); font-size: 12px; line-height: 1.55; }
html[data-theme] .instructions strong { border: 0; border-radius: 4px; padding: 2px 4px; background: var(--ui-surface); color: var(--ui-ink); font-family: inherit; font-size: 11px; font-weight: 650; letter-spacing: 0; }

html[data-theme] .music-player {
  width: min(100%, 350px); margin-top: 26px; border: 1px solid var(--ui-line); border-radius: 16px; padding: 17px 17px 8px;
  background: var(--ui-surface); color: var(--ui-ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
}
html[data-theme] .music-player::before { display: none; }
html[data-theme] .music-player:hover { border-color: var(--ui-line); background: var(--ui-surface); box-shadow: none; transform: none; }
html[data-theme] .music-topline, html[data-theme] .music-details span, html[data-theme] .music-more summary, html[data-theme] .volume-scale { color: var(--ui-muted); }
html[data-theme] .music-player .audio-tuning { width: 100%; margin-top: 11px; }
html[data-theme] .music-player .audio-control-meta label { color: var(--ui-ink); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
html[data-theme] .music-player .audio-control-meta output { color: var(--ui-accent); font-family: inherit; font-size: 15px; font-weight: 650; }
html[data-theme] .audio-range::-webkit-slider-runnable-track { border-color: var(--ui-line); background: linear-gradient(90deg,var(--ui-accent) 0 var(--range-fill,0%),var(--ui-line) var(--range-fill,0%) 100%); }
html[data-theme] .audio-range::-webkit-slider-thumb { border: 1px solid var(--ui-accent); border-radius: 7px; background: var(--ui-surface); box-shadow: none; }
html[data-theme] .audio-range::-moz-range-track { border-color: var(--ui-line); background: var(--ui-line); }
html[data-theme] .audio-range::-moz-range-progress { background: var(--ui-accent); }
html[data-theme] .audio-range::-moz-range-thumb { border: 1px solid var(--ui-accent); border-radius: 7px; background: var(--ui-surface); }
html[data-theme] .music-secondary, html[data-theme] .music-more, html[data-theme] .music-more-content { border-color: var(--ui-line); }
html[data-theme] .music-secondary { margin-top: 7px; padding-top: 11px; }
html[data-theme] .music-details strong { color: var(--ui-ink); font-size: 12px; font-weight: 650; }
html[data-theme] .music-transport button, html[data-theme] .music-upload { border: 1px solid var(--ui-line); border-radius: 9px; background: transparent; color: var(--ui-ink); box-shadow: none; }
html[data-theme] .music-transport button { width: 44px; height: 44px; }
html[data-theme] .music-transport button:not(:disabled):hover, html[data-theme] .music-upload:hover { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .music-transport button.music-play { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-ink) !important; }
html[data-theme] .music-transport button.music-play:not(:disabled):hover { border-color: var(--ui-accent); background: var(--ui-surface) !important; color: var(--ui-ink) !important; }
html[data-theme] .music-more summary { min-height: 44px; font-size: 11px; }
html[data-theme] .music-more-content .audio-control-meta label { color: var(--ui-muted); font-family: inherit; font-size: 11px; font-weight: 600; }
html[data-theme] .audio-time { color: var(--ui-muted); }

html[data-theme] .phone-area { width: min(100%, calc(66.667dvh - 150px), 500px); animation: none; }
html[data-theme] .phone-area::before { display: none; }
html[data-theme] .phone { filter: drop-shadow(0 26px 25px rgba(15, 25, 18, .26)); }
html[data-theme] body[data-phase="running"] .phone { filter: drop-shadow(0 27px 26px rgba(15, 25, 18, .27)); }
html[data-theme="night"] .phone, html[data-theme="night"] body[data-phase="running"] .phone { filter: drop-shadow(0 28px 28px rgba(0,0,0,.48)); }
html[data-theme] .phone-caption { gap: 4px; margin-top: -3px; color: var(--ui-muted); font-family: inherit; font-size: 10px; font-weight: 550; letter-spacing: .05em; }
html[data-theme] .site-footer { min-height: 45px; justify-content: flex-start; border-top: 1px solid var(--ui-line); color: var(--ui-muted); }
html[data-theme] .maker-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; color: var(--ui-ink); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-theme] .maker-open:hover { color: var(--ui-ink); }
html[data-theme] .maker-open span { color: var(--ui-accent); transition: transform 180ms ease; }
html[data-theme] .maker-open:hover span { transform: translate(2px, -2px); }

html[data-theme] .score-panel {
  justify-self: end; width: 100%; max-width: 300px; border: 0; border-radius: 0;
  padding: 4px 0; background: transparent; color: var(--ui-ink); box-shadow: none; animation: none;
}
html[data-theme] .panel-topline, html[data-theme] .metric-label, html[data-theme] .best-row,
html[data-theme] .score-hint, html[data-theme] .leaderboard-kicker, html[data-theme] .room-code,
html[data-theme] .leaderboard-preview { color: var(--ui-muted); }
html[data-theme] .panel-line { background: var(--ui-line); }
html[data-theme] .score-block { margin-top: 21px; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); padding: 17px 0 16px; }
html[data-theme] .score-value, html[data-theme] .score-value.t-digit-group { color: var(--ui-accent); font-family: inherit; font-size: clamp(61px, 5.8vw, 82px); font-weight: 550; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
html[data-theme] .best-row { border-color: var(--ui-line); font-size: 12px; }
html[data-theme] .best-row strong { color: var(--ui-ink); font-size: 18px; font-weight: 600; }
html[data-theme] .score-hint { margin-top: 18px; font-size: 12px; line-height: 1.5; }
html[data-theme] .leaderboard { margin-top: 18px; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; padding: 11px 0 0; background: transparent; color: var(--ui-ink); box-shadow: none; }
html[data-theme] .leaderboard-head { grid-template-columns: minmax(0, 1fr) 18px; gap: 10px; min-height: 59px; }
html[data-theme] .leaderboard-summary strong { color: var(--ui-ink); font-family: inherit; font-size: 14px; font-weight: 650; }
html[data-theme] .leaderboard-status, html[data-theme] .leaderboard-list .rank,
html[data-theme] .leaderboard-list .player-country-name { color: var(--ui-muted); }
html[data-theme] .leaderboard-list li { border-color: var(--ui-line); }
html[data-theme] .leaderboard-list .player-name, html[data-theme] .leaderboard-list .points { color: var(--ui-ink); font-family: inherit; }
html[data-theme] .leaderboard-list .points { font-variant-numeric: tabular-nums; }
html[data-theme] .invite-button, html[data-theme] .share-grid button, html[data-theme] .share-grid a,
html[data-theme] .score-form input, html[data-theme] .country-control { border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .invite-button:hover, html[data-theme] .share-grid button:hover, html[data-theme] .share-grid a:hover,
html[data-theme] .country-control:hover, html[data-theme] .country-control:focus-within { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .player-country-badge, html[data-theme] .challenge-banner { border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .result h2, html[data-theme] .result p, html[data-theme] .score-form label { color: var(--ui-ink); font-family: inherit; }
html[data-theme] .score-form .country-field-label,
html[data-theme] .maker-overline,
html[data-theme] .maker-dialog-kicker,
html[data-theme] .setting-group legend,
html[data-theme] .select-label { font-family: inherit; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme] .post-score-button { border: 1px solid var(--ui-accent); border-radius: 9px; background: var(--ui-accent); color: var(--ui-accent-text); }
html[data-theme] .post-score-button:hover { background: var(--ui-ink); color: var(--ui-bg); }

html[data-theme] .settings-panel, html[data-theme] .maker-dialog { border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-bg); color: var(--ui-ink); box-shadow: 0 24px 70px rgba(0,0,0,.16); }
html[data-theme] .settings-panel { top: 82px; max-height: calc(100dvh - 98px); overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] .settings-head h2, html[data-theme] .maker-dialog h2,
html[data-theme] .maker-dialog-body > p.maker-message { color: var(--ui-ink); font-family: inherit; }
html[data-theme] .setting-group, html[data-theme] .maker-dialog-top { border-color: var(--ui-line); }
html[data-theme] .setting-group legend, html[data-theme] .select-label, html[data-theme] .toggle-row,
html[data-theme] .sound-setting, html[data-theme] .maker-dialog-kicker,
html[data-theme] .maker-dialog-body > p:not(.maker-overline) { color: var(--ui-muted); font-family: inherit; }
html[data-theme] .surface-option, html[data-theme] #speed-select, html[data-theme] .sound-setting-button,
html[data-theme] .maker-dialog-top button, html[data-theme] .maker-contact a { border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: none; }
html[data-theme] .surface-option:hover, html[data-theme] .sound-setting-button:hover,
html[data-theme] .maker-contact a:hover { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .surface-option.selected { border-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
html[data-theme] .maker-contact .maker-email { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-text); }
html[data-theme] .maker-contact .maker-email:hover { background: var(--ui-ink); color: var(--ui-bg); }
html[data-theme] .toast { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-ink); color: var(--ui-bg); }
html[data-theme] button:focus-visible, html[data-theme] a:focus-visible,
html[data-theme] input:focus-visible, html[data-theme] select:focus-visible,
html[data-theme] summary:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

@media (max-width: 1120px) {
  html[data-theme] .site-header { height: 155px; }
  html[data-theme] .brand { width: 330px; height: 165px; }
  html[data-theme] .experience { grid-template-columns: minmax(245px, .95fr) minmax(320px, 1.1fr); gap: 22px; }
  html[data-theme] .score-panel { display: block; grid-column: 1 / -1; justify-self: center; max-width: 620px; margin-top: 12px; border: 0; border-top: 1px solid var(--ui-line); padding: 22px 0 0; }
  html[data-theme] .score-block, html[data-theme] .leaderboard { max-width: none; }
}
@media (max-width: 700px) {
  html[data-theme] .page-shell { padding-inline: 20px; }
  html[data-theme] .site-header { height: 166px; }
  html[data-theme] .brand { width: 305px; height: 153px; }
  html[data-theme] .header-button { min-height: 44px; padding-inline: 10px; }
  html[data-theme] .experience { display: flex; flex-direction: column; gap: 0; padding-block: 18px 32px; }
  html[data-theme] .phone-area { order: 0; width: min(74vw, 370px); margin: 0 auto; }
  html[data-theme] .intro { order: 1; max-width: 430px; margin: 14px auto 0; }
  html[data-theme] .intro h1.hero-logo { font-size: clamp(39px, 10vw, 50px); }
  html[data-theme] .intro-copy { margin: 11px 0 18px; font-size: 15px; }
  html[data-theme] .instructions { margin-top: 23px; }
  html[data-theme] .music-player { margin-top: 20px; width: 100%; }
  html[data-theme] .score-panel { order: 2; width: 100%; max-width: 430px; margin: 30px auto 0; }
  html[data-theme] .settings-panel { top: 70px; max-height: calc(100dvh - 82px); }
}
@media (max-width: 520px) {
  html[data-theme] .site-header { height: 195px; align-items: flex-end; padding-bottom: 12px; }
  html[data-theme] .brand { width: min(270px, 78vw); height: auto; }
}
@media (max-width: 390px) {
  html[data-theme] .page-shell { padding-inline: 15px; }
  html[data-theme] .header-actions { gap: 5px; }
  html[data-theme] .phone-area { width: min(72vw, 330px); }
}
@media (max-height: 800px) and (min-width: 1121px) {
  html[data-theme] .site-header { height: 190px; }
  html[data-theme] .experience { align-items: start; padding-block: 20px 26px; }
  html[data-theme] .intro { align-self: start; }
  html[data-theme] .score-panel { align-self: start; }
  html[data-theme] .intro h1.hero-logo { font-size: clamp(44px, 4vw, 60px); }
  html[data-theme] .intro-copy { margin: 12px 0 17px; font-size: 15px; }
  html[data-theme] .instructions { margin-top: 19px; padding-top: 13px; }
  html[data-theme] .music-player { margin-top: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .intro, html[data-theme] .intro h1, html[data-theme] .intro-copy,
  html[data-theme] .primary-button, html[data-theme] .instructions,
  html[data-theme] .music-player, html[data-theme] .phone-area,
  html[data-theme] .score-panel { animation: none !important; }
}