:root{--ink:#f3ead6;--muted:#b9ae95;--panel:#181c26e6;--panel-2:#242936f2;--edge:#8a7448;--edge-soft:#c9a86259;--gold:#e8c46a;--gold-2:#ffdf8a;--good:#7fd36b;--bad:#ff6a5a;--food:#e86f4f;--wood:#b8834e;--stone:#b9b4aa;--goldres:#f2c440;--shadow:0 10px 30px #00000073}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--ink);-webkit-user-select:none;user-select:none;background:#0e1621;font-family:Nunito,system-ui,-apple-system,sans-serif;overflow:hidden}#app{position:relative}#world{position:absolute;inset:0}#world canvas{outline:none;display:block}.hidden{display:none!important}kbd{border:1px solid var(--edge-soft);color:var(--gold-2);background:#ffffff14;border-radius:4px;padding:1px 5px;font:800 11px Nunito,sans-serif}.loading{color:var(--gold);letter-spacing:2px;background:radial-gradient(circle at 50% 40%,#1e2a3a,#0e1621);place-items:center;font:800 42px Cinzel,serif;display:grid;position:absolute;inset:0}#world.cur-attack canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4 4l11 11M4 4l5 1M4 4l1 5' stroke='%23ff5a4a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 17l3-3 6 6-3 3z' fill='%23ff5a4a'/%3E%3C/svg%3E") 3 3,crosshair}#world.cur-gather canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M6 22L20 8' stroke='%238a6440' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M15 4c4 0 8 3 9 8l-6-3z' fill='%23e8c46a' stroke='%23332' stroke-width='1'/%3E%3C/svg%3E") 4 22,pointer}#world.cur-build canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M6 22L18 10' stroke='%238a6440' stroke-width='3.5' stroke-linecap='round'/%3E%3Crect x='14' y='3' width='11' height='7' rx='1.5' transform='rotate(45 19 6)' fill='%23b9c0c9' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 4 22,pointer}#world.cur-amove canvas{cursor:crosshair}#world.cur-convert canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3v22M7 10h14' stroke='%23ffe08a' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M14 3v22M7 10h14' stroke='%23553' stroke-width='1' fill='none'/%3E%3C/svg%3E") 14 10,pointer}#world.cur-garrison canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M5 25V9l4-4 4 4 4-4 4 4v16z' fill='%23c9b79c' stroke='%23333' stroke-width='1.5'/%3E%3Cpath d='M11 25v-7a2 2 0 0 1 4 0v7' fill='%23333'/%3E%3C/svg%3E") 14 14,pointer}#world.cur-place canvas{cursor:copy}#world.cur-select canvas{cursor:pointer}.btn{border:1px solid var(--edge);cursor:pointer;color:var(--ink);background:linear-gradient(#3a4256,#262c3a);border-radius:10px;padding:9px 16px;font:800 15px Nunito,sans-serif;box-shadow:inset 0 1px #ffffff14}.btn:hover{border-color:var(--gold);color:#fff}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{color:#1c1408;background:linear-gradient(#c99a3a,#9a6f22);border-color:#f0cf7a}.btn.primary:hover{filter:brightness(1.08);color:#000}.btn.big{letter-spacing:1px;padding:12px 40px;font:800 22px Cinzel,serif}.btn.small{padding:5px 9px;font-size:13px}.btn.wide{width:100%}.screen{pointer-events:none;background:radial-gradient(#0a0e1600 40%,#0a0e168c);place-items:center;display:grid;position:absolute;inset:0}.title-card{pointer-events:auto;border:1px solid var(--edge);width:min(600px,100% - 32px);max-height:calc(100% - 40px);box-shadow:var(--shadow), inset 0 0 0 1px #ffdf8a0f;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:linear-gradient(#181c26db,#12151eeb);border-radius:18px;padding:26px 30px 20px;overflow:auto}.title-card h1{letter-spacing:1px;color:var(--gold);text-shadow:0 2px #4a3510,0 6px 24px #e8c46a59;margin:0;font:800 50px Cinzel,serif}.title-card h1 span{color:var(--muted);font-size:30px}.tagline{color:var(--muted);margin:4px 0 18px;font-weight:700}.setup{text-align:left;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:18px;display:grid}.setup label{color:var(--muted);gap:4px;font-size:13px;font-weight:800;display:grid}.setup select,.setup input{color:var(--ink);border:1px solid var(--edge-soft);background:#1b2030;border-radius:8px;padding:7px 8px;font:700 14px Nunito,sans-serif}.setup .wide{grid-column:1/-1}.civ-blurb{color:var(--ink);opacity:.85;grid-column:1/-1;min-height:18px;font-size:13px;font-weight:700}.title-buttons{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.title-links{justify-content:center;gap:16px;margin-top:10px;display:flex}.link{color:var(--gold-2);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:2px;font:800 13px Nunito,sans-serif;text-decoration:underline}.replay-bar{border:1px solid var(--edge);box-shadow:var(--shadow);background:#141822eb;border-radius:12px;align-items:center;gap:6px;padding:6px 10px;display:flex;position:absolute;top:48px;left:50%;transform:translate(-50%)}.replay-bar .rb-title{color:var(--gold);margin-right:4px;font:800 14px Cinzel,serif}.replay-bar select{color:var(--ink);border:1px solid var(--edge-soft);background:#1b2030;border-radius:8px;padding:4px;font:700 13px Nunito,sans-serif}.seed-row{gap:6px;display:flex}.seed-row input{flex:1;min-width:0}.howto{text-align:left;color:var(--muted);margin-top:16px}.howto summary{cursor:pointer;color:var(--gold);font-weight:800}.howto ul{padding-left:18px;font-size:14px;font-weight:600;line-height:1.5}.howto b{color:var(--ink)}.footnote{color:var(--muted);margin:14px 0 0;font-size:12px}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#hud>#banner,#hud>#notices,#hud>#paused,#hud>#dragbox,#hud>#timers,#hud>#bottom,#hud>#tooltip{pointer-events:none}#timers .timer{pointer-events:auto}#topbar{border-bottom:1px solid var(--edge);background:linear-gradient(#141822f2,#141822d1);align-items:center;gap:10px;height:40px;padding:0 10px;display:flex;position:absolute;top:0;left:0;right:0;box-shadow:0 4px 14px #00000059}.grow{flex:1}.res-bar{gap:4px;display:flex}.res{font-variant-numeric:tabular-nums;background:#ffffff0d;border:1px solid #ffffff0f;border-radius:8px;align-items:center;gap:6px;min-width:88px;padding:3px 10px 3px 6px;font-size:15px;font-weight:900;display:flex}.res svg{flex:none}.res.flash{animation:.6s flash}.res.pop.full{color:var(--bad)}.res.civ{min-width:0;color:var(--gold-2);padding:3px 9px;font:700 13px Cinzel,serif}.res.score{min-width:0;color:var(--gold-2)}@keyframes flash{0%{background:#ff5a4a8c}to{background:#ffffff0d}}.epoch-chip{color:var(--gold-2);align-items:center;gap:8px;font:700 15px Cinzel,serif;display:flex}.epoch-chip .bar{background:#ffffff1f;border-radius:4px;width:110px;height:7px;overflow:hidden}.epoch-chip .bar i{background:linear-gradient(90deg,#c99a3a,#ffdf8a);height:100%;display:block}.clock{color:var(--muted);font-variant-numeric:tabular-nums;font:800 15px Nunito,sans-serif}.tb-btn{color:var(--ink);cursor:pointer;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;padding:5px 10px;font:800 13px Nunito,sans-serif}.tb-btn:hover{border-color:var(--gold)}.tb-btn.alert{border-color:var(--gold);color:var(--gold-2);animation:1.6s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 3px #e8c46a40}}#bottom{pointer-events:none;align-items:flex-end;gap:8px;height:176px;padding:8px;display:flex;position:absolute;bottom:0;left:0;right:0}#bottom>*{pointer-events:auto}.panel{background:linear-gradient(var(--panel-2), var(--panel));border:1px solid var(--edge);box-shadow:var(--shadow), inset 0 0 0 1px #ffdf8a0d;border-radius:12px}#minimap-box{flex:none;align-self:flex-end;width:196px;height:196px;padding:6px}#minimap{cursor:crosshair;image-rendering:auto;border-radius:6px;width:100%;height:100%;display:block}#selection{flex:1;gap:12px;min-width:0;height:160px;padding:10px 12px;display:flex;overflow:hidden}#commands{flex:none;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(5,1fr);gap:5px;width:300px;height:160px;padding:8px;display:grid}.cmd{cursor:pointer;color:var(--ink);background:linear-gradient(#323a4d,#222837);border:1px solid #c9a86273;border-radius:8px;place-items:center;padding:0;display:grid;position:relative;overflow:hidden}.cmd:hover{border-color:var(--gold-2);background:linear-gradient(#3d4660,#2a3142)}.cmd.off{opacity:.42}.cmd.on{border-color:var(--gold-2);box-shadow:inset 0 0 0 2px #ffdf8a59}.cmd img{object-fit:contain;pointer-events:none;width:44px;height:44px}.cmd .glyph{pointer-events:none;font-size:24px;line-height:1}.cmd .key{color:var(--gold-2);text-shadow:0 1px 2px #000;font:900 10px Nunito,sans-serif;position:absolute;top:2px;left:4px}.cmd .count{color:#fff;text-shadow:0 1px 2px #000;font:900 11px Nunito,sans-serif;position:absolute;bottom:2px;right:4px}.sel-portrait{border:1px solid var(--edge-soft);background:radial-gradient(circle at 50% 35%,#3b4660,#1a1f2c);border-radius:10px;flex:none;place-items:center;width:116px;height:138px;display:grid;overflow:hidden}.sel-portrait img{object-fit:contain;width:116px;height:116px}.sel-info{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.sel-name{color:var(--gold-2);white-space:nowrap;text-overflow:ellipsis;font:800 19px Cinzel,serif;overflow:hidden}.sel-sub{color:var(--muted);font-size:13px;font-weight:700}.hp{background:#00000073;border-radius:6px;max-width:260px;height:12px;position:relative;overflow:hidden}.hp i{background:linear-gradient(90deg,#4fb045,#8fe06a);height:100%;display:block}.hp.mid i{background:linear-gradient(90deg,#c8a026,#f2d34a)}.hp.low i{background:linear-gradient(90deg,#b8352a,#ff6a5a)}.hp span{color:#fff;text-shadow:0 1px 2px #000;place-items:center;font:900 10px Nunito,sans-serif;display:grid;position:absolute;inset:0}.stats{flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:800;display:flex}.stats span{align-items:center;gap:4px;display:flex}.stats em{color:var(--muted);font-style:normal;font-weight:700}.blurb{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.35}.queue{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.qitem{border:1px solid var(--edge-soft);cursor:pointer;background:#1b2030;border-radius:7px;width:42px;height:42px;position:relative;overflow:hidden}.qitem img{object-fit:contain;width:100%;height:100%}.qitem .prog{background:#00000080;height:4px;position:absolute;bottom:0;left:0;right:0}.qitem .prog i{background:var(--gold);height:100%;display:block}.qitem:hover:after{content:"✕";color:var(--bad);background:#0000008c;place-items:center;font-weight:900;display:grid;position:absolute;inset:0}.multi{flex:1;grid-template-columns:repeat(auto-fill,46px);grid-auto-rows:46px;align-content:start;gap:4px;display:grid;overflow:auto}.mitem{border:1px solid var(--edge-soft);cursor:pointer;background:#1b2030;border-radius:6px;position:relative;overflow:hidden}.mitem img{object-fit:contain;width:100%;height:100%}.mitem .mhp{background:#0009;border-radius:2px;height:4px;position:absolute;bottom:2px;left:3px;right:3px;overflow:hidden}.mitem .mhp i{background:var(--good);height:100%;display:block}.mitem:hover{border-color:var(--gold-2)}.empty-sel{color:var(--muted);flex-direction:column;justify-content:center;gap:6px;font-size:14px;font-weight:700;display:flex}.tooltip{z-index:20;pointer-events:none;border:1px solid var(--edge);max-width:300px;box-shadow:var(--shadow);background:#10131bf7;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:700;line-height:1.35;position:absolute}.tooltip b{color:var(--gold-2);margin-bottom:3px;font:800 15px Cinzel,serif;display:block}.tooltip .cost{gap:10px;margin:4px 0;display:flex}.tooltip .cost span{align-items:center;gap:3px;font-weight:900;display:flex}.tooltip .cost span.short{color:var(--bad)}.tooltip .hint{color:var(--muted);font-weight:600}#online{z-index:20}.online-card h2{color:var(--gold);margin:0 0 6px;font:800 30px Cinzel,serif}.online-card h3{color:var(--gold-2);margin:0 0 8px;font:800 15px Cinzel,serif}.online-card.wide{width:min(720px,100% - 32px)}.online-card .code{letter-spacing:4px;color:var(--ink)}.online-card .field{text-align:left;color:var(--muted);gap:4px;margin:10px 0;font-size:13px;font-weight:800;display:grid}.online-card input,.online-card select{color:var(--ink);border:1px solid var(--edge-soft);background:#1b2030;border-radius:8px;min-width:0;padding:6px 8px;font:700 14px Nunito,sans-serif}.online-card select:disabled{opacity:.75}.online-choices{grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 16px;display:grid}.online-choices .choice{background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;padding:12px}.lobby-error{border:1px solid var(--bad);color:#ffd0c8;background:#78181299;border-radius:8px;margin:8px 0;padding:8px 10px;font-size:14px;font-weight:800}.share{gap:6px;margin:6px 0 12px;display:flex}.share input{flex:1;font-size:13px}.seats{border-collapse:collapse;width:100%;margin-bottom:8px;font-size:14px;font-weight:800}.seats th{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:4px;font-size:11px}.seats td{text-align:left;border-top:1px solid #ffffff0f;padding:4px}.seats select{width:100%}.add-ai{text-align:left;margin-bottom:12px}.online-card .setup{grid-template-columns:repeat(5,1fr)}.lobby-chat{text-align:left;margin-bottom:14px}.lobby-chat .lines{background:#00000040;border-radius:8px;height:90px;margin-bottom:6px;padding:6px 8px;font-size:13px;font-weight:700;overflow-y:auto}.lobby-chat input{box-sizing:border-box;width:100%}#chat{pointer-events:none;width:380px;position:absolute;bottom:214px;left:10px}#hud>#chat{pointer-events:none}#chat-lines{flex-direction:column;gap:3px;margin-bottom:6px;display:flex}.chat-line{background:#10131bc7;border-radius:7px;align-self:flex-start;padding:3px 9px;font-size:14px;font-weight:700;transition:opacity 1.2s}.chat-line.old{opacity:0}#chat-input{pointer-events:auto;box-sizing:border-box;width:100%;color:var(--ink);border:1px solid var(--gold);background:#10131beb;border-radius:8px;padding:7px 10px;font:700 14px Nunito,sans-serif}body.online .tip-box{bottom:330px}.tip-box{border:1px solid var(--edge);width:290px;box-shadow:var(--shadow);background:linear-gradient(#242a3af2,#181c26f2);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700;line-height:1.4;animation:.3s ease-out notice-in;position:absolute;bottom:214px;left:10px}.tip-head{color:var(--gold-2);margin-bottom:4px;font:800 13px Cinzel,serif}.tip-btns{justify-content:flex-end;gap:6px;margin-top:8px;display:flex}.tip-btns button{color:var(--ink);cursor:pointer;background:#ffffff12;border:1px solid #ffffff24;border-radius:7px;padding:3px 9px;font:800 12px Nunito,sans-serif}.tip-btns button:hover{border-color:var(--gold)}#timers{flex-direction:column;align-items:flex-end;gap:5px;display:flex;position:absolute;top:46px;right:10px}.timer{border:1px solid var(--edge-soft);font-variant-numeric:tabular-nums;cursor:pointer;background:#10131be0;border-radius:9px;padding:5px 12px;font-size:14px;font-weight:900}.timer.peace{color:#d8ecff;cursor:default;border-color:#a0d2ff99}.timer.good{color:#dcffd2;border-color:#7fd36b99}.timer.bad{border-color:var(--bad);color:#ffd0c8;animation:1.6s infinite pulse}.qglyph{place-items:center;height:100%;font-size:22px;display:grid}.cmd .trade{align-items:center;gap:1px;font:900 18px Nunito,sans-serif;display:flex}#notices{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:52px;left:50%;transform:translate(-50%)}.notice{border:1px solid var(--edge-soft);background:#10131be6;border-radius:9px;padding:6px 14px;font-size:14px;font-weight:800;transition:opacity .5s;animation:.25s ease-out notice-in}.notice.bad{color:#ffd0c8;border-color:#ff6a5ab3}.notice.good{color:#dcffd2;border-color:#7fd36b99}.notice.alert{border-color:var(--bad);color:#fff;background:#781812e6}@keyframes notice-in{0%{opacity:0;transform:translateY(-8px)}}.banner{pointer-events:none;text-align:center;opacity:0;color:var(--gold);text-shadow:0 3px #3a2a08,0 8px 40px #ffd27880;font:800 44px Cinzel,serif;transition:opacity .6s;position:absolute;top:22%;left:50%;transform:translate(-50%,-50%)}.banner small{color:var(--ink);text-shadow:0 2px 6px #000;margin-top:4px;font:700 17px Nunito,sans-serif;display:block}.banner.show{opacity:1}.paused{color:var(--gold);pointer-events:none;text-shadow:0 3px 12px #000;font:800 46px Cinzel,serif;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.dragbox{pointer-events:none;z-index:5;background:#8cff821a;border:1.5px solid #bfffb8;position:absolute}.label-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.fx-text{white-space:nowrap;text-shadow:0 2px 4px #000c;font:900 15px Nunito,sans-serif;position:absolute;top:0;left:0}.fx-text.damage{color:#ff7a6a}.fx-text.good{color:#9dff9a}.fx-text.gold{color:var(--gold-2)}.fx-text.info{color:#fff}.modal{z-index:30;background:#06090e8c;place-items:center;display:grid;position:absolute;inset:0}.modal .card{text-align:center;border:1px solid var(--edge);width:min(440px,100% - 32px);max-height:calc(100% - 40px);box-shadow:var(--shadow);background:linear-gradient(#1e2330fa,#141822fa);border-radius:16px;padding:22px 24px;overflow:auto}.modal h2{color:var(--gold);margin:0 0 10px;font:800 30px Cinzel,serif}.modal .row{gap:8px;margin:12px 0;display:grid}.modal label{color:var(--muted);justify-content:space-between;align-items:center;gap:10px;font-weight:800;display:flex}.modal select,.modal input[type=range]{color:var(--ink);border:1px solid var(--edge-soft);background:#1b2030;border-radius:8px;padding:5px;font:700 14px Nunito,sans-serif}.end-stats{border-collapse:collapse;width:100%;margin:10px 0 14px;font-weight:800}.end-stats th,.end-stats td{border-bottom:1px solid #ffffff14;padding:5px 6px}.end-stats th{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.end-stats td:first-child,.end-stats th:first-child{text-align:left;white-space:nowrap}.modal .card.wide{width:min(640px,100% - 32px)}.civ-tag{color:var(--muted);margin-left:18px;font-size:11px;font-weight:700}.chart-tabs{justify-content:center;gap:4px;margin:12px 0 6px;display:flex}.chart-tabs .tab{color:var(--muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:7px;padding:3px 10px;font:800 12px Nunito,sans-serif}.chart-tabs .tab.on{color:var(--gold-2);border-color:var(--gold)}.timeline{background:#00000040;border:1px solid #ffffff0f;border-radius:8px;width:100%;height:150px}.swatch{vertical-align:-1px;border-radius:3px;width:12px;height:12px;margin-right:6px;display:inline-block}@media (max-width:1100px){#commands{width:260px}.res{min-width:74px;font-size:14px}.epoch-chip .bar{width:70px}}@media (max-width:860px){#selection .blurb{display:none}.tb-btn{padding:5px 7px}}