:root {
  --lake-950: #041319;
  --lake-900: #071c24;
  --lake-850: #0a2730;
  --lake-800: #0d3139;
  --lake-700: #164851;
  --foam-100: #edf7ee;
  --foam-300: #b8c9c5;
  --foam-500: #738f8d;
  --weed: #b9d438;
  --weed-bright: #dcf45a;
  --bobber: #ff684a;
  --sun: #ffb43c;
  --line: rgba(211, 237, 227, .13);
  --line-soft: rgba(211, 237, 227, .07);
  --shadow: 0 24px 70px rgba(0, 8, 12, .34);
  --display: "Barlow Condensed", Impact, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--foam-100);
  background:
    radial-gradient(circle at 84% -10%, rgba(255, 180, 60, .11), transparent 32rem),
    var(--lake-950);
  font-family: var(--display);
  min-width: 320px;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  background: rgba(4, 19, 25, .9);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50% 52% 45% 55%;
  color: var(--lake-950); background: var(--weed);
  font-size: 28px; font-weight: 900; font-style: italic;
  transform: rotate(-8deg);
  box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .12);
}
.brand-copy { line-height: .8; display: flex; flex-direction: column; font-size: 19px; letter-spacing: .04em; }
.brand-copy b { font-weight: 900; }
.brand-copy em { color: var(--weed); font-style: italic; font-size: 16px; letter-spacing: .18em; }
nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
nav a { color: var(--foam-300); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
nav a:hover, nav a.active { color: var(--weed-bright); }
.icon-btn {
  color: var(--foam-300); background: transparent; border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 3px; font-size: 11px; letter-spacing: .1em;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--weed); color: var(--weed); outline: none; }

.hero {
  min-height: 480px;
  padding: 80px clamp(20px, 9vw, 150px) 90px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,19,25,.97) 0%, rgba(4,19,25,.75) 45%, rgba(4,19,25,.12) 100%),
    linear-gradient(0deg, var(--lake-950), transparent 45%),
    url("../assets/images/lake-bg.png") center 54% / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; width: 380px; height: 380px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%; right: 9vw; top: 8%; box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 78px rgba(255,255,255,.018);
}
.hero > * { position: relative; z-index: 2; }
.eyebrow, .section-kicker {
  color: var(--foam-300); text-transform: uppercase; letter-spacing: .2em;
  font: 500 11px var(--mono); display: flex; align-items: center; gap: 10px;
}
.eyebrow span { display: block; width: 34px; height: 2px; background: var(--bobber); }
.hero h1 {
  margin: 14px 0 16px; font-size: clamp(60px, 8vw, 118px); line-height: .78;
  letter-spacing: -.04em; max-width: 820px; font-weight: 900;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hero h1 i { color: var(--weed-bright); font-style: italic; }
.hero p { max-width: 480px; color: var(--foam-300); font-size: 20px; line-height: 1.4; margin: 0 0 26px; }
.hero-cta {
  width: fit-content; display: flex; align-items: center; gap: 24px;
  background: var(--bobber); color: #fff; padding: 14px 16px 14px 22px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 14px;
}
.hero-cta span { display: grid; place-items: center; width: 28px; height: 28px; background: rgba(0,0,0,.16); }

.game-shell { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 92px; }
.game-topbar { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; gap: 20px; }
.section-kicker { margin: 0 0 5px; color: var(--bobber); }
.game-topbar h2 { margin: 0; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(36px, 5vw, 64px); line-height: .9; }
.mode-picker { display: flex; padding: 4px; background: var(--lake-900); border: 1px solid var(--line); }
.mode-picker button {
  border: 0; background: transparent; color: var(--foam-500); padding: 10px 17px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; cursor: pointer;
  min-width: 0;
}
.mode-picker button:hover { color: var(--foam-100); }
.mode-picker button.active { background: var(--weed); color: var(--lake-950); }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.arena-column { min-width: 0; }
.score-strip {
  min-height: 74px; display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)) minmax(170px, 1.7fr);
  background: var(--lake-900); border: 1px solid var(--line); border-bottom: 0;
}
.score-strip > div { padding: 12px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.score-strip > div:last-child { border-right: 0; }
.score-strip span, .catch-card span, .catch-log-head {
  color: var(--foam-500); text-transform: uppercase; letter-spacing: .12em; font: 500 10px var(--mono);
}
.score-strip strong { font: 500 24px var(--mono); margin-top: 3px; }
.rush-meter { width: 100%; height: 8px; background: rgba(0,0,0,.28); margin-top: 8px; position: relative; overflow: hidden; }
.rush-meter i { display: block; height: 100%; width: 0; background: var(--weed); box-shadow: 0 0 18px var(--weed); transition: width .3s ease; }

.canvas-wrap {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--lake-900);
  touch-action: none; cursor: crosshair;
}
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 12 / 7; }
.game-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(rgba(2,18,24,.15), rgba(2,18,24,.68));
  transition: opacity .25s ease, visibility .25s ease;
}
.game-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.overlay-card {
  max-width: 480px; background: rgba(5, 24, 31, .91); backdrop-filter: blur(14px);
  border: 1px solid rgba(220,244,90,.26); padding: clamp(24px, 4vw, 42px); text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.overlay-badge { color: var(--weed-bright) !important; }
.overlay-card h3 { font-size: clamp(34px, 5vw, 56px); line-height: .9; text-transform: uppercase; margin: 10px 0 12px; }
.overlay-card p { color: var(--foam-300); font-size: 17px; line-height: 1.45; margin: 0 auto 20px; }
.control-hints { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; color: var(--foam-500); font: 10px var(--mono); }
kbd { color: var(--foam-100); border: 1px solid var(--line); background: rgba(255,255,255,.06); padding: 4px 5px; font: inherit; }
.primary-btn {
  border: 0; background: var(--bobber); color: #fff; padding: 15px 26px; cursor: pointer;
  text-transform: uppercase; font-weight: 900; letter-spacing: .11em;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.14);
}
.primary-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary-btn:focus-visible { outline: 3px solid var(--weed-bright); outline-offset: 3px; }

