:root{
  --bgTop:#3f67c8;
  --bgMid:#89adff;
  --bgBottom:#96cf66;
  --bgBottom2:#6ea24d;

  --panel:#fffdf8;
  --panel2:#f8f2e5;
  --panel3:#fff7dd;

  --line:#ead9a2;
  --line2:#dbc37b;

  --text:#3b2a12;
  --muted:rgba(86,68,37,.78);

  --good:#63b544;
  --warn:#d79a21;
  --bad:#d96a6a;

  --btn:#fff5d3;
  --btn2:#ffe29b;
  --btnText:#5a3f10;

  --lock:rgba(120,100,60,.10);

  --orange1:#ffc06e;
  --orange2:#ff8f2c;
  --orange3:#b65d12;

  --blue1:#92dbff;
  --blue2:#4f92ff;
  --blue3:#2b5ab8;

  --green1:#bdf08f;
  --green2:#62b144;
  --green3:#3d7b29;

  --purple1:#bea8ff;
  --purple2:#7c5bef;
  --purple3:#513ba9;

  --seedTag1:#fff8de;
  --seedTag2:#f3e5b6;

  --waterTag1:#eef8ff;
  --waterTag2:#dcebff;
  --waterLine:#b9d6f5;

  --fertTag1:#f4efff;
  --fertTag2:#e1d4ff;
  --fertLine:#c7b3f1;

  --shadow:0 6px 0 rgba(89,64,19,.10), 0 14px 24px rgba(22,17,10,.10);
  --softShadow:0 8px 18px rgba(30,24,12,.10);
}

*, *::before, *::after{
  box-sizing:border-box;
}

html, body{
  min-height:100%;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    url("https://ul.h3z.jp/bgKX31Eg.png") center top / cover no-repeat fixed,
    linear-gradient(180deg, var(--bgTop) 0%, var(--bgMid) 42%, var(--bgBottom) 72%, var(--bgBottom2) 100%);
}

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

button{
  font:inherit;
  cursor:pointer;
}

button, a{
  -webkit-tap-highlight-color:transparent;
}

/* =========================
   ヘッダー
========================= */
.hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(90,141,255,.92) 0%, rgba(61,115,232,.95) 52%, rgba(47,95,196,.96) 100%);
  border:2px solid #f6e6b1;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    0 5px 0 #2a58b3,
    0 14px 24px rgba(22,30,79,.18);
  color:#fff;
  margin-bottom:10px;
  position:relative;
  backdrop-filter:blur(1px);
}

.hud::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.24);
  pointer-events:none;
}

.hudBtn{
  position:relative;
  z-index:1;
  min-width:54px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:16px;
  border:2px solid #fff4cb;
  text-decoration:none;
  color:#fff;
  font-weight:1000;
  line-height:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, var(--purple1), var(--purple2));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    0 4px 0 var(--purple3);
}

.hudBtn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.20),
    0 2px 0 var(--purple3);
}

.hudCenter{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  text-align:center;
}

.hudTitle{
  font-weight:1000;
  font-size:17px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
}

.hudSub{
  margin-top:2px;
  font-size:11px;
  opacity:.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   メニュー
========================= */
.actionGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:10px;
}

.actionBtn{
  position:relative;
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 8px;
  border-radius:16px;
  border:2px solid #ecd79a;
  text-decoration:none;
  font-weight:1000;
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  color:var(--btnText);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,253,246,.95) 0%, rgba(253,241,207,.94) 52%, rgba(245,223,154,.95) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(219,195,123,.55),
    0 4px 0 rgba(178,140,55,.55),
    0 8px 14px rgba(69,50,15,.08);
  overflow:hidden;
}

.actionBtn::before{
  content:"";
  position:absolute;
  top:4px;
  left:8px;
  right:8px;
  height:40%;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0));
  pointer-events:none;
}

.actionBtn::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.42);
  pointer-events:none;
}

.actionBtn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(219,195,123,.50),
    0 2px 0 rgba(178,140,55,.55),
    0 6px 12px rgba(69,50,15,.08);
}

.actionBtn .ico{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
  transform:translateY(-1px);
}

