* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "CozyFont1";
  src: url("assets/font1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body {
  width: 100%;
  height: 100%;
}

:root {
  /* header.png is 2082x238 -> its rendered height is always 100vw / 8.748 */
  --header-h: calc(100vw / 8.748);
}

body {
  background: #060a1e;
  overflow-x: hidden;
}

/* Full-screen stage: main_bg fills the whole viewport (cover, no gaps).
   background-attachment: fixed keeps it viewport-sized while the page scrolls. */
.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: url("assets/main_bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Header pinned exactly to the top, stretched edge to edge */
.top-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}

.header-bar {
  display: block;
  width: 100%;
  height: auto;
}

/* NEWS / CHAT / SUPPORT links on the right side of the header */
.header-links {
  position: absolute;
  top: 50%;
  right: calc(1.5% + 150px);
  transform: translateY(calc(-50% - 30px));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}

.header-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.12s ease;
}

.header-link:hover {
  transform: scale(1.05);
}

.link-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: -14px;
  display: block;
}

.link-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 32px;
  background: url("assets/link_bg.png") center / 100% 100% no-repeat;
}

.link-label {
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(60, 30, 0, 0.6);
}

/* COZY RIVER logo on the left side of the header */
.header-logo {
  position: absolute;
  left: calc(1.5% + 200px);
  top: 50%;
  transform: translateY(calc(-50% - 40px));
  width: 22%;
  height: auto;
  display: block;
}

/* Welcome title just below the header */
.welcome {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--header-h) + 28px);
  padding: 0 40px;
  text-align: center;
}

.welcome-inner {
  transform: translateY(-90px);
}

.welcome-title {
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
  font-size: 42px;
  font-weight: normal;
  letter-spacing: 2px;
  color: #ffe9b8;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.welcome-sub {
  margin-top: 6px;
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #dfeefb;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* Season stage bar below the welcome title (pulled up: the title block is
   translated up, so the visual gap is margin + 90px) */
.stage {
  position: relative;
  z-index: 1;
  margin-top: -20px;
  padding: 0 40px;
}

.stage-bar {
  position: relative;
  width: 100%;
  aspect-ratio: 1332 / 92;
  background: url("assets/slide_bar.png") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4%;
}

.stage-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  list-style: none;
}

.stage-node {
  position: relative;
  flex: 0 0 auto;
  height: 78%;
  aspect-ratio: 165 / 138;
}

.node-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-icon {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  height: 60%;
  width: auto;
}

