* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

body {
  background: #000;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  color: #fff;
  overscroll-behavior: none;
  touch-action: none;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* UI Container */
#ui {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  display: none;
  /* Hidden by default, shown in JS */
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 10;
}

#ui-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-item {
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #444;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 2px #000;
  color: #0ff;
}

.hud-item.best {
  color: #ffaa00;
  border-color: #aa6600;
}

/* Pause Button */
#pauseBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #0ff;
  background: rgba(0, 0, 0, 0.6);
  color: #0ff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
  display: none;
}

/* Status Text */
#status {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 4px #000;
  pointer-events: none;
  z-index: 5;
}

/* Pause Menu */
#pauseMenu,
#startMenu {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 20;
}

#pauseMenu.visible,
#startMenu.visible {
  display: flex;
}

.hidden {
  display: none !important;
}

.no-script-warning {
  position: fixed;
  inset: 45% 1rem auto;
  z-index: 50;
  color: #fff;
  text-align: center;
}

.menu-panel {
  background: #111;
  border: 1px solid #0ff;
  border-radius: 8px;
  padding: 20px;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.menu-panel--wide {
  width: min(92vw, 560px);
}

.menu-copy {
  margin: 0 0 14px;
  color: #d4e7e7;
  line-height: 1.45;
}

.menu-copy--muted {
  min-height: 2.9em;
  margin-top: 12px;
  color: #8aa;
  font-size: 13px;
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.menu-panel .difficulty-btn {
  min-width: 0;
  margin: 0;
  padding: 10px 5px;
  color: #9bb;
  border-color: #355;
  background: #071515;
  font-size: 12px;
}

.menu-panel .difficulty-btn.active {
  color: #fff;
  border-color: #0ff;
  background: #064044;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
}

.menu-panel .difficulty-btn--danger.active {
  border-color: #ff5555;
  background: #4a1010;
}

.menu-store-link {
  display: block;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 213, 74, .45);
  border-radius: 8px;
  color: #ffd54a;
  text-decoration: none;
  font: 700 12px monospace;
  letter-spacing: .04em;
  text-align: center;
  background: rgba(255, 213, 74, .08);
}

.portal-perks-info {
  margin-top: 7px;
  color: #8fa8a8;
  font: 11px/1.35 monospace;
  text-align: center;
}

.menu-best {
  margin-top: 14px;
  color: #ffaa00;
  font-size: 13px;
}

.menu-title {
  font-size: 24px;
  color: #0ff;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #0ff;
}

.menu-panel button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  background: #002222;
  border: 1px solid #0ff;
  color: #0ff;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
}

.menu-panel button:active {
  background: #004444;
}

#exitBtn {
  border-color: #ff5555;
  color: #ff5555;
  background: #220000;
}

#exitBtn:active {
  background: #440000;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  #startMenu,
  #pauseMenu {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .menu-panel {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .difficulty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hud-item {
    font-size: 12px;
    padding: 2px 6px;
  }

  #pauseBtn {
    width: 36px;
    height: 36px;
  }
}
/* Shared three-language selector inside the game menu. */
.game-language-switch {
  width: auto;
  min-width: 94px;
  margin: 0 auto 12px;
  padding: 8px 12px;
  color: #fff;
  background: #11182d;
  border: 1px solid #5de3ff;
  border-radius: 8px;
  font: 700 14px/1 system-ui, sans-serif;
}

/* Touch devices: protect controls from display cut-outs and keep menus scrollable. */
@media (max-width: 900px),
(hover: none) and (pointer: coarse) {
  canvas {
    height: 100dvh;
  }

  #ui {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    min-width: 0;
    gap: 8px;
  }

  #ui-left { min-width: 0; }

  .hud-item {
    max-width: calc(100vw - 78px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pauseBtn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    touch-action: manipulation;
  }

  #status {
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    overflow-wrap: anywhere;
  }

  #startMenu,
  #pauseMenu {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }

  .menu-panel,
  .menu-panel--wide {
    width: min(100%, 560px);
    min-width: 0;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .menu-panel button,
  .menu-panel .difficulty-btn,
  .menu-store-link,
  .game-language-switch {
    min-height: 44px;
    touch-action: manipulation;
  }

  .safe-exit-btn { min-height: 44px; touch-action: manipulation; }

  .menu-panel button { margin-block: 7px; }
  .menu-panel .difficulty-btn { margin: 0; }
  .game-language-switch { font-size: 16px; }
}

