:root{--ink:#0e0905;--oak:#241708;--oak-mid:#3a2812;--oak-edge:#6a4f2c;--brass:#d9a83f;--brass-bright:#f0cd7c;--bone:#d8c9a3;--bone-dim:#a08c66;--moss:#8fb35e;--ember:#d95b41;--parchment:#ecdcb2}*{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;background:var(--ink);width:100%;height:100%;margin:0;padding:0;font-family:Cormorant Garamond,serif;overflow:hidden}#game{position:fixed;inset:0}#game canvas{margin:0 auto;display:block}#hud{pointer-events:none;position:fixed;inset:0}#resource-bar{background:linear-gradient(#0e0905f0 0%,#0e090599 78%,#0e090500 100%);align-items:flex-start;gap:8px;padding:8px 12px 10px;animation:.45s cubic-bezier(.2,.8,.3,1) both hud-drop-in;display:flex;position:absolute;top:0;left:0;right:0}.resource{color:var(--parchment);font-variant-numeric:tabular-nums;background:linear-gradient(#3a2812eb,#1a1007f0);border:1px solid #7a5528d9;border-radius:9px;align-items:baseline;gap:6px;padding:5px 11px 8px 9px;font-size:16px;font-weight:600;line-height:1.1;display:flex;position:relative;box-shadow:inset 0 1px #ffebbe17,0 2px 5px #00000073}.resource .cap{background:#0000008c;border-radius:2px;height:3px;position:absolute;bottom:3px;left:8px;right:8px;overflow:hidden}.resource .cap i{background:linear-gradient(90deg, #b98f30, var(--brass-bright));border-radius:2px;height:100%;transition:width .4s;display:block}.resource.resource-full{border-color:var(--ember);color:#ffc9b8}.resource.resource-full .cap i{background:var(--ember);animation:1.6s ease-in-out infinite cap-pulse}@keyframes cap-pulse{50%{opacity:.45}}#topbar-city{border:1px solid var(--oak-edge);letter-spacing:.08em;color:var(--brass);white-space:nowrap;background:linear-gradient(#2e1d0b,#1a1007);border-top:none;border-radius:0 0 12px 12px;margin:-8px auto 0;padding:12px 18px 8px;font-family:Cinzel,serif;font-size:15px;font-weight:700;box-shadow:0 4px 12px #00000080}#settings-button{all:unset;pointer-events:auto;cursor:pointer;background:#1a1007eb;border:1px solid #7a5528d9;border-radius:9px;place-items:center;width:34px;height:34px;font-size:15px;transition:transform 80ms;display:grid}#settings-button:hover{border-color:var(--brass);transform:translateY(-1px)}#resource-bar .resource,#topbar-city{pointer-events:auto}#event-chips{pointer-events:none;flex-direction:column;align-items:flex-end;gap:7px;animation:.5s cubic-bezier(.2,.8,.3,1) .12s both hud-drop-in;display:flex;position:absolute;top:54px;right:12px}#event-chips.hidden{display:none}#alert-chips{flex-direction:column;align-items:flex-end;gap:7px;max-height:40vh;display:flex;overflow-y:auto}.event-chip{all:unset;pointer-events:auto;cursor:pointer;color:var(--parchment);background:linear-gradient(#2e1d0bf0,#160d06f0);border:1px solid #c9a3498c;border-radius:10px;align-items:baseline;gap:8px;padding:8px 12px;font-family:Cormorant Garamond,serif;font-size:14px;line-height:1.25;transition:transform 80ms;display:flex;box-shadow:0 4px 12px #00000073}.event-chip:hover{transform:translateY(-1px)}.event-chip.hidden{display:none}.event-chip .chip-title{color:var(--brass-bright);font-weight:700}.event-chip .chip-note{color:var(--bone-dim);font-size:13px}.alert-chip{animation:.3s cubic-bezier(.2,.8,.3,1) both chip-in}.alert-chip.warn{border-color:#9d4a34}.alert-chip.warn .chip-title{color:#ffb9a6}#chip-march.chip-ready{border-color:var(--brass-bright);animation:1.4s ease-in-out infinite chip-ready-pulse}@keyframes chip-ready-pulse{50%{box-shadow:0 0 14px #f0cd7ca6}}@keyframes chip-in{0%{opacity:0;transform:translate(14px)}}#toolbar{z-index:5;align-items:center;gap:6px;animation:.5s cubic-bezier(.2,.8,.3,1) .18s both hud-drop-in;display:flex;position:fixed;top:54px;left:12px}#fit-toggle{border:1px solid var(--oak-edge);background:#0e0905d1;border-radius:10px;gap:3px;padding:3px;display:flex}#fit-toggle button,#lens-toggle{all:unset;cursor:pointer;width:38px;height:38px;color:var(--bone-dim);border-radius:8px;place-items:center;font-size:16px;display:grid}#lens-toggle{border:1px solid var(--oak-edge);background:#0e0905d1;border-radius:10px;width:44px;height:44px}#fit-toggle button.active,#lens-toggle.active{background:var(--brass);color:#2b1c07}#toolbar.hidden{display:none}#minimap{border:1px solid var(--oak-edge);z-index:5;background:#0e0905d1;border-radius:9px;width:110px;height:70px;padding:5px;position:fixed;bottom:12px;left:12px}#minimap.hidden{display:none}#minimap .mm-map{clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%);background:linear-gradient(160deg,#7aa956,#3d5c28);width:100%;height:100%}#minimap-viewport{border:1.5px solid var(--brass);pointer-events:none;background:#d9a83f2e;border-radius:2px;position:absolute}#dock{z-index:6;align-items:flex-end;gap:12px;animation:.45s cubic-bezier(.2,.8,.3,1) .24s both dock-rise-in;display:flex;position:fixed;bottom:10px;left:50%;transform:translate(-50%)}#dock.hidden{display:none}.dock-btn{all:unset;cursor:pointer;background:linear-gradient(180deg, var(--oak-mid), #1c1108);border:1px solid var(--oak-edge);width:54px;height:54px;color:var(--bone);border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:transform .1s;display:flex;box-shadow:inset 0 1px #ffebbe1a,0 6px 14px #00000080}.dock-btn:hover{transform:translateY(-2px)}.dock-btn .ico{font-size:19px;line-height:1}.dock-btn .lbl{letter-spacing:.07em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;font-family:Cinzel,serif;font-size:8px;font-weight:700}.dock-btn.primary{color:#2b1c07;background:radial-gradient(circle at 50% 28%,#f4d98d,#c8952e 62%,#8f6518);border-color:#f7ead0;border-radius:18px;width:66px;height:66px}.dock-btn.primary .ico{font-size:25px}.dock-btn.primary .lbl{color:#4a3208;font-size:9px}#dock-world.no-troops{opacity:.55}@keyframes hud-drop-in{0%{opacity:0;transform:translateY(-12px)}}@keyframes dock-rise-in{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}#settings-popup{border:1px solid var(--oak-edge);color:var(--bone);text-align:center;z-index:10;background:linear-gradient(#1e1308fa,#100a05fa);border-radius:14px;min-width:240px;padding:18px 20px;font-size:15px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px #0009}#settings-popup.hidden{display:none}#settings-popup-title{letter-spacing:.04em;color:var(--parchment);margin-bottom:12px;font-family:Cinzel,serif;font-size:17px;font-weight:700}#settings-cityname-label{text-align:left;color:var(--bone-dim);margin-bottom:4px;font-size:13px;font-weight:600;display:block}#settings-cityname-row{gap:6px;display:flex}#settings-cityname{border:1px solid var(--oak-edge);min-width:0;color:var(--parchment);background:#00000059;border-radius:8px;flex:1;padding:8px 9px;font-family:Cormorant Garamond,serif;font-size:15px}#settings-cityname-error{color:#ffb9a6;text-align:left;margin-top:4px;font-size:13px}#settings-cityname-error.hidden{display:none}#settings-popup button{border:1px solid var(--oak-edge);background:linear-gradient(180deg, var(--oak-mid), #1c1108);width:100%;color:var(--parchment);cursor:pointer;border-radius:9px;margin-top:8px;padding:9px 12px;font-family:Cormorant Garamond,serif;font-size:15px;font-weight:600;transition:transform 80ms;display:block}#settings-popup button:hover{border-color:var(--brass);transform:translateY(-1px)}#settings-cityname-row button{white-space:nowrap;width:auto;margin-top:0}#build-confirm-popup{border:1px solid var(--oak-edge);color:var(--bone);text-align:center;z-index:40;pointer-events:none;background:linear-gradient(#1e1308f7,#100a05f7);border-bottom:none;border-radius:16px 16px 0 0;max-width:440px;max-height:75vh;margin:0 auto;padding:8px 22px 16px;font-size:15px;transition:transform .22s cubic-bezier(.2,.8,.3,1);position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(105%);box-shadow:0 -12px 28px #0000008c}#build-confirm-popup:not(.hidden){pointer-events:auto;transform:translateY(0)}#build-confirm-popup:before{content:"";background:#d8c9a34d;border-radius:2px;width:38px;height:4px;margin:6px auto 12px;display:block}#build-confirm-title{letter-spacing:.03em;color:var(--parchment);margin-bottom:5px;font-family:Cinzel,serif;font-size:16px;font-weight:700}#build-confirm-cost{color:var(--bone-dim);font-variant-numeric:tabular-nums;margin-bottom:8px;font-size:14px}#build-confirm-help{color:var(--bone-dim);margin-bottom:10px;font-size:12px}#build-confirm-hint{color:#ffb9a6;margin-bottom:10px;font-size:13px;font-weight:600}#build-confirm-hint.hidden{display:none}#build-confirm-actions{gap:8px;display:flex}#build-confirm-build{color:#2b1c07;cursor:pointer;letter-spacing:.03em;background:radial-gradient(circle at 50% 20%,#f4d98d,#c8952e 68%,#9c6f1c);border:1px solid #f7ead0;border-radius:10px;flex:2;padding:10px 12px;font-family:Cinzel,serif;font-size:13px;font-weight:700;transition:transform 80ms}#build-confirm-cancel{border:1px solid var(--oak-edge);background:linear-gradient(180deg, var(--oak-mid), #1c1108);color:var(--bone);cursor:pointer;border-radius:10px;flex:1;padding:10px 12px;font-family:Cormorant Garamond,serif;font-size:15px;font-weight:600;transition:transform 80ms}#build-confirm-build:hover,#build-confirm-cancel:hover{transform:translateY(-1px)}#build-confirm-build:disabled{color:#a89e8d;cursor:not-allowed;background:linear-gradient(#5a5347,#3c372f);border-color:#6a6155}#build-confirm-build:disabled:hover{transform:none}#side-panel{border-left:1px solid var(--oak-edge);width:min(360px,46vw);color:var(--bone);z-index:30;background:linear-gradient(#180f07f7,#0e0905f7);flex-direction:column;font-size:15px;transition:transform .28s cubic-bezier(.2,.8,.3,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(0);box-shadow:-14px 0 36px #0000008c}#side-panel.hidden{pointer-events:none;transform:translate(105%)}#side-panel-header{border-bottom:1px solid #7a552866;flex:none;align-items:center;gap:10px;padding:14px 18px 11px;display:flex}#side-panel-heading{text-align:left;flex:1;min-width:0}#side-panel-title{letter-spacing:.03em;color:var(--parchment);font-family:Cinzel,serif;font-size:17px;font-weight:700}#side-panel-subtitle{color:var(--bone-dim);margin-top:2px;font-size:13px}#side-panel-close{all:unset;cursor:pointer;background:var(--oak-mid);border:1px solid var(--oak-edge);width:32px;height:32px;color:var(--bone);text-align:center;border-radius:8px;flex:none;font-size:15px;line-height:32px}#side-panel-content{text-align:left;flex:1;min-height:0;padding:14px 18px 18px;overflow-y:auto}.panel-section.hidden{display:none}#building-portrait{background:radial-gradient(at 50% 80%,#7aa95673,#0000 72%),linear-gradient(#35461f,#1c2811);border:1px solid #7a552899;border-radius:12px;place-items:center;height:132px;margin-bottom:12px;display:grid;position:relative}#building-portrait.hidden{display:none}#building-portrait img{object-fit:contain;filter:drop-shadow(0 6px 8px #0000008c);max-width:80%;height:108px}#building-portrait-level{letter-spacing:.05em;color:#2b1c07;background:var(--brass);border-radius:7px;padding:3px 8px;font-family:Cinzel,serif;font-size:11px;font-weight:700;position:absolute;top:10px;left:10px}#building-popup-lines{color:var(--bone);flex-direction:column;gap:4px;margin-bottom:14px;font-size:14px;line-height:1.45;display:flex}#building-popup-actions{flex-direction:column;gap:8px;display:flex}#building-popup-actions button{border:1px solid var(--oak-edge);background:linear-gradient(180deg, var(--oak-mid), #1c1108);width:100%;color:var(--parchment);cursor:pointer;border-radius:10px;padding:10px 12px;font-family:Cormorant Garamond,serif;font-size:15px;font-weight:600;transition:transform 80ms;display:block}#building-popup-actions button:first-child:not(:disabled):not(.danger){color:#2b1c07;letter-spacing:.03em;background:radial-gradient(circle at 50% 20%,#f4d98d,#c8952e 68%,#9c6f1c);border-color:#f7ead0;font-family:Cinzel,serif;font-size:13px;font-weight:700}#building-popup-actions button:hover{transform:translateY(-1px)}#building-popup-actions button:disabled{color:#9a9082;cursor:not-allowed;opacity:.8;background:linear-gradient(#4a4438,#322e26);border-color:#5a5347}#building-popup-actions button:disabled:hover{transform:none}#building-popup-actions button.danger{color:#ffd9cd;background:linear-gradient(#7a2a1e,#4d1a12);border-color:#8e2f22}#building-worker-row{align-items:center;gap:10px;margin:10px 0 14px;display:flex}#building-worker-row:empty{margin:0;display:none}#building-worker-row button{all:unset;cursor:pointer;background:var(--oak-mid);border:1px solid var(--oak-edge);width:42px;height:42px;color:var(--bone);text-align:center;border-radius:10px;flex:none;font-size:20px;line-height:42px}#building-worker-row button.emphasis{color:#2b1c07;background:linear-gradient(#e3c072,#a87f2c);border-color:#f2dfad}#building-worker-row button:disabled{opacity:.4;cursor:not-allowed}#building-worker-count{text-align:center;color:var(--parchment);flex:1;font-family:Cinzel,serif;font-size:18px;font-weight:700}#build-popup-choices{flex-direction:column;gap:10px;display:flex}.build-group-label{letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-top:4px;font-family:Cinzel,serif;font-size:11px;font-weight:700}.build-group{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;display:grid}.build-group button{all:unset;cursor:pointer;text-align:center;background:linear-gradient(#4630168c,#221509b3);border:1px solid #7a5528b3;border-radius:11px;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 9px;transition:transform .1s,border-color .1s;display:flex}.build-group button:hover{border-color:var(--brass);transform:translateY(-2px)}.build-thumb{object-fit:contain;filter:drop-shadow(0 3px 4px #00000080);width:auto;max-width:76px;height:44px}.build-name{letter-spacing:.02em;color:var(--parchment);font-family:Cinzel,serif;font-size:10.5px;font-weight:700}.build-popup-cost{color:var(--bone-dim);font-variant-numeric:tabular-nums;font-size:12px}.build-popup-cost .cost-short{color:#ffb9a6;font-weight:700}.build-group button.unaffordable{opacity:.5;filter:saturate(.35);cursor:not-allowed}.build-group button.unaffordable:hover{border-color:#7a5528b3;transform:none}#population-popup-lines{text-align:left;flex-direction:column;gap:12px;margin-bottom:16px;font-size:14px;line-height:1.45;display:flex}.pop-section{border-bottom:1px solid #7a552859;padding-bottom:10px}.pop-section:last-child{border-bottom:none;padding-bottom:0}.pop-row{font-variant-numeric:tabular-nums;justify-content:space-between;gap:8px;display:flex}.pop-row-main{color:var(--parchment);margin-bottom:4px;font-weight:700}.pop-rank-breakdown .pop-row{padding:2px 0}.pop-bar{background:#00000073;border-radius:5px;height:9px;margin-bottom:6px;overflow:hidden}.pop-bar-fill{background:linear-gradient(90deg, #b98f30, var(--brass-bright));border-radius:5px;height:100%}.pop-bar-fill.pop-bar-good{background:linear-gradient(90deg, #5f8a3c, var(--moss))}.pop-bar-fill.pop-bar-bad{background:linear-gradient(90deg, #a03a28, var(--ember))}.pop-detail{color:var(--bone-dim);font-size:13px}.pop-detail.pop-good{color:var(--moss)}.pop-detail.pop-bad{color:#ffb9a6}#login-overlay{z-index:100;background:radial-gradient(ellipse at center, #1c1108 0%, var(--ink) 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#login-overlay.hidden{display:none}#login-form{border:1px solid var(--oak-edge);background:linear-gradient(#1e1308fa,#100a05fa);border-radius:14px;flex-direction:column;gap:10px;width:270px;padding:24px 22px;display:flex;box-shadow:0 12px 32px #0009}#login-title{letter-spacing:.05em;color:var(--brass);text-align:center;margin-bottom:6px;font-family:Cinzel,serif;font-size:20px;font-weight:700}#login-form input{border:1px solid var(--oak-edge);color:var(--parchment);background:#00000059;border-radius:8px;padding:9px 10px;font-family:Cormorant Garamond,serif;font-size:15px}#login-form button{color:#2b1c07;cursor:pointer;letter-spacing:.03em;background:radial-gradient(circle at 50% 20%,#f4d98d,#c8952e 68%,#9c6f1c);border:1px solid #f7ead0;border-radius:9px;padding:10px 12px;font-family:Cinzel,serif;font-size:13px;font-weight:700;transition:transform 80ms}#login-form button:hover{transform:translateY(-1px)}#login-signup{border-color:var(--oak-edge)!important;color:var(--bone)!important;background:0 0!important;font-family:Cormorant Garamond,serif!important;font-size:15px!important;font-weight:600!important}#login-error{color:#ffb9a6;text-align:center;font-size:13px}#login-error.hidden{display:none}#toast{color:#ffe9e0;z-index:20;opacity:1;pointer-events:none;text-align:center;background:linear-gradient(#7a1f1f,#4a0f0f);border:1px solid #b04a3a;border-radius:10px;max-width:min(520px,86vw);padding:10px 18px;font-family:Cormorant Garamond,serif;font-size:15px;font-weight:600;transition:opacity .3s;position:fixed;bottom:92px;left:50%;transform:translate(-50%);box-shadow:0 8px 20px #00000080}#toast.hidden{opacity:0}#loading-indicator{background:linear-gradient(180deg, var(--oak-mid), #1c1108);border:1px solid var(--oak-edge);color:var(--parchment);z-index:20;opacity:1;pointer-events:none;border-radius:12px;padding:6px 16px;font-family:Cormorant Garamond,serif;font-size:14px;font-weight:600;transition:opacity .15s;position:fixed;top:62px;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #0006}#loading-indicator.hidden{opacity:0}#rotate-hint{z-index:1000;background:radial-gradient(ellipse at center, var(--oak-mid) 0%, var(--ink) 100%);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:40px;display:none;position:fixed;inset:0}#rotate-hint-icon{font-size:64px;animation:1.8s ease-in-out infinite rotate-hint-spin}@keyframes rotate-hint-spin{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}#rotate-hint-text{max-width:320px;color:var(--parchment);letter-spacing:.02em;font-family:Cinzel,serif;font-size:17px}@media (orientation:portrait) and (width<=700px){#rotate-hint{display:flex}}@media (height<=480px){.resource{padding:4px 9px 7px 7px;font-size:14px}#topbar-city{padding:10px 14px 6px;font-size:13px}.dock-btn{border-radius:13px;width:46px;height:46px}.dock-btn .ico{font-size:16px}.dock-btn.primary{width:56px;height:56px}.dock-btn.primary .ico{font-size:21px}#side-panel{width:min(340px,52vw)}#event-chips,#toolbar{top:46px}#building-portrait{height:104px}#building-portrait img{height:84px}}@media (prefers-reduced-motion:reduce){#resource-bar,#event-chips,#toolbar,#dock,.alert-chip,.resource.resource-full .cap i,#chip-march.chip-ready{animation:none}#side-panel,#build-confirm-popup{transition:none}}