.node-here {
  position: absolute;
  bottom: 126%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  color: #ffe9b8;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

.node-here-sub {
  display: block;
  font-size: 13px;
  color: #ffd54a;
}

/* Content sits below the stage, anchored to the left side */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 30px 40px 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* Left/right columns; cards stack vertically inside each */
.column {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Panel framed by the golden blank_bg art */
.season-card {
  width: 100%;
  padding: 54px 62px 58px;
  background-image: url("assets/blank_bg.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #5a3a1b;
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
}

/* Second card sits lower than the first */
.howto-card {
  margin-top: 390px;
}

/* Rod card hugs its content (2-2-1 pyramid) instead of the full column width */
.rods-card {
  width: 480px;
  max-width: 100%;
  padding: 46px 46px 48px;
  margin-top: 300px;
}

.season-title {
  font-size: 42px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1.1;
  color: #4a2c10;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.6);
}

.season-prize {
  margin-top: 10px;
  text-align: center;
  font-size: 19px;
  letter-spacing: 1px;
  color: #8a5a20;
}

.prize-amount {
  color: #b4741a;
  font-size: 24px;
}

.season-per {
  margin-top: 2px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a5a20;
  opacity: 0.85;
}

.season-body {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.5;
}

.season-body p {
  margin-bottom: 12px;
}

.season-subhead {
  margin: 16px 0 8px;
  font-size: 19px;
  letter-spacing: 1px;
  color: #4a2c10;
}

.season-steps {
  margin: 0 0 12px 22px;
}

.season-steps li {
  margin-bottom: 7px;
  padding-left: 4px;
}

.season-note {
  margin-top: 4px;
}

/* ---- Rod card: three-stat key ---- */
.rod-key {
  list-style: none;
  margin: 0 0 16px;
}

.rod-key li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 7px;
}

.key-ico {
  flex: 0 0 auto;
  width: 14px;
  height: auto;
  margin-top: 2px;
}

.key-badge {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 3px;
  background: #8a5a20;
  color: #ffe9b8;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ---- Rod card: rarity rows (each row IS a rod_icon_bg1 panel) ---- */
.rod-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 16px;
}

.rod-row {
  position: relative;
  width: 180px;
  max-width: 100%;
  aspect-ratio: 702 / 277;
}

.row-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* rod art sits in the circular socket on the left */
.row-icon {
  position: absolute;
  left: 19.3%;
  top: 43.7%;
  transform: translate(-50%, -50%);
  height: 46%;
  width: auto;
}

/* energy + hook-timer on the two upper plates */
.row-stat {
  position: absolute;
  top: 29.5%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  color: #3a2410;
}

.row-mi {
  height: 12px;
  width: auto;
}

.row-energy {
  left: 38%;
}

.row-timer {
  left: 65%;
}

/* Fourth card sits lower */
.bait-card {
  margin-top: 200px;
}

/* Fifth card sits lower */
.dw-card {
  margin-top: 250px;
}

/* ---- Golden Bait card ---- */
.bait-figure {
  display: flex;
  justify-content: center;
  margin: 2px 0 6px;
}

.bait-slot {
  position: relative;
  width: 130px;
  aspect-ratio: 248 / 277;
}

.bait-slot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* bait art sits in the circular socket of bait_icon_bg */
.bait-icon {
  position: absolute;
  left: 54.6%;
  top: 43.7%;
  transform: translate(-50%, -50%);
  height: 46%;
  width: auto;
}

.bait-odds {
  list-style: none;
  margin: 0 0 6px;
}

.bait-odds li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(90, 58, 27, 0.22);
}

.bait-odds li:last-child {
  border-bottom: none;
}

.odds-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(60, 30, 0, 0.35);
}

.odds-name {
  flex: 1;
  font-size: 15px;
  color: #4a2c10;
}

.odds-rate {
  font-size: 15px;
  font-weight: bold;
  color: #b4741a;
}

/* bar buff on the lower plate */
.row-bar {
  position: absolute;
  left: 62%;
  top: 59%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(60, 30, 0, 0.55);
}

/* ---- River Pass card: drop-rate comparison table ---- */
.pass-card {
  margin-top: 250px;
}

.drop-table {
  width: 100%;
  margin: 2px 0 14px;
  border-collapse: collapse;
  font-size: 15px;
}

.drop-table th,
.drop-table td {
  padding: 6px 10px;
  border-bottom: 1px dashed rgba(90, 58, 27, 0.22);
  text-align: left;
  color: #4a2c10;
}

.drop-table th {
  font-size: 12px;
  letter-spacing: 1px;
  color: #7a5322;
  border-bottom: 2px solid rgba(90, 58, 27, 0.35);
}

.drop-table th:not(:first-child),
.drop-table td:not(:first-child) {
  text-align: center;
}

.drop-table tbody tr:last-child td {
  border-bottom: none;
}

.drop-table td:nth-child(2) {
  color: #8a6a55;
}

.drop-table td:nth-child(3) {
  font-weight: bold;
  color: #1d6b2f;
}

.dt-dot {
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(60, 30, 0, 0.35);
}

/* ---- Flying butterflies (bt1.png / bt2.png, 7 frames of 16x16, faces up) ---- */
.butterfly {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
}

.butterfly-sprite {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* 7 frames -> 7 x 48px = 336px wide strip, each frame 48px */
  background-size: 336px 48px;
  image-rendering: pixelated;
  animation: butterfly-flap 0.45s steps(7) infinite;
}

@keyframes butterfly-flap {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -336px 0;
  }
}

