:root {
  color-scheme: dark;
  --night: #070605;
  --black: #0d0a08;
  --panel: rgba(18, 14, 10, 0.86);
  --panel-solid: #15100b;
  --paper: #2a2117;
  --line: rgba(202, 145, 65, 0.42);
  --line-strong: rgba(223, 165, 78, 0.68);
  --soft: rgba(202, 145, 65, 0.18);
  --ink: #f1dfbd;
  --muted: #bba984;
  --dim: #74664b;
  --bronze: #d6a553;
  --moss: #97aa65;
  --aether: #72d5ef;
  --rust: #ca6550;
  --gold: #efcf74;
  --green: #9ac778;
  --shadow: 0 24px 80px rgba(0, 0, 0, .52);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; }
html, body { overflow: hidden; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 28% 14%, rgba(111, 183, 134, .10), transparent 26%),
    radial-gradient(circle at 70% 18%, rgba(114, 213, 239, .10), transparent 24%),
    linear-gradient(180deg, #15100c 0%, #090706 52%, #050403 100%);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 223, 157, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 223, 157, .023) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 35%, black 0%, rgba(0,0,0,.55) 48%, transparent 84%);
}
button { font: inherit; color: inherit; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { color: var(--bronze); line-height: 1.08; }
h1 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.35rem); letter-spacing: .04em; }
h2 { margin: 0 0 .4rem; font-size: clamp(1.35rem, 2vw, 2rem); }
h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
p { color: var(--muted); line-height: 1.45; }
strong { color: var(--ink); }
small { color: var(--muted); }

