:root { --paper:#f7f4ed; --ink:#171821; --blue:#5c66e8; --lime:#cafa70; --muted:#64656d; --rounded-type:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 7% 15%,#cafa7040 0 72px,transparent 74px),radial-gradient(circle at 95% 8%,#5c66e822 0 100px,transparent 103px),var(--paper); font:16px/1.45 var(--rounded-type); }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:4px solid #e4ad12; outline-offset:4px; }
.topbar { min-height:68px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px clamp(16px,4vw,60px); border-bottom:3px solid #e7e2d5; background:#fffefaee; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:900; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; background:var(--lime); box-shadow:0 3px 0 #abc956; transform:rotate(-5deg); }
.account-link { padding:7px 15px; border:2px solid var(--blue); border-radius:999px; color:#3039a1; background:#eff0ff; font-size:14px; font-weight:800; text-decoration:none; }
.game-shell { max-width:1100px; margin:auto; padding:34px clamp(16px,4vw,48px) 60px; }
.intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.eyebrow { margin:0 0 7px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-size:12px; font-weight:900; }
h1 { margin:0; font-size:clamp(40px,5.5vw,65px); line-height:1.08; letter-spacing:-.01em; word-spacing:.025em; } h1 em { color:var(--blue); font-style:normal; }
.board { border:2px solid #34365c; border-radius:28px; padding:clamp(18px,3vw,34px); background:#fffefa; box-shadow:0 8px 0 #dcd8ca,0 20px 38px #17182114; }
.board-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.board-top p { margin:0; font-size:14px; font-weight:850; } .round-label { color:#3f44a6; text-transform:uppercase; letter-spacing:.08em; } .score-label { color:var(--muted); } .score-label strong { color:var(--ink); }
.target-wrap { display:flex; flex-direction:column; align-items:center; padding:22px 0 24px; }
.target-label { color:var(--muted); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.target { font-size:clamp(58px,9vw,98px); line-height:1.08; letter-spacing:-.06em; font-weight:950; font-variant-numeric:tabular-nums; }
.wheels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1.7vw,19px); }
.wheel { min-width:0; text-align:center; padding:15px 10px 17px; border:2px solid #d6d3e5; border-radius:21px; background:#f2f1fc; }
.wheel-title { margin:0 0 12px; font-weight:850; font-size:clamp(13px,1.6vw,18px); }
.wheel-button { display:grid; place-items:center; width:48px; height:44px; margin:0 auto; border:2px solid #acaad5; border-radius:11px; background:white; color:#34389d; font-size:23px; line-height:1; font-weight:900; }
.wheel-button:hover { background:var(--lime); border-color:#8dac42; } .wheel-button:disabled { opacity:.4; cursor:default; }
.wheel-window { position:relative; height:136px; margin:10px auto; overflow:hidden; border:2px solid #34365c; border-radius:16px; background:linear-gradient(to bottom,#fff 0,#fff calc(50% - 27px),#e1e3ff calc(50% - 27px),#e1e3ff calc(50% + 27px),#fff calc(50% + 27px)); box-shadow:inset 0 2px 7px #17182114; font-variant-numeric:tabular-nums; perspective:500px; }
.wheel-window::before { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(to bottom,#282d5a20,transparent 31%,transparent 69%,#282d5a20); pointer-events:none; }
.wheel-window::after { content:""; position:absolute; inset:calc(50% - 27px) 0 auto; height:54px; border-block:2px solid #deddf4; pointer-events:none; }
.wheel-rotor { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .34s cubic-bezier(.18,.75,.24,1); }
.wheel-face { position:absolute; top:50%; left:0; display:grid; place-items:center; width:100%; height:54px; margin-top:-27px; color:#858895; font-size:clamp(23px,3vw,38px); letter-spacing:-.045em; font-weight:900; backface-visibility:hidden; transform:rotateX(var(--angle)) translateZ(86px); }
.wheel-face.is-current { color:#242889; font-weight:950; }
.wheel.complete { border-color:#86a64d; background:#f0fadf; } .wheel.complete .wheel-window { background:linear-gradient(to bottom,#fff 0,#fff calc(50% - 27px),var(--lime) calc(50% - 27px),var(--lime) calc(50% + 27px),#fff calc(50% + 27px)); } .wheel.complete .wheel-face.is-current { color:var(--ink); }
.sum { display:flex; align-items:baseline; justify-content:center; gap:12px; padding:20px 0 4px; color:var(--muted); font-weight:700; } .sum strong { color:var(--ink); font-size:29px; font-variant-numeric:tabular-nums; }
.feedback { min-height:25px; margin:12px 0 16px; text-align:center; font-weight:750; }
.feedback:empty { display:none; }
.feedback.error { color:#ad3b29; } .feedback.success { color:#356326; }
.actions { display:flex; justify-content:center; gap:12px; }
.actions button { min-height:51px; padding:10px 25px; border:2px solid #34365c; border-radius:14px; font-weight:850; }
.check-button,.next-button { background:var(--blue); color:white; box-shadow:0 4px 0 #34389d; } .check-button:hover,.next-button:hover { background:#454fc6; }
.restart-button { background:var(--lime); box-shadow:0 4px 0 #a5c75d; }
[hidden] { display:none !important; }
.save-status { min-height:22px; text-align:center; color:var(--muted); font-size:14px; }
@media (max-width:650px) { .intro { display:block; } .board { padding:16px; } .wheels { grid-template-columns:repeat(2,minmax(0,1fr)); } .wheel-window { height:112px; margin:7px auto; } .wheel-face { font-size:clamp(21px,7vw,30px); } .target-wrap { padding:15px 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.duration-screen { display:flex; width:min(1180px,calc(100% - 32px)); min-height:calc(100svh - 68px); margin-inline:auto; flex-direction:column; align-items:center; justify-content:center; padding:42px 0 72px; text-align:center; transform:translateY(clamp(-100px,-5vh,-48px)); }
.duration-screen h1 { max-width:820px; margin:0 0 52px; font-size:clamp(2.5rem,4.2vw,4rem); font-weight:800; }
.duration-screen h1:focus { outline:none; }
.duration-card { width:min(700px,100%); padding:clamp(26px,5vw,48px); border:2px solid #34365c; border-radius:28px; background:#20213b; box-shadow:0 9px 0 #11121e,0 25px 55px #17182133; color:white; }
.duration-setting { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; }
.duration-setting>span { color:#d9daec; font-size:.85rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.duration-choices { display:grid; min-width:0; grid-template-columns:repeat(4,1fr); gap:10px; margin:0; padding:0; border:0; }
.duration-choice { min-height:62px; border:2px solid #777aa1; border-radius:16px; background:#f0f0ff24; color:white; font:inherit; font-size:1.35rem; font-weight:900; cursor:pointer; }
.duration-choice[aria-pressed="true"] { border-color:var(--lime); background:var(--lime); box-shadow:0 5px 0 #8fa947; color:var(--ink); }
.duration-card>p { margin:28px auto; color:#d9daec; line-height:1.5; }
.duration-start { min-height:50px; padding:11px 22px; border:0; border-radius:999px; background:var(--lime); box-shadow:0 5px 0 #8fa947; color:var(--ink); font:inherit; font-weight:900; cursor:pointer; }
.duration-start:disabled { opacity:.55; cursor:wait; }

/* One-minute challenge layout from the latest Place Value iteration. */
.game-shell { max-width:1120px; padding-top:26px; }
.intro { margin-bottom:22px; }
h1 { font-size:clamp(38px,5vw,56px); }
.board { padding:24px 30px; background:#20213b; border-color:#393b59; box-shadow:0 7px 0 #141526; }
.board-top { gap:20px; }
.round-label,.score-label { display:flex; align-items:center; gap:12px; }
.board-top strong { color:#fffefa; font-size:24px; font-variant-numeric:tabular-nums; }
.round-label { padding:8px 15px; border-radius:14px; background:#303153; color:#d3d3ef; font-size:12px !important; }
.round-label.time-low { background:#643c36; color:#ffe3c7; }
.score-label { color:#fffefa; }
.challenge { position:relative; display:flex; justify-content:center; align-items:center; min-height:123px; }
.target-wrap { padding:12px 0 4px; transform:translateY(-26px); }
.target { color:#fffefa; font-size:clamp(58px,7vw,78px); }
.target-label { color:#d3d3e2; font-size:12px; }
.wheels { gap:20px; }
.wheel { --tint:#c2d2e9; --rim:#89a7d1; --edge:#7196cb; --accent:#304c75; min-width:0; padding:16px 12px; border:1px solid var(--rim); border-radius:23px; background:var(--tint); }
.wheel:nth-child(2) { --tint:#e8cbb7; --rim:#d9a582; --edge:#c88c65; --accent:#754b31; }
.wheel:nth-child(3) { --tint:#cddbb3; --rim:#aac379; --edge:#92b358; --accent:#465c2e; }
.wheel:nth-child(4) { --tint:#d1c2e5; --rim:#aa91cd; --edge:#9878c0; --accent:#594277; }
.wheel-title { margin-bottom:12px; font-size:17px; }
.wheel-button { width:66px; height:44px; border:1px solid var(--edge); border-radius:13px; background:var(--rim); color:var(--accent); box-shadow:0 3px 0 var(--edge); font-size:19px; }
.wheel-button:hover:not(:disabled) { border-color:var(--edge); background:var(--rim); }
.wheel-button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 var(--edge); }
.drum { position:relative; isolation:isolate; margin:13px auto 16px; padding:0 15px; cursor:grab; touch-action:none; user-select:none; }
.drum.dragging { cursor:grabbing; }
.drum::before,.drum::after { content:""; position:absolute; top:-3px; bottom:-3px; z-index:-1; width:33px; border:1px solid var(--edge); border-radius:50%; background:var(--rim); box-shadow:inset -4px 0 0 #17182109; }
.drum::before { left:0; }
.drum::after { right:0; }
.wheel-window { height:142px; margin:0; border:0; border-radius:16% / 48%; background:linear-gradient(to bottom,var(--rim),var(--tint) 32%,var(--tint) 68%,var(--rim)); box-shadow:inset 2px 0 3px #17182109; }
.wheel-window::before { border-radius:inherit; background:linear-gradient(to bottom,#17182109,transparent 28%,transparent 72%,#17182109); }
.wheel-window::after { border:0; }
.wheel-face { color:#68717c; font-size:clamp(24px,2.5vw,33px); }
.wheel-face.is-current { color:var(--ink); }
.wheel.complete { border-color:var(--edge); background:var(--tint); }
.wheel.complete .wheel-window { background:linear-gradient(#e0e8d7,#edf4e5 35%,#edf4e5 65%,#e0e8d7); }
.sum { flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:21px 0 0; color:#fffefa; font-size:13px; }
.sum strong,.equation,.feedback { color:#fffefa; }
.equation { display:flex; align-items:center; justify-content:center; gap:12px; font-size:23px; }
#parts { display:flex; align-items:center; gap:10px; }
.part { display:inline-block; padding:5px 12px; border-radius:10px; color:var(--ink); font-weight:850; }
.part-0 { background:#c2d2e9; }
.part-1 { background:#e8cbb7; }
.part-2 { background:#cddbb3; }
.part-3 { background:#d1c2e5; }
.feedback { min-height:22px; margin:12px 0; font-size:14px; }
.feedback:empty { display:block; }
.feedback.error { color:#ffcebc; }
.feedback.success { color:#d4f6a2; }
.actions button { min-width:220px; }
@media (max-width:850px) {
  .wheels { gap:12px; }
  .wheel { padding:14px 7px; }
  .drum { padding:0 11px; }
  .drum::before,.drum::after { width:25px; }
}
@media (min-width:651px) and (max-height:850px) {
  .topbar { min-height:56px; padding-block:8px; }
  .game-shell { padding-top:18px; }
  .intro { margin-bottom:16px; }
  h1 { font-size:42px; }
  .board { padding:18px 26px; }
  .challenge { min-height:94px; }
  .target { font-size:64px; }
  .wheel { padding-block:10px; }
  .wheel-title { margin-bottom:8px; }
  .wheel-window { height:136px; }
  .drum { margin:10px auto 12px; }
  .sum { padding-top:13px; }
  .feedback { margin:6px 0; }
  .actions button { min-height:46px; }
}
@media (max-width:650px) {
  .duration-screen { width:calc(100% - 24px); min-height:calc(100svh - 68px); justify-content:flex-start; padding-top:54px; transform:none; }
  .duration-screen h1 { max-width:100%; margin-bottom:32px; overflow-wrap:anywhere; font-size:clamp(2.25rem,10vw,3.2rem); }
  .duration-card { width:100%; min-width:0; padding:24px 18px; overflow:hidden; border-radius:22px; }
  .duration-setting { grid-template-columns:1fr; gap:12px; }
  .duration-setting .duration-unit { margin-top:-5px; }
  .duration-choices { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .duration-choice { min-width:0; min-height:56px; padding-inline:0; }
  .duration-card>p { overflow-wrap:anywhere; }
  .game-shell { padding:22px 14px 32px; }
  .board { padding:18px 14px; border-radius:23px; }
  .board-top { position:sticky; top:0; z-index:5; gap:8px; padding-block:8px; background:#20213b; box-shadow:0 5px 8px #20213b; }
  .round-label { gap:8px; padding:7px 10px; }
  .score-label { flex-direction:column; gap:0; font-size:12px !important; }
  .board-top strong { font-size:21px; }
  .challenge { min-height:111px; }
  .wheels { gap:14px; }
  .wheel { padding:13px 10px; }
  .wheel-title { font-size:15px; }
  .wheel-window { height:125px; }
  .wheel-face { font-size:28px; }
  .sum { padding-top:18px; }
  .equation { flex-wrap:wrap; gap:7px; font-size:18px; }
  #parts { gap:5px; }
  .part { padding:5px 7px; }
  .sum strong { font-size:24px; }
  .feedback { min-height:42px; }
  .actions button { width:100%; }
  .save-status { line-height:1.5; }
}