/* Fullscreen map during play: the map fills the viewport, panels float over it and are toggled from the dock. */
body.immersive { overflow: hidden; }
body.immersive #top, body.immersive #mobnav { display: none; }
body.immersive main { padding: 0; max-width: none; }
body.immersive #gameView { position: fixed; inset: 0; z-index: 30; background: #070a12; }

body.immersive .gamebar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; margin: 0; padding: 8px 12px; gap: 10px; flex-wrap: nowrap;
  background: linear-gradient(#070a12e6, #070a1200); pointer-events: none;
}
body.immersive .gamebar > * { pointer-events: auto; }
body.immersive .gtitle { font-size: 16px; white-space: nowrap; }
body.immersive .phase { font-size: 12px; white-space: nowrap; }
body.immersive .players-strip { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; pointer-events: none; }
body.immersive .players-strip .pcard { pointer-events: auto; flex: none; padding: 3px; background: #0d1220cc; }
body.immersive .players-strip .pcard > div { display: none; }
body.immersive .players-strip:hover { overflow-x: auto; }
body.immersive .players-strip .pcard:hover { padding: 3px 12px 3px 3px; }
body.immersive .players-strip .pcard:hover > div { display: block; }
body.immersive .dock { display: flex; gap: 4px; flex: none; }
.dock { display: none; }
.dock .btn { background: #0d1220cc; }
.dock .btn.on { border-color: var(--gold); color: var(--gold2); }

body.immersive .layout { display: block; }
body.immersive .col-left, body.immersive .col-mid, body.immersive .col-right { display: contents; }
body.immersive .layout .card + .card { margin-top: 0; }

body.immersive .mapcard {
  position: fixed; inset: 0; z-index: 1; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: #070a12;
}
body.immersive .mapcard .mapwrap { height: 100vh; min-height: 0; border: none; border-radius: 0; }
body.immersive .maptools {
  position: fixed; left: 12px; bottom: 12px; z-index: 12; margin: 0; padding: 6px 8px; max-width: calc(100vw - 24px);
  background: #0d1220e6; border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px);
}
body.immersive .legend {
  position: fixed; left: 12px; bottom: 58px; z-index: 12; max-width: min(420px, calc(100vw - 24px)); margin: 0; padding: 6px 10px;
  background: #0d1220e6; border: 1px solid var(--line); border-radius: 10px;
}

/* Floating panels */
.hq-setup {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 45;
  width: min(620px, calc(100vw - 24px)); max-height: 48vh; overflow-y: auto;
  padding: 18px; border: 2px solid var(--gold); border-radius: 12px;
  background: #101726f5; box-shadow: 0 8px 50px #000b; text-align: center;
}
.hq-setup h2 { color: var(--gold2); font-family: var(--serif); }
.hq-setup p { margin: 8px 0; }
.hq-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.hq-cities { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.hq-city { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; text-align: left; }
.hq-city.selected, .hq-city:focus-visible { border-color: var(--gold2); outline: 2px solid var(--gold); }
.hq-city small { display: block; color: var(--muted); }
.hq-crest { width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 6px; text-align: center; font-size: 28px; color: white; text-shadow: 0 1px 3px black; }
#gameView.choosing-hq .col-left, #gameView.choosing-hq .col-right,
#gameView.choosing-hq [data-pane], #gameView.choosing-hq #dock,
#gameView.choosing-hq #strip, #gameView.choosing-hq #delGame { display: none !important; }

body.immersive .col-left, body.immersive .col-right { display: block; }
body.immersive .col-left {
  position: fixed; left: 12px; top: 56px; width: 300px; max-height: calc(100vh - 130px); overflow-y: auto; z-index: 20; pointer-events: none;
}
body.immersive .col-right {
  position: fixed; right: 12px; top: 56px; width: 350px; max-height: calc(100vh - 70px); overflow-y: auto; z-index: 20; pointer-events: none;
}
body.immersive .col-left > .card, body.immersive .col-right > .card { pointer-events: auto; background: #161c2eee; backdrop-filter: blur(6px); }
body.immersive .col-left > .card + .card { margin-top: 10px; }
body.immersive [data-pane="log"] {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 58px; z-index: 20; width: min(680px, calc(100vw - 24px));
  background: #161c2eee; backdrop-filter: blur(6px);
}
body.immersive .scroll { max-height: 34vh; }

/* Panels are hidden until opened (!important beats the small-screen pane rules). */
body.immersive [data-pane]:not(.open) { display: none !important; }
body.immersive [data-pane].open { display: block !important; }
body.immersive .mapopts.open { display: inline !important; }
body.immersive .legend.open { display: flex !important; }

@media (max-width: 900px) {
  body.immersive .gamebar { flex-wrap: wrap; row-gap: 4px; }
  body.immersive .gtitle { display: none; }
  body.immersive .players-strip { order: 5; flex-basis: 100%; }
  body.immersive .dock { margin-left: auto; }
  body.immersive .col-left, body.immersive .col-right { left: 8px; right: 8px; width: auto; top: 88px; max-height: calc(100vh - 150px); }
  body.immersive [data-pane="log"] { bottom: 58px; }
  body.immersive .maptools { left: 8px; bottom: 8px; }
}

@media (max-width: 900px) {
  body.immersive.practicing .col-right { top: 96px; max-height: 30vh; }
  body.immersive.practicing .hq-setup { max-height: 44vh; }
}