/* Hallmark · genre: playful · macrostructure: full-screen interactive world · theme: Hum, toy-box variation
 * The scene owns the screen. Original illustrations, floating controls, no marketing frame.
 * pre-emit critique: P5 H5 E4 S5 R4 V5 */
:root{--color-paper:#fff6e0;--color-white:#fffdf4;--color-ink:#38434c;--color-muted:#646d70;--color-accent:#ffe07e;--color-accent-ink:#38434c;--color-mint:#a8d8bb;--color-cyan:#93d6eb;--color-coral:#f28c72;--color-line:#38434c25;--color-shadow:#38434c30;--color-focus:#24697d;--color-teal:#4fbaa8;--color-purple:#ac9bd4;--hud-edge:#38434c;--hud-shadow:#38434c25;--glass:#fffdf4ed;--font-body:'Trebuchet MS',Arial,sans-serif;--font-display:var(--font-body)}
html,body{width:100%;height:100%;overscroll-behavior:none;background:var(--color-cyan);overflow:clip}body{height:100dvh}main.game-shell{width:100%;height:100dvh;max-width:none;padding:0;margin:0;position:relative;isolation:isolate;overflow:clip}.playground{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:var(--color-cyan);overflow:clip}.scene-scroll{width:100%;height:100%;overflow-x:auto;overflow-y:clip;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;touch-action:pan-x}.scene-scroll::-webkit-scrollbar{display:none}#world{height:100%;width:max(100%,calc(100dvh * 1.777778));min-width:0;aspect-ratio:16/9;display:block;overflow:visible;touch-action:pan-x}#world .movable{touch-action:none;cursor:grab;outline:none}#world .movable .sprite{transition:filter .18s}#world .movable:hover .sprite{filter:brightness(1.035)}#world .movable.dragging{cursor:grabbing;filter:drop-shadow(0 12px 4px var(--color-shadow))}#world .movable.dragging *{animation-play-state:paused!important}#world .selection-outline{fill:none;stroke:var(--color-white);stroke-width:4;stroke-dasharray:9 6;opacity:0;pointer-events:none}#world .movable.selected .selection-outline,#world .movable:focus-visible .selection-outline{opacity:1;filter:drop-shadow(0 1px 1px var(--color-ink))}.game-hud{position:absolute;inset:18px 22px auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none;z-index:5}.game-hud button{pointer-events:auto}.place-pill{display:flex;align-items:center;gap:10px;border-radius:23px;padding:10px 15px 10px 9px;background:var(--glass);border:3px solid var(--color-white);box-shadow:0 4px 0 var(--hud-shadow);text-align:left;min-height:62px}.place-mark{width:39px;height:39px;background:var(--color-teal);display:grid;place-items:center;border-radius:14px;border:2px solid var(--hud-edge);transform:rotate(-5deg)}.place-mark svg{width:26px;height:26px}.place-pill>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.wordmark{font-size:19px;font-weight:900;letter-spacing:-.8px}.wordmark>span{color:var(--color-teal)}#location{font-size:10px;font-weight:bold;letter-spacing:.3px}.chevron{margin-left:4px}.hud-right{display:flex;align-items:center;gap:14px}.wallet{background:var(--color-accent);border:3px solid var(--color-white);box-shadow:0 4px 0 var(--hud-shadow);height:58px;min-width:117px;padding:8px 10px 8px 14px;gap:10px;font-size:23px}.wallet .star{font-size:28px}.wallet .plus{height:25px;width:25px;font-size:20px;background:var(--color-white)}.utility-buttons{display:flex;gap:8px}.round-button{width:46px;height:46px;min-width:46px;border:3px solid var(--color-white);border-radius:50%;background:var(--color-white);display:grid;place-items:center;box-shadow:0 4px 0 var(--hud-shadow);font-weight:bold;font-size:23px}.round-button svg{width:23px;height:23px}.round-button[aria-pressed=true]{background:var(--color-accent)}.scene-caption{position:absolute;top:97px;left:37px;font-weight:bold;font-size:10px;background:var(--glass);padding:8px 11px;border-radius:20px;display:flex;gap:6px;align-items:center;z-index:2}.tiny-dot{width:6px;height:6px;background:var(--color-teal);border-radius:50%}#welcome-hint{position:absolute;left:50%;top:23%;transform:translateX(-50%);background:var(--glass);border:3px solid var(--color-white);box-shadow:0 5px 0 var(--hud-shadow);border-radius:20px;padding:12px 14px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 30px);z-index:3;animation:hint-appear .5s ease-out}.hint-spark{font-size:31px;color:var(--color-ink)}#welcome-hint strong{display:block;font-size:12px;white-space:nowrap}#welcome-hint small{display:block;font-size:11px;margin-top:3px}#welcome-hint button{background:none;min-width:32px;min-height:44px;font-size:20px}.toolbox{position:absolute;bottom:max(21px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:10px;margin:0;width:auto;max-width:calc(100% - 180px);border:3px solid var(--color-white);border-radius:27px;background:var(--glass);box-shadow:0 6px 0 var(--hud-shadow);z-index:5}.toolbox button{min-width:75px;min-height:70px;border-radius:18px;gap:5px;padding:8px 12px;font-weight:900;font-size:10px;border:2px solid var(--hud-edge);box-shadow:0 3px 0 var(--hud-edge)}.toolbox svg{width:29px;height:29px}.toolbox .tool-people{background:var(--color-cyan)}.toolbox .tool-furniture{background:var(--color-purple)}.toolbox .tool-shop{background:var(--color-teal)}.toolbox .tool-rewards{background:var(--color-accent)}.toolbox button:active{transform:translateY(3px);box-shadow:0 0 0 var(--hud-edge)}.toolbox button:hover{filter:brightness(1.06)}.toolbox button:focus-visible{outline-color:var(--color-ink);outline-offset:5px}.bag-button{position:absolute;right:25px;bottom:24px;width:76px;height:88px;border:3px solid var(--color-white);border-radius:25px 25px 20px 20px;background:var(--color-coral);box-shadow:0 5px 0 var(--hud-shadow);display:grid;align-content:center;justify-items:center;gap:4px;z-index:6}.bag-button svg{width:34px;height:34px}.bag-button small{font-size:10px;font-weight:bold}.bag-button #bag-count{position:absolute;top:-8px;right:-7px;background:var(--color-white);border:2px solid var(--hud-edge);border-radius:50%;min-width:25px;height:25px;display:grid;place-items:center;font-size:11px;font-weight:bold}.bag-button.drop-ready{background:var(--color-accent);transform:translateY(-8px);outline:4px dashed var(--color-white);outline-offset:6px}.pan-controls{position:absolute;left:23px;right:23px;top:52%;display:flex;justify-content:space-between;pointer-events:none;z-index:3}.pan-controls button{pointer-events:auto;background:var(--glass);width:44px;height:44px;min-width:44px;opacity:.85}.pan-controls button:disabled{opacity:0;pointer-events:none}.selection-tray{position:absolute;left:50%;bottom:142px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:var(--color-white);border:3px solid var(--color-ink);border-radius:19px;padding:6px 8px 6px 15px;box-shadow:0 4px 0 var(--hud-shadow);z-index:5;max-width:calc(100% - 20px)}.selection-tray[hidden]{display:none}.selection-tray>span{font-size:12px;font-weight:bold;padding-right:8px;white-space:nowrap;max-width:140px;overflow:clip;text-overflow:ellipsis}.selection-tray button{min-width:42px;width:42px;height:44px;border-radius:12px;background:var(--color-paper);font-size:23px;display:grid;place-items:center}.selection-tray button svg{width:22px;height:22px}.selection-tray #pack-object{background:var(--color-coral)}.save-indicator{position:absolute;left:20px;bottom:13px;font-size:9px;background:var(--glass);border-radius:20px;padding:6px 10px;z-index:2;pointer-events:none}.night-shade{position:absolute;inset:0;pointer-events:none;background:#243a6a;opacity:0;mix-blend-mode:multiply;transition:opacity 1s}.night .night-shade{opacity:.4}.night #world{filter:none}.night .bulb{filter:drop-shadow(0 0 10px #ffe58c)}.night .sun-rays{opacity:0}.night .scene-scroll{background:var(--color-cyan)}.night .sky-object[data-kind=sun]{filter:drop-shadow(0 0 14px #fff0ac)}dialog{z-index:30;border:3px solid var(--color-ink);border-radius:27px;box-shadow:0 7px 0 var(--hud-shadow),0 25px 80px var(--color-shadow);background:var(--color-paper);max-height:85dvh}dialog::backdrop{background:#25465a65;backdrop-filter:blur(5px)}.dialog-top .icon-button{border:2px solid var(--color-ink)}.item-card{border:2px solid var(--color-ink);border-radius:18px}.item-art{background:#c6e8d0}.item-card:nth-child(3n+2) .item-art{background:#c1e5ed}.item-card:nth-child(3n) .item-art{background:#f2c4b3}.item-body button{border:2px solid var(--color-ink);box-shadow:0 2px 0 var(--color-ink)}.primary{border:2px solid var(--color-ink);box-shadow:0 4px 0 var(--color-ink)}.tabs button{border:2px solid transparent}.tabs button[aria-pressed=true]{background:var(--color-teal);color:var(--color-ink);border-color:var(--color-ink)}#toast{bottom:142px;border:2px solid var(--color-white);box-shadow:0 4px 0 var(--hud-shadow);z-index:50}.storage-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;font-size:13px}.settings-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.settings-actions button{min-height:44px;background:var(--color-mint);padding:10px 15px;border:2px solid var(--color-ink);border-radius:12px;font-size:12px}.empty{border:2px dashed var(--color-ink);padding:24px;line-height:1.7}.empty strong{display:block;margin-bottom:5px}.item-body button:disabled{box-shadow:none}.item-art svg{overflow:visible;padding:10px}
/* The animation belongs to the artwork, inside the draggable parent. */
.character-breathe{transform-origin:0 0;animation:breathe 3.4s ease-in-out infinite}.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.1s infinite}.movable:nth-child(3n) .eyes{animation-delay:1.7s}.movable:nth-child(2n) .character-breathe{animation-delay:-1.4s}.plant-sway,.tree-sway{transform-origin:0 0;animation:sway 5.8s ease-in-out infinite}.tree-sway{animation-duration:8s}.flower-nod{transform-origin:0 0;animation:sway 4s ease-in-out infinite}.sun-rays{animation:spin 55s linear infinite;transform-origin:0 0}.cloud-drift{animation:drift 15s ease-in-out infinite}.movable:nth-child(2n) .cloud-drift{animation-delay:-7s}.steam{animation:steam 2.5s ease-out infinite}.balloon-bob{animation:bob 4s ease-in-out infinite}.lamp-swing{transform-origin:0 -74px;animation:sway 6.5s ease-in-out infinite}.bulb{animation:twinkle 3.5s ease-in-out infinite;animation-delay:var(--delay,0s)}.clock-hand{transform-origin:0 -46px;animation:spin 60s steps(60) infinite}.fan-spin{transform-origin:0 -13px;animation:spin 12s linear infinite}.fish-swim{animation:fish 4.8s ease-in-out infinite}.bubbles{animation:steam 2.4s linear infinite}.cat-breathe{transform-origin:0 0;animation:breathe 3.5s ease-in-out infinite}.reacting .sprite{animation:object-pop .55s ease-in-out}.reacting[data-kind=toaster] .sprite{animation:toast-pop .7s ease}.reacting[data-kind=fridge] .sprite{filter:brightness(1.13)}.no-motion *,.no-motion *::before{animation-play-state:paused!important;scroll-behavior:auto!important}.fx-particle{animation:particle .95s ease-out forwards;transform-origin:center}.fx-note{animation:note-float 1.4s ease-out forwards}.fx-drop{animation:drop .9s ease-in forwards}.flash{animation:camera-flash .45s ease-out;position:absolute;inset:0;pointer-events:none;background:var(--color-white);z-index:10}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.99)}}@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.07)}}@keyframes sway{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{0%,100%{transform:translateX(-14px)}50%{transform:translateX(22px)}}@keyframes steam{0%{opacity:0;transform:translateY(7px)}25%{opacity:.8}100%{opacity:0;transform:translateY(-23px)}}@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11px) rotate(3deg)}}@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.65}}@keyframes fish{0%,100%{transform:translateX(-8px)}50%{transform:translateX(9px)}}@keyframes object-pop{0%,100%{transform:scale(1)}35%{transform:scale(1.06,.94)}65%{transform:translateY(-8px) scale(.98,1.03)}}@keyframes toast-pop{0%,100%{transform:translateY(0)}40%{transform:translateY(-23px) rotate(-5deg)}70%{transform:translateY(0) rotate(4deg)}}@keyframes particle{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--dx) var(--dy);rotate:130deg}}@keyframes note-float{0%{opacity:0;translate:0 0}20%{opacity:1}100%{opacity:0;translate:30px -85px}}@keyframes drop{from{opacity:.8;translate:0 0}to{opacity:0;translate:0 100px}}@keyframes camera-flash{from{opacity:.8}to{opacity:0}}@keyframes hint-appear{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:60rem){.game-hud{inset:15px 16px auto}.hud-right{gap:8px}.utility-buttons{gap:6px}.round-button{width:44px;min-width:44px;height:44px}.wordmark{font-size:17px}.place-pill{padding:9px;gap:7px}.place-mark{width:34px;height:34px}.wallet{min-width:104px;font-size:21px;gap:7px;height:57px}.scene-caption{left:27px;top:91px}.save-indicator{bottom:9px}.toolbox{bottom:23px}.bag-button{right:18px;bottom:26px;width:65px;height:78px}.pan-controls{left:12px;right:12px}.toolbox button{min-width:65px;padding:8px 11px}.toolbox{gap:7px}}
@media(max-width:40rem){.game-hud{inset:12px 12px auto;gap:8px}.place-pill{border-radius:17px;min-height:53px;padding:7px 8px;gap:6px}.wordmark{font-size:15px;letter-spacing:-.6px}.place-mark{width:28px;height:32px;border-radius:10px}.place-mark svg{width:21px;height:21px}#location{font-size:9px}.chevron{margin-left:0;font-size:12px}.hud-right{display:contents}.wallet{height:53px;min-width:95px;font-size:20px;padding:6px 7px 6px 10px;gap:7px}.wallet .plus{width:22px;height:22px}.wallet .star{font-size:24px}.utility-buttons{position:absolute;top:65px;right:0;gap:5px;display:grid;grid-template-columns:repeat(2,44px)}.utility-buttons .round-button{width:44px;height:44px;border-width:3px}.scene-caption{top:80px;left:16px;max-width:185px;font-size:9px;padding:7px 9px}#welcome-hint{top:26%;padding:10px 12px;gap:8px;border-radius:16px;max-width:calc(100% - 32px);width:max-content}#welcome-hint strong{font-size:10px}#welcome-hint small{font-size:10px}#welcome-hint .hint-spark{font-size:24px}#welcome-hint button{min-width:24px}.toolbox{bottom:max(15px,env(safe-area-inset-bottom));left:12px;transform:none;padding:6px;gap:5px;max-width:calc(100% - 85px);border-radius:20px}.toolbox button{min-width:0;min-height:61px;padding:5px 7px;border-radius:13px;font-size:9px;width:49px;flex:none;gap:4px}.toolbox svg{width:25px;height:25px}.toolbox .star{font-size:26px}.bag-button{right:12px;bottom:19px;width:58px;height:70px;border-radius:20px}.bag-button svg{width:29px;height:29px}.bag-button small{font-size:9px}.pan-controls{top:54%;left:9px;right:9px}.pan-controls button{width:44px;height:44px;min-width:44px}.save-indicator{display:none}.selection-tray{bottom:108px;padding:4px 6px 4px 10px;gap:3px;border-radius:16px}.selection-tray>span{font-size:10px;max-width:91px;padding-right:4px}.selection-tray button{min-width:37px;width:37px;height:44px}#toast{bottom:112px;font-size:11px;width:max-content;max-width:calc(100% - 25px);padding:10px 15px}.item-body button{font-size:10px}.item-body h3{font-size:13px}.dialog-top .eyebrow{font-size:8px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-art{height:135px}.tabs{gap:5px}.tabs button{font-size:10px;padding:8px 11px}}
@media(max-height:550px) and (min-width:40rem){.game-hud{inset:10px 15px auto}.place-pill{min-height:48px;padding:5px 9px}.place-mark{width:30px;height:30px}.wallet{height:48px}.scene-caption{top:75px}.toolbox{bottom:12px;padding:6px;gap:6px}.toolbox button{min-height:51px;min-width:60px;padding:5px 10px;font-size:9px}.toolbox svg{width:23px;height:23px}.bag-button{height:65px;bottom:15px;width:60px}.save-indicator{display:none}.selection-tray{bottom:94px}#welcome-hint{top:30%}#toast{bottom:100px}.utility-buttons{display:flex}.utility-buttons .round-button{width:42px;min-width:42px;height:44px}}
@media(prefers-reduced-motion:reduce){.scene-scroll{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.fx-particle,.fx-note,.fx-drop{opacity:0}}
[hidden]{display:none!important}.is-dragging .scene-scroll{scroll-behavior:auto}.toast-undo{color:var(--color-paper);background:none;text-decoration:underline;margin-left:12px;min-height:44px;font-size:12px}.water-stream{animation:water-flow .35s linear infinite}@keyframes water-flow{0%,100%{opacity:.7}50%{opacity:1}}