/* HG_OS_SHELL_V14
   Progressive application chrome for Hamburg.Games.
   WEB = compact window, WEBMOBIL = responsive web window, MOBIL = full-screen shell. */
/* HG_GAME_FOCUS_PORTAL_V16 */

:root {
  --hg-os-red: #e2001a;
  --hg-os-paper: #f7f4ef;
  --hg-os-ink: #080a0d;
  --hg-os-line: rgba(255, 255, 255, 0.16);
  --hg-os-titlebar: 52px;
  --hg-os-setup: 40px;
  --hg-os-dock-height: 74px;
  --hg-os-safe-bottom: max(12px, env(safe-area-inset-bottom));
}

html[data-hg-os-ready="v14"] {
  scroll-padding-bottom: calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom));
}

html[data-hg-os-ready="v14"] body.hg-portal-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-bottom: calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom));
}

html[data-hg-os-ready="v14"] button,
html[data-hg-os-ready="v14"] a {
  -webkit-tap-highlight-color: transparent;
}

.hg-os-sr-only {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* V21 mobile gateway: the portal presents one clear, static play surface
   instead of booting a second copy of the game UI below the hero. */
.hg-mobile-game-gateway { display: none; }

/* The embedded desktop game is a deliberately compact product window. */
html[data-hg-surface="WEB"] .hg-portal-game-column {
  align-items: center;
  justify-content: center;
}

html[data-hg-surface="WEB"] .hg-portal-game-frame {
  width: min(800px, 100%);
  max-width: 800px;
  height: min(600px, calc(100svh - 118px));
  max-height: 600px;
  min-height: min(560px, calc(100svh - 118px));
  margin-inline: auto;
  border-radius: 20px;
}

.hg-portal-game-frame.hg-os-window-ready {
  --hg-os-frame-rows: var(--hg-os-titlebar) var(--hg-os-setup) minmax(0, 1fr);
  grid-template-rows: var(--hg-os-frame-rows);
  isolation: isolate;
}

.hg-os-window-ready .hg-portal-game-bar {
  min-height: var(--hg-os-titlebar);
  grid-template-columns: auto minmax(80px, 1fr) auto auto auto;
  gap: 8px;
  padding: 0 8px 0 12px;
  cursor: default;
  user-select: none;
}

.hg-os-window-ready .hg-portal-game-home,
.hg-os-window-ready .hg-portal-game-expand,
.hg-os-window-control {
  min-width: 44px;
  min-height: 44px;
}

.hg-os-window-ready .hg-portal-game-home {
  padding-inline: 7px;
  border-radius: 12px;
}

.hg-os-window-ready .hg-portal-game-home:hover,
.hg-os-window-ready .hg-portal-game-home:focus-visible,
.hg-os-window-ready .hg-portal-game-expand:hover,
.hg-os-window-ready .hg-portal-game-expand:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.hg-os-window-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hg-os-window-control {
  position: relative;
  width: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.hg-os-window-control svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hg-os-window-control:hover,
.hg-os-window-control:focus-visible {
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.hg-os-window-control--close {
  border-color: rgba(226, 0, 26, 0.52);
  color: #fff;
  background: var(--hg-os-red);
  box-shadow: 0 8px 22px rgba(226, 0, 26, 0.24);
}

.hg-os-window-control--close:hover,
.hg-os-window-control--close:focus-visible {
  border-color: #fff;
  background: #ff1833;
}

.hg-os-window-control:focus-visible,
.hg-os-dock-button:focus-visible,
.hg-os-window-backdrop:focus-visible,
#hgCreatorModal .hg-v2-modal-card > header button[data-hg-action="close-creator"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Short, persistent setup breadcrumb. It explains where the player is
   without placing another card over the character. */
.hg-os-setup {
  position: relative;
  z-index: 46009;
  min-width: 0;
  min-height: var(--hg-os-setup);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.48);
  background: rgba(7, 9, 12, 0.94);
  list-style: none;
}

.hg-os-setup li {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font: 850 8px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hg-os-setup li:last-child { border-right: 0; }

.hg-os-setup li::before {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: attr(data-step-number);
  font-size: 7px;
}

.hg-os-setup li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hg-os-setup li.is-done { color: rgba(255, 255, 255, 0.78); }
.hg-os-setup li.is-done::before { content: "✓"; border-color: rgba(255, 255, 255, 0.42); }
.hg-os-setup li.is-current { color: #fff; background: linear-gradient(90deg, rgba(226, 0, 26, 0.28), rgba(226, 0, 26, 0.04)); }
.hg-os-setup li.is-current::before { border-color: var(--hg-os-red); background: var(--hg-os-red); box-shadow: 0 0 0 4px rgba(226, 0, 26, 0.14); }
.hg-os-setup li.is-current::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; background: var(--hg-os-red); content: ""; }

/* Compact WEB focus, responsive WEBMOBIL focus, true full-screen MOBIL. */
.hg-os-window-backdrop {
  position: fixed;
  z-index: 48100;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 4, 7, 0.76);
  backdrop-filter: blur(18px) saturate(0.78);
  cursor: default;
}

body.hg-portal-game-focus .hg-os-window-backdrop { display: block; }

/* The V14 depth hero is normally an isolated Three.js stacking context. While
   its game window is focused, release that isolation so the fixed window can
   sit above the body-level backdrop instead of being painted underneath it. */
body.hg-portal-game-focus .hg-portal-hero {
  isolation: auto;
  overflow: visible;
}

body.hg-portal-game-focus .hg-portal-game-column {
  z-index: 48200 !important;
}

/* The live frame is moved here only while focused. This direct portal child
   has no perspective/transform containing block, so fixed positioning is
   always viewport-relative even when Play is opened from a deep station. */
.hg-os-focus-layer {
  position: fixed;
  z-index: 48300;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.hg-os-focus-layer[hidden] { display: none !important; }
body.hg-portal-game-focus .hg-os-focus-layer { pointer-events: auto; }
.hg-os-focus-layer > .hg-portal-game-frame { pointer-events: auto; }

html[data-hg-depth-tunnel] body.hg-portal-game-focus .hg-depth-tunnel-stage {
  z-index: 48250;
}

html[data-hg-depth-tunnel] body.hg-portal-game-focus .hg-os-window-backdrop {
  display: none;
}

/* HG_FOCUS_ROUTE_V15: fixed windows cannot remain inside a faded depth
   station. JS makes Home active first; this is the fail-safe first frame. */
body.hg-portal-game-focus .hg-depth-tunnel-station--home {
  z-index: 20 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.hg-portal-game-focus .hg-depth-tunnel-station:not(.hg-depth-tunnel-station--home) {
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-hg-surface="WEB"] body.hg-portal-game-focus .hg-portal-game-frame,
html[data-hg-surface="WEBMOBIL"] body.hg-portal-game-focus .hg-portal-game-frame {
  position: fixed;
  z-index: 48200;
  inset: auto auto auto 50%;
  top: calc((100dvh - var(--hg-tunnel-header, 74px) - var(--hg-os-dock-height) - var(--hg-os-safe-bottom)) / 2);
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  height: min(600px, calc(100dvh - var(--hg-tunnel-header, 74px) - var(--hg-os-dock-height) - var(--hg-os-safe-bottom) - 28px));
  max-height: 600px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  box-shadow: 0 46px 140px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(226, 0, 26, 0.22);
  transform: translate(-50%, -50%);
}

html[data-hg-surface="WEBMOBIL"] body.hg-portal-game-focus .hg-portal-game-frame {
  inset: 8px 10px calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom) + 8px);
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  transform: none;
}

html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-portal-game-frame {
  position: fixed;
  z-index: 48200;
  inset: 0 0 calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom)) 0;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* MOBIL has no outside-window area; the full-screen window itself is the
   backdrop. Keeping the desktop scrim here would cover the entire setup. */
html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-os-window-backdrop {
  display: none;
}

html[data-hg-surface="WEB"] body.hg-portal-game-focus.hg-os-game-maximized .hg-portal-game-frame {
  inset: 12px 12px calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom) + 10px);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 20px;
  transform: none;
}

