/* Keep the title and menu in normal flow, including phones with browser bars. */
#title {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(14px, 3cqh, 30px); overflow-y: auto; touch-action: pan-y;
  padding: calc(var(--sat) + 20px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
}
#title .logo {
  position: relative; inset: auto; transform: none; width: 100%; z-index: 1;
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 0;
}
#title h1 { font-size: clamp(42px, min(13cqw, 14cqh), 100px); }
#title .sub { align-self: center; margin-top: 14px; }
#title .kick { align-self: center; }
#title .title-menu { position: relative; z-index: 1; flex: 0 0 auto; width: min(100%, 360px); min-width: 0; }
#title nav { gap: 7px; }
#title nav .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
#title .best { font-size: 12px; margin-top: 9px; }
body[data-art-style="painted"] {
  --ink: #fff4d8; --muted: #cedcc2; --deep: #163e38; --deep2: #29584a;
  --glass: rgba(20, 52, 44, .94); --line: rgba(241, 230, 193, .3);
  --red: #b45038; --brass: #f4d280;
}
/* The picture is of Loon Lake. At another place the live lake shows behind the title, as in the Original style. */
body[data-art-style="painted"][data-place="loon"] #title {
  background: linear-gradient(rgba(15, 43, 39, .10), transparent 38%, rgba(13, 38, 31, .60)), url("./art/film-lake.webp") center 50% / cover;
}
body[data-art-style="painted"] #title h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.045em; text-shadow: 0 2px 1px #426b50, 0 5px 16px rgba(15, 36, 29, .45); }
body[data-art-style="painted"] #title .sub, body[data-art-style="painted"] #title .kick { background: rgba(22, 55, 45, .88); color: #fff0c6; }
body[data-art-style="painted"] #title .btn { background: rgba(27, 67, 53, .96); border-color: #b0bb8c; }
body[data-art-style="painted"] #title .btn.go { background: #b45038; border-color: #f1bb89; box-shadow: 0 4px 0 #643527; }
body[data-art-style="painted"] .card { background: rgba(20, 49, 40, .96); }
body[data-art-style="painted"] #title .best { color: #fff5db; }
/* Small paper labels sit quietly over the moving illustration. */
body[data-art-style="painted"] #hud .chip,
body[data-art-style="painted"] #hud .icon { background: #f4ecd6; color: #33574d; border-color: #d1c8a8; box-shadow: 0 2px 0 #334e382b; }
body[data-art-style="painted"] #hud .chip b { color: #8c5935; }
body[data-art-style="painted"] #pullStrength { background: #f4ecd6; color: #33574d; border: 1px solid #d1c8a8; }
body[data-art-style="painted"] #pullStrength b { background: #33574d25; }
body[data-art-style="painted"] #pullStrength i { background: #65966c; }
@container (max-height: 740px) {
  #title { gap: 12px; }
  #title .logo { padding: 0; }
  #title .sub { font-size: 11px; margin-top: 9px; }
  #title nav .btn { padding-top: 8px; padding-bottom: 8px; }
  #title .best { font-size: 11px; }
}
@container (orientation: landscape) and (max-height: 600px) {
  #title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 360px); align-items: center; gap: 20px; padding-top: calc(var(--sat) + 12px); padding-bottom: calc(var(--sab) + 12px); overflow: hidden; }
  #title .logo { position: relative; inset: auto; width: 100%; transform: none; }
  #title .title-menu { width: 100%; max-height: 100%; overflow-y: auto; touch-action: pan-y; padding: 4px; }
  #title h1 { font-size: clamp(40px, 15cqh, 80px); }
  #title nav { gap: 5px; }
}
@container (orientation: portrait) and (max-height: 650px) {
  #title { padding-top: calc(var(--sat) + 12px); gap: 12px; }
  #title h1 span { display: inline; }
  #title h1 span + span::before { content: " "; }
  #title .kick { letter-spacing: .2em; font-size: 10px; padding-left: calc(12px + .2em); }
}

