@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --parchment: #f3e7c8;
  --paper: #fbf1d8;
  --seafoam: #b7d7cc;
  --foam-pale: #d9e7d7;
  --kelp: #536834;
  --kelp-dark: #34482d;
  --ink: #123f4a;
  --ink-soft: #497177;
  --coral: #dc6542;
  --sand: #d4a94e;
  --rope: #856c46;
  --line: rgba(18,63,74,.22);
  --line-soft: rgba(18,63,74,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--parchment);
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.55;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }

.masthead {
  height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 0 clamp(20px, 5vw, 78px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: .11em; }
.brand strong { color: var(--coral); font-size: 13px; }
.brand-stamp { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--coral); font-size: 18px; transform: rotate(-9deg); }
nav { display: flex; gap: 30px; }
nav a, footer a { color: var(--ink-soft); text-decoration: none; font-size: 12px; font-weight: 600; }
nav a:hover, footer a:hover { color: var(--coral); }
.dispatch-link { color: var(--coral); font-size: 12px; font-weight: 700; text-decoration: none; }
.dispatch-link span { margin-left: 8px; }

.hero { min-height: 690px; display: grid; grid-template-columns: 43% 57%; }
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px clamp(30px, 6vw, 96px);
  background:
    radial-gradient(circle at 15% 20%, rgba(212,169,78,.15), transparent 25%),
    var(--paper);
}
.hero-art { min-height: 620px; background: url("../assets/images/kelp-courier-hero.png") 60% center / cover no-repeat; border-left: 1px solid var(--line); }
.issue { margin: 0 0 17px; color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .19em; }
h1, h2, h3 { font-family: "Archivo Narrow", Impact, sans-serif; line-height: .93; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(66px, 8vw, 122px); letter-spacing: -.045em; }
h1 em { color: var(--coral); font-style: normal; }
.lede { max-width: 510px; margin: 28px 0; color: var(--ink-soft); font-size: 17px; }
.coral-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  background: var(--coral);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.coral-button:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--ink); }
.coral-button:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }
.hero-seal {
  position: absolute;
  right: 28px;
  bottom: 30px;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px dashed var(--coral);
  border-radius: 50%;
  color: var(--coral);
  transform: rotate(-8deg);
}
.hero-seal b { font-family: "Archivo Narrow", sans-serif; font-size: 20px; }
.hero-seal span { font-size: 8px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }

.dispatch-section { padding: 100px clamp(14px, 6vw, 96px); background: var(--parchment); }
.section-heading { max-width: 1200px; margin: 0 auto 42px; display: grid; grid-template-columns: 1fr .7fr; gap: 90px; align-items: end; }
.section-heading h2, .manual-title h2, .route-copy h2 { margin: 0; font-size: clamp(50px, 6vw, 86px); letter-spacing: -.03em; }
.section-heading > p { margin: 0; color: var(--ink-soft); }
.game-paper { max-width: 1200px; margin: auto; border: 2px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 rgba(18,63,74,.13); }
.game-meta { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 2px solid var(--ink); }
.game-meta > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.game-meta > div:last-child { border-right: 0; }
.game-meta small, .signal small { display: block; color: var(--ink-soft); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.game-meta strong { font-family: "Archivo Narrow", sans-serif; font-size: 24px; }
.canvas-wrap { position: relative; aspect-ratio: 25 / 13; overflow: hidden; background: var(--seafoam); }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.paper-noise { position: absolute; inset: 0; opacity: .09; pointer-events: none; background-image: repeating-radial-gradient(circle at 10% 10%, var(--ink) 0 1px, transparent 1px 5px); background-size: 7px 7px; mix-blend-mode: multiply; }
.game-overlay { position: absolute; z-index: 5; inset: 0; display: none; place-items: center; align-content: center; padding: 25px; text-align: center; background: rgba(243,231,200,.92); }
.game-overlay.open { display: grid; }
.postmark { width: 66px; height: 66px; display: grid; place-items: center; position: relative; margin-bottom: 16px; border: 3px double var(--ink); border-radius: 50%; transform: rotate(-8deg); }
.postmark span { color: var(--coral); font-family: "Archivo Narrow", sans-serif; font-size: 25px; font-weight: 700; }
.postmark i { position: absolute; bottom: 7px; right: 5px; color: var(--ink); font-size: 8px; }
.game-overlay h3 { margin: 0; font-size: clamp(38px, 5vw, 60px); }
.game-overlay > p:not(.issue) { max-width: 510px; margin: 16px auto 22px; color: var(--ink-soft); }
.game-overlay .coral-button { margin: auto; }
.game-controls { min-height: 82px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 24px; padding: 12px 16px 12px 22px; border-top: 2px solid var(--ink); }
.signal { display: flex; align-items: center; gap: 11px; }
.signal > i { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--coral); }
.signal strong { display: block; font-size: 12px; }
.keyboard-note { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 8px; font-weight: 700; }
.keyboard-note span { margin-right: 6px; }
.keyboard-note b { min-width: 24px; padding: 3px 5px; border: 1px solid var(--line); text-align: center; color: var(--ink); }
.mobile-lanes { display: none; gap: 5px; }
.mobile-lanes button { width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--foam-pale); color: var(--ink); font-weight: 700; }
.dash-button { min-width: 158px; min-height: 52px; position: relative; overflow: hidden; border: 2px solid var(--ink); background: var(--kelp); color: var(--paper); cursor: pointer; }
.dash-button > span { display: block; font-size: 7px; letter-spacing: .13em; opacity: .7; }
.dash-button strong { font-family: "Archivo Narrow", sans-serif; font-size: 15px; letter-spacing: .08em; }
.dash-button i { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--sand); }
.dash-button:disabled { opacity: .48; cursor: not-allowed; }

