/* Play shell: the real game fills the whole browser window. */
:root {
  color-scheme: dark light;
  --bg: #0a1830;
  --text-2: #b4c4de;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}
.stage {
  position: fixed;
  inset: 0;
}
.frame,
.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-2);
  font: 800 1.2rem/1 "Baloo 2", system-ui, sans-serif;
}
.sr {
  color: #f3f7ff;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Account controls belong to the browser shell, leaving the game's HUD and mechanics intact. */
body { font-family: system-ui, sans-serif; }
.account-bar { position: fixed; inset: 0 0 auto; z-index: 2; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0a1830; border-bottom: 1px solid #304563; color: #c5d3e7; font-size: 12px; }
.account-bar button { border: 1px solid #668db1; border-radius: 999px; background: #163252; color: #fff; font: 650 12px/1.2 system-ui,sans-serif; padding: 8px 13px; cursor: pointer; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 34px; }
.account-bar button:hover { background: #244663; }
.stage { top: calc(48px + env(safe-area-inset-top)); }
iframe[hidden] { display: none; }
#account-dialog { border: 1px solid #536a86; border-radius: 24px; padding: 28px; width: min(440px,calc(100vw - 28px)); max-height: calc(100dvh - 48px); overflow-y: auto; background: #122640; color: #f3f7ff; box-shadow: 0 20px 100px #0009; }
#account-dialog::backdrop { background: #061426bd; }
#account-dialog h2 { font-size: 24px; line-height: 1.15; margin: 0 0 12px; }
#account-dialog p { font-size: 15px; line-height: 1.55; color: #c5d3e7; margin: 0 0 22px; }
#account-dialog button { width: 100%; border: 1px solid #536a86; border-radius: 12px; background: #203b59; color: #f3f7ff; font: 650 14px/1.3 system-ui,sans-serif; padding: 13px 12px; margin-top: 10px; cursor: pointer; min-height: 46px; }
#account-dialog .account-primary { background: #fff; color: #192b43; border-color: #fff; }
#account-dialog button:hover { filter: brightness(1.1); }
#account-dialog button:focus-visible,.account-bar button:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
@media(max-width: 520px) { .account-bar { gap: 6px; padding-left: 9px; padding-right: 9px; font-size: 10px; } .account-bar button { font-size: 11px; padding: 8px 9px; max-width: 67%; } #account-dialog { padding: 24px; } }