.actionBtn .txt{
  position:relative;
  z-index:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   XP
========================= */
.xpPanel{
  width:100%;
  border:2px solid rgba(234,217,162,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,245,234,.96));
  border-radius:18px;
  padding:10px 12px;
  margin-top:0;
  margin-bottom:12px;
  box-shadow:var(--softShadow);
  backdrop-filter:blur(1px);
}

.xpPanelCompact{
  display:flex;
  flex-direction:column;
  gap:8px;
}

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

.lvBadge{
  flex:0 0 auto;
  min-width:66px;
  padding:8px 8px 7px;
  border-radius:14px;
  border:2px solid var(--line);
  background:linear-gradient(180deg, #fff9ea, #f8ebc8);
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.lvBadgeLabel{
  display:block;
  font-size:10px;
  line-height:1;
  color:var(--muted);
  margin-bottom:3px;
  font-weight:900;
  letter-spacing:.04em;
}

.lvBadge b{
  display:block;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  color:var(--text);
}

.xpMain{
  flex:1;
  min-width:0;
}

.xpTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  font-size:12px;
  line-height:1.2;
  color:var(--text);
  margin-bottom:7px;
}

.xpTop b{
  font-weight:1000;
}

.xpTop small{
  color:var(--muted);
  font-size:11px;
}

.xpBarWrap{
  border:2px solid var(--line);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  overflow:hidden;
  height:14px;
}

.xpBar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #a6ef84, #63b544);
}

.miniStats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.miniStat{
  padding:5px 8px;
  border-radius:10px;
  border:1px solid rgba(219,195,123,.9);
  background:rgba(255,255,255,.62);
  font-size:11px;
  color:var(--muted);
  line-height:1;
  white-space:nowrap;
}

.miniStat b{
  color:var(--text);
  font-weight:1000;
}

/* =========================
   装備
========================= */
.loadoutWrap{
  margin:10px 0 8px;
  padding:10px;
  border-radius:20px;
  border:2px solid rgba(234,217,162,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,247,239,.94));
  box-shadow:var(--softShadow);
  backdrop-filter:blur(1px);
}

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

.loadoutTtl{
  font-weight:1000;
  letter-spacing:.02em;
  color:var(--text);
  font-size:15px;
}

.loadoutSub{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

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

.equipCard{
  position:relative;
  border-radius:16px;
  border:2px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  padding:8px;
  text-align:left;
  box-shadow:0 6px 14px rgba(40,28,10,.07);
}

.equipTop{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  margin-bottom:2px;
  min-height:30px;
}

.equipTag{
  flex:0 1 auto;
  max-width:100%;
  font-size:11px;
  font-weight:900;
  padding:4px 8px;
  border-radius:10px;
  border:2px solid var(--line);
  color:var(--text);
  line-height:1.1;
  word-break:break-word;
}

.equipTag-seed{
  background:linear-gradient(180deg, var(--seedTag1), var(--seedTag2));
}

.equipTag-water{
  background:linear-gradient(180deg, var(--waterTag1), var(--waterTag2));
  border-color:var(--waterLine);
}

.equipTag-fert{
  background:linear-gradient(180deg, var(--fertTag1), var(--fertTag2));
  border-color:var(--fertLine);
}

.equipCnt{
  position:absolute;
  right:6px;
  bottom:10px;
  z-index:3;
  font-size:10px;
  font-weight:1000;
  color:#fff;
  padding:3px 6px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.58);
  line-height:1;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}

.equipImg{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:14px;
  overflow:hidden;
  border:2px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.equipImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}

.equipName{
  margin-top:7px;
  font-weight:900;
  font-size:12px;
  line-height:1.2;
  color:var(--text);
  min-height:2.4em;
}

/* =========================
   畑
========================= */
.farm{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  user-select:none;
  position:relative;
  isolation:isolate;
}

.farm::before{
  content:"";
  position:absolute;
  inset:-4px;
  background:rgba(0,0,0,.42);
  border-radius:20px;
  pointer-events:none;
  z-index:0;
}

.plot{
  aspect-ratio:1/1;
  border:2px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,239,213,.95));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  z-index:1;
  box-shadow:
    0 4px 0 rgba(0,0,0,.18),
    0 8px 14px rgba(0,0,0,.32);
}