.manual-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; padding: 110px clamp(24px, 8vw, 130px); background: var(--kelp-dark); color: var(--paper); }
.manual-title .issue { color: var(--sand); }
.manual-section ol { margin: 0; padding: 0; list-style: none; }
.manual-section li { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 25px 0; border-top: 1px solid rgba(251,241,216,.22); }
.manual-section li:last-child { border-bottom: 1px solid rgba(251,241,216,.22); }
.manual-section li > span { color: var(--sand); font-family: "Archivo Narrow", sans-serif; font-weight: 700; }
.manual-section h3 { margin: 0 0 7px; font-size: 25px; }
.manual-section p { margin: 0; color: #c8d7bf; }

.route-section { min-height: 650px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; padding: 90px clamp(24px, 8vw, 130px); overflow: hidden; background: var(--seafoam); }
.route-map { height: 400px; position: relative; border: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 65px, rgba(18,63,74,.08) 66px); }
.route-line { position: absolute; left: 5%; right: 5%; height: 28px; border-top: 4px solid var(--kelp); border-radius: 50%; }
.route-line.one { top: 22%; transform: rotate(5deg); }.route-line.two { top: 48%; transform: rotate(-7deg); }.route-line.three { top: 72%; transform: rotate(3deg); }
.shell { position: absolute; color: var(--coral); font-style: normal; font-size: 38px; }.s1{left:18%;top:18%}.s2{left:58%;top:49%}.s3{left:34%;top:72%}
.route-fish { position: absolute; right: 8%; top: 38%; color: var(--ink); font-size: 130px; transform: scaleX(1.5); opacity: .78; }
.route-copy p:not(.issue) { color: var(--ink-soft); }
.route-copy a { display: inline-flex; gap: 13px; margin-top: 16px; color: var(--coral); font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
footer { min-height: 130px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 5vw, 78px); border-top: 1px solid var(--line); background: var(--paper); }
footer p { color: var(--ink-soft); font-size: 10px; }
footer > div { display: flex; gap: 22px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%,18px) rotate(-1deg); padding: 10px 17px; border: 2px solid var(--ink); background: var(--coral); color: var(--paper); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0) rotate(-1deg); }

