* { box-sizing: border-box; }
:root { font-family: "Courier New", "Microsoft YaHei", monospace; color-scheme: dark; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #14272c; }
body { display: grid; min-height: 100dvh; place-items: center; }
button, a { font: inherit; }
.game-shell { position: relative; width: min(100vw, calc(100dvh * .5625)); height: min(100dvh, calc(100vw * 1.7778)); max-width: 500px; overflow: hidden; background: #72c9d5; box-shadow: 0 0 70px #000; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.score { position: absolute; z-index: 3; top: max(58px, calc(env(safe-area-inset-top) + 30px)); left: 50%; color: white; font-size: clamp(42px, 13vw, 64px); font-weight: 900; line-height: 1; text-shadow: -3px 0 #47372a, 0 3px #47372a, 3px 0 #47372a, 0 -3px #47372a, 4px 5px rgba(0,0,0,.25); transform: translateX(-50%); pointer-events: none; }
.corner-actions { position: absolute; z-index: 4; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; }
.corner-actions a, .corner-actions button { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 3px solid #fff7d1; border-radius: 3px; background: #d76338; color: #fff7d1; box-shadow: 3px 3px 0 #513426; text-decoration: none; cursor: pointer; }
.corner-actions a:active, .corner-actions button:active { transform: translate(2px,2px); box-shadow: 1px 1px #513426; }
.result-overlay { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(20, 39, 44, .38); backdrop-filter: blur(2px); }
.result-overlay[hidden] { display: none; }
.result-panel { width: min(100%, 340px); border: 3px solid #47372a; border-radius: 4px; padding: 22px; background: #f7df9c; color: #47372a; box-shadow: inset 0 0 0 3px #c99c50, 7px 7px 0 rgba(48,35,28,.65); animation: panel-in .24s ease-out; }
.eyebrow { margin: 0; color: #b5502e; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.result-panel h1 { margin: 5px 0 18px; font-size: 30px; letter-spacing: 0; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.medal { text-align: center; }
.medal i { display: grid; width: 68px; height: 68px; margin: 0 auto 8px; place-items: center; border: 6px solid #8b6339; border-radius: 50%; background: #dcc58e; box-shadow: inset 0 0 0 4px rgba(255,255,255,.4); }
.medal i::after { content: "★"; color: rgba(70,50,35,.35); font-size: 30px; }
.medal span { font-size: 11px; font-weight: 900; }
dl { margin: 0; }
dl div { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px dashed #bd9559; padding: 8px 0; }
dt { font-size: 11px; font-weight: 900; } dd { margin: 0; color: #b84b2d; font-size: 24px; font-weight: 900; }
.result-panel button { width: 100%; min-height: 48px; margin-top: 20px; border: 3px solid #47372a; border-radius: 3px; background: #e56438; color: white; font-weight: 900; box-shadow: 4px 4px 0 #47372a; cursor: pointer; }
.result-panel button:active { transform: translate(3px,3px); box-shadow: 1px 1px #47372a; }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@media (min-aspect-ratio: 4/5) and (max-width: 900px) { .game-shell { width: min(72vw, calc(100dvh * .5625)); } }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .game-shell { width: min(96vw, calc(92dvh * 1.7778)); height: min(92dvh, calc(96vw / 1.7778)); max-width: none; border: 3px solid #263e42; }
  .score { top: max(28px, calc(env(safe-area-inset-top) + 18px)); font-size: 58px; }
  .corner-actions { left: 16px; right: 16px; top: max(14px, env(safe-area-inset-top)); }
  .result-panel { width: min(100%, 390px); }
}
@media (prefers-reduced-motion: reduce) { .result-panel { animation: none; } }