/* ── Variables ─────────────────────────────── */
:root {
  --bg:        #f0e8d8;
  --bg2:       #e8dcc8;
  --ink:       #2a2118;
  --ink-light: #5c4a30;
  --card-bg:   #fffef5;
  --panel-bg:  #faf5e9;
  --red:       #c0392b;
  --blue:      #2471a3;
  --purple:    #7d3c98;
  --green:     #1e8449;
  --gold:      #d4a017;
  --energy:    #e67e22;
  --hp-color:  #27ae60;
  --hp-low:    #c0392b;
  --radius:    6px;
  --shadow:    3px 3px 0 var(--ink);
  --font:      'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
}

/* ── Buttons ──────────────────────────────── */
.btn {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 10px 28px;
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  color: var(--ink);
}
.btn:hover  { transform: translate(-1px,-2px); box-shadow: 4px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px);  box-shadow: 1px 1px 0 var(--ink); }
.btn.danger { background: #fde8e8; border-color: var(--red); color: var(--red); }
.btn.primary{ background: #e8f4fd; border-color: var(--blue); color: var(--blue); }

/* ── Cards ────────────────────────────────── */
.card {
  width: 110px;
  height: 160px;
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  filter: url(#doodle);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-22px) rotate(-2deg);
  box-shadow: 5px 8px 0 var(--ink);
  z-index: 20;
}
.card.selected {
  transform: translateY(-28px) rotate(0deg) scale(1.06);
  box-shadow: 5px 10px 0 var(--blue);
  outline: 3px solid var(--blue);
  z-index: 25;
}
.card.unplayable { opacity: 0.5; cursor: not-allowed; }
.card.unplayable:hover { transform: none; }

/* Card type-specific backgrounds */
.card[data-type="attack"] {
  background: linear-gradient(165deg, #fff5f5 0%, #ffe0d6 60%, #ffc9b8 100%);
}
.card[data-type="skill"] {
  background: linear-gradient(165deg, #f0f7ff 0%, #d6e8ff 60%, #bdd8ff 100%);
}
.card[data-type="power"] {
  background: linear-gradient(165deg, #faf0ff 0%, #e8d5f5 60%, #d4b8eb 100%);
}
.card[data-type="curse"] {
  background: linear-gradient(165deg, #f5f5f5 0%, #ddd 60%, #c5c5c5 100%);
}

/* Card inner frame decoration */
.card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(42,33,24,0.12);
  border-radius: 5px;
  pointer-events: none;
}

.card-cost {
  position: absolute;
  top: 6px; left: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f5c842, #e67e22, #d35400);
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.card-type-bar {
  height: 10px;
  border-radius: 6px 6px 0 0;
  margin: -1px -1px 0;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.card[data-type="attack"] .card-type-bar { background: linear-gradient(90deg, #c0392b, #e74c3c, #c0392b); }
.card[data-type="skill"]  .card-type-bar { background: linear-gradient(90deg, #2471a3, #3498db, #2471a3); }
.card[data-type="power"]  .card-type-bar { background: linear-gradient(90deg, #7d3c98, #9b59b6, #7d3c98); }
.card[data-type="curse"]  .card-type-bar { background: linear-gradient(90deg, #555, #777, #555); }

.card-art {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  position: relative;
}
.card[data-type="attack"] .card-art { text-shadow: 0 2px 8px rgba(192,57,43,0.3); }
.card[data-type="skill"] .card-art { text-shadow: 0 2px 8px rgba(36,113,163,0.3); }
.card[data-type="power"] .card-art { text-shadow: 0 2px 8px rgba(125,60,152,0.3); }
.card-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 3px 4px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.card[data-type="attack"] .card-name { background: rgba(192,57,43,0.08); }
.card[data-type="skill"] .card-name { background: rgba(36,113,163,0.08); }
.card[data-type="power"] .card-name { background: rgba(125,60,152,0.08); }
.card-desc {
  font-size: 0.75rem;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.25;
  min-height: 40px;
  color: var(--ink);
}

/* ── HP Bar ───────────────────────────────── */
.hp-bar-wrap {
  height: 14px;
  background: #ccc;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.hp-bar-fill {
  height: 100%;
  background: var(--hp-color);
  transition: width 0.4s ease;
  border-radius: 6px;
}
.hp-bar-fill.low { background: var(--hp-low); }

/* ── Panels ───────────────────────────────── */
.panel {
  background: var(--panel-bg);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px;
}

/* ── Pile counters ────────────────────────── */
.pile {
  width: 60px; height: 85px;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--bg);
  font-weight: 700;
  font-size: 0.9rem;
  position: relative;
  transition: transform 0.1s;
}
.pile:hover { transform: scale(1.06); }
.pile-count {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.pile-label { font-size: 0.7rem; opacity: 0.8; }
.pile.discard { background: var(--ink-light); }

/* ── Energy orb ───────────────────────────── */
.energy-orb {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f39c12, #e67e22, #ca6f1e);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* ── Enemy ────────────────────────────────── */
.enemy-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  min-width: 120px;
  cursor: pointer;
  transition: transform 0.1s;
  position: relative;
}
.enemy-card:hover { transform: scale(1.04); }
.enemy-card.targeted { filter: drop-shadow(0 0 6px var(--red)); }

.enemy-figure {
  width: 90px; height: 90px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  background: var(--panel-bg);
  filter: url(#doodle);
}
.enemy-intent {
  font-size: 0.8rem;
  background: var(--panel-bg);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
}

/* ── Map nodes ────────────────────────────── */
.map-node {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.map-node:hover:not(.locked)  { transform: translate(-50%,-50%) scale(1.2); }
.map-node.current { box-shadow: 0 0 0 4px var(--gold), var(--shadow); }
.map-node.locked  { opacity: 0.35; cursor: default; }
.map-node.boss    { width: 54px; height: 54px; background: #fde8e8; }
.map-node.done    { background: var(--bg2); opacity: 0.6; cursor: default; }

/* ── Screen: Menu ─────────────────────────── */
.menu-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  gap: 20px;
}
.menu-title {
  font-size: 4rem; font-weight: 700;
  line-height: 1;
  text-align: center;
  border-bottom: 4px solid var(--ink);
  padding-bottom: 8px;
  filter: url(#doodle);
}
.menu-subtitle {
  font-size: 1.2rem;
  color: var(--ink-light);
  margin-top: -12px;
}

/* ── Screen: Character Select ─────────────── */
.char-select-screen {
  display: flex; flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 24px;
  gap: 20px;
}
.char-grid {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
.char-card {
  width: 200px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  filter: url(#doodle);
}
.char-card:hover   { transform: translateY(-6px); box-shadow: 5px 8px 0 var(--ink); }
.char-card.selected { outline: 4px solid var(--blue); transform: translateY(-8px); }
.char-figure {
  height: 160px;
  border: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.char-info {
  border: 3px solid var(--ink);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 10px;
  background: var(--panel-bg);
}
.char-name { font-size: 1.4rem; font-weight: 700; }
.char-stat { font-size: 0.95rem; color: var(--ink-light); }

/* ── Screen: Map ──────────────────────────── */
.map-screen {
  display: flex; flex-direction: column;
  height: 100%;
}
.map-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  border-bottom: 3px solid var(--ink);
  background: var(--bg2);
  flex-shrink: 0;
}
.map-container {
  flex: 1;
  position: relative;
  overflow: auto;
}
.map-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Screen: Combat ───────────────────────── */
.combat-screen {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.combat-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 3px solid var(--ink);
  background: var(--bg2);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.combat-field {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px;
  position: relative;
}
.enemies-area {
  display: flex; gap: 24px; align-items: flex-end;
}
.player-area {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.player-figure {
  width: 80px; height: 80px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background: var(--panel-bg);
  filter: url(#doodle);
}
.combat-hand-area {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 8px 0 12px;
  background: rgba(0,0,0,0.05);
  border-top: 3px solid var(--ink);
  min-height: 200px;
  position: relative;
  flex-shrink: 0;
}
.hand-cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  position: relative;
  min-height: 185px;
}
/* Fan layout */
.hand-cards .card { margin: 0 -5px; }
.hand-cards .card:nth-child(1) { transform: rotate(-8deg) translateY(8px); }
.hand-cards .card:nth-child(2) { transform: rotate(-4deg) translateY(4px); }
.hand-cards .card:nth-child(3) { transform: rotate(0deg)  translateY(0px); }
.hand-cards .card:nth-child(4) { transform: rotate(4deg)  translateY(4px); }
.hand-cards .card:nth-child(5) { transform: rotate(8deg)  translateY(8px); }
.hand-cards .card:nth-child(6) { transform: rotate(10deg) translateY(12px); }
.hand-cards .card:nth-child(7) { transform: rotate(-10deg) translateY(12px); }
.hand-cards .card:hover {
  transform: translateY(-28px) rotate(0deg) scale(1.08) !important;
  margin: 0 2px;
  z-index: 20;
}
.hand-cards .card.selected {
  transform: translateY(-32px) rotate(0deg) scale(1.08) !important;
  margin: 0 2px;
}
.combat-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}
.end-turn-btn {
  font-size: 1.3rem;
  padding: 8px 20px;
}

/* ── Screen: Card Reward ──────────────────── */
.reward-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 24px;
  background: rgba(0,0,0,0.7);
  position: absolute; inset: 0;
  z-index: 100;
}
.reward-title { font-size: 2.5rem; color: var(--gold); font-weight: 700; }
.reward-cards { display: flex; gap: 24px; align-items: center; }
.reward-card-wrap { transition: transform 0.15s; cursor: pointer; }
.reward-card-wrap:hover { transform: translateY(-12px) scale(1.05); }
.card-back {
  width: 110px; height: 160px;
  background: var(--ink);
  border: 3px solid var(--bg);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--bg);
  filter: url(#doodle);
}

/* ── Screen: Rest ─────────────────────────── */
.rest-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 20px;
}
.rest-title { font-size: 2.5rem; font-weight: 700; }
.rest-options { display: flex; gap: 20px; }

/* ── Misc ─────────────────────────────────── */
.screen-title { font-size: 2rem; font-weight: 700; margin: 0; }
.gold-display { color: var(--gold); font-weight: 700; }
.block-badge {
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.8rem;
}
.buff-badge {
  background: var(--green);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.75rem;
}
.debuff-badge {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.75rem;
}
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.tooltip {
  position: absolute;
  background: var(--panel-bg);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  max-width: 200px;
  z-index: 200;
  pointer-events: none;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ── Shop Screen ─────────────────────────── */
.shop-screen {
  display: flex; flex-direction: column;
  height: 100%; background: var(--bg);
}
.shop-service {
  transition: transform 0.15s, box-shadow 0.15s;
}
.shop-service:hover {
  transform: translateY(-4px);
  box-shadow: 4px 6px 0 var(--ink);
}

/* ── Damage Preview ──────────────────────── */
.damage-preview {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  z-index: 10;
  animation: bounceIn 0.2s ease-out;
}

/* ── Mobile Responsive ───────────────────── */
body { touch-action: manipulation; }
.card { touch-action: manipulation; }

@media (max-width: 600px) {
  .card {
    width: 80px;
    height: 115px;
  }
  .card-art { font-size: 1.6rem; }
  .card-desc { font-size: 0.65rem; min-height: 30px; padding: 2px 4px; }
  .card-name { font-size: 0.7rem; }
  .card-cost { width: 20px; height: 20px; font-size: 0.8rem; }
  .card::after { inset: 2px; }

  .combat-hand-area { min-height: 145px; }
  .hand-cards { min-height: 130px; }
  .combat-field { padding: 8px; gap: 8px; }
  .enemies-area { gap: 12px; }
  .enemy-figure { width: 60px; height: 60px; font-size: 2rem; }
  .enemy-card { min-width: 80px; }
  .enemy-intent { font-size: 0.7rem; }

  .combat-topbar {
    font-size: 0.9rem;
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .player-figure { width: 55px; height: 55px; font-size: 1.8rem; }
  .energy-orb { width: 45px; height: 45px; font-size: 1.1rem; }
  .pile { width: 45px; height: 65px; }
  .pile-count { font-size: 1.2rem; }
  .end-turn-btn { font-size: 1rem; padding: 6px 14px; }
  .btn { font-size: 1.1rem; padding: 8px 18px; }

  .char-card { width: 140px; }
  .char-figure { height: 100px; font-size: 3rem; }
  .char-name { font-size: 1.1rem; }

  .menu-title { font-size: 2.8rem; }

  .reward-cards { gap: 12px; }
  .card-back { width: 80px; height: 115px; }
  .combat-controls { padding: 0 8px; }
}