/* ===========================
   Kamuiverse – World Map (PC)
   map.css v2.2 (clean + game rail + admin modal)
   =========================== */

/* ========== Base tokens ========== */
:root{
  --ui-bg: #0b0f14;
  --ui-fg: #e8eef7;
  --ui-fg-muted: #a7b1c2;
  --ui-accent: #6fb3ff;

  /* Header */
  --kmv-header-h: 52px;

  /* Legend offset */
  --kmv-legend-extra: 28px;

  /* Game rail */
  --kmv-rail-w: 96px;
  --kmv-rail-top: calc(env(safe-area-inset-top) + var(--kmv-header-h) + 10px);
  --kmv-rail-z: 92;
}

html, body{
  margin:0; padding:0;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
  height:100%;
}

/* ========== Header ========== */
.kmv-map-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px;
  background:#111826; border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; z-index:50;
}
.kmv-map-header .brand a{
  color:#fff; text-decoration:none; font-weight:600;
}
.kmv-map-header .tools{
  display:flex; align-items:center; gap:12px;
}
.kmv-map-header .tools .muted{ color:var(--ui-fg-muted); }

.kmv-map-header button,
.kmv-map-header a.to-top{
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  background:#1a2333;
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
}
.kmv-map-header button:hover,
.kmv-map-header a.to-top:hover{
  border-color: rgba(255,255,255,.35);
}

/* ========== Layout ========== */
#mapRoot{
  position: relative;
  height: calc(100vh - var(--kmv-header-h));
  min-height: 400px;
  overflow: hidden;
  background: radial-gradient(100% 100% at 50% 50%, #0b0f14 0%, #0b0f14 40%, #0d121a 100%);
}

/* Viewport */
.viewport{
  position:relative;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
  cursor: grab;
  touch-action: none;
}
.viewport.dragging{ cursor: grabbing; }

/* Stage (6846 x 6846) */
.stage{
  position:absolute;
  left:0; top:0;
  width: 6846px;
  height: 6846px;
  transform-origin: 0 0;
  will-change: transform;
}
.stage .bg{
  position:absolute;
  inset:0;
  background-image: url("./assets/map_bg.png");
  background-repeat: no-repeat;
  background-size: 6846px 6846px;
  background-position: 0 0;
  image-rendering: auto;
}

/* Grid layer */
#cells{
  position:absolute;
  left: 343px;
  top:  531px !important;
  width:  5802.796875px;
  height: 5900.59375px;
  pointer-events:auto;
}

/* Cell base */
#cells .cell{
  position:absolute;
  box-sizing:border-box;
  cursor:pointer;
  border-radius: 2px;
  outline: 1px solid transparent;
  background: transparent;
  transition: outline-color .12s ease, background-color .12s ease, opacity .12s ease, transform .12s ease;
}

/* sold/vacant/inactive */
#cells .cell.sold{
  outline-color: rgba(255,255,255,.60);
  background: rgba(120,120,120,.40);
}
#cells .cell.vacant{
  outline: 1px dashed rgba(255,255,255,.28);
  background: rgba(120,120,120,.10);
  opacity: .85;
}
#cells .cell.inactive{
  opacity: .05;
  pointer-events:none;
}

/* hover */
#cells .cell.sold:hover{
  outline-color: rgba(255,255,255,.85);
  background: rgba(180,180,180,.65);
}
#cells .cell.vacant:hover{
  outline: 1px dashed rgba(255,255,255,.45);
  background: rgba(180,180,180,.16);
}

/* land/bridged/owned */
#cells .cell.land{ background: rgba(140,140,140,.22); }
#cells .cell.bridged{ background: rgba(130,130,130,.55); }
#cells .cell.owned{
  background: rgba(255,215,0,.85);
  outline: 2px solid rgba(255,215,0,1);
  outline-offset: -1px;
  box-shadow: 0 0 6px rgba(255,215,0,.45);
  z-index: 3;
}

/* Active / Fleet markers */
#cells .cell.active-land{
  outline: 3px solid rgba(111,179,255,1) !important;
  outline-offset: -1px;
  box-shadow: 0 0 10px rgba(111,179,255,.45);
  z-index: 4;
}
#cells .cell.fleet-land{
  outline: 2px solid rgba(255,138,31,.95) !important;
  outline-offset: -1px;
  box-shadow: 0 0 8px rgba(255,138,31,.35);
  z-index: 3;
}