.fight-panel {
  position: absolute; left: 50%; bottom: 20px; width: min(520px, calc(100% - 28px));
  transform: translate(-50%, 24px); padding: 13px 16px 16px; opacity: 0; visibility: hidden;
  background: rgba(4, 19, 25, .92); backdrop-filter: blur(12px); border: 1px solid rgba(220,244,90,.32);
  transition: .2s ease; cursor: default;
}
.fight-panel.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fight-heading, .tension-labels { display: flex; justify-content: space-between; align-items: center; }
.fight-heading span { color: var(--foam-100); font: 800 16px var(--display); }
.fight-heading b { color: var(--sun); font: 500 15px var(--mono); }
.tension-labels { color: var(--foam-500); font: 9px var(--mono); margin: 10px 0 5px; }
.tension-labels strong { color: var(--weed); font-weight: 500; }
.tension-track { height: 18px; background: linear-gradient(90deg, #2980a0, #a58420 70%, #c63c30); position: relative; }
.safe-zone { position: absolute; top: 0; bottom: 0; left: 38%; width: 27%; background: var(--weed); opacity: .88; }
.tension-needle { position: absolute; width: 4px; top: -4px; bottom: -4px; left: 20%; background: white; box-shadow: 0 0 7px #fff; }
.catch-progress { height: 5px; background: rgba(255,255,255,.11); margin-top: 9px; }
.catch-progress i { display: block; height: 100%; width: 0; background: var(--sun); }
#reel-btn {
  display: none; width: 100%; margin-top: 10px; padding: 11px; border: 0; color: var(--lake-950);
  background: var(--weed); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; touch-action: none;
}
.game-toast {
  position: absolute; top: 20px; left: 50%; transform: translate(-50%, -16px);
  color: var(--lake-950); background: var(--weed-bright); padding: 8px 13px; opacity: 0;
  font: 800 14px var(--display); letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
.game-toast.show { animation: toast 1.5s ease both; }
@keyframes toast { 15%, 78% { opacity: 1; transform: translate(-50%, 0); } }
.arena-hint {
  margin: 12px 0 0; display: flex; align-items: center; gap: 10px; color: var(--foam-500);
  font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em;
}
.arena-hint b { color: var(--foam-300); font-weight: 500; flex: 1; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--weed); box-shadow: 0 0 0 5px rgba(185,212,56,.12); }

.catch-card { background: var(--lake-900); border: 1px solid var(--line); min-height: 100%; display: flex; flex-direction: column; }
.catch-card-head { padding: 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.catch-card-head > div:first-child { display: flex; flex-direction: column; }
.catch-card-head strong { font: 500 25px var(--mono); margin-top: 4px; }
.rank-badge { width: 50px; height: 50px; display: grid; place-items: center; background: var(--lake-800); border: 1px solid var(--line); }
.rank-badge small { font: 8px var(--mono); color: var(--foam-500); }
.rank-badge b { color: var(--weed); font-size: 21px; line-height: .7; }
.mission { margin: 15px; padding: 13px; background: var(--lake-850); border-left: 3px solid var(--bobber); display: flex; align-items: center; justify-content: space-between; }
.mission-copy { display: flex; flex-direction: column; }
.mission-copy strong { font-size: 18px; margin-top: 3px; }
.mission-count { color: var(--foam-500); font: 14px var(--mono); }
.mission-count b { color: var(--foam-100); font-size: 22px; }
.catch-log-head { display: flex; justify-content: space-between; padding: 4px 18px 10px; }
.catch-log-head small { color: var(--foam-500); }
.catch-log { list-style: none; padding: 0 15px; margin: 0; display: flex; flex-direction: column; gap: 7px; max-height: 296px; overflow: auto; }
.catch-log li:not(.empty-catch) { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 9px; background: var(--lake-850); padding: 9px; animation: catchIn .25s ease; }
@keyframes catchIn { from { opacity: 0; transform: translateX(12px); } }
.catch-icon { width: 38px; height: 27px; border-radius: 50% 45% 45% 50%; background: var(--fish-color); position: relative; }
.catch-icon::after { content: ""; position: absolute; right: -8px; top: 6px; border: 8px solid transparent; border-right: 0; border-left-color: var(--fish-color); }
.catch-meta { display: flex; flex-direction: column; }
.catch-meta b { font-size: 15px; }
.catch-meta small { color: var(--foam-500); font: 9px var(--mono); }
.catch-points { color: var(--weed); font: 11px var(--mono); }
.empty-catch { padding: 35px 10px; text-align: center; color: var(--foam-500); border: 1px dashed var(--line); }
.fish-ghost { display: block; color: var(--lake-700) !important; font-size: 70px; line-height: .7; transform: rotate(8deg); }
.empty-catch p { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.legend { margin-top: auto; padding: 16px; display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.legend span { display: flex; gap: 5px; align-items: center; font-size: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.common { background: #5ca686; }.dot.rare { background: #65a8d8; }.dot.trophy { background: var(--sun); }

.feature-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 clamp(20px, 6vw, 110px);
}
.feature-band article { padding: 48px clamp(16px, 3vw, 50px); border-right: 1px solid var(--line); }
.feature-band article:last-child { border-right: 0; }
.feature-band span { color: var(--bobber); font: 11px var(--mono); }
.feature-band h3 { font-size: 27px; text-transform: uppercase; margin: 10px 0 5px; }
.feature-band p { color: var(--foam-500); margin: 0; font-size: 16px; line-height: 1.45; }
footer { min-height: 110px; padding: 30px clamp(20px, 4vw, 68px); display: flex; align-items: center; gap: 30px; color: var(--foam-500); }
.footer-brand { color: var(--foam-100); font-size: 19px; font-weight: 900; letter-spacing: .08em; }
footer p { flex: 1; }
footer div { display: flex; gap: 20px; }
footer a:hover { color: var(--weed); }

.legal-page { width: min(820px, calc(100% - 40px)); margin: 70px auto 120px; }
.legal-page .section-kicker { color: var(--bobber); }
.legal-page h1 { font-size: clamp(54px, 9vw, 94px); line-height: .85; margin: 10px 0 38px; text-transform: uppercase; }
.legal-page h2 { color: var(--weed); text-transform: uppercase; margin-top: 32px; }
.legal-page p, .legal-page li { color: var(--foam-300); font-family: system-ui, sans-serif; line-height: 1.75; }

@media (max-width: 980px) {
  .game-layout { grid-template-columns: 1fr; }
  .catch-card { min-height: auto; }
  .catch-log { display: grid; grid-template-columns: repeat(3, 1fr); max-height: none; }
  .empty-catch { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .site-header { height: 68px; }
  nav a:not(.active) { display: none; }
  .hero { min-height: 430px; padding: 65px 20px; background-position: 62% center; }
  .hero::after { display: none; }
  .hero h1 { font-size: clamp(55px, 18vw, 84px); }
  .hero p { font-size: 17px; max-width: 330px; }
  .game-shell { width: calc(100% - 20px); padding: 54px 0; }
  .game-topbar { align-items: start; flex-direction: column; min-width: 0; width: 100%; }
  .game-topbar > div:first-child { min-width: 0; max-width: 100%; }
  .mode-picker {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100vw - 20px); max-width: calc(100vw - 20px); min-width: 0; overflow: hidden;
  }
  .mode-picker button { width: auto; padding-inline: 3px; font-size: 11px; }
  .score-strip { grid-template-columns: repeat(3, 1fr); }
  .score-strip > div { padding: 9px; }
  .score-strip strong { font-size: 16px; }
  .rush-cell { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .canvas-wrap { min-height: 430px; }
  #game-canvas { height: 430px; object-fit: cover; }
  .control-hints { display: none; }
  .overlay-card { padding: 24px 18px; }
  #reel-btn { display: block; }
  .arena-hint span:last-child { display: none; }
  .catch-log { grid-template-columns: 1fr; }
  .feature-band { grid-template-columns: 1fr; }
  .feature-band article { border-right: 0; border-bottom: 1px solid var(--line); padding: 30px 20px; }
  footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

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


/* Big Bass Afterglow: independent art direction */
body[data-variant="poster"]{background:#fff0d1;font-family:Arial Black, Impact, sans-serif}
body[data-variant="poster"] .hero{position:relative}
body[data-variant="poster"] .variant-note{z-index:3;max-width:34rem;padding:1rem 1.15rem;background:#fff0d1;color:#17120f;border:2px solid #17120f;font-family:Arial Black, Impact, sans-serif;box-shadow:8px 8px 0 #ff5738}
body[data-variant="poster"] .variant-note span{display:block;margin-bottom:.55rem;color:#ff5738;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
body[data-variant="poster"] .variant-note p{margin:0!important;color:inherit!important;font:700 1rem/1.4 Arial Black, Impact, sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body[data-variant="poster"] canvas{max-width:100%}
@media(max-width:760px){
 body[data-variant="poster"] .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 #ff5738!important}
}

body[data-variant="poster"] .site-header{position:sticky;top:0;border-bottom:6px solid #ff5738;background:#17120f;color:#fff0d1}
body[data-variant="poster"] .hero{min-height:78vh;padding:7vw 6vw;background:#fff0d1;clip-path:polygon(0 0,100% 0,96% 92%,3% 100%)}
body[data-variant="poster"] .hero h1{max-width:12ch;color:#17120f;font-size:clamp(4rem,10vw,10rem);line-height:.78;letter-spacing:-.07em;transform:rotate(-2deg)}
body[data-variant="poster"] .hero .eyebrow,body[data-variant="poster"] .hero>p{color:#3e514d}
body[data-variant="poster"] .hero-cta{color:#17120f}
body[data-variant="poster"] .hero .variant-note{position:absolute;right:6vw;bottom:8vw;width:28vw;background:#ff5738;transform:rotate(1deg)}
body[data-variant="poster"] .hero .variant-note span{color:#17120f}
body[data-variant="poster"] .game-shell{border-top:12px solid #17120f;background:#041319;color:#edf7ee}
body[data-variant="poster"] .feature-band{background:#fff0d1;color:#17120f}
body[data-variant="poster"] .feature-band span{color:#9a3525}
body[data-variant="poster"] .feature-band p{color:#405a56}
body[data-variant="poster"] footer{background:#071c24;color:#c4d6d2}
@media(max-width:760px){
  body[data-variant="poster"]{overflow-x:hidden}
  body[data-variant="poster"] header nav a:not(:first-child),
  body[data-variant="poster"] header nav button{display:none!important}
  body[data-variant="poster"] .hero{width:100%!important;margin-inline:0!important;display:block!important;clip-path:none!important;transform:none!important}
  body[data-variant="poster"] .hero-copy{width:100%!important;max-width:calc(100vw - 40px)!important}
  body[data-variant="poster"] .section-intro,
  body[data-variant="poster"] .section-heading,
  body[data-variant="poster"] .section-title{width:100%!important;max-width:calc(100vw - 20px)!important;grid-template-columns:1fr!important}
  body[data-variant="poster"] .hero p,
  body[data-variant="poster"] .section-intro > p,
  body[data-variant="poster"] .variant-note p{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="poster"] .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="poster"] .section-intro h2,
  body[data-variant="poster"] .section-heading h2,
  body[data-variant="poster"] .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="poster"] .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 #ff5738!important;columns:1!important}
  body[data-variant="poster"] .game-section,
  body[data-variant="poster"] .game-shell,
  body[data-variant="poster"] .mission-shell,
  body[data-variant="poster"] .cabinet-section,
  body[data-variant="poster"] .control-section{max-width:100vw!important;margin-inline:0!important;border-inline:0!important;box-shadow:none!important}
  body[data-variant="poster"] .game-section{padding-inline:10px!important}
}