/* ======================================================================
   MAP ROOM — single visual authority
   The approved 1672×941 artwork supplies all structural chrome, the Fleet
   Deployment panel, Auto/Randomize controls, and the complete Deploy art.
   Live DOM layers provide interaction without repainting those elements.
   ====================================================================== */

#mapScreen{background:#02040b}
#mapScreen .map-dimmer,#mapScreen .spectral-frame,#mapScreen .map-room{display:none!important}

.r3g-map-shell{position:absolute;inset:0;overflow:hidden;background:#02040b}
.r3g-map-stage{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100vw,calc(100vh * 1672 / 941));
  height:min(100vh,calc(100vw * 941 / 1672));
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 34px rgba(0,0,0,.80));
}
.r3g-map-art{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  -webkit-mask:url('../assets/images/map-room/map-room-frame-mask.svg') center/100% 100% no-repeat;
  mask:url('../assets/images/map-room/map-room-frame-mask.svg') center/100% 100% no-repeat;
}
.r3g-map-stage::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at 52% 48%,transparent 58%,rgba(0,0,0,.11) 100%);
}

/* Approved utility placement: controls in the upper-left storm bay and the
   official CGH mark in the upper-right storm bay. */
.r3g-map-utilities{
  position:absolute;
  z-index:32;
  left:2.2%;
  top:4.1%;
  display:flex;
  align-items:center;
  gap:clamp(5px,.42vw,9px);
}
.r3g-map-utility-btn{
  min-height:clamp(30px,4.35vh,42px);
  padding:0 clamp(10px,.88vw,16px);
  border:1px solid rgba(214,216,221,.58);
  color:#f1f1f3;
  background:linear-gradient(180deg,rgba(16,19,29,.97),rgba(3,4,10,.98));
  box-shadow:0 8px 20px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.06);
  font:700 clamp(9px,.66vw,13px) Consolas,'Courier New',monospace;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.r3g-map-utility-btn span{margin-right:.35em;color:#cfd3dc}
.r3g-map-utility-btn:hover,.r3g-map-utility-btn:focus-visible{
  border-color:#fff;
  outline:2px solid rgba(57,120,255,.72);
  outline-offset:2px;
  background:linear-gradient(180deg,rgba(22,29,50,.98),rgba(5,7,16,.99));
  box-shadow:0 0 22px rgba(31,91,216,.24),0 9px 22px rgba(0,0,0,.55);
}
.r3g-map-utility-btn.off{color:#999ca4;border-color:rgba(160,162,168,.44)}
.r3g-map-utility-btn.off span{color:#777a82}

.r3g-map-cgh{
  position:absolute;
  z-index:32;
  right:2.05%;
  top:3.25%;
  width:15.1%;
  overflow:hidden;
  border:1px solid rgba(214,216,221,.70);
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.58);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.r3g-map-cgh::after{
  content:'';
  position:absolute;
  inset:3px;
  border:1px solid rgba(31,91,216,.22);
  pointer-events:none;
  clip-path:inherit;
}
.r3g-map-cgh img{display:block;width:100%;height:auto}
.r3g-map-cgh:hover,.r3g-map-cgh:focus-visible{
  outline:2px solid rgba(57,120,255,.72);
  outline-offset:3px;
  box-shadow:0 0 24px rgba(31,91,216,.24),0 11px 28px rgba(0,0,0,.62);
}

/* The framed opening is wider than a square-cell 20×18 board. The active
   square-cell field is centered invisibly inside one continuous navy sea. */
.r3g-board-window{
  position:absolute;
  left:19.15%;
  top:16.72%;
  width:58.05%;
  height:73.35%;
  z-index:8;
  overflow:visible;
  background:
    radial-gradient(ellipse at 34% 20%,rgba(31,91,216,.12),transparent 44%),
    radial-gradient(ellipse at 72% 76%,rgba(18,43,112,.11),transparent 52%),
    linear-gradient(145deg,#08122d,#050b1e 58%,#030817);
  box-shadow:inset 0 0 42px rgba(0,0,0,.56),inset 0 0 0 1px rgba(214,216,221,.13);
}
#mapScreen .ocean-grid{
  position:absolute;
  left:50%;
  top:0;
  width:79.02%;
  height:100%;
  transform:translateX(-50%);
  transform-origin:50% 50%;
  overflow:visible;
  cursor:crosshair;
  background:transparent;
}
#mapScreen .ocean-grid::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  box-shadow:inset 0 0 26px rgba(0,0,0,.20);
}

/* Live island and formation layers. */
#mapScreen .tactical-island{
  position:absolute;
  z-index:2;
  overflow:visible;
  contain:layout paint;
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.48));
}
#mapScreen .tactical-island-art{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  display:block;
  max-width:none;
  max-height:none;
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
#mapScreen .tactical-island-cell{position:absolute;border:0;background:transparent;box-shadow:none;overflow:hidden}
#mapScreen .tactical-island-cell::before{display:none}

