/* Shared visual language with the homepage demo; aligned, still hit targets during play. */
body.v2 .v24-board{container-type:inline-size;border:1px solid #ffffffd9;border-radius:clamp(22px,4vw,38px);background:linear-gradient(140deg,#ffffffad,#f7effbaf);box-shadow:0 22px 56px #80609c16,inset 0 2px 1px #fff,inset 0 -1px 2px #967bac1c;overflow:visible}
body.v2 .v24-board #v2-board-image{opacity:0}
body.v2 .v24-board #a11y-board{inset:1.65%;gap:0;padding:0;background:none;border:0}
body.v2 .v24-board #a11y-board>button{position:relative;overflow:visible;opacity:1!important;padding:0!important;border-radius:0;background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important;transform:none!important}
body.v2 .v24-board #a11y-board>button>.cell-amount,body.v2 .v24-board #a11y-board>button>.cell-target{opacity:0!important;position:absolute;pointer-events:none}
body.v2 .v24-board #a11y-board>button .v24-face,body.v2 .v24-board #a11y-board>button .v24-face span:not(.v31-completion-ring){opacity:1!important;pointer-events:none}
.v24-face{position:absolute;inset:6%;border-radius:clamp(14px,3vw,27px);display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #ffffffdf;background:linear-gradient(145deg,#f4eafc,#dfcfef);color:#57446e;box-shadow:0 8px 16px #6f46891c,inset 0 2px 1px #fff9,inset 0 -1px 1px #86669814;transition:box-shadow .18s ease,outline-color .18s ease;isolation:isolate}
.v24-face::before{content:'';position:absolute;inset:1px;border-radius:inherit;border-top:1px solid #ffffff8c;pointer-events:none}
.v24-face::after{content:'';position:absolute;inset:-4px;border:2px solid transparent;border-radius:calc(clamp(14px,3vw,27px) + 3px);pointer-events:none}
body.v2 .v24-board [data-v24-tone="violet"] .v24-face{background:linear-gradient(140deg,#9967f5,#6c38df);color:#fff;box-shadow:0 10px 20px #7542cb2b,inset 0 2px 1px #ffffff69,inset 0 -2px 3px #48239824;border-color:#b190fa}
/* Old tone attributes, if present during a render, retain the same green semantics. */
body.v2 .v24-board [data-v24-tone="peach"] .v24-face{background:linear-gradient(145deg,#f4fff9,#cceadd);color:#325e53;box-shadow:0 8px 18px #5a9c8216,inset 0 2px 1px #fffc}
body.v2 .v24-board [data-v24-tone="mint"] .v24-face{background:linear-gradient(145deg,#f4fff9,#cceadd);color:#325e53;box-shadow:0 8px 18px #5a9c8216,inset 0 2px 1px #fffc}
body.v2 .v24-board [data-v24-tone="clear"] .v24-face{background:linear-gradient(145deg,#fff8,#f8f4fb45);color:#9888ac;border:1px solid #e5dbee70;box-shadow:inset 0 1px 3px #9d84b109}
.v24-role{position:absolute;top:12%;left:0;right:0;font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.13em;line-height:1;text-align:center;color:inherit}
.v24-amount{display:flex;align-items:baseline;justify-content:center;gap:4px;white-space:nowrap;line-height:1.05;letter-spacing:-.035em;font-family:inherit;font-variant-numeric:tabular-nums;font-weight:800;max-width:96%}
.v24-value{font-size:clamp(25px,5vw,51px)}.v24-goal{font-size:clamp(12px,2.5vw,24px);font-weight:650;letter-spacing:-.02em;color:inherit}
.v24-track{position:absolute;left:23%;right:23%;bottom:13%;height:4px;border-radius:4px;background:#86657724;overflow:hidden}
[data-v24-tone="mint"] .v24-track{background:#32685224}
.v24-fill{display:block;width:100%;height:100%;background:currentColor;border-radius:inherit;transform-origin:left}
body.v2 .v24-board [data-v24-kind]:not([data-v24-kind="target"]) .v24-track{display:none}
body.v2 .v24-board #a11y-board>button .v24-mark{display:none;position:absolute;right:10%;top:9%;font-size:clamp(11px,2vw,18px);font-weight:800;line-height:1}
body.v2 .v24-board #a11y-board>[data-v24-full="true"] .v24-mark{display:block}
.v24-note{position:absolute;bottom:12%;font-size:9px;font-weight:650;line-height:1.1;color:inherit}
body.v2 .v24-board #a11y-board>button .v24-preview{display:none;position:absolute;bottom:8%;left:4%;right:4%;font-size:10px;font-weight:800;padding:3px 1px;border-radius:20px;background:#ffffffcf;color:#6339b1;text-align:center;line-height:1.1;letter-spacing:0}
body.v2 .v24-board #a11y-board>button.v24-previewing .v24-preview{display:block}
.v24-previewing .v24-track,.v24-previewing .v24-note{visibility:hidden}
body.v2 .v24-board #a11y-board>button.selected .v24-face::after{border-color:#7041ed;box-shadow:0 0 0 2px #fff8}
body.v2 .v24-board #a11y-board>button.eligible .v24-face::after{border:2px dashed #8e64d7}
body.v2 .v24-board #a11y-board>button.destination .v24-face::after{border:2px solid #7041ed;background:#7041ed06}
body.v2 .v24-board #a11y-board>button:focus-visible{outline:0!important}
body.v2 .v24-board #a11y-board>button:focus-visible .v24-face{outline:3px solid #35234e;outline-offset:3px}
body.v2 .v24-board #a11y-board>button:active:not(:disabled) .v24-face{box-shadow:0 3px 8px #6347781b,inset 0 1px 3px #76528822}
.v31-completion-ring{position:absolute;inset:-3px;border:2px solid #3d9675;border-radius:inherit;box-shadow:0 0 0 3px #9be6be30;pointer-events:none;opacity:0;z-index:2}
.v24-flights{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
.v24-flight{position:absolute;display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:50px;background:linear-gradient(140deg,#a879fb,#7040df);color:#fff;font-family:inherit;font-weight:800;font-size:14px;line-height:1;box-shadow:0 3px 12px #6d36cb3d;border:1px solid #fff9;pointer-events:none;will-change:transform,opacity}
@supports(font-size:1cqw){
 .v24-role{font-size:clamp(8px,calc(9cqw / var(--v24-size)),12px)}
 .v24-value{font-size:clamp(23px,calc(41cqw / var(--v24-size)),65px)}
 .v24-goal{font-size:clamp(12px,calc(19cqw / var(--v24-size)),28px)}
 .v24-note{font-size:clamp(8px,calc(9cqw / var(--v24-size)),12px)}
 body.v2 .v24-board #a11y-board>button .v24-preview{font-size:clamp(9px,calc(10cqw / var(--v24-size)),14px)}
 [data-v24-digits="3"] .v24-value,[data-v24-digits="4"] .v24-value{font-size:clamp(18px,calc(30cqw / var(--v24-size)),48px)}
}
body.v2.larger-text .v24-amount{transform:scale(1.07)}
body.v2.larger-text .v24-role,body.v2.larger-text .v24-note{font-size:clamp(10px,2vw,13px)}
body.v2 .v24-board.v24-still .v24-face{transition:none}
@media(prefers-reduced-motion:reduce){.v24-face{transition:none}.v24-flight{display:none}}
@media(forced-colors:active){.v24-face{background:Canvas!important;color:CanvasText!important;border:2px solid CanvasText!important;box-shadow:none!important}.v24-fill{background:Highlight}.v24-face::after{forced-color-adjust:auto}}
@media(max-width:360px){.v24-face{inset:5.5%;border-radius:13px}.v24-face::after{inset:-3px;border-radius:16px}.v24-amount{gap:2px}.v24-track{height:3px;left:19%;right:19%}.v24-role{letter-spacing:.08em}}
/* Four-by-four phones need a separate text budget: headings and numbers must
   not collide, including when the player's Larger text preference is enabled. */
@container (max-width:400px){
 body.v2 .v24-board[data-board-size="4"] .v24-role{top:7%;font-size:8px;letter-spacing:.06em}
 body.v2 .v24-board[data-board-size="4"] .v24-amount{margin-top:6%}
 body.v2 .v24-board[data-board-size="4"] .v24-value{font-size:clamp(22px,calc(32cqw / var(--v24-size)),32px)}
 body.v2 .v24-board[data-board-size="4"] .v24-note{display:none!important}
 body.v2 .v24-board[data-board-size="4"] #a11y-board>button .v24-mark{top:auto;bottom:6%;right:7%;font-size:10px}
}