:root{--gold:#d9b56c;--gold-hi:#f4dca0;--gold-dim:#8f6d36;--ink:#120d08;--panel-top:#2e2216f0;--panel-bottom:#140e09f5;--parchment:#efe3c4;--muted:#b9a988;--rome:#b3261e;--rome-hi:#e0503a;--carthage:#2b56b0;--carthage-hi:#5d8ce6;--title:"Cinzel", "Trajan Pro", Georgia, serif;--body:"EB Garamond", Georgia, "Times New Roman", serif}*{box-sizing:border-box}html,body{height:100%;color:var(--parchment);font:15px/1.35 var(--body);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;background:#0d0a07;margin:0;overflow:hidden}#view{outline:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer}svg{fill:currentColor}.frame{background:linear-gradient(180deg, var(--panel-top), var(--panel-bottom));border:1px solid #d9b56c8c;border-radius:3px;box-shadow:0 0 0 1px #000000b3,inset 0 1px #ffebbe1f,inset 0 0 18px #00000080,0 6px 18px #00000073}#topbar{pointer-events:none;align-items:center;gap:14px;padding:6px 12px;display:flex;position:fixed;top:10px;left:50%;transform:translate(-50%)}#topbar .side{align-items:center;gap:10px;display:flex}#topbar .army{grid-template-columns:auto;gap:2px;display:grid}#topbar .right .army{text-align:right;justify-items:end}#topbar .name{font:700 13px var(--title);letter-spacing:.22em;text-transform:uppercase}#topbar .left .name{color:#f09a84}#topbar .right .name{color:#9cbcf6}#topbar .count{font:600 12px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}.emblem{border:1px solid var(--gold);border-radius:50%;place-items:center;width:38px;height:38px;display:grid;box-shadow:inset 0 0 8px #0009,0 0 0 2px #00000080}.emblem.rome{font:900 9.5px var(--title);letter-spacing:.04em;color:var(--gold-hi);background:radial-gradient(circle at 40% 35%,#d2402f,#6d130d 75%)}.emblem.carthage{color:#f2e6c6;background:radial-gradient(circle at 40% 35%,#3d6fd0,#122c66 75%)}.emblem.carthage svg{width:22px;height:22px}.bar{background:#0000008c;border:1px solid #d9b56c4d;border-radius:1px;width:180px;height:7px;overflow:hidden}.bar i{background:linear-gradient(180deg, var(--rome-hi), var(--rome));width:100%;height:100%;transition:width .4s;display:block}.right .bar{transform:scaleX(-1)}.right .bar i{background:linear-gradient(180deg, var(--carthage-hi), var(--carthage))}#clock{font:700 20px var(--title);color:var(--gold-hi);text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 0 10px #f4dca040;border-left:1px solid #d9b56c4d;border-right:1px solid #d9b56c4d;min-width:74px;padding:2px 10px}#controls{align-items:center;gap:4px;padding:4px 6px;display:flex;position:fixed;top:10px;right:10px}#controls button,#controls .toggle{color:var(--muted);font:600 12px var(--title);letter-spacing:.06em;background:0 0;border:0;border-radius:2px;padding:5px 8px}#controls button:hover,#controls .toggle:hover{color:var(--gold-hi);background:#d9b56c1a}#controls .sep{background:#d9b56c40;width:1px;height:20px}.speeds{display:flex}.speeds button{padding:5px 7px!important}.speeds svg{width:15px;height:15px;display:block}.speeds button.active{box-shadow:inset 0 0 0 1px #d9b56c66;color:var(--gold-hi)!important;background:#d9b56c2e!important}.toggle{cursor:pointer;align-items:center;gap:6px;display:flex}.toggle input{accent-color:#b58a3c;margin:0}#help-button{width:28px;font-size:14px!important}#stats{opacity:.7;text-shadow:0 1px 2px #000;text-align:right;pointer-events:none;font:11px ui-monospace,monospace;display:none;position:fixed;top:56px;right:12px}body.debug #stats{display:block}#cards{scrollbar-width:none;gap:2px;max-width:calc(100vw - 510px);padding:5px 6px;display:flex;position:fixed;bottom:10px;left:50%;overflow-x:auto;transform:translate(-50%)}#cards .gap{flex:none;width:6px}.card{background:linear-gradient(#5e1a13 0%,#3a0f0b 60%,#230907 100%);border:1px solid #5a4222;border-radius:2px;flex:none;width:38px;height:64px;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffd2aa26}.card .icon{color:#efd9a8;filter:drop-shadow(0 1px 1px #000);place-items:center;display:grid;position:absolute;top:5px;left:0;right:0}.card .icon svg{width:23px;height:23px}.card .num{text-align:center;font:700 12px var(--title);color:var(--parchment);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000;position:absolute;top:31px;left:0;right:0}.card .label{text-align:center;font:700 8.5px var(--title);color:var(--gold);letter-spacing:.05em;position:absolute;top:46px;left:0;right:0}.card .morale{background:#0009;height:3px;position:absolute;bottom:3px;left:4px;right:4px}.card .morale i{height:100%;display:block}.card .badge{color:#ffd27a;width:14px;height:14px;display:none;position:absolute;top:2px;right:2px}.card .badge svg{width:14px;height:14px}.card:hover{border-color:var(--gold-dim)}.card.selected{border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi), 0 0 12px #f4dca073, inset 0 0 14px #f4dca02e;background:linear-gradient(#7b2419 0%,#4a140e 60%,#2c0b08 100%)}.card.engaged{animation:1.1s ease-in-out infinite engaged}.card.engaged .badge.fight{color:#ff8a6a;display:block}.card.running .badge.run{display:block}.card.routing{background:linear-gradient(#5d5a55,#2c2a27)}.card.routing .badge.flee{color:#fff;animation:.6s infinite blink;display:block}.card.gone{opacity:.28;filter:grayscale()}@keyframes engaged{50%{box-shadow:inset 0 0 0 2px #ff5a3ccc,0 0 10px #ff5a3c66}}@keyframes blink{50%{opacity:.25}}#unit-panel{grid-template-columns:58px 1fr;gap:6px 10px;width:236px;padding:10px;display:grid;position:fixed;bottom:10px;left:10px}#unit-panel.hidden{display:none}#unit-panel .portrait{border:1px solid var(--gold-dim);color:#efd9a8;background:radial-gradient(circle at 50% 30%,#7b2419,#2a0a07 80%);place-items:center;width:58px;height:70px;display:grid}#unit-panel .portrait svg{filter:drop-shadow(0 1px 2px #000);width:38px;height:38px}#unit-panel h3{font:700 14px var(--title);color:var(--gold-hi);letter-spacing:.06em;margin:0}#unit-panel .utype{color:var(--muted);margin:0 0 4px;font-size:13px;font-style:italic}#unit-panel .row,#unit-panel .meter{justify-content:space-between;align-items:center;gap:8px;font-size:13px;display:flex}#unit-panel .meter .bar{width:110px}#unit-panel .ustate{font:600 12px var(--title);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin:4px 0 0}#unit-panel .orders{grid-column:1/-1;gap:4px;display:flex}#unit-panel .orders button{font:700 11px var(--title);letter-spacing:.08em;text-transform:uppercase;color:var(--parchment);background:linear-gradient(#3b2b1a,#22180f);border:1px solid #d9b56c66;border-radius:2px;flex:1;padding:5px 0}#unit-panel .orders button:hover{border-color:var(--gold-hi);color:var(--gold-hi)}#unit-panel .orders button[hidden]{display:none}#banners{pointer-events:none;position:fixed;inset:0;overflow:hidden}.banner{pointer-events:auto;cursor:pointer;transform-origin:50% 100%;will-change:transform;flex-direction:column;align-items:center;display:flex;position:absolute;top:0;left:0}.banner .flag{border:1px solid #000000b3;place-items:center;width:24px;height:28px;display:grid;position:relative;box-shadow:inset 0 0 0 1px #f4dca08c,0 2px 4px #0006}.banner.team0 .flag{clip-path:polygon(0 0,100% 0,100% 84%,83% 100%,67% 84%,50% 100%,33% 84%,17% 100%,0 84%);background:linear-gradient(#d0402f,#7f1a12)}.banner.team1 .flag{clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);background:linear-gradient(#4677d8,#1d3a7a)}.banner .flag svg{color:#fff1d0;filter:drop-shadow(0 1px #00000080);width:16px;height:16px;margin-top:-3px}.banner .pole{background:linear-gradient(#e2c27d,#7b5a2a);width:2px;height:6px}.banner .strength{background:#0009;width:26px;height:3px;box-shadow:0 0 0 1px #0006}.banner .strength i{background:#f0e2bd;height:100%;display:block}.banner.selected .flag{box-shadow:inset 0 0 0 1px #fff0c8e6, 0 0 0 2px var(--gold-hi), 0 0 10px #f4dca0b3;filter:brightness(1.2)}.banner.engaged .flag{animation:1s infinite bannerPulse}.banner.routing .flag{background:#e8e4da!important}.banner.routing .flag svg{color:#555}@keyframes bannerPulse{50%{filter:brightness(1.45)saturate(1.2)}}#minimap-frame{padding:5px;position:fixed;bottom:10px;right:10px}#minimap{cursor:crosshair;border:1px solid #000c;width:220px;height:148px;display:block}#minimap-frame .north{font:700 10px var(--title);color:var(--gold-hi);text-shadow:0 1px 2px #000;pointer-events:none;position:absolute;top:7px;left:50%;transform:translate(-50%)}#selectbox{border:1px solid var(--gold-hi);pointer-events:none;background:#f4dca01a;display:none;position:fixed;box-shadow:0 0 8px #f4dca04d}#flash{font:700 22px var(--title);letter-spacing:.12em;color:var(--gold-hi);text-shadow:0 2px 8px #000,0 0 16px #f4dca059;opacity:0;pointer-events:none;text-transform:uppercase;transition:opacity .25s;position:fixed;bottom:112px;left:50%;transform:translate(-50%)}#flash.show{opacity:1}#toast{background:linear-gradient(180deg, var(--panel-top), var(--panel-bottom));font:700 13px var(--title);letter-spacing:.05em;opacity:0;pointer-events:none;border:1px solid #d9b56c80;border-radius:2px;padding:6px 18px;transition:all .3s;position:fixed;top:68px;left:50%;transform:translate(-50%)translateY(-6px)}#toast.show{opacity:1;transform:translate(-50%)}#toast.bad{color:#ffc0b0;border-color:#d8553e}.panel{text-align:center;width:min(600px,100vw - 32px);padding:26px 32px 28px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.panel:before{content:"";pointer-events:none;border:1px solid #d9b56c38;position:absolute;inset:5px}.panel.hidden{display:none}.panel .kicker{font:700 11px var(--title);letter-spacing:.35em;text-transform:uppercase;color:var(--gold-dim);margin:0}.panel h2{font:900 32px var(--title);color:var(--gold-hi);letter-spacing:.08em;text-shadow:0 2px 10px #0009;margin:4px 0 8px}.panel .lede{max-width:460px;color:var(--parchment);margin:0 auto 14px;font-size:17px;font-style:italic}.panel dl{text-align:left;grid-template-columns:max-content 1fr;gap:5px 16px;margin:0 0 20px;font-size:14px;display:grid}.panel dt{font:700 11.5px var(--title);letter-spacing:.06em;color:var(--gold);padding-top:2px}.panel dd{color:#e6dbc0;margin:0}.panel button{font:700 13px var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--parchment);background:linear-gradient(#3b2b1a,#1f160e);border:1px solid #d9b56c8c;border-radius:2px;padding:9px 22px}.panel button.primary{border-color:var(--gold);color:var(--gold-hi);background:linear-gradient(#9a2a1c,#561208);box-shadow:0 0 14px #b3261e59}.panel button:hover{filter:brightness(1.2)}.panel .row{justify-content:center;gap:12px;display:flex}.armies{text-align:left;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px;display:grid}.armies .army{background:#00000040;border:1px solid #d9b56c40;padding:8px 12px}.armies h4{font:700 12px var(--title);letter-spacing:.2em;text-transform:uppercase;margin:0 0 4px}.armies .rome h4{color:#f09a84}.armies .carthage h4{color:#9cbcf6}.armies ul{color:#e6dbc0;margin:0;padding:0;font-size:14px;list-style:none}.armies li{justify-content:space-between;display:flex}.armies li b{font-family:var(--title);color:var(--gold)}.times{justify-content:center;align-items:center;gap:6px;margin:0 0 16px;display:flex}.times span{font:700 11px var(--title);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-right:6px}.panel .times button{letter-spacing:.1em;color:var(--muted);padding:5px 12px;font-size:11px}.panel .times button.active{color:var(--gold-hi);border-color:var(--gold-hi);background:linear-gradient(#5a4122,#2e2011);box-shadow:0 0 10px #f4dca040}.tally{grid-template-columns:1fr auto 1fr;gap:6px 18px;max-width:360px;margin:0 auto 20px;font-size:15px;display:grid}.tally .v{font:700 18px var(--title);color:var(--gold-hi)}.tally .k{color:var(--muted);align-self:center;font-style:italic}#loading{background:radial-gradient(at 50% 40%,#3a2716 0%,#140e09 55%,#070504 100%);place-items:center;transition:opacity .9s;display:grid;position:fixed;inset:0}#loading.done{opacity:0;pointer-events:none}#loading .title{text-align:center}#loading .kicker{font:700 13px var(--title);letter-spacing:.5em;color:var(--gold-dim);text-transform:uppercase;margin:0}#loading h1{font:900 64px var(--title);letter-spacing:.1em;color:var(--gold-hi);text-transform:uppercase;text-shadow:0 0 30px #f4dca033,0 3px 12px #000;margin:6px 0 18px}#loading .progress{background:#d9b56c33;width:280px;height:2px;margin:0 auto 12px;overflow:hidden}#loading .progress i{background:linear-gradient(90deg, transparent, var(--gold-hi), transparent);width:35%;height:100%;animation:1.4s ease-in-out infinite sweep;display:block}#loading .status{color:var(--muted);margin:0;font-size:16px;font-style:italic}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(290%)}}#notice{z-index:60;background:radial-gradient(at 50% 30%,#3a2716 0%,#140e09 55%,#070504 100%);place-items:center;padding:24px 16px;display:grid;position:fixed;inset:0;overflow-y:auto}#notice .sheet{text-align:center;width:min(720px,100%)}#notice .kicker{font:700 12px var(--title);letter-spacing:.5em;color:var(--gold-dim);text-transform:uppercase;margin:0}#notice h1{font:900 clamp(34px, 10vw, 64px) var(--title);letter-spacing:.1em;color:var(--gold-hi);text-transform:uppercase;text-shadow:0 0 30px #f4dca033,0 3px 12px #000;margin:6px 0 14px}#notice .lede{max-width:34em;color:var(--parchment);margin:0 auto 18px;font-size:18px;line-height:1.45}#notice video{aspect-ratio:16/9;background:#000;border:1px solid #d9b56c59;width:100%;display:block;box-shadow:0 10px 40px #0009}#notice .row{margin-top:18px}#notice button{font:600 16px var(--body);color:var(--gold-hi);cursor:pointer;background:linear-gradient(#3b2b1a,#22180f);border:1px solid #d9b56c80;border-radius:3px;padding:10px 22px}@media (max-width:1180px){#controls{top:64px}#cards{max-width:calc(100vw - 20px);bottom:172px}}