/* =========================================
   BASE / RESET — "Neon Theater" Edition
   (All layout proportions preserved)
========================================= */
:root{
  /* Dark stage + neon palette */
  --bg: #0a0b0f;
  --bg-2: #0d0f17;

  --panel: #0c0f18;
  --panel-2: #0f1220;

  --ink: #f2f6ff;     /* high-contrast text */
  --muted: #a3adbb;

  --neon-g: #39ff14;  /* neon green */
  --neon-m: #ff2bd4;  /* neon magenta */
  --cyan:   #23d7ff;

  --accent: var(--neon-m);   /* primary accent = magenta */
  --accent-2: var(--neon-g); /* secondary accent = neon green */

  --border: #232736;
  --gap: 10px;
  --radius: 14px;

  /* Glow helpers */
  --glow-m: 0 0 0.5px rgba(255,43,212,.3), 0 0 10px rgba(255,43,212,.25), 0 0 22px rgba(255,43,212,.18);
  --glow-g: 0 0 0.5px rgba(57,255,20,.25), 0 0 8px rgba(57,255,20,.18), 0 0 18px rgba(57,255,20,.14);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  color: var(--ink);
  /* dual spotlights + subtle vignette */
  background:
    radial-gradient(900px 420px at 10% -20%, rgba(255,43,212,.16) 0%, transparent 55%) no-repeat,
    radial-gradient(900px 420px at 90% -15%, rgba(57,255,20,.12) 0%, transparent 55%) no-repeat,
    radial-gradient(1600px 700px at 50% -40%, rgba(0,0,0,.35), transparent 70%) no-repeat,
    var(--bg);
  font: 500 16px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  overflow: hidden; /* page never scrolls */
}

button, input { font: inherit; }
button { cursor: pointer; }
img, svg { display:block; max-width:100%; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.muted{ color:var(--muted); }

/* App root: keep exact 10/70/20 split (unchanged) */
.app{
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 2fr); /* 10/70/20 */
  gap: var(--gap);
  padding: var(--gap);
  overflow: hidden;
}

/* =========================================
   Shared panel look — neon edges, no layout change
========================================= */
.top-bar, .stage, .interface,
.party-bar, .stage-view, .mob-bar,
.log, .command-prompt, .utilities, .control-bar{
  background:
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%),
    radial-gradient(60% 140% at 100% -30%, rgba(255,43,212,.07), transparent 60%),
    radial-gradient(60% 140% at 0% -30%, rgba(57,255,20,.06), transparent 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  position: relative;
  overscroll-behavior: contain;
}

/* subtle scanlines for stagey feel (very faint) */
.top-bar::before, .stage::before, .interface::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,0) 1px);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity:.25;
  border-radius: inherit;
}

/* Let grid children shrink and own their scrollbars */
.top-bar, .stage, .interface { overflow: hidden; }
.top-bar > *, .stage > *, .interface > *{ min-width:0; min-height:0; }

/* Custom scrollbars (does not affect layout) */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,43,212,.55) rgba(20,22,32,1); }
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:#141623; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,43,212,.85), rgba(57,255,20,.85));
  border-radius:10px;
}

/* =========================================
   TOP BAR (time | plot) — equal columns (unchanged)
========================================= */
.top-bar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* true 50/50 */
  align-items: stretch;
  gap: var(--gap);
  padding: var(--gap);
}

.time-bar{
  display:flex; align-items:center; justify-content:center;
  border-radius: calc(var(--radius) - 6px);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,43,212,.10), rgba(57,255,20,.08) 60%, transparent 85%),
    #0e1320;
  outline:1px solid #1f2740;
  box-shadow: var(--glow-m), var(--glow-g);
  overflow:auto;
}
.time-bar .clock,
.time-bar .status{
  padding: .4rem .6rem;
  border-radius: 10px;
  border: 1px solid #2a3350;
  background: #0b1222;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 8px 16px rgba(0,0,0,.35);
}

