/* ISENGRID — meta screens: title, map select (fjord chart), talents
   (constellations), saga codex, hall of fame, run-end overlays.
   Owner: WP-E. ARTBIBLE §8.4/§8.5/§9.7/§9.8. */

/* ── shared screen scaffold ─────────────────────────────────────────────── */
.screen-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px 6px;
}
.screen-head h2 { font-size: 1.6rem; color: var(--gold-lit); }
.head-spacer { flex: 1; }
.back-btn { flex: 0 0 auto; }

/* night-sky backdrop for all meta screens */
#screen-title, #screen-map, #screen-fame, #screen-profile, #screen-codex {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #2e3a59 0%, transparent 55%),
    linear-gradient(180deg, var(--indigo-deep) 0%, var(--night-deep) 100%);
}

/* ── title (§8.4) ───────────────────────────────────────────────────────── */
.title-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
}
.title-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.title-sub {
  font-size: 1rem; color: var(--gold);
  letter-spacing: 0.35em; text-transform: uppercase; font-variant: small-caps;
}
.title-menu { display: flex; flex-direction: column; gap: 9px; min-width: 240px; }
.title-btn { font-size: 1.1rem; padding: 9px 18px; }
.title-auth { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.auth-name { color: var(--snow-base); }
.auth-name.dim { color: var(--snow-shadow); }
.title-version { position: absolute; bottom: 10px; right: 14px; font-size: 0.75rem; color: #5a5570; }

/* ── map select: fjord chart (§8.5) ─────────────────────────────────────── */
.map-screen { display: flex; flex-direction: column; }
.map-body {
  flex: 1; display: flex; gap: 16px; padding: 8px 18px 18px; min-height: 0;
}
.map-chart {
  position: relative; flex: 1.6; min-width: 0;
  border: 2px solid var(--ui-border); border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(26, 20, 48, 0.5);
}
.map-chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* wax-seal medallions */
.medallion {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--gold-deep);
  background: radial-gradient(circle at 35% 30%, #d9c294, #a8906a);
  box-shadow: 0 3px 8px rgba(26, 20, 48, 0.5), inset 0 1px 0 #f0d77b;
  cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.medallion:hover { transform: translate(-50%, -50%) scale(1.12); }
.medallion-glyph { font-size: 19px; color: #5c4a16; text-shadow: 0 1px 0 #f0d77b; }
.medallion.completed {
  border-color: var(--gold);
  background: radial-gradient(circle at 35% 30%, var(--gold-lit), var(--gold));
}
.medallion.completed .medallion-glyph { color: #4a3a08; }
.medallion.current { animation: medal-pulse 1.6s ease-in-out infinite; }
@keyframes medal-pulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(26, 20, 48, 0.5), 0 0 0 0 rgba(255, 179, 71, 0.7); }
  50% { box-shadow: 0 3px 8px rgba(26, 20, 48, 0.5), 0 0 0 9px rgba(255, 179, 71, 0); }
}
.medallion.locked {
  border-color: var(--stone-dark);
  background: radial-gradient(circle at 35% 30%, var(--stone-lit), var(--stone-dark));
  cursor: default; filter: saturate(0.4);
}
.medallion.locked .medallion-glyph { color: #3a332b; }
.medallion.locked::after {
  content: '⛓'; position: absolute; bottom: -7px; right: -5px;
  font-size: 15px; color: var(--snow-shade); text-shadow: 0 1px 1px #1d1822;
}
.medallion.selected { outline: 3px solid var(--amber-focus); outline-offset: 2px; }

/* detail panel */
.map-detail {
  flex: 1; max-width: 360px; min-width: 270px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  align-self: flex-start;
}
.map-name { font-size: 1.45rem; color: var(--gold-lit); }
.map-desc { font-size: 0.92rem; line-height: 1.45; }
.map-meta { display: flex; gap: 14px; color: var(--snow-shade); font-size: 0.9rem; }
.map-best { color: var(--aurora-teal); font-size: 0.88rem; }
.diff-row { display: flex; gap: 6px; }
.diff-chip {
  flex: 1; font: inherit; font-size: 0.88rem; padding: 6px 4px;
  color: var(--parch); cursor: pointer;
  background: linear-gradient(180deg, #463a2e, #352b21);
  border: 1.5px solid var(--ui-border); border-radius: 6px;
}
.diff-chip.active { box-shadow: inset 0 0 0 2px var(--amber-focus); color: var(--gold-lit); }
.diff-chip.locked { opacity: 0.4; cursor: default; }
.start-btn { font-size: 1.15rem; padding: 10px; margin-top: auto; }

/* ── talents: constellations (§8.5) ─────────────────────────────────────── */
.profile-screen { display: flex; flex-direction: column; }
.talent-points { color: var(--gold-lit); font-size: 1rem; }
.constellations {
  flex: 1; display: flex; gap: 14px; padding: 8px 18px 18px; min-height: 0;
}
.constellation {
  position: relative; flex: 1; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--ui-border);
  background: linear-gradient(180deg, var(--indigo-deep), var(--night-deep));
  box-shadow: inset 0 0 60px rgba(26, 20, 48, 0.8);
}
.constellation.tree-bers { box-shadow: inset 0 0 60px rgba(138, 44, 13, 0.25); }
.constellation.tree-voel { box-shadow: inset 0 0 60px rgba(46, 58, 89, 0.55); }
.constellation.tree-seid { box-shadow: inset 0 0 60px rgba(157, 123, 255, 0.18); }
.tree-name {
  position: absolute; top: 8px; left: 0; right: 0; text-align: center;
  font-size: 1.15rem; color: var(--snow-shade); z-index: 2; pointer-events: none;
}
.const-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.talent-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--stone-lit), var(--stone-dark));
  border: 2px solid var(--stone-dark);
  cursor: pointer; padding: 0;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.talent-node .node-core {
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--indigo); transition: background 150ms ease;
}
.talent-node:hover { transform: translate(-50%, -50%) scale(1.18); }
.talent-node.lit { border-color: var(--gold); box-shadow: 0 0 12px #ffc23d99; }
.talent-node.lit .node-core { background: radial-gradient(circle, var(--flame-hot), var(--amber-focus)); }
.talent-node.avail { border-color: var(--aurora-green); animation: node-avail 1.8s ease-in-out infinite; }
.talent-node.avail .node-core { background: #2e4a40; }
@keyframes node-avail {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 217, 163, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(87, 217, 163, 0); }
}

/* note: node buttons must sit relative to the constellation box */
.constellation .talent-node { position: absolute; }

/* ── saga codex (§8.5) ──────────────────────────────────────────────────── */
.codex-screen { display: flex; flex-direction: column; }
.codex-tabs { padding: 0 18px; }
.codex-progress { color: var(--aurora-teal); font-size: 0.95rem; }
.codex-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: 12px 18px 18px;
}
.codex-card {
  min-height: 150px;
  background: var(--parch);
  color: var(--parch-ink);
  border: 2px solid var(--ink-warm); border-radius: 6px;
  box-shadow: inset 0 0 22px var(--parch-dark), 0 3px 8px rgba(26, 20, 48, 0.4);
  padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
.codex-card .codex-glyphs { display: flex; gap: 8px; font-size: 30px; }
.codex-card .codex-glyphs .chip-glyph { font-size: 30px; }
.codex-name {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 1.02rem; line-height: 1.2;
}
.codex-line { font-size: 0.82rem; font-style: italic; color: #5c4a32; line-height: 1.35; }
.codex-card.undiscovered {
  background: linear-gradient(180deg, #2a3142, #232940);
  color: var(--snow-shadow);
  box-shadow: inset 0 0 22px rgba(26, 20, 48, 0.8);
  border-color: var(--ink-cool);
}
.codex-card.undiscovered .codex-line { color: #8a87b3; }
.codex-card.undiscovered .codex-name { color: var(--snow-shade); }

/* ── hall of fame (§8.5) ────────────────────────────────────────────────── */
.fame-screen { display: flex; flex-direction: column; }
.fame-board-label { color: var(--snow-shade); font-size: 0.9rem; }
.fame-table {
  margin: 8px 18px 6px; padding: 10px 12px;
  overflow-y: auto; flex: 1; min-height: 0;
}
.fame-row {
  display: grid;
  grid-template-columns: 64px minmax(120px, 1.4fr) 1fr 0.8fr 0.8fr;
  align-items: center; gap: 10px;
  padding: 6px 10px; margin: 3px 0;
  background: var(--parch); color: var(--parch-ink);
  border: 1px solid var(--parch-dark); border-radius: 5px;
  font-size: 0.92rem;
}
.fame-row.head {
  background: transparent; border-color: transparent; color: var(--snow-shade);
  font-variant: small-caps; font-family: var(--font-flavor); letter-spacing: 0.06em;
}
.fame-row.own { outline: 2px solid var(--amber-focus); box-shadow: 0 0 10px #ffb34755; }
.fame-row.top1 { background: linear-gradient(90deg, #f6e7b8, var(--parch) 60%); position: relative; overflow: hidden; }
.fame-row.top1::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(87, 217, 163, 0.18) 45%, rgba(157, 123, 255, 0.18) 55%, transparent 70%);
  animation: fame-shimmer 4s linear infinite;
}
@keyframes fame-shimmer { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.rank-medal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--stone); font-size: 0.82rem; font-weight: 700;
  background: var(--snow-base);
}
.r1 { border-color: var(--gold); background: radial-gradient(circle at 35% 30%, var(--gold-lit), var(--gold)); }
.r2 { border-color: #9aa2ad; background: radial-gradient(circle at 35% 30%, #e8ecf2, #b6bdc7); }
.r3 { border-color: #9a6b3f; background: radial-gradient(circle at 35% 30%, #d8a87a, #a8744a); }
.fame-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fame-score { text-align: right; font-weight: 600; }
.fame-wave, .fame-badge { text-align: right; color: #6e5b40; font-size: 0.85rem; }
.fame-empty { padding: 22px; text-align: center; color: var(--snow-shadow); }
.fame-empty.bad { color: #ff9d8a; }
.fame-around { margin: 0 18px 16px; }
.fame-around-title {
  font-family: var(--font-flavor); font-variant: small-caps;
  color: var(--snow-shade); margin: 4px 0;
}

/* ── run end: victory scroll / defeat plate (§9.7/§9.8 DOM parts) ───────── */
.run-end { text-align: center; min-width: 340px; }
.run-end.victory-scroll {
  background: var(--parch); color: var(--parch-ink);
  border: 2px solid var(--ink-warm);
  box-shadow: inset 0 0 34px var(--parch-dark), 0 10px 30px rgba(26, 20, 48, 0.6);
  transform-origin: top center;
  animation: scroll-unroll 400ms ease-out;
}
@keyframes scroll-unroll { from { transform: scaleY(0); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
.run-end.victory-scroll .modal-title, .run-end.victory-scroll .end-title { color: var(--gold-deep); }
.run-end.defeat-plate {
  background: linear-gradient(180deg, #2a3142, #1d2430);
  border-color: var(--ink-cool);
  animation: plate-drop 450ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes plate-drop { from { transform: translateY(-26px) scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } }
.end-title {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 2rem; letter-spacing: 0.12em; color: var(--gold-lit);
  margin-bottom: 2px;
}
.defeat-plate .end-title { color: var(--snow-shade); }
.end-flavor { color: var(--snow-shadow); font-size: 0.95rem; margin-bottom: 8px; }
.victory-scroll .end-flavor { color: #5c4a32; }
.end-sub { font-size: 1rem; color: inherit; opacity: 0.75; margin-bottom: 6px; }
.end-lines { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.end-line { display: flex; justify-content: space-between; gap: 24px; font-size: 1rem; }
.end-line.big { font-size: 1.3rem; font-weight: 600; }
.end-line .end-label { opacity: 0.8; }
.end-val.big { color: var(--gold); }
.defeat-plate .end-val.big { color: var(--gold-lit); }
.end-rank { min-height: 1.3em; font-size: 1.05rem; color: var(--aurora-teal); margin: 6px 0; }
.new-best {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  background: var(--gold); color: #241a08; font-weight: 700; font-size: 0.85rem;
  animation: stamp-in 220ms 900ms cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
@keyframes stamp-in { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* confirm dialog inherits .modal */
.confirm .modal-body { color: var(--snow-base); }

/* responsive */
@media (max-width: 1100px) {
  .map-body, .constellations { flex-direction: column; overflow-y: auto; }
  .map-chart { min-height: 340px; flex: none; }
  .constellation { min-height: 360px; flex: none; }
  .map-detail { max-width: none; }
}
@media (max-width: 900px) {
  #screen-game { grid-template-columns: 1fr 240px; }
  .fame-row { grid-template-columns: 48px 1.2fr 1fr 0.7fr 0.7fr; font-size: 0.85rem; }
}