/* LAST LIGHT — game styles. Scoped to .ll; recipes from brand/bogey-hound/BRAND.md. */
@font-face { font-family: "Press Start 2P"; src: url("fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: swap; }

.ll {
  --navy: #003049; --navy-deep: #00243A; --cream: #FDF0D5; --cream-bright: #FFF9EA; --cream-deep: #F3E3BE;
  --red: #C1121F; --charcoal: #4A4A4A; --stitch: rgba(0,48,73,.4);
  --serif: "Libre Baskerville", Georgia, serif; --sans: "Space Grotesk", Arial, sans-serif; --pixel: "Press Start 2P", "Courier New", monospace;
  --ease-out: cubic-bezier(.16,1,.3,1);
  width: min(100%, 520px); margin: 0 auto; color: var(--cream); font-family: var(--sans);
  display: flex; flex-direction: column; gap: 12px;
}
.ll * { box-sizing: border-box; }

/* top bar: kicker + hole name left, pixel HUD right */
.ll-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ll-kick { margin: 0 0 6px; font: 10px/1.4 var(--pixel); color: var(--red); letter-spacing: .02em; -webkit-font-smoothing: none; }
.ll-top .ll-kick { color: var(--cream); opacity: .75; }
.ll-name { margin: 0; font: 700 clamp(22px, 5vw, 30px)/1.05 var(--serif); color: var(--cream); }
.ll-hud { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 9px/1 var(--pixel); color: var(--cream); opacity: .9; -webkit-font-smoothing: none; white-space: nowrap; }
.ll-hud b { font-weight: 400; color: #F0A857; margin-left: 6px; }

/* stage: the pixel canvas, scaled up crisp */
.ll-stage { position: relative; width: min(100%, calc((100svh - var(--ll-chrome, 278px)) * .75)); min-width: 270px; margin: 0 auto; border: 3px solid var(--cream); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.25); background: #2C5945; }
.ll-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }

/* overlays: title, scorecard, final */
.ll-over { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 12px; overflow-y: auto; background: rgba(0,36,58,.55); }
.ll-over.is-on { display: flex; }
.ll-panel { margin: auto 0; width: 100%; max-width: 400px; background: var(--cream-bright); color: var(--navy); border: 3px solid var(--navy); border-radius: 18px; box-shadow: 0 5px 0 rgba(0,48,73,.25); padding: 18px 16px 16px; text-align: center; animation: ll-in .5s var(--ease-out) both; }
@keyframes ll-in { from { opacity: 0; transform: translateY(14px); } }
.ll-panel .ll-kick { color: var(--red); font-size: 9px; }
.ll-panel-end .ll-kick { color: var(--charcoal); }
.ll-title { margin: 4px 0 8px; font: 700 clamp(30px, 8vw, 44px)/1 var(--serif); color: var(--navy); }
.ll-title small { display: block; margin-top: 8px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--charcoal); }
.ll-lede { margin: 0 0 10px; font: 400 16px/1.5 var(--sans); color: var(--navy); }
.ll-how { margin: 0 0 16px; padding-top: 10px; border-top: 2px dashed var(--stitch); font: 400 14px/1.5 var(--sans); color: var(--charcoal); }

/* game button (pixel, hard shadow that collapses on press) */
.ll-btn { display: inline-block; font: 11px/1 var(--pixel); -webkit-font-smoothing: none; color: var(--cream); background: var(--navy); border: 3px solid var(--navy); border-radius: 6px; padding: 12px 16px; box-shadow: 4px 4px 0 var(--navy-deep); cursor: pointer; text-decoration: none; transition: transform 120ms steps(2,end), box-shadow 120ms steps(2,end); }
.ll-btn:hover { background: var(--navy-deep); }
.ll-btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--navy-deep); }
.ll-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.ll-btn-red { background: var(--navy); font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ll-btn-red:hover { background: var(--navy-deep); }
.ll-btn-ghost { background: transparent; color: var(--navy); }
.ll-btn-ghost:hover { background: var(--cream-deep); }
.ll-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* scorecard: golf notation, scores written in */
.ll-card { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font: 400 12px/1 var(--sans); color: var(--navy); table-layout: fixed; }
.ll-card th, .ll-card td { border: 1px solid rgba(0,48,73,.25); padding: 6px 0; text-align: center; }
.ll-card th { font: 500 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); }
.ll-card tr:first-child th { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.ll-card th:first-child { width: 15%; }
.ll-score td { height: 30px; }
.ll-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font: 700 13px/1 var(--sans); }
.ll-mark.n-birdie { border: 1.5px solid var(--navy); border-radius: 50%; }
.ll-mark.n-eagle { border: 1.5px solid var(--navy); border-radius: 50%; box-shadow: 0 0 0 2px var(--cream-bright), 0 0 0 3.5px var(--navy); }
.ll-mark.n-bogey { border: 1.5px solid var(--navy); }
.ll-mark.n-double { border: 1.5px solid var(--navy); outline: 1.5px solid var(--navy); outline-offset: 2px; }
.ll-mark.is-new { animation: ll-write .6s steps(4,end) both; }
@keyframes ll-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ll-nick { min-height: 1.6em; margin: 8px 0 14px; font: italic 400 18px/1.4 var(--serif); color: var(--navy); }

