:root{
  --ink:#0E0B18; --surface:#181226; --surface2:#221B36; --line:#3A3055; --line-soft:#2A2342;
  --text:#EFEAF7; --muted:#9C92B8;
  --fear:#A855F7; --justice:#E0A93F; --knowledge:#4FC3E8;
  --hp:#FF5E6C; --mana:#5C8DFF; --invoke:#C9A2FF;
  --display:'Cinzel',Georgia,serif; --body:'Spectral',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(1200px 800px at 50% -10%,#1A1330 0%,var(--ink) 60%);color:var(--text);font-family:var(--body);font-size:15px;overflow-x:hidden}
button{font-family:var(--body);cursor:pointer}
.hidden{display:none!important}

/* ---------- archetype accents ---------- */
.arch-fear{--accent:var(--fear)} .arch-justice{--accent:var(--justice)} .arch-knowledge{--accent:var(--knowledge)}

/* ---------- deck select screen ---------- */
#screen-select{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:34px}
#screen-select h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,58px);letter-spacing:.32em;text-indent:.32em}
#screen-select .sub{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-size:12px;margin-top:-22px}
.pick-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.pick{width:240px;background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:26px 20px 22px;text-align:center;transition:transform .18s,border-color .18s,box-shadow .18s;cursor:pointer}
.pick:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 0 34px -10px var(--accent)}
.pick svg{width:96px;height:96px;margin-bottom:14px}
.pick h2{font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:19px;color:var(--accent);margin-bottom:8px}
.pick p{color:var(--muted);font-size:13.5px;line-height:1.5;min-height:84px}
.pick .geo{display:block;margin-top:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);opacity:.7}
#screen-select .note{color:var(--muted);font-size:13px;font-style:italic}

/* ---------- game layout ---------- */
#screen-game{display:grid;grid-template-columns:1fr 290px;gap:14px;max-width:1180px;margin:0 auto;padding:12px 14px 18px}
#battlefield{display:flex;flex-direction:column;gap:8px;min-width:0}
#sidebar{display:flex;flex-direction:column;gap:10px}
@media(max-width:980px){#screen-game{grid-template-columns:1fr}#sidebar{order:2}}

.hero-strip{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:8px 14px}
.hero-strip .who{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--accent)}
.hero-strip .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stat{display:flex;align-items:baseline;gap:5px;font-size:15px}
.stat b{font-size:19px;font-family:var(--display)}
.stat.hp b{color:var(--hp)} .stat.mana b{color:var(--mana)} .stat.inv b{color:var(--invoke)}
.stat .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.handcount{margin-left:auto;color:var(--muted);font-size:12.5px;letter-spacing:.06em}
.hero-strip.targetable{outline:2px solid var(--hp);outline-offset:2px;cursor:crosshair;border-radius:8px;animation:target-throb 1.1s infinite}

/* ---------- boards ---------- */
.board-wrap{position:relative;background:linear-gradient(180deg,rgba(34,27,54,.45),rgba(24,18,38,.2));border:1px solid var(--line-soft);border-radius:10px}
.board{position:relative;height:268px;max-width:560px;margin:0 auto}
.board svg.geo-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board svg.geo-lines line,.board svg.geo-lines polygon{stroke:var(--accent);stroke-opacity:.28;fill:none;stroke-width:1.2}
.board-label{position:absolute;top:8px;left:12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.node{position:absolute;width:92px;height:84px;transform:translate(-50%,-50%);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* empty node = a quiet dot; hover reveals its bonus */
.node .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.55;box-shadow:0 0 8px -2px var(--accent);transition:transform .15s,opacity .15s}
.node.empty:hover .dot{opacity:1;transform:scale(1.35)}
.node .node-tip{position:absolute;bottom:calc(50% + 16px);left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--line);padding:4px 9px;border-radius:6px;font-size:10.5px;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6}
.node.empty:hover .node-tip{opacity:1}
/* drop targets while dragging a follower */
.node.playable{cursor:copy}
.node.playable .dot{opacity:1;animation:dotpulse 1s infinite}
.node.playable::after{content:'';position:absolute;width:48px;height:48px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed var(--accent);border-radius:50%;box-shadow:0 0 16px -6px var(--accent)}
.node.drag-over .dot{transform:scale(2);opacity:1}
.node.drag-over::after{border-style:solid;width:56px;height:56px}
@keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