/* On-rod cues share the painted palette and leave the water visible. */
#rodCue { position: absolute; width: 96px; height: 96px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; color: #fff3c9; filter: drop-shadow(0 2px 2px #163d3f88); }
#rodCue svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#rodCue .rod-ring { position: absolute; inset: 0; width: 96px; height: 96px; }
.rod-halo { stroke-width: 2; stroke-dasharray: 5 7; opacity: .7; }
.rod-tension { transform: rotate(-90deg); transform-origin: center; stroke: #e8b64a; stroke-width: 5; stroke-dasharray: 0 100; }
#rodCue .rod-action { position: absolute; width: 36px; height: 36px; right: 90px; top: 30px; stroke-width: 3; }
#rodCue span { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; padding: 5px 10px; border: 1px solid #e8dbaf; border-radius: 999px; color: #315349; background: #fff4dc; font-size: 12px; line-height: 1.25; text-align: center; }
#rodCue[data-tone="hot"] { color: #ffe1a4; }
#rodCue[data-tone="hot"] span { background: #a54332; color: #fff3dc; border-color: #ffd5ac; }
#rodCue[data-tone="hot"] .rod-tension { stroke: #ff8b62; }
#rodCue[data-held="true"] .rod-halo { stroke-dasharray: none; opacity: 1; }
#rodCue[data-cue="hold"] .rod-halo, #rodCue[data-cue="nibble"] .rod-halo { animation: rod-pulse 1.6s ease-in-out infinite; }
#rodCue:is([data-cue="back"], [data-cue="low"]) .rod-action { animation: rod-down 1.2s ease-in-out infinite; }
#rodCue:is([data-cue="cast"], [data-cue="hook"], [data-cue="land"], [data-cue="pump"]) .rod-action { animation: rod-up .9s ease-in-out infinite; }
#crankBox[data-cue="reel"]::after { content: ""; position: absolute; inset: 8%; border: 2px dashed #fff1bf; border-radius: 50%; pointer-events: none; animation: rod-turn 4s linear infinite; }
@keyframes rod-pulse { 50% { opacity: .25; } }
@keyframes rod-up { 50% { transform: translateY(-10px); } }
@keyframes rod-down { 50% { transform: translateY(10px); } }
@keyframes rod-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #rodCue *, #crankBox::after { animation: none !important; } }

/* The urgent prompt: the words sit on a darker red, so they read at 4.5:1 or more (the bright red stays for strokes) */
#prompt.hot .p1 { background: #b8352b; }
body[data-art-style="painted"] #prompt.hot .p1 { background: #a54332; }
/* the painted main button keeps its own red (white on it reads at 5:1) */
body[data-art-style="painted"] .btn.go { background: #b45038; }

/* Calm effects (Settings, html data-calm="1") and the system's reduced motion: no flashes, pops, pulses, slides or spins.
   The sounds, the buzz and the words stay. (main.js and the feedback code skip their own effects with calm.js) */
html[data-calm="1"] #flash { visibility: hidden; animation: none; }
html[data-calm="1"] #report.show, html[data-calm="1"] #reelUI > *, html[data-calm="1"] #travel .wheel { animation: none; }
html[data-calm="1"] #prompt.hot .p1, html[data-calm="1"] #prompt.hot .p1::before, html[data-calm="1"] #prompt.hot .p1::after { animation: none; }
html[data-calm="1"] #catch .card { transition: opacity .35s; }
html[data-calm="1"] #catch.wait .card { transform: none; }
html[data-calm="1"] #rodCue *, html[data-calm="1"] #crankBox::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #flash { visibility: hidden; animation: none; }
  #report.show, #reelUI > *, #travel .wheel { animation: none; }
  #prompt.hot .p1, #prompt.hot .p1::before, #prompt.hot .p1::after { animation: none; }
  #catch .card { transition: opacity .35s; }
  #catch.wait .card { transform: none; }
}

/* Larger text (Settings): #game[data-text="large"] sets --ui-scale, and the words in play and on the cards grow with it.
   main.js grows the gauge's words as well. Every screen still fits a 360 x 640 phone: the lists scroll in their cards */
#game { --ui-scale: 1; }
#game[data-text="large"] { --ui-scale: 1.25; --gauge-w: min(52vmin, 270px); --gauge-h: min(34vmin, 170px); }
#game[data-text="large"] #prompt .p1 { font-size: calc(clamp(16px, 4.6vmin, 22px) * var(--ui-scale)); }
#game[data-text="large"] #prompt .p2 { font-size: calc(14px * var(--ui-scale)); }
#game[data-text="large"] #toast { font-size: calc(14px * var(--ui-scale)); }
#game[data-text="large"] .chip { font-size: calc(13px * var(--ui-scale)); padding-left: 9px; padding-right: 9px; }
#game[data-text="large"] #report .verdict { font-size: calc(15px * var(--ui-scale)); }
#game[data-text="large"] #report .zone { font-size: calc(13px * var(--ui-scale)); }
#game[data-text="large"] #rodCue span { font-size: calc(12px * var(--ui-scale)); max-width: 170px; }
#game[data-text="large"] #pullStrength { font-size: calc(12px * var(--ui-scale)); }
#game[data-text="large"] #dragBar { font-size: calc(11px * var(--ui-scale)); width: 120px; }
#game[data-text="large"] #fishGuide .guide-caption { font-size: calc(12px * var(--ui-scale)); }
#game[data-text="large"] .card p, #game[data-text="large"] .set label, #game[data-text="large"] .steps li { font-size: calc(16px * var(--ui-scale)); }
#game[data-text="large"] .set label small, #game[data-text="large"] .jfish, #game[data-text="large"] .jfish.none small,
#game[data-text="large"] .pcard p, #game[data-text="large"] .pcard .facts, #game[data-text="large"] .pcard .goals { font-size: calc(13px * var(--ui-scale)); }
#game[data-text="large"] .jfish b { font-size: calc(14px * var(--ui-scale)); }
#game[data-text="large"] .card h2 { font-size: calc(26px * var(--ui-scale)); }
#game[data-text="large"] #catch h2 { font-size: calc(28px * var(--ui-scale)); }
#game[data-text="large"] #catch p, #game[data-text="large"] #catch .sizeline, #game[data-text="large"] #rlist li,
#game[data-text="large"] #results .rnext { font-size: calc(14px * var(--ui-scale)); }
#game[data-text="large"] .btn { font-size: calc(16px * var(--ui-scale)); }
#game[data-text="large"] .kicker, #game[data-text="large"] .badge { font-size: calc(12px * var(--ui-scale)); }
#game[data-text="large"] #title .best { font-size: calc(12px * var(--ui-scale)); }
#game[data-text="large"] .tabs.chips button { font-size: calc(13px * var(--ui-scale)); }
#game[data-text="large"] .warn { font-size: calc(16px * var(--ui-scale)); }