@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=JetBrains+Mono:wght@400;600&display=swap";:root{--wc3-gold: #C9A227;--wc3-gold-light: #E8C84A;--wc3-gold-dim: #8a6e1a;--wc3-parchment: #E8D5B0;--wc3-stone-dark: #0D0B08;--wc3-stone-mid: #1A1714;--wc3-stone-light: #2A2520;--wc3-healthy: #00FF42;--wc3-warning: #FFB020;--wc3-critical: #FF3333;--wc3-mana: #4488FF;--bevel-hi: rgba(255,255,255,.1);--bevel-lo: rgba(0,0,0,.6);--font-display: "Cinzel", Georgia, serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-mono);-webkit-font-smoothing:antialiased}#game{position:relative;width:100vw;height:100vh;overflow:hidden}#viewport{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#resource-bar{position:absolute;top:0;left:0;right:0;height:32px;display:flex;align-items:center;justify-content:flex-end;padding:0 16px;gap:20px;background:linear-gradient(180deg,#1a1714eb,#0d0b08d9);border-bottom:2px solid var(--wc3-gold-dim);box-shadow:inset 0 -1px 0 var(--bevel-lo),0 2px 6px #00000080;z-index:10;font-size:12px;color:var(--wc3-parchment)}.res-item{display:flex;align-items:center;gap:5px}.res-icon{display:block;width:14px;height:14px;image-rendering:pixelated}.res-icon--gold{color:var(--wc3-gold)}.res-icon--lumber{color:#8b6914}.res-icon--food{color:var(--wc3-healthy)}.res-icon--upkeep{color:var(--wc3-parchment)}.res-value{font-weight:600;color:var(--wc3-gold-light)}.res-label{color:#e8d5b073;font-size:10px;text-transform:uppercase;letter-spacing:.5px}#message-log{position:absolute;top:40px;left:12px;width:320px;max-height:200px;overflow:hidden;pointer-events:none;z-index:5}.msg-line{font-size:11px;line-height:1.5;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-line.msg-new{animation:msg-slide-in .25s ease-out}@keyframes msg-slide-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.msg-line:nth-child(1){opacity:1}.msg-line:nth-child(2){opacity:.85}.msg-line:nth-child(3){opacity:.7}.msg-line:nth-child(4){opacity:.55}.msg-line:nth-child(5){opacity:.4}.msg-line:nth-child(6){opacity:.25}.msg-line:nth-child(n+7){opacity:.15}.msg-time{color:#e8d5b066}.msg-ok{color:var(--wc3-healthy)}.msg-fail{color:var(--wc3-critical)}#hud-frame{position:absolute;bottom:0;left:0;right:0;height:25vh;min-height:180px;max-height:260px;display:grid;grid-template-columns:20% 1fr 25%;z-index:10;background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0px,transparent 2px,rgba(0,0,0,.04) 3px,transparent 5px),repeating-linear-gradient(45deg,rgba(255,255,255,.01) 0px,transparent 3px,rgba(0,0,0,.03) 4px,transparent 7px),linear-gradient(180deg,#1e1a16,#141210 40%,#0d0b08);border-top:3px solid var(--wc3-gold);box-shadow:0 -2px 8px #c9a22733,inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo),0 -4px 12px #0009}#hud-frame:before,#hud-frame:after{content:"";position:absolute;top:-8px;width:12px;height:12px;background:var(--wc3-gold);transform:rotate(45deg);z-index:11;box-shadow:0 0 6px #c9a22766}#hud-frame:before{left:16px}#hud-frame:after{right:16px}#hud-frame>*{border-right:1px solid rgba(201,162,39,.25)}#hud-frame>*:last-child{border-right:none}#minimap-panel{display:flex;align-items:center;justify-content:center;padding:8px;position:relative}#minimap{width:100%;aspect-ratio:1;max-width:180px;max-height:180px;border:2px solid var(--wc3-stone-light);outline:2px solid var(--wc3-gold-dim);outline-offset:-4px;box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo);cursor:pointer;image-rendering:pixelated}#portrait-panel{display:flex;align-items:center;gap:16px;padding:12px 16px;overflow:hidden}.portrait-frame{width:64px;height:64px;border-radius:50%;border:3px solid var(--wc3-gold);box-shadow:0 0 8px #c9a22733,inset 0 0 12px #00000080;display:flex;align-items:center;justify-content:center;background:var(--wc3-stone-dark);flex-shrink:0}.portrait-frame .hud-icon{image-rendering:pixelated}.portrait-frame--flash{animation:portrait-train-flash .4s ease-out}@keyframes portrait-train-flash{0%{box-shadow:0 0 16px #ffdc50cc,inset 0 0 12px #00000080;border-color:#ffe040}to{box-shadow:0 0 8px #c9a22733,inset 0 0 12px #00000080;border-color:var(--wc3-gold)}}.portrait-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.portrait-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--wc3-gold-light);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portrait-desc{font-size:10px;color:#e8d5b080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-bar{height:8px;border-radius:2px;background:#00000080;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.stat-bar__fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:1px;transition:width .3s ease}.stat-bar__fill--hp{background:linear-gradient(90deg,#00aa30,var(--wc3-healthy))}.stat-bar__fill--mana{background:linear-gradient(90deg,#2255bb,var(--wc3-mana))}.stat-bar__label{position:absolute;right:4px;top:-1px;font-size:7px;color:#fff9;line-height:8px}.portrait-stats{display:flex;gap:12px;font-size:10px;color:#e8d5b099;margin-top:2px}.portrait-stats span{color:var(--wc3-parchment);font-weight:600}.portrait-empty{font-size:12px;color:#e8d5b040;font-style:italic;padding:20px}#command-card{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:8px;align-content:center}.cmd-btn{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e1a16,#141210);border:1px solid var(--wc3-stone-light);border-radius:2px;box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo);cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s;font-size:16px;min-height:36px}.cmd-btn:hover{border-color:var(--wc3-gold);box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo),0 0 6px #c9a22733}.cmd-btn--empty{opacity:.3;cursor:default;background:repeating-linear-gradient(45deg,transparent 0px,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px),repeating-linear-gradient(-45deg,transparent 0px,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px),linear-gradient(135deg,#1e1a16,#141210)}.cmd-btn--empty:hover{border-color:var(--wc3-stone-light);box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo)}.cmd-hotkey{position:absolute;bottom:2px;right:3px;font-size:8px;font-weight:600;color:var(--wc3-gold-dim);font-family:var(--font-mono)}.cmd-tooltip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:#0d0b08f2;border:1px solid var(--wc3-gold-dim);border-top:2px solid var(--wc3-gold);padding:4px 8px;font-size:10px;color:var(--wc3-parchment);white-space:nowrap;z-index:20;pointer-events:none;box-shadow:0 2px 8px #0006}.cmd-btn:hover .cmd-tooltip{display:block}.cmd-btn--disabled{opacity:.35;cursor:not-allowed}.cmd-btn--disabled:hover{border-color:var(--wc3-stone-light);box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo)}.cmd-icon{display:block;width:16px;height:16px;image-rendering:pixelated}.cmd-cost{font-size:8px;color:var(--wc3-gold-dim);margin-top:2px}#build-menu{position:absolute;bottom:calc(25vh + 8px);right:12px;display:none;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;background:#0d0b08f2;border:2px solid var(--wc3-gold-dim);border-radius:4px;box-shadow:0 4px 16px #0009;z-index:15}.build-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;background:linear-gradient(135deg,#1e1a16,#141210);border:1px solid var(--wc3-stone-light);border-radius:2px;cursor:pointer;position:relative;transition:border-color .15s;min-width:64px}.build-btn:hover{border-color:var(--wc3-gold)}.build-btn--disabled{opacity:.35;cursor:not-allowed}.build-btn--disabled:hover{border-color:var(--wc3-stone-light)}.build-btn--cancel{grid-column:1 / -1;font-size:10px;color:var(--wc3-critical);text-align:center}.build-icon{display:block;width:18px;height:18px;image-rendering:pixelated}.build-label{font-size:9px;color:var(--wc3-parchment)}.build-cost{font-size:8px;color:var(--wc3-gold-dim)}.build-hotkey{position:absolute;top:2px;right:3px;font-size:7px;color:var(--wc3-gold-dim);font-family:var(--font-mono)}.train-queue{display:none;align-items:center;gap:4px;padding:4px 8px;margin-top:4px}.train-slot{width:28px;height:28px;background:#0006;border:1px solid var(--wc3-stone-light);border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.train-icon{display:block;width:14px;height:14px;image-rendering:pixelated}.train-pos{position:absolute;bottom:1px;right:2px;font-size:7px;color:var(--wc3-gold-dim)}.train-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#0009}.train-progress__fill{height:100%;background:var(--wc3-gold);transition:width .1s linear}.train-slot{cursor:pointer}.train-cancel-x{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#e04040;font-weight:700;background:#00000080;opacity:0;transition:opacity .15s;pointer-events:none}.train-slot:hover .train-cancel-x{opacity:1}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#141210,#0a0908,#000);z-index:100;gap:16px;transition:opacity .6s ease}#loading.fade-out{opacity:0;pointer-events:none}#loading h1{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--wc3-gold);letter-spacing:6px;text-shadow:0 2px 8px rgba(201,162,39,.4)}#loading p{font-size:12px;color:#e8d5b080;letter-spacing:1px;transition:opacity .2s ease}#loading p.loading-flavor--fade{opacity:0}.loading-bar{width:280px;height:8px;background:#0009;border:1px solid var(--wc3-gold-dim);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 3px #00000080}.loading-bar__fill{height:100%;width:0%;background:linear-gradient(90deg,var(--wc3-gold-dim),var(--wc3-gold),var(--wc3-gold-light));border-radius:3px;transition:width .4s ease;animation:loading-pulse 1.8s ease-in-out infinite}@keyframes loading-pulse{0%,to{box-shadow:0 0 4px #c9a22733}50%{box-shadow:0 0 12px #c9a22780}}.loading-filigree{position:absolute;top:24px;width:40px;height:40px;border-top:2px solid var(--wc3-gold-dim)}.loading-filigree--left{left:24px;border-left:2px solid var(--wc3-gold-dim)}.loading-filigree--right{right:24px;border-right:2px solid var(--wc3-gold-dim)}.loading-version{position:absolute;bottom:16px;right:20px;font-size:10px;color:#e8d5b033;font-family:var(--font-mono)}.viewport-tooltip{position:absolute;z-index:15;pointer-events:none;background:#0d0b08eb;border:1px solid var(--wc3-gold-dim);border-top:2px solid var(--wc3-gold);padding:3px 8px;font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--wc3-parchment);white-space:nowrap;box-shadow:0 2px 8px #00000080;letter-spacing:.5px}.cmd-btn--active{border-color:var(--wc3-gold-light)!important;box-shadow:inset 1px 1px 0 var(--bevel-hi),inset -1px -1px 0 var(--bevel-lo),0 0 10px #e8c44a66!important}.res-icon--time{color:#e8d5b099}@media(max-width:900px){#hud-frame{grid-template-columns:25% 1fr 30%;min-height:160px}#message-log{width:240px;font-size:10px}}@media(max-width:600px){#hud-frame{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;min-height:200px}#minimap-panel{display:none}#resource-bar{gap:10px;font-size:10px;padding:0 8px}.res-label{display:none}}@media(prefers-reduced-motion:reduce){.loading-bar__fill,.msg-line.msg-new{animation:none}.stat-bar__fill,#loading,#loading p,.cmd-btn,.build-btn,.train-progress__fill{transition:none}}