/**
 * PROPRIETARY SOFTWARE NOTICE
 *
 * This website, source code, database structure, administrative system,
 * and all related components were developed by Pro Star CMS Development.
 *
 * This system is privately developed, maintained in-house, and contains
 * proprietary and confidential software, processes, and intellectual property.
 *
 * Access to this source code does not grant permission to copy, modify,
 * distribute, disclose, reverse engineer, reuse, or reproduce any portion
 * of this system without prior written authorization.
 *
 * Authorized technical personnel may review this code only as necessary
 * to perform approved hosting, maintenance, security, or support services.
 *
 * For questions, authorization, or technical information, contact:
 *
 * Chad Sanders
 * Pro Star CMS Development
 * Phone: 256-550-1988
 *
 * All rights reserved.
 */

/* ============================================================
   Shane Ellis Fishing Game — HUD & menu styling
   (DOM overlay above WebGL canvas). Brand skin block at bottom.
   ============================================================ */

:root {
  --text: #eaf3fa;
  --dim: #9db1c0;
  --accent: #5fd4ff;
  --gold: #ffc857;
  --ok: #62d98b;
  --danger: #ff5d6c;
  --glass: rgba(9, 16, 25, 0.72);
  --glass-soft: rgba(9, 16, 25, 0.55);
  --stroke: rgba(255, 255, 255, 0.1);
  --r-common: #aebdca;
  --r-uncommon: #62d98b;
  --r-rare: #58a6ff;
  --r-epic: #c08bff;
  --r-legendary: #ffb13d;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #06101a;
  color: var(--text);
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }

#canvas-wrap { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
#canvas-wrap canvas { display: block; }

#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(2, 8, 14, 0.42) 100%);
  transition: box-shadow 0.25s ease;
}
#vignette.tension-danger {
  box-shadow: inset 0 0 140px rgba(255, 60, 80, 0.35);
  animation: dangerPulse 0.5s ease-in-out infinite alternate;
}
@keyframes dangerPulse {
  from { box-shadow: inset 0 0 110px rgba(255, 60, 80, 0.22); }
  to   { box-shadow: inset 0 0 170px rgba(255, 60, 80, 0.45); }
}

.hidden { display: none !important; }

/* ---------------- generic widgets ---------------- */

.btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn:disabled:hover { background: rgba(255, 255, 255, 0.07); }

