:root{--gold:#c9a227;--goldb:#f0c040;--pg:#d4b896;--pgd:#b8956a;--panel:rgba(14,8,2,0.95)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0a0500;color:var(--pg);font-family:Georgia, 'Times New Roman', serif;overflow:hidden;height:100vh}
#app{display:flex;flex-direction:column;height:100vh}
#hdr{background:linear-gradient(180deg,#0a0500,#140800);border-bottom:2px solid var(--gold);padding:4px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:10}
#htitle{font-family:Georgia, 'Times New Roman', serif;font-size:17px;font-weight:800;color:var(--gold);letter-spacing:3px;text-shadow:0 0 18px rgba(201,162,39,.5)}
.hsub{font-size:9px;color:var(--pgd);letter-spacing:2px;font-family:Georgia, 'Times New Roman', serif}
#phase{font-family:Georgia, 'Times New Roman', serif;font-size:12px;color:var(--goldb);text-align:center}
#tinfo{font-size:11px;color:var(--pgd);text-align:right}
#main{display:flex;flex:1;overflow:hidden}
#lp{width:180px;min-width:180px;background:var(--panel);border-right:1px solid var(--gold);padding:7px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;z-index:5}
.pt{font-family:Georgia, 'Times New Roman', serif;font-size:9px;letter-spacing:2px;color:var(--gold);border-bottom:1px solid rgba(201,162,39,.3);padding-bottom:2px;margin-bottom:3px}
.pc{border:1px solid rgba(201,162,39,.22);border-radius:2px;padding:5px;background:rgba(255,255,255,.02)}
.pc.act{border-color:var(--goldb);background:rgba(201,162,39,.09)}
.pc .fn{font-family:Georgia, 'Times New Roman', serif;font-size:10px;font-weight:600}
.pc .st{font-size:9px;color:var(--pgd);margin-top:2px}
.pd{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px}
.ab{width:100%;padding:5px;background:linear-gradient(180deg,#251400,#100700);border:1px solid var(--gold);color:var(--gold);font-family:Georgia, 'Times New Roman', serif;font-size:9px;letter-spacing:1px;cursor:pointer;border-radius:2px;transition:all .15s}
.ab:hover{background:rgba(201,162,39,.18)}.ab:disabled{opacity:.35;cursor:not-allowed}.ab.pri{border-color:var(--goldb)}
#mc{flex:1;position:relative;overflow:hidden;background:#0a0500;cursor:grab}
#mc.panning{cursor:grabbing}
#map-viewport{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#mc{flex:1;position:relative;overflow:hidden;background:#1a1008;cursor:grab}
#mc.panning{cursor:grabbing}
#map-viewport{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#map-img{display:block;pointer-events:none;user-select:none}
#map-svg{position:absolute;top:0;left:0;width:100%;height:100%}
#zoom-controls{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:column;gap:4px;z-index:15}
.zbtn{width:30px;height:30px;background:rgba(20,12,4,0.92);border:1px solid var(--gold);color:var(--gold);font-family:Georgia, 'Times New Roman', serif;font-size:15px;font-weight:800;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.zbtn:hover{background:rgba(201,162,39,.25)}
.zbtn:active{background:rgba(201,162,39,.4)}
#zoom-pct{width:30px;text-align:center;font-family:Georgia, 'Times New Roman', serif;font-size:7.5px;color:var(--pgd);background:rgba(20,12,4,0.92);border:1px solid rgba(201,162,39,.3);border-radius:3px;padding:2px 0}
#map-svg{position:absolute;top:0;left:0;width:100%;height:100%}
#zoom-controls{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:column;gap:4px;z-index:15}
.zbtn{width:32px;height:32px;background:rgba(20,12,4,0.92);border:1px solid var(--gold);color:var(--gold);font-family:Georgia, 'Times New Roman', serif;font-size:16px;font-weight:800;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.zbtn:hover{background:rgba(201,162,39,.25)}
.zbtn:active{background:rgba(201,162,39,.4)}
#zoom-pct{width:32px;text-align:center;font-family:Georgia, 'Times New Roman', serif;font-size:8px;color:var(--pgd);background:rgba(20,12,4,0.92);border:1px solid rgba(201,162,39,.3);border-radius:3px;padding:2px 0}
.T{cursor:pointer}
.Tc{transition:all .1s}
.T:hover .Tc{r:5.2!important;fill-opacity:.75!important}
.T.AS .Tc{stroke:#ffe000!important;stroke-width:0.6!important;fill-opacity:.85!important}
.T.VT .Tc{stroke:#ff1111!important;stroke-width:0.6!important;animation:blink .5s infinite}
.T.VF .Tc{stroke:#11ff11!important;stroke-width:0.6!important}
@keyframes blink{0%,100%{fill-opacity:.7}50%{fill-opacity:.15}}
#rp{width:202px;min-width:202px;background:var(--panel);border-left:1px solid var(--gold);padding:7px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;z-index:5}
#sb{background:rgba(0,0,0,.5);border:1px solid rgba(201,162,39,.3);border-radius:2px;padding:5px;font-size:10px;color:var(--pg);min-height:30px;line-height:1.5}
#da{background:rgba(0,0,0,.4);border:1px solid rgba(201,162,39,.3);border-radius:2px;padding:6px}
.dr{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.die{width:25px;height:25px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:Georgia, 'Times New Roman', serif;font-size:13px;font-weight:800;border:2px solid}
.die.A{background:#380000;border-color:#cc2020;color:#ff8888}
.die.D{background:#000038;border-color:#2020cc;color:#8888ff}
.die.R{animation:roll .28s}
@keyframes roll{50%{transform:rotate(180deg) scale(1.3)}}
#cl{background:rgba(0,0,0,.5);border:1px solid rgba(201,162,39,.15);border-radius:2px;padding:5px;font-size:9.5px;line-height:1.6;max-height:145px;overflow-y:auto;color:var(--pgd)}
.la{color:#ff8080}.ld{color:#8080ff}.lc{color:var(--goldb);font-weight:600}.ls{color:#888;font-style:italic;font-size:8.5px}
.card{display:inline-block;width:33px;height:45px;border:1px solid var(--gold);border-radius:2px;background:linear-gradient(160deg,#251408,#080400);margin:2px;cursor:pointer;transition:transform .18s;vertical-align:top}
.card:hover{transform:translateY(-3px)}
.cs{font-size:14px;display:flex;align-items:center;justify-content:center;height:26px}
.ct{font-family:Georgia, 'Times New Roman', serif;font-size:5px;text-align:center;color:var(--gold)}
#ri{display:flex;gap:4px;align-items:center;margin-top:4px}
#ts{flex:1;accent-color:var(--gold)}
#tcnt{font-family:Georgia, 'Times New Roman', serif;font-size:14px;color:var(--goldb);min-width:22px;text-align:center}
.ci{display:flex;justify-content:space-between;font-size:9px;padding:2px 0;border-bottom:1px solid rgba(201,162,39,.1)}
.ci .bn{color:var(--gold);font-weight:600}
#tdi{font-size:10px;color:var(--pgd);min-height:36px}
#ss{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a0900 0%,#0a0500 70%,#000 100%);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
#ss h1{font-family:Georgia, 'Times New Roman', serif;font-size:27px;font-weight:800;color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px rgba(201,162,39,.6);text-align:center}
.rv{font-style:italic;color:var(--pgd);text-align:center;font-size:12px;max-width:320px;line-height:1.9;border:1px solid rgba(201,162,39,.2);padding:10px;border-radius:3px}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:420px}
.fb{padding:7px;border:1px solid rgba(201,162,39,.4);background:rgba(201,162,39,.04);color:var(--pg);font-family:Georgia, 'Times New Roman', serif;font-size:9px;cursor:pointer;border-radius:3px;text-align:center;transition:all .2s}
.fb:hover,.fb.ch{border-color:var(--gold);background:rgba(201,162,39,.14);color:var(--gold)}
.fi{font-size:18px;display:block;margin-bottom:2px}
.pcb{padding:5px 12px;border:1px solid rgba(201,162,39,.4);background:transparent;color:var(--pg);font-family:Georgia, 'Times New Roman', serif;font-size:11px;cursor:pointer;border-radius:2px;margin:0 2px}
.pcb.ch{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.09)}
.sl{font-family:Georgia, 'Times New Roman', serif;font-size:10px;color:var(--gold);letter-spacing:2px;text-align:center}
.mb{padding:8px 16px;background:linear-gradient(180deg,#332008,#160a00);border:1px solid var(--gold);color:var(--gold);font-family:Georgia, 'Times New Roman', serif;font-size:11px;cursor:pointer;border-radius:2px;margin:2px}
.mb:hover{background:rgba(201,162,39,.2)}
#mo{position:fixed;inset:0;background:rgba(0,0,0,.87);z-index:100;display:none;align-items:center;justify-content:center}
#mo.vis{display:flex}
#mbox{background:linear-gradient(160deg,#160a00,#080400);border:2px solid var(--gold);border-radius:4px;padding:18px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto}
#mbox h2{font-family:Georgia, 'Times New Roman', serif;color:var(--gold);margin-bottom:9px;font-size:15px}
#mbox p{line-height:1.6;margin-bottom:8px;color:var(--pg)}

#turnclock{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--goldb);white-space:nowrap}
#turnclock.urgent{animation:timerPulse .65s infinite alternate}
@keyframes timerPulse{from{opacity:1}to{opacity:.35}}
.victory-stats{width:100%;border-collapse:collapse;margin-top:10px;font-size:10px}
.victory-stats th,.victory-stats td{padding:5px;border-bottom:1px solid rgba(220,190,110,.25);text-align:right}
.victory-stats th:first-child,.victory-stats td:first-child{text-align:left}

.sh-off{font-size:9px;color:var(--pgd);opacity:.75}
.sh-row{display:flex;justify-content:space-between;gap:6px;font-size:8px;padding:2px 0;border-bottom:1px solid rgba(220,190,110,.12)}
.sh-row span:last-child{color:var(--goldb);white-space:nowrap}

.event-card{font-size:8.5px;line-height:1.35;padding:5px;border:1px solid rgba(220,190,110,.22);background:rgba(20,15,8,.42);border-radius:4px;color:var(--pgd)}
.event-card strong{display:block;color:var(--goldb);font-size:9px;margin-bottom:2px}

#speedbox{display:flex;gap:2px;align-items:center}
.speedbtn{font-size:8px;padding:3px 5px;min-width:25px;border:1px solid rgba(220,190,110,.28);background:rgba(15,12,8,.6);color:var(--pgd);border-radius:3px;cursor:pointer}
.speedbtn.ch{color:var(--goldb);border-color:var(--goldb);background:rgba(170,120,20,.16)}
#ai-banner{position:absolute;z-index:20;top:10px;left:50%;transform:translateX(-50%);align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(220,190,110,.55);border-radius:5px;background:rgba(12,10,7,.9);color:var(--goldb);font-size:10px;letter-spacing:.05em;pointer-events:none}
.ai-dots{animation:aiPulse .8s infinite alternate}
@keyframes aiPulse{from{opacity:.25}to{opacity:1}}

.T.FOG .Tc{fill-opacity:.18!important;stroke-opacity:.55}
.T.FOG circle:nth-child(2){fill:rgba(0,0,0,.9)!important}

.battle-preview{margin-top:6px;padding:6px;border:1px solid rgba(220,190,110,.25);border-radius:4px;background:rgba(10,8,5,.45);font-size:8.5px;line-height:1.4;color:var(--pgd)}
.battle-preview strong{color:var(--goldb)}