:root {
  --paper: #f7e6ba;
  --paper-dark: #e7c98a;
  --ink: #2d1909;
  --sea: #0e495d;
  --sea-dark: #0a2430;
  --gold: #dca83b;
  --shadow: rgba(86, 51, 17, 0.18);
  --cream: #fff8e7;
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Source Sans 3", Georgia, serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 102, 0.25), transparent 24%),
    linear-gradient(180deg, rgba(8, 45, 55, 0.95), rgba(3, 20, 28, 1)),
    var(--sea-dark);
}
.page-shell { position: relative; overflow: hidden; min-height: 100vh; padding: 32px 18px 56px; }
.treasure-map,
.pirate-stamp,
.compass-rose,
.treasure-x,
.rope-border,
.burn-mark { position: absolute; pointer-events: none; }
.treasure-map {
  border-radius: 40px;
  opacity: 0.18;
  filter: saturate(0.9);
}
.treasure-map-main {
  top: 88px;
  left: 50%;
  width: min(1220px, calc(100% - 40px));
  height: 78vh;
  transform: translateX(-50%) rotate(-1.2deg);
  background:
    radial-gradient(circle at 15% 18%, rgba(115, 74, 20, 0.24) 0 12px, transparent 13px),
    radial-gradient(circle at 78% 68%, rgba(115, 74, 20, 0.24) 0 16px, transparent 17px),
    repeating-linear-gradient(0deg, rgba(111, 74, 28, 0.13) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(90deg, rgba(111, 74, 28, 0.1) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, rgba(239, 214, 167, 0.72), rgba(202, 168, 110, 0.52));
  box-shadow: inset 0 0 0 2px rgba(95, 58, 17, 0.22);
}
.treasure-map-secondary {
  right: 24px;
  bottom: 42px;
  width: min(420px, 42vw);
  height: min(420px, 42vw);
  transform: rotate(12deg);
  background:
    repeating-radial-gradient(circle at center, rgba(97, 63, 24, 0.18) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, rgba(237, 208, 154, 0.56), rgba(194, 160, 102, 0.34));
}
.map-overlay { position: absolute; pointer-events: none; opacity: 0.12; filter: saturate(0.8); }
.map-overlay-left {
  inset: 0 auto auto 0; width: 320px; height: 320px;
  background:
    radial-gradient(circle, transparent 57%, rgba(255,240,200,.7) 58%, transparent 61%),
    linear-gradient(45deg, transparent 49%, rgba(255,240,200,.75) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(255,240,200,.75) 50%, transparent 51%);
  transform: translate(-24%, -18%) rotate(-8deg);
}
.map-overlay-right {
  inset: auto 0 0 auto; width: 420px; height: 420px;
  background:
    radial-gradient(circle at center, rgba(255, 244, 216, 0.55) 0 3px, transparent 4px 100%),
    repeating-radial-gradient(circle at center, rgba(255, 244, 216, 0.5) 0 1px, transparent 1px 38px);
  transform: translate(18%, 24%) rotate(16deg);
}
.pirate-stamp {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border: 2px dashed rgba(247, 230, 186, 0.18);
  border-radius: 50%;
  color: rgba(247, 230, 186, 0.18);
  font-family: "Cinzel", Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
}
.pirate-stamp-skull { top: 126px; right: 86px; transform: rotate(14deg); }
.pirate-stamp-skull::before { content: "X"; }
.pirate-stamp-anchor { bottom: 124px; left: 64px; transform: rotate(-12deg); }
.pirate-stamp-anchor::before { content: "A"; }
.compass-rose {
  top: 170px;
  left: 34px;
  width: 180px;
  height: 180px;
  opacity: 0.14;
  background:
    linear-gradient(45deg, transparent 48.5%, rgba(247, 230, 186, 0.8) 49.5%, transparent 50.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(247, 230, 186, 0.8) 49.5%, transparent 50.5%),
    radial-gradient(circle, transparent 58%, rgba(247, 230, 186, 0.8) 59%, transparent 60%);
}
.treasure-x {
  right: 112px;
  top: 530px;
  width: 88px;
  height: 88px;
  opacity: 0.18;
  transform: rotate(12deg);
}
.treasure-x::before,
.treasure-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: rgba(247, 230, 186, 0.85);
  transform-origin: center;
}
.treasure-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.treasure-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hero { position: relative; z-index: 1; width: min(980px, 100%); margin: 0 auto; text-align: center; color: #f8e7bd; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .24em; font-size: .82rem; font-weight: 700; color: #f1d68d; }
h1, h2, h3 { font-family: "Cinzel", Georgia, serif; line-height: 1.06; }
h1 { margin: 12px 0 16px; font-size: clamp(2.8rem, 8vw, 5.8rem); }
.intro { width: min(720px, 100%); margin: 0 auto; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.65; color: rgba(255,246,221,.88); }
.content-card {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  margin: 28px auto 0;
  padding: 18px;
  border: 2px solid rgba(201,171,115,.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.26), transparent 16%),
    radial-gradient(circle at 82% 72%, rgba(160, 104, 28, 0.1), transparent 22%),
    linear-gradient(180deg, rgba(255,249,234,.8), rgba(224,203,154,.72)),
    var(--paper);
  box-shadow: 0 24px 70px var(--shadow);
  overflow: hidden;
}
.content-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(138,90,36,.35);
  border-radius: 20px;
  pointer-events: none;
}
.content-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(122, 82, 33, 0.06), transparent 24%),
    linear-gradient(-135deg, rgba(122, 82, 33, 0.05), transparent 26%);
  pointer-events: none;
}
.rope-border {
  left: 28px;
  right: 28px;
  height: 10px;
  border-radius: 999px;
  opacity: 0.48;
  background: repeating-linear-gradient(90deg, rgba(122, 82, 33, 0.92) 0 18px, rgba(166, 118, 55, 0.88) 18px 36px);
}
.rope-border-top { top: 10px; }
.rope-border-bottom { bottom: 10px; }
.burn-mark {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.24;
  background: radial-gradient(circle, rgba(255, 236, 184, 0.02) 0 36%, rgba(111, 67, 20, 0.3) 44%, transparent 58%);
}
.burn-mark-left { top: 94px; left: -22px; }
.burn-mark-right { bottom: 68px; right: -18px; }
.panel { position: relative; padding: clamp(22px, 4vw, 34px); }
.panel + .panel { border-top: 2px solid rgba(138,90,36,.18); }
.panel-kicker { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .82rem; color: rgba(45,25,9,.72); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.time-card {
  padding: 18px 14px;
  border: 1px solid rgba(138,90,36,.22);
  border-radius: 18px;
  background: rgba(255,250,236,.9);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.time-value { display: block; font-family: "Cinzel", Georgia, serif; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; color: var(--sea); }
.time-label { display: block; margin-top: 6px; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: rgba(45,25,9,.78); }
.release-text { margin: 18px 0 0; font-size: 1rem; line-height: 1.6; color: rgba(45,25,9,.8); }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.primary-button, .ghost-link, .text-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; }
.primary-button { padding: 14px 20px; border-radius: 999px; background: linear-gradient(135deg, #8b5c22, #c7922f); color: #fff7df; box-shadow: 0 14px 26px rgba(57,31,8,.18); }
.primary-button.secondary { background: linear-gradient(135deg, #7a5221, #b98228); }
.ghost-link { color: var(--sea); }
.open-state { padding: 18px 0 4px; }
.hidden { display: none !important; }
.panel-header { display: flex; gap: 18px; justify-content: space-between; align-items: end; margin-bottom: 22px; }
.panel-header h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.extra-info-grid { margin-top: 22px; }
.info-card {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(138,90,36,.24);
  background: rgba(255,252,242,.9);
  box-shadow: 0 16px 28px rgba(49,27,7,.12);
}
.info-card:nth-child(odd) { transform: rotate(-0.35deg); }
.info-card:nth-child(even) { transform: rotate(0.25deg); }
.info-card h3 { margin: 0 0 12px; font-size: 1.2rem; }
.info-card p { margin: 0 0 12px; line-height: 1.65; color: rgba(45,25,9,.84); }
.text-link { color: var(--sea); }
@media (max-width: 840px) {
  .pirate-stamp-anchor,
  .pirate-stamp-skull,
  .treasure-x { display: none; }
  .countdown-grid, .info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .panel-header { display: block; }
}
@media (max-width: 560px) {
  .page-shell { padding-inline: 12px; }
  .treasure-map-main {
    width: calc(100% - 20px);
    top: 70px;
    height: 84vh;
  }
  .treasure-map-secondary,
  .compass-rose { display: none; }
  .content-card { padding: 8px; border-radius: 22px; }
  .countdown-grid, .info-grid { grid-template-columns: 1fr; }
  .info-grid { gap: 18px; }
  .extra-info-grid { margin-top: 18px; }
  .time-card { padding-block: 16px; }
  .action-row > * { width: 100%; }
}
.pirate-ship {
  position: absolute;
  right: 84px;
  bottom: 86px;
  width: 210px;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-4deg);
}

.pirate-ship::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 36px;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(180deg, #7a4a20, #4d2a0f);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.pirate-ship::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 10px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(180deg, #4b2b10, #8a5321);
  box-shadow: -42px 4px 0 -1px #4b2b10;
}

.pirate-ship .ship-sail,
.pirate-ship .ship-flag {
  position: absolute;
  pointer-events: none;
}

.pirate-ship .ship-sail {
  left: 50%;
  bottom: 48px;
  width: 54px;
  height: 74px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff8e7, #f1dfb2);
  clip-path: polygon(0 0, 100% 18%, 86% 100%, 12% 90%);
  border: 2px solid rgba(126, 79, 29, 0.28);
}

.pirate-ship .ship-sail.left {
  left: 42px;
  width: 52px;
  height: 66px;
  transform: none;
  clip-path: polygon(100% 0, 0 18%, 12% 100%, 88% 90%);
}

.pirate-ship .ship-sail.right {
  left: auto;
  right: 42px;
}

.pirate-ship .ship-flag {
  top: 22px;
  left: 126px;
  width: 64px;
  height: 28px;
  background: linear-gradient(135deg, #25150f, #5b140e);
  clip-path: polygon(0 0, 100% 18%, 82% 56%, 100% 100%, 0 82%);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
}

.pirate-ship .ship-flag::before {
  content: "X";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff0cb;
  font-size: 1rem;
  font-weight: 900;
}

.pirate-ship .ship-wake {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20px 14px, rgba(255, 244, 216, 0.94) 0 7px, transparent 8px),
    radial-gradient(circle at 62px 10px, rgba(255, 244, 216, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 112px 12px, rgba(255, 244, 216, 0.9) 0 7px, transparent 8px),
    radial-gradient(circle at 156px 10px, rgba(255, 244, 216, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 196px 14px, rgba(255, 244, 216, 0.94) 0 7px, transparent 8px);
  opacity: 0.55;
}

@media (max-width: 840px) {
  .pirate-ship {
    right: 28px;
    bottom: 72px;
    transform: scale(0.9) rotate(-4deg);
  }
}

@media (max-width: 560px) {
  .pirate-ship {
    display: none;
  }
}

.cartoon-blob,
.floating-badge,
.wave-swash {
  position: absolute;
  pointer-events: none;
}

.cartoon-blob {
  width: 240px;
  height: 170px;
  border-radius: 55% 45% 50% 50%;
  background: linear-gradient(180deg, rgba(255, 208, 120, 0.3), rgba(213, 122, 45, 0.2));
  filter: blur(2px);
}

.cartoon-blob-left {
  top: 140px;
  left: -40px;
  transform: rotate(-10deg);
}

.cartoon-blob-right {
  right: -30px;
  bottom: 140px;
  transform: rotate(8deg);
}

.floating-badge {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 28px;
  border: 4px solid rgba(255, 244, 216, 0.55);
  background: linear-gradient(180deg, rgba(255, 199, 88, 0.48), rgba(193, 102, 25, 0.36));
  color: rgba(255, 250, 240, 0.88);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  font-size: 3rem;
}

.floating-badge-skull {
  top: 170px;
  right: 90px;
  transform: rotate(10deg);
}

.floating-badge-skull::before {
  content: "X";
  font-weight: 900;
}

.floating-badge-chest {
  left: 72px;
  bottom: 150px;
  width: 130px;
  height: 96px;
  border-radius: 18px 18px 22px 22px;
  transform: rotate(-8deg);
  background:
    linear-gradient(180deg, rgba(255, 214, 104, 0.98), rgba(206, 132, 39, 0.92));
  border: 4px solid rgba(117, 70, 20, 0.82);
  box-shadow:
    inset 0 12px 0 rgba(255, 246, 205, 0.34),
    inset 0 -10px 0 rgba(88, 51, 11, 0.14),
    0 16px 28px rgba(0, 0, 0, 0.18);
}

.floating-badge-chest::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 28px;
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(180deg, #6f4217, #8d5520);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.floating-badge-chest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38px;
  width: 18px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(180deg, #f4dd7d, #c99423);
  box-shadow:
    -24px -18px 0 -7px rgba(255, 226, 121, 0.92),
    -8px -26px 0 -4px rgba(255, 226, 121, 0.88),
    14px -20px 0 -6px rgba(255, 226, 121, 0.92),
    30px -10px 0 -5px rgba(255, 226, 121, 0.84),
    -30px -6px 0 -6px rgba(255, 226, 121, 0.9);
}

.wave-swash {
  left: 50%;
  width: min(980px, calc(100% - 70px));
  height: 26px;
  transform: translateX(-50%);
  opacity: 0.35;
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 70px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 120px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 170px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 220px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 270px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 320px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 370px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 420px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 470px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 520px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 570px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 620px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 670px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 720px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 770px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px),
    radial-gradient(circle at 820px 20px, rgba(255, 240, 206, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 870px 6px, rgba(255, 240, 206, 0.9) 0 12px, transparent 13px);
}

.wave-swash-top { top: 112px; }
.wave-swash-bottom { bottom: 68px; }

.pirate-ship {
  position: absolute;
  right: 84px;
  bottom: 86px;
  width: 210px;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-4deg);
}

.pirate-ship::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 36px;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(180deg, #7a4a20, #4d2a0f);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.pirate-ship::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 10px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(180deg, #4b2b10, #8a5321);
  box-shadow: -42px 4px 0 -1px #4b2b10;
}

.pirate-ship .ship-sail,
.pirate-ship .ship-flag {
  position: absolute;
  pointer-events: none;
}

.pirate-ship .ship-sail {
  left: 50%;
  bottom: 48px;
  width: 54px;
  height: 74px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff8e7, #f1dfb2);
  clip-path: polygon(0 0, 100% 18%, 86% 100%, 12% 90%);
  border: 2px solid rgba(126, 79, 29, 0.28);
}

.pirate-ship .ship-sail.left {
  left: 42px;
  width: 52px;
  height: 66px;
  transform: none;
  clip-path: polygon(100% 0, 0 18%, 12% 100%, 88% 90%);
}

.pirate-ship .ship-sail.right {
  left: auto;
  right: 42px;
}

.pirate-ship .ship-flag {
  top: 22px;
  left: 126px;
  width: 64px;
  height: 28px;
  background: linear-gradient(135deg, #25150f, #5b140e);
  clip-path: polygon(0 0, 100% 18%, 82% 56%, 100% 100%, 0 82%);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
}

.pirate-ship .ship-flag::before {
  content: "X";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff0cb;
  font-size: 1rem;
  font-weight: 900;
}

.pirate-ship .ship-wake {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20px 14px, rgba(255, 244, 216, 0.94) 0 7px, transparent 8px),
    radial-gradient(circle at 62px 10px, rgba(255, 244, 216, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 112px 12px, rgba(255, 244, 216, 0.9) 0 7px, transparent 8px),
    radial-gradient(circle at 156px 10px, rgba(255, 244, 216, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 196px 14px, rgba(255, 244, 216, 0.94) 0 7px, transparent 8px);
  opacity: 0.55;
}

@media (max-width: 840px) {
  .floating-badge-chest,
  .cartoon-blob-right {
    display: none;
  }

  .floating-badge-skull {
    right: 26px;
    top: 180px;
  }

  .pirate-ship {
    right: 28px;
    bottom: 72px;
    transform: scale(0.9) rotate(-4deg);
  }
}

@media (max-width: 560px) {
  .floating-badge,
  .cartoon-blob,
  .wave-swash,
  .hero h1::after,
  .pirate-ship {
    display: none;
  }

  .content-card {
    border-radius: 26px;
  }
}