@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --water-deep:   #1a6b8a;
  --water-mid:    #2d9cdb;
  --water-light:  #56c8e8;
  --green-dark:   #1a3a28;
  --green-mid:    #2d6a4f;
  --green-bright: #40916c;
  --sand:         #e9c46a;
  --sky-top:      #001122;
  --sky-mid:      #0077b6;
  --sky-dawn:     #48cae4;
  --dark-bg:      #060e1a;
  --panel-bg:     #0a1628;
  --text-white:   #f0f0e8;
  --text-dim:     #8ab4c0;
  --btn-green:    #40916c;
  --btn-green-dk: #1a4430;
  --btn-blue:     #2d9cdb;
  --btn-blue-dk:  #0d3d58;
  --btn-red:      #c0392b;
  --btn-red-dk:   #7b241c;
  --btn-brown:    #A0522D;
  --btn-brown-dk: #6B3410;
  --font:         'Press Start 2P', monospace;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--sky-mid);
  color: var(--text-white);
  min-height: 100vh;
  image-rendering: pixelated;
  overflow-x: hidden;
  background: linear-gradient(180deg,
    var(--sky-top)  0%,
    var(--sky-mid)  45%,
    var(--sky-dawn) 75%,
    var(--water-deep) 100%);
  background-attachment: fixed;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-panel {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  flex: 1;
}

/* ============================================================
   NAV BAR
   ============================================================ */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 1rem;
  position: relative;
  z-index: 10;
}

.nav-back {
  font-family: var(--font);
  font-size: 0.45rem;
  color: var(--text-white);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  transition: background 0.1s;
}
.nav-back:hover { background: rgba(255,255,255,0.12); }

.nav-title {
  font-size: 0.5rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}

/* ============================================================
   PIXEL BUTTONS
   ============================================================ */
.btn-pixel {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.6rem;
  padding: 1rem 1.5rem;
  background: var(--btn-green);
  color: var(--text-white);
  text-decoration: none;
  border: none;
  cursor: pointer;
  outline: none;
  line-height: 1.8;
  letter-spacing: 0.05em;
  position: relative;
  box-shadow:
    4px  0   0 0 var(--btn-green-dk),
    0    4px 0 0 var(--btn-green-dk),
    4px  4px 0 0 var(--btn-green-dk);
  transition: background 0.05s;
  white-space: normal;
  text-align: left;
}
.btn-pixel:hover {
  background: var(--btn-blue);
  box-shadow:
    4px  0   0 0 var(--btn-blue-dk),
    0    4px 0 0 var(--btn-blue-dk),
    4px  4px 0 0 var(--btn-blue-dk);
  color: #fff;
}
.btn-pixel:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.btn-pixel.btn-blue {
  background: var(--btn-blue);
  box-shadow:
    4px  0   0 0 var(--btn-blue-dk),
    0    4px 0 0 var(--btn-blue-dk),
    4px  4px 0 0 var(--btn-blue-dk);
}
.btn-pixel.btn-blue:hover {
  background: var(--btn-green);
  box-shadow:
    4px  0   0 0 var(--btn-green-dk),
    0    4px 0 0 var(--btn-green-dk),
    4px  4px 0 0 var(--btn-green-dk);
}

.btn-pixel.btn-red {
  background: var(--btn-red);
  box-shadow:
    4px  0   0 0 var(--btn-red-dk),
    0    4px 0 0 var(--btn-red-dk),
    4px  4px 0 0 var(--btn-red-dk);
}

.btn-pixel.btn-brown {
  background: var(--btn-brown);
  box-shadow:
    4px  0   0 0 var(--btn-brown-dk),
    0    4px 0 0 var(--btn-brown-dk),
    4px  4px 0 0 var(--btn-brown-dk);
}
.btn-pixel.btn-brown:hover {
  background: var(--btn-green);
  box-shadow:
    4px  0   0 0 var(--btn-green-dk),
    0    4px 0 0 var(--btn-green-dk),
    4px  4px 0 0 var(--btn-green-dk);
}