.ll-card + .ll-card { margin-top: 0; }
.ll-card tr:first-child th:last-child, .ll-card td:last-child { width: 12%; }

/* title panel: tighter, so both buttons sit above the fold on a phone */
.ll-panel-title { padding: 14px 14px 14px; }
.ll-panel-title .ll-title { font-size: clamp(28px, 7vw, 40px); margin-bottom: 6px; }
.ll-panel-title .ll-lede { font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
.ll-panel-title .ll-how { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.ll-panel-title .ll-row { gap: 8px; }
.ll-panel-title .ll-btn-ghost { padding: 9px 12px; font-size: 9px; box-shadow: none; border-width: 2px; }

/* pick up: small pixel button, top right of the hole (the wind sock has the top left) */
.ll-pick { position: absolute; top: 8px; right: 8px; z-index: 1; font: 8px/1 var(--pixel); -webkit-font-smoothing: none; color: var(--navy); background: var(--cream-bright); border: 2px solid var(--navy); border-radius: 4px; padding: 6px 7px; box-shadow: 2px 2px 0 var(--navy-deep); cursor: pointer; }
.ll-pick:active { transform: translate(2px,2px); box-shadow: none; }
.ll-pick:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.ll-pick[hidden] { display: none; }

/* leaderboard */
.ll-save { display: flex; gap: 8px; margin: 0 0 12px; }
.ll-save[hidden] { display: none; }
.ll-input { flex: 1; min-width: 0; font: 500 15px/1 var(--sans); color: var(--navy); background: var(--cream); border: 2px solid var(--navy); border-radius: 6px; padding: 9px 10px; }
.ll-input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.ll-save .ll-btn { padding: 10px 12px; font-size: 9px; }
.ll-board { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font: 400 13px/1.2 var(--sans); color: var(--navy); font-variant-numeric: tabular-nums; }
.ll-board th { font: 500 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); padding: 6px 4px; border-bottom: 2px dashed var(--stitch); }
.ll-board td { padding: 6px 4px; border-bottom: 1px solid rgba(0,48,73,.12); }
.ll-board th:nth-child(2), .ll-board td:nth-child(2) { text-align: left; }
.ll-board tr.is-me td { font-weight: 700; background: var(--cream-deep); }
.ll-panel > .ll-btn-ghost[data-k="back"] { margin-top: 12px; }

/* discount stub */
.ll-stub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 14px; padding: 12px 14px; border: 2px dashed var(--stitch); border-radius: 12px; text-align: left; }
.ll-stub span { font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); }
.ll-stub b { font: 13px/1 var(--pixel); color: var(--red); -webkit-font-smoothing: none; }
.ll-fine { margin: 12px 0 0; font: 400 12px/1.4 var(--sans); color: var(--charcoal); }

/* Bogey's dialogue box (Pokémon energy, brand words) */
.ll-talk { position: relative; display: flex; align-items: center; gap: 12px; min-height: 104px; padding: 8px 34px 8px 12px; background: var(--cream-bright); color: var(--navy); border-radius: 18px; box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 4px var(--navy), 0 5px 0 rgba(0,0,0,.25); }
.ll-dog { flex: none; width: 73px; height: 99px; margin: -4px 0 -6px; }
.ll-dog img { display: block; width: 73px; height: 99px; image-rendering: pixelated; image-rendering: crisp-edges; }
.ll-tag { margin: 0 0 6px; font: 9px/1 var(--pixel); color: var(--red); -webkit-font-smoothing: none; }
.ll-line { margin: 0; min-height: 1.4em; font: 400 15px/1.4 var(--sans); color: var(--navy); }
.ll-caret { position: absolute; right: 16px; bottom: 10px; font-style: normal; color: var(--navy); animation: ll-blink 1s steps(2,end) infinite; }
@keyframes ll-blink { 50% { opacity: 0; } }

@media (max-width: 420px) {
  .ll-card { font-size: 11px; }
  .ll-card th, .ll-card td { padding: 5px 0; }
  .ll-mark { width: 18px; height: 18px; font-size: 12px; }
  .ll-line { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-panel, .ll-mark.is-new { animation: none; }
  .ll-caret { animation: none; }
}