/* Relic Putt Guide — single stylesheet, system fonts only, no external assets. */

:root {
  --bg: #071d18;
  --bg-2: #0b2f25;
  --panel: #0e3b2e;
  --panel-2: #124a3a;
  --line: #1f6350;
  --line-soft: #17493a;
  --ink: #eaf5ef;
  --ink-2: #b5cfc3;
  --ink-3: #8aab9d;
  --accent: #ffd479;
  --accent-2: #7ce0a8;
  --water: #1d5f7a;
  --sand: #d8c08a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 14px;
  --wrap: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #14513f 0%, rgba(20, 81, 63, 0) 60%),
    linear-gradient(180deg, #082019 0%, var(--bg) 60%, #050f0c 100%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .1px;
}

a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #10241d; padding: 10px 16px;
  border-radius: 0 0 10px 0; z-index: 50; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8, 32, 25, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .bar {
  max-width: 1040px; margin: 0 auto;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 17px;
  letter-spacing: .2px; min-height: 44px;
}
.brand:hover { color: var(--ink); }
.brand svg { flex: none; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  color: var(--ink-2); text-decoration: none;
  border-radius: 10px; font-size: 15px; font-weight: 600;
}
.site-nav a:hover { background: var(--panel); color: var(--ink); }

/* ---------- layout ---------- */
main { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 900px; margin: 0 auto; padding: 0 18px; }

.breadcrumbs {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 18px 0;
  font-size: 14px; color: var(--ink-3);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--line); }
.breadcrumbs a { color: var(--ink-2); }

/* ---------- hero ---------- */
.hero { padding: 30px 0 8px; text-align: left; }
.eyebrow {
  display: inline-block; margin: 0 0 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-2);
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.5px;
}
.lede { margin: 0 0 10px; font-size: 1.15rem; color: var(--ink-2); }