body.hg-os-game-minimized:not(.hg-portal-game-focus) .hg-portal-game-frame {
  height: var(--hg-os-titlebar) !important;
  min-height: var(--hg-os-titlebar) !important;
}

body.hg-os-game-minimized:not(.hg-portal-game-focus) .hg-portal-game-frame .hg-os-setup,
body.hg-os-game-minimized:not(.hg-portal-game-focus) .hg-portal-game-frame .hg-portal-game-canvas {
  display: none !important;
}

/* Creator window: never let the escape control sit against or beyond an edge. */
html[data-hg-os-ready="v14"] #hgCreatorModal {
  z-index: 48600;
  box-sizing: border-box;
  padding: 16px 16px calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom) + 12px);
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card,
html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card.is-studio {
  width: min(820px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - var(--hg-os-dock-height) - var(--hg-os-safe-bottom) - 32px));
  max-width: 100%;
  max-height: 100%;
  border-radius: 22px;
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card > header {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 12px;
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card > header button[data-hg-action="close-creator"] {
  position: relative;
  z-index: 50;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background: var(--hg-os-red);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.56), 0 0 0 5px rgba(226, 0, 26, 0.16);
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card > header button[data-hg-action="close-creator"] span {
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  font-size: 30px;
  line-height: 1;
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card.is-studio > header {
  position: absolute !important;
  z-index: 60;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important;
  min-height: 50px;
  padding: 0;
  pointer-events: none;
}

html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card.is-studio > header button { pointer-events: auto; }

html[data-hg-os-ready="v14"] #hgCreatorSetup {
  box-sizing: border-box;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(226, 0, 26, 0.76) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

html[data-hg-os-ready="v14"] #hgCreatorSetup::-webkit-scrollbar { width: 8px; }
html[data-hg-os-ready="v14"] #hgCreatorSetup::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
html[data-hg-os-ready="v14"] #hgCreatorSetup::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(226, 0, 26, 0.76); }

/* Persistent Hamburg.Games dock. Five destinations, never a dead end. */
.hg-os-dock {
  position: fixed;
  z-index: 48900;
  right: 50%;
  bottom: var(--hg-os-safe-bottom);
  width: min(590px, calc(100vw - 24px));
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  background: rgba(12, 14, 18, 0.78);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(1.35);
  transform: translateX(50%);
}

.hg-cinema-launch:not([hidden]) ~ .hg-os-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hg-os-dock-button {
  position: relative;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.64);
  background: transparent;
  cursor: pointer;
}

.hg-os-dock-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hg-os-dock-button span {
  min-width: 0;
  overflow: hidden;
  font: 780 9px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hg-os-dock-button:hover,
.hg-os-dock-button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.hg-os-dock-button[aria-current="page"] {
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  background: linear-gradient(145deg, rgba(226, 0, 26, 0.95), rgba(153, 0, 18, 0.92));
  box-shadow: 0 9px 24px rgba(226, 0, 26, 0.22), inset 0 1px rgba(255, 255, 255, 0.2);
}

.hg-os-surface-chip {
  position: fixed;
  z-index: 48910;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom) + 8px);
  max-width: 110px;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(8, 10, 13, 0.72);
  font: 850 7px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(14px);
}

