/* Dimensions use the supplied 1536-wide reference, while all data remains live. */
:root{--u:min(.0651042vw,.19vh)}#game{background:#354326;color:#f3e2bd}.reference-hud{position:absolute;inset:0 0 auto;height:calc(94*var(--u));z-index:3;pointer-events:none;background:linear-gradient(#050804ed,#050804bb 66%,transparent)}#controls{position:absolute;inset:0;pointer-events:none}.reference-hud button,.reference-hud nav{pointer-events:auto}
.profile{position:absolute;top:calc(7*var(--u));left:max(calc(12*var(--u)),env(safe-area-inset-left));height:calc(83*var(--u));width:calc(250*var(--u));display:flex;align-items:center;gap:calc(11*var(--u));padding:0;text-align:left;border:0;box-shadow:none;background:none;min-width:0;border-radius:0;color:#f5ead1}.profile .avatar{width:calc(84*var(--u));height:calc(84*var(--u));border-radius:50%;border:calc(6*var(--u)) ridge #ad8b53;background:radial-gradient(#746040,#192012 70%);overflow:hidden;box-shadow:0 2px 5px #0009;flex-shrink:0}.profile .avatar img{display:block;width:100%;height:145%;object-fit:contain;object-position:center top;margin-top:calc(3*var(--u));filter:drop-shadow(0 2px #0005)}.profile .identity{display:block;flex:1;min-width:0}.profile .identity b{font-size:calc(19*var(--u));display:block;text-transform:uppercase;line-height:1.05;letter-spacing:calc(.5*var(--u));color:#fff4dd;text-shadow:0 2px #000}.profile .level-pill{font-size:calc(13*var(--u));display:block;width:calc(95*var(--u));margin-top:calc(4*var(--u));text-align:center;border:1px solid #b98e45;border-radius:calc(15*var(--u));background:#000b;color:#ffd36a;padding:calc(3*var(--u)) 0}.profile .xp-bar{position:relative;display:block;margin-top:calc(5*var(--u));height:calc(24*var(--u));border:1px solid #b39159;border-radius:calc(15*var(--u));overflow:hidden;font-size:calc(12*var(--u));color:#f0cb75;text-align:center;line-height:calc(21*var(--u));background:#070b05e6;white-space:nowrap}.xp-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#899b44,#445922);opacity:.7}.xp-bar em{position:relative;font-style:normal}
.resources{position:absolute;left:calc(364*var(--u));top:0;height:calc(65*var(--u));max-width:none;transform:none;display:flex;gap:0;padding:0;align-items:stretch;background:#020502ad;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}.resource{min-width:calc(100*var(--u));padding:calc(10*var(--u)) calc(13*var(--u));display:grid;grid-template-columns:calc(30*var(--u)) auto;grid-template-rows:calc(25*var(--u)) auto;gap:0 calc(7*var(--u));border-right:1px solid #b58b4c55}.resource i{grid-row:1/3;width:calc(32*var(--u));font-size:calc(29*var(--u));font-style:normal;filter:drop-shadow(0 2px 1px #0009)}.resource b{font-size:calc(20*var(--u));line-height:1;color:#f1d084}.resource small{display:block!important;grid-column:2;font-size:calc(9*var(--u));color:#fff5df}.clock{position:absolute;left:calc(678*var(--u));right:auto;top:0;height:calc(65*var(--u));padding:calc(10*var(--u)) calc(11*var(--u));display:flex!important;align-items:center;gap:calc(12*var(--u));background:#030603ad;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;text-align:left}.sun{font-size:calc(40*var(--u));color:#ffc94c;text-shadow:0 2px #946219}#clock-text{font-size:calc(15*var(--u));font-weight:bold;white-space:nowrap;line-height:1.25;min-width:calc(63*var(--u));color:#fff0d0}.clock .speeds{display:flex;gap:calc(9*var(--u));margin:0 0 0 calc(10*var(--u));align-items:center}.clock button{min-width:0;width:calc(38*var(--u));height:calc(38*var(--u));min-height:0;padding:0;border-radius:50%;border:calc(2*var(--u)) solid #9c784d;font-size:calc(16*var(--u));background:#080e0ccc;color:#f1dcb2;box-shadow:inset 0 1px 3px #ffe0a322,0 3px 2px #0006}.clock button.active{border-color:#b4cc71;background:linear-gradient(#85ba4e,#3c6c20);border-radius:50%;color:#fffbd0}
.rail{position:absolute;left:auto;right:max(calc(17*var(--u)),env(safe-area-inset-right));top:calc(8*var(--u));display:flex;gap:calc(12*var(--u));padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}.rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1*var(--u));width:calc(59*var(--u));height:calc(56*var(--u));min-height:0;border:calc(1.5*var(--u)) solid #a78353;border-radius:calc(9*var(--u));background:linear-gradient(#171b16d9,#030604ee);box-shadow:inset 0 1px 1px #f4d59655,0 3px 5px #0005;padding:calc(4*var(--u))}.rail button i{font-style:normal;font-size:calc(30*var(--u));color:#e1b16d;line-height:1.1;filter:drop-shadow(0 2px 1px #0009)}.rail button span{display:block;font-size:calc(8*var(--u));color:#f2e9d5;line-height:1.1}.hud-toggle{position:absolute;right:max(calc(20*var(--u)),env(safe-area-inset-right));top:calc(72*var(--u));z-index:7;background:#0b110ddd;border:1px solid #97774999;color:#d7bd83;display:flex;align-items:center;gap:4px;border-radius:10px;min-height:22px;min-width:36px;font-size:13px;padding:0 7px;box-shadow:0 1px 4px #0005}.hud-toggle small{font-size:7px;letter-spacing:1px}.hud-toggle span{font-size:13px}.hud-off .hud-toggle{top:max(8px,env(safe-area-inset-top))}
.dark-panel{position:absolute;top:calc(109*var(--u));background:linear-gradient(115deg,#070d09f3,#030805ee);border:calc(1.5*var(--u)) solid #967440;border-radius:calc(12*var(--u));padding:calc(13*var(--u));box-shadow:inset 0 1px 2px #f9ddb51a,0 6px 20px #0003;z-index:2;color:#f4e9cf}.dark-panel h2{font-size:calc(13*var(--u));margin:0 0 calc(8*var(--u));padding:0 0 calc(10*var(--u));border-bottom:1px solid #9d7b4444;color:#efd5a1}#clan{left:max(calc(13*var(--u)),env(safe-area-inset-left));width:calc(208*var(--u))}.clan-task{display:grid;grid-template-columns:calc(21*var(--u)) 1fr;width:100%;text-align:left;padding:calc(8*var(--u)) 0;border-bottom:1px solid #9d7b443f;border-radius:0;font-size:calc(12*var(--u));line-height:1.3;min-height:0;color:#fff4dd;gap:calc(3*var(--u)) calc(4*var(--u))}.clan-task:last-child{border:0}.clan-task i{font-size:calc(17*var(--u));font-style:normal;grid-row:1/3}.clan-task small{font-size:calc(10*var(--u));font-weight:normal;grid-column:2}.clan-task em{font-style:normal;color:#e8c16f;float:right;font-weight:bold}.clan-task.locked{opacity:.58}#village-life{right:max(calc(17*var(--u)),env(safe-area-inset-right));top:calc(97*var(--u));width:calc(254*var(--u));padding:calc(16*var(--u))}.life-actions{display:grid;gap:calc(2*var(--u));padding:0 0 calc(10*var(--u));margin-bottom:calc(10*var(--u));border-bottom:1px solid #9d7b4444}.life-actions button{min-height:0;padding:calc(3*var(--u)) 0;text-align:left;font-size:calc(12*var(--u));color:#e8ddc5;display:flex;align-items:center;gap:calc(9*var(--u))}.life-actions button span{width:calc(21*var(--u));color:#c9b57e;text-align:center}.life-actions button.active{color:#c9e694}.need-row{display:grid;grid-template-columns:calc(23*var(--u)) 1fr calc(48*var(--u));align-items:center;gap:calc(7*var(--u));margin:calc(10*var(--u)) 0;font-weight:bold}.need-row>span{font-size:calc(20*var(--u));line-height:1;color:var(--need-color);text-shadow:0 2px 1px #000}.need-track{height:calc(15*var(--u));background:#1d201b;border:1px solid #000b;border-radius:calc(10*var(--u));box-shadow:inset 0 2px 3px #0007;overflow:hidden}.need-track i{height:100%;display:block;background:linear-gradient(#ffffff22,#ffffff00 40%,#0004),var(--need-color);border-radius:inherit;box-shadow:inset 0 2px 1px #fff2}.need-row output{text-align:right;color:#f4e7cc;font-size:calc(11*var(--u));white-space:nowrap}.life-more{font-size:calc(9*var(--u));min-height:0;color:#cfb582;padding:0}#game[data-scene="city"] #clan,#game[data-scene="city"] #village-life,.hud-off #clan,.hud-off #village-life,.hud-off #hud{display:none}#place-name,#quest-hint,#hud-version{display:none!important}
.gold-button{position:absolute;bottom:calc(19*var(--u));height:calc(90*var(--u));width:calc(206*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(6*var(--u));background:linear-gradient(135deg,#ffdb77 0,#ecb043 44%,#e49b25 70%,#efb73e);border:calc(6*var(--u)) ridge #ffc85a;outline:1px solid #bd7d20;border-radius:calc(35*var(--u)) calc(29*var(--u)) calc(35*var(--u)) calc(34*var(--u));box-shadow:inset 0 0 0 calc(2*var(--u)) #ffe291,0 calc(6*var(--u)) 0 #5d350b9c,0 5px 9px #0005;z-index:3;color:#432501;font-size:calc(27*var(--u));text-shadow:0 1px #ffdd81;padding:calc(5*var(--u)) calc(10*var(--u));min-height:0}.gold-button:before,.gold-button:after{content:'';position:absolute;top:30%;width:calc(9*var(--u));height:calc(13*var(--u));background:#ffe194;border-radius:3px;transform:rotate(35deg);box-shadow:0 calc(20*var(--u)) #c8882477}.gold-button:before{left:calc(-5*var(--u))}.gold-button:after{right:calc(-5*var(--u))}.shop-button{left:max(calc(16*var(--u)),env(safe-area-inset-left))}.missions-button{right:max(calc(17*var(--u)),env(safe-area-inset-right));width:calc(202*var(--u));font-size:calc(24*var(--u))}.gold-button img,.gold-button>i{width:calc(80*var(--u));height:calc(80*var(--u));object-fit:contain;filter:drop-shadow(0 3px 2px #68441077);margin-left:calc(-10*var(--u))}.gold-button>i{font-size:calc(55*var(--u));width:calc(63*var(--u));height:calc(70*var(--u));font-style:normal;transform:rotate(9deg);display:grid;place-content:center}.missions-button>b{position:absolute;top:calc(-13*var(--u));right:calc(-4*var(--u));min-width:calc(31*var(--u));height:calc(32*var(--u));border-radius:50%;border:calc(3*var(--u)) ridge #ef7857;background:linear-gradient(#ec342a,#880f10);color:#fff4d9;display:grid;place-content:center;font-size:calc(21*var(--u));text-shadow:0 2px #77110b;box-shadow:0 2px 3px #0008}
#bottom-dock{position:absolute;bottom:calc(12*var(--u));left:50%;width:calc(704*var(--u));transform:translateX(-50%);z-index:4;pointer-events:none}#bottom-dock button,#bottom-content{pointer-events:auto}#bottom-nav{position:relative;left:auto;bottom:auto;transform:none;display:flex;width:100%;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;height:calc(42*var(--u));z-index:1}#bottom-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u));font-size:calc(13*var(--u));color:#583e22;padding:calc(8*var(--u)) calc(5*var(--u));min-height:0;border:calc(4*var(--u)) ridge #cdb088;background:linear-gradient(130deg,#ebd0a6,#c1a078);border-radius:calc(12*var(--u)) calc(11*var(--u)) calc(3*var(--u)) calc(3*var(--u));text-shadow:0 1px #f4dcb3;white-space:nowrap;box-shadow:0 2px 4px #35261966}#bottom-nav button span{font-size:calc(20*var(--u));color:#906020;width:calc(21*var(--u));height:calc(21*var(--u));font-weight:bold;text-align:center}#bottom-nav button.active{background:linear-gradient(130deg,#f9e5be,#dfbf8f);border-bottom-color:#e9cca0;box-shadow:inset 0 1px #fff3d2}
.parchment{color:#51391f;background:radial-gradient(ellipse at 35% 12%,#f8e6bd66,transparent 65%),repeating-linear-gradient(77deg,#6e421107 0 1px,transparent 1px 4px),linear-gradient(115deg,#ead0a6,#e5c69a 50%,#d9b987);border:calc(8*var(--u)) ridge #b99c73;border-top:0;border-radius:calc(9*var(--u)) calc(5*var(--u)) calc(23*var(--u)) calc(19*var(--u));min-height:calc(111*var(--u));height:calc(112*var(--u));box-shadow:0 calc(6*var(--u)) 0 #65503588,0 6px 20px #0004;padding:calc(10*var(--u));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.dock-progress{display:flex;align-items:center;gap:calc(12*var(--u));height:100%}.dock-progress>img{width:calc(78*var(--u));height:calc(80*var(--u));object-fit:contain;filter:drop-shadow(0 2px 2px #78583355)}.dock-copy{width:calc(170*var(--u));flex-shrink:0}.dock-copy b{font-size:calc(14*var(--u));color:#382616}.dock-copy p{font-size:calc(10*var(--u));margin:calc(3*var(--u)) 0;line-height:1.35}.dock-copy button{min-height:0;background:linear-gradient(#88b746,#477221);border:1px solid #355314;border-radius:calc(15*var(--u));color:#fff4d1;text-shadow:0 1px #354717;box-shadow:inset 0 1px #d1dd9255,0 2px 2px #563c2244;font-size:calc(11*var(--u));padding:calc(5*var(--u)) calc(16*var(--u));margin-top:calc(3*var(--u))}.dock-items{display:flex;flex:1;justify-content:space-evenly;align-items:center;gap:calc(8*var(--u));height:100%}.dock-item{display:flex;flex-direction:column;align-items:center;padding:0;min-height:0;font-size:calc(11*var(--u));position:relative}.dock-item .item-art{width:calc(75*var(--u));height:calc(73*var(--u));background:radial-gradient(#95734444,#b7976844);border:1px solid #9f7c4c66;border-radius:50%;display:grid;place-items:center}.item-art img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 2px 2px #79512366)}.dock-item small{color:#fff1cf;background:#7f6039;border:1px solid #eed1a4;border-radius:calc(8*var(--u));min-width:calc(65*var(--u));font-size:calc(10*var(--u));line-height:1.1;padding:calc(2*var(--u)) calc(5*var(--u));margin-top:calc(-1*var(--u));white-space:nowrap}.dock-item em{font-style:normal;font-size:calc(10*var(--u));color:#604625;margin-top:calc(2*var(--u))}
.scene-switch{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto calc(5*var(--u));width:max-content;background:linear-gradient(#a99272,#6c5c48);border:calc(5*var(--u)) ridge #cbb18c;box-shadow:0 2px 4px #0008;border-radius:calc(30*var(--u));padding:0;display:flex;align-items:center;pointer-events:auto;height:calc(40*var(--u))}.scene-switch button{min-height:0;height:calc(29*var(--u));min-width:calc(111*var(--u));font-size:calc(14*var(--u));background:transparent;border:0;color:#fff3db;padding:0 calc(15*var(--u));border-radius:calc(18*var(--u));text-shadow:0 1px #392410}.scene-switch button.active{color:#392205;background:linear-gradient(#ffe497,#eaae44);border:1px solid #a26d26;box-shadow:inset 0 1px #ffefbd,0 1px 4px #3d2d15aa;text-shadow:none}.scene-switch #build-status{position:absolute;bottom:100%;width:100%;background:#0a100bdc;color:#edc370;white-space:nowrap;font-size:calc(9*var(--u));padding:calc(4*var(--u));border-radius:calc(5*var(--u))}
.bottom-toggle,body:has(#bottom-nav:not([hidden])) .bottom-toggle{position:absolute;left:calc(50% + 370*var(--u));right:auto;bottom:calc(16*var(--u));transform:none;width:calc(32*var(--u));height:calc(31*var(--u));min-width:22px;min-height:22px;border:1px solid #8d704b;background:#ead3a8e8;color:#503c24;font-size:calc(18*var(--u));border-radius:calc(10*var(--u));box-shadow:0 3px 0 #49392177;z-index:5;padding:0}.bottom-off .bottom-toggle{left:calc(50% + 120*var(--u))!important}.bottom-off #bottom-nav,.bottom-off #bottom-content,.bottom-off #queue{display:none!important}.bottom-off #bottom-dock{bottom:calc(11*var(--u))}.bottom-off .gold-button{display:none}.camera-tools,body.panel-open .camera-tools{position:absolute;top:calc(76*var(--u));bottom:auto;right:max(calc(96*var(--u)),env(safe-area-inset-right));padding:0;display:flex;gap:1px;border:1px solid #b5966555;border-radius:8px;background:#0a110bbd;color:#e8d2a0;z-index:3;box-shadow:none}.camera-tools button{min-height:21px;width:calc(26*var(--u));min-width:21px;height:calc(26*var(--u));font-size:14px;padding:0}.hud-off .camera-tools{top:8px}
#queue{position:relative;top:auto;bottom:auto;left:auto;max-width:none;width:100%;border:1px solid #af8e5966;border-radius:0 0 8px 8px;background:#0e190ee8;color:#ecdfbc;display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(10*var(--u));padding:calc(5*var(--u));box-shadow:none;overflow:auto;max-height:calc(45*var(--u));white-space:nowrap}#queue button{min-height:0;font-size:calc(10*var(--u));border:1px solid #89714b;border-radius:calc(8*var(--u));padding:calc(4*var(--u));background:#56462e;color:#f2e3c3}.panel{position:absolute;right:max(calc(18*var(--u)),env(safe-area-inset-right));top:calc(106*var(--u));bottom:calc(123*var(--u));width:clamp(250px,calc(330*var(--u)),400px);border-radius:13px;border:4px ridge #b39367;background:linear-gradient(120deg,#f2dcac,#d8ba8d);color:#513820;box-shadow:0 8px 30px #0006;z-index:8}.panel h1{font-size:17px}.panel header{padding:7px 10px}.panel header button{min-height:32px}.panel .card button{background:linear-gradient(#89ad4f,#52722f);border-color:#4e692d;color:#fff2cc;min-height:32px}.panel .card{background:#fff0c570}.panel .card img.item-preview{width:75px;height:65px;float:right;object-fit:contain}.panel .card button.secondary{color:#584023;background:#d6b989}.panel .card small{color:#6f5333}.panel .card p{color:#634c30}.panel .need meter{height:16px}.panel .mode{background:#c1a06c33}body.panel-open .clock{display:flex!important}body.panel-open .scene-switch{left:auto}body.panel-open #village-life{display:none}.panel-open .bottom-toggle{display:block!important}.placement{z-index:10;bottom:calc(120*var(--u));color:#50391d;background:#ecd4a2;left:50%;font-size:12px}.placement button{color:#263814;background:#aaca65;min-height:32px}#toast{top:calc(100*var(--u));font-size:12px;background:#111b11f5;border:1px solid #b49252;color:#fbe8b8;max-width:65vw;z-index:25}.dock-task-list{font-size:calc(12*var(--u));display:flex;gap:calc(12*var(--u));align-items:center;height:100%}.dock-task-list p{flex:1}.dock-task-list button{font-size:calc(11*var(--u));min-height:0;background:#aa905f44;border:1px solid #a0875b;border-radius:calc(9*var(--u));padding:calc(9*var(--u))}
@media(max-width:900px){.hud-toggle{min-height:21px;top:calc(68*var(--u))}.hud-toggle small{font-size:6px}.camera-tools{top:calc(68*var(--u))}.panel{top:calc(90*var(--u));bottom:calc(103*var(--u));width:min(310px,39vw)}.panel h1{font-size:14px}.panel .card{padding:8px}.panel .card h2{font-size:13px}.panel .card button{font-size:10px;min-height:28px}.life-actions button{min-height:calc(24*var(--u))}#village-life{top:calc(98*var(--u))}}
@media(max-width:700px) and (orientation:landscape){.rail{gap:calc(8*var(--u))}.rail button{width:calc(59*var(--u))}.panel{width:40vw;top:48px;bottom:50px}.panel header{padding:3px 8px}.panel header button{min-height:27px}.panel h1{font-size:13px}#panel-body{padding:6px}.camera-tools{right:60px}.bottom-toggle{left:calc(50% + 370*var(--u))!important}.dark-panel{padding:calc(10*var(--u))}.need-row{margin:calc(11*var(--u)) 0}.hud-toggle{right:7px}.parchment{height:calc(123*var(--u))}.gold-button{width:calc(196*var(--u))}.rail button span{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}