:root { color-scheme: dark; --cyan: #6fe9ff; --green: #74ffbd; --edge: rgba(111,233,255,.35); }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  color: #e8f8fb; background: radial-gradient(circle at 50% 10%, rgba(18,79,98,.34), transparent 45rem), linear-gradient(#090e17,#020307 78%);
  font-family: "Courier New", ui-monospace, monospace;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: radial-gradient(#7fddf2 .55px,transparent .7px); background-size: 29px 29px; }
.app {
  position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: clamp(6px,1.2vh,12px);
  width: min(100%,1100px); height: min(100dvh,920px); min-height: 320px; margin: auto;
  padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.hud, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.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:4px; }
.hud h1 { margin: 0; color: var(--green); font-size: clamp(20px,4vmin,36px); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.eyebrow { margin: 0 0 4px; color: #78919a; font-size: clamp(8px,1.5vmin,10px); letter-spacing: .14em; text-transform: uppercase; }
.desktop-help, .touch-help, footer { color: #8099a1; font-size: clamp(9px,1.7vmin,12px); letter-spacing: .03em; }
.desktop-help, .touch-help { margin: 0; text-align: right; }
.touch-help { display: none; color: var(--cyan); }
.cabinet { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: clamp(4px,1.4vmin,14px); background: #05080e; box-shadow: 0 18px 70px rgba(0,0,0,.78); touch-action: none; }
.screen, .screen ruffle-player, .screen ruffle-embed, .screen ruffle-object { display: block; width: 100% !important; height: 100% !important; min-width: 0; min-height: 0; outline: none; }
.load-error { display: grid; place-items: center; height: 100%; margin: 0; padding: 24px; color: #64172f; background: #fff; text-align: center; }
.gesture-layer { position: absolute; inset: 0; display: none; align-items: end; justify-content: center; padding: 12px; pointer-events: none; user-select: none; -webkit-user-select: none; }
.gesture-hint { padding: 7px 11px; border: 1px solid rgba(111,233,255,.38); border-radius: 999px; color: #d9faff; background: rgba(2,7,12,.74); box-shadow: 0 4px 18px rgba(0,0,0,.38); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; transition: opacity .25s ease; pointer-events: none; }
.gesture-layer.engaged .gesture-hint { opacity: 0; }
footer { min-height: 18px; }
.status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.utility { flex: none; padding: 4px 8px; border: 1px solid #365965; border-radius: 5px; color: #a9c6ce; background: #09121b; font: inherit; }
@media (hover: none), (pointer: coarse) { .gesture-layer { display: flex; } .touch-help { display: block; } .desktop-help { display: none; } }
@media (max-width: 480px) { .app { gap: 5px; padding-inline: 0; } .hud, footer { padding-inline: 8px; } .hud h1 { font-size: 21px; } .eyebrow { font-size: 8px; } .cabinet { border-inline: 0; border-radius: 0; } .status { max-width: 68vw; } }
@media (max-height: 430px) { .app { grid-template-rows: minmax(0,1fr); padding: 0; } .hud, footer { display: none; } .cabinet { border: 0; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }