:root {
  --bg-void: #120c0b;
  --bg-panel: #1d1512;
  --bg-panel-raised: #261b16;
  --border: #3a2a22;
  --border-bright: #55392a;
  --text: #f2e9e0;
  --text-dim: #b8a89a;
  --ember: #ff8c42;
  --ember-bright: #ffb066;
  --ember-deep: #c9451c;
  --ash-blue: #8fa3b0;
  --good: #6fbf73;
  --danger: #e05a4e;
  --gold: #d9b23c;
  --curse: #7a5a8a;
  --power: #d9b23c;
  --skill: #6f97b0;
  --attack: #d4553a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; position: fixed;
  background: var(--bg-void); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* pan-y (not none): descendant touch-action is the INTERSECTION with ancestors, so a global `none`
     here would silently block scrolling inside every .screen/.map-wrap even though they declare pan-y.
     overscroll-behavior handles the pull-to-refresh/bounce suppression instead. */
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}

#app {
  position: absolute; inset: 0;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left); padding-right: var(--safe-right);
  display: flex; flex-direction: column;
  overflow: hidden;
}

button {
  font-family: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--border-bright);
  background: var(--bg-panel-raised);
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 15px;
  touch-action: manipulation;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 100%); border-color: var(--ember-deep); color: #1a0e08; font-weight: 700; }
button.danger { border-color: var(--danger); }
button.ghost { background: transparent; }

h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12px; padding-top: calc(12px + var(--safe-top)); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.screen.no-scroll { overflow: hidden; touch-action: none; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; gap: 14px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px 10px; flex-shrink: 0; }
.stat { display: flex; align-items: center; gap: 6px; font-size: 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.stat .icon { font-size: 15px; }
.stat.hp { color: var(--danger); }
.stat.gold { color: var(--gold); }
.stat.ember { color: var(--ember-bright); }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Main menu ---------- */
.title-flame { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 18px var(--ember-deep)); }
.title-text { font-size: 34px; letter-spacing: 2px; color: var(--ember-bright); text-transform: uppercase; }
.subtitle { color: var(--text-dim); font-size: 13px; }

