*{box-sizing:border-box} :root{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:#173352;background:#45d6dc;font-size:18px}body{margin:0;padding:22px}button,select{font:inherit;font-weight:800;touch-action:manipulation}button{cursor:pointer;min-height:52px;border:2px solid #163353;border-radius:18px;padding:12px 18px;background:white;color:#173352;box-shadow:0 4px 0 #173352}button:active{transform:translateY(2px);box-shadow:0 2px 0 #173352}button:disabled{opacity:.65;cursor:default}button:focus-visible,select:focus-visible{outline:4px solid #173352;outline-offset:4px}header{max-width:1320px;margin:0 auto 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-size:.78rem;font-weight:800;letter-spacing:.12em}h1{font-size:clamp(2rem,5vw,3.8rem);margin:0;font-weight:1000;letter-spacing:-.045em}h1 span{color:#7d1451}h2{margin:0;font-size:1.45rem}p{line-height:1.5}main{max-width:1320px;margin:auto;background:#fffdf5;border:4px solid #173352;border-radius:30px;overflow:hidden;box-shadow:0 12px 0 #168aab}.awning{height:35px;background:repeating-linear-gradient(90deg,#f34b88 0 70px,#fff3ba 70px 140px);border-bottom:4px solid #173352}.toolbar{padding:20px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:#fff0a4;border-bottom:3px solid #173352}nav{display:flex;gap:9px;flex-wrap:wrap}nav button{font-size:1rem;padding:10px 12px;background:#fff}nav button[aria-pressed=true]{background:#173352;color:#fff}label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:800}select{max-width:100%;padding:10px;background:white;border:2px solid #173352;border-radius:12px;color:#173352}.game{display:grid;grid-template-columns:280px 1fr;gap:22px;padding:24px}.customer{background:#efddff;border-radius:24px;text-align:center;padding:12px 14px;align-self:start;border:2px solid #8e5fc6}.monster{background-image:url('monsters.png');background-size:300% 200%;background-position:var(--mx,0%) var(--my,0%);width:200px;height:200px;margin:auto;border-radius:25px;background-color:white}.customer h2{margin:8px 0;color:#702578}.speech{background:#fff;border:2px solid #b58cdb;border-radius:20px;padding:12px;margin-top:12px}.speech p{margin:0 0 10px;font-size:1.15rem;font-weight:800}.orderItem{display:inline-flex;align-items:center;gap:6px;border-radius:12px;background:#fff0ba;padding:6px;margin:4px;font-weight:800}.orderItem span{font-size:2rem}.workspace{min-width:0}.workspaceTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.quiet{font-size:.85rem;min-height:44px;padding:8px 12px;box-shadow:none}.workspace>p{margin:12px 0}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px;background:#beeef8;border:3px solid #299ab7;border-radius:20px;border-bottom:10px solid #299ab7}.product{padding:10px 4px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;background:#fff;font-size:.92rem;user-select:none;-webkit-user-select:none;touch-action:pan-y}.product .emoji{font-size:2.8rem;line-height:1.2}.product:nth-child(3n+1){background:#ffedb0}.product:nth-child(3n+2){background:#edddff}.product:nth-child(3n){background:#d5f4c0}.product.selected{outline:5px solid #d32978;outline-offset:1px}.price{font-size:.8rem;background:#fff;border-radius:8px;padding:3px 7px}.basket,.scale,.coinTray,.receipt{border:3px dashed #cc3373;border-radius:20px;padding:16px;margin:20px 0 12px;background:#ffe7f0;min-height:100px}.basket h3,.scale h3,.coinTray h3{margin:0 0 10px;font-size:1.1rem}.basket button,.coinTray button{margin:5px;min-width:58px;padding:8px;background:white}.scale{border-color:#048583;background:#d5f8e9;text-align:center}.scale strong{display:block;font-size:2rem}.coins{display:flex;gap:12px;flex-wrap:wrap}.coin{border-radius:50%;width:66px;height:66px;background:#ffe25e;border:3px solid #8b5900;color:#5b3900;font-size:1.3rem}.receipt{border:2px solid #dfb238;background:#fff4bd;display:flex;gap:12px;flex-wrap:wrap}.receipt .orderItem{background:white}.shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.shelf{background:#d6f5c5;min-height:100px;padding:12px 6px}.shelf:nth-child(2){background:#ffe3a4}.shelf:nth-child(3){background:#e6d4ff}.shelf small{display:block;margin-top:8px;font-size:1.6rem}.primary{background:#e53482;color:white;border-color:#80164c;padding:16px 28px;font-size:1.15rem;box-shadow:0 5px 0 #80164c}.actions{display:flex;gap:12px;margin-top:12px}#feedback{font-weight:800;min-height:30px;color:#7f285a}#feedback.success{color:#046957}.celebrate{background:#ffed9b;border:3px solid #ebaf25;border-radius:24px;text-align:center;padding:30px}.celebrate .monster{margin-bottom:16px}.celebrate h2{font-size:2rem}.stars{font-size:2.5rem}footer{display:flex;align-items:center;justify-content:center;gap:20px;background:#d1f5bf;border-top:3px solid #173352;padding:10px 20px;font-weight:800}.miniMonster{width:75px;height:75px;margin:0;flex-shrink:0}dialog{max-width:620px;width:calc(100% - 24px);border:4px solid #173352;border-radius:24px;padding:24px;color:#173352;background:#fffdf5}dialog::backdrop{background:#14294399}dialog li{margin-bottom:10px;line-height:1.5}[hidden]{display:none!important}@media(max-width:850px){body{padding:12px}.game{grid-template-columns:210px 1fr;padding:16px;gap:16px}.monster{width:160px;height:160px}.products{grid-template-columns:repeat(3,minmax(0,1fr))}.miniMonster{width:60px;height:60px}.toolbar{padding:14px}}@media(max-width:600px){body{padding:8px}.brand{font-size:.67rem}header{gap:8px}.help{font-size:.85rem;padding:8px}.game{display:block;padding:12px}.customer{display:grid;grid-template-columns:95px 1fr;gap:8px;align-items:center;margin-bottom:20px}.customer .monster{width:90px;height:90px;grid-row:1/3}.customer h2{font-size:1.2rem;margin:0}.speech{margin:0;padding:8px}.speech p{font-size:1rem}.customer #round{grid-column:1/3;margin:0;font-size:.85rem}.products{gap:9px;padding:10px}.product .emoji{font-size:2.4rem}.product{font-size:.8rem}nav button{font-size:.85rem;padding:8px}footer{gap:8px;padding:8px}footer p{font-size:.9rem}.workspaceTop h2{font-size:1.2rem}.shelves{gap:8px}.shelf{font-size:.85rem}.orderItem{font-size:.9rem}.orderItem span{font-size:1.5rem}}@media(prefers-reduced-motion:no-preference){.success{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.96)}to{transform:scale(1)}}}
