:root{
  --navy:#1E2D4E; --navy2:#16213b; --gold:#C9A84C; --helios:#E8C97A;
  --parch:#F5EFE0; --obsidian:#161E2C; --ash:#FAFAF8; --stone:#6B7280; --aegean:#2A5F8F;
  --mil:#8C3B3B; --eco:#C79A3A; --cul:#2E7D74; --uni:#6d5a8c;
  --good:#3f8f56; --bad:#b5483f;
  --p0:#b5483f; --p1:#2A5F8F; --p2:#64B437; --p3:#d98c2b; --p4:#e8e4dc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:var(--navy); color:var(--parch);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Trajan Pro","Cinzel",Georgia,serif;font-weight:600;letter-spacing:.02em;margin:0}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- INTRO ---------- */
#intro{
  position:fixed;inset:0;display:grid;
  grid-template-columns:minmax(0,2.05fr) minmax(330px,0.62fr);
  align-items:center;overflow:auto;
  background:radial-gradient(ellipse at top,#2a3d68 0%,var(--navy) 55%,#0e1626 100%);
}
.intro-left{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:20px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 60% 40%,#33477a 0%,#16223d 70%,#0c1322 100%);
  border-right:1px solid rgba(201,168,76,.25);
}
.intro-cover{
  max-width:min(1280px,99%);max-height:98vh;width:auto;height:auto;border-radius:14px;
  box-shadow:0 28px 70px rgba(0,0,0,.7),0 0 0 4px var(--gold),0 0 0 7px rgba(201,168,76,.25);
}
.intro-right{
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:42px 48px;overflow:auto;
}
.intro-title{font-size:38px;color:var(--gold);margin-bottom:2px;text-shadow:0 2px 8px #000;line-height:1.05}
.intro-sub{color:var(--helios);font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px}
.panel{
  background:rgba(245,239,224,.06);border:1px solid rgba(201,168,76,.4);
  border-radius:14px;padding:22px 26px;width:100%;max-width:520px;backdrop-filter:blur(3px);
}
@media(max-width:880px){
  #intro{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .intro-left{padding:24px;border-right:none;border-bottom:1px solid rgba(201,168,76,.25)}
  .intro-cover{width:min(360px,70vw);max-height:40vh}
  .intro-right{padding:24px}
}
.panel h3{color:var(--gold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.opt{
  background:rgba(0,0,0,.25);border:1px solid var(--stone);color:var(--parch);
  padding:9px 15px;border-radius:9px;font-size:15px;transition:.15s;
}
.opt:hover{border-color:var(--helios)}
.opt.sel{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700}
#room-block{margin-bottom:18px}
.room-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.room-code{font-family:Cinzel,serif;font-weight:800;font-size:22px;letter-spacing:.22em;color:var(--gold);
  background:rgba(0,0,0,.32);border:1.5px dashed var(--gold);border-radius:9px;padding:7px 16px;transition:.2s}
.room-code.copied{background:var(--gold);color:var(--navy);border-style:solid}
.room-copy{}
.room-join{display:flex;gap:8px;margin-bottom:7px}
.room-input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--stone);border-radius:8px;color:var(--parch);
  padding:8px 11px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.room-input:focus{outline:none;border-color:var(--gold)}
.room-note{margin-top:2px}
.startbtn{
  width:100%;background:linear-gradient(180deg,var(--gold),#a8862f);color:var(--navy);
  border:none;border-radius:11px;padding:15px;font-size:19px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;margin-top:6px;box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.startbtn:hover{filter:brightness(1.08)}
.muted{color:var(--stone);font-size:12.5px;line-height:1.5;margin-top:14px}
.simlink{color:var(--helios);text-decoration:underline;cursor:pointer;font-size:13px}

/* ---------- GAME LAYOUT ---------- */
#game{position:fixed;inset:0;display:none;grid-template-columns:minmax(0,max-content) minmax(440px,1fr);grid-template-rows:1fr 64px;
  grid-template-areas:"board side" "bottom bottom";background:#0e1626;transition:grid-template-columns .2s}
#game.rail-collapsed{grid-template-columns:minmax(0,max-content) 14px}
#topbar{grid-area:bottom;background:linear-gradient(180deg,#27355a,#1a2540);border-top:2px solid var(--gold);
  display:flex;align-items:center;gap:12px;padding:0 12px;font-size:13px;color:var(--helios);z-index:5;overflow:visible}
/* bottom-bar context: turn/status inline, action buttons + Gamefound CTA on the right */
#topbar .foot-turn,#topbar .foot-status{margin-bottom:0}
#topbar .foot-status{max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#topbar .foot-actions{flex-direction:row;gap:8px;align-items:center}
#topbar .foot-actions .topact{display:inline-block;width:auto;padding:8px 16px}
#gameboxCta{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;margin-left:2px;
  padding:4px 11px 4px 8px;border-radius:12px;border:1.5px solid var(--gold);
  background:linear-gradient(180deg,rgba(201,168,76,.22),rgba(201,168,76,.07));animation:cta-glow 2.1s ease-in-out infinite}
#gameboxCta img{height:50px;width:auto;display:block;filter:drop-shadow(0 4px 9px rgba(0,0,0,.55))}
#gameboxCta .cta-txt{display:flex;flex-direction:column;line-height:1.18}
#gameboxCta .cta-k{font-family:Cinzel,serif;font-weight:700;color:var(--gold);font-size:13px}
#gameboxCta .cta-s{font-size:10.5px;color:#cdd7ea;letter-spacing:.2px}
#gameboxCta:hover{filter:brightness(1.09)}
@keyframes cta-glow{0%,100%{box-shadow:0 0 8px rgba(201,168,76,.25)}50%{box-shadow:0 0 22px rgba(201,168,76,.7)}}
#topbar .ttl{font-family:Cinzel,Georgia,serif;color:var(--gold);font-size:16px;letter-spacing:.06em}
#topbar .phase{background:rgba(0,0,0,.3);padding:3px 12px;border-radius:20px;border:1px solid var(--stone)}
#topbar .spring{flex:0 0 6px}
#errbar{position:fixed;left:0;right:0;top:0;z-index:9999;background:#7a1f1f;color:#ffd9d9;font:12px/1.4 monospace;
  padding:8px 12px;white-space:pre-wrap;max-height:40vh;overflow:auto;border-bottom:2px solid #ff6b6b}
#dbgHud{position:fixed;right:8px;bottom:8px;z-index:9000;background:rgba(10,16,30,.92);color:#9fe0a0;
  font:11px/1.45 monospace;padding:7px 10px;border:1px solid #2a3a5c;border-radius:8px;max-width:340px;
  white-space:pre-wrap;pointer-events:none}
#topbar button{background:rgba(0,0,0,.25);border:1px solid var(--stone);color:var(--parch);
  padding:5px 11px;border-radius:7px;font-size:12px}
#topbar button:hover{border-color:var(--helios)}

#boardwrap{grid-area:board;overflow:auto;padding:12px 0 12px 12px}
#side{grid-area:side;background:#131c30;border-left:1px solid #2a3a5c;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;position:relative}
#railToggle{position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:14px;height:54px;
  background:linear-gradient(180deg,#27355a,#1a2540);border:1px solid var(--gold);border-right:none;
  border-radius:7px 0 0 7px;color:var(--helios);font-size:11px;display:flex;align-items:center;justify-content:center;z-index:6}
#game.rail-collapsed #side > *:not(#railToggle){display:none}

/* ===== ATHENS-BOARD: full-overlay play surface ===== */
.boardstage{position:relative;width:100%;max-width:none;margin:0 auto;line-height:0;aspect-ratio:1600/1343}
/* Deter casual image saving/printing of the art (not bulletproof — see note). */
img{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
  -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
.boardstage > img.board-base{width:100%;display:block;border-radius:12px;aspect-ratio:1600/1343;
  box-shadow:0 10px 40px rgba(0,0,0,.5);border:2px solid rgba(201,168,76,.5)}
/* every overlay node is positioned by % of the board image */
.ov{position:absolute;transform:translate(-50%,-50%);line-height:1.1;pointer-events:none}
.ov-cs-travel{width:5.2%;z-index:8}
.ov-cs-travel img{width:100%;border-radius:4px;border:1px solid rgba(201,168,76,.6);box-shadow:0 2px 6px rgba(0,0,0,.5);display:block}
.ov-cs-stack{width:5.2%;z-index:7;transform:translate(-50%,-50%)}
.ov-cs-stack img{width:100%;border-radius:4px;border:1px solid rgba(201,168,76,.5);box-shadow:0 3px 7px rgba(0,0,0,.55),3px 3px 0 -1px rgba(60,40,20,.5);display:block}
.ov-cs-stack .ov-cs-count{position:absolute;right:-5px;bottom:-5px;background:#2a3354;color:#f3ecd8;font:700 10px/1 Cinzel,serif;border:1px solid #c9a84c;border-radius:8px;padding:2px 5px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.ov-cs-stackfb{font:700 11px/1.2 Cinzel,serif;color:#f3ecd8;background:#2a3354;border:1px solid #c9a84c;border-radius:4px;padding:8px 6px;text-align:center}
.ov-dbg{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:60;display:flex;flex-direction:column;align-items:center}
.ov-dbg.drag{pointer-events:auto;cursor:grab;padding:6px;margin:-6px;touch-action:none}
.ov-dbg.drag:hover .ov-dbg-pt{background:#ffe082;box-shadow:0 0 0 2px #fff,0 0 8px #ffe082;transform:scale(1.5)}
.ov-dbg.drag:active{cursor:grabbing}
.ov-dbg-pt{width:7px;height:7px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 0 1px #fff,0 0 4px #ff3b6b;transition:transform .1s}
.ov-dbg-lbl{font-size:7px;color:#fff;background:rgba(255,59,107,.85);padding:0 2px;border-radius:2px;margin-top:1px;font-family:monospace;white-space:nowrap}
.ov-dbg.glory-corner .ov-dbg-pt{width:12px;height:12px;background:#ffd34d;box-shadow:0 0 0 2px #1a140a,0 0 9px #ffd34d}
.ov-dbg.glory-corner .ov-dbg-lbl{background:rgba(201,168,76,.96);color:#1a140a;font-weight:700}
/* parthenon/player-board align dots tint differently so the surface is obvious */
.parthstage .ov-dbg .ov-dbg-pt,.pa-board .ov-dbg .ov-dbg-pt{background:#3bd6ff;box-shadow:0 0 0 1px #fff,0 0 4px #3bd6ff}
.parthstage .ov-dbg .ov-dbg-lbl,.pa-board .ov-dbg .ov-dbg-lbl{background:rgba(59,150,255,.85)}
#alignPanel{position:fixed;left:14px;bottom:14px;z-index:650;width:280px;background:rgba(14,20,36,.97);
  border:1.5px solid var(--gold);border-radius:11px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.55);color:#dbe2f1}
#alignPanel.hidden{display:none}
.alp-h{font-family:Cinzel,serif;color:var(--gold);font-size:14px;margin-bottom:3px}
.alp-sub{font-size:11px;color:#9fb0cc;line-height:1.4;margin-bottom:8px}
.alp-read{font-size:12px;font-family:monospace;color:#bfe6cf;background:#0b1120;border:1px solid #2a3a55;border-radius:6px;padding:7px 8px;margin-bottom:9px;word-break:break-all}
.alp-btns{display:flex;gap:6px;flex-wrap:wrap}
.alp-btns button{background:rgba(201,168,76,.12);border:1px solid var(--gold);color:var(--parch);border-radius:7px;padding:5px 9px;font-size:11.5px;cursor:pointer}
.alp-btns button:hover{background:var(--gold);color:var(--navy)}
.alp-secs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.alp-secs button{font-size:10.5px;padding:3px 8px;border-radius:5px;border:1px solid #3a4c6a;background:rgba(255,255,255,.04);color:#9fb0cc;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.alp-secs button.alp-active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.15)}
.alp-secs button:hover:not(.alp-active){background:rgba(255,255,255,.08);color:#dbe2f1}
/* calibration tool */
.boardstage.calibrating{cursor:crosshair}
.boardstage.calibrating .ov,.boardstage.calibrating .ov-card,.boardstage.calibrating .ov-cell{pointer-events:none}
.ov-cal-dot{position:absolute;transform:translate(-50%,-50%);z-index:70;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.ov-cal-dot span{width:9px;height:9px;border-radius:50%;background:#22e0a0;box-shadow:0 0 0 2px #06321f,0 0 6px #22e0a0}
.ov-cal-dot b{font-size:7px;color:#06321f;background:rgba(34,224,160,.92);padding:0 2px;border-radius:2px;margin-top:1px;font-family:monospace;white-space:nowrap}
.ov-cal-dot.cur span{background:#ffd54a;box-shadow:0 0 0 2px #3a2b00,0 0 10px #ffd54a;width:13px;height:13px}
.ov-cal-dot.cur b{background:#ffd54a;color:#3a2b00}
.cal-panel{position:absolute;top:8px;left:8px;z-index:80;width:300px;max-width:46%;background:rgba(14,20,36,.96);
  border:1.5px solid var(--gold);border-radius:10px;padding:10px 12px;color:var(--parch);font-size:12px;line-height:1.35;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.cal-h{font-family:Cinzel,serif;color:var(--gold);font-size:13px;margin-bottom:4px}
.cal-grp{font-size:10px;color:#9fb0cc;margin-bottom:5px}
.cal-tgt{margin-bottom:8px;font-size:13px}
.cal-tgt b{color:#ffd54a}
.cal-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cal-sel{flex:1 1 100%;background:rgba(0,0,0,.4);color:var(--parch);border:1px solid var(--gold);border-radius:6px;padding:5px 7px;font-size:11px;font-family:inherit}
.cal-btns button{background:rgba(0,0,0,.3);border:1px solid var(--stone);color:var(--parch);border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer}
.cal-btns button:hover{border-color:var(--helios)}
.cal-out{width:100%;height:120px;background:#0b1120;color:#bfe6cf;border:1px solid #2a3a55;border-radius:6px;font-family:monospace;font-size:9px;padding:6px;resize:vertical}
.ov.click{pointer-events:auto}
/* Click-to-enlarge overlays (Athena cards & City-state tiles) — read-only zoom, like Mission cards */
.czoom{pointer-events:auto;cursor:pointer}
.czoom:hover{filter:brightness(1.08) drop-shadow(0 0 7px rgba(255,224,130,.6))}
/* Agora cells overlaid on the 3x3 marble grid */
.ov-cell{width:9.4%;aspect-ratio:1;height:auto;border-radius:8px;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;transition:.12s}
.ov-cell.tiled{box-shadow:inset 0 0 0 2px rgba(232,201,122,.55)}
.ov-cell.pick{cursor:pointer;box-shadow:0 0 0 3px var(--gold);animation:pulse 1.3s infinite;background:rgba(201,168,76,.12)}
.ov-cell.pick:hover{background:rgba(201,168,76,.4);box-shadow:0 0 0 4px var(--gold)}
/* On-board instruction banner during the human placement turn */
.ov-banner{position:absolute;left:50%;top:2.2%;transform:translateX(-50%);z-index:30;
  width:min(86%,820px);box-sizing:border-box;pointer-events:none;text-align:center;
  background:linear-gradient(180deg,rgba(20,28,48,.96),rgba(16,22,38,.94));
  border:1px solid var(--gold);border-radius:11px;padding:9px 16px;
  box-shadow:0 6px 22px rgba(0,0,0,.55);line-height:1.35;backdrop-filter:blur(2px)}
.ov-banner .ovb-top{display:flex;align-items:center;justify-content:center;gap:8px}
.ov-banner .ovb-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.ov-banner .ovb-h{font-family:Cinzel,serif;font-weight:800;font-size:15px;color:var(--gold);letter-spacing:.2px}
.ov-banner .ovb-rule{font-size:12px;color:#d6def0;margin-top:3px}
.ov-banner .ovb-rule b{color:#fff}
.ov-banner .ovb-detail{font-size:12px;color:#cdd6ea;margin-top:5px;padding-top:5px;border-top:1px solid rgba(201,168,76,.25)}
.ov-banner .ovb-detail .ovb-sp{color:var(--helios);font-weight:700}
.ov-banner .ovb-detail.ovb-hint{color:#8794ad;font-style:italic;border-top:none}
.ov-banner .ovb-detail b{color:#fff}
.ov-banner .ovb-actions{display:flex;gap:12px;justify-content:center;margin-top:9px;pointer-events:auto}
.ovb-act{flex:0 1 230px;display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(201,168,76,.07));
  border:1.5px solid var(--gold);border-radius:9px;padding:8px 12px;color:#f3ecd8;transition:.14s;
  animation:pulse 1.3s infinite}
.ovb-act:hover{background:linear-gradient(180deg,rgba(201,168,76,.4),rgba(201,168,76,.2));transform:translateY(-2px)}
.ovb-act .ovb-act-where{font-size:10px;color:var(--helios);letter-spacing:.04em;text-transform:uppercase}
.ovb-act .ovb-act-name{font-family:Cinzel,serif;font-size:14px;font-weight:700;color:#fff}
/* flying citizen token (slide from player panel to the Agora) */
.citizen-fly{position:fixed;z-index:120;width:16px;height:16px;border-radius:50%;pointer-events:none;
  border:2px solid #1a140a;box-shadow:0 2px 8px rgba(0,0,0,.6);transform:translate(-50%,-50%) scale(1);
  transition:left .55s cubic-bezier(.4,.1,.3,1),top .55s cubic-bezier(.4,.1,.3,1),transform .55s ease}
.citizen-fly.lg{width:22px;height:22px;border-radius:6px}
/* Unit "roll out" animation (Activate Unit): the unit token flies from the player board to its
   destination on the Athens board, with a floating spent/gained readout that rises and fades. */
.unit-fly{position:fixed;z-index:121;width:34px;height:40px;object-fit:contain;pointer-events:none;
  transform:translate(-50%,-50%);filter:drop-shadow(0 3px 7px rgba(0,0,0,.6));
  transition:left .6s cubic-bezier(.35,.1,.3,1),top .6s cubic-bezier(.35,.1,.3,1),transform .6s ease}
.unit-readout{position:fixed;z-index:122;pointer-events:none;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,rgba(20,28,48,.97),rgba(16,22,38,.95));border:1.5px solid #43d6c0;
  border-radius:9px;padding:5px 11px;font-size:12px;color:#eafaf5;white-space:nowrap;font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.55),0 0 14px rgba(67,214,192,.4);transition:transform 1.4s ease,opacity 1.4s ease}
.unit-readout .ur-spend{color:#ffb4a8}
.unit-readout .ur-gain{color:#7ef0c0;font-weight:800}
/* Units & Diplomats sitting ON the player-board tracks (top = Units, bottom = Household diplomats).
   Scoped under .pa-board so these beat the generic ".pa-board img{width:100%}" board-image rule. */
.pa-board img.pb-piece{position:absolute;width:auto;height:auto;transform:translate(-50%,-50%);
  pointer-events:none;z-index:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.pa-board img.pb-unit{width:8%}
.pa-board img.pb-dip{width:4.6%}
.ov-cell .cs-img{width:97%;height:auto;max-height:97%;object-fit:contain;border-radius:5px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ov-cell .cs-hex{position:absolute;top:8%;right:8%;width:26%;aspect-ratio:1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border:2px solid rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.55);z-index:3}
.ov-cits{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center}
/* generic piece tokens on the overlay */
.tok{border:1.5px solid rgba(255,255,255,.85);box-shadow:0 1px 3px rgba(0,0,0,.6);display:inline-block}
.tok.cit{width:14px;height:14px;border-radius:50%}
.tok.cit.lg{width:18px;height:18px;border-radius:5px}
.tok.cube{width:12px;height:12px;border-radius:2px}
.tok.glorymk{width:13px;height:13px;border-radius:50%;border:2px solid #1a140a;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.ov-glory{z-index:9}
.tok.amph{width:13px;height:16px;border-radius:3px 3px 7px 7px;background:linear-gradient(180deg,#c98f5a,#9c6a3c)}
.ov-card{position:absolute;width:8.5%;border-radius:5px;overflow:hidden;border:1.5px solid #b9a468;
  box-shadow:0 3px 9px rgba(0,0,0,.55);pointer-events:auto;background:#1a2030;z-index:6}
.ov-card img{width:100%;display:block}
.ov-card .ofallback{font-size:8px;padding:4px;color:#2a2418;background:linear-gradient(170deg,#f3ecd8,#e2d6b8)}
.ov-rival{width:3.0%;aspect-ratio:1;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:800;color:#fff}
.ov-rival.sparta{background:#9a2c2c}.ov-rival.persia{background:#7a3c8c}
.ov-rival-shield{width:3.7%;z-index:12}
/* a sent Athena card sitting on the Diplomacy track (real card art + the owner's diplomat) */
.ov-dcard{width:5.7%;z-index:8}
.ov-dcard .dtrack-card{width:100%;display:block;border-radius:4px;border:1.5px solid #b9a468;box-shadow:0 2px 8px rgba(0,0,0,.62)}
.ov-dcard .dtrack-cube{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1}
.ov-dcard .dtrack-dip{position:absolute;right:3px;bottom:5px;width:17px;height:17px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* a Citizen tentatively placed on an Agora cell (before you Confirm) — dashed ring shows it can still move */
.pc-cit.pend-cit{outline:2px dashed var(--helios);outline-offset:2px;border-radius:50%;animation:pendpulse 1.2s infinite}
@keyframes pendpulse{0%,100%{outline-color:rgba(255,224,130,.55)}50%{outline-color:rgba(255,224,130,1)}}
/* zone highlight — glowing frame over the part of the board an action operates on */
/* Action-target highlight pulses in the END-TURN TEAL (not gold), so "you picked an action —
   here's what it touches" reads as one consistent colour with the action buttons/chips. */
.ov-zonehl{position:absolute;border:2.5px solid #43d6c0;border-radius:8px;background:rgba(67,214,192,.12);
  box-shadow:0 0 16px 4px rgba(67,214,192,.55),inset 0 0 14px rgba(67,214,192,.28);pointer-events:none;z-index:7;animation:zonepulse 1.25s infinite}
@keyframes zonepulse{0%,100%{box-shadow:0 0 12px 3px rgba(67,214,192,.42),inset 0 0 12px rgba(67,214,192,.22)}50%{box-shadow:0 0 24px 8px rgba(67,214,192,.8),inset 0 0 18px rgba(67,214,192,.42)}}
.zone-glow{outline:3px solid #43d6c0!important;outline-offset:2px;box-shadow:0 0 20px 5px rgba(67,214,192,.6)!important;border-radius:8px;animation:zonepulse 1.25s infinite}
.parea.zone-actor{box-shadow:0 0 0 2px #43d6c0,0 0 20px 4px rgba(67,214,192,.5)!important}
/* GOVERNANCE ZONE HIGHLIGHT — gold ring over the row/col/diagonal being evaluated */
.ov-govhl{position:absolute;border:3px solid #FFD700;border-radius:10px;
  background:rgba(255,215,0,.13);pointer-events:none;z-index:9;
  box-shadow:0 0 18px 5px rgba(255,215,0,.55),inset 0 0 16px rgba(255,215,0,.2);
  animation:govpulse 1.3s infinite}
@keyframes govpulse{
  0%,100%{box-shadow:0 0 14px 4px rgba(255,215,0,.4),inset 0 0 12px rgba(255,215,0,.15)}
  50%{box-shadow:0 0 28px 9px rgba(255,215,0,.7),inset 0 0 22px rgba(255,215,0,.35)}}

/* GOVERNANCE BANNER */
#govBanner{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:601;
  min-width:340px;max-width:580px;
  background:linear-gradient(165deg,rgba(28,22,4,.97),rgba(18,14,2,.97));
  border:2px solid #FFD700;border-radius:12px;padding:11px 18px 12px;
  box-shadow:0 10px 34px rgba(0,0,0,.65);color:#eef1f8;
  transition:opacity .25s,transform .25s;pointer-events:auto}
#govBanner.hidden{opacity:0;transform:translateX(-50%) translateY(-14px);pointer-events:none}
.govb-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.govb-icon{font-size:18px;flex:none}
.govb-title{font-family:Cinzel,serif;color:#FFD700;font-size:13px;font-weight:700;
  letter-spacing:.04em;flex:1}
.govb-skip{font-size:11px;color:#aeb8cf;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:4px 9px;cursor:pointer;flex:none}
.govb-skip:hover{background:rgba(255,255,255,.14);color:#fff}
.govb-official{font-size:17px;color:#ffe082;font-weight:700;font-family:Cinzel,serif}
.govb-result{font-size:13px;color:#cdd6ea;line-height:1.5;margin-top:5px;
  padding-top:5px;border-top:1px solid rgba(255,215,0,.2)}

/* OFFER CARD PICK STATES */
.ov-card.offer-pick{box-shadow:0 0 0 3px var(--gold),0 3px 12px rgba(0,0,0,.55);
  animation:pulse 1.3s infinite;cursor:pointer;z-index:20}
.ov-card.offer-pick:hover{box-shadow:0 0 0 4px var(--helios),0 8px 20px rgba(0,0,0,.65);z-index:21}
.ov-card.offer-dim>img{opacity:.32;filter:grayscale(.6)}
.ov-card .offer-why{position:absolute;left:0;right:0;bottom:0;text-align:center;
  background:rgba(122,22,22,.94);color:#ffdede;font:600 8.5px/1.25 system-ui,sans-serif;
  padding:2px 3px;pointer-events:none}

/* MARKET COLUMN PICK ZONES */
.ov-mktcol{position:absolute;border-radius:8px;pointer-events:auto;z-index:7}
.ov-mktcol.mkt-pick{border:2.5px solid var(--gold);background:rgba(201,168,76,.12);
  cursor:pointer;animation:pulse 1.3s infinite}
.ov-mktcol.mkt-pick:hover{background:rgba(201,168,76,.35);border-color:var(--helios)}
.ov-mktcol.mkt-nopick{border:1.5px solid rgba(107,114,128,.3);
  background:rgba(107,114,128,.05);cursor:not-allowed;opacity:.5}
.ov-mktcol .mkt-col-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-family:Cinzel,serif;font-size:9px;color:var(--gold);white-space:nowrap;pointer-events:none}

/* CARD ZOOM MODAL */
#cardZoomModal{position:fixed;inset:0;z-index:800;display:flex;
  align-items:center;justify-content:center}
#cardZoomModal.hidden{display:none}
.czm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.czm-box{position:relative;z-index:1;background:linear-gradient(160deg,#1d2a48,#141d31);
  border:2px solid var(--gold);border-radius:16px;padding:20px;
  width:min(320px,88vw);box-shadow:0 24px 60px rgba(0,0,0,.75)}
.czm-img{width:100%;border-radius:8px;border:1.5px solid #b9a468;
  box-shadow:0 6px 18px rgba(0,0,0,.6);display:block}
.czm-name{font-family:Cinzel,serif;color:var(--gold);font-size:18px;font-weight:700;
  margin-top:12px;line-height:1.1}
.czm-type{font-size:11px;color:var(--helios);text-transform:uppercase;letter-spacing:.12em;margin-top:3px}
.czm-pay{font-size:13px;color:#cdd6ea;margin-top:7px}
.czm-glory{font-size:13px;color:var(--gold);margin-top:2px}
.czm-btns{display:flex;gap:10px;margin-top:16px}
.czm-confirm{flex:1;background:linear-gradient(180deg,var(--gold),#a8862f);color:var(--navy);
  border:none;border-radius:9px;padding:12px;font-size:15px;font-weight:800;
  letter-spacing:.03em;cursor:pointer;transition:.12s}
.czm-confirm:hover{filter:brightness(1.1)}
.czm-confirm:disabled{background:linear-gradient(180deg,#39455f,#2b3450);
  color:#8c97ad;cursor:not-allowed;filter:none;box-shadow:none}
.czm-confirm:disabled:hover{filter:none}
.czm-cantafford{font-size:12px;color:#f0a37a;margin-top:9px;font-style:italic}
.czm-cancel{flex:0 0 auto;background:rgba(0,0,0,.3);border:1px solid var(--stone);
  color:var(--parch);border-radius:9px;padding:12px 16px;font-size:13px;cursor:pointer}
.czm-cancel:hover{border-color:var(--helios)}

/* OPPONENT TURN BANNER — narrates what an AI player is doing, and why, one beat at a time */
#opBanner{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:600;min-width:300px;max-width:560px;
  background:linear-gradient(165deg,rgba(20,28,48,.97),rgba(12,18,33,.97));border:2px solid var(--seatc,#c9a84c);
  border-radius:12px;padding:11px 16px 12px;box-shadow:0 10px 34px rgba(0,0,0,.6);color:#eef1f8;
  transition:opacity .25s,transform .25s;pointer-events:auto}
#opBanner.hidden{opacity:0;transform:translateX(-50%) translateY(-12px);pointer-events:none}
.opb-row{display:flex;align-items:center;gap:9px}
.opb-dot{width:13px;height:13px;border-radius:50%;background:var(--seatc,#c9a84c);box-shadow:0 0 0 2px rgba(255,255,255,.25);flex:none}
.opb-who{font-family:Cinzel,serif;font-size:15px;font-weight:700;letter-spacing:.02em}
.opb-act{font-size:14.5px;color:#ffe082;font-weight:600}
.opb-skip{margin-left:auto;font-size:11px;color:#aeb8cf;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:7px;padding:4px 9px;cursor:pointer;flex:none}
.opb-skip:hover{background:rgba(255,255,255,.14);color:#fff}
.opb-detail{margin-top:6px;font-size:13px;line-height:1.45;color:#cdd6ea}
.opb-glory{display:inline-block;margin-left:7px;color:#7fe0a0;font-weight:700}
/* A bright contour ring marks this as the live Rival token, distinct from the identical printed
   disc behind it on the frieze. */
.ov-rival-shield .rivshield{width:100%;height:auto;display:block;border-radius:50%;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(15,22,40,.92), 0 0 9px 3px rgba(0,0,0,.55)}
.ov-corrupt{width:3.6%}
.ov-corrupt img{width:100%;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ov-corrupt .cc-count{position:absolute;right:-7px;bottom:-5px;background:#2a3354;color:var(--gold);font:700 11px/1 Cinzel,serif;border:1px solid var(--gold);border-radius:8px;padding:1px 5px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.ov-lab{position:absolute;font-family:Cinzel,serif;font-size:9px;color:var(--helios);
  text-shadow:0 1px 3px #000;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;white-space:nowrap}
/* legend / readout strip under the board for the fiddly numbers */
.board-readout{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.board-offer{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.board-offer .zone{flex:1 1 200px}
body.hide-readout .board-readout{display:none}
.board-readout .zone{flex:1 1 200px}

/* panel chrome shared by board zones */
.zone{background:linear-gradient(160deg,#23304f,#1a2540);border:1.5px solid rgba(201,168,76,.55);
  border-radius:12px;padding:11px 12px;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.zlabel{font-family:Cinzel,serif;color:var(--gold);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:8px;display:flex;align-items:center;gap:8px}
.zlabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.5),transparent)}

/* ---- player areas (right rail) ---- */
.rail-players{padding:9px;display:flex;flex-direction:column;gap:9px;border-bottom:1px solid #2a3a5c}
.playarea{display:flex;flex-direction:column;gap:9px}
.parea{background:linear-gradient(165deg,#22304e,#18223a);
  border:1.5px solid var(--stone);border-radius:12px;padding:9px;position:relative;transition:.15s}
.parea.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.5),0 6px 20px rgba(0,0,0,.4)}
.parea .pa-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.pa-ava{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;object-position:50% 22%;
  border:2.5px solid var(--seat,#888);background:#0e1626}
.pa-id{flex:1;min-width:0}
.pa-name{font-family:Cinzel,serif;font-weight:700;font-size:13px;color:var(--parch);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-role{font-size:9.5px;color:var(--helios);letter-spacing:.04em;text-transform:uppercase}
.pa-glory{font-family:Cinzel,serif;color:var(--gold);font-size:22px;font-weight:800;line-height:1}
.pa-fp{position:absolute;top:-7px;left:-7px;background:var(--gold);color:var(--navy);font-size:9px;font-weight:800;
  border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #7a5d1f}
.pa-fp-tok{position:absolute;top:-10px;left:-10px;width:30px;height:30px;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));z-index:3}
.pa-corrupt{position:absolute;top:6px;right:8px;color:#c98ad9;font-size:11px}
.demag-area{--seat:#b03a2e;border-color:rgba(176,58,46,.6)!important;background:linear-gradient(160deg,#241016,#1a0d10)!important}
.demag-area .pa-name{color:#e6b34a}
.demag-last{width:34px;border-radius:4px;border:1px solid rgba(230,179,74,.4)}
.pa-citleft{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:5px 0 6px;padding:4px 7px;
  background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.28);border-radius:7px}
.pa-citlbl{font-size:10.5px;color:#cdd6ea;letter-spacing:.01em}
.pa-citlbl b{color:var(--helios);font-size:12px}
.pa-citicons{display:flex;align-items:flex-end;gap:2px}
.cit-left{height:24px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.cit-left.lg{height:31px}
.cit-left.used{opacity:.26;filter:grayscale(.7)}
.parea.active .pa-citleft{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.5)}
.pa-bw{display:flex;gap:7px;align-items:flex-start;--patileh:210px}
/* Role tile sets the shared height (--patileh); the player board matches it (width follows the 2:1 art). */
.pa-board{position:relative;border-radius:7px;overflow:hidden;border:1px solid rgba(201,168,76,.3);flex:0 1 auto;min-width:0;height:var(--patileh)}
.pa-board img{height:100%;width:auto;max-width:100%;display:block;object-fit:contain}
.pa-tiles{display:flex;flex-direction:column;gap:5px;flex:none;justify-content:flex-start;align-self:flex-start}
.pa-tile{position:relative;height:var(--patileh);width:auto;aspect-ratio:720/1369;border-radius:6px;overflow:hidden;border:1px solid rgba(201,168,76,.4);background:#0e1626}
.pa-tile img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.pa-tile-lbl{position:absolute;left:0;right:0;bottom:0;z-index:1;font-size:8px;color:var(--helios);text-align:center;letter-spacing:.04em;text-transform:uppercase;padding:2px 0;background:linear-gradient(transparent,rgba(8,14,26,.9) 45%)}
/* Click avatar to collapse a player's detail panel down to just the header strip. */
.pa-ava{cursor:pointer;transition:transform .1s,box-shadow .12s}
.pa-ava:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--helios)}
.parea.collapsed .pa-citleft,.parea.collapsed .pa-bw,.parea.collapsed .pa-lower,.parea.collapsed .pa-missions,.parea.collapsed .pa-skills{display:none}
.parea.collapsed{padding-bottom:8px}
.pa-collapse-all{background:rgba(0,0,0,.25);border:1px solid var(--stone);color:var(--helios);font-size:10px;
  padding:2px 8px;border-radius:6px;cursor:pointer;letter-spacing:.02em}
.pa-collapse-all:hover{border-color:var(--helios)}
.pa-pieces{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:10px;color:#c2cbe0}
.pa-grp{display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.3);border:1px solid #3a4a6b;
  border-radius:6px;padding:2px 6px}
.pa-grp .ico{font-size:11px}
/* Lower area: piece/resource counters on the left, drawn Mission cards on the right */
.pa-lower{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.pa-lower-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.pa-lower-info .pa-pieces{margin-top:0}
.pa-missions{flex:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-content:flex-start;max-width:62%}
.pa-mc{position:relative;width:104px;border-radius:6px;overflow:hidden;border:1.5px solid rgba(201,168,76,.55);
  box-shadow:0 3px 9px rgba(0,0,0,.45);cursor:pointer;background:#0e1626;transition:transform .12s,box-shadow .12s}
.pa-mc:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 6px 16px rgba(0,0,0,.6);border-color:var(--gold);z-index:2}
.pa-mc img{width:100%;display:block}
.pa-mc-fulfil{position:absolute;top:3px;right:3px;background:rgba(36,120,52,.92);color:#eafff0;font-size:9px;
  font-weight:700;padding:1px 5px;border-radius:8px;border:1px solid rgba(255,255,255,.4)}
.czm-box.czm-wide{width:min(640px,94vw)}
/* Mission-fulfil chooser (untiled Agora space) */
.mf-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;margin:10px 0 4px}
.mf-opt{display:flex;gap:10px;align-items:center;padding:7px;border-radius:9px;cursor:pointer;
  background:rgba(0,0,0,.28);border:1.5px solid #3a4a6b;transition:border-color .12s,background .12s,transform .1s}
.mf-opt:hover{border-color:var(--gold);background:rgba(201,168,76,.14);transform:translateY(-1px)}
.mf-opt.ready{border-color:rgba(36,140,60,.8)}
.mf-img{width:96px;flex:none;border-radius:5px;border:1px solid #b9a468;display:block}
.mf-meta{min-width:0;text-align:left}
.mf-code{font-family:Cinzel,serif;color:var(--gold);font-weight:700;font-size:14px;margin-bottom:3px}
.mf-badge{background:rgba(36,120,52,.92);color:#eafff0;font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.35);vertical-align:middle}
.mf-line{font-size:11.5px;color:#cdd6ea;line-height:1.35}
.mf-line b{color:var(--helios)}
/* Mission side picker (Sparta vs Persia) */
.ms-wrap{display:flex;gap:14px;align-items:stretch;margin:12px 0 6px;text-align:left}
.ms-card{width:150px;flex:none;border-radius:7px;border:1px solid #b9a468;align-self:center;display:block}
.ms-sides{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.ms-side{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;
  background:rgba(0,0,0,.30);border:1.6px solid #3a4a6b;border-radius:10px;padding:10px 13px;cursor:pointer;
  color:#e8eefc;transition:border-color .12s,background .12s,transform .1s}
.ms-side:hover{transform:translateY(-1px)}
.ms-side.sp:hover{border-color:#d2604a;background:rgba(210,96,74,.14)}
.ms-side.pe:hover{border-color:#4a78d2;background:rgba(74,120,210,.14)}
.ms-h{font-family:Cinzel,serif;font-weight:700;font-size:14px}
.ms-side.sp .ms-h{color:#e8896f}
.ms-side.pe .ms-h{color:#7fa6ee}
.ms-trg{font-size:12px;color:#aebbd6}
.ms-gain{font-size:13px;color:var(--helios);font-weight:600;line-height:1.3}
.unitchip{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.4);display:inline-block}
.dipchip{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:inline-block}

/* scoreboard */
.players{padding:10px;display:flex;flex-direction:column;gap:7px;border-bottom:1px solid #2a3a5c}
.pcard{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.22);border-radius:9px;
  padding:7px 10px;border-left:5px solid var(--stone);font-size:13px;position:relative}
.pcard.active{box-shadow:0 0 0 2px var(--gold);background:rgba(201,168,76,.12)}
.pdot{width:13px;height:13px;border-radius:50%;flex:none}
.pname{font-weight:700;flex:1;color:var(--parch)}
.pglory{font-family:Cinzel,serif;color:var(--gold);font-size:17px;font-weight:700}
.ptag{font-size:10px;color:var(--stone);letter-spacing:.04em}
.corrupt{color:#c98ad9 !important}
.fp{position:absolute;top:-6px;right:-6px;background:var(--gold);color:var(--navy);font-size:9px;
  font-weight:800;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}

/* action prompt */
#prompt{padding:10px 11px;background:linear-gradient(180deg,#1c2742,#162038);border-bottom:1px solid #2a3a5c}
#prompt:empty{display:none}
/* The objective banner — WHAT to do — pulses in the SAME gold as the glowing board spaces (the WHERE). */
#prompt .pq{color:#fff;font-size:14px;font-weight:700;line-height:1.35;margin-bottom:7px;
  background:linear-gradient(180deg,rgba(201,168,76,.30),rgba(201,168,76,.13));
  border:1.5px solid var(--gold);border-left:6px solid var(--gold);border-radius:9px;
  padding:9px 12px 9px 11px;animation:objpulse 1.7s ease-in-out infinite}
#prompt .pq b{color:var(--helios)}
#prompt .pq .pq-where{display:block;font-weight:600;font-size:11.5px;color:#ffe69a;margin-top:3px}
@keyframes objpulse{0%,100%{box-shadow:0 0 7px rgba(201,168,76,.22)}50%{box-shadow:0 0 17px rgba(201,168,76,.6)}}
#prompt .choices{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto}
/* Bottom-bar context: the prompt sits centered in the foot bar, compact and pill-shaped */
#topbar .tb-side{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
#topbar .tb-left{overflow:hidden}
#topbar .tb-right{justify-content:flex-end;flex-wrap:nowrap}
/* The prompt fills the open middle of the bar and centers its pill there (no overlap with the
   side groups even when the right cluster is wide). */
#topbar #prompt{flex:0 1 auto;min-width:0;display:flex;justify-content:center;align-items:center;
  background:none;border:none;box-shadow:none;padding:0 8px}
/* growing spacers either side of the [prompt + action buttons] cluster keep it centred in the
   bar while the title pins left and the toolbar pins right */
#topbar .tb-grow{flex:1 1 0;min-width:0}
#topbar #prompt .pq{display:inline-block;margin-bottom:0;padding:5px 16px;max-width:100%;font-size:12.5px;line-height:1.25;
  background:rgba(0,0,0,.3);border:1px solid rgba(201,168,76,.45);border-radius:11px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:normal}
#topbar #prompt .pq .pq-where{display:none}   /* the glow on the board carries the "where"; keep the bar compact */
#topbar #prompt .pq{margin-bottom:0;font-size:13px}
#topbar #prompt .pq .pq-where{margin-top:1px}
#topbar #prompt .choices{display:none}   /* interactive choosers use a modal, not the bar */
.choice{background:rgba(201,168,76,.1);border:1px solid var(--gold);color:var(--parch);text-align:left;
  padding:8px 11px;border-radius:8px;font-size:12.5px;line-height:1.35;transition:.12s}
.choice:hover{background:var(--gold);color:var(--navy)}
.choice .ck{color:var(--helios);font-weight:700}
.choice:hover .ck{color:var(--navy)}
.cancel{background:transparent;border:1px solid var(--stone);color:var(--stone)}
.cancel:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.choice.disabled{background:rgba(120,120,120,.08);border-color:#4a4636;color:#7c785f;cursor:not-allowed;opacity:.62}
.choice.disabled:hover{background:rgba(120,120,120,.08);color:#7c785f}
.choice .cnote{font-size:10.5px;color:#b07a5a;font-style:italic}

/* log — floating panel, toggled by the bottom-bar Log button */
#log{position:fixed;right:14px;bottom:74px;width:430px;max-height:62vh;z-index:300;display:none;
  overflow:auto;font-size:13.5px;line-height:1.6;color:#d3dbec;font-family:"SF Mono",Menlo,monospace;
  background:rgba(14,22,38,.97);border:1px solid var(--gold);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.6)}
#log.show{display:block}
.log-head{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(180deg,#1a2640,#12192c);border-bottom:1px solid var(--gold);
  font-family:Cinzel,serif;font-weight:700;color:var(--gold);font-size:13px}
.log-head .log-sp{flex:1}
.log-head button{background:rgba(0,0,0,.25);border:1px solid var(--stone);color:var(--parch);border-radius:6px;padding:2px 9px;font-size:13px;cursor:pointer}
.log-head button:hover{border-color:var(--helios)}
.log-body{padding:8px 12px}
.le{margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.05)}
.le.round{color:var(--gold);font-weight:700;margin-top:6px;font-family:Cinzel,serif}
.le.battle{color:#e88}
.le.score{color:var(--helios)}
.le b{color:#fff}

/* ---- sticky command footer (turn · status · main-action choices) ---- */
#railfoot{position:relative;z-index:8;flex:none;
  background:linear-gradient(180deg,#1a2640,#12192c);border-bottom:2px solid var(--gold);
  padding:9px 11px 11px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#railfoot:empty,#game.rail-collapsed #railfoot{display:none}
.foot-turn{font-family:Cinzel,serif;font-size:13px;color:var(--parch);font-weight:700;
  display:flex;align-items:center;gap:7px;margin-bottom:5px}
.foot-turn:empty{display:none}
.foot-turn .ft-dot{font-size:14px;line-height:1}
.foot-status{font-size:12px;color:var(--helios);line-height:1.4;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:5px}
.foot-status:empty{display:none}
.foot-status .status-arrow{color:var(--gold);font-weight:800;flex:none}
.foot-actions{display:flex;flex-direction:column;gap:7px}
.foot-actions:empty{display:none}
.foot-actions .topact{display:block;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(201,168,76,.22),rgba(201,168,76,.09));
  border:1.5px solid var(--gold);border-radius:9px;padding:9px 12px;color:#f3ecd8;
  font-size:13px;font-weight:600;line-height:1.3;transition:.14s;animation:pulse 1.3s infinite}
.foot-actions .topact:hover{background:linear-gradient(180deg,rgba(201,168,76,.42),rgba(201,168,76,.22));
  transform:translateY(-1px)}
/* Citizen size-choice buttons: a strong gold glow pulse so they clearly read as "the answer"
   to the status prompt sitting just to their left. */
.foot-actions .topact.sizepick{animation:sizepickPulse 1.15s ease-in-out infinite;
  background:linear-gradient(180deg,rgba(201,168,76,.42),rgba(201,168,76,.2));color:#fff6df}
.foot-actions .topact.sizepick:hover{animation:none;box-shadow:0 0 16px 5px rgba(232,201,122,.75)}
@keyframes sizepickPulse{
  0%{box-shadow:0 0 0 0 rgba(232,201,122,0);border-color:#a8862f}
  50%{box-shadow:0 0 18px 5px rgba(232,201,122,.7);border-color:#ffe69a}
  100%{box-shadow:0 0 0 0 rgba(232,201,122,0);border-color:#a8862f}}
.foot-actions .topact.endturn{text-align:center;font-family:Cinzel,serif;font-weight:700;letter-spacing:.3px;
  animation:endturnPulse 1.15s ease-in-out infinite;
  background:linear-gradient(180deg,rgba(46,125,116,.62),rgba(46,125,116,.34));border-color:#43d6c0;color:#eafaf5}
.foot-actions .topact.endturn:hover{background:linear-gradient(180deg,#2E7D74,#246057);color:#fff;animation:none;
  box-shadow:0 0 16px 5px rgba(67,214,192,.7)}
@keyframes endturnPulse{
  0%{box-shadow:0 0 0 0 rgba(67,214,192,0);border-color:#2E7D74}
  50%{box-shadow:0 0 17px 5px rgba(67,214,192,.68);border-color:#6ef0db}
  100%{box-shadow:0 0 0 0 rgba(67,214,192,0);border-color:#2E7D74}}
.foot-actions .topact.confirm{text-align:center;font-family:Cinzel,serif;font-weight:700;letter-spacing:.3px;
  background:linear-gradient(180deg,rgba(46,125,116,.55),rgba(46,125,116,.3));border-color:#2E7D74;color:#eafaf5}
.foot-actions .topact.confirm:hover{background:linear-gradient(180deg,#2E7D74,#246057);color:#fff}
.foot-actions .topact.ghost{text-align:center;animation:none;background:transparent;border-color:var(--stone);color:var(--stone);font-weight:600}
.foot-actions .topact.ghost:hover{background:rgba(255,255,255,.06);color:#dfe6f2}
.foot-actions .topact.undo{text-align:center;animation:none;background:linear-gradient(180deg,rgba(176,58,46,.42),rgba(176,58,46,.2));border-color:#b03a2e;color:#f3d9d5}
.foot-actions .topact.undo:hover{background:linear-gradient(180deg,#b03a2e,#8f2c22);color:#fff}
.ov-cell.sel{background:rgba(201,168,76,.34)!important;box-shadow:0 0 0 4px var(--helios),0 0 18px 5px rgba(255,224,130,.7)!important;animation:none!important}
/* Agora action-medallion overlays — row icons (right) + column icons (bottom).
   The board ART already paints these medallions, so the overlay is an INVISIBLE
   click hotspot that only lights the painted medallion up with a gold halo. No icon
   image is drawn on top (that caused a doubled "ghost" medallion). */
.ov-act-icon{width:5.4%;aspect-ratio:1;border-radius:50%;pointer-events:auto;z-index:30;
  background:transparent;transform:translate(-50%,-50%);
  transition:box-shadow .2s,transform .2s}
.ov-act-icon img{display:none}   /* board already shows the medallion — never draw the overlay icon */
/* During placement & for non-relevant medallions: invisible & still, just clickable */
.ov-act-icon.placing,.ov-act-icon.dimmed{box-shadow:none;animation:none}
/* Cell hover during placement: a soft gold halo teaches the row/column connection */
.ov-act-icon.highlight{box-shadow:0 0 13px 4px rgba(255,224,130,.5);
  transform:translate(-50%,-50%) scale(1.04)}
/* Pre-commit preview halo (kept for completeness) */
.ov-act-icon.preview{box-shadow:0 0 13px 4px rgba(201,168,76,.55);
  transform:translate(-50%,-50%) scale(1.04)}
/* ACTIVE: citizen is placed — the painted medallion now pulses, player must choose */
.ov-act-icon.active{animation:medglow 1.3s infinite;cursor:pointer;
  transform:translate(-50%,-50%) scale(1.06)}
/* Selected (actPick cell filter chosen, green halo) */
.ov-act-icon.selected{box-shadow:0 0 15px 5px rgba(46,125,116,.65);
  transform:translate(-50%,-50%) scale(1.04)}
.ov-act-icon:hover{box-shadow:0 0 16px 5px rgba(255,224,130,.7)!important;
  transform:translate(-50%,-50%) scale(1.07)!important;z-index:35;cursor:pointer}
@keyframes medglow{0%,100%{box-shadow:0 0 9px 2px rgba(67,214,192,.45)}
  50%{box-shadow:0 0 22px 8px rgba(67,214,192,.95)}}
/* ===== ON-BOARD ACTION CHOOSER — options live ON the board, never in the right rail =====
   Concrete choices (Build row, Activate-Unit type) render as clickable chips positioned over
   the real board element; abstract choices (House, Role) render as a small on-board panel. */
/* On-board action chips (the clickable "do this action here" buttons) pulse in END-TURN TEAL. */
.ov-actchip{pointer-events:auto;cursor:pointer;transform:translate(-50%,-50%);z-index:33;
  min-width:60px;padding:5px 9px;text-align:center;border-radius:10px;
  background:linear-gradient(170deg,#2a3354,#171d31);border:2px solid #43d6c0;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 12px rgba(67,214,192,.45);
  transition:box-shadow .15s,transform .15s;animation:chipPulse 1.2s ease-in-out infinite}
@keyframes chipPulse{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 8px rgba(67,214,192,.4)}
  50%{box-shadow:0 3px 12px rgba(0,0,0,.6),0 0 20px 4px rgba(67,214,192,.85)}}
.ov-actchip:hover{transform:translate(-50%,-50%) scale(1.07);animation:none;
  background:linear-gradient(170deg,#34406a,#222a44);
  box-shadow:0 5px 16px rgba(0,0,0,.6),0 0 18px rgba(67,214,192,.9)}
.ov-actchip .aci-k{display:block;font-family:Cinzel,serif;font-weight:800;font-size:12px;color:#9af0df;letter-spacing:.2px;white-space:nowrap}
.ov-actchip .aci-sub{display:block;font-size:9px;color:#cdd6ea;margin-top:1px;white-space:nowrap}
.ov-actpanel{pointer-events:auto;transform:translate(-50%,-50%);z-index:32;width:max-content;max-width:48%;
  padding:9px 12px;text-align:center;border-radius:12px;
  background:rgba(15,20,36,.93);border:1.5px solid var(--gold);box-shadow:0 8px 26px rgba(0,0,0,.6)}
.ov-actpanel .acp-title{font-family:Cinzel,serif;font-weight:800;font-size:13px;color:var(--gold);margin-bottom:7px}
.ov-actpanel .acp-opts{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.ov-actpanel .acp-btn{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:96px;
  padding:7px 11px;border-radius:9px;color:var(--parch);font-size:11px;font-weight:700;
  background:linear-gradient(170deg,#2a3354,#171d31);border:1.5px solid #43d6c0;transition:box-shadow .15s,transform .12s;
  animation:chipPulse 1.2s ease-in-out infinite}
.ov-actpanel .acp-btn:hover{transform:translateY(-1px);animation:none;box-shadow:0 0 14px rgba(67,214,192,.7)}
.ov-actpanel .acp-btn .acp-sub{font-size:9px;font-weight:400;color:#aab6d0;white-space:normal}
.ov-actpanel .acp-btn.cancel{min-width:0;border-color:#6b7280;color:#9aa6c0;background:rgba(40,48,68,.7);animation:none}

/* ===== ZONE-SPECIFIC: Parthenon legend, Stoa, board image, bottom bar ===== */
.parth-legend .plrow{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:10px;color:#c2cbe0}
.parth-legend .plrow .pgl{font-family:Cinzel,serif;font-size:9px;text-transform:uppercase;letter-spacing:.04em;width:62px;flex:none}
.parth-legend .cols{display:flex;gap:2px;align-items:flex-end}
.stoa-grid{display:flex;flex-wrap:wrap;gap:5px}
.stoa-cell{background:rgba(0,0,0,.28);border:1px solid #3a4a6b;border-radius:7px;padding:5px 7px;
  font-size:9.5px;color:#aeb8cf;min-width:60px;text-align:center}
.stoa-cell .sv{font-family:Cinzel,serif;color:var(--helios);font-size:13px;font-weight:700}
.boardimg-wrap{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(201,168,76,.35);margin-top:6px}
.boardimg-wrap img{width:100%;display:block;opacity:.96}
.offer-cards{display:flex;gap:9px;flex-wrap:wrap}
.ocard{width:118px;border-radius:9px;overflow:hidden;border:2px solid #b9a468;background:#1a2030;
  box-shadow:0 4px 12px rgba(0,0,0,.4);position:relative;transition:.12s}
.ocard img{width:100%;display:block}
.ocard.pick{cursor:pointer;box-shadow:0 0 0 3px var(--gold)}
.ocard.pick:hover{transform:translateY(-4px)}
.ocard .ofallback{padding:7px 6px;color:#2a2418;background:linear-gradient(170deg,#f3ecd8,#e2d6b8);min-height:120px}
.bottombar{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.bb-cell{flex:1 1 auto}
.bb-comp{flex:0 0 132px}
.bb-comp img{width:100%;border-radius:8px;border:1px solid rgba(201,168,76,.3);display:block}
.bb-progress{flex:2 1 320px;min-width:280px}
.bb-diplo{flex:2 1 340px;min-width:300px}
.bb-ostr{flex:1 1 180px;min-width:160px}
.bb-decks{flex:1 1 200px;min-width:180px}
.decks{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.deckpile{display:flex;flex-direction:column;align-items:center;gap:2px;width:46px}
.deckpile .deckcard{width:44px;height:66px;object-fit:cover;border-radius:5px;border:1px solid rgba(201,168,76,.45);
  box-shadow:0 1px 3px rgba(0,0,0,.5);display:block}
.deckpile .deckcard.ph{background:repeating-linear-gradient(45deg,#1c2742,#1c2742 4px,#222e4d 4px,#222e4d 8px)}
.deckpile.empty{opacity:.5}
.deckpile.demag .deckcard{border-color:rgba(176,58,46,.7)}
.deckcount{font-family:Cinzel,serif;font-size:11px;color:var(--gold);font-weight:700;line-height:1}
.decklbl{font-size:8px;color:#9fb0cc;text-transform:uppercase;letter-spacing:.3px;text-align:center}
.rail-decks{margin:6px 0;padding:6px 8px;background:rgba(20,29,49,.5);border:1px solid rgba(201,168,76,.25);border-radius:8px}
.rail-decks .rd-label{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#9fb0cc;margin-bottom:4px}
.rail-decks .decks{justify-content:flex-start;gap:9px}
.rail-decks .deckpile{width:40px}
.rail-decks .deckpile .deckcard{width:38px;height:54px}
/* ===== Skill cards (visual-first module) ===== */
.deckpile.skill .deckcard{border-color:rgba(201,168,76,.6)}
.deckpile.skill:hover .deckcard{border-color:var(--helios);box-shadow:0 0 10px rgba(232,201,122,.5)}
.pa-skills{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:5px;justify-content:flex-end;max-width:62%;margin-top:6px}
.pa-sk-lbl{font-size:9px;color:#9fb0cc;letter-spacing:.3px}
.pa-sc{position:relative;width:42px;border-radius:5px;overflow:hidden;border:1.5px solid var(--sc,rgba(201,168,76,.6));
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.55);transition:transform .12s}
.pa-sc:hover{transform:translateY(-3px) scale(1.05);z-index:3}
.pa-sc img{width:100%;display:block}
.sk-choose{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.sk-opt{width:210px;cursor:pointer;border-radius:11px;border:2px solid rgba(201,168,76,.5);overflow:hidden;
  background:#0e1628;transition:transform .14s,box-shadow .14s}
.sk-opt:hover{transform:translateY(-6px);box-shadow:0 10px 26px rgba(0,0,0,.6)}
.sk-opt img{width:100%;display:block}
.sk-opt .sk-ttl{font-family:Cinzel,serif;color:var(--gold);font-size:15px;padding:7px 10px 0}
.sk-opt .sk-sub{font-size:10.5px;color:#9fb0cc;padding:0 10px 5px;font-style:italic}
.sk-opt .sk-eff{font-size:11.5px;color:#dbe2f1;padding:0 10px 9px;line-height:1.4}
/* card-flip entrance (Stage 4 depth) */
@keyframes cardFlipIn{0%{transform:perspective(900px) rotateY(82deg);opacity:0}55%{opacity:1}100%{transform:perspective(900px) rotateY(0);opacity:1}}
.flip-in{animation:cardFlipIn .5s cubic-bezier(.2,.7,.2,1) both;transform-origin:center}
/* Stage 4: token depth — drop shadows on movable pieces (clicks unaffected) */
.pb-piece,.ov-cs-stack img,.ov-cs-travel img{filter:drop-shadow(0 3px 2.5px rgba(0,0,0,.55))}
/* Stage 4: soft far-edge shadow on the board — pure visual, pointer-events:none so it never blocks clicks */
.boardstage::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:4;
  background:linear-gradient(to bottom,rgba(8,12,22,.32) 0%,rgba(8,12,22,0) 17%,rgba(8,12,22,0) 87%,rgba(8,12,22,.20) 100%)}
.rail-decks .supply{display:flex;gap:12px;justify-content:flex-start}
.rail-decks .sup{display:flex;flex-direction:column;align-items:center;gap:2px;width:46px}
.rail-decks .sup img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.rail-decks .suplbl{font-size:8px;color:#9fb0cc;text-transform:uppercase;letter-spacing:.3px}
.rail-decks .supcount{font-size:13px;font-weight:700;color:#f0e3bd;line-height:1;margin-top:1px}
.rail-decks .sup.out{opacity:.42}
.rail-decks .sup.out .supcount{color:#e07a6a}
#settingsPanel{position:fixed;right:14px;top:46px;z-index:60;background:#16203a;border:1px solid #c9a84c;border-radius:10px;padding:11px 14px;box-shadow:0 8px 24px rgba(0,0,0,.55);min-width:236px}
#settingsPanel.hidden{display:none}
#settingsPanel .setrow{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:12px;color:#dfe6f2}
#settingsPanel .setlbl{min-width:96px;color:#cdd6ea}
#settingsPanel .setbtns{display:flex;gap:4px}
#settingsPanel .setbtns button,#settingsPanel .toggle{background:#22304f;color:#cdd6ea;border:1px solid #3a4a6b;border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer}
#settingsPanel .setbtns button.on,#settingsPanel .toggle.on{background:var(--gold);color:#1b1205;border-color:var(--gold);font-weight:700}
#settingsPanel .sethint{font-size:9px;color:#7c89a6;font-style:italic}
.learn-mode .boardstage::before{content:'';position:absolute;inset:0;background:rgba(8,12,22,.10);z-index:20;pointer-events:none;border-radius:12px}
/* element-based Learn hotspots (cards, tiles, boards, supply) — subtle hover affordance, only in Learn mode */
.learn-mode [data-guide]{cursor:help;outline:2px dashed rgba(255,224,130,0);outline-offset:2px;border-radius:6px;transition:outline-color .12s}
.learn-mode [data-guide]:hover{outline-color:var(--gold)}
.guide-hot{position:absolute;border:1.5px dashed rgba(255,224,130,.55);background:rgba(20,29,49,.10);border-radius:8px;cursor:pointer;z-index:30;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;transition:.12s}
.guide-hot:hover{background:rgba(201,168,76,.28);border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.guide-hot span{font:700 10px/1.2 Cinzel,serif;color:#fff;background:rgba(20,29,49,.82);padding:2px 6px;border-radius:0 0 6px 6px;opacity:0;transition:.12s;max-width:98%;text-align:center}
.guide-hot:hover span{opacity:1}
#gxModal{position:fixed;inset:0;z-index:200;background:rgba(8,12,22,.78);display:flex;align-items:center;justify-content:center;padding:20px}
#gxModal.hidden{display:none}
.gx-card{position:relative;background:#16203a;border:1px solid var(--gold);border-radius:14px;padding:18px 20px;max-width:800px;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.gx-close{position:absolute;right:10px;top:10px;background:#22304f;color:#cdd6ea;border:1px solid #3a4a6b;border-radius:6px;padding:3px 10px;cursor:pointer;font-size:13px}
.gx-img{display:flex;justify-content:center;margin-bottom:12px;min-height:40px}
.gx-img img,.gx-img canvas{max-width:100%;max-height:460px;border-radius:8px;border:1px solid rgba(201,168,76,.4);display:block}
.gx-title{font:700 20px/1.2 Cinzel,serif;color:var(--gold);margin-bottom:6px}
.gx-gen{color:#dfe6f2;font-size:14px;margin-bottom:6px}
.gx-spec{color:#aab6cf;font-size:13px;line-height:1.5}
.fly-token{position:fixed;z-index:80;width:26px;height:26px;pointer-events:none;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));will-change:transform,opacity}
.res-pulse{display:inline-block;animation:resPulse .6s ease-out}
@keyframes resPulse{0%{filter:drop-shadow(0 0 0 rgba(255,224,130,0));transform:scale(1)}40%{filter:drop-shadow(0 0 7px rgba(255,224,130,.95));transform:scale(1.2)}100%{filter:drop-shadow(0 0 0 rgba(255,224,130,0));transform:scale(1)}}
.flip-pulse{z-index:40!important;animation:gloryPulse .55s ease-out}
@keyframes gloryPulse{0%{filter:drop-shadow(0 0 0 rgba(255,224,130,0))}35%{filter:drop-shadow(0 0 9px rgba(255,224,130,1)) drop-shadow(0 0 16px rgba(255,224,130,.9))}100%{filter:drop-shadow(0 0 0 rgba(255,224,130,0))}}
.ostr-camp{display:flex;flex-wrap:wrap;gap:6px}
.ostr-p{background:rgba(0,0,0,.3);border:1px solid #3a4a6b;border-radius:8px;padding:5px 8px;font-size:10px;color:#c2cbe0;
  border-left:4px solid var(--seat,#888)}
.ostr-p .on{font-size:9px;color:var(--helios)}

/* ---------- BOARD (legacy section styles still used by sub-renderers) ---------- */
.board{background:transparent;border:none;padding:0;margin:0}
.bsection{margin-bottom:13px}
.blabel{font-family:Cinzel,serif;color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:6px;display:flex;align-items:center;gap:8px}
.blabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.5),transparent)}

/* Agora 3x3 */
.agora{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:560px}
.cell{background:rgba(0,0,0,.28);border:1px solid #3a4a6b;border:1px solid #3a4a6b;border-radius:10px;
  min-height:84px;padding:7px;position:relative;transition:.12s;display:flex;flex-direction:column}
.cell.tiled{background:linear-gradient(155deg,#3a4a6b,#2c3a5c);background:linear-gradient(155deg,#34406a,#26314f);border-color:var(--helios)}
.cell.pick{cursor:pointer;box-shadow:0 0 0 2px var(--gold);animation:pulse 1.3s infinite}
.cell.pick:hover{background:rgba(201,168,76,.2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px var(--gold)}50%{box-shadow:0 0 0 4px rgba(201,168,76,.5)}}
.cell .cs-img{width:100%;height:46px;object-fit:cover;object-position:50% 28%;border-radius:6px;margin-bottom:4px;border:1px solid rgba(201,168,76,.3)}
.cell .cs-name{font-family:Cinzel,serif;font-size:10.5px;color:var(--helios);line-height:1.1;margin-bottom:2px}
.cell .cs-act{font-size:9px;color:#aeb8cf;line-height:1.25;flex:1}
.cell .base-act{font-size:9px;color:#8794ad;font-style:italic}
.cit-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cit{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);font-size:9px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.cit.lg{width:19px;height:19px;border-radius:5px;font-size:10px}
.colhdr{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:560px;margin-bottom:4px}
.rowhdr{font-size:9px;color:var(--gold);writing-mode:vertical-rl;text-orientation:mixed}
.offc{font-size:9px;color:var(--helios);text-align:center;letter-spacing:.05em;text-transform:uppercase}
.agora-wrap{display:grid;grid-template-columns:18px 1fr;gap:5px;align-items:center}
.rowlabels{display:flex;flex-direction:column;gap:7px}
.rowlabels div{flex:1;display:flex;align-items:center;justify-content:center;font-size:8.5px;color:var(--gold);
  writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.05em;text-transform:uppercase;min-height:84px}

/* generic flex track */
.flexrow{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.slot{background:rgba(0,0,0,.25);border:1px solid #3a4a6b;border-radius:8px;padding:5px 8px;font-size:10.5px;
  min-width:42px;text-align:center;position:relative;color:#c2cbe0}
.slot.atk{box-shadow:0 0 0 2px var(--bad)}
.slot.pick{cursor:pointer;box-shadow:0 0 0 2px var(--gold)}
.slot.pick:hover{background:rgba(201,168,76,.2)}
.slot .sv{font-family:Cinzel,serif;color:var(--gold);font-weight:700;font-size:12px}
.cubes{display:flex;gap:2px;justify-content:center;margin-top:3px;min-height:12px;flex-wrap:wrap}
.cube{width:11px;height:11px;border-radius:2px;border:1px solid rgba(0,0,0,.4)}

/* progress track rows */
.prow{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ptag2{width:74px;font-size:9.5px;font-family:Cinzel,serif;text-transform:uppercase;letter-spacing:.05em;text-align:right;padding-right:4px}
.ptag2.mil{color:#e08a8a}.ptag2.eco{color:#e0c478}.ptag2.cul{color:#7cc9bf}

/* market */
.market{display:flex;gap:10px}
.mcol{background:rgba(0,0,0,.22);border:1px solid #3a4a6b;border-radius:9px;padding:7px;text-align:center;min-width:74px}
.mcol .mh{font-size:9.5px;color:var(--helios);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.amph{width:18px;height:22px;margin:1px auto;border-radius:3px 3px 7px 7px;background:linear-gradient(180deg,#c98f5a,#9c6a3c);
  border:1px solid #6e4a28;position:relative}
.amph::before{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:8px;height:5px;
  border:1px solid #6e4a28;border-bottom:none;border-radius:5px 5px 0 0}
.mslot{min-height:24px;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed rgba(255,255,255,.08)}
.mrow-rew{font-size:8px;color:var(--stone);margin-top:1px}

/* card offer */
.cards{display:flex;gap:8px}
.acard{width:88px;background:linear-gradient(170deg,#f3ecd8,#e2d6b8);border-radius:8px;padding:7px 6px;color:#2a2418;
  position:relative;border:2px solid #b9a468;box-shadow:0 3px 8px rgba(0,0,0,.35);min-height:104px;display:flex;flex-direction:column}
.acard.pick{cursor:pointer;box-shadow:0 0 0 3px var(--gold)}
.acard.pick:hover{transform:translateY(-3px)}
.acard .atype{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:1px 5px;border-radius:8px;align-self:flex-start;color:#fff}
.acard .aname{font-family:Cinzel,serif;font-size:11px;font-weight:700;margin:5px 0 3px;line-height:1.05}
.acard .arew{font-size:8.5px;color:#5a4f38;flex:1;line-height:1.2}
.acard .aglory{font-family:Cinzel,serif;font-weight:800;font-size:13px;color:#7a5d1f;text-align:right}
.t-Economy{background:var(--eco)}.t-Culture{background:var(--cul)}.t-Military{background:var(--mil)}.t-Universal{background:var(--uni)}

/* battle track */
.btrack{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.btrack .rival{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex:none;border:2px solid #fff}
.rival.sparta{background:#9a2c2c}.rival.persia{background:#7a3c8c}
.bspace{width:26px;height:22px;border:1px solid #3a4a6b;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#8794ad}
.bspace.hop{background:rgba(255,255,255,.08)}

/* parthenon */
.parth{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.pcol-group{text-align:center}
.pcol-group .pgl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-family:Cinzel,serif}
.cols{display:flex;gap:3px;align-items:flex-end;justify-content:center}
.col{width:11px;background:#3a4a6b;border-radius:2px 2px 0 0;border:1px solid #4a5a7b}
.col.built{background:linear-gradient(180deg,#e8dcc0,#c9b88a);border-color:#b9a468}

/* oikos / storage mini */
.oikos{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:#c2cbe0}
.oikos .ob{background:rgba(0,0,0,.22);border:1px solid #3a4a6b;border-radius:9px;padding:8px 11px;min-width:120px}
.oikos .ob h4{font-size:9px;color:var(--helios);text-transform:uppercase;letter-spacing:.06em;margin:0 0 5px}
.res-line{display:flex;gap:9px;flex-wrap:wrap}
.res-line span{display:inline-flex;align-items:center;gap:3px}
.pip{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:middle}
.pip.silver{background:radial-gradient(circle at 35% 30%,#fff,#b9c0cc);border:1px solid #8a93a3;border-radius:50%}
.pip.amph{background:linear-gradient(180deg,#c98f5a,#9c6a3c);border:1px solid #6e4a28}
.pip.troph{background:linear-gradient(180deg,#d9c98a,#a8923f);border:1px solid #7a6a2a;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pip.card{background:#e2d6b8;border:1px solid #b9a468}

/* sim screen */
#sim{position:fixed;inset:0;display:none;flex-direction:column;background:var(--navy);padding:26px;overflow:auto}
#sim h2{color:var(--gold);font-size:24px;margin-bottom:4px}
#sim .simctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
#sim input,#sim select{background:rgba(0,0,0,.3);border:1px solid var(--stone);color:var(--parch);
  padding:8px 10px;border-radius:8px;font-family:inherit;font-size:14px}
#simout{background:#0e1626;border:1px solid #2a3a5c;border-radius:10px;padding:16px;margin-top:14px;
  font-family:"SF Mono",Menlo,monospace;font-size:12.5px;color:#c9d2e4;white-space:pre-wrap;line-height:1.6;flex:1;overflow:auto}
.bar{height:15px;background:linear-gradient(90deg,var(--gold),var(--helios));border-radius:4px;display:inline-block;vertical-align:middle}
table.simtab{border-collapse:collapse;margin-top:8px;width:100%;max-width:680px}
table.simtab td,table.simtab th{border:1px solid #2a3a5c;padding:5px 9px;text-align:left;font-size:12.5px}
table.simtab th{color:var(--gold);background:rgba(0,0,0,.25)}

/* toast */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--navy2);
  border:1px solid var(--gold);color:var(--parch);padding:10px 18px;border-radius:10px;font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);z-index:50;opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:1}
/* Demagogue reveal modal */
.demag-reveal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(6,10,20,.55);animation:drFade .2s ease}
@keyframes drFade{from{opacity:0}to{opacity:1}}
.dr-card{background:linear-gradient(160deg,#2a1518,#1a0d10);border:2px solid #b03a2e;border-radius:14px;
  padding:16px 18px;max-width:280px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.6);cursor:pointer}
.dr-h{font-family:Cinzel,serif;color:#e6b34a;font-size:15px;letter-spacing:.04em;margin-bottom:8px}
.dr-img{width:128px;border-radius:8px;border:1px solid rgba(230,179,74,.4);box-shadow:0 4px 14px rgba(0,0,0,.5);margin-bottom:8px}
.dr-code{font-family:monospace;font-size:10px;color:#caa;margin-bottom:6px}
.dr-list{list-style:none;margin:0 0 8px;padding:0;text-align:left}
.dr-list li{font-size:12px;color:#f0dcc4;padding:2px 0 2px 16px;position:relative}
.dr-list li:before{content:"\25B8";position:absolute;left:2px;color:#b03a2e}
.dr-x{font-size:9px;color:#9a8;opacity:.7}
.endover{position:fixed;inset:0;background:rgba(8,12,22,.92);display:none;align-items:center;justify-content:center;z-index:60}
.endcard{background:linear-gradient(160deg,#23304f,#141d31);border:2px solid var(--gold);border-radius:16px;
  padding:32px 40px;text-align:center;max-width:460px}
.endcard h2{color:var(--gold);font-size:28px;margin-bottom:10px}
.endcard .rank{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px}
.endcard .rank.win{color:var(--gold);font-weight:700;font-size:18px}

/* ---------- ROLE PICK (intro) ---------- */
#role-h{color:var(--gold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.rolebtn{font-family:Cinzel,serif;letter-spacing:.02em}

/* ---------- ANIMATED SETUP OVERLAY ---------- */
#setupOverlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at top,rgba(42,61,104,.96),rgba(10,16,30,.97));backdrop-filter:blur(3px);
  transition:opacity .35s}
#setupOverlay.fade{opacity:0;pointer-events:none}   /* once fading out, never intercept board clicks */
.su-card{width:min(880px,94vw);max-height:92vh;overflow:auto;background:linear-gradient(160deg,#1d2a48,#141d31);
  border:2px solid var(--gold);border-radius:18px;padding:24px 28px;box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}
.su-title{font-family:Cinzel,serif;color:var(--gold);font-size:24px;letter-spacing:.05em;margin-bottom:4px}
.su-step{color:var(--helios);font-size:14px;min-height:20px;margin-bottom:18px;transition:.2s}
.su-stage{}
.su-seats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.su-seat{width:128px;display:flex;flex-direction:column;align-items:center;gap:5px}
.su-ava-wrap{position:relative}
.su-ava{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:3px solid var(--seat,#888);background:#0e1626}
.su-fp-slot{position:absolute;top:-8px;right:-12px}
.su-fptoken{width:34px;height:34px;border-radius:50%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  animation:fpDrop .55s cubic-bezier(.2,1.3,.5,1)}
@keyframes fpDrop{0%{transform:translateY(-60px) scale(.3) rotate(-90deg);opacity:0}
  70%{transform:translateY(4px) scale(1.12) rotate(8deg);opacity:1}100%{transform:none}}
.su-fp-tag{color:var(--navy);background:var(--gold);font-size:9px;font-weight:800;border-radius:8px;padding:1px 5px;font-family:sans-serif}
.su-seatname{font-size:12px;color:var(--parch);font-weight:600}
.su-roleslot{position:relative;height:96px;width:100%;display:flex;align-items:flex-start;justify-content:center}
.su-roletile{width:50px;border-radius:6px;border:1px solid rgba(201,168,76,.5);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.su-setupcard{width:42px;border-radius:5px;border:1px solid rgba(201,168,76,.4);position:absolute;left:50%;top:8px;
  transform:translateX(6px) rotate(7deg);box-shadow:0 5px 12px rgba(0,0,0,.55)}
.su-rolename{position:absolute;bottom:-2px;left:0;right:0;font-family:Cinzel,serif;font-size:10px;color:var(--helios)}
.pop{animation:popIn .4s cubic-bezier(.2,1.3,.5,1)}
.pop2{animation:popIn .5s .12s backwards cubic-bezier(.2,1.3,.5,1)}
@keyframes popIn{0%{transform:scale(.2) translateY(-20px);opacity:0}100%{opacity:1}}
/* Back button (top-left of the setup card) */
.su-card{position:relative}
.su-back{position:absolute;left:18px;top:16px;background:rgba(0,0,0,.32);border:1px solid var(--stone);
  color:var(--parch);padding:6px 13px;border-radius:9px;font-size:13px;cursor:pointer;transition:.15s;z-index:2}
.su-back:hover{border-color:var(--helios);color:var(--helios)}
/* Image-load bar */
.su-loadwrap{margin-top:22px;max-width:460px;margin-left:auto;margin-right:auto}
.su-loadlabel{color:var(--helios);font-size:13px;margin-bottom:8px;letter-spacing:.03em}
.su-loadbar{height:12px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid rgba(201,168,76,.4);overflow:hidden}
.su-loadfill{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,var(--gold),var(--helios));
  transition:width .25s ease}

/* empty avatar slot before a seat has drafted */
.su-ava-empty{display:flex;align-items:center;justify-content:center}
.su-ava-empty::after{content:"?";color:#6b7280;font-family:Cinzel,serif;font-size:22px}
/* human role-draft pick panel */
.su-pick{max-height:0;overflow:hidden;opacity:0;transition:.3s;margin-top:6px}
.su-pick.show{max-height:1200px;opacity:1;margin-top:14px}
.su-pick-h{color:var(--gold);font-family:Cinzel,serif;font-size:14px;margin-bottom:10px}
.su-pick-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.su-pick-tile{background:rgba(0,0,0,.28);border:1.5px solid var(--stone);border-radius:13px;
  padding:12px 12px 10px;width:236px;display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:.14s;color:var(--parch)}
.su-pick-tile:hover{border-color:var(--gold);background:rgba(201,168,76,.14);transform:translateY(-4px)}
.su-pick-tile img{width:196px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.55)}
/* Draft: show only the TOP of the Summary card (roles + starting bonuses), crop the turn-summary half. */
.su-pick-tile img.su-pick-setup{width:212px;height:104px;object-fit:cover;object-position:50% 0%;border:1.5px solid rgba(201,168,76,.55)}
.su-pick-tile span{font-family:Cinzel,serif;font-size:15px;color:var(--helios);margin-top:2px}
.su-pick-tile small{font-size:10px;color:var(--stone)}
.su-pick-hint{font-size:9.5px;color:#8fa4c0;text-align:center;line-height:1.35;margin-top:2px;padding:3px 4px;
  background:rgba(0,0,0,.25);border-radius:5px;width:100%}

/* ===== REAL COMPONENT PIECES (recoloured renders) ===== */
.pc{display:block;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
/* Citizens on an Agora space FAN (overlap) instead of wrapping, so a 3rd/4th token is never
   buried behind another — each later token slides left over the previous, all stay visible. */
.ov-cits{gap:0;flex-wrap:nowrap;overflow:visible}
.ov-cits .pc-cit{width:37px;height:37px;object-fit:contain;margin:0}
.ov-cits .pc-cit:not(:first-child){margin-left:-15px}
.ov-cits .pc-cit.lg{width:52px;height:52px}
.ov-cits .pc-cit.lg:not(:first-child){margin-left:-22px}
.pc-glory{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.pc-unit{width:34px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.pc-cube{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pc-amph{width:21px;height:25px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* ===== PARTHENON (real board, always visible) ===== */
/* Frame the Parthenon area as one panel so the cropped (narrow) board sits matted in the centre
   instead of stranded against the page, with the side space reading as intentional margin. */
.parth-block{margin:0;background:rgba(8,14,28,.45);border:1px solid #2c3a5b;border-radius:12px;padding:9px 9px 11px}
.parth-head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 2px 5px}
.parth-head .zlabel{margin:0}
.parth-head .parth-counts{display:flex;gap:7px;flex-wrap:wrap;font-family:Cinzel,serif;font-size:11px}
.parth-counts .pc-chip{background:rgba(0,0,0,.32);border:1px solid #3a4a6b;border-radius:7px;padding:2px 8px;color:#dfe6f2}
.parth-counts .pc-chip b{color:#fff;font-weight:700}
.parth-counts .pc-chip.mil{border-color:#8C3B3B}.parth-counts .pc-chip.eco{border-color:#C79A3A}
.parth-counts .pc-chip.cul{border-color:#2E7D74}.parth-counts .pc-chip.uni{border-color:#6d5a8c}
.parthstage{position:relative;line-height:0;border-radius:12px;overflow:hidden;
  border:2px solid rgba(201,168,76,.5);box-shadow:0 10px 40px rgba(0,0,0,.5);
  /* cropped to the hex grid (see PARTH_CROP): height-capped so the column compacts; width follows
     the cropped aspect (set inline) and the board centers in the rail. */
  height:clamp(280px,40vh,400px);width:auto;max-width:100%;margin:0 auto}
/* inner layer holds the full board image + column overlays; scaled/offset so only the hex grid is
   visible through the clipped stage. Columns are children here, so they scale in lockstep — alignment preserved. */
.parth-zoom{position:absolute;top:0;left:0;width:100%;transform-origin:0 0}
.parth-base{width:100%;display:block}
.parth-col{position:absolute;height:11%;transform:translate(-50%,-56%);z-index:3;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));pointer-events:none;animation:colRise .45s cubic-bezier(.2,1.2,.5,1)}
@keyframes colRise{0%{opacity:0;transform:translate(-50%,-28%) scaleY(.4)}100%{opacity:1;transform:translate(-50%,-56%) scaleY(1)}}
.parth-roof{position:absolute;top:1.5%;width:8%;z-index:4;transform:translateX(-50%);
  font-family:Cinzel,serif;font-size:13px;text-align:center;color:#caa94c}
/* ===== RAIL PIECES ===== */
.uimg{width:23px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));vertical-align:middle}
.dimg{width:15px;height:15px;object-fit:contain;vertical-align:middle}
.resico{width:15px;height:15px;object-fit:contain;vertical-align:middle;margin-right:1px}

/* ===== HOW TO PLAY overlay ===== */
#helpOverlay{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;
  background:rgba(6,10,20,.74);backdrop-filter:blur(3px);padding:24px}
#helpOverlay.show{display:flex}
.help-card{width:min(760px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(165deg,#21304f,#141d31);
  border:2px solid var(--gold);border-radius:16px;padding:26px 30px;box-shadow:0 24px 70px rgba(0,0,0,.65);position:relative}
.help-card h2{font-family:Cinzel,serif;color:var(--gold);font-size:23px;margin-bottom:2px}
.help-card .help-sub{color:var(--helios);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.help-card h3{font-family:Cinzel,serif;color:var(--helios);font-size:14px;letter-spacing:.04em;margin:16px 0 6px;
  border-bottom:1px solid rgba(201,168,76,.25);padding-bottom:4px}
.help-card p,.help-card li{color:#d7deee;font-size:13.5px;line-height:1.55}
.help-card ul{margin:4px 0 4px 2px;padding-left:18px}
.help-card li{margin-bottom:3px}
.help-card b{color:#fff}
.help-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;margin-top:2px}
.help-act{display:flex;gap:8px;align-items:baseline}
.help-act .han{font-family:Cinzel,serif;color:var(--gold);font-size:12.5px;flex:0 0 auto;min-width:108px}
.help-key{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.help-key .kc{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);border:1px solid #3a4a6b;
  border-radius:8px;padding:4px 9px;font-size:12px;color:#cdd6ea}
.help-key .kc img{width:24px;height:26px;object-fit:contain}
.help-close{position:absolute;top:14px;right:16px;background:rgba(0,0,0,.3);border:1px solid var(--stone);
  color:var(--parch);border-radius:9px;padding:7px 13px;font-size:13px;cursor:pointer}
.help-close:hover{border-color:var(--helios);color:var(--helios)}
.help-start{display:block;width:100%;margin-top:20px;background:linear-gradient(180deg,var(--gold),#a8862f);
  color:var(--navy);border:none;border-radius:11px;padding:13px;font-size:16px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer}
.help-start:hover{filter:brightness(1.08)}
#helpBtn{background:rgba(201,168,76,.18)!important;border-color:var(--gold)!important;color:var(--helios)!important}

/* ===== 2-COLUMN BOARD: Parthenon (portrait, left) + Athens (right) ===== */
.board-cols{display:flex;gap:2px;align-items:flex-start}
.parth-left{flex:0 0 322px;max-width:322px;position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:6px}
.board-main{flex:1 1 auto;min-width:0;max-width:calc((100vh - 92px) * 1.191)}
@media(max-width:1120px){ .board-cols{flex-direction:column} .parth-left{flex:none;max-width:560px;position:static} }
/* players now live in the left column under the Parthenon */
.parth-left .rail-players{padding:0;border-bottom:none;gap:7px}
.parth-left .parea{padding:7px}
.parth-left .playarea{gap:7px}
#prompt:empty{display:none}
.topact{background:linear-gradient(180deg,var(--gold),#a8862f);color:var(--navy);border:none;border-radius:8px;
  padding:6px 12px;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.4);animation:pulse 1.3s infinite}
.topact:hover{filter:brightness(1.1)}