#mapScreen .placed-formation,#mapScreen .formation-preview{position:absolute;overflow:visible}
#mapScreen .placed-formation{z-index:10;cursor:grab;filter:drop-shadow(0 4px 5px rgba(0,0,0,.64))}
#mapScreen .placed-formation:active{cursor:grabbing}
#mapScreen .formation-preview{z-index:14;pointer-events:none}
#mapScreen .ship-component{position:absolute;overflow:visible;pointer-events:none}
#mapScreen .ship-component img{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  max-width:none;
  max-height:none;
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
#mapScreen .formation-outline-cell{position:absolute;border:1px solid transparent;pointer-events:none}
#mapScreen .placed-formation .ship-component img{opacity:.42;filter:saturate(.62) brightness(.88) contrast(1.13) drop-shadow(0 0 2px rgba(83,111,192,.30))}
#mapScreen .placed-formation.selected .ship-component img{opacity:1;filter:saturate(.92) brightness(1.03) drop-shadow(0 0 5px rgba(111,153,255,.42))}
#mapScreen .formation-preview .ship-component img{opacity:.54}
#mapScreen .formation-preview.invalid .ship-component img{opacity:.27;filter:grayscale(.60)}

#mapScreen .fleet-thumb-stage{position:relative;transform-origin:center}
#mapScreen .deployment-splash,#mapScreen .deployment-ripple,#mapScreen .cloak-glimmer{
  position:absolute;
  z-index:26;
  left:50%;
  top:50%;
  pointer-events:none;
  mix-blend-mode:screen;
}
#mapScreen .deployment-splash{
  width:58%;
  height:58%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.88) 0 3%,rgba(141,171,255,.54) 7%,rgba(57,120,255,.18) 24%,transparent 62%);
  animation:r3iSplash .72s ease-out both;
}
#mapScreen .deployment-ripple{
  width:54%;
  height:36%;
  border:1.5px solid rgba(160,181,255,.72);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:r3iRipple 1.05s ease-out both;
}
#mapScreen .deployment-ripple.ripple-two{animation-delay:.14s}
#mapScreen .cloak-glimmer{
  inset:-14%;
  left:-14%;
  top:-14%;
  width:128%;
  height:128%;
  border-radius:22%;
  background:radial-gradient(ellipse,rgba(255,255,255,.66),rgba(83,119,235,.24) 11%,transparent 60%);
  animation:r3iGlimmer 1.2s ease-out both;
}
#mapScreen .placed-formation.cloaking .ship-component img{animation:r3iHullCloak 1.2s ease-out both}
@keyframes r3iSplash{0%{opacity:0;scale:.3}18%{opacity:.95}100%{opacity:0;scale:1.45}}
@keyframes r3iRipple{0%{opacity:.8;scale:.28}100%{opacity:0;scale:2.1}}
@keyframes r3iGlimmer{0%{opacity:0}18%{opacity:.92}100%{opacity:0}}
@keyframes r3iHullCloak{0%{opacity:1;filter:brightness(1.1)}100%{opacity:.42;filter:saturate(.62) brightness(.88) contrast(1.13)}}

/* The approved Fleet panel remains visible in the background artwork. These
   seven transparent rows are its interaction and state layer. */
.r3g-fleet-live{
  position:absolute;
  left:77.63%;
  top:20.37%;
  width:19.26%;
  height:51.72%;
  z-index:12;
  display:flex;
  flex-direction:column;
  background:transparent;
  border:0;
}
#mapScreen .fleet-rack{display:grid;grid-template-rows:repeat(7,1fr);gap:0;padding:0;min-height:0;flex:1}
#mapScreen .fleet-card{
  position:relative;
  display:block;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease;
}
#mapScreen .fleet-card>*{opacity:0;pointer-events:none}
#mapScreen .fleet-card:hover{background:rgba(57,120,255,.055);box-shadow:inset 0 0 0 1px rgba(111,153,255,.18)}
#mapScreen .fleet-card:focus-visible{outline:2px solid rgba(111,153,255,.72);outline-offset:-3px}
#mapScreen .fleet-card.selected{
  background:linear-gradient(90deg,rgba(57,120,255,.15),rgba(31,91,216,.035) 58%,transparent);
  box-shadow:inset 2px 0 0 rgba(158,177,255,.92),inset 0 0 0 1px rgba(111,153,255,.29);
}
#mapScreen .fleet-card.placed::after{
  content:'';
  position:absolute;
  left:1.8%;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background:#6f99ff;
  box-shadow:0 0 8px rgba(57,120,255,.86);
}
#mapScreen .fleet-count{
  position:absolute;
  right:2.1%;
  top:-7.4%;
  color:#d4d6dc;
  font:700 clamp(8px,.58vw,12px) Consolas,'Courier New',monospace;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 1px 4px #000;
  white-space:nowrap;
}

/* Transparent hit areas preserve the exact approved Auto Place, Randomize,
   and illustrated DEPLOY FLEET artwork beneath them. */