/* horizontal strip for chips */
.plot-bar{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:8px; padding:8px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
.plot-bar > *{
  background:
    linear-gradient(180deg,#10172a,#0c1221),
    radial-gradient(100% 180% at 0% 0%, rgba(255,43,212,.16), transparent 60%);
  border:1px solid #27314b;
  border-radius:10px;
  padding:.35rem .6rem;
  white-space:nowrap;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.plot-bar > *:hover{
  border-color: rgba(255,43,212,.7);
  box-shadow: var(--glow-m);
}

/* =========================================
   STAGE (party 15 | scene 70 | mobs 15) — unchanged grid
========================================= */
.stage{
  display: grid;
  grid-template-columns: 15fr 70fr 15fr;
  grid-template-rows: 1fr;
  grid-template-areas: "party scene mobs";
  gap: var(--gap);
  padding: var(--gap);
  height: 100%;
  min-height: 0;
}

.party-bar{ grid-area: party; display:flex; flex-direction:column; overflow:auto; }
.party-list{ list-style:none; margin:0; padding:8px; display:grid; gap:8px; }
/* --- Stage layer wired to your overlay host --- */

/* Make the host a stacking context and clamp scroll to vertical only */
.scene-host{
  position: relative;       /* anchor absolutely-positioned children */
  display: block;           /* or flex; either works, we just need a box */
  overflow: hidden;         /* no sideways scroll; stage fills */
}

/* The image itself always fills and covers, no letterboxing */
#stageView img.stage-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill */
  pointer-events: none;
  user-select: none;
  background: #111;         /* visible while loading */
}

/* Overlays live above the stage */
.ui-overlay{ z-index: 3; }              /* your existing rule + stacking */
.overlay-backdrop{ z-index: 3; }
.overlay-viewport{ z-index: 4; }

/* Optional: keep the nice scene background but hide when the stage is showing */
.scene-host{ 
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(255,43,212,.12), transparent 60%) no-repeat,
    radial-gradient(900px 420px at 90% -15%, rgba(57,255,20,.10), transparent 60%) no-repeat,
    radial-gradient(1200px 560px at 50% 120%, rgba(35,215,255,.08), transparent 70%) no-repeat,
    #0a0e16;
}

.stage-view{
  grid-area: scene;
  position: relative;
  overflow: hidden;
  display: flex;
}
.scene-host{
  flex: 1 1 auto;
  overflow: auto;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(255,43,212,.12), transparent 60%) no-repeat,
    radial-gradient(900px 420px at 90% -15%, rgba(57,255,20,.10), transparent 60%) no-repeat,
    radial-gradient(1200px 560px at 50% 120%, rgba(35,215,255,.08), transparent 70%) no-repeat,
    #0a0e16;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* overlays pinned to scene (OverlayManager owns these) */
#stageView { position: relative; } /* defensive anchor */

#overlayHost.ui-overlay{
  position:absolute; inset:0; z-index:30;
}

#overlayHost[aria-hidden="true"] .overlay-backdrop,
#overlayHost[aria-hidden="true"] .overlay-viewport{
  display:none;            /* no ghost box when closed */
}

#overlayHost .overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(6,10,18,.55);  /* red/green colorblind friendly contrast */
  backdrop-filter: blur(2px);
}

#overlayHost .overlay-viewport{
  position:absolute; inset:0;      /* fill the entire stage */
  padding:0; overflow:hidden;
  background: transparent;
  border:0; box-shadow:none;
}

/* Fullscreen panel container that OverlayManager mounts */
.om-fullpanel{
  pointer-events:auto;
  width:100%; height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(14,18,32,.94), rgba(10,14,26,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  color:#eaf2ff;
}

/* Optional header/body defaults the panels can rely on */
.om-fullpanel .om-header{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,43,212,.06), rgba(35,215,255,.05));
}
.om-fullpanel .om-body{
  flex:1 1 auto; min-height:0; overflow:auto; padding:12px;
}


/* right: Mobs (pic over list) */
.mob-bar{
  grid-area: mobs;
  display: grid;
  grid-template-rows: auto 1fr;   /* let the portrait size itself */
  overflow: hidden;               /* outer never scrolls */
  min-height: 0;                  /* allow inner to scroll */
  min-width: 0;
}

.mob-pic{
  /* Keep your vibe; module adds its own layered bg too */
  background:
    radial-gradient(90% 120% at 50% 10%, rgba(57,255,20,.10), transparent 70%),
    #0c1220;
  border-bottom: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  min-height: 64px;               /* safety floor; module targets ~80px */
}

/* Vertical list container */
.mob-list{
  list-style: none;
  margin: 0;
  padding: 8px;

  /* DO NOT grid here; module sets #mobList.mob-list { display:flex; flex-direction:column } */
  display: block;

  overflow-y: auto;               /* vertical only */
  overflow-x: hidden;
  min-height: 0;                  /* critical for scroll inside grid */
  min-width: 0;
}