body.hg-portal-game-focus .hg-os-surface-chip { color: #fff; }

/* Focused play has its own in-world director and top-bar pause control. Hiding
   the portal dock removes the duplicate bottom navigation on every surface. */
body.hg-portal-game-focus .hg-os-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(50%, calc(100% + 24px));
}

body.hg-portal-game-focus .hg-mobile-director-dock { z-index: 49050; }
body.hg-portal-game-focus .hg-mobile-director-cue { z-index: 49040; }

/* V21 pause sheet. It lives above every portal/game stacking context and keeps
   the current WebGL world mounted; returning to the portal is an explicit
   secondary action rather than a side effect of tapping Menu or Escape. */
.hg-os-pause {
  position: fixed;
  z-index: 53500;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: auto;
  color: #f7f4ef;
  background:
    linear-gradient(90deg, rgba(3, 7, 12, 0.96), rgba(3, 7, 12, 0.7) 52%, rgba(3, 7, 12, 0.88)),
    url("/assets/visuals/hamburg-games-schanze-menu-v21.webp") center / cover no-repeat;
}

.hg-os-pause[hidden] { display: none !important; }

.hg-os-pause-card {
  width: min(780px, 100%);
  display: grid;
  gap: 22px;
  box-sizing: border-box;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(8, 14, 21, 0.94), rgba(5, 8, 12, 0.82));
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.64), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(1.15);
}

