:root {
  --side-ally:  #1565c0;
  --side-enemy: #ef6c00;
  --role-atk: #e53935;
  --role-spe: #29b6f6;
  --role-def: #43a047;
  --role-sup: #fdd835;
  --role-all: #8e24aa;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #0f1419; color: #e4e8ee;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}

.toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: #161b22;
  border-bottom: 1px solid #2d3744;
  height: 52px;
}
.brand {
  font-weight: 700; letter-spacing: 0.05em;
  font-size: 15px;
}
.ctrl { font-size: 13px; color: #b8c3d4; display: flex; align-items: center; gap: 8px; }
.ctrl select {
  background: #0f1419; color: #e4e8ee;
  border: 1px solid #2d3744; border-radius: 6px;
  padding: 6px 10px; font-size: 13px;
}
button {
  background: #1f2630; color: #e4e8ee;
  border: 1px solid #2d3744; border-radius: 6px;
  padding: 6px 14px; font-size: 13px;
  cursor: pointer;
}
button:hover { background: #2a323e; }
.hint { margin-left: auto; font-size: 12px; color: #8a96a8; }

.stage {
  position: relative;
  height: calc(100% - 52px);
  overflow: hidden;
  background: #0a0d12;
  cursor: grab;
}
.stage:active { cursor: grabbing; }
.stage.locked { cursor: default; }
.stage.locked:active { cursor: default; }

.viewport {
  position: relative;
  display: inline-block;
  transform-origin: 0 0;
  will-change: transform;
}
.map {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  width: 1600px;
  height: auto;
  transition: filter 0.2s ease;
}
.viewport.dim .map { filter: brightness(0.45) saturate(0.85); }


/* SVG ink overlay */
.ink {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.viewport.pen .ink { pointer-events: auto; cursor: crosshair; }
.viewport.pen.eraser .ink { cursor: cell; }
.viewport.pen .ink polyline { cursor: inherit; }
.viewport.pen.eraser .ink polyline { cursor: not-allowed; }
.viewport.pen .piece { pointer-events: none; }

/* Pen tools */
.pen-tools { display: inline-flex; gap: 6px; align-items: center; }
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid #444;
  cursor: pointer;
}
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }

/* Mode menu items */
.ctx-mode-list { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.ctx-mode-item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  background: #1f2630;
  border: 1px solid #2d3744;
  color: #e4e8ee;
  border-radius: 6px;
  cursor: pointer;
}
.ctx-mode-item:hover { background: #2a323e; }

/* ── Portrait warning (touch devices only) ─────────────── */
.rotate-warn { display: none; }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .rotate-warn {
    position: fixed;
    inset: 0;
    background: #0f1419;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e4e8ee;
    text-align: center;
    padding: 32px;
    gap: 14px;
  }
  body > *:not(.rotate-warn) { display: none !important; }
}
.rotate-icon { font-size: 64px; }
.rotate-msg  { font-size: 20px; font-weight: 700; letter-spacing: 0.05em; }
.rotate-sub  { font-size: 13px; color: #8a96a8; }

/* ── Top-right menu panel ─────────────── */
.menu-wrap { position: relative; }
#menuBtn { font-size: 18px; line-height: 1; padding: 4px 12px; }
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a2028;
  border: 1px solid #3a4554;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 9000;
  min-width: 240px;
  display: flex; flex-direction: column; gap: 12px;
}
.menu-panel[hidden] { display: none; }
.pen-tools[hidden] { display: none; }
.pen-width-wrap { font-size: 11px; color: #b8c3d4; gap: 6px; }
.pen-width-wrap input[type=range] { width: 90px; }
.menu-section { display: flex; flex-direction: column; gap: 6px; }
.menu-label { font-size: 11px; color: #8a96a8; letter-spacing: 0.05em; text-transform: uppercase; }
.menu-actions { flex-direction: row; flex-wrap: wrap; }
.menu-section input[type=range] { width: 100%; }

button.active {
  background: #2f6cad;
  border-color: #4fa3e6;
  color: #fff;
}

/* ── Context menu for piece color change ─────────── */
.ctx-menu {
  position: fixed;
  background: #1a2028;
  border: 1px solid #3a4554;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 9999;
  font-size: 11px;
  color: #b8c3d4;
}
.ctx-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8a96a8;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.ctx-row {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.ctx-row:last-child { margin-bottom: 0; }
.ctx-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid #444;
  background: #222;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease;
}
.ctx-btn:hover { transform: scale(1.15); }
.ctx-btn.side.ally  { background: var(--side-ally); border-color: #fff; }
.ctx-btn.side.enemy { background: var(--side-enemy); border-color: #fff; }
.ctx-btn.role.atk { background: var(--role-atk); border-color: #fff; }
.ctx-btn.role.spe { background: var(--role-spe); border-color: #fff; }
.ctx-btn.role.def { background: var(--role-def); border-color: #fff; }
.ctx-btn.role.sup { background: var(--role-sup); border-color: #fff; }
.ctx-btn.role.all { background: var(--role-all); border-color: #fff; }

.piece {
  --d: var(--piece-d, 44px);
  position: absolute;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  border: calc(var(--d) * 0.14) solid var(--side, var(--side-ally));
  background: var(--role, var(--role-atk));
  /* 陣営色グロー (default = ally 想定) */
  box-shadow:
    0 0 3px 1px var(--glow, rgba(21,101,192,0.85)),
    0 0 8px 2px var(--glow-soft, rgba(21,101,192,0.35)),
    0 1px 2px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 10;
}
.piece.dragging { cursor: grabbing; z-index: 100; }

.piece.ally  {
  --side: var(--side-ally);
  --glow:      rgba(21,101,192,0.85);
  --glow-soft: rgba(21,101,192,0.35);
}
.piece.enemy {
  --side: var(--side-enemy);
  --glow:      rgba(239,108,0,0.85);
  --glow-soft: rgba(239,108,0,0.35);
}
.piece.atk { --role: var(--role-atk); }
.piece.spe { --role: var(--role-spe); }
.piece.def { --role: var(--role-def); }
.piece.sup { --role: var(--role-sup); }
.piece.all { --role: var(--role-all); }