/* =========================================
   INTERFACE (Left 28 | Right 72) — unchanged grid + rows 8/1/1
========================================= */
.interface{
  display: grid;
  grid-template-columns: 28fr 72fr;
  grid-template-rows: 8fr 1fr 1fr;
  grid-template-areas:
    "log    controls"
    "prompt controls"
    "utils  controls";
  gap: var(--gap);
  padding: var(--gap);
  overflow: hidden;
}
.interface > * { min-width: 0; min-height: 0; }

/* Left column pieces */
.log{
  grid-area: log;
  overflow: auto;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255,43,212,.04), rgba(57,255,20,.02)),
    linear-gradient(180deg, #0d1220, #0c111d);
  border-radius: calc(var(--radius) - 6px);
}

.command-prompt{
  grid-area: prompt;
  display: flex;
  gap: 8px;
  padding: 10px;
  align-items: center;
  overflow: hidden;
}
.command-prompt input{
  flex: 1 1 auto; min-width: 0;
  padding: .65rem .8rem;
  background: #0b1220; color: var(--ink);
  border: 1px solid #24304a; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.command-prompt input:focus{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(255,43,212,.7), 0 0 0 4px rgba(57,255,20,.55);
}
.command-prompt button{
  padding: .65rem .9rem; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,43,212,1), rgba(255,43,212,.85));
  color: #fff; border: 0;
  box-shadow: var(--glow-m);
}
.command-prompt button:hover{
  background: linear-gradient(180deg, rgba(255,43,212,1), rgba(255,43,212,.95));
  transform: translateY(-1px);
}
.command-prompt button:active{ transform: translateY(0); }

.utilities{
  grid-area: utils;
  display: flex;
  gap: 8px;
  padding: 10px;
  align-items: center;
  overflow: auto;
}
.utilities button{
  background:
    linear-gradient(180deg, #0e1528, #0c1324);
  color: var(--ink);
  border: 1px solid #22304a; border-radius: 10px; padding: .55rem .8rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.utilities button:hover{
  border-color: rgba(57,255,20,.7);
  box-shadow: var(--glow-g);
}

/* Right column: control bar with 3 equal groups */
.control-bar{
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* movement | combat | other */
  grid-auto-rows: 1fr;          /* ← make each group fill the available height */
  align-items: stretch;          /* ensure groups stretch */
  gap: var(--gap);
  padding: 10px;
  overflow: hidden;              /* no outside scroll; let inner panels manage */
}

.controls-group{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3×3 default for movement/other */
  grid-auto-rows: 42px;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, #0d1321, #0b0f1b),
    radial-gradient(120% 160% at 100% 0%, rgba(255,43,212,.08), transparent 65%);
  border: 1px solid #212a3d; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  min-width: 0;                  /* ← important for grid overflow math */
  min-height: 0;                 /* ← important for grid overflow math */
}

/* Let the combat action bar manage its own grid */
#combatButtons.controls-group{
  display: block;                /* inner .cb-grid handles layout */
  min-width: 0;
  min-height: 0;
  height: 100%;                  /* ← gives our module a real height to fit into */
  overflow: hidden;              /* keeps picker/contents contained */
  padding: 8px;
}

/* Keep these for the plain buttons in movement/other */
.controls-group > button{
  border-radius: 10px;
  border: 1px solid #27344e;
  background: linear-gradient(180deg,#10192e,#0f1728);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  position: relative;
}
.controls-group > button:hover{
  border-color: rgba(35,215,255,.7);
  box-shadow: 0 0 0 1px rgba(35,215,255,.35), 0 0 20px rgba(35,215,255,.25);
}
.controls-group > button:active{ transform: translateY(1px); }

/* If you prefer to keep it as a grid wrapper instead of block, use this variant:
#combatButtons.controls-group{
  grid-template-columns: 1fr;           /* single slot for the inner .cb-grid */
  grid-auto-rows: minmax(56px, auto);   /* remove the fixed 42px row height */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
*/
/* Movement Pad — lets the module own its grid and autosize nicely */
#movementButtons.controls-group{
  display: block;        /* inner grid takes over */
  height: 100%;
  overflow: hidden;
  padding: 8px;
}

/* Inner 3×3 grid created by the module */
.mb-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;   /* fill available height evenly */
  gap: 8px;
  height: 100%;
  min-width: 0; 
  min-height: 0;
}

