/* ==========================================================================
   THE PERFECT ROUND — v0.8 merged stylesheet
   - Core UI from Claude Design v1 redesign (HUD / Dialog / Buttons /
     Worldmap / Scorecard) — "16-bit UI kit" aesthetic.
   - Game-specific scene styles from v0.7 preserved (home pack, archetypes,
     swing minigame, cart girl, weather, etc.).
   - Compatibility shims keep old class names (.choice-btn, .btn.primary,
     .result-card) rendering correctly without rewriting scene JS.
   ========================================================================== */

/* ---------- TOKENS ------------------------------------------------------- */
:root {
  /* Core palette — Claude Design tokens (primary source of truth) */
  --ink:        #0b0a12;
  --ink-2:      #1d1b2e;
  --paper:      #fff3d6;
  --paper-2:    #ffe6a8;
  --sky:        #4aa7ff;
  --sky-2:      #2f6fd9;
  --sky-dk:     #1a3b8a;
  --turf:       #5ec64a;
  --turf-2:     #2f9e2a;
  --turf-dk:    #16611a;
  --sand:       #f2c46b;
  --sand-2:     #d98f2a;
  --water:      #3bd0ff;
  --water-2:    #2a86d6;
  --red:        #e23b34;
  --red-2:      #a81a1a;
  --gold:       #ffcc2b;
  --gold-2:     #d98f00;
  --brown:      #8a4b21;
  --brown-2:    #5a2e0f;

  /* UI steel (HUD frame) */
  --steel-lt:   #c9cfe0;
  --steel:      #7a8499;
  --steel-dk:   #3a3f55;

  /* v0.7 compatibility aliases referenced in scene JS */
  --danger:     var(--red);
  --good:       var(--turf);
  --muted:      #7a8499;
  --caution:    #f87800;

  /* v0.7 scene-specific tokens (still referenced in scene CSS below) */
  --brick:      #883000;
  --brick-dark: #582000;
  --fairway:    #5ec64a;
  --grass-mid:  #30882c;
  --grass-dark: #1a5818;
  --night:      #0a0814;
  --pipe-green: #00a844;
  --sky-day-top:   #5c94fc;
  --sky-day-mid:   #8cb4fc;
  --sky-day-bot:   #c4d4fc;
  --sky-storm-top: #404858;
  --sky-storm-mid: #506070;
  --sky-storm-bot: #607080;
  --ui-black:   #0b0a12;
  --ui-white:   #fcfcfc;
  --ui-cream:   #fff3d6;

  /* Type */
  --f-display:  "Press Start 2P", "Silkscreen", monospace;
  --f-ui:       "Silkscreen", "Press Start 2P", monospace;
  --f-body:     "VT323", "Silkscreen", monospace;

  /* Pixel unit — everything snaps to this */
  --px: 4px;
}

/* ---------- RESET & PAGE ------------------------------------------------ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--f-ui);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  min-height: 100vh;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#viewport {
  flex: 1;
  padding: calc(var(--px) * 2);
  display: flex;
  flex-direction: column;
}

.scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 2);
  overflow-y: auto;
  position: relative;
}

.scene::-webkit-scrollbar { width: 8px; }
.scene::-webkit-scrollbar-track { background: var(--ink-2); }
.scene::-webkit-scrollbar-thumb { background: var(--gold); }

/* Universal helpers */
.pix { image-rendering: pixelated; }
.flex-row { display: flex; gap: calc(var(--px) * 2); align-items: center; flex-wrap: wrap; }
.spacer { height: calc(var(--px) * 2); }
.gold { color: var(--gold); }
.danger-text { color: var(--red); }
.good-text { color: var(--turf); }

/* Transition overlays */
#iris-overlay {
  position: fixed; inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 1000;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease-in-out;
}
#iris-overlay.closing { clip-path: circle(75% at 50% 50%); }
#iris-overlay.full { clip-path: circle(75% at 50% 50%); }
#iris-overlay.opening { clip-path: circle(0% at 50% 50%); }

#flash-overlay {
  position: fixed; inset: 0;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 1001;
  transition: opacity 0.08s;
}
#flash-overlay.on { opacity: 0.6; }

#viewport.shake { animation: viewportShake 0.4s; }
@keyframes viewportShake {
  0%,100% { transform: translate(0); }
  10%,50%,90% { transform: translate(-3px, 2px); }
  30%,70% { transform: translate(3px, -2px); }
}

/* Loading indicator */
.loading {
  font-family: var(--f-display);
  font-size: 10px;
  color: var(--gold);
  text-align: center;
  padding: calc(var(--px) * 4);
  letter-spacing: 2px;
}
.loading::after {
  content: "...";
  animation: dotPulse 1s infinite;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* ==========================================================================
   HUD — riveted steel status bar (Claude Design v1)
   ========================================================================== */

#hud {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--px);
  padding: calc(var(--px) * 2);
  background: linear-gradient(#2a2f44 0 50%, #1a1e30 50% 100%);
  box-shadow:
    inset 0 0 0 var(--px) #0a0c18,
    inset 0 0 0 calc(var(--px) * 2) var(--steel-lt),
    inset 0 0 0 calc(var(--px) * 3) var(--steel-dk),
    0 var(--px) 0 #000;
  border-bottom: calc(var(--px) * 2) solid #000;
  font-family: var(--f-ui);
  display: none; /* Hidden until character is created, then updateHUD shows it */
}
#hud.on { display: grid; }

/* Rivets */
#hud::before,
#hud::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * 2);
  width: var(--px);
  height: var(--px);
  background: #fff;
  box-shadow:
    0 calc(var(--px) * 4) 0 #fff,
    0 calc(var(--px) * 8) 0 #fff;
}
#hud::before { left: calc(var(--px) * 2); }
#hud::after  { right: calc(var(--px) * 2); }

.hud-stat {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--px) * 7) 1fr;
  align-items: center;
  gap: calc(var(--px) * 1.5);
  padding: calc(var(--px) * 1.5) calc(var(--px) * 1.5);
  background: linear-gradient(#0f1222, #1a1e30);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) #4a5270;
  min-height: calc(var(--px) * 10);
}

.hud-stat .icon {
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 7);
  image-rendering: pixelated;
  display: block;
}

.hud-stat .col {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: calc(var(--px) * 0.5);
  min-width: 0;
}

.hud-stat .label {
  font-family: var(--f-display);
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}

