* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font: 11px Tahoma, Verdana, sans-serif;
  color: #111;
  background: #ece9d8;
  user-select: none;
}
button { font: inherit; }
.app-shell { width: 100%; height: 100%; display: flex; flex-direction: column; background: #ece9d8; }

.menu-bar {
  height: 25px; display: flex; align-items: stretch; flex: 0 0 25px;
  padding-left: 2px; background: #ece9d8; border-bottom: 1px solid #aca899; z-index: 50;
}
.menu { position: relative; }
.menu-button {
  height: 24px; padding: 0 9px; border: 1px solid transparent; background: transparent; cursor: default;
}
.menu.open > .menu-button, .menu-button:hover { background: #316ac5; color: #fff; border-color: #316ac5; }
.menu-popup {
  position: absolute; display: none; top: 23px; left: 0; min-width: 190px; padding: 2px;
  border: 1px solid #777; background: #ece9d8; box-shadow: 2px 2px 4px rgba(0,0,0,.35); z-index: 100;
}
.menu.open .menu-popup { display: block; }
.menu-popup button {
  width: 100%; height: 24px; display: flex; justify-content: space-between; align-items: center;
  border: 0; background: transparent; padding: 0 24px; text-align: left; cursor: default;
}
.menu-popup button:hover { color: #fff; background: #316ac5; }
.menu-popup button span { color: #666; margin-left: 18px; }
.menu-popup button:hover span { color: #fff; }
.menu-popup hr { height: 1px; margin: 3px 2px; border: 0; background: #aaa; }

.game-layout { min-height: 0; flex: 1; display: flex; gap: 8px; padding: 8px; overflow: hidden; }
.table-area { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.table-bezel {
  position: relative; height: min(100%, 820px); max-width: 100%; aspect-ratio: 600 / 820;
  border: 3px solid #777; border-top-color: #fff; border-left-color: #fff;
  background: #171827; box-shadow: inset 0 0 0 2px #222, 2px 2px 0 #555;
}
#pinball { width: 100%; height: 100%; display: block; outline: none; background: #050817; touch-action: none; }
#pinball:focus { box-shadow: inset 0 0 0 1px #7fb4ff; }

.game-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,22,.72); z-index: 10;
}
.game-overlay.hidden { display: none; }
.overlay-card {
  width: min(76%, 330px); padding: 18px 18px 14px; text-align: center; color: #fff;
  border: 2px solid #70dcff; background: linear-gradient(#172153,#0b1030);
  box-shadow: 0 0 24px rgba(65,190,255,.35), inset 0 0 22px rgba(94,110,255,.25);
}
.orbital-mark {
  width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 8px;
  border-radius: 50%; border: 3px solid #75efff; color: #fff; font: bold 20px Arial;
  box-shadow: 0 0 13px #2ee5ff, inset 0 0 10px #283fd6;
}
.overlay-card h1 { margin: 0; font: bold 24px Arial, sans-serif; letter-spacing: 1px; }
.overlay-card p { margin: 3px 0 15px; color: #ff73db; font-weight: bold; letter-spacing: 3px; }
.overlay-card button {
  min-width: 110px; padding: 5px 12px; border: 2px outset #fff; background: #ece9d8; color: #000; cursor: pointer;
}
.overlay-card button:active { border-style: inset; }
.overlay-card small { display: block; margin-top: 12px; color: #aeb6df; font-size: 9px; }

.control-panel { width: 224px; flex: 0 0 224px; display: flex; flex-direction: column; gap: 7px; overflow: auto; }
.score-panel, .mission-panel, .plunger-panel, .controls-panel {
  border: 2px groove #fff; background: #d4d0c8; padding: 7px;
}
.score-panel { background: #11141c; color: #e8f2ff; border-color: #777; }
.panel-label { color: #83a8d8; font-size: 9px; letter-spacing: 2px; }
.digital {
  display: block; color: #ff4b4b; background: #080809; border: 1px inset #555;
  padding: 3px 5px; font: bold 14px "Courier New", monospace; letter-spacing: 1px; text-align: right;
  text-shadow: 0 0 5px rgba(255,40,40,.65);
}
.digital.big { margin: 3px 0 7px; font-size: 22px; letter-spacing: 2px; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.score-grid > div > span { display: block; margin-bottom: 2px; color: #7586a0; font-size: 8px; }
#status-light {
  min-height: 24px; display: flex; align-items: center; justify-content: center; border: 1px inset #555;
  background: #171b22; color: #7dff85; font: bold 11px "Courier New", monospace;
}
#status-light.alert { color: #ff5a5a; text-shadow: 0 0 5px #f00; }

.mission-panel h2, .controls-panel h2 { margin: 0 0 6px; color: #244a9b; font-size: 12px; }
.mission-panel p { margin: 0 0 7px; color: #444; line-height: 15px; }
.lamp-row, .target-row { display: flex; gap: 5px; margin: 5px 0; }
.lamp, .target-lamp {
  width: 27px; height: 23px; display: grid; place-items: center; border: 2px inset #fff;
  background: #555; color: #bbb; font-weight: bold; box-shadow: inset 0 0 7px rgba(0,0,0,.6);
}
.lamp.on { background: #24caff; color: #fff; box-shadow: 0 0 8px #24caff, inset 0 0 7px #09609c; }
.target-lamp.on { background: #ff47c8; color: #fff; box-shadow: 0 0 8px #ff47c8, inset 0 0 7px #8c176f; }
.mission-message { min-height: 31px; margin-top: 8px; padding: 5px; border: 1px inset #fff; background: #fff; color: #333; font-size: 10px; }

.plunger-panel > span { display: block; color: #244a9b; font-weight: bold; margin-bottom: 5px; }
.charge-track { height: 16px; padding: 2px; border: 2px inset #fff; background: #fff; }
#charge-fill { width: 0%; height: 100%; background: linear-gradient(90deg,#2d68db,#44d6ff,#ff57d2); }
.plunger-panel small { display: block; margin-top: 4px; color: #555; }

.controls-panel dl { margin: 0; }
.controls-panel dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dotted #aaa; }
.controls-panel dt { color: #333; }
.controls-panel dd { margin: 0; font-weight: bold; }
.tilt-note { margin: 7px 0 0; color: #8a2d2d; font-size: 9px; line-height: 13px; }

.touch-controls { display: none; width: 100%; max-width: 600px; grid-template-columns: 1.2fr .8fr .9fr 1.2fr; gap: 4px; }
.touch-controls button { min-height: 34px; border: 2px outset #fff; background: #d4d0c8; font-weight: bold; color: #123; touch-action: none; }
.touch-controls button:active, .touch-controls button.pressed { border-style: inset; background: #b9c9e9; }

.status-bar { height: 22px; flex: 0 0 22px; display: flex; align-items: center; background: #ece9d8; border-top: 1px solid #aaa; }
.status-bar span { height: 18px; display: flex; align-items: center; padding: 0 7px; border-right: 1px solid #aaa; }
.status-bar span:first-child { flex: 1; }

.dialog-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); z-index: 200; }
.dialog-backdrop.hidden { display: none; }
.dialog-box { width: min(420px, calc(100vw - 30px)); border: 3px solid #0054e3; border-radius: 6px 6px 0 0; background: #ece9d8; box-shadow: 4px 5px 12px rgba(0,0,0,.4); }
.dialog-box > header { height: 28px; display: flex; align-items: center; padding: 0 7px; color: white; font-weight: bold; background: linear-gradient(#1a8cff,#0054e3 55%,#0040b0); }
.dialog-body { min-height: 80px; padding: 15px; background: white; line-height: 16px; user-select: text; white-space: pre-line; }
.dialog-box > footer { display: flex; justify-content: flex-end; padding: 8px; }
.dialog-box > footer button { min-width: 75px; padding: 4px 12px; }

@media (max-width: 760px), (pointer: coarse) {
  .game-layout { padding: 4px; gap: 4px; }
  .control-panel { width: 170px; flex-basis: 170px; }
  .controls-panel { display: none; }
  .touch-controls { display: grid; }
}
@media (max-width: 560px) {
  body { overflow: auto; }
  html, body { min-height: 100%; height: auto; }
  .app-shell { min-height: 100vh; height: auto; }
  .game-layout { flex-direction: column; overflow: visible; }
  .table-area { width: 100%; }
  .table-bezel { width: min(100%, 500px); height: auto; }
  .control-panel { width: 100%; flex-basis: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .status-bar { position: sticky; bottom: 0; }
}