/* Buttons: square, responsive, match your existing button look */
.mb-grid .mb-btn{
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;                           /* keep squares */
  font-size: clamp(14px, 2.2vw, 22px);
  border-radius: 10px;
  border: 1px solid #27344e;
  background: linear-gradient(180deg,#10192e,#0f1728);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.mb-grid .mb-btn:hover{
  border-color: rgba(35,215,255,.7);
  box-shadow: 0 0 0 1px rgba(35,215,255,.35), 0 0 20px rgba(35,215,255,.25);
}
.mb-grid .mb-btn:active{ transform: translateY(1px); }

/* Optional: make the center button pop a bit */
.mb-grid .mb-btn.is-center{
  border-color: rgba(255,43,212,.55);
  box-shadow: var(--glow-m);
}

/* Fallback if a browser lacks aspect-ratio support (rectangles, but tidy) */
@supports not (aspect-ratio: 1 / 1){
  .mb-grid{ grid-auto-rows: calc((100% - 16px) / 3); } /* 2 gaps vertically (8px each) */
}

/* =========================================
   PARTY / LIST ITEM STYLES — colorblind-friendly cues
========================================= */
.party-slot-btn{
  all:unset;
  display:flex; gap:10px; width:100%;
  padding:8px; border:1px solid #22304a; border-radius:12px;
  background:
    linear-gradient(180deg,#0d1321,#0c111d),
    radial-gradient(120% 160% at 0% 0%, rgba(57,255,20,.08), transparent 60%);
}
.party-slot-btn:hover{ border-color: rgba(57,255,20,.6); box-shadow: var(--glow-g); }
.party-portrait{ width:42px; height:42px; border-radius:9px; background:
  conic-gradient(from 0deg, rgba(255,43,212,.18), rgba(57,255,20,.18), rgba(35,215,255,.18), rgba(255,43,212,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.party-name{ font-weight:700; letter-spacing:.2px; }

/* Bars: use color + pattern so meaning isn't color-only */
.bar{
  height:6px; background:#0f1627; border-radius:6px; overflow:hidden; margin-top:6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.bar .fill{
  display:block; height:100%; width:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,43,212,.35) 0 6px, rgba(57,255,20,.35) 6px 12px),
    linear-gradient(90deg, rgba(255,43,212,.85), rgba(57,255,20,.85));
  box-shadow: 0 0 12px rgba(255,43,212,.25), 0 0 12px rgba(57,255,20,.22);
  transition: width .25s ease-out;
}
/* Optional differentiators if you set classes: */
.bar.hp .fill{
  background:
    repeating-linear-gradient(45deg, rgba(255,43,212,.45) 0 6px, rgba(35,215,255,.35) 6px 12px),
    linear-gradient(90deg, rgba(255,43,212,.95), rgba(35,215,255,.85));
}
.bar.en .fill{
  background:
    radial-gradient(circle at 10px 50%, rgba(57,255,20,.5) 0 2px, transparent 3px) 0 0/12px 8px,
    linear-gradient(90deg, rgba(57,255,20,.9), rgba(35,215,255,.85));
}

/* =========================================
   STATES / ACCESSIBILITY
========================================= */
:focus-visible{
  outline:2px solid transparent;
  box-shadow:
    0 0 0 2px rgba(255,43,212,.9),
    0 0 0 4px rgba(57,255,20,.7);
  border-radius:10px;
}

/* High-visibility keyboard focus for buttons/links */
button:focus-visible, [role="button"]:focus-visible, a:focus-visible{
  box-shadow:
    0 0 0 2px rgba(35,215,255,.95),
    0 0 0 5px rgba(255,43,212,.6) !important;
}

/* =========================================
   RESPONSIVE
   (Core split locked; inner panels scroll)
========================================= */
/* No stacking media rules required */

/* =========================================
   MICRO-ANIMS (respect prefers-reduced-motion)
========================================= */
@media (prefers-reduced-motion: no-preference){
  .plot-bar > *{
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }
  .controls-group > button{
    transition: box-shadow .15s ease, transform .08s ease, border-color .15s ease;
  }
  .party-slot-btn{ transition: box-shadow .2s ease, border-color .2s ease; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =========================================
   DEBUG (toggle if needed)
========================================= */
/* *{ outline:1px dashed #2e3a54; outline-offset:-1px; } */


/* NEW: disabled state for locked UI during character creation */
#movementButtons[inert], #combatButtons[inert], #otherButtons[inert], #timeBar[inert]{
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.6);
}