.game {
  width: 100vw;
  height: 100vh;
  padding: 14px;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  gap: 12px;
  isolation: isolate;
}
.top-hud,
.world,
.panel,
.route-card,
.drawer,
.toast-report {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(27, 21, 14, .92), rgba(9, 8, 6, .95));
  box-shadow: var(--shadow);
}
.top-hud {
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 260px minmax(250px, 1fr) minmax(360px, 640px) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  overflow: hidden;
}
.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.sigil,
.hero-token,
.kin-sigil {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(214, 165, 83, .74);
  display: grid;
  place-items: center;
  color: var(--bronze);
  background:
    radial-gradient(circle at 40% 35%, rgba(239,207,116,.20), transparent 36%),
    radial-gradient(circle, rgba(114,213,239,.10), rgba(0,0,0,.28));
  box-shadow: inset 0 0 18px rgba(214,165,83,.12), 0 0 22px rgba(0,0,0,.26);
  flex: 0 0 auto;
}
.kicker,
.eyebrow {
  color: var(--aether);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .65rem;
  font-weight: 800;
}
.brand .kicker { margin: 0 0 3px; }
.brand p { margin: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.route-meter {
  min-width: 0;
  border: 1px solid var(--soft);
  border-radius: 17px;
  padding: 9px 12px;
  background: rgba(0,0,0,.26);
}
.meter-line,
.stat-line,
.section-head,
.card-head,
.skill-row-head,
.drawer-head,
.fossil-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.meter-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter-line small { white-space: nowrap; }
.progress {
  height: 10px;
  border: 1px solid rgba(214, 165, 83, .42);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  overflow: hidden;
}
.route-meter .progress { margin-top: 8px; }
.progress.big { height: 14px; margin-top: 14px; }
.progress.small { height: 7px; margin: 8px 0 5px; }
.fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--moss), var(--aether));
  box-shadow: 0 0 12px rgba(114,213,239,.3);
}
.resources-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.resource-pill {
  border: 1px solid var(--soft);
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  padding: 8px 9px;
  min-width: 0;
}
.resource-pill span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resource-pill strong { font-size: 1rem; }
.hud-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.nav-button,
.primary,
.secondary,
.danger {
  border: 1px solid var(--line);
  background: rgba(10, 8, 6, .72);
  border-radius: 13px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nav-button:hover,
.primary:hover,
.secondary:hover,
.danger:hover { transform: translateY(-1px); border-color: var(--aether); }
.primary { border-color: rgba(114,213,239,.70); color: var(--aether); background: rgba(114,213,239,.10); }
.secondary { color: var(--bronze); }
.danger { color: #ffb0a1; border-color: rgba(202,101,80,.65); background: rgba(202,101,80,.10); }
.nav-button.active { border-color: rgba(114,213,239,.85); color: var(--aether); background: rgba(114,213,239,.12); }

.world {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) minmax(260px, 340px);
  grid-template-rows: minmax(0, 1fr) 176px;
  gap: 14px;
  padding: 14px;
}
.world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 42% 18%, rgba(114,213,239,.13), transparent 22%),
    radial-gradient(circle at 64% 40%, rgba(154,199,120,.13), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.70));
}
.scene {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  position: relative;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(214, 165, 83, .38);
  background: #0b0907;
  box-shadow: inset 0 0 70px rgba(0,0,0,.48), 0 26px 70px rgba(0,0,0,.42);
}
.scene-bg,
.scene-fog,
.scene-ground,
.scene-relic,
.scene-campfire,
.scene-silhouette,
.reward-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-bg {
  background:
    radial-gradient(circle at 72% 24%, rgba(114,213,239,.16), transparent 10%),
    radial-gradient(circle at 28% 36%, rgba(202,145,65,.12), transparent 20%),
    linear-gradient(180deg, #111926 0%, #15100c 45%, #070504 100%);
}
.scene[data-route="chop-bramblewood"] .scene-bg {
  background:
    radial-gradient(circle at 22% 18%, rgba(151,170,101,.22), transparent 22%),
    radial-gradient(circle at 75% 25%, rgba(114,213,239,.12), transparent 14%),
    linear-gradient(180deg, #101611 0%, #16120b 47%, #060504 100%);
}
.scene[data-route="mine-weathered-stone"] .scene-bg {
  background:
    radial-gradient(circle at 72% 20%, rgba(114,213,239,.12), transparent 18%),
    radial-gradient(circle at 38% 38%, rgba(136,131,117,.20), transparent 24%),
    linear-gradient(180deg, #11131a 0%, #16120d 48%, #060504 100%);
}
.scene[data-route="fish-murkstream"] .scene-bg {
  background:
    radial-gradient(circle at 66% 16%, rgba(114,213,239,.20), transparent 18%),
    linear-gradient(180deg, #0c1620 0%, #101014 46%, #050608 100%);
}
.scene[data-route="gather-wild-herbs"] .scene-bg {
  background:
    radial-gradient(circle at 35% 20%, rgba(151,170,101,.22), transparent 20%),
    radial-gradient(circle at 68% 26%, rgba(114,213,239,.10), transparent 13%),
    linear-gradient(180deg, #11170f 0%, #17110c 48%, #050504 100%);
}
.scene-fog {
  opacity: .55;
  background:
    radial-gradient(ellipse at 20% 72%, rgba(188,198,165,.14), transparent 28%),
    radial-gradient(ellipse at 74% 64%, rgba(114,213,239,.10), transparent 24%),
    linear-gradient(90deg, transparent, rgba(239,223,189,.035), transparent);
  animation: drift 9s ease-in-out infinite alternate;
}
.scene-ground {
  top: auto;
  height: 34%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(202,145,65,.13), transparent 70%),
    linear-gradient(180deg, transparent, #060403 38%, #030202 100%);
}
.scene-relic::before {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  right: 12%;
  top: 15%;
  border: 1px solid rgba(114,213,239,.36);
  box-shadow: 0 0 36px rgba(114,213,239,.16), inset 0 0 28px rgba(114,213,239,.08);
  background: radial-gradient(circle, rgba(114,213,239,.12), rgba(0,0,0,.03));
}
.scene-campfire::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 44px;
  left: 16%;
  bottom: 23%;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 65%, #ffd67a 0 10%, #d66b37 32%, transparent 66%);
  filter: blur(.3px);
  animation: flicker .85s infinite alternate;
  box-shadow: 0 0 22px rgba(214,107,55,.52);
}
.scene-campfire::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 10px;
  left: calc(16% - 20px);
  bottom: 21%;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
}
.scene-silhouette::before,
.scene-silhouette::after {
  content: "";
  position: absolute;
  bottom: 28%;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(214,165,83,.10);
  filter: blur(.1px);
}
.scene-silhouette::before {
  width: 120px;
  height: 170px;
  left: 9%;
  clip-path: polygon(50% 0, 70% 35%, 95% 100%, 4% 100%, 30% 35%);
}
.scene-silhouette::after {
  width: 240px;
  height: 110px;
  right: 12%;
  clip-path: polygon(0 100%, 10% 48%, 17% 100%, 25% 32%, 37% 100%, 48% 18%, 59% 100%, 69% 38%, 80% 100%, 90% 50%, 100% 100%);
}
.scene[data-route="mine-weathered-stone"] .scene-silhouette::after { clip-path: polygon(0 100%, 12% 40%, 25% 64%, 37% 24%, 52% 100%, 66% 28%, 82% 70%, 100% 100%); }
.scene[data-route="fish-murkstream"] .scene-ground { height: 42%; background: linear-gradient(180deg, transparent, rgba(12,32,45,.58) 22%, #030506 100%); }
.scene[data-route="fish-murkstream"] .scene-silhouette::after { height: 40px; bottom: 31%; clip-path: ellipse(48% 44% at 50% 50%); opacity: .45; }
.scene[data-route="gather-wild-herbs"] .scene-silhouette::after { clip-path: polygon(0 100%, 6% 58%, 14% 100%, 22% 44%, 30% 100%, 41% 55%, 49% 100%, 62% 36%, 69% 100%, 78% 50%, 86% 100%, 94% 56%, 100% 100%); }

.stage-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border: 1px solid rgba(214,165,83,.48);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(17,13,9,.86), rgba(5,5,4,.83));
  backdrop-filter: blur(7px);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
}
.stage-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.stage-title h2 { margin-bottom: 4px; }
.stage-title p { max-width: 800px; margin-bottom: 0; }
.route-rune {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(114,213,239,.46);
  color: var(--aether);
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(114,213,239,.08);
  flex: 0 0 auto;
}
.reward-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.reward-badge,
.goal-chip,
.tiny-badge {
  border: 1px solid var(--soft);
  background: rgba(0,0,0,.32);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  font-size: .88rem;
}
.reward-badge strong,
.goal-chip strong { color: var(--ink); }

.panel {
  min-width: 0;
  min-height: 0;
  border-radius: 20px;
  padding: 15px;
  box-shadow: none;
  overflow: hidden;
}
.panel p { margin-bottom: 0; }
.left-stack,
.right-stack {
  min-height: 0;
  display: grid;
  gap: 12px;
}
.left-stack { grid-column: 1 / 2; grid-row: 1 / 2; grid-template-rows: auto auto minmax(0, 1fr); }
.right-stack { grid-column: 3 / 4; grid-row: 1 / 2; grid-template-rows: auto minmax(0, 1fr); }
.hero-summary {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hero-token { width: 54px; height: 54px; font-size: 1.55rem; }
.compact-stat { margin-top: 12px; display: grid; gap: 7px; }
.stat-line { border-top: 1px solid var(--soft); padding-top: 8px; color: var(--muted); }
.stat-line strong { color: var(--ink); }
.goals { display: grid; gap: 8px; margin-top: 12px; }
.goal {
  border: 1px solid rgba(214,165,83,.18);
  border-radius: 13px;
  padding: 9px 10px;
  background: rgba(0,0,0,.25);
}
.goal.done { border-color: rgba(151,199,120,.45); background: rgba(151,199,120,.08); }
.goal-title { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); }
.goal small { display: block; margin-top: 2px; }
.upgrades { display: grid; gap: 8px; margin-top: 12px; }
.upgrade-slot {
  border: 1px dashed rgba(214,165,83,.28);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,.18);
}
.upgrade-slot.open { border-style: solid; border-color: rgba(114,213,239,.45); background: rgba(114,213,239,.07); }
.kin-sigil { width: 70px; height: 70px; font-size: 2rem; margin-bottom: 11px; }
.kin-panel .kin-sigil.locked { filter: grayscale(1); opacity: .72; }
.kin-panel h3 { font-size: 1.2rem; }
.kin-panel .primary { width: 100%; margin-top: 12px; }
.log-list,
.drawer-body {
  overflow: auto;
  scrollbar-color: rgba(214,165,83,.55) rgba(0,0,0,.12);
}
.log-list { max-height: 100%; display: grid; gap: 8px; padding-right: 4px; }
.log-line {
  border: 1px solid rgba(214,165,83,.20);
  border-radius: 12px;
  padding: 8px 9px;
  color: var(--muted);
  background: rgba(0,0,0,.22);
  line-height: 1.3;
}
.log-line:first-child { color: var(--ink); border-color: rgba(114,213,239,.42); background: rgba(114,213,239,.07); }

.route-dock {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.route-card {
  min-width: 0;
  border-radius: 20px;
  padding: 14px;
  box-shadow: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.route-card:hover { transform: translateY(-2px); border-color: rgba(114,213,239,.62); }
.route-card.active { border-color: rgba(114,213,239,.90); background: linear-gradient(145deg, rgba(114,213,239,.13), rgba(12,10,8,.94)); }
.route-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,165,83,.48);
  color: var(--bronze);
  font-size: 1.55rem;
  background: rgba(0,0,0,.26);
}
.route-card h3 { margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-card p { margin: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-card small { display: block; margin-top: 5px; color: var(--aether); }

.reward-pop {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 46%);
  z-index: 8;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
  animation: rewardFloat 1.55s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}
.reward-pop.rare { color: var(--aether); font-size: 1.1rem; }
.toast-report {
  position: absolute;
  z-index: 12;
  top: 102px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 44px));
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(34,25,14,.97), rgba(8,8,6,.97));
}
.toast-report .primary { margin-top: 10px; }