.hud-stat .value {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Color-code each stat's label (uses classes now on .hud-stat) */
.hud-stat.clock  .label { color: var(--paper); }
.hud-stat.hearts .label { color: #ff6c96; }
.hud-stat.balls  .label { color: var(--paper); }
.hud-stat.bac    .label { color: #ffb347; }
.hud-stat.cash   .label { color: var(--gold); }
.hud-stat.wx     .label { color: var(--sky); }
.hud-stat.wife   .label { color: #ff8fb1; }
.hud-stat.morale .label { color: var(--turf); }

/* Hearts row — smaller, tighter line-height */
.hearts-row {
  font-size: 11px !important;
  letter-spacing: 1px;
  color: #e23b34 !important;
  text-shadow: 1px 1px 0 #000;
}
.hearts-row.empty { color: #4a4f60 !important; }
.hearts-row.warn { animation: heartsWarn 0.8s steps(2) infinite; }
@keyframes heartsWarn {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.6) drop-shadow(0 0 3px #e23b34); }
}

/* Clock — warn when under 60 minutes, crit when under 20 */
.hud-stat.clock .value.warn { color: var(--caution) !important; }
.hud-stat.clock .value.crit {
  color: var(--red) !important;
  animation: clockCrit 0.5s steps(2) infinite;
}
@keyframes clockCrit {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Balls — low count warn, zero empty */
.hud-stat.balls .value.warn { color: var(--caution) !important; }
.hud-stat.balls .value.empty { color: var(--red) !important; }
.hud-stat.hole   .label { color: #fff; }

/* Danger state on wife-wrap when patience < 40% */
#hud-wife-wrap.danger {
  animation: hud-pulse 0.6s steps(2) infinite;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--red);
}
@keyframes hud-pulse {
  0%, 100% { background: linear-gradient(#2a0e16, #3a1220); }
  50%      { background: linear-gradient(#0f1222, #1a1e30); }
}

/* ==========================================================================
   DIALOG BOX — ornamental 16-bit RPG style (Claude Design v1)
   ========================================================================== */

.dialog {
  --d-border: var(--paper);
  --d-inner:  rgba(12, 14, 32, 0.92);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  background: var(--d-inner);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.2;
  box-shadow:
    0 0 0 var(--px) #000,
    0 0 0 calc(var(--px) * 2) var(--d-border),
    0 0 0 calc(var(--px) * 3) #000,
    inset 0 0 0 var(--px) #000;
  margin: calc(var(--px) * 2);
}

/* Narration dialog: no portrait column */
.dialog.narration {
  grid-template-columns: 1fr;
}

/* Ornamental corner diamonds — top two from ::before/::after,
   bottom two need explicit .corner-tl/.corner-tr spans to render */
.dialog::before,
.dialog::after,
.dialog > .corner-tl,
.dialog > .corner-tr {
  content: "";
  position: absolute;
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 3);
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 0 / var(--px) var(--px) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 100% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 50% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 50% / var(--px) var(--px) no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) 50% 50% / var(--px) var(--px) no-repeat;
  background-color: transparent;
  box-shadow: 0 0 0 var(--px) #000;
}
.dialog::before         { top: calc(var(--px) * -1); left:  calc(var(--px) * -1); }
.dialog::after          { top: calc(var(--px) * -1); right: calc(var(--px) * -1); }
.dialog > .corner-tl    { bottom: calc(var(--px) * -1); left:  calc(var(--px) * -1); }
.dialog > .corner-tr    { bottom: calc(var(--px) * -1); right: calc(var(--px) * -1); }

/* Portrait slot */
.dialog .portrait {
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  background: var(--sky-dk);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--paper),
    inset 0 0 0 calc(var(--px) * 3) #000;
  position: relative;
  image-rendering: pixelated;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Speaker name plate */
.dialog .speaker {
  font-family: var(--f-display);
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: calc(var(--px) * 1.5);
  text-shadow: 1px 1px 0 #000;
}

/* v0.7 legacy dialog body wrapper */
.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dialog-text {
  color: var(--paper);
  line-height: 1.25;
}

/* Blinking ▼ continue indicator */
.dialog .cursor,
.dialog .continue {
  position: absolute;
  right: calc(var(--px) * 3);
  bottom: calc(var(--px) * 1);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 10px;
  animation: blink 0.9s steps(2) infinite;
  filter: drop-shadow(1px 1px 0 #000);
}
@keyframes blink { 50% { opacity: 0; } }

/* Sprite container used inside portraits */
.sprite {
  display: inline-block;
  image-rendering: pixelated;
  line-height: 0;
}
.sprite svg { display: block; }

/* ==========================================================================
   BUTTONS — chunky 4-layer bevel (Claude Design v1)
   ========================================================================== */

.btn {
  --b-face:   var(--red);
  --b-shade:  var(--red-2);
  --b-light:  #ff7a6a;
  --b-ink:    #fff;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--b-ink);
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000;
  background: var(--b-face);
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  border: 0;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 2)  calc(var(--px) * 2) 0 var(--b-light),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--b-shade),
    0 var(--px) 0 #000;
  transition: transform 60ms steps(1);
}

.btn:hover { filter: brightness(1.05); }
.btn:active {
  transform: translateY(var(--px));
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 2)  calc(var(--px) * 2) 0 var(--b-shade),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--b-light),
    0 0 0 #000;
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 2)  calc(var(--px) * 2) 0 var(--b-light),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--b-shade),
    0 var(--px) 0 #000,
    0 0 0 calc(var(--px) * 1) var(--gold);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Legacy .btn.primary alias → gold cartouche */
.btn.primary,
.btn--primary {
  --b-face: var(--gold);
  --b-shade: var(--gold-2);
  --b-light: #ffe074;
  --b-ink: #000;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}

.btn.muted,
.btn--utility {
  --b-face: #6b7388;
  --b-shade: #3a3f55;
  --b-light: #9ea6bd;
  --b-ink: #fff;
  font-size: 8px;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
}

.btn.danger {
  --b-face: #a01822;
  --b-shade: #540810;
  --b-light: #e84a44;
}

/* Good/warn button variants used by choice-btn */
.btn.good,
.choice-btn.good { --b-face: var(--turf); --b-shade: var(--turf-dk); --b-light: #8de66a; --b-ink: #000; text-shadow: none; }
.btn.warn,
.choice-btn.warn { --b-face: var(--caution); --b-shade: #c85000; --b-light: #ffb347; --b-ink: #000; text-shadow: none; }

/* ==========================================================================
   CHOICE BUTTONS — scene-advance picks (Claude Design v1 style)
   ========================================================================== */

.choices {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 1.5);
  margin: calc(var(--px) * 2) 0;
}

.choice-btn {
  --b-face: var(--paper);
  --b-shade: #c4a868;
  --b-light: #fff9e0;
  --b-ink: #000;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--b-ink);
  text-align: left;
  padding: calc(var(--px) * 3) calc(var(--px) * 4) calc(var(--px) * 3) calc(var(--px) * 8);
  background: var(--b-face);
  border: 0;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 2)  calc(var(--px) * 2) 0 var(--b-light),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--b-shade),
    0 var(--px) 0 #000;
  transition: transform 60ms steps(1);
  line-height: 1.3;
}

/* Blinking pointer triangle */
.choice-btn::before {
  content: "▸";
  position: absolute;
  left: calc(var(--px) * 3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 12px;
  animation: blink 0.9s steps(2) infinite;
}

.choice-btn:hover { filter: brightness(1.05); }
.choice-btn:active {
  transform: translateY(var(--px));
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 2)  calc(var(--px) * 2) 0 var(--b-shade),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--b-light),
    0 0 0 #000;
}

.choice-btn.danger { --b-face: #ffaaaa; --b-shade: var(--red-2); --b-light: #ffd0cc; }

/* ==========================================================================
   SCREEN TITLES (legacy, preserved)
   ========================================================================== */

.screen-title {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 3px;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000;
  margin: calc(var(--px) * 2) 0;
  padding: calc(var(--px) * 2);
}

.screen-subtitle {
  font-family: var(--f-display);
  font-size: 10px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 2px;
  margin: calc(var(--px) * 1) 0;
}
/* ==========================================================================
   TITLE SCREEN (preserved from v0.7)
   ========================================================================== */

.title-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  /* Hand-painted background — falls back to the original gradient if missing */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    url('assets/scenes/title-bg.png') center center / cover no-repeat,
    linear-gradient(180deg, var(--sky-day-top) 0%, var(--sky-day-mid) 60%, var(--grass-mid) 60%, var(--grass-dark) 100%);
  background-color: var(--sky-day-top);
  overflow: hidden;
  image-rendering: pixelated;
}
/* Hide the procedural clouds and sprite row when the image is in play —
   the painted background already has clouds, sun, and golf cart. */
.title-screen .title-clouds,
.title-screen .title-sprites {
  display: none;
}
.title-clouds {
  position: absolute; top: 20px; left: 0; right: 0;
  height: 80px; pointer-events: none;
}
.cloud {
  position: absolute;
  font-family: 'Silkscreen', monospace; font-size: 32px;
  color: var(--ui-white);
  text-shadow: 3px 0 0 var(--ui-white), -3px 0 0 var(--ui-white), 0 3px 0 var(--ui-white), 0 -3px 0 var(--ui-white);
  opacity: 0.85;
}
.cloud.c1 { top: 0; animation: cloudDrift 24s linear infinite; }
.cloud.c2 { top: 30px; animation: cloudDrift 32s linear infinite; animation-delay: -10s; }
.cloud.c3 { top: 55px; animation: cloudDrift 40s linear infinite; animation-delay: -22s; }
@keyframes cloudDrift { from { left: -100px; } to { left: 720px; } }

.title-logo {
  font-family: var(--f-display); font-size: 30px; color: var(--gold);
  text-shadow:
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    6px 6px 0 var(--red-2),
    0 0 16px rgba(0,0,0,0.7);
  line-height: 1.3; margin-bottom: 18px; margin-top: -40px;
  animation: titleBounce 2.4s infinite ease-in-out;
  letter-spacing: 2px; z-index: 2; position: relative;
}
@keyframes titleBounce {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.title-subtitle {
  font-family: var(--f-display); font-size: 10px;
  color: var(--ui-white); text-shadow: 2px 2px 0 #000;
  margin-bottom: 30px; letter-spacing: 3px; z-index: 2; position: relative;
  animation: subtitleBlink 1.6s infinite;
}
@keyframes subtitleBlink { 0%,50%{opacity:1;} 51%,100%{opacity:0.3;} }
.title-version {
  position: absolute; bottom: 14px; right: 14px;
  font-family: 'Silkscreen', monospace; font-size: 10px;
  color: var(--ui-white); opacity: 0.85; z-index: 2;
  text-shadow: 1px 1px 0 #000;
}
.title-sprites {
  position: absolute; bottom: 28px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 30px; z-index: 2;
}

/* ==========================================================================
   CHARACTER CREATION (preserved from v0.7)
   ========================================================================== */

.cc-field {
  background: var(--ui-black);
  border: calc(var(--px) * 0.75) solid var(--ui-white);
  padding: 8px 10px;
}
.cc-field .cc-label {
  font-family: var(--f-display); font-size: 8px;
  color: var(--gold); margin-bottom: 6px; letter-spacing: 1px;
}
.cc-options { display: flex; gap: 5px; flex-wrap: wrap; }
.cc-opt {
  font-family: 'Silkscreen', monospace; font-size: 12px;
  padding: 5px 9px; background: var(--muted); color: var(--ui-white);
  border: 2px solid #000; cursor: pointer; font-weight: 700;
}
.cc-opt.sel { background: var(--gold); color: #000; box-shadow: 0 0 0 2px var(--ui-white); }
.cc-slider-wrap { display: flex; align-items: center; gap: 10px; }
.cc-slider-wrap input[type=range] { flex: 1; accent-color: var(--gold); }
.cc-slider-wrap .hcp-num {
  font-family: var(--f-display); font-size: 14px;
  color: var(--gold); min-width: 28px; text-align: center;
}
.cc-ceiling {
  background: linear-gradient(90deg, var(--red-2), var(--red), var(--red-2));
  border: 3px solid var(--gold); padding: 8px 12px; text-align: center;
  font-family: var(--f-display); font-size: 9px; color: var(--ui-cream);
}
.cc-ceiling .ceiling-grade {
  font-size: 22px; color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  display: block; margin: 3px 0; animation: gradeGlow 2s infinite;
}
@keyframes gradeGlow {
  0%,100% { filter: brightness(1) drop-shadow(0 0 0 var(--gold)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 6px var(--gold)); }
}
.cc-ceiling .ceiling-label { font-size: 8px; color: var(--ui-cream); opacity: 0.9; }
.cc-tradeoffs {
  background: var(--ui-black); border: 2px dashed var(--muted);
  padding: 6px 8px; font-family: 'Silkscreen', monospace; font-size: 11px;
  color: var(--ui-cream); line-height: 1.35;
}
.cc-tradeoffs .tr-label {
  font-family: var(--f-display); font-size: 7px;
  color: var(--gold); margin-bottom: 3px; letter-spacing: 1px;
}

/* ==========================================================================
   ARCHETYPE PICKER (preserved from v0.7)
   ========================================================================== */

.arch-intro {
  background: var(--ui-black); border: 3px solid var(--gold);
  padding: 10px 12px; text-align: center;
  font-family: 'Silkscreen', monospace; font-size: 12px;
  color: var(--ui-cream); line-height: 1.4;
  box-shadow: 3px 3px 0 var(--red-2);
}
.arch-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.arch-slot {
  flex: 1; min-width: 95px; max-width: 150px;
  background: var(--ui-black); border: 3px solid var(--muted);
  padding: 6px; text-align: center; cursor: pointer;
  transition: border-color 0.1s;
}
.arch-slot.filled { border-color: var(--gold); }
.arch-slot .slot-label {
  font-family: var(--f-display); font-size: 7px;
  color: var(--gold); margin-bottom: 4px;
}
.arch-slot .slot-content {
  font-family: 'Silkscreen', monospace; font-size: 11px;
  color: var(--ui-white); line-height: 1.2;
  min-height: 30px; display: flex; align-items: center; justify-content: center;
}
.arch-slot.empty .slot-content { color: var(--muted); font-style: italic; }
.arch-slot .slot-sprite {
  height: 48px; display: flex; justify-content: center; margin-bottom: 4px;
}
.arch-pool { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.arch-card {
  background: var(--ui-black); border: 2px solid var(--ui-white);
  padding: 6px 8px; cursor: pointer; transition: all 0.08s; position: relative;
}
.arch-card:hover { border-color: var(--gold); background: #331100; }
.arch-card .arch-name {
  font-family: var(--f-display); font-size: 8px;
  color: var(--gold); margin-bottom: 3px; letter-spacing: 1px;
}
.arch-card .arch-desc {
  font-family: 'Silkscreen', monospace; font-size: 11px;
  color: var(--ui-cream); line-height: 1.25;
}
.arch-count-badge {
  position: absolute; top: 2px; right: 4px;
  font-family: var(--f-display); font-size: 7px;
  color: var(--gold); background: var(--ui-black);
  padding: 2px 4px; border: 1px solid var(--gold);
}

/* Sprite state animations */
.sprite.idle { animation: spriteIdle 0.9s infinite steps(2); }
@keyframes spriteIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.sprite.bob { animation: spriteBob 1.4s infinite ease-in-out; }
@keyframes spriteBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Generic cursor blink */
@keyframes cursorBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
/* ==========================================================================
   4) WORLD MAP — 18-hole overworld
   ========================================================================== */

.worldmap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    /* sky + turf split w/ checker horizon */
    linear-gradient(var(--sky) 0 38%, var(--turf-2) 38% 100%);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--paper),
    inset 0 0 0 calc(var(--px) * 3) #000;
  overflow: hidden;
  font-family: var(--f-display);
}

/* Pixel cloud layer */
.worldmap .clouds {
  position: absolute;
  inset: 4% 0 auto 0;
  height: 20%;
  background:
    radial-gradient(circle at 10% 60%, #fff 6%, transparent 7%),
    radial-gradient(circle at 12% 50%, #fff 5%, transparent 6%),
    radial-gradient(circle at 14% 65%, #fff 4%, transparent 5%),
    radial-gradient(circle at 55% 40%, #fff 5%, transparent 6%),
    radial-gradient(circle at 58% 55%, #fff 6%, transparent 7%),
    radial-gradient(circle at 80% 50%, #fff 5%, transparent 6%);
  image-rendering: pixelated;
}

/* Turf — darker band at bottom with fairway checker */
.worldmap .fairway {
  position: absolute;
  inset: 38% 0 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--turf-2) 0 calc(var(--px) * 6),
      var(--turf) 0 calc(var(--px) * 12)
    );
  opacity: 0.85;
}

/* Horizon hills (decorative) */
.worldmap .hills {
  position: absolute;
  left: 0; right: 0;
  top: 28%;
  height: 14%;
  background:
    radial-gradient(ellipse at 15% 100%, var(--turf-dk) 40%, transparent 41%),
    radial-gradient(ellipse at 45% 100%, var(--turf-dk) 35%, transparent 36%),
    radial-gradient(ellipse at 78% 100%, var(--turf-dk) 38%, transparent 39%);
}

/* SVG path sits on top */
.worldmap svg.path-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Hole nodes */
.hole-node {
  position: absolute;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  transform: translate(-50%, -50%);
  background: var(--paper);
  color: #000;
  font-family: var(--f-display);
  font-size: 10px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--red),
    0 var(--px) 0 #000;
  cursor: pointer;
  user-select: none;
}
.hole-node.done {
  background: var(--turf);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--turf-dk),
    0 var(--px) 0 #000;
  color: #0b2a0b;
}
.hole-node.done::after {
  content: "✓";
  position: absolute;
  top: calc(var(--px) * -1);
  right: calc(var(--px) * -1);
  width: calc(var(--px) * 4);
  height: calc(var(--px) * 4);
  background: var(--gold);
  color: #000;
  font-size: 8px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px #000;
}
.hole-node.locked {
  background: #4a4f60;
  color: #1a1d28;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) #2a2d3a;
}

/* Terrain tags under/next to nodes */
.hole-node .tag {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(var(--px) * 0.5));
  font-size: 6px;
  background: #000;
  color: var(--paper);
  padding: 1px 3px;
  white-space: nowrap;
  letter-spacing: 1px;
}

/* Player cursor — bouncing pixel golfer flag */
.player-cursor {
  position: absolute;
  width: calc(var(--px) * 6);
  height: calc(var(--px) * 10);
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: hop 0.6s steps(2) infinite;
}
.player-cursor .pole   {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--px);
  height: 100%;
  background: #000;
  transform: translateX(-50%);
}
.player-cursor .flag   {
  position: absolute;
  left: 50%;
  top: calc(var(--px) * 0.5);
  width: calc(var(--px) * 4);
  height: calc(var(--px) * 3);
  background: var(--red);
  box-shadow: inset 0 0 0 1px #000;
}
.player-cursor .base   {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--px) * 4);
  height: var(--px);
  background: #000;
}
@keyframes hop {
  0%, 100% { transform: translate(-50%, -100%); }
  50%      { transform: translate(-50%, calc(-100% - var(--px))); }
}

/* Hazards — decorative features on the map */
.hazard {
  position: absolute;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}
.hazard.water {
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 6);
  background:
    repeating-linear-gradient(
      180deg,
      var(--water) 0 var(--px),
      var(--water-2) var(--px) calc(var(--px) * 2)
    );
  box-shadow: inset 0 0 0 var(--px) #000;
  border-radius: 2px;
}
.hazard.sand {
  width: calc(var(--px) * 10);
  height: calc(var(--px) * 5);
  background:
    radial-gradient(ellipse at 50% 50%, var(--sand) 60%, var(--sand-2) 61%);
  box-shadow: inset 0 0 0 var(--px) #000;
  border-radius: 50%;
}
.hazard.tree {
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 8);
  background:
    /* trunk */
    linear-gradient(var(--brown) 0 0) 50% 60% / var(--px) 40% no-repeat,
    /* foliage (3 stacked triangles via radial) */
    radial-gradient(circle at 50% 28%, var(--turf-dk) 40%, transparent 41%),
    radial-gradient(circle at 50% 12%, var(--turf-dk) 30%, transparent 31%);
}

