:root{
  --bg:#0f1220;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --good:#9fffa8;
  --warn:#ffd38a;
  --bad:#ff9aa5;
  --btn:rgba(255,255,255,.10);
  --btn2:rgba(255,255,255,.14);
  --lock:rgba(255,255,255,.06);
}

/* ✅ これ入れとくと「padding/widthズレ」系が一気に安定する */
*, *::before, *::after{ box-sizing:border-box; }

/* ===== 背景 ===== */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(15,18,32,.72), rgba(15,18,32,.72)),
    url("https://ul.h3z.jp/8DNhFtiC.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wrap{max-width:520px;margin:0 auto;padding:12px 14px 18px}

/* ===== 上部：ヘッダー ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.topbar a{
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  font-weight:800;
  line-height:1;
}

h1{
  font-size:18px;
  margin:6px 0 6px;
  letter-spacing:.02em;
}
.hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:10px;
}
.hint b{color:#fff}

/* ===== ステータス：pill群 ===== */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.pill b{font-weight:1000}
.pill small{opacity:.85}

/* ===== XPパネル ===== */
.xpPanel{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:10px 12px;
  margin-top:2px;
  margin-bottom: 25px;
}
.xpTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  font-size:12px;
  line-height:1.2;
  margin-bottom:8px;
}
.xpTop b{font-weight:1000}
.xpBarWrap{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden;
  height:10px;
}
.xpBar{
  height:100%;
  width:0%;
  background:rgba(159,255,168,.55);
}

/* ====== Farm Grid ====== */
.farm{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  user-select:none;
}
.plot{
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.plot button{
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:800;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  position:relative;
}
.plot .tag{font-size:10px;opacity:.8}
.plot[data-state="EMPTY"] .tag{opacity:.6}
.plot[data-state="GROW"]{outline:2px solid rgba(255,211,138,.25)}
.plot[data-state="READY"]{outline:2px solid rgba(159,255,168,.35)}
.plot[data-state="BURN"]{outline:2px solid rgba(255,154,165,.35)}
.plot[data-state="LOCK"]{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline:2px solid rgba(255,255,255,.06);
}

.badge{
  position:absolute;top:8px;left:8px;
  font-size:10px;font-weight:900;
  padding:4px 8px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  z-index:2;
}
.badge.good{color:var(--good)}
.badge.warn{color:var(--warn)}
.badge.bad{color:var(--bad)}
.badge.lock{color:rgba(255,255,255,.85)}
.lockOverlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(1px);
  z-index:1;
  pointer-events:none;
}
.lockOverlay .lk1{font-weight:1000;font-size:12px}
.lockOverlay .lk2{font-size:10px;opacity:.85}

/* ====== Modal ====== */
.modal{
  position:fixed;inset:0;display:none;
  background:rgba(0,0,0,.55);
  align-items:flex-end;justify-content:center;
  padding:14px;
  z-index:9999;
}
.modal[aria-hidden="false"]{display:flex}
.sheet{
  width:min(520px, 100%);
  border:1px solid var(--line);
  background:rgba(15,18,32,.92);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.sheetHead{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.sheetHead .ttl{font-weight:900}
.sheetHead button{
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  padding:8px 10px;border-radius:12px;
  font-weight:900;
}

/* ★ここは「伸びすぎ防止」だけ。スクロールは #mBody に任せる */
.sheetBody{
  padding:12px 14px 14px;
}

.step{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}

/* ✅ モーダル本文は縦スクロールOK（JSロックと噛み合う） */
#mBody{
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* ====== Card slider ====== */
.cards{
  display:flex;gap:10px;overflow:auto;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.c{
  min-width:100px;
  max-width:100px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px;
  scroll-snap-align:start;
  flex:0 0 auto;
  position:relative;
}
.c .imgbox{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
  height:140px;
}
.c .imgbox img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  display:block;
}
.c .name{font-weight:900;margin-bottom:6px}
.c .desc{font-size:12px;color:var(--muted);line-height:1.45;min-height:34px}
.c .fx{font-size:12px;margin-top:8px}
.c button{
  width:100%;
  margin-top:10px;
  border:1px solid var(--line);
  background:var(--btn2);
  color:var(--text);
  padding:10px 10px;border-radius:14px;
  font-weight:900;
}
.c .cntBadge{
  position:absolute;
  right:8px;
  bottom:8px;
  font-size:11px;
  font-weight:1000;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.30);
  color:#fff;
  pointer-events:none;
}
.c button:disabled{ opacity:.55; filter:saturate(.6); }

.row{display:flex;gap:10px;margin-top:12px}
.row button{
  flex:1;border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  padding:12px;border-radius:14px;
  font-weight:900;
}
.row button.primary{background:rgba(159,255,168,.14);}

/* ====== Harvest card ====== */
.reward{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:12px;
}
.reward .big{font-weight:1000;font-size:16px;margin-bottom:6px}
.reward .mini{font-size:12px;color:var(--muted);line-height:1.5}
.reward .img{
  width:100%;
  max-width:360px;
  height:auto;
  max-height:62vh;
  object-fit:contain;
  display:block;
  margin:10px auto 0;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  image-rendering:auto;
}



/* ====== READY エフェクト ====== */
.plot-fx{
  position:absolute;
  inset:-8px;
  pointer-events:none;
  border-radius:14px;
  mix-blend-mode:screen;
  opacity:.0;
  z-index:1;
}
.plot-fx--mild{
  opacity:.55;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 35%, transparent 70%);
  animation: fxShine 1.4s linear infinite;
}
.plot-fx--strong{
  opacity:.75;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.75), transparent 40%),
    radial-gradient(circle at 75% 55%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 55% 75%, rgba(255,255,255,.45), transparent 50%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 35%, transparent 70%);
  animation: fxShine 1.0s linear infinite;
}
@keyframes fxShine{
  0%   { transform:translateX(-18px) rotate(0deg); filter:blur(.2px); }
  100% { transform:translateX(18px)  rotate(0deg); filter:blur(.2px); }
}