.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:.82;
}

.plot[data-state="EMPTY"] .tag{ opacity:.62; }
.plot[data-state="GROW"]{
  outline:2px solid rgba(215,154,33,.22);
  background:linear-gradient(180deg, #fffdf6, #f9efcf);
}
.plot[data-state="READY"]{
  outline:2px solid rgba(99,181,68,.28);
  background:linear-gradient(180deg, #fffef7, #edf8dc);
}
.plot[data-state="BURN"]{
  outline:2px solid rgba(110,72,34,.40);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,150,66,.18), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(34,22,14,.40), transparent 64%),
    linear-gradient(180deg, #4a3728 0%, #2f241d 48%, #1d1714 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,180,120,.10),
    0 4px 0 rgba(0,0,0,.22),
    0 8px 14px rgba(0,0,0,.35);
}
.plot[data-state="LOCK"]{
  background:linear-gradient(180deg, rgba(255,250,240,.84), rgba(237,227,202,.86));
  outline:2px solid rgba(150,120,70,.08);
}

.badge{
  position:absolute;
  top:8px;
  left:8px;
  font-size:10px;
  font-weight:900;
  padding:4px 8px;
  border-radius:10px;
  border:2px solid var(--line);
  background:rgba(255,255,255,.94);
  z-index:2;
}

.badge.good{ color:var(--good); }
.badge.warn{ color:var(--warn); }
.badge.bad{ color:var(--bad); }
.badge.lock{ color:rgba(86,68,37,.85); }

.lockOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px;
  text-align:center;
  background:rgba(255,248,236,.62);
  backdrop-filter:blur(1px);
  z-index:2;
  pointer-events:none;
}

.lockOverlay .lk1{
  font-weight:1000;
  font-size:12px;
  color:var(--text);
  line-height:1.2;
  text-align:center;
  width:100%;
}

.lockOverlay .lk2{
  font-size:10px;
  color:var(--muted);
  line-height:1.2;
  text-align:center;
  width:100%;
}

.plot[data-state="LOCK"] .tag,
.plot[data-state="LOCK"] .plot-label,
.plot[data-state="LOCK"] .plotText,
.plot[data-state="LOCK"] .subLabel{
  opacity:0 !important;
}

.plot .time,
.plot .timer,
.plot .remain,
.plot .countdown{
  position:absolute;
  left:5px;
  right:5px;
  bottom:5px;
  z-index:3;
  padding:5px 6px 4px;
  border-radius:8px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  line-height:1.15;
  text-align:center;
  text-shadow:
    0 1px 0 rgba(0,0,0,.72),
    0 2px 5px rgba(0,0,0,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
}

.plot button{
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),
    0 2px 4px rgba(0,0,0,.75);
}

.plot .growText,
.plot .stateText{
  color:#fff;
  font-weight:1000;
  text-shadow:
    0 1px 0 rgba(0,0,0,.75),
    0 2px 5px rgba(0,0,0,.9);
}

/* =========================
   フッター
========================= */
.footer{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,.88);
  margin:26px 0 18px;
  padding-bottom:6px;
  line-height:1.7;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

.footer::before{
  content:"";
  display:block;
  height:24px;
}

/* =========================
   モーダル共通
========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(20,20,20,.42);
  align-items:center;
  justify-content:center;
  padding:
    max(12px, env(safe-area-inset-top))
    14px
    max(12px, env(safe-area-inset-bottom));
  z-index:9999;
}

.modal[aria-hidden="false"]{
  display:flex;
}

.sheet{
  width:min(520px, 100%);
  border:2px solid var(--line);
  background:linear-gradient(180deg, #fffef9, #fff4d9);
  color:var(--text);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}

.sheetHead{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid var(--line);
  background:rgba(255,255,255,.45);
  flex:0 0 auto;
}

.sheetHead .ttl{
  font-weight:900;
  color:var(--text);
}

.sheetHead button{
  border:2px solid #fff4cb;
  background:linear-gradient(180deg, var(--orange1), var(--orange2));
  color:#2b1700;
  padding:8px 12px;
  border-radius:14px;
  font-weight:1000;
  box-shadow:0 4px 0 var(--orange3);
}

.sheetBody{
  padding:12px 14px 14px;
  flex:1 1 auto;
  overflow:hidden;
}

#mBody{
  max-height:72vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

#mBody button[data-close-secondary],
#mBody .secondaryClose,
#mBody .closeSecondary{
  display:none !important;
}

/* =========================
   在庫なし表示
========================= */
.gridCard.isEmpty{
  box-shadow:
    0 6px 14px rgba(60,40,40,.08),
    inset 0 0 0 2px rgba(235,190,190,.30);
  filter:saturate(.88);
}

