/* Hint and reward controls share the active palette and global font scale. */
:root{--action-label-size:calc(16px * var(--font-scale,1))}
.success-actions .secondary{font-size:var(--action-label-size)}
.game-controls{--control-label-size:calc(13.6px * var(--font-scale,1));--control-icon-size:calc(22px * var(--font-scale,1));--control-slot-width:calc(4 * var(--control-label-size) + var(--control-icon-size) + 24px);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:26px;margin:0;flex:none}
/* Move icon and label independently, keeping the combined center in its slot. */
.game-controls .game-control{position:relative;width:var(--control-slot-width);min-width:0;height:44px;padding:0;flex:none;font-size:var(--control-icon-size);line-height:1;letter-spacing:0;white-space:nowrap;color:var(--ink)}
.game-control-content{position:absolute;inset:0;pointer-events:none}
.game-control-icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--control-icon-size);height:var(--control-icon-size);font-size:var(--control-icon-size);background:var(--bg);z-index:1;transform:translate(-50%,-50%) translate(var(--control-icon-shift,0px),var(--control-icon-y,0px));transition:transform .48s cubic-bezier(.22,.61,.36,1)}
.control-symbol{display:grid;place-items:center;line-height:1;transform-origin:center}
.game-control-label{position:absolute;left:50%;top:50%;display:block;width:calc(var(--control-label-chars) * 1em);font-size:var(--control-label-size);line-height:1.4;opacity:var(--control-label-opacity,0);transform:translate(-50%,-50%) translate(var(--control-label-shift,0px),var(--control-label-y,0px));transition:opacity .28s ease var(--control-label-delay,0ms),transform .48s cubic-bezier(.22,.61,.36,1);pointer-events:var(--control-label-events,none)}
.game-control:enabled:focus-visible{--control-icon-shift:var(--control-icon-hover-shift,calc((var(--control-label-chars) * var(--control-label-size) + 8px) / -2));--control-label-shift:var(--control-label-hover-shift,calc((var(--control-icon-size) + 8px) / 2));--control-icon-y:var(--control-icon-hover-y,0px);--control-label-y:var(--control-label-hover-y,0px);--control-label-opacity:1;--control-label-delay:70ms;--control-label-events:auto}
.game-control:enabled:focus-visible .control-symbol{animation:var(--control-icon-animation) .65s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){
 .game-control:enabled:hover{--control-icon-shift:var(--control-icon-hover-shift,calc((var(--control-label-chars) * var(--control-label-size) + 8px) / -2));--control-label-shift:var(--control-label-hover-shift,calc((var(--control-icon-size) + 8px) / 2));--control-icon-y:var(--control-icon-hover-y,0px);--control-label-y:var(--control-label-hover-y,0px);--control-label-opacity:1;--control-label-delay:70ms;--control-label-events:auto}
 .game-control:enabled:hover .control-symbol{animation:var(--control-icon-animation) .65s cubic-bezier(.22,.61,.36,1)}
}
.game-control[data-action="reset"]{--control-icon-animation:control-reset}
.game-control[data-action="styles"]{--control-icon-animation:control-style}
@keyframes control-bulb{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}40%{transform:scale(1.1);filter:drop-shadow(0 0 3px color-mix(in srgb,currentColor 25%,transparent))}}
@keyframes control-reset{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes control-style{0%,100%{transform:rotate(0)}40%{transform:rotate(16deg)}75%{transform:rotate(-4deg)}}
.settings-button{display:inline-flex;align-items:center;justify-content:center}
.settings-icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.settings-icon .settings-center{fill:currentColor;stroke:none}
.game-controls .hint-button{--control-icon-animation:control-bulb;font-size:var(--control-label-size);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .85s ease,transform .85s cubic-bezier(.22,.61,.36,1),visibility .85s}
.game-controls .hint-button.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.game-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex:none}
.game-control .style-icon-center{fill:currentColor;stroke:none}
.game-controls .hint-button:disabled{cursor:default;opacity:.55}
.hint-button.hint-blink{animation:hint-attention 2s ease-in-out}
@keyframes hint-attention{0%,40%,41%,85%,100%{opacity:1}20%,63%{opacity:.25}}
.level-reward{display:inline-flex;align-items:center;justify-content:flex-end;gap:.3em;flex:none;font-size:.85em;line-height:1.4;white-space:nowrap;color:var(--ink)}
.level-reward.is-replay{opacity:.45}
.level-reward svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.level-reward .reward-icon{fill:currentColor;stroke:none;width:1em;height:1em}
.level-heading-row .level-lock{display:flex;align-items:center;justify-content:center;width:40px;flex:0 0 40px;margin-left:0}
.level-heading-row .favorite-star{flex:0 0 40px}
.confirm-skip{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin:12px 0 20px;font-size:.8em;line-height:1.5;opacity:.65;cursor:pointer}
.modal>.confirm-skip{flex:0 0 100%;margin:0 0 6px}
.confirm-skip input{width:1em;height:1em;margin:0;padding:0;accent-color:var(--ink);cursor:pointer}
.hint-confirm-price{display:inline-flex;gap:.15em;white-space:nowrap}
.hint-confirm{display:flex;flex-direction:column;align-items:center;width:100%;gap:14px;text-align:center}
.hint-confirm>p{margin:0;line-height:1.6}
.hint-confirm .confirm-skip{margin:0 0 6px}
.free-hint-note{font-size:.85em;opacity:.65}
.modal .plaza-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap}
/* Smaller slots retain room for a horizontal reveal between neighboring icons. */
@media(max-width:800px){
 .game-controls{--control-slot-width:calc(2 * var(--control-label-size) + 30px)}
}
@media(max-width:650px){
 :root{--action-label-size:calc(12px * var(--font-scale,1))}
 header .tools{gap:4px}
 .game-header{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:8px}
 .game-header>.settings-button,.game-header>.passage-header-left{justify-self:start}
 .game-header>.tools{justify-self:end}
 .game-header .game-controls{position:relative;left:auto;top:auto;transform:none;justify-self:center;--control-icon-hover-shift:0px;--control-label-hover-shift:0px;--control-icon-hover-y:calc((1.4 * var(--control-label-size) + 6px) / -2);--control-label-hover-y:calc((var(--control-icon-size) + 6px) / 2)}
 header .icon:not(.hint-button):not(.game-control){min-width:30px;padding:5px}.level-heading-row{gap:8px}.level-reward{gap:.2em}.level-heading-row .favorite-star,.level-heading-row .level-lock{width:34px;flex-basis:34px;min-width:34px;padding:5px}.currency{letter-spacing:1px}
}
/* Compact phone slots retain enough horizontal room for the vertical caption. */
@media(max-width:480px){
 .game-controls{--control-slot-width:40px;gap:12px}
 .passage-header-left{gap:2px}
 .passage-header-left .icon{width:30px;min-width:30px;padding:4px}
 .passage-header-left .settings-icon{width:22px;height:22px}
 .game-header .game-controls{--control-slot-width:30px;gap:8px}
}
@media(max-width:380px){header{padding:0 10px}header .tools{gap:3px}.game-header{column-gap:4px}header .icon:not(.hint-button):not(.game-control){padding:4px}}
.styles .structure-choices{height:calc(var(--option-height)*2 + var(--option-gap) + 12px)}
@media(prefers-reduced-motion:reduce){.game-controls .hint-button,.game-control-icon,.game-control-label{transition:none}.game-controls .control-symbol{animation:none!important}.hint-button.hint-blink{animation:none}}