:root{font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;color:#2c2a26;background:#efe6d3;font-synthesis:none;--ink:#2c2a26;--muted:#6b6357;--accent:#b8552f;--accent-dark:#8f3f21;--line:#d8cbb1;--paper:#f9f4e8;--well:#f1e7d1;--moss:#5c7a4a}
*{box-sizing:border-box}
/* When an iPhone draws the page under its status bar, scrolling the game into view stops below
   the bar, and a strip of page colour sits behind the clock so scrolled-away buttons never show
   through it. Without a top safe area the strip has no height. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;z-index:2147483000;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#f4ecdb;pointer-events:none}
/* `hidden` always wins over a class's display rule (a result card once stayed on the start card). */
[hidden]{display:none!important}
body{margin:0;min-height:100vh;min-height:100svh;background:linear-gradient(180deg,#f4ecdb 0,#efe6d3 320px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-shell{width:min(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right),560px);margin:max(10px,env(safe-area-inset-top)) auto calc(28px + env(safe-area-inset-bottom))}
.app-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px}
.app-brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-height:44px}
.app-brand strong{display:block;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:21px;letter-spacing:-.01em;line-height:1.05}
.app-brand small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.brand-mark{flex:none}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.header-button{font:inherit;font-size:14px;font-weight:650;min-height:44px;padding:0 13px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer}
.header-button:hover{border-color:#b9a684}
.settings-menu{position:relative}
.settings-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--ink)}
.settings-menu summary::-webkit-details-marker{display:none}
.settings-menu summary svg{width:24px;height:24px;fill:currentColor}
.settings-menu[open] summary{background:#e6dbc3}
.settings-panel{position:absolute;right:0;top:50px;z-index:5;width:min(300px,calc(100vw - 32px));padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 14px 34px #3a2a1030;display:grid;gap:9px}
.settings-heading{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.settings-heading span{color:var(--muted);font-size:12.5px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px}
.setting-toggle,.menu-action,.reset-panel button{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer}
.setting-toggle[aria-pressed=true]{background:#e9e0cc;border-color:#b9a684}
.menu-action{text-align:left}
.reset-panel p{margin:0 0 8px;font-size:14px}
.reset-panel div{display:flex;gap:8px}
.menu-links{display:grid;gap:4px;padding-top:4px;border-top:1px solid var(--line)}
.menu-links a{color:var(--accent-dark);font-size:14.5px;min-height:44px;display:flex;align-items:center;text-underline-offset:3px}
.challenge-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.mode-buttons{display:flex;flex-wrap:wrap;gap:6px;padding:3px;border-radius:999px;background:#e6dbc3}
.mode-buttons button{font:inherit;font-size:14px;font-weight:650;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#5d5346;cursor:pointer}
.mode-buttons button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #3a2a1030}
.mode-buttons button:disabled{opacity:.7;cursor:default}
/* Three mode buttons (Daily, Free play, Honeycomb) stay on one line down to 320px wide. */
@media (max-width:379px){.mode-buttons button{padding:0 10px}}
#challenge-label{margin:0;font-size:13.5px;color:var(--muted)}
.game{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px 10px 12px;box-shadow:0 12px 36px #3a2a1014}
/* Score line: the hand goal and the drops left lead; the run total and best are secondary. */
/* The score line wraps, totals first, when enlarged text no longer fits one row. */
.hud{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:flex-end;padding:2px 4px 8px}
.hud-goal{flex:1 1 auto}
.hud-label{display:block;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
.hud-label b{color:var(--ink);font-weight:700}
.hud strong{display:block;white-space:nowrap;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:700}
.hud strong small{font-size:17px;color:var(--muted);font-weight:500}
.hud-drops{text-align:center}
.hud-drops.low strong{color:var(--accent-dark)}
.hud-totals{display:grid;gap:3px;justify-items:start;font-size:13px;line-height:1.25;color:var(--muted);white-space:nowrap}
.hud-totals b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
/* Each part of the score line keeps room for its widest likely value, so a score or moves
   change never shifts the other parts or wraps the line, and the board under it never moves. */
.hud-goal strong{min-width:4.9em}
.hud-drops{min-width:4.2em}
/* Reserve the longest label in its bold alert font. Keeping it inside the box also
   works when text is enlarged; a narrower phone gap keeps the normal 390px HUD on one row. */
.hud-drops .hud-label::after{content:"Saved moves";display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700}
.hud-totals{min-width:6em}
#hand-score{display:inline-block;min-width:3ch;text-align:end}
.hud-totals b{display:inline-block;min-width:4ch}
.target-bar{height:6px;border-radius:3px;background:#e6dbc3;overflow:hidden;margin-top:4px}
#target-fill{height:100%;width:0;border-radius:3px;background:var(--moss);transition:width .25s}
#target-fill.met{background:var(--accent)}
.well{position:relative;container-type:inline-size;aspect-ratio:7/10;width:min(100%,calc(var(--well-h,calc(100svh - 110px)) * .7));margin:0 auto;background:var(--well);border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:3px}
.well:focus-visible{outline:3px solid var(--accent)}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f1e7d1e6;backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}
.overlay-card{overflow-wrap:anywhere;width:min(100%,360px);max-height:100%;overflow:auto;padding:16px 16px 24px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px #3a2a1022;text-align:center}
.kicker{margin:0 0 4px;font-size:11px;font-weight:750;letter-spacing:.12em;color:var(--accent-dark)}
.overlay-card h1,.overlay-card h2{margin:0;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:clamp(22px,5.4vw,29px);line-height:1.12;letter-spacing:-.01em;font-weight:600}
.quick-howto{margin:10px 0 4px}
.howto-art{width:100%;max-width:280px;height:auto;display:block;margin:0 auto}
.quick-howto ol{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.6em),1fr));gap:6px;text-align:center}
.quick-howto li{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.quick-howto li strong{font-size:14px;color:var(--ink)}
.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.6em),1fr));gap:6px;margin:12px 0 4px}
.result-stats div{display:flex;flex-direction:column;gap:1px;padding:8px 4px;border-radius:10px;background:var(--well)}
.result-stats strong{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.result-stats span{font-size:12px;color:var(--muted)}
.primary{display:block;width:100%;font:inherit;font-size:17px;font-weight:700;min-height:50px;margin:12px 0 0;padding:0 16px;border:0;border-radius:12px;background:var(--accent);color:#fff8ee;cursor:pointer}
.primary:hover{background:var(--accent-dark)}
/* When the card is taller than the board (short screens, phones on their side, a long result),
   its main button stays on screen, at the bottom of the card or, once scrolled past, at the top,
   while the rest scrolls behind it. */
.overlay-card>.primary{position:sticky;top:6px;bottom:6px;z-index:1;box-shadow:0 0 0 6px var(--paper)}
.overlay-copy{margin:10px 0 0;font-size:14.5px;line-height:1.4}
.overlay-note{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4}
.note-streak{display:none}
.overlay-goal{margin:8px 0 0;padding:7px 10px;border-radius:10px;background:var(--well);font-size:13.5px;line-height:1.4;color:var(--ink)}
.overlay-goal[hidden]{display:none}
@container (max-width:300px){.overlay-goal{margin-top:6px;padding:5px 8px;font-size:13px}}
.overlay-fullscreen{display:flex;width:max-content;max-width:100%;align-items:center;justify-content:center;gap:7px;min-height:44px;margin:8px auto 0;padding:0 16px;border:1.5px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:650;cursor:pointer}
.overlay-fullscreen:hover{border-color:#b9a684}
.overlay-skip{display:block;min-height:44px;margin:4px auto 0;padding:0 14px;border:0;background:none;color:var(--muted);font:inherit;font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.game.is-practice .hud{visibility:hidden}
.overlay-fullscreen svg{flex:none}
/* Very narrow wells (enlarged text on small phones, or the smallest phones on their side): give
   the card the room. */
/* A narrow well (a phone on its side): kicker and title keep to one line so the main button
   stays near the top of the card. */
@container (max-width:280px){.overlay{padding:8px}.overlay-card{padding:12px 10px}.kicker{letter-spacing:.06em}.overlay-card h1,.overlay-card h2{font-size:22px}.quick-howto ol{gap:4px;grid-template-columns:repeat(auto-fit,minmax(min(100%,3em),1fr))}}
@container (max-width:240px){.overlay{padding:6px}.overlay-card{padding:10px 8px}.primary,.overlay-fullscreen{padding:0 6px}.primary{font-size:15.5px}.overlay-fullscreen svg{display:none}}
.play-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.secondary,.fullscreen-toggle{font:inherit;font-size:15px;font-weight:650;min-height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.secondary{flex:1}
.secondary:disabled{opacity:.45;cursor:default}
.fullscreen-toggle{flex:1}
.icon-control{flex:0 0 auto;width:52px;min-height:46px;padding:0;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.icon-control svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-control .speaker{fill:currentColor}
.icon-control .cross{display:none}
.icon-control.is-muted{color:var(--muted)}
.icon-control.is-muted .wave{display:none}
.icon-control.is-muted .cross{display:block}
.fullscreen-toggle svg{fill:none;flex:none}
.status{margin:8px 4px 0;font-size:14.5px;line-height:1.4;min-height:2.8em;color:#4d443a}
.copy-score{display:block;width:100%;font:inherit;font-size:15px;font-weight:650;min-height:44px;margin:8px 0 0;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
.copy-score[hidden]{display:none}
.share-panel{margin:8px 0 0}
.share-panel label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.share-panel textarea{width:100%;font:inherit;font-size:14px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.try-another{margin:12px 4px 0;font-size:14px}
.try-another a,.app-footer a{color:var(--accent-dark);text-underline-offset:3px;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.publisher img{flex:none}
.app-footer{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:16px 4px 0;font-size:13px;color:var(--muted);line-height:1.5}
.help-sheet{width:min(100% - 24px,520px);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px #3a2a1040}
.help-sheet::backdrop{background:#2c2a2688}
.sheet-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.eyebrow{margin:0 0 3px;font-size:11px;font-weight:750;letter-spacing:.12em;color:var(--accent-dark)}
.help-sheet h2{margin:0;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:24px;line-height:1.15;font-weight:600}
.help-sheet p{font-size:15.5px;line-height:1.55;margin:12px 0 0}
.sheet-close{font:inherit;font-size:14px;font-weight:650;min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;flex:none}
.help-goals h3{margin:18px 0 0;font-size:17px;line-height:1.3}
.help-goals h3 span{font-size:14px;font-weight:600;color:var(--muted)}
.goals-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:4px 14px}
.goals-list li{display:flex;align-items:center;gap:8px;min-height:32px;font-size:15px;line-height:1.35;color:var(--muted)}
.goals-list li.is-done{color:var(--ink)}
.goals-list svg{flex:none;width:20px;height:20px}
.help-actions{margin-top:14px}
.fullscreen-tip{position:absolute;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 60px);left:50%;transform:translateX(-50%);width:min(92%,420px);display:flex;align-items:center;gap:8px;padding:10px 8px 10px 14px;border-radius:14px;background:#2c2a26;color:#fff8ee;box-shadow:0 8px 24px #3a2a1040}
.fullscreen-tip p{margin:0;font-size:14px;line-height:1.4}
.fullscreen-tip button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit}
.privacy-consent{padding:12px 13px;border-radius:14px;border:1px solid #cdbf9f;background:#fffaf0;box-shadow:0 10px 26px #3a2a1030;display:grid;gap:8px}
.privacy-consent p{overflow-wrap:break-word;margin:0;font-size:15px;line-height:1.35;color:#3f382f}
.privacy-consent a{color:var(--accent-dark);text-underline-offset:3px}
.privacy-consent-actions{display:flex;flex-wrap:wrap;gap:8px}
.privacy-consent-allow{flex:1;font:inherit;font-size:15px;font-weight:700;min-height:44px;padding:9px 14px;border:0;border-radius:9px;background:var(--accent);color:#fff8ee;cursor:pointer}
.privacy-consent-decline{font:inherit;font-size:15px;font-weight:600;min-height:44px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:#6b6357;cursor:pointer}
/* Phones: a shorter card, so it fits above the score line in a top corner. */
@media (max-width:520px){.privacy-consent{padding:10px 11px;gap:6px}.privacy-consent p{font-size:14px;line-height:1.3}}
/* Short landscape screens (a phone on its side with the browser bars showing): question and
   buttons share one row, so the card fits under the play controls beside the well. */
@media (orientation:landscape) and (max-height:340px){.privacy-consent{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:8px 10px}.privacy-consent p{font-size:14px;line-height:1.25}.privacy-consent-actions{flex-wrap:nowrap}.privacy-consent-allow{padding:9px 12px}.privacy-consent-decline{padding:9px 8px}}
.privacy-consent-allow:focus-visible,.privacy-consent-decline:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c97a53;outline-offset:2px}
.fullscreen-fit{display:contents}
html.game-fullscreen-lock{overflow:hidden;overscroll-behavior:none}
.game.is-fullscreen{position:fixed;inset:0;z-index:2147483001;width:auto;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:var(--paper);overflow:auto;overscroll-behavior:none;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;gap:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(min(40dvh,70vw),1fr) auto auto;grid-template-areas:"hud" "board" "controls" "status"}
.game.is-fullscreen .fullscreen-fit{grid-area:board;display:grid;place-items:center;container-type:size;align-self:stretch;justify-self:stretch;min-width:0;min-height:0}
.game.is-fullscreen .well{grid-area:auto;width:min(100cqw,calc(100cqh * .7));aspect-ratio:7/10;max-height:none;min-width:0;margin:0}
.game.is-fullscreen .hud{grid-area:hud;padding:0 2px}
.game.is-fullscreen .play-controls{grid-area:controls;margin:0}
.game.is-fullscreen .status{grid-area:status;margin:0 2px}
.game.is-fullscreen .try-another,.game.is-fullscreen .overlay-fullscreen{display:none}
@media (min-aspect-ratio:5/4){.game.is-fullscreen{column-gap:20px;grid-template-columns:minmax(0,1fr) clamp(220px,28vw,300px);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"board hud" "board controls" "board status"}
.game.is-fullscreen .hud{align-content:start}.game.is-fullscreen .play-controls{flex-direction:column}}
@media (min-width:640px){.app-shell{margin-top:18px}.hud strong{font-size:26px}}
/* Short landscape screens (phones on their side): the well on the left, score, controls and
   status beside it, so the whole play area fits without scrolling. */
@media (orientation:landscape) and (max-height:560px){
/* Phones on their side: brand, well choice and header buttons share one row, and the start or
   result card starts at the top of the well, so its main button is on screen without scrolling. */
.app-shell{width:min(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right),860px);margin-top:6px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;align-items:center}
.app-header{display:contents}
.app-brand{grid-column:1;grid-row:1}
.app-brand small{display:none}
.header-actions{grid-column:3;grid-row:1}
.challenge-picker{grid-column:2;grid-row:1;margin:0;justify-content:center}
/* The card kicker names the well and date, and the start card note carries the streak, so the
   line under the well buttons would only add a second header row here. */
#challenge-label{display:none}
.note-streak{display:inline}
.mode-buttons{flex-wrap:nowrap}
.mode-buttons button{padding:0 11px}
.app-shell>:not(.app-header):not(.challenge-picker){grid-column:1/-1}
.game:not(.is-fullscreen){margin-top:6px}
.game:not(.is-fullscreen) .overlay{align-items:flex-start}
.game:not(.is-fullscreen) .howto-art{display:none}
/* An empty status line takes no room here (nothing sits below it that it could push), which
   leaves the lower corner free for the analytics card in consent regions. */
.game:not(.is-fullscreen) .status:empty{min-height:0;margin:0}
.game:not(.is-fullscreen){display:grid;grid-template-columns:auto minmax(200px,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"well hud" "well controls" "well status" "well more";column-gap:18px;align-items:start}
.game:not(.is-fullscreen) .well{grid-area:well;margin:0;width:calc(var(--well-h,calc(100svh - 24px)) * .7)}
/* The score line wraps rather than overlaps when enlarged text no longer fits beside the well. */
.game:not(.is-fullscreen) .hud{grid-area:hud;padding-top:4px}
.game:not(.is-fullscreen) .play-controls{grid-area:controls}
.game:not(.is-fullscreen) .status{grid-area:status}
.game:not(.is-fullscreen) .try-another{grid-area:more}}
@media (prefers-reduced-motion:reduce){#target-fill{transition:none}}
.document{width:min(100% - 32px,620px);margin:24px auto 40px;font-size:16.5px;line-height:1.6}
.document h1{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:clamp(28px,6vw,36px);line-height:1.12;margin:12px 0 10px;font-weight:600}
.document h2{font-size:19px;margin:24px 0 6px}
.document a{color:var(--accent-dark);text-underline-offset:3px}
.document footer{margin-top:32px;padding-top:12px;border-top:1px solid var(--line)}
.document footer nav{display:flex;gap:16px;flex-wrap:wrap}
.document summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.document label{display:flex;gap:8px;align-items:center;min-height:44px}
#analytics-choice{display:grid;gap:8px;margin:8px 0 12px}
#analytics-choice button{font:inherit;font-size:15px;font-weight:650;min-height:44px;width:max-content;max-width:100%;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
#analytics-choice p{margin:0}
/* Power-up shop after a cleared round: three priced buttons and a skip button over the preview strip, so the well stays in view. */
.shop{position:absolute;left:0;right:0;top:0;max-height:100%;overflow:auto;padding:6px 8px 8px;background:#e6dbc3;border-bottom:1px solid var(--line);box-shadow:0 6px 16px #3a2a1018}
.shop-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:5px}
.shop-title{flex:1 1 110px;margin:0;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink)}
.shop-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.shop-option{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-height:48px;padding:5px 4px;border:1.5px solid #b9a684;border-radius:11px;background:var(--paper);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.shop-option:hover:not(:disabled){border-color:var(--accent)}
.shop-option:focus-visible,.shop-go:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.shop-option svg{flex:none;width:26px;height:26px}
.shop-option strong{font-size:14.5px;line-height:1.2}
.shop-option small{font-size:12px;line-height:1.2;color:var(--muted)}
.shop-option em{margin-top:2px;font-style:normal;font-size:13px;font-weight:700;line-height:1.2;color:var(--accent-dark)}
.shop-option:disabled{cursor:default;background:#efe6d3;border-color:#d8cbb1}
.shop-option:disabled svg,.shop-option:disabled strong,.shop-option:disabled small{opacity:.55}
.shop-option:disabled em{color:var(--muted)}
.shop-option.bought{border-color:var(--moss)}
.shop-option.bought em{color:var(--moss)}
.shop-go{flex:0 0 auto;min-height:44px;min-width:76px;padding:6px 14px;border:1.5px solid #b9a684;border-radius:11px;background:var(--paper);color:var(--ink);font:inherit;font-size:14.5px;font-weight:650;cursor:pointer}
.shop-go:hover{border-color:var(--accent)}
/* Four items across: on a phone-width board the one-line notes and the word "points" give way so the
   shop stays a short strip over the top of the board (the help sheet describes each item). */
@container (max-width:380px){.shop-option small,.shop-option .shop-more{display:none}}
@container (max-width:300px){.shop{padding:5px 6px 6px}.shop-options{gap:4px}.shop-option{padding:4px 3px}.shop-option svg{width:20px;height:20px}.shop-option strong{font-size:13.5px}.shop-option small{display:none}.shop-title{font-size:13px}}
@container (max-width:240px){.shop-option svg,.shop-more{display:none}.shop-option strong{font-size:12.5px}.shop-title{flex-basis:70px}}

/* Keep the saved-score status and its rank link beside the result actions. */
.overlay-card .board-score-confirmation{padding:6px 0; margin:16px 0 8px!important}
.overlay-card .board-score-confirmation a{display:flex!important;justify-content:center;margin:4px 0 0!important;min-height:44px;color:var(--accent-dark);text-underline-offset:3px}

.hud-drops.low .hud-label{color:var(--accent-dark);font-weight:700}
.hud-drops.low-alert{animation:moves-notice .8s ease-out}
@keyframes moves-notice{0%{background:#ead5b5}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.hud-drops.low-alert{animation:none}}
#shop-open{font-variant-numeric:tabular-nums}

/* The score line, in a browser tab and in full screen alike: the round goal, the moves box and the
   shop (top right, with the points to spend on it) share the top row, and the run total and best
   sit on one quiet line under it. A narrow line stacks the points under the shop icon instead. */
.hud{container-type:inline-size;gap:2px 8px}
@media(max-width:430px){.hud{column-gap:4px}}
@media(max-width:359px){.hud{column-gap:2px}}
.hud-totals{order:9;flex-basis:100%;display:flex;gap:10px;min-width:0}
.shop-icon{display:inline-flex;align-items:center;gap:5px;min-width:44px;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--accent-dark);cursor:pointer;align-self:center}
.shop-icon svg{display:block;flex:none;width:26px;height:26px}
.shop-wallet{display:grid;justify-items:start;line-height:1.1;text-align:left}
.shop-wallet b{min-width:4ch;font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.shop-wallet small{font-size:11px;font-weight:600;color:var(--muted)}
@container (max-width:329px){
  .shop-icon{flex-direction:column;gap:1px;padding:3px 5px}
  .shop-icon svg{width:22px;height:22px}
  .shop-wallet{justify-items:center}
  .shop-wallet b{font-size:13px;text-align:center}
  .shop-wallet small{display:none}
}
.shop-icon:disabled{opacity:.55;cursor:default}
.play-toast{position:absolute;z-index:4;top:17%;left:12px;right:12px;display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #b9a684;border-radius:14px;background:#fffaf0;box-shadow:0 6px 20px #3a2a1026;user-select:auto;touch-action:manipulation}
.play-toast p{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
.play-toast button{flex:none;min-height:44px;min-width:44px;border:0;border-radius:9px;padding:8px;background:#e9e0cc;color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.play-toast[hidden]{display:none}

/* First-visit tutorial (lib/game-tutorial.mjs) in Tumble's colours; the look and layout are shared. */
:root{--dpt-bg:var(--paper);--dpt-ink:var(--ink);--dpt-muted:var(--muted);--dpt-line:var(--line);--dpt-tint:#eadfc7;--dpt-accent:var(--accent);--dpt-accent-ink:#fff8ee}
.sheet-tutorial{margin:0 0 14px}