@media (max-width: 430px) {
  .menu-panel { padding: 14px 12px; }
  .menu-copy { font-size: 0.88rem; }
  .menu-copy--muted { min-height: 0; }
  .difficulty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-title { overflow-wrap: anywhere; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .menu-panel { padding-block: 10px; }
  .menu-title { margin-bottom: 8px; font-size: 18px; }
  .menu-copy { margin-bottom: 8px; font-size: 0.78rem; }
  .menu-panel button { min-height: 44px; margin-block: 4px; padding-block: 8px; }
}
/* Mission control */
[hidden] { display:none!important; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background:#080e19; }
body[data-janitor-state="PLAYING"] #safe-exit-btn { display:none; }
button, a { -webkit-tap-highlight-color:transparent; }
button, a, select { touch-action:manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible { outline:3px solid #ffe49a; outline-offset:3px; }
#game:focus-visible { outline:2px solid #64d6e2; outline-offset:-2px; }
.menu-panel { background:linear-gradient(145deg,#152a38,#101822); border:1px solid #537e90; border-radius:22px; padding:26px; max-height:calc(100dvh - 28px); overflow-y:auto; touch-action:pan-y; }
.menu-panel * { touch-action:pan-y; }
.menu-panel button, .menu-panel a, .menu-panel select { touch-action:manipulation; }
.menu-title { font-weight:800; font-size:clamp(22px,4vw,30px); color:#d5f8ef; text-shadow:none; letter-spacing:.04em; }
.menu-panel button { border-radius:10px; min-height:46px; background:#193944; border-color:#547f8b; color:#d5f8ff; font-size:14px; transition:background .15s; }
.menu-panel button:hover { background:#295362; color:#fff; -webkit-text-fill-color:currentColor; }
.menu-panel .difficulty-btn:hover { background:#275363; color:#fff; }
#startBtn, #continueBtn, #retryBtn { background:#316e61; color:#fff; border-color:#83c8ac; }
#startBtn:hover, #continueBtn:hover, #retryBtn:hover { background:#438570; }
#exitBtn { color:#ffd1c6; background:#522e30; border-color:#ab7372; }
#exitBtn:hover { color:#fff; background:#754045; }
.briefing { padding:12px 14px; margin:12px 0 18px; background:#07121c80; border:1px solid #6e95a033; border-radius:12px; text-align:left; color:#b8cbd4; font-size:12px; line-height:1.65; }
.briefing p+p { margin-top:7px; }
.mode-best, .save-status { font-size:12px; line-height:1.6; margin:10px 0; color:#dbcba0; }
.save-status { color:#bcd3cf; }
#ui { top:max(12px,env(safe-area-inset-top,0px)); left:14px; right:14px; gap:12px; }
#ui-left { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; max-width:720px; width:calc(100% - 58px); padding:10px; background:#0c1e2be8; border:1px solid #476071; border-radius:14px; }
.hud-item { border:0; padding:3px 4px; color:#c2e6e9; font-size:11px; background:transparent; text-shadow:none; }
.hud-item.best { border:0; color:#ecd6a0; }
#pauseBtn { min-width:44px; height:44px; border-color:#8dbcc8; background:#112836; color:#e9ffff; }
#pauseBtn:hover { background:#345264; color:#fff; }
.mission-hud { position:fixed; left:14px; bottom:max(16px,env(safe-area-inset-bottom,0px)); width:min(520px,calc(100% - 146px)); padding:13px 15px; border:1px solid #547785; border-radius:14px; background:#102531e8; color:#d4e6e5; z-index:10; pointer-events:none; font-size:12px; }
.mission-heading { display:flex; justify-content:space-between; gap:8px; color:#e9daae; margin-bottom:9px; }
.mission-goals { display:flex; flex-wrap:wrap; gap:6px 14px; }
#mission-progress { width:100%; height:5px; border:0; border-radius:5px; accent-color:#8bd6b7; margin:10px 0 6px; display:block; }
#mission-progress::-webkit-progress-bar { background:#ffffff21; }
#mission-progress::-webkit-progress-value { background:#8bd6b7; }
#boss-status { color:#9dbac5; font-size:11px; }
.dash-button { position:fixed; right:14px; bottom:max(18px,env(safe-area-inset-bottom,0px)); width:112px; min-height:72px; border:1px solid #96d3c0; border-radius:18px; background:#285e57; color:#eafff5; z-index:12; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font:inherit; }
.dash-button span { font-size:11px; }
.dash-button:hover { background:#3e7d70; color:#fff; }
.dash-button:disabled { background:#253640; color:#b2c5c9; border-color:#617b84; cursor:default; }
#status { bottom:165px; width:auto; left:14px; right:14px; font-size:13px; color:#f7e3b4; }
#resultMenu { position:fixed; inset:0; z-index:25; display:flex; align-items:center; justify-content:center; padding:14px; background:#050b14dd; }
.eyebrow { color:#81c7b8; font-size:11px; letter-spacing:.18em; margin-bottom:14px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }
.result-grid>div { padding:16px 10px; background:#0b1724; border-radius:12px; border:1px solid #405c6a; display:flex; flex-direction:column; gap:8px; }
.result-grid span { color:#a4c4ce; font-size:11px; }
.result-grid strong { font-size:25px; color:#e2f0d1; }
#restartDialog { margin:auto; max-width:480px; width:calc(100% - 28px); padding:24px; color:#e3f3ed; border:1px solid #749896; border-radius:18px; background:#152d38; }
#restartDialog::backdrop { background:#020814cc; }
#restartDialog p { margin:18px 0; color:#b8d0d1; line-height:1.6; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
.dialog-actions button { padding:12px; min-height:46px; flex:1; background:#285751; border:1px solid #80bdab; color:#fff; border-radius:10px; font:inherit; cursor:pointer; }
.dialog-actions button:hover { background:#3d7868; }
@media(max-width:600px) {
  .menu-panel { padding:20px 16px; }
  #ui { left:8px; right:8px; }
  #ui-left { grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px; }
  .hud-item { font-size:10px; max-width:100%; }
  .mission-hud { left:8px; width:calc(100% - 116px); padding:11px; font-size:11px; }
  .mission-heading { flex-wrap:wrap; gap:4px; }
  .mission-goals { gap:4px 10px; }
  .dash-button { width:92px; right:8px; }
  #status { bottom:180px; }
}
@media(max-height:500px) and (orientation:landscape) {
  #ui-left { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:640px; }
  .mission-hud { padding:8px 12px; }
  #boss-status { display:none; }
  .mission-heading { margin-bottom:4px; }
  #status { bottom:112px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Keep the bitmap inside the viewport while resize events are pending. */
#game{max-width:100vw;max-height:100dvh}