/* =========================================================================
   style.css  (v2 — ダーク&クール / 女神転生風)
   子ども向けの読みやすさ（大きめタップ・ふりがな級の可読性）は維持しつつ、
   背景を暗くして 光るモンスターを引き立てる。
   ========================================================================= */
:root{
  --accent:#7c4dff; --accent-d:#5e35b1; --accent-glow:#b388ff;
  --gold:#ffca28;
  --bg:#0f1218; --bg2:#161b26; --card:#1b2130; --card2:#232b3d;
  --ink:#eceff6; --sub:#9aa6bd; --line:#2b3548;
  --radius:18px; --shadow:0 6px 18px rgba(0,0,0,.45);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:-apple-system,"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  user-select:none; -webkit-user-select:none;
}

/* ---- うえのバー ---- */
#topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:max(env(safe-area-inset-top),8px) 16px 8px;
  background:linear-gradient(180deg,#1a1030,#0f1218);
  border-bottom:1px solid var(--line);
  color:#fff; z-index:5;
}
.brand{font-weight:800; font-size:20px; letter-spacing:.02em; text-shadow:0 0 10px var(--accent-glow);}
.wallet{display:flex; gap:8px; font-size:15px;}
.w-item{background:rgba(124,77,255,.18); border:1px solid var(--line); padding:4px 10px; border-radius:999px;}
.w-item b{font-size:16px; color:var(--gold);}

/* ---- まんなか ---- */
#app{flex:1 1 auto; overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch;}

/* ---- したのタブ ---- */
#tabbar{
  flex:0 0 auto; display:flex; background:#131824; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1; border:0; background:none; padding:8px 0 10px; font-size:11px; color:var(--sub);
  display:flex; flex-direction:column; align-items:center; gap:2px; font-family:inherit;
}
.tab .t-emoji{font-size:23px; filter:grayscale(.4) opacity(.8); transition:transform .1s;}
.tab.active{color:var(--accent-glow); font-weight:800;}
.tab.active .t-emoji{filter:none; transform:translateY(-2px) scale(1.14); text-shadow:0 0 8px var(--accent-glow);}

