@charset "UTF-8"; /* Game gestures must not open text selection or native touch menus. */ body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } body input, body textarea, body [contenteditable=''], body [contenteditable='true'], body [contenteditable='plaintext-only'] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } body img, body a { -webkit-user-drag: none; } :root { font-family: 'Yuanti SC', 'Hiragino Maru Gothic ProN', 'PingFang SC', sans-serif; color: #625239; background: #b3ad97; font-synthesis: none; --paper: #f5e7c6; --ink: #665237; --wood: #977549; --green: #768668; --shadow: #674d30; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } body { display: flex; justify-content: center; background: radial-gradient(ellipse at 50% 25%, #e3d8bd, #a7aa91); } button, a, input { font: inherit; color: inherit; } button, a { touch-action: manipulation; } button { border: 0; cursor: pointer; } button:disabled { opacity: 0.4; cursor: default; } button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #f4c977; outline-offset: 3px; } [hidden] { display: none !important; } h1, h2, h3, p { margin: 0; } a { text-decoration: none; } button, a { transition: transform 0.12s, filter 0.12s; } button:active:not(:disabled), a:active { transform: translateY(2px); } svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ===== 图标符号库（sprite 在 index.html 之后，） ===== */ .ico { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; } .ico-fill { fill: currentColor; stroke: none; } .coin-inline { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: 0.15em; display: inline-block; } input { outline: none; } input:focus { border-color: #927747 !important; } input[type='number'] { appearance: textfield; -moz-appearance: textfield; } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { appearance: none; margin: 0; } .game { position: relative; width: 100%; max-width: 560px; height: 100%; overflow: hidden; isolation: isolate; box-shadow: 0 0 90px #41453342; } #scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; } .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 44%, #72573e16), linear-gradient(#f5e7c327, transparent 20%, transparent 70%, #7759350d); z-index: 1; } .hud { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; z-index: 8; pointer-events: none; } .hud > * { pointer-events: auto; } .round-button { height: 39px; width: 39px; border: 2px solid #a38a5e; border-radius: 50%; display: grid; place-items: center; color: #765e3e; background: #eee0b9; box-shadow: 0 3px 0 #715a3d, inset 0 0 0 3px #fbebc8; font-size: 24px; } .round-button svg { height: 21px; width: 21px; } .phase-chip { position: relative; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 6px; padding: 8px 16px; color: #f8e9c5; min-width: 116px; background: repeating-linear-gradient(2deg, #92744e 0 3px, #957750 4px 6px); border: 3px solid #b79765; border-radius: 3px; box-shadow: 0 3px 0 #705433, inset 0 0 0 1px #765e3d; transform: rotate(-1deg); font-family: 'Songti SC', 'STSong', serif; font-weight: 800; letter-spacing: 2px; text-shadow: 0 1px #705335; } .phase-chip:before, .phase-chip:after { content: ''; position: absolute; top: -27px; width: 2px; height: 27px; background: #8a7353; box-shadow: 1px 0 #d2b78a; } .phase-chip:before { left: 17px; } .phase-chip:after { right: 17px; } #phase-label { font-size: 18px; } #shop-day { font-family: 'PingFang SC', sans-serif; font-size: 9px; letter-spacing: 1px; color: #e7d2a8; font-weight: 500; } .journey { display: flex; gap: 7px; } .journey i { width: 5px; height: 5px; border: 1px solid #ceac75; transform: rotate(45deg); background: #6f593b; } .journey i.active { background: #f4d493; box-shadow: 0 0 5px #ffdda255; } .journey i.done { background: #c7b683; } .coin-pill { display: flex; gap: 7px; align-items: center; height: 34px; padding: 3px 10px 3px 0; background: #e8d6aa; border: 2px solid #b79964; border-radius: 6px; box-shadow: 0 3px #8f7149; position: relative; min-width: 77px; } .coin-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; filter: drop-shadow(0 2px 0 #a78040); } .coin-icon svg { width: 100%; height: 100%; display: block; } .coin-pill .coin-icon { margin-left: -7px; width: 31px; height: 31px; } .coin-pill b { font-size: 16px; color: #795f37; font-variant-numeric: tabular-nums; } .coin-pill > i { position: absolute; right: -4px; top: -5px; width: 9px; height: 9px; border: 2px solid #f4dfae; border-radius: 50%; background: #c18655; } .world-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .world-ui button { pointer-events: auto; position: absolute; } .shelf-tag { padding: 3px 7px; min-width: 48px; max-width: 78px; background: #faebcdeb; border: 1px solid #b99b64; border-radius: 2px; box-shadow: 1px 3px 0 #7c694f33; transform: translate(-50%, 0) rotate(-3deg) !important; color: #765939; line-height: 1.1; } .shelf-tag:before { content: ''; position: absolute; left: 50%; top: -6px; height: 7px; width: 1px; background: #98794a; } .shelf-tag small { display: block; font-size: 8px; font-weight: 600; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .shelf-tag b { display: block; font-size: 11px; font-family: Georgia, 'Songti SC', serif; } .empty-slot { width: 44px; height: 44px; background: none; transform: translate(-50%, -25%) !important; display: grid; place-items: center; } .empty-slot span { height: 20px; width: 28px; border: 1px dashed #8c774c70; border-radius: 50%; background: #e8dbb868; color: #8c7855b3; font-size: 15px; transform: rotate(-18deg); } .world-spot { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #f8e9c9cc; border: 2px solid #b99a64; color: #8d7750; box-shadow: 0 2px #8a714766; transform: translate(-50%, -90%) !important; animation: worldPulse 3s ease-in-out infinite; } .door-hotspot { width: 62px; height: 76px; background: transparent; transform: translate(-50%, -20%) !important; } .customer-thought { position: absolute; transform: translate(-50%, calc(-100% - 10px)); white-space: normal; width: max-content; max-width: 220px; background: #fbebcc; border: 2px solid #ac9569; box-shadow: 0 3px #876f4644; padding: 7px 11px; border-radius: 13px 13px 13px 2px; font-size: 11px; color: #736044; pointer-events: none; line-height: 1.55; } .customer-thought:after { content: ''; position: absolute; bottom: -6px; left: calc(var(--thought-tail, 50%) - 5px); width: 9px; height: 9px; background: #fbebcc; border-bottom: 2px solid #ac9569; border-right: 2px solid #ac9569; transform: rotate(45deg); } .customer-thought.has-wish{display:grid;grid-template-columns:48px;grid-template-rows:42px auto;gap:0;padding:5px 9px 6px;border-radius:18px;text-align:center;background:#fff5db;box-shadow:0 3px 0 #aa956c44,inset 0 0 0 2px #fffaf0} .customer-thought.has-wish:after{background:#fff5db} .customer-wish{grid-column:1;grid-row:1;display:block;width:48px;height:44px;pointer-events:none} .customer-wish svg{display:block;width:48px;height:44px} #customer-wish-label{white-space:nowrap;grid-column:1;grid-row:2;font-size:10px;font-weight:600;letter-spacing:.5px;color:#76845f} .customer-thought.has-wish.has-comment{grid-template-columns:48px minmax(0,1fr);column-gap:9px;padding-right:11px} #customer-thought-line{overflow-wrap:anywhere} .has-wish #customer-thought-line{grid-column:2;grid-row:1/3;align-self:center;text-align:left;min-width:0;font-size:11px} .shop-controls { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: calc(24px + env(safe-area-inset-bottom)); pointer-events: none; } .shop-controls > * { pointer-events: auto; } .shop-whisper { font-size: 10px; text-align: center; letter-spacing: 1px; color: #87734f; margin-bottom: 17px; text-shadow: 0 1px #fff3d8; } .shop-dock { display: flex; gap: 9px; align-items: flex-end; padding: 0 4px; position: relative; } .shop-dock:before { content: ''; position: absolute; bottom: 22px; left: -3px; right: 132px; height: 12px; background: repeating-linear-gradient(0deg, #b18a5d 0 3px, #ba9566 3px 4px); border-top: 2px solid #dfbe88; border-bottom: 3px solid #846540; border-radius: 3px; box-shadow: 0 5px 9px #79644220; } .dock-tool { position: relative; flex: 1; min-width: 45px; max-width: 81px; display: flex; align-items: center; flex-direction: column; gap: 6px; background: none; padding: 0 0 0; } .dock-art { display: block; width: 57px; height: 57px; filter: drop-shadow(1px 4px 1px #785b3938); } .dock-art svg { width: 100%; height: 100%; } .dock-tool b { font-size: 12px; color: #6a573a; text-shadow: 0 1px #f5e4c4; font-weight: 800; letter-spacing: 2px; } .open-sign { margin-left: auto; position: relative; width: 119px; min-height: 77px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 8px 5px 9px; gap: 0; background: #708164; border: 3px solid #a6b28b; box-shadow: 0 4px #4d6347, inset 0 0 0 1px #536b4d; border-radius: 5px; color: #fff0cc; transform: rotate(2deg); text-shadow: 0 1px #435f42; } .open-sign b { font-family: 'Songti SC', 'STSong', serif; font-size: 16px; letter-spacing: 2px; } .bell-art { width: 39px; height: 35px; display: block; margin-top: -22px; margin-bottom: 5px; filter: drop-shadow(0 3px #5d5a3144); } .bell-art svg { width: 44px; height: 44px; } .open-sign:before, .open-sign:after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #c6c392; top: 7px; box-shadow: 0 1px #526b47; } .open-sign:before { left: 6px; } .open-sign:after { right: 6px; } .open-sign.is-open { background: #ae8053; border-color: #d4ad77; box-shadow: 0 4px #815b38, inset 0 0 0 1px #92663d; } .customer-panel { position: absolute; z-index: 7; bottom: calc(23px + env(safe-area-inset-bottom)); left: 18px; right: 18px; background: radial-gradient(ellipse at 20% 30%, #fbefd6, #eddbb3); padding: 19px 16px 13px; border: 5px solid #aa8756; border-radius: 6px 12px 5px 9px; box-shadow: 0 5px #6f5436, inset 0 0 0 2px #d5b984, 0 8px 25px #53432b23; } .customer-name { position: absolute; top: -23px; left: 11px; display: flex; align-items: center; gap: 8px; background: #8c7050; border: 2px solid #b99a67; color: #f6e5bf; padding: 6px 13px; box-shadow: 0 3px #785d3c; transform: rotate(-2deg); font-size: 15px; font-weight: 800; font-family: 'Songti SC', serif; } .customer-name small { font-size: 9px; opacity: 0.85; font-weight: 500; letter-spacing: 1px; } .patience { position: absolute; right: 12px; top: 7px; display: flex; gap: 4px; color: #bd8871; } .patience .heart { width: 15px; height: 15px; stroke: #bd8871; stroke-width: 1.9; fill: none; transform-origin: 50% 55%; transition: transform 0.25s, fill 0.25s; } .patience .heart.on { fill: #d69a86; } .patience .heart.lost { animation: heartLose 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); } @keyframes heartLose { 0% { fill: #d69a86; transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(0.9); fill: none; } } .deal-top { display: flex; align-items: center; gap: 11px; padding-top: 3px; } .customer-portrait { width: 58px; height: 65px; flex-shrink: 0; overflow: hidden; border: 2px solid #b5996b; background: #e4d4ac; border-radius: 40% 40% 5px 5px; box-shadow: 0 2px #a1876066; } .customer-portrait svg { width: 100%; height: 100%; } .deal-copy { min-width: 0; padding-top: 7px; } .deal-copy p { font-family: 'Songti SC', 'STSong', serif; font-size: 15px; font-weight: 700; line-height: 1.45; } .deal-copy small { display: block; font-size: 9px; color: #9b835c; line-height: 1.5; margin-top: 5px; } .offer-row { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 2px 0 8px; } .offer-row > span:first-child { font-size: 10px; color: #9f8558; } .offer-row strong { font: 700 34px Georgia; color: #8c6738; text-shadow: 0 2px #fff2cf; } .offer-row .coin-icon { width: 22px; height: 22px; } .deal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .paper-button, .little-primary { background: #e6d1a2; border: 2px solid #b29361; box-shadow: 0 3px #96764b, inset 0 0 0 1px #f7e4b9; border-radius: 4px; padding: 9px 14px; font-size: 13px; font-weight: 750; color: #7e643d; } .paper-button.primary, .little-primary { background: #81946d; border-color: #a8b98a; box-shadow: 0 3px #5d7550, inset 0 0 0 1px #647e56; color: #fff0cd; } .text-choice { background: none; padding: 10px 6px; font-size: 10px; margin-right: auto; color: #9b835d; } .counter-controls { display: flex; gap: 7px; align-items: center; justify-content: center; } .counter-controls > button:not(.little-primary) { width: 31px; height: 34px; border: 1px solid #b99b6d; background: #f4e7c4; border-radius: 3px; font-size: 19px; } .counter-controls input { width: 78px; height: 36px; text-align: center; border: 0; border-bottom: 2px dashed #b59d6e; background: #f9efd4; font: bold 23px Georgia; color: #7b623e; } .counter-controls .little-primary { font-size: 12px; padding: 9px; } .sale-receipt { position: absolute; z-index: 6; bottom: calc(39px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) rotate(-3deg); min-width: 202px; max-width: 85%; padding: 19px 25px 16px; background: #f5e6c4; border: 1px solid #bca271; box-shadow: 3px 5px #75604420; text-align: center; animation: receiptIn 0.3s ease-out; } .sale-receipt:before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 7px; background: linear-gradient(135deg, transparent 5px, #f5e6c4 0) 0 0/10px 10px repeat-x; } .sale-receipt b { display: block; font: 700 34px Georgia; color: #7c8856; margin-top: 8px; } .sale-receipt small { display: block; color: #9a835c; font-size: 11px; margin-top: 7px; } .receipt-stamp { display: inline-block; font-family: 'Songti SC', serif; letter-spacing: 4px; color: #b67557; border: 2px solid #b67557; padding: 2px 6px; font-size: 13px; transform: rotate(-8deg); } .bottom-ui { position: absolute; z-index: 4; bottom: calc(23px + env(safe-area-inset-bottom)); left: 24px; right: 24px; display: flex; align-items: center; flex-direction: column; pointer-events: none; } .bottom-ui > * { pointer-events: auto; } .tools { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; min-height: 61px; } .tool { min-width: 45px; display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 2px; background: none; font-size: 10px; font-weight: 700; color: #8b7957; } .tool-circle { width: 43px; height: 43px; display: grid; place-items: center; border: 2px solid #c7ac78; border-radius: 10px; background: #f0dfb5; box-shadow: 0 3px 0 #a08355, inset 0 0 0 2px #ffedc4; } .tool-circle svg { width: 25px; height: 25px; } .tool.active .tool-circle { border-color: #acb489; background: #d1dbb6; box-shadow: 0 3px 0 #7b8d65, inset 0 0 0 2px #e5ebcc; } .tool.active { color: #637b52; } .tool[data-tool='hands'] svg { fill: #dbb68b; stroke: #997345; } .tool[data-tool='sponge'] svg { fill: #d8b464; stroke: #9c7845; } .tool[data-tool='photo'] svg { fill: #b4c299; stroke: #75845b; } .tool[data-tool='size'] .tool-circle, .tool[data-tool='undo'] .tool-circle { border: 0; box-shadow: none; background: none; width: 28px; } .tool[data-tool='size'], .tool[data-tool='undo'] { min-width: 27px; } .brush-dot { display: block; border-radius: 50%; background: #798858; box-shadow: 0 0 0 5px #f3e7c188; } .tool[data-tool='undo'] svg { width: 22px; } .bottom-hint { font-size: 10px; line-height: 1.4; min-height: 14px; color: #8c7d5c; text-shadow: 0 1px #fff7; text-align: center; letter-spacing: 0.5px; margin: 10px 0 13px; } .action-button { height: 49px; width: 100%; max-width: 294px; display: flex; align-items: center; justify-content: center; gap: 21px; flex-shrink: 0; border: 3px solid #a4b284; border-bottom-color: #82966d; border-radius: 6px; background: #819569; box-shadow: 0 4px 0 #586f49, inset 0 0 0 1px #658154; color: #fff1cf; text-shadow: 0 1px #587049; font-family: 'Songti SC', 'STSong', serif; font-size: 17px; font-weight: 800; letter-spacing: 3px; user-select: none; -webkit-user-select: none; touch-action: none; } .action-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #587545; } #action-icon { display: flex; line-height: 0; } #action-icon svg { width: 24px; height: 24px; stroke-width: 2.1; filter: drop-shadow(0 1px 0 #3228144d); transform-origin: 50% 90%; transition: transform 0.12s; } .action-button:active:not(:disabled) #action-icon svg { transform: translateX(2px); } .action-button:disabled #action-icon svg { opacity: 0.5; filter: none; } .action-button.held #action-icon svg { animation: flameFlicker 0.45s ease-in-out infinite alternate; } @keyframes flameFlicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08) rotate(3deg); } } .palette { width: 100%; display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto; padding: 7px 6px 11px; scrollbar-width: none; margin-bottom: 3px; } .palette::-webkit-scrollbar { display: none; } .glaze-tool { flex: 0 0 31px; width: 31px; height: 31px; border-radius: 50%; padding: 0; position: relative; background: none; } .glaze-dish { display: block; width: 100%; height: 100%; border: 4px solid #f4e4bd; border-radius: 50%; background: var(--glaze); box-shadow: 0 3px 0 #a58c5d, inset 1px 2px 4px #4d5d3945; position: relative; } .glaze-dish:after { content: ''; position: absolute; left: 4px; top: 3px; width: 6px; height: 3px; border-radius: 100%; background: #ffffff6b; transform: rotate(-30deg); } .glaze-tool.active { outline: 2px solid #8e996b; outline-offset: 3px; } .locked:after { content: '+'; position: absolute; bottom: -2px; right: -2px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #e0c898; color: #8c703f; font: 700 11px sans-serif; border: 1px solid #f9e7bc; } .game[data-stage='glaze'] .tools { gap: 13px; } .stamp-tray { display: flex; gap: 10px; margin: 0 0 6px; } .stamp-choice { height: 44px; width: 39px; border-radius: 6px; background: linear-gradient(#8a6a44 0, #8a6a44 6px, #ead9b2 6px); border: 1px solid #bda472; box-shadow: 0 2px #a08456; position: relative; padding: 0; display: grid; place-items: end center; } .stamp-face { width: 30px; height: 30px; margin-bottom: 3px; background: center/contain no-repeat; opacity: 0.85; } .stamp-choice.active { background: linear-gradient(#8a6a44 0, #8a6a44 6px, #ccd6a6 6px); outline: 1px solid #919f6b; } .stamp-choice.active .stamp-face { opacity: 1; } .stamp-choice.locked .stamp-face { opacity: 0.35; filter: grayscale(1); } .game[data-stage='glaze'] .bottom-hint { margin: 8px 0 10px; } .game[data-stage='inspect'] #scene { cursor: grab; } .game[data-stage='inspect'] #scene:active { cursor: grabbing; } .kiln-display { width: 100%; max-width: 270px; margin-bottom: 16px; } .kiln-caption { display: flex; align-items: center; gap: 9px; color: #aa8854; font-size: 15px; } .kiln-caption .kiln-flame { width: 22px; height: 22px; flex-shrink: 0; color: #c4783f; fill: #f1b45a; fill-opacity: calc(0.2 + var(--heat, 0.18) * 0.6); transform-origin: 50% 90%; animation: flameFlicker 0.9s ease-in-out infinite alternate; } .kiln-caption b { font-size: 22px; font-weight: 750; color: #a47944; } .kiln-caption span:last-child { margin-left: auto; font-size: 10px; } .heat-track { height: 13px; border: 2px solid #c4a571; border-radius: 4px; background: #bca2779c; position: relative; margin-top: 13px; box-shadow: 0 2px #957549; } .heat-good { position: absolute; left: 55%; width: 25%; height: 100%; background: #a6bb7d; } #heat-pointer { position: absolute; top: -6px; height: 21px; width: 8px; left: 18%; border: 2px solid #9b7946; border-radius: 3px; background: #fff0cb; } .kiln-progress { height: 4px; width: 65px; margin: 11px auto 0; background: #c0a57977; border-radius: 4px; overflow: hidden; } .kiln-progress i { display: block; height: 100%; background: #a5834f; width: 0; } .game[data-stage='kiln'] .action-button { border-color: #d5b176; background: #bf935b; box-shadow: 0 4px #916438; text-shadow: 0 1px #8e6b3a; } .game[data-stage='kiln'] .action-button.held { transform: translateY(3px); box-shadow: 0 1px #916438; background: #d1a167; } .sheet { border: 5px solid #aa8756; border-radius: 7px 10px 5px 9px; box-shadow: 0 5px #705638, inset 0 0 0 2px #dcc28f, 0 14px 70px #4d3b284f; background: radial-gradient(ellipse at 20% 10%, #fff0d1, #e8d5ac); color: #6f5a3b; width: min(430px, calc(100% - 32px)); max-height: min(77dvh, 730px); padding: 25px 21px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b79968 transparent; overscroll-behavior: contain; } .sheet::backdrop { background: #3b3e3066; backdrop-filter: blur(2px); } .sheet h2 { font-family: 'Songti SC', 'STSong', serif; font-size: 23px; letter-spacing: 3px; color: #79603d; padding-bottom: 16px; position: relative; } .sheet h2:after { content: ''; height: 1px; position: absolute; bottom: 5px; left: 0; right: 0; background: #b798625c; } .close { position: absolute; right: 9px; top: 9px; border: 2px solid #b49660; box-shadow: 0 2px #9a7c4d; background: #eeddb7; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: #957648; } .close svg { width: 15px; height: 15px; stroke-width: 2.3; transition: transform 0.18s ease; } .close:active:not(:disabled) svg { transform: rotate(90deg); } .menu-entry { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border-bottom: 1px dashed #baa1727a; padding: 15px 6px; text-align: left; font-size: 15px; font-family: 'Songti SC', serif; font-weight: 650; } .menu-entry span { font-size: 12px; color: #a3895b; } .menu-entry span .ico { width: 14px; height: 14px; vertical-align: -3px; } .shop-balance { float: right; font: 12px 'PingFang SC', sans-serif; color: #b08d51; margin-right: 15px; margin-top: 9px; letter-spacing: 0; } .shop-note { font-size: 11px; color: #a68c5f; letter-spacing: 1px; margin: 4px 0 13px; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px 8px; } .shop-section { grid-column: 1/-1; font: 13px 'Songti SC', serif; color: #958052; border-bottom: 1px dashed #bda47766; padding: 7px 0; } .shop-item { position: relative; display: flex; align-items: center; flex-direction: column; gap: 6px; padding: 8px 1px; background: #e6d2a753; border: 1px solid #b89e6c7a; border-radius: 4px; box-shadow: 0 2px #b4976733; } .shop-item.owned { border-color: transparent; box-shadow: none; background: none; } .shop-item > span:not(.unlock-art) { font-size: 11px; } .shop-item small { font-size: 8px; color: #a48b5b; } .shop-item small .ico { width: 11px; height: 11px; vertical-align: -2.5px; } .shop-item.affordable small { color: #7c8a52; font-weight: 700; } .unlock-art { width: 37px; height: 37px; color: #9e8854; display: grid; place-items: center; } .unlock-art .stamp-face { width: 32px; height: 32px; margin: 0; opacity: 1; } .shop-item .glaze-dish { height: 31px; width: 31px; } .decor-sheet { width: min(420px, calc(100% - 32px)); margin-bottom: calc(27px + env(safe-area-inset-bottom)); max-height: 66dvh; } .decor-sheet::backdrop { background: #3b3e3026; backdrop-filter: none; } .decor-grid { display: flex; flex-direction: column; gap: 6px; } .decor-item { display: flex; align-items: center; gap: 13px; padding: 8px 0; border-bottom: 1px dashed #b89d6a77; background: none; text-align: left; } .decor-art { width: 51px; height: 51px; flex-shrink: 0; } .decor-art svg { width: 100%; height: 100%; } .decor-copy { display: flex; flex-direction: column; gap: 5px; } .decor-copy b { font-size: 13px; font-weight: 800; } .decor-copy small { font-size: 9px; color: #a18a60; } .decor-price { margin-left: auto; font: bold 12px Georgia, 'PingFang SC', sans-serif; white-space: nowrap; color: #9b7945; background: #e4ce9f; padding: 8px; border: 1px solid #bda371; border-radius: 3px; } .equipped .decor-price { color: #788656; background: #d7dcb5; border-color: #aeb787; } .tag-sheet { max-width: 348px; padding: 27px 25px 23px; } .tag-sheet:before { content: ''; position: absolute; right: 21px; top: 56px; width: 9px; height: 9px; border-radius: 50%; background: #ac8d57; box-shadow: inset 0 2px #725931; } .tag-sheet h2 { font-size: 21px; } .name-field { display: block; font-size: 10px; letter-spacing: 2px; color: #a08759; margin-top: 20px; } .name-field input { display: block; width: 100%; border: 0; border-bottom: 2px dashed #b39864; background: none; padding: 10px 0; font: 700 21px 'Songti SC', serif; color: #715b3c; letter-spacing: 1px; border-radius: 0; } .price-field { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 11px; color: #9c8255; } .price-field > div { display: flex; align-items: center; gap: 9px; } .price-field input { width: 140px; text-align: center; font: 700 37px Georgia; color: #8b6c3f; background: #ffefd049; border: 0; border-bottom: 2px dashed #b39864; border-radius: 0; padding: 3px 0; } .tag-estimate { font-size: 9px; text-align: right; margin: 10px 0 19px; color: #a0875b; } .shelf-checkbox { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #8b764f; } .shelf-checkbox input { accent-color: #7a8d60; width: 17px; height: 17px; } .tag-sheet .action-button { margin-top: 19px; font-size: 15px; } #tag-error { font-size: 10px; color: #b07452; min-height: 12px; margin-top: 11px; } .book-tabs { display: flex; gap: 8px; margin: 7px 0 18px; } .book-tabs button { background: #e4cda1; border: 1px solid #b59a66; border-radius: 4px 4px 0 0; color: #9c8152; padding: 7px 19px; font-size: 12px; } .book-tabs button.selected { background: #798b63; color: #faebc6; border-color: #98a47b; } .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .gallery-piece { background: #eeddb88a; border: 1px solid #c1a773; padding: 6px 6px 9px; display: flex; align-items: center; flex-direction: column; box-shadow: 2px 3px #9e865234; transform: rotate(-1deg); } .gallery-piece:nth-child(even) { transform: rotate(1deg); } .gallery-piece img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .gallery-piece > span { font-family: 'Songti SC', serif; font-size: 13px; margin-top: 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gallery-piece small { font-size: 9px; margin-top: 5px; color: #a38b5d; } .empty-gallery { grid-column: 1/-1; padding: 25px 6px; color: #a68d5e; text-align: center; font-size: 12px; line-height: 1.8; } .photo-sheet { text-align: center; } .photo-sheet img { width: 100%; border: 5px solid #f4e6c2; margin: 5px 0 14px; box-shadow: 0 2px #b39a69; } .photo-sheet .action-button { margin: 0 auto; font-size: 14px; } .toast { position: fixed; left: 50%; bottom: calc(135px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); background: #735f41ee; color: #fbebc8; box-shadow: 0 3px #51493144; border: 1px solid #ad9367; border-radius: 4px; padding: 10px 16px; white-space: nowrap; max-width: 93vw; z-index: 40; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .feedback { position: absolute; pointer-events: none; inset: 0; z-index: 4; } .loading, .error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; background: #e6d8b8; z-index: 20; font-size: 13px; color: #968154; letter-spacing: 2px; } .loading-pot { width: 42px; height: 49px; border-radius: 8px 8px 17px 17px; border: 3px solid #a58f64; background: #d3bc8d; animation: potBreathe 1.8s ease-in-out infinite; } .error { text-align: center; padding: 25px; } .error p { font-size: 13px; line-height: 1.8; } .error button { padding: 10px 20px; background: #899b6c; color: #f7e8c8; border: 2px solid #aab98c; border-radius: 4px; } .coin-celebrate .coin-pill { animation: coinPop 0.45s ease-out; } @keyframes worldPulse { 50% { filter: brightness(1.13); box-shadow: 0 0 0 5px #f3db9e22; } } @keyframes receiptIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes potBreathe { 50% { transform: scale(1.08, 0.94); } } @keyframes coinPop { 50% { transform: scale(1.2) rotate(-4deg); } } @media (max-width: 390px) { .hud { left: 14px; right: 14px; top: 17px; } .phase-chip { padding: 7px 12px; min-width: 110px; } #phase-label { font-size: 17px; } .coin-pill { min-width: 70px; } .shop-controls { left: 15px; right: 15px; } .shop-dock { gap: 6px; } .dock-art { width: 51px; height: 51px; } .open-sign { width: 106px; min-height: 71px; } .open-sign b { font-size: 15px; } .shop-dock:before { right: 117px; } .bottom-ui { left: 18px; right: 18px; } .palette { gap: 10px; } .game[data-stage='glaze'] .tools { gap: 10px; } .customer-panel { left: 14px; right: 14px; padding: 18px 12px 12px; } .deal-copy p { font-size: 14px; } .deal-copy small { font-size: 8px; } .customer-portrait { width: 51px; height: 58px; } .paper-button { padding: 9px 12px; } .shop-whisper { font-size: 9px; } } @media (max-height: 730px) { .shop-controls { bottom: 18px; } .shop-whisper { margin-bottom: 12px; } .bottom-ui { bottom: 18px; } .bottom-hint { margin: 6px 0 9px; } .tool-circle { height: 39px; width: 39px; } .tools { min-height: 54px; } .palette { margin-bottom: 0; padding-top: 5px; padding-bottom: 10px; } .action-button { height: 44px; } .customer-panel { bottom: 18px; } .deal-top { padding-top: 0; } .offer-row { margin: 0 0 5px; } .offer-row strong { font-size: 30px; } .hud { top: 13px; } .sheet { max-height: 80dvh; } } @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } } .glaze-tool:first-child { margin-left: auto; } .glaze-tool:last-child { margin-right: auto; } @media (max-width: 360px) { .game[data-stage='glaze'] .tools { gap: 7px; } .game[data-stage='glaze'] .tool-circle { width: 38px; height: 38px; } .game[data-stage='glaze'] .tool { min-width: 41px; font-size: 9px; } .game[data-stage='glaze'] .tool[data-tool='size'], .game[data-stage='glaze'] .tool[data-tool='undo'] { min-width: 25px; } .phase-chip { min-width: 104px; padding: 7px 9px; } .dock-art { width: 47px; height: 47px; } } /* The shop HUD is a few objects hanging over the world: a sign, tools and paper tags. */ .game[data-stage='shop'] .phase-chip { transform-origin: 50% -20px; animation: shopSignSway 1.2s ease-in-out 1; } .game[data-stage='shop'] .coin-pill { transform: rotate(1deg); } .phase-chip { border-radius: 5px 3px 7px 3px; border-width: 3px 4px 4px; box-shadow: 0 3px 0 #705433, inset 1px 1px 0 #d3b788, inset -1px -2px 0 #684d32, 1px 5px 7px #493c2320; } .round-button, .coin-pill { background-image: linear-gradient(145deg, #fff8de3b, transparent 55%); } .world-spot .ico { width: 19px; height: 19px; stroke-width: 1.8; } .world-spot:after { content: ''; position: absolute; inset: -7px; border: 1px solid #ead09073; border-radius: 50%; animation: hotspotRipple 3s ease-out infinite; pointer-events: none; } .shelf-tag { transition: filter 0.15s, scale 0.15s; transform-origin: 50% -5px; } .shelf-tag:active { scale: 0.94; } .view-reset { top: calc(97px + env(safe-area-inset-top)); right: 17px; width: 38px; height: 38px; display: grid; place-items: center; background: #eee0b8e6; color: #867047; border: 2px solid #bba171; border-radius: 12px 10px 13px 10px; box-shadow: 0 3px #997c52, inset 0 0 0 2px #fff0ce8c; opacity: 0.86; } .view-reset svg { width: 23px; height: 23px; stroke-width: 1.65; } .view-reset:active { opacity: 1; } .shop-dock .dock-art { transform-origin: 50% 85%; transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.3, 1.5), filter 0.2s; } .dock-tool:active { transform: none !important; } .dock-tool:active .dock-art { transform: translateY(3px) rotate(-7deg) scale(0.94); filter: drop-shadow(0 1px 0 #785b3966); } .open-sign { transform-origin: 50% 0; animation: openSignSettle 0.6s cubic-bezier(0.15, 0.7, 0.3, 1.2); } .open-sign .bell-art { transform-origin: 50% 10%; animation: bellHello 1s 0.25s ease-in-out; } .open-sign.is-open .bell-art { animation: bellHello 0.9s ease-in-out; } .customer-thought { animation: thoughtAppear 0.24s cubic-bezier(0.16, 0.8, 0.3, 1.25); transform-origin: 30% 100%; } .customer-panel { padding-top: 14px; background-image: radial-gradient(ellipse at 20% 30%, #fff4dc, #eddbb3); animation: dialogueAppear 0.3s cubic-bezier(0.17, 0.8, 0.3, 1.15); transform-origin: 50% 100%; isolation: isolate; } .customer-panel:before { content: ''; position: absolute; inset: 3px; border: 1px dashed #b89a6452; border-radius: 2px 8px 2px 5px; pointer-events: none; z-index: -1; } .customer-name { left: 112px; top: -21px; padding: 5px 11px; gap: 7px; max-width: calc(100% - 120px); z-index: 2; white-space: nowrap; } .customer-name small { font-size: 8px; letter-spacing: 0; } .patience { top: 8px; right: 11px; gap: 3px; } .patience .heart { width: 13px; height: 13px; } .deal-top { gap: 8px; min-height: 88px; align-items: center; } .customer-portrait { width: 104px; height: 110px; margin: -35px 0 -6px -7px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; position: relative; pointer-events: none; transform-origin: 50% 100%; animation: portraitEnter 0.4s cubic-bezier(0.18, 0.8, 0.3, 1.1); } .customer-portrait svg { width: 74px; height: 86px; margin: 21px 15px 0; background: #e4d4ac; border: 2px solid #b5996b; border-radius: 40% 40% 5px 5px; } .painted-portrait { display: block; width: 100%; height: 100%; background-image: url('./assets/ui/portraits-atlas.png'); background-size: 200% 200%; background-repeat: no-repeat; filter: drop-shadow(1px 2px 0 #7f604c20); transform-origin: 50% 95%; animation: portraitBreathe 5s ease-in-out 1s infinite; } .portrait-florist { background-position: 0 0; } .portrait-cafe { background-position: 100% 0; } .portrait-collector { background-position: 0 100%; } .portrait-student { background-position: 100% 100%; } .deal-copy { flex: 1; align-self: stretch; padding-top: 20px; padding-bottom: 4px; } .deal-copy p { font-size: 15px; line-height: 1.5; text-wrap: pretty; } .deal-copy small { margin-top: 5px; line-height: 1.55; } .offer-row { margin-top: -3px; margin-bottom: 9px; } .offer-row strong { display: inline-block; transform-origin: 50% 80%; font-variant-numeric: tabular-nums; } .offer-row.offer-pop strong, #offer-price.offer-pop { animation: offerBounce 0.38s cubic-bezier(0.18, 0.8, 0.3, 1.2); } .deal-actions { gap: 7px; } .deal-actions .paper-button, .counter-controls .little-primary { min-height: 41px; } .paper-button, .little-primary { border-radius: 5px 3px 6px 3px; background-image: linear-gradient(120deg, #fff1bc2b, transparent 70%); transition: transform 0.12s, filter 0.12s, box-shadow 0.12s; } .paper-button:active:not(:disabled), .little-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 #96764b, inset 0 0 0 1px #f7e4b9; } .paper-button.primary:active:not(:disabled), .little-primary:active:not(:disabled) { box-shadow: 0 0 #5d7550, inset 0 0 0 1px #647e56; } .sale-receipt .receipt-stamp { animation: stampDown 0.25s 0.15s both cubic-bezier(0.18, 0.8, 0.3, 1.2); } .sale-receipt:after { content: ''; position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; background: #be9656; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z'/%3E%3C/svg%3E") center/contain no-repeat; animation: receiptTwinkle 1.7s ease-in-out infinite; } .sheet[open] { animation: sheetUnfold 0.22s cubic-bezier(0.17, 0.8, 0.3, 1.1); } .sheet::backdrop { animation: backdropAppear 0.2s ease-out; } .tool.active .tool-circle { animation: toolChosen 0.24s cubic-bezier(0.17, 0.8, 0.3, 1.1); } .glaze-tool.active .glaze-dish { animation: toolChosen 0.24s cubic-bezier(0.17, 0.8, 0.3, 1.1); } .layout-controls { position: absolute; left: 18px; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: dialogueAppear 0.25s ease-out; } .layout-controls > * { pointer-events: auto; } .layout-nameplate { max-width: 100%; padding: 6px 15px; border: 2px solid #be9e69; border-radius: 3px 5px 2px 4px; background: #f3e2bded; box-shadow: 0 3px #8d704842; transform: rotate(-1deg); color: #82683f; font-size: 11px; font-weight: 700; text-align: center; } .layout-nameplate:before, .layout-nameplate:after { content: ''; display: inline-block; width: 3px; height: 3px; background: #b59964; border-radius: 50%; vertical-align: middle; } .layout-nameplate:before { margin-right: 9px; } .layout-nameplate:after { margin-left: 9px; } .layout-actions { display: flex; align-items: center; gap: 9px; justify-content: center; } .layout-actions button { min-height: 43px; font-size: 13px; } .layout-actions .paper-button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; } .layout-actions svg { width: 18px; height: 18px; stroke-width: 1.8; } .layout-secondary { background: #f0dfb3ed; border: 2px solid #bfa373; border-radius: 50%; box-shadow: 0 3px #9f8152; color: #8a724e; width: 45px; height: 45px; font-size: 11px !important; transform: rotate(-4deg); } .layout-hint { font-size: 9px; color: #816b48; text-shadow: 0 1px #ffefca; letter-spacing: 1px; pointer-events: none; } .decor-workshop { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 13px; } #arrange-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 8px 13px; color: #f8edcf; background-color: #8b9b78; border-color: #aebd92; box-shadow: 0 3px #657952, inset 0 0 0 1px #6d815b; letter-spacing: 2px; } #arrange-button svg { width: 23px; height: 23px; stroke-width: 1.6; } .expansion-ticket { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 6px; background: #e4cea164; border: 1px dashed #b59962; border-radius: 4px 7px 3px 5px; text-align: left; } .expansion-art { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; color: #aa8c54; } .expansion-art svg { width: 35px; height: 35px; stroke-width: 1.5; } .expansion-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .expansion-copy b { font-size: 12px; } .expansion-copy small { font-size: 9px; color: #a08759; line-height: 1.4; } .expansion-ticket .decor-price { font-size: 11px; padding: 7px; flex-shrink: 0; } .expansion-ticket:disabled { opacity: 0.68; } .decor-item { min-height: 64px; } @keyframes shopSignSway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(0.7deg); } } @keyframes hotspotRipple { 0%, 38% { scale: 0.7; opacity: 0; } 48% { opacity: 0.8; } 100% { scale: 1.35; opacity: 0; } } @keyframes openSignSettle { 0% { transform: translateY(12px) rotate(-7deg); opacity: 0; } 70% { transform: translateY(0) rotate(4deg); } 100% { transform: rotate(2deg); opacity: 1; } } @keyframes bellHello { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } } @keyframes thoughtAppear { from { opacity: 0; scale: 0.7; translate: 0 8px; } to { opacity: 1; scale: 1; translate: 0 0; } } @keyframes dialogueAppear { from { opacity: 0; translate: 0 18px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes portraitEnter { from { opacity: 0; transform: translate(-7px, 8px) rotate(-3deg); } to { opacity: 1; transform: translate(0, 0) rotate(0); } } @keyframes portraitBreathe { 0%, 100% { transform: rotate(-0.3deg) scaleY(1); } 50% { transform: rotate(0.3deg) scaleY(1.012); } } @keyframes offerBounce { 0% { transform: scale(0.84); color: #be9555; } 60% { transform: scale(1.16); } 100% { transform: scale(1); color: #8c6738; } } @keyframes stampDown { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } } @keyframes receiptTwinkle { 50% { scale: 1.3; opacity: 0.5; } } @keyframes sheetUnfold { from { opacity: 0; translate: 0 12px; scale: 0.96; rotate: -0.7deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } } @keyframes backdropAppear { from { opacity: 0; } to { opacity: 1; } } @keyframes toolChosen { 0% { transform: scale(0.9); } 65% { transform: scale(1.07); } 100% { transform: scale(1); } } @media (hover: hover) { .dock-tool:hover .dock-art { transform: translateY(-4px) rotate(-3deg); } .shelf-tag:hover { filter: brightness(1.06); scale: 1.04; } .paper-button:hover:not(:disabled), .view-reset:hover, #arrange-button:hover { filter: brightness(1.05); } } @media (max-width: 390px) { .view-reset { right: 14px; top: calc(88px + env(safe-area-inset-top)); width: 36px; height: 36px; } .customer-panel { padding: 14px 12px 12px; } .customer-portrait { width: 94px; height: 102px; margin-left: -8px; margin-top: -31px; } .customer-name { left: 96px; max-width: calc(100% - 105px); font-size: 14px; padding: 5px 9px; gap: 5px; } .deal-top { gap: 6px; min-height: 82px; } .deal-copy { padding-top: 19px; } .deal-copy p { font-size: 14px; } .deal-copy small { font-size: 8px; } .deal-actions .paper-button { padding: 8px 11px; } .offer-row { margin-top: -2px; } .layout-controls { left: 14px; right: 14px; } .layout-actions { gap: 7px; } .layout-actions .paper-button { padding: 9px 11px; } .expansion-ticket { gap: 5px; } .expansion-art { width: 33px; } .expansion-copy small { font-size: 8px; } } @media (max-width: 340px) { .customer-name { left: 84px; max-width: calc(100% - 90px); font-size: 13px; padding: 5px 8px; } .customer-name small { font-size: 7px; } .customer-portrait { width: 82px; height: 94px; margin-top: -25px; } .deal-top { min-height: 80px; } .deal-copy p { font-size: 13px; } .deal-copy small { font-size: 8px; line-height: 1.4; } .offer-row strong { font-size: 29px; } .deal-actions { gap: 5px; } .deal-actions .paper-button { padding: 8px 10px; font-size: 12px; } .text-choice { font-size: 9px; padding: 10px 3px; } .counter-controls { gap: 5px; } .counter-controls input { width: 65px; } .counter-controls .little-primary { font-size: 11px; padding: 8px; } .layout-nameplate { font-size: 10px; padding: 6px 9px; } .layout-actions .paper-button { padding: 9px 10px; font-size: 12px; } .layout-actions { gap: 6px; } .sheet { padding-left: 15px; padding-right: 15px; } .expansion-copy small { max-width: 114px; } } @media (max-height: 650px) { .customer-panel { bottom: calc(13px + env(safe-area-inset-bottom)); padding-top: 13px; padding-bottom: 10px; } .customer-portrait { height: 94px; width: 90px; margin-top: -28px; } .deal-top { min-height: 75px; } .deal-copy { padding-top: 16px; } .offer-row { margin-top: -1px; margin-bottom: 6px; } .offer-row strong { font-size: 29px; } .deal-actions .paper-button, .counter-controls .little-primary { min-height: 38px; } .layout-controls { bottom: calc(12px + env(safe-area-inset-bottom)); gap: 9px; } .layout-hint { font-size: 8px; } .shop-controls { bottom: calc(16px + env(safe-area-inset-bottom)); } .decor-sheet { max-height: 76dvh; } .decor-item { min-height: 58px; } .decor-art { width: 44px; height: 44px; } .decor-workshop { margin-bottom: 10px; gap: 8px; } } @media (max-width: 340px) and (max-height: 650px) { .customer-portrait { width: 82px; height: 94px; } .customer-name { left: 84px; } } @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } } /* Quiet shop markers: their hit areas are larger than the paper hanging below a pot. */ .shelf-tag { min-width: 48px; max-width: 68px; min-height: 40px; padding: 12px 5px 7px; background: none; border: 0; border-radius: 0; box-shadow: none; transform: translate(-50%, 0) !important; line-height: 1; opacity: 0.92; color: #76583a; } .shelf-tag:before { left: 50%; top: 5px; height: 10px; width: 1px; background: #8f765a8f; box-shadow: 1px 0 #f8ebcc52; } .shelf-tag small { display: none; } .shelf-tag b { position: relative; display: block; width: max-content; min-width: 30px; max-width: 58px; margin: auto; padding: 3px 6px 3px 7px; border: 1px solid #c1a372; border-radius: 3px 5px 4px 2px; background: linear-gradient(155deg, #fff4d9, #e9d5ad); box-shadow: 0 1px 1px #6c51373d, inset 0 1px #fff9e4; transform: rotate(-3deg); font-size: 10px; line-height: 1.15; white-space: nowrap; letter-spacing: -0.25px; } .shelf-tag b:before { content: ''; position: absolute; left: 50%; top: 1px; width: 2px; height: 2px; background: #ba9b64; border-radius: 50%; } .shelf-tag:hover, .shelf-tag:focus-visible { opacity: 1; z-index: 5; filter: brightness(1.06); scale: 1; } .shelf-tag:active { scale: 0.96; } .empty-slot { background: none; opacity: 0; pointer-events: none !important; } #work-hotspot { background: none; color: transparent; border: 0; box-shadow: none; animation: none; pointer-events: none; } #work-hotspot:before, #work-hotspot:after { display: none; } /* Four keepsakes in a wooden tool box, with the shop bell as the last tool. */ .shop-controls { left: 18px; right: 18px; bottom: calc(23px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; } .shop-whisper { max-width: 290px; margin-bottom: 15px; font-size: 9px; letter-spacing: 0.4px; line-height: 1.5; color: #89795a; text-shadow: 0 1px #fff3d0a6; } .shop-dock { width: 100%; max-width: 366px; min-height: 89px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 0 11px 10px; isolation: isolate; } .shop-dock:before { inset: auto 0 0; height: 73px; border: 2px solid #bb996a; border-top-color: #ddc093; border-bottom: 4px solid #85603e; border-radius: 19px 17px 21px 18px; background: radial-gradient(ellipse at 15% 8%, #fff1c245, transparent 45%), repeating-linear-gradient(2deg, #aa81551c 0 1px, transparent 1px 7px), linear-gradient(#d8ba89 0%, #c8a474 11%, #bb915f 12%, #c7a777 55%, #c5a071 91%, #aa8154 92%); box-shadow: 0 4px 0 #765a3c, 0 9px 11px #66513720, inset 0 0 0 2px #ead2a260; z-index: -1; } .shop-dock:after { content: ''; position: absolute; bottom: 10px; left: 7px; right: 7px; height: 43px; border-left: 2px solid #f1d8a66b; border-right: 2px solid #926b4370; border-radius: 7px 8px 12px 12px; z-index: -1; pointer-events: none; } .shop-dock .dock-tool { flex: 1; min-width: 48px; max-width: 81px; padding: 0; gap: 5px; align-self: flex-end; } .shop-dock .dock-art { position: relative; display: grid; place-items: center; width: 54px; height: 54px; filter: drop-shadow(0 4px 0 #8a663a45); isolation: isolate; } .shop-dock .dock-art:before { content: ''; position: absolute; inset: 0; border: 2px solid #d4bc90; border-top-color: #fff0c9; border-bottom-color: #b39769; border-radius: 46% 50% 43% 48%; background: radial-gradient(ellipse at 32% 16%, #fffcdf, transparent 63%), linear-gradient(145deg, #e9d9b5, #d9c397); box-shadow: 0 2px 0 #8f734c, inset 0 0 0 3px #f9ebca80, inset 0 -4px 7px #b2915a20; z-index: -1; } .shop-dock .dock-art:after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 3px; border-radius: 50%; background: #91714b1f; z-index: -1; } .shop-dock .dock-art svg { position: relative; width: 40px; height: 40px; stroke: #80623e; stroke-width: 2; filter: drop-shadow(0 1px 0 #fff1d980); } .shop-dock .dock-tool:first-child .dock-art:before { background: radial-gradient(ellipse at 30% 16%, #edf2d8, transparent 63%), linear-gradient(145deg, #c8d2af, #afbd93); border-color: #d9e0bc #afbc90 #93a574 #cad4a8; box-shadow: 0 2px 0 #76875c, inset 0 0 0 3px #f0f3d84d, inset 0 -4px 7px #63784324; } .shop-dock .dock-tool b { font-family: 'Yuanti SC', 'Hiragino Maru Gothic ProN', 'PingFang SC', sans-serif; font-size: 11px; line-height: 15px; letter-spacing: 1px; color: #674d31; font-weight: 750; text-shadow: 0 1px #eed6aa; } .shop-dock .open-sign { flex: 1; align-self: flex-end; margin: 0 0 0 3px; width: auto; max-width: 84px; min-width: 64px; min-height: 74px; padding: 0; gap: 5px; background: none; border: 0; border-radius: 0; box-shadow: none; color: #624a2e; text-shadow: none; transform: none; animation: none; } .shop-dock .open-sign:before, .shop-dock .open-sign:after { display: none; } .shop-dock .bell-art { position: relative; display: grid; place-items: center; width: 60px; height: 59px; margin: 0; filter: drop-shadow(0 4px 0 #80623b52); isolation: isolate; transform-origin: 50% 75%; } .shop-dock .bell-art:before { content: ''; position: absolute; inset: 0; border-radius: 49% 45% 47% 43%; border: 2px solid #a2b491; border-top-color: #c6d1af; border-bottom-color: #536f4d; background: radial-gradient(ellipse at 30% 8%, #c5d1aa66, transparent 64%), linear-gradient(145deg, #869b70, #647e57); box-shadow: 0 2px #445f40, inset 0 0 0 3px #aac29a55, inset 0 -5px 8px #3e56322b; z-index: -1; } .shop-dock .bell-art svg { width: 47px; height: 47px; filter: drop-shadow(0 2px 1px #39502d44); stroke: #8b692f; stroke-width: 2; } .shop-dock .open-sign b { font-family: 'Yuanti SC', 'PingFang SC', sans-serif; font-size: 11px; line-height: 15px; letter-spacing: 0.5px; font-weight: 750; color: #644b2e; text-shadow: 0 1px #efd6aa; white-space: nowrap; } .shop-dock .open-sign.is-open { background: none; border: 0; box-shadow: none; } .shop-dock .open-sign.is-open .bell-art:before { border-color: #efcf91 #d6b16e #ac7e43 #e4c182; background: radial-gradient(ellipse at 30% 8%, #fff2bd8a, transparent 64%), linear-gradient(145deg, #e3be79, #c69950); box-shadow: 0 2px #99723a, inset 0 0 0 3px #f5d69880, inset 0 -5px 8px #9d72312b; } .shop-dock .open-sign.is-open .bell-art svg { filter: drop-shadow(0 2px 1px #74522b50); } .shop-dock .open-sign:active:not(:disabled) { transform: none; } .shop-dock .open-sign:active .bell-art { transform: translateY(3px) rotate(-5deg) scale(0.95); filter: drop-shadow(0 1px #80623b52); } .shop-dock .dock-tool:active .dock-art { transform: translateY(3px) rotate(-4deg) scale(0.94); filter: drop-shadow(0 1px #785b3955); } .view-reset { width: 33px; height: 33px; right: 18px; top: calc(96px + env(safe-area-inset-top)); border-radius: 45% 47% 43% 47%; border: 2px solid #d1bb8c; border-top-color: #f4e3bb; box-shadow: 0 2px #987b4f, inset 0 0 0 2px #fff0cc7a; background: radial-gradient(ellipse at 30% 20%, #fff1d0, #e2cca0); color: #7f6741; opacity: 0.9; } .view-reset svg { width: 20px; height: 20px; stroke-width: 1.8; transition: transform 0.15s ease; } .view-reset:active svg { transform: rotate(-12deg) scale(0.9); } .view-reset.is-popped svg { animation: view-reset-pop 0.3s ease; } @keyframes view-reset-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } #game[data-editing='true'] .view-reset { opacity: 0.9; } @media (hover: hover) { .shop-dock .open-sign:hover .bell-art { transform: translateY(-3px) rotate(3deg); } .shop-dock .dock-tool:hover .dock-art { transform: translateY(-3px) rotate(-2deg); } } @media (max-width: 360px) { .shop-controls { left: 13px; right: 13px; } .shop-dock { gap: 3px; padding-left: 7px; padding-right: 7px; min-height: 83px; } .shop-dock:before { height: 70px; } .shop-dock .dock-art { width: 48px; height: 48px; } .shop-dock .dock-art svg { width: 37px; height: 37px; } .shop-dock .bell-art { width: 53px; height: 53px; } .shop-dock .bell-art svg { width: 43px; height: 43px; } .shop-dock .open-sign { min-width: 64px; min-height: 71px; margin-left: 0; } .shop-dock .dock-tool b, .shop-dock .open-sign b { font-size: 10px; } .shop-whisper { font-size: 8px; max-width: 240px; margin-bottom: 12px; } .view-reset { right: 14px; top: calc(87px + env(safe-area-inset-top)); } } @media (max-height: 650px) { .shop-controls { bottom: calc(15px + env(safe-area-inset-bottom)); } .shop-dock { min-height: 80px; } .shop-whisper { margin-bottom: 10px; } .view-reset { top: calc(85px + env(safe-area-inset-top)); } } @media (prefers-reduced-motion: reduce) { .shop-dock .bell-art { animation: none !important; transition: none !important; } } .customer-portrait .model-portrait { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px #68564022); } /* Game feedback: keep the middle of the scene clear. */ .work-tray{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;background:linear-gradient(#e5c895,#d4b27e);border:2px solid #bd9963;border-top:3px solid #f3dfb5;border-radius:19px 19px 13px 13px;box-shadow:0 5px 0 #a78658,0 8px 18px #6e573323;padding:8px 7px 6px;width:100%} .work-tray .tools{margin:0!important;gap:3px;width:100%;justify-content:space-evenly}.work-tray .palette{width:100%;margin:0;padding:2px 5px 4px}.work-tray .stamp-tray{margin:0}.work-tray .tool-circle{box-shadow:0 2px 0 #a58550;background:#f8e9c9}.work-tray .tool{min-height:48px}.work-tray .tool.active .tool-circle{background:#bed0a8;border-color:#7f9765}.work-tray .glaze-tool{flex-shrink:0;min-width:37px;min-height:41px}.work-tray .glaze-dish{border-radius:9px 9px 14px 14px;border-top:5px solid #f5e6c5} .glaze-meter{position:absolute;top:-1px;left:14px;right:14px;height:3px;border-radius:9px;overflow:hidden;background:#a68b5a44;pointer-events:none}.glaze-meter:after{content:'';display:block;width:var(--fill,0%);height:100%;background:#7c986a;transition:width .15s} .kiln-display{width:206px;max-width:80%;margin:0 auto 8px;padding:10px 13px 9px;background:linear-gradient(#f5e9cf,#eddbb6);border:2px solid #bba06d;box-shadow:0 4px 0 #91754755;border-radius:100px 100px 16px 16px;--heat:.18} .kiln-dial{height:94px;position:relative;overflow:hidden}.dial-arc{position:absolute;inset:0;border:12px solid transparent;border-radius:100px 100px 0 0;background:conic-gradient(from 270deg at 50% 100%,#d1b88b 0deg 99deg,#91ac7b 99deg 144deg,#d8b578 144deg 162deg,#cb856c 162deg 180deg,transparent 180deg) border-box;mask:radial-gradient(ellipse 79px 83px at 50% 100%,transparent 82%,#000 84%)} #heat-pointer{position:absolute;top:auto;bottom:2px;left:50%;width:3px;height:75px;background:#8a633e;border:0;border-radius:4px;box-shadow:none;transform-origin:50% 100%;transform:translateX(-50%) rotate(calc(var(--heat)*180deg - 90deg));z-index:1} .kiln-caption{position:absolute;inset:auto 0 2px;z-index:2;display:flex;flex-direction:column;gap:1px;align-items:center;padding:0;background:none}.kiln-caption b{font:700 26px Georgia,serif;padding:2px 8px;background:#f2e3c4;border-radius:10px}.kiln-caption span:last-child{font-size:11px;margin:0;color:#806b46;background:#f2e3c4;padding:1px 6px;border-radius:4px}.kiln-progress{height:5px;margin-top:8px}.kiln-display[data-state=good]{border-color:#8da56f}.kiln-display[data-state=hot]{border-color:#be7258}.kiln-display[data-state=done]{border-color:#b89a53} .kiln-note{position:absolute;left:50%;top:19%;transform:translateX(-50%) rotate(-3deg);z-index:5;background:#fcf0d2;box-shadow:0 4px 15px #7d633926;padding:11px 24px;border-left:4px solid #bd8e62;border-radius:3px;text-align:center;pointer-events:none}.kiln-note strong{display:block;letter-spacing:4px;color:#b58e44;font-size:22px}.kiln-note span{font-family:'Songti SC',serif;font-size:17px;color:#7c6543} .shop-bell{position:absolute;top:108px;right:17px;z-index:7;display:flex;align-items:center;gap:5px;background:#fbefce;border:2px solid #b89a61;border-radius:16px 16px 4px 16px;box-shadow:0 3px #92714433;padding:8px 10px;min-height:42px;font-size:11px;color:#79603f}.shop-bell .ico{width:21px;height:21px}.ring{animation:bellRing .6s ease-out}.rejected{animation:rejected .35s ease-out}.popped{animation:quietPop .4s ease-out}.coin-flight{position:absolute;width:24px;height:24px;z-index:20;pointer-events:none}.coin-flight svg{width:100%;height:100%}#feedback{z-index:10;pointer-events:none} @keyframes bellRing{20%{rotate:-10deg}45%{rotate:8deg}65%{rotate:-5deg}85%{rotate:3deg}} @keyframes rejected{25%{translate:-4px}50%{translate:4px}75%{translate:-2px}} @keyframes quietPop{0%{scale:.9;opacity:.5}60%{scale:1.04}100%{scale:1;opacity:1}} .name-field{position:relative}.name-dice{position:absolute;right:0;top:-3px;font-size:11px;background:#ead9b4;border-radius:8px;padding:5px 10px;min-height:30px}.tag-quick{display:flex;gap:7px;margin:9px 0}.tag-quick button{flex:1;min-height:35px;border-radius:9px;background:#e9dbb7;box-shadow:0 2px #bda77c;font-size:12px}.tag-suitors{color:#7b9165;font-size:12px}.value-detail{font-size:11px;color:#918267;margin:9px 0}.value-detail summary{cursor:pointer}.value-detail small{display:block;margin-top:5px}.tag-sheet{padding-bottom:max(22px,env(safe-area-inset-bottom))}.counter-controls button{min-width:42px;min-height:42px} .ledger-sheet{background:repeating-linear-gradient(transparent 0 33px,#9a805414 33px 34px),#fbefd5;border-left:8px solid #c5a875}.ledger-sheet h2{font-size:27px;margin:8px 0 15px}.ledger-sheet .sheet-header>small{font-size:11px;color:#96856a}#ledger-lines>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px;border-bottom:1px dashed #b8a27966}#ledger-lines b{white-space:nowrap;font-family:Georgia,serif}#ledger-lines span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ledger-sum{display:flex;justify-content:space-between;align-items:center;margin:17px 0}.ledger-sum b{font:700 32px Georgia,serif;color:#8f7543}#ledger-goal{font-size:12px;color:#8d7b5b;margin-bottom:17px;line-height:1.7}.badge-piece{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px dashed #bba982;padding:20px 9px;border-radius:13px;opacity:.4}.badge-piece.owned{opacity:1;background:#f0e3bd;border-style:solid}.badge-piece .ico{width:32px;height:32px;color:#b79754}.badge-piece b{font-size:14px}.badge-piece small{font-size:10px;color:#958565} @media(max-height:640px){.work-tray{padding:4px;gap:1px}.work-tray .tool{min-height:42px}.work-tray .tool-circle{width:32px;height:32px}.work-tray .glaze-tool{min-height:34px}.work-tray .palette{padding-bottom:1px}.kiln-display{scale:.85;transform-origin:bottom;margin-top:-16px;margin-bottom:0}.shop-bell{top:85px}.kiln-note{top:17%;padding:7px 16px}.tag-sheet{padding-top:18px}.tag-sheet h2{margin-bottom:12px}} @media(prefers-reduced-motion:reduce){.ring,.rejected,.popped{animation:none!important}#heat-pointer,.glaze-meter:after{transition:none}} .sheet.closing{animation:paperClose .17s ease-in both}.sheet.closing::backdrop{animation:backdropClose .17s ease-in both} @keyframes paperClose{to{opacity:0;translate:0 14px;scale:.98}}@keyframes backdropClose{to{opacity:0}} @media(hover:hover){.decor-item:hover,.shop-item:hover,.gallery-piece:hover{filter:brightness(1.04);translate:0 -2px}}.decor-item:active,.shop-item:active,.gallery-piece:active{scale:.98} /* First visit: write the name directly onto a little wooden shop sign. */ .shop-naming{max-width:348px;padding:27px 22px 22px;text-align:center;overflow-y:auto} .shop-naming h2{font-size:21px;letter-spacing:2px;padding-bottom:12px;outline:none} .shop-naming h2:after{display:none} .naming-sign{position:relative;display:block;margin:29px 0 11px;padding:29px 12px 24px;background:repeating-linear-gradient(2deg,transparent 0 12px,#684d3020 13px 14px),linear-gradient(110deg,#aa8354,#bd9866 48%,#9e774c);border:4px solid #c6a271;border-bottom:5px solid #87643e;border-radius:8px 6px 10px 7px;box-shadow:inset 0 0 0 2px #e2c18a65,0 5px 0 #795c3b,0 9px 14px #66503625} .naming-sign:before,.naming-sign:after{content:'';position:absolute;top:-29px;width:3px;height:35px;background:#b2996b;border-left:1px solid #dfc493;box-shadow:1px 0 #80623c} .naming-sign:before{left:30px}.naming-sign:after{right:30px} .naming-nails:before,.naming-nails:after{content:'';position:absolute;top:10px;width:6px;height:6px;border-radius:50%;background:#e0c18e;box-shadow:0 1px 1px #705334} .naming-nails:before{left:28px}.naming-nails:after{right:28px} #shop-name-input{display:block;width:100%;min-height:46px;border:0;border-radius:3px;border-bottom:1px dashed #ead6ad80;background:transparent;padding:6px 0;color:#fff2cd;caret-color:#fff2cd;text-shadow:0 2px 1px #775932;font:700 26px 'Songti SC','STSong',serif;text-align:center;letter-spacing:1px} #shop-name-input::placeholder{color:#efdbb4;font-size:20px;text-shadow:none}#shop-name-input:focus{outline:1px solid #f7e6bd70;outline-offset:5px;border-color:#fff0c9!important} #shop-name-hint{font-size:11px;color:#9c845f;margin:15px 0 20px;letter-spacing:1px} #shop-name-error{font-size:12px;color:#a3604c;margin-bottom:12px}.shop-naming .action-button{width:100%;margin-top:0} #menu-shop-name{overflow-wrap:anywhere;padding-right:22px} .game[data-stage='shop'] #phase-label.long-shop-name{font-size:14px;letter-spacing:0;max-width:145px;white-space:nowrap;line-height:1.3} @media(max-width:360px){.shop-naming{padding:23px 17px 20px}#shop-name-input{font-size:23px}.game[data-stage='shop'] #phase-label.long-shop-name{max-width:118px;font-size:11px}} @media(max-height:450px){.shop-naming{padding-top:17px;padding-bottom:15px}.shop-naming h2{font-size:18px}.naming-sign{margin-top:18px;padding-top:17px;padding-bottom:12px}#shop-name-hint{margin:12px 0}.naming-sign:before,.naming-sign:after{height:24px;top:-18px}} /* 3.8: generated item art sits directly on the wooden toolbar. */ .shop-dock .dock-illustration { width: 66px; height: 66px; flex-shrink: 0; filter: drop-shadow(0 3px 1px #756d5138); transform-origin: 50% 85%; transition: transform .16s ease, filter .16s ease; } .shop-dock .dock-illustration:before, .shop-dock .dock-illustration:after { display: none; } .shop-dock .dock-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .shop-dock .open-sign.is-open .bell-art:after { content: ''; display: block; position: absolute; right: 5px; bottom: 7px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #f5e5be; background: #638157; box-shadow: 0 1px 2px #4e603e66; } @media (max-width: 360px) { .shop-dock .dock-illustration { width: 57px; height: 57px; } } @media (prefers-reduced-motion: reduce) { .shop-dock .dock-illustration { transition: none; } } .view-reset.is-close-view { display: flex; align-items: center; gap: 4px; width: auto; min-height: 36px; padding: 6px 10px; border-radius: 12px; opacity: 1; } .view-reset.is-close-view svg { width: 17px; height: 17px; transform: rotate(180deg); } #display-view-label { font-size: 11px; white-space: nowrap; } /* A compact tally inside the furnishing book, away from the play area. */ .decor-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;padding:12px 0 8px;border-bottom:1px solid #b89d6a55;color:#796b4e;font-size:11px} .decor-stats b{color:#607b62;font-size:14px;font-variant-numeric:tabular-nums} .decor-note{font-size:10px;color:#91815f;margin:7px 0 12px} .decor-copy{min-width:0}.decor-copy small{font-size:10px;line-height:1.5} .decor-item.equipped .decor-art{filter:drop-shadow(0 3px 2px #7a8c7022)} .decor-art{width:86px;height:86px;flex-shrink:0;background:radial-gradient(ellipse 35% 7% at 50% 83%,#8e795822,transparent 100%)} .decor-art canvas,.expansion-art canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab} .decor-art canvas:active,.expansion-art canvas:active{cursor:grabbing} .decor-item{gap:9px;min-height:100px}.decor-item .decor-price{padding:7px;flex-shrink:0}.decor-copy{flex:1} .expansion-art{width:56px;height:56px;flex-shrink:0} @media(max-width:350px){.decor-art{width:76px;height:80px}.decor-item{gap:7px}.decor-copy b{font-size:12px}.decor-copy small{font-size:10px}.decor-item .decor-price{font-size:11px;padding:6px}} /* Furniture editing keeps the room visible and the current action close to the thumb. */ #game[data-editing='true'] .hud, #game[data-editing='true'] #shop-view-reset {display:none} #layout-controls.layout-controls{inset:0;left:0;right:0;top:0;bottom:0;display:block;animation:none;pointer-events:none} .layout-topbar{position:absolute;top:calc(20px + env(safe-area-inset-top));left:18px;right:18px;display:flex;align-items:center;gap:7px;pointer-events:auto} .layout-mode{display:flex;align-items:center;gap:6px;margin-right:auto;padding:8px 10px;color:#725b3d;font-size:14px;font-weight:700;text-shadow:0 1px #fff7df} .layout-mode .ico{width:19px;height:19px} .layout-topbar button,.layout-bottom button{border:1px solid #b69a70;background:#f5e8ca;color:#715d40;box-shadow:0 3px 0 #ae9166,0 4px 8px #68523a18;transition:transform .12s,background .12s,opacity .12s;touch-action:manipulation} .layout-topbar button:active,.layout-bottom button:active{transform:translateY(2px);box-shadow:0 1px 0 #ae9166} .layout-topbar button:disabled,.layout-bottom button:disabled{opacity:.4;box-shadow:none;transform:none;cursor:default} .layout-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;min-height:44px;border-radius:14px;padding:11px} .layout-icon svg,.layout-option svg,.layout-finish svg,.layout-place svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .layout-finish{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 13px;height:44px;border-radius:14px;font-size:13px;font-weight:700} .layout-topbar .layout-finish,.layout-actions .layout-place{background:#819b78;border-color:#6d8763;color:#fff8e5;box-shadow:0 3px 0 #5c7656,0 4px 8px #68523a18} .layout-bottom{position:absolute;left:18px;right:18px;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none!important} .layout-options{display:flex;gap:8px;pointer-events:auto} .layout-option{height:38px;display:flex;align-items:center;gap:6px;border-radius:18px;padding:0 12px;font-size:11px;font-weight:700} .layout-option svg{width:17px;height:17px} .layout-option[aria-pressed='true']{background:#e1e6cd;border-color:#90a581;color:#607556} .layout-selection{width:100%;max-width:370px;box-sizing:border-box;padding:13px 14px 14px;background:#f5e8cdf7;border:2px solid #c0a171;border-radius:19px;box-shadow:0 4px 0 #ac8c61,0 8px 25px #63513928;pointer-events:auto;animation:dialogueAppear .18s ease-out} .layout-selection-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 1px 12px;color:#725b3f} .layout-selection-title b{font-size:14px;white-space:nowrap} #layout-validity{font-size:10px;color:#6c805b;text-align:right;line-height:1.5} .layout-selection[data-valid='false'] #layout-validity{color:#ab5c4d} .layout-selection[data-valid='false']{border-color:#c58c79} .layout-selection .layout-actions{display:flex;gap:9px;justify-content:stretch} .layout-actions .layout-place{height:46px;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:13px;font-size:14px;font-weight:700} .layout-actions .layout-icon{height:46px;width:46px;border-radius:13px} .layout-bottom .layout-hint{margin:0;letter-spacing:.2px;line-height:1.5;color:#796d53;font-size:10px;text-shadow:0 1px #fff3d9;pointer-events:none} @media(max-width:350px){.layout-topbar{left:12px;right:12px;gap:5px}.layout-mode{padding-left:3px;font-size:12px}.layout-bottom{left:12px;right:12px;bottom:16px;gap:9px}.layout-selection{padding:11px}.layout-selection .layout-actions{gap:7px}.layout-actions .layout-icon{width:44px}.layout-selection-title b{font-size:13px}.layout-finish{padding:0 9px}} @media(prefers-reduced-motion:reduce){.layout-selection{animation:none}.layout-topbar button,.layout-bottom button{transition:none}} .career-sheet{background:radial-gradient(ellipse at 15% 0,#fff8e4,transparent 60%),#f2e5c6;border-color:#ac9870;max-width:420px} .career-chapter{font-size:11px;letter-spacing:2px;color:#927e5e} .career-continuation{padding:14px 13px;border:1px solid #bdc5a5;border-radius:10px;background:#e9edd9;margin:0 0 16px} .career-continuation b{color:#65734f;font-size:14px;font-weight:600} .career-continuation p{color:#7a7256;font-size:12px;line-height:1.8;margin:9px 0} .career-continuation small{display:block;color:#7c8664;font-size:11px;line-height:1.8} .career-representative{padding:10px 12px;background:#fbf2df;border-left:3px solid #a6af8c;color:#756446;font-size:12px;line-height:1.8;margin:12px 0} .career-features{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .career-features .paper-button{flex:1;min-height:40px;padding:8px;font-size:12px;white-space:nowrap} .career-piece .career-piece-check{white-space:normal;line-height:1.7;text-align:center;color:#64734f;overflow-wrap:anywhere} .career-sheet h2{margin-top:8px;letter-spacing:2px;font-size:25px} .career-track{display:flex;justify-content:space-between;gap:5px;position:relative;margin:10px 0 22px} .career-track:before{content:'';position:absolute;left:12%;right:12%;top:7px;height:2px;background:#c9b99a} .career-track span{position:relative;font-size:10px;color:#a2947f;text-align:center;padding-top:24px;flex:1} .career-track span:before{content:'';position:absolute;top:0;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:#e4d8bd;border:2px solid #b3a17c;box-shadow:0 2px #a2947733} .career-track .reached{color:#60795a}.career-track .reached:before{background:#92a77b;border-color:#708562;box-shadow:inset 0 0 0 3px #e9e7bd} .career-goal{display:grid;grid-template-columns:1fr auto;gap:8px;margin:14px 0;font-size:12px}.career-goal b{font-family:Georgia,serif;color:#708462;font-size:15px}.career-goal progress{grid-column:1/-1;width:100%;height:6px;appearance:none;border:none;border-radius:4px;overflow:hidden;background:#dfd1b3}.career-goal progress::-webkit-progress-bar{background:#dfd1b3}.career-goal progress::-webkit-progress-value{background:#98ab81;border-radius:4px}.career-goal progress::-moz-progress-bar{background:#98ab81} .career-letter{position:relative;margin:18px 0;padding:18px 17px;background:#fffae9;border:1px solid #dac7a0;box-shadow:2px 4px 0 #bcaa7d33;transform:rotate(-1deg);animation:letter-arrive .4s ease-out}.career-letter>small{font-size:11px;color:#9b896c}.career-letter p{font-size:14px;line-height:1.9;margin:12px 0 2px}.letter-seal{float:right;display:grid;place-items:center;width:35px;height:35px;border:3px double #f6caba;border-radius:50%;background:#b97867;color:#fbe9c9;font-family:serif;box-shadow:0 2px 2px #82694633;transform:rotate(12deg)} .career-reward,.career-instruction{font-size:12px;line-height:1.8;margin:12px 0;color:#847253}.career-instruction:empty{display:none}.career-pieces{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 12px;margin:4px 0 10px;scroll-snap-type:x mandatory}.career-piece{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 112px;padding:10px 8px;border:2px solid #cfc19f;border-radius:9px;background:#efe5ca;scroll-snap-align:start;cursor:pointer;gap:6px}.career-piece.selected{border-color:#81956f;background:#e7ead1;box-shadow:0 2px 0 #8d9c72}.career-piece img{width:76px;height:76px;object-fit:contain}.career-piece input{accent-color:#7c9068}.career-piece span{max-width:100%;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.career-piece small{font-size:10px;color:#8e7b52}.career-sheet .action-button{width:100%;font-size:14px}.career-finance{font-size:11px;text-align:center;color:#96866b;margin-top:14px}.career-regulars{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}.career-regulars span{font-size:10px;border-radius:10px;padding:4px 8px;background:#e3e3c8;color:#728068} .phase-chip.has-letter{cursor:pointer}.phase-chip.has-letter small{color:#936542!important;animation:letter-hint 2s ease-in-out infinite}.ledger-feedback{border-top:1px dashed #b8a27966}.ledger-feedback p{font-size:12px;line-height:1.7;color:#887759;margin:12px 0}.ledger-sum b[data-positive='false']{color:#a86d5a}.ledger-career{width:100%;margin-bottom:10px;min-height:42px}.advance-sheet p{font-size:14px;line-height:1.8;margin:12px 0 20px}.advance-sheet .action-button{width:100%}.advance-sheet .text-choice{display:block;margin:12px auto 0} @keyframes letter-arrive{from{opacity:0;transform:translateY(10px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}} @keyframes letter-hint{50%{opacity:.58}} @media(prefers-reduced-motion:reduce){.career-letter,.phase-chip.has-letter small{animation:none}} #close-receipt { display: block; min-width: 100px; min-height: 44px; margin: 14px auto 0; } /* 3.15 — tools live in the wood tray; the clay remains the main interaction. */ .craft-row{display:flex;align-items:center;gap:7px;width:100%;justify-content:center} .craft-chip,.clay-select select,.part-controls select{background:#f4e5c7;border:1px solid #b89b6b;border-radius:8px;color:#705c3e;padding:5px 10px;min-height:36px;font:inherit;font-size:12px} .craft-chip[aria-pressed=true]{background:#bed0a8;border-color:#7c9366;color:#415637} .clay-select{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:#735e3e} .clay-select select{max-width:105px;padding:4px;font-size:12px} .craft-drawer{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;border-top:1px solid #b9976555;padding-top:6px} .part-choice{background:#f5e5c6;border:1px solid #bfa173;border-radius:9px;min-width:0;min-height:58px;padding:5px 2px;display:flex;align-items:center;flex-direction:column;gap:5px;color:#705b3b;font-size:11px} .part-choice[aria-pressed=true]{background:#ccdab8;border-color:#7c9366} .part-choice:disabled{opacity:.38} .clay-art{display:block;width:25px;height:25px;background:linear-gradient(125deg,#ebcba3,#c29464);box-shadow:inset -2px -2px 2px #a17c4f44} .clay-handle{background:none;border:5px solid #d2ad7c;border-radius:50%;width:20px;height:25px} .clay-spout{clip-path:polygon(4% 60%,35% 53%,75% 10%,97% 21%,74% 74%,7% 99%)} .clay-lid{height:13px;margin-top:12px;border-radius:70% 70% 14% 14%;position:relative} .clay-lid:before{content:'';position:absolute;top:-7px;left:8px;width:9px;height:9px;border-radius:50%;background:#d7b386} .clay-ball{border-radius:50%}.clay-coil{width:12px;border-radius:60% 20% 60% 25%;transform:rotate(30deg)}.clay-petal{border-radius:80% 15% 70% 35%;width:19px;transform:rotate(-25deg)} .pair-choice{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:28px;font-size:11px;color:#705b3b} .part-controls{width:100%;display:flex;flex-direction:column;gap:4px;padding:3px 0} .part-controls .craft-row{justify-content:space-between}.part-controls #part-selection{flex:1;min-width:0} .part-range,.ink-range{display:flex;align-items:center;gap:10px;width:100%;font-size:12px;color:#705b3b} .part-range input,.ink-range input{flex:1;min-width:0;accent-color:#81956c;min-height:30px} .part-range select{max-width:84px}.brush-settings{width:100%}.brush-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} .brush-choice{background:#f5e7cc;border:1px solid #c6a777;border-radius:8px;min-width:0;padding:3px 2px;color:#705b3b;font-size:11px} .brush-choice[aria-pressed=true]{background:#e3e8c9;border-color:#799366} .brush-choice canvas{display:block;width:100%;height:29px;object-fit:fill;pointer-events:none}.brush-choice span{display:block;margin-bottom:3px} .ink-range{padding:0 5px}.paint-extras{justify-content:flex-end;border-top:1px solid #b9976544;padding-top:2px}.paint-extras .craft-chip{border:0;background:transparent;min-height:27px;font-size:11px;padding:2px 8px} @media(pointer:coarse){.craft-chip,.clay-select select,.part-controls select{min-height:40px}.part-range input,.ink-range input{min-height:40px}.brush-choice{min-height:48px}.paint-extras .craft-chip{min-height:36px}} @media(max-height:650px){.craft-chip,.clay-select select,.part-controls select{min-height:30px;padding-top:3px;padding-bottom:3px}.part-choice{min-height:47px}.clay-art{scale:.8}.part-range input,.ink-range input{min-height:27px}.brush-choice canvas{height:21px}.brush-choice{min-height:40px}.work-tray{gap:3px}.paint-extras .craft-chip{min-height:27px}.pair-choice{min-height:25px}} /* Physical warehouse: a quiet shelf room with a compact packing-desk toolbar. */ .warehouse-entry{position:absolute;z-index:8;top:calc(98px + env(safe-area-inset-top));left:17px;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #af9b77;border-radius:8px;background:#f3e8ceeF;box-shadow:0 3px 0 #ad9670;color:#65735d;font-size:13px;min-height:38px} .warehouse-entry svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round} .warehouse-entry small{font-size:11px;color:#81745f} .warehouse-ui{position:absolute;z-index:8;bottom:calc(16px + env(safe-area-inset-bottom));left:18px;right:18px;pointer-events:none} .warehouse-ui button,.warehouse-ui select{pointer-events:auto;min-height:40px;border-radius:7px} .warehouse-toolbar{padding:12px;background:#f3e9d3;border:1px solid #b8a685;border-radius:12px;box-shadow:0 4px 0 #a78d66,0 8px 24px #75644822;pointer-events:auto} .warehouse-toolbar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:13px} #warehouse-expand{padding:7px 13px;background:#7f967d;color:#fff9e8;font-size:12px;box-shadow:0 2px #5f745e} .warehouse-navigation{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:7px} .warehouse-navigation button,.warehouse-navigation select{background:#e4d9bd;border:1px solid #c7b899;font-size:12px;padding:0 6px;color:#6e624d} .warehouse-hint{text-align:center;margin:0 0 12px;font-size:11px;line-height:1.7;color:#687360;text-shadow:0 1px 3px #fffaf1,0 0 6px #fffaf1} .warehouse-selection{position:relative;max-width:360px;margin:0 auto 12px;padding:15px;background:#fff6e5f5;border:1px solid #c5b38f;border-radius:10px;box-shadow:0 4px 18px #70654c22;pointer-events:auto} .warehouse-selection>b{display:block;padding-right:22px;font-family:'Songti SC',serif;font-size:19px;overflow-wrap:anywhere} .warehouse-selection>small{display:block;margin:6px 0 12px;font-size:11px;color:#93826b} .warehouse-dismiss{position:absolute;right:5px;top:4px;width:36px;background:transparent;font-size:23px} .warehouse-actions{display:flex;gap:7px} .warehouse-actions button{flex:1;background:#e9dec6;font-size:12px;padding:6px} .warehouse-actions button:last-child{flex:1.5;background:#80967b;color:#fff7e5} /* Keepsakes share the paper-and-clay colours of the work book. */ .badge-controls{margin:-4px 0 10px} .badge-overview{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#715b39;font-size:12px} .badge-overview b{font:700 22px Georgia,serif;color:#6e8055;white-space:nowrap} .badge-controls>p{margin:8px 0 13px;color:#827052;font-size:11px;line-height:1.6} .badge-controls progress,.badge-piece progress{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:9px;overflow:hidden;background:#dbcfb7;accent-color:#84916a} .badge-controls>progress{margin-top:10px;height:6px} .badge-controls progress::-webkit-progress-bar,.badge-piece progress::-webkit-progress-bar{background:#dbcfb7;border-radius:9px} .badge-controls progress::-webkit-progress-value,.badge-piece progress::-webkit-progress-value{background:#84916a;border-radius:9px} .badge-controls progress::-moz-progress-bar,.badge-piece progress::-moz-progress-bar{background:#84916a;border-radius:9px} .badge-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .badge-filters button{min-height:40px;padding:5px;border:1px solid #c9b691;border-radius:8px;background:#f5e8cc;color:#736142;font-size:12px} .badge-filters button.selected{background:#778866;border-color:#778866;color:#fff5dd} .badge-filters button:focus-visible{outline:2px solid #715934;outline-offset:2px} .badge-grid{gap:12px;align-items:stretch} .badge-section{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:6px;margin:11px 0 0;padding:5px 0 9px;border-bottom:1px solid #cdb991;color:#775e3b;font-size:12px;font-weight:500} .badge-section small{color:#887653;font:12px Georgia,serif;white-space:nowrap} .badge-piece{--badge-ink:#7c8970;--badge-paper:#e8ebdb;position:relative;align-items:stretch;min-width:0;padding:15px 11px 12px;gap:9px;border:1px dashed #c6b99d;border-radius:12px;background:#f7edda;opacity:1;text-align:center} .badge-piece[data-level=medium]{--badge-ink:#99714d;--badge-paper:#efe0c6} .badge-piece[data-level=hard]{--badge-ink:#87708b;--badge-paper:#e9dfeb} .badge-piece.owned{border-style:solid;border-color:#b9c09e;background:#f0eedb;box-shadow:0 2px 4px #70633d0a} .badge-medal{display:grid;place-items:center;align-self:center;width:47px;height:47px;border:1px solid var(--badge-ink);border-radius:50%;color:var(--badge-ink);background:var(--badge-paper);box-shadow:inset 0 0 0 4px #ffffff60} .badge-piece:not(.owned) .badge-medal{opacity:.7} .badge-piece.owned .badge-medal{box-shadow:inset 0 0 0 4px #ffffff80,0 2px 0 #bfb68f} .badge-piece .badge-medal .ico{width:25px;height:25px;color:inherit} .badge-piece h4{margin:0;color:#685534;font-size:13px;line-height:1.5;font-weight:600;overflow-wrap:anywhere} .badge-piece p{margin:0 0 3px;color:#806f52;font-size:11px;line-height:1.7;text-align:left;overflow-wrap:anywhere} .badge-piece progress{margin-top:auto;height:4px} .badge-piece .badge-status{color:#766547;font-size:11px;line-height:1.4} .badge-piece.owned .badge-status{color:#617749} @media(max-width:360px){.badge-grid{gap:9px}.badge-piece{padding:12px 9px}.badge-section{font-size:11px}.badge-piece h4{font-size:12px}} .book-warehouse-button{margin:0 0 14px;width:100%;font-size:13px} .warehouse-expansion{max-width:370px;text-align:center} .warehouse-expansion p{font-size:14px;line-height:1.9} .warehouse-expansion .warehouse-eyebrow{font-size:11px;color:#8e846d;margin-top:14px} .warehouse-expansion .sheet-body>small{display:block;margin:18px 0;font-size:12px;color:#8a7a60} .warehouse-expansion .action-button{width:100%;min-height:48px;font-size:15px} .warehouse-plan{display:flex;align-items:center;justify-content:center;gap:16px;margin:25px 0} .warehouse-plan span{padding:18px 25px;background:#e7dec6;border:2px solid #a9b49a;border-radius:8px;color:#6b8062;font:24px Georgia,serif} .warehouse-plan span:last-child{border-style:dashed;background:#e4ead5} .warehouse-plan i{font-style:normal;color:#8a9777} .game[data-warehouse='true'] #shop-view-reset{opacity:1} @media(max-width:360px){.warehouse-ui{left:12px;right:12px;bottom:calc(11px + env(safe-area-inset-bottom))}.warehouse-toolbar{padding:9px}.warehouse-entry{left:12px;padding:6px 9px}.warehouse-hint{font-size:10px;margin-bottom:8px}.warehouse-selection{padding:11px}.warehouse-selection>b{font-size:17px}} /* 3.15.1 — one steady dock, with settings floating above the work area. */ .bottom-ui{left:16px;right:16px;bottom:calc(13px + env(safe-area-inset-bottom))} .bottom-ui .work-tray{gap:2px;padding:5px 7px 6px;border-radius:17px;background:linear-gradient(#ecd6ac,#ddbf8f);box-shadow:0 3px 0 #ad8e5d,0 5px 15px #6e57331c} .work-context{display:flex;align-items:center;gap:5px;width:100%;min-height:36px;padding:0 3px} .work-chip{line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:4px 8px;border-radius:10px;background:transparent;color:#705d40;font-size:11px;white-space:nowrap} .work-chip:hover,.work-chip[aria-expanded=true]{background:#f8ebd0} .work-chip[data-panel=more]{margin-left:auto;font-size:19px;min-width:40px} .work-chip[data-panel=more] .chip-chevron{display:none} .chip-chevron{font:14px sans-serif;color:#948162;transform:rotate(180deg)} .work-chip[aria-expanded=true] .chip-chevron{transform:none} .current-glaze{width:19px;height:19px;background:var(--glaze);border:2px solid #fff1d4;border-radius:6px;box-shadow:0 1px 2px #745d4544} .work-actions{display:flex;align-items:center;gap:7px;width:100%;min-width:0} .work-actions .tools{flex:1;min-width:0;width:auto;min-height:52px;gap:1px;justify-content:space-around} .work-actions .tools:empty{display:none} .work-actions .tool{flex:1;min-width:0;min-height:52px;gap:3px;padding:2px 0;font-size:10px;line-height:1.2} .work-actions .tool-circle{width:32px;height:32px;border-radius:9px} .work-actions .tool-circle svg{width:21px;height:21px} .work-actions .tool[data-tool=undo] .tool-circle{width:32px;background:transparent;box-shadow:none} .bottom-ui #action-button{flex:0 0 70px;width:70px;height:50px;min-height:50px;max-width:none;margin:0 0 2px;padding:3px 4px;gap:1px;flex-direction:column;border-width:2px;border-radius:10px;font-size:12px;line-height:1.4;letter-spacing:0;box-shadow:0 3px 0 #647c52,inset 0 0 0 1px #bdc99880} .bottom-ui #action-text{white-space:pre-line} .bottom-ui #action-icon{display:none} .bottom-ui #bottom-hint{min-height:13px;line-height:1.3;margin:5px 0 0;font-size:10px;pointer-events:none} #game[data-stage=kiln] .bottom-hint:empty{display:none} .work-popover{position:absolute;bottom:calc(100% + 10px);left:0;right:0;max-height:calc(100vh - 235px);max-height:min(300px,calc(100dvh - 235px));overflow-y:auto;overscroll-behavior:contain;padding:5px 10px 10px;border:1px solid #b99f75;border-top:2px solid #fff2d8;border-radius:16px;background:#f6e8cdee;box-shadow:0 5px 20px #6e57332a;backdrop-filter:blur(12px);animation:work-panel-in .12s ease-out} .work-panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin-bottom:4px;padding-left:3px;color:#7d6747;font-size:11px} #close-work-panel{display:grid;place-items:center;width:40px;height:36px;padding:9px;border-radius:10px;background:transparent;color:#927951} #close-work-panel:hover{background:#e3cc9f66} #close-work-panel .ico{width:17px;height:17px} .work-popover .craft-drawer{border:0;padding:0;grid-template-columns:repeat(6,minmax(0,1fr))} .work-popover .part-choice{min-height:58px} .work-popover .clay-art{scale:1} .work-popover .pair-choice{min-height:36px} .work-popover .craft-chip,.work-popover select{min-height:40px} .work-popover .part-range input,.work-popover .ink-range input{min-height:40px} .work-popover .palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px 3px;overflow:visible;margin:0;padding:2px 0} .work-popover .glaze-tool{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:100%;min-width:0;min-height:50px;height:auto;padding:2px;border-radius:10px} .work-popover .glaze-tool.active{background:#dbe1c1} .work-popover .glaze-dish{width:30px;height:30px;border-width:3px;border-radius:9px} .work-popover .glaze-name{font-size:10px;color:#776446} .work-popover .glaze-tool.locked:after{right:2px;top:20px;bottom:auto} .work-popover .brush-choice{min-height:53px} .work-popover .brush-choice canvas{height:29px} .brush-widths{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:#705b3b} .brush-widths>span{padding:0 5px}.brush-widths button{flex:1} .work-popover .stamp-tray{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:7px;overflow:visible;max-width:none;margin:0;padding:2px} .work-popover .stamp-choice{width:44px;height:44px;flex:0 0 44px} .work-popover .paint-extras{justify-content:flex-start;border:0;padding:0;gap:8px;flex-wrap:wrap} .work-popover .paint-extras .craft-chip{min-height:44px;padding:5px 12px;background:#ead9b7;border:1px solid #c3aa80} .work-actions .kiln-display{flex:1;min-width:0;max-width:none;width:auto;margin:0;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;scale:1;transform:none} .work-actions .kiln-dial{height:29px;overflow:visible} .work-actions .kiln-caption{position:static;flex-direction:row;justify-content:space-between;gap:5px;height:29px} .work-actions .kiln-caption b{font-size:20px;background:none;padding:0;white-space:nowrap} .work-actions .kiln-caption span:last-child{font-size:10px;background:none;padding:0;text-align:right} .kiln-heat{position:relative;height:5px;margin:3px 0 0;border-radius:5px;background:linear-gradient(to right,#c9ad7b 0 55%,#8aa370 55% 80%,#d4af68 80% 90%,#c37e65 90%)} .work-actions #heat-pointer{position:absolute;top:-2px;bottom:auto;left:calc(3px + (100% - 6px)*var(--heat));width:3px;height:9px;background:#795c39;transform:none;transition:left .12s;box-shadow:0 0 0 1px #f6e7c8} .work-actions .kiln-progress{height:3px;margin-top:5px} .work-actions .kiln-display[data-state=good] .kiln-caption b{color:#59774c} .work-actions .kiln-display[data-state=hot] .kiln-caption b{color:#a7543e} #game[data-stage=kiln] .work-tray,#game[data-stage=inspect] .work-tray{padding:7px 9px} #game[data-stage=kiln] #action-button,#game[data-stage=inspect] #action-button{flex-basis:88px;width:88px} @media(max-width:380px){.bottom-ui{left:10px;right:10px}.bottom-ui .work-tray{padding-left:4px;padding-right:4px}.work-actions{gap:4px}.bottom-ui #action-button{flex-basis:60px;width:60px;font-size:11px}.work-popover{padding-left:8px;padding-right:8px}.work-popover .palette{grid-template-columns:repeat(6,minmax(0,1fr))}.work-popover .craft-drawer{grid-template-columns:repeat(3,minmax(0,1fr))}.work-context{gap:1px}.work-chip{padding-left:6px;padding-right:6px}} @media(pointer:coarse){.work-context,.work-chip{min-height:40px}#close-work-panel{height:40px}.work-panel-heading{min-height:40px}} @media(max-height:500px){.bottom-ui{bottom:calc(8px + env(safe-area-inset-bottom))}.work-popover{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}} @keyframes work-panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.work-popover{animation:none}.work-actions #heat-pointer{transition:none}} /* Keep the former narrow-screen glaze rules from expanding the shared dock. */ #work-tray .work-actions .tools{gap:1px} #work-tray .work-actions .tool{min-width:0;font-size:10px} #work-tray .work-actions .tool-circle{width:32px;height:32px} .work-popover .stamp-tray .brush-widths{flex:0 0 100%} /* Dialog chrome stays outside the scrollable content, including on short phones. */ .sheet{--sheet-inset:21px;padding:0;overflow:hidden} .sheet[open]{display:flex;flex-direction:column} .sheet-header{position:relative;flex:0 0 auto;min-width:0;margin:0;padding:19px 62px 15px var(--sheet-inset);border-bottom:1px solid #b798625c;text-align:left;z-index:2} .sheet .sheet-header h2{margin:0;padding:0;line-height:1.45;letter-spacing:1px;overflow-wrap:anywhere} .sheet .sheet-header h2:after{display:none} .sheet-header>.close{top:10px;right:10px;width:44px;height:44px;min-width:44px;min-height:44px} .sheet-header>small{display:block;margin:0 0 5px} .sheet-header .shop-balance{display:block;float:none;margin:4px 0 0;line-height:1.4} .sheet-body{flex:0 1 auto;min-height:0;min-width:0;padding:16px var(--sheet-inset) max(24px,env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b79968 transparent;scroll-padding-block:12px;-webkit-overflow-scrolling:touch} .tag-sheet{--sheet-inset:25px} .tag-sheet:before{display:none} .shop-naming{--sheet-inset:22px} .warehouse-expansion .sheet-header .warehouse-eyebrow{margin:0 0 5px;font-size:11px;line-height:1.5} @media(max-width:380px){.sheet{--sheet-inset:15px}.sheet-header{padding-top:16px;padding-bottom:13px}.sheet-body{padding-top:13px}} @media(max-height:450px){.sheet-header{padding-top:10px;padding-bottom:10px}.sheet .sheet-header h2{font-size:19px}.sheet-header>.close{top:6px}.sheet-body{padding-top:10px;padding-bottom:15px}}