.auth-screen{isolation:isolate;background:#122c22;overflow-x:hidden}
.landing-art{position:absolute;inset:0;z-index:-3;background:url('./assets/epochenhain-valley-v03.png') center 48%/cover no-repeat;pointer-events:none}
.auth-screen:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,26,20,.83),rgba(9,30,22,.46) 35%,rgba(13,32,24,.06) 62%,rgba(10,27,21,.3)),linear-gradient(0deg,rgba(9,27,20,.82),transparent 38%,transparent 75%,rgba(10,29,21,.45));pointer-events:none}
.auth-screen:after{content:'';position:absolute;inset:0;z-index:-1;box-shadow:inset 0 0 130px #0a1f1655;pointer-events:none}
.landing-dust{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 12% 23%,#f9e1a388 0 1px,transparent 3px),radial-gradient(circle at 38% 65%,#f9e1a388 0 1px,transparent 3px),radial-gradient(circle at 25% 85%,#f9e1a388 0 1px,transparent 3px),radial-gradient(circle at 52% 40%,#f9e1a388 0 1px,transparent 3px);animation:valley-dust 12s ease-in-out infinite alternate}
@keyframes valley-dust{from{transform:translateY(0);opacity:.3}to{transform:translateY(-14px);opacity:.7}}
.landing-header{position:relative;z-index:1;border-bottom:1px solid #f2e5b312;background:linear-gradient(#10291f44,transparent)}
.landing-copy{text-shadow:0 2px 22px #0b231a70;max-width:680px}
.landing-copy h1{font-size:clamp(50px,5.7vw,88px);line-height:1.04;letter-spacing:-3.8px;color:#fff8e5;margin:28px 0 26px}
.landing-copy h1 em{color:#efcf8d}
.landing-copy>.eyebrow{color:#e6d9ae;font-size:9px;letter-spacing:2px;line-height:1.7}
.landing-copy>p{color:#f3f2dbd9;font-size:14px;line-height:1.9;max-width:450px}
.feature-tags{color:#f3edcf;font-size:10px;gap:18px}
.feature-tags svg{color:#e3cb91}
.landing-note{color:#f2e5bc;border-color:#f8e6b733;margin-top:44px}
.landing-note small{color:#e0e7c9a6}
.auth-card{background:linear-gradient(145deg,#fffdf4fa,#f1f3e6fa);box-shadow:0 24px 100px #041a1b66,0 0 0 6px #ffedc409;border-color:#f9edc8a8;backdrop-filter:blur(15px)}
.landing-footer{color:#e6e2bfa3;position:relative}
.landing-footer>a{font-size:9px;letter-spacing:.6px;color:#e2dcb7;text-decoration:none}
.landing-footer>a:hover{color:#fff9df}
.alpha-badge{background:#19382770;border-color:#e8d9a62b;backdrop-filter:blur(8px)}
.side-nav{overflow-y:auto;scrollbar-width:none}
.side-nav::-webkit-scrollbar{display:none}
.context-hint{pointer-events:auto;display:flex;align-items:center;gap:9px;background:#f6f3e6f7;border:1px solid #d7dfc5;border-radius:8px;box-shadow:0 5px 18px #122a1f33;padding:10px 13px;color:#4b6946;font-size:10px;max-width:420px}
.context-hint>svg{width:19px;height:19px;flex-shrink:0}
.context-hint button{background:#507345;color:#fff8e5;border:0;border-radius:5px;padding:7px 10px;font-size:10px;white-space:nowrap}
.context-hint kbd{font-size:8px;background:#ffffff20;color:inherit;border-color:#ffffff33;margin-left:4px}
.context-hint small{display:block;font-size:8px;color:#8b9a7a;margin-top:3px}
.detail-panel[data-view='life'],.detail-panel[data-view='trade'],.detail-panel[data-view='clan'],.detail-panel[data-view='travel']{width:340px;max-height:calc(100vh - 345px)}
.content-tabs{display:flex;gap:5px;margin:0 0 16px}
.content-tabs button{flex:1;background:#e8eddd;color:#788969;border:1px solid #dbe3cd;border-radius:6px;padding:9px 5px;font-size:10px}
.content-tabs button.active{background:#4e7045;color:#faf7e6;border-color:#4e7045}
.content-summary{display:flex;gap:10px;margin:13px 0 16px}
.content-summary>div{flex:1;border:1px solid #dfe5d2;border-radius:8px;background:#f0f3e5;padding:11px;text-align:center}
.content-summary strong{display:block;font-size:20px;color:#4d6d42}
.content-summary small{font-size:8px;letter-spacing:.8px;text-transform:uppercase;color:#8b997b}
.content-card{border:1px solid #dce3ce;background:#fffdf5;border-radius:9px;padding:13px;margin:10px 0}
.content-card h3{font-size:12px;font-weight:600;color:#48633f;margin:0 0 6px}
.content-card p{font-size:10px;line-height:1.7;color:#8a977a;margin:6px 0 10px}
.content-card small{font-size:9px;color:#8a977a}
.content-card .card-action{font-size:9px;margin-top:10px;gap:7px;flex-wrap:wrap}
.content-card .small-button{font-size:10px}
.content-card-header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.content-card-header .catalog-icon{height:39px;width:39px}
.content-card-header>div{flex:1}
.content-badge{color:#8c7948;background:#f2ecd4;border:1px solid #e5d9b2;font-size:8px;border-radius:4px;padding:4px 6px;white-space:nowrap}
.content-badge.ready{color:#607f47;background:#e7efda;border-color:#d4dfbf}
.content-empty{font-size:11px;line-height:1.8;color:#8a977a;background:#edf1e3;border:1px dashed #d0dcbd;padding:16px;border-radius:8px}
.content-section{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#8c9678;margin:22px 0 10px}
.content-section>span{letter-spacing:0;font-size:8px}
.content-buttons{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.content-buttons>.small-button{flex:1;min-width:70px}
.content-form{margin:12px 0 19px;padding:13px;background:#edf1e2;border:1px solid #dbe3ca;border-radius:8px}
.content-form label{margin:0 0 7px;font-size:10px;color:#5e7850}
.content-form input{background:#fffdf5;border:1px solid #d9e2c8;border-radius:5px;padding:10px;font-size:11px;margin-bottom:10px}
.content-form .small-button{width:100%}
.clan-member{display:flex;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid #e2e7d8;font-size:11px;color:#58724c}
.clan-member>div{flex:1}
.clan-member small{display:block;font-size:9px;color:#94a080;margin-top:4px}
.clan-member>.status-dot{width:5px;height:5px}
.clan-code{padding:10px;background:#e9efda;border:1px dashed #c6d3b1;border-radius:5px;font-size:12px;letter-spacing:2px;text-align:center;color:#5c794c;user-select:all;overflow-wrap:anywhere}
.clan-code[hidden]{display:none}
.clan-leave{margin-top:20px;width:100%}
.trade-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:10px;color:#879777}
.trade-tools select{width:75px;padding:6px;background:#eef2e1;border:1px solid #d7e0c8;border-radius:5px;color:#536e46;font-size:10px}
.trade-row{padding:11px 0;border-bottom:1px solid #e5e8da;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
.trade-row h4{font-size:11px;margin:0 0 4px;color:#536e46}
.trade-row small{font-size:8px;color:#98a184}
.trade-row .content-buttons{margin:0;gap:5px}
.trade-row .small-button{min-width:65px;font-size:9px;padding:8px}
.trade-status{font-size:9px;line-height:1.8;color:#8d997b;padding:10px 0}
.station-note{display:flex;align-items:center;gap:5px;font-size:8px;color:#ad9564;margin:8px 0}
.station-note.ready{color:#7d9660}
.station-note svg{width:11px;height:11px}
.travel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.biome-tile{background:#e9eedc;border:1px solid #d9e2ca;border-radius:6px;padding:10px 5px;text-align:center;font-size:9px;color:#71875b}
.biome-tile:before{content:'';display:block;height:4px;border-radius:2px;background:var(--biome,#8baf69);margin:0 7px 7px}
.travel-progress{height:5px;background:#e5ead9;border-radius:4px;overflow:hidden;margin:10px 0}
.travel-progress>i{display:block;height:100%;background:#8fa867;transition:width 1s linear}
.selection-card{width:auto;min-width:270px;max-width:min(460px,calc(100vw - 100px));flex-wrap:wrap}
.selection-card .selection-actions{display:flex;gap:5px;width:100%;margin-top:3px;flex-wrap:wrap}
.selection-actions .small-button{margin:0;flex:1;min-width:65px;padding:8px}
.update-overlay{position:fixed;inset:0;z-index:200;background:#0b251bba;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:25px}
.update-dialog{width:100%;max-width:440px;padding:32px;text-align:center;background:#f7f5e9;border:1px solid #e9dbad;border-radius:16px;box-shadow:0 25px 120px #061d1dcc;color:#506b45}
.update-sigil{display:inline-flex;align-items:center;justify-content:center;background:#e9e6cd;border:1px solid #c7c99f;border-radius:50%;height:60px;width:60px;font-size:29px;color:#9b8c54;margin:0 0 20px}
.update-dialog .card-kicker{justify-content:center;font-size:9px}
.update-dialog h2{font:30px/1.15 Georgia,serif;margin:17px 0}
.update-dialog p{font-size:12px;line-height:1.8;color:#899576}
.update-dialog small{display:block;font-size:9px;color:#9ca487;margin:17px 0 23px}
.update-dialog .update-progress{font-size:9px;min-height:14px;margin-bottom:0}
@media(min-width:1500px){.landing-layout{grid-template-columns:1.3fr 1fr;gap:10%;max-width:1540px}.auth-card{margin-right:0}.landing-art{background-position:center 50%}}
@media(max-width:1000px){.landing-copy h1{font-size:54px;letter-spacing:-2.5px}.landing-copy>p{font-size:12px}.landing-copy>.eyebrow{font-size:7px;letter-spacing:1.3px}.feature-tags{font-size:9px;gap:10px}.detail-panel[data-view='life'],.detail-panel[data-view='trade'],.detail-panel[data-view='clan'],.detail-panel[data-view='travel']{width:290px}.side-nav{gap:3px}.nav-button{height:49px}}
@media(max-width:740px){.landing-art{background-position:47% center;background-attachment:scroll}.auth-screen:before{background:linear-gradient(#102d22b3,#102d2255 35%,#102d22cc)}.landing-copy h1{font-size:50px}.landing-copy>.eyebrow{font-size:8px}.landing-copy>p{font-size:12px}.landing-layout{gap:18px}.landing-copy{padding:8px 0}.landing-footer{height:64px}.landing-footer>a{font-size:8px;letter-spacing:0}.side-nav{gap:1px}.nav-button{height:44px;gap:3px}.nav-button svg{width:19px;height:19px}.context-hint{max-width:260px;font-size:9px;white-space:normal}.context-hint button{font-size:8px}.detail-panel[data-view='life'],.detail-panel[data-view='trade'],.detail-panel[data-view='clan'],.detail-panel[data-view='travel']{width:265px;max-height:calc(100vh - 310px)}}
@media(max-height:740px){.side-nav{padding-top:8px;gap:1px}.nav-button{height:41px;gap:3px}.nav-button svg{width:18px;height:18px}.landing-copy h1{font-size:60px}.landing-note{margin-top:25px}.detail-panel[data-view='life'],.detail-panel[data-view='trade'],.detail-panel[data-view='clan'],.detail-panel[data-view='travel']{max-height:calc(100vh - 300px)}}
@media(prefers-reduced-motion:reduce){.landing-dust{animation:none}.travel-progress>i{transition:none}}

#touch-controls{position:fixed;inset:0;z-index:50;pointer-events:none;user-select:none;-webkit-user-select:none}
.touch-stick{position:absolute;left:calc(var(--nav) + 24px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:#f6f3df19;border:1px solid #f0ebbf55;box-shadow:inset 0 0 0 12px #122e1f15,0 5px 30px #0e261e30;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;color:#f3edca;backdrop-filter:blur(5px)}
.touch-ring{position:absolute;width:92px;height:92px;border:1px solid #f2e9b533;border-radius:50%}
.touch-thumb{position:absolute;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#fff5cebb,#b4c58ab3);border:2px solid #fbf0c999;box-shadow:0 4px 14px #0b251a55;pointer-events:none}
.touch-stick-cross{font-size:40px;opacity:.2;line-height:1;pointer-events:none}
.touch-stick>small{position:absolute;bottom:-19px;font-size:8px;letter-spacing:1.7px;color:#e7e9c4;pointer-events:none;text-shadow:0 1px 3px #0e271a}
.touch-stick.moving{border-color:#f8edba99;background:#f6f3df22}
.touch-actions{position:absolute;bottom:calc(25px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));display:grid;grid-template-columns:repeat(2,57px) 75px;grid-template-rows:repeat(2,58px);gap:9px;align-items:center;pointer-events:none}
.touch-actions>button{pointer-events:auto;touch-action:none;border:1px solid #e8e4bd99;border-radius:15px;background:#f4f3e5eb;color:#587246;box-shadow:0 3px 15px #0c251c33;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:52px;min-height:55px;padding:6px;user-select:none;-webkit-tap-highlight-color:transparent}
.touch-actions>button:active{background:#d9e6c4;transform:scale(.96)}
.touch-actions>button>span{font-size:25px;line-height:1}
.touch-actions>button>small{font-size:8px;white-space:nowrap}
.touch-actions>.touch-action-main{grid-column:3;grid-row:1 / 3;width:75px;height:89px;border-radius:30px;background:linear-gradient(140deg,#f1dba2,#c5b374);color:#425d35;border:2px solid #f9ecc7;align-self:center}
.touch-actions>.touch-action-main>span{font-size:33px}
.touch-enabled #world{touch-action:none}
.touch-enabled .quickbar,.touch-enabled .control-hint{display:none}
.touch-enabled .bottom-center{bottom:190px;left:calc(50% + 25px);transform:translateX(-50%);max-width:calc(100vw - 105px)}
.touch-enabled .map-stack{bottom:180px;right:18px;width:155px}
.touch-enabled .minimap-frame{height:110px}
.touch-enabled .map-toolbar button{padding:8px;min-height:30px;min-width:30px}
.touch-enabled .chat-box{display:none}
.touch-enabled .chat-box.touch-chat-open{display:block;bottom:185px;left:calc(var(--nav) + 16px);width:min(285px,calc(100vw - 110px));z-index:51}
.touch-enabled .chat-messages{height:110px}
.touch-enabled #chat-form{min-height:45px}
.touch-enabled #chat-input{font-size:16px}
.touch-enabled #chat-form button{min-height:35px;min-width:35px}
.touch-enabled .selection-card{bottom:195px;left:calc(50% + 25px);z-index:52}
.touch-enabled .game-topbar .icon-button{min-width:36px;min-height:40px}
.touch-enabled .detail-panel{max-height:calc(100dvh - 490px);z-index:51}
.touch-enabled .small-button{min-height:36px;padding:9px;font-size:10px}
.touch-enabled .panel-close{min-width:34px;min-height:34px;top:0;right:0}
.touch-enabled .panel-close svg{width:15px;height:15px}
.touch-enabled .content-form input,.touch-enabled .input-wrap input{font-size:16px}
.touch-enabled .nav-button{min-height:44px}
@media(max-width:740px){.touch-stick{left:calc(var(--nav) + 16px);width:116px;height:116px;bottom:30px}.touch-thumb{width:48px;height:48px}.touch-actions{right:14px;grid-template-columns:repeat(2,51px) 69px;gap:7px}.touch-actions>.touch-action-main{width:69px;height:85px}.touch-enabled .context-hint{font-size:9px;max-width:285px}.touch-enabled .map-stack{bottom:177px;right:12px;width:130px}.touch-enabled .minimap-frame{height:90px}.touch-enabled .map-toolbar>span:nth-child(2){display:none}.touch-enabled .hero-card{top:128px}.touch-enabled .game-topbar .icon-button{min-width:28px;padding:5px}.touch-enabled .game-logo{min-width:88px}.touch-enabled .game-logo small{max-width:73px}.touch-enabled .detail-panel{right:10px;max-height:calc(100dvh - 430px)}.touch-enabled .resource-chip:nth-child(n+4){display:none}}
@media(max-height:600px){.touch-stick{width:103px;height:103px;bottom:22px}.touch-thumb{width:44px;height:44px}.touch-actions{bottom:15px;grid-template-rows:repeat(2,48px);gap:5px}.touch-actions>button{min-height:45px}.touch-actions>.touch-action-main{height:78px}.touch-enabled .map-stack{bottom:135px;width:115px}.touch-enabled .minimap-frame{height:75px}.touch-enabled .bottom-center{bottom:138px}.touch-enabled .hero-card{display:none}.touch-enabled .world-banner{top:88px}.touch-enabled .selection-card{bottom:137px}.touch-enabled .detail-panel{max-height:calc(100dvh - 390px)}.touch-enabled .chat-box.touch-chat-open{bottom:135px}.touch-enabled .side-nav{padding-top:4px}.touch-enabled .nav-button{height:41px;min-height:41px}}
@media(max-width:740px){.touch-enabled .resource-chip:nth-child(2){display:none}.touch-enabled .resource-chip:last-child{display:flex}}

body{--menu-width:76px}
.menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:44px;min-height:44px;padding:5px;border:1px solid #d7dfca;border-radius:8px;background:#eaf0df;color:#536f45;flex-shrink:0}
.menu-toggle svg{width:20px;height:20px;stroke-width:1.8}
.menu-toggle>span{font-size:8px;line-height:1.2}
.menu-toggle:hover,.menu-toggle[aria-expanded='true']{background:#dbe7cc;color:#365a31}
.menu-toggle:focus-visible{outline:2px solid #849b60;outline-offset:3px}
.side-nav{width:var(--menu-width);z-index:75;transform:translateX(-100%);visibility:hidden;pointer-events:none;transition:transform .18s ease,visibility .18s}
.side-nav.is-open{transform:translateX(0);visibility:visible;pointer-events:auto}
.menu-collapsed{--nav:0px}
.menu-collapsed .world-banner,.menu-collapsed .hero-card,.menu-collapsed .chat-box{left:18px}
.menu-collapsed .bottom-center{left:50%}
.menu-collapsed.touch-enabled .chat-box.touch-chat-open{left:16px}
.menu-backdrop{position:absolute;inset:var(--top) 0 0;z-index:70;background:#132b214d;backdrop-filter:blur(2px);pointer-events:auto;cursor:default;border:0;border-radius:0}
.menu-backdrop[hidden]{display:none}
.menu-overlay-open .game-ui{z-index:60}
.menu-overlay-open .game-topbar{z-index:80}
.menu-overlay-open #touch-controls{visibility:hidden;pointer-events:none}
@media(max-width:1000px){body{--menu-width:64px}.game-topbar{gap:7px}.menu-toggle{padding:4px}}
@media(max-width:740px){.menu-collapsed:not(.touch-enabled) .bottom-center{left:12px;transform:none}.menu-collapsed.touch-enabled .bottom-center{left:50%;transform:translateX(-50%)}}
@media(max-width:580px){body{--menu-width:60px}.game-topbar .game-logo{min-width:85px}.game-topbar .game-logo>div{max-width:83px;overflow:hidden}.menu-toggle>span{font-size:7px}.menu-collapsed .hero-card,.menu-collapsed .world-banner{left:12px}}

/* Warehouse status stays above the management window and away from the touch controls. */
.warehouse-hud{position:absolute;top:90px;right:22px;width:305px;min-height:36px;padding:7px 12px 9px;display:flex;align-items:center;gap:9px;background:#f6f5eaf5;border:1px solid #d6dfc5;border-radius:7px;color:#527345;box-shadow:0 3px 15px #192e2126;z-index:54;overflow:hidden;text-align:left}
.warehouse-hud>svg{width:18px;height:18px;color:#8a9e70}
.warehouse-hud-label{display:flex;align-items:center;flex:1;gap:12px;font-size:9px;white-space:nowrap}
.warehouse-hud strong{font-size:11px;letter-spacing:.1px}
.warehouse-hud strong>span{font-weight:400;color:#8e9b7e}
.warehouse-hud-free{font-size:8px;white-space:nowrap;color:#8e9b7e}
.warehouse-hud-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:#e3e9d5}
.warehouse-hud-track>i,.capacity-track>i{display:block;height:100%;background:#88a868;transition:width .3s ease}
.warehouse-hud.capacity-warning,.capacity-meter.capacity-warning{border-color:#d1b971}
.capacity-warning .warehouse-hud-track>i,.capacity-warning .capacity-track>i{background:#bf9a4f}
.warehouse-hud.capacity-full{border-color:#c68d73;background:#fff2e5;color:#9c5942}
.warehouse-hud.capacity-full .warehouse-hud-free,.capacity-full>small{color:#a5664c}
.capacity-full .warehouse-hud-track>i,.capacity-full .capacity-track>i{background:#bd7b5b}
.game-ui .detail-panel{top:136px}
.detail-panel[data-view='production'],.detail-panel[data-view='villagers']{width:340px}
.capacity-meter{padding:11px 12px;margin:0 0 11px;border:1px solid #dce4cd;background:#eff3e4;border-radius:7px}
.capacity-meter>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#58734b}
.capacity-meter b{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.capacity-meter strong{font-weight:500}
.capacity-track{height:5px;overflow:hidden;border-radius:4px;background:#dde5cf;margin:9px 0 7px}
.capacity-meter>small,.work-caption{font-size:8px;color:#8b987b;line-height:1.5}
.payment-note{display:flex;align-items:flex-start;gap:7px;padding:10px;background:#edf1e2;border:1px solid #dde5cd;border-radius:6px;font-size:9px;line-height:1.6;color:#70815f}
.payment-note svg{height:15px;width:15px;margin-top:1px}
.cost-row{flex-wrap:wrap;row-gap:7px}.cost-row>span{white-space:nowrap}.cost-row small{font-size:8px}
.inventory-column-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.3px;color:#9aa185;margin-top:17px;padding-bottom:6px;border-bottom:1px solid #dfe4d2}
.inventory-column-labels>span:last-child{margin-right:54px}
.inventory-row button{min-width:30px;min-height:32px;margin-left:0}
.automation-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.automation-heading h3{margin-bottom:8px}
.automation-switch{width:42px;min-width:42px;height:25px;border:1px solid #bbc7a7;padding:3px;border-radius:16px;background:#dce3cf;display:flex;align-items:center;transition:background .2s}
.automation-switch>i{height:17px;width:17px;background:#fffdf3;border-radius:50%;box-shadow:0 1px 3px #233c2829;transition:transform .2s}
.automation-switch[aria-checked='true']{background:#658552;border-color:#658552}
.automation-switch[aria-checked='true']>i{transform:translateX(16px)}
.automation-counts{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 8px;font-size:9px;color:#688157}
.housing-capacity{display:flex;gap:5px;margin:12px 0 8px}.housing-capacity>div{flex:1;text-align:center;padding:8px 3px;border:1px solid #e0e6d4;border-radius:5px;background:#f0f4e7}.housing-capacity strong{display:block;font-size:16px;color:#61804c}.housing-capacity small{font-size:8px}.content-card p.housing-status{font-size:9px;line-height:1.6;margin:7px 0 12px}
.content-card p.automation-note{font-size:9px;border-top:1px solid #e3e7d7;margin-bottom:0;padding-top:9px}
.goods-list{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 11px}
.goods-list>span{font-size:9px;padding:6px 7px;background:#eef2e4;border:1px solid #dfe6d2;border-radius:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.goods-list svg{height:13px;width:13px}.goods-list small{flex-basis:100%;font-size:8px}
.goods-missing,.goods-missing small{color:#a5764c!important}
.npc-cargo{display:flex;align-items:flex-start;gap:6px;font-size:9px;line-height:1.6;color:#65804f;margin:7px 0}
.npc-cargo>svg{width:14px;height:14px;margin-top:1px}
.npc-info .npc-cargo small{font-size:8px;margin:3px 0 5px}
.npc-info{min-width:0}.npc-info>small{line-height:1.6}
.job-description{font-size:8px;line-height:1.6;color:#8c9b7b;margin:7px 0 0}
.house-upgrade h3{display:flex;justify-content:space-between;gap:8px}.house-upgrade h3>span{font-size:9px;color:#9caa88;white-space:nowrap}
.production-label{font-size:9px;margin:14px 0 6px;color:#778d65}
.production-select{width:100%;padding:9px 7px;border:1px solid #d8e1c7;background:#eef2e4;color:#567347;font-size:10px;border-radius:5px;margin-bottom:11px}
.production-output{display:flex;gap:7px;align-items:center;font-size:9px;line-height:1.6;color:#668250}.production-output>svg{width:14px;height:14px}
.production-state{max-width:66%;font-size:9px;line-height:1.5;overflow-wrap:anywhere}
.touch-enabled .automation-switch{min-width:46px;min-height:30px}.touch-enabled .automation-switch[aria-checked='true']>i{transform:translateX(19px)}
.touch-enabled .production-select,.touch-enabled .npc-info select{min-height:38px}
.touch-enabled .inventory-row button{min-width:35px;min-height:38px}
@media(max-width:1200px){.warehouse-hud{right:16px;width:275px}.detail-panel[data-view='production'],.detail-panel[data-view='villagers']{width:290px}}
@media(max-width:1000px){.warehouse-hud{width:250px}.warehouse-hud-label{gap:8px}.detail-panel[data-view='production'],.detail-panel[data-view='villagers']{width:290px}}
@media(max-width:740px){.warehouse-hud{top:88px;right:10px;width:205px;padding:7px 8px 9px;gap:7px}.warehouse-hud-label{gap:7px;font-size:8px}.warehouse-hud strong{font-size:10px}.warehouse-hud-free{font-size:7px}.warehouse-hud>svg{width:14px;height:14px}.game-ui .detail-panel{top:134px}.detail-panel[data-view='production'],.detail-panel[data-view='villagers']{width:265px}.world-banner{max-width:calc(100vw - var(--nav) - 240px)}.world-banner #server-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.world-banner .banner-divider,.world-banner #online-label{display:none}.world-banner .status-dot{flex-shrink:0}}
@media(max-width:580px){.warehouse-hud{width:calc(100vw - 154px);min-width:158px}.warehouse-hud-label{display:block;line-height:1.4}.warehouse-hud-label strong{margin-left:6px}.warehouse-hud-free{max-width:60px;white-space:normal;text-align:right;line-height:1.4}.world-banner{max-width:calc(100vw - var(--nav) - 235px);padding:8px;gap:6px}.detail-panel[data-view='production'],.detail-panel[data-view='villagers']{width:min(280px,calc(100vw - 28px))}.production-card .small-button,.automation-card .small-button{min-height:35px}.warehouse-hud>svg{display:none}}
@media(max-height:600px){.warehouse-hud{top:86px;min-height:32px;padding-top:5px;padding-bottom:7px}.game-ui .detail-panel{top:128px}.touch-enabled .detail-panel{max-height:calc(100dvh - 405px)}}
@media(prefers-reduced-motion:reduce){.side-nav{transition:none}}

/* The world clock remains visible; small screens give it a short second header row. */
.game-topbar .world-time{display:flex;min-width:105px;flex-shrink:0;gap:8px;white-space:nowrap}
.game-topbar .world-time>span{display:inline-flex}
.world-time strong{font-weight:600}.world-time time{margin-left:3px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.game-topbar .world-time{min-width:88px;gap:5px;font-size:9px}.game-topbar .world-time svg{width:17px;height:17px}.game-topbar .world-time small{font-size:8px}.game-topbar .game-logo{min-width:124px;gap:7px}}
@media(max-width:740px){
  :root{--top:112px}
  .game-topbar{padding-bottom:34px}
  .game-topbar .world-time{position:absolute;left:12px;right:12px;bottom:7px;min-height:26px;padding:4px 9px;gap:8px;background:#edf1e2;border:1px solid #dce3cd;border-radius:5px;font-size:10px}
  .world-time #time-label{display:flex;align-items:center;gap:11px}
  .game-topbar .world-time small{margin:0;padding-left:11px;border-left:1px solid #d0dac1;font-size:8px}
  .game-topbar .game-logo{min-width:110px}
  .touch-enabled .game-topbar .game-logo{min-width:88px}
  .game-ui .warehouse-hud,.game-ui .world-banner{top:calc(var(--top) + 10px)}
  .game-ui .hero-card{top:calc(var(--top) + 50px)}
  .game-ui .detail-panel{top:calc(var(--top) + 56px);max-height:calc(100dvh - 345px)}
  .touch-enabled .game-ui .detail-panel{max-height:calc(100dvh - 464px)}
  .connection-status,.toast-stack{top:calc(var(--top) + 12px)}
}
@media(max-width:580px){.game-topbar .game-logo{min-width:85px}.game-ui .detail-panel{max-height:calc(100dvh - 414px)}.touch-enabled .game-ui .detail-panel{max-height:calc(100dvh - 464px)}}
@media(max-width:740px) and (max-height:600px){.game-ui .warehouse-hud{top:calc(var(--top) + 8px)}.game-ui .detail-panel{top:calc(var(--top) + 50px)}.touch-enabled .game-ui .detail-panel{max-height:calc(100dvh - 439px)}}