/* Ontario Swim Game v0.7 - Style A (flat modern vector): bright pool-blue menus, white cards, chunky yellow buttons. Phones in portrait; iPads/tablets in portrait or landscape (centred column). */
* { box-sizing: border-box; }
:root { --navy: #0f2a44; --pool: #1592cf; --pool2: #0f7bb5; --yellow: #ffd166; --yellow-edge: #d9a42f; --green: #06d6a0; --red: #e63946; --ink: #16324f; }
html, body { margin: 0; height: 100%; background: var(--pool2); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; }
input[readonly] { -webkit-user-select: text; user-select: text; } /* v0.7.1: the only input left is the read-only challenge link */
#app { height: 100%; max-width: 430px; margin: 0 auto; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60px 40px at 20% 15%, rgba(255,255,255,0.10), transparent 70%),
              radial-gradient(ellipse 80px 50px at 75% 35%, rgba(255,255,255,0.08), transparent 70%),
              radial-gradient(ellipse 70px 45px at 30% 70%, rgba(255,255,255,0.08), transparent 70%),
              linear-gradient(180deg, #27b3e8 0%, var(--pool) 45%, var(--pool2) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen { display: none; height: 100%; overflow-y: auto; padding: 12px 14px 0; -webkit-overflow-scrolling: touch; }
.screen.active { display: block; }
h1 { font-size: clamp(30px, 9vw, 44px); margin: 6px 0 2px; color: #fff; font-weight: 900; letter-spacing: 0.3px; text-shadow: 0 3px 0 rgba(15,42,68,0.45); line-height: 1.05; }
h2 { margin: 8px 0 12px; color: #fff; font-weight: 900; text-shadow: 0 2px 0 rgba(15,42,68,0.45); }
h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.hero { text-align: center; padding: 10px 0 4px; }
.logo-badge { width: 72px; height: 72px; margin: 4px auto 6px; border-radius: 22px; background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-edge); font-size: 40px; line-height: 72px; }
.sub { margin: 0 0 8px; color: #e6f7ff; font-weight: 600; }
.card { background: #fff; color: var(--ink); border-radius: 20px; padding: 14px; margin: 10px 0; box-shadow: 0 4px 0 rgba(15,42,68,0.18); position: relative; }
.card.hint { background: #fff8e1; }
.fine { font-size: 12px; opacity: 0.8; }
.screen > .fine, .screen > p.tip { color: #fff; }
.center { text-align: center; }
.tip { font-style: italic; font-weight: 600; }
.quip { font-size: 18px; color: #fff; font-weight: 700; }
.warn { color: #ffe08a; font-weight: 700; }
.hidden { display: none !important; }
button { touch-action: manipulation; font: inherit; font-weight: 700; color: var(--navy); background: #fff; border: 0; border-radius: 16px;
  padding: 10px 14px; min-height: 48px; cursor: pointer; box-shadow: 0 4px 0 rgba(15,42,68,0.25); transition: transform 0.05s; }
.card button:not(.big):not(.swatch):not(.x) { background: #eef7fc; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(15,42,68,0.25); }
button.big { background: var(--yellow); color: var(--navy); font-weight: 900; font-size: 17px; box-shadow: 0 5px 0 var(--yellow-edge); }
button.big:active { box-shadow: 0 2px 0 var(--yellow-edge); }
button.season { background: #ff9f1c; box-shadow: 0 5px 0 #c66f00; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
button.small { min-height: 40px; padding: 4px 10px; font-size: 13px; }
button.x { position: absolute; top: 8px; right: 8px; min-height: 36px; width: 36px; padding: 0; background: transparent; box-shadow: none; opacity: 0.6; }
.settings { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
button.pill { border-radius: 999px; min-height: 44px; padding: 6px 14px; font-size: 14px; background: rgba(255,255,255,0.92); }
.btnrow { display: flex; gap: 10px; justify-content: space-between; margin-top: 10px; }
.btnrow.col { flex-direction: column; }
.btnrow.wrap { flex-wrap: wrap; }
.btnrow.wrap button { flex: 1 1 30%; }
label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.label { font-size: 13px; font-weight: 700; opacity: 0.75; margin: 10px 0 5px; }
input { width: 100%; font-size: 16px; padding: 12px; border-radius: 12px; border: 2px solid #cfe6f3; margin-top: 4px; color: var(--ink); }
.create { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.create canvas { background: #2bb0e6; border-radius: 18px; width: 150px; height: 150px; align-self: center; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.5); }
.create .fields { flex: 1 1 200px; min-width: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 46px; height: 46px; min-height: 46px; border-radius: 50%; padding: 0; border: 3px solid #fff; box-shadow: 0 0 0 2px #cfe6f3, 0 3px 0 rgba(15,42,68,0.2); position: relative; }
.swatch.sel { box-shadow: 0 0 0 4px var(--yellow), 0 3px 0 rgba(15,42,68,0.2); }
.swatch.locked { opacity: 0.45; }
.swatch.locked::after { content: "🔒"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list button { text-align: left; display: flex; align-items: center; gap: 10px; }
.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.list small { opacity: 0.7; margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 48px; padding: 8px 12px; font-size: 15px; }
.chips button.sel, .list button.sel, .card .chips button.sel, .card .list button.sel { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-edge); }
.chips.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.chips.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.list button { min-height: 56px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 6px 4px; text-align: left; border-bottom: 1px solid #e3eef5; }
tr.me { background: #fff1c7; font-weight: 800; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pbrow { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; }
.big-num { font-size: 26px; font-weight: 900; color: var(--navy); }
.g { color: #04a87d; font-weight: 800; }

/* tutorial */
.tut canvas { width: 100%; height: 170px; display: block; border-radius: 14px; background: #2bb0e6; }
.steps { padding-left: 22px; margin: 10px 0 0; line-height: 1.45; }
.pad { height: 120px; border-radius: 16px; border: 3px dashed #9fd3ee; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #4b86a8; touch-action: none; background: #f2fbff; }
.pad.hit { background: #d9fbef; border-color: var(--green); color: #04a87d; }

/* season */
.season-card canvas { width: 100%; height: 190px; display: block; border-radius: 14px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.tier { font-weight: 900; font-size: 16px; }
.bar { flex: 1; max-width: 220px; height: 12px; background: rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; }
.bar.light { background: #e3eef5; max-width: none; margin: 4px 0; }
.bar > div { height: 100%; width: 0; background: var(--green); border-radius: 999px; }
.week { display: flex; gap: 12px; align-items: flex-start; }
.week .num { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 18px; line-height: 1; }
.week .num small { font-size: 9px; font-weight: 700; opacity: 0.8; }
.week.locked { opacity: 0.6; }
.week .body { flex: 1; min-width: 0; }
.week .tag { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: #e3eef5; margin-right: 4px; }
.week .tag.new { background: var(--yellow); }
.week .tag.done { background: #c9f5e6; color: #047a5a; }
.week .tag.arch { background: #ead9ff; color: #5b2a99; }
.week .btnrow { justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
.week .btnrow button { min-height: 40px; font-size: 14px; }
.reward { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.reward i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px #9bb; }
.story p { line-height: 1.5; margin: 0 0 10px; }
.story .goal { font-weight: 800; background: #fff1c7; border-radius: 12px; padding: 10px; }
.dyk { background: #eaf7ff; }
.dyk h3::before { content: "💡 Did you know? "; color: #0f7bb5; }
.dyk .src { font-size: 12px; opacity: 0.8; }
.dyk a, .sources a { color: #0f6fa8; }
.sources { padding-left: 20px; font-size: 13px; line-height: 1.4; }
.sources li { margin-bottom: 6px; }
.season-line { font-weight: 700; }

/* race */
.screen.race.active { display: flex; flex-direction: column; padding: 6px; overflow: hidden; touch-action: none; background: var(--navy); color: #f4f8fb; }
#hud { flex: none; font-size: 14px; }
.hudrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#hud-event { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
#hud-clock { background: #fff; color: var(--navy); border-radius: 999px; padding: 2px 14px; font-size: 20px; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,0.25); font-variant-numeric: tabular-nums; }
#hud-stamina { height: 100%; width: 100%; background: var(--green); transition: width 0.1s; border-radius: 999px; }
#hud-feedback { min-width: 80px; text-align: right; font-weight: 800; }
.race .label { opacity: 0.85; margin: 0; }
#canvas-wrap { position: relative; flex: 1; min-height: 0; touch-action: none; }
#pool { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#pool canvas { display: block; touch-action: none; }
#announcer { white-space: pre-line; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 92%;
  text-align: center; font-size: clamp(18px, 5vw, 28px); font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(15,42,68,0.8), 0 3px 10px rgba(0,0,0,0.5); pointer-events: none; }
#touch-controls { display: flex; flex: none; gap: 8px; padding: 8px 0 4px; touch-action: none; }
body.swipe-mode #tc-left, body.swipe-mode #tc-right { display: none; }
body.swipe-mode .tc.action { min-height: 72px; }
.tc { flex: 1; min-height: 88px; font-size: 18px; font-weight: 900; border-radius: 999px; touch-action: none; background: #e9f5fb; -webkit-touch-callout: none; box-shadow: 0 4px 0 rgba(0,0,0,0.3); }
.tc.action { flex: 1.2; background: var(--yellow); font-size: 24px; letter-spacing: 1px; box-shadow: 0 5px 0 var(--yellow-edge); }
.tc.pressed { background: var(--green); transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
#key-help { flex: none; margin: 4px 0 0; text-align: center; color: #fff; }
@media (orientation: landscape) and (max-height: 500px) { .tc { min-height: 64px; } #key-help { display: none; } }

#event-preview { display: block; width: 100%; height: 110px; border-radius: 14px; margin: 8px 0 2px; }
#screen-results { position: relative; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#rotate-notice { display: none; position: fixed; inset: 0; z-index: 50; background: var(--pool2); color: #fff; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 800; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { #rotate-notice { display: flex; } }
button.wide { width: 100%; margin: 0 0 6px; }
/* Desktop with a mouse: the game sits in a phone-shaped frame. */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) {
  body { background: #073a57; }
  #app { box-shadow: 0 0 0 10px #111a22, 0 10px 40px rgba(0,0,0,0.6); border-radius: 28px; height: calc(100% - 24px); margin-top: 12px; }
}
/* v0.7 iPad and other tablets (touch, 600 px+ wide): no fake phone frame. The game is one centred column, wider than on a
   phone but never stretched: in landscape it stays portrait-shaped (at most 0.78 x the screen height), so the pool keeps
   its proportions. The sides show calm pool water. Touch targets grow a little. */
@media (min-width: 600px) and (min-height: 501px) and (pointer: coarse), (min-width: 600px) and (min-height: 501px) and (hover: none) {
  html, body { background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,255,255,0.10), transparent 70%), linear-gradient(180deg, #1a8fc6 0%, #0b5f8f 100%); }
  #app { max-width: min(640px, 100vw); box-shadow: 0 0 40px rgba(0,0,0,0.25); }
  .screen { padding: 16px 22px 0; }
  .screen > .btnrow:last-child { margin: 6px -22px 0; padding: 10px 22px calc(14px + env(safe-area-inset-bottom)); }
  button { min-height: 52px; }
  .tc { min-height: 100px; font-size: 20px; }
  body.swipe-mode .tc.action { min-height: 84px; }
  h2 { font-size: 30px; }
  .card { padding: 18px; font-size: 17px; }
}
@media (min-width: 600px) and (min-height: 501px) and (orientation: landscape) and (pointer: coarse), (min-width: 600px) and (min-height: 501px) and (orientation: landscape) and (hover: none) {
  #app { max-width: min(640px, 78vh); }
}
/* Pinned footer: the screen has no bottom padding, so nothing can scroll into view beneath the bar. */
.screen > .btnrow:last-child { position: sticky; bottom: 0; z-index: 2; background: var(--pool2); margin: 6px -14px 0;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 12px -6px rgba(0,0,0,0.3); }
.screen > .btnrow:last-child button { flex: 1; }
#toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--navy); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 999px; max-width: 360px; text-align: center; transition: opacity 0.2s, transform 0.2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* v0.6: countdown, results coach + fact, multiplayer */
#countdown { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(1); pointer-events: none; font-size: clamp(96px, 34vw, 150px); font-weight: 900;
  color: #fff; text-shadow: 0 6px 0 rgba(15,42,68,0.85), 0 8px 24px rgba(0,0,0,0.45); opacity: 0; line-height: 1; z-index: 3; }
#countdown.show { opacity: 1; }
#countdown.go { color: #ffd166; font-size: clamp(80px, 28vw, 130px); }
#countdown.pop { animation: cdpop 0.8s ease-out both; }
@keyframes cdpop { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.85; } }
#btn-race-mute.off { background: #ffd6d9; }
.coach { display: flex; gap: 10px; align-items: flex-start; background: #fff8e1; }
.coach-face { width: 56px; height: 56px; flex: none; }
.coach-joke { margin-top: 6px; padding: 6px 10px; background: #ffffff; border-radius: 12px; font-size: 14px; font-weight: 600; }
.coach-face svg { width: 100%; height: 100%; display: block; }
button.closed, .list button.closed { opacity: 0.6; background: #e9ecef; border-style: dashed; }
.card.week.final { border: 2px solid #d4a62a; }
.ghost-line { font-weight: 800; background: #eef3ff; }
tr.ghost td { opacity: 0.75; font-style: italic; }
.prog { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 13px; font-weight: 700; margin: 4px 0 8px; }
.prog .bar { height: 10px; }
button.multi { background: #c7f0ff; }
.mp p { margin: 0 0 10px; }
.pp-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.pp-prev { width: 64px; height: 64px; border-radius: 12px; flex: none; }
.pp-name { font-weight: 800; margin-bottom: 4px; }
.handoff { text-align: center; padding-top: 6vh; color: #fff; }
.ho-icon { font-size: 54px; }
.ho-prev { width: 120px; height: 120px; border-radius: 20px; display: block; margin: 10px auto; }
#sh-link { width: 100%; font-size: 12px; padding: 8px; border-radius: 10px; border: 1px solid #9bb; margin-top: 6px; }
#pod-table .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }

/* v0.7 story intro: Style A crawl on pool-blue water; Skip pinned top-right from the first frame. */
#screen-intro { position: relative; overflow: hidden; padding: 0; }
#screen-intro.active { display: flex; flex-direction: column; }
.in-skip { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 5; min-height: 48px; padding: 8px 18px; font-size: 18px; font-weight: 900;
  background: #fff; color: var(--navy); border-radius: 999px; box-shadow: 0 4px 0 rgba(15,42,68,0.3); }
.in-view { position: relative; flex: 1; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse 120px 60px at 25% 20%, rgba(255,255,255,0.12), transparent 70%), radial-gradient(ellipse 140px 70px at 75% 65%, rgba(255,255,255,0.10), transparent 70%); }
.in-crawl { position: absolute; left: 0; right: 0; top: 0; padding: 0 26px; text-align: center; color: #fff; will-change: transform; }
.in-beat { margin: 0 0 56px; }
.in-beat h2 { font-size: clamp(26px, 7vw, 40px); margin: 0 0 10px; color: var(--yellow); text-shadow: 0 3px 0 rgba(15,42,68,0.55); }
.in-beat p { font-size: clamp(19px, 5vw, 26px); font-weight: 700; line-height: 1.35; margin: 0 0 10px; text-shadow: 0 2px 0 rgba(15,42,68,0.45); }
.in-beat.big h2 { font-size: clamp(40px, 12vw, 64px); color: #fff; }
.in-speed { flex: none; text-align: center; color: #e6f7ff; font-weight: 700; margin: 6px 0 calc(14px + env(safe-area-inset-bottom)); }
.in-still-nav { display: none; }
/* still pages (prefers-reduced-motion): one beat at a time, no movement */
#screen-intro.still .in-crawl { position: static; transform: none !important; padding-top: 90px; }
#screen-intro.still .in-beat { display: none; }
#screen-intro.still .in-beat.on { display: block; }
#screen-intro.still .in-still-nav { display: block; padding: 0 20px calc(18px + env(safe-area-inset-bottom)); }
#screen-intro.still .in-still-nav button { width: 100%; }
@media (prefers-reduced-motion: reduce) { .in-crawl { transition: none; } }
/* v0.7.1 name picker: a fun word + a creature from two menus, or 🎲. No text box. */
.namepick { margin: 4px 0 6px; }
.np-show { font-size: 22px; font-weight: 900; text-align: center; padding: 10px 8px; margin-bottom: 8px; border-radius: 14px; background: #e6f7ff; color: var(--navy); box-shadow: inset 0 0 0 2px #bfe6fa; }
.np-row { display: flex; gap: 6px; align-items: stretch; }
.np-row select { flex: 1 1 0; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; font-weight: 700; color: var(--navy); background: #fff8e1;
  border: 2px solid var(--yellow-edge); border-radius: 14px; padding: 6px 28px 6px 10px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 10px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.namepick .np-dice { width: 100%; margin-top: 8px; min-height: 48px; background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-edge); font-weight: 900; }
.namepick.compact .np-dice { width: 52px; flex: none; margin-top: 0; padding: 0; font-size: 22px; }
.namepick.compact .np-row select { font-size: 15px; padding: 6px 22px 6px 8px; background-position: calc(100% - 13px) 52%, calc(100% - 7px) 52%; }
.pp-col { flex: 1 1 auto; min-width: 0; }
.np-note { margin-top: 2px; }