/* Map header / footer chrome */
.worldmap .map-title {
  position: absolute;
  top: calc(var(--px) * 2);
  left: 50%;
  transform: translateX(-50%);
  padding: calc(var(--px) * 1.5) calc(var(--px) * 4);
  background: #000;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 2px;
  box-shadow:
    inset 0 0 0 var(--px) var(--gold),
    0 0 0 var(--px) var(--gold-2);
}
.worldmap .map-legend {
  position: absolute;
  bottom: calc(var(--px) * 2);
  left: calc(var(--px) * 2);
  display: flex;
  gap: calc(var(--px) * 3);
  font-size: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,0.55);
  padding: calc(var(--px) * 1) calc(var(--px) * 2);
  box-shadow: inset 0 0 0 var(--px) var(--paper);
}
.worldmap .map-legend i {
  display: inline-block;
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 2);
  margin-right: calc(var(--px) * 1);
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px #000;
}

.worldmap .map-info {
  position: absolute;
  top: calc(var(--px) * 2);
  right: calc(var(--px) * 2);
  padding: calc(var(--px) * 2);
  background: var(--paper);
  color: #000;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.1;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    0 0 0 var(--px) #000;
  min-width: calc(var(--px) * 38);
}
.worldmap .map-info b {
  font-family: var(--f-display);
  font-size: 8px;
  color: var(--red-2);
  display: block;
  margin-bottom: calc(var(--px) * 1);
}

/* ==========================================================================
   5) SCORECARD / FINAL EVAL — celebratory results screen
   ========================================================================== */

.scorecard {
  position: relative;
  padding: calc(var(--px) * 5);
  background:
    repeating-linear-gradient(
      45deg,
      #0a0c18 0 calc(var(--px) * 2),
      #11142a calc(var(--px) * 2) calc(var(--px) * 4)
    );
  color: var(--paper);
  font-family: var(--f-ui);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--gold),
    inset 0 0 0 calc(var(--px) * 3) #000;
  overflow: hidden;
}

