/* =====================================================
   Dockside's Treasure Tracker: styles.css
   ===================================================== */

/* ----- Custom Properties ----- */
:root {
  --bg-base:        #1c2220;
  --bg-panel:       #222a27;
  --bg-nav:         #0d0d0d;
  --gold:           #c9a84c;
  --gold-light:     #e2c47a;
  --gold-dim:       #8a6f35;
  --text-body:      #c8bfa8;
  --text-faint:     #7a7060;
  --green-correct:  #5a9e6f;
  --red-wrong:      #c0392b;
  --white:          #f0ece3;

  --font-display:   'Cinzel', serif;
  --font-body:      'IM Fell English', serif;

  --nav-height:     52px;
  --panel-left-w:   300px;
  --panel-right-w:  240px;
  --panel-gap:      32px;
}

/* ----- Reset ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* hamburger for mobile */
.nav__hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* swipe hint */
.swipe-hint {
  display: none;
}

/* game__play wrapper */
.game__play {
  display: contents; /* invisible on desktop */
}

/* mobile variant hidden on desktop */
.timer-wrap--mobile { display: none; }
.nav {
  background: var(--bg-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #2a2a2a;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.nav__links {
  list-style: none;
  display: flex;
  gap: 24px;
}

.nav__links a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.nav__links a:hover {
  opacity: 1;
  color: var(--gold-light);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__icon-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.nav__icon-link:hover {
  opacity: 1;
}

.nav__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* =====================================================
   MAIN GAME LAYOUT
   ===================================================== */
.game {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 48px var(--panel-gap);
  gap: var(--panel-gap);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Shared panel base */
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 800px;
}

/* =====================================================
   LEFT PANEL
   ===================================================== */
.panel--left {
  width: var(--panel-left-w);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  text-align: center;
}

/* Dockside character */
.character {
  width: 220px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.panel__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  margin-bottom: 12px;
  text-align: center;
}

.ornament {
  width: 180px;
  opacity: 0.6;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ornament--top {
  margin-top: 4px;
  margin-bottom: 12px;
}

.ornament--bottom {
  margin-top: 16px;
  transform: scaleX(-1) scaleY(-1);
}

.panel__flavour {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  font-style: normal;
  text-align: center;
}

.panel__cta {
  margin-top: 16px;
  font-style: italic;
  color: var(--text-faint);
}

/* =====================================================
   CENTRE PANEL
   ===================================================== */
.panel--centre {
  flex: 1;
  background: var(--bg-panel);
  border-radius: 4px;
  padding: 36px 40px 48px;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.game__question {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 40px;
  font-variant: small-caps;
}

/* Card row */
.cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.card-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-btn:hover .card-img {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.card-img {
  width: clamp(180px, 20vw, 320px);
  height: auto;
  aspect-ratio: 488 / 680;
  border-radius: 8px;
  display: block;
  background: #2a3330;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Price text under cards */
.card-price {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
  /* hidden by default; JS toggles visibility after guess */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* JS adds this class to show the price after a guess */
.card-price.revealed {
  visibility: visible;
  opacity: 1;
}

.cards__or {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  padding-bottom: 40px;
}

/* =====================================================
   RIGHT PANEL — FEEDBACK
   ===================================================== */
.panel--right {
  width: var(--panel-right-w);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

/* Feedback container */
.feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Each state div is hidden by default */
.feedback__state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: feedbackIn 0.3s ease forwards;
}

/* Only show the matching state */
.feedback--idle     .feedback__idle     { display: flex; }
.feedback--correct  .feedback__correct  { display: flex; }
.feedback--wrong    .feedback__wrong    { display: flex; }
.feedback--gameover .feedback__gameover { display: flex; }

@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* D20 health display */
.d20-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d20 {
  width: 120px;
  height: 120px;
  filter: brightness(0.85) sepia(0.3);
}

.d20__score {
  position: absolute;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

/* Correct / Wrong labels */
.feedback__label {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant: small-caps;
}

.feedback__label--correct  { color: var(--gold-light); }
.feedback__label--wrong    { color: var(--gold-light); }
.feedback__label--gameover { color: var(--red-wrong); font-size: 32px; }

/* final score and high score lines */
.feedback__score {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-body);
  letter-spacing: 0.05em;
}

.feedback__highscore {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

/* new high score celebration */
.feedback__newhigh {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: none;
  animation: feedbackIn 0.4s ease forwards;
}

.feedback__newhigh.visible { display: block; }

/* new game button */
.feedback__newgame {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg-base);
  background: var(--gold);
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.feedback__newgame:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.feedback__newgame:active {
  transform: translateY(0);
}

/* Icon (sacred nectar or lightning bolt) */
.feedback__reward {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback__icon {
  width: 150px;
  height: 150px;
  object-fit: contain;
  transform: rotate(-30deg);
}

/* Delta score change */
.feedback__delta {
  font-family: var(--font-display);
  font-size: 37px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.feedback__delta--positive { color: var(--green-correct); }
.feedback__delta--negative { color: var(--red-wrong); }

/* =====================================================
   TIMER BAR
   ===================================================== */
.timer-wrap {
  position: relative;
  width: 100%;
  height: 10px;
  background: #1a211e;
  border-radius: 99px;
  margin-top: 32px;
  overflow: visible;
}

/* the fill: shrinks from right as time runs out */
.timer-bar {
  height: 100%;
  width: 100%; /* JS drives this down to 0 over 300s */
  background: var(--gold);
  border-radius: 99px;
  transition: width 1s linear, background-color 0.5s ease;
}

/* turns red in the last 60 seconds */
.timer-bar.urgent {
  background: var(--red-wrong);
}

/* label sits above the right edge of the fill, tracking it as it shrinks */
.timer-label {
  position: absolute;
  top: -22px;
  right: 0; /* JS updates this to match bar width */
  transform: translateX(50%);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: right 1s linear, color 0.5s ease;
  pointer-events: none;
}

.timer-label.urgent {
  color: var(--red-wrong);
}

/* =====================================================
   CURRENCY TOGGLE
   ===================================================== */
.currency-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.currency-toggle__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.currency-toggle__label.active {
  color: var(--gold);
}

/* the track */
.currency-toggle__switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: #2a3330;
  border: 1px solid var(--gold-dim);
  border-radius: 99px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.currency-toggle__switch:hover {
  border-color: var(--gold);
}

/* the thumb */
.currency-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--gold);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

/* USD active: thumb slides right */
.currency-toggle__switch[aria-checked="true"] .currency-toggle__thumb {
  transform: translateX(18px);
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  text-align: center;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-faint);
  border-top: 1px solid #1a1e1c;
  letter-spacing: 0.02em;
}

/* =====================================================
   UTILITY
   ===================================================== */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.card-img.loading {
  background: linear-gradient(90deg, #252d2a 25%, #2e3a36 50%, #252d2a 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
/* =====================================================
   MOBILE max-width 768px
   Splash screen + stacked single-column game layout
   ===================================================== */
@media (max-width: 768px) {

  /* ----- Nav ----- */
  .nav__hamburger { display: block; }         /* show hamburger */
  .nav__links     { display: none; }          /* hide nav links */
  .nav__right     { display: none; }          /* hide icon links */
  .nav__left      { gap: 0; }
  .nav__logo-img  { height: 28px; }

  /* centre the logo since hamburger floats left */
  .nav {
    justify-content: center;
    position: relative;
  }

  .nav__hamburger {
    position: absolute;
    left: 16px;
  }

  /* ----- Overall layout: vertical scroll-snap container ----- */
  html, body { height: 100%; overflow: hidden; }

  .game {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    max-width: 100%;
    height: calc(100vh - var(--nav-height));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* each snap section fills the viewport */
  .panel--left,
  .game__play {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    max-height: none;
  }

  /* ----- SPLASH: left panel becomes full-screen intro ----- */
  .panel--left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 24px;
    background: var(--bg-base);
    text-align: center;
  }

  .character  { width: 160px; margin-bottom: 12px; }
  .panel__title { font-size: 22px; margin-bottom: 8px; }
  .ornament   { width: 140px; }

  /* swipe hint sits at the bottom of the splash */
  .swipe-hint {
    display: block;
    width: 33px;
    opacity: 0.5;
    margin-top: 24px;
  }

  /* ----- GAME PLAY: centre + feedback stacked vertically ----- */
  .game__play {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-base);
    overflow-y: auto;
  }

  /* centre panel: cards stacked top to bottom */
  .panel--centre {
    flex: 0 0 auto;
    background: var(--bg-panel);
    border-radius: 0;
    padding: 20px 16px 16px;
    justify-content: flex-start;
    max-height: none;
  }

  .game__question {
    font-size: 20px;
    margin-bottom: 20px;
  }

  /* stack card rows vertically */
  .cards {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* each slot is a row: [card] [price]*/
  .card-slot {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
  }

  /* OR now sits between two rows*/
  .cards__or {
    font-size: 20px;
    padding-bottom: 0;
  }

  /* card nudges left when the price appears beside it */
  .card-btn {
    transition: transform 0.3s ease;
  }

  .card-slot:has(.card-price.revealed) .card-btn {
    transform: translateX(-8px);
  }

  .card-img {
    width: clamp(130px, 40vw, 200px);
  }

  /* price sits to the right */
  .card-price {
    font-size: 18px;
    width: 0;
    overflow: hidden;
    text-align: left;
    flex-shrink: 0;
    transition: opacity 0.3s ease, width 0.3s ease;
  }

  .card-price.revealed {
    width: 64px;
  }

  /* ----- Feedback: moves to bottom bar on mobile ----- */
  .panel--right {
    width: 100%;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-top: 1px solid #2a2a2a;
    padding: 0 16px 16px;
    max-height: none;
    justify-content: center;
    min-height: 120px;
  }

  .feedback { justify-content: center; }

  /* currency toggle */
  .currency-toggle {
    order: -1;
    margin-top: 0;
    margin-bottom: 12px;
    gap: 6px;
  }

  .currency-toggle__label { font-size: 11px; }

  .currency-toggle__switch { width: 34px; height: 18px; }
  .currency-toggle__thumb  { width: 11px; height: 11px; }
  .currency-toggle__switch[aria-checked="true"] .currency-toggle__thumb { transform: translateX(16px); }

  /* scale down feedback elements */
  .d20-wrapper  { height: 80px; }
  .d20          { width: 80px; height: 80px; }
  .d20__score   { font-size: 22px; }

  .feedback__state { gap: 8px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .feedback__label { font-size: 20px; }
  .feedback__reward { width: 60px; height: 60px; }
  .feedback__icon   { width: 60px; height: 60px; }
  .feedback__delta  { font-size: 24px; }

  /* game over: two columns — text stack left, button right */
  .feedback__gameover {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    width: 100%;
  }

  .feedback__gameover-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* score and best flow onto one line */
  .feedback__gameover .feedback__score,
  .feedback__gameover .feedback__highscore { display: inline; font-size: 13px; }
  .feedback__gameover .feedback__score::after { content: '\00a0\00a0\00a0'; }

  .feedback__label--gameover { font-size: 20px; }
  .feedback__score           { font-size: 14px; }
  .feedback__highscore       { font-size: 12px; }
  .feedback__newhigh         { font-size: 14px; }
  .feedback__newgame         { font-size: 14px; padding: 6px 14px; flex-shrink: 0; }

  /* timer bar */
  .timer-wrap--desktop { display: none; }

  .timer-wrap--mobile {
    display: block;
    width: 100%;
    margin-top: 12px;
    height: 8px;
  }

  .timer-wrap--mobile .timer-label {
    font-size: 11px;
    top: -20px;
  }

  /* footer hidden on mobile */
  .footer { display: none; }
}