/* =========================
   ✅ 装備HUD
========================= */
.loadoutWrap{
  margin: 14px 0 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.loadoutHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.loadoutTtl{
  font-weight: 900;
  letter-spacing: .02em;
}
.loadoutSub{
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}

.loadout{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.equipCard{
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 10px;
  text-align: left;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

.equipTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom: 8px;
}

.equipTag{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.08);
}

.equipCnt{
  font-size: 12px;
  font-weight: 900;
  opacity: .9;
}

.equipImg{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* HUDは“詰まって見える”方が気持ちいいので cover のままOK */
.equipImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.equipName{
  margin-top: 8px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.2;
  opacity: .95;
  min-height: 2.4em;
}

.loadoutHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .8;
}

/* =========================
   ✅ 選択グリッド（モーダル内スクロール＋サイズ統一＋画像見た目統一）
========================= */

.gridWrap{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;

  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding: 2px 2px 6px;
  overscroll-behavior: contain;
  touch-action: pan-y;

  align-items: stretch;
  grid-auto-rows: 1fr;

  /* ✅ スクロールバーが出ても幅がブレにくい（対応ブラウザのみ） */
  scrollbar-gutter: stable;
}

.gridCard{
  border-radius: 16px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 10px;
  text-align: left;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);

  height: 100%;
  display:flex;
  flex-direction:column;

  /* ✅ 選択ハイライトを「内側」に入れる前提 */
  outline: none;
}
.gridCard:disabled{ opacity: .55; }

/* ✅ ここが重要：outlineをやめて “inset” で同サイズのまま光らせる */
.gridCard.isSelected{
  outline: none;
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 0 0 2px rgba(255,255,255,.35);
}

/* 画像枠 */
.gridImg{
  position: relative;
  width: 100%;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);

  display:grid;
  place-items:center;

  /* ✅ 統一：余白も一定に */
  padding: 8px;
}

/* ✅ 画像を「最大サイズ統一」で揃える */
.gridImg img{
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 86%;
  image-rendering: pixelated;
  display:block;
}

/* バッジ */
.gridCnt{
  position:absolute;
  right:8px;
  bottom:8px;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
}
.gridSel{
  position:absolute;
  left:8px;
  top:8px;
  font-weight: 900;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.gridEmpty{
  position:absolute;
  left:8px;
  bottom:8px;
  font-weight: 900;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,80,90,.35);
  border: 1px solid rgba(255,80,90,.35);
}

.gridName{
  margin-top: 8px;
  font-weight: 900;
  font-size: 13px;
}

.gridDesc{
  margin-top: 4px;
  font-size: 12px;
  opacity: .85;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.35em * 3);
}

.gridFx{
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  opacity: .95;
}

.gridSmallBtn{
  margin-top: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight: 900;
}

@media (max-width: 380px){
  .gridWrap{ grid-template-columns: repeat(2, 1fr); }
  .gridDesc{ display:none; }
}

/* =========================================================
   ✅ 収穫モーダル：下切れ防止（上寄せ＋安全余白＋中身スクロール）
   ※ 既存 .modal の align-items:flex-end を上書きします
========================================================= */

/* 背景(オーバーレイ)を上寄せに */
.modal{
  align-items:flex-start; /* ★flex-end → flex-start に上書き */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* モーダル本体の最大高さを「画面内」に収める */
.sheet{
  max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column; /* Head固定＋Bodyだけスクロールにしやすい */
}

/* 本文スクロール領域（あなたは #mBody を使ってるのでここを強化） */
#mBody{
  max-height: calc(100dvh - 180px); /* ★ヘッダー＋余白ぶん差し引き（ざっくりでOK） */
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 収穫カード画像の最大高さを少し下げて切れにくく */
.reward .img{
  max-height: 52vh; /* 62vh→52vh でスマホの下切れを減らす */
}


/* =========================
   ✅ ワクワク・ヘッダー改造
========================= */

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.backBtn, .zukanBtn{
  flex:0 0 auto;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  font-weight:900;
  line-height:1;
}

.topTitle{
  flex:1;
  min-width:0;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
}

.topTitleMain{
  font-weight:1000;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topTitleSub{
  margin-top:2px;
  font-size:11px;
  opacity:.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* クエスト看板 */
.hero{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.14), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.10), transparent 55%);
  transform: rotate(8deg);
}
.heroBadge{
  position:relative;
  display:inline-block;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
}
.heroMain{
  position:relative;
  display:flex;
  gap:12px;
  margin-top:10px;
  align-items:flex-start;
}
.heroIcon{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  font-size:22px;
  flex:0 0 auto;
}
.heroTtl{
  font-weight:1000;
  line-height:1.2;
}
.heroDesc{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.heroDesc b{color:#fff}

/* ステータスボード */
.board{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:10px 10px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  margin-bottom:12px;
}
.boardRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.chip{
  border:1px solid var(--line);
  background:rgba(0,0,0,.16);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  display:flex;
  gap:6px;
  align-items:baseline;
}
.chip b{font-weight:1000}
.chip.good{ box-shadow: inset 0 0 0 1px rgba(159,255,168,.20); }
.chip.warn{ box-shadow: inset 0 0 0 1px rgba(255,211,138,.20); }
.chip.bad{  box-shadow: inset 0 0 0 1px rgba(255,154,165,.20); }

/* 既存XPパネルはboard内で使うので余白だけ調整 */
.board .xpPanel{
  margin:6px 0 0;
  border-radius:16px;
}