/* ARCHWOLF — moonlit terminal-grimoire. */

:root {
  /* Numbers wear a proportional face: monospace cells pad each superscript
     glyph to full width, so 10¹¹ gets a gap between the ones. */
  --numfont: "DejaVu Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --bg: #0a0d18;
  --bg2: #0f1424;
  --panel: #131a2e;
  --panel2: #1a2240;
  --line: #2a3458;
  --ink: #c9d4ef;
  --dim: #7d89ad;
  --moon: #b8c7e8;
  --silver: #e8eeff;
  --gold: #e8c170;
  --moonlight: #8fd5e8;
  --sigil: #c792ea;
  --aether: #ee6ba8;
  --good: #7ee084;
  --bad: #e07a7a;
  --rival: #d8b46a;
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background:
    radial-gradient(1px 1px at 12% 22%, #ffffff55 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, #ffffff44 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 70%, #ffffff33 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 48%, #ffffff4a 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 80%, #ffffff3c 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 90%, #ffffff30 50%, transparent 51%),
    radial-gradient(ellipse at 70% -10%, #1b2342 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ------------------------------------------------------------- top bar */
#topbar {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(180deg, var(--bg2), transparent);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#title { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.22em; color: var(--silver); font-size: 1.12rem; white-space: nowrap; }
#title .subtitle { letter-spacing: 0.04em; color: var(--dim); font-size: 0.72rem; font-style: italic; margin-left: 0.6rem; }
#mana-block { display: flex; align-items: baseline; gap: 0.7rem; }
#mana { font-family: var(--numfont); font-size: 1.35rem; color: var(--silver); min-width: 9ch; }
#mana.bump { animation: bump 0.35s ease-out; }
@keyframes bump { 0% { transform: scale(1.18); color: var(--gold); } 100% { transform: scale(1); } }
#mana-rate { color: var(--dim); font-family: var(--numfont); font-size: 0.85rem; }
#currencies { display: flex; gap: 0.9rem; margin-left: auto; font-family: var(--numfont); font-size: 0.85rem; flex-wrap: wrap; }
.chip { display: none; align-items: baseline; gap: 0.35rem; }
.chip.show { display: flex; }
.chip .label { color: var(--dim); font-size: 0.72rem; }
.chip.arcana .val { color: var(--gold); }
.chip.moonlight .val { color: var(--moonlight); }
.chip.sigils .val { color: var(--sigil); }
.chip.aether .val { color: var(--aether); }
.chip.laurels .val { color: var(--good); }
.chip.insight .val { color: #f5e08a; }

/* the ladder */
#ord-score {
  font-family: Georgia, 'Times New Roman', serif; font-size: 2.6rem;
  color: var(--silver); text-align: center; margin: 0.8rem 0 0.2rem;
  min-height: 3.2rem; letter-spacing: 0.04em;
}
#ord-score.absorbed { opacity: 0.45; font-size: 1.6rem; }
#ord-caption { text-align: center; color: var(--dim); font-size: 0.78rem; font-style: italic; margin-bottom: 0.8rem; }
.climb-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 0.6rem 0; }
.rung-card {
  max-width: 430px; margin: 0.8rem auto; padding: 0.8rem 1rem;
  background: var(--panel2); border: 1px solid #3b4a80; border-radius: 10px;
}
.rung-card .idea { color: var(--moonlight); font-style: italic; font-size: 0.85rem; margin: 0.3rem 0; }
.believe-card {
  max-width: 460px; margin: 0.8rem auto; padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, #efe9d7, #ddd5bd); color: #3b3424;
  border-radius: 6px; font-family: Georgia, serif; box-shadow: 0 4px 14px #00000066;
}
.believe-card .sym { font-size: 2rem; text-align: center; margin: 0.4rem 0; }
.believe-card .axiom { font-size: 0.85rem; font-style: italic; }
.believed-row { text-align: center; font-size: 1.3rem; letter-spacing: 0.3em; color: var(--sigil); margin: 0.5rem 0; }

/* ------------------------------------------------------------- columns */
#cols { display: flex; flex: 1; min-height: 0; }
#left {
  width: 240px; min-width: 240px; padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.7rem; align-items: center;
  border-right: 1px solid var(--line);
  background: linear-gradient(200deg, #11182d 0%, transparent 70%);
}
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#logcol {
  width: 330px; min-width: 280px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #0d1222 0%, transparent 60%);
}

/* ------------------------------------------------------------- shrine */
#wolf-shrine { position: relative; width: 190px; height: 150px; }
#wolf-shrine svg { width: 100%; height: 100%; }
#wolf-shrine .nose { cursor: pointer; }
#wolf-shrine .moon-disc { transform-origin: 138px 38px; animation: moonbreathe 9s ease-in-out infinite; }
@keyframes moonbreathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

#focus {
  width: 100%; padding: 0.9rem 0; font-size: 1.05rem; letter-spacing: 0.3em;
  font-family: Georgia, serif; color: var(--silver);
  background: linear-gradient(180deg, #232f56, #182040);
  border: 1px solid #3b4a80; border-radius: 8px; cursor: pointer;
  transition: transform 0.05s ease-out, box-shadow 0.2s;
  user-select: none; -webkit-user-select: none;
}
#focus:hover { box-shadow: 0 0 18px #3b4a8088; }
#focus:active { transform: scale(0.97); }
#focus .sub { display: block; font-size: 0.65rem; letter-spacing: 0.1em; color: var(--dim); margin-top: 0.2rem; font-family: ui-sans-serif, system-ui, sans-serif; }

#combo-bar { width: 100%; height: 7px; background: var(--panel); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
#combo-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4a5d9e, var(--moonlight)); transition: width 0.1s linear; }
#combo-bar.surging #combo-fill { background: linear-gradient(90deg, var(--gold), #fff3c4); }

#spellbar { width: 100%; display: flex; flex-direction: column; gap: 0.45rem; overflow-y: auto; }
.spell {
  position: relative; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  overflow: hidden;
}
.spell .nm { font-size: 0.86rem; color: var(--silver); }
.spell .meta { font-size: 0.7rem; color: var(--dim); margin-top: 0.15rem; }
.spell .cdsweep { position: absolute; inset: 0; background: #0a0d18aa; transform-origin: left; pointer-events: none; }
.spell.ready { border-color: #46598f; box-shadow: 0 0 10px #2c3a6b66; }
.spell.tx.ready { border-left: 3px solid var(--gold); box-shadow: 0 0 12px #8a743f55; }
.spell.tx.ready .nm { color: var(--gold); }
.spell.active-fx { border-color: var(--gold); box-shadow: 0 0 12px #e8c17055; }
.spell:disabled { cursor: default; opacity: 0.85; }
.spell .auto-toggle { position: absolute; top: 4px; right: 6px; font-size: 0.62rem; color: var(--dim); cursor: pointer; }
.spell .auto-toggle.on { color: var(--good); }

/* ------------------------------------------------------------- tabs */
#tabs {
  display: flex; gap: 0.15rem; padding: 0.5rem 0.8rem 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.tab {
  padding: 0.42rem 0.85rem; border: 1px solid transparent; border-bottom: none;
  border-radius: 7px 7px 0 0; cursor: pointer; color: var(--dim);
  background: transparent; font-size: 0.86rem; position: relative;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--silver); background: var(--panel); border-color: var(--line); }
.tab.fresh::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

#panel { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 3rem; }

/* ------------------------------------------------------------- shared bits */
h2.panel-title { font-family: Georgia, serif; font-weight: normal; letter-spacing: 0.12em; color: var(--silver); margin: 0.2rem 0 0.3rem; font-size: 1.05rem; }
.panel-blurb { color: var(--dim); font-size: 0.82rem; margin-bottom: 1rem; font-style: italic; max-width: 60ch; }
button.act {
  background: linear-gradient(180deg, #20294b, #161d38);
  color: var(--ink); border: 1px solid #34406e; border-radius: 6px;
  padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.84rem;
}
button.act:hover:not(:disabled) { border-color: #4d5da0; color: var(--silver); }
button.act:disabled { opacity: 0.38; cursor: default; }
button.act.big { padding: 0.7rem 1.4rem; font-size: 1rem; font-family: Georgia, serif; letter-spacing: 0.15em; }
button.act.danger { border-color: #7a3a3a; }
.cost { font-family: var(--numfont); font-size: 0.8rem; }
.cost.can { color: var(--good); }
.cost.cant { color: var(--bad); }
.mono { font-family: ui-monospace, monospace; }
.dimtext { color: var(--dim); font-size: 0.8rem; }
.flavor { color: var(--dim); font-style: italic; font-size: 0.76rem; }

/* familiars */
.fam-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.3rem 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.6rem 0.9rem; margin-bottom: 0.55rem; align-items: center;
}
.fam-row.locked { opacity: 0.45; }
.fam-row .nm { color: var(--silver); font-size: 0.95rem; }
.fam-row .owned { font-family: var(--numfont); color: var(--moon); font-size: 1.05rem; text-align: right; }
.fam-row .stats { grid-column: 1; color: var(--dim); font-size: 0.75rem; font-family: var(--numfont); }
.fam-row .buys { grid-column: 2 / 4; display: flex; gap: 0.4rem; justify-content: flex-end; }
.fam-row .flavor { grid-column: 1 / 4; }
.fam-row .ms { color: var(--moonlight); }

/* upgrade grids (grimoire/moon/rite) */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.6rem; }
.node {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.6rem 0.75rem; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 0.3rem; text-align: left; color: var(--ink);
}
.node:hover:not(.owned):not(.locked) { border-color: #4d5da0; }
.node .nm { color: var(--silver); font-size: 0.88rem; }
.node .desc { font-size: 0.76rem; color: var(--ink); }
.node.owned { border-color: #3a5e46; background: #14241c33; cursor: default; }
.node.owned::after { content: '✓'; position: absolute; top: 6px; right: 9px; color: var(--good); }
.node.locked { opacity: 0.45; cursor: default; }
.node.excluded { opacity: 0.35; cursor: default; border-style: dashed; }

/* contest */
#contest-stage { max-width: 620px; }
.card-table { display: flex; gap: 1.2rem; margin: 1rem 0; flex-wrap: wrap; }
.index-card {
  flex: 1; min-width: 220px; min-height: 130px; border-radius: 6px;
  background: linear-gradient(180deg, #efe9d7, #ddd5bd);
  color: #3b3424; padding: 0.7rem 0.9rem; position: relative;
  box-shadow: 0 4px 14px #00000066;
  font-family: Georgia, serif;
}
.index-card .who { font-size: 0.7rem; letter-spacing: 0.18em; color: #8a7f63; }
.index-card .num { font-size: 1.55rem; margin-top: 1.4rem; text-align: center; word-break: break-all; font-family: var(--numfont); }
.index-card.rival { background: linear-gradient(180deg, #e3d9c2, #cdc2a4); transform: rotate(-1.2deg); }
.index-card.yours { transform: rotate(0.8deg); }
.index-card .lines { position: absolute; inset: 2.4rem 0.9rem auto; height: 1px; background: #b3a888; }
#contest-timer { font-family: ui-monospace, monospace; font-size: 2rem; color: var(--gold); text-align: center; }
#contest-timer.low { color: var(--bad); animation: pulse 0.5s infinite; }

/* engine */
.dial-row { display: flex; gap: 0.4rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.dial-row .dial-label { width: 11rem; color: var(--dim); font-size: 0.8rem; }
.dial-btn { width: 2.3rem; height: 2.3rem; border-radius: 50%; }
.dial-btn.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 9px #e8c17044; }
#engine-bar { height: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0.6rem 0; max-width: 430px; }
#engine-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7a3f73, var(--aether)); }

/* wood */
.dens { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.den {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.55rem 0.7rem; min-height: 7.2rem; position: relative;
}
.den .nm { color: var(--silver); font-size: 0.88rem; }
.den .steps { font-family: var(--numfont); color: var(--moon); font-size: 1rem; }
.den .tape { font-family: ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--moonlight); white-space: nowrap; overflow: hidden; margin: 0.3rem 0; }
.den .status { font-size: 0.72rem; color: var(--dim); }
.den.halted { border-color: #3a5e46; }
.den.halted .status { color: var(--good); }
.den.looping { border-color: #5e3a3a; opacity: 0.8; }
.den.looping .status { color: var(--bad); }
.den.champion { border-color: var(--gold); box-shadow: 0 0 14px #e8c17033; }
.den.empty { display: flex; align-items: center; justify-content: center; color: var(--dim); font-style: italic; font-size: 0.8rem; }
.den .cull { position: absolute; bottom: 6px; right: 8px; }

/* log */
#log-head { padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 0.72rem; letter-spacing: 0.18em; }
#log { flex: 1; overflow-y: auto; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.log-line { font-size: 0.83rem; line-height: 1.45; animation: fadein 0.4s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.log-line.story { color: var(--ink); }
.log-line.sys { color: var(--dim); font-size: 0.78rem; }
.log-line.event { color: var(--gold); }
.log-line.rival { color: var(--rival); font-style: italic; }
.taunt-line { color: var(--rival); font-style: italic; font-size: 0.83rem; line-height: 1.45; max-width: 60ch; }
.log-line.fmt { color: var(--moonlight); font-family: ui-monospace, monospace; font-size: 0.76rem; }
.log-line .cursor { display: inline-block; width: 0.5em; background: var(--moon); animation: pulse 0.8s infinite; height: 0.9em; vertical-align: baseline; }

/* modals */
#modal-root:not(:empty) {
  position: fixed; inset: 0; background: #060912cc; display: flex;
  align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: var(--panel2); border: 1px solid #3b4a80; border-radius: 10px;
  max-width: 560px; width: calc(100vw - 3rem); max-height: 80vh; overflow-y: auto;
  padding: 1.3rem 1.5rem; box-shadow: 0 12px 60px #000000aa;
}
.modal h3 { margin: 0 0 0.7rem; font-family: Georgia, serif; font-weight: normal; letter-spacing: 0.1em; color: var(--silver); }
.modal .row { display: flex; gap: 0.6rem; margin-top: 1rem; justify-content: flex-end; }
.modal textarea { width: 100%; height: 7rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 0.7rem; padding: 0.5rem; }

/* fx */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

.float-text {
  position: fixed; pointer-events: none; z-index: 60;
  font-family: var(--numfont); font-weight: 600;
  font-size: 0.92rem; color: var(--moon);
  text-shadow: 0 1px 8px #000000cc;
  animation: floatUp 0.9s ease-out forwards;
  transform: translate(-50%, 0);
  white-space: nowrap;
}
.float-text.big { font-size: 1.35rem; color: var(--gold); animation-duration: 1.25s; }
.float-text.huge { font-size: 1.9rem; color: var(--gold); font-family: Georgia, serif; animation-duration: 1.6s; }
.float-text.insight { color: #f5e08a; }
.float-text.ord { color: var(--sigil); font-family: Georgia, serif; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  12% { opacity: 1; transform: translate(-50%, -10px) scale(1.08); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -76px) scale(1); }
}

#screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 55; opacity: 0; }
#screen-flash.on { animation: screenflash 0.55s ease-out; }
@keyframes screenflash { 0% { opacity: 0.22; } 100% { opacity: 0; } }

.shake-1 { animation: shake1 0.28s ease-out; }
.shake-2 { animation: shake2 0.5s ease-out; }
@keyframes shake1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 1px); }
}
@keyframes shake2 {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(5px, -3px); } 30% { transform: translate(-5px, 3px); }
  45% { transform: translate(4px, 2px); } 60% { transform: translate(-3px, -3px); } 80% { transform: translate(2px, 1px); }
}

.fx-pop { animation: fxpop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fxpop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.ms-flash { animation: msflash 1.1s ease-out; }
@keyframes msflash {
  0% { border-color: var(--gold); box-shadow: 0 0 22px #e8c17088; }
  100% { border-color: var(--line); box-shadow: none; }
}

button.act { transition: transform 0.07s ease-out, border-color 0.15s, box-shadow 0.2s; }
button.act:hover:not(:disabled) { transform: translateY(-1px); }
button.act:active:not(:disabled) { transform: scale(0.96); }
/* (Hot panels render via lit-html — node identity is stable, so hover,
   transitions, and tooltips behave; no special-casing needed.) */
.node { transition: transform 0.08s ease-out, border-color 0.15s; }
.node:hover:not(:disabled):not(.owned):not(.locked) { transform: translateY(-1px); }
.node:active:not(:disabled) { transform: scale(0.97); }

 }

@media (prefers-reduced-motion: reduce) {
  .shake-1, .shake-2 { animation: none; }
  .float-text { animation-duration: 0.45s; }
  #screen-flash.on { animation: none; }
}
body.howl-pulse #app { animation: howlpulse 0.45s ease-out; }
@keyframes howlpulse { 0% { filter: brightness(1.35) saturate(1.2); } 100% { filter: none; } }

/* finale */
#finale-card {
  margin: 1.2rem auto; max-width: 430px; min-height: 200px;
  background: linear-gradient(177deg, #f2ecd9, #d9d0b5);
  color: #2e2817; border-radius: 6px; padding: 1rem 1.2rem;
  font-family: Georgia, serif; box-shadow: 0 8px 40px #000000aa;
  position: relative;
}
#finale-card .num { font-size: 2rem; text-align: center; margin-top: 2.2rem; font-family: var(--numfont); word-break: break-all; }
#finale-card .runes { position: absolute; top: 0.6rem; right: 0.8rem; font-size: 0.65rem; color: #8a7f63; letter-spacing: 0.2em; }
#finale-card.infinite { animation: cardburn 2.5s ease-in forwards; }
@keyframes cardburn { 0% { filter: none; } 60% { filter: brightness(1.5) drop-shadow(0 0 30px #fff7d0); } 100% { filter: brightness(1.15) drop-shadow(0 0 14px #fff7d088); } }
.feed-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* epilogue */
.epilogue { max-width: 56ch; margin: 1rem auto; line-height: 1.7; font-size: 0.95rem; }

/* stats + achievements */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.45rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0.45rem 0.7rem; }
.stat .k { color: var(--dim); font-size: 0.7rem; }
.stat .v { font-family: var(--numfont); color: var(--moon); font-size: 0.92rem; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.55rem; }
.ach { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.75rem; }
.ach.locked { opacity: 0.4; }
.ach .nm { color: var(--gold); font-size: 0.85rem; }
.ach.locked .nm { color: var(--dim); }

/* records table */
table.records { border-collapse: collapse; margin-top: 0.6rem; }
table.records td, table.records th { border: 1px solid var(--line); padding: 0.35rem 0.8rem; font-size: 0.8rem; font-family: ui-monospace, monospace; }
table.records th { color: var(--dim); font-weight: normal; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: #2a3458; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  #logcol { display: none; }
}
@media (max-width: 760px) {
  #cols { flex-direction: column; overflow-y: auto; }
  #left { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  body, html { overflow: auto; }
}