/* ld_editboard.css */
:root{
  --bg:#0b0f17;
  --text:#e7ecff;
  --muted:#93a0c6;

  --topbar-h:60px;
  --bar-h:52px;
  --settings-h:28vh;

  --palette-h:176px;    /* パレットを盤面直下に固定表示（縦スクロール無し） */
  --scrollpad-h:30px;

  --cell-gap:2px;
    --split-gap-mult:3;   /* 3–4行間ギャップ倍率（約3倍） */
--cell-radius:10px;
  --board-pad:6px;

  --cell-h:56px;        /* JSで自動調整 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 30% -10%, rgba(106,167,255,.25), transparent 55%),
              radial-gradient(900px 500px at 85% 15%, rgba(46,229,157,.18), transparent 45%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow:hidden;
}

/* topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding: calc(10px + var(--safe-t)) 10px 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 8px;
  background: linear-gradient(to bottom, rgba(11,15,23,.92), rgba(11,15,23,.55));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ font-size:16px; font-weight:900; letter-spacing:.02em; }
.topbar__right{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }

/* buttons + pressed feel */
.btn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.07);
  color:var(--text);
  border-radius:12px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
}
.btn--danger{
  background: linear-gradient(180deg, rgba(255,77,109,.95), rgba(255,77,109,.55));
  border-color: rgba(255,77,109,.7);
  color:#23060b;
}
.btn--ghost{ background: rgba(255,255,255,.05); }
.btn:disabled{ opacity:.55; cursor: default; }
.btn:active{ transform: translateY(1px) scale(.99); filter: brightness(1.15); }

.pressable.flash{ animation: flash .14s ease-out; }
@keyframes flash{
  0%{ filter: brightness(1.0); }
  50%{ filter: brightness(1.22); }
  100%{ filter: brightness(1.0); }
}

/* toggle: 枠なし */
.toggle{ display:flex; align-items:center; gap:8px; padding:0; border:none; background:transparent; }
.toggle input{ display:none; }
.toggle__ui{
  width:46px; height:28px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position:relative;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
}
.toggle__knob{
  position:absolute;
  top:50%; left:4px;
  width:22px; height:22px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(231,236,255,.92);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  transition: left .15s ease, background .15s ease;
}
.toggle input:checked + .toggle__ui{
  background: rgba(106,167,255,.22);
  border-color: rgba(106,167,255,.55);
}
.toggle input:checked + .toggle__ui .toggle__knob{
  left: 20px;
  background: rgba(106,167,255,.95);
}
.toggle__label{ font-size:12px; font-weight:900; color: rgba(147,160,198,.95); }

/* main (NO vertical scroll) */
.main{
  height: calc(100% - (var(--topbar-h) + var(--safe-t)) - (var(--bar-h) + var(--safe-b)));
  padding: 10px;
  overflow:hidden;                 /* 縦スクロール禁止 */
  display:flex;
  flex-direction: column;
  gap: 10px;
}
body.settings-open .main{ pointer-events:none; }

/* board */
.boardWrap{
  flex: 0 0 auto;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.board{
  width:100%;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 0;
  padding: var(--board-pad);
  box-shadow:none;
}

.grid{ display:grid; gap: var(--cell-gap); }
.cell{
  position:relative;
  border-radius: var(--cell-radius);
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  height: var(--cell-h);
  user-select:none;
  -webkit-user-select:none;
  overflow: visible;
}
.cell.is-target{
  border-style: solid;
  border-color: rgba(106,167,255,.92);
  box-shadow: 0 0 0 3px rgba(106,167,255,.2);
  background: rgba(106,167,255,.06);
}
.cell__content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}

.unitHost{ position:relative; width:100%; height:100%; overflow: visible; }
.stack2, .stack3{ transform: translateY(-6px); }

