/* 4.5.0 palette: "藏宝手札" parchment scheme. Paper ground, ink-navy actions, brown ink text,
   gold for reference / jackpot / points. Earlier files were converted to these hues in 4.5.0.
   4.4.6 theme: one set of tokens and color roles (scheme A) plus the level HUD,
   thumb-zone play bar and shop showcase (scheme C). Loaded last; selectors reuse the
   "body:not(#ui-pass)" prefix from the 4.4.1 pass so they win by order, not by a new id.
   Color roles: ink navy = actions and navigation; gold = reference, jackpot and points. */
:root{
 --paper:#faf6ee;
 --p:#24407d;--p-strong:#1b3163;--p-soft:#f6efe2;--p-ring:#24407d1f;
 --g:#b9892a;--g-strong:#7e5a14;--g-soft:#fcf1d6;--g-line:#e6cf98;
 --ink-1:#3e2a1c;--ink-2:#5b4331;--ink-3:#735740;--ink-4:#806753;
 --line:#ece0c8;--line-dash:#e0d0b0;--surface:#fff;--surface-2:#f8f2e6;
 --r-s:8px;--r-m:12px;--r-l:16px;--r-xl:24px;
 --sh-1:0 1px 2px #3e2a1c12;--sh-2:0 4px 14px #3e2a1c14;--sh-3:0 20px 44px -22px #3e2a1c45;
 --t-1:var(--ink-1);--t-2:var(--ink-2);--t-3:var(--ink-3);--t-link:var(--p);--t-gold:var(--g-strong);
 --play-bar:68px;
}

