:root{color-scheme:dark;--ink:#fff4dc;--muted:#d6b6b4;--gold:#ffd45c;--red:#e94c45;--panel:#281b2b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#160f1d;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;min-height:100svh;display:block;padding:0;background:radial-gradient(ellipse at 50% 12%,#5d2639 0,#261626 48%,#120d18 100%)}
button{font:inherit;color:inherit;cursor:pointer}
.app{width:min(100%,420px);margin:12px auto;display:flex;flex-direction:column;gap:9px}
.hud{height:54px;display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:11px;padding:0 10px;background:linear-gradient(180deg,#42283a,#211725);border:2px solid #986044;box-shadow:0 4px 0 #100b13}
.brand{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;font-size:10px;font-weight:900;letter-spacing:.8px;white-space:nowrap}
.brand b{color:var(--gold)}
.brand-icon{display:grid;place-items:center;width:28px;height:28px;background:#b82f39;border:2px solid #f3b04e;color:#ffe2a0;font-size:16px}
.hud-stat{display:flex;flex-direction:column;align-items:center;line-height:1}
.hud-stat small{font-size:7px;letter-spacing:.9px;color:#d5b8a8;font-weight:800}
.hud-stat strong{font-size:16px;margin-top:4px;color:var(--gold);font-variant-numeric:tabular-nums}
.game-frame{position:relative;width:100%;height:min(630px,calc((100vw - 24px)*1.5));aspect-ratio:2/3;overflow:hidden;border:3px solid #a56a4c;background:#c66b59;box-shadow:0 8px 0 #100b13,0 18px 35px #0008}
canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.timer{position:absolute;z-index:2;left:9px;right:9px;top:8px;height:7px;background:#39202a;border:1px solid #f3c36a;box-shadow:0 1px 3px #24131c}
.timer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#e7a53d,#ffe27a);transform-origin:left center}
.screen{position:absolute;inset:0;z-index:3;display:none;place-items:center;padding:15px;background:#170e1bc7}
.screen.active{display:grid}
.panel{width:min(100%,310px);padding:20px 18px;text-align:center;background:linear-gradient(155deg,#52303b,#251927);border:2px solid #d19a59;box-shadow:0 6px 0 #120b14,inset 0 0 0 2px #74434a}
.kicker{margin:0 0 9px;color:#ffcf62;font-size:9px;font-weight:900;letter-spacing:3px}
h1{margin:0;font-size:clamp(37px,11vw,54px);line-height:.82;letter-spacing:1px;text-shadow:3px 3px 0 #8b293a}
h1 em{font-style:normal;color:#ffd75e}
h2{margin:0 0 12px;font-size:28px;line-height:1;color:#ffe6b0;text-shadow:2px 2px #8b293a}
.intro{margin:13px auto 16px;max-width:250px;color:#e2c9bd;font-size:12px;line-height:1.5}
.primary,.secondary,.buy{width:100%;border:2px solid #ffdc82;font-weight:900;letter-spacing:1.5px}
.primary{padding:13px;background:linear-gradient(#ffdf7c,#e68a35);color:#3b1c22;box-shadow:0 4px 0 #8c3c2b}
.secondary{padding:10px;background:#342034;border-color:#b17a5c;color:#ffe4bc;font-size:10px}
.home-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.micro{margin:14px 0 0;color:#d0aeb0;font-size:8px;letter-spacing:1.5px}
.sub-panel{text-align:left;padding:16px}
.sub-panel h2{text-align:center}
.back{border:0;background:none;color:#ffd36a;font-size:10px;font-weight:900;letter-spacing:1px;padding:0 0 15px}
.sub-panel .kicker{text-align:center}
.upgrade-list{display:grid;gap:8px;margin-top:12px}
.upgrade{display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px;background:#201522;border:1px solid #805344}
.upgrade div{display:flex;flex-direction:column;gap:4px}
.upgrade b{font-size:13px}.upgrade small{font-size:9px;color:#c9afb0}
.upgrade strong{font-size:10px;color:var(--gold)}
.buy{grid-column:1/-1;padding:8px;background:#9c4a38;border-color:#e2a65d;font-size:9px}
.wallet,.section-label{font-size:9px;letter-spacing:1px;color:#d9b7a8;margin:15px 0 0}
.wallet b{color:var(--gold)}
.profile-card{display:flex;align-items:center;gap:12px;padding:12px;background:#211522;border:1px solid #805344}
.avatar{display:grid;place-items:center;width:48px;height:48px;background:#d7a12c;border:2px solid #f1c15c;font-size:27px}
.profile-card div:last-child{display:flex;flex-direction:column;gap:5px}.profile-card b{font-size:14px}.profile-card small{font-size:10px;color:#d5b8a8}
.section-label{margin-top:18px}
.skins{display:flex;gap:10px;margin-top:9px}
.skin{width:38px;height:38px;border:2px solid #e6c58b;background:#d7a12c}
.skin[data-skin=blue]{background:#315c9d}.skin[data-skin=green]{background:#34764e}.skin[data-skin=red]{background:#bb3939}
.skin.selected{outline:3px solid #ffe17d;outline-offset:2px}
.result-panel{padding:24px 20px}
.result-score{display:flex;flex-direction:column;gap:3px;margin:14px 0}
.result-score small{font-size:9px;letter-spacing:2px;color:#d4b6a5}
.result-score strong{font-size:52px;color:var(--gold);line-height:1}
.reward-line{margin:0 0 14px;color:#e6c6a4;font-size:12px}.reward-line b{color:var(--gold);font-size:18px}
.wide{margin-top:9px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hit{height:59px;display:flex;align-items:center;justify-content:center;gap:13px;border:2px solid #b77c55;background:linear-gradient(#663647,#321d2e);box-shadow:0 5px 0 #100b13;touch-action:manipulation}
.hit b{font-size:12px;letter-spacing:2px;color:#ffe4b5}.hit span{font-size:17px;color:var(--gold)}
.hit:active{transform:translateY(3px);box-shadow:0 2px 0 #100b13}
.help{text-align:center;margin:0;color:#c3a1a8;font-size:9px;letter-spacing:.5px}
.toast{position:absolute;z-index:5;left:50%;bottom:12px;transform:translate(-50%,15px);opacity:0;padding:8px 12px;background:#201522;border:1px solid #e2b25b;color:#ffe5ae;font-size:10px;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:360px){.hud{gap:6px;padding:0 6px}.brand{font-size:9px}.hud-stat strong{font-size:14px}}
@media(max-height:700px){body{padding:6px}.app{gap:6px}.hud{height:46px}.hit{height:48px}.panel{padding:14px}.intro{margin:8px auto 10px}}