.unitSingle{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}
.unitSingle img{
  width: min(64px, 98%);
  height: min(64px, 98%);
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  transform: translateY(-4px);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.stackImg{
  position:absolute;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.stack2 .stackImg{ width: min(60px, 92%); height: min(60px, 92%); }
.stack2 .p1{ left:-4%; top:-16%; transform: translateX(-2px); }
.stack2 .p2{ right:-4%; bottom:-16%; transform: translateX(6px); }

.stack3 .stackImg{ width: min(56px, 84%); height: min(56px, 84%); }
.stack3 .p1{ left:-4%; top:-18%; }
.stack3 .p2{ left:-4%; bottom:-18%; }
.stack3 .p3{ right: calc(-6% - 4px); top: calc(44% + 3px); transform: translateY(-55%); }

.splitSeparator{ height: calc(var(--cell-gap) * var(--split-gap-mult)); }

/* altar */
.altar{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing: .08em;
  color: rgba(231,236,255,.70);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  user-select:none;
  -webkit-user-select:none;
}

/* palette (NO vertical scroll) */
.paletteArea{
  flex: 0 0 var(--palette-h);
  height: var(--palette-h);
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 10px 10px;
  background: linear-gradient(to bottom, rgba(11,15,23,.40), rgba(11,15,23,.20));
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .18s ease, opacity .18s ease;
  transform: translateY(0);
  opacity: 1;
}
body.settings-open .paletteArea{ opacity:0; transform: translateY(12px); pointer-events:none; }

.paletteTop{ display:flex; align-items:center; gap:10px; }

.tabs{ display:flex; gap:8px; flex: 0 0 auto; overflow:hidden; }
.tab{
  flex:0 0 auto;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,236,255,.92);
  display:flex;
  align-items:center;
  font-weight: 900;
  font-size: 12px;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.tab:active{ transform: translateY(1px) scale(.99); filter: brightness(1.15); }
.tab.is-active{
  border-color: rgba(106,167,255,.65);
  background: rgba(106,167,255,.18);
  box-shadow: 0 0 0 3px rgba(106,167,255,.16);
}

.palette{
  flex: 1 1 auto;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  touch-action: pan-x;
}
.palette::-webkit-scrollbar{ height:10px; }
.palette::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 10px; }

.pItem{
  flex:0 0 auto;
  width: 63px;
  height: 63px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
  transition: transform .06s ease, filter .12s ease;
}
.pItem:active{ transform: translateY(1px) scale(.99); filter: brightness(1.15); }
.pItem img{
  width: 52px;
  height: 52px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

/* scroll pad (palette bottom) */
.scrollPad{
  width: 100%;
  height: var(--scrollpad-h);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action: pan-x;
  -webkit-tap-highlight-color: rgba(106,167,255,.12);
  user-select:none;
  -webkit-user-select:none;
  font-size: 12px;
  font-weight: 900;
  color: rgba(231,236,255,.70);
  letter-spacing: .02em;
}

/* bottom bar */
.bottomBar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:70;
  height: calc(var(--bar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  border:none;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(11,15,23,.92);
  backdrop-filter: blur(14px);
  color: rgba(231,236,255,.95);
  font-weight: 1000;
  font-size: 18px;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
}
.bottomBar:active{ filter: brightness(1.15); }

/* settings panel */
.settingsPanel{
  position:fixed;
  left:0; right:0;
  bottom: calc(var(--bar-h) + var(--safe-b));
  z-index:65;
  height: var(--settings-h);
  padding: 10px;
  background: rgba(17,24,42,.92);
  backdrop-filter: blur(14px);
  border-top:1px solid rgba(255,255,255,.10);
  transform: translateY(110%);
  transition: transform .18s ease;
  overflow:hidden;
}
body.settings-open .settingsPanel{ transform: translateY(0%); }
.settingsInner{ height:100%; display:flex; flex-direction: column; gap: 10px; }

.segRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.seg{
  height: 38px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,236,255,.95);
  font-weight: 1000;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.seg:active{ transform: translateY(1px) scale(.99); filter: brightness(1.15); }
.seg.is-active{
  border-color: rgba(106,167,255,.65);
  background: rgba(106,167,255,.18);
  box-shadow: 0 0 0 3px rgba(106,167,255,.16);
}

.btnRow{ display:flex; gap:10px; }
.btnRow .btn{ width:100%; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.miniTitle{ font-size: 11px; font-weight: 1000; color: rgba(147,160,198,.95); margin-bottom: 6px; }
.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.grid3 .btn{ padding: 10px 0; border-radius: 14px; }

/* toast */
.toast{
  position:fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + var(--safe-b) + 16px);
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 34px rgba(0,0,0,.35);
  max-width: 92vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 390px){
  :root{ --palette-h:172px; --cell-gap:2px; --board-pad:5px; }
  .btn{ padding: 9px 10px; }
  .brand{ font-size: 15px; }
  .pItem{ width: 60px; height: 60px; }
  .pItem img{ width: 50px; height: 50px; }
  .grid3{ grid-template-columns: 1fr 1fr; }
}

/* zone colors (added v1_06 guard) */
.cell.zone-red{ background: rgba(255, 77, 109, .10); }
.cell.zone-blue{ background: rgba(64, 120, 255, .10); }
.cell.zone-yellow{ background: rgba(255, 215, 64, .10); }
.cell.zone-green{ background: rgba(46, 229, 157, .10); }
.cell.zone-grey{ background: rgba(200, 205, 220, .08); }


/* bottom segmented tabs */
.bottomTabs{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:70;
  height: calc(var(--bar-h) + var(--safe-b));
  padding: 6px 10px calc(6px + var(--safe-b));
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  background: rgba(11,15,23,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.bottomTab{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  color: rgba(231,236,255,.92);
  font-weight: 1000;
  font-size: 14px;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(106,167,255,.20);
  transition: transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.bottomTab:active{ transform: translateY(1px) scale(.99); filter: brightness(1.15); }
.bottomTab.is-active{
  border-color: rgba(106,167,255,.65);
  background: rgba(106,167,255,.18);
  box-shadow: 0 0 0 3px rgba(106,167,255,.16);
}

/* palette mode switch (right aligned) */
.modeSwitch{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.modeLabel{
  font-size: 12px;
  font-weight: 1000;
  color: rgba(231,236,255,.80);
  user-select:none;
  -webkit-user-select:none;
}
.modeLabel.is-active{ color: rgba(231,236,255,.98); }

.miniToggle{ display:inline-flex; align-items:center; user-select:none; -webkit-user-select:none; }
.miniToggle input{ display:none; }
.miniToggle__ui{
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position:relative;
  cursor:pointer;
}
.miniToggle__knob{
  position:absolute;
  top:50%;
  left:4px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(231,236,255,.92);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  transition: left .15s ease, background .15s ease;
}
.miniToggle input:checked + .miniToggle__ui{
  background: rgba(106,167,255,.22);
  border-color: rgba(106,167,255,.55);
}
.miniToggle input:checked + .miniToggle__ui .miniToggle__knob{
  left: 22px;
  background: rgba(106,167,255,.95);
}

/* info panel */
.infoPanel{
  display:none;
  flex: 1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 10px;
  color: rgba(231,236,255,.92);
}
.infoRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
}
.infoRow:last-child{ border-bottom:none; }
.infoKey{ color: rgba(147,160,198,.95); }
.infoVal{ color: rgba(231,236,255,.95); font-variant-numeric: tabular-nums; }

body.info-mode #palette{ display:none; }
body.info-mode #scrollPad{ display:none; }
body.info-mode #infoPanel{ display:block; }

/* settings panes */
.settingsPane{ display:none; }
.settingsPane.is-active{ display:block; }


/* v1_11: settings button sizing + centered grids */
.settingsPanel .seg{
  height: 32px;
  border-radius: 12px;
  font-size: 12px;
  padding: 0 10px;
}
@media (max-width: 390px){
  .settingsPanel .seg{
    height: 30px;
    font-size: 11px;
    padding: 0 8px;
  }
}

.layoutGrid, .saveGrid{
  display:flex;
  flex-direction: column;
  gap:10px;
  align-items: center;
}
.layoutRow, .saveRow{
  display:flex;
  gap:10px;
  justify-content: center;
  width: 100%;
}
.layoutRow .seg, .saveRow .seg{
  min-width: 118px;
}
.layoutRow--three .seg, .saveRow--three .seg{
  min-width: 92px;
}

.saveRow--one .seg{
  width: min(420px, 100%);
}

@media (max-width: 390px){
  .layoutRow .seg, .saveRow .seg{ min-width: 104px; }
  .layoutRow--three .seg, .saveRow--three .seg{ min-width: 82px; }
}

/* pressed feel: make flash also tint via brightness */
.pressable.flash{
  animation: flash .14s ease-out;
}
@keyframes flash{
  0%{ filter: brightness(1.0); }
  50%{ filter: brightness(1.22); }
  100%{ filter: brightness(1.0); }
}


/* v1_12: bottom tab active orange text */
.bottomTab.is-active{
  color: rgba(255, 173, 60, .98);
}

/* v1_12: info row layout for unit counts */
.infoRow.infoRow--unit{
  display:grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  gap: 8px;
  align-items:center;
}
@media (max-width: 390px){
  .infoRow.infoRow--unit{
    grid-template-columns: 78px 1fr 1fr 1fr;
  }
}
.infoBadge{
  justify-self:end;
  font-weight: 1000;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(231,236,255,.95);
  white-space: nowrap;
}
.infoBadge--muted{
  color: rgba(120,132,170,.75);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
.infoBadge--strike{
  text-decoration: line-through;
}