@import url("fonts/fonts.css");
/* ================================================================
   THE TREE OF LIFE · design tokens (sampled values documented in design-system.md)
   ================================================================ */
:root{
  --night:#03060d; --night-2:#07101b; --night-3:#0c1726; --night-4:#122033;
  --canopy:#113129; --canopy-2:#153e3b;
  --gold:#bfa047; --gold-hi:#eede85; --gold-lo:#8f7d49; --parch:#f3db8f;
  --text:#e9e3d2; --text-2:#b9b4a6; --muted:#7f8b96; --faint:#4a5664;
  --line:rgba(var(--gold-rgb),.16); --line-2:rgba(var(--gold-rgb),.32); --line-3:rgba(233,227,210,.07);
  --lumen:#73ccf2; --lumen-deep:#0d1638; --lumen-mid:#1d3a66;
  --ember:#e0561c; --ember-raw:#cd450d; --ember-deep:#380d0d; --ember-mid:#6a1d12;
  --r-common:#b6c2d4; --r-rare:#d56e1c; --r-epic:#1c9a4b; --r-legend:#8a5cd0;
  --mana:#6f9bd1; --atk:#d37a88; --hp:#3fa595;
  --f-display:"Fraunces", Georgia, serif;
  --f-ui:"Alegreya Sans", system-ui, sans-serif;
  --f-mono:"Spline Sans Mono", ui-monospace, monospace;
  --pad:clamp(16px,1.6vw,32px);
  --night-rgb:3,6,13; --night2-rgb:7,16,27; --gold-rgb:191,160,71; --veil-rgb:2,4,9;
  --glow:rgba(17,49,41,.55); --glow-2:transparent;
}
/* ---------- faction mood: same ledger, warmer or colder ink ----------
   Only the ground (night tones), the accent (gold family) and their rgb helpers move.
   Rarity, mana/atk/hp and the faction markers (lumen = Guardian, ember = Shadow Arc) never change. */
