:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04060c; color: #e6eeff;
  font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden; }
#stage { width: 100vw; height: 100vh; display: flex; flex-direction: column;
  padding: 10px; gap: 8px; }
header { display: flex; justify-content: space-between; align-items: center;
  background: #0b1222; border: 1px solid #1b2740; border-radius: 10px;
  padding: 8px 14px; flex: none; }
.brand { font-size: 20px; letter-spacing: 1px; white-space: nowrap; }
.live { color: #ff4d5e; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.dim { color: #5b6b8c; font-size: 13px; }
#score { font-size: 13px; text-align: right; }
main { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 8px; min-height: 0; }
#left, #right { display: flex; flex-direction: column; gap: 8px; min-height: 0;
  overflow-y: auto; overflow-x: hidden; }
.card { background: #0b1222; border: 1px solid #1b2740; border-radius: 10px;
  padding: 8px 12px; font-size: 12px; flex: none; }
#gamepane { background: #000; border: 1px solid #1b2740; border-radius: 10px;
  position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#framewrap { position: absolute; inset: 0; }
#frame { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; }
#plate { width: 100%; height: 300px; flex: none; background: #0b1222;
  border: 1px solid #1b2740; border-radius: 10px; }
footer { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 8px;
  flex: none; }
#action { font-size: 14px; min-height: 64px; overflow: hidden; }
#fly3d-wrap { position: relative; padding: 0 !important; overflow: hidden;
  height: 190px; background: #0b1222; border: 1px solid #1b2740; border-radius: 10px; }
#fly3d { width: 100%; height: 190px; display: block; cursor: grab; touch-action: none; }
#plate { touch-action: none; }
#fly3d-wrap .tag { position: absolute; left: 10px; bottom: 6px; font-size: 11px; color: #5b6b8c; }
.mono { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- mobile: stack everything, game first, page scrolls ---- */
@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }
  #stage { height: auto; min-height: 100vh; }
  header { flex-wrap: wrap; gap: 4px; }
  .brand { font-size: 15px; }
  #score { font-size: 11px; text-align: left; }
  main, footer { display: contents; }
  #gamepane { order: 1; position: relative; aspect-ratio: 16/9; flex: none; width: 100%; }
  #action { order: 2; font-size: 12px; }
  #fly3d-wrap { order: 3; height: 210px; }
  #fly3d { height: 210px; }
  #left { order: 4; overflow: visible; }
  #right { order: 5; overflow: visible; }
  #plate { height: 240px; }
}