/* ===== Hex Map Maker – Stylesheet ===== */

/* ---------- Core theme ---------- */
:root{
  --bg:#0b0f14; --panel:#121826; --ink:#e8eef6; --muted:#93a4b8; --border:#1f2a3a;
  --dock-w: clamp(380px, 28vw, 760px);
  --los-stroke:#ffd54a;

  /* BattleTech vibes */
  --bt-amber:#ffd06e;
  --bt-amber-dim:#e0b45c;
  --bt-edge:#2a1e07;

  /* Safe-area + header height */
  --safe-top: env(safe-area-inset-top, 0px);
  --app-top-offset: max(20px, var(--safe-top));
  --header-h: 48px; /* updated by JS below */
}

html,body{
  height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{width:0;height:0;display:none;}
[hidden]{ display:none !important; }

/* ---------- Layout ---------- */
.wrap{
  position: relative;
  min-height: 100dvh;                 /* safe viewport */
  padding-top: var(--app-top-offset); /* safe-area lip */
  display:flex;                        /* header + stage stack */
  flex-direction:column;
}

/* ---------- Top bar ---------- */
.ui-topbar{
  display:flex;
  flex-wrap:wrap;           /* allow multiple rows */
  align-items:center;
  gap:12px;
  padding:6px 10px;
  background:#121826;
  border-bottom:1px solid var(--border);
  height:auto;              /* can grow when wrapped */
  min-height:48px;
  overflow:visible;
  margin-top:0 !important;
  box-sizing:border-box;
  z-index:30;
}

/* Brand and spacer */
.brand{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.spacer{ flex:1 1 auto; min-width:0; }

/* Toolbar buttons (don’t shrink) */
.icon-btn{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:10px;
  background:#0f1722;
  border:1px solid var(--border);
  display:grid; place-items:center;
  cursor:pointer; color:var(--ink);
}
.icon-btn:hover{ filter:brightness(1.06); }
.ico{ width:18px; height:18px; }

/* Segmented control (Terrain/Mechs) */
.seg-group{
  display:flex; gap:0; border:1px solid var(--border);
  border-radius:10px; overflow:hidden; background:#0f1722; flex:0 0 auto;
}
.seg-btn{
  display:flex; align-items:center; gap:8px; padding:6px 10px; height:36px;
  background:transparent; border:none; border-right:1px solid var(--border);
}
.seg-btn:last-child{ border-right:none; }
.seg-btn .label{ font-size:13px; letter-spacing:.02em; color:var(--ink); opacity:.95; }
.seg-btn:hover{ filter:brightness(1.08); }
.seg-btn:active{ transform:translateY(1px); }

/* Flechs dock toggles in top bar */
.flechs-top{
  display:flex; align-items:center; gap:6px; padding-left:8px;
  border-left:1px solid var(--border); flex:0 0 auto;
}
.flechs-ico{ width:18px; height:18px; border-radius:4px; box-shadow:0 0 0 1px #0006; }

/* Force Online/Send to break to a new row when needed */
.toolbar-row {
  display: inline-flex;       /* make sure it's flex */
  align-items: center;
  gap: 20px;                  /* spacing between each child */
}

/* Slightly tighter on narrow screens */
@media (max-width: 720px){
  .ui-topbar{ gap:8px; padding:6px 8px; }
}

/* ---------- Panels (drawers) ---------- */
.panel{
  position:fixed;
  top:calc(var(--header-h) + var(--app-top-offset));
  bottom:0; width:340px; background:var(--panel);
  border-top:1px solid var(--border);
  box-shadow:0 0 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column; z-index:20;
  transform:translateX(0); transition:transform .2s ease;
}
.panel.left{left:0}
.panel.right{right:0}
.panel.collapsed.left{transform:translateX(-100%)}
.panel.collapsed.right{transform:translateX(100%)}

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px; border-bottom:1px solid var(--border); background:#0f1722;
}
.panel-head h2{margin:0;font-size:14px;letter-spacing:.06em}
.panel-body{padding:10px;overflow:auto;display:flex;flex-direction:column;gap:12px}

/* ---------- Groups & form elements ---------- */
.group{border:1px solid var(--border);border-radius:14px;padding:10px;background:#0f1522}
.group h3{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.gap{gap:10px}
.row.between{justify-content:space-between;align-items:center}
.stack{display:flex;flex-direction:column;gap:4px;flex:1}
.stack input,.stack select,.group textarea{
  background:#0c1220;border:1px solid var(--border);border-radius:10px;padding:8px;color:var(--ink)
}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

/* Buttons */
.btn{
  background:#1a2333;border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:5px 8px;border-radius:8px;font-size:12px}
.btn.w100{width:100%}

/* Inline mech form layouts */
.mp-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.mp-actions{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:end; }
.mp-actions .btn{ height:38px; padding:8px 12px; }

/* Two-column utility grid */
.group-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 1120px){ .group-grid-2{ grid-template-columns:1fr; } }

/* ---------- Legend (kept for engine) ---------- */
.legend{margin:4px 0 0}
.legend-radio{display:grid;grid-template-columns:1fr;gap:8px;}
.terrain-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  background:#0f1722;border:1px solid #232c3e;border-radius:10px;padding:8px 10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.terrain-row input[type="radio"]{accent-color:var(--bt-amber-dim);transform:scale(1.05);}
.terrain-row label{display:flex;align-items:center;gap:8px;color:var(--ink);cursor:pointer;}
.sw{width:16px;height:16px;border-radius:4px;border:1px solid #0006;box-shadow:inset 0 0 0 1px #0004;}
.btn-fill{
  padding:6px 10px;border-radius:8px;border:1px solid var(--bt-edge);
  background:linear-gradient(180deg,#141c2a,#0b111d);
  color:var(--bt-amber);font-weight:600;letter-spacing:.04em;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 1px 0 rgba(0,0,0,.6),0 0 0 1px #0005;
}
.btn-fill:hover{filter:brightness(1.05);}
.btn-fill:active{transform:translateY(1px);}

/* ---------- Stage + SVG ---------- */
.stage{
  position:relative;
  overflow:hidden;
  flex: 1 1 auto; /* ← fills the space below the header, no hard height calc */
  min-height:0;   /* allow shrinking inside flex */
}
svg{
  width:100%; height:100%;
  display:block; background:#0f1722; outline:none;
  cursor:default; touch-action:none;
}
.hex{cursor:pointer;}
.hex:hover{filter:brightness(1.05);}
.lbl{text-anchor:middle;dominant-baseline:middle;pointer-events:none;fill:currentColor;font-weight:200;}
.label-outline{paint-order:stroke fill;stroke:#000;}
.gridBorder{stroke:#00000033;stroke-width:1;fill:none;}
.coord{pointer-events:none;font-weight:700;fill:currentColor;}

/* ---------- Docks ---------- */
.dock{
  position:absolute; top:calc(var(--header-h) + var(--app-top-offset) + 2px); bottom:10px;
  width:var(--dock-w); display:none; flex-direction:column;
  background:var(--panel); border:1px solid #2b3548; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.02); z-index:25;
}
.dock.show{display:flex;}
.dock-left{left:10px;}
.dock-right{right:10px;}
.dock header{display:flex;gap:6px;align-items:center;padding:8px;background:#0f1722;border-bottom:1px solid #2b3548;}
.dock header .spacer{flex:1;}
.dock iframe{width:100%;height:100%;border:0;background:#fff;}
.dock .hint{font-size:12px;color:var(--muted);padding:6px 10px;}

/* ---------- LOS rendering ---------- */
#los-group,#los-rays{pointer-events:none;}
.los-source{stroke:var(--los-stroke);stroke-width:3;fill:none;}
.los-visible{stroke:var(--los-stroke);stroke-width:2;fill:none;opacity:.9;}
.los-ray{stroke:var(--los-stroke);stroke-width:1;opacity:.5;}

/* ---------- TOKENS ---------- */
.token .base{fill:#ffffffd9;}
.token .ring{fill:none;}
.token .nose{stroke:#000;stroke-width:1.5;}
.token .tlabel{
  text-anchor:middle;dominant-baseline:middle;pointer-events:none;fill:#0b0f14;font-weight:200;
  paint-order:stroke fill;stroke:#000;stroke-width:.8px;
}
.token.selected .ring{filter:drop-shadow(0 0 6px rgba(255,255,255,.55));}

/* ---------- Measure overlay ---------- */
#measure-group{pointer-events:none;}
.measure-line{stroke:#64ffd5;stroke-width:2.5;stroke-dasharray:6,6;opacity:.95;}
.measure-dot{fill:#64ffd5;opacity:.95;}
.measure-label{
  fill:#0b0f14;font-weight:700;text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke fill;stroke:#000;stroke-width:2px;
}

/* ---------- Boot Overlay ---------- */
#btBoot{
  position:fixed; inset:0;
  background:radial-gradient(1200px 700px at 50% 40%,#0c0e08 0%,#070806 60%,#020302 100%);
  display:flex;align-items:center;justify-content:center;z-index:1000;color:#e7e0c2;
  font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  letter-spacing:.02em;overflow:hidden;transition:opacity .6s ease,visibility .6s ease;
}
#btBoot.bt-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.bt-vignette{ position:absolute; inset:-10%; box-shadow:inset 0 0 160px 60px rgba(0,0,0,.9),inset 0 0 320px 120px rgba(0,0,0,.6); pointer-events:none; }
.bt-scanlines{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 2px,transparent 2px,transparent 4px); mix-blend-mode:multiply; animation:bt-scan 6s linear infinite; pointer-events:none; }
@keyframes bt-scan{0%{opacity:.35;}50%{opacity:.2;}100%{opacity:.35;}}
.bt-content{width:min(820px,86vw);padding:28px 24px;position:relative;}
.bt-title{
  margin:0 0 6px;font-size:20px;letter-spacing:.18em;text-transform:uppercase;color:var(--bt-amber);
  text-shadow:0 0 10px rgba(255,200,64,.25),0 0 2px #a06900;
}
.bt-sub{color:#c6b892;opacity:.9;margin-bottom:14px;border-bottom:1px solid #3b2e10;padding-bottom:8px;}
.bt-log{
  background:rgba(14,12,7,.35);border:1px solid #3b2e10;border-radius:10px;padding:14px 16px;height:min(300px,42vh);
  overflow:auto;color:#f6eacd;text-shadow:0 0 1px rgba(255,210,120,.35);box-shadow:inset 0 0 24px rgba(0,0,0,.35);
}
.bt-progress{ height:12px;border:1px solid #3b2e10;border-radius:999px;margin-top:14px;background:#1a1408; box-shadow:inset 0 0 8px rgba(0,0,0,.65); }
.bt-bar{
  height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#8d6b1f,#f2b450,#ffe19b);
  box-shadow:0 0 8px #f2b45080,inset 0 0 6px #2b1c00;transition:width .18s ease;
}
.bt-hint{
  margin-top:10px;color:#c6b892;opacity:.8;text-align:right;font-size:12px;
  animation:bt-blink 1.4s steps(2, jump-none) infinite;
}
@keyframes bt-blink{50%{opacity:.35;}}

/* ---------- Right drawer specifics ---------- */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{border:1px solid var(--border);border-radius:12px;background:#0c1220;padding:8px}
.init-list li.current{outline:2px solid var(--bt-amber)}
.mini-actions{display:flex;gap:6px}
.dice-out{
  display:block;width:100%;min-height:36px;border:1px dashed var(--border);border-radius:10px;
  padding:8px;text-align:center;background:#0c1220
}

/* ---------- Toggle Visuals: Icon + Text ---------- */
.icon-btn, .btn { color: var(--ink); }
.icon-btn .ico path, .btn .ico path { fill: var(--muted); transition: fill .2s, color .2s, filter .2s; }
.icon-btn.active,
.icon-btn[aria-pressed="true"],
.btn.active,
.btn[aria-pressed="true"] { color: var(--bt-amber); }
.icon-btn.active .ico path,
.icon-btn[aria-pressed="true"] .ico path,
.btn.active .ico path,
.btn[aria-pressed="true"] .ico path { fill: var(--bt-amber); filter: drop-shadow(0 0 6px rgba(255,208,110,.65)); }

/* ---------- Responsive helpers ---------- */
@media (max-width: 880px){ .seg-btn .label{ display:none; } }
@media (max-width: 960px){ .panel{width:86vw} }

.seg-item { display:flex; align-items:center; gap:6px; }
.seg-label { font-size:14px; letter-spacing:.04em; color:var(--ink); font-weight:500; }

/* ---------- Token floating buttons ---------- */
#tokenControls button{
  background: linear-gradient(180deg,#0f1520,#0b1019);
  color: var(--ink); border: 1px solid var(--bt-edge); border-radius: 8px;
  padding: 4px 6px; font-size: 10px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),0 1px 0 rgba(0,0,0,.6),0 0 0 1px #0005;
}
#tokenControls button:hover { filter:brightness(1.1); }

/* ---------- Responsive Top Bar Enhancements ---------- */
@media (max-width: 1024px){
  .ui-topbar { gap:8px; padding:4px 6px; }
  .icon-btn { width:32px; height:32px; }
  .ico { width:16px; height:16px; }
  .brand { font-size:14px; }
}
@media (max-width: 800px){
  .ui-topbar { justify-content:space-between; }
  .brand{
    font-size:13px; max-width:40%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .seg-group{ gap:4px; }
  .seg-label{ font-size:12px; }
  .icon-btn{ width:30px; height:30px; }
}
@media (max-width: 600px){
  .ui-topbar { gap:4px; padding:2px 4px; }
  .brand{ display:none; } /* hide if space too tight */
  .icon-btn{ width:28px; height:28px; }
  .ico{ width:14px; height:14px; }
}

/* --- Help popup respects lip --- */
#helpPopup{ top: calc(60px + var(--app-top-offset)) !important; }

/* ===== JSON Modal layout fix ===== */
.json-modal{
  position: fixed; inset: 0; z-index: 1001;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  padding: 16px;
}
.json-modal__panel{
  width: min(900px, 94vw);
  max-height: calc(94dvh - var(--app-top-offset));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.json-modal__head{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.json-modal__body{
  padding: 8px 10px;
  flex: 1 1 auto; overflow: auto; display: flex;
}
.json-modal__ta{
  flex: 1 1 auto; width: 100%; min-height: 220px;
  border-radius: 10px; background: #0b1019; border: 1px solid var(--border);
  color: var(--ink); padding: 10px; resize: vertical; box-sizing: border-box;
}
.json-modal__foot{
  padding: 8px 10px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}
@media (max-width: 600px){ .json-modal__panel{ width: 96vw; } }

html, body, #wrap { height:100%; background:#0b0f14; }
#wrap { position:relative; }
#btBoot { background:#0b0f14; }
* { -webkit-tap-highlight-color: transparent; }

.net-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,0.04);
  font-size:12px; color:var(--muted); line-height:1; user-select:none;
}
.net-pill .lamp{
  width:10px; height:10px; border-radius:50%;
  display:inline-block; background:#7b7b7b;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35) inset;
}
.net-pill.is-online .lamp{ background:#3ddc84; }   /* green */
.net-pill.is-offline .lamp{ background:#ff6b6b; }  /* red */
.net-pill .txt{ white-space:nowrap; }

/* === Overrides for Uplink / Transmit buttons === */
#btn-online,
#btnSend{
  width: auto;                 /* allow text to size naturally */
  min-width: 84px;             /* good tap target on mobile */
  height: 36px;                /* match header row height */
  padding: 6px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f1722;
  border: 1px solid var(--border);
  color: var(--ink);
  letter-spacing: .02em;
}

.toolbar-row{
  display: inline-flex;
  align-items: center;
  gap: 12px;                   /* space between buttons and pill */
}

#btn-online{ margin-right: 4px; }  /* optional extra nudge */

/* Hologram terrain glow */
.hex[terrain="Hologram"] {
  filter: drop-shadow(0 0 4px #00ff80) drop-shadow(0 0 8px #00ff80);
}