/* Approved direction: concept 3's slim wooden frames + concept 1's counter tabs.
   Real controls and live values sit above separately generated, text-free art. */
:root{--paper:#fff5de;--ink:#5a3823;--muted:#856640;--red:#c25132;--green:#708e42;--edge:#9f6735;--line:#ddc59a}
html,body{width:100%;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
.game-shell{
 --view-scale:1;--logical-height:100dvh;--safe-top:calc(env(safe-area-inset-top) / var(--view-scale));--safe-bottom:calc(env(safe-area-inset-bottom) / var(--view-scale));
 --nav-height:calc(60px + var(--safe-bottom));--scene-top:max(79px,calc(var(--safe-top) + 67px));
 --panel-natural-width:min(660px,calc((max(800px,100dvh) - 552px)*1.5));--panel-width:min(var(--panel-natural-width),var(--fit-panel-max,9999px));
 position:absolute;top:0;left:50%;width:min(calc(100vw / var(--view-scale)),720px,calc(var(--logical-height)*.75));height:var(--logical-height);min-height:0;margin:0;
 transform:translateX(-50%) scale(var(--view-scale));transform-origin:top center;
}
.wallet-bar{top:max(12px,var(--safe-top))}
.stat-card,.square,.day-bar,.quest,.workbench,.store-links>button,.special-order,dialog,#closed-sign{
 border:7px solid transparent;border-image-source:url('art/ui-wood/panel.png');border-image-slice:12;border-image-width:7px;border-image-repeat:stretch;
 border-radius:0;background:var(--paper);background-clip:padding-box;box-shadow:none;image-rendering:pixelated;
}
.stat-card{height:59px;padding:3px 5px 4px;gap:3px;border-width:6px;border-image-width:6px}
.stat-card.wallet{background:#ffebbd;background-clip:padding-box;border-color:transparent}
.stat-card .small{display:flex;align-items:center;gap:4px;font-size:10px;line-height:14px;color:#77502e;font-weight:700;white-space:nowrap}
.stat-card .small i{display:flex;flex:none;width:14px;height:14px}
.stat-card .small img{display:block;width:14px;height:14px;object-fit:contain}
.stat-card strong,.stat-card strong b{color:#5b3722;font-weight:800}
.stat-card strong small{color:#775b3c}
.square{border-width:6px;border-image-width:6px;padding:0;gap:3px;background:#fff0cf;background-clip:padding-box}
.square[aria-pressed=true]{background:#f1d7b2;background-clip:padding-box;border-color:transparent}
#speed-symbol svg{width:14px;height:14px}
#settings-open [data-icon=settings] svg{width:22px;height:22px}
.day-bar{position:relative;height:var(--day-height);padding:0 6px 6px;gap:10px;border-width:6px;border-image-width:6px;color:#684226}
.day-bar strong{font-weight:800}
.day-bar #open-status{font-weight:700;color:#59723a}
#day-progress{top:auto;bottom:2px;left:6px;width:calc(100% - 12px);height:2px;opacity:.65}
.management{gap:7px}
.quest{padding:2px 7px 2px 35px;overflow:visible;position:relative}
.quest-label{padding:0 28px 0 0;min-height:13px;line-height:13px;font-size:9px;font-weight:700;color:#8b6640}
.quest-label>span{gap:0}
.quest-label>span>i{position:absolute;left:-30px;top:4px;width:27px;height:32px}
.quest-label>span>i img{width:100%;height:100%;object-fit:contain}
.quest-label button{top:-3px;right:-2px;color:#89633c;background:transparent;box-shadow:none}
.quest-main{padding:1px 0 2px;gap:8px;min-height:34px}
.quest-main strong{font-size:13px;line-height:1.4;color:#654020}
.quest-main small{font-size:10px;line-height:1.4;margin-top:2px;color:#876542}
.quest-main>i{width:30px;height:30px;flex:none;border:2px solid #56752c;border-radius:4px;background:#789b42;box-shadow:inset 0 2px #a9c36b,0 2px #4f6c2a;color:#fff8de}
.quest-main i svg{width:18px;height:18px}
.quest-main:active:not(:disabled){transform:none;box-shadow:none}
.quest-main:active:not(:disabled)>i{transform:translateY(2px);box-shadow:inset 0 1px #a9c36b}
.quest.collapsed .quest-main{padding:1px 0 3px}
#quest-complete{margin:5px 0 1px;width:100%;min-height:30px;font-size:11px}
.quest:has(#quest-complete:not([hidden])) .quest-main{padding-right:76px}
.quest:has(#quest-complete:not([hidden])) #quest-complete{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:70px;margin:0;padding:5px 3px;font-size:10px}
/* Reserve the goal's header for its claim button, so the title stays full width. */
.quest:not(.guide-active):not(.collapsed){min-height:100px;padding:6px 10px 6px 48px}
.quest:not(.guide-active):not(.collapsed) .quest-label{min-height:28px;line-height:16px;font-size:12px;padding-right:105px}
.quest:not(.guide-active):not(.collapsed) .quest-label>span>i{left:-42px;top:2px;width:38px;height:43px}
.quest:not(.guide-active):not(.collapsed) .quest-main{min-height:46px;padding:2px 0;gap:10px}
.quest:not(.guide-active):not(.collapsed):has(#quest-complete:not([hidden])) .quest-main{padding-right:0}
.quest:not(.guide-active):not(.collapsed) .quest-main strong{font-size:17px;line-height:1.4}
.quest:not(.guide-active):not(.collapsed) .quest-main small{font-size:12px;line-height:1.5;margin-top:3px}
.quest:not(.guide-active):not(.collapsed) .quest-main>i{width:38px;height:38px}
.quest:not(.guide-active):not(.collapsed) .quest-main i svg{width:23px;height:23px}
.quest:not(.guide-active):not(.collapsed):has(#quest-complete:not([hidden])) #quest-complete{top:4px;right:10px;transform:none;width:96px;min-height:32px;margin:0;padding:4px 7px;font-size:13px;line-height:1.4}
.quest.quest-ready .quest-main{opacity:1}
.quest.quest-ready .quest-main>i{display:none}
.quest:not(.guide-active):not(.collapsed) .quest-label button{right:-3px;top:0}
.quest:not(.guide-active):not(.collapsed).quest-ready .quest-label button{right:104px}
@media(max-width:370px){.quest:not(.guide-active):not(.collapsed) .quest-main{gap:8px}.quest:not(.guide-active):not(.collapsed) .quest-main strong{font-size:16px}.quest:not(.guide-active):not(.collapsed) .quest-main small{font-size:11px}.quest:not(.guide-active):not(.collapsed) .quest-main>i{width:32px;height:32px}}
.workbench{padding:3px 7px}
.work-row{gap:7px;min-height:36px}
.work-row+.work-row{padding-top:3px;margin-top:3px;border-top:1px solid #ddc59a}
.work-art{display:block;width:42px;height:38px;object-fit:contain;flex:none}
.resource-label{font-size:11px;margin-bottom:4px;gap:4px;line-height:1.25;color:#76512f}
.resource-label>span{font-weight:700}
.resource-label b{font-size:13px;color:#674027;letter-spacing:-.3px}
.resource-label b small{font-size:9px;letter-spacing:0}
.work-note{font-size:9px;line-height:1.3;margin-top:3px;color:#8c6f4a}
.stock-meter,#cook-progress{height:8px;border-radius:1px;background:#e2d1ad;box-shadow:inset 0 1px #bc9f6f}
#stock-fill{background:#7ba242;box-shadow:inset 0 2px #b0c875,inset 0 -1px #5c7f2d}
.stock-ticks i{border-right:2px solid #fff6dc}
#cook-progress::-webkit-progress-bar{background:#e4d3af;box-shadow:inset 0 1px #c3a776}
#cook-progress::-webkit-progress-value{background:#dc9b3b;box-shadow:inset 0 2px #efbf67,inset 0 -1px #b37827}
#cook-progress::-moz-progress-bar{background:#dc9b3b}
.work-button{width:71px;min-height:37px;gap:1px;padding:3px;background:#efcc80;border:2px solid #a87b36;border-radius:4px;box-shadow:inset 0 2px #ffe8ad,0 2px #bf9756}
.work-button b{font-size:12px}.work-button small{font-size:9px}
.work-button.green{background:#6b8642;border-color:#50672e;box-shadow:inset 0 2px #a6bb74,0 2px #4f682e;color:#fffbe7}
.work-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px #fff5d344}
.work-button:disabled{opacity:.55;box-shadow:none}
.attention{font-size:10px;line-height:1.4;margin-top:5px;padding-top:4px}
.store-links{gap:7px}
.store-links>button{padding:4px 7px;gap:7px;min-height:53px}
.store-links>button>span:not(.menu-pictures){gap:3px}
.store-links b{font-size:12px;font-weight:800;color:#684125}
.store-links small{font-size:9px;color:#876441;line-height:1.25}
.store-links>button:active{transform:translateY(2px);box-shadow:none}
.menu-pictures{width:35px;height:32px;align-items:center;justify-content:center}
.menu-pictures img{width:35px;height:32px;object-fit:contain}
.operations-link>i:first-child{width:35px;height:32px;align-items:center;justify-content:center}
.operations-link>i:first-child img{display:block;width:35px;height:32px;object-fit:contain}
.special-order{padding:3px 7px;grid-template-columns:30px minmax(0,1fr) auto;gap:7px;min-height:56px}
.special-order canvas{width:30px;height:36px}
.special-order h2{font-size:12px;line-height:1.4;margin:0 0 2px;color:#724329;font-weight:800}
.special-order p{font-size:9px;line-height:1.4;color:#8a6342}
.primary{background:#bf5032;border:2px solid #973d26;border-radius:4px;box-shadow:inset 0 2px #e98e61,0 2px #a45934;color:#fffbea}
.primary:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px #e98e61}
.special-order .primary{font-size:11px;padding:6px 9px;min-height:35px;margin:0}
.bottom-tabs{width:100%;max-width:100%;height:var(--nav-height);padding:0 6% var(--safe-bottom);gap:5%;border:8px solid transparent;border-image:url('art/ui-wood/counter.png') 18 fill / 8px / 0 stretch;border-radius:0;background:none;box-shadow:none;image-rendering:pixelated}
.bottom-tabs a{width:auto;min-width:0;flex:1;min-height:43px;padding:1px 5px;gap:7px;border:6px solid transparent;border-image:url('art/ui-wood/tab-idle.png') 12 fill / 6px / 0 stretch;border-radius:0;box-shadow:none;background:none;color:#79502d;font-size:12px;font-weight:800;white-space:nowrap}
.bottom-tabs a[aria-current]{border-color:transparent;border-image-source:url('art/ui-wood/tab-active.png');background:none;box-shadow:none;color:#55371e}
.bottom-tabs a:active{transform:translateY(2px)}
.bottom-tabs i{width:29px;height:29px;align-items:center;justify-content:center}
.bottom-tabs i img{width:29px;height:29px;object-fit:contain}
dialog{padding:16px;background-clip:padding-box}
.dialog-header h2{color:#694125}
.dialog-header button{border-radius:4px}
#closed-sign{padding:10px 16px}
/* Small, static shadows lift actions from the wooden panels without a glow. */
.square:enabled:not(.tutorial-locked),.work-button:enabled:not(.tutorial-locked),.primary:enabled:not(.tutorial-locked),.welcome-button:enabled:not(.tutorial-locked),.store-links>button:enabled:not(.tutorial-locked),.bottom-tabs a:not(.tutorial-locked){filter:drop-shadow(0 2px 2px #492d171f)}
.quest-main:enabled:not(.tutorial-locked)>i{filter:drop-shadow(0 2px 2px #29401424)}
.game-shell button.guide-target:not(.tutorial-locked),.game-shell a.guide-target:not(.tutorial-locked){filter:drop-shadow(0 3px 3px #492d1733)}
@media(max-width:370px){
 .stat-card{padding:3px;gap:4px}.stat-card .small{font-size:9px;line-height:11px;gap:2px}.stat-card .small i,.stat-card .small img{width:11px;height:11px}
 .square{border-width:5px;border-image-width:5px;width:32px;height:44px}
 #settings-open [data-icon=settings] svg{width:20px;height:20px}
 .day-bar{gap:7px;padding-left:4px;padding-right:4px}.day-bar strong,.day-bar #day-time{font-size:10px}.day-bar #open-status{font-size:9px}
 .quest{padding-left:30px;padding-right:5px}.quest-label>span>i{left:-27px;width:24px}.quest-main strong{font-size:12px}.quest-main small{font-size:9px}.quest-main>i{width:28px;height:28px}
 .workbench{padding-left:5px;padding-right:5px}.work-row{gap:5px}.work-art{width:33px;height:35px}.resource-label{font-size:10px;gap:3px}.resource-label b{font-size:11px}.resource-label b small{font-size:8px}.work-button{width:58px}.work-note{font-size:8px}
 .store-links>button{gap:5px;padding:4px 5px}.store-links b{font-size:10px}.store-links small{font-size:8px}.menu-pictures,.operations-link>i:first-child{width:27px}.menu-pictures img,.operations-link>i:first-child img{width:27px;height:30px}
 .special-order{gap:5px;padding:3px 5px;grid-template-columns:26px minmax(0,1fr) auto}.special-order canvas{width:26px;height:35px}.special-order h2{font-size:11px}.special-order p{font-size:8px}.special-order .primary{font-size:9px;padding:6px;min-height:34px}
 .bottom-tabs{gap:4%;padding-left:4%;padding-right:4%}.bottom-tabs a{font-size:11px;gap:5px;padding-left:2px;padding-right:2px}.bottom-tabs i,.bottom-tabs i img{width:25px;height:25px}
}
/* Special orders share the controls: keep later goals compact and claimable. */
.quest[hidden]{display:none!important}
.business-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.business-tools[hidden],.business-tools>button[hidden]{display:none!important}
.business-tools:has(#campaign-start[hidden]){grid-template-columns:1fr}
.business-tools>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:53px;padding:4px 7px;border:7px solid transparent;border-image:url('art/ui-wood/panel.png') 12 fill / 7px / 0 stretch;background:none;color:#71472b;filter:drop-shadow(0 2px 2px #492d171f)}
.business-tools:has(#campaign-start:not([hidden]))>button{justify-content:flex-start}
.business-tools b{font-size:11px;display:block;line-height:1.3}.business-tools small{display:block;font-size:9px;color:#947449;line-height:1.3}
.game-shell[data-terrace="true"] .work-art{height:36px}
.game-shell[data-terrace="true"] .work-row+.work-row{padding-top:1px;margin-top:1px}
.game-shell[data-terrace="true"] .resource-label{margin-bottom:1px}
.game-shell[data-terrace="true"] .work-note{margin-top:1px;line-height:1.2}
.game-shell[data-terrace="true"] .stock-meter,.game-shell[data-terrace="true"] #cook-progress{height:6px}
#campaign-start{background:#e2cc8c;text-align:left}#campaign-start img{flex:0 0 35px;width:35px;height:32px;object-fit:contain;image-rendering:pixelated}#campaign-start span{min-width:0}#campaign-start:disabled{opacity:.8}#campaign-start[data-active=true]{background:#d6dfa0;color:#566735}
#goals-open i{flex:0 0 35px;width:35px;height:32px;display:grid;place-items:center;image-rendering:pixelated}#goals-open i img{width:23px;height:27px;image-rendering:pixelated}#goals-open span{text-align:left}
@media(max-width:370px){.business-tools>button{gap:5px;padding:4px 5px}.business-tools b{font-size:10px}.business-tools small{font-size:8px}#campaign-start img,#goals-open i{flex-basis:27px;width:27px}}
.goals-list{display:grid;gap:9px}.goal-record{padding:10px 11px;border:1px solid #d5b782;border-radius:5px;background:#fff9e8}.goal-record.claimed{background:#eef0d6;border-color:#c6cf9a}.goal-record header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.goal-record b{font-size:13px}.goal-record header small{white-space:nowrap;font-size:10px;color:#8a693e}.goal-record p{font-size:11px;line-height:1.6;margin:6px 0;color:#8b6b47}.goal-record .primary{font-size:12px;margin-top:5px}.goal-record.claimed header small{color:#668046}
#goals-dialog .dialog-header,#operations-dialog .dialog-header{position:sticky;top:-16px;z-index:1;background:var(--paper);padding-top:8px;padding-bottom:8px}
.quest.quest-compact:not(.guide-active):not(.collapsed){min-height:68px;padding:3px 7px 3px 35px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-label{min-height:14px;line-height:14px;font-size:9px;padding-right:25px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-label>span>i{left:-30px;top:3px;width:27px;height:32px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main{min-height:34px;padding:1px 0 2px;gap:8px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main strong{font-size:14px;line-height:1.4}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main small{font-size:10px;line-height:1.4;margin-top:2px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main>i{width:30px;height:30px}
.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main i svg{width:18px;height:18px}
.quest.quest-compact:not(.guide-active):not(.collapsed):has(#quest-complete:not([hidden])) .quest-main{padding-right:80px}
.quest.quest-compact:not(.guide-active):not(.collapsed):has(#quest-complete:not([hidden])) #quest-complete{top:50%;right:7px;transform:translateY(-50%);width:72px;min-height:32px;margin:0;padding:5px 3px;font-size:11px}
@media(max-width:370px){.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main strong{font-size:13px}.quest.quest-compact:not(.guide-active):not(.collapsed) .quest-main small{font-size:9px}}