.btn-primary {
  background: linear-gradient(135deg, #1d9dd4, #1565a8);
  border-color: rgba(120, 215, 255, 0.5);
}
.btn-primary:hover { background: linear-gradient(135deg, #27aee6, #1b76bf); }
.btn-big { font-size: 1.15rem; padding: 14px 26px; }
.btn-danger-ghost { color: #ff8d99; border-color: rgba(255, 93, 108, 0.35); }
.btn-danger-ghost:hover { background: rgba(255, 93, 108, 0.12); }
.btn-close { padding: 8px 14px; }
.btn-buy { background: linear-gradient(135deg, #20a45d, #157a44); border-color: rgba(110, 230, 160, 0.45); }
.btn-buy:hover { background: linear-gradient(135deg, #27b96b, #1b8a50); }

kbd {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font-family: inherit;
  font-size: 0.85em;
}

.excl { color: var(--gold); font-weight: 800; }

/* ---------------- HUD ---------------- */

#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud button { pointer-events: auto; }

.hud-corner { position: absolute; display: flex; flex-direction: column; gap: 8px; }
.hud-topleft { top: 16px; left: 16px; }
.hud-topright { top: 16px; right: 16px; align-items: flex-end; }
.hud-bottomleft { bottom: 16px; left: 16px; flex-direction: row; gap: 8px; }
.hud-bottomright { bottom: 16px; right: 16px; }

.hud-card {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 190px;
}

.money-text {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(255, 200, 87, 0.25);
  transition: transform 0.15s ease;
}
.money-text.pulse { animation: popPulse 0.4s ease; }
@keyframes popPulse { 30% { transform: scale(1.18); } }

.level-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.level-badge {
  background: linear-gradient(135deg, #2b86c8, #1c5d96);
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}
.xp-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.xp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #46c6ff, #7ee0ff);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.xp-text { font-size: 0.72rem; color: var(--dim); margin-top: 4px; }

.hud-clockcard { text-align: right; }
.clock-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.clock-text { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg-chip {
  font-size: 0.72rem; font-weight: 700; border-radius: 6px; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.seg-dawn { background: rgba(255, 170, 110, 0.2); color: #ffc49b; }
.seg-day { background: rgba(120, 200, 255, 0.18); color: #a8dcff; }
.seg-dusk { background: rgba(255, 130, 130, 0.18); color: #ffb1a6; }
.seg-night { background: rgba(120, 130, 255, 0.16); color: #b3baff; }
.weather-chip { font-size: 0.72rem; color: var(--dim); border: 1px solid var(--stroke); border-radius: 6px; padding: 2px 8px; }
.loc-text { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-top: 4px; }

.scene-chip {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 20px;
  padding: 4px 14px; font-size: 0.75rem; font-weight: 600; color: var(--text);
  letter-spacing: 0.03em; pointer-events: none; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.hud-buttons { display: flex; gap: 6px; }
.hud-btn {
  font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text);
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 9px;
  padding: 8px 13px; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.hud-btn:hover { background: rgba(80, 150, 200, 0.3); }
.hud-btn:disabled { opacity: 0.35; cursor: default; }

.gear-chip {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 1px;
  backdrop-filter: blur(8px);
}
.gear-label { font-size: 0.62rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.gear-name { font-size: 0.85rem; font-weight: 600; }

.bag-chip {
  font-family: inherit; color: var(--text);
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 10px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.bag-chip:hover { background: rgba(80, 150, 200, 0.3); }

.prompt {
  position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%);
  background: rgba(4, 14, 26, 0.52); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: 6px 16px; font-size: 0.82rem; font-weight: 500; text-align: center;
  color: rgba(220,235,255,0.82);
  backdrop-filter: blur(6px); white-space: nowrap; max-width: 92vw;
  transition: opacity 0.8s ease;
}
.prompt.prompt-fading { opacity: 0; }
.prompt b { color: var(--accent); }
.prompt.urgent {
  border-color: var(--gold); color: var(--gold); font-weight: 800; font-size: 1.25rem;
  animation: urgentFlash 0.22s ease-in-out infinite alternate;
}
@keyframes urgentFlash { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }

.zone-hint {
  position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%);
  font-size: 0.8rem; color: var(--dim); background: var(--glass-soft);
  border-radius: 8px; padding: 4px 12px;
}

/* power meter */
.power-wrap {
  position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.power-track {
  position: relative; width: 260px; height: 18px; border-radius: 9px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--stroke); overflow: hidden;
}
.power-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3ec97e, #ffd95e 60%, #ff7847 90%);
  border-radius: 9px;
}
.power-sweet {
  position: absolute; left: 78%; width: 17%; top: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.power-label { font-size: 0.68rem; letter-spacing: 0.22em; color: var(--dim); font-weight: 700; }

/* reel fight overlay */
.reel-wrap {
  position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
  width: min(480px, 92vw);
  background: rgba(6, 12, 20, 0.52); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  padding: 14px 18px; backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 9px;
}
.fight-head { display: flex; justify-content: space-between; align-items: center; }
.fight-name { font-weight: 700; font-size: 0.95rem; }
.fight-stars { color: var(--gold); letter-spacing: 0.15em; font-size: 0.85rem; }
.surge-banner {
  text-align: center; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(90deg, rgba(255, 70, 90, 0.0), rgba(255, 70, 90, 0.85), rgba(255, 70, 90, 0.0));
  border-radius: 8px; padding: 4px 0;
  animation: surgeFlash 0.3s ease-in-out infinite alternate;
}
.surge-banner.telegraph {
  color: var(--gold);
  background: linear-gradient(90deg, rgba(255, 195, 80, 0), rgba(255, 195, 80, 0.55), rgba(255, 195, 80, 0));
}
@keyframes surgeFlash { from { opacity: 0.75; } to { opacity: 1; } }

.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-tag { width: 64px; text-align: right; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; color: var(--dim); }
.bar {
  flex: 1; height: 16px; border-radius: 8px; overflow: hidden;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--stroke);
}
.bar-fill { height: 100%; width: 0%; border-radius: 8px; transition: width 0.08s linear; }
.tension-fill { background: linear-gradient(90deg, #3ec97e, #ffd95e 55%, #ff5d6c 85%); }
.progress-fill { background: linear-gradient(90deg, #46c6ff, #7ee0ff); }

/* bite indicator */
.bite-indicator {
  position: absolute; z-index: 12; pointer-events: none;
  font-size: 2.6rem; font-weight: 800; color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 200, 87, 0.9), 0 2px 4px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -100%);
  animation: biteBounce 0.3s ease-in-out infinite alternate;
}
@keyframes biteBounce { from { margin-top: 0; } to { margin-top: -14px; } }

/* toasts */
#toasts {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 50;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 9px 20px; font-size: 0.92rem; font-weight: 600;
  backdrop-filter: blur(10px); box-shadow: var(--shadow);
  animation: toastIn 0.3s ease, toastOut 0.4s ease 3s forwards;
  max-width: 86vw; text-align: center;
}
.toast-success { border-color: rgba(98, 217, 139, 0.5); color: #9af0ba; }
.toast-warn { border-color: rgba(255, 93, 108, 0.5); color: #ffaab2; }
.toast-gold { border-color: rgba(255, 200, 87, 0.6); color: var(--gold); box-shadow: 0 0 26px rgba(255, 200, 87, 0.2); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* screen shake */
#app.shake #canvas-wrap, #app.shake #vid-bg { animation: shakeAnim 0.35s ease; }
@keyframes shakeAnim {
  20% { transform: translate(-7px, 4px); }
  40% { transform: translate(6px, -5px); }
  60% { transform: translate(-4px, 3px); }
  80% { transform: translate(3px, -2px); }
}

/* ---------------- full screens ---------------- */

.screen {
  position: absolute; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 17, 0.55);
  backdrop-filter: blur(4px);
  animation: screenIn 0.22s ease;
}
@keyframes screenIn { from { opacity: 0; } }

#screen-menu { background: linear-gradient(180deg, rgba(4, 10, 18, 0.50) 0%, rgba(4, 10, 18, 0.78) 100%); backdrop-filter: none; }

.menu-box { text-align: center; padding: 30px; }
.game-title {
  font-size: clamp(3.2rem, 9vw, 5.6rem);
  font-weight: 800; letter-spacing: 0.14em;
  background: linear-gradient(180deg, #d9f2ff 20%, #4db9e8 70%, #1b6fa8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 18px 60px rgba(64, 180, 240, 0.35);
}
.game-sub { color: var(--dim); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.85rem; margin: 6px 0 34px; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 280px; margin: 0 auto; }
.menu-save-info { margin-top: 18px; font-size: 0.8rem; color: var(--dim); }
.menu-credits { margin-top: 26px; font-size: 0.72rem; color: rgba(157, 177, 192, 0.55); }

.panel {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: panelIn 0.25s ease;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.panel-narrow { width: min(420px, 92vw); }
.panel-mid { width: min(620px, 94vw); }
.panel-wide { width: min(880px, 95vw); height: min(640px, 88vh); }
.panel-title { font-size: 1.45rem; font-weight: 800; letter-spacing: 0.03em; }
.panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.panel-head .panel-title { flex: 1; }

.howto-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; }
.howto-list li { font-size: 0.92rem; color: #cfdde8; line-height: 1.45; }
.howto-list b { color: var(--text); }

.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}
.setting-row:first-of-type { margin-top: 8px; }
.setting-row input[type="range"] { width: 150px; accent-color: var(--accent); }
.setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.setting-row select {
  font-family: inherit; background: rgba(255, 255, 255, 0.08); color: var(--text);
  border: 1px solid var(--stroke); border-radius: 8px; padding: 6px 10px;
}
.setting-danger { border-bottom: none; margin-bottom: 10px; }
#screen-settings .btn-primary, #screen-howto .btn-primary { margin-top: 14px; align-self: center; min-width: 160px; }

/* ---------------- shop ---------------- */

.tab-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-btn {
  font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--dim);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke);
  border-radius: 9px; padding: 8px 18px; cursor: pointer;
  transition: all 0.15s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); background: rgba(70, 150, 210, 0.3); border-color: rgba(120, 200, 255, 0.45); }

.shop-content { flex: 1; overflow-y: auto; padding-right: 6px; }
.shop-item {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 9px;
}
.shop-item.equipped { border-color: rgba(120, 200, 255, 0.5); background: rgba(70, 150, 210, 0.1); }
.shop-item.locked { opacity: 0.55; }
.shop-item-info { flex: 1; }
.shop-item-name { font-weight: 700; font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.tier-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: #0a141e;
  background: linear-gradient(135deg, #9fd9ff, #5fb6e8); border-radius: 5px; padding: 1px 7px;
}
.shop-item-stats { font-size: 0.8rem; color: var(--dim); margin-top: 3px; }
.stat-up { color: var(--ok); font-weight: 600; }
.shop-item-blurb { font-size: 0.76rem; color: rgba(157, 177, 192, 0.7); margin-top: 2px; font-style: italic; }
.shop-item-action { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
.lock-note { font-size: 0.72rem; color: var(--dim); }
.equipped-tag { color: var(--accent); font-weight: 700; font-size: 0.85rem; padding: 8px 4px; }

.sell-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 7px; font-size: 0.9rem;
}
.sell-row .fish-mini { width: 44px; height: 34px; flex-shrink: 0; }
.sell-name { flex: 1; font-weight: 600; }
.sell-meta { color: var(--dim); font-size: 0.8rem; }
.sell-value { color: var(--gold); font-weight: 700; min-width: 64px; text-align: right; }
.sell-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px 2px; gap: 12px;
}
.sell-total { font-size: 1rem; font-weight: 700; }
.shop-empty { text-align: center; color: var(--dim); padding: 50px 0; font-size: 0.95rem; }

/* ---------------- journal ---------------- */

.journal-stats { color: var(--dim); font-size: 0.85rem; }
.journal-scroll { flex: 1; overflow-y: auto; padding-right: 6px; }
.rarity-section { margin-bottom: 18px; }
.rarity-head {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 8px; padding-left: 2px;
}
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.journal-card {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke);
  border-radius: 12px; padding: 12px; text-align: center;
  transition: transform 0.15s ease;
}
.journal-card:hover { transform: translateY(-2px); }
.journal-card .fish-svg { width: 90px; height: 72px; }
.journal-card.locked .fish-svg { filter: grayscale(1) brightness(0.25); }
.jc-name { font-weight: 700; font-size: 0.92rem; margin-top: 4px; }
.jc-meta { font-size: 0.74rem; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.jc-hint { font-size: 0.7rem; color: rgba(157, 177, 192, 0.65); margin-top: 4px; font-style: italic; line-height: 1.45; }
.jc-count { color: var(--accent); font-weight: 600; }

/* ---------------- map ---------------- */

.map-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px;
  align-content: start; grid-auto-rows: max-content;   /* cards keep their full height; the grid scrolls */
}
.map-card {
  border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  display: flex; flex-direction: column;
}
.map-thumb { height: 110px; flex: 0 0 110px; position: relative; background-size: cover; background-position: center; }
.map-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(9, 16, 25, 0.9));
}
.map-thumb[data-loc="lake"] { background: linear-gradient(160deg, #7fcab5, #1c5e51 60%, #0d3a33); }
.map-thumb[data-loc="river"] { background: linear-gradient(160deg, #9fd8c8, #2a7d8f 60%, #14454f); }
.map-thumb[data-loc="pier"] { background: linear-gradient(160deg, #ffd9a0, #3e85b8 55%, #1b4565); }
.map-thumb[data-loc="ocean"] { background: linear-gradient(160deg, #6f9fd8, #1d3f78 55%, #0a1e3e); }
.map-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.map-card-name { font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.current-tag { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; color: #0a141e; background: var(--accent); border-radius: 5px; padding: 2px 7px; }
.map-card-blurb { font-size: 0.8rem; color: var(--dim); line-height: 1.45; flex: 1; }
.map-card-fish { font-size: 0.75rem; color: var(--accent); }
.map-req { font-size: 0.78rem; color: var(--dim); }
.map-req .ok { color: var(--ok); }
.map-req .bad { color: var(--danger); }

/* ---------------- catch card ---------------- */

.catch-overlay {
  position: absolute; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 8, 14, 0.45);
  animation: screenIn 0.25s ease;
}
.catch-card {
  width: min(400px, 92vw);
  background: linear-gradient(180deg, rgba(16, 27, 40, 0.96), rgba(9, 16, 25, 0.96));
  border: 2px solid var(--rarity, var(--stroke));
  border-radius: 20px; padding: 26px 28px 22px;
  text-align: center; position: relative;
  box-shadow: 0 0 60px color-mix(in srgb, var(--rarity, #fff) 28%, transparent), var(--shadow);
  animation: cardPop 0.45s cubic-bezier(0.18, 1.4, 0.4, 1);
}
@keyframes cardPop { from { opacity: 0; transform: scale(0.7) translateY(30px); } }
.catch-ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  color: #16240e; background: linear-gradient(135deg, #b9f08e, #62d98b);
  border-radius: 8px; padding: 5px 16px; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(98, 217, 139, 0.45);
}
.catch-ribbon.record { color: #2a1c04; background: linear-gradient(135deg, #ffe29b, #ffb13d); box-shadow: 0 4px 18px rgba(255, 177, 61, 0.45); }
.catch-rarity { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rarity, var(--dim)); }
.catch-name { font-size: 1.7rem; font-weight: 800; margin: 2px 0 10px; }
.catch-card .fish-svg { width: 170px; height: 130px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5)); }
.catch-stats { display: flex; justify-content: center; gap: 22px; margin: 12px 0 4px; }
.catch-stat { display: flex; flex-direction: column; gap: 2px; }
.catch-stat .cs-label { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.catch-stat .cs-value { font-size: 1.05rem; font-weight: 700; }
.catch-value { font-size: 1.25rem; font-weight: 800; color: var(--gold); margin: 8px 0 16px; }
.catch-xp { font-size: 0.8rem; color: var(--accent); margin-top: -12px; margin-bottom: 14px; }

.confetti-bit {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; pointer-events: none;
  animation: confettiFall 1.4s ease-out forwards;
}
@keyframes confettiFall {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(540deg); }
}

/* fish svg shape variants */
.fish-svg { overflow: visible; }
.fish-svg.shape-slim { transform: scaleY(0.78); }
.fish-svg.shape-long { transform: scale(1.15, 0.55); }
.fish-svg.shape-flat { transform: scaleY(1.18); }
.fish-svg.shape-billed { transform: scaleX(1.1); }

/* ---------------- boot loader ---------------- */

#boot-loader {
  position: absolute; inset: 0; z-index: 500;
  background: #06101a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.boot-spin {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(95, 212, 255, 0.18);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-text { font-weight: 700; letter-spacing: 0.18em; }
.boot-sub { font-size: 0.75rem; color: var(--dim); }
.boot-credit {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  text-align: center; font-size: 0.78rem; line-height: 1.6; color: var(--dim); padding: 0 18px;
}
.boot-credit a { color: #ffc857; text-decoration: none; font-weight: 600; }
.boot-credit a:hover { text-decoration: underline; }
.boot-credit-links { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; font-size: 0.74rem; }
.boot-credit-links i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); display: block; }

/* ---------------- scrollbars ---------------- */
.shop-content::-webkit-scrollbar, .journal-scroll::-webkit-scrollbar, .map-grid::-webkit-scrollbar { width: 8px; }
.shop-content::-webkit-scrollbar-thumb, .journal-scroll::-webkit-scrollbar-thumb, .map-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14); border-radius: 4px;
}

/* ---------------- responsive ---------------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  :root { font-size: 14px; }
  .hud-card { min-width: 150px; padding: 9px 12px; }
  .hud-buttons { flex-wrap: wrap; justify-content: flex-end; }
  .prompt { bottom: 70px; white-space: normal; width: 92vw; }
  .power-wrap { bottom: 150px; }
  .power-track { width: 200px; }
  .reel-wrap { bottom: 110px; }
  .hud-bottomleft { display: none; }
  .panel { padding: 18px; }
  .panel-wide { height: 92vh; }
}

/* ============================================================
   SHANE ELLIS BRAND SKIN
   ============================================================ */

/* Top-center brand bar shown DURING PLAY. z-index 11 keeps its links above
   the HUD layer (z-10) so they are reliably clickable. It is hidden whenever a
   screen overlay (menu, shop, journal, map, pause...) is open — those would
   otherwise sit above it (z-100) and swallow the click, and the menu already
   has its own clickable "Book a guided trip" link. */
#brandbar {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 11;
  display: flex; align-items: center; gap: 14px;
  pointer-events: none;
}
#brandbar a { pointer-events: auto; }
/* Hide the bar while any full-screen overlay is up. */
#app:has(.screen:not(.hidden)) #brandbar { display: none; }
.brandbar-home img {
  height: 34px; width: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  opacity: 0.92; transition: opacity 0.15s ease;
}
.brandbar-home:hover img { opacity: 1; }
.brandbar-home { display: inline-flex; align-items: center; }
.brandbar-cta {
  display: inline-flex; align-items: center;
  font-family: inherit; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.01em; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #1f9e5a, #157a44);
  border: 1px solid rgba(120, 255, 180, 0.35);
  border-radius: 999px; padding: 7px 15px; line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.brandbar-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.brandbar-cta:active { transform: translateY(0); }

/* Lake name watermark */
#lake-label {
  position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
}

/* Fish-finder tester panel — flows inside .hud-topleft */
#ff-tester {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(5, 18, 5, 0.82); border: 1px solid #1e3e1e;
  border-radius: 6px; padding: 8px 7px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
#ff-tester.hidden { display: none; }
.ff-tester-label {
  font-size: 8px; font-family: monospace; color: #2a6a2a;
  text-align: center; letter-spacing: 0.1em; margin-bottom: 2px;
}
#ff-tester button {
  background: rgba(10, 35, 10, 0.9); border: 1px solid #2a5a2a;
  color: #4cdd4c; font-family: monospace; font-size: 10px;
  padding: 5px 9px; cursor: pointer; border-radius: 3px;
  white-space: nowrap; transition: background 0.1s;
}
#ff-tester button:hover { background: rgba(20, 60, 20, 0.95); }
#ff-tester button:active { color: #ff9200; border-color: #804800; }

/* Menu branding */
.menu-logo {
  height: 78px; width: auto; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}
.game-title {
  font-size: clamp(2.4rem, 7vw, 4.2rem) !important;
  letter-spacing: 0.08em !important;
}
.menu-booklink {
  display: inline-block; margin-top: 20px;
  font-size: 0.9rem; font-weight: 600; color: #4fd28a; text-decoration: none;
  border-bottom: 1px solid rgba(79, 210, 138, 0.4); padding-bottom: 2px;
  transition: color 0.15s ease;
}
.menu-booklink:hover { color: #7ff0ac; }

/* ---------- Fishing With Captain Shane: title treatment ---------- */
.game-title { background: none !important; text-shadow: none !important; display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 6px; }
.gt-small {
  font-size: clamp(0.95rem, 3.4vw, 1.5rem); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: #e9f4fb; -webkit-text-fill-color: #e9f4fb; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.gt-big {
  font-size: clamp(2.3rem, 11vw, 5rem); font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff1c2 15%, #ffc857 55%, #e08a1e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.btn-primary { background: linear-gradient(135deg, #ffc857, #e08a1e) !important; color: #1a1205 !important; border-color: rgba(255, 230, 160, 0.6) !important; }
.menu-credits a { color: inherit; text-decoration: none; }
.only-touch { display: none; }
@media (pointer: coarse), (hover: none) { .only-touch { display: list-item; } span.only-touch { display: inline; } .only-desk { display: none !important; } }

/* ---------- hamburger + drawer (hidden on desktop) ---------- */
.hud-burger { display: none; }
.hud-drawer { display: contents; }

/* ============================================================
   PHONES: one finger. Aim by sliding, hold to charge/reel, tap to hook.
   Only money/level + the logo + a hamburger stay on screen.
   ============================================================ */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .guide { display: none !important; }
  .brandbar-cta { display: none; }
  .brandbar-home img { height: 34px; }
  #brandbar { top: calc(env(safe-area-inset-top, 0px) + 10px); }

  .hud-topleft { top: calc(env(safe-area-inset-top, 0px) + 10px); left: 10px; }
  .hud-topright { top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; }
  .hud-topleft .hud-card { min-width: 0; padding: 7px 10px; border-radius: 12px; }
  .hud-topleft .money-text { font-size: 1.05rem; }
  .hud-topleft .xp-text { display: none; }
  .hud-topleft .xp-bar { width: 44px; }

  .hud-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
    background: var(--glass); border: 1px solid var(--stroke);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .hud-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #ffc857; transition: transform 0.2s ease, opacity 0.2s ease; }
  .hud-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hud-burger.open span:nth-child(2) { opacity: 0; }
  .hud-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .hud-drawer {
    display: none; flex-direction: column; gap: 8px; width: 210px; padding: 10px;
    background: rgba(6, 14, 22, 0.88); border: 1px solid var(--stroke); border-radius: 14px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .hud-drawer.open { display: flex; }
  .hud-drawer .hud-card { background: transparent; border: 0; padding: 0 2px 4px; min-width: 0; backdrop-filter: none; }
  .hud-drawer .hud-buttons { flex-direction: column; gap: 8px; }
  .hud-drawer .hud-btn, .hud-drawer .bag-chip { width: 100%; min-height: 46px; font-size: 1rem; text-align: left; padding: 10px 14px; }

  .hud-bottomleft, .hud-bottomright { display: none; }

  .prompt {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: 90vw; padding: 10px 16px;
    font-size: 1.05rem; white-space: normal;
  }
  .power-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .power-track { width: min(260px, 72vw); }
  .reel-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); width: 92vw; }
  .zone-hint { display: none; }

  /* menu: logo pinned top center, everything fits the screen */
  #screen-menu { align-items: flex-start; overflow-y: auto; padding-top: calc(env(safe-area-inset-top, 0px) + 84px); box-sizing: border-box; }
  .menu-box { padding: 12px 16px 24px; width: 100%; box-sizing: border-box; }
  .menu-logo { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%); height: 60px; margin: 0; }
  .game-sub { letter-spacing: 0.18em; font-size: 0.72rem; margin: 10px 0 20px; }
  .menu-buttons { width: min(300px, 100%); }
  .menu-buttons .btn { min-height: 50px; }
  .menu-booklink { font-size: 0.85rem; margin-top: 14px; }
  .menu-credits { margin-top: 14px; }
}

/* ---------- Desktop: hints sit to the LEFT of the boat, not on top of it ---------- */
@media (min-width: 1000px) and (hover: hover) {
  .prompt {
    left: 16px; right: auto; bottom: 96px; transform: none;
    width: min(300px, calc(50vw - min(31vw, 380px) - 40px)); max-width: none;
    white-space: normal; text-align: left; padding: 12px 16px; line-height: 1.35;
  }
  .prompt.urgent { animation: urgentFlashL 0.22s ease-in-out infinite alternate; }
  .zone-hint { left: 16px; bottom: 168px; transform: none; }
}
@keyframes urgentFlashL { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---------- real fish photos ---------- */
.fish-photo { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.catch-card .fish-photo { width: min(320px, 72vw); height: auto; margin: 6px auto 4px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)); }
.catch-latin { font-size: 0.78rem; font-style: italic; color: var(--dim); margin-top: -2px; letter-spacing: 0.02em; }
.catch-tip { font-size: 0.8rem; line-height: 1.4; color: var(--dim); max-width: 330px; margin: 6px auto 4px; }
.journal-card .fish-photo { width: 100%; max-width: 150px; height: 64px; margin: 0 auto 4px; }
.journal-card.locked .fish-photo { filter: grayscale(1) brightness(0.2); }
.jc-latin { font-size: 0.7rem; font-style: italic; color: var(--dim); margin-bottom: 3px; }
.sell-row .fish-mini .fish-photo { width: 52px; height: 34px; }

/* ---------- menu credit + short-window safety ---------- */
.menu-devcredit { margin-top: 16px; font-size: 0.74rem; line-height: 1.6; color: var(--dim); }
.menu-devcredit b { color: #e6eef5; font-weight: 600; }
.menu-devcredit a { color: #ffc857; text-decoration: none; font-weight: 600; }
.menu-devcredit a:hover { text-decoration: underline; }
.menu-devcredit .boot-credit-links { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 2px; }
.menu-devcredit .boot-credit-links i { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); display: block; }
/* If the window is shorter than the menu, scroll instead of cutting off the top. */
#screen-menu { overflow-y: auto; }
#screen-menu .menu-box { margin: auto; max-width: 100%; }
.gt-big { max-width: 100%; }

/* ---------- start screen (the loader becomes a "Start Game" screen once everything is ready) ---------- */
#boot-loader { transition: opacity 0.45s ease; }
#boot-loader.leaving { opacity: 0; pointer-events: none; }
.boot-logo, .boot-start, .boot-hint { display: none; }
#boot-loader.ready .boot-logo { display: block; height: 78px; width: auto; margin-bottom: 4px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); }
#boot-loader.ready .boot-start { display: block; min-width: 220px; margin-top: 8px; }
#boot-loader.ready .boot-hint { display: block; font-size: 0.78rem; color: var(--dim); }
#boot-loader.ready .boot-spin, #boot-loader.ready .boot-sub { display: none; }
#boot-loader.ready .boot-text { font-size: 1.15rem; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) { #boot-loader.ready .boot-logo { height: 62px; } }

/* ============================================================
   BASS FISHING UPDATE: lures, rhythm, conditions, livewell, tournament, goals
   ============================================================ */

/* ---------- HUD bits ---------- */
.cond-text { margin-top: 3px; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.01em; }
.tourney-chip {
  margin-top: 8px; padding: 7px 12px; border-radius: 10px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
  color: #1a1205; background: linear-gradient(135deg, #ffc857, #e08a1e); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); width: max-content; max-width: 70vw;
}
.gear-click { cursor: pointer; pointer-events: auto; transition: background 0.15s ease; }
.gear-click:hover { background: rgba(80, 150, 200, 0.3); }
.match-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; background: #5b6b78; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.match-dot.m-hot { background: #ff6a3d; box-shadow: 0 0 10px #ff6a3d; }
.match-dot.m-good { background: #62d98b; box-shadow: 0 0 8px #62d98b; }
.match-dot.m-ok { background: #ffc857; }
.match-dot.m-cold { background: #58a6ff; }
.bag-chip.full { border-color: var(--gold); color: var(--gold); }

/* ---------- rhythm bar (working the lure) ---------- */
.rhythm {
  position: absolute; left: 16px; transform: none; bottom: 24px; width: min(300px, 78vw);
  background: transparent; border: none; border-radius: 10px; padding: 8px 12px 10px;
  pointer-events: none; transition: border-color 0.12s ease;
  text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.8);
}
.rhythm.ready { box-shadow: 0 0 14px rgba(98, 217, 139, 0.35); }
.rhythm-top { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 700; margin-bottom: 7px; }
.rhythm-label { color: var(--text); }
.rhythm-streak { color: var(--gold); }
.rhythm-track {
  position: relative; height: 16px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rhythm-sweet { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #62d98b, #2f9e5a); border-radius: 8px; }
.rhythm-mark { position: absolute; top: -2px; bottom: -2px; width: 5px; margin-left: -2px; border-radius: 3px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0,0,0,0.5); }
.rhythm.good { animation: rhGood 0.35s ease; }
.rhythm.soon, .rhythm.late { animation: rhBad 0.3s ease; }
@keyframes rhGood { 0% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes rhBad { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 600px) {
  .rhythm { left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: min(280px, 88vw); }
  .rhythm.good { animation-name: rhGoodC; }
  .rhythm.soon, .rhythm.late { animation-name: rhBadC; }
  @keyframes rhGoodC { 0% { transform: translateX(-50%) scale(1.07); } 100% { transform: translateX(-50%) scale(1); } }
  @keyframes rhBadC { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 5px)); } 75% { transform: translateX(calc(-50% + 5px)); } }
}

/* ---------- Captain Shane's tip bubble ---------- */
.guide {
  position: absolute; z-index: 600; left: 50%; top: 8px; transform: translateX(-50%); width: min(420px, 88vw);
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px 10px 8px; cursor: pointer;
  background: rgba(4, 12, 22, 0.62); border: 1px solid rgba(255, 200, 87, 0.38); border-radius: 14px;
  backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); animation: guideIn 0.3s ease; pointer-events: auto;
}
.guide.hidden { display: none; }
.guide-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #0a2540; border: 2px solid #ffc857; }
.guide-name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffc857; margin-bottom: 2px; }
.guide-text { font-size: 0.9rem; line-height: 1.35; color: var(--text); }
@keyframes guideIn { from { opacity: 0; } }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) { .guide { top: 6px; width: 94vw; padding: 8px 10px; } .guide-avatar { width: 34px; height: 34px; } .guide-text { font-size: 0.82rem; } }

/* ---------- lure icons and the shop ---------- */
.lure-icon { width: 64px; height: 34px; flex-shrink: 0; overflow: visible; }
.shop-lure { display: flex; align-items: center; margin-right: 6px; }
.shop-empty-note { font-size: 0.8rem; color: var(--dim); }

/* ---------- tackle box ---------- */
.tackle-hint { font-size: 0.82rem; color: var(--dim); margin: 2px 0 12px; }
.tackle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.tackle-sub { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 16px 0 8px; }
.lure-card { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 12px; padding: 10px 12px; }
.lure-card.equipped { border-color: var(--gold); background: rgba(255, 200, 87, 0.08); }
.lure-card.locked { opacity: 0.55; }
.lure-card-top { display: flex; align-items: center; gap: 10px; }
.lure-card-top > div:nth-child(2) { flex: 1; min-width: 0; }
.lure-name { font-weight: 700; font-size: 0.95rem; }
.lure-kind { font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.equipped-tag { font-size: 0.72rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; }
.lure-how { font-size: 0.78rem; color: var(--dim); margin: 6px 0; line-height: 1.35; }
.lure-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.match-chip { font-size: 0.68rem; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text); }
.match-chip b { margin-left: 3px; }
.match-chip.m-hot { background: rgba(255, 106, 61, 0.28); color: #ffb39b; }
.match-chip.m-good { background: rgba(98, 217, 139, 0.22); color: #9ae8b6; }
.match-chip.m-ok { background: rgba(255, 200, 87, 0.18); color: #ffd98a; }
.match-chip.m-cold { background: rgba(88, 166, 255, 0.18); color: #9cc7ff; }

/* ---------- fishing report ---------- */
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.report-stat { background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 10px; text-align: center; }
.report-stat span { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.report-stat b { font-size: 1.05rem; }
.report-text { font-size: 0.92rem; line-height: 1.45; margin-bottom: 4px; }
.report-lures { display: flex; gap: 10px; flex-wrap: wrap; }
.report-lure { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 6px 10px; font-size: 0.85rem; font-weight: 600; }
.report-cover-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--stroke); font-size: 0.86rem; }
.rc-side { color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.rc-pick { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rc-pick .lure-icon { width: 46px; height: 24px; }
#screen-report .btn-primary { margin-top: 14px; }

/* ---------- the scales and tournament results ---------- */
.results { text-align: center; max-height: 92vh; overflow-y: auto; }
.wi-list, .lb { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.wi-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-align: left; animation: rowIn 0.4s ease both; }
.wi-row.big { border: 1px solid var(--gold); background: rgba(255, 200, 87, 0.1); }
.wi-fish .fish-photo { width: 66px; height: 34px; object-fit: contain; }
.wi-name { font-weight: 700; font-size: 0.92rem; }
.wi-nick { font-size: 0.66rem; font-weight: 800; color: #1a1205; background: var(--gold); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }
.wi-meta { color: var(--dim); font-size: 0.8rem; }
.wi-weight { font-weight: 800; font-variant-numeric: tabular-nums; }
.wi-total { display: flex; justify-content: space-between; font-size: 1.15rem; padding: 10px 10px 4px; border-top: 1px solid var(--stroke); }
.wi-lines > div { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 0.92rem; }
.wi-lines .bonus { color: var(--ok); }
.wi-lines .grand { font-size: 1.4rem; font-weight: 800; color: var(--gold); padding-top: 8px; }
.lb-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-align: left; animation: rowIn 0.4s ease both; }
.lb-row.you { border: 1px solid var(--gold); background: rgba(255, 200, 87, 0.12); font-weight: 800; }
.lb-place { font-weight: 800; color: var(--dim); }
.lb-count { color: var(--dim); font-size: 0.82rem; }
.lb-wt { font-weight: 800; font-variant-numeric: tabular-nums; }
.trophy { width: 84px; height: 84px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: #fff; background: #3a4a5a; border: 3px solid #5d7387; }
.trophy.podium { background: linear-gradient(135deg, #9aa7b3, #5d7387); border-color: #c9d3dc; }
.trophy.gold { background: linear-gradient(135deg, #ffd978, #e08a1e); border-color: #fff1c2; color: #1a1205; animation: pulseGold 1.6s ease infinite; }
@keyframes pulseGold { 50% { box-shadow: 0 0 34px rgba(255, 200, 87, 0.7); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
.btn-tourney { border-color: rgba(255, 200, 87, 0.55); color: #ffc857; }

/* ---------- catch card additions ---------- */
.catch-ribbon.nick { background: linear-gradient(135deg, #ff6a3d, #ffb13d); color: #1a0e05; font-size: 1.05rem; letter-spacing: 0.08em; }
.catch-ribbon.sub { top: auto; position: static; display: inline-block; margin-top: 4px; font-size: 0.66rem; }
.catch-how { font-size: 0.82rem; color: var(--dim); margin: 6px 0 2px; }
.catch-how b { color: var(--text); }
.catch-note { font-size: 0.82rem; margin: 6px auto; max-width: 320px; line-height: 1.35; }
.catch-note.ok { color: var(--ok); }
.catch-note.up { color: var(--gold); }
.catch-note.short { color: #ff9c8a; }
.catch-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Angler's Log ---------- */
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); }
.goal.done { border-color: rgba(98, 217, 139, 0.5); background: rgba(98, 217, 139, 0.08); }
.goal-main { flex: 1; min-width: 0; }
.goal-name { font-weight: 800; }
.goal-desc { font-size: 0.8rem; color: var(--dim); margin: 2px 0 6px; }
.goal-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.goal-bar div { height: 100%; background: linear-gradient(90deg, #5fd4ff, #62d98b); }
.goal.done .goal-bar div { background: #62d98b; }
.goal-side { text-align: right; font-size: 0.78rem; white-space: nowrap; }
.goal-prog { font-weight: 800; font-size: 0.95rem; }
.goal-reward { color: var(--gold); }

/* long panels scroll instead of running off the screen */
#screen-tackle .panel, #screen-report .panel { max-height: 92vh; overflow-y: auto; }

/* phones: the bottom-left gear chips are hidden, so the lure shows under the money card instead */
.lure-mini { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .lure-mini {
    display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px; max-width: 62vw;
    font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--text); text-align: left;
    background: var(--glass); border: 1px solid var(--stroke); border-radius: 10px; pointer-events: auto; cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .lure-mini .match-dot { margin: 0; flex-shrink: 0; }
  .lure-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tourney-chip { font-size: 0.68rem; padding: 6px 9px; }
}

/* toasts sit under the logo bar instead of on top of it */
#toasts { top: 74px; z-index: 95; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) { #toasts { top: 70px; max-width: 92vw; } }

/* desktop (900px+): fight bars and rhythm bar are transparent — let the 3D scene show */
@media (min-width: 900px) {
  .zone-hint { bottom: 80px; max-width: 300px; line-height: 1.3; }
  .reel-wrap {
    background: transparent; border: 0; backdrop-filter: none;
    padding: 0 8px; bottom: 16px;
    text-shadow: 0 1px 4px #000, 0 0 3px #000;
  }
  .reel-wrap .bar { background: rgba(0, 0, 0, 0.38); }
}

/* ---------- high scores + initials ---------- */
.menu-scores { margin: 10px auto 12px; width: min(420px, 100%); padding: 8px 10px; border-radius: 12px; background: rgba(8, 18, 28, 0.55); border: 1px solid rgba(255, 200, 87, 0.35); font-size: 0.82rem; }
.hs-title { text-align: center; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; color: #ffc857; margin-bottom: 4px; }
.hs-empty { text-align: center; opacity: 0.8; padding: 4px 0; }
.hs-row { display: grid; grid-template-columns: 1.4em 3.2em 2.4em 1fr 1.3fr; gap: 6px; padding: 2px 4px; border-radius: 6px; text-align: left; }
.hs-row span:nth-child(n+3) { text-align: right; }
.hs-head { opacity: 0.6; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hs-name { font-weight: 800; letter-spacing: 0.12em; }
.hs-row.me { background: rgba(255, 200, 87, 0.18); }
.name-modal { position: absolute; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(0, 8, 16, 0.78); }
.name-modal.hidden { display: none; }
.name-box { text-align: center; padding: 22px 26px; border-radius: 16px; background: #0b1c2c; border: 1px solid rgba(255, 200, 87, 0.5); width: min(320px, 88vw); }
.name-title { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffc857; margin-bottom: 10px; }
.name-input { width: 6.2em; font: 800 2.4rem/1.2 Outfit, sans-serif; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; padding: 4px 0 4px 0.3em; border-radius: 10px; border: 2px solid #ffc857; background: #06121d; color: #fff; }
.name-err { min-height: 1.3em; margin: 6px 0 10px; font-size: 0.85rem; color: #ff9a8a; }

/* ---------- tournament briefing ---------- */
.tourney-panel { max-width: 760px; max-height: 92vh; overflow-y: auto; }
.tp-lead { margin: 0 0 10px; font-size: 0.98rem; }
.tp-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; text-align: left; }
.tp-h { margin: 8px 0 4px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ffc857; }
.tp-list { margin: 0 0 6px; padding-left: 1.1em; font-size: 0.88rem; line-height: 1.4; }
.tp-list li { margin-bottom: 4px; }
.tp-row { display: grid; grid-template-columns: 2.5em 1fr 1fr; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 0.9rem; }
.tp-row:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.tp-row span:nth-child(n+2) { text-align: right; }
.tp-head { opacity: 0.6; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; background: none !important; }
.tp-row .ok { color: var(--ok); } .tp-row .bad { color: var(--danger); }
.tp-note { margin: 8px 0 0; font-size: 0.8rem; opacity: 0.8; }
.tp-cash { margin: 12px 0 8px; padding: 8px 10px; border-radius: 10px; font-weight: 700; text-align: center; background: rgba(0, 0, 0, 0.3); }
.tp-cash.ok { color: var(--ok); } .tp-cash.bad { color: #ff9a8a; }
.tourney-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.tourney-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) { .tp-cols { grid-template-columns: 1fr; gap: 6px; } .tp-list { font-size: 0.82rem; } }

/* ---------- phones: no hamburger, the buttons are icons stacked down the right side ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .hud-burger { display: none !important; }
  .hud-drawer {
    display: flex !important; flex-direction: column; align-items: flex-end; gap: 8px;
    width: auto; padding: 0; background: none; border: 0; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hud-drawer .hud-clockcard { padding: 5px 9px; border-radius: 10px; background: var(--glass); border: 1px solid var(--stroke); min-width: 0; }
  .hud-drawer .hud-clockcard .loc-text, .hud-drawer .hud-clockcard .cond-text, .hud-drawer .hud-clockcard .weather-chip { display: none; }
  .hud-drawer .clock-row { gap: 6px; }
  .hud-drawer .clock-text { font-size: 0.95rem; }
  .hud-drawer .hud-buttons { display: flex; flex-direction: column; gap: 8px; }
  .hud-drawer .hud-btn, .hud-drawer .bag-chip {
    width: 46px; min-height: 46px; height: 46px; padding: 0; font-size: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--glass); border: 1px solid var(--stroke);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .hud-drawer .hud-btn::before { font-size: 1.35rem; line-height: 1; }
  #btn-map::before { content: "\1F5FA\FE0F"; }
  #btn-shop::before { content: "\1F6D2"; }
  #btn-tackle::before { content: "\1F3A3"; }
  #btn-report::before { content: "\1F4CB"; }
  #btn-journal::before { content: "\1F4D6"; }
  #btn-photo::before { content: "\1F4F7"; }
  #btn-pause::before { content: "\23F8\FE0F"; }
  .hud-drawer .bag-chip { flex-direction: column; gap: 1px; font-size: 0.6rem; font-weight: 800; color: #ffc857; }
  .hud-drawer .bag-chip::before { content: "\1F41F"; font-size: 1.1rem; }
}

/* phones: icons float with no box; a soft shadow keeps them readable on any photo */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .hud-drawer .hud-btn, .hud-drawer .bag-chip {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .hud-drawer .hud-btn::before, .hud-drawer .bag-chip::before { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
  .hud-drawer .hud-btn::before { font-size: 1.6rem; }
  .hud-drawer .bag-chip::before { font-size: 1.45rem; }
  .hud-drawer .bag-chip { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.8); }
}

.jc-new { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: 2px; }

.journal-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 0.86rem; line-height: 1.4; background: rgba(255, 200, 87, 0.1); border: 1px solid rgba(255, 200, 87, 0.35); }

/* ---------- rain: gray wash, falling streaks, lightning flash ---------- */
#rain-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
#rain-gray { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(52, 60, 70, 0.82) 0%, rgba(78, 88, 98, 0.62) 45%, rgba(62, 72, 82, 0.5) 100%); }
#rain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#rain-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, #f4f8ff, #cfe0ff 70%); opacity: 0; mix-blend-mode: screen; }
#rain-glass { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- phones: keep the playfield clear ----------
   The right edge belongs to the icon column, the top-left to money and the lure chip. Messages sit in the sky
   between them, and the timing bar hugs the very bottom, so none of it covers the water or the lure. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .rhythm {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: min(300px, 74vw); padding: 6px 10px 8px;
    border-radius: 10px; background: rgba(8, 18, 28, 0.72);
  }
  .rhythm-top { font-size: 0.68rem; margin-bottom: 5px; }
  .guide {
    top: calc(env(safe-area-inset-top, 0px) + 118px); left: 10px; right: 66px; width: auto; transform: none;
    padding: 7px 10px; gap: 8px; border-radius: 12px; background: rgba(8, 18, 28, 0.82);
  }
  .guide-avatar { width: 30px; height: 30px; }
  .guide-name { font-size: 0.6rem; margin-bottom: 1px; }
  .guide-text { font-size: 0.76rem; line-height: 1.28; }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 184px); left: 10px; right: 66px; transform: none; max-width: none; align-items: flex-start; }
  .toast { padding: 6px 12px; font-size: 0.8rem; max-width: 100%; text-align: left; }
}

/* ---------- phones: skip the costly effects ---------- */
@media (max-width: 760px), (pointer: coarse) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hud-card, .hud-btn, .gear-chip, .bag-chip, .toast, .guide, .rhythm, .prompt, .panel { background-color: rgba(8, 18, 28, 0.86); }
}

/* ---------- phone held sideways ----------
   Short and wide: the icon buttons run along the top instead of down the side, messages sit in the middle,
   the boat is small, and the bottom bars hug the bottom edge so most of the screen is water. */
@media (pointer: coarse) and (max-height: 520px) {
  .hud-topleft { left: calc(env(safe-area-inset-left, 0px) + 10px); top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .hud-topright { right: calc(env(safe-area-inset-right, 0px) + 10px); top: calc(env(safe-area-inset-top, 0px) + 8px); flex-direction: column; align-items: flex-end; gap: 4px; }
  .hud-drawer { flex-direction: column !important; align-items: flex-end; gap: 4px; }
  .hud-drawer .hud-clockcard .seg-chip { display: none; }
  .hud-drawer .hud-buttons { display: grid !important; grid-template-columns: repeat(2, 40px); gap: 2px; }
  .hud-drawer .hud-btn, .hud-drawer .bag-chip { width: 40px; min-height: 40px; height: 40px; }
  .hud-drawer .hud-btn::before { font-size: 1.3rem; }
  .hud-drawer .bag-chip::before { font-size: 1.2rem; }
  #brandbar { top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .brandbar-home img { height: 28px; }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 54px); left: 50%; right: auto; width: min(430px, 52vw); transform: translateX(-50%); }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 118px); left: calc(env(safe-area-inset-left, 0px) + 10px); right: auto; max-width: 34vw; }
  .rhythm { bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); width: min(300px, 44vw); }
  .reel-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); width: min(440px, 56vw); }
  .power-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); }
  .prompt { bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); width: min(460px, 60vw); padding: 7px 12px; font-size: 0.92rem; }
  .hud-bottomleft { display: none; }
  .map-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  #screen-menu { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); align-items: flex-start; overflow-y: auto; }
  .menu-box { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 22px; row-gap: 4px; align-items: center; text-align: left; padding: 6px 18px 10px; width: 100%; box-sizing: border-box; }
  .menu-logo { grid-column: 1; grid-row: 1; position: static; transform: none; height: 44px; margin: 0; justify-self: start; }
  .game-title { grid-column: 1; grid-row: 2; margin: 0; }
  .game-title .gt-small { font-size: 0.72rem; }
  .game-title .gt-big { font-size: 1.9rem; line-height: 1; }
  .game-sub { grid-column: 1; grid-row: 3; margin: 2px 0 0; font-size: 0.6rem; letter-spacing: 0.14em; }
  #menu-scores { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 6px 8px; font-size: 0.72rem; }
  .menu-buttons { grid-column: 2; grid-row: 3 / span 2; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu-buttons .btn { min-height: 36px; padding: 6px 10px; font-size: 0.85rem; }
  .menu-buttons .btn-big, .menu-buttons .btn-tourney { grid-column: 1 / -1; }
  #menu-save-info, .menu-booklink, .menu-credits { display: none; }
  .menu-devcredit { grid-column: 1; grid-row: 4; font-size: 0.58rem; margin: 4px 0 0; text-align: left; }
}

/* ---------- How to Play: title and Back stay put, only the list scrolls (works sideways on phones) ---------- */
#screen-howto .panel { overflow: hidden; max-height: 92vh; }
#screen-howto .howto-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-right: 6px; margin: 12px 0 12px; }
@media (pointer: coarse) and (max-height: 520px) {
  #screen-howto .panel { max-height: calc(100vh - 16px); padding: 12px 18px; }
  #screen-howto .panel-title { font-size: 1.15rem; }
  #screen-howto .btn-primary { margin-top: 0; }
}

/* ---------- sideways phone: aim stick (bottom left) and rod/reel button (bottom right) ---------- */
#vjoy, #rod-zone {
  display: none; position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: 112px; height: 112px; border-radius: 50%; z-index: 15; pointer-events: auto; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#vjoy {
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  background: rgba(8, 18, 28, 0.45); border: 2px solid rgba(255, 200, 87, 0.4);
}
#vjoy-thumb {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe28a, #e08a1e); border: 2px solid rgba(255, 240, 170, 0.8);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); will-change: transform;
}
.vjoy-hint { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.2em; color: rgba(255, 200, 87, 0.7); pointer-events: none; }
#rod-zone {
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  background: rgba(10, 40, 62, 0.55); border: 3px solid rgba(95, 212, 255, 0.6);
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#rod-zone.rz-down { background: rgba(95, 212, 255, 0.3); border-color: #9fe6ff; box-shadow: 0 0 22px rgba(95, 212, 255, 0.45); }
#rod-zone.rz-urgent { border-color: var(--gold); background: rgba(255, 200, 87, 0.28); animation: rzGlow 0.28s ease-in-out infinite alternate; }
@keyframes rzGlow { from { box-shadow: 0 0 10px rgba(255, 200, 87, 0.3); } to { box-shadow: 0 0 34px rgba(255, 200, 87, 0.85); } }
.rz-icon { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); pointer-events: none; }
.rz-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.15; white-space: pre-line; color: #fff; text-shadow: 0 1px 4px #000; pointer-events: none; }
@media (pointer: coarse) and (max-height: 520px) {
  #vjoy { display: block; }
  #rod-zone { display: flex; }
}
#app:has(.screen:not(.hidden)) #vjoy, #app:has(.screen:not(.hidden)) #rod-zone,
#app:has(.catch-overlay) #vjoy, #app:has(.catch-overlay) #rod-zone { display: none !important; }

/* ============================================================
   SIDEWAYS PHONE: every overlay must fit the short screen and keep its buttons reachable
   ============================================================ */
@media (pointer: coarse) and (max-height: 520px) {
  :root { font-size: 13px; }
  .screen, .catch-overlay { padding: 6px calc(env(safe-area-inset-right, 0px) + 6px) 6px calc(env(safe-area-inset-left, 0px) + 6px); }
  .panel { max-height: calc(100vh - 12px); padding: 12px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .panel-wide { height: calc(100vh - 12px); width: min(96vw, 880px); }
  .panel-head { margin-bottom: 8px; gap: 10px; }
  .panel-title { font-size: 1.2rem; }
  .panel-narrow { width: min(560px, 92vw); }
  #screen-pause .menu-buttons, #screen-settings .panel-narrow { width: 100%; }
  #screen-pause .menu-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #screen-pause .menu-buttons .btn-big, #screen-pause #pause-endtourney { grid-column: 1 / -1; }
  #screen-pause .btn-big { padding: 10px 18px; font-size: 1rem; }
  .setting-row { padding: 8px 0; }
  .tourney-panel, .results, #screen-tackle .panel, #screen-report .panel { max-height: calc(100vh - 12px); overflow-y: auto; }
  .shop-content, .journal-scroll, .map-grid { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .tab-row { margin-bottom: 8px; }
  .shop-item { padding: 8px 12px; }
  .name-box { padding: 12px 18px; }
  .name-input { font-size: 1.8rem; }
  .name-err { margin: 2px 0 6px; }

  /* the catch card: fish on the left, details and buttons on the right, nothing cut off */
  .catch-overlay { overflow-y: auto; align-items: flex-start; }
  .catch-card {
    width: min(720px, 96vw); margin: auto; padding: 14px 18px 12px;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 18px; align-items: center; text-align: left;
    max-height: none;
  }
  .catch-card > .fish-photo, .catch-card > .fish-svg, .catch-card > img { grid-column: 1; grid-row: 1 / span 12; width: 100%; max-width: 280px; max-height: 70vh; margin: 0 auto; justify-self: center; object-fit: contain; }
  .catch-card > :not(.fish-photo):not(.fish-svg):not(img):not(.catch-ribbon):not(.confetti-bit) { grid-column: 2; }
  .catch-ribbon { top: -10px; font-size: 0.65rem; padding: 3px 12px; }
  .catch-name { font-size: 1.35rem; margin: 0 0 2px; }
  .catch-stats { justify-content: flex-start; margin: 6px 0 2px; gap: 18px; }
  .catch-value { margin: 4px 0 6px; font-size: 1.05rem; }
  .catch-xp { margin: -2px 0 6px; }
  .catch-note, .catch-tip { margin: 3px 0; max-width: none; }
  .catch-buttons { justify-content: flex-start; margin-top: 4px; }
  .catch-buttons .btn { min-height: 44px; }
  .guide { z-index: 90; }
}
#app:has(.catch-overlay) .guide, #app:has(.screen:not(.hidden)) .guide { display: none !important; }
.catch-ribbon.sub{grid-column:2}

/* sideways phones: the closing button of a scrolling panel stays pinned to the bottom edge */
@media (pointer: coarse) and (max-height: 520px) {
  #rp-go, #res-ok, .tourney-actions {
    position: sticky; bottom: -12px; z-index: 2; margin-top: 8px; padding-bottom: 8px;
    background: linear-gradient(180deg, rgba(9, 16, 25, 0), rgba(9, 16, 25, 0.95) 35%);
  }
  .tourney-actions { padding-top: 8px; }
}

/* ---------- phones: less black glass over the water ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) { .bag-wt { display: none; } }
@media (pointer: coarse) and (max-height: 520px) {
  .reel-wrap { background: transparent; border: 0; padding: 0 6px; gap: 4px; width: min(420px, 50vw); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); text-shadow: 0 1px 4px #000, 0 0 3px #000; }
  .reel-wrap .bar { height: 11px; background: rgba(0, 0, 0, 0.38); }
  .reel-wrap .bar-tag { width: 54px; font-size: 0.58rem; color: #e8f2f8; }
  .fight-head { margin-bottom: 0; }
  .rhythm { background: rgba(8, 18, 28, 0.4); border-color: rgba(255, 255, 255, 0.12); }
  #app:has(#reel-wrap:not(.hidden)) .prompt, #app:has(#power-wrap:not(.hidden)) .prompt { display: none; }
  #vjoy { background: rgba(8, 18, 28, 0.22); }
  #rod-zone { background: rgba(10, 40, 62, 0.3); width: 100px; height: 100px; }
  .guide, .toast, .prompt, .hud-topleft .hud-card, .lure-mini { background-color: rgba(8, 18, 28, 0.55); }
}

/* ---------- sideways phone: the moving bars (power, tap timing, reel) ride at the top, under the logo ---------- */
@media (pointer: coarse) and (max-height: 520px) {
  .power-wrap, .rhythm, .reel-wrap { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 44px); }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 112px); width: min(340px, 46vw); }
  #toasts { max-width: 24vw; }
}

/* ---------- Captain Shane's bubble: same words, less screen ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .guide { padding: 5px 9px; gap: 7px; border-radius: 10px; background: rgba(8, 18, 28, 0.62); }
  .guide-avatar { width: 24px; height: 24px; border-width: 1.5px; }
  .guide-name { font-size: 0.52rem; margin-bottom: 0; }
  .guide-text { font-size: 0.68rem; line-height: 1.22; }
}
@media (pointer: coarse) and (max-height: 520px) { .guide { width: min(300px, 40vw); } }

/* ---------- sideways phone: the moving bars take the logo's spot, and the logos step aside while they show ---------- */
#brandbar { transition: opacity 0.6s ease; }
@media (pointer: coarse) and (max-height: 520px) {
  .power-wrap, .rhythm, .reel-wrap { top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 84px); }
  #app:has(#reel-wrap:not(.hidden)) #brandbar, #app:has(#power-wrap:not(.hidden)) #brandbar, #app:has(#rhythm:not(.hidden)) #brandbar { opacity: 0; pointer-events: none; }
}

/* very short screens (browser bars showing): everything shrinks so nothing overlaps */
@media (pointer: coarse) and (max-height: 300px) {
  #vjoy, #rod-zone { width: 74px; height: 74px; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
  #vjoy-thumb { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .vjoy-hint { font-size: 0.45rem; top: 3px; }
  .rz-icon { font-size: 1.25rem; }
  .rz-label { font-size: 0.5rem; }
  .hud-drawer .hud-buttons { grid-template-columns: repeat(4, 32px); }
  .hud-drawer .hud-btn, .hud-drawer .bag-chip { width: 32px; min-height: 32px; height: 32px; }
  .hud-drawer .hud-btn::before { font-size: 1.05rem; }
  .hud-drawer .bag-chip { font-size: 0.45rem; }
  .hud-drawer .bag-chip::before { font-size: 0.95rem; }
  .hud-topleft .hud-card { padding: 4px 8px; }
  .hud-topleft .money-text { font-size: 0.9rem; }
  .hud-topleft .xp-bar, .hud-topleft .level-row { display: none; }
  .lure-mini { margin-top: 4px; padding: 3px 8px; font-size: 0.66rem; }
  .reel-wrap, .rhythm { width: min(380px, 44vw); }
  .rhythm-top, .fight-head { font-size: 0.62rem; }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 70px); }
}

/* ---------- upright phone: the moving bars ride at the top where the logos are; logo, money and clock step aside ---------- */
.hud-topleft, .hud-clockcard { transition: opacity 0.5s ease; }
@media (max-width: 760px) and (orientation: portrait) {
  .power-wrap, .rhythm, .reel-wrap { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 10px); width: calc(100vw - 132px); max-width: 480px; }
  .power-track { width: 100%; }
  .power-wrap { width: calc(100vw - 132px); }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 150px); }
  #app:has(#reel-wrap:not(.hidden)) #brandbar, #app:has(#power-wrap:not(.hidden)) #brandbar, #app:has(#rhythm:not(.hidden)) #brandbar,
  #app:has(#reel-wrap:not(.hidden)) .hud-topleft, #app:has(#power-wrap:not(.hidden)) .hud-topleft, #app:has(#rhythm:not(.hidden)) .hud-topleft,
  #app:has(#reel-wrap:not(.hidden)) .hud-clockcard, #app:has(#power-wrap:not(.hidden)) .hud-clockcard, #app:has(#rhythm:not(.hidden)) .hud-clockcard { opacity: 0; pointer-events: none; }
  #app:has(#reel-wrap:not(.hidden)) .prompt, #app:has(#power-wrap:not(.hidden)) .prompt { display: none; }
}

/* upright phone: the bars run nearly the full width (clear of the icon column) and sit on the picture with no glass */
@media (max-width: 760px) and (orientation: portrait) {
  .reel-wrap { left: 10px; right: 66px; width: auto; max-width: none; transform: none; background: transparent; border: 0; padding: 0 4px; gap: 5px; text-shadow: 0 1px 4px #000, 0 0 3px #000; }
  .rhythm { width: calc(100vw - 76px); max-width: none; left: calc(10px + (100vw - 76px) / 2); background: rgba(8, 18, 28, 0.4); border-color: rgba(255, 255, 255, 0.12); }
  .power-wrap { width: calc(100vw - 76px); left: calc(10px + (100vw - 76px) / 2); }
  .power-track { width: 100%; }
  .reel-wrap .bar-row { gap: 8px; }
  .reel-wrap .bar { height: 13px; background: rgba(0, 0, 0, 0.38); }
  .reel-wrap .bar-tag { width: 62px; color: #eef6fb; }
  .surge-banner { font-size: 1rem; white-space: nowrap; }
}

/* FISH ON sign: smack in the middle of the screen, two flashes, gone */
.prompt.fishon {
  top: 50%; left: 50%; bottom: auto; right: auto; width: auto; max-width: 90vw; transform: translate(-50%, -50%);
  white-space: nowrap; text-align: center; font-size: 2.1rem; font-weight: 800; padding: 12px 28px; line-height: 1.1;
  color: var(--gold); border-color: var(--gold); background: rgba(8, 18, 28, 0.55);
  animation: fishOnFlash 1.6s ease-in-out 1 forwards; pointer-events: none;
}
@keyframes fishOnFlash { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: 0.1; } 40% { opacity: 1; } 62% { opacity: 0.1; } 100% { opacity: 0; } }
@media (max-height: 520px) { .prompt.fishon { font-size: 1.5rem; padding: 8px 20px; } }

/* ---------- first-run icon tour (phones) ---------- */
.only-touch-b { display: none; text-align: center; }
@media (pointer: coarse), (hover: none) { .only-touch-b { display: block; } }
#screen-howto .only-touch-b .btn { margin-top: 0; }
.hud-drawer .hud-btn, .hud-drawer .bag-chip { transition: transform 0.35s cubic-bezier(0.2, 1.35, 0.4, 1), background 0.3s ease; }
#hud .hud-drawer .tour-on {
  transform: scale(1.85); position: relative; z-index: 30;
  background: rgba(255, 200, 87, 0.24) !important; border-radius: 14px !important; box-shadow: 0 0 22px rgba(255, 200, 87, 0.75) !important;
}
.tour-bubble {
  position: fixed; z-index: 40; transform: translateY(-50%) translateX(12px); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; max-width: 62vw; padding: 7px 13px; border-radius: 12px;
  background: rgba(8, 18, 28, 0.9); border: 1px solid rgba(255, 200, 87, 0.7); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.tour-bubble.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.tour-bubble b { font-size: 1rem; color: var(--gold); letter-spacing: 0.02em; }
.tour-bubble span { font-size: 0.8rem; color: var(--text); }

/* ---------- upright phone: shop, tackle, journal and the rest fit the width ---------- */
@media (max-width: 760px) {
  .screen { background: rgba(4, 10, 17, 0.88); }
  #app:has(.screen:not(.hidden)) #hud, #app:has(.screen:not(.hidden)) #brandbar { visibility: hidden; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .panel { padding: 14px 14px; width: 96vw; max-height: calc(100vh - 16px); border-radius: 16px; }
  .panel-wide { width: 96vw; height: calc(100vh - 16px); }
  .panel-head { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
  .panel-head .panel-title { flex: 1 1 auto; white-space: nowrap; font-size: 1.25rem; }
  .journal-stats { order: 3; flex-basis: 100%; }
  .tab-row { gap: 6px; }
  .tab-btn { padding: 8px 14px; flex: 1 1 auto; text-align: center; }
  .shop-content { overflow-x: hidden; padding-right: 2px; }
  .shop-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .shop-item-name { flex-wrap: wrap; }
  .shop-item-action { flex-direction: row; justify-content: space-between; align-items: center; min-width: 0; width: 100%; gap: 10px; }
  .shop-item-action .btn { flex: 0 0 auto; }
  .lock-note { text-align: right; }
  .sell-row { flex-wrap: wrap; gap: 8px 12px; }
  .sell-footer { flex-wrap: wrap; }
  .tackle-grid { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: repeat(3, 1fr); }
  .tp-row, .report-cover-row { font-size: 0.82rem; }
}

/* ---------- start picker, save and sign-in windows ---------- */
.start-box, .acct-box { width: min(420px, 92vw); max-height: calc(100vh - 16px); overflow-y: auto; }
.start-choices, .acct-buttons { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.acct-label { display: block; text-align: left; margin: 10px 2px 3px; font-size: 0.82rem; color: var(--dim); }
.acct-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(255, 200, 87, 0.55); background: #06121d; color: #fff; font: inherit; font-size: 1rem; }
.acct-box .name-input { display: block; margin: 0 auto; }
.acct-note { margin: 10px 0 2px; font-size: 0.85rem; line-height: 1.4; color: var(--dim); text-align: left; }
.start-box .acct-note { text-align: center; }
@media (pointer: coarse) and (max-height: 520px) {
  .start-choices { flex-direction: row; flex-wrap: wrap; }
  .start-choices .btn { flex: 1 1 30%; font-size: 0.95rem; padding: 12px 8px; }
  .acct-box .name-input { font-size: 1.5rem; }
  .acct-buttons { flex-direction: row; flex-wrap: wrap; }
  .acct-buttons .btn { flex: 1 1 30%; padding: 9px 8px; font-size: 0.9rem; }
  .acct-box .acct-label { margin-top: 6px; }
  .acct-note { margin: 6px 0 0; font-size: 0.78rem; }
}

/* twitch bar: the good zone fades from the edges to a bright center line. The center is the best place to tap. */
.rhythm-sweet {
  background: linear-gradient(90deg, rgba(47, 158, 90, 0) 0%, rgba(98, 217, 139, 0.45) 30%, #62d98b 50%, rgba(98, 217, 139, 0.45) 70%, rgba(47, 158, 90, 0) 100%);
  border-radius: 0;
}
.rhythm-sweet::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: 50%; width: 3px; margin-left: -1.5px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(98, 217, 139, 0.9);
}
.rhythm.ready .rhythm-sweet { filter: brightness(1.25); }

/* start picker: a photo card for each choice */
.start-box.start-wide { width: min(720px, 94vw); }
.start-box .start-choices { flex-direction: row; gap: 12px; align-items: stretch; }
.start-card {
  position: relative; flex: 1 1 0; min-width: 0; height: 190px; padding: 0; border: 2px solid rgba(255, 200, 87, 0.45); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(4, 10, 17, 0) 38%, rgba(4, 10, 17, 0.88)), var(--img) center / cover no-repeat #061221;
  color: #fff; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.start-card:hover, .start-card:focus-visible { transform: translateY(-3px); border-color: #ffc857; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); outline: none; }
.start-card:active { transform: scale(0.98); }
.sc-name { display: block; padding: 0 12px; font-size: 1.15rem; font-weight: 800; text-shadow: 0 2px 8px #000; }
.sc-sub { display: block; padding: 2px 12px 11px; font-size: 0.78rem; color: #dbe7f0; text-shadow: 0 1px 4px #000; }
@media (max-width: 760px) and (orientation: portrait) {
  .start-box .start-choices { flex-direction: column; }
  .start-card { flex: 0 0 auto; width: 100%; height: 118px; }   /* in a column the flex-basis of 0 would squash the card to nothing and hide the photo */
}
@media (pointer: coarse) and (max-height: 520px) {
  .start-box .start-choices { flex-wrap: nowrap; }
  .start-card { height: 130px; flex: 1 1 0; }
  .sc-name { font-size: 0.95rem; }
  .sc-sub { font-size: 0.7rem; padding-bottom: 8px; }
  .start-box .acct-note { margin: 4px 0 0; }
}

/* video scenes (admin test): a muted looping YouTube video behind the transparent game canvas, sized to cover the screen */
#vid-bg { position: absolute; inset: 0; overflow: hidden; background: #000; display: none; pointer-events: none; }
#vid-bg iframe { position: absolute; left: 50%; top: 50%; width: max(165vw, 293.4vh); height: max(92.8vw, 165vh); transform: translate(-50%, -50%);   /* zoomed up 1.65x so it can slide left and right with your aim, and YouTube's title and logo fall off the edges */ border: 0; pointer-events: none; }

.acct-link { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: 0; color: #ffc857; font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-link:hover { color: #ffe08f; }

#vid-rot { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* mp4 test videos sit in the same zoomed box as the YouTube player (any shape of video fills it) */
#vid-bg #vid-pair { position: absolute; left: 50%; top: 50%; width: max(165vw, 293.4vh); height: max(92.8vw, 165vh); transform: translate(-50%, -50%); pointer-events: none; }
#vid-pair video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }

/* give the video its own graphics layer so the rocking and tilting stay smooth even with a heavy 4K video playing */
#vid-rot, #vid-bg iframe, #vid-bg #vid-pair { will-change: transform; backface-visibility: hidden; }

/* time of day over a video: multiplied onto the video only, under the game canvas, boat and menus */
#vid-tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; background: #fff; }
#vid-haze { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#vid-soft { position: absolute; left: 0; right: 0; height: 10%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent); }

#vid-load { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 18px 30px; border-radius: 16px; background: rgba(8, 18, 28, 0.85); color: #ffc857; font: 700 1.05rem Outfit, sans-serif; letter-spacing: 0.02em; pointer-events: none; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.45); }

/* ================= Intro screen (main menu): photo, big title, Captain Shane, menu, top anglers ================= */
#screen-menu { background: #06121f; backdrop-filter: none; padding: 0; }
#screen-menu .intro { position: absolute; inset: 0; overflow: hidden; --u: min(1vw, 1.7778vh); color: #fff; font-family: "Outfit", "Segoe UI", system-ui, sans-serif; }
#screen-menu .intro-bgpic, #screen-menu .intro-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#screen-menu .intro-bg { object-fit: cover; object-position: 50% 55%; }
#screen-menu .intro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 26, 0.55) 0%, rgba(3, 12, 26, 0.12) 46%, rgba(3, 12, 26, 0) 70%); pointer-events: none; }
/* the stage is a 16:9 box kept at the bottom centre of the screen: everything inside is sized in units of it, so the layout keeps the same proportions on any desktop window */
#screen-menu .intro-stage { position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); transform: translateX(-50%); }
#screen-menu .intro-shane { position: absolute; right: calc(var(--u) * 13.5); bottom: 0; height: calc(var(--u) * 56); width: auto; filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.45)); pointer-events: none; }
#screen-menu .intro-left { position: absolute; left: calc(var(--u) * 6.4); top: 0; width: calc(var(--u) * 39); height: 100%; }
#screen-menu .intro-badge { position: absolute; left: calc(var(--u) * 8.4); top: calc(var(--u) * 1.6); width: calc(var(--u) * 15); height: auto; filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.45)); }
#screen-menu .intro-title { position: absolute; left: calc(var(--u) * -0.6); top: calc(var(--u) * 13.4); width: calc(var(--u) * 39); margin: 0; }
#screen-menu .intro-title img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.5)); }
#screen-menu .menu-buttons { position: absolute; left: 0; top: calc(var(--u) * 32.8); width: calc(var(--u) * 31.7); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.6); margin: 0; }
#screen-menu .menu-buttons .btn-primary, #screen-menu .menu-buttons .btn-tourney { grid-column: 1 / -1; }
#screen-menu .menu-buttons .btn:not(.btn-primary):not(.btn-tourney) { padding: 0 calc(var(--u) * 2.6) 0 calc(var(--u) * 1.5); letter-spacing: 0.08em; }
#screen-menu .menu-buttons .btn:not(.btn-primary):not(.btn-tourney)::after { right: calc(var(--u) * 0.9); }
#screen-menu .menu-buttons .btn { position: relative; width: 100%; height: calc(var(--u) * 3.3); min-height: 32px; display: flex; align-items: center; justify-content: flex-start; padding: 0 calc(var(--u) * 3.2) 0 calc(var(--u) * 2.4); box-sizing: border-box; margin: 0;
  font-family: inherit; font-size: max(12px, calc(var(--u) * 1.3)); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(14, 30, 62, 0.94), rgba(7, 18, 40, 0.94)); border: 1px solid rgba(190, 212, 240, 0.4); border-radius: calc(var(--u) * 0.45);
  box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
#screen-menu .menu-buttons .btn::after { content: "\203A"; position: absolute; right: calc(var(--u) * 1.6); top: 50%; transform: translateY(-52%); font-size: max(20px, calc(var(--u) * 2.4)); font-weight: 600; line-height: 1; }
#screen-menu .menu-buttons .btn:hover { transform: translateX(calc(var(--u) * 0.3)); border-color: rgba(255, 215, 120, 0.85); background: linear-gradient(180deg, rgba(20, 40, 80, 0.96), rgba(9, 22, 48, 0.96)); }
#screen-menu .menu-buttons .btn:active { transform: scale(0.99); }
#screen-menu .menu-buttons .btn-primary { height: calc(var(--u) * 3.8); min-height: 38px; font-size: max(20px, calc(var(--u) * 2.35)); font-style: italic; font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #ffd868 0%, #f1b92f 55%, #d99a14 100%) !important; color: #141006 !important; border: 1px solid rgba(255, 236, 170, 0.85) !important; box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.5) rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
#screen-menu .menu-buttons .btn-primary::after { color: #141006; }
#screen-menu .menu-buttons .btn-tourney { color: #fff; border-color: rgba(190, 212, 240, 0.4); }
#screen-menu .menu-save-info { position: absolute; left: calc(var(--u) * 6.4); top: calc(var(--u) * 1.2); width: calc(var(--u) * 28); margin: 0; font-size: max(11px, calc(var(--u) * 0.85)); color: rgba(220, 232, 245, 0.8); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
#screen-menu .intro-reset { position: absolute; left: calc(var(--u) * 6.4); top: calc(var(--u) * 2.9); width: auto; background: none; border: 0; padding: 0; font: inherit; font-size: max(11px, calc(var(--u) * 0.85)); text-align: left; color: rgba(255, 150, 160, 0.85); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#screen-menu .intro-reset:hover { color: #ff8d99; }
/* top anglers */
#screen-menu .menu-scores { position: absolute; right: calc(var(--u) * 2.3); bottom: calc(var(--u) * 5.4); width: calc(var(--u) * 18.4); margin: 0; padding: calc(var(--u) * 1) calc(var(--u) * 1.3) calc(var(--u) * 1.1); box-sizing: border-box; border-radius: calc(var(--u) * 0.5);
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.9), rgba(5, 14, 32, 0.9)); border: 1px solid rgba(255, 205, 90, 0.55); box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.45); font-size: max(11px, calc(var(--u) * 1.05)); }
#screen-menu .hs-title { text-align: left; font-style: italic; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: max(12px, calc(var(--u) * 1.25)); color: #ffc23d; margin: 0 0 calc(var(--u) * 0.6); }
#screen-menu .hs-head { display: none; }
#screen-menu .hs-row { grid-template-columns: 1.4em 1fr auto; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.45) 0; border-radius: 0; border-top: 1px solid rgba(160, 190, 230, 0.18); font-weight: 600; letter-spacing: 0.04em; }
#screen-menu .hs-row span:nth-child(3), #screen-menu .hs-row span:nth-child(5) { display: none; }
#screen-menu .hs-row span:nth-child(4)::after { content: " XP"; font-weight: 500; opacity: 0.85; }
#screen-menu .hs-row span:nth-child(4) { text-align: right; }
#screen-menu .hs-row.me { background: rgba(255, 200, 87, 0.16); }
#screen-menu .hs-empty { font-size: max(11px, calc(var(--u) * 0.95)); text-align: left; opacity: 0.85; }
/* footer bar */
#screen-menu .intro-footer { position: absolute; left: 0; right: 0; bottom: 0; height: max(34px, calc(var(--u) * 3.3)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4);
  background: linear-gradient(180deg, rgba(9, 22, 46, 0.96), rgba(5, 13, 30, 0.98)); border-top: 1px solid rgba(255, 200, 87, 0.35); box-sizing: border-box; }
#screen-menu .intro-book { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.9); color: #ffc23d; text-decoration: none; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: max(11px, calc(var(--u) * 1.1)); white-space: nowrap; }
#screen-menu .intro-book b { font-size: 1.5em; line-height: 1; }
#screen-menu .intro-book:hover { color: #ffe08f; }
#screen-menu .intro-credit { margin-left: auto; font-size: max(10px, calc(var(--u) * 0.85)); color: rgba(225, 235, 246, 0.82); letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.7); white-space: nowrap; }
#screen-menu .intro-credit a { color: inherit; text-decoration: none; }
#screen-menu .intro-credit a:hover { color: #ffc23d; }
#screen-menu .intro-credit i { width: 4px; height: 4px; border-radius: 50%; background: rgba(225, 235, 246, 0.6); display: block; }
#screen-menu .intro-home { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); min-width: 26px; min-height: 26px; border: 1px solid rgba(255, 200, 87, 0.7); border-radius: 6px; color: #ffc23d; text-decoration: none; font-size: max(14px, calc(var(--u) * 1.3)); line-height: 1; }
#screen-menu .intro-home:hover { background: rgba(255, 200, 87, 0.15); }

/* phones held upright (and narrow windows): badge and title on top, Captain Shane behind the menu, top anglers strip, then the footer */
@media (max-width: 899px) and (orientation: portrait) {
  #screen-menu .intro { --u: 1vw; }
  #screen-menu .intro-bg { object-position: 50% 50%; }
  #screen-menu .intro-shade { background: linear-gradient(180deg, rgba(3, 12, 26, 0.35) 0%, rgba(3, 12, 26, 0) 30%, rgba(3, 12, 26, 0.35) 62%, rgba(3, 12, 26, 0.75) 100%); }
  #screen-menu .intro-stage { left: 0; width: 100%; height: 100%; transform: none; }
  #screen-menu .intro-left { left: 0; width: 100%; }
  #screen-menu .intro-badge { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 2.2vh); width: min(36vw, 17vh); transform: translateX(-50%); }
  #screen-menu .intro-title { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 2.2vh + min(36vw, 17vh) * 0.92 + 0.6vh); width: min(94vw, 58vh); transform: translateX(-50%); }
  #screen-menu .intro-shane { right: -3vw; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 2.2vh + min(36vw, 17vh) * 0.92 + 0.6vh + min(94vw, 58vh) * 0.4 - 2vh); height: 46vh; }
  #screen-menu .menu-buttons { left: 5vw; right: 5vw; top: auto; bottom: calc(max(46px, 7.2vh) + 10.5vh + 3.6vh); width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1vh 2.6vw; }
  #screen-menu .menu-buttons .btn { height: 6.2vh; min-height: 44px; font-size: max(12px, 3.2vw); padding: 0 8vw 0 3.6vw; letter-spacing: 0.1em; }
  #screen-menu .menu-buttons .btn::after { right: 3vw; font-size: 24px; }
  #screen-menu .menu-buttons .btn-primary { grid-column: 1 / -1; height: 7.4vh; min-height: 52px; font-size: max(20px, 6.2vw); }
  #screen-menu .menu-buttons .btn-tourney { grid-column: 1 / -1; }
  #screen-menu .menu-save-info { left: 5vw; right: 5vw; top: auto; width: auto; bottom: calc(max(46px, 7.2vh) + 10.5vh + 0.4vh); font-size: max(11px, 2.9vw); text-align: left; }
  #screen-menu .intro-reset { left: auto; right: 5vw; top: auto; bottom: calc(max(46px, 7.2vh) + 10.5vh + 0.4vh); width: auto; font-size: max(11px, 2.9vw); }
  #screen-menu .menu-scores { left: 5vw; right: 5vw; bottom: calc(max(46px, 7.2vh) + 1vh); width: auto; height: calc(7.2vh + 1px); min-height: 56px; padding: 1vh 3vw; display: flex; align-items: center; gap: 3vw; font-size: max(11px, 3vw); overflow: hidden; }
  #screen-menu .hs-title { margin: 0; white-space: nowrap; font-size: max(11px, 3vw); writing-mode: horizontal-tb; }
  #screen-menu .hs-row { display: flex; gap: 1.6vw; border-top: 0; padding: 0; white-space: nowrap; flex: 0 0 auto; }
  #screen-menu .hs-row:nth-child(n+5) { display: none; }
  #screen-menu .hs-row.hs-head { display: none; }
  #screen-menu .hs-row span:nth-child(1)::after { content: "."; }
  #screen-menu .intro-footer { height: max(46px, 7.2vh); padding: 0 4vw; gap: 8px; }
  #screen-menu .intro-book { font-size: max(10px, 2.9vw); letter-spacing: 0.06em; gap: 1.8vw; }
  #screen-menu .intro-book svg { width: 18px; height: 18px; flex: 0 0 auto; }
  #screen-menu .intro-credit { display: none; }
  #screen-menu .intro-home { margin-left: auto; width: 34px; height: 34px; }
}

/* phones held sideways, and any short window: the title and menu on the left, Captain Shane on the right, nothing tiny to tap */
@media (max-height: 520px) and (orientation: landscape) {
  #screen-menu .intro { --u: 1vh; }
  #screen-menu .intro-stage { left: 0; width: 100%; height: 100%; transform: none; }
  #screen-menu .intro-shane { right: 4vw; height: 90%; bottom: 34px; }
  #screen-menu .intro-left { left: 4vw; width: 52vw; }
  #screen-menu .intro-badge { left: 0; top: 1.5vh; width: 15vh; transform: none; }
  #screen-menu .intro-title { left: 14.5vh; top: 0.5vh; width: min(42vw, 72vh); transform: none; }
  #screen-menu .menu-buttons { left: 0; top: 33vh; bottom: auto; width: min(50vw, 100vh); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #screen-menu .menu-buttons .btn { height: 36px; min-height: 36px; font-size: 12px; padding: 0 26px 0 12px; letter-spacing: 0.08em; }
  #screen-menu .menu-buttons .btn::after { right: 10px; font-size: 20px; }
  #screen-menu .menu-buttons .btn-primary { grid-column: 1 / -1; height: 44px; font-size: 20px; }
  #screen-menu .menu-buttons .btn-tourney { grid-column: 1 / -1; }
  #screen-menu .menu-save-info, #screen-menu .intro-reset { display: none; }
  #screen-menu .menu-scores { display: none; }
  #screen-menu .intro-footer { height: 34px; }
  #screen-menu .intro-book { font-size: 11px; }
  #screen-menu .intro-credit { font-size: 10px; }
  #screen-menu .intro-home { width: 26px; height: 26px; }
}


/* ================= Start screen (the first screen: Start Game): same photo, title and Captain Shane as the intro ================= */
#boot-loader .intro-bgpic, #boot-loader .intro-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#boot-loader .intro-bg { object-fit: cover; object-position: 50% 55%; }
#boot-loader .intro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 26, 0.55) 0%, rgba(3, 12, 26, 0.12) 46%, rgba(3, 12, 26, 0) 70%); pointer-events: none; }
#boot-loader .intro-stage { position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 100); height: calc(var(--u) * 56.25); transform: translateX(-50%); }
#boot-loader .intro-shane { position: absolute; right: calc(var(--u) * 13.5); bottom: 0; height: calc(var(--u) * 56); width: auto; filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.45)); pointer-events: none; }
#boot-loader .intro-left { position: absolute; left: calc(var(--u) * 6.4); top: 0; width: calc(var(--u) * 39); height: 100%; }
#boot-loader .intro-badge { position: absolute; left: calc(var(--u) * 8.4); top: calc(var(--u) * 1.6); width: calc(var(--u) * 15); height: auto; filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.45)); }
#boot-loader .intro-title { position: absolute; left: calc(var(--u) * -0.6); top: calc(var(--u) * 13.4); width: calc(var(--u) * 39); margin: 0; }
#boot-loader .intro-title img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.5)); }
#boot-loader .intro-footer { position: absolute; left: 0; right: 0; bottom: 0; height: max(34px, calc(var(--u) * 3.3)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4);
  background: linear-gradient(180deg, rgba(9, 22, 46, 0.96), rgba(5, 13, 30, 0.98)); border-top: 1px solid rgba(255, 200, 87, 0.35); box-sizing: border-box; }
#boot-loader .intro-book { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.9); color: #ffc23d; text-decoration: none; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: max(11px, calc(var(--u) * 1.1)); white-space: nowrap; }
#boot-loader .intro-book b { font-size: 1.5em; line-height: 1; }
#boot-loader .intro-book:hover { color: #ffe08f; }
#boot-loader .intro-credit { margin-left: auto; font-size: max(10px, calc(var(--u) * 0.85)); color: rgba(225, 235, 246, 0.82); letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.7); white-space: nowrap; }
#boot-loader .intro-credit a { color: inherit; text-decoration: none; }
#boot-loader .intro-credit a:hover { color: #ffc23d; }
#boot-loader .intro-credit i { width: 4px; height: 4px; border-radius: 50%; background: rgba(225, 235, 246, 0.6); display: block; }
#boot-loader .intro-home { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); min-width: 26px; min-height: 26px; border: 1px solid rgba(255, 200, 87, 0.7); border-radius: 6px; color: #ffc23d; text-decoration: none; font-size: max(14px, calc(var(--u) * 1.3)); line-height: 1; }
#boot-loader .intro-home:hover { background: rgba(255, 200, 87, 0.15); }
@media (max-width: 899px) and (orientation: portrait) {
#boot-loader .intro-bg { object-position: 50% 50%; }
#boot-loader .intro-shade { background: linear-gradient(180deg, rgba(3, 12, 26, 0.35) 0%, rgba(3, 12, 26, 0) 30%, rgba(3, 12, 26, 0.35) 62%, rgba(3, 12, 26, 0.75) 100%); }
#boot-loader .intro-stage { left: 0; width: 100%; height: 100%; transform: none; }
#boot-loader .intro-left { left: 0; width: 100%; }
#boot-loader .intro-badge { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 2.2vh); width: min(36vw, 17vh); transform: translateX(-50%); }
#boot-loader .intro-title { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 2.2vh + min(36vw, 17vh) * 0.92 + 0.6vh); width: min(94vw, 58vh); transform: translateX(-50%); }
#boot-loader .intro-shane { right: -3vw; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 2.2vh + min(36vw, 17vh) * 0.92 + 0.6vh + min(94vw, 58vh) * 0.4 - 2vh); height: 46vh; }
#boot-loader .intro-footer { height: max(46px, 7.2vh); padding: 0 4vw; gap: 8px; }
#boot-loader .intro-book { font-size: max(10px, 2.9vw); letter-spacing: 0.06em; gap: 1.8vw; }
#boot-loader .intro-book svg { width: 18px; height: 18px; flex: 0 0 auto; }
#boot-loader .intro-credit { display: none; }
#boot-loader .intro-home { margin-left: auto; width: 34px; height: 34px; }
}
@media (max-height: 520px) and (orientation: landscape) {
#boot-loader .intro-stage { left: 0; width: 100%; height: 100%; transform: none; }
#boot-loader .intro-shane { right: 4vw; height: 90%; bottom: 34px; }
#boot-loader .intro-left { left: 4vw; width: 52vw; }
#boot-loader .intro-badge { left: 0; top: 1.5vh; width: 15vh; transform: none; }
#boot-loader .intro-title { left: 14.5vh; top: 0.5vh; width: min(42vw, 72vh); transform: none; }
#boot-loader .intro-footer { height: 34px; }
#boot-loader .intro-book { font-size: 11px; }
#boot-loader .intro-credit { font-size: 10px; }
#boot-loader .intro-home { width: 26px; height: 26px; }
}
#boot-loader { position: absolute; inset: 0; z-index: 500; display: block; padding: 0; background: #06121f; overflow: hidden; }
#boot-loader .intro { position: absolute; inset: 0; overflow: hidden; --u: min(1vw, 1.7778vh); color: #fff; font-family: "Outfit", "Segoe UI", system-ui, sans-serif; }
#boot-loader .boot-actions { position: absolute; left: 0; top: calc(var(--u) * 33.4); width: calc(var(--u) * 31.7); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 0.8); }
#boot-loader .boot-spin { display: block; margin: 0; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); min-width: 30px; min-height: 30px; border-width: 3px; }
#boot-loader .boot-text { font-size: max(13px, calc(var(--u) * 1.3)); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
#boot-loader .boot-sub { font-size: max(11px, calc(var(--u) * 0.95)); color: rgba(225, 235, 246, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
#boot-loader .boot-start, #boot-loader .boot-hint { display: none; }
#boot-loader.ready .boot-spin, #boot-loader.ready .boot-sub, #boot-loader.ready .boot-text { display: none; }
#boot-loader.ready .boot-start { display: flex; align-items: center; width: 100%; min-width: 0; height: calc(var(--u) * 5); min-height: 46px; margin: 0; padding: 0 calc(var(--u) * 3.2) 0 calc(var(--u) * 2.6); box-sizing: border-box; font-family: inherit; font-size: max(20px, calc(var(--u) * 2.35)); font-style: italic; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; position: relative; cursor: pointer;
  border-radius: calc(var(--u) * 0.45); background: linear-gradient(180deg, #ffd868 0%, #f1b92f 55%, #d99a14 100%) !important; color: #141006 !important; border: 1px solid rgba(255, 236, 170, 0.85) !important; box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.5) rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
#boot-loader.ready .boot-start::after { content: "\203A"; position: absolute; right: calc(var(--u) * 1.6); top: 50%; transform: translateY(-52%); font-size: max(24px, calc(var(--u) * 2.8)); font-style: normal; line-height: 1; }
#boot-loader.ready .boot-start:hover { filter: brightness(1.06); }
#boot-loader.ready .boot-hint { display: block; font-size: max(11px, calc(var(--u) * 1)); color: rgba(225, 235, 246, 0.88); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
@media (max-width: 899px) and (orientation: portrait) {
  #boot-loader .intro { --u: 1vw; }
  #boot-loader .boot-actions { position: fixed; left: 5vw; right: 5vw; top: auto; width: auto; bottom: calc(max(46px, 7.2vh) + 7vh); }
  #boot-loader.ready .boot-start { height: 7.6vh; min-height: 54px; font-size: max(22px, 6.4vw); }
  #boot-loader .boot-text, #boot-loader .boot-sub, #boot-loader.ready .boot-hint { text-align: center; }
  #boot-loader .boot-spin { align-self: center; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #boot-loader .intro { --u: 1vh; }
  #boot-loader .boot-actions { top: 36vh; width: min(50vw, 100vh); }
  #boot-loader.ready .boot-start { height: 46px; min-height: 46px; font-size: 22px; }
}

/* the green work-the-lure bar: bottom-left, transparent — mirrors the fight reel bars */
#app #rhythm { left: 16px !important; right: auto !important; top: auto !important; bottom: 24px !important; transform: none !important; width: min(300px, 64vw) !important; max-width: none !important; }
#app #rhythm.good { animation-name: rhGood; }
#app #rhythm.soon, #app #rhythm.late { animation-name: rhBad; }
@media (max-width: 600px) { #app #rhythm { left: 50% !important; transform: translateX(-50%) !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important; width: min(280px, 88vw) !important; } }

/* ---------- sideways phone: the moving bars (power, reel) ride at the bottom, between the thumb pad and the rod pad ---------- */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .power-wrap, .reel-wrap { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; width: min(420px, 46vw) !important; max-width: none !important; }
  .power-wrap { left: 50% !important; transform: translateX(-50%); }
  .guide { top: calc(env(safe-area-inset-top, 0px) + 12px); }
}

/* ---------- right-click snapshot: a photo card in the same glass, gold and sky blue as the rest ---------- */
.snap-flash { position: absolute; inset: 0; z-index: 140; background: #fff; pointer-events: none; animation: snapFlash 0.45s ease-out forwards; }
@keyframes snapFlash { from { opacity: 0.85; } to { opacity: 0; } }
.snap-overlay { position: absolute; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(10, 30, 50, 0.55), rgba(3, 8, 14, 0.82)); backdrop-filter: blur(5px); animation: screenIn 0.25s ease; transition: opacity 0.2s ease; }
.snap-overlay.leaving { opacity: 0; }
.snap-card { position: relative; width: min(760px, 94vw); max-height: 94vh; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 30px 22px 18px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(16, 27, 40, 0.97), rgba(9, 16, 25, 0.97)); border: 2px solid rgba(255, 200, 87, 0.55);
  box-shadow: 0 0 60px rgba(255, 200, 87, 0.18), var(--shadow); animation: snapDrop 0.5s cubic-bezier(0.18, 1.3, 0.4, 1); }
@keyframes snapDrop { from { opacity: 0; transform: translateY(-40px) rotate(-3deg) scale(0.86); } }
.snap-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; white-space: nowrap; color: #2a1c04; background: linear-gradient(135deg, #ffe29b, #ffb13d); border-radius: 8px; padding: 5px 18px; box-shadow: 0 4px 18px rgba(255, 177, 61, 0.45); }
.snap-photo { position: relative; flex: 0 1 auto; min-height: 0; padding: 8px; background: #f4f1e8; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); transform: rotate(-0.6deg); }
.snap-photo img { display: block; width: 100%; max-height: calc(94vh - 270px); object-fit: contain; background: #06101a; border-radius: 2px; }
.snap-tape { position: absolute; top: -11px; width: 74px; height: 22px; background: rgba(255, 224, 150, 0.7); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.snap-tape.l { left: 18px; transform: rotate(-6deg); }
.snap-tape.r { right: 18px; transform: rotate(5deg); }
.snap-cap { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.snap-cap b { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.03em; color: var(--gold); }
.snap-cap span { font-size: 0.85rem; color: var(--dim); }
.snap-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.snap-actions .btn { min-width: 120px; }
.snap-note { min-height: 1.1em; font-size: 0.8rem; color: var(--ok); }
@media (max-height: 520px) {
  .snap-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px 14px 10px; gap: 8px; }
  .snap-photo { flex: 0 0 auto; width: min(54vw, 90vh * 1.7); }
  .snap-photo img { max-height: 70vh; }
  .snap-cap, .snap-actions { flex-direction: column; flex: 1 1 140px; }
  .snap-note { flex-basis: 100%; }
}

/* ---------- start screen: Captain Shane in the middle, the "before you play" box on the right (under Start on a phone) ---------- */
#boot-loader .intro-shane { right: auto; left: calc(var(--u) * 51); transform: translateX(-50%); height: calc(var(--u) * 49); }
#boot-loader .boot-info { position: absolute; left: calc(var(--u) * 63.4); top: calc(var(--u) * -17.4); width: calc(var(--u) * 27); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.7) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.1); color: #eaf3fa; text-align: left;
  background: linear-gradient(160deg, rgba(14, 30, 48, 0.58), rgba(6, 14, 24, 0.5)); border: 1px solid rgba(255, 200, 87, 0.4); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 calc(var(--u) * 0.9) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); font-size: max(11px, calc(var(--u) * 1.05)); line-height: 1.42; }
#boot-loader .bi-head { display: flex; align-items: center; gap: 10px; margin-bottom: calc(var(--u) * 1); font-size: max(11px, calc(var(--u) * 1.05)); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #ffc857; white-space: nowrap; }
#boot-loader .bi-head span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 200, 87, 0.7), rgba(255, 200, 87, 0)); }
#boot-loader .bi-head span:first-child { display: none; }
#boot-loader .boot-info ul { list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
#boot-loader .boot-info li { display: flex; gap: calc(var(--u) * 0.9); align-items: flex-start; }
#boot-loader .boot-info li i { flex: 0 0 auto; width: 1.9em; height: 1.9em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-style: normal; font-size: 0.95em; line-height: 1; color: #ffc857; background: rgba(255, 200, 87, 0.13); border: 1px solid rgba(255, 200, 87, 0.45); }
#boot-loader .boot-info li.bi-legal i { color: #ff9f6b; background: rgba(255, 140, 90, 0.13); border-color: rgba(255, 140, 90, 0.45); }
#boot-loader .boot-info p { color: rgba(225, 235, 246, 0.92); }
#boot-loader .boot-info b { color: #fff; }
#boot-loader .boot-info em { color: #ffc857; font-style: normal; font-weight: 700; }
#boot-loader .boot-info li.bi-tilt, #boot-loader .boot-info .bi-ios { display: none; }
#boot-loader.is-touch .boot-info li.bi-tilt { display: flex; }
#boot-loader.is-ios .boot-info .bi-ios { display: inline; }
#boot-loader.is-touch .boot-info li.bi-sound { display: none; }
@media (max-width: 899px) and (orientation: portrait) {
  #boot-loader .intro-shane { left: auto; right: -3vw; transform: none; margin-top: -9vh; }
  #boot-loader .boot-info { position: static; width: auto; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(160deg, rgba(10, 24, 40, 0.8), rgba(5, 12, 22, 0.76)); font-size: 10.5px; line-height: 1.35; }
  #boot-loader .bi-head { margin-bottom: 6px; font-size: 10px; }
  #boot-loader .boot-info ul { gap: 7px; }
  #boot-loader .boot-info li i { width: 1.8em; height: 1.8em; }
  #boot-loader .boot-actions { bottom: calc(max(46px, 7.2vh) + 10px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  #boot-loader .intro-shane { left: auto; right: 4vw; transform: none; }
  #boot-loader .boot-info { position: fixed; left: auto; right: 1.5vw; top: 6px; width: 31vw; max-width: 270px; padding: 7px 9px; border-radius: 10px; font-size: 9px; line-height: 1.3; z-index: 2; }
  #boot-loader .bi-head { margin-bottom: 4px; font-size: 8.5px; }
  #boot-loader .boot-info ul { gap: 4px; }
  #boot-loader .boot-info li { gap: 6px; }
  #boot-loader .boot-info li i { width: 1.7em; height: 1.7em; }
}

/* ---------- photo archives (journal tab) and the share-link box in the snapshot card ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.photo-tile { display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 8px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); background: #f4f1e8; border: 0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transition: transform 0.15s ease; }
.photo-tile:nth-child(odd) { transform: rotate(-0.8deg); }
.photo-tile:nth-child(even) { transform: rotate(0.7deg); }
.photo-tile:hover { transform: rotate(0) scale(1.03); }
.photo-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #06101a; border-radius: 2px; }
.photo-tile .pt-place { margin-top: 5px; font-weight: 800; font-size: 0.82rem; color: #1b2733; }
.photo-tile .pt-when { font-size: 0.7rem; color: #5b6b78; }
.snap-link { display: none; width: 100%; padding: 8px 10px; font-family: inherit; font-size: 0.8rem; color: var(--text); text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke); border-radius: 8px; user-select: text; -webkit-user-select: text; }
.snap-link.on { display: block; }

#app:has(.snap-overlay) .guide, #app:has(.snap-overlay) .toast { display: none !important; }
.snap-card { overflow-y: auto; }

/* ---------- desktop HUD buttons: glass pills with a colored line icon each (phones keep their own icon buttons) ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .hud-buttons { gap: 8px; }
  .hud-btn { --ac: #5fd4ff; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
    background: linear-gradient(180deg, rgba(22, 40, 60, 0.86), rgba(7, 15, 25, 0.86)); border: 1px solid color-mix(in srgb, var(--ac) 42%, rgba(255, 255, 255, 0.1));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
  .hud-btn::before { content: ""; width: 19px; height: 19px; flex: 0 0 auto; background: var(--ac); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ac) 70%, transparent)); transition: transform 0.15s ease; }
  .hud-btn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 24%, rgba(22, 40, 60, 0.9)), rgba(7, 15, 25, 0.9)); border-color: var(--ac);
    transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0, 0, 0, 0.45), 0 0 16px color-mix(in srgb, var(--ac) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .hud-btn:hover::before { transform: scale(1.12) rotate(-4deg); }
  .hud-btn:active { transform: translateY(0) scale(0.97); }
  #btn-map { --ac: #5fd4ff; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
  #btn-shop { --ac: #ffc857; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
  #btn-tackle { --ac: #62d98b; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v11a5 5 0 0 1-10 0v-2'/%3E%3Cpath d='M2 14l2-2 2 2'/%3E%3Cpath d='M11 3h6'/%3E%3C/svg%3E"); }
  #btn-report { --ac: #c08bff; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M7 5H5v16h14V5h-2'/%3E%3Cpath d='M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
  #btn-journal { --ac: #ff9f6b; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M9 7h6M9 11h6'/%3E%3C/svg%3E"); }
  #btn-photo { --ac: #ff7ab6; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Cpath d='M12 10a3.5 3.5 0 1 0 0 7 3.5 3.5 0 1 0 0-7z'/%3E%3C/svg%3E"); }
  #btn-pause { --ac: #9db1c0; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E"); }
}

/* ---------- daily challenge, lure cards, trophy wall, booking link, pause "Book a Real Trip" ---------- */
.daily-card { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 200, 87, 0.16), rgba(255, 140, 60, 0.1)); border: 1px solid rgba(255, 200, 87, 0.5); }
.daily-card.done { border-color: rgba(98, 217, 139, 0.6); background: linear-gradient(135deg, rgba(98, 217, 139, 0.14), rgba(40, 120, 80, 0.08)); }
.dc-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; color: #ffc857; }
.dc-text { font-size: 1.05rem; font-weight: 700; margin: 3px 0 8px; }
.dc-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 0.8rem; color: var(--dim); }
.lure-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.lcard { padding: 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(20, 38, 58, 0.9), rgba(8, 16, 26, 0.9)); border: 1px solid color-mix(in srgb, var(--c, #5fd4ff) 55%, rgba(255, 255, 255, 0.12)); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); text-align: center; }
.lcard.locked { opacity: 0.45; filter: grayscale(0.7); }
.lcard.gold { border-color: #ffc857; box-shadow: 0 0 22px rgba(255, 200, 87, 0.3); }
.lcard .lure-icon { width: 86px; height: 46px; margin: 2px auto 4px; display: block; }
.lc-name { font-weight: 800; font-size: 0.9rem; }
.lc-stars { color: #ffc857; letter-spacing: 3px; margin: 3px 0 6px; font-size: 1rem; }
.lc-foot { margin-top: 6px; font-size: 0.74rem; color: var(--dim); }
.lc-bonus { font-size: 0.78rem; color: var(--ok); font-weight: 700; min-height: 1.1em; }
.trophy-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-top: 12px; padding: 14px; border-radius: 14px; background: repeating-linear-gradient(90deg, #3a2a1c 0 46px, #33261a 46px 48px); }
.tfr { padding: 10px; text-align: center; border-radius: 6px; background: #17110c; border: 6px solid #7a5836; box-shadow: inset 0 0 0 2px #2a1d12, 0 8px 18px rgba(0, 0, 0, 0.5); }
.tfr .tr-plate { height: 82px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rarity) 30%, #1a2733), #0c141c); }
.tfr .tr-plate img, .tfr .tr-plate svg { max-width: 92%; max-height: 74px; width: auto; height: auto; }
.tfr.empty { opacity: 0.55; } .tfr.empty .tr-plate { font-size: 2rem; color: #6c7d8b; }
.tr-name { margin-top: 6px; font-weight: 800; font-size: 0.86rem; color: #f3e3c2; }
.tr-nick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; color: var(--rarity); }
.tr-stats { font-size: 0.78rem; color: #cdbb97; }
.tr-count { font-size: 0.7rem; color: #9a8a6c; }
.catch-book { display: block; margin: 10px auto 0; max-width: 280px; font-size: 0.74rem; line-height: 1.35; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-align: center; }
#pause-book { text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* ---------- phones held upright: the logo, title and Captain Shane are fitted by measuring (see fitIntro in main.js), so the start screen and the
   menu never put the controls over his face, whatever the phone's text size or browser bars. The numbers fall back to the old look. ---------- */
@media (max-width: 899px) and (orientation: portrait) {
  #boot-loader .intro-badge, #screen-menu .intro-badge { width: var(--b-w, min(30vw, 14vh)); top: var(--b-top, calc(env(safe-area-inset-top, 0px) + 1.5vh)); }
  #boot-loader .intro-title, #screen-menu .intro-title { width: var(--t-w, min(84vw, 46vh)); top: var(--t-top, 20vh); }
  #boot-loader .intro-shane, #screen-menu .intro-shane { top: var(--s-top, 34vh); height: var(--s-h, 46vh); margin-top: 0; }
}

/* ---------- phone held upright: the cast power bar and the reel-in meter (Fish on! Tension and Catch) sit at the base of the rod, like the work-the-lure bar,
   instead of up at the top. Sideways phones and desktop keep their own places. ---------- */
@media (max-width: 760px) and (orientation: portrait) {
  #app .power-wrap, #app .reel-wrap {
    left: 50% !important; right: auto !important; top: auto !important;
    bottom: calc(var(--boat-h, 22vh) * 0.85 + 12px) !important;
    transform: translateX(-50%) !important;
    width: min(360px, 90vw) !important; max-width: none !important;
  }
}

/* ---------- phones and tablets: a small Exit pill in the lower right corner (hidden on a computer) ---------- */
#btn-exit { display: none; position: absolute; z-index: 16; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; font-family: inherit; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd9a8; background: rgba(8, 18, 28, 0.62); border: 1px solid rgba(255, 190, 120, 0.55); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
#btn-exit:active { background: rgba(255, 160, 80, 0.3); }
#exit-confirm { position: absolute; z-index: 17; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 106px); width: min(270px, 80vw); padding: 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(16, 27, 40, 0.97), rgba(9, 16, 25, 0.97)); border: 1px solid rgba(255, 200, 87, 0.55); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); text-align: center; }
#exit-confirm.hidden { display: none; }
.ec-text { font-size: 0.9rem; margin-bottom: 10px; }
.ec-buttons { display: flex; flex-direction: column; gap: 8px; }
.ec-buttons .btn { min-height: 44px; }
@media (pointer: coarse) {
  #btn-exit { display: inline-flex; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); }
}
/* held sideways the rod button fills the corner: the pill sits just above it */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  #btn-exit { right: calc(env(safe-area-inset-right, 0px) + 40px); bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); }
  #exit-confirm { right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 176px); }
}

/* ---------- money and XP: the dollars big, the XP to the right of them (bigger on a computer) ---------- */
.hud-wallet { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 12px 18px; }
.hud-wallet .money-text { font-size: 2.35rem; line-height: 1; }
.hud-wallet .xp-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud-wallet .level-row { margin-top: 0; gap: 10px; }
.hud-wallet .level-badge { font-size: 1rem; padding: 3px 11px; }
.hud-wallet .xp-bar { flex: 0 0 auto; width: 140px; height: 13px; border-radius: 7px; }
.hud-wallet .xp-fill { border-radius: 7px; }
.hud-wallet .xp-text { font-size: 1rem; font-weight: 700; color: #d6e4ef; margin-top: 0; white-space: nowrap; }

/* phones: no logos across the top (the home-page logo goes), and the dollars still bigger than before, with the XP bar beside them */
@media (max-width: 760px), (pointer: coarse) {
  .brandbar-home { display: none !important; }
}
@media (max-width: 760px), (pointer: coarse) {
  .hud-wallet { gap: 10px; padding: 7px 12px; }
  .hud-topleft .hud-wallet .money-text { font-size: 1.8rem; }
  .hud-topleft .hud-wallet .xp-bar { width: 78px; height: 10px; }
  .hud-topleft .hud-wallet .level-badge { font-size: 0.82rem; padding: 2px 8px; }
  .hud-topleft .hud-wallet .xp-text { display: block; font-size: 0.82rem; }
}
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .hud-topleft .hud-wallet .money-text { font-size: 1.5rem; }
}
@media (pointer: coarse) and (max-height: 300px) {
  .hud-topleft .hud-wallet .money-text { font-size: 1.2rem; }
  .hud-topleft .hud-wallet .level-row { display: flex; }
  .hud-topleft .hud-wallet .xp-text { font-size: 0.7rem; }
}

/* ---------- the little reel beside the CATCH bar (turns while you reel) ---------- */
.reel-tag { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; min-width: 64px; }
.reel-spool { flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .reel-tag > span { display: none; }
  .reel-spool { width: 30px; height: 30px; }
}

/* ---------- the fight screen made easier to read: tension zones, big catch number, pop, win and lose flashes ---------- */
.reel-wrap[data-zone="safe"] .tension-bar { border-color: rgba(62, 201, 126, 0.55); }
.reel-wrap[data-zone="warm"] .tension-bar { border-color: rgba(255, 217, 94, 0.8); box-shadow: 0 0 8px rgba(255, 217, 94, 0.45); }
.reel-wrap[data-zone="hot"] .tension-bar { border-color: rgba(255, 150, 60, 0.95); box-shadow: 0 0 12px rgba(255, 150, 60, 0.65); }
.reel-wrap[data-zone="danger"] .tension-bar { border-color: #ff4458; box-shadow: 0 0 16px rgba(255, 68, 88, 0.85); animation: zoneBlink 0.28s ease-in-out infinite alternate; }
.reel-wrap[data-zone="warm"] #tension-tag { color: #ffd95e; }
.reel-wrap[data-zone="hot"] #tension-tag { color: #ffa23c; }
.reel-wrap[data-zone="danger"] #tension-tag { color: #ff6677; }
#tension-tag { white-space: nowrap; transition: color 0.15s; }
@keyframes zoneBlink { from { box-shadow: 0 0 8px rgba(255, 68, 88, 0.5); } to { box-shadow: 0 0 20px rgba(255, 68, 88, 1); } }
.catch-pct { min-width: 46px; text-align: left; font-weight: 800; font-size: 1.05rem; color: #bfeaff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); font-variant-numeric: tabular-nums; }
.reel-wrap.near .progress-fill { background: linear-gradient(90deg, #ffd95e, #fff3b0); box-shadow: 0 0 10px rgba(255, 217, 94, 0.8); }
.reel-wrap.near .catch-pct { color: #ffd95e; }
.reel-wrap .progress-bar { height: 20px; }
.reel-wrap.hook-bump { animation: hookBump 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes hookBump { 0% { scale: 0.82; opacity: 0.2; } 100% { scale: 1; opacity: 1; } }   /* the scale property leaves the centering transform alone */
#vignette.flash-win { animation: flashWin 0.9s ease-out; }
#vignette.flash-lose { animation: flashLose 0.9s ease-out; }
@keyframes flashWin { 0% { box-shadow: inset 0 0 220px rgba(255, 214, 90, 0.85); } 100% { box-shadow: inset 0 0 0 rgba(255, 214, 90, 0); } }
@keyframes flashLose { 0% { box-shadow: inset 0 0 220px rgba(255, 50, 70, 0.8); } 100% { box-shadow: inset 0 0 0 rgba(255, 50, 70, 0); } }
/* phones: the bars are slimmer and left-anchored (no centering transform), so the pop uses scale only; the number stays readable */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .reel-wrap .progress-bar { height: 15px; }
  .catch-pct { min-width: 38px; font-size: 0.85rem; }
}

/* the tip bubble's height is set by guide.js (top of the screen, stepping below anything in the way); it glides when it moves */
.guide { transition: top 0.35s ease, opacity 0.3s ease; }

/* ---------- About the game: visible page text under the start screen (the page scrolls only before you press Start) ---------- */
html.prestart, html.prestart body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
html.prestart #app { position: relative; inset: auto; height: 100vh; height: 100dvh; overflow: hidden; transform: translateZ(0); }   /* the transform keeps the start screen's fixed pieces inside the first screen */
.seo-cue { color: #9fdcff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.seo-cue:hover, .seo-cue:focus-visible { color: #ffc857; outline: none; }
.seo-about { display: none; background: #06101a; color: #d8e6f0; padding: 56px 20px 72px; font-size: 1rem; line-height: 1.65; user-select: text; -webkit-user-select: text; }
html.prestart .seo-about { display: block; }
.seo-wrap { max-width: 820px; margin: 0 auto; }
.seo-about h2 { font-size: clamp(1.45rem, 4.4vw, 2rem); line-height: 1.2; margin: 0 0 14px; color: #fff; }
.seo-about h3 { font-size: 1.12rem; margin: 30px 0 8px; color: #ffc857; letter-spacing: 0.02em; }
.seo-about p { margin: 0 0 12px; }
.seo-about ol, .seo-about ul { margin: 0 0 12px; padding-left: 1.3em; }
.seo-about li { margin-bottom: 6px; }
.seo-about a { color: #7fd7ff; text-underline-offset: 3px; }
.seo-controls dt { font-weight: 800; color: #fff; margin-top: 10px; }
.seo-controls dd { margin: 2px 0 8px; }
.seo-small { font-size: 0.85rem; color: #9db3c4; }

/* ================= Phone layout tidy-up (2026-10-19) =================
   Upright phone: the round icons no longer run down the right edge. They sit in one neat strip across the top, under the money card and clock,
   with the lure chip and Livewell on the next row. That frees the right side, so the bars can use the full width.
   Also: the FISH ON sign always fits, the prompt leaves room for Exit, and sideways Exit clears the Livewell label. */
.prompt.fishon { font-size: clamp(1.25rem, 7.6vw, 2.1rem); padding: 10px clamp(14px, 5vw, 28px); max-width: 94vw; }
@media (max-height: 520px) { .prompt.fishon { font-size: 1.5rem; padding: 8px 20px; } }

@media (max-width: 760px) and (orientation: portrait) {
  :root { --hud-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .hud-burger { display: none !important; }

  /* scene chip has no room between wallet and clock on a narrow phone: show it on landscape/desktop only */
  #hud-scene { display: none !important; }

  /* row 1: money and level on the left, clock on the right (the money card is narrow enough to clear the clock) */
  .hud-topleft { top: var(--hud-top); left: 10px; }
  .hud-topleft .hud-wallet { gap: 8px; padding: 5px 10px; height: 52px; box-sizing: border-box; }
  .hud-topleft .hud-wallet .money-text { font-size: 1.45rem; }
  .hud-topleft .hud-wallet .xp-bar { width: 40px; height: 7px; }
  .hud-topleft .hud-wallet .level-badge { font-size: 0.68rem; padding: 2px 7px; }
  .hud-topleft .hud-wallet .xp-text { display: block; font-size: 0.62rem; }
  .hud-topright { position: static; }
  .hud-drawer { display: contents !important; }
  .hud-drawer .hud-clockcard { position: absolute; top: var(--hud-top); right: 10px; height: 52px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; }
  .hud-drawer .clock-text { font-size: 1rem; }
  .hud-drawer .seg-chip { font-size: 0.6rem; padding: 2px 6px; }

  /* row 2: the icon strip across the top */
  .hud-drawer .hud-buttons { position: absolute; left: 10px; right: 10px; top: calc(var(--hud-top) + 58px); height: 44px; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 0; padding: 0 6px; box-sizing: border-box; background: rgba(8, 18, 28, 0.55); border: 1px solid var(--stroke); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; }
  .hud-drawer .hud-btn { width: 40px !important; min-height: 40px !important; height: 40px !important; }
  .hud-drawer .hud-btn::before { font-size: 1.45rem !important; }

  /* row 3: lure chip (left) and Livewell (right) */
  .hud-topleft .lure-mini { margin-top: 60px; height: 34px; box-sizing: border-box; }
  .hud-drawer .bag-chip { position: absolute; right: 10px; top: calc(var(--hud-top) + 112px); height: 34px !important; width: auto !important; min-height: 34px !important; flex-direction: row !important; gap: 6px !important; padding: 0 12px !important; font-size: 0.78rem !important; border-radius: 999px; background: rgba(8, 18, 28, 0.55) !important; border: 1px solid var(--stroke) !important; display: inline-flex; align-items: center; white-space: nowrap; pointer-events: auto; }
  .hud-drawer .bag-chip::before { font-size: 1.05rem !important; }
  .hud-drawer .bag-chip .bag-wt { display: none; }

  /* the right edge is free now: bars use the whole width */
  .reel-wrap { right: 10px; }
  .rhythm, .power-wrap { width: calc(100vw - 20px); left: 50%; }

  /* bottom: the prompt stops short of Exit, and Exit sits in the corner on the same line */
  .prompt { left: 10px; right: auto; transform: none; width: calc(100vw - 122px); text-align: left; padding: 8px 12px; font-size: 0.95rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .prompt.urgent { animation: none; }
  #btn-exit { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 10px); }
  #exit-confirm { bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
}

/* upright phone: rhythm bar uses the full available width — the #app #rhythm rule's min(340px,64vw) is too narrow */
@media (max-width: 760px) and (orientation: portrait) {
  #app #rhythm { width: calc(100vw - 20px) !important; }
  /* start-picker modal: allow scroll so cards don't hide behind the top edge on very short viewports */
  .name-modal { overflow-y: auto; }
}

/* sideways phone: Exit moves left a little so it never sits on the Livewell label */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  #btn-exit { right: calc(env(safe-area-inset-right, 0px) + 84px); }
}

/* sideways phone: Livewell moves up beside the clock (it was sitting on the rod button), and Exit sits clear of the icon grid */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .hud-drawer { display: contents !important; }
  .hud-drawer .hud-buttons { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 39px); right: calc(env(safe-area-inset-right, 0px) + 10px); flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width: 82px; gap: 4px; pointer-events: auto; }
  .hud-drawer .hud-clockcard { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 10px); }
  .hud-drawer .bag-chip { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 74px); height: 27px !important; width: auto !important; min-height: 27px !important; flex-direction: row !important; gap: 5px !important; padding: 0 9px !important; font-size: 0.62rem !important; border-radius: 999px; background: rgba(8, 18, 28, 0.55) !important; border: 1px solid var(--stroke) !important; display: inline-flex; align-items: center; white-space: nowrap; pointer-events: auto; }
  .hud-drawer .bag-chip::before { font-size: 0.85rem !important; }
  .hud-drawer .bag-chip .bag-wt { display: none; }
  #btn-exit { right: calc(env(safe-area-inset-right, 0px) + 100px); bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); }
}
/* very small sideways screens: the icon grid goes three wide so it ends above the rod button */
@media (pointer: coarse) and (max-height: 360px) and (orientation: landscape) {
  .hud-drawer .hud-buttons { width: 116px; }
}
@media (pointer: coarse) and (max-height: 360px) and (orientation: landscape) {
  .hud-drawer .hud-buttons { width: 132px; grid-template-columns: repeat(3, 40px); }
  #btn-exit { right: calc(env(safe-area-inset-right, 0px) + 158px); bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); }
  .prompt { width: min(460px, calc(100vw - 280px)); }
}