:root{
 --ink:#3f554c;--muted:#7c8874;--teal:#367f77;--cream:#f6efd8;--gold:#be9655;--edge:#bdab82;
 --stone:linear-gradient(175deg,#fffbee 0%,#f2ead3 52%,#e2d5b8 100%);
 --wood:linear-gradient(180deg,#ddc295 0%,#c7a574 45%,#b99260 100%);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.065' d='M0 0h150v150H0z'/%3E%3C/svg%3E");
 --raised:inset 0 1px 0 #ffffffe8,inset 0 -2px 0 #b6a37c5c,0 3px 0 #7c705d69,0 6px 12px #1c4a4a26;
 font-family:'Segoe UI','Microsoft YaHei',sans-serif;font-size:13px;color:var(--ink)
}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#218fae}button,select,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;transition:filter .15s,transform .15s,box-shadow .15s}button:hover{filter:brightness(1.045)}button:active{transform:translateY(2px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #287f7a;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}svg{flex:none}#world{display:block;width:100vw;height:100vh;touch-action:none;outline:0}#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 105px #08627f13;background:linear-gradient(#f4e8ca0b,transparent 20%,transparent 85%,#0c456b08)}
.panel{background-image:var(--grain),var(--stone);border:1px solid #c6b691;border-top-color:#fff7e1;border-bottom:3px solid #b6a17a;border-radius:10px;box-shadow:inset 0 0 0 1px #fff9e275,0 4px 0 #6d725935,0 7px 15px #124e5924}
#interface{position:fixed;inset:0;pointer-events:none}#interface button,#interface section,#interface nav,#interface .resource-bar,#interface .town-card{pointer-events:auto}#interface aside{pointer-events:none}.right-sidebar>*{pointer-events:auto}
.topbar{position:absolute;left:18px;right:18px;top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:15px}
.brand{position:relative;display:flex;align-items:center;gap:9px;width:194px;min-height:54px;padding:6px 14px 7px 10px;border:2px solid #c4a476;border-bottom-width:4px;border-radius:9px 11px 10px 8px;background-image:var(--grain),linear-gradient(178deg,#faf1d8,#ead8b5);box-shadow:inset 0 1px 0 #fffbe9,0 3px 0 #77634955,0 7px 12px #315b552c;color:#486357}
.brand:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;right:5px;top:6px;background:#b89151;box-shadow:0 1px 0 #fff4d1}
.brand-mark{display:grid;place-items:center;width:36px;height:34px;border-radius:50%;background:linear-gradient(#52958b,#2e706c);border:2px solid #d4b477;box-shadow:inset 0 2px 2px #194e6440,0 1px 0 #fff1c9;color:#fcf3d8;font-size:37px;line-height:.6;transform:rotate(-5deg);flex:none}
.brand h1{font-size:20px;letter-spacing:3px;font-weight:700;margin:0;text-shadow:0 1px 0 #fffbe1}.brand span{display:block;font-size:8px;letter-spacing:1.5px;margin-top:3px;color:#8b8165}
.resource-bar{position:relative;display:flex;align-items:center;justify-content:center;width:344px;min-height:51px;padding:7px 9px;border:2px solid #bea57b;border-top-color:#e4d2aa;border-bottom:4px solid #aa8c5f;border-radius:9px;background-image:var(--grain),linear-gradient(180deg,#fff9e9,#eee4c9);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fbf3dc,0 3px 0 #6a5b3d4d,0 7px 12px #1a536129}
.resource{display:flex;align-items:center;gap:8px;padding:0 15px;border-right:1px solid #c7bfa173;min-width:101px}.resource:last-child{border-right:0}.resource svg{width:24px;height:24px;filter:drop-shadow(0 1px 0 #fff7d2)}.resource div{display:flex;flex-direction:column;gap:1px}.resource b{font-size:16px;line-height:18px;font-weight:700;letter-spacing:.2px;font-variant-numeric:tabular-nums;color:#43574b;text-shadow:0 1px 0 #fff8e7}.resource small{font-size:9px;color:#968768;line-height:12px}
.top-actions{display:flex;justify-self:end;gap:7px;padding-top:5px}.round{width:36px;height:36px;border:1px solid #bfa981;border-top-color:#fff3d2;border-bottom:3px solid #b69b70;border-radius:50%;background-image:var(--grain),linear-gradient(150deg,#fff9e8,#f1e4c7 56%,#d7c199);box-shadow:var(--raised);display:grid;place-items:center;pointer-events:auto;color:#577766}.round svg{width:18px;height:18px;filter:drop-shadow(0 1px 0 #fff5d8)}.round.active{background:linear-gradient(145deg,#6da998,#397c73);border-color:#8ebca6;border-bottom-color:#325f59;color:#fff4d6;box-shadow:inset 0 1px 0 #b1d9bd,0 3px 0 #284b4a6b,0 5px 9px #20484a30}.round.active svg{filter:none}.round:active{box-shadow:inset 0 2px 4px #7a725534,0 1px 0 #72644955}
.town-card{position:absolute;left:18px;top:84px;width:194px;padding:10px 12px 9px;background-image:var(--grain),linear-gradient(160deg,#fbf7e7,#ecdfc2);border-radius:6px 9px 8px 7px}.town-title{display:flex;align-items:center;gap:6px}.town-title strong{font-size:12px;letter-spacing:.7px}.dot{width:6px;height:6px;border-radius:50%;background:#70a67d;box-shadow:0 1px 0 #fff4d1,0 0 0 2px #a6b59033}.tiny-badge{margin-left:auto;font-size:8px;border:1px solid #b8c0a3;border-bottom-width:2px;border-radius:4px;padding:2px 4px;color:#587666;background:linear-gradient(#eef3d7,#d8dfbe);white-space:nowrap;box-shadow:inset 0 1px 0 #fffbe4}.level-row{display:flex;justify-content:space-between;margin-top:8px;font-size:9px;color:#7a8069}.level-row span:last-child{font-size:9px;font-weight:650;color:#9b865e;letter-spacing:.6px}.progress{height:5px;border-radius:3px;background:#bfbda07a;box-shadow:inset 0 1px 2px #6b78502c,0 1px 0 #fff9e7;margin:5px 0 8px;overflow:hidden}.progress i{height:100%;display:block;border-radius:3px;width:45%;background:linear-gradient(#94b58e,#649b7d);box-shadow:inset 0 1px 0 #c4d9a7;transition:width .7s}.town-stats{display:flex;justify-content:space-between;font-size:9px;color:#7d876e}.town-stats svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.right-sidebar{position:absolute;right:18px;top:83px;width:234px;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.day-card{display:flex;align-items:center;gap:9px;width:234px;padding:8px 9px;border-radius:8px}.sun-icon{color:#b99850;display:flex}.sun-icon svg{width:24px;height:24px;filter:drop-shadow(0 1px 0 #fff5cf)}.day-card b{font-size:11px;display:block;font-weight:650;line-height:14px}.day-card small{display:block;font-size:9px;color:#899078;margin-top:1px;white-space:nowrap}.speed-control{margin-left:auto;display:flex;padding:2px;border:1px solid #c5b991;border-radius:6px;background:#d9d3b7;box-shadow:inset 0 1px 3px #6971541f}.speed-control button{min-width:22px;height:23px;padding:0 4px;font-size:9px;border-radius:4px;color:#7c846b}.speed-control .active{background:linear-gradient(#fff9e7,#e7d6b0);box-shadow:inset 0 1px 0 white,0 1px 2px #6c71593d;color:#496951}
.quest-card{width:126px;padding:0;border-radius:7px 10px 9px 7px;overflow:hidden;background-image:var(--grain),linear-gradient(110deg,#ddcfab 0 4px,#fff8df 5px,#f2e5c2 100%);transition:width .18s}.journal-toggle{display:flex;width:100%;min-height:38px;align-items:center;gap:7px;padding:8px 10px;color:#65735a;text-align:left;font-weight:650;font-size:11px;letter-spacing:.4px}.journal-toggle>svg{width:18px;height:18px;color:#a58a52;filter:drop-shadow(0 1px 0 #fff9da)}.journal-toggle-mark{margin-left:auto;font-size:14px;color:#9c8d66;font-weight:400}.quest-card.expanded,.quest-card:has(#quests:not(.hidden)){width:234px}.quest-card.expanded .journal-toggle,.quest-card:has(#quests:not(.hidden)) .journal-toggle{border-bottom:1px solid #d7cba779;box-shadow:0 1px 0 #fffff04d}#quests{max-height:290px;overflow-y:auto;padding:0 11px;scrollbar-width:thin;scrollbar-color:#b6aa84 #efdfbd}.quest{padding:11px 0;border-bottom:1px solid #c6b99757}.quest:last-child{border:0}.quest-top{display:flex;align-items:center;gap:8px}.quest-symbol{display:grid;place-items:center;color:#789676;background:linear-gradient(#f5f5dc,#d6dfb7);width:27px;height:27px;border:1px solid #b9c19b;border-radius:50%;box-shadow:inset 0 1px 0 #fff9df;flex:none}.quest-symbol svg{width:16px;height:16px}.quest b{font-size:11px;font-weight:650;display:block;line-height:15px}.quest small{display:block;color:#989276;font-size:9px;margin-top:3px;line-height:14px}.quest-meter{height:4px;border-radius:2px;background:#d2caaa;box-shadow:inset 0 1px 1px #7c80622a;margin:8px 0 6px}.quest-meter i{height:100%;display:block;border-radius:2px;background:linear-gradient(#a8bd8e,#7fa277)}.quest-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:9px;color:#929478}.quest-bottom button{font-size:9px;font-weight:650;color:#4f785e;background:linear-gradient(#eff4cf,#ceddb4);border:1px solid #aabe8e;border-bottom-width:2px;border-radius:4px;padding:3px 6px;box-shadow:inset 0 1px 0 #faffdf}.quest-footer{display:none}
.trade-banner{display:flex;align-items:center;gap:8px;width:126px;padding:9px 10px;text-align:left;border-radius:8px;color:#617858;background-image:var(--grain),linear-gradient(#f7f1d9,#e4dab8)}.trade-icon{display:grid;place-items:center;color:#91a079}.trade-icon svg{width:19px;height:19px}.trade-banner b{font-size:11px;font-weight:650;white-space:nowrap}.trade-banner small{display:none}.trade-banner>span:last-child{margin-left:auto;color:#a29570;font-size:18px;line-height:12px}#event-banner{padding:9px 11px;width:234px;font-size:10px;line-height:16px;color:#94723e;background-image:var(--grain),linear-gradient(#fff5d4,#eee0b5)}
.view-tools{position:absolute;left:20px;bottom:24px;display:flex;gap:9px}.view-tools .round{width:36px;height:36px}.view-tools svg{width:18px;height:18px}
.build-dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:452px;padding:12px 12px 5px;border:2px solid #b79a6b;border-top-color:#eed7ad;border-bottom:5px solid #a78556;border-radius:14px 14px 11px 11px;background-image:var(--grain),linear-gradient(#f8ebcd 0%,#e6d3a9 77%,#d4b88a 100%);box-shadow:inset 0 2px 0 #fff9e2,inset 0 -1px 0 #e9d4a5,0 3px 0 #7f694759,0 9px 20px #23574e40}
.build-dock:before,.build-dock:after{content:'';position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#b18b50;border:1px solid #aa8448;box-shadow:inset 0 1px 0 #e9cc8b,0 1px 0 #fff0c9;pointer-events:none}.build-dock:before{left:5px}.build-dock:after{right:5px}
.dock-heading{position:absolute;top:-18px;left:50%;transform:translateX(-50%);height:25px;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:3px 5px 4px 14px;border:1px solid #b99c6b;border-top-color:#eddab7;border-bottom:3px solid #b89964;border-radius:7px 7px 5px 5px;background-image:var(--grain),linear-gradient(#faf0d2,#e7d1a2);box-shadow:inset 0 1px 0 #fff8e0,0 2px 4px #796a4630}.dock-heading h2{font-size:10px;letter-spacing:2px;margin:0;font-weight:650;color:#8b7950}.dock-heading>button{width:21px;height:18px;line-height:13px;padding:0 0 4px;font-size:16px;border-radius:4px;color:#8c815e;background:#cbb7853d;box-shadow:inset 0 1px 1px #9f936036}.eyebrow,#categories,.building-card .type-description{display:none!important}
.build-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible}.building-card{position:relative;min-width:0;min-height:94px;padding:3px 4px 6px;display:flex;flex-direction:column;align-items:center;border:1px solid #c4b48e;border-top-color:#fff7df;border-bottom:3px solid #b6a37a;border-radius:9px;background-image:radial-gradient(ellipse at 50% 68%,#bdb78b26 0%,#c6b9960a 45%,transparent 65%),linear-gradient(170deg,#fff8e5,#f3e8c9 67%,#e5d4ae);box-shadow:inset 0 1px 0 #fffdf1,0 2px 1px #8d7d531c;transition:transform .16s,box-shadow .16s,border-color .16s}.building-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 4px 0 #9a875536,0 7px 8px #52755f1f}.building-card:active{transform:translateY(1px)}.building-card.selected{border-color:#689f87;border-top-color:#a9cbb0;border-bottom-color:#3e7c6f;background:radial-gradient(ellipse at 50% 68%,#aac38a35,transparent 65%),linear-gradient(160deg,#f1f6d9,#dce7c5 69%,#bcd0ac);box-shadow:inset 0 1px 0 #fffbe0,0 0 0 2px #659b7b55,0 3px 0 #507b6140}.building-card img{width:94px;max-width:110%;height:58px;object-fit:contain;filter:drop-shadow(0 4px 2px #746b4539);pointer-events:none}.building-card b{font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 4px;padding-left:2px;color:#53664d;text-shadow:0 1px 0 #fff8dc}.building-card small{font-size:8px;line-height:10px;color:#9a8c69;white-space:nowrap;display:flex;align-items:center;gap:3px}.building-card.selected small{color:#72906c}.building-card small svg{width:10px;height:10px}.building-card .shortcut{position:absolute;top:5px;left:6px;font-size:8px;line-height:12px;min-width:12px;text-align:center;color:#ac9973;border:1px solid #c9ba976b;border-radius:3px;background:#faf3db9c;box-shadow:inset 0 1px 0 #fff9e5}.building-card .lock{position:absolute;top:5px;right:5px;font-size:8px;color:#997d54}.dock-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:7px;min-height:20px;font-size:8px;color:#9a8b64;white-space:nowrap}kbd{font-family:inherit;font-size:8px;line-height:12px;padding:1px 3px;border:1px solid #c7b790;border-bottom-width:2px;border-radius:3px;color:#8c8566;background:linear-gradient(#fff4d7,#e8d8b1);margin-right:3px;box-shadow:inset 0 1px 0 #fffae3}em{font-style:normal;margin:0 4px;opacity:.55}.build-dock.collapsed{width:142px;height:34px;padding:0;border-radius:8px}.build-dock.collapsed .build-items,.build-dock.collapsed .dock-footer{display:none}.build-dock.collapsed .dock-heading{top:2px;height:24px;border:0;background:none;box-shadow:none}.build-dock.collapsed .dock-heading>button{transform:rotate(180deg)}
.bottom-right{position:absolute;right:20px;bottom:24px;display:flex;align-items:center;gap:10px;color:#fbf2d3;text-align:right;text-shadow:0 1px 3px #285459cc}.bottom-right span{font-size:9px}.bottom-right>div:last-child{max-width:130px}.bottom-right small{display:none}.compass{position:relative;width:44px;height:44px;border:1px solid #e3cf9bb3;border-radius:50%;background:radial-gradient(#fcf0cc26,transparent 70%);box-shadow:inset 0 0 0 3px #fff1c816,0 1px 1px #4f776457;color:#f2e6bf}.compass>span{position:absolute;top:-11px;left:18px;font-size:8px}.compass svg{width:42px;height:42px}.compass i{position:absolute;width:4px;height:4px;border:1px solid currentColor;border-radius:50%;top:19px;left:19px}
#build-hint{position:absolute;left:50%;bottom:174px;transform:translateX(-50%);padding:7px 12px;font-size:10px;white-space:nowrap;background-image:var(--grain),linear-gradient(#4d8b7b,#397568);color:#fff2d2;border:1px solid #a6b993;border-bottom:3px solid #36685c;border-radius:7px;box-shadow:inset 0 1px 0 #b7cda47a,0 4px 12px #214b4330}#build-hint kbd{background:#79a38a;color:#fff8dc;border-color:#a1be94;border-bottom-color:#477f6b;font-size:8px}#build-hint button{padding:1px 3px;color:inherit;border-radius:3px}#selection{position:absolute;left:50%;top:24%;transform:translateX(-50%);width:242px;padding:15px;border-radius:8px}#selection h3{font-size:15px;margin:0 0 8px;letter-spacing:.5px;padding-right:15px}#selection h3 small{font-size:9px;color:#998761;font-weight:400;white-space:nowrap}#selection p{font-size:10px;color:#8b8b6f;line-height:1.7;margin:0 0 10px}#selection .actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}#selection .actions button{background:linear-gradient(#f7efd1,#e1d4aa);border:1px solid #b9b18d;border-bottom:3px solid #ac9f72;border-radius:5px;padding:8px 3px;font-size:10px;box-shadow:inset 0 1px 0 #fffae1}#selection .actions button:first-child{background:linear-gradient(#80ad8b,#578e77);border-color:#7b9d7b;border-bottom-color:#456f5d;color:#fff9dd}#selection .actions small{display:block;font-size:8px;margin-top:4px;opacity:.8}#selection .close-selection{position:absolute;right:8px;top:6px;font-size:20px;color:#a08b62}
.hidden{display:none!important}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:1px;font-weight:650}.icon-small{font-size:19px;line-height:20px;padding:0 5px;color:#9b8b67}#photo-panel{position:fixed;right:18px;top:18px;width:265px;padding:18px;border-radius:10px}#photo-panel label{display:block;font-size:11px;margin:20px 0;color:#7f8269}output{float:right;color:#567b65;font-size:10px}input[type=range]{display:block;width:100%;margin-top:10px;accent-color:#709c7a;height:5px;cursor:pointer}select{display:block;width:100%;margin-top:8px;border:1px solid #c4b78e;border-bottom-width:3px;border-radius:5px;padding:8px;color:#6b765e;background:linear-gradient(#fff9e5,#ede0bd);box-shadow:inset 0 1px 0 #fff}.primary,.secondary{display:block;width:100%;border-radius:6px;padding:10px 14px;font-size:12px;border:1px solid #b8b183;border-bottom-width:3px;box-shadow:inset 0 1px 0 #fff8d85e}.primary{background:linear-gradient(#7caa89,#4f8876);border-color:#85a387;border-bottom-color:#3c6c5c;color:#fff9df;margin-top:12px}.secondary{background:linear-gradient(#fbf2d8,#e8d8b1);border-color:#c5b48a;border-bottom-color:#af976d;margin-top:8px;color:#7b7c5d}#photo-panel p{font-size:9px;line-height:1.8;color:#929378;margin-bottom:0}
#toasts{position:fixed;left:50%;top:85px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;z-index:15}.toast{padding:9px 17px;border:1px solid #d8c6a0;border-bottom:3px solid #b6a578;border-radius:7px;background-image:var(--grain),linear-gradient(#fff8e2,#ebdfbf);box-shadow:inset 0 1px 0 #fff,0 4px 10px #36554a36;color:#657a58;font-size:11px;line-height:16px;animation:toast-in .2s ease-out;max-width:min(440px,calc(100vw - 28px));text-align:center}.toast.error{background:linear-gradient(#fff2d3,#e7d1a4);color:#957146}.toast.out{opacity:0;transform:translateY(-6px);transition:.25s}
dialog{position:fixed;width:450px;max-width:calc(100vw - 28px);max-height:86vh;overflow-y:auto;background-image:var(--grain),linear-gradient(145deg,#fff8e2,#ede0bd);border:2px solid #c4a77a;border-top-color:#ecdbb6;border-bottom:5px solid #a58a5d;border-radius:12px;box-shadow:inset 0 1px 0 #fff9e7,0 5px 0 #6f65454d,0 25px 90px #163b4370;padding:27px;color:var(--ink)}dialog::backdrop{background:#24484b4d;backdrop-filter:blur(3px)}#modal-close{position:absolute;right:12px;top:9px;font-size:24px;color:#998361}dialog h2{font-size:21px;font-weight:650;letter-spacing:1px;margin:0 0 10px}dialog p{font-size:11px;line-height:1.85;color:#85876b}dialog .button-row{display:flex;gap:8px;margin-top:10px}dialog .button-row button{flex:1}dialog hr{border:0;border-top:1px solid #b6a78059;box-shadow:0 1px 0 #fff7df7a;margin:19px 0}dialog .setting-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin:13px 0}dialog .setting-row select{width:148px;margin:0}dialog .trade-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #c8ba905d}dialog .trade-row b{font-size:12px}dialog .trade-row small{display:block;color:#949071;font-size:9px;margin-top:4px}dialog .trade-row button{border:1px solid #b7b48b;border-bottom:3px solid #98a177;background:linear-gradient(#eef2d2,#d4dfb6);padding:8px 11px;border-radius:5px;font-size:10px;box-shadow:inset 0 1px 0 #fffde6}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.overview-grid>div{background:linear-gradient(#f6eed4,#e3dab7);border:1px solid #c9bc925e;border-bottom-width:2px;padding:12px;border-radius:7px;display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:7px;box-shadow:inset 0 1px 0 #fff9e0}.overview-grid svg{width:17px;height:17px;color:#829774}.overview-grid b{font-size:11px}.overview-grid strong{font-size:18px;font-weight:600}.overview-grid small{grid-column:2/4;font-size:8px;color:#939071}.guide-line{display:flex;padding:9px 0;border-bottom:1px solid #c9bd935c;font-size:11px;justify-content:space-between;gap:8px}.guide-line kbd{font-size:9px}.guide-line span{color:#858d70;text-align:right}
#loading{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,#fff9e6,#e8dfc6);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:100;transition:opacity .65s}.load-mark{font-size:90px;color:#659c8d;font-weight:200;line-height:1;text-shadow:0 2px 0 #fff4d1}.load-line{height:3px;width:170px;background:#ccc8a8;border-radius:3px;margin-top:26px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px #7b80623b}.load-line:after{content:'';position:absolute;width:60px;height:3px;background:#75a28a;animation:load 1.4s infinite}#loading h1{font-size:28px;letter-spacing:8px;margin:10px 0;color:#597363;text-shadow:0 1px 0 #fff9e5}#loading p{color:#929076;font-size:11px;letter-spacing:2px}#loading small{color:#a09b7f;font-size:10px;margin-top:12px}#loading.done{opacity:0;pointer-events:none}.mobile-hint{display:none}@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes load{from{left:-60px}to{left:170px}}
@media(max-width:1050px){.topbar{left:14px;right:14px;gap:10px}.brand{width:175px;padding-left:8px}.brand h1{font-size:18px;letter-spacing:2px}.brand span{font-size:7px;letter-spacing:1px}.brand-mark{width:32px;height:31px;font-size:33px}.resource-bar{width:310px}.resource{min-width:91px;padding:0 11px;gap:6px}.resource b{font-size:15px}.top-actions{gap:5px}.top-actions .round{width:33px;height:33px}.town-card{left:14px;width:175px}.right-sidebar{right:14px;width:220px}.day-card,.quest-card.expanded,.quest-card:has(#quests:not(.hidden)),#event-banner{width:220px}.view-tools{left:15px;gap:7px}.bottom-right{right:15px}.bottom-right>div:last-child{max-width:92px}.build-dock{width:432px}.building-card img{width:88px}}
@media(max-width:760px){.topbar{top:12px;left:12px;right:12px;grid-template-columns:1fr 1fr;gap:10px}.brand{grid-row:1;width:174px;min-height:49px}.top-actions{grid-column:2;grid-row:1;align-self:center;padding-top:0;gap:6px}.resource-bar{grid-row:2;grid-column:1/3;justify-self:center;width:328px;min-height:45px;padding:5px 8px}.resource{min-width:98px;padding:0 11px}.resource b{font-size:15px}.resource svg{width:21px;height:21px}.resource small{font-size:8px}.town-card{left:12px;top:127px;width:177px;padding:8px 10px}.town-title strong{font-size:11px}.tiny-badge{font-size:7px;padding:2px 3px}.level-row{margin-top:7px}.town-stats{font-size:8px}.right-sidebar{right:12px;top:127px;width:220px;gap:8px}.day-card{padding:7px 8px;gap:7px}.day-card b{font-size:10px}.day-card small{font-size:8px}.sun-icon svg{width:22px;height:22px}.speed-control button{min-width:21px;height:22px}.journal-toggle{min-height:36px}.quest-card{width:122px}.quest-card.expanded,.quest-card:has(#quests:not(.hidden)){width:220px}#quests{max-height:245px}.trade-banner{width:122px;padding:8px 9px}.trade-banner b{font-size:10px}.view-tools{left:14px;top:233px;bottom:auto;flex-direction:column;gap:10px}.view-tools .round{width:33px;height:33px}.view-tools svg{width:17px;height:17px}.build-dock{width:min(452px,calc(100vw - 28px));bottom:15px}.bottom-right{right:15px;bottom:172px;gap:6px}.bottom-right>div:last-child{max-width:78px}.bottom-right #save-status{font-size:8px}.compass{width:34px;height:34px}.compass svg{width:32px;height:32px}.compass>span{left:13px;top:-10px}.compass i{left:14px;top:14px}#build-hint{bottom:181px;font-size:9px;padding:6px 8px;max-width:calc(100vw - 26px);white-space:normal;text-align:center;line-height:19px}#selection{top:33%;width:232px}.toast{font-size:10px}#toasts{top:116px}#photo-panel{right:12px;top:12px;width:252px}.dock-footer{font-size:8px}.guide-line{font-size:10px}}
@media(max-width:480px){.brand{width:162px;gap:7px}.brand h1{font-size:17px}.brand span{font-size:7px;letter-spacing:.3px}.top-actions{gap:4px}.top-actions .round{width:31px;height:31px}.top-actions .round svg{width:16px;height:16px}.town-card{width:166px}.right-sidebar{width:189px}.day-card,.quest-card.expanded,.quest-card:has(#quests:not(.hidden)),#event-banner{width:189px}.day-card{gap:5px}.sun-icon svg{width:18px;height:18px}.speed-control button{min-width:19px;padding:0 2px;font-size:8px}.day-card b{font-size:9px}.day-card small{font-size:8px}.town-stats{font-size:7px}.town-stats svg{width:10px;height:10px;margin-right:2px}.build-dock{padding:11px 9px 5px}.build-items{gap:6px}.building-card img{width:76px;height:53px}.building-card{min-height:88px;padding-left:2px;padding-right:2px}.building-card b{font-size:11px}.building-card small{font-size:7px;letter-spacing:-.25px}.dock-footer{font-size:7px;gap:4px}.dock-footer kbd{font-size:7px;padding:1px 2px;margin-right:2px}.dock-footer em{margin:0 2px}.bottom-right>div:last-child{max-width:60px}dialog{padding:22px}.overview-grid{gap:6px}.overview-grid>div{padding:9px}.view-tools{gap:8px}#build-hint{bottom:171px}}
@media(max-height:660px) and (min-width:761px){.topbar{top:12px}.town-card{top:76px}.right-sidebar{top:75px;gap:7px}.build-dock{bottom:13px;padding-top:10px}.building-card{min-height:84px}.building-card img{height:48px}.building-card b{margin-bottom:3px}.dock-footer{padding-top:5px;min-height:18px}#build-hint{bottom:155px}#quests{max-height:228px}.view-tools,.bottom-right{bottom:18px}#photo-panel{top:12px;padding:16px}#photo-panel label{margin:15px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* The caption and toggle share one bottom anchor in both dock states. */
.build-dock{padding-bottom:37px}
.dock-footer{display:none}
.build-dock.collapsed{height:44px;padding:0}
.dock-heading,.build-dock.collapsed .dock-heading{top:auto;bottom:4px;left:50%;width:138px;height:28px;transform:translateX(-50%);display:grid;grid-template-columns:1fr 28px;gap:7px;align-items:center;padding:1px 3px 1px 11px;border:1px solid #b99c6b;border-top-color:#eddab7;border-bottom:3px solid #b89964;border-radius:6px;background-image:var(--grain),linear-gradient(#faf0d2,#e7d1a2);box-shadow:inset 0 1px 0 #fff8e0,0 2px 4px #796a4630}
.dock-heading h2{line-height:18px}
#dock-toggle,.build-dock.collapsed #dock-toggle{display:grid;place-items:center;width:28px;min-width:28px;height:24px;min-height:24px;padding:0;margin:0;border:1px solid #c1aa7e;border-top-color:#f7e5bd;border-bottom:2px solid #a58e61;border-radius:4px;background:linear-gradient(#f5e8c8,#d5bd8e);box-shadow:inset 0 1px 0 #fff5d5,0 1px 0 #ae946749;line-height:0;font-size:0;transform:none;color:#7c785b}
#dock-toggle:active{transform:none;box-shadow:inset 0 2px 3px #8b795c40;background:linear-gradient(#ddcaa0,#eddbb4)}
#dock-toggle .dock-chevron{display:block;width:15px;height:15px;flex:none;transform-box:view-box;transform-origin:50% 50%;transform:rotate(0deg);transition:transform .18s ease;pointer-events:none}
#dock-toggle[aria-expanded="false"] .dock-chevron{transform:rotate(180deg)}
.speed-control{align-items:center}
.speed-control button[data-speed="0"]{display:grid;place-items:center;width:24px;min-width:24px;height:24px;min-height:24px;flex:0 0 24px;padding:0;line-height:0;font-size:0}
.speed-control button[data-speed="0"]:active{transform:none;box-shadow:inset 0 1px 3px #8c83662e}
.pause-symbol{display:block;width:13px;height:13px;pointer-events:none}