/* The actual board is also the full-size goal preview. Controls never cover it. */
#start{position:static;transform:none;width:auto;max-width:none;min-height:44px;padding:9px 12px;font-size:15px;box-shadow:none}
.guide-controls{font-size:15px;line-height:1.45}
.guide-buttons{display:flex;gap:8px;margin:5px 0}.guide-buttons button{flex:1;min-height:44px}
#goal-label{font-weight:700;font-size:16px;text-align:center}
#help-copy{padding:10px;background:#fff;border:1px solid var(--kamigo-border);border-radius:10px;line-height:1.6}
#hint-status,#round-goal{font-weight:700;color:var(--kamigo-action);font-size:16px;padding:4px 0;min-height:32px}
.board{position:relative}.board .hint-target{outline:4px solid #087f9c;outline-offset:-4px}
.hint-finger{position:absolute;z-index:5;font-size:36px;line-height:1;pointer-events:none;color:#083f4e;text-shadow:0 1px 3px white;animation:hint-drag 2s infinite;transform:translate(-50%,-50%)}
@keyframes hint-drag{0%,20%{transform:translate(-50%,-50%);opacity:.8}75%,100%{transform:translate(calc(-50% + var(--hint-x)),calc(-50% + var(--hint-y)));opacity:1}}
@media(prefers-reduced-motion:reduce){.hint-finger{animation:none}.board .hint-target{outline-style:dashed}}
main.finished .guide-controls{display:none}

/* Every non-result state uses this one stage. There is no legacy layout fallback. */
main.staged{position:relative;display:grid;max-width:520px;grid-template-rows:28px minmax(0,1fr) 96px;gap:8px;overflow:hidden}
main.staged>.feedback,main.staged>.actions{display:none}
main.staged .stats{grid-row:1;font-size:14px;line-height:28px}
.work-site-nav{position:absolute;z-index:6;top:36px;right:0;display:flex;gap:8px;align-items:center;border-radius:8px;background:#faf5eae8}.work-site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:4px 7px;color:#426d80;font-size:12px;line-height:1.25;text-decoration:underline;text-underline-offset:2px}.work-site-nav a:focus-visible{outline:3px solid #426d80;outline-offset:3px}
/* Ranking links navigate normally, with the same visible action treatment as buttons. */
.work-site-nav .work-ranking-button,.game-result-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--kamigo-action);border-radius:10px;background:var(--kamigo-action);color:#fff;font-size:15px;font-weight:650;line-height:1.25;text-decoration:none;touch-action:manipulation}
.work-site-nav .work-ranking-button:hover,.game-result-actions a:hover,.work-site-nav .work-ranking-button:active,.game-result-actions a:active{background:var(--kamigo-action-pressed);border-color:var(--kamigo-action-pressed)}
.work-site-nav .work-ranking-button:focus-visible,.game-result-actions a:focus-visible{outline:3px solid var(--kamigo-action);outline-offset:3px}
/* Reserve a row so the larger entry cannot cover the board on short screens. */
main.staged:has(>.work-site-nav){grid-template-rows:28px 44px minmax(0,1fr) 96px}
main.staged>.work-site-nav{position:static;grid-row:2;justify-self:end;background:transparent}
main.staged:has(>.work-site-nav) .play-area{grid-row:3}
main.staged:has(>.work-site-nav) .guide-controls{grid-row:4}
main.finished>.work-site-nav{position:static;order:-4;align-self:center;flex-shrink:0;background:transparent}
main.staged .stats>span{width:33.333%;white-space:nowrap;text-align:center}
main.staged .stats>span:first-child{text-align:left}
main.staged .stats>span:last-child{text-align:right}
main.staged .play-area{grid-row:2}
main.staged .board-stage{width:min(100cqw,100cqh,480px)}
main.staged .guide-controls{grid-row:3;height:96px;display:grid;grid-template-rows:44px 44px;gap:8px;overflow:hidden}
main.staged .guide-buttons{grid-row:1;margin:0}
main.staged #goal-label{grid-row:2;display:flex;align-items:center;justify-content:center;height:44px;margin:0}
main.staged #help-copy{position:absolute;z-index:7;inset:0;margin:0;padding:24px;place-content:center;text-align:left;font-size:15px;line-height:1.55;background:#fffffff7;border:1px solid var(--kamigo-border);border-radius:16px}
main.staged #help-copy:not([hidden]){display:grid!important}
main.staged .board-stage:has(#help-copy:not([hidden])) #board{visibility:hidden}
main.staged.loading .guide-controls{visibility:hidden}
main.staged.blocked .guide-controls{visibility:hidden}
main.staged.blocked>.feedback{display:grid;position:absolute;z-index:8;top:36px;right:0;bottom:104px;left:0;place-items:center;padding:24px;border:1px solid var(--kamigo-border);border-radius:16px;background:#fffffff7;text-align:center;font-size:15px;line-height:1.55}
main.staged.blocked>.actions:has(button:not([hidden])){display:flex;position:absolute;z-index:9;right:8px;bottom:8px;left:8px}
main.playing #start,main.playing #how-to,main.playing #goal-label,main.playing #help-copy{display:none!important}
main.playing #hint{min-height:44px;font-size:16px;font-weight:700}
main.playing #hint[hidden]{display:block!important;visibility:hidden;pointer-events:none}
main.playing #hint-status,main.playing #round-goal{grid-row:2;display:flex;align-items:center;justify-content:center;min-height:44px;height:44px;margin:0;padding:4px 8px;text-align:center;line-height:18px;overflow:hidden}
main.playing #hint-status[hidden],main.playing #round-goal[hidden]{display:none}
main.playing:has(#retry:not([hidden]),#resume:not([hidden]))>.feedback{display:block;position:absolute;z-index:8;left:8px;right:8px;bottom:58px;padding:10px;border:1px solid var(--kamigo-border);border-radius:10px;background:#fff;text-align:center}
main.playing:has(#retry:not([hidden]),#resume:not([hidden]))>.actions{display:flex;position:absolute;z-index:9;left:8px;right:8px;bottom:8px}
main.staged:not(.playing):has(#share-work:not([hidden])) .guide-controls{visibility:hidden}
main.staged:not(.playing):has(#share-work:not([hidden]))>.actions{display:flex;position:absolute;z-index:9;left:8px;right:8px;bottom:8px}
@media(max-height:580px){main.staged{grid-template-rows:24px minmax(0,1fr) 84px;gap:4px}.guide-controls,#goal-label,#hint-status,#round-goal{font-size:14px}main.staged .stats{font-size:12px;line-height:24px}main.staged .guide-controls{height:84px;grid-template-rows:40px 40px;gap:4px}main.playing #hint{min-height:40px}main.playing #hint-status,main.playing #round-goal{height:40px;min-height:40px}main.staged #help-copy{padding:16px;font-size:13px}}
@media(max-height:580px){main.staged:has(>.work-site-nav){grid-template-rows:24px 44px minmax(0,1fr) 84px}}