.gridSmallBtn{
  margin-top:8px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid #fff4cb;
  background:linear-gradient(180deg, var(--btn2), #ffd564);
  color:var(--btnText);
  font-weight:900;
  box-shadow:0 4px 0 #d28f16;
}

.gridSmallBtn:disabled,
.gridCard button:disabled{
  border:2px solid #d99c9c !important;
  background:linear-gradient(180deg, #fff2f2, #ffdede) !important;
  color:#9a3e3e !important;
  box-shadow:0 3px 0 #c97f7f !important;
  opacity:1 !important;
  filter:none !important;
}

.gridEmpty{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotate(-18deg);
  z-index:7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:112px;
  height:28px;
  padding:0 10px;
  border-radius:6px;
  border:2px solid #b03a3a;
  background:linear-gradient(180deg, #ff8b8b 0%, #eb5555 100%);
  color:#fff;
  font-weight:1000;
  font-size:13px;
  letter-spacing:.04em;
  line-height:1;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 2px 3px rgba(0,0,0,.18);
  box-shadow:
    0 4px 10px rgba(120,20,20,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
  white-space:nowrap;
  pointer-events:none;
}

/* =========================
   選ぶ画面の資材カード
========================= */
.gridWrap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
  padding:2px 2px 6px;
  align-items:stretch;
  grid-auto-rows:1fr;
  max-height:none;
  overflow:visible;
  scrollbar-gutter:stable;
}

.gridCard{
  width:100%;
  border-radius:16px;
  border:2px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--text);
  padding:10px;
  text-align:left;
  box-shadow:0 8px 18px rgba(40,28,10,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:220px;
  outline:none;
  overflow:visible;
}

.gridCard:disabled{
  opacity:.55;
}

.gridCard.isSelected{
  box-shadow:
    0 8px 18px rgba(40,28,10,.08),
    inset 0 0 0 2px rgba(255,186,74,.50);
}

.gridImg{
  position:relative;
  width:100%;
  height:104px;
  border-radius:14px;
  overflow:visible;
  border:2px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  padding:8px;
  margin-bottom:8px;
}

.gridImg img{
  width:auto;
  height:auto;
  max-width:92%;
  max-height:92%;
  display:block;
  image-rendering:pixelated;
}

.gridCnt{
  position:absolute;
  right:-4px;
  bottom:-6px;
  z-index:6;
  font-weight:1000;
  font-size:10px;
  line-height:1;
  padding:3px 6px;
  border-radius:7px;
  background:rgba(255,255,255,.97);
  border:2px solid var(--line);
  color:var(--text);
  box-shadow:0 3px 8px rgba(0,0,0,.10);
}

.gridCard.isEmpty .gridCnt{
  background:#fff7f7;
  border-color:#dcb1b1;
  color:#8f6666;
}

.gridSel{
  position:absolute;
  left:6px;
  top:6px;
  z-index:7;
  font-weight:900;
  font-size:10px;
  line-height:1;
  padding:4px 7px;
  border-radius:8px;
  background:#fff7dc;
  border:2px solid var(--line);
  color:var(--text);
}

.gridBadge{
  position:absolute;
  top:8px;
  right:8px;
  left:auto;
  padding:4px 8px;
  font-size:11px;
  font-weight:1000;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.45);
  color:#fff;
  z-index:5;
  letter-spacing:.05em;
}

.badgeCollab{
  background:rgba(255,70,90,.88);
  border-color:rgba(255,70,90,.96);
}

.badgeLimited{
  background:rgba(255,195,80,.92);
  border-color:rgba(255,195,80,.98);
  color:#5b3e0d;
}

.gridName{
  font-weight:900;
  font-size:13px;
  line-height:1.2;
  color:var(--text);
  min-height:2.4em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.gridDesc{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
  min-height:calc(1.35em * 3);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.gridFx{
  margin-top:auto;
  padding-top:6px;
  font-size:12px;
  color:var(--text);
}

/* =========================
   収穫モーダル
========================= */
.reward{
  border:2px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,242,227,.98));
  border-radius:16px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--text);
}

.reward .big{
  font-weight:1000;
  font-size:16px;
  margin-bottom:4px;
}

.reward .mini{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:6px;
}

.reward .img{
  width:100%;
  max-width:220px;
  max-height:min(46vh, 320px);
  height:auto;
  object-fit:contain;
  display:block;
  margin:6px auto 0;
  border-radius:12px;
  border:2px solid var(--line);
  background:rgba(255,255,255,.92);
  image-rendering:auto;
}

.harvWrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
  width:100%;
}