/* Starburst behind grade plaque */
.scorecard .burst {
  position: absolute;
  top: calc(var(--px) * 8);
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--px) * 40);
  height: calc(var(--px) * 40);
  background:
    conic-gradient(
      var(--gold) 0 10deg, transparent 10deg 20deg,
      var(--gold) 20deg 30deg, transparent 30deg 40deg,
      var(--gold) 40deg 50deg, transparent 50deg 60deg,
      var(--gold) 60deg 70deg, transparent 70deg 80deg,
      var(--gold) 80deg 90deg, transparent 90deg 100deg,
      var(--gold) 100deg 110deg, transparent 110deg 120deg,
      var(--gold) 120deg 130deg, transparent 130deg 140deg,
      var(--gold) 140deg 150deg, transparent 150deg 160deg,
      var(--gold) 160deg 170deg, transparent 170deg 180deg,
      var(--gold) 180deg 190deg, transparent 190deg 200deg,
      var(--gold) 200deg 210deg, transparent 210deg 220deg,
      var(--gold) 220deg 230deg, transparent 230deg 240deg,
      var(--gold) 240deg 250deg, transparent 250deg 260deg,
      var(--gold) 260deg 270deg, transparent 270deg 280deg,
      var(--gold) 280deg 290deg, transparent 290deg 300deg,
      var(--gold) 300deg 310deg, transparent 310deg 320deg,
      var(--gold) 320deg 330deg, transparent 330deg 340deg,
      var(--gold) 340deg 350deg, transparent 350deg 360deg
    );
  opacity: 0.25;
  animation: spin 8s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Grade plaque — giant letter grade in a chunky frame */
.grade-plaque {
  position: relative;
  margin: 0 auto calc(var(--px) * 4);
  width: calc(var(--px) * 32);
  height: calc(var(--px) * 32);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, var(--gold) 0 60%, var(--gold-2) 61% 100%);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) #fff,
    inset 0 0 0 calc(var(--px) * 3) #000,
    0 calc(var(--px) * 2) 0 #000;
}
.grade-plaque .grade {
  font-family: var(--f-display);
  font-size: 72px;
  color: #000;
  text-shadow:
    calc(var(--px) * 0.5) calc(var(--px) * 0.5) 0 #fff;
  line-height: 1;
}
.grade-plaque .caption {
  position: absolute;
  bottom: calc(var(--px) * -3);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: var(--gold);
  padding: calc(var(--px) * 1) calc(var(--px) * 3);
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 2px;
  white-space: nowrap;
  box-shadow: inset 0 0 0 var(--px) var(--gold);
}

.scorecard .results-title {
  text-align: center;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow:
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000;
  margin-bottom: calc(var(--px) * 3);
  position: relative;
}

/* Stat rows — each with icon, label, animated bar, value */
.scorecard .stats {
  position: relative;
  display: grid;
  gap: calc(var(--px) * 1.5);
  background: rgba(0,0,0,0.55);
  padding: calc(var(--px) * 3);
  box-shadow: inset 0 0 0 var(--px) var(--paper);
}

.stat-row {
  display: grid;
  grid-template-columns: calc(var(--px) * 5) 1fr calc(var(--px) * 12);
  gap: calc(var(--px) * 2);
  align-items: center;
  font-family: var(--f-body);
  font-size: 20px;
}
.stat-row .sr-icon {
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 5);
  background: var(--gold);
  box-shadow: inset 0 0 0 1px #000;
}
.stat-row .sr-label {
  display: grid;
  grid-template-columns: calc(var(--px) * 28) 1fr;
  align-items: center;
  gap: calc(var(--px) * 2);
}
.stat-row .sr-name {
  font-family: var(--f-display);
  font-size: 10px;
  color: var(--paper);
  letter-spacing: 1px;
}
.stat-row .sr-bar {
  height: calc(var(--px) * 3);
  background: #000;
  box-shadow: inset 0 0 0 1px var(--paper);
  position: relative;
  overflow: hidden;
}
.stat-row .sr-bar > i {
  display: block;
  height: 100%;
  background: var(--turf);
  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--turf-dk);
  width: 0;
  animation: fill 0.9s steps(16) forwards;
}
.stat-row[data-tone="warn"]   .sr-bar > i { background: var(--gold);  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--gold-2); }
.stat-row[data-tone="bad"]    .sr-bar > i { background: var(--red);   box-shadow: inset 0 calc(var(--px) * -1) 0 var(--red-2); }
.stat-row[data-tone="ok"]     .sr-bar > i { background: var(--turf);  box-shadow: inset 0 calc(var(--px) * -1) 0 var(--turf-dk); }
.stat-row[data-tone="blue"]   .sr-bar > i { background: var(--sky);   box-shadow: inset 0 calc(var(--px) * -1) 0 var(--sky-dk); }

@keyframes fill { from { width: 0; } }

.stat-row .sr-value {
  font-family: var(--f-display);
  font-size: 10px;
  text-align: right;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}

/* Bonus ribbon */
.scorecard .ribbon {
  margin-top: calc(var(--px) * 4);
  text-align: center;
  font-family: var(--f-display);
  font-size: 10px;
  color: #000;
  background: var(--paper);
  padding: calc(var(--px) * 2);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    0 0 0 var(--px) #000;
  letter-spacing: 2px;
}
.scorecard .ribbon b { color: var(--red-2); }

/* Confetti pieces */
.scorecard .confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.scorecard .confetti i {
  position: absolute;
  width: var(--px);
  height: var(--px);
  animation: fall 3s linear infinite;
}
@keyframes fall {
  0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(600px) rotate(720deg); opacity: 0.4; }
}

/* ==========================================================================
   Misc utilities kept from original
   ========================================================================== */