.drawer {
  position: absolute;
  z-index: 10;
  inset: 96px 28px 204px 28px;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  background: linear-gradient(145deg, rgba(31,24,16,.98), rgba(8,7,6,.98));
}
.drawer.hidden { display: none; }
.drawer-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--soft);
}
.drawer-head p { margin: 0; }
.drawer-body { padding: 18px; min-height: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.full-card {
  border: 1px solid var(--soft);
  border-radius: 18px;
  padding: 16px;
  background: rgba(0,0,0,.24);
}
.route-full {
  min-height: 210px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.route-full .route-icon { width: 58px; height: 58px; }
.route-full.active { border-color: rgba(114,213,239,.72); background: rgba(114,213,239,.08); }
.skill-card .progress,
.fossil-card .progress { margin-top: 8px; }
.fossil-card.locked { opacity: .74; }
.fossil-card .kin-sigil { margin: 0; width: 64px; height: 64px; }
.tier { color: var(--bronze); }
.tier.silver { color: #d8d8d8; }
.tier.gold { color: var(--gold); }
.tier.aether { color: var(--aether); }
.settings-grid { max-width: 760px; display: grid; gap: 14px; }
textarea.save-text {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid var(--soft);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(0,0,0,.28);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@keyframes drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@keyframes flicker { from { transform: scaleY(.88) translateY(2px); opacity: .78; } to { transform: scaleY(1.12) translateY(-1px); opacity: 1; } }
@keyframes rewardFloat {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.92); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -76px) scale(1.06); }
}

@media (max-width: 1180px) {
  .game { padding: 10px; grid-template-rows: auto minmax(0, 1fr); }
  .top-hud { grid-template-columns: 1fr; align-items: stretch; }
  .hud-actions { justify-content: stretch; flex-wrap: wrap; }
  .hud-actions button { flex: 1 1 auto; }
  .world { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr) auto auto; overflow: auto; }
  .left-stack, .scene, .right-stack, .route-dock { grid-column: 1; grid-row: auto; }
  .left-stack, .right-stack { grid-template-columns: 1fr; }
  .route-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer { inset: 92px 16px 24px; }
}
@media (max-width: 760px) {
  html, body { overflow: auto; }
  .game { height: auto; min-height: 100vh; }
  .resources-strip, .route-dock, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .world { min-height: 980px; }
  .stage-title { display: block; }
  .route-rune { margin-bottom: 10px; }
  .scene { min-height: 430px; }
  .drawer { position: fixed; inset: 10px; }
}