/* Adventure mode. Colors, buttons, panels and the top bar come from style.css and td.css */

body.adventure { display: flex; flex-direction: column; height: 100vh; }

.zone-name strong, .zone-name { color: var(--cyan); }
.hp-stat { display: inline-flex; align-items: center; gap: 0.4rem; }
.hp-bar, .battle-hp {
  display: inline-block;
  width: 110px;
  height: 10px;
  background: #2a3570;
  border-radius: 6px;
  overflow: hidden;
}
.hp-bar span, .battle-hp span { display: block; height: 100%; background: #7cff6b; transition: width 0.4s ease, background 0.3s; }
.hp-bar span.low, .battle-hp span.low { background: var(--pink); }
.badges { display: inline-flex; gap: 0.2rem; margin-left: 0.3rem; }
.badges span { filter: grayscale(1); opacity: 0.3; }
.badges span.on { filter: none; opacity: 1; }

/* ---------- The world ---------- */
.world-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#world { display: block; width: 100%; height: 100%; }

.talk {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(680px, 92%);
  padding: 1rem 1.2rem 1.4rem;
  background: var(--panel);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(46, 230, 255, 0.35);
  cursor: pointer;
  animation: popup-in 0.2s ease-out;
}
.talk-text { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.talk-next { position: absolute; right: 0.9rem; bottom: 0.4rem; font-size: 0.75rem; color: var(--text-dim); animation: hint-bob 1s ease-in-out infinite; }
@keyframes popup-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes hint-bob { 50% { transform: translateY(-3px); } }

/* On-screen pad */
.pad {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  opacity: 0.75;
}
.pad button {
  font-size: 1rem;
  color: var(--text);
  background: rgba(14, 21, 56, 0.85);
  border: 2px solid var(--cyan-dim);
  border-radius: 8px;
  cursor: pointer;
  touch-action: none;
}
.pad button:active { background: var(--cyan-dim); }
.pad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.pad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.pad [data-dir="act"] { grid-column: 2; grid-row: 2; font-family: var(--pixel); font-size: 0.7rem; color: var(--bg); background: var(--gold); border-color: var(--gold); border-radius: 50%; }
.pad [data-dir="right"] { grid-column: 3; grid-row: 2; }
.pad [data-dir="down"] { grid-column: 2; grid-row: 3; }
.world-wrap:has(.talk:not([hidden])) .pad { bottom: 9rem; }

/* Touch joystick (adventure.js): only on touch screens, where it replaces the arrow buttons */
.stick { display: none; }
@media (pointer: coarse) {
  .stick {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(14, 21, 56, 0.55);
    border: 3px solid rgba(46, 230, 255, 0.55);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .stick[hidden] { display: none; }
  .stick-knob {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #7ff2ff, var(--cyan) 55%, #1a7f99);
    box-shadow: 0 0 14px rgba(46, 230, 255, 0.6);
    pointer-events: none;
  }
  .stick.active { border-color: var(--cyan); background: rgba(14, 21, 56, 0.7); }
  /* Only the A button stays, bigger, for your other thumb */
  .pad { grid-template-columns: 72px; grid-template-rows: 72px; right: 1.4rem; bottom: 1.6rem; opacity: 0.9; }
  .pad [data-dir]:not(.pad-a) { display: none; }
  .pad .pad-a { grid-column: 1; grid-row: 1; font-size: 1.1rem; touch-action: manipulation; }
  .world-wrap:has(.talk:not([hidden])) .stick { display: none; }
}

/* ---------- Battles ---------- */
.battle {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255, 61, 139, 0.15), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(46, 230, 255, 0.15), transparent 50%),
    linear-gradient(#0b1236, #070b1f);
  animation: battle-in 0.45s ease-out;
}
@keyframes battle-in {
  0% { clip-path: inset(50% 0 50% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.battle.boss-fight { background: radial-gradient(ellipse at 70% 30%, rgba(255, 32, 80, 0.35), transparent 55%), linear-gradient(#1a0510, #070b1f); }

.battle-field { position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; padding: 1rem 2rem; }
.fighter { display: flex; align-items: center; gap: 1.5rem; }
.fighter.enemy { justify-content: flex-end; }
.fighter.player { justify-content: flex-start; }
.card {
  min-width: 230px;
  padding: 0.7rem 1rem;
  background: var(--panel);
  border: 2px solid var(--cyan-dim);
  border-radius: 10px;
}
.card-name { margin: 0 0 0.4rem; font-weight: 800; font-size: 1.05rem; }
.card .battle-hp { width: 100%; height: 12px; }
.hp-text { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--text-dim); text-align: right; }
.type-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--bg);
  background: var(--pink);
  border-radius: 999px;
  vertical-align: middle;
}
.type-tag.me { background: var(--cyan); }

.sprite { display: grid; place-items: center; }
.enemy-sprite {
  font-size: clamp(4rem, 10vw, 6.5rem);
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255, 61, 139, 0.6));
  animation: idle 2s ease-in-out infinite;
}
.boss-fight .enemy-sprite { font-size: clamp(5rem, 13vw, 8rem); filter: drop-shadow(0 0 30px rgba(255, 32, 80, 0.9)); }
.enemy-sprite.enter { animation: enter 0.5s ease-out, idle 2s ease-in-out 0.5s infinite; }
.enemy-sprite.beaten { animation: beaten 0.8s ease-in forwards; }
.enemy-sprite.caught { animation: caught 1s ease-in forwards; }
.enemy-sprite.fled { animation: fled 0.8s ease-in forwards; }
.player-sprite { width: clamp(90px, 14vw, 130px); height: clamp(90px, 14vw, 130px); border-radius: 20px; overflow: hidden; border: 3px solid var(--cyan); }
.sprite.hit { animation: hit 0.45s ease-in-out; }
@keyframes idle { 50% { transform: translateY(-8px); } }
@keyframes enter { from { opacity: 0; transform: translateX(80px) scale(0.6); } }
@keyframes beaten { to { opacity: 0.25; transform: translateY(20px) scale(0.8) rotate(-10deg); filter: grayscale(1); } }
@keyframes caught { 40% { transform: scale(1.2); filter: drop-shadow(0 0 30px #7cff6b); } to { opacity: 0; transform: scale(0.1); } }
@keyframes fled { to { opacity: 0; transform: translateX(120px); } }
@keyframes hit { 20%, 60% { transform: translateX(-10px); filter: brightness(2) drop-shadow(0 0 20px #fff); } 40%, 80% { transform: translateX(10px); } }

.battle-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.8rem;
  padding: 0.8rem 1rem 1rem;
  background: rgba(7, 11, 31, 0.92);
  border-top: 3px solid var(--cyan-dim);
}
@media (max-width: 760px) { .battle-bottom { grid-template-columns: 1fr; } .battle-field { padding: 0.5rem 1rem; } .card { min-width: 0; } }
.battle-log { min-height: 8rem; max-height: 12rem; overflow: hidden; font-size: 0.95rem; line-height: 1.4; }
.battle-log p { margin: 0 0 0.35rem; animation: log-in 0.25s ease-out; }
.battle-log p.attack { color: #ffb3c4; font-weight: 700; }
.battle-log p.good { color: #7cff6b; font-weight: 700; }
.battle-log p.bad { color: #ff6b8a; font-weight: 700; }
.battle-log p.tip { color: var(--gold); }
.battle-log p.question { color: var(--cyan); font-weight: 800; }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } }

.battle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-content: start; }
.battle-actions.answers { grid-template-columns: 1fr; }
.action {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bg-2);
  border: 2px solid var(--cyan-dim);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.2s;
}
.action strong { font-size: 0.95rem; }
.action span { font-size: 0.78rem; color: var(--text-dim); }
.action:hover:not(:disabled), .action:focus-visible { border-color: var(--cyan); box-shadow: 0 0 12px rgba(46, 230, 255, 0.45); transform: translateY(-2px); outline: none; }
.action:disabled { opacity: 0.45; cursor: default; }
.action.help { border-color: rgba(124, 255, 107, 0.5); }
.action.run { border-color: rgba(159, 176, 216, 0.4); }
.action.quarantine { border-color: #7cff6b; background: rgba(124, 255, 107, 0.1); }

/* ---------- Threat Index ---------- */
.index-panel { width: min(760px, 94vw); }
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
.dex-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.3rem;
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 2px solid var(--cyan-dim);
  border-radius: 10px;
  cursor: pointer;
}
.dex-entry:hover, .dex-entry:focus-visible { border-color: var(--cyan); outline: none; }
.dex-entry.caught { border-color: #7cff6b; }
.dex-entry.seen .dex-emoji { filter: grayscale(1) brightness(0.6); }
.dex-entry.unknown { opacity: 0.5; }
.dex-emoji { font-size: 2rem; line-height: 1; }
.dex-name { font-size: 0.78rem; font-weight: 800; text-align: center; }
.dex-detail { margin-top: 0.9rem; padding: 0.8rem 1rem; background: rgba(46, 230, 255, 0.06); border: 2px solid var(--cyan-dim); border-radius: 10px; }
.dex-detail p { margin: 0.3rem 0; }
.dex-title { font-weight: 800; font-size: 1.1rem; }
.dex-weak { color: var(--cyan); font-weight: 700; }
.dex-tip { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .battle, .enemy-sprite, .sprite.hit, .talk, .talk-next, .battle-log p { animation: none; }
}

/* How to play list (same look as the clicker's) */

/* ---------- Rarity ---------- */
.rarity-tag { color: var(--bg); }
.battle-log p.rare { color: var(--gold); font-weight: 800; text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
.enemy-sprite.rarity-rare { filter: drop-shadow(0 0 22px #4db8ff); }
.enemy-sprite.rarity-epic { filter: drop-shadow(0 0 26px #c58bff) drop-shadow(0 0 8px #c58bff); }
.enemy-sprite.rarity-legendary { filter: drop-shadow(0 0 30px #ffd23f) drop-shadow(0 0 10px #fff); animation: enter 0.5s ease-out, idle 2s ease-in-out 0.5s infinite, legendary 1.5s ease-in-out infinite; }
@keyframes legendary { 50% { filter: drop-shadow(0 0 44px #ffd23f) drop-shadow(0 0 16px #fff); } }

/* ---------- Guardians ---------- */
.fighter.player { flex-wrap: wrap; }
.guardian { display: flex; align-items: center; gap: 0.8rem; margin-left: 1rem; }
.guardian .card { min-width: 190px; border-color: rgba(124, 255, 107, 0.5); }
.guardian-sprite { font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; filter: drop-shadow(0 0 14px rgba(124, 255, 107, 0.6)); animation: idle 1.6s ease-in-out infinite; }
.guardian-sprite.tired { filter: grayscale(1); opacity: 0.4; animation: none; }
.sprite.cheer { animation: cheer 0.6s ease-out; }
@keyframes cheer { 30% { transform: translateY(-16px) scale(1.15); } 60% { transform: translateY(0) scale(1); } }
.action em { font-style: normal; font-size: 0.75rem; color: #7cff6b; }
.action.special { border-color: #7cff6b; background: rgba(124, 255, 107, 0.08); }
.action.switch { border-color: rgba(124, 255, 107, 0.4); }
.action.hinted { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 210, 63, 0.8); animation: hinted 0.9s ease-in-out infinite; }
@keyframes hinted { 50% { box-shadow: 0 0 30px rgba(255, 210, 63, 1); } }
@media (max-width: 760px) { .guardian { margin-left: 0; } }

/* ---------- Index: rarity and guardians ---------- */
.dex-section { grid-column: 1 / -1; margin: 0.6rem 0 0; font-family: var(--pixel); font-size: 0.7rem; color: var(--gold); }
.dex-entry { --rarity: var(--cyan-dim); border-color: var(--rarity); }
.dex-entry.caught { border-color: var(--rarity); box-shadow: 0 0 10px color-mix(in srgb, var(--rarity) 45%, transparent); }
.dex-entry.guardian.caught { --rarity: #7cff6b; }
.dex-rarity { font-size: 0.65rem; font-weight: 800; color: var(--rarity); text-transform: uppercase; letter-spacing: 0.05em; }
.dex-entry.unknown .dex-rarity { opacity: 0.6; }
.dex-detail { border-color: var(--rarity, var(--cyan-dim)); }

/* Battles fit smaller windows: the field takes the room it needs and the whole screen scrolls if it must */
.battle { overflow-y: auto; }
.battle-field { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; min-height: 0; }
.fighter.player { align-items: center; row-gap: 0.8rem; }
@media (max-width: 760px), (max-height: 720px) {
  .battle-field { padding: 0.6rem 1rem; gap: 0.6rem; }
  .battle-log { min-height: 5rem; font-size: 0.88rem; }
  .action { padding: 0.4rem 0.6rem; }
  .action span { font-size: 0.72rem; }
  .enemy-sprite { font-size: 3.6rem; }
  .player-sprite { width: 80px; height: 80px; }
  .guardian-sprite { font-size: 2.6rem; }
}

/* ---------- Mythic ---------- */
.enemy-sprite.rarity-mythic { animation: enter 0.5s ease-out, idle 2s ease-in-out 0.5s infinite, mythic 1.2s ease-in-out infinite; filter: drop-shadow(0 0 30px #ff3d6e) drop-shadow(0 0 12px #fff); }
@keyframes mythic { 50% { filter: drop-shadow(0 0 50px #ff3d6e) drop-shadow(0 0 22px #c58bff); } }

/* ---------- Quarantine challenge: 7 right in 30 seconds ---------- */
.battle-actions.catching { grid-template-columns: 1fr 1fr; }
.catch-head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7rem; }
.catch-time { height: 12px; background: #2a3570; border-radius: 6px; overflow: hidden; }
.catch-time span { display: block; height: 100%; background: #7cff6b; transition: width 0.1s linear; }
.catch-time span.low { background: var(--pink); }
#catch-left { font-family: var(--pixel); font-size: 0.8rem; color: var(--gold); min-width: 3ch; }
.catch-dots { display: flex; gap: 0.3rem; }
.catch-dots span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #7cff6b; }
.catch-dots span.on { background: #7cff6b; box-shadow: 0 0 8px #7cff6b; }
.catch-q { grid-column: 1 / -1; margin: 0; font-weight: 800; color: var(--cyan); }
.catch-msg { grid-column: 1 / -1; margin: 0; padding: 0.5rem 0.8rem; font-size: 0.88rem; }
.action.answer { font-weight: 700; font-size: 0.9rem; }
.action.answer.right { border-color: #7cff6b; background: rgba(124, 255, 107, 0.18); opacity: 1; }
.action.answer.wrong { border-color: var(--pink); background: rgba(255, 61, 139, 0.18); opacity: 1; }
@media (max-width: 760px) { .battle-actions.catching { grid-template-columns: 1fr; } }

/* Run button (adventure.js) */
.run-btn.on { color: var(--bg); background: #7cff6b; border-color: #7cff6b; box-shadow: 0 0 12px rgba(124, 255, 107, 0.6); }
.dex-section { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #2a3570; padding-bottom: 0.25rem; }
.dex-count { font-family: var(--body); font-size: 0.8rem; font-weight: 800; color: var(--text-dim); }

/* Stamina bar inside the Sprint button (adventure.js) */
.run-btn { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.stamina { display: block; height: 6px; min-width: 70px; background: #2a3570; border-radius: 4px; overflow: hidden; }
.stamina span { display: block; height: 100%; width: 100%; background: #7cff6b; transition: background 0.2s; }
.stamina span.using { background: var(--gold); }
.stamina span.tired { background: var(--pink); animation: tired-blink 0.5s steps(2) infinite; }
@keyframes tired-blink { 50% { opacity: 0.4; } }
.run-btn.on .stamina { background: rgba(7, 11, 31, 0.5); }

/* ---------- Settings (adventure.js) ---------- */
.settings-panel { width: min(560px, 94vw); }
.settings-head { margin: 1rem 0 0.3rem; font-family: var(--pixel); font-size: 0.75rem; color: var(--cyan); }
.settings-hint { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-dim); }
.controls-table { display: grid; gap: 0.35rem; }
.control-row { display: grid; grid-template-columns: 1fr 7.5rem 7.5rem; align-items: center; gap: 0.5rem; }
.control-name { font-weight: 700; }
.key-btn {
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-2);
  border: 2px solid var(--cyan-dim);
  border-bottom-width: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.key-btn:hover, .key-btn:focus-visible { border-color: var(--cyan); outline: none; }
.key-btn:active { transform: translateY(2px); }
.key-btn.listening { color: var(--bg); background: var(--gold); border-color: var(--gold); animation: listening 0.8s ease-in-out infinite; }
@keyframes listening { 50% { box-shadow: 0 0 14px rgba(255, 210, 63, 0.9); } }
.setting-row { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; font-weight: 700; }
.setting-row strong { color: var(--gold); }
.setting-row input[type="range"] { width: 100%; accent-color: var(--cyan); }
.setting-row.check { flex-direction: row; align-items: center; gap: 0.6rem; font-weight: 600; }
.setting-row.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.fov-hint { display: flex; justify-content: space-between; font-size: 0.75rem; }
@media (max-width: 520px) { .control-row { grid-template-columns: 1fr 5.5rem 5.5rem; } }

/* ---------- Phones: a short top bar ----------
   The full bar wrapped onto 5 rows and covered a third of the screen.
   Here it's 2 rows: buttons on top, then the zone, your data and badges.
   On touch screens Sprint floats above the A button instead, where your thumb is. */
@media (max-width: 760px) {
  body.adventure { height: 100dvh; }
  body.adventure .hud { gap: 0.3rem 0.35rem; padding: 0.35rem 0.5rem; justify-content: flex-start; }
  body.adventure .hud-left, body.adventure .controls { display: contents; }
  body.adventure .hud .btn-small { padding: 0.45rem 0.5rem; font-size: 0.58rem; }
  body.adventure .hud-coder { width: 32px; height: 32px; }
  body.adventure #btn-index { margin-left: auto; }
  body.adventure .stats { order: 1; flex-basis: 100%; justify-content: center; gap: 0.2rem 0.8rem; font-size: 0.8rem; }
  body.adventure .hp-bar { width: 64px; }
  body.adventure #btn-sprint { order: 1; }
  /* Index and Badges show just their icons (the words stay for screen readers, and in the button's tooltip) */
  body.adventure #btn-index { font-size: 0; }
  body.adventure #btn-index::before { content: '📖'; font-size: 0.85rem; margin-right: 0.3rem; }
  body.adventure #index-count { font-size: 0.58rem; }
  body.adventure .stat:has(.badges) { font-size: 0; }
  body.adventure .badges { font-size: 0.8rem; margin-left: 0; }
  body.adventure .zone-name { font-size: 0.75rem; }
}
@media (pointer: coarse) {
  body.adventure #btn-sprint {
    position: fixed;
    right: 1.2rem;
    bottom: calc(1.6rem + 84px);
    z-index: 5;
    padding: 0.55rem 0.6rem 0.8rem;
    font-size: 0.6rem;
    opacity: 0.9;
  }
  body.adventure:has(.battle:not([hidden])) #btn-sprint,
  body.adventure:has(.talk:not([hidden])) #btn-sprint { display: none; }
}