.flex-row { display: flex; gap: calc(var(--px) * 2); align-items: center; flex-wrap: wrap; }
.spacer   { height: calc(var(--px) * 2); }
.chat-input textarea {
  width: 100%;
  background: #0a0c18;
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 18px;
  padding: calc(var(--px) * 2);
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 0 calc(var(--px) * 2) var(--paper);
  border: 0;
  resize: none;
}
.echo-bubble {
  background: var(--paper);
  color: #000;
  padding: calc(var(--px) * 3);
  font-family: var(--f-body);
  font-size: 20px;
  box-shadow: inset 0 0 0 var(--px) #000, 0 0 0 var(--px) #000;
}
/* HOME PACK */
.home-pack-scene {
  padding: 10px;
  background: linear-gradient(180deg, #2a1810 0%, #3a2418 50%, #2a1810 100%);
  min-height: 100%;
}
.kitchen-bg {
  height: 50px;
  background: repeating-linear-gradient(90deg, #5a3020, #5a3020 24px, #4a2818 24px, #4a2818 48px), #5a3020;
  border-bottom: 4px solid var(--ui-black);
  position: relative; margin-bottom: 8px;
}
.kitchen-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgba(250,189,0,0.35), transparent 30%),
    radial-gradient(ellipse at 70% 40%, rgba(250,189,0,0.2), transparent 40%);
}
.home-pack-header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--gold); letter-spacing: 1px; margin-bottom: 4px;
}
.home-pack-timer {
  width: 100%; height: 6px; background: var(--ui-black);
  border: 2px solid var(--ui-white); margin-bottom: 6px; overflow: hidden;
}
.home-pack-timer-fill {
  height: 100%; background: var(--good);
  transition: width 0.2s linear, background 0.2s;
}
.home-pack-timer-fill.warn { background: var(--caution); }
.home-pack-timer-fill.crit { background: var(--danger); animation: crit-pulse 0.4s infinite; }
@keyframes crit-pulse { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.5);} }
.home-pack-status {
  font-family: 'Silkscreen', monospace; font-size: 11px;
  color: var(--gold); min-height: 16px; text-align: center;
  margin-bottom: 4px; font-style: italic;
}
.duffel-bar {
  background: var(--ui-black); border: 3px solid var(--gold);
  padding: 6px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.duffel-slots { flex: 1; display: flex; gap: 3px; flex-wrap: wrap; }
.duffel-slot {
  width: 24px; height: 24px; background: var(--pants-dark, #584838);
  border: 2px solid var(--ui-black);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ui-cream);
  font-family: 'Silkscreen', monospace; font-weight: 700;
}
.duffel-slot.filled { background: var(--brick); color: var(--gold); }
.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.item-tile {
  background: var(--ui-black); border: 2px solid var(--ui-white);
  padding: 5px 6px; cursor: pointer; transition: all 0.08s;
  display: flex; flex-direction: column; gap: 2px; min-height: 50px;
}
.item-tile:hover:not(.selected):not(.disabled) {
  border-color: var(--gold); background: var(--brick-dark); transform: translate(-1px,-1px);
}
.item-tile.selected { background: var(--good); border-color: var(--gold); }
.item-tile.selected .item-name { color: var(--ui-black); }
.item-tile.selected .item-tag { color: var(--ui-black); }
.item-tile.disabled { opacity: 0.35; cursor: not-allowed; }
.item-name {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: var(--gold); line-height: 1.15; letter-spacing: 0.5px;
}
.item-tag {
  font-family: 'Silkscreen', monospace; font-size: 9px;
  color: var(--ui-cream); line-height: 1.1;
}
.item-age-gate {
  font-size: 6px; color: var(--caution);
  font-family: 'Press Start 2P', monospace; margin-top: 1px;
}
.pack-done-btn { margin-top: 6px; align-self: center; }

/* INLINE TEXT (partner text during pack) */
.inline-text {
  background: var(--ui-black); border: 3px solid var(--gold);
  padding: 8px 10px; animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.inline-text .from {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: var(--gold); margin-bottom: 4px; letter-spacing: 1px;
}
.inline-text .msg {
  font-family: 'VT323', monospace; font-size: 17px;
  color: var(--good); line-height: 1.2;
}
.inline-text .reply-row { display: flex; gap: 5px; margin-top: 6px; }
.inline-text textarea {
  flex: 1; font-family: 'Silkscreen', monospace; font-size: 12px;
  padding: 6px; background: var(--ui-white); color: var(--ui-black);
  border: 2px solid var(--ui-black); outline: none; resize: none;
}
.inline-text textarea:focus { border-color: var(--gold); }

/* WEATHER */
.weather-card-wrap {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; position: relative;
}
.weather-card {
  background: var(--ui-black); border: 4px solid var(--ui-white);
  padding: 20px; text-align: center;
  box-shadow: 4px 4px 0 var(--brick);
  position: relative; overflow: hidden;
}
.weather-icon {
  font-size: 56px; line-height: 1; margin-bottom: 8px;
  animation: weatherBounce 1.2s infinite ease-in-out;
  position: relative; z-index: 2;
}
@keyframes weatherBounce {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.weather-label {
  font-family: 'Press Start 2P', monospace; font-size: 12px;
  color: var(--gold); letter-spacing: 2px; margin-bottom: 6px;
  position: relative; z-index: 2;
}
.weather-detail {
  font-family: 'Silkscreen', monospace; font-size: 13px;
  color: var(--ui-cream); position: relative; z-index: 2;
}
.rain-particle {
  position: absolute; width: 2px; height: 10px;
  background: rgba(180,210,255,0.6);
  animation: rainFall 0.8s linear infinite;
}
@keyframes rainFall {
  from { transform: translateY(-20px); opacity: 0.8; }
  to { transform: translateY(260px); opacity: 0; }
}
.wind-line {
  position: absolute; height: 2px; background: rgba(255,255,255,0.5);
  animation: windDrift 1.2s linear infinite;
}
@keyframes windDrift {
  from { transform: translateX(-30px); opacity: 0; }
  20%,80% { opacity: 0.7; }
  to { transform: translateX(300px); opacity: 0; }
}
.sun-ray {
  position: absolute; width: 100%; height: 100%;
  background: repeating-conic-gradient(from 0deg at 50% 30%, rgba(250,189,0,0.08) 0deg, rgba(250,189,0,0.08) 15deg, transparent 15deg, transparent 30deg);
  animation: sunSpin 20s linear infinite; pointer-events: none;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }

/* COURSE SCENE */
.course-scene {
  padding: 0;
  background: linear-gradient(180deg, var(--sky-day-top) 0%, var(--sky-day-mid) 45%, var(--sky-day-bot) 50%, var(--fairway) 52%, var(--grass-mid) 70%, var(--grass-dark) 100%);
  position: relative; overflow: hidden;
}
.course-scene.storm {
  background: linear-gradient(180deg, var(--sky-storm-top) 0%, var(--sky-storm-mid) 45%, var(--sky-storm-bot) 50%, var(--grass-dark) 52%, var(--grass-dark) 100%);
}
.course-hills {
  position: absolute; bottom: 30%; left: 0; right: 0;
  height: 80px; pointer-events: none;
}
.hill {
  position: absolute; bottom: 0; width: 200px; height: 60px;
  background: var(--grass-dark);
  border-radius: 100px 100px 0 0;
  border-top: 3px solid var(--ui-black);
}
.hill.h1 { left: -40px; background: #006818; }
.hill.h2 { left: 140px; width: 180px; height: 50px; background: #008020; }
.hill.h3 { right: -30px; width: 220px; height: 70px; background: #006818; }
.course-flag {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
}
.course-flag .pole { width: 3px; height: 40px; background: var(--ui-black); margin: 0 auto; }
.course-flag .flag {
  width: 18px; height: 12px; background: var(--danger);
  position: absolute; top: 0; left: 3px;
  animation: flagWave 1s infinite;
}
@keyframes flagWave { 0%,100%{transform:scaleX(1);} 50%{transform:scaleX(0.85);} }
.scene-overlay {
  position: relative; z-index: 5; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; height: 100%;
}

/* PAY FOR GROUP */
.pfg-wrap { display: flex; flex-direction: column; gap: 10px; }
.pfg-total {
  background: var(--brick); border: 3px solid var(--gold);
  padding: 8px; text-align: center;
  font-family: 'Press Start 2P', monospace; color: var(--gold); font-size: 12px;
}
.pfg-total .big {
  display: block; font-size: 22px; color: var(--ui-white);
  text-shadow: 2px 2px 0 var(--ui-black); margin-top: 4px;
}

/* CHIRP WINDOW */
.chirp-window {
  background: var(--ui-black); border: 4px solid var(--danger);
  padding: 10px 12px; animation: chirpFlash 0.3s; position: relative;
}
.chirp-window::before {
  content: ""; position: absolute; inset: -8px;
  border: 2px solid var(--danger);
  animation: chirpRing 0.8s infinite; pointer-events: none;
}
@keyframes chirpFlash {
  0% { transform: scale(1.05); border-color: var(--gold); }
  100% { transform: scale(1); border-color: var(--danger); }
}
@keyframes chirpRing {
  0% { opacity: 0.9; inset: -4px; }
  100% { opacity: 0; inset: -16px; }
}
.chirp-window .prompt {
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  color: var(--danger); margin-bottom: 6px; letter-spacing: 1px;
  animation: pulse 0.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.chirp-timer-bar {
  height: 8px; background: var(--muted); border: 2px solid var(--ui-white);
  margin-bottom: 8px; overflow: hidden;
}
.chirp-timer-fill {
  height: 100%; background: var(--gold); width: 100%;
  transition: width 0.08s linear;
}
.chirp-timer-fill.warn { background: var(--caution); }
.chirp-timer-fill.crit { background: var(--danger); }
.chat-input { display: flex; gap: 6px; }
.chat-input input, .chat-input textarea {
  flex: 1; font-family: 'Silkscreen', monospace; font-size: 13px;
  padding: 8px; background: var(--ui-white); color: var(--ui-black);
  border: 2px solid var(--ui-black); outline: none; resize: none;
}
.chat-input input:focus, .chat-input textarea:focus { border-color: var(--gold); }

/* SWING MINIGAME */
#swing-canvas-wrap {
  width: 100%; position: relative;
  background: var(--ui-black); border: 3px solid var(--ui-white);
  box-shadow: 4px 4px 0 var(--brick);
}
#swing-canvas {
  width: 100%; max-width: 600px; height: 280px;
  display: block; margin: 0 auto;
  image-rendering: pixelated; cursor: pointer;
}
.swing-instructions {
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: var(--gold); text-align: center;
  letter-spacing: 1px; line-height: 1.5;
}

/* RESULT CARD */
.result-card {
  background: var(--ui-black); border: 4px solid var(--gold);
  padding: 12px; box-shadow: 4px 4px 0 var(--brick);
  text-align: center; animation: resultPop 0.4s;
}
@keyframes resultPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.result-title {
  font-family: 'Press Start 2P', monospace; font-size: 11px;
  color: var(--gold); margin-bottom: 6px; letter-spacing: 1px;
}
.result-score {
  font-family: 'Press Start 2P', monospace; font-size: 22px;
  color: var(--ui-white); text-shadow: 3px 3px 0 var(--brick);
  margin: 6px 0;
}
.result-detail {
  font-family: 'Silkscreen', monospace; font-size: 12px;
  color: var(--ui-cream); line-height: 1.4; margin-top: 6px;
}

/* CART SCENE */
.cart-scene {
  background: linear-gradient(180deg, var(--sky-day-top) 0%, var(--fairway) 60%, var(--grass-mid) 100%);
  position: relative;
}
.cart-vehicle {
  position: absolute; bottom: 50px; right: 30px;
  width: 90px; height: 44px;
  background: var(--ui-white); border: 3px solid var(--ui-black);
  border-radius: 6px 6px 0 0;
}
.cart-vehicle::before {
  content: ""; position: absolute; bottom: -10px; left: 8px;
  width: 16px; height: 16px; background: var(--ui-black); border-radius: 50%;
}
.cart-vehicle::after {
  content: ""; position: absolute; bottom: -10px; right: 8px;
  width: 16px; height: 16px; background: var(--ui-black); border-radius: 50%;
}

/* ARRIVAL / FINAL */
.prep-deploy-card {
  background: var(--ui-black); border: 2px solid var(--gold);
  padding: 6px 8px; font-family: 'Silkscreen', monospace;
  font-size: 11px; color: var(--ui-cream); margin: 3px 0;
  display: block; cursor: pointer;
}
.prep-deploy-card .prep-head {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--gold);
}
.front-door-scene {
  background: linear-gradient(180deg, #1a1030 0%, #3a2040 50%, #2a1828 100%);
  padding: 14px;
}
.final-grade {
  background: linear-gradient(135deg, var(--brick-dark), var(--brick), var(--brick-dark));
  border: 4px solid var(--gold); padding: 14px; text-align: center;
  font-family: 'Press Start 2P', monospace; color: var(--ui-cream);
  position: relative; overflow: hidden;
}
.final-grade::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(250,189,0,0.2), transparent 60%);
  animation: gradeShine 3s infinite;
}
@keyframes gradeShine { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
.final-grade .letter {
  font-size: 44px; color: var(--gold);
  text-shadow: 4px 4px 0 var(--ui-black);
  display: block; margin: 6px 0;
  animation: letterDrop 0.8s ease-out;
  position: relative; z-index: 2;
}
@keyframes letterDrop {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.final-grade .ceiling-note { font-size: 7px; opacity: 0.8; position: relative; z-index: 2; }
.final-grade .comment {
  font-family: 'Silkscreen', monospace; font-size: 13px;
  font-weight: 700; color: var(--ui-white);
  margin-top: 6px; line-height: 1.4;
  position: relative; z-index: 2;
}
.trail-log {
  background: var(--ui-black); border: 3px solid var(--pipe-green);
  padding: 10px 12px; font-family: 'VT323', monospace;
  font-size: 16px; color: var(--pipe-green); line-height: 1.3;
  box-shadow: 3px 3px 0 var(--brick); white-space: pre-line;
}
.trail-log::before {
  content: "— THE TRAIL LOG —"; display: block;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--gold); margin-bottom: 6px; letter-spacing: 1px;
}
.scorecard { display: flex; flex-direction: column; gap: 6px; }
.rubric-row {
  background: var(--ui-black); border: 2px solid var(--ui-white);
  padding: 6px 8px;
}
.rubric-row-header {
  display: flex; justify-content: space-between;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: var(--gold); margin-bottom: 4px; letter-spacing: 1px;
}
.rubric-row-header .val { color: var(--ui-white); }
.rubric-bar {
  height: 8px; background: var(--muted);
  border: 1px solid var(--ui-white); overflow: hidden;
}
.rubric-bar-fill { height: 100%; background: var(--good); animation: barFill 1s ease-out; }
@keyframes barFill { from { width: 0 !important; } }
.rubric-note {
  font-family: 'Silkscreen', monospace; font-size: 11px;
  color: var(--ui-cream); margin-top: 3px; line-height: 1.3;
}
.badge {
  display: inline-block;
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  padding: 5px 8px; background: var(--gold); color: var(--ui-black);
  border: 2px solid var(--ui-black);
  margin: 2px; letter-spacing: 1px;
  animation: badgePop 0.4s;
}
@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ECHO PHONE */
#echo-overlay {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);
  max-width: 340px; width: 90%; padding-top: 6px;
  display: none;
  pointer-events: none;
}
#echo-overlay.on { display: block; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.echo-phone {
  background: var(--ui-black); border: 4px solid var(--gold);
  padding: 8px 10px; font-family: 'VT323', monospace;
  color: var(--good); font-size: 17px;
  box-shadow: 4px 4px 0 var(--brick); cursor: pointer;
  animation: echoVibrate 0.15s infinite;
}
@keyframes echoVibrate {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
.echo-phone .echo-from {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  color: var(--gold); margin-bottom: 3px; letter-spacing: 1px;
}
.echo-phone .echo-msg { line-height: 1.2; }
.echo-phone .echo-cta {
  margin-top: 5px; font-family: 'Silkscreen', monospace; font-size: 10px;
  color: var(--ui-white); text-align: right; animation: pulse 1s infinite;
}
#echo-modal {
  position: fixed; inset: 0; background: rgba(10,10,46,0.9);
  display: none; align-items: center; justify-content: center;
  z-index: 2000; padding: 14px;
}
#echo-modal.on { display: flex; }
.echo-modal-inner {
  background: var(--ui-black); border: 4px solid var(--gold);
  padding: 14px; max-width: 400px; width: 100%;
  box-shadow: 6px 6px 0 var(--brick);
}
.echo-modal-inner h3 {
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  color: var(--gold); margin-bottom: 8px;
}
.echo-bubble {
  background: var(--ui-white); color: var(--ui-black);
  padding: 8px 12px; border: 2px solid var(--ui-black);
  font-family: 'Silkscreen', monospace; font-size: 13px;
  margin-bottom: 8px; line-height: 1.4;
}

/* ===== CART GIRL SCENE ===== */
.cart-scene {
  background: linear-gradient(180deg, var(--sky-day-top) 0%, var(--fairway) 60%, var(--grass-mid) 100%);
  position: relative;
}
.cart-vehicle {
  position: absolute; bottom: 60px; right: 20px;
  width: 90px; height: 46px;
  background: var(--ui-white); border: 3px solid var(--ui-black);
  border-radius: 6px 6px 0 0; z-index: 3;
  animation: cartBob 2s infinite ease-in-out;
}
@keyframes cartBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} }
.cart-vehicle::before {
  content: ""; position: absolute; bottom: -10px; left: 10px;
  width: 18px; height: 18px; background: var(--ui-black); border-radius: 50%;
}
.cart-vehicle::after {
  content: ""; position: absolute; bottom: -10px; right: 10px;
  width: 18px; height: 18px; background: var(--ui-black); border-radius: 50%;
}
.cart-roof {
  position: absolute; top: -8px; left: -4px; right: -4px;
  height: 12px; background: var(--danger); border: 3px solid var(--ui-black);
}