.legal-main { min-height: calc(100vh - 206px); padding: 85px 24px; background: var(--parchment); }
.legal-copy { max-width: 760px; margin: auto; }
.legal-copy h1 { margin: 0 0 28px; font-size: clamp(65px, 9vw, 108px); }
.legal-copy h2 { margin-top: 36px; font-size: 30px; }
.legal-copy p, .legal-copy li { color: var(--ink-soft); }
.back-link { display: inline-block; margin-bottom: 32px; color: var(--coral); font-size: 12px; font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 590px; }
  .hero-art { min-height: 500px; border-left: 0; border-top: 1px solid var(--line); }
  .section-heading, .manual-section { grid-template-columns: 1fr; gap: 44px; }
  .route-section { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .masthead { height: 66px; padding: 0 15px; }
  .dispatch-link { display: none; }
  .hero-copy { min-height: 610px; padding: 60px 24px; }
  h1 { font-size: 72px; }
  .hero-seal { width: 72px; height: 72px; right: 16px; bottom: 16px; }
  .hero-art { min-height: 340px; background-position: 66% center; }
  .dispatch-section { padding: 72px 10px; }
  .section-heading { padding: 0 14px; }
  .section-heading h2, .manual-title h2, .route-copy h2 { font-size: 54px; }
  .game-meta { grid-template-columns: repeat(3, 1fr); }
  .game-meta > div { padding: 9px 10px; border-bottom: 1px solid var(--line); }
  .game-meta strong { font-size: 20px; }
  .canvas-wrap { aspect-ratio: 25 / 13; }
  .game-controls { grid-template-columns: 1fr auto; gap: 9px; padding: 10px; }
  .keyboard-note { display: none; }
  .mobile-lanes { display: flex; grid-row: 2; }
  .dash-button { min-width: 130px; }
  .signal strong { font-size: 10px; }
  .game-overlay { padding: 18px; }
  .game-overlay h3 { font-size: 40px; }
  .game-overlay > p:not(.issue) { font-size: 13px; }
  .manual-section, .route-section { padding: 75px 24px; }
  .route-map { height: 300px; }
  .route-fish { font-size: 80px; }
  footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Big Bass Tidepost: independent art direction */
body[data-variant="sticker"]{background:#fff7e8;font-family:Verdana, sans-serif}
body[data-variant="sticker"] .hero{position:relative}
body[data-variant="sticker"] .variant-note{z-index:3;max-width:34rem;padding:1rem 1.15rem;background:#fff7e8;color:#123b37;border:2px solid #123b37;font-family:Verdana, sans-serif;box-shadow:8px 8px 0 #ef5da8}
body[data-variant="sticker"] .variant-note span{display:block;margin-bottom:.55rem;color:#ef5da8;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
body[data-variant="sticker"] .variant-note p{margin:0!important;color:inherit!important;font:700 1rem/1.4 Verdana, sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body[data-variant="sticker"] canvas{max-width:100%}
@media(max-width:760px){
 body[data-variant="sticker"] .variant-note{position:static!important;width:auto!important;max-width:none!important;margin:1.5rem 0 0!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #ef5da8!important}
}

body[data-variant="sticker"] .header{background:#ef5da8;color:#123b37;border-bottom:4px solid #123b37;transform:rotate(-.3deg)}
body[data-variant="sticker"] .dispatch-section{margin:2rem;border:4px solid #123b37;border-radius:34px;box-shadow:16px 16px 0 #ef5da8}
body[data-variant="sticker"] .hero{margin:3rem auto;width:min(1240px,92%);border:4px solid #123b37;border-radius:42px;overflow:hidden;transform:rotate(.5deg)}
body[data-variant="sticker"] .hero h1{text-shadow:4px 4px 0 #ef5da8}
body[data-variant="sticker"] .variant-note{transform:rotate(-2deg);border-radius:24px;background:#fff}
body[data-variant="sticker"] .route-section .issue,body[data-variant="sticker"] .route-section a{color:#65291e}
@media(max-width:760px){
  body[data-variant="sticker"]{overflow-x:hidden}
  body[data-variant="sticker"] header nav a:not(:first-child),
  body[data-variant="sticker"] header nav button{display:none!important}
  body[data-variant="sticker"] .hero{width:100%!important;margin-inline:0!important;display:block!important;clip-path:none!important;transform:none!important}
  body[data-variant="sticker"] .hero-copy{width:100%!important;max-width:calc(100vw - 40px)!important}
  body[data-variant="sticker"] .section-intro,
  body[data-variant="sticker"] .section-heading,
  body[data-variant="sticker"] .section-title{width:100%!important;max-width:calc(100vw - 20px)!important;grid-template-columns:1fr!important}
  body[data-variant="sticker"] .hero p,
  body[data-variant="sticker"] .section-intro > p,
  body[data-variant="sticker"] .variant-note p{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="sticker"] .hero h1{display:block!important;width:100%!important;max-width:100%!important;font-size:42px!important;line-height:.92!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;transform:none!important}
  body[data-variant="sticker"] .section-intro h2,
  body[data-variant="sticker"] .section-heading h2,
  body[data-variant="sticker"] .section-title h2{display:block!important;width:100%!important;max-width:100%!important;font-size:36px!important;line-height:.98!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="sticker"] .variant-note{position:static!important;display:block!important;box-sizing:border-box!important;width:calc(100vw - 40px)!important;max-width:calc(100vw - 40px)!important;min-height:0!important;aspect-ratio:auto!important;margin:1.5rem 0 0!important;border-radius:12px!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #ef5da8!important;columns:1!important}
  body[data-variant="sticker"] .game-section,
  body[data-variant="sticker"] .game-shell,
  body[data-variant="sticker"] .mission-shell,
  body[data-variant="sticker"] .cabinet-section,
  body[data-variant="sticker"] .control-section{max-width:100vw!important;margin-inline:0!important;border-inline:0!important;box-shadow:none!important}
  body[data-variant="sticker"] .game-section{padding-inline:10px!important}
}