.harvMeta{
  width:100%;
  max-width:300px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
}

.harvR{
  font-weight:1000;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:8px;
  border:2px solid var(--line);
  background:#fff;
  display:inline-block;
  color:var(--text);
}

.harvName{
  font-weight:1000;
  font-size:14px;
  line-height:1.2;
  color:var(--text);
}

.harvId{
  font-size:12px;
  color:var(--muted);
}

.note{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* ここをかなり詰める */
.harvCard{
  width:fit-content;
  max-width:222px;
  padding:1px;
  margin:0 auto;
  border:2px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,242,227,.98));
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(40,28,10,.08);
}

.harvCard img{
  display:block;
  width:auto;
  height:auto;
  max-width:240px;
  max-height:min(44vh, 306px);
  object-fit:contain;
  border-radius:12px;
}

.harvCard > img,
.harvCard picture img,
.harvCard canvas{
  display:block;
  border-radius:12px !important;
  max-width:216px !important;
  max-height:min(44vh, 306px) !important;
}

/* 収穫時の下ボタン */
.row{
  display:flex;
  gap:10px;
  margin-top:10px;
  width:100%;
  max-width:320px;
}

.row button{
  flex:1;
  min-height:44px;
  border:2px solid #ecd79a;
  border-radius:14px;
  padding:9px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #fffdf5 0%, #f8e9bb 55%, #ecd18b 100%);
  color:var(--btnText);
  font-weight:1000;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 4px 0 rgba(178,140,55,.55),
    0 8px 12px rgba(69,50,15,.08);
}

.row button:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 2px 0 rgba(178,140,55,.55),
    0 5px 8px rgba(69,50,15,.08);
}

.row button.primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, var(--orange1), var(--orange2));
  color:#2b1700;
  border-color:#f0c36d;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    0 4px 0 var(--orange3),
    0 8px 12px rgba(181,96,18,.14);
}

.sheetBody > button,
#mBody > button{
  min-height:44px;
  padding:10px 14px;
  border:2px solid #ecd79a;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #fffdf5 0%, #f8e9bb 55%, #ecd18b 100%);
  color:var(--btnText);
  font-weight:1000;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 4px 0 rgba(178,140,55,.55);
}

/* =========================
   遊び方モーダル
========================= */
.howtoHero{
  padding:4px 2px 12px;
}

.howtoHeroBadge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff6d8;
  font-size:11px;
  font-weight:1000;
  color:#6b4f18;
  margin-bottom:10px;
}

.howtoHeroTitle{
  font-size:24px;
  font-weight:1000;
  line-height:1.2;
  color:var(--text);
  margin-bottom:8px;
}

.howtoHeroLead{
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

.howtoHeroLead b{
  color:var(--text);
}

.howtoGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:6px;
}

.howtoCard{
  border:2px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,245,234,.96));
  box-shadow:0 6px 12px rgba(40,28,10,.06);
}

