/* UI artwork sliced from the user-supplied atlas by scripts/slice-ui-assets.py. */
.loading-screen { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; box-sizing:border-box; background:#3aa02c; color:#fff0c9; font-family:"Silkscreen",monospace; text-align:center; }
.loading-screen[hidden] { display:none; }
.loading-card { width:min(380px,100%); }
.loading-card h1 { margin:0 0 18px; font-size:clamp(24px,7vw,36px); letter-spacing:3px; text-shadow:3px 3px #061c18; }
.loading-card p { min-height:3em; margin:0 0 18px; color:#c9dbc1; font-size:12px; line-height:1.7; }
.loading-progress { height:18px; padding:4px; border:3px solid #819c6d; background:#081d1a; box-shadow:0 4px 0 #061411; }
.loading-fill { height:100%; background:repeating-linear-gradient(90deg,#b9d478 0 12px,#97b65c 12px 15px); transition:width .25s ease-out; }
.loading-percent { display:block; margin:14px 0 24px; font-size:12px; color:#dbe8c1; }
#loadingRetry { min-height:44px; font:inherit; font-size:12px; }
#loadingRetry[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .loading-fill { transition:none; } }
.server-announcement { position:fixed; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:40; box-sizing:border-box; width:max-content; max-width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:12px 44px 12px 18px; border:6px solid transparent; border-image:url('/public/assets/ui/pixel-announcement-panel.svg') 6 fill / 6px / 0 stretch; filter:drop-shadow(4px 4px 0 #130d09b3); color:#fff3dc; font:400 14px/1.6 "Silkscreen",monospace; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; }
.server-announcement-close { position:absolute; right:4px; top:4px; min-width:32px; min-height:32px; padding:4px; border:0; background:none; color:#fff3dc; font:inherit; cursor:pointer; }
.server-announcement-close:hover,.server-announcement-close:focus-visible { background:#74300e; outline:2px solid #ffdc94; }
.admin-announcement-form { display:grid; gap:12px; padding:8px; }
.admin-announcement-form textarea { box-sizing:border-box; width:100%; min-height:110px; resize:vertical; padding:10px; font:inherit; }
.item-icon.roof { background:url('/public/assets/roof/outer-bottom-left.png') center / contain no-repeat; image-rendering:pixelated; }
.item-icon.roof::before,.item-icon.roof::after { display:none; }
.item-icon.fence { background:url('/public/assets/fence/horizontal.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.fence::before,.item-icon.fence::after { display:none; }
.item-icon.gate { background:url('/public/assets/gate/closed.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.gate::before,.item-icon.gate::after { display:none; }
:root { --ui-side:clamp(280px,28vw,360px); --ui-gear:clamp(275px,20vw,350px); }
.sign-tooltip { position:fixed; left:0; top:0; will-change:transform; z-index:7; box-sizing:border-box; width:max-content; max-width:min(300px,calc(100vw - 16px)); padding:4px 10px; border:6px solid transparent; border-image:url('/public/assets/ui/pixel-chat-panel.svg') 6 fill / 6px / 0 stretch; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(4px 4px 0 #130d09b3); color:#fff3dc; font:400 14px/1.5 "Silkscreen",monospace; text-align:center; text-shadow:none; white-space:pre-wrap; overflow-wrap:anywhere; cursor:default; }
.sign-tooltip[hidden] { display:none; }
.sign-tooltip a { color:#9cdcff; text-decoration:underline; text-underline-offset:3px; }
.sign-tooltip a:hover,.sign-tooltip a:focus-visible { color:#fff; }
.hud { width:var(--ui-side); max-width:none; left:10px; top:10px; gap:10px; z-index:8; color:#ffe8ba; text-shadow:1px 2px #2c170d; }
.hud .panel { position:relative; padding:14px; }
.panel { animation:none; clip-path:none; box-sizing:border-box; }
.hud .panel { border:14px solid transparent; border-image:url('/public/assets/ui/button.png') 18 fill / 14px / 0 stretch; background:none; box-shadow:0 5px 8px #0005; padding:4px; }
.name-row strong { color:#fff1cc; font-size:clamp(16px,1.4vw,24px); white-space:nowrap; }
.auth-account small { font-size:10px; color:#e1c4a1; }
.auth-row { gap:5px; flex-wrap:wrap; }
.auth-account { min-width:80px; }
.auth-login { color:#ebd0a7; }
button { border:12px solid transparent; border-image:url('/public/assets/ui/button.png') 18 fill / 12px / 0 stretch; background:none; box-shadow:none; border-radius:0; color:#fff0c9; text-shadow:1px 2px #331b10; font-family:inherit; font-weight:800; padding:0 8px; }
button:hover { filter:brightness(1.12); transform:none; }
button:active { transform:translateY(1px); box-shadow:none; }
button.active,button[aria-pressed="true"] { border-image-source:url('/public/assets/ui/button-gold.png'); background:none; color:#281704; text-shadow:0 1px #ffdd8e; }
button:focus-visible { outline:2px solid #5bcfff; outline-offset:2px; }
.name-edit { background:url('/public/assets/ui/edit.png') center/100% 100% no-repeat; border:0; color:transparent; text-shadow:none; width:34px; height:36px; flex-shrink:0; }
#logoutBtn { color:#fff0c9; min-height:33px; }
#placeToolBtn,#inventoryBtn,.login-button { position:relative; width:100%; min-height:55px; font-size:clamp(14px,1.35vw,22px); padding-left:42px; text-align:center; }
#placeToolBtn::before,#inventoryBtn::before,.login-button::before { content:""; position:absolute; width:36px; height:40px; left:-3px; top:50%; transform:translateY(-50%); background:center/contain no-repeat; }
#placeToolBtn::before { background-image:url('/public/assets/ui/sign.png'); }
#inventoryBtn::before { background-image:url('/public/assets/ui/bag.png'); }
.login-buttons { display:grid; gap:16px; pointer-events:auto; }
.login-buttons[hidden] { display:none; }
.login-button.google::before { background-image:url('/public/assets/ui/login-google.png'); }
.login-button.discord::before { background-image:url('/public/assets/ui/login-discord.png'); }
.login-button.local { padding-left:0; }
#inventoryBtn.active { border-image-source:url('/public/assets/ui/button.png'); color:#ffe9b1; }
.equipment-window,.inventory-window { position:fixed; z-index:9; transform:none; opacity:1; padding:0 24px 24px; border:0; background:none; isolation:isolate; box-shadow:0 7px 9px #0005; overflow:visible; }
.equipment-window::before,.inventory-window::before { content:""; position:absolute; inset:-8px; z-index:-1; pointer-events:none; border-style:solid; border-color:transparent; border-width:78px 30px 27px; border-image:url('/public/assets/ui/panel.png') 78 30 27 fill / 78px 30px 27px / 0 stretch; }
.equipment-window { left:calc(var(--ui-side) + 42px); top:9vh; width:var(--ui-gear); max-height:calc(100dvh - 105px); }
.inventory-window { left:calc(var(--ui-side) + var(--ui-gear) + 66px); top:14vh; width:min(600px,calc(100vw - var(--ui-side) - var(--ui-gear) - 90px)); min-height:min(610px,75vh); max-height:80vh; }
.equipment-window.visible,.inventory-window.visible { display:block; animation:none; transform:none; }
.equipment-window h2,.inventory-window h2 { height:56px; line-height:56px; margin:0 -5px 12px; padding-left:42px; font-size:clamp(20px,1.65vw,28px); text-transform:uppercase; color:#ffebbb; text-shadow:2px 2px #27130a; position:relative; }
.equipment-window h2::before,.inventory-window h2::before { content:""; position:absolute; left:0; top:8px; width:34px; height:38px; background:center/contain no-repeat; }
.equipment-window h2::before { background-image:url('/public/assets/ui/shield.png'); }
.inventory-window h2::before { background-image:url('/public/assets/ui/bag.png'); }
.panel-close { position:absolute; z-index:3; right:10px; top:9px; width:36px; height:38px; min-height:0; background:url('/public/assets/ui/close.png') center/100% 100% no-repeat; border:0; padding:0; color:transparent; text-shadow:none; }
.paperdoll { height:140px; margin:0 6px 10px; background:url('/public/assets/ui/preview-scene.png') center/100% 100%; border:2px solid #916c41; box-shadow:inset 0 0 0 2px #65482744; border-radius:3px; }
#gearPreview { height:132px; width:88px; }
.vital-bars { background:#3e2619; border:2px solid #815131; border-radius:4px; padding:6px 8px; gap:7px; margin-bottom:10px; }
.vital { padding:0 0 0 24px; background:none; box-shadow:none; display:grid; grid-template-columns:1fr 1fr; gap:7px; align-items:center; position:relative; }
.vital::before { content:""; position:absolute; left:0; width:20px; height:23px; background:center/contain no-repeat; }
.vital.health::before { background-image:url('/public/assets/ui/heart.png'); }
.vital.hunger::before { background-image:url('/public/assets/ui/food.png'); }
.vital-label { display:contents; color:#ffebc9; font-size:11px; }
.vital-label span { grid-column:1; grid-row:1; }
.vital-label strong { grid-column:3; grid-row:1; font-size:10px; color:#fff4d9; }
.vital { grid-template-columns:55px 1fr 48px; }
.vital-track { grid-column:2; grid-row:1; height:13px; background:#5f3f23; border:1px solid #160d09; border-radius:4px; box-shadow:inset 0 1px 2px #0009; overflow:hidden; }
.vital.health .vital-track i { background:linear-gradient(#ff5558,#ff172f); box-shadow:inset 0 2px #ffaaa466; }
.vital.hunger .vital-track i { background:linear-gradient(#ffd269,#ffa421); }
.gear-section-title { margin:10px 0 7px; color:#291a0d; font-size:15px; font-weight:900; display:flex; align-items:center; gap:8px; }
.gear-section-title::after { content:""; height:3px; flex:1; background:linear-gradient(90deg,#b18145aa,transparent); }
.food-slot-grid,.equipment-grid,.quick-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; }
.equipment-slot,.food-slot,.quick-tool-slot,.inventory-slot-cell { width:100%; height:62px; min-height:0; border:7px solid transparent; border-image:url('/public/assets/ui/slot.png') 10 fill / 7px / 0 stretch; padding:2px; box-shadow:none; background:none; border-radius:0; color:#fff1cb; }
.equipment-slot span,.food-slot span,.quick-tool-slot span { color:#d1b28b; font-size:10px; }
.equipment-slot em,.food-slot em,.quick-tool-slot em,.slot-empty-label { color:#c5a482; opacity:1; text-shadow:1px 1px #372316; font-size:9px; }
.food-slot:not(.filled)::after,.quick-tool-slot:not(.filled)::after { content:"+"; grid-row:2; color:#b38c62; font-size:23px; line-height:20px; }
.equipment-slot:not(.filled)::before { content:""; grid-row:1; width:25px; height:25px; background:center/contain no-repeat; }
.equipment-slot:not(.filled) span { grid-row:2; }
.equipment-slot:not(.filled) em { display:none; }
.equipment-slot[data-equip-slot="head"]::before { background-image:url('/public/assets/ui/gear-head.png'); }
.equipment-slot[data-equip-slot="torso"]::before { background-image:url('/public/assets/ui/gear-torso.png'); }
.equipment-slot[data-equip-slot="legs"]::before { background-image:url('/public/assets/ui/gear-legs.png'); }
.equipment-slot[data-equip-slot="feet"]::before { background-image:url('/public/assets/ui/gear-feet.png'); }
.equipment-slot[data-equip-slot="hands"]::before { background-image:url('/public/assets/ui/gear-torso.png'); opacity:.6; }
.equipment-slot[data-equip-slot="backpack"]::before { background-image:url('/public/assets/ui/bag.png'); opacity:.4; filter:grayscale(1); }
.equipment-window .hint { color:#3c2915; text-shadow:none; font-size:11px; font-weight:bold; line-height:1.3; margin-top:10px; }
.inventory-tabs { gap:5px; margin:0 -4px 10px; }
.inventory-tabs button { height:50px; font-size:18px; }
#itemsTabBtn::before,#craftingTabBtn::before { content:""; display:inline-block; width:26px; height:28px; margin-right:10px; vertical-align:middle; background:center/contain no-repeat; }
#itemsTabBtn::before { background-image:url('/public/assets/ui/bag.png'); }
#craftingTabBtn::before { background-image:url('/public/assets/hammer.png'); image-rendering:pixelated; }
.inventory-filters { display:grid; grid-template-columns:.8fr 1fr 1fr 1.5fr 1.1fr; gap:4px; margin:0 -3px 16px; }
.inventory-filters button { height:37px; min-height:0; padding:0; font-size:11px; border-width:8px; }
.inventory-filters button.active { background:none; color:#2c1908; }
.inventory-content { min-height:0; }
.inventory-section-title { margin:8px 0 12px; display:flex; align-items:center; gap:10px; font-size:17px; color:#38220f; text-shadow:none; }
.inventory-section-title::before { content:""; width:25px; height:28px; background:url('/public/assets/ui/bag.png') center/contain no-repeat; }
.inventory-section-title::after { content:""; height:3px; flex:1; background:linear-gradient(90deg,#b78953aa,transparent); }
.pocket-count { font-size:11px; color:#765331; order:2; }
.slot-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.inventory-slot-cell { position:relative; aspect-ratio:1; height:auto; min-height:0; overflow:hidden; }
.inventory-slot-cell.filled { background:none; }
.inventory-slot-cell:hover { box-shadow:0 0 0 2px #d7a33e; }
.inventory-item-button { border:0; border-image:none; background:none; padding:0; box-shadow:none; min-height:0; color:#fff0cb; }
.inventory-item-button:disabled { opacity:1; }
.inventory-slot-cell strong { color:#ffedc2; font-size:15px; text-shadow:1px 2px #27180e; }
.inventory-slot-cell span { color:#f0d6ad; font-size:10px; }
.slot-empty-label { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:9px; }
.slot-empty-label::before { content:"+"; font-size:25px; color:#ad865f; }
.editor,.sign-options { padding:0 20px 20px; border:0; background:none; isolation:isolate; overflow:visible; max-height:none; color:#38220f; text-shadow:none; box-shadow:0 7px 9px #0005; }
.editor::before,.sign-options::before { content:""; position:absolute; inset:-8px; z-index:-1; pointer-events:none; border:solid transparent; border-width:82px 38px 46px; border-image:url('/public/assets/ui/panel.png') 90 52 58 68 fill / 82px 32px 46px 42px / 0 stretch; }
.editor.visible { animation:none; transform:none; opacity:1; }
.sign-options { width:min(320px,calc(100vw - 40px)); }
.sign-options.visible { animation:none; transform:translateX(-50%); opacity:1; }
.editor h2,.sign-options h2 { position:relative; height:56px; line-height:56px; margin:0 -4px 12px; padding-left:34px; padding-right:26px; color:#ffebbb; text-shadow:2px 2px #27130a; text-transform:uppercase; font-size:18px; white-space:nowrap; }
.editor h2::before,.sign-options h2::before { content:""; position:absolute; left:0; top:10px; width:28px; height:34px; background:url('/public/assets/ui/sign.png') center/contain no-repeat; }
.sign-panel-body { max-height:calc(100dvh - 120px); overflow-y:auto; overflow-x:hidden; padding:3px; scrollbar-width:thin; scrollbar-color:#926136 #e9c18a; }
.sign-dimensions { display:grid; grid-template-columns:1fr; gap:18px; margin:6px 0 18px; }
.sign-dimensions label { display:grid; grid-template-columns:1fr auto; gap:8px; font-weight:800; }
.sign-dimensions output { color:#70471f; font-size:12px; }
.sign-dimensions input[type="range"] { appearance:none; -webkit-appearance:none; grid-column:1 / -1; width:100%; min-width:0; min-height:0; height:12px; margin:8px 0; padding:0; border:2px solid #513018; border-radius:3px; background:linear-gradient(to right,#e5a333 0 var(--range-fill,0%),#79502c var(--range-fill,0%) 100%); box-shadow:inset 0 2px #38201277,0 1px #fff0ba; cursor:pointer; }
.sign-dimensions input[type="range"]::-webkit-slider-thumb { appearance:none; width:22px; height:26px; border:5px solid transparent; border-image:url('/public/assets/ui/button-gold.png') 18 fill / 6px / 0 stretch; background:none; filter:drop-shadow(0 2px 1px #321b0a88); }
.sign-dimensions input[type="range"]::-moz-range-thumb { width:14px; height:18px; border:3px solid #78441e; border-radius:2px; background:#ffc858; box-shadow:inset 2px 2px #ffe4a0; }
.sign-dimensions input:focus-visible { outline:2px solid #3a8baf; outline-offset:5px; }
#signSizeSummary { min-height:20px; font-weight:700; }
.sign-options .tiers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.sign-options .tiers button { min-width:0; min-height:36px; }
.editor .hint,.sign-options .hint { color:#614022; text-shadow:none; font-size:11px; }
.editor .row { gap:6px; }
.editor .row strong { font-size:13px; }
.editor button,.sign-options button { font-size:12px; }
.editor .palette { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; padding:6px; margin:12px 0; background:#b5845140; box-shadow:inset 0 0 0 1px #92663c; max-height:none; }
.editor .swatch { width:100%; height:27px; min-height:27px; border:2px solid #513018; border-image:none; box-shadow:inset 1px 1px #ffffff55; }
.editor .swatch.active { outline:2px solid #f5bf49; outline-offset:2px; }
.editor #signTitle { width:100%; min-width:0; box-sizing:border-box; padding:9px; background:#fff0cd; border:2px solid #9c7041; color:#38220f; font:inherit; font-size:12px; box-shadow:inset 0 2px #51301822; }
.sign-title-field { width:100%; min-width:0; display:grid; gap:5px; }
.sign-title-budget { display:flex; align-items:center; gap:8px; }
.sign-title-budget output { flex-shrink:0; color:#614022; font:10px "Segoe UI",sans-serif; text-shadow:none; }
.sign-title-budget progress { appearance:none; flex:1; min-width:0; width:100%; height:4px; border:0; border-radius:2px; overflow:hidden; background:#382619; box-shadow:0 0 0 1px #8b623a; }
.sign-title-budget progress::-webkit-progress-bar { background:#382619; border-radius:2px; }
.sign-title-budget progress::-webkit-progress-value { background:#4c9b4b; border-radius:2px; }
.sign-title-budget progress::-moz-progress-bar { background:#4c9b4b; border-radius:2px; }
.editor .pay-button { border-image-source:url('/public/assets/ui/button-gold.png'); background:none; color:#38220f; text-shadow:0 1px #ffdd8e; }
.editor #pixelEditor { box-shadow:0 0 0 2px #513018,0 3px 5px #51301855; touch-action:none; }
.sign-options #confirmSizeBtn { width:100%; }
.sign-pixel-payment { margin:12px 0; padding:10px; background:#b584512e; border:1px solid #a27646; }
.sign-pixel-payment strong { font-size:13px; }
.sign-pixel-payment p { margin:7px 0; font-size:12px; line-height:1.4; }
.sign-pixel-payment button { width:100%; }
.sign-pixel-payment button:disabled { filter:grayscale(.7); opacity:.6; cursor:default; }
.sign-editor-dimensions { display:flex; gap:7px; align-items:end; margin:3px 0 12px; }
.sign-editor-dimensions label { display:grid; gap:4px; font-size:12px; font-weight:800; }
.sign-editor-dimensions input { width:78px; padding:5px; color:#38220f; background:#fff0cd; border:2px solid #9c7041; box-shadow:inset 0 2px #51301822; }
.sign-editor-dimensions strong { margin-left:auto; align-self:center; font-size:24px; color:#65dc76; }
.sign-canvas-stage { overflow:auto; max-height:300px; padding:14px; background:#b584512e; border:1px solid #a27646; scrollbar-width:thin; scrollbar-color:#926136 #e9c18a; }
.sign-canvas-wrap { position:relative; width:max-content; margin:auto; }
.editor { width:min(390px,calc(100vw - 32px)); }
#editorPanel,#signPaymentPanel { z-index:9; }
.sign-payment-panel { width:min(300px,calc(100vw - 32px)); }
.sign-payment-panel h2::before { background-image:url('/public/assets/resources/pixel.png?v=20261019-1'); }
.sign-payment-panel .sign-credit-picker { grid-template-columns:1fr; }
.sign-payment-panel .sign-credit-picker output { font-size:12px; }
.editor .sign-canvas-wrap #pixelEditor { display:block; max-width:none; min-width:0; min-height:0; margin:0; }
.editor .sign-resize-edge { position:absolute; padding:0; min-height:0; border:0; border-image:none; background:none; box-shadow:none; touch-action:none; z-index:1; }
.editor .sign-resize-edge::after { content:""; position:absolute; background:#ffd566; border:1px solid #6f421f; box-shadow:inset 1px 1px #fff3c2; }
.sign-resize-edge.left,.sign-resize-edge.right { top:0; bottom:0; width:14px; cursor:ew-resize; }
.sign-resize-edge.left { left:-14px; }.sign-resize-edge.right { right:-14px; }
.sign-resize-edge.left::after,.sign-resize-edge.right::after { top:calc(50% - 10px); left:4px; width:5px; height:18px; }
.sign-resize-edge.top,.sign-resize-edge.bottom { left:0; right:0; height:14px; cursor:ns-resize; }
.sign-resize-edge.top { top:-14px; }.sign-resize-edge.bottom { bottom:-14px; }
.sign-resize-edge.top::after,.sign-resize-edge.bottom::after { left:calc(50% - 10px); top:4px; height:5px; width:18px; }
.sign-credit-picker { display:grid; grid-template-columns:1fr auto; gap:8px; font-size:12px; font-weight:bold; margin:12px 0 16px; }
.sign-credit-picker .hint,.sign-credit-picker input { grid-column:1 / -1; }
.sign-credit-picker input { appearance:none; -webkit-appearance:none; min-height:0; height:12px; padding:0; margin:7px 0; border:2px solid #513018; background:linear-gradient(to right,#e5a333 0 var(--range-fill,0%),#79502c var(--range-fill,0%) 100%); box-shadow:inset 0 2px #38201277; }
.sign-credit-picker input::-webkit-slider-thumb { appearance:none; width:22px; height:26px; border:5px solid transparent; border-image:url('/public/assets/ui/button-gold.png') 18 fill / 6px / 0 stretch; background:none; }
.sign-credit-picker input::-moz-range-thumb { width:14px; height:18px; border:3px solid #78441e; background:#ffc858; }
.inventory-item-button .item-icon { width:36px; height:36px; margin:2px; }
.item-icon.wood,.item-icon.stone,.item-icon.coal,.item-icon.sulfur,.item-icon.backpack { background:center/contain no-repeat; box-shadow:none; border:0; }
.item-icon.wood { background-image:url('/public/assets/ui/wood.png'); }
.item-icon.stone { background-image:url('/public/assets/ui/stone.png'); }
.item-icon.coal { background-image:url('/public/assets/ui/coal.png'); }
.item-icon.sulfur { background-image:url('/public/assets/resources/sulfur-ore-v2.png'); }
.item-icon.backpack { background-image:url('/public/assets/ui/bag.png'); }
.item-icon.wood::before,.item-icon.wood::after,.item-icon.stone::before,.item-icon.stone::after,.item-icon.coal::before,.item-icon.coal::after,.item-icon.sulfur::before,.item-icon.sulfur::after,.item-icon.backpack::before,.item-icon.backpack::after { display:none; }
/* Equipment icons use the same supplied artwork as the character. */
.item-icon:is(.leafCap,.workerShirt,.workerPants,.trailBoots,.workGloves,.backpack) { background-repeat:no-repeat; background-position:center; box-shadow:none; border:0; image-rendering:pixelated; }
.item-icon:is(.leafCap,.workerShirt,.workerPants,.trailBoots,.workGloves,.backpack)::before,
.item-icon:is(.leafCap,.workerShirt,.workerPants,.trailBoots,.workGloves,.backpack)::after { display:none; }
.item-icon.leafCap { background-image:url('/public/assets/player/hrac_jednoduchy/casti/ciapka.png'); background-size:contain; }
.item-icon.workerShirt { background-image:url('/public/assets/player/hrac_jednoduchy/vrstvy/kosela.png'); background-size:64px 68px; }
.item-icon.workerPants { background-image:url('/public/assets/player/hrac_jednoduchy/vrstvy/nohavice.png'); background-size:64px 68px; background-position:center calc(50% - 15px); }
.item-icon.trailBoots { background-image:url('/public/assets/player/hrac_jednoduchy/casti/topanky_l.png'),url('/public/assets/player/hrac_jednoduchy/casti/topanky_r.png'); background-size:12px 8px; background-position:left 3px center,right 3px center; }
.item-icon.workGloves { background-image:url('/public/assets/player/hrac_jednoduchy/casti/rukavice_l.png'),url('/public/assets/player/hrac_jednoduchy/casti/rukavice_r.png'); background-size:12px 9px; background-position:left 3px center,right 3px center; }
.item-icon.backpack { background-image:url('/public/assets/player/hrac_jednoduchy/casti/batoh_zozadu.png'); background-size:contain; }
.recipe-list { min-height:0; max-height:calc(65vh - 150px); scrollbar-width:thin; scrollbar-color:#926136 #e9c18a; }
.recipe-card { background:#b5845140; color:#412713; box-shadow:inset 0 0 0 1px #92663c; }
.recipe-card strong { color:#3c2310; text-shadow:none; }
.recipe-card .missing-cost { color:#a42020; }
.item-window { z-index:11; }
@media(min-width:1500px) { .equipment-slot,.food-slot,.quick-tool-slot { height:70px; } .paperdoll { height:150px; } .equipment-window { padding:0 25px 24px; } .gear-section-title { margin-top:13px; } }
@media(max-height:780px) and (min-width:761px) { .equipment-window { top:20px; max-height:calc(100dvh - 35px); } .paperdoll { height:100px; } #gearPreview { height:100px; width:67px; } .equipment-slot,.food-slot,.quick-tool-slot { height:51px; } .gear-section-title { margin:5px 0; } .equipment-window .hint { font-size:9px; } .inventory-window { top:60px; } }
@media(max-width:1050px) and (min-width:761px) { :root { --ui-side:150px; --ui-gear:255px; } .equipment-window {left:175px;} .inventory-window {left:450px;width:calc(100vw - 465px);padding-left:18px;padding-right:18px;} .inventory-tabs button {font-size:13px;} .inventory-filters {gap:1px;} .inventory-filters button {font-size:9px;} .slot-grid {gap:4px;} .vital {grid-template-columns:45px 1fr 38px;} .vital-label strong {font-size:9px;} }
@media(max-width:760px) { body.inventory-open {overflow:auto;} .inventory-open .hud,.inventory-open #minimap {display:none;} .equipment-window,.inventory-window {position:absolute;left:18px;right:18px;width:auto;max-height:none;} .equipment-window {top:18px;} .inventory-window {top:775px;min-height:460px;margin-bottom:30px;} .equipment-window.visible,.inventory-window.visible {transform:none;animation:none;} .slot-grid {gap:5px;} .inventory-filters button {font-size:10px;} }
/* Final reference proportions and corner slices: foliage never stretches. */
.equipment-window::before,.inventory-window::before { border-width:82px 38px 46px; border-image-slice:90 52 58 68 fill; border-image-width:82px 32px 46px 42px; }
#status { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; padding:3px; }
#profilePreview { width:54px; height:78px; align-self:center; background:#49301e; border:3px solid #c29655; box-sizing:border-box; box-shadow:0 0 0 2px #27170c,inset 0 0 0 2px #54381f; cursor:default; }
.profile-details { min-width:0; }
.item-icon.pixel { background:url('/public/assets/resources/pixel.png?v=20261019-1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.copperWire { background:url('/public/assets/resources/copper-wire.png?v=20261019-1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.blueDiode,.item-icon.greenDiode,.item-icon.redDiode { background-image:url('/public/assets/resources/diodes.png?v=20261019-1'); background-size:300% 100%; background-repeat:no-repeat; image-rendering:pixelated; }
.item-icon.blueDiode { background-position:10% center; }
.item-icon.greenDiode { background-position:50% center; }
.item-icon.redDiode { background-position:90% center; }
.item-icon.blueDiode::before,.item-icon.blueDiode::after,.item-icon.greenDiode::before,.item-icon.greenDiode::after,.item-icon.redDiode::before,.item-icon.redDiode::after { content:none; }
.item-icon.pixel::before,.item-icon.pixel::after,.item-icon.copperWire::before,.item-icon.copperWire::after { content:none; }
.workbench-inputs { display:grid; grid-template-columns:repeat(3,var(--slot-size)); justify-content:center; gap:8px; margin:8px 0; }
.workbench-inputs .item-icon.workbench-empty-icon { opacity:.25; }
.workbench-output { display:grid; grid-template-columns:var(--slot-size); justify-content:center; margin:8px 0; }
.workbench-inputs .furnace-slot,.workbench-output .furnace-slot { min-width:0; width:100%; }
.workbench-inputs .furnace-slot span { font-size:10px; overflow-wrap:anywhere; }
.workbench-progress { height:12px; margin-top:12px; background:#301c12; border:2px solid #ac834c; }
.workbench-progress span { display:block; width:var(--pixel-progress,0%); height:100%; background:linear-gradient(90deg,#ef5350,#58d54d,#3894ff); }
.workbench-status { min-height:18px; font-size:12px; }
.workbench-machine { position:relative; isolation:isolate; }
.workbench-electricity { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; border-radius:6px; }
.workbench-electricity::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,#a1e9ff55,#368cff22 60%,transparent); opacity:var(--workbench-glow,0); }
.workbench-electricity i { position:absolute; width:108px; height:108px; opacity:0; background:center/contain no-repeat; image-rendering:pixelated; filter:drop-shadow(0 0 5px #40bfff) drop-shadow(0 0 12px #258bff88); isolation:isolate; }
.workbench-electricity i::before { content:""; position:absolute; inset:-28%; z-index:-1; background:radial-gradient(ellipse,#91e6ff77,#368cff33 35%,transparent 70%); }
@keyframes workbench-arc { 0% { opacity:.65; } 15% { opacity:1; } 34% { opacity:.35; } 48% { opacity:1; } 78% { opacity:.7; } 100% { opacity:0; } }
#startWorkbenchBtn { display:block; margin:12px auto; min-height:40px; }
@media (prefers-reduced-motion:reduce) { .workbench-electricity { display:none; } }
.hud .rewarded-profile { position:absolute; left:calc(100% + 10px); top:0; width:180px; display:grid; gap:5px; pointer-events:auto; }
.hud .rewarded-profile[hidden] { display:none; }
.rewarded-profile strong { font-size:15px; }
.rewarded-profile button { font-size:12px; min-height:42px; padding:0 3px; }
.rewarded-profile small { font-size:10px; line-height:1.3; }
.rewarded-profile button:disabled { opacity:.65; cursor:default; }
.rewarded-ad-dialog { width:min(440px,calc(100vw - 32px)); box-sizing:border-box; max-height:90vh; overflow:auto; padding:22px; border:4px solid #9c703e; background:#2a140c; color:#fff0c9; font:14px/1.5 Arial,sans-serif; }
.rewarded-ad-dialog::backdrop { background:#0009; }
#problemReportButton { position:fixed; right:14px; bottom:32px; z-index:25; min-height:36px; border-width:8px; border-image-width:8px; padding:0 6px; font-size:12px; }
#problemReportText { display:block; box-sizing:border-box; width:100%; margin-top:8px; resize:vertical; max-height:45vh; font:inherit; }
.admin-problem-report { padding:12px 0; border-bottom:1px solid #9c703e; }
.admin-problem-report small { display:block; margin-top:4px; }
.admin-problem-report p { white-space:pre-wrap; overflow-wrap:anywhere; }
.problem-report-attach { display:flex; align-items:center; gap:8px; margin-top:12px; }
#problemReportAttach { width:16px; height:16px; min-height:0; margin:0; padding:0; border:0; box-shadow:none; }
#problemReportCaptureHint { display:block; margin:6px 0; }
#problemReportPreview { max-width:100%; max-height:180px; object-fit:contain; }
.problem-report-image-dialog { width:min(1400px,calc(100vw - 32px)); }
#problemReportFullImage { display:block; max-width:100%; max-height:65vh; margin:0 auto 12px; object-fit:contain; }
#problemReportFullImage:not([src]) { display:none; }
.rewarded-ad-dialog h2 { margin-top:0; font-size:20px; }
.rewarded-ad-dialog a { color:#7fffd0; }
.rewarded-ad-dialog .row { display:flex; flex-wrap:wrap; gap:8px; }
.rewarded-ad-dialog button { min-height:44px; }
@media(max-width:480px) { .hud .rewarded-profile { width:min(145px,calc(100vw - var(--ui-side) - 30px)); } .rewarded-profile button { border-width:6px; font-size:11px; } }
.name-row { gap:3px; }
.name-row strong { font-size:clamp(13px,1.15vw,22px); }
.auth-row { margin-top:4px; font-size:11px; }
.auth-account small { font-size:9px; }
.name-edit { width:27px; height:29px; min-height:0; }
.auth-login { font-size:10px; margin-top:4px; }
.auth-buttons button { width:27px; min-height:25px; height:25px; font-size:12px; border-width:5px; }
.profile-details .status-vitals { margin-top:5px; }
.hud .place-prompt,.hud .inventory-slot { padding:0; border:0; border-image:none; box-shadow:none; }
#placeToolBtn,#inventoryBtn,.login-button { min-height:76px; padding-left:40px; border-width:14px; font-size:clamp(15px,1.4vw,24px); }
#placeToolBtn::before,#inventoryBtn::before,.login-button::before { width:38px; height:43px; left:0; }
.gear-section-title { font-size:16px; }
.gear-section-title::before { content:""; width:20px; height:24px; background:center/contain no-repeat; flex-shrink:0; }
.vital-bars + .gear-section-title::before { background-image:url('/public/assets/ui/food.png'); filter:sepia(1) brightness(.5); }
.food-slot-grid + .gear-section-title::before { background-image:url('/public/assets/ui/shirt.png'); }
.equipment-grid + .gear-section-title::before { background-image:url('/public/assets/ui/hammer.png'); }
#craftingTabBtn::before { background-image:url('/public/assets/ui/hammer.png'); }
.inventory-section-title { text-transform:uppercase; font-weight:900; }
.equipment-slot span,.food-slot span,.quick-tool-slot span {font-size:11px;}
.equipment-window .hint { padding-left:26px; position:relative; }
.equipment-window .hint::before {content:"i";position:absolute;left:0;top:1px;width:18px;height:18px;text-align:center;line-height:18px;color:#f1d19d;background:#98713e;border-radius:50%;font-size:14px;}
.inventory-item-button .item-icon {width:40px;height:40px;}
.inventory-window {min-height:min(610px,75vh);}
@media(max-width:1050px) and (min-width:761px) { #status {grid-template-columns:1fr;} #profilePreview {display:none;} #placeToolBtn,#inventoryBtn,.login-button {font-size:13px;padding-left:27px;} #placeToolBtn::before,#inventoryBtn::before,.login-button::before {width:26px;} }
@media(max-width:760px) { #status {grid-template-columns:45px minmax(0,1fr);} #profilePreview {width:45px;} .inventory-window {top:810px;} }
/* Keep labels inside compact slots at laptop heights. */
.equipment-slot,.quick-tool-slot,.food-slot { grid-auto-rows:min-content; align-content:center; gap:1px; }
.equipment-slot span,.quick-tool-slot span,.food-slot span {line-height:12px;}
.equipment-slot em,.quick-tool-slot em,.food-slot em {line-height:10px;}
@media(max-height:780px) and (min-width:761px) { .equipment-slot,.food-slot,.quick-tool-slot {height:55px;} .equipment-slot:not(.filled)::before {width:20px;height:20px;} .food-slot:not(.filled)::after,.quick-tool-slot:not(.filled)::after {font-size:18px;line-height:15px;} }
/* The frame stays fixed; all pocket/backpack rows scroll inside its body. */
.inventory-window.visible { display:flex; flex-direction:column; height:min(710px,calc(100dvh - 16vh - 24px)); min-height:0; }
.inventory-window > h2,.inventory-tabs,.inventory-filters { flex-shrink:0; }
.inventory-window .inventory-content { display:block; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px 5px 8px 2px; scrollbar-width:thin; scrollbar-color:#89603c #dfb981; overscroll-behavior:contain; }
.inventory-window .recipe-list { min-height:0; max-height:none; overflow:visible; display:block; padding:0; }
.craft-search { display:block; position:relative; flex-shrink:0; margin:0 0 14px; color:#614326; font-family:"Segoe UI",Arial,sans-serif; font-size:12px; }
.craft-search > label { display:block; margin:0 0 7px 2px; font-weight:600; }
.craft-search::before { content:""; position:absolute; left:15px; bottom:17px; width:10px; height:10px; border:2px solid #96724a; border-radius:50%; pointer-events:none; }
.craft-search::after { content:""; position:absolute; left:26px; bottom:14px; width:7px; height:2px; background:#96724a; transform:rotate(45deg); pointer-events:none; }
.craft-search input { box-sizing:border-box; width:100%; min-width:0; height:46px; padding:10px 42px 10px 42px; border:1px solid #ad8554; border-radius:8px; background:linear-gradient(#fff8e8,#f9e8c8); color:#432e1a; font:400 16px/1.4 Georgia,"Palatino Linotype",serif; letter-spacing:normal; text-shadow:none; box-shadow:inset 0 1px 3px #79512d20,0 1px 0 #fff6d9; transition:border-color .15s,box-shadow .15s; }
.craft-search input::placeholder { color:#957956; opacity:1; }
.craft-search input:focus-visible { outline:2px solid #c39346; outline-offset:2px; border-color:#926431; box-shadow:inset 0 1px 3px #79512d15,0 0 0 4px #deb87535; }
.craft-results { margin:0 0 8px; color:#654628; font-size:11px; }
.craft-category + .craft-category { margin-top:20px; border-top:2px solid #a17645; padding-top:12px; }
.craft-category-title { font-size:15px; margin:0 0 10px; }
.craft-category-title::before { display:none; }
.craft-category-items { gap:9px; }
@media(max-width:1050px) and (min-width:761px) { .craft-category-items {gap:4px;} }
@media(max-width:760px) { .craft-category-items {gap:5px;} }
.craft-slot .inventory-item-button { width:100%; height:100%; }
.craft-slot .inventory-item-button > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.craft-slot:has(.inventory-item-button[aria-disabled="true"]) { opacity:.5; }
.craft-slot .inventory-item-button[aria-disabled="true"] { cursor:help; }
.inventory-tooltip { font-size:13px; line-height:1.45; max-width:min(280px,calc(100vw - 24px)); text-align:left; }
.tooltip-recipe { border-top:1px solid #b78953; margin-top:9px; padding-top:7px; }
.tooltip-recipe b { display:block; margin:4px 0; color:#ffedc2; }
.inventory-tooltip .missing-cost { color:#ffb0a0; }
.craft-empty { color:#50351e; padding:20px 8px; line-height:1.6; text-align:center; }
@media (max-width:760px) { .inventory-tabs button { font-size:13px; } #craftingTabBtn::before,#itemsTabBtn::before { width:20px; height:22px; margin-right:5px; } }
.paperdoll { background-image:url('/public/assets/ui/preview-scene.png?v=2'); }
@media(max-width:760px) { .inventory-window.visible { height:70dvh; min-height:350px; max-height:none; } }
/* Workstations share the inventory artwork and keep their contents inside the frame. */
.item-window {
  left:auto; right:22px; top:10vh; bottom:auto; width:330px;
  max-height:calc(90dvh - 24px); padding:0 20px 24px;
  border:0; background:none; isolation:isolate; overflow:visible;
  opacity:1; transform:none; box-shadow:0 7px 9px #0005;
  color:#38220f; text-shadow:none;
}
.item-window.visible { display:flex; flex-direction:column; animation:none; transform:none; }
.item-window::before {
  content:""; position:absolute; inset:-8px; z-index:-1; pointer-events:none;
  border:solid transparent; border-width:82px 38px 46px;
  border-image:url('/public/assets/ui/panel.png') 90 52 58 68 fill / 82px 32px 46px 42px / 0 stretch;
}
.item-window h2 {
  flex-shrink:0; height:56px; line-height:56px; margin:0 36px 12px 0;
  font-size:22px; text-transform:uppercase; color:#ffebbb; text-shadow:2px 2px #27130a;
}
.item-window-content {
  min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px 4px 6px;
  scrollbar-width:thin; scrollbar-color:#89603c #dfb981;
}
.item-window .furnace-slots,.item-window .box-slot-grid,.item-window .trash-slot-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0;
}
.item-window .furnace-slots.output,.item-window .repairbench-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.item-window .furnace-slot,.item-window .box-slot,.item-window .trash-slot {
  width:100%; height:auto; aspect-ratio:1; min-height:0; padding:3px;
  border:7px solid transparent; border-image:url('/public/assets/ui/slot.png') 10 fill / 7px / 0 stretch;
  background:none; box-shadow:none; color:#fff1cb; align-content:center; gap:3px;
}
.item-window .item-icon { width:34px; height:34px; margin:0; }
.item-window :is(.furnace-slot,.box-slot,.trash-slot) strong { color:#ffedc2; font-size:14px; text-shadow:1px 2px #27180e; }
.item-window :is(.furnace-slot,.box-slot,.trash-slot) span { font-size:9px; color:#f0d6ad; }
.item-window :is(.furnace-slot,.box-slot,.trash-slot).empty span { opacity:1; color:#c5a482; text-shadow:1px 1px #372316; }
.item-window :is(.furnace-slot,.box-slot,.trash-slot).empty::before { content:"+"; font-size:25px; line-height:25px; color:#ad865f; }
.item-window .hint { color:#51351e; font-size:11px; line-height:1.5; text-shadow:none; }
.item-window .workbench-inputs .furnace-slot,.item-window .workbench-output .furnace-slot { width:var(--slot-size); height:var(--slot-size); min-height:var(--slot-size); aspect-ratio:1; }
.item-window .furnace-section-title { display:flex; align-items:center; gap:8px; color:#38220f; font-size:15px; margin:12px 0 6px; }
.item-window .furnace-section-title::after { content:""; height:3px; flex:1; background:linear-gradient(90deg,#b78953aa,transparent); }
.item-window .furnace-fire,.item-window .repairbench-stat { background:#67432922; box-shadow:inset 0 0 0 1px #92663c; color:#51351e; }
.item-window .repairbench-stat strong { color:#38220f; text-shadow:none; }
.item-window .furnace-actions { display:flex; justify-content:center; margin:14px 0 6px; }
.item-window .furnace-actions button { min-height:42px; border-image-source:url('/public/assets/ui/button-gold.png'); color:#281704; text-shadow:0 1px #ffdd8e; }
.item-window #trashDiscardBtn { min-width:112px; background:none; }
.item-window .trash-slot { position:relative; }
.trash-slot-content { display:grid; place-items:center; align-content:center; gap:3px; width:100%; min-width:0; }
.item-window .trash-slot.discarding { cursor:default; opacity:1; filter:none; transform:none; }
.trash-slot.discarding .trash-slot-content { opacity:.5; }
.trash-progress { position:absolute; width:44px; height:44px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-90deg); pointer-events:none; }
.trash-progress circle { fill:none; stroke-width:4; }
.trash-progress-track { stroke:#3338; }
.trash-progress-fill { stroke:#bfc3c7; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.trash-progress.active .trash-progress-fill { animation:trashDiscardProgress 60s linear forwards; }
@keyframes trashDiscardProgress { to { stroke-dashoffset:0; } }
.item-window .waypoint-field { color:#51351e; }
.item-window .furnace-layout .furnace-slots { grid-template-columns:repeat(3,var(--slot-size)); justify-content:center; }
.item-window .furnace-layout .furnace-slots.output { grid-template-columns:repeat(2,var(--slot-size)); }
.item-window .furnace-layout .furnace-slot { width:var(--slot-size); height:var(--slot-size); min-height:var(--slot-size); aspect-ratio:1; gap:1px; }
.item-window .furnace-layout .furnace-slot .item-icon { width:28px; height:28px; }
.item-window .furnace-layout .furnace-slot strong { line-height:14px; }
.item-window .furnace-layout .furnace-slot span { max-width:100%; line-height:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-window .furnace-layout .furnace-section-title { justify-content:center; }
.item-window .furnace-layout .furnace-section-title::after { content:none; }
.item-window .furnace-layout .furnace-cook { min-width:112px; background:none; }
.item-window .box-all-in { min-width:112px; }
.item-icon.fireplace { background:url('/public/assets/fireplace/front-stable-3.png?v=20261016-2') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.fireplace::before,.item-icon.fireplace::after { content:none; }
.item-icon.crystalWasher { background:url('/public/assets/crystal-washer/tub-empty.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.bucket { background:url('/public/assets/crystal-washer/bucket-empty.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.waterBucket { background:url('/public/assets/crystal-washer/bucket-water.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.cleanWater { background:url('/public/assets/crystal-washer/water-clean.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.dirtyWater { background:url('/public/assets/crystal-washer/water-dirty.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.cleanBlueCrystal { background:url('/public/assets/crystal-washer/blue-clean.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.cleanGreenCrystal { background:url('/public/assets/crystal-washer/green-clean.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.item-icon.cleanRedCrystal { background:url('/public/assets/crystal-washer/red-clean.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.washer-layout { display:grid; gap:10px; justify-items:center; }
.washer-layout .furnace-section-title,.washer-layout .hint { width:100%; margin:0; }
.washer-slot .furnace-slot { width:90px; height:90px; min-height:90px; }
.washer-scene { position:relative; width:170px; height:156px; background:url('/public/assets/crystal-washer/tub.png?v=1') center/contain no-repeat; image-rendering:pixelated; }
.washer-scene.empty { background-image:url('/public/assets/crystal-washer/tub-empty.png?v=1'); }
.washer-scene.dirty { background-image:url('/public/assets/crystal-washer/tub-dirty.png?v=1'); }
.washer-stations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:7px; }
.washer-station { display:grid; gap:6px; justify-items:center; min-width:0; }
.washer-station .furnace-section-title { text-align:center; }
.item-window .washer-layout .furnace-slot { width:100%; height:78px; min-height:78px; aspect-ratio:auto; gap:2px; }
.item-window .washer-layout .furnace-slot span { font-size:8px; line-height:10px; }
.item-window .washer-layout .furnace-slot strong { font-size:12px; }
.washer-scene .washer-floating { position:absolute; left:calc(50% - 12px); top:24%; width:24px; height:42px; transform:rotate(-6deg); }
.washer-scene.washing .washer-floating { animation:crystalWashBob 2.4s ease-in-out infinite; }
.washer-progress { width:100%; height:12px; overflow:hidden; border:2px solid #754521; background:#3d2718; box-shadow:inset 0 1px 2px #0008; }
.washer-progress span { display:block; width:var(--wash-progress,0%); height:100%; background:linear-gradient(#90eaff,#269bd7); box-shadow:0 0 7px #7feaff88; }
.washer-status { margin:0; min-height:16px; font-weight:bold; color:#54341d; font-size:12px; }
.washer-bubble { position:absolute; width:7px; height:7px; border:1px solid #c4f7ff; border-radius:50%; top:42%; left:37%; opacity:0; animation:crystalWashBubble 2s ease-out infinite; }
.washer-bubble.two { left:57%; animation-delay:.65s; width:5px; height:5px; }
.washer-bubble.three { left:48%; animation-delay:1.3s; }
@keyframes crystalWashBob { 0%,100% { transform:translateY(3px) rotate(-6deg); } 50% { transform:translateY(-5px) rotate(6deg); } }
@keyframes crystalWashBubble { 0% { opacity:0; transform:translateY(5px) scale(.5); } 25% { opacity:.8; } 100% { opacity:0; transform:translateY(-22px) scale(1.2); } }
@media(prefers-reduced-motion:reduce) { .washer-scene.washing .washer-floating,.washer-bubble { animation:none; } }
.item-window .furnace-layout .furnace-fire { height:75px; min-height:75px; background:none; box-shadow:none; animation:none; }
.item-window .furnace-layout .furnace-flame { width:48px; height:75px; margin:0; background:url('/public/assets/furnace/ui-fire.png') 0 0 / 384px 75px no-repeat; image-rendering:pixelated; }
.item-window .furnace-layout .furnace-fire.on .furnace-flame { animation:furnaceUiFire .88s steps(8,end) infinite; }
.item-window .furnace-layout .furnace-flame::before,.item-window .furnace-layout .furnace-flame::after { content:none; }
@keyframes furnaceUiFire { to { background-position:-384px 0; } }
.item-window .waypoint-field input { box-sizing:border-box; max-width:100%; background:#f5d8a7; color:#38220f; border:2px solid #91643c; }
.item-window .waypoint-colors button { border:3px solid #654327; border-image:none; box-shadow:inset 0 0 0 2px #edc381; }
.item-window .waypoint-colors button.active { outline:2px solid #ffe9a8; outline-offset:2px; }
@media(max-width:760px) {
  .item-window { position:fixed; top:calc(48dvh + 40px); left:18px; right:18px; bottom:auto; width:auto; max-height:calc(52dvh - 62px); }
  .item-window :is(.furnace-slots,.box-slot-grid,.trash-slot-grid) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .item-window :is(.furnace-slot,.box-slot,.trash-slot) { aspect-ratio:auto; min-height:78px; }
}

.food-slot.filled { position:relative; }
.food-slot.filled > span { position:absolute; top:2px; left:3px; }
.food-progress { width:32px; height:32px; border-radius:50%; position:relative; display:grid; place-items:center; background:conic-gradient(#a9e36c var(--food-left), #281c1499 0); box-shadow:0 0 0 1px #23170e; }
.food-progress::before { content:""; position:absolute; inset:3px; border-radius:50%; background:#503724; }
.food-progress .item-icon { position:relative; z-index:1; width:20px; height:24px; margin:0; }
.food-slot.filled strong { font-size:9px; line-height:10px; }

@property --food-left { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.food-progress { transition: --food-left 50ms linear; background:conic-gradient(from 0deg,#86ef73 var(--food-left),#231a1399 0); box-shadow:0 0 5px #86ef7355,0 0 0 1px #23170e; }

.craft-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.craft-search #clearCraftSearch { position:absolute; right:8px; bottom:8px; width:30px; height:30px; min-height:0; padding:0; border:0; border-image:none; background:#bc95652b; border-radius:5px; color:#79522c; font:24px/30px Georgia,serif; text-shadow:none; box-shadow:none; }
.craft-search #clearCraftSearch[hidden] { display:none; }
.craft-search #clearCraftSearch:hover { background:#bc95655e; }
.craft-slot.crafting { opacity:1; box-shadow:0 0 0 2px #dab15e; }
.craft-slot .craft-progress { position:absolute; top:3px; right:3px; z-index:3; pointer-events:none; width:32px; height:32px; }
.craft-progress b { z-index:1; color:#fff3cf; font:700 11px "Trebuchet MS",sans-serif; }

.craft-queue { margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid #a17645; }
.craft-queue h3 { margin:2px 0 5px; font-size:14px; }
.craft-queue h3::before { display:none; }
.craft-queue p { margin:0 0 8px; font-size:11px; color:#765331; }
.craft-queue-items { display:flex; gap:7px; overflow-x:auto; padding:3px 3px 8px; scrollbar-width:thin; }
.craft-queue-entry { position:relative; flex:0 0 64px; width:64px; height:64px; display:grid; place-items:center; border:7px solid transparent; border-image:url('/public/assets/ui/slot.png') 10 fill / 7px / 0 stretch; padding:0; }
.craft-queue-entry .item-icon { width:36px; height:36px; }
.craft-queue-entry.active-craft { box-shadow:0 0 0 2px #dab15e; }
.queue-position { position:absolute; top:-3px; left:0; z-index:2; font-size:10px; }
.craft-queue-entry .craft-progress { position:absolute; right:-4px; bottom:-4px; z-index:3; pointer-events:none; width:26px; height:26px; }
.craft-queued-count { position:absolute; top:2px; left:3px; z-index:3; padding:2px 4px; background:#e6be73; color:#35200f!important; font-weight:800; border:1px solid #654526; pointer-events:none; }

#craftQueueHud { position:fixed; right:16px; bottom:32px; z-index:12; width:min(430px,calc(100vw - 32px)); box-sizing:border-box; padding:12px 14px 8px; border:10px solid transparent; border-image:url('/public/assets/ui/button.png') 18 fill / 10px / 0 stretch; box-shadow:0 4px 12px #0005; color:#ffedc2; }
#craftQueueHud[hidden] { display:none; }
#craftQueueHud { transform:translateX(calc(100% + 32px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s .34s; }
#craftQueueHud.is-visible { transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
@media(prefers-reduced-motion:reduce) { #craftQueueHud { transition:none; } }
#craftQueueHud .craft-queue { margin:0; padding:0; border:0; }
#craftQueueHud h3 { color:#ffedc2; }
#craftQueueHud p { color:#d8bb91; }
#craftQueueHud .craft-queue-items { scrollbar-color:#ad865f #493021; }
@media(max-width:760px) { #craftQueueHud { right:8px; bottom:calc(12px + env(safe-area-inset-bottom)); width:min(350px,calc(100vw - 16px)); padding:8px 10px 4px; } }

/* Shared artwork for inventory, crafting and quick slots. */
.item-icon:is(.axe,.pickaxe,.hammer,.bow,.arrow,.spear) { background: center / contain no-repeat; border:0; box-shadow:none; image-rendering:pixelated; }
.item-icon:is(.axe,.pickaxe,.hammer,.bow,.arrow,.spear)::before,
.item-icon:is(.axe,.pickaxe,.hammer,.bow,.arrow,.spear)::after { display:none; }
.item-icon.axe { background-image:url("/public/assets/tools/axe.png?v=1"); }
.item-icon.pickaxe { background-image:url("/public/assets/tools/pickaxe.png?v=1"); }
.item-icon.hammer { background-image:url("/public/assets/tools/hammer.png?v=1"); }
.item-icon.bow { background-image:url("/public/assets/tools/bow.png?v=1"); }
.item-icon.arrow { background-image:url("/public/assets/tools/arrow.png?v=1"); }
.item-icon.spear { background-image:url("/public/assets/tools/spear.png?v=1"); }

/* Progress is driven each frame; recreated rings must never animate from 100%. */
.craft-progress.food-progress { transition: none; }
.furnace-layout .furnace-slot { position:relative; }
/* Furnace progress shares the food ring geometry around the item icon. */
.furnace-slot-progress.food-progress { transition:none; background:conic-gradient(from 0deg,#b8bdc3 var(--food-left),#231a1399 0); box-shadow:0 0 0 1px #23170e; pointer-events:none; }
.item-window .furnace-layout .food-progress .item-icon { width:20px; height:24px; }
.furnace-slot-progress.food-progress.inactive { background:none; box-shadow:none; }
.furnace-slot-progress.inactive::before { display:none; }

/* The rare pixel keeps its supplied frame wherever its stack is displayed.
   Crop the source's outer padding in CSS, preserving the original artwork. */
:is(.inventory-slot-cell,.item-window .furnace-slot,.item-window .box-slot,.item-window .trash-slot):has(.item-icon.pixel) {
  border-image:none;
  background:url('/public/assets/ui/pixel-slot-frame.png') 50% 39% / 125% 128% no-repeat;
  background-origin:border-box;
  background-clip:border-box;
  image-rendering:pixelated;
}

/* Supplied wooden HUD panel: 110px source corners stay fixed in the nine-slice. */
.hud { gap:16px; left:14px; top:16px; transform:scale(.7); transform-origin:top left; font-family:Arial,sans-serif; color:#fff0d2; text-shadow:1px 2px 1px #271106; }
.minimap-frame { position:fixed; right:14px; top:14px; width:174px; height:160px; pointer-events:none; }
.minimap-frame::after {
  content:""; position:absolute; inset:-13px; pointer-events:none;
  border:20px solid transparent;
  border-image:url('/public/assets/ui/minimap-frame.png') 96 / 20px / 0 stretch;
  image-rendering:pixelated;
}
#minimap { position:static; border:0; border-image:none; background:none; animation:none; box-shadow:none; }
@media(max-width:760px) {
  .minimap-frame { right:10px; top:10px; width:112px; height:104px; }
  .inventory-open .minimap-frame { display:none; }
}
.hud #status,.hud .rewarded-profile,#placeToolBtn,#inventoryBtn,.login-button {
  border:24px solid transparent;
  border-image:url('/public/assets/ui/hud-wood-panel.png') 110 fill / 24px / 0 stretch;
  border-radius:0; background:none; box-shadow:0 4px 5px #0005;
}
.hud #status { grid-template-columns:68px minmax(0,1fr); gap:12px; padding:0; min-height:150px; }
#profilePreview { display:block; width:68px; height:96px; border:4px solid #d8a347; background:#49301e; image-rendering:pixelated; box-shadow:0 0 0 2px #231207,inset 0 0 0 2px #785126; }
.profile-details { display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.name-row { gap:8px; }
.name-visibility { flex:0 0 30px; width:30px; min-height:30px; padding:4px; border:0; background:transparent; color:#fff1cc; pointer-events:auto; }
.name-visibility svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; pointer-events:none; }
.name-visibility[aria-pressed="true"] { color:#c7a67e; }
.own-name-visibility { position:fixed; z-index:7; height:30px; padding:4px; filter:drop-shadow(1px 1px 1px #271106); }
.own-name-visibility[hidden] { display:none; }
.name-row strong { font-size:clamp(23px,2.1vw,30px); line-height:1.2; }
.name-edit { width:32px; height:34px; }
.auth-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin:0; }
.auth-account { min-width:0; }
.auth-account strong { font-size:14px; }
.auth-account small { font-size:11px; line-height:1.3; color:#e5c9a5; }
#logoutBtn { min-height:38px; padding:0 4px; border-width:9px; font-size:12px; }
.profile-details .status-vitals { margin:0; gap:4px; }
.status-vital { height:10px; border:1px solid #301608; border-radius:3px; background:#40200f; overflow:hidden; box-shadow:inset 0 1px 2px #0008,0 1px #a46d3d; }
.status-vital.health span { background:linear-gradient(#f64e4b,#d9232c); box-shadow:inset 0 2px #ff777766; }
.status-vital.hunger { height:6px; }
.hud .place-prompt,.hud .inventory-slot { padding:0; border:0; border-image:none; background:none; box-shadow:none; }
#placeToolBtn,#inventoryBtn,.login-button { min-height:88px; padding:0 0 0 42px; font-size:clamp(21px,2vw,28px); letter-spacing:.2px; color:#fff0d2; }
#placeToolBtn::before,#inventoryBtn::before,.login-button::before { width:46px; height:54px; left:-4px; image-rendering:pixelated; }
#inventoryBtn.active,#placeToolBtn.active { border-image-source:url('/public/assets/ui/hud-wood-panel.png'); color:#ffdc8b; }
.hud .rewarded-profile { width:230px; min-height:136px; left:calc(100% + 16px); padding:0; gap:10px; align-content:start; }
.rewarded-profile strong { font-size:21px; line-height:1.2; }
.rewarded-profile button { min-height:44px; font-size:15px; padding:0 2px; border-width:10px; white-space:nowrap; }
.rewarded-profile small { font-size:12px; line-height:1.4; color:#fff0d2; }
.rewarded-profile button:disabled { opacity:1; color:#d9bd98; filter:saturate(.75); }
.name-row { height:36px; }
.name-form { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; height:36px; margin:0; }
.name-form input {
  flex:1; width:0; min-width:0; height:34px; box-sizing:border-box; padding:0 7px;
  border:2px solid #b47a38; border-radius:3px; background:#301b10; color:#fff0d2;
  box-shadow:inset 0 2px 3px #0007,0 1px #e6b76655;
  font:700 15px Arial,sans-serif; text-shadow:1px 1px #170b05;
}
.name-form input:focus { outline:1px solid #ffcf70; outline-offset:1px; border-color:#e9b653; }
.name-form button { flex:0 0 28px; width:28px; min-height:34px; height:34px; border-width:7px; padding:0; font-size:16px; line-height:1; }
#saveNameBtn { color:#c7e996; }
#cancelNameBtn { color:#ffc6a0; }
@media(max-width:1050px) and (min-width:761px) {
  :root { --ui-side:250px; }
  .hud #status { grid-template-columns:52px minmax(0,1fr); gap:8px; border-width:18px; border-image-width:18px; }
  #profilePreview { width:52px; height:82px; }
  .name-row strong { font-size:20px; }
  .name-edit { width:26px; height:28px; }
  .auth-row { grid-template-columns:1fr; gap:4px; }
  #logoutBtn { justify-self:start; min-height:30px; }
  #placeToolBtn,#inventoryBtn,.login-button { font-size:20px; padding-left:32px; }
  #placeToolBtn::before,#inventoryBtn::before,.login-button::before { width:38px; }
}
@media(max-width:620px) {
  :root { --ui-side:min(300px,calc(100vw - 28px)); }
  .hud .rewarded-profile { position:relative; left:auto; top:auto; width:100%; min-height:0; grid-row:4; }
  .rewarded-profile strong { font-size:18px; }
  #placeToolBtn,#inventoryBtn,.login-button { min-height:76px; font-size:22px; }
}

/* Compact prompt directly below the drawing canvas. */
.sign-ai { margin:10px 0; }
.sign-ai-row { display:flex; gap:6px; align-items:stretch; }
.sign-ai-row input { flex:1; min-width:0; width:0; padding:7px; color:#38220f; background:#fff0cd; border:2px solid #9c7041; font:12px "Segoe UI",sans-serif; }
.sign-ai-row button { flex-shrink:0; font-size:12px; }
.sign-ai-status:empty { display:none; }
.sign-ai-status { margin:6px 0 0; }
.sign-canvas-wrap[aria-busy="true"] #pixelEditor { cursor:progress; opacity:.65; }