:root { color-scheme: dark; --cyan: #6fe9ff; --green: #74ffbd; --edge: rgba(111, 233, 255, .33); }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: #e8f8fb;
  background: radial-gradient(circle at 50% 15%, rgba(18, 79, 98, .29), transparent 35rem), linear-gradient(#090e17, #020307 75%);
  font-family: "Courier New", ui-monospace, monospace; overscroll-behavior: none;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(#7fddf2 0.55px, transparent 0.7px); background-size: 29px 29px;
}
.app {
  position: relative; min-height: 100dvh; display: grid; place-content: center; gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.masthead, footer { width: min(94vw, 760px); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.home-link { color:inherit; text-decoration:none; }
.home-link:hover h1,.home-link:focus-visible h1 { color:var(--cyan); }
.home-link:focus-visible { border-radius:4px; outline:2px solid var(--cyan); outline-offset:5px; }
.masthead h1 { margin: 0; color: var(--green); font-size: clamp(24px, 5vw, 38px); line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.eyebrow { margin: 0 0 5px; color: #607b84; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.status { color: #799098; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.status span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.cabinet {
  width: min(94vw, 760px); overflow: hidden; border: 1px solid var(--edge); border-radius: 12px; background: #05080e;
  box-shadow: 0 24px 80px #000, inset 0 0 30px rgba(111, 233, 255, .04);
}
.screen { position: relative; width: 100%; aspect-ratio: 11 / 8; overflow: hidden; background: #fff; }
.screen ruffle-player, .screen ruffle-embed, .screen ruffle-object { display: block; width: 100% !important; height: 100% !important; outline: none; }
.load-error { display: grid; place-items: center; height: 100%; margin: 0; padding: 30px; color: #64172f; background: #fff; text-align: center; }
.touch-controls {
  display: none; min-height: 84px; padding: 11px 15px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--edge); background: rgba(6, 13, 22, .98); touch-action: none;
}
.move-controls { display: flex; gap: 10px; }
.control {
  width: 70px; height: 58px; border: 1px solid #416b7a; border-radius: 10px; color: var(--cyan);
  background: linear-gradient(#172735, #0a121c); box-shadow: inset 0 1px rgba(255,255,255,.08);
  font: 800 21px inherit; user-select: none; -webkit-tap-highlight-color: transparent;
}
.control.fire { width: 90px; border-color: #9f2d5f; color: #fff; background: linear-gradient(#a82f65, #591936); font-size: 15px; }
.control.active { transform: translateY(2px); filter: brightness(1.35); }
footer { align-items: center; color: #647982; font-size: 10px; }
footer p { margin: 0; }
footer strong { color: #9ab2b9; font-weight: normal; }
@media (hover: none), (pointer: coarse) { .touch-controls { display: flex; } .desktop-help { display: none; } }
@media (max-width: 520px) {
  .app { align-content: start; padding-top: max(11px, env(safe-area-inset-top)); }
  .masthead, footer { width: 100%; }
  .cabinet { width: 100vw; max-width: none; margin-inline: -12px; border-radius: 0; border-inline: 0; }
  .masthead h1 { font-size: 25px; } .status { font-size: 9px; } .control { width: 64px; height: 54px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .app { display: flex; justify-content: center; align-items: center; padding: 4px; }
  .masthead, footer { display: none; }
  .cabinet { width: min(96vw, 790px); display: grid; grid-template-columns: 1fr 104px; border-radius: 8px; }
  .touch-controls { min-height: 0; padding: 8px; flex-direction: column; }
  .move-controls { flex-direction: column; gap: 7px; }
  .control, .control.fire { width: 82px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }