* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #160e0a; color: #ffedc9; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .version-content:focus-visible { outline: 3px solid #fff2ba; outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; }
[hidden] { display: none !important; }
/* 机台和操作区成组居中。组宽由可用高度推导，宽屏留白留在两侧。 */
#game { position: relative; isolation: isolate; width: 100%; height: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 45% 48%, #0000 24%, #13090575 84%), #160e0a url('./assets/arcade-background-v1.png') center/cover no-repeat; }
.play-layout { --panel-width: clamp(280px, 24vw, 340px); --layout-gap: clamp(24px, 2vw, 32px); --stage-height: min(1000px, calc(100dvh - 24px)); width: 100%; max-width: calc(var(--stage-height) * .9 + var(--panel-width) + var(--layout-gap)); height: 100%; max-height: 1000px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-width); gap: var(--layout-gap); }
#game:fullscreen { width: 100%; height: 100%; }
#game:-webkit-full-screen { width: 100%; height: 100%; }
#scene { min-width: 0; min-height: 0; position: relative; }
#scene canvas { width: 100%; height: 100%; display: block; }
#hud { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, 24px); }
.scoreboard { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid #e5a84e; border-radius: 23px; padding: 16px; background: linear-gradient(145deg, #6b3c13f5, #201005f5 70%); box-shadow: inset 0 0 0 3px #301b0a, 0 6px 24px #0008; }
.stat { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat-label { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #e5c49d; display: block; }
.stat strong { font-size: clamp(36px, 3vw, 48px); font-family: Georgia, serif; line-height: 1.12; color: #ffe19a; text-shadow: 0 2px 6px #0009; }
.stat .unit { display: none; }
.reward-stat { display: flex; align-items: baseline; gap: 6px; }
.reward-stat .stat-label { font-size: 13px; display: inline; }
.reward-stat strong { font-size: 24px; color: #e5ca96; }
.stat-divider { display: none; }
.reward-stat.flash strong { color: #fff9dd; text-shadow: 0 0 18px #ffc94b; }
.utility-controls { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
.audio-switches { display: flex; gap: 8px; flex: 1; min-width: 0; }
.audio-toggle, .pause-button { min-height: 44px; border: 1px solid #d5a560; border-radius: 10px; background: #27180dee; color: #ffe4aa; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 8px; }
.audio-toggle { flex: 1; }
.pause-button { flex-shrink: 0; }
.toggle-state { font-size: 12px; color: #ffd368; margin-left: 3px; }
.audio-toggle.is-off, .is-off .toggle-state { color: #b4a18a; }
.audio-toggle.is-waiting .toggle-state { color: #e3c58f; }
.notices { height: 100px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; pointer-events: none; }
.spin-status, .toast { text-align: center; padding: 10px; border: 1px solid #bf8a3d88; border-radius: 10px; color: #ffe8b3; background: #29170eeb; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.toast { display: none; }
.toast.visible { display: block; }
.controls { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.key-hint { order: 3; text-align: center; font-size: 12px; line-height: 1.8; color: #d1bca0; }
.drop-button { display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%; border: 2px solid #f3c66f; border-radius: 15px; min-height: 72px; padding: 10px 14px; background: linear-gradient(#ce3823, #8a140e); color: #ffecb6; box-shadow: inset 0 0 0 3px #831609, 0 5px 0 #4b1609, 0 9px 25px #0009; text-shadow: 0 2px #791609; text-align: left; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.drop-button>span:nth-child(2) { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.drop-sub { display: block; font-size: 12px; letter-spacing: 0; color: #f4cda0; margin-top: 5px; font-weight: 400; }
.coin-icon { font-size: 28px; }
.button-key { font-size: 22px; }
[data-input="touch"] .button-key { display: none; }
@media (hover: hover) { .drop-button:hover { filter: brightness(1.1); } }
.drop-button:active, .drop-button.pressed { transform: translateY(3px); box-shadow: inset 0 0 0 3px #831609, 0 2px 0 #4b1609, 0 5px 18px #0008; }
.fullscreen { min-height: 44px; border: 1px solid #dfbf9144; background: #120a0799; border-radius: 12px; padding: 8px 12px; color: #dfbf91; font-size: 20px; }
.fullscreen span { font-size: 13px; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #100906df; z-index: 5; backdrop-filter: blur(7px); }
.menu-card { display: flex; flex-direction: column; width: min(420px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; text-align: center; padding: 24px; border: 2px solid #bc873c; border-radius: 18px; background: linear-gradient(145deg, #522d18, #201109); box-shadow: 0 25px 80px #0008; }
.menu-card h2 { flex-shrink: 0; font-size: 27px; letter-spacing: 3px; margin: 0 0 12px; }
.menu-card p { flex-shrink: 0; font-size: 14px; line-height: 1.8; color: #cfb18e; margin: 0 0 20px; }
.menu-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.menu-actions button { min-height: 44px; border: 1px solid #c3914d99; background: #2b160c; color: #ffe5b7; border-radius: 8px; padding: 12px; font-size: 16px; }
.menu-actions button:focus-visible { background: #b9772f; color: #211208; }
.menu-hint { flex-shrink: 0; display: block; font-size: 12px; color: #bd9b73; margin-top: 20px; }
.version-content { min-height: 64px; max-height: 42vh; overflow: auto; overscroll-behavior: contain; text-align: left; padding: 0 8px 0 0; margin-bottom: 20px; }
.version-content article + article { border-top: 1px solid #c3914d55; margin-top: 20px; padding-top: 16px; }
.version-content h3 { font-size: 16px; margin: 0 0 8px; color: #ffe19a; }
.version-content ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; color: #dec6a8; }
.loading, .error { position: absolute; inset: 0; background: #1c110be8; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 8; color: #f3cb7d; }
.loading-coin { font-size: 46px; animation: spin 1s ease-in-out infinite; }
.loading p { font-size: 16px; letter-spacing: 3px; }
.error p { max-width: 75%; line-height: 1.8; word-break: break-word; }
.error button { padding: 12px 24px; border: 0; border-radius: 8px; background: #e2bd72; }
.error h2 { font-size: 24px; }
#game[aria-busy="true"] #hud { visibility: hidden; }
#diagnostics { position: absolute; bottom: 1%; left: 1%; max-height: 96%; overflow: hidden; z-index: 10; padding: 8px; background: #130b08e8; color: #f4cd8d; font-size: 10px; line-height: 1.4; pointer-events: none; }
.feedback-review { position: absolute; left: 2%; top: 3%; display: flex; flex-direction: column; gap: 8px; z-index: 11; }
.feedback-review button { padding: 9px 12px; border: 1px solid #e7bc71; background: #26170ee8; color: #ffe2ac; border-radius: 7px; font-size: 12px; }
/* 竖屏将分数置顶、操作置底；机台使用中间剩余空间，保留可触摸的按钮尺寸。 */
@media (max-aspect-ratio: 4/5) {
  #game { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  /* 竖屏也限制内容组高度，长手机和平板的额外空间平均分配在组外。 */
  .play-layout { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; max-height: min(100%, calc(min(560px, 100vw - 24px) / .9 + 290px)); }
  #hud { display: contents; }
  .topbar { order: 0; }
  #scene { order: 1; flex: 1; }
  .scoreboard { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-radius: 16px; }
  .stat { display: flex; align-items: baseline; gap: 5px; }
  .stat-label, .reward-stat .stat-label { font-size: 12px; letter-spacing: 0; }
  .stat strong { font-size: 30px; }
  .reward-stat { margin: 0; padding: 0; border: 0; }
  .reward-stat strong { font-size: 24px; }
  .stat .unit { display: none; }
  .utility-controls { order: 3; flex-wrap: nowrap; gap: 8px; }
  .audio-switches { width: auto; flex: 1; }
  .audio-toggle, .pause-button { padding: 8px; font-size: 14px; }
  .notices { order: 2; height: 64px; gap: 4px; }
  .spin-status, .toast { font-size: 12px; padding: 4px 8px; }
  .controls:has(.fullscreen[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .controls { order: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
  .drop-button { min-height: 64px; }
  .fullscreen { padding: 8px; }
  .fullscreen span { display: block; font-size: 12px; }
  .key-hint { grid-column: 1 / -1; line-height: 1.5; font-size: 11px; }
  .key-hint br { display: none; }
}
/* 小尺寸竖屏收紧装饰与间距，将更多高度留给机台，保持 44px 触控下限。 */
@media (max-aspect-ratio: 4/5) and (max-width: 480px) and (max-height: 680px) {
  .play-layout { gap: 6px; }
  .scoreboard { padding: 8px 12px; }
  .stat strong { font-size: 26px; }
  .reward-stat strong { font-size: 22px; }
  .notices { height: 56px; }
  .controls { gap: 6px; }
  .drop-button { min-height: 60px; padding: 8px 10px; }
  .drop-button>span:nth-child(2) { font-size: 18px; }
  .coin-icon { font-size: 24px; }
  .key-hint { font-size: 10px; }
}
/* 手机横屏和低矮窗口压缩间距，面板仍可滚动到所有操作。 */
@media (min-aspect-ratio: 4/5) and (max-height: 640px) {
  .play-layout { --panel-width: 226px; --layout-gap: 20px; }
  #hud { justify-content: safe center; gap: 8px; overflow-y: auto; padding: 4px; }
  .scoreboard { padding: 8px 12px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .stat strong { font-size: 30px; }
  .stat-label, .reward-stat .stat-label { font-size: 11px; letter-spacing: 0; }
  .stat .unit { display: none; }
  .reward-stat { border: 0; padding: 0; margin: 0; display: block; }
  .reward-stat strong { font-size: 24px; }
  .utility-controls { gap: 6px; flex-wrap: nowrap; }
  .audio-switches { gap: 4px; }
  .audio-toggle, .pause-button { font-size: 12px; padding: 6px; }
  .audio-toggle>span:first-child { display: none; }
  .pause-button { flex-shrink: 0; }
  .notices { height: 64px; gap: 4px; }
  .spin-status, .toast { font-size: 12px; padding: 4px; }
  .controls { gap: 8px; }
  .drop-button { min-height: 60px; }
  .key-hint { font-size: 11px; }
  [data-input="touch"] .key-hint { display: none; }
}
@media (min-aspect-ratio: 4/5) and (max-height: 420px) {
  .notices { height: 56px; }
  .controls { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; }
  .controls:has(.fullscreen[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .controls .key-hint { grid-column: 1 / -1; font-size: 10px; line-height: 1.5; }
  .drop-button { padding: 8px; }
  .drop-button>span:nth-child(2) { font-size: 18px; }
  .drop-sub { font-size: 11px; }
  .coin-icon, .button-key { display: none; }
  .fullscreen { padding: 4px; font-size: 18px; }
  .fullscreen span { display: block; font-size: 10px; }

  .menu-card { padding: 16px 20px; }
  .menu-card h2 { font-size: 23px; margin-bottom: 6px; }
  .menu-card p { margin-bottom: 12px; }
  .menu-hint { margin-top: 12px; }
  .menu-actions { gap: 8px; }
  .menu-actions button { padding: 8px; }
}
@keyframes spin { 50% { transform: scaleX(.15); } }
@media (prefers-reduced-motion: reduce) { .loading-coin { animation: none; } }