/* Shared gameplay UI contract. A game theme supplies tokens; every present and
   future control using data-ui-role inherits them. Independent shell screens
   deliberately do not inherit these rules. */
body[data-ui-context="game"] main .game-head,
body[data-ui-context="game"] main .hud-row{
 color:var(--ui-text,#f4f7fa);
}
body[data-ui-context="game"] main .game-head .scenario-info{
 color:var(--ui-text,#f4f7fa);
 text-shadow:0 1px 3px var(--ui-shadow,#0008);
}
body[data-ui-context="game"] main .game-head .play-level-id{
 color:var(--ui-muted,#c9d2d9);
 opacity:1;
}
body[data-ui-context="game"] main .icon-menu,
body[data-ui-context="game"] main .play-action,
body[data-ui-context="game"] main [data-ui-role="action"],
body[data-ui-context="game"] main [data-ui-role="ability"]{
 color:var(--ui-text,#f4f7fa);
 background:linear-gradient(145deg,var(--ui-control-raised,#385064),var(--ui-control,#162737));
 border:1px solid var(--ui-border,#ffffff44);
 box-shadow:inset 0 1px 1px #ffffff2b,0 3px 9px var(--ui-shadow,#0008);
}
body[data-ui-context="game"] main #freeze.freeze-action{
 color:var(--ui-text,#f4f7fa);
 background:linear-gradient(145deg,var(--ui-control-raised,#385064),var(--ui-control,#162737));
}
body[data-ui-context="game"] main .play-action:active,
body[data-ui-context="game"] main .play-action.pressed,
body[data-ui-context="game"] main [data-ui-role="action"]:active{
 background:var(--ui-control-pressed,var(--ui-accent,#7ac9ff));
 filter:brightness(1.12);
}
body[data-ui-context="game"] main .play-action:disabled,
body[data-ui-context="game"] main [data-ui-role="action"]:disabled{opacity:.46;filter:saturate(.45)}
body[data-ui-context="game"] main .play-action:focus-visible,
body[data-ui-context="game"] main .icon-menu:focus-visible,
body[data-ui-context="game"] .ui-panel button:focus-visible{
 outline:3px solid var(--ui-focus,var(--ui-accent,#7ac9ff));outline-offset:2px;
}
body[data-ui-context="game"] main .score-box,
body[data-ui-context="game"] main [data-ui-role="display"]{
 background:linear-gradient(160deg,var(--ui-surface-raised,#213748),var(--ui-surface,#101d29));
 border:1px solid var(--ui-border,#ffffff44);
 color:var(--ui-text,#f4f7fa);
 box-shadow:inset 0 1px 1px #ffffff22,0 3px 9px var(--ui-shadow,#0008);
}
body[data-ui-context="game"] main .score-box strong{color:var(--ui-accent,#b9ddff)}
body[data-ui-context="game"] main .status:not(:empty),
body[data-ui-context="game"] main .toast:not(:empty){
 background:var(--ui-surface,#101d29);border:1px solid var(--ui-border,#ffffff44);
 color:var(--ui-text,#f4f7fa);text-shadow:0 1px 2px var(--ui-shadow,#0008);
}
body[data-ui-context="game"] .ui-panel{background:var(--ui-scrim,#07131de6)}
body[data-ui-context="game"] .ui-panel .ui-card{
 background:linear-gradient(155deg,var(--ui-surface-raised,#213748),var(--ui-surface,#101d29));
 border:1px solid var(--ui-border,#ffffff44);color:var(--ui-text,#f4f7fa);
 box-shadow:0 16px 40px var(--ui-shadow,#0008);
}
body[data-ui-context="game"] .ui-panel button{
 color:var(--ui-text,#f4f7fa);
 border-color:var(--ui-border,#ffffff44);
 background:var(--ui-control,#162737);
}
body[data-ui-context="game"] .ui-panel .ui-sub,
body[data-ui-context="game"] .ui-panel .panel-version{color:var(--ui-muted,#c9d2d9)}
@media(prefers-reduced-motion:reduce){body[data-ui-context="game"] main .play-action{transition:none}}

/* The menu appearance is independent of the theme of the current level. */
/* A theme may set a dark text colour on body for its light cards (Ivory Mahjong); the menu screens
   are always dark, so they keep their own light text whatever theme was played last. */
body[data-ui-context="shell"] .home-screen,
body[data-ui-context="shell"] .free-setup,
body[data-ui-context="shell"] .ui-panel{color:#f4f7fa}
body[data-ui-context="shell"][data-shell-theme="warm"] .home-screen,
body[data-ui-context="shell"][data-shell-theme="warm"] .free-setup{
 background:radial-gradient(circle at 50% 18%,#556b54,#172d31 72%);
}
body[data-ui-context="shell"][data-shell-theme="warm"] .home-card,
body[data-ui-context="shell"][data-shell-theme="warm"] .ui-card{
 background:linear-gradient(160deg,#283c39,#12262a);border-color:#d3b87888;
}
body[data-ui-context="shell"][data-shell-theme="warm"] .home-card button,
body[data-ui-context="shell"][data-shell-theme="warm"] .ui-panel button{
 border-color:#d3b87888;
}

/* Settings: independent sound channels and motion controls. */
#settingsPanel .settings-card{width:min(94vw,510px);padding:18px 19px 15px;gap:13px;background:#203e35;color:#f4f7ef;border:2px solid #e6c982;border-radius:22px;overflow:auto;scrollbar-width:thin}
#helpPanel .help-card{width:min(94vw,510px);max-height:min(88dvh,760px);grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:17px 19px 12px;gap:8px}
#helpPanel .ui-head{padding-bottom:9px;border-bottom:1px solid #ffffff36}
#helpPanel .help-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 7px 4px 0;font-size:.86rem;line-height:1.48}
#helpPanel .help-content:focus-visible{outline:2px solid #ffd98a;outline-offset:-2px}
#helpPanel .help-content section{padding:10px 2px 11px;border-top:1px solid #ffffff25}
#helpPanel .help-content section:first-child{border-top:0}
#helpPanel .help-content h3{margin:0 0 5px;color:#f3d49a;opacity:1;font-size:.79rem;letter-spacing:.045em}
#helpPanel .help-content p{margin:0 0 7px}
#helpPanel .help-content p:last-child{margin-bottom:0}
#helpPanel .panel-version{margin:0;padding-top:6px;border-top:1px solid #ffffff26}
@media(max-width:390px){#helpPanel .help-card{padding:13px 12px 9px}#helpPanel .help-content{font-size:.8rem}}
#settingsPanel .ui-head{padding-bottom:11px;border-bottom:1px solid #ffffff2c}
/* The settings card has a fixed dark colour, so its version line must not take the theme's muted text colour. */
#settingsPanel .panel-version{color:#c9d2d9}
#settingsPanel .ui-head strong{font-size:1.17rem}
#settingsPanel .settings-section{border:0;padding:2px 0 0}
#settingsPanel .settings-section h3{color:#f2cb83;font-size:.82rem;opacity:1;letter-spacing:.09em;margin:0 0 4px}
#settingsPanel .settings-section>p{font-size:.77rem;color:#c2d6c8;margin:0 0 10px}
#settingsPanel .settings-group{padding:0 13px;background:#294b40;border:1px solid #799e83;border-radius:15px}
#settingsPanel .settings-row{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0}
#settingsPanel .settings-row+.settings-row{border-top:1px solid #ffffff26}
#settingsPanel .settings-copy{min-width:0;flex:1}
#settingsPanel .settings-name{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:750;line-height:1.25}
#settingsPanel .settings-copy small{display:block;font-size:.7rem;color:#c2d6c8;margin-top:4px;line-height:1.35}
#settingsPanel .settings-info{position:relative;display:inline-grid;place-items:center;flex:0 0 23px;width:23px;height:23px;padding:0;border:1px solid #9ebd93;border-radius:50%;background:#3f6954;color:#ffe0a2;font-size:.78rem;font-weight:800;cursor:help}
#settingsPanel .settings-tooltip{display:none;position:fixed;z-index:1000;left:var(--tip-left,50vw);top:var(--tip-top,50vh);width:min(270px,calc(100vw - 28px));padding:12px 14px;border:1px solid #d6b36d;border-radius:12px;background:#f6ebcf;color:#294338;box-shadow:0 12px 28px #07150ece;font:500 .8rem/1.42 system-ui,sans-serif;text-align:left;pointer-events:none}
#settingsPanel .settings-info:hover .settings-tooltip,#settingsPanel .settings-info:focus-visible .settings-tooltip,#settingsPanel .settings-info.is-open .settings-tooltip{display:block}
@media(hover:none){#settingsPanel .settings-info:hover .settings-tooltip{display:none}#settingsPanel .settings-info.is-open .settings-tooltip,#settingsPanel .settings-info:focus-visible .settings-tooltip{display:block}}
#settingsPanel .settings-switch{flex:0 0 60px;width:60px;height:32px;padding:3px;border:0;border-radius:30px;background:#5a7365;cursor:pointer;transition:background .15s}
#settingsPanel .settings-switch[aria-checked="true"]{background:#63ab83}
#settingsPanel .settings-switch span{display:block;width:26px;height:26px;border-radius:50%;background:#f7faee;transition:transform .15s}
#settingsPanel .settings-switch[aria-checked="true"] span{transform:translateX(28px)}
#settingsPanel .settings-stepper{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#settingsPanel .settings-stepper button{width:31px;height:34px;min-height:34px;padding:0;border:0;border-radius:9px;background:#3d7057;color:#fff;font-size:1.25rem;font-weight:800}
#settingsPanel .settings-stepper output{width:48px;text-align:center;color:#f2cd8a;font-size:.81rem;font-weight:800}
#settingsPanel .panel-version{text-align:center;margin-top:1px}
#settingsPanel button:focus-visible{outline:2px solid #ffd88b;outline-offset:2px}
body[data-ui-context="game"] #settingsPanel .settings-switch[aria-checked="true"]{background:#63ab83}
body[data-ui-context="game"] #settingsPanel .settings-switch[aria-checked="false"]{background:#5a7365}
body[data-ui-context="game"] #settingsPanel .settings-stepper button{background:#3d7057}
body[data-ui-context="game"] #settingsPanel .settings-info{background:#3f6954}
@media(max-width:390px){#settingsPanel .settings-card{padding:14px 12px}#settingsPanel .settings-group{padding:0 9px}#settingsPanel .settings-name{font-size:.8rem}#settingsPanel .settings-copy small{font-size:.64rem}#settingsPanel .settings-stepper{gap:2px}#settingsPanel .settings-stepper output{width:39px}}

/* One clear exit landmark for every world. It is a separate grid item at the
   actual exit, so decorative theme markup and game physics stay untouched. */
body[data-ui-context="game"] .board .exit-beacon{position:relative;z-index:16;box-sizing:border-box;pointer-events:none;display:block;width:18px;height:66%;align-self:center;justify-self:start;transform:translateX(-37%);border:2px solid #fbd890;border-right:4px solid #fff1bc;border-radius:12px 3px 3px 12px;background:linear-gradient(90deg,#083945,#35e7f0 64%,#c4fff3);box-shadow:0 0 0 2px #144b54,0 0 11px 3px #66ecff,inset 0 0 5px #fff8bb;filter:drop-shadow(0 1px 2px #000a)}
body[data-ui-context="game"] .board .exit-beacon span{position:absolute;top:50%;right:calc(100% + 4px);transform:translateY(-50%);padding:3px 4px;border:1px solid #f4d082;border-radius:5px;background:#102b34f5;color:#fff0bd;font:800 clamp(7px,1.6vw,10px)/1 system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px #000;box-shadow:0 0 7px #40dcedbd}
body[data-ui-context="game"] .board .exit-beacon-right{justify-self:end;transform:translateX(37%);border-right:2px solid #fbd890;border-left:4px solid #fff1bc;border-radius:3px 12px 12px 3px;background:linear-gradient(90deg,#c4fff3,#35e7f0 36%,#083945)}
body[data-ui-context="game"] .board .exit-beacon-right span{right:auto;left:calc(100% + 4px)}
body[data-ui-context="game"] .board .exit-beacon-up,body[data-ui-context="game"] .board .exit-beacon-down{width:66%;height:17px;justify-self:center;align-self:start;transform:translateY(-37%);border:2px solid #fbd890;border-bottom:4px solid #fff1bc;border-radius:12px 12px 3px 3px;background:linear-gradient(#083945,#35e7f0 64%,#c4fff3)}
body[data-ui-context="game"] .board .exit-beacon-up span{top:auto;bottom:calc(100% + 3px);right:50%;transform:translateX(50%)}
body[data-ui-context="game"] .board .exit-beacon-down{align-self:end;transform:translateY(37%);border-bottom:2px solid #fbd890;border-top:4px solid #fff1bc;border-radius:3px 3px 12px 12px;background:linear-gradient(#c4fff3,#35e7f0 36%,#083945)}
body[data-ui-context="game"] .board .exit-beacon-down span{top:calc(100% + 3px);right:50%;transform:translateX(50%)}
body[data-ui-context="game"]:not(.full-ui-skin) .board .exit::after{opacity:0}

/* Common machined rails for the simpler worlds. Color tokens inherit from
   each world; showcase worlds with full UI retain their own sculpted controls. */
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-control{opacity:1;border:2px solid var(--ui-accent,#e4c587);background:linear-gradient(160deg,#5c6671 0%,var(--ui-control-raised,#4b535a) 14%,var(--ui-control,#262f37) 42%,#222b33 87%,#121b22);box-shadow:inset 0 1px 1px #fff8,inset 0 0 0 2px #19252ecf,inset 0 -3px 5px #0009,0 4px 9px #000a,0 0 0 1px #e3b76f6b;filter:none}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-up,body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-down{border-radius:999px;height:43px}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-left,body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-right{border-radius:999px;width:43px}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .emboss-arrow{width:27px;height:27px;filter:drop-shadow(0 2px 2px #000d);transition:transform .12s ease,filter .12s ease}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .emboss-arrow::before{left:9px;top:9px;width:9px;height:16px;border-radius:2px;background:linear-gradient(#fffef0,#e9e0c8);box-shadow:inset 1px 1px #fff,inset -1px -1px #94734f}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .emboss-arrow::after{left:1px;border-left-width:13px;border-right-width:13px;border-bottom-width:13px;border-bottom-color:#fff7dd;filter:drop-shadow(0 -1px 1px #d6a45e)}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-control:active,body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-control.pressed{background:linear-gradient(155deg,var(--ui-control-pressed,#547a86),var(--ui-control,#243847));box-shadow:inset 0 3px 7px #000a,0 0 9px var(--ui-accent,#e9d08d);filter:brightness(1.08)}
body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-control:focus-visible{outline:3px solid var(--ui-focus,#ffe1a0);outline-offset:3px}
@media(max-width:430px){body[data-ui-context="game"] .board .exit-beacon span{font-size:7px;padding:2px 3px}body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-left,body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .edge-right{width:38px}}
@media(prefers-reduced-motion:reduce){body[data-ui-context="game"]:not(.full-ui-skin) .board-wrap .emboss-arrow{transition:none}}
@media(max-width:430px){
 body[data-ui-context="game"] .board .exit-beacon-left span{left:calc(100% + 2px);right:auto}
 body[data-ui-context="game"] .board .exit-beacon-right span{right:calc(100% + 2px);left:auto}
}
/* Keep the caption inside the board. The outer control rail is a separate,
   higher stacking layer and could otherwise hide the word on side exits. */
body[data-ui-context="game"] .board .exit-beacon-left span{left:calc(100% + 4px);right:auto}
body[data-ui-context="game"] .board .exit-beacon-right span{right:calc(100% + 4px);left:auto}
body[data-ui-context="game"] .board .exit-beacon-up span{top:calc(100% + 4px);bottom:auto;right:50%;transform:translateX(50%)}
body[data-ui-context="game"] .board .exit-beacon-down span{bottom:calc(100% + 4px);top:auto;right:50%;transform:translateX(50%)}


/* v0.12.94 – lower, clearer board-attached victory state */
.victory-overlay[hidden]{display:none!important}
.victory-overlay{
 position:absolute;inset:0;z-index:60;display:grid;place-items:center;
 padding:28% 12px 0;
 background:#02070d38;
 backdrop-filter:blur(2px) brightness(.74) saturate(.82);
 -webkit-backdrop-filter:blur(2px) brightness(.74) saturate(.82);
 animation:victoryScrimIn .24s ease-out both;
}
body.victory-state .game-head{position:relative;z-index:80}
body.victory-state .hud-row{pointer-events:none;opacity:.40;transition:opacity .24s ease}
.victory-card{
 width:clamp(246px,72%,310px);max-width:calc(100% - 22px);
 padding:12px;border-radius:19px;text-align:center;color:var(--ui-text,#f4f7fa);
 background:
  radial-gradient(circle at 50% -28%,color-mix(in srgb,var(--ui-accent,#7ac9ff) 34%,transparent),transparent 48%),
  linear-gradient(155deg,color-mix(in srgb,var(--ui-surface-raised,#213748) 98%,#ffffff05),color-mix(in srgb,var(--ui-surface,#101d29) 99%,#000));
 border:2px solid color-mix(in srgb,var(--ui-accent,#7ac9ff) 62%,var(--ui-border,#ffffff44) 38%);
 box-shadow:0 16px 42px #000d,0 0 20px color-mix(in srgb,var(--ui-accent,#7ac9ff) 18%,transparent),inset 0 1px 0 #ffffff2e;
 animation:victoryCardIn .3s cubic-bezier(.2,.9,.2,1.08) both;
}
.victory-result{
 display:grid;gap:1px;padding:10px 9px 9px;border-radius:14px;
 border:1px solid color-mix(in srgb,var(--ui-accent,#7ac9ff) 58%,transparent);
 background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent,#7ac9ff) 14%,transparent),#00000018);
 box-shadow:inset 0 0 19px color-mix(in srgb,var(--ui-accent,#7ac9ff) 10%,transparent);
}
.victory-result strong{
 font-size:clamp(1.7rem,8vw,2.25rem);line-height:1;letter-spacing:.07em;
 color:var(--ui-accent,#7ac9ff);text-shadow:0 2px 11px var(--ui-shadow,#0008)
}
.victory-result span{font-size:.98rem;font-weight:760;color:var(--ui-text,#f4f7fa)}
.victory-result b{font-size:1.34em}
.victory-score{min-height:20px;margin:8px 3px 7px;color:var(--ui-muted,#c9d2d9);font-size:.84rem;font-weight:700}
.victory-actions{display:grid;grid-template-columns:.72fr .92fr 1.18fr;gap:6px}
body.scenario-mode .victory-actions{grid-template-columns:.82fr 1.18fr}
.victory-actions button{
 min-width:0;min-height:43px;padding:6px 6px;border-radius:12px;font:inherit;font-size:.78rem;font-weight:850;
 color:var(--ui-text,#f4f7fa);border:1px solid var(--ui-border,#ffffff44);
 box-shadow:inset 0 1px 1px #ffffff26,0 3px 9px var(--ui-shadow,#0006);
 white-space:nowrap;
}
.victory-primary{background:linear-gradient(145deg,var(--ui-control-pressed,var(--ui-accent,#7ac9ff)),var(--ui-control-raised,#385064))}
.victory-secondary{background:linear-gradient(145deg,var(--ui-control-raised,#385064),var(--ui-control,#162737))}
.victory-actions button:active{transform:translateY(1px);filter:brightness(1.08)}
.victory-actions button:focus-visible{outline:3px solid var(--ui-focus,var(--ui-accent,#7ac9ff));outline-offset:2px}
@keyframes victoryScrimIn{from{opacity:0}to{opacity:1}}
@keyframes victoryCardIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:360px){
 .victory-card{width:min(90%,285px);padding:10px}
 .victory-actions{gap:4px}
 .victory-actions button{font-size:.72rem;padding-inline:3px}
}
@media(prefers-reduced-motion:reduce){.victory-overlay,.victory-card{animation:none!important}}

/* v0.12.97 – three normal victory actions also remain available in two-ball play */
body.multiball-test-mode .victory-actions{grid-template-columns:repeat(3,minmax(0,1fr))}