/* ============================================================
   DINO GAME — photo comparison layout
   ============================================================ */
.compare-prompt {
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-white);
  line-height: 1.6;
}
.compare-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}
.compare-card {
  flex: 1;
  cursor: pointer;
  background: var(--panel-bg);
  border: 4px solid var(--btn-brown);
  padding: 0.5rem;
  transition: transform 0.05s, border-color 0.05s;
  box-shadow:
    4px  0   0 0 var(--btn-brown-dk),
    0    4px 0 0 var(--btn-brown-dk),
    4px  4px 0 0 var(--btn-brown-dk);
}
.compare-card:hover {
  border-color: var(--btn-green);
  box-shadow:
    4px  0   0 0 var(--btn-green-dk),
    0    4px 0 0 var(--btn-green-dk),
    4px  4px 0 0 var(--btn-green-dk);
}
.compare-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.compare-img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.compare-vs {
  align-self: center;
  font-size: 0.8rem;
  color: var(--btn-brown);
  text-shadow: 2px 2px 0 #000;
  padding: 0 0.25rem;
}
@media (max-width: 600px) {
  .compare-row { flex-direction: column; }
  .compare-vs { padding: 0.25rem 0; }
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  max-height: 60vh;
  overflow-y: auto;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--panel-bg);
  border-left: 4px solid var(--btn-brown);
  font-size: 0.55rem;
  line-height: 1.6;
}
.leaderboard-rank {
  color: var(--btn-brown);
  font-size: 0.7rem;
  min-width: 2.5rem;
  text-align: right;
}
.leaderboard-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid var(--btn-brown-dk);
  flex-shrink: 0;
}
.leaderboard-info {
  flex: 1;
  min-width: 0;
}
.leaderboard-name {
  color: var(--text-white);
  word-break: break-word;
}
.leaderboard-record {
  color: var(--text-dim);
  font-size: 0.5rem;
  margin-top: 0.25rem;
}
.leaderboard-pct {
  color: var(--btn-green);
  font-size: 0.65rem;
  min-width: 3rem;
  text-align: right;
}
.leaderboard-empty {
  color: var(--text-dim);
  text-align: center;
  font-size: 0.55rem;
  line-height: 1.8;
  padding: 1rem 0;
}

.btn-pixel.btn-rainbow {
  background: linear-gradient(
    90deg,
    #ff0040, #ff7a00, #ffe000, #1bd66b,
    #00b3ff, #6a5cff, #d843ff, #ff0040
  );
  background-size: 400% 100%;
  animation: rainbow-slide 3s linear infinite;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  box-shadow:
    4px  0   0 0 #000,
    0    4px 0 0 #000,
    4px  4px 0 0 #000;
}
.btn-pixel.btn-rainbow:hover {
  background: linear-gradient(
    90deg,
    #ff0040, #ff7a00, #ffe000, #1bd66b,
    #00b3ff, #6a5cff, #d843ff, #ff0040
  );
  background-size: 400% 100%;
  animation: rainbow-slide 1s linear infinite;
  filter: brightness(1.15);
  box-shadow:
    4px  0   0 0 #000,
    0    4px 0 0 #000,
    4px  4px 0 0 #000;
}
@keyframes rainbow-slide {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}

/* ============================================================
   DIALOGUE BOX
   ============================================================ */
.dialogue-box {
  background: var(--panel-bg);
  border: 4px solid rgba(255,255,255,0.8);
  box-shadow:
    inset 4px  4px 0 0 rgba(255,255,255,0.07),
    inset -4px -4px 0 0 rgba(0,0,0,0.4),
    8px   8px 0 0 #000;
  padding: 1.5rem;
  color: var(--text-white);
  position: relative;
}