/* ============================ まきば ============================ */
.ranch{
  background:
    radial-gradient(120% 60% at 50% 0%, #241640 0%, #141126 45%, #0d0f18 100%);
  border-radius:var(--radius); padding:14px; min-height:340px; position:relative;
  border:1px solid var(--line); overflow:hidden;
}
.ranch::before{content:"🌙"; position:absolute; top:10px; right:16px; font-size:26px; filter:drop-shadow(0 0 8px #b0b8ff);}
.ranch::after{content:""; position:absolute; inset:0; background:radial-gradient(1px 1px at 20% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 15%,#fff,transparent),radial-gradient(1px 1px at 40% 30%,#cfd,transparent),radial-gradient(1px 1px at 85% 35%,#fff,transparent); opacity:.5; pointer-events:none;}
.ranch--dirty{filter:brightness(.9) saturate(.85);}
.ranch--filthy{filter:brightness(.75) saturate(.6);}
.ranch--filthy .monfield::after{content:"💀"; position:absolute; bottom:-4px; left:6px; font-size:20px; opacity:.8;}
.ranch-top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1;}
.ranch-dirt{font-size:13px; color:#cfd6e6; background:rgba(0,0,0,.35); border:1px solid var(--line); padding:6px 10px; border-radius:999px; display:flex; align-items:center; gap:8px;}

.monfield{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px;
  margin-top:14px; min-height:180px; align-content:start; position:relative; z-index:1;
}
.mon-slot{
  background:rgba(30,36,52,.7); border:1px solid var(--line); border-radius:16px; padding:8px 6px 6px;
  display:flex; flex-direction:column; align-items:center; position:relative;
  box-shadow:var(--shadow); font-family:inherit; color:var(--ink);
}
.mon-art{width:78px; height:78px;}
.mon-name{font-size:13px; font-weight:700; margin-top:2px; color:var(--ink);}
.mon-slot.grave{opacity:.7;}
.mon-slot.grave .mon-art{font-size:50px; display:flex; align-items:center; justify-content:center;}
.mini-note{font-size:11px; color:var(--sub);}
.mood-badge{position:absolute; top:4px; right:6px; font-size:18px;}
.mood-badge.sad{animation:shake 1s infinite;}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

.mon-bob{animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.empty-note{text-align:center; color:var(--sub); padding:40px 10px; font-size:15px; line-height:1.8; position:relative; z-index:1;}

/* だいじな ボタン */
.big-btn{
  display:block; width:100%; margin:14px 0 4px; padding:16px; border:0; border-radius:14px;
  background:linear-gradient(180deg,var(--accent),var(--accent-d)); color:#fff; font-size:18px; font-weight:800; font-family:inherit;
  box-shadow:0 6px 16px rgba(124,77,255,.4); cursor:pointer;
}
.big-btn:active{transform:scale(.98);}
.big-btn:disabled{background:#2a3346; color:#7a8499; box-shadow:none;}
.big-btn.hatch{background:linear-gradient(180deg,#d98a2b,#a15a00); box-shadow:0 6px 16px rgba(217,138,43,.35);}
.big-btn.hatch:disabled{background:#2a3346;}
.mini-btn{
  border:1px solid var(--line); background:rgba(124,77,255,.25); color:#fff; font-weight:700; padding:6px 14px;
  border-radius:999px; font-size:13px; font-family:inherit;
}
.mini-btn:disabled{background:#222a3a; color:#6b7488;}

/* せわパネル */
.sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-top:14px; box-shadow:var(--shadow);}
.sheet-head{display:flex; align-items:center; gap:12px; position:relative;}
.sheet-art{width:88px; height:88px; flex:0 0 auto; background:radial-gradient(circle,#232b3d,#12151c); border:1px solid var(--line); border-radius:16px;}
.sheet-name{font-size:20px; font-weight:800;}
.sheet-sub{font-size:13px; color:var(--sub); margin-top:2px;}
.close-x{position:absolute; top:-4px; right:-4px; border:1px solid var(--line); background:#2a3346; width:32px; height:32px; border-radius:50%; font-size:16px; color:var(--ink);}
.stat{display:flex; align-items:center; gap:10px; margin-top:12px;}
.stat-label{width:74px; font-size:14px; font-weight:700; color:var(--sub);}
.stat-track{flex:1; height:16px; background:#0e1220; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.stat-fill{height:100%; border-radius:999px; transition:width .3s;}
.max-note{margin-top:12px; color:var(--gold); font-weight:700; text-align:center;}
.sheet-actions{display:flex; gap:10px; margin-top:16px;}
.act-btn{flex:1; border:1px solid var(--line); border-radius:14px; padding:14px; font-size:16px; font-weight:800; font-family:inherit; background:var(--card2); color:var(--gold); box-shadow:var(--shadow);}
.act-btn:active{transform:scale(.97);}
.act-btn:disabled{opacity:.45; color:var(--sub);}
.warn-note{margin-top:14px; background:rgba(198,40,40,.15); border:1px solid #5a2230; color:#ffb4a2; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.7;}

/* ============================ あそぶ ============================ */
.screen-title{font-size:22px; font-weight:800; margin:2px 0 14px;}
.mg-menu{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.mg-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 12px; box-shadow:var(--shadow); font-family:inherit; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:6px;}
.mg-card:active{transform:scale(.97);}
.mg-emoji{font-size:40px;}
.mg-name{font-size:16px; font-weight:800;}
.mg-desc{font-size:12px; color:var(--sub);}
.reward-hint{margin-top:16px; text-align:center; color:var(--sub); font-size:14px;}
.hidden{display:none !important;}
.gamehost{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:6px; box-shadow:var(--shadow); text-align:center;}

.mg-title{font-size:20px; font-weight:800;}
.mg-sub{color:var(--sub); font-size:14px; margin:6px 0 14px; min-height:20px;}
.mg-round{margin:12px 0; font-weight:700; color:var(--sub);}
.mg-btn{border:0; background:linear-gradient(180deg,var(--accent),var(--accent-d)); color:#fff; font-size:20px; font-weight:800; padding:16px 40px; border-radius:16px; font-family:inherit; box-shadow:0 6px 16px rgba(124,77,255,.4);}
.mg-btn:active{transform:scale(.96);}

/* ぴたっとバー */
.timing-track{position:relative; height:34px; background:#0e1220; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:10px 0;}
.timing-zone{position:absolute; left:42%; width:16%; top:0; bottom:0; background:rgba(102,187,106,.5);}
.timing-marker{position:absolute; top:0; bottom:0; width:6px; background:#ff5252; border-radius:3px; transform:translateX(-50%); box-shadow:0 0 8px #ff5252;}

/* ひかりのじゅんばん */
.mem-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:280px; margin:0 auto;}
.mem-pad{height:100px; border:0; border-radius:16px; opacity:.4; transition:opacity .1s, transform .1s, box-shadow .1s;}
.mem-pad.on{opacity:1; transform:scale(1.05); box-shadow:0 0 26px rgba(255,255,255,.85);}

/* もぐらポカポカ */
.mg-hud{display:flex; justify-content:space-between; font-size:18px; font-weight:800; margin:6px 4px 12px;}
.tap-field{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:320px; margin:0 auto;}
.tap-hole{aspect-ratio:1; background:#0e1220; border:1px solid var(--line); border-radius:50%; position:relative; overflow:hidden; box-shadow:inset 0 6px 12px rgba(0,0,0,.6);}
.tap-mon{position:absolute; inset:8px; transform:translateY(110%); transition:transform .12s;}
.tap-hole.up .tap-mon{transform:translateY(0);}
.tap-hole.hit{background:rgba(255,202,40,.3);}

.result{padding:10px;}
.result-title{font-size:24px; font-weight:800;}
.result-score{font-size:18px; color:var(--sub); margin:6px 0 14px;}
.result-rewards{display:flex; flex-direction:column; gap:6px; font-size:18px; font-weight:700; align-items:center;}
.got-egg{color:var(--gold); animation:pop .4s;}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

.mg-flash{position:absolute; left:50%; top:40%; transform:translate(-50%,0); font-size:26px; font-weight:800; color:var(--accent-glow); opacity:0; pointer-events:none;}
.mg-flash.show{animation:flash .6s ease-out;}
@keyframes flash{0%{opacity:0;transform:translate(-50%,10px)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}

/* ============================ がったい ============================ */
.fuse-hint{text-align:center; color:var(--sub); font-size:15px; margin:6px 0 14px; line-height:1.7;}
.fuse-preview{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  background:radial-gradient(circle at 50% 40%,#241640,#12151c); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 8px; box-shadow:var(--shadow);
}
.fuse-slot{display:flex; flex-direction:column; align-items:center; width:78px;}
.fuse-slot .mon-art{width:64px; height:64px;}
.fuse-slot .mon-name{font-size:12px;}
.fuse-slot.result .mon-art{width:82px; height:82px;}
.fuse-slot.result{filter:drop-shadow(0 0 10px var(--accent-glow));}
.fuse-plus,.fuse-eq{font-size:22px; font-weight:800; color:var(--accent-glow);}
.rarity-tag{display:block; font-size:10px; color:var(--gold); margin-top:1px;}
.fuse-warn{text-align:center; color:#ffb4a2; font-size:13px; margin:12px 0 2px;}
.big-btn.fuse-go{background:linear-gradient(180deg,#ab47bc,#6a1b9a); box-shadow:0 6px 18px rgba(171,71,188,.5);}
.fuse-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:12px; margin-top:16px;}
.fuse-pick{cursor:pointer;}
.fuse-pick.picked{outline:3px solid var(--accent-glow); box-shadow:0 0 16px rgba(179,136,255,.6);}
.pick-badge{position:absolute; top:4px; left:6px; background:var(--accent); color:#fff; width:22px; height:22px; border-radius:50%; font-size:13px; display:flex; align-items:center; justify-content:center; font-weight:800;}

/* ============================ ずかん ============================ */
.dex-count{font-size:16px; color:var(--sub); font-weight:700;}
.dex-line{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:12px; box-shadow:var(--shadow);}
.dex-line-label{font-weight:800; margin-bottom:8px; color:var(--accent-glow);}
.dex-line-forms{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.dex-cell{background:#0e1220; border:1px solid var(--line); border-radius:14px; padding:8px 4px; text-align:center;}
.dex-cell.locked{opacity:.8;}
.dex-art{width:100%; aspect-ratio:1; max-width:80px; margin:0 auto;}
.dex-cell-name{font-size:12px; font-weight:700; margin-top:4px;}
.majin-line{border-color:#6a4a10; background:linear-gradient(180deg,#20180a,#161b26);}
.majin-line .dex-line-label{color:var(--gold); text-shadow:0 0 8px rgba(255,202,40,.5);}

/* ============================ おみせ ============================ */
.shop-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.shop-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 10px; text-align:center; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; color:var(--ink);}
.shop-emoji{font-size:40px;}
.shop-price{color:var(--gold);}
.shop-note{margin-top:16px; text-align:center; color:var(--sub); font-size:14px;}

/* ============================ せってい ============================ */
.settings{display:flex; flex-direction:column; gap:12px;}
.as-label{display:flex; align-items:center; justify-content:center; cursor:pointer;}
.settings-note{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; color:var(--sub); font-size:13px; line-height:1.8; box-shadow:var(--shadow);}
.settings hr{border:0; border-top:1px solid var(--line); margin:8px 0;}
.danger-btn{border:1px solid #5a2230; background:rgba(198,40,40,.15); color:#ff8a80; font-weight:800; padding:14px; border-radius:14px; font-family:inherit; font-size:15px;}

/* ============================ 演出 ============================ */
#toast{position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,.88); border:1px solid var(--line); color:#fff; padding:10px 20px; border-radius:999px; font-weight:700; opacity:0; transition:.2s; z-index:20;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.bigmsg{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,3,12,.65); z-index:30;}
.bigmsg-box{background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--accent); padding:24px 28px; border-radius:22px; font-size:22px; font-weight:800; text-align:center; color:var(--ink); box-shadow:0 0 40px rgba(124,77,255,.5); animation:pop .3s; max-width:82%; line-height:1.6;}