/* Shared harbor UI: readable type, consistent surfaces and a single action color. */
:root{--ui-ink:#203d3b;--ui-muted:#56736a;--ui-paper:#fffdf5;--ui-line:#d4e1d5;--ui-teal:#237d6b;--ui-teal-dark:#16594e;--ui-mint:#e4f3e7;--ui-night:#16383e;--ui-radius:18px;--ui-control:12px;--ui-shadow:0 12px 32px #072d3926}
button,input,select{font-family:inherit}
button{transition:background-color .15s,border-color .15s,box-shadow .15s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e6b958;outline-offset:4px}
button:disabled{cursor:not-allowed}
header nav{gap:6px;background:#102c32;border:1px solid #47666355;border-radius:var(--ui-control);padding:4px}
header .nav{border:0;border-radius:9px;padding:10px 16px;color:#b8d0c9;font-weight:650}
header .nav.active{background:#e2f1df;color:var(--ui-ink);box-shadow:0 2px 5px #0002}
header .nav:hover:not(.active){background:#24484a;color:#fffdf5}
.toolbar-actions button,.journal-tabs button,.academy-tabs button{border-radius:var(--ui-control);font-weight:650}
.toolbar-actions button{min-height:36px;padding:7px 12px;border-color:#78988b55}
:is(.study-card,.review-dialog,.menu-dialog,.catalog-card,.unit-card,.analytics-card,.streak-panel){border-radius:var(--ui-radius)}
:is(.study-card,.review-dialog,.menu-dialog,.catalog-card,.unit-card) .primary,
button.primary{border-radius:var(--ui-control);font-weight:750;border:1px solid var(--ui-teal-dark);background:var(--ui-teal);color:#fffdf5;box-shadow:0 3px 0 var(--ui-teal-dark);min-height:46px;letter-spacing:0}
button.primary:hover:not(:disabled){background:#1c6d5c}
button.primary:active:not(:disabled){box-shadow:0 1px 0 var(--ui-teal-dark)}
button.primary:disabled{box-shadow:none;opacity:.55}
.study-card{background:var(--ui-paper);color:var(--ui-ink);border:1px solid var(--ui-line);padding:clamp(18px,2.2vw,30px);gap:16px;box-shadow:var(--ui-shadow)}
.study-card-meta{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ui-muted)}
.study-card .study-context{line-height:1.7;color:var(--ui-muted)}
.study-card .study-choice,.study-card .sentence-token{border:1px solid var(--ui-line);border-radius:var(--ui-control);background:#fffdf8;box-shadow:0 2px 0 #d9e3d9;color:var(--ui-ink)}
.study-card .study-choice{padding:14px 18px;min-height:54px;line-height:1.5}
.study-card .study-choice:hover:not(:disabled),.study-card .sentence-token:hover:not(:disabled){background:var(--ui-mint);border-color:#6caf95}
.study-card .study-input{border:1px solid #9abfaf;border-bottom:3px solid var(--ui-teal);border-radius:10px;background:#edf7ec;color:var(--ui-ink)}
.study-card .study-actions{gap:12px;align-items:center}
.study-card .study-audio{border:1px solid #b6d0bd;border-radius:var(--ui-control);background:#edf5e9;color:var(--ui-teal-dark);min-height:42px}
.study-card .study-feedback.success{background:var(--ui-mint);color:var(--ui-ink);border-radius:14px;border:1px solid #c9e1cf}
.study-card .study-feedback.incorrect{background:#fff0da;color:#745023;border-radius:12px;border:1px solid #ecd0a5;padding:14px 16px}
.journal-tabs,.academy-tabs{gap:6px}
:is(.journal-tabs,.academy-tabs) button[aria-selected=true]{background:#e2f1df;color:var(--ui-ink)}
:is(.catalog-card,.analytics-card,.streak-panel){border-color:#81a79855;box-shadow:0 4px 14px #051f2914}
/* One compact reel card. Pixel artwork remains visible behind and beside it. */
body[data-stage=fight] #fishMeters,body:has(#sceneActions[data-action=fight]:not(.hidden)) #fishMeters{display:none!important}
#sceneActions[data-action=fight]{position:absolute;left:24px;top:auto;bottom:30px;transform:none;width:min(360px,calc(100% - 48px));max-width:none;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--ui-paper);border:1px solid #d1e3d2;border-radius:24px;box-shadow:0 16px 48px #082e3a38;color:var(--ui-ink);text-align:left;pointer-events:auto;z-index:5}
#sceneActions[data-action=fight].hidden{display:none}
#sceneActions[data-action=fight] .action-coach{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;max-width:none;border:0;background:none;box-shadow:none;color:var(--ui-ink);text-align:left}
#sceneActions[data-action=fight] #sceneActionSteps{order:-1;display:block;font-size:10px;font-weight:750;letter-spacing:.08em;line-height:1.5;color:var(--ui-muted);margin:0}
#sceneActions[data-action=fight] #sceneActionTitle{display:block;font-size:21px;line-height:1.35;color:var(--ui-ink);letter-spacing:-.035em;margin:0}
#sceneActions[data-action=fight] #sceneActionHint{font-size:13px;line-height:1.65;color:var(--ui-muted);min-height:44px;margin:0}
#sceneActions[data-action=fight] .action-meter,#sceneActions[data-action=fight] #cookGestureTargets{display:none}
.reel-progress-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;margin:0 0 8px;color:var(--ui-muted)}
.reel-progress-label b{color:var(--ui-teal);font-variant-numeric:tabular-nums}
#reelCatchProgress{display:block;width:100%;height:10px;border:0;border-radius:10px;overflow:hidden;background:#e2eadf;accent-color:var(--ui-teal)}
#reelCatchProgress::-webkit-progress-bar{background:#e2eadf;border-radius:10px}
#reelCatchProgress::-webkit-progress-value{background:var(--ui-teal);border-radius:10px;transition:width .1s linear}
#sceneActions[data-action=fight] #sceneActionTarget{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;min-height:56px;padding:12px 18px;border:1px solid var(--ui-teal-dark);border-radius:14px;background:var(--ui-teal);color:#fffdf5;font-size:16px!important;font-weight:750;box-shadow:0 4px 0 var(--ui-teal-dark);text-shadow:none;animation:none;transform:none;touch-action:manipulation}
#sceneActions[data-action=fight] #sceneActionTarget::before{content:'↻';font:600 24px/1 sans-serif}
#sceneActions[data-action=fight][data-reel-state=pull] #sceneActionTarget::before{animation:reel-turn .65s linear infinite}
#sceneActions[data-action=fight][data-reel-state=rest] #sceneActionTarget{background:#f9eacb;border-color:#e4d2a7;color:#73572d;box-shadow:0 3px 0 #decea9;cursor:default}
#sceneActions[data-action=fight][data-reel-state=rest] #sceneActionTarget::before{content:'Ⅱ';font-size:19px}
#sceneActions[data-action=fight] #sceneActionKeys{display:block;margin:0;padding:0;background:none;color:#60796f;font-size:10px;text-align:center;line-height:1.5;font-weight:500;max-width:none}
@keyframes reel-turn{to{rotate:360deg}}
@media(max-width:720px){header .nav{padding:8px 10px}#sceneActions[data-action=fight]{left:12px;bottom:14px;width:min(310px,calc(100% - 24px));padding:18px;gap:12px}#sceneActions[data-action=fight] #sceneActionTitle{font-size:19px}.study-card{padding:18px}}
@media(prefers-reduced-motion:reduce){button,#reelCatchProgress::-webkit-progress-value{transition:none}#sceneActions[data-action=fight] #sceneActionTarget::before{animation:none!important}}
/* A predictable two-row toolbar prevents long English labels covering the scene. */
.play-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px;border-radius:16px}
.play-toolbar .journey{min-width:0;display:flex;flex-wrap:nowrap;gap:10px}
.play-toolbar .journey>span:not(.player-level),.play-toolbar .journey>i{flex-shrink:0}
.play-toolbar .player-level{min-width:112px;padding:5px 9px!important;border-width:1px}
.play-toolbar .player-level span{font-size:14px;white-space:nowrap}
.play-toolbar .player-level small{font-size:9px}
.play-toolbar .study-level-badge{font-size:11px;padding:9px;white-space:normal;line-height:1.4}
.play-toolbar .stats{margin:0;justify-self:end}
.play-toolbar .toolbar-actions{grid-column:1/-1;display:flex;width:100%;gap:5px;margin:0;overflow-x:auto;padding:0 0 3px}
.play-toolbar .toolbar-actions button{flex:1 0 auto;min-height:32px;padding:6px 9px;font-size:10px}
@media(max-width:720px){.play-toolbar{border-radius:0;padding:8px;gap:7px}.play-toolbar .journey{gap:6px;flex-wrap:wrap}.play-toolbar .journey>span:not(.player-level){font-size:10px}.play-toolbar .player-level{min-width:98px}.play-toolbar .player-level span{font-size:12px}.play-toolbar .stats{font-size:10px}.play-toolbar .toolbar-actions button{flex:0 0 auto;min-height:36px}}
#sceneActions[data-action=fight][data-reel-state=rest]{background:var(--ui-paper);border-color:#e4d2a7}
#sceneActions[data-action=fight] #reelCancel{align-self:center;border:0;background:none;box-shadow:none;padding:4px 10px;min-height:28px;color:var(--ui-muted);font-size:11px;text-decoration:underline;text-underline-offset:3px}
body:has(#sceneActions[data-action=fight]:not(.hidden))[data-phase=fish] .side{display:none!important}
:is(#settingsDialog,.academy-dialog,.review-dialog,.menu-dialog,.utility-dialog){border-radius:20px;border-color:#81a79888;box-shadow:0 24px 72px #051f2955}
.settings-section h3{font-size:17px;font-weight:750;letter-spacing:-.02em}
.topic-cards button{border-radius:14px;border-color:#81a79855;line-height:1.5}
.topic-cards button[aria-pressed=true],.academy-tabs button[aria-pressed=true]{background:#e2f1df;color:var(--ui-ink);border-color:#b7d1b2}
.topic-cards button[aria-pressed=true] :is(b,small,em){color:var(--ui-ink)}