/* ============================================================
   TITLES
   ============================================================ */
.pixel-title {
  font-size: clamp(1rem, 5vw, 2rem);
  text-shadow: 4px 4px 0 #000, -2px 0 0 rgba(0,119,182,0.6);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.6;
  color: var(--text-white);
}

.pixel-subtitle {
  font-size: clamp(0.45rem, 2vw, 0.65rem);
  color: var(--water-light);
  text-align: center;
  line-height: 2.2;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.2em;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-wrap {
  margin: 1rem 0;
}
.progress-label {
  font-size: 0.4rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}
.progress-bar {
  width: 100%;
  height: 12px;
  background: var(--dark-bg);
  border: 3px solid rgba(255,255,255,0.3);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--btn-green);
  width: 0%;
  transition: width 0.25s steps(10, end);
}

/* ============================================================
   FADE IN (stepped = 8-bit feel)
   ============================================================ */
.fade-in {
  animation: fadeIn 0.35s steps(4, end);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   LAKE SCENE (index.html)
   ============================================================ */
.lake-scene {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

/* sky fill behind treeline */
.lake-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-dawn) 100%);
}

/* pixel treeline SVG */
.treeline-svg {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  height: 90px;
}

/* boat */
.boat-wrapper {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: bob 3.5s ease-in-out infinite;
}

@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0px); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}

/* waves container */
.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 600px 110px;
  background-position: 0 bottom;
}

.wave-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110'%3E%3Cpath d='M0,55 C75,15 150,95 300,55 C450,15 525,95 600,55 L600,110 L0,110 Z' fill='%231a6b8a'/%3E%3C/svg%3E");
  animation: wave-move 6s linear infinite;
  opacity: 1;
  z-index: 1;
}
.wave-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110'%3E%3Cpath d='M0,65 C100,25 200,95 300,65 C400,35 500,90 600,65 L600,110 L0,110 Z' fill='%232d9cdb'/%3E%3C/svg%3E");
  animation: wave-move 9s linear infinite reverse;
  opacity: 0.7;
  z-index: 2;
}
.wave-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 110'%3E%3Cpath d='M0,75 C120,45 180,95 300,70 C420,45 480,95 600,70 L600,110 L0,110 Z' fill='%2356c8e8'/%3E%3C/svg%3E");
  animation: wave-move 13s linear infinite;
  opacity: 0.5;
  z-index: 3;
}

@keyframes wave-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   INDEX MAIN MENU
   ============================================================ */