.unit{width:100%;height:100%;border-radius:8px;background:var(--surface2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:5px 6px;cursor:default;position:relative}
.unit .uname{font-size:10.5px;line-height:1.15;font-weight:600;letter-spacing:.02em}
.unit .ustats{display:flex;justify-content:space-between;align-items:flex-end}
.unit .uatk{color:#FFC56E;font-family:var(--display);font-weight:700;font-size:16px}
.unit .uhp{color:var(--hp);font-family:var(--display);font-weight:700;font-size:16px}
.unit .uinv{position:absolute;top:-7px;right:-7px;background:var(--invoke);color:#1A1028;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 6px rgba(201,162,255,.7)}
.unit .usick{position:absolute;top:-8px;left:-6px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.05em;padding:1px 5px;border-radius:8px}
.unit.ready{border-color:var(--accent);box-shadow:0 0 10px -4px var(--accent);cursor:pointer}
.unit.acted{opacity:.55}
.unit.sick{opacity:.75}
.unit.selected{outline:2px solid var(--text);outline-offset:1px}
.unit.targetable{outline:2px solid var(--hp);outline-offset:1px;cursor:crosshair;animation:target-throb 1.1s infinite}
.unit.friend-target{outline:2px solid #7CE8A9;outline-offset:1px;cursor:crosshair}
@keyframes target-throb{0%,100%{outline-color:var(--hp)}50%{outline-color:rgba(255,94,108,.45)}}

/* centre / abstract slot */
.centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;display:flex;align-items:center;justify-content:center}
.sigil-ring{position:absolute;inset:0}
.sigil-ring circle.track{fill:rgba(14,11,24,.7);stroke:var(--line);stroke-width:2}
.sigil-ring circle.fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .4s;filter:drop-shadow(0 0 5px var(--accent))}
.centre .sig-inner{position:relative;text-align:center;width:96px}
.centre .sig-name{font-family:var(--display);font-weight:900;letter-spacing:.16em;font-size:13px;color:var(--accent)}
.centre .sig-meter{font-size:11px;color:var(--muted);margin-top:2px}
.centre .sig-stats{display:flex;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;margin-top:2px}
.centre.summoned{animation:ignite 1s ease}
.centre.summoned .sigil-ring circle.fill{stroke-width:4}
.centre.ready-abs{cursor:pointer}
.centre.ready-abs .sig-inner{filter:drop-shadow(0 0 6px var(--accent))}
.centre.targetable{outline:2px solid var(--hp);outline-offset:3px;border-radius:50%;cursor:crosshair;animation:target-throb 1.1s infinite}
.centre.selected{outline:2px solid var(--text);outline-offset:3px;border-radius:50%}
@keyframes ignite{0%{filter:brightness(3) blur(2px)}100%{filter:none}}

/* ---------- command bar ---------- */
#cmdbar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:8px 14px;min-height:52px}
#turn-ind{font-family:var(--display);letter-spacing:.14em;font-size:13px}
#action-hint{color:var(--muted);font-size:13px;font-style:italic;flex:1}
#action-hint.flash{color:var(--invoke);font-style:normal;font-weight:600}
.btn{background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:8px 16px;font-size:13px;letter-spacing:.08em;transition:border-color .15s,box-shadow .15s}
.btn:hover{border-color:var(--text)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{border-color:var(--accent);color:var(--accent)}
.btn.primary:hover{box-shadow:0 0 14px -6px var(--accent)}
.btn.attention{animation:pulse 1.4s infinite}
#btn-summon{display:none;border-color:var(--invoke);color:var(--invoke);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 6px -2px var(--invoke)}50%{box-shadow:0 0 18px -2px var(--invoke)}}
.unit-actions{display:flex;gap:8px}
.unit-actions .btn{padding:6px 12px;font-size:12px}
.btn.invoke-btn{border-color:var(--invoke);color:var(--invoke)}
.btn.invoke-btn:hover{box-shadow:0 0 14px -6px var(--invoke)}

/* ---------- hand ---------- */
#hand{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 2px 2px;min-height:172px}
.card{width:122px;height:164px;background:linear-gradient(170deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:9px;padding:8px 9px;display:flex;flex-direction:column;position:relative;transition:transform .14s,border-color .14s,box-shadow .14s;user-select:none}
.card .cost{position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:50%;background:var(--mana);color:#0B1230;font-family:var(--display);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(92,141,255,.55)}
.card .cname{font-weight:600;font-size:12.5px;line-height:1.2;margin-top:4px}
.card .ctype{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:3px 0 5px}
.card .ctext{font-size:10.5px;color:var(--muted);line-height:1.35;flex:1}
.card .cstats{display:flex;justify-content:space-between;align-items:center}
.card .cstats .uatk{color:#FFC56E;font-family:var(--display);font-weight:700;font-size:17px}
.card .cstats .uhp{color:var(--hp);font-family:var(--display);font-weight:700;font-size:17px}
.card .cstats .cinv{font-size:10px;color:var(--invoke)}
.card.affordable{cursor:pointer}
.card.can-drag{cursor:grab;touch-action:none}
.card.dragging{opacity:.5}
.card.affordable:hover{transform:translateY(-8px);border-color:var(--accent)}
.card.selected{transform:translateY(-10px);border-color:var(--accent);box-shadow:0 0 18px -6px var(--accent)}
.card.unaffordable{opacity:.45}

/* ---------- sidebar ---------- */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px}
.panel h3{font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--muted);font-weight:700;margin-bottom:8px;text-transform:uppercase}
#log{height:300px;overflow-y:auto;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;gap:3px}
#log .l-you{color:var(--text)} #log .l-foe{color:var(--muted)} #log .l-sys{color:var(--invoke);font-style:italic}
#log div{border-bottom:1px solid rgba(58,48,85,.25);padding:2px 0}
#nodes-help{font-size:11.5px;color:var(--muted);line-height:1.55}
#nodes-help b{color:var(--text);font-weight:600}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,6,16,.86);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay .box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:38px 44px;text-align:center;max-width:480px}
.overlay h2{font-family:var(--display);font-weight:900;letter-spacing:.2em;font-size:30px;margin-bottom:10px}
.overlay p{color:var(--muted);margin-bottom:22px;line-height:1.55}
.overlay.win h2{color:var(--justice)} .overlay.lose h2{color:var(--hp)}
#help-box{max-width:600px;text-align:left;max-height:82vh;overflow-y:auto}
#help-box h2{font-size:20px;text-align:center}
#help-box h4{font-family:var(--display);letter-spacing:.12em;font-size:13px;margin:14px 0 4px;color:var(--invoke)}
#help-box p,#help-box li{color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:6px}
#help-box ul{padding-left:18px}
.floater{position:fixed;font-family:var(--display);font-weight:900;font-size:22px;pointer-events:none;z-index:60;animation:floatup 1s ease forwards}
.floater.small{font-size:17px}
@keyframes floatup{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-44px)}}

/* ---------- form / ability additions ---------- */
#btn-ability{display:none;border-color:var(--accent);color:var(--accent)}
#btn-ability:hover{box-shadow:0 0 14px -6px var(--accent)}
.centre .sig-max{color:var(--muted);font-size:12px;font-weight:400}
.centre .sig-stats .uhp{font-size:20px}

/* ---------- hover tooltips (units & centres) ---------- */
.hover-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);width:200px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:11px;line-height:1.5;color:var(--muted);text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;z-index:9;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.hover-tip b{color:var(--text);font-weight:600}
.hover-tip .tip-dim{opacity:.7;font-style:italic}
.hover-tip div{margin-bottom:3px}
.hover-tip div:last-child{margin-bottom:0}
.unit:hover>.hover-tip,.centre:hover>.hover-tip{opacity:1}
.centre .hover-tip{width:240px}
/* foe board sits near the top edge — flip its tooltips downward */
#board-foe .hover-tip{bottom:auto;top:calc(100% + 8px)}
#board-foe .node-tip{bottom:auto;top:calc(50% + 16px)}

/* ---------- pointer-drag ghost (mouse & touch) ---------- */
.drag-ghost{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-65%) rotate(3deg);opacity:.9;box-shadow:0 14px 32px rgba(0,0,0,.65)}
.drag-ghost .hover-tip{display:none}

/* ---------- ritual links & communion ---------- */
.board svg.geo-lines line.spoke{stroke:var(--accent);stroke-opacity:.18}
.board svg.geo-lines line.edge{stroke:var(--accent);stroke-opacity:.15;stroke-width:1.2;transition:stroke-opacity .3s}
.board svg.geo-lines line.edge.lit{stroke-opacity:.95;stroke-width:1.8;filter:drop-shadow(0 0 3px var(--accent))}
.board.communion svg.geo-lines line.edge.lit{animation:edgehum 1.8s infinite}
@keyframes edgehum{0%,100%{stroke-opacity:.95}50%{stroke-opacity:.45}}
.unit .uinv.dim{opacity:.35;box-shadow:none}
.unit .uterr{position:absolute;top:-8px;left:-6px;background:var(--surface);border:1px solid var(--hp);color:var(--hp);font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px}
.unit.terrified{opacity:.7}

/* long abstract names (KNOWLEDGE) stay inside the sigil ring */
.centre .sig-name.long{font-size:10.5px;letter-spacing:.07em}