.r3g-fleet-actions{
  position:absolute;
  left:77.72%;
  top:73.34%;
  width:19.17%;
  height:5.46%;
  z-index:16;
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:2.75%;
}
#mapScreen .command-btn{
  position:relative;
  border:0;
  background:transparent;
  color:transparent;
  box-shadow:none;
  text-shadow:none;
  font-size:0;
  cursor:pointer;
}
#mapScreen .command-btn:hover,#mapScreen .command-btn:focus-visible{
  outline:1px solid rgba(111,153,255,.46);
  outline-offset:-2px;
  background:rgba(57,120,255,.065);
  box-shadow:inset 0 0 18px rgba(31,91,216,.18);
}
#mapScreen .command-btn:active{background:rgba(111,153,255,.12)}

#deployFleetBtn{
  position:absolute;
  left:77.73%;
  top:80.43%;
  width:19.17%;
  height:9.73%;
  z-index:18;
  overflow:visible;
  border:0;
  background:transparent;
  color:transparent;
  box-shadow:none;
  text-shadow:none;
  font-size:0;
  cursor:pointer;
  clip-path:polygon(2% 0,98% 0,100% 20%,100% 76%,89% 100%,11% 100%,0 76%,0 20%);
}
#deployFleetBtn:hover,#deployFleetBtn:focus-visible{
  outline:2px solid rgba(111,153,255,.58);
  outline-offset:-3px;
  background:rgba(57,120,255,.055);
  box-shadow:inset 0 0 28px rgba(31,91,216,.20);
}
#deployFleetBtn.ready{animation:r3gDeployReady 1.65s ease-in-out infinite}
@keyframes r3gDeployReady{
  0%,100%{background:rgba(31,91,216,.02);box-shadow:inset 0 0 18px rgba(31,91,216,.10),0 0 8px rgba(31,91,216,.08)}
  50%{background:rgba(57,120,255,.09);box-shadow:inset 0 0 38px rgba(57,120,255,.34),0 0 24px rgba(31,91,216,.42)}
}

#mapStatus{
  position:absolute;
  left:31%;
  top:17.65%;
  z-index:24;
  width:44%;
  overflow:hidden;
  color:rgba(214,216,221,.80);
  font:700 clamp(8px,.58vw,12px) Consolas,'Courier New',monospace;
  letter-spacing:.07em;
  text-align:center;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px #000;
  white-space:nowrap;
  pointer-events:none;
}
#mapStatus.good{color:#cfd9ff}
#mapStatus.bad{color:#ff9b88}
.r3g-hidden-controls{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Exact approved CSS radar registration. Do not alter these coordinates. */
.ambient-radar{
  position:absolute;
  left:1.78%;
  top:67.66%;
  z-index:7;
  width:11.22%;
  height:10.62%;
  overflow:hidden;
  opacity:.72;
  pointer-events:none;
  mix-blend-mode:screen;
  clip-path:polygon(5% 15%,72% 0,100% 61%,20% 100%);
}
.ambient-radar::before{display:none}
.ambient-radar .radar-sweep{
  position:absolute;
  left:-7.75%;
  top:-1.45%;
  width:70%;
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 330deg,rgba(47,193,249,.015) 338deg,rgba(90,219,255,.10) 350deg,rgba(184,245,255,.42) 358deg,rgba(228,253,255,.68) 359.4deg,transparent 360deg);
  animation:r3gRadarSweep 4.8s linear infinite;
  filter:blur(.25px) drop-shadow(0 0 2px rgba(75,205,255,.22));
  transform-origin:center;
}
.ambient-radar .radar-blip{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  opacity:.8;
  background:#d8f9ff;
  box-shadow:0 0 4px #c7f5ff,0 0 8px rgba(66,196,249,.72);
  animation:r3gBlip 2.4s ease-in-out infinite;
}
.ambient-radar .b1{left:31%;top:54%;animation-delay:.2s}
.ambient-radar .b2{left:45%;top:39%;animation-delay:1.1s}
.ambient-radar .b3{left:21%;top:66%;animation-delay:1.7s}
@keyframes r3gRadarSweep{to{transform:rotate(360deg)}}
@keyframes r3gBlip{0%,35%,100%{opacity:.16;transform:scale(.65)}52%,70%{opacity:1;transform:scale(1.25)}}

@media(max-aspect-ratio:1672/941){.r3g-map-stage{width:100vw;height:calc(100vw * 941 / 1672)}}
@media(min-aspect-ratio:1672/941){.r3g-map-stage{height:100vh;width:calc(100vh * 1672 / 941)}}
@media(max-width:900px){
  .r3g-map-utilities{left:1.7%;gap:3px}
  .r3g-map-utility-btn{min-height:26px;padding:0 7px;font-size:7px;letter-spacing:.06em}
  .r3g-map-cgh{right:1.7%;width:16.5%}
}
@media(prefers-reduced-motion:reduce){
  #deployFleetBtn.ready,.ambient-radar .radar-sweep,.ambient-radar .radar-blip,#mapScreen .deployment-splash,#mapScreen .deployment-ripple,#mapScreen .cloak-glimmer,#mapScreen .placed-formation.cloaking .ship-component img{animation:none}
}