.menu-center {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.menu-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.menu-btn {
  width: 100%;
  max-width: 400px;
  text-align: center;
  font-size: 0.6rem;
  padding: 1.2rem 2rem;
}

.version-tag {
  font-size: 0.4rem;
  color: rgba(255,255,255,0.25);
  text-align: right;
  padding: 0.5rem 1rem 1rem;
  letter-spacing: 0.2em;
}

/* ============================================================
   CYOA
   ============================================================ */
.story-text {
  font-size: 0.6rem;
  line-height: 2.4;
  color: var(--text-white);
  min-height: 8rem;
  white-space: pre-line;
}

.story-location {
  font-size: 0.4rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.choice-btn {
  font-size: 0.5rem;
  line-height: 2.2;
  padding: 0.875rem 1.25rem;
}

/* ending */
.ending-section { text-align: center; }

.ending-badge {
  font-size: clamp(0.7rem, 3vw, 1.1rem);
  letter-spacing: 0.08em;
  text-shadow: 4px 4px 0 #000;
  padding: 1rem 0;
  display: block;
}
.ending-badge.good    { color: var(--sand); }
.ending-badge.photo   { color: var(--water-light); }
.ending-badge.bad     { color: #aaa; }
.ending-badge.forfeit { color: #ff5555; }
.ending-badge.crab    { color: #ff9900; }
.ending-badge.banana {
  background: linear-gradient(
    90deg,
    #ff0040, #ff7a00, #ffe000, #1bd66b,
    #00b3ff, #6a5cff, #d843ff, #ff0040
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: rainbow-slide 3s linear infinite;
  text-shadow: none;
}

.ending-text {
  font-size: 0.55rem;
  line-height: 2.6;
  color: var(--text-white);
  text-align: left;
  white-space: pre-line;
  margin: 1rem 0 1.5rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.history-btn {
  font-family: var(--font);
  font-size: 0.4rem;
  background: none;
  border: 2px solid rgba(255,255,255,0.2);
  color: var(--text-dim);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.history-btn:hover { border-color: rgba(255,255,255,0.5); color: var(--text-white); }

/* ============================================================
   QUIZ
   ============================================================ */
.question-number {
  font-size: 0.4rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}

.question-text {
  font-size: 0.6rem;
  line-height: 2.4;
  color: var(--water-light);
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 1.5rem;
  white-space: pre-line;
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.answer-btn {
  font-size: 0.5rem;
  line-height: 2.2;
  padding: 0.875rem 1.25rem;
  width: 100%;
  text-align: left;
}

/* result */
.result-panel {
  display: none;
  text-align: center;
}

.result-seat-label {
  font-size: 0.45rem;
  color: var(--text-dim);
  letter-spacing: 0.3em;
  margin-bottom: 0.5rem;
}

.result-title {
  font-size: clamp(0.8rem, 3vw, 1.2rem);
  color: var(--sand);
  text-shadow: 4px 4px 0 #000;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.result-tagline {
  font-size: 0.5rem;
  color: var(--water-light);
  line-height: 2.2;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.result-card {
  border-left: 4px solid var(--sand);
  padding: 0.5rem 0 0.5rem 1rem;
  text-align: left;
  margin: 1rem 0 2rem;
}

.result-description {
  font-size: 0.5rem;
  line-height: 2.8;
  color: var(--text-white);
}

/* special single result */
.result-panel.single .result-title  { color: #ff9900; }
.result-panel.single .result-card   { border-color: #ff9900; }

/* ============================================================
   ATMOSPHERE — per-node body classes
   ============================================================ */

/* node 9 rough water — speed up waves */
body[data-node="9"] .wave-1 { animation-duration: 2.5s; }
body[data-node="9"] .wave-2 { animation-duration: 3.5s; }
body[data-node="9"] .wave-3 { animation-duration: 5s;   }

/* ending — good */
body[data-ending="good"]    { background: linear-gradient(180deg, #051a0c 0%, #0d3320 40%, var(--green-mid) 100%); background-attachment: fixed; }
/* ending — bad */
body[data-ending="bad"]     { background: linear-gradient(180deg, #111 0%, #1a1a2e 50%, #0d2030 100%); background-attachment: fixed; }
/* ending — photo */
body[data-ending="photo"]   { background: linear-gradient(180deg, #001020 0%, #002040 40%, #003060 100%); background-attachment: fixed; }
/* ending — forfeit */
body[data-ending="forfeit"] { background: linear-gradient(180deg, #1a0000 0%, #2d0505 50%, #0d1a28 100%); background-attachment: fixed; }
/* ending — crab */
body[data-ending="crab"]    { background: linear-gradient(180deg, #020818 0%, #050d24 50%, #020818 100%); background-attachment: fixed; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .pixel-title  { font-size: 0.85rem; }
  .story-text   { font-size: 0.52rem; }
  .question-text{ font-size: 0.52rem; }
  .btn-pixel    { font-size: 0.48rem; padding: 0.875rem 1rem; }
  .choice-btn   { font-size: 0.44rem; }
  .answer-btn   { font-size: 0.44rem; }
  .result-title { font-size: 0.75rem; }
  .lake-scene   { height: 160px; }
  .boat-wrapper { bottom: 78px; }
  .treeline-svg { bottom: 62px; height: 65px; }
}