/* ---- Snail walking on top of the season bar (sn1.png, 4x2 of 16x16) ---- */
.snail {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.snail-sprite {
  width: 100%;
  height: 100%;
  background: url("assets/sn1.png") 0 0 no-repeat;
  /* 4 frames x 44px = 176px wide, 2 rows x 44px = 88px tall */
  background-size: 176px 88px;
  image-rendering: pixelated;
}

/* ---- FAQ (no panel, sits on the background) ---- */
.faq {
  position: relative;
  z-index: 1;
  padding: 40px 40px 90px;
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
}

.faq-title {
  margin-bottom: 34px;
  text-align: center;
  font-size: 38px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #ffe9b8;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.7);
}

/* Questions + answers hug the left side, not centered */
.faq-list {
  width: min(680px, 100%);
  margin: 0;
}

.faq-item {
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed rgba(223, 238, 251, 0.25);
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.faq-q {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: normal;
  letter-spacing: 0.5px;
  color: #ffd54a;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.faq-a {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: #eaf2ff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.faq-a:last-child {
  margin-bottom: 0;
}

.faq-a strong {
  color: #ffffff;
}

/* ---- Bottom PLAY NOW button (text_bg3 art) ---- */
.play-now {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 20px 40px 120px;
}

.play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  max-width: 100%;
  aspect-ratio: 329 / 129;
  background: url("assets/text_bg3.png") center / 100% 100% no-repeat;
  text-decoration: none;
  transition: transform 0.12s ease;
}

.play-btn:hover {
  transform: scale(1.05);
}

.play-btn-label {
  font-family: "CozyFont1", "Trebuchet MS", sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffe9b8;
  text-shadow: 0 2px 4px rgba(40, 18, 0, 0.8);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- ≤1239px: the two desktop columns can no longer sit side by side,
       so stack every card into one centered column in reading order 1..6.
       (Displayed cards keep their exact ordering via flex `order`.) --- */
@media (max-width: 1239px) {
  .content {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 28px 20px 40px;
  }

  /* dissolve the column wrappers so the 6 cards become direct children */
  .column {
    display: contents;
  }

  .season-card,
  .howto-card,
  .rods-card,
  .bait-card,
  .dw-card,
  .pass-card {
    width: min(640px, 100%);
    margin-top: 0;
  }

  .season-card { order: 1; }
  .howto-card  { order: 2; }
  .rods-card   { order: 3; }
  .bait-card   { order: 4; }
  .dw-card     { order: 5; }
  .pass-card   { order: 6; }

  /* butterfly / snail flight areas depend on the desktop two-column gaps */
  .butterfly,
  .snail {
    display: none;
  }
}

/* --- ≤820px: phones / small tablets — compact header, smaller type,
       tighter padding. --- */
@media (max-width: 820px) {
  /* header: logo centered on the bar, links moved to a row just below it */
  .header-logo {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
  }

  .header-links {
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    justify-content: center;
    gap: 10px;
  }

  .link-bar {
    width: 84px;
    height: 26px;
  }

  .link-icon {
    width: 24px;
    height: 24px;
    margin-right: -10px;
  }

  .link-label {
    font-size: 11px;
  }

  /* welcome + stage */
  .welcome {
    margin-top: calc(var(--header-h) + 48px);
    padding: 0 16px;
  }

  .welcome-inner {
    transform: none;
  }

  .welcome-title {
    font-size: 27px;
    letter-spacing: 1px;
  }

  .welcome-sub {
    font-size: 14px;
  }

  .stage {
    margin-top: 48px;
    padding: 0 16px;
  }

  .node-here {
    font-size: 9px;
  }

  .node-here-sub {
    font-size: 8px;
  }

  /* content + cards */
  .content {
    padding: 18px 14px 30px;
    gap: 20px;
  }

  .season-card {
    padding: 24px 20px 26px;
  }

  .rods-card {
    padding: 22px 18px 24px;
  }

  .season-title {
    font-size: 26px;
    letter-spacing: 1px;
  }

  .season-prize {
    font-size: 15px;
  }

  .prize-amount {
    font-size: 18px;
  }

  .season-per {
    font-size: 11px;
  }

  .season-body {
    font-size: 14px;
  }

  .season-subhead {
    font-size: 16px;
  }

  .rod-row {
    width: 148px;
  }

  .drop-table {
    font-size: 13px;
  }

  .drop-table th,
  .drop-table td {
    padding: 5px 6px;
  }

  /* FAQ */
  .faq {
    padding: 26px 16px 46px;
  }

  .faq-title {
    font-size: 24px;
  }

  .faq-q {
    font-size: 17px;
  }

  .faq-a {
    font-size: 14.5px;
  }

  /* PLAY NOW */
  .play-now {
    padding: 16px 16px 64px;
  }

  .play-btn-label {
    font-size: 24px;
  }
}