/* ===== ARRIVAL ===== */
.front-door-scene {
  background: linear-gradient(180deg, #1a1030 0%, #3a2040 50%, #2a1828 100%);
  padding: 14px;
}
.prep-deploy-card {
  background: var(--ui-black);
  border: 2px solid var(--gold);
  padding: 8px 10px;
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  color: var(--ui-cream);
  margin: 4px 0;
  display: block; cursor: pointer; user-select: none;
}
.prep-deploy-card input { margin-right: 6px; vertical-align: middle; }
.prep-deploy-card .prep-head {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--gold);
  margin-right: 6px;
}

/* ===== FINAL EVAL ===== */
.final-grade {
  background: linear-gradient(135deg, var(--brick-dark), var(--brick), var(--brick-dark));
  border: 4px solid var(--gold);
  padding: 14px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: var(--ui-cream);
  position: relative;
  overflow: hidden;
}
.final-grade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(250,189,0,0.2), transparent 60%);
  animation: gradeShine 3s infinite;
}
@keyframes gradeShine {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.final-grade .letter {
  font-size: 44px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--ui-black);
  display: block; margin: 6px 0;
  animation: letterDrop 0.8s ease-out;
  position: relative; z-index: 2;
}
@keyframes letterDrop {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.final-grade .ceiling-note {
  font-size: 7px; opacity: 0.8;
  position: relative; z-index: 2;
}
.final-grade .comment {
  font-family: 'Silkscreen', monospace;
  font-size: 13px; font-weight: 700;
  color: var(--ui-white);
  margin-top: 6px; line-height: 1.4;
  position: relative; z-index: 2;
}
.trail-log {
  background: var(--ui-black);
  border: 3px solid var(--pipe-green);
  padding: 10px 12px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--pipe-green);
  line-height: 1.3;
  box-shadow: 3px 3px 0 var(--brick);
  white-space: pre-line;
}
.trail-log::before {
  content: "— THE TRAIL LOG —";
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.scorecard { display: flex; flex-direction: column; gap: 6px; }
.rubric-row {
  background: var(--ui-black);
  border: 2px solid var(--ui-white);
  padding: 6px 8px;
}
.rubric-row-header {
  display: flex; justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: var(--gold);
  margin-bottom: 4px; letter-spacing: 1px;
}
.rubric-row-header .val { color: var(--ui-white); }
.rubric-bar {
  height: 8px;
  background: var(--muted);
  border: 1px solid var(--ui-white);
  overflow: hidden;
}
.rubric-bar-fill {
  height: 100%; background: var(--good);
  animation: barFill 1s ease-out;
}
@keyframes barFill { from { width: 0 !important; } }
.rubric-note {
  font-family: 'Silkscreen', monospace;
  font-size: 11px; color: var(--ui-cream);
  margin-top: 3px; line-height: 1.3;
}
.badge {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 8px;
  background: var(--gold); color: var(--ui-black);
  border: 2px solid var(--ui-black);
  margin: 2px; letter-spacing: 1px;
  animation: badgePop 0.4s;
}
@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
/* ==========================================================================
   BOTTOM DOCK — phone, quick-actions, wife patience
   ========================================================================== */

#dock {
  position: relative;
  display: none; /* hidden until game starts */
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 2);
  background: linear-gradient(#1a1e30 0 50%, #0f1222 50% 100%);
  box-shadow:
    inset 0 0 0 var(--px) #0a0c18,
    inset 0 0 0 calc(var(--px) * 2) var(--steel-lt),
    inset 0 0 0 calc(var(--px) * 3) var(--steel-dk),
    0 calc(var(--px) * -1) 0 #000;
  border-top: calc(var(--px) * 2) solid #000;
}
#dock.on { display: flex; }

.dock-btn {
  position: relative;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  padding: calc(var(--px) * 1);
  background: #1a1e30;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 1) calc(var(--px) * 1) 0 #4a5270,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #0a0c18,
    0 var(--px) 0 #000;
  transition: transform 60ms steps(1);
}
.dock-btn:hover { filter: brightness(1.15); }
.dock-btn:active {
  transform: translateY(var(--px));
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 1) calc(var(--px) * 1) 0 #0a0c18,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #4a5270,
    0 0 0 #000;
}

.dock-icon {
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  image-rendering: pixelated;
}

