:root {
  --paper: #e6eceb;
  --ink: #203b40;
  --muted: #49676b;
  --teal: #146b64;
  --orange: #b74417;
  --white: #ffffff;
  --line: #78918d;
  --overlay: #e6ecebef;
  --shadow: #203b401a;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --small: 12px;
  --body: 15px;
  --medium: 18px;
  --h2: 32px;
  --title: 44px;
  --clock: 112px;
  --radius: 4px;
  --pill: 100px;
  --border: 1px;
  --focus: 3px;
  --min-touch: 44px;
  --font: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
  --duration: 180ms;
}

:root {
  --size-10: 10px;
  --size-100: 100px;
  --size-32: 32px;
  --size-420: 420px;
  --size-52: 52px;
  --size-56: 56px;
  --size-660: 660px;
  --size-760: 760px;
  --size-80: 80px;
  --size-88: 88px;
  --size-9: 9px;
  --size-neg-2: -2px;
}
:root {
  --arcade-top: 112px;
  --arcade-mobile-top: 152px;
  --arcade-width: 540px;
  --arcade-mobile-width: 343px;
  --reward-top: 30%;
  --reward-mobile-top: 31%;
  --reward-size: 48px;
  --fever-glow: #b744172b;
  --speed-alpha: 0.22;
  --pop-time: 240ms;
  --streak-width: 48px;
  --streak-height: 3px;
  --streak-duration: 380ms;
  --result-score: 24px;
  --small-label: 10px;
  --combo-width: 150px;
  --combo-mobile: 102px;
  --panel-border: 2px;
  --compact-header: 100px;
}
:root {
 --lounge-width: 660px;
 --lounge-cup-width: 100px;
 --lounge-stamp-angle: -3deg;
 --lounge-leading: 1.6;
 --lounge-svg-stroke: 2;
 --lounge-stamp-tracking: .08em;
}
:root {
 --control-size: 24px;
 --control-option-width: 140px;
 --control-check-size: 18px;
 --control-ring-offset: 3px;
}

/* Native form semantics, custom visuals. All controls remain keyboard operable. */
#lounge input[type="checkbox"],
#lounge input[type="radio"] {
 appearance: none;
 -webkit-appearance: none;
 display: inline-grid;
 place-content: center;
 flex: 0 0 var(--control-size);
 width: var(--control-size);
 height: var(--control-size);
 margin: 0;
 border: var(--panel-border) solid var(--muted);
 background: var(--white);
 color: var(--white);
 cursor: pointer;
 vertical-align: middle;
}
#lounge input[type="checkbox"] { border-radius: var(--radius); }
#lounge input[type="radio"] { border-radius: var(--pill); }
#lounge input:checked { border-color: var(--teal); background: var(--teal); }
#lounge input[type="checkbox"]::before {
 content: '';
 width: var(--s2);
 height: var(--s3);
 border: solid var(--white);
 border-width: 0 var(--panel-border) var(--panel-border) 0;
 transform: translateY(calc(0px - var(--border))) rotate(45deg);
 visibility: hidden;
}
#lounge input[type="radio"]::before {
 content: '';
 width: var(--s2);
 height: var(--s2);
 background: var(--white);
 border-radius: var(--pill);
 visibility: hidden;
}
#lounge input:checked::before { visibility: visible; }
#lounge input:focus-visible { outline: var(--focus) solid var(--orange); outline-offset: var(--control-ring-offset); }
#lounge fieldset { border: 0; padding: 0; gap: var(--s2); }
#lounge legend { margin-bottom: var(--s3); }
#lounge fieldset label {
 display: flex;
 align-items: center;
 gap: var(--s3);
 flex: 1 1 var(--control-option-width);
 min-height: var(--min-touch);
 box-sizing: border-box;
 padding: var(--s3);
 border: var(--border) solid var(--muted);
 border-radius: var(--radius);
 background: var(--white);
 cursor: pointer;
}
#lounge fieldset label:has(:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 var(--border) var(--teal); color: var(--teal); font-weight: bold; }
#lounge fieldset label:hover, #lounge .consent:hover { border-color: var(--teal); }
#lounge .consent {
 display: flex;
 align-items: center;
 gap: var(--s3);
 min-height: var(--min-touch);
 padding: var(--s3);
 border: var(--border) solid var(--muted);
 border-radius: var(--radius);
 background: var(--white);
 cursor: pointer;
 line-height: 1.6;
 word-break: keep-all;
}
#lounge .consent:has(:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 var(--border) var(--teal); }
#lounge .consent:has(:focus-visible), #lounge fieldset label:has(:focus-visible) { outline: var(--focus) solid var(--orange); outline-offset: var(--control-ring-offset); }
@media (forced-colors: active) {
 #lounge input[type="checkbox"], #lounge input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
 #lounge input::before { display: none; }
}