:root { color-scheme: dark; font-family: 'Arial Black', 'DejaVu Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { padding:0; margin:0; width:100%; height:100%; overflow:hidden; background:#080b30; touch-action: manipulation; }
body { display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#27317b 0%,#0a0c31 65%,#05071c 100%); }
.shell { width:min(100vw, 56.25dvh, 490px); height:min(100dvh, 177.77778vw, 871px); max-height:100dvh; overflow:hidden; flex:none; }
.game { position:relative; width:100%; height:100%; overflow:hidden; background:#283b95; isolation:isolate; box-shadow:0 0 50px #0008; }
#stage { width:100%; height:100%; display:block; image-rendering:pixelated; touch-action:none; }
.hidden { display:none !important; }
.art-screen, .modal-screen { position:absolute; inset:0; z-index:5; }
.art-screen img { display:block; width:100%;height:100%;object-fit:fill; user-select:none;-webkit-user-select:none; pointer-events:none; image-rendering:auto; }
#winEffects { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.art-hit { position:absolute;display:block;background:transparent;border:0;cursor:pointer;touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.art-hit:focus-visible { outline:3px solid #fff;outline-offset:-5px;border-radius:12px; }
.start-hit { left:17%;width:68%;bottom:7.0%;height:13.5%; }
.replay-hit { left:17%;width:67%;bottom:4.0%;height:12.0%; }
.start-hit:hover, .replay-hit:hover { background:#ffe96312; border-radius:10px; }
.bottom-hint { position:absolute;bottom:2.0%;left:0;right:0;text-align:center;font:900 10px/1 monospace;color:#fee6aa;text-shadow:1px 2px #141a54;opacity:.8;pointer-events:none;letter-spacing:2px; }
.win-count { z-index:2; }
.win-screen .replay-hit { z-index:2; }
.win-count { display:block; position:absolute;left:62.5%;width:17%;top:76.3%;height:4.9%;text-align:center;line-height:1.5;font-size:clamp(20px,5.3vmin,33px);font-weight:1000;color:#ffd838;text-shadow:2px 3px 0 #54230f,-1px -1px 0 #fff1ae; }
.pause-control { position:absolute;z-index:4;right:8px;top:9px;width:41px;height:40px;border:3px solid #baf8ff; border-radius:6px; background:linear-gradient(#2b99ea,#1045a8); box-shadow:inset 0 -4px #11316f,0 4px #030d39a8;color:white;font:bold 25px monospace;cursor:pointer; touch-action:manipulation; }
.modal-screen { display:flex;align-items:center;justify-content:center;padding:24px;background:#091544e0;backdrop-filter:blur(4px);z-index:7; }
.modal-card { color:#fff6e6;border:5px solid #75c7ff;background:linear-gradient(135deg,#142568,#192462 65%,#1a123c);width:100%;box-shadow:0 0 0 6px #09133b, 0 14px 0 #070f34,0 20px 55px #000c;padding:26px 22px 22px;text-align:center; }
.modal-card.compact { padding-top:40px;padding-bottom:40px; }
.modal-card h1 { margin:11px 0 13px;font:1000 clamp(25px,6.5vw,37px)/1.08 monospace;letter-spacing:-1.5px;text-shadow:3px 3px #5e1f5e; }
.modal-card .tiny-label { font:900 11px monospace;color:#ffcf42;letter-spacing:2px; }
.modal-card p { color:#d6e7ff;margin:4px 0 24px;font:bold 14px/1.5 system-ui; }
.result-line { display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #40579d;padding:11px 0;font:bold 15px monospace; }
.result-line strong { color:#ffd438;font:bold 25px monospace; }
.gold-button,.secondary-button { width:100%;min-height:56px;cursor:pointer;margin-top:24px;color:#241344;border:4px solid #ffe9a2;background:linear-gradient(#fff16c 0%,#ffc62b 52%,#ff9710 100%);box-shadow:inset 0 -5px #d66c0a,0 6px #090f33;border-radius:12px;font:1000 17px monospace;touch-action:manipulation; }
.gold-button:active,.secondary-button:active { transform:translateY(3px);box-shadow:inset 0 -2px #d66c0a,0 2px #090f33; }
.secondary-button { background:#19467d;color:white;border-color:#4888bb;margin-top:16px;font-size:13px; }
.toast { position:absolute;z-index:6;left:50%;top:25%;transform:translateX(-50%);padding:10px 20px;background:#1e1641d9;border:3px solid #ffd550;box-shadow:0 0 22px #f8af59aa;color:#fff2aa;font:900 19px monospace;pointer-events:none; }
@media (min-width:800px) { .game {border-radius:6px;} }
@media (prefers-reduced-motion: reduce) { .bottom-hint{animation:none;} }