.hg-os-pause-copy { display: grid; gap: 9px; }
.hg-os-pause-copy small {
  color: #49d7ff;
  font: 850 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
}
.hg-os-pause-copy h2 {
  max-width: 700px;
  margin: 0;
  font: 850 clamp(32px, 6vw, 68px)/0.94 system-ui, -apple-system, sans-serif;
  letter-spacing: -0.055em;
}
.hg-os-pause-copy p {
  max-width: 570px;
  margin: 0;
  color: rgba(247, 244, 239, 0.7);
  font: 560 14px/1.55 system-ui, sans-serif;
}

.hg-os-performance { min-width: 0; margin: 0; padding: 0; border: 0; }
.hg-os-performance legend {
  margin-bottom: 10px;
  color: rgba(247, 244, 239, 0.68);
  font: 850 9px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hg-os-performance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hg-os-performance-grid button {
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  color: rgba(247, 244, 239, 0.7);
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
  cursor: pointer;
}
.hg-os-performance-grid button strong { color: #fff; font: 800 13px/1 system-ui, sans-serif; }
.hg-os-performance-grid button small { font: 650 9px/1.3 system-ui, sans-serif; }
.hg-os-performance-grid button[aria-pressed="true"] {
  border-color: #c8ff38;
  color: #07100d;
  background: #c8ff38;
  box-shadow: 0 12px 32px rgba(200, 255, 56, 0.2);
}
.hg-os-performance-grid button[aria-pressed="true"] strong { color: #07100d; }

.hg-os-pause-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 9px; }
.hg-os-pause-actions button {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 17px;
  font: 850 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.hg-os-pause-actions svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hg-os-pause-resume { border: 1px solid #fff; color: #fff; background: var(--hg-os-red); }
.hg-os-pause-portal { border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; background: rgba(255, 255, 255, 0.08); }
.hg-os-pause button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The world loading screen doubles as a light, cinematic loading card. The
   bitmap is 154 KB and replaces empty black without adding another renderer. */
.loading-screen {
  background:
    linear-gradient(180deg, rgba(4, 8, 13, 0.28), rgba(4, 8, 13, 0.9)),
    url("/assets/visuals/hamburg-games-schanze-menu-v21.webp") center / cover no-repeat !important;
}
.loading-screen .loading-brand,
.loading-screen .loading-track,
.loading-screen > small { position: relative; z-index: 1; }

@media (max-width: 959px) {
  :root { --hg-os-titlebar: 56px; --hg-os-setup: 40px; }

  .hg-os-window-ready .hg-portal-game-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 5px;
    padding-inline: 7px;
  }

  .hg-os-window-ready .hg-portal-game-meta { display: none; }
  .hg-os-window-ready .hg-portal-game-expand { display: none; }
  .hg-os-window-control--maximize { display: none; }

  .hg-os-dock {
    width: min(510px, calc(100vw - 16px));
    border-radius: 20px;
  }

  .hg-os-dock-button { min-height: 54px; padding-inline: 7px; }
  .hg-os-dock-button span { font-size: 8px; }

  .hg-os-surface-chip { display: none; }
}

@media (max-width: 599px) {
  :root { --hg-os-dock-height: 70px; }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-depth-tunnel-hud {
    display: none !important;
  }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-depth-tunnel-station--home .hg-portal-hero {
    min-height: calc(100dvh - var(--hg-tunnel-header, 58px));
    display: flex;
    background: transparent;
  }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-depth-tunnel-station--home .hg-portal-hero::after,
  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-depth-tunnel-station--home .hg-portal-hero-copy {
    display: none;
  }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-portal-game-column {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    padding: 10px 10px calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom) + 8px);
  }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-portal-game-column > .hg-portal-game-frame {
    display: none !important;
  }

  html[data-hg-surface="MOBIL"] body:not(.hg-portal-game-focus) .hg-mobile-game-gateway {
    position: relative;
    width: 100%;
    min-height: 0;
    display: grid;
    align-items: end;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 26px;
    color: #fff;
    background: #061019 url("/assets/visuals/hamburg-games-mobile-gateway-v21.webp") center 43% / cover no-repeat;
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.14);
    text-align: left;
    cursor: pointer;
    isolation: isolate;
  }

  .hg-mobile-game-gateway-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(2, 8, 13, 0.04) 12%, rgba(2, 8, 13, 0.2) 46%, rgba(2, 8, 13, 0.96) 86%),
      linear-gradient(90deg, rgba(2, 8, 13, 0.52), transparent 70%);
  }

  .hg-mobile-game-gateway-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 22px 20px 20px;
  }

  .hg-mobile-game-gateway-copy > small {
    color: #53d5df;
    font: 850 8px/1 system-ui, sans-serif;
    letter-spacing: 0.15em;
  }

  .hg-mobile-game-gateway-copy > strong {
    max-width: 320px;
    font: 900 clamp(36px, 12vw, 54px)/0.9 system-ui, -apple-system, sans-serif;
    letter-spacing: -0.065em;
  }

  .hg-mobile-game-gateway-copy > span {
    max-width: 310px;
    color: rgba(255, 255, 255, 0.72);
    font: 600 11px/1.45 system-ui, sans-serif;
  }

  .hg-mobile-game-gateway-copy > b {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 7px;
    border: 1px solid #fff;
    border-radius: 16px;
    color: #fff;
    background: var(--hg-os-red);
    box-shadow: 0 14px 34px rgba(226, 0, 26, 0.28);
    font: 900 12px/1 system-ui, sans-serif;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  .hg-mobile-game-gateway-copy > b svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .hg-mobile-game-gateway:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -5px;
  }

  html[data-hg-os-ready="v14"] body.hg-portal-page {
    padding-bottom: calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom));
  }

  .hg-os-window-ready .hg-portal-game-bar {
    padding-top: env(safe-area-inset-top);
    min-height: calc(var(--hg-os-titlebar) + env(safe-area-inset-top));
  }

  .hg-portal-game-frame.hg-os-window-ready {
    --hg-os-frame-rows: calc(var(--hg-os-titlebar) + env(safe-area-inset-top)) var(--hg-os-setup) minmax(0, 1fr);
  }

  .hg-os-window-ready .hg-portal-game-home { width: 44px; padding: 0; justify-content: center; }
  .hg-os-window-ready .hg-portal-game-home strong { display: none; }
  .hg-os-window-ready .hg-portal-game-language-slot { margin-inline: auto 0; }
  .hg-os-window-control--minimize { display: none; }
  .hg-os-window-control--close { display: none; }

  html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-portal-game-frame {
    inset: 0;
  }

  html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-os-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
  }

  html[data-hg-surface="MOBIL"].hg-mobile-game-active body.hg-portal-game-focus .hg-portal-game-frame {
    --hg-os-frame-rows: calc(var(--hg-os-titlebar) + env(safe-area-inset-top)) minmax(0, 1fr);
  }

  html[data-hg-surface="MOBIL"].hg-mobile-game-active body.hg-portal-game-focus .hg-os-setup {
    display: none !important;
  }

  html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-mobile-director-dock {
    z-index: 49050;
  }

  html[data-hg-surface="MOBIL"] body.hg-portal-game-focus .hg-mobile-director-cue {
    z-index: 49040;
  }

  .hg-os-setup li { gap: 5px; padding-inline: 4px; font-size: 7px; letter-spacing: 0.045em; }
  .hg-os-setup li::before { width: 17px; height: 17px; flex-basis: 17px; }

  html[data-hg-os-ready="v14"] #hgCreatorModal {
    padding: 0 0 calc(var(--hg-os-dock-height) + var(--hg-os-safe-bottom));
  }

  html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card,
  html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card.is-studio {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  html[data-hg-os-ready="v14"] #hgCreatorModal .hg-v2-modal-card.is-studio > header {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }

  .hg-os-dock {
    right: 4px;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: 4px;
    width: auto;
    padding: 5px;
    border-radius: 20px;
    transform: none;
  }

  .hg-os-dock-button {
    min-height: 58px;
    flex-direction: column;
    gap: 4px;
    padding: 5px 2px;
    border-radius: 15px;
  }

  .hg-os-dock-button svg { width: 21px; height: 21px; flex-basis: 21px; }
  .hg-os-dock-button span { width: 100%; font-size: 7px; letter-spacing: 0; }

  .hg-os-pause {
    place-items: end stretch;
    padding: max(12px, env(safe-area-inset-top)) 0 0;
    background:
      linear-gradient(180deg, rgba(3, 7, 12, 0.2), rgba(3, 7, 12, 0.93) 55%),
      url("/assets/visuals/hamburg-games-mobile-gateway-v21.webp") center top / cover no-repeat;
  }

  .hg-os-pause-card {
    width: 100%;
    gap: 17px;
    padding: 24px 16px max(18px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 26px 26px 0 0;
  }

  .hg-os-pause-copy h2 { font-size: clamp(34px, 12vw, 50px); }
  .hg-os-performance-grid { gap: 5px; }
  .hg-os-performance-grid button { min-height: 72px; padding: 9px; border-radius: 14px; }
  .hg-os-performance-grid button strong { font-size: 11px; }
  .hg-os-performance-grid button small { font-size: 7px; }
  .hg-os-pause-actions { grid-template-columns: 1fr; }

  .loading-screen {
    background:
      linear-gradient(180deg, rgba(4, 8, 13, 0.18), rgba(4, 8, 13, 0.92)),
      url("/assets/visuals/hamburg-games-mobile-gateway-v21.webp") center / cover no-repeat !important;
  }
}

@media (max-width: 350px) {
  .hg-os-window-ready .hg-portal-game-language-slot { display: none !important; }
  .hg-os-setup li span { display: none; }
  .hg-os-setup li { justify-content: center; }
  .hg-os-dock-button span { font-size: 6.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-os-dock,
  .hg-os-window-backdrop,
  .hg-os-window-control,
  .hg-os-dock-button,
  body.hg-portal-game-focus .hg-portal-game-frame {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* HG_CREATOR_WINDOW_V15
   The creator is a viewport-level product window, not an 800px game-window
   child. Desktop gets a centered 1240x800 studio; mobile gets the full screen.
   Portal and close are always visible without relying on the OS dock. */
html[data-hg-creator-ready="v15"] #hgCreatorModal {
  position: fixed !important;
  z-index: 52000 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 22px max(24px, env(safe-area-inset-right)) 22px max(24px, env(safe-area-inset-left)) !important;
  overflow: hidden;
  transform: none !important;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal[hidden] { display: none !important; }

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(226, 0, 26, 0.1), transparent 34%),
    rgba(3, 5, 8, 0.88);
  backdrop-filter: blur(24px) saturate(0.84);
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio {
  position: relative;
  width: min(1240px, calc(100vw - 64px)) !important;
  height: min(800px, calc(100dvh - 44px)) !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 28px !important;
  background: #080a0e;
  box-shadow: 0 48px 140px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(226, 0, 26, 0.24);
  transform: none !important;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card > header,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio > header {
  position: absolute !important;
  z-index: 80;
  inset: 0 0 auto !important;
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 14px 16px !important;
  border: 0;
  background: linear-gradient(180deg, rgba(4, 6, 9, 0.92), rgba(4, 6, 9, 0.18) 70%, transparent);
  pointer-events: none;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-title {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(280px, 35vw);
  display: grid;
  gap: 3px;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-title small {
  color: rgba(255, 255, 255, 0.52);
  font: 850 8px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-title strong {
  color: #fff;
  font: 850 12px/1.1 system-ui, sans-serif;
  letter-spacing: 0.08em;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close {
  position: relative !important;
  z-index: 2;
  min-height: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: rgba(7, 9, 13, 0.82) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.46) !important;
  pointer-events: auto;
  backdrop-filter: blur(18px);
  touch-action: manipulation;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home {
  width: auto !important;
  min-width: 166px !important;
  display: grid !important;
  grid-template-columns: 26px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  gap: 2px 9px;
  padding: 0 16px 0 12px !important;
  border-radius: 16px !important;
  text-align: left;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home > span {
  grid-row: 1 / 3;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #05070a;
  background: #fff;
  font: 900 17px/1 system-ui, sans-serif;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home b {
  font: 900 10px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home small {
  color: rgba(255, 255, 255, 0.55);
  font: 800 7px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close {
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #e2001a !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(226, 0, 26, 0.2) !important;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close > span {
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  font: 300 29px/1 system-ui, sans-serif;
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home:hover,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home:focus-visible,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close:hover,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  filter: brightness(1.14);
}

html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-studio-stage,
html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-studio-stage iframe {
  width: 100%;
  height: 100%;
}

body.hg-creator-open-v15 { overflow: hidden !important; }
body.hg-creator-open-v15 .hg-os-dock,
body.hg-creator-open-v15 .hg-os-surface-chip { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 959px) {
  html[data-hg-creator-ready="v15"] #hgCreatorModal { padding: 8px !important; }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card,
  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 599px) {
  html[data-hg-creator-ready="v15"] #hgCreatorModal { padding: 0 !important; }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card,
  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio {
    width: 100vw !important;
    height: 100dvh !important;
    border: 0;
    border-radius: 0 !important;
  }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card > header,
  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio > header {
    min-height: calc(66px + env(safe-area-inset-top));
    padding: max(9px, env(safe-area-inset-top)) 10px 8px !important;
  }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-title { display: none; }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-home {
    min-width: 148px !important;
    min-height: 48px !important;
    padding-inline: 10px !important;
    border-radius: 15px !important;
  }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v15-creator-close {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  /* HG_CREATOR_CTA_CLEARANCE_V22: once the embedded editor owns the screen,
     the round close control is the single portal escape. The wide duplicate
     badge must not cover the editor's save-and-play command. */
  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio .hg-v15-creator-home {
    display: none !important;
  }

  html[data-hg-creator-ready="v15"] #hgCreatorModal .hg-v2-modal-card.is-studio .hg-v15-creator-close {
    position: absolute !important;
    top: max(9px, env(safe-area-inset-top));
    right: 10px;
    left: auto;
  }
}