/* ========== Bubble popup ========== */
.bubble{
  position:fixed; z-index:60; min-width:220px;
  background:#10131a; color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transform: translate(10px, -10px);
}
.bubble .ttl{ font-weight:700; margin-bottom:6px; }
.bubble .kv{ font-size:13px; color:#e6ecff; opacity:.9; }
.bubble .small{ font-size:12px; color:#9aa8b9; margin-top:8px; }
.bubble .pick-wrap{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.bubble .pick{
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  background:#1a2333;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.bubble .pick:hover{ border-color: rgba(255,255,255,.35); }

/* bubble thumbnail */
.bubble .thumb{
  margin: 8px 0 10px;
  width: 180px;
  max-width: 36vw;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.bubble .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== Minimap ========== */
.minimap{
  position: fixed;
  left: 16px; bottom: 16px;
  width: 240px; height: 240px;
  z-index: 65;
  pointer-events: none;
  background: transparent;
}
.minimap .mm-bg{
  position:absolute;
  inset:8px;
  background-image: url("./assets/map_bg.png");
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity:.95;
}
#mmBox{
  position:absolute;
  border:2px solid #ff6a6a;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
  border-radius:6px;
  pointer-events:none;
}

/* Debug HUD */
#hud{
  position:fixed;
  right:16px; bottom:16px;
  z-index:70;
  color:#fff;
  font-size:12px;
  background:rgba(6,9,16,.7);
  padding:6px 10px;
  border-radius:8px;
  pointer-events:none;
}

/* ========== Legend (float) ========== */
.map-legend-float{
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top) + var(--kmv-header-h) + 8px + var(--kmv-legend-extra));
  z-index: 80;
  background: transparent;
  border: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
  pointer-events: none;
}
.map-legend-float .li{
  display: grid;
  grid-template-columns: 16px auto;
  align-items: center;
  column-gap: 8px;
  white-space: nowrap;
  justify-content: start;
}
.map-legend-float .sw{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.map-legend-float .sw.is-land{
  background: rgba(140,140,140,.22);
  outline: 1px solid rgba(255,255,255,.18);
}
.map-legend-float .sw.is-bridged{
  background: rgba(130,130,130,.55);
  outline: 1px solid rgba(255,255,255,.25);
}
.map-legend-float .sw.is-owned{
  background: rgba(255,215,0,.85);
  outline: 2px solid rgba(255,215,0,1);
}

/* ==========================================================
   Game UI – Left Rail
   ========================================================== */

/* Left rail container */
.kmv-rail{
  position: fixed;
  left: 10px;
  top: var(--kmv-rail-top);
  width: var(--kmv-rail-w);
  z-index: var(--kmv-rail-z);
  pointer-events: auto;
}
.kmv-rail *{ pointer-events: auto; }

/* Account card（画像→名前、中央寄せ、半透明グレー） */
.kmv-rail .account-card{
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(120,130,150,.26);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  display: grid;
  grid-auto-rows: min-content;
  justify-items: center;
  gap: 8px;
}

/* ✅ 順番をCSSでもロック（どこかの共通CSSが干渉しても崩れない） */
.kmv-rail .account-card{
  grid-template-areas:
    "img"
    "name";
}
.kmv-rail #hudLandPreview{ grid-area: img; }
.kmv-rail #hudAccountName{ grid-area: name; }

.kmv-rail .account-name{
  font-weight: 900;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  word-break: break-word;
  text-align: center;
  width: 100%;
}

.kmv-rail .land-preview{
  width: 86%;
  max-width: 86%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.kmv-rail .land-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Buttons stack */
.kmv-rail .rail-buttons{
  margin-top: 14px;
  display: grid;
  gap: 14px;
  justify-items: center;
}

/* 基本の丸ボタン（仮） */
.kmv-rail .rail-dot{
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ff8a1f;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.18) inset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kmv-rail .rail-dot:hover{ filter: brightness(1.08); }
.kmv-rail .rail-dot:active{ transform: translateY(1px); }

/* ✅ 設定PNG（基準） */
#btnSetting{
  appearance:none;
  border:0;
  width: 56px;
  height: 56px;
  background: transparent;
  background-image: url("/meta/map/img/setting.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#btnSetting:hover{ filter: brightness(1.08); }
#btnSetting:active{ transform: translateY(1px); }

/* ✅ アイテムPNG：ボタンは56のまま、画像だけ拡大（円を増やさない） */
#btnItem{
  appearance:none;
  border:0;
  width: 58px;
  height: 58px;
  background: transparent;
  background-image: url("/meta/map/img/item.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 160%;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#btnItem:hover{ filter: brightness(1.08); }
#btnItem:active{ transform: translateY(1px); }

/* ==========================================================
   Admin Modal
   ========================================================== */
.kmv-admin-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.kmv-admin-modal.is-open{ display:block; }

.kmv-admin-modal .backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

.kmv-admin-modal .panel{
  position:absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 70px);
  transform: translateX(-50%);
  width: min(920px, 92vw);
  max-height: min(72vh, 720px);
  overflow: auto;
  background: #0f141d;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.kmv-admin-modal .head{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(15,20,29,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.kmv-admin-modal .title{ font-weight: 800; color:#fff; }
.kmv-admin-modal .sub{ font-size:12px; color:#9aa8b9; margin-top:2px; }
.kmv-admin-modal .headBtns{ display:flex; gap:8px; align-items:center; }

.kmv-admin-modal .btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  background:#1a2333;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.kmv-admin-modal .btn:hover{ border-color: rgba(255,255,255,.35); }

.kmv-admin-modal .body{ padding: 12px 14px; }
.kmv-admin-modal .note{
  color:#9aa8b9;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* rows */
.kmv-admin-modal .row{
  display:grid;
  grid-template-columns: 160px 84px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
}

.kmv-admin-modal .checks{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.kmv-admin-modal .lab{
  display:flex;
  gap: 8px;
  align-items:center;
  color:#e8eef7;
  font-size: 13px;
}
.kmv-admin-modal input{ transform: translateY(1px); }

.kmv-admin-modal .thumb{
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.kmv-admin-modal .thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

.kmv-admin-modal .meta .line1{ color:#e8eef7; font-weight:700; }
.kmv-admin-modal .meta .area{ color:#9aa8b9; font-weight:700; margin-left:8px; }
.kmv-admin-modal .meta .line2{ color:#9aa8b9; font-size: 12px; margin-top:2px; }
.kmv-admin-modal .chip{
  display:inline-block;
  margin-top:8px;
  padding: 3px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  color:#cfe3ff;
  font-size: 12px;
}

/* ========== Mobile patch ========== */
@media (max-width: 720px){
  :root{
    --kmv-header-h: 84px;
    --kmv-legend-extra: 40px;

    --kmv-rail-w: 84px;
    --kmv-rail-top: calc(env(safe-area-inset-top) + var(--kmv-header-h) + 8px);
  }

  html, body{ overflow-x:hidden; }

  .kmv-map-header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
  }
  .kmv-map-header .tools{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 10px;
  }

  /* minimap */
  #minimap{
    width: 140px !important;
    height: 140px !important;
    left: 10px !important;
    bottom: 10px !important;
  }
  #minimap .mm-bg{ inset: 6px !important; }

  .stage .bg{
    background-image: url("./assets/map_bg_m.png") !important;
    background-size: 6846px 6846px;
  }
  .minimap .mm-bg{
    background-image: url("./assets/map_bg_m.png") !important;
  }

  #cells .cell.owned{ box-shadow: none; }

  .map-legend-float{
    right: 10px;
    font-size: 11px;
    gap: 7px;
  }

  .bubble .thumb{
    width: 150px;
    max-width: 55vw;
  }

  .kmv-rail{ left: 8px; }

  .kmv-rail .rail-dot{
    width: 40px;
    height: 40px;
  }

  /* ✅ 設定＆アイテム：同じサイズ */
  #btnSetting{
    width: 48px;
    height: 48px;
  }
  #btnItem{
    width: 48px;
    height: 48px;
  }

  /* modal responsive */
  .kmv-admin-modal .panel{
    top: calc(env(safe-area-inset-top) + 92px);
    max-height: 78vh;
  }
  .kmv-admin-modal .row{
    grid-template-columns: 1fr 74px;
    grid-template-areas:
      "checks thumb"
      "meta   meta";
  }
  .kmv-admin-modal .checks{ grid-area: checks; }
  .kmv-admin-modal .thumb{ grid-area: thumb; width:74px; height:74px; }
  .kmv-admin-modal .meta{ grid-area: meta; }
}