.howtoCardHead{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.howtoNo{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff7dc;
  border:2px solid var(--line);
  font-weight:1000;
  font-size:13px;
}

.howtoIco{
  flex:0 0 auto;
  font-size:18px;
  line-height:1;
}

.howtoCardTtl{
  font-size:16px;
  font-weight:1000;
  line-height:1.2;
  color:var(--text);
}

.howtoCardBody{
  font-size:13px;
  line-height:1.75;
  color:var(--text);
}

.howtoCardBody b{
  color:#5a3f10;
}

.howtoCard-shop{ background:linear-gradient(180deg, #fffef7, #fbf1d9); }
.howtoCard-equip{ background:linear-gradient(180deg, #f9fcff, #eaf4ff); }
.howtoCard-plant{ background:linear-gradient(180deg, #fbfff5, #eef8dc); }
.howtoCard-time{ background:linear-gradient(180deg, #f8f5ff, #efe9ff); }
.howtoCard-burn{ background:linear-gradient(180deg, #fff9f4, #ffe9d8); }
.howtoCard-book{ background:linear-gradient(180deg, #fffef7, #f8f2e2); }
.howtoCard-level{ background:linear-gradient(180deg, #fffbea, #fff1c7); }
.howtoCard-sell{ background:linear-gradient(180deg, #fff9f0, #ffedd9); }

.howtoTips{
  margin-top:14px;
  border:2px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(180deg, #fffef8, #f9f2df);
}

.howtoTipsTtl{
  font-size:15px;
  font-weight:1000;
  margin-bottom:6px;
  color:var(--text);
}

.howtoTipsBody{
  font-size:13px;
  line-height:1.75;
  color:var(--text);
}

/* =========================
   スマホ
========================= */
@media (max-width: 430px){
  .wrap{
    padding:10px 12px 16px;
  }

  .hud{
    padding:9px;
    border-radius:22px;
  }

  .hudBtn{
    min-width:50px;
    min-height:50px;
    padding:9px 11px;
    border-radius:15px;
  }

  .hudTitle{
    font-size:16px;
  }

  .hudSub{
    font-size:10px;
  }

  .actionGrid{
    gap:7px;
  }

  .actionBtn{
    min-height:48px;
    padding:8px 6px;
    font-size:13px;
    border-radius:14px;
    gap:5px;
  }

  .actionBtn .ico{
    font-size:15px;
  }

  .xpMainRow{
    gap:8px;
  }

  .lvBadge{
    min-width:60px;
    padding:7px 6px 6px;
    border-radius:12px;
  }

  .lvBadge b{
    font-size:18px;
  }

  .miniStats{
    gap:6px;
  }

  .miniStat{
    font-size:10px;
    padding:5px 7px;
    border-radius:8px;
  }

  .loadoutWrap{
    padding:9px;
  }

  .loadout{
    gap:8px;
  }

  .equipCard{
    padding:7px;
  }

  .equipTop{
    min-height:28px;
    margin-bottom:1px;
  }

  .equipTag{
    font-size:10px;
    padding:4px 7px;
    border-radius:8px;
  }

  .equipCnt{
    right:5px;
    bottom:8px;
    font-size:9px;
    padding:3px 5px;
    border-radius:7px;
  }

  .equipName{
    font-size:11px;
  }

  .farm{
    gap:7px;
  }

  .footer{
    font-size:10px;
    margin:24px 0 16px;
  }

  .plot .time,
  .plot .timer,
  .plot .remain,
  .plot .countdown{
    font-size:10px;
    left:4px;
    right:4px;
    bottom:4px;
    padding:4px 5px;
  }

  .gridImg{
    height:96px;
    margin-bottom:8px;
  }

  .gridImg img{
    max-width:90%;
    max-height:90%;
  }

  .gridCnt{
    right:-3px;
    bottom:-5px;
    font-size:9px;
    padding:3px 5px;
    border-radius:7px;
  }

  .gridSel{
    left:5px;
    top:5px;
    font-size:9px;
    padding:3px 6px;
    border-radius:7px;
  }

  .gridEmpty{
    min-width:96px;
    height:24px;
    padding:0 8px;
    font-size:11px;
    border-radius:5px;
  }

  .reward{
    padding:7px;
  }

  .harvMeta{
    max-width:280px;
  }

  .harvCard{
    max-width:206px;
    padding:1px;
  }

  .harvCard img,
  .harvCard > img,
  .harvCard picture img,
  .harvCard canvas{
    max-width:202px !important;
    max-height:min(40vh, 286px) !important;
  }

  .reward .img{
    max-width:206px;
    max-height:min(40vh, 286px);
  }

  .row{
    max-width:300px;
  }

  .row button{
    min-height:42px;
    font-size:13px;
    padding:9px 10px;
  }

  .howtoHeroTitle{
    font-size:18px;
  }

  .howtoHeroLead,
  .howtoCardBody,
  .howtoTipsBody{
    font-size:12px;
  }

  .howtoCardTtl{
    font-size:15px;
  }

  .howtoNo{
    width:26px;
    height:26px;
    font-size:12px;
  }

  .howtoIco{
    font-size:16px;
  }
}

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

  .gridDesc{
    display:none;
    min-height:0;
  }

  .harvCard{
    max-width:198px;
  }

  .harvCard img,
  .harvCard > img,
  .harvCard picture img,
  .harvCard canvas{
    max-width:194px !important;
  }

  .reward .img{
    max-width:198px;
  }
}

@media (max-width: 360px){
  .actionBtn{
    font-size:12px;
  }

  .actionBtn .ico{
    font-size:14px;
  }

  .xpTop{
    font-size:11px;
  }

  .xpTop small{
    font-size:10px;
  }

  .miniStat{
    font-size:10px;
  }

  .equipTop{
    min-height:26px;
  }

  .equipCnt{
    right:4px;
    bottom:7px;
    font-size:9px;
    padding:3px 5px;
  }

  .gridImg{
    height:94px;
  }

  .gridCnt{
    right:-2px;
    bottom:-4px;
    font-size:9px;
    padding:2px 5px;
  }

  .gridSel{
    left:4px;
    top:4px;
    font-size:9px;
    padding:3px 5px;
  }

  .gridEmpty{
    min-width:88px;
    height:22px;
    font-size:10px;
    padding:0 7px;
  }

  .reward{
    padding:6px;
  }

  .harvMeta{
    max-width:260px;
  }

  .harvCard{
    max-width:190px;
  }

  .harvCard img,
  .harvCard > img,
  .harvCard picture img,
  .harvCard canvas{
    max-width:186px !important;
    max-height:min(38vh, 270px) !important;
  }

  .reward .img{
    max-width:190px;
    max-height:min(38vh, 270px);
  }
}


/* =========================
   【最優先上書き】収穫カードだけ修正
   ※このブロックを一番下に貼るだけ
========================= */

/* カード枠：画像にピッタリ合わせる */
.harvCard{
  width:fit-content !important;
  max-width:100% !important;

  padding:4px !important;          /* ← 枠の余白を最小化 */
  border-radius:14px !important;
  border:2px solid var(--line) !important;

  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,242,227,.98)) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
  margin:0 auto !important;

  box-shadow:0 6px 14px rgba(40,28,10,.08) !important;
}

/* 画像：枠いっぱいに広げる（これが一番重要） */
.harvCard img{
  display:block !important;

  width:100% !important;          /* ← 横いっぱいに広げる */
  height:auto !important;

  max-width:260px !important;     /* ← カードサイズ（ここで調整） */
  max-height:min(55vh, 420px) !important;

  object-fit:contain !important;

  border-radius:10px !important;  /* ← 枠より少し小さい丸み */
}

/* スマホ微調整 */
@media (max-width: 430px){
  .harvCard img{
    max-width:250px !important;
    max-height:min(52vh, 390px) !important;
  }
}

@media (max-width: 360px){
  .harvCard img{
    max-width:220px !important;
    max-height:min(48vh, 360px) !important;
  }
}


.harvCard{
  width:100%;
  max-width:270px;
  max-height:min(56vh, 420px);

  border:2px solid var(--line);

  /* ★ここが今回の本命 */
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #111, #000);

  border-radius:16px;
  padding:4px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  box-shadow:0 6px 14px rgba(40,28,10,.12);
}