:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#40281f;background:#fff3d6;touch-action:manipulation}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at top,#fff8e7,#ffdca4);overflow:hidden}
.app{width:min(100%,520px);height:100dvh;max-height:920px;display:grid;grid-template-rows:auto 1fr auto;background:#fff;box-shadow:0 0 40px #8a3b1830;overflow:hidden}
.hud{min-height:86px;padding:10px 14px 8px;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;text-align:center;color:#fff;background:linear-gradient(135deg,#ef5b2a,#f7931e);border-bottom:4px solid #b5361d;z-index:3}
.hud div{display:grid;gap:1px}.hud small{font-size:12px;font-weight:800}.hud strong{font-size:28px;line-height:1}.hud h1{font-size:13px;line-height:1.05;margin:0;letter-spacing:.08em}.hud h1 span{font-size:21px;color:#fff7a8;text-shadow:0 2px #a42e1b}
.stage{position:relative;overflow:hidden;background:#f6d69c url("images/supermarket.png") center/cover no-repeat;isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(#fff0 55%,#7f4a1520);pointer-events:none;z-index:-1}
.message{position:absolute;z-index:10;inset:50% auto auto 50%;translate:-50% -50%;width:min(88%,390px);padding:22px 18px;text-align:center;background:#fffcf3ee;border:4px solid #fff;border-radius:26px;box-shadow:0 10px 35px #54250055;backdrop-filter:blur(6px)}
.message.hidden{display:none}.logo{font-size:54px}.message h2{margin:3px 0 8px;color:#e64c24;font-size:28px}.message p{font-size:14px;line-height:1.7;margin:0 0 14px}.message b{color:#d22b2b}.message small{display:block;margin-top:8px;color:#755}
button{border:0;border-bottom:5px solid #a52b18;border-radius:999px;padding:13px 30px;background:linear-gradient(#ff7a3c,#e84920);color:#fff;font:900 19px inherit;box-shadow:0 5px 15px #9a2d2a45;cursor:pointer}button:active{translate:0 3px;border-bottom-width:2px}
.target{position:absolute;display:grid;place-items:center;width:82px;height:82px;padding:0;border:4px solid #fff;border-radius:50%;background:#fff8e6;box-shadow:0 7px 16px #5b321b66;cursor:pointer;user-select:none;-webkit-user-select:none;animation:appear .18s cubic-bezier(.2,1.5,.5,1);will-change:transform}.target .emoji{font-size:49px;line-height:1}.target .tag{position:absolute;bottom:-7px;white-space:nowrap;padding:3px 8px;border-radius:12px;background:#ef5b2a;color:white;font-size:11px;font-weight:900;box-shadow:0 2px 4px #0003}.target.bad{background:#dff5ff;border-color:#ffdf4f}.target.bad .tag{background:#267aa3}
.target.hit{pointer-events:none;animation:hit .25s ease forwards}.pop{position:absolute;z-index:8;font-size:24px;font-weight:1000;color:#fff;text-shadow:0 2px 5px #5d180f;pointer-events:none;opacity:0}.pop.show{animation:scorePop .55s ease-out}
footer{height:34px;display:grid;place-items:center;background:#4f852d;color:#fff;font-size:12px;font-weight:800}
@keyframes appear{from{transform:scale(.2) translateY(25px);opacity:0}to{transform:scale(1);opacity:1}}@keyframes hit{to{transform:scale(1.4) rotate(12deg);opacity:0}}@keyframes scorePop{0%{opacity:0;transform:translateY(15px) scale(.7)}30%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-35px)}}
@media(max-height:650px){.hud{min-height:70px}.hud h1 span{font-size:17px}.target{width:70px;height:70px}.target .emoji{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}