/* Navigation and buttons: one primary, one secondary, one disabled look. */
body:not(#ui-pass) .nav-button.active{color:var(--p)}
body:not(#ui-pass) .nav-button.active::after{background:var(--p)}
body:not(#ui-pass) .button{border-radius:var(--r-m)}
body:not(#ui-pass) .button.primary,body:not(#ui-pass) .shop-card .button.shop-admin-primary{background:var(--p);border-color:var(--p);color:#fff;box-shadow:inset 0 1px 0 #ffffff2e,var(--sh-2)}
body:not(#ui-pass) .button.primary:hover:not(:disabled),body:not(#ui-pass) .shop-card .button.shop-admin-primary:hover:not(:disabled){background:var(--p-strong);border-color:var(--p-strong)}
body:not(#ui-pass) .button.secondary{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
body:not(#ui-pass) .button:disabled,body:not(#ui-pass) .button.primary:disabled{background:var(--surface-2);border-color:var(--line);color:var(--ink-4);box-shadow:none;opacity:1}
body:not(#ui-pass) .role-toggle{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}

/* Reference callout: gold means "reference". */
body:not(#ui-pass) .suggestion{background:linear-gradient(110deg,var(--g-soft),#fff6df);border:1px solid var(--g-line);box-shadow:none}
body:not(#ui-pass) .suggestion::before{border-color:var(--g-line);background:var(--surface);box-shadow:none;color:var(--g)}
body:not(#ui-pass) .suggestion span,body:not(#ui-pass) .suggestion b{color:var(--g-strong)}
body:not(#ui-pass) .play-note{background:none;border-left:2px solid var(--g-line);color:var(--ink-3)}
body:not(#ui-pass) .save-note{color:#3f7f6a}

/* Nine-grid states: reference = gold ring, opened = muted, jackpot = the only solid gold. */
body:not(#ui-pass) .board{border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-3)}
body:not(#ui-pass) .board-cap{padding-right:70px}
body:not(#ui-pass) .chest-cell{background:linear-gradient(165deg,#fdfbf7,#f9f4e9);border:1px solid #f4ecda;box-shadow:inset 0 1px 0 #fff}
body:not(#ui-pass) .chest-cell::before{display:none}
body:not(#ui-pass) .cell-number{color:var(--ink-3)}
body:not(#ui-pass) .chest-cell.suggested{border-color:var(--g);background:linear-gradient(165deg,#fff7dd,#fdebc1);box-shadow:inset 0 0 0 1.5px var(--g),0 4px 14px #b9892a24}
body:not(#ui-pass) .chest-cell.suggested .cell-number{color:var(--g-strong)}
body:not(#ui-pass) .chest-cell.suggested .cell-status{display:block;top:6px;right:6px;left:auto;bottom:auto;width:auto;padding:2px 7px;border-radius:999px;background:var(--g);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-2);line-height:1.5;letter-spacing:0;opacity:1;transform:none;text-shadow:none}
body:not(#ui-pass) .chest-cell.opened:not(.winner){opacity:1;background:var(--surface-2);border:1px dashed var(--line-dash);box-shadow:none}
body:not(#ui-pass) .chest-cell.opened:not(.winner) .chest-pic-open{filter:grayscale(1) brightness(1.1);opacity:.32}
body:not(#ui-pass) .chest-cell.opened:not(.winner) .cell-status{color:var(--ink-3);font-weight:var(--fw-2)}
body:not(#ui-pass) .chest-cell.winner{border:1px solid #f9ca43;background:radial-gradient(ellipse at 50% 40%,#fff8c8,#ffeb9a 60%,#ffdf84);box-shadow:inset 0 0 0 1.5px #fff2b8,0 0 0 2px #ffc616,0 6px 22px #ffc61666}
body:not(#ui-pass) .chest-cell.winner .cell-number,body:not(#ui-pass) .chest-cell.winner .cell-status{color:var(--g-strong);font-weight:var(--fw-3)}

/* Level HUD: floor, reference and the nine-floor track in one card during a round.
   Outside a round the wrapper stays transparent and the old thin bar is unchanged. */
.level-hud{display:contents}
.floor-dot b,.floor-dot i{display:none}
body:not(#ui-pass)[data-round=active] .level-hud{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2)}
body:not(#ui-pass)[data-round=active] .floor-line{display:contents}
body:not(#ui-pass)[data-round=active] .floors{grid-area:track;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;position:relative;width:100%;max-width:none;flex:none}
body:not(#ui-pass)[data-round=active] .floors::before{content:"";display:block;position:absolute;z-index:0;left:calc(100% / 18);right:calc(100% / 18);top:12px;height:3px;border-radius:2px;background:#f4ebda}
body:not(#ui-pass)[data-round=active] .floor-dot{display:grid;justify-items:center;gap:3px;position:relative;z-index:1;width:auto;height:auto;min-width:0;flex:none;background:none;border:0;border-radius:0;box-shadow:none}
body:not(#ui-pass)[data-round=active] .floor-dot.done::after{content:"";position:absolute;z-index:-1;left:50%;width:100%;top:12px;height:3px;background:#e5b030}
body:not(#ui-pass)[data-round=active] .floor-dot b{display:grid;place-items:center;box-sizing:border-box;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1.5px solid #efe2c7;font-size:var(--fs-xs);font-weight:var(--fw-3);line-height:1;color:var(--ink-4)}
body:not(#ui-pass)[data-round=active] .floor-dot i{display:block;font-style:normal;font-size:var(--fs-xs);line-height:1.3;color:var(--ink-4);white-space:nowrap}
body:not(#ui-pass)[data-round=active] .floor-dot.done b{background:#f3ead7;border-color:#e1d7c8}
body:not(#ui-pass)[data-round=active] .floor-dot.won b{background:radial-gradient(circle at 35% 30%,#fff3b8,#ffcd36 58%,#dca219);border:1px solid #c58c0f;color:#5c400a;box-shadow:0 2px 0 #b88002}
body:not(#ui-pass)[data-round=active] .floor-dot.won i{color:var(--g-strong)}
body:not(#ui-pass)[data-round=active] .floor-dot.current b{border:2px solid var(--p);box-shadow:0 0 0 4px var(--p-ring)}
body:not(#ui-pass)[data-round=active] .floor-dot.current:not(.won) b{background:var(--surface)}
body:not(#ui-pass)[data-round=active] .floor-dot.current:not(.won) b::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p);animation:level-pulse 1.4s ease-in-out infinite}
body:not(#ui-pass)[data-round=active] .floor-dot.current i{color:var(--p);font-weight:var(--fw-3)}
@keyframes level-pulse{50%{transform:scale(.55);opacity:.55}}

/* Shop showcase: segmented filter, price badge on the artwork, one clear action. */
body:not(#ui-pass) .shop-toolbar .filter-line{display:inline-flex;gap:0;padding:3px;border-radius:999px;background:#f7f0e3}
body:not(#ui-pass) .shop-toolbar .filter-button{border-radius:999px;padding:7px 16px;min-height:38px;box-shadow:none}
body:not(#ui-pass) .shop-toolbar .filter-button.active{background:var(--surface);color:var(--ink-1);box-shadow:var(--sh-1)}
body:not(#ui-pass) .shop-art>.price{position:absolute;left:7%;bottom:7%;z-index:3;display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px 9px 3px 4px;border-radius:999px;background:#3f2d21e6;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-3);line-height:1.2;box-shadow:0 2px 8px #2b1f163d;white-space:nowrap}
body:not(#ui-pass) .shop-art>.price small{margin-left:2px;color:#ffdd86;font-size:var(--fs-xs);font-weight:var(--fw-1)}
body:not(#ui-pass) .shop-art>.price del{color:#d7c9b5}
body:not(#ui-pass) .shop-art>.price .coin-pic{top:0}
body:not(#ui-pass)[data-mode=shop] .shop-card{display:flex;flex-direction:column}
body:not(#ui-pass)[data-mode=shop] .shop-card-body{flex:1;display:flex;flex-direction:column;padding-top:12px}
body:not(#ui-pass)[data-mode=shop] .shop-card-heading{justify-content:center;text-align:center;margin-bottom:10px}
body:not(#ui-pass)[data-mode=shop] .shop-card-note,body:not(#ui-pass)[data-mode=shop] .shop-sale-line{text-align:center}
body:not(#ui-pass)[data-mode=shop] .shop-card-body>.button,body:not(#ui-pass)[data-mode=shop] .shop-card-body>.shop-card-actions{margin-top:auto}
body:not(#ui-pass)[data-mode=shop] .shop-card .button{border-radius:999px}
body:not(#ui-pass) .points-purse{background:linear-gradient(120deg,#422f22,#192c55);border:0;box-shadow:0 10px 24px -12px #422f2299}
body:not(#ui-pass) .points-purse small{color:#e2d8c8}
body:not(#ui-pass) .points-purse strong{color:#ffdb76}
body:not(#ui-pass) .points-purse strong span{color:#e2d8c8}

@media(min-width:761px){
 body:not(#ui-pass)[data-round=active] .level-hud{grid-template-areas:"ref" "track";row-gap:14px;padding:14px 16px 12px;margin:0 0 22px}
 body:not(#ui-pass)[data-round=active] .floor-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body:not(#ui-pass)[data-round=active] .suggestion{grid-area:ref;margin:0}
}

@media(max-width:760px){
 body:not(#ui-pass)[data-round=active] .level-hud{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"floor ref" "track track";align-items:center;column-gap:10px;row-gap:8px;padding:10px 12px 8px;margin:0 0 8px}
 body:not(#ui-pass)[data-round=active] .level-hud:has(.suggestion.recorded),body:not(#ui-pass)[data-round=active] .level-hud:has(.suggestion[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"floor" "ref" "track"}
 body:not(#ui-pass)[data-round=active] .floor-text{grid-area:floor;font-size:var(--fs-md);font-weight:var(--fw-3);color:var(--ink-1)}
 body:not(#ui-pass)[data-round=active] .suggestion{grid-area:ref;min-height:0;margin:0;padding:3px 10px;gap:8px;border-radius:var(--r-m)}
 body:not(#ui-pass)[data-round=active] .suggestion::before{display:none}
 body:not(#ui-pass)[data-round=active] .suggestion b{font-size:var(--fs-xl);line-height:1.25}
 body:not(#ui-pass)[data-round=active] .suggestion.recorded b{font-size:var(--fs-xs)}
 body:not(#ui-pass)[data-round=active] .floor-dot b{width:24px;height:24px}
 body:not(#ui-pass)[data-round=active] .floors::before,body:not(#ui-pass)[data-round=active] .floor-dot.done::after{top:11px}

 /* Undo / next floor stay under the thumb; the page reserves the bar height. */
 body:not(#ui-pass)[data-round=active] .play-controls{position:fixed;left:0;right:0;bottom:0;z-index:15;justify-self:stretch;width:auto;max-width:none;margin:0;padding:10px max(16px,calc((100% - 520px) / 2)) calc(10px + env(safe-area-inset-bottom));background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px #44302340}
 body:not(#ui-pass)[data-round=active] .play-controls .button{min-height:48px}
 body:not(#ui-pass)[data-round=active] .shell{padding-bottom:calc(var(--play-bar) + env(safe-area-inset-bottom))}
 body:not(#ui-pass)[data-round=active] .toast{bottom:calc(var(--play-bar) + 12px + env(safe-area-inset-bottom))}
 body:not(#ui-pass)[data-round=active] .sub-actions .text-btn{min-height:44px}

 body:not(#ui-pass) .chest-cell.suggested .cell-status{top:4px;right:4px;padding:1px 6px}
 body:not(#ui-pass) .shop-toolbar .filter-button{padding:6px 12px}
 body:not(#ui-pass) .shop-art>.price{font-size:var(--fs-xs)}
}
/* Short phones: the floor labels go (position and the "第 N 层" title already say it) so the
   end-round and home links stay above the play bar. */
@media(max-width:760px) and (max-height:740px){
 body:not(#ui-pass)[data-round=active] .level-hud{row-gap:6px;padding:7px 10px 7px;margin-bottom:6px}
 body:not(#ui-pass)[data-round=active] .floor-dot i{display:none}
 body:not(#ui-pass)[data-round=active] .floor-dot b{width:22px;height:22px}
 body:not(#ui-pass)[data-round=active] .floors::before,body:not(#ui-pass)[data-round=active] .floor-dot.done::after{top:10px}
 body:not(#ui-pass)[data-round=active] .suggestion{min-height:0;padding:2px 10px;margin:0}
 body:not(#ui-pass)[data-round=active] .suggestion b{font-size:var(--fs-lg)}
 body:not(#ui-pass)[data-round=active] .play-controls{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
 body:not(#ui-pass)[data-round=active] .play-controls .button{min-height:44px}
 body:not(#ui-pass)[data-round=active]{--play-bar:61px}
 body:not(#ui-pass)[data-round=active] .sub-actions{margin-top:0}
 body:not(#ui-pass)[data-round=active] .play-lead{margin:2px 0 4px;line-height:1.6}
}
@media(max-width:365px){
 body:not(#ui-pass) .chest-cell.suggested .cell-status{display:none}
}
/* On short completion screens, keep the home action beside the fixed new-round button. */
@media(max-width:760px) and (max-height:620px){
 body:not(#ui-pass)[data-round=active] .play-panel:not(.in-progress) .play-controls{padding-right:108px}
 body:not(#ui-pass)[data-round=active] .play-panel:not(.in-progress) .sub-actions{position:fixed;right:16px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:16;width:84px;margin:0;padding:0;justify-content:center}
 body:not(#ui-pass)[data-round=active] .play-panel:not(.in-progress) .sub-actions .text-btn{width:100%;min-height:44px}
}

/* 4.5.0 play polish: early-floor reference, inline record bubble, jackpot feedback,
   cancellable auto-advance, remaining-quota pips and the nine-floor settlement card. */
/* A frozen reference is a quiet hint on every floor. */
body:not(#ui-pass) .suggestion.reference-guide{background:var(--surface-2);border:1px dashed var(--g-line)}
body:not(#ui-pass) .suggestion.reference-guide span{color:var(--ink-3)}
body:not(#ui-pass) .suggestion.reference-guide b{color:var(--g-strong)}
body:not(#ui-pass) .chest-cell.suggested.reference-guide{background:var(--surface);border:1.5px dashed var(--g);box-shadow:none}
body:not(#ui-pass) .chest-cell.suggested.reference-guide .cell-number{color:var(--ink-3)}
body:not(#ui-pass) .chest-cell.suggested.reference-guide .cell-status{background:var(--g-soft);color:var(--g-strong);border:1px solid var(--g-line)}
.recording-choices{display:grid;gap:12px;margin:16px 0}
.recording-choices .button{display:grid;justify-items:start;text-align:left;white-space:normal;height:auto;padding:14px 16px;gap:4px}
.recording-choices small{font-size:14px;font-weight:400;line-height:1.5}

/* Record bubble: anchored to the tapped chest, keeps the board in view. */
.record-pop{position:absolute;z-index:30;width:min(256px,calc(100% - 12px));box-sizing:border-box;padding:14px 14px 10px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--g-line);box-shadow:0 18px 40px -12px #3e2a1c59,0 2px 6px #3e2a1c1f;animation:pop-in .16s var(--ease)}
.record-pop.above{transform-origin:var(--arrow-x) 100%}
.record-pop.below{transform-origin:var(--arrow-x) 0}
.record-pop::before{content:"";position:absolute;left:calc(var(--arrow-x) - 7px);width:14px;height:14px;background:var(--surface);border:1px solid var(--g-line);transform:rotate(45deg)}
.record-pop.below::before{top:-8px;border-right:0;border-bottom:0}
.record-pop.above::before{bottom:-8px;border-left:0;border-top:0}
.record-pop-title{margin:0 40px 10px 0;font-size:var(--fs-md);font-weight:var(--fw-3);color:var(--ink-1)}
.record-pop-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body:not(#ui-pass) .record-pop-actions .button{min-height:44px;padding:8px 6px;font-size:var(--fs-sm)}
.record-pop-hint{margin:8px 0 0;font-size:var(--fs-xs);color:var(--ink-3)}
.record-pop-close{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink-3);font-size:var(--fs-xl);line-height:1;cursor:pointer}
.record-pop-close:hover{background:var(--surface-2)}
.record-pop-close:focus-visible{outline:2px solid var(--p);outline-offset:-4px}
@keyframes pop-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* Jackpot: a warm flash on the board and the floor dot pops in gold. */
body:not(#ui-pass) .board.jackpot{animation:board-jackpot 1.3s ease-out 1}
@keyframes board-jackpot{0%{box-shadow:0 0 0 0 #f0be4c00}25%{box-shadow:0 0 0 6px #f0be4c70,0 0 70px #f6cf6fb3}100%{box-shadow:0 0 0 0 #f0be4c00}}
body:not(#ui-pass)[data-round=active] .floor-dot.just-won b{animation:dot-won .9s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes dot-won{0%{transform:scale(.6)}45%{transform:scale(1.45);box-shadow:0 0 0 6px #f6cf6f80}100%{transform:none}}

/* Auto-advance: the next-floor button fills while the countdown runs; undo stays available. */
body:not(#ui-pass) #next-floor{position:relative;overflow:hidden}
body:not(#ui-pass) #next-floor.counting::after{content:"";position:absolute;inset:0;background:#ffffff38;transform-origin:0 50%;animation:advance-fill var(--advance-ms,4s) linear forwards;pointer-events:none}
@keyframes advance-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Quota as a resource: three pips, lit for each round left this week. */
.quota-pips{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
.quota-pips i{width:7px;height:7px;border-radius:50%;border:1px solid var(--g);background:none}
.quota-pips i.on{background:var(--g)}

/* Nine-floor settlement: one compact row; the level HUD above already shows all nine results. */
.settle-card{display:flex;align-items:center;gap:12px;margin:2px 0;padding:8px 12px;border-radius:var(--r-l);background:linear-gradient(160deg,#fff9ea,#fbefd2);border:1px solid var(--g-line);box-shadow:0 10px 24px -16px #b9892a8c;animation:settle-in .5s cubic-bezier(.34,1.56,.64,1) both}
.settle-badge{flex:none;padding:4px 10px;border-radius:999px;background:var(--g);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-2);letter-spacing:2px}
.settle-text{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0}
.settle-text strong{font-size:var(--fs-md);font-weight:var(--fw-3);color:var(--ink-1)}
.settle-text small{font-size:var(--fs-xs);color:var(--ink-3)}
@keyframes settle-in{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}

@media(prefers-reduced-motion:reduce){.record-pop,body:not(#ui-pass) .suggestion.unlocked,body:not(#ui-pass) .board.jackpot,body:not(#ui-pass)[data-round=active] .floor-dot.just-won b,.settle-card{animation:none}body:not(#ui-pass) #next-floor.counting::after{display:none}}

/* 4.5.0 second pass: role chip in the header, first-round coach, points ledger,
   sound switch, state-specific shop buttons and a form-first auth page on phones. */
/* Header: role chip (switch role + quota pips) beside a compact avatar (account menu). */
body:not(#ui-pass) .role-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:178px;padding:4px 8px 4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--sh-1);color:var(--ink-1);text-align:left;cursor:pointer}
body:not(#ui-pass) .role-chip:hover{border-color:var(--g-line)}
body:not(#ui-pass) .role-chip:focus-visible{outline:2px solid var(--p);outline-offset:2px}
body:not(#ui-pass) .role-chip>span:first-child{display:grid;min-width:0}
body:not(#ui-pass) .role-chip strong{font-size:var(--fs-xs);font-weight:var(--fw-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(#ui-pass) .role-chip small{display:flex;align-items:center;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
body:not(#ui-pass) .role-chip .chevron{color:var(--ink-3);font-size:var(--fs-sm)}
body:not(#ui-pass) .profile.compact{max-width:none;gap:6px;padding-left:4px;padding-right:4px}
body:not(#ui-pass) .profile.compact>span:not(.portrait){display:none}
body:not(#ui-pass) .profile.compact{min-width:44px;min-height:44px;justify-content:center}
body:not(#ui-pass) .top-actions:has(.role-chip){flex-wrap:nowrap;min-width:0}
body:not(#ui-pass) .topbar:has(.role-chip) .brand{flex-shrink:1;min-width:0}
#role-slot:empty{display:none}
@media(max-width:760px){
 body:not(#ui-pass) .topbar:has(.role-chip) .brand-subtitle{display:none}
 body:not(#ui-pass) .top-actions:has(.role-chip){gap:6px}
}
@media(max-width:400px){
 body:not(#ui-pass) .topbar:has(.role-chip) .brand-title{display:none}
 body:not(#ui-pass) .role-chip{max-width:170px}
}

/* First-round coach: three steps above the grid, gone after the first record or "知道了". */
.coach-card{position:relative;margin:0 0 10px;padding:10px 12px 8px;border-radius:var(--r-m);background:var(--g-soft);border:1px solid var(--g-line);color:var(--ink-1)}
.coach-title{margin:0 0 6px;font-size:var(--fs-sm);font-weight:var(--fw-3)}
.coach-card ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.coach-card li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.coach-card li b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--g);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-3)}
body:not(#ui-pass) .coach-card .coach-done{position:absolute;top:2px;right:4px;min-height:44px;padding:0 10px;color:var(--p);font-weight:var(--fw-2)}

/* Points ledger and the sound switch in the account menu. */
.ledger-list{margin:4px 0 12px;padding:0;list-style:none;border-top:1px solid var(--line)}
.ledger-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.ledger-list li span{display:grid;gap:2px;min-width:0}
.ledger-list strong{font-size:var(--fs-sm);font-weight:var(--fw-2);color:var(--ink-1);overflow-wrap:anywhere}
.ledger-list small{font-size:var(--fs-xs);color:var(--ink-3)}
.ledger-list b{flex:none;font-size:var(--fs-md);font-weight:var(--fw-3)}
.ledger-list b.in{color:var(--g-strong)}
.ledger-list b.out{color:var(--ink-2)}
body:not(#ui-pass) .account-menu-row.sound-row .switch{position:relative;display:block;flex:0 0 40px;width:40px;min-width:0;height:24px;padding:0;margin:0 0 0 auto;border-radius:999px;background:var(--line-dash);transition:background var(--dur-2,.25s)}
.account-menu-row.sound-row .switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--dur-2,.25s)}
body:not(#ui-pass) .account-menu-row.sound-row .switch.on{background:var(--g)}
.account-menu-row.sound-row .switch.on i{transform:translateX(16px)}

/* Shop: price lives in the buy button; owned and short-of-points look different. */
body:not(#ui-pass) .button.redeem{background:var(--g-soft);border:1px solid var(--g-line);color:var(--g-strong);box-shadow:none;font-weight:var(--fw-3)}
body:not(#ui-pass) .button.redeem:hover:not(:disabled){background:#f8e6b8;border-color:var(--g)}
body:not(#ui-pass) .button.redeem .price{display:inline-flex;align-items:center;gap:4px;margin-right:6px;color:inherit;background:none;padding:0;position:static;box-shadow:none;font-size:inherit}
body:not(#ui-pass) .button.redeem .price small{font-size:var(--fs-xs);font-weight:var(--fw-2)}
body:not(#ui-pass) .button.owned{color:var(--ink-2)}
body:not(#ui-pass) .shop-card-heading .price{position:static;display:inline-flex;align-items:center;gap:3px;padding:0;background:none;box-shadow:none;color:var(--ink-3);font-size:var(--fs-sm)}
body:not(#ui-pass)[data-mode=shop] .shop-card-heading:has(.price){gap:8px}
.owned-mark{position:absolute;left:8px;bottom:8px;z-index:3;padding:2px 8px;border-radius:999px;background:#3e2a1cd9;color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-2)}

/* Auth on phones: the decorative board steps aside so the form starts on the first screen. */
.field .field-hint{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
@media(max-width:760px){body:not(#ui-pass)[data-mode=auth] .board-scene{display:none}}