:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #78964f; }
body { display: grid; place-items: center; background: radial-gradient(circle at 50% 18%, #dce7b8 0 24%, #738e4d 72%); }
#game-shell { position: relative; height: 100dvh; width: min(100vw, calc(100dvh * .45)); max-width: 576px; overflow: hidden; background: #bfd68d; box-shadow: 0 0 42px #324422aa; touch-action: none; user-select: none; }
canvas { display: block; width: 100%; height: 100%; }
.hit { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }
.settings { left: 2.4%; top: 5.9%; width: 11.8%; height: 5.7%; }
.tool { bottom: 1.1%; height: 7.7%; }
.remove { left: 3%; width: 29%; }
.shuffle { left: 35.3%; width: 29%; }
.magnet { right: 3%; width: 29%; }
.dialog { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 28px; background: #27401f9e; backdrop-filter: blur(3px); }
.dialog.hidden { display: none; }
.panel { width: 100%; border: 5px solid #7b4b29; border-radius: 28px; padding: 28px 24px 22px; text-align: center; color: #56351e; background: linear-gradient(#fff8df, #f4dca1); box-shadow: inset 0 0 0 5px #fff3c6, 0 14px 0 #4d6a37, 0 22px 30px #18301666; }
.panel p { margin: 0 0 8px; font-weight: 800; line-height: 1.5; }
#dialog-kicker { color: #cb6a32; font-size: 14px; letter-spacing: 3px; }
.panel h1 { margin: 5px 0 10px; font-size: clamp(28px, 8vw, 44px); text-shadow: 0 3px #fff; }
.stars { min-height: 42px; margin: 4px 0 12px; font-size: 34px; color: #f5ac18; letter-spacing: 7px; text-shadow: 0 3px #9d5720; }
.panel button { width: 100%; min-height: 56px; margin-top: 10px; border: 3px solid #155d92; border-radius: 18px; color: white; font: 900 20px/1 "Microsoft YaHei", sans-serif; text-shadow: 0 2px #14537d; box-shadow: inset 0 3px #69dcff, 0 5px #114d76; cursor: pointer; }
.primary { background: linear-gradient(#33caff, #168fd8); }
.secondary { background: linear-gradient(#ffb854, #ed7933); border-color: #9a4b20 !important; box-shadow: inset 0 3px #ffd893, 0 5px #783817 !important; }
.toast { position: absolute; z-index: 8; left: 50%; top: 18%; transform: translate(-50%, -10px) scale(.92); padding: 10px 20px; border-radius: 999px; color: white; background: #345727e8; font-size: 16px; font-weight: 900; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: 0 5px 0 #263e1d; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (min-aspect-ratio: 1/1) { #game-shell { border-radius: 20px; height: min(96dvh, 900px); width: calc(min(96dvh, 900px) * .45); } }