/* Phone notification badge */
.dock-btn .badge {
  position: absolute;
  top: calc(var(--px) * -1);
  right: calc(var(--px) * -1);
  min-width: calc(var(--px) * 4);
  height: calc(var(--px) * 4);
  padding: 0 calc(var(--px) * 0.5);
  background: var(--red);
  color: #fff;
  font-family: var(--f-display);
  font-size: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px #000;
  animation: badgePulse 0.8s steps(2) infinite;
}
.dock-btn .badge.on { display: flex; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); filter: brightness(1.3); }
}

/* Wife patience in dock (right side) */
.dock-wife {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 1);
  padding: calc(var(--px) * 1) calc(var(--px) * 2);
  background: #0f1222;
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 0 calc(var(--px) * 2) #4a5270;
  min-width: calc(var(--px) * 14);
  justify-content: center;
  height: calc(var(--px) * 12);
}
.dock-wife .dock-wife-val {
  font-family: var(--f-display);
  font-size: 10px;
  color: #ff6c96;
  text-shadow: 1px 1px 0 #000;
}
.dock-wife.danger {
  animation: hud-pulse 0.6s steps(2) infinite;
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 0 calc(var(--px) * 2) var(--red);
}
.dock-wife.hidden { display: none; }

/* ==========================================================================
   PHONE MODAL
   ========================================================================== */

#phone-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: calc(var(--px) * 4);
}
#phone-modal.on { display: flex; }

.phone-modal-inner {
  background: var(--ink);
  width: 100%;
  max-width: calc(var(--px) * 80);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 var(--px) #000,
    0 0 0 calc(var(--px) * 2) var(--paper),
    0 0 0 calc(var(--px) * 3) #000,
    inset 0 0 0 var(--px) #000;
}

.phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  background: var(--ink-2);
  border-bottom: calc(var(--px) * 0.5) solid var(--paper);
}
.phone-header-title {
  font-family: var(--f-display);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 2px;
}
.phone-close {
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 12px;
  cursor: pointer;
  padding: calc(var(--px) * 1);
}
.phone-close:hover { color: var(--red); }

.phone-body {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--px) * 3);
}
.phone-empty {
  font-family: var(--f-body);
  font-size: 20px;
  color: var(--steel);
  text-align: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 2);
}

.phone-convo {
  margin-bottom: calc(var(--px) * 3);
}
.phone-convo-header {
  font-family: var(--f-display);
  font-size: 8px;
  color: var(--gold);
  margin-bottom: calc(var(--px) * 1);
  letter-spacing: 1px;
}
.phone-msg {
  background: var(--paper);
  color: #000;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  font-family: var(--f-body);
  font-size: 18px;
  margin-bottom: calc(var(--px) * 1);
  box-shadow: inset 0 0 0 var(--px) #000;
  line-height: 1.2;
  max-width: 85%;
}
.phone-msg.from-me {
  background: var(--sky);
  color: #fff;
  margin-left: auto;
}

.phone-reply {
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  background: var(--ink-2);
  border-top: var(--px) solid var(--paper);
  display: flex;
  gap: calc(var(--px) * 2);
  align-items: flex-end;
}
.phone-reply textarea {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--f-body);
  font-size: 18px;
  padding: calc(var(--px) * 2);
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 0 calc(var(--px) * 2) var(--paper);
  resize: none;
  min-height: calc(var(--px) * 10);
}

/* ==========================================================================
   QUICK-ACTION POPOVER
   ========================================================================== */

#quick-popover {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: calc(var(--px) * 4);
}
#quick-popover.on { display: flex; }

.quick-popover-inner {
  background: var(--ink);
  padding: calc(var(--px) * 4);
  max-width: calc(var(--px) * 70);
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 var(--px) #000,
    0 0 0 calc(var(--px) * 2) var(--paper),
    0 0 0 calc(var(--px) * 3) #000;
}

.quick-popover-title {
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--gold);
  margin-bottom: calc(var(--px) * 3);
  letter-spacing: 2px;
}
.quick-popover-body {
  font-family: var(--f-body);
  font-size: 20px;
  color: var(--paper);
  margin-bottom: calc(var(--px) * 4);
  line-height: 1.2;
}
.quick-popover-actions {
  display: flex;
  gap: calc(var(--px) * 2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   WORLD MAP — additions for Session 3 (current-node pulse + animated cart)
   ========================================================================== */

.hole-node.current {
  background: var(--gold);
  color: #000;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--red),
    0 var(--px) 0 #000;
  animation: nodeCurrent 0.8s steps(2) infinite;
}
@keyframes nodeCurrent {
  0%, 100% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); }
  50%      { filter: brightness(1.3); transform: translate(-50%, -50%) scale(1.1); }
}

/* Golf cart sprite that rides along the path between holes.
   The SVG content is injected by world-map.js; this just positions
   and animates the container. */