body.faction-guardian{
  --night:#090705; --night-2:#120d08; --night-3:#1a130b; --night-4:#251b10;
  --night-rgb:9,7,5; --night2-rgb:18,13,8; --veil-rgb:6,4,2;
  --gold:#cf9f45; --gold-hi:#f4d48a; --gold-lo:#94703a; --parch:#f6d9a0; --gold-rgb:207,159,69;
  --text:#efe5d2; --text-2:#c4b8a2; --muted:#8f8370; --faint:#5a5043;
  --line:rgba(207,159,69,.18); --line-2:rgba(207,159,69,.36); --line-3:rgba(239,229,210,.07);
  --glow:rgba(150,92,28,.30); --glow-2:rgba(40,70,40,.22);
}
body.faction-shadow{
  --night:#06050c; --night-2:#0d0b18; --night-3:#141123; --night-4:#1d1832;
  --night-rgb:6,5,12; --night2-rgb:13,11,24; --veil-rgb:4,3,9;
  --gold:#9d88dc; --gold-hi:#d6cbff; --gold-lo:#5f528f; --parch:#ddd4ff; --gold-rgb:157,136,220;
  --text:#e6e2f2; --text-2:#b3aec6; --muted:#7f7a96; --faint:#4b4762;
  --line:rgba(157,136,220,.17); --line-2:rgba(157,136,220,.34); --line-3:rgba(230,226,242,.07);
  --glow:rgba(76,48,140,.32); --glow-2:rgba(30,20,70,.25);
}
body.faction-shadow{--rings:url(assets/rings-violet.svg)}
body.faction-shadow .btn.gold{color:#0d0a1a}
body.faction-shadow .tgl span.on{color:#0d0a1a}

/* ---------- the Moloch Clock (real art, hand on its own layer) ---------- */
.mclock{position:relative;width:var(--s);height:var(--s);flex:none;
  /* blue: from VI back to the hand (and over the 12 numeral once the hand reaches it) */
  --b0:calc(min(var(--h) * 30deg, 172deg) - clamp(0deg, (1 - var(--h)) * 12deg, 12deg));
  /* red: from VI on to the hand */
  --r1:calc(max(var(--h) * 30deg, 188deg) + clamp(0deg, (var(--h) - 11) * 12deg, 12deg))}
.mclock img{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.mclock .ov{transition:opacity .4s}
.mclock .blue{opacity:clamp(0, (6 - var(--h)) * 10, 1);
  -webkit-mask-image:conic-gradient(from -30deg, transparent calc(var(--b0) + 29.3deg), #000 calc(var(--b0) + 30deg), #000 216deg, transparent 217deg);
          mask-image:conic-gradient(from -30deg, transparent calc(var(--b0) + 29.3deg), #000 calc(var(--b0) + 30deg), #000 216deg, transparent 217deg)}
.mclock .red{opacity:clamp(0, (var(--h) - 6) * 10, 1);
  -webkit-mask-image:conic-gradient(from 150deg, transparent 27deg, #000 28deg, #000 calc(var(--r1) - 150deg), transparent calc(var(--r1) - 149.3deg));
          mask-image:conic-gradient(from 150deg, transparent 27deg, #000 28deg, #000 calc(var(--r1) - 150deg), transparent calc(var(--r1) - 149.3deg))}
.mclock .hand{transform:rotate(calc(var(--h) * 30deg));transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--night);color:var(--text);font:400 15px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  var(--rings) left -420px bottom -520px / 1400px 1400px no-repeat fixed,
  radial-gradient(1200px 700px at 100% 0%, var(--glow), transparent 70%),
  radial-gradient(900px 600px at 0% 100%, var(--glow-2), transparent 70%),
  var(--night)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:var(--grain)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--f-mono)}
.disp{font-family:var(--f-display)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:28px;padding:0 var(--pad);
  background:rgba(var(--night-rgb),.94);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:10px;flex:none}
.mark svg{width:36px;height:36px;flex:none}
.mark .wm{font:600 20px/1 var(--f-display);letter-spacing:-.012em;font-variation-settings:"opsz" 72;white-space:nowrap}
.mark .wm i{font-style:italic;color:var(--gold);font-weight:400;font-size:.86em}
.mark .sub{font:500 9.5px/1.15 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line-2);padding-left:10px;margin-left:2px}
.nav{display:flex;gap:2px;height:100%}
.nav a{display:flex;align-items:center;padding:0 11px;white-space:nowrap;font:500 14.5px var(--f-ui);color:var(--text-2);position:relative}
.nav a.on{color:var(--text)}
.nav a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;background:var(--gold)}
.top .grow{flex:1}
.search{display:flex;align-items:center;gap:10px;height:34px;min-width:320px;flex:0 1 520px;padding:0 12px;border:1px solid var(--line);background:var(--night-2);color:var(--muted);font-size:14px}
.search kbd{margin-left:auto;font:500 11px var(--f-mono);color:var(--faint);border:1px solid var(--line-3);padding:1px 6px}
.who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.who img{width:30px;height:30px;object-fit:cover;object-position:50% 20%;border:1px solid var(--gold-lo)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;
  font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--text);background:transparent;white-space:nowrap}
.btn.gold{background:var(--gold);color:#140f04;border-color:var(--gold-hi);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn.ghost{border-color:var(--line)}
.btn.sm{height:28px;padding:0 10px;font-size:10.5px}
.btn.lumen{border-color:rgba(115,204,242,.45);color:var(--lumen);background:rgba(13,22,56,.6)}
.btn.ember{border-color:rgba(224,86,28,.45);color:#f08a5d;background:rgba(56,13,13,.6)}
.btn .k{font-weight:400;color:inherit;opacity:.6;letter-spacing:.04em}

/* ---------- hour labels: every section is an hour on the dial ---------- */
.hr{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.hr .n{color:var(--gold);letter-spacing:.06em;min-width:22px}
.hr::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.hr.noline::after{display:none}
.hr .aside{order:3;color:var(--muted);letter-spacing:.08em;text-transform:none;font-size:11px}

/* ---------- panels: ledger edge (double top rule) ---------- */
.pn{background:rgba(var(--night2-rgb),.86);border:1px solid var(--line-3);border-top:0;position:relative}
.pn::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:4px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.pn > .in{padding:16px 16px 18px}

/* ---------- faction half-dial emblem ---------- */
.fac{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.fac svg{width:14px;height:14px}
.fac.g{color:var(--lumen)} .fac.s{color:#f08a5d} .fac.n{color:var(--gold)}

/* ---------- rarity gem (cut diamond, not a dot) ---------- */
.gem{width:9px;height:9px;transform:rotate(45deg);flex:none;display:inline-block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.gem.Common{background:var(--r-common)} .gem.Rare{background:var(--r-rare)} .gem.Epic{background:var(--r-epic)} .gem.Legendary{background:var(--r-legend)}

/* ---------- card tile ---------- */
.ct{position:relative;display:flex;flex-direction:column}
.ct .art{position:relative;aspect-ratio:360/520}
.ct .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.ct .ft{white-space:nowrap;display:flex;align-items:center;gap:7px;margin-top:6px;padding:5px 2px 0;border-top:1px solid var(--line-3);font:500 11px/1 var(--f-mono);color:var(--muted)}
.ct .ft .st{margin-left:auto;color:var(--text-2);letter-spacing:.02em}
.ct .ft .st b{font-weight:600}
.ct .ft .st .sm{color:var(--mana)} .ct .ft .st .sa{color:var(--atk)} .ct .ft .st .sh{color:var(--hp)}
.ct .ft .st .up{color:var(--gold-hi)}
.ct .pips{display:flex;gap:3px}
.ct .pips i{width:7px;height:7px;border:1px solid var(--gold-lo);display:block}
.ct .pips i.f{background:var(--gold);border-color:var(--gold-hi)}
.ct.in-deck .ft{border-top-color:var(--gold-lo)}
.ct.maxed .art img{filter:saturate(.35) brightness(.55) drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.ct.maxed .art::after{content:"2 of 2";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:600 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);background:rgba(var(--night-rgb),.85);border:1px solid var(--gold-lo);padding:6px 10px;white-space:nowrap}
.ct .cnt{position:absolute;right:6%;top:2%;font:600 12px/1 var(--f-mono);background:var(--night);color:var(--gold-hi);border:1px solid var(--gold);padding:4px 6px}

/* ---------- deck row ---------- */
.dr{position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;height:34px;border-bottom:1px solid var(--line-3);overflow:hidden;background:var(--night-2)}
.dr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc)}
.dr .bg{position:absolute;right:0;top:0;bottom:0;width:62%;background-size:150% auto;background-position:50% 24%;
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.95) 55%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.95) 55%);opacity:.8}
.dr .mn{position:relative;z-index:1;text-align:center;font:600 14px var(--f-mono);color:var(--mana)}
.dr .nm{position:relative;z-index:1;font:500 14.5px/1 var(--f-ui);text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.dr .x{position:relative;z-index:1;font:600 12px var(--f-mono);color:var(--gold-hi);background:rgba(var(--night-rgb),.82);border-left:1px solid var(--line-2);height:100%;display:flex;align-items:center;padding:0 10px;min-width:38px;justify-content:center}
.dr.warn{background:repeating-linear-gradient(135deg,rgba(205,69,13,.10) 0 6px,transparent 6px 12px),var(--night-2)}
.dr.warn .nm{color:#f08a5d;text-decoration:line-through;text-decoration-color:rgba(240,138,93,.6)}

/* ---------- mana curve on an hour ruler ---------- */
.curve{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:var(--ch,110px);padding:0 2px}
.curve .b{position:relative;display:flex;flex-direction:column-reverse;height:100%}
.curve .b .mi{background:var(--gold-lo);border-top:2px solid var(--gold-hi)}
.curve .b .sp{background:var(--lumen-mid);border-top:2px solid var(--lumen)}
.curve .b .v{position:absolute;left:0;right:0;text-align:center;font:600 11px var(--f-mono);color:var(--text-2)}
.ruler{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:4px;border-top:1px solid var(--line-2);padding:0 2px}
.ruler span{position:relative;text-align:center;font:500 11px var(--f-mono);color:var(--muted);padding-top:7px}
.ruler span::before{content:"";position:absolute;left:50%;top:0;width:1px;height:5px;background:var(--gold-lo)}
.legend{display:flex;gap:14px;font:500 10.5px var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}

/* ---------- chips & segmented ---------- */
.seg{display:inline-flex;border:1px solid var(--line)}
.seg > *{height:30px;padding:0 11px;display:flex;align-items:center;gap:6px;font:500 13px var(--f-ui);color:var(--text-2);border-right:1px solid var(--line)}
.seg > *:last-child{border-right:0}
.seg > .on{background:var(--night-4);color:var(--text);box-shadow:inset 0 -2px 0 var(--gold)}
.mana-pick{display:inline-flex;gap:4px}
.mana-pick span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font:600 13px var(--f-mono);color:var(--text-2);border:1px solid var(--line);border-radius:50%}
.mana-pick span.on{border-color:var(--mana);color:#dfeeff;background:rgba(69,117,170,.35)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;font:500 12.5px var(--f-ui);color:var(--text-2);border:1px dashed var(--line-2)}
.chip.on{border-style:solid;border-color:var(--gold);color:var(--text);background:rgba(var(--gold-rgb),.08)}

/* ---------- toggle base / upgraded ---------- */
.tgl{display:inline-flex;align-items:center;border:1px solid var(--line-2);height:30px;font:600 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.tgl span{padding:0 11px;height:100%;display:flex;align-items:center;color:var(--muted)}
.tgl span.on{background:var(--gold);color:#140f04}

/* ---------- fields ---------- */
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font:500 10.5px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.inp{height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--night);border:1px solid var(--line-2);font:500 16px var(--f-ui)}
.inp.focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)}
.hint{font:400 13px var(--f-ui);color:var(--muted)}
.ok{color:#6fc39a}

.footer{display:flex;gap:24px;align-items:center;padding:18px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.footer .grow{flex:1}
/* static prototype links */
.nav a[href],.mark[href],.who[href],a.hc,.hpick a{cursor:pointer}
.nav a.off{opacity:.45;cursor:default}
a.hc{color:inherit;text-decoration:none}
a.hc:hover{border-color:var(--line-2)}