h2 {
  margin: 46px 0 12px;
  font-size: clamp(1.28rem, 3.4vw, 1.55rem);
  line-height: 1.25; letter-spacing: -.2px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { margin: 26px 0 8px; font-size: 1.08rem; color: var(--ink); }

p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 0 0 9px; }
li::marker { color: var(--accent-2); }
strong { color: #fff; }

/* ---------- player ---------- */
/* The player breaks out of the 760px text column so it gets real estate on a
   desktop monitor: 92vw capped at 1000px, which is roughly 46% wider than the
   column at 1280px. Phones are unaffected (92vw < column width below ~830px). */
.player-shell {
  width: min(1000px, 92vw);
  margin: 18px 0 12px;
  margin-inline: calc((100% - min(1000px, 92vw)) / 2);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.player-frame {
  /* 3:2 box at every size; nothing caps the height, so the width decides it. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #061914;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
/* The GamePix snippet ships inline width/height in its style attribute, which beats
   any plain stylesheet rule. !important is the only way to stretch the 480x320 frame
   to the responsive wrapper while keeping the original markup intact.
   The frame may sit directly in .player-frame or inside the #player injection slot,
   so both are covered. */
.player-frame iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0 !important; display: block;
  background: #061914;
}
.player-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 10px 8px 14px; font-size: 13.5px; color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}
.player-meta a { color: var(--ink-2); }
.player-meta a:hover { color: var(--accent); }
/* .player-meta is also used bare inside <noscript>, where it has no top border. */
.player-shell > noscript .player-meta { border-top: 1px solid var(--line-soft); }

/* ---------- fullscreen control ---------- */
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 44px minimum touch target on every device */
  min-height: 44px; min-width: 44px; margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(22, 88, 68, .6); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.fs-btn:hover { background: #16583f; border-color: var(--accent-2); }
.fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-btn svg { flex: none; }
/* Hidden until the player exists: there is nothing to expand on a cover-only page,
   and a dead button is worse than no button. The script unhides it after mounting. */
.player-shell:not(.has-player) .fs-btn { display: none; }

/* Keep the 3:2 box once the player is fullscreen, centred, whatever the screen ratio.
   The iframe must stay absolutely positioned: as a grid item, `height:100%` resolves
   against the row and stretches the frame back to the screen height (verified at
   1440x900, which gave a 1.6 ratio instead of 1.5). */
.player-frame:fullscreen {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  aspect-ratio: auto;
  display: block;
  background: #030c0a;
}
.player-frame:fullscreen iframe {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 1.5)) !important;
  height: min(100vh, calc(100vw / 1.5)) !important;
}
.player-frame:-webkit-full-screen { background: #030c0a; }
.player-frame:-webkit-full-screen iframe {
  aspect-ratio: auto;
}

/* cover (index first screen, no iframe until click) */
.cover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0;
  border: 0; margin: 0;
  background: linear-gradient(170deg, #0d4534 0%, #0a2c22 55%, #071d18 100%);
  cursor: pointer;
  font: inherit; color: var(--ink);
  overflow: hidden;
}
.cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-inner {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 10px;
  text-align: center; padding: 12px;
}
.cover-play {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 999px;
  background: var(--accent); color: #17251e;
  font-weight: 800; font-size: 17px; letter-spacing: .2px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  border: 0;
}
.cover:hover .cover-play { background: #ffdf9b; }
.cover-hint { font-size: 13px; color: var(--ink-2); text-shadow: 0 1px 6px #000; }
.player-shell.is-live .cover { display: none; }

/* control strip */
.controls-strip {
  margin: 0 0 8px; padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(18, 74, 58, .35);
  font-size: 14.5px; color: var(--ink-2);
  text-align: center;
}

.shot-note{
  margin:-4px 0 26px;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.01em;
}


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink);
  font-weight: 700; font-size: 16px; text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #16583f; color: #fff; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #17251e; }
.btn-primary:hover { background: #ffdf9b; color: #17251e; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0 8px; }
@media (min-width: 640px) { .cards.two { grid-template-columns: 1fr 1fr; } }
.card {
  display: block; padding: 16px 18px;
  background: rgba(18, 74, 58, .4);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.card:hover { border-color: var(--line); background: rgba(22, 88, 68, .55); }
.card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.card .go { color: var(--accent-2); font-weight: 700; font-size: 14px; }

/* ---------- screenshots ---------- */
/* Full-bleed like the player so the in-game HUD stays legible. The box is
   aspect-ratio driven with a neutral placeholder colour, so no layout shift
   while the file loads. Width/height attributes on the <img> carry the ratio. */
.shot {
  width: min(1000px, 92vw);
  margin: 22px auto 24px;
  margin-inline: calc((100% - min(1000px, 92vw)) / 2);
}
.shot-pic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0a2a21;
  cursor: zoom-in;
}
.shot-pic:hover { border-color: var(--line); }
.shot figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.shot figcaption strong { color: var(--ink-2); }
/* Clicking a screenshot opens it at full size in a new tab (the <a> wraps the img).
   No lightbox JS: one less thing to break, and the browser viewer already zooms. */

@media (max-width: 520px) {
  .shot { width: 100%; margin-inline: 0; margin-top: 18px; margin-bottom: 20px; }
  .shot figcaption { font-size: 13px; }
}

/* ---------- table ---------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: rgba(11, 47, 37, .6);
}
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
caption { caption-side: top; text-align: left; padding: 12px 14px 6px; color: var(--ink-3); font-size: 13.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { background: rgba(22, 88, 68, .6); color: var(--ink); font-size: 13.5px; letter-spacing: .4px; text-transform: uppercase; }
tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td code, th code { font-size: 13.5px; }

kbd {
  display: inline-block;
  padding: 2px 7px; margin: 0 2px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; background: #0a2a21;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--ink); line-height: 1.5;
}

/* ---------- FAQ ---------- */
details {
  border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 0 16px; margin: 0 0 10px;
  background: rgba(11, 47, 37, .55);
}
details[open] { border-color: var(--line); }
summary {
  cursor: pointer; list-style: none;
  min-height: 48px; display: flex; align-items: center;
  font-weight: 700; color: var(--ink);
  padding-right: 6px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--accent-2); font-size: 20px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 14px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- misc blocks ---------- */
.note {
  border-left: 3px solid var(--accent);
  background: rgba(255, 212, 121, .07);
  padding: 12px 16px; border-radius: 0 10px 10px 0;
  margin: 0 0 18px; font-size: 15.5px; color: var(--ink-2);
}
.actions-list { counter-reset: step; list-style: none; padding-left: 0; }
.actions-list > li {
  counter-increment: step;
  position: relative; padding-left: 44px; margin: 0 0 14px;
}
.actions-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent); font-weight: 800; font-size: 14px;
}
.actions-list > li strong { display: block; margin-bottom: 2px; }

.end-cta {
  margin: 42px 0 0; padding: 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(22, 88, 68, .5), rgba(14, 59, 46, .3));
  text-align: center;
}
.end-cta p { color: var(--ink-2); margin: 0 0 14px; }
.end-cta .btn-row { justify-content: center; margin: 0; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 56px; border-top: 1px solid var(--line-soft);
  background: rgba(5, 15, 12, .6);
  padding: 26px 0 34px; font-size: 14.5px; color: var(--ink-3);
}
.site-footer .wrap-wide { display: grid; gap: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 10px; color: var(--ink-2); text-decoration: none; border-radius: 8px;
}
.footer-nav a:hover { background: var(--panel); color: var(--ink); }
.footer-legal { margin: 0; font-size: 13.5px; line-height: 1.6; }
.footer-legal a { color: var(--ink-2); }
.last-updated { margin: 0; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .site-header .bar { padding: 8px 14px; gap: 6px; }
  .brand { font-size: 16px; min-height: 40px; }
  .site-nav { margin-left: 0; width: 100%; justify-content: flex-start; gap: 0; }
  .site-nav a { padding: 0 10px; font-size: 14.5px; min-height: 40px; margin-right: 4px; }
  .wrap, .wrap-wide { padding: 0 16px; }
  .hero { padding: 22px 0 4px; }
  .cover-play { min-height: 48px; padding: 0 20px; font-size: 16px; }
  .player-shell { width: 100%; margin-inline: 0; }
  .player-meta { font-size: 13px; padding: 6px 8px 6px 12px; }
  .fs-btn { font-size: 13px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}