.golf-cart {
  position: absolute;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 7);
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 10;
  transition: left 1.4s cubic-bezier(0.4, 0, 0.6, 1), top 1.4s cubic-bezier(0.4, 0, 0.6, 1);
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 #000);
}
.golf-cart svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   HOLE VIEW (bird's-eye top-down SVG on shot picker)
   ========================================================================== */

.hole-view {
  background: var(--ink);
  padding: calc(var(--px) * 1);
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset 0 0 0 calc(var(--px) * 2) var(--steel-dk);
  margin-bottom: calc(var(--px) * 2);
}
.hole-view svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   AIM SELECTOR (L / C / R buttons on shot picker)
   ========================================================================== */

.aim-row {
  display: flex;
  gap: calc(var(--px) * 1.5);
  justify-content: center;
  margin: calc(var(--px) * 1) 0;
}
.aim-btn {
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 1px;
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  background: var(--ink-2);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 var(--px) #000,
    inset calc(var(--px) * 1) calc(var(--px) * 1) 0 #4a5270,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #0a0c18,
    0 var(--px) 0 #000;
  transition: transform 60ms steps(1);
}
.aim-btn:hover { filter: brightness(1.15); }
.aim-btn.sel {
  background: var(--gold);
  color: #000;
  text-shadow: none;
}
.aim-btn:active {
  transform: translateY(var(--px));
}

/* ==========================================================================
   SCORECARD — paper aesthetic with ruled columns
   ========================================================================== */

/* ---- Mini scorecard (embedded on world map) ---- */

.scorecard-mini {
  background: #f4e8c9;
  color: #3a2a12;
  padding: 10px 12px;
  box-shadow:
    inset 0 0 0 2px #8a6a2a,
    inset 0 0 0 4px #f4e8c9,
    0 3px 0 #000,
    0 0 0 1px #000;
  font-family: 'Silkscreen', 'Courier New', monospace;
  max-width: 620px;
  margin: 10px auto;
}
.sc-mini-title {
  font-family: var(--f-display);
  font-size: 9px;
  color: #7c2b18;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #8a6a2a;
  padding-bottom: 4px;
}
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.2;
}
.sc-table-mini th, .sc-table-mini td {
  border: 1px solid #8a6a2a;
  text-align: center;
  padding: 3px 2px;
  min-width: 18px;
}
.sc-row-hole th, .sc-row-hole td {
  background: #7c2b18;
  color: #f4e8c9;
  font-family: var(--f-display);
  font-size: 8px;
  letter-spacing: 1px;
}
.sc-row-par td {
  background: #e3d4a8;
  font-weight: bold;
  color: #3a2a12;
}
.sc-row-score td {
  background: #fbf3dc;
  color: #1a2e4a;
  font-weight: bold;
}
.sc-row-score td.birdie, .sc-row-score td.eagle {
  color: #c82020;
}
.sc-row-score td.birdie { background: #fff; position: relative; }
.sc-row-score td.birdie::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid #c82020;
  border-radius: 50%;
  pointer-events: none;
}
.sc-row-score td.eagle { background: #fff; position: relative; }
.sc-row-score td.eagle::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid #c82020;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c82020;
}
.sc-row-score td.double {
  color: #1a2e4a;
  position: relative;
}
.sc-row-score td.double::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1.5px solid #1a2e4a;
  pointer-events: none;
}
td.sc-total, th.sc-total {
  background: #3a2a12 !important;
  color: #f4e8c9 !important;
}
.sc-mini-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 8px;
  color: #3a2a12;
  letter-spacing: 1px;
}
.sc-mini-footer b { color: #7c2b18; font-size: 10px; }
.sc-vspar.over  { color: #7c2b18; }
.sc-vspar.under { color: #16611a; }

/* ---- Full-screen scorecard modal ---- */

.scorecard-full-wrap {
  padding: 10px;
  background: rgba(0,0,0,0.35);
  min-height: 100%;
}
.scorecard-full {
  background: #f4e8c9;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;
  position: relative;
  box-shadow:
    inset 0 0 0 3px #8a6a2a,
    inset 0 0 0 6px #f4e8c9,
    inset 0 0 0 7px #3a2a12,
    0 6px 0 #000,
    0 0 0 2px #000;
  color: #3a2a12;
  font-family: 'Silkscreen', 'Courier New', monospace;
}
/* Scorecard paper "texture" — subtle horizontal lines */
.scorecard-full::before {
  content: '';
  position: absolute;
  inset: 8px;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 22px,
      rgba(138, 106, 42, 0.07) 22px,
      rgba(138, 106, 42, 0.07) 23px
    );
  pointer-events: none;
}
.sc-full-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #3a2a12;
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
}
.sc-club-crest {
  font-size: 28px;
  color: #7c2b18;
  line-height: 1;
}
.sc-club-info { flex: 1; }
.sc-club-name {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: #7c2b18;
  line-height: 1.2;
}
.sc-club-sub {
  font-family: var(--f-display);
  font-size: 7px;
  letter-spacing: 2px;
  color: #3a2a12;
  margin-top: 3px;
}
.sc-date {
  font-family: var(--f-display);
  font-size: 10px;
  color: #3a2a12;
  letter-spacing: 1px;
}
.sc-player-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: #3a2a12;
  padding: 8px 0;
  border-bottom: 1px dashed #8a6a2a;
  margin-bottom: 10px;
  position: relative;
}
.sc-player-row b { color: #7c2b18; }

.sc-full-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.sc-full-table thead th {
  background: #7c2b18;
  color: #f4e8c9;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 6px 4px;
  border: 1px solid #3a2a12;
}
.sc-full-row td {
  padding: 5px 6px;
  border-bottom: 1px solid #c0a870;
  border-right: 1px solid #c0a870;
}
.sc-full-row td.sc-hole-num {
  font-family: var(--f-display);
  font-size: 10px;
  color: #7c2b18;
  text-align: center;
  width: 32px;
  border-left: 1px solid #c0a870;
}
.sc-full-row td.sc-hole-name {
  font-family: var(--f-body);
  font-size: 13px;
  color: #3a2a12;
  letter-spacing: 0.5px;
}
.sc-full-row td.sc-hole-yds,
.sc-full-row td.sc-hole-par {
  text-align: center;
  font-family: var(--f-display);
  font-size: 10px;
  width: 54px;
}
.sc-full-row td.sc-hole-strokes {
  text-align: center;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: bold;
  width: 60px;
  background: #fbf3dc;
}
.sc-full-row td.sc-hole-strokes.birdie,
.sc-full-row td.sc-hole-strokes.eagle { color: #c82020; }
.sc-full-row td.sc-hole-strokes.double { color: #1a2e4a; }
.sc-full-row.birdie td.sc-hole-strokes {
  background: radial-gradient(circle, #fff 50%, #fbf3dc 52%);
}
.sc-full-row.eagle td.sc-hole-strokes {
  background: radial-gradient(circle, #fff 30%, #c82020 32%, #c82020 38%, #fff 40%, #fbf3dc 60%);
}
.sc-full-subtotal td {
  background: #e3d4a8;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: #3a2a12;
  padding: 6px 8px;
  border: 1px solid #8a6a2a;
  text-align: center;
}
.sc-full-subtotal td:first-child { text-align: right; }
.sc-full-total td {
  background: #3a2a12;
  color: #f4e8c9;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 2px;
  padding: 8px;
  text-align: center;
  border: 1px solid #000;
}
.sc-full-total td:first-child { text-align: right; }

/* ---- Links Up ad block ---- */
.sc-ad {
  display: flex;
  gap: 12px;
  background: #fbf3dc;
  border: 2px dashed #7c2b18;
  padding: 10px 12px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.sc-ad::before {
  content: 'ADVERTISEMENT';
  position: absolute;
  top: -8px;
  left: 14px;
  font-family: var(--f-display);
  font-size: 7px;
  letter-spacing: 2px;
  background: #f4e8c9;
  padding: 0 6px;
  color: #3a2a12;
}
.sc-ad-icon img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 0 #000;
}
.sc-ad-body { flex: 1; }
.sc-ad-eyebrow {
  font-family: var(--f-display);
  font-size: 7px;
  letter-spacing: 2px;
  color: #7c2b18;
  margin-bottom: 3px;
}
.sc-ad-headline {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: #16611a;
  line-height: 1;
}
.sc-ad-subhead {
  font-family: var(--f-body);
  font-size: 14px;
  color: #3a2a12;
  font-style: italic;
  margin: 3px 0 4px;
}
.sc-ad-copy {
  font-family: var(--f-body);
  font-size: 12px;
  color: #3a2a12;
  line-height: 1.3;
  margin-bottom: 5px;
}
.sc-ad-cta {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  background: #16611a;
  color: #fff3d6;
  padding: 5px 10px;
  box-shadow: 0 2px 0 #000;
}

.sc-footer {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: 7px;
  color: #8a6a2a;
  letter-spacing: 1px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #8a6a2a;
  position: relative;
  z-index: 1;
}

.sc-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c2b18;
  color: #f4e8c9;
  border: 0;
  padding: 4px 8px;
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 2px 0 #000;
  z-index: 2;
}
.sc-close-btn:hover { filter: brightness(1.15); }
.sc-close-btn:active { transform: translateY(1px); }

/* Scorecard modal overlay */
#scorecard-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 24, 0.92);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  overflow-y: auto;
  padding: 20px 10px;
}
#scorecard-modal.open {
  display: flex;
}
.scorecard-modal-inner {
  width: 100%;
  max-width: 620px;
  animation: scorecardIn 180ms ease-out;
}
@keyframes scorecardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS — Session 14 baseline pass
   Real per-screen mobile tuning will happen screen-by-screen in
   subsequent sessions. This block keeps the game playable on a phone.
   ========================================================================== */

@media (max-width: 720px) {
  body, html { font-size: 13px; }

  #app {
    max-width: 100% !important;
    padding: 0 !important;
  }
  #viewport {
    width: 100% !important;
    min-height: calc(100vh - 140px);
  }

  /* Tighten the top HUD */
  #hud {
    padding: 4px 6px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .hud-stat {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }

  /* Tighten the bottom dock */
  #dock {
    padding: 6px !important;
    gap: 6px !important;
  }
  .dock-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Scene area gets more vertical room */
  .scene {
    padding: 8px !important;
  }

  /* Title screen scales */
  .title-logo {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
  }
  .title-subtitle {
    font-size: 10px !important;
  }

  /* Buttons get bigger touch targets */
  .btn {
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .choice-btn {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Hole view scales naturally — SVG handles itself */

  /* Scorecard modal: reduce padding so it fits */
  .scorecard-full {
    padding: 8px 10px !important;
  }
  .sc-full-table {
    font-size: 11px !important;
  }
  .sc-full-table thead th {
    font-size: 7px !important;
    padding: 4px 2px !important;
  }
  .sc-full-row td {
    padding: 3px 4px !important;
  }
  .sc-hole-name {
    font-size: 11px !important;
  }
  .sc-ad {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .sc-ad-icon img {
    width: 48px !important;
    height: 48px !important;
  }
  .sc-ad-headline {
    font-size: 16px !important;
  }
  .sc-ad-copy {
    font-size: 11px !important;
  }

  /* Phone modal scales */
  #phone-modal-inner {
    width: 95% !important;
    max-width: 100% !important;
  }

  /* Dialog boxes */
  .dialog {
    padding: 10px !important;
  }
  .dialog-text {
    font-size: 13px !important;
  }

  /* Drunken swing canvas */
  #swing-canvas {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  /* Very narrow phones */
  .title-logo {
    font-size: 18px !important;
  }
  .hud-stat {
    font-size: 8px !important;
  }
  .dock-btn {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ==========================================================================
   PASSWORD GATE — country club members-only screen
   ========================================================================== */

#gate-root {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, #2a4d2e 0%, #15291a 70%, #0a0e0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: var(--f-display, 'Press Start 2P', monospace);
  padding: 20px;
  animation: gateFadeIn 250ms ease-out;
}
#gate-root.exiting {
  animation: gateFadeOut 350ms ease-in forwards;
}
@keyframes gateFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateFadeOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.98); } }

#gate-root.shake .gate-card { animation: gateShake 350ms; }
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.gate-card {
  background: #f4e8c9;
  color: #3a2a12;
  max-width: 400px;
  width: 100%;
  padding: 36px 24px 24px;
  text-align: center;
  box-shadow:
    inset 0 0 0 3px #8a6a2a,
    inset 0 0 0 6px #f4e8c9,
    inset 0 0 0 7px #3a2a12,
    0 8px 0 #000,
    0 0 0 2px #000;
  position: relative;
}

.gate-crest {
  font-size: 42px;
  color: #7c2b18;
  line-height: 1;
  margin-bottom: 6px;
}
.gate-title {
  font-family: var(--f-display, 'Press Start 2P', monospace);
  font-size: 14px;
  letter-spacing: 3px;
  color: #7c2b18;
  margin-bottom: 4px;
}
.gate-sub {
  font-family: var(--f-display, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 2px;
  color: #3a2a12;
  margin-bottom: 20px;
}
.gate-divider {
  height: 1px;
  background: #8a6a2a;
  margin: 0 auto 18px;
  width: 60%;
}
.gate-prompt {
  font-family: var(--f-display, 'Press Start 2P', monospace);
  font-size: 9px;
  letter-spacing: 2px;
  color: #3a2a12;
  margin-bottom: 14px;
}

#gate-input {
  display: block;
  width: 100%;
  padding: 12px;
  font-family: 'Silkscreen', monospace;
  font-size: 16px;
  background: #fbf3dc;
  color: #3a2a12;
  border: 0;
  box-shadow: inset 0 0 0 2px #8a6a2a;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
#gate-input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px #7c2b18;
}

#gate-submit {
  display: block;
  width: 100%;
  padding: 12px;
  background: #7c2b18;
  color: #f4e8c9;
  border: 0;
  font-family: var(--f-display, 'Press Start 2P', monospace);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
  transition: transform 60ms;
}
#gate-submit:hover { filter: brightness(1.12); }
#gate-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

.gate-error {
  min-height: 18px;
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  color: #7c2b18;
  margin-top: 12px;
}
.gate-footer {
  font-family: var(--f-display, 'Press Start 2P', monospace);
  font-size: 7px;
  letter-spacing: 2px;
  color: #8a6a2a;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .gate-card { padding: 28px 18px 18px; }
  .gate-crest { font-size: 34px; }
  .gate-title { font-size: 12px; }
}