/* ---------- Map ---------- */
.map-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; position: relative; padding: 20px 4px; }
.map-col { display: flex; justify-content: space-around; align-items: center; margin-bottom: 34px; position: relative; }
.map-node { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border-bright); background: var(--bg-panel-raised); display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; z-index: 2; }
.map-node.available { border-color: var(--ember); box-shadow: 0 0 14px rgba(255,140,66,0.5); animation: pulse 1.8s ease-in-out infinite; }
.map-node.visited { opacity: 0.45; }
.map-node.current { border-color: var(--ember-bright); background: var(--ember-deep); }
.map-node.locked { opacity: 0.3; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 8px rgba(255,140,66,0.35); } 50% { box-shadow: 0 0 20px rgba(255,140,66,0.75); } }
svg.map-edges { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-edges line { stroke: var(--border); stroke-width: 2; }

/* ---------- Combat ---------- */
.combat-screen { padding: 8px; padding-top: calc(8px + var(--safe-top)); }
.enemy-row { display: flex; justify-content: center; gap: 14px; padding: 10px 4px; flex-wrap: wrap; min-height: 150px; align-items: flex-end; }
.enemy { width: 100px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.enemy.dead { opacity: 0.15; }
.enemy.targetable { cursor: pointer; }
.enemy-portrait { width: 64px; height: 64px; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #3a2620, #14100e); border: 2px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.enemy.targeting .enemy-portrait { border-color: var(--danger); box-shadow: 0 0 16px var(--danger); }
.enemy-name { font-size: 11px; text-align: center; color: var(--text-dim); }
.hpbar { width: 90px; height: 8px; background: #2a1c17; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.hpbar-fill { height: 100%; background: linear-gradient(90deg, var(--danger), #ff8c66); }
.hp-label { font-size: 10px; color: var(--text-dim); }
.intent { font-size: 16px; background: var(--bg-panel); border-radius: 8px; padding: 2px 6px; border: 1px solid var(--border); }
.status-row { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 100px; }
.status-chip { font-size: 9px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 1px 4px; }

.player-row { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 6px 0; }
.player-portrait { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ember-deep), #1a0e08); border: 2px solid var(--ember-deep); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.player-block-badge { position: absolute; bottom: -4px; right: -4px; background: var(--ash-blue); color: #0c1418; font-size: 11px; font-weight: 700; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-void); }
.playerwrap { position: relative; }

.log-line { font-size: 12px; color: var(--text-dim); text-align: center; min-height: 16px; padding: 2px 0; }

.hand-wrap { flex-shrink: 0; padding: 6px 0 2px; }
.hand {
  display: flex; justify-content: flex-start; gap: 8px; padding: 4px 10px 10px; min-height: 168px;
  align-items: flex-end; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  touch-action: pan-x; overscroll-behavior: contain; scroll-snap-type: x proximity;
}
.card {
  width: 108px; height: 152px; border-radius: 12px; border: 2px solid var(--border-bright);
  background: linear-gradient(160deg, var(--bg-panel-raised), var(--bg-panel));
  display: flex; flex-direction: column; padding: 6px; position: relative;
  flex-shrink: 0; scroll-snap-align: center; transition: transform 0.15s ease;
  touch-action: pan-x;
}
.card.selected { transform: translateY(-12px) scale(1.05); z-index: 5; border-color: var(--ember-bright); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.card.unaffordable { opacity: 0.5; }
.card.type-Attack { border-top: 4px solid var(--attack); }
.card.type-Skill { border-top: 4px solid var(--skill); }
.card.type-Power { border-top: 4px solid var(--power); }
.card-cost { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ember-deep); border: 2px solid var(--ember-bright); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.card-name { font-size: 11px; font-weight: 700; text-align: center; margin-top: 6px; line-height: 1.15; }
.card-body { flex: 1; font-size: 9.5px; color: var(--text-dim); text-align: center; display: flex; align-items: center; justify-content: center; padding: 4px 2px; line-height: 1.25; }
.card-rarity-bar { height: 3px; border-radius: 2px; margin-top: auto; }
.rarity-Starter .card-rarity-bar, .rarity-Common .card-rarity-bar { background: #7d8a99; }
.rarity-Uncommon .card-rarity-bar { background: #5fb0d6; }
.rarity-Rare .card-rarity-bar { background: var(--gold); }
.rarity-Curse .card-rarity-bar { background: var(--curse); }

.combat-actionbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px calc(6px + var(--safe-bottom)); flex-shrink: 0; }
.pile-btn { font-size: 11px; padding: 6px 10px; min-height: 36px; }
.endturn-btn { font-size: 16px; padding: 12px 22px; }

.potion-row { display: flex; gap: 6px; justify-content: center; padding: 4px; }
.potion-slot { width: 40px; height: 40px; border-radius: 10px; border: 1px dashed var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bg-panel); }
.potion-slot.selected { border: 2px solid var(--ember-bright); box-shadow: 0 0 10px var(--ember); }

/* ---------- Reward / Rest / Shop / Event / Treasure ---------- */
.choice-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 0; }
.big-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; min-width: 120px; }
.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.shop-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); }
.shop-item-row:last-child { border-bottom: none; }
.deck-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.deck-mini { font-size: 11px; padding: 6px 8px; border-radius: 8px; background: var(--bg-panel-raised); border: 1px solid var(--border); }

.overlay { position: absolute; inset: 0; background: rgba(10,6,5,0.88); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.overlay-panel { background: var(--bg-panel); border: 1px solid var(--border-bright); border-radius: 14px; padding: 18px; max-width: 340px; max-height: 80vh; overflow-y: auto; }

.pip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

.trial-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.trial-row { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; }
.trial-row.active { background: var(--bg-panel-raised); }

.flame-loader { font-size: 30px; animation: flicker 1.2s infinite; }
@keyframes flicker { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } }

.fx-float { position: absolute; font-weight: 800; font-size: 20px; pointer-events: none; animation: floatup 0.9s ease-out forwards; z-index: 40; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 15% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
.fx-damage { color: var(--danger); }
.fx-block { color: var(--ash-blue); }
.fx-heal { color: var(--good); }
.fx-status { color: var(--ember-bright); }

.toast { position: absolute; bottom: calc(90px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--bg-panel-raised); border: 1px solid var(--border-bright); border-radius: 10px; padding: 8px 14px; font-size: 13px; z-index: 60; animation: toastin 0.25s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 500px) {
  .card { width: 122px; height: 168px; }
  .card-name { font-size: 12px; }
  .card-body { font-size: 10.5px; }
}