*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
:root{
  --ink:#173b4a; --mint:#eaf7f2; --deep:#0f2e3d;
  --glu:#ff5d73; --ins:#7fbfff; --glp:#7fd08a; --food:#ffcf4d;
  --green:#3ddc84; --amber:#ffcf4d; --danger:#ff4d5e;
  --cell:60px;
}
html,body{height:100%;font-family:"Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;color:var(--ink);overscroll-behavior:none;overflow:hidden}
/* ページ自体を完全固定＝ドラッグ中のスクロール/アドレスバー開閉で画面がズレるのを防ぐ */
body{position:fixed;inset:0;background:radial-gradient(120% 100% at 50% 0%,#173b4a 0%,#0c2531 60%,#081a23 100%);display:flex;justify-content:center;align-items:stretch;touch-action:none}
#app{width:min(100vw,460px);height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;touch-action:none}

.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.show{display:flex}

/* タイトル（刷新） */
#title{align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 18%,#123a4d 0%,transparent 65%),linear-gradient(180deg,#0d3040,#08202b 55%,#061820)}
#titleWave{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.title-glow{position:absolute;left:50%;top:26%;width:340px;height:340px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(61,220,132,.22),transparent 60%);filter:blur(8px)}
/* 浮かび上がるパネル（CGMが上がるイメージ） */
.title-floats{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.title-floats img{position:absolute;left:var(--x);bottom:-70px;width:var(--s);opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:floatup 12s linear infinite;animation-delay:var(--d)}
@keyframes floatup{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:.85}55%{transform:translateY(-58vh) translateX(16px) rotate(22deg)}100%{transform:translateY(-118vh) translateX(-12px) rotate(-16deg);opacity:0}}
/* キラキラ */
.spark{position:absolute;left:var(--sx);top:var(--sy);width:10px;height:10px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,#fff,transparent 60%);animation:twinkle 2.4s ease-in-out infinite;animation-delay:var(--sd)}
.spark::before{content:"";position:absolute;inset:-4px;background:conic-gradient(from 0deg,transparent,#fff6,transparent 30%);border-radius:50%}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
/* ボスがちょい見え */
.title-boss{position:absolute;right:-14px;bottom:6px;width:96px;z-index:0;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:bosspeek 3s ease-in-out infinite}
@keyframes bosspeek{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.title-inner{position:relative;z-index:1;padding:22px;animation:pop .5s ease;display:flex;flex-direction:column;align-items:center}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;margin-bottom:4px}
.logo-sub{font-size:11px;letter-spacing:3px;color:#7fe0c8;font-weight:800;margin-bottom:8px;text-shadow:0 0 10px rgba(61,220,132,.6)}
.logo-word{position:relative;font-size:52px;font-weight:900;letter-spacing:0;color:#eaffff;
  text-shadow:0 3px 0 #0a2029,0 0 18px rgba(127,224,255,.35)}
.logo-word .rush{background:linear-gradient(180deg,#fff,#7fe0ff 55%,#3aa0ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #0a2029)}
.logo-jp{font-size:14px;font-weight:800;color:#bfe6ff;letter-spacing:2px;margin-top:8px;opacity:.9}
.logo-dot{display:inline-block;width:13px;height:13px;margin-left:3px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8aa5,#ff3d6a);box-shadow:0 0 12px #ff5d7a;vertical-align:6px;animation:pulseDot 1.2s ease-in-out infinite}
.title-mascot{width:118px;margin:14px 0 4px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:float 2.6s ease-in-out infinite}
#btnStart{animation:playpulse 1.5s ease-in-out infinite}
@keyframes playpulse{0%,100%{box-shadow:0 7px 0 #c96f00,0 12px 22px rgba(0,0,0,.35),0 0 0 0 rgba(255,210,77,.55)}50%{box-shadow:0 7px 0 #c96f00,0 12px 22px rgba(0,0,0,.35),0 0 26px 7px rgba(255,210,77,.55)}}
#title .sub{color:#cfeeff;margin:6px 0 20px;font-size:15px;font-weight:700}
#title .sub b{color:#7dffb0}
.btn-play{background:linear-gradient(#ffd24d,#ff9f1c);color:#5a3200;border:none;font-weight:800;font-size:22px;padding:15px 46px;border-radius:40px;box-shadow:0 7px 0 #c96f00,0 12px 22px rgba(0,0,0,.35);cursor:pointer;font-family:inherit}
.btn-play:active{transform:translateY(5px);box-shadow:0 2px 0 #c96f00}
.title-menu{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px;max-width:300px}
.title-menu button{background:linear-gradient(#12455a,#0c3444);border:1.5px solid #2f7f96;color:#dffaff;padding:10px 15px;border-radius:24px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:800;box-shadow:0 3px 0 #062430,0 4px 10px rgba(0,0,0,.3)}
.title-menu button:active{transform:translateY(3px);box-shadow:0 1px 0 #062430}
#title .tiny{color:#7fa8b8;font-size:11.5px;margin-top:18px;letter-spacing:.5px}
@keyframes pulseDot{0%,100%{transform:scale(1);box-shadow:0 0 12px #ff5d7a}50%{transform:scale(1.3);box-shadow:0 0 22px #ff5d7a}}

/* あそびかた */
#how,#ranking,#creator{align-items:center;justify-content:center;padding:18px;background:rgba(6,20,28,.9)}
.how-card,.rank-card,.creator-card{background:#fff;border-radius:24px;padding:24px 20px;max-width:390px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.5);max-height:92dvh;overflow:auto}
.how-card h2,.rank-card h2,.creator-card h2{text-align:center;color:var(--deep);margin-bottom:14px}
.how-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.how-card li{background:var(--mint);padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.5}
.how-note{text-align:center;margin:14px 0 16px;font-size:12.5px;color:#39707f;font-weight:700}
#how .btn-play{display:block;margin:0 auto;font-size:18px;padding:12px 38px}

/* ランキング */
.rank-tabs{text-align:center;margin-bottom:10px}
.rank-tabs span{font-size:12px;font-weight:800;color:#2a8f9e;background:var(--mint);padding:5px 14px;border-radius:20px}
.rank-list{list-style:none;counter-reset:rk;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.rank-list li{counter-increment:rk;display:flex;align-items:center;gap:10px;background:var(--mint);padding:10px 12px;border-radius:12px;font-size:14px}
.rank-list li::before{content:counter(rk);font-weight:900;color:#2a8f9e;width:24px;text-align:center;font-size:15px}
.rank-list li.me{background:#fff3d6;box-shadow:0 0 0 2px #ffcf4d}
.rank-list li .rn{flex:1;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list li .rs{font-weight:900;color:var(--glu)}
.rank-list li .ra{font-size:11px;color:#7d94a0}
.rank-list li:nth-child(1)::before{color:#e6a800}
.rank-note{text-align:center;font-size:11px;color:#9fb;color:#7d94a0;margin-bottom:14px}
#ranking .btn-play,#creator .btn-play{display:block;margin:2px auto 0;font-size:17px;padding:11px 34px}

/* コレクション（実績＋図鑑） */
.coll-card{max-height:90dvh;overflow:auto}
.coll-h{font-size:14px;font-weight:900;color:var(--deep);margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.coll-h span{font-size:11px;font-weight:800;color:#2a8f9e;background:var(--mint);padding:3px 10px;border-radius:14px}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ach{background:#eef3f5;border-radius:14px;padding:10px 10px;text-align:center;opacity:.6;filter:grayscale(1)}
.ach.got{background:linear-gradient(160deg,#fff8e6,#ffedc2);opacity:1;filter:none;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.ach .ai{font-size:26px;display:block;line-height:1.1}
.ach b{display:block;font-size:12px;color:var(--deep);margin:3px 0 2px}
.ach .ad{font-size:10px;color:#6a808a;line-height:1.35}
.dex-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.dex{background:var(--mint);border-radius:14px;padding:8px;text-align:center}
.dex img{width:66px;height:66px;object-fit:contain}
.dex:not(.got) img{filter:brightness(0);opacity:.35}
.dex b{display:block;font-size:12px;color:var(--deep);margin:2px 0}
.dex span{font-size:10px;color:#6a808a;line-height:1.35;display:block}
.dex:not(.got){opacity:.85}
/* 実績解除トースト */
#achToast{position:absolute;left:50%;top:56px;transform:translate(-50%,-140%);z-index:25;pointer-events:none;
  background:linear-gradient(#fff3cf,#ffe08a);color:#5a3200;font-weight:800;font-size:13px;padding:9px 16px;border-radius:22px;box-shadow:0 6px 16px rgba(0,0,0,.4);white-space:nowrap;opacity:0}
#achToast b{font-weight:900}
#achToast.show{animation:achtoast 2.6s ease}
@keyframes achtoast{0%{transform:translate(-50%,-140%);opacity:0}10%{transform:translate(-50%,0);opacity:1}85%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-60%);opacity:0}}

/* 制作者 */
.creator-dr{width:120px;display:block;margin:0 auto -6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.creator-bio{text-align:center;font-size:13.5px;line-height:1.7;color:#3a5b66;margin-bottom:16px}
.study-cta{background:linear-gradient(135deg,#eaf7f2,#dff0ea);border-radius:16px;padding:14px;text-align:center;margin-bottom:14px;border:2px dashed #7fd0c0}
.study-cta p{font-size:13px;font-weight:800;color:var(--deep);margin-bottom:10px}
.study-cta a{display:inline-block;background:#2a8f9e;color:#fff;text-decoration:none;font-size:13px;font-weight:800;padding:9px 16px;border-radius:22px;margin:3px}
.study-cta.small{padding:11px;margin:12px 0}
.study-cta.small p{font-size:12px;margin-bottom:7px}
.study-cta.small a{font-size:12px;padding:7px 13px}
.creator-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.creator-links a{font-size:12px;font-weight:700;color:#2a8f9e;background:var(--mint);padding:8px 13px;border-radius:20px;text-decoration:none}

/* ===== ゲーム ===== */
#game{background:linear-gradient(var(--game-bg1,#123644),var(--game-bg2,#0c2531));transition:background .8s ease}
/* TIRから出たら画面の枠が赤く点滅 */
#danger{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;transition:opacity .2s}
#danger.on{opacity:1;animation:dangerflash .75s ease-in-out infinite}
#danger.hard{animation-duration:.42s}
@keyframes dangerflash{0%,100%{box-shadow:inset 0 0 0 3px rgba(255,45,45,0),inset 0 0 40px 6px rgba(255,45,45,.12)}50%{box-shadow:inset 0 0 0 7px rgba(255,45,45,.9),inset 0 0 80px 16px rgba(255,45,45,.5)}}
#hud{padding:8px 10px 4px;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}
.mutebtn{position:absolute;top:7px;right:6px;z-index:22;background:rgba(0,0,0,.35);border:none;color:#fff;font-size:15px;width:30px;height:30px;border-radius:50%;cursor:pointer;line-height:1}
.mutebtn:active{transform:scale(.9)}
.home{background:#ffffff22;border:none;color:#fff;font-size:19px;width:38px;height:38px;border-radius:11px;cursor:pointer}
.home:active{transform:scale(.92)}
.gauges{display:flex;flex-direction:column;gap:5px;min-width:0}
.glabel{font-size:11px;color:#dff;font-weight:700;display:flex;align-items:baseline;gap:4px}
.glabel b{font-size:15px;color:#fff}.glabel small{font-size:9px;color:#8fb6c6}
.bg-bar{position:relative;height:15px;background:#04141b;border-radius:9px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.zone{position:absolute;top:0;bottom:0}
.zone.low{left:0;width:11.5%;background:repeating-linear-gradient(45deg,#ff4d5e44,#ff4d5e44 6px,#ff4d5e22 6px,#ff4d5e22 12px)}
.zone.target{left:11.5%;width:42.3%;background:#3ddc8433}
.zone.tight{left:11.5%;width:26.9%;background:#2a8f5e55}
.zone.high{left:53.8%;right:0;background:repeating-linear-gradient(45deg,#ffcf4d33,#ffcf4d33 6px,#ff4d5e33 6px,#ff4d5e33 12px)}
.needle{position:absolute;top:-2px;bottom:-2px;width:4px;left:31%;background:#fff;border-radius:3px;box-shadow:0 0 8px #fff,0 0 3px #000;transition:left .35s cubic-bezier(.3,1.2,.5,1)}
.a1c-row{display:flex;gap:7px}
.a1c,.tir{flex:1;background:#04141b;border-radius:9px;padding:3px 8px;font-size:10px;color:#9fd;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.a1c b,.tir b{font-size:14px;color:#fff}
.a1c.good b{color:#7dffb0}.a1c.mid b{color:#ffe07d}.a1c.bad b{color:#ff9d9d}
.score{display:flex;align-items:center;gap:7px}
.doctor{position:relative;width:40px}
.doctor img{width:40px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.docgauge{height:5px;background:#04141b;border-radius:4px;margin-top:1px;overflow:hidden}
.docfill{height:100%;width:0;background:linear-gradient(90deg,#ffd24d,#ff6a3d);transition:width .3s}
.doctor.ready img{animation:wiggle .4s ease infinite}
.pts{font-size:9px;color:#9fd;text-align:center;line-height:1.2}
.pts b{font-size:16px;color:#fff}
#multBadge{display:block;font-size:12px;font-weight:900;color:#9fd;margin-top:1px;transition:transform .15s}
#multBadge.warm{color:#ffe07d}
#multBadge.hot{color:#ff8a4d;transform:scale(1.15);text-shadow:0 0 8px #ff6a3d}

/* ボス（大きくドカン・CGMに被る） */
#boss{position:relative;margin:2px 10px 0;padding:2px 4px;z-index:6}
.boss-wrap{position:relative;margin-right:0}
.boss-bar{height:16px;background:#3a0d16;border-radius:9px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 0 2px #ffffff14}
#bossHp{height:100%;width:100%;background:linear-gradient(90deg,#ff4d5e,#ff8a3d);border-radius:9px;transition:width .25s cubic-bezier(.3,1.2,.5,1)}
#bossName{position:absolute;top:0;left:8px;line-height:16px;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
#bossImg{display:none;position:absolute;right:-6px;left:auto;margin-left:0;top:-4px;width:104px;z-index:7;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));transform-origin:right bottom}
#boss.active #bossImg{display:block}
#bossName{z-index:8}
#bossHp.waitbar{background:linear-gradient(90deg,#1f8fb0,#3ddc84)}
/* ボスの攻撃モーション（前に突っ込む） */
#boss.attack #bossImg{animation:bossattack .42s cubic-bezier(.3,1.4,.4,1)}
@keyframes bossattack{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.25) translateY(16px) rotate(-3deg)}55%{transform:scale(1.1) translateY(6px)}100%{transform:scale(1) translateY(0)}}
/* 高血糖でボスが怒る（大きく・赤オーラ） */
#boss.rage #bossImg{filter:brightness(1.12) drop-shadow(0 0 16px rgba(255,60,60,.85)) drop-shadow(0 8px 14px rgba(0,0,0,.6));transform:scale(1.1);animation:bossrage .5s ease-in-out infinite}
@keyframes bossrage{0%,100%{transform:scale(1.1) rotate(-2deg)}50%{transform:scale(1.14) rotate(2deg)}}
/* 大当たり：Dr.いわたつの魔法（全消し） */
#magicBurst{position:absolute;inset:0;z-index:12;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
#magicBurst.show{display:flex;animation:magicfade 1.7s ease forwards}
#magicBurst img{width:66%;max-width:280px;filter:drop-shadow(0 0 24px rgba(255,224,120,.8)) drop-shadow(0 10px 20px rgba(0,0,0,.5));animation:magicpop .6s cubic-bezier(.2,1.5,.4,1)}
#magicBurst span{margin-top:8px;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(90deg,#ffd24d,#ff8a3d);padding:8px 20px;border-radius:26px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
@keyframes magicpop{0%{transform:scale(.3) rotate(-10deg);opacity:0}45%{transform:scale(1.15) rotate(3deg)}70%{transform:scale(1) rotate(0)}78%{transform:scale(1.12)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes magicfade{0%,72%{opacity:1}100%{opacity:0}}
/* ドカン：全画面フラッシュ＋衝撃波リング */
#flash{position:absolute;inset:0;background:radial-gradient(circle,#fff,#ffe8a8);opacity:0;z-index:40;pointer-events:none}
#flash.go{animation:flashfx .45s ease}
#flash.red{background:radial-gradient(circle,rgba(255,70,70,.92),rgba(170,0,0,.62))}
@keyframes flashfx{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}
/* ボス攻撃名ポップ */
#atkPopup{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(0);z-index:15;pointer-events:none;
  font-size:30px;font-weight:900;color:#fff;text-shadow:0 3px 0 #a00,0 0 20px #ff5a5a;white-space:nowrap}
#atkPopup.show{animation:atkpop .8s cubic-bezier(.2,1.6,.3,1)}
@keyframes atkpop{0%{transform:translate(-50%,-50%) scale(0) rotate(-6deg)}30%{transform:translate(-50%,-50%) scale(1.25) rotate(3deg)}50%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}
#shockwave{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%) scale(0);z-index:11;pointer-events:none;opacity:0;
  border:10px solid rgba(255,255,255,.95);box-shadow:0 0 40px rgba(255,224,120,.95),inset 0 0 24px rgba(255,224,120,.7)}
#shockwave.go{animation:shockfx .55s cubic-bezier(.15,.75,.3,1)}
@keyframes shockfx{0%{transform:translate(-50%,-50%) scale(0);opacity:1;border-width:12px}100%{transform:translate(-50%,-50%) scale(10);opacity:0;border-width:1px}}
#bossImg.hit{animation:bosshit .3s ease}
#boss.enter #bossImg{animation:bossenter .6s cubic-bezier(.2,1.4,.4,1)}
#boss.defeat #bossImg{animation:bossko .8s ease forwards}
#bossDmg{position:absolute;right:34px;top:0;z-index:8;color:#ffde59;font-weight:900;font-size:24px;text-shadow:0 2px 0 #b00,0 0 8px #ff5;opacity:0;pointer-events:none}
#bossDmg.show{animation:dmgpop .7s ease}
@keyframes bosshit{
 0%{transform:translateX(0);filter:brightness(2.6) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
 25%{transform:translateX(-6px) rotate(-4deg);filter:brightness(1.8) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
 50%{transform:translateX(6px) rotate(4deg)}
 75%{transform:translateX(-4px)}
 100%{transform:translateX(0);filter:brightness(1) drop-shadow(0 6px 10px rgba(0,0,0,.5))}}
@keyframes bossenter{0%{transform:scale(2.8) translateY(-46px);opacity:0}38%{transform:scale(1.35) translateY(0);opacity:1}54%{transform:scale(.82)}70%{transform:scale(1.12)}85%{transform:scale(.96)}100%{transform:scale(1)}}
/* ボス登場の警告バナー（超派手） */
#bossAlert{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%) scaleY(0);z-index:23;pointer-events:none;text-align:center;
  background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 18px,#ffcf00 18px,#ffcf00 36px);padding:6px 0;box-shadow:0 0 40px rgba(255,60,60,.7)}
#bossAlert::before{content:"";position:absolute;inset:6px 0;background:rgba(140,10,10,.94)}
#bossAlert span,#bossAlert b{position:relative;display:block}
#bossAlert span{font-size:16px;font-weight:900;color:#ffcf00;letter-spacing:6px;text-shadow:0 2px 4px #000}
#bossAlert b{font-size:30px;font-weight:900;color:#fff;letter-spacing:2px;text-shadow:0 3px 0 #700,0 0 18px #ff5}
#bossAlert.show{animation:bossalert 1.7s cubic-bezier(.2,1.5,.3,1)}
@keyframes bossalert{0%{transform:translateY(-50%) scaleY(0)}14%{transform:translateY(-50%) scaleY(1.15)}24%{transform:translateY(-50%) scaleY(1)}80%{transform:translateY(-50%) scaleY(1);opacity:1}100%{transform:translateY(-50%) scaleY(1);opacity:0}}
@keyframes bossko{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.12) rotate(-6deg)}100%{transform:scale(.72) rotate(12deg) translateY(16px);opacity:.9}}
@keyframes dmgpop{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:1;transform:translateY(-6px) scale(1.15)}70%{opacity:1;transform:translateY(-16px) scale(1)}100%{opacity:0;transform:translateY(-32px) scale(1)}}

/* CGM 上スペース */
#cgm{position:relative;height:104px;margin:2px 8px 4px;border-radius:14px;overflow:hidden;background:linear-gradient(#0a2833,#092028);box-shadow:inset 0 0 0 2px #ffffff10}
#cgmCanvas{width:100%;height:100%;display:block}
.cgm-tag{position:absolute;top:6px;left:10px;font-size:11px;font-weight:900;color:var(--accent,#8fd6c8);letter-spacing:.5px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#clearBar{position:absolute;left:0;right:0;bottom:0;height:5px;background:#ffffff14}
#clearFill{height:100%;width:0;background:linear-gradient(90deg,var(--accent,#3ddc84),#fff);box-shadow:0 0 8px var(--accent,#3ddc84);transition:width .3s ease}
/* STAGE CLEAR モーダル（タップで次へ＝勝手に進まない） */
#stageClear{position:absolute;inset:0;z-index:24;display:none;align-items:center;justify-content:center;background:rgba(4,16,22,.82)}
#stageClear.show{display:flex;animation:fade .3s ease}
.sc-in{text-align:center;animation:pop .5s ease;padding:20px}
.sc-in span{display:block;font-size:30px;font-weight:900;color:#fff;text-shadow:0 3px 0 #b06a00,0 0 24px #ffd24d;margin-bottom:10px}
.sc-in b{display:block;font-size:15px;font-weight:900;color:#5a3200;background:linear-gradient(#ffe08a,#ffca4d);padding:8px 18px;border-radius:22px;box-shadow:0 5px 0 #c98a00;margin-bottom:22px}
#btnNextStage{background:linear-gradient(#ffd24d,#ff9f1c);color:#5a3200;border:none;font-weight:900;font-size:20px;padding:14px 40px;border-radius:36px;box-shadow:0 6px 0 #c96f00,0 10px 20px rgba(0,0,0,.35);cursor:pointer;font-family:inherit;animation:playpulse 1.4s ease-in-out infinite}
#btnNextStage:active{transform:translateY(4px);box-shadow:0 2px 0 #c96f00}

/* 盤面 */
#boardWrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
#board{position:relative;display:grid;gap:4px;touch-action:none;padding:7px;background:var(--board-bg,#0a2029);border-radius:16px;box-shadow:inset 0 0 0 3px #ffffff10;transition:background .8s ease}
.cell{width:var(--cell);height:var(--cell);position:relative;display:flex;align-items:center;justify-content:center;border-radius:13px}
.cell .orb{width:90%;height:90%;object-fit:contain;pointer-events:none;transition:transform .1s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));position:relative;z-index:1}
/* 種類ごとに色をハッキリ区別（見分けやすさ最優先） */
.cell.t-run{background:linear-gradient(160deg,#3ec8b0,#1a9e8a)}
.cell.t-dumbbell{background:linear-gradient(160deg,#b07bff,#7b3fe4)}
.cell.t-jumprope{background:linear-gradient(160deg,#ff7aa8,#e64d80)}
.cell.t-bike{background:linear-gradient(160deg,#4aa3ff,#1e6fe0)}
.cell.t-veg{background:linear-gradient(160deg,#57e08a,#1fae55)}
.cell.t-healthy{background:linear-gradient(160deg,#ffb04a,#f5820f)}
.cell.t-fish{background:linear-gradient(160deg,#7fd0e0,#3fa8c0)}
.cell.t-brownrice{background:linear-gradient(160deg,#c9a06a,#9a6b3a)}
.cell.t-insulin{background:linear-gradient(160deg,#4aa3ff,#1e6fe0)}
.cell.t-pill{background:linear-gradient(160deg,#c58bff,#8b3fe4)}
.cell.t-capsule{background:linear-gradient(160deg,#ff7a7a,#e0344a)}
.cell.t-water{background:linear-gradient(160deg,#4ac8ff,#1e8fe0)}
.cell.t-sleep{background:linear-gradient(160deg,#8b9bff,#5a5fe0)}
.cell.t-walk{background:linear-gradient(160deg,#5ad8a0,#1fae7a)}
.cell.t-stretch{background:linear-gradient(160deg,#ffd04a,#f5a80f)}
.cell.t-soymilk{background:linear-gradient(160deg,#efe0b0,#c9a86a)}
.cell.t-nuts{background:linear-gradient(160deg,#c9955a,#9a6b3a)}
.cell.t-yogurt{background:linear-gradient(160deg,#ffc0d8,#e888b0)}
.cell.t-tea{background:linear-gradient(160deg,#6ac07a,#2f9e55)}
.cell.t-swim{background:linear-gradient(160deg,#4ab8ff,#1e7fe0)}
.cell.t-yoga{background:linear-gradient(160deg,#a87bff,#7b3fe4)}
.cell.t-squat{background:linear-gradient(160deg,#ff8a5a,#e0602a)}
.cell.t-stairs{background:linear-gradient(160deg,#8ac04a,#5a9e2a)}
.cell.t-cgm{background:linear-gradient(160deg,#7fd0e0,#3fa8c0)}
.cell.t-pump{background:linear-gradient(160deg,#b0bac5,#7a8a9a)}
.cell.t-sglt2{background:linear-gradient(160deg,#6ab8ff,#2e8fe0)}
.cell.t-metformin{background:linear-gradient(160deg,#d0d8e2,#9aa8ba)}
.cell.t-checkup{background:linear-gradient(160deg,#6ac8b0,#2f9e88)}
.cell.t-doctor{background:linear-gradient(160deg,#b8d0ff,#7a9ae0)}
.cell.t-heart{background:linear-gradient(160deg,#ff6a7a,#e0344a)}
.cell.t-kidney{background:linear-gradient(160deg,#b57b5a,#8a5b3a)}
.cell[class*="t-"]{box-shadow:inset 0 2px 4px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.25)}
.cell.sel .orb{transform:scale(1.18)}
.cell.sel::after{content:"";position:absolute;inset:3px;border-radius:11px;border:3px solid #fff;box-shadow:0 0 12px #fff,0 0 18px var(--hl,#7fbfff)}
.cell.pop{animation:tilebreak .17s ease forwards;z-index:3}
.cell.pop .orb{animation:pop-out .16s ease forwards}
.cell.drop .orb{animation:drop-in .26s cubic-bezier(.3,1.5,.5,1)}
#fx{position:absolute;inset:0;pointer-events:none;z-index:5}
#chainLabel{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(0);z-index:6;font-size:30px;font-weight:900;color:#fff;text-shadow:0 3px 0 #ff6a3d,0 0 18px #ffd24d;pointer-events:none}
#chainLabel.show{animation:chain .55s ease}
#comboLabel{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) scale(0);z-index:6;font-weight:900;pointer-events:none;color:#fff;font-size:34px;text-shadow:0 3px 0 #d81e6a,0 0 20px #ff6a9d;font-style:italic}
#comboLabel.show{animation:combo .6s cubic-bezier(.2,1.5,.4,1)}

/* ドクターチャンス小型スロット（盤面を塞がない・タッチ透過） */
.slotbar{position:absolute;top:6px;left:50%;transform:translateX(-50%) translateY(-160%);z-index:8;pointer-events:none;
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);border-radius:22px;padding:6px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:0;transition:transform .35s cubic-bezier(.3,1.35,.5,1),opacity .3s,box-shadow .3s}
.slotbar.show{transform:translateX(-50%) translateY(0);opacity:1}
.slotbar.win{box-shadow:0 0 0 3px #ffd24d,0 6px 24px rgba(255,120,40,.6);animation:slotpulse .5s ease}
.sb-tag{font-size:11px;font-weight:800;color:#ff6a3d;white-space:nowrap}
.sb-reels{display:flex;gap:4px}
.sb-reels b{width:30px;height:34px;display:flex;align-items:center;justify-content:center;background:#eaf7f2;border-radius:8px;font-size:21px;box-shadow:inset 0 0 0 2px #ffd24d66;transition:transform .15s}
.sb-res{font-size:12px;font-weight:900;color:#ff3d6a;min-width:44px}
@keyframes slotpulse{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(0) scale(1.06)}}

/* ステージ告知トースト */
#stageToast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(0);z-index:9;pointer-events:none;
  background:linear-gradient(#ffd24d,#ff9f1c);color:#5a3200;font-weight:900;font-size:15px;padding:12px 20px;border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);text-align:center;max-width:80%}
#stageToast.show{animation:stagepop 2.2s ease}
@keyframes stagepop{0%{transform:translate(-50%,-50%) scale(0)}12%{transform:translate(-50%,-50%) scale(1.1)}22%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}

/* Dr 下スペース */
#drStage{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 10px calc(16px + env(safe-area-inset-bottom,0));min-height:92px;box-sizing:border-box;flex:0 0 auto}
#drReact{position:absolute;left:8px;bottom:12px;width:46px;height:58px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));transition:transform .2s}
#drReact.hit{animation:wiggle .3s ease}
/* コメントは盤面の真下・中央に大きく見やすく */
#coachBubble{position:relative;background:#fff;color:var(--ink);border-radius:18px;padding:13px 18px;font-size:16px;font-weight:800;line-height:1.45;text-align:center;box-shadow:0 5px 14px rgba(0,0,0,.4);max-width:80%}
#coachBubble::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff}

/* オーバーレイ */
.overlay{position:absolute;inset:0;background:rgba(4,16,22,.88);display:none;align-items:center;justify-content:center;z-index:20;padding:18px}
.overlay.show{display:flex;animation:fade .3s ease}

/* 抽選 */
.gacha-box{background:#fff;border-radius:26px;padding:24px 20px;text-align:center;width:100%;max-width:330px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gacha-title{font-size:21px;font-weight:900;color:#ff6a3d;margin-bottom:16px}
.reel-wrap{height:104px;overflow:hidden;border-radius:18px;background:var(--mint);position:relative;box-shadow:inset 0 0 0 4px #ffd24d}
.reel-wrap::before,.reel-wrap::after{content:"";position:absolute;left:0;right:0;height:32px;z-index:2;pointer-events:none}
.reel-wrap::before{top:0;background:linear-gradient(#eaf7f2,transparent)}
.reel-wrap::after{bottom:0;background:linear-gradient(transparent,#eaf7f2)}
.reel{display:flex;flex-direction:column;align-items:center}
.reel .slot{height:104px;display:flex;align-items:center;justify-content:center;font-size:60px;flex:0 0 104px}
.gacha-result{margin-top:14px;font-size:18px;font-weight:900;min-height:26px}
.gacha-result.win{color:#ff3d6a;animation:pop .4s ease}
.gacha-result.lose{color:#7d94a0}

/* 結果 */
.over-box{background:#fff;border-radius:26px;padding:24px 20px;text-align:center;max-width:360px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:94dvh;overflow:auto}
#overFace{font-size:56px}
.over-box h2{color:var(--deep);margin:4px 0 6px;font-size:22px}
.badge{display:inline-block;background:linear-gradient(#ffe08a,#ffca4d);color:#6b4a00;font-weight:900;font-size:14px;padding:7px 16px;border-radius:22px;margin-bottom:10px;box-shadow:0 3px 0 #d99b00}
.tir-hero{background:linear-gradient(135deg,#3ddc84,#2a9f9e);border-radius:16px;padding:12px;margin-bottom:10px;color:#fff}
.tir-hero span{display:block;font-size:11px;font-weight:700;opacity:.9}
.tir-hero b{font-size:38px;line-height:1.1}
.disclaimer{font-size:10px;color:#9fb0b8;line-height:1.5;margin:10px 0 2px}
#overMsg{font-size:13px;color:#4a6b76;line-height:1.6;background:var(--mint);padding:11px;border-radius:14px;margin-bottom:14px}
.result-grid{display:flex;gap:8px;margin-bottom:14px}
.rcell{flex:1;background:#f4fbf8;border-radius:14px;padding:10px 6px}
.rcell span{display:block;font-size:10px;color:#7d94a0;font-weight:700}
.rcell b{font-size:22px;color:var(--deep)}
.share-row{display:flex;gap:9px;justify-content:center;margin-bottom:12px}
.share-btn{background:linear-gradient(#ff6a9d,#ff3d6a);color:#fff;border:none;font-weight:800;padding:12px 16px;border-radius:28px;font-size:13.5px;cursor:pointer;font-family:inherit;box-shadow:0 5px 0 #c81f4a;flex:1}
.share-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c81f4a}
.share-btn.ghost{background:linear-gradient(#7fbfff,#4a9ff5);box-shadow:0 5px 0 #2b6fc0}
.share-btn.ghost:active{box-shadow:0 2px 0 #2b6fc0}
.over-actions{display:flex;flex-direction:column;gap:9px;align-items:center;margin-top:6px}
.over-actions .btn-play{font-size:18px;padding:13px 44px}
.btn-sub{background:none;border:2px solid #7fd0c0;color:#2a8f9e;padding:8px 22px;border-radius:24px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}

/* A2HS */
.a2hs{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:16px;padding:11px 13px;display:none;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:30}
.a2hs.show{display:flex;animation:slideup .4s ease}
#a2hsText{flex:1;font-size:12px;color:var(--ink);font-weight:700}
#a2hsAdd{background:#ff9f1c;color:#fff;border:none;padding:8px 15px;border-radius:20px;font-weight:800;cursor:pointer}
#a2hsClose{background:none;border:none;font-size:20px;color:#aaa;cursor:pointer}

/* 画面シェイク（連鎖で強まる） */
#app.shaking{animation:shk .18s ease}
@keyframes shk{0%,100%{transform:translate(0,0)}20%{transform:translate(calc(var(--sh,4px)*-1),var(--sh,4px))}40%{transform:translate(var(--sh,4px),calc(var(--sh,4px)*-1))}60%{transform:translate(calc(var(--sh,4px)*-1),0)}80%{transform:translate(var(--sh,4px),var(--sh,4px))}}
/* レンジイン！バナー */
#rangeBanner{position:absolute;left:50%;top:8%;transform:translate(-50%,-50%) scale(0);z-index:9;pointer-events:none;
  background:linear-gradient(135deg,#3ddc84,#12b0a0);color:#fff;font-weight:900;font-size:20px;padding:10px 24px;border-radius:30px;
  box-shadow:0 8px 24px rgba(30,220,140,.5),0 0 0 3px #fff;white-space:nowrap}
#rangeBanner.show{animation:rangein 1.6s cubic-bezier(.2,1.5,.4,1)}
@keyframes rangein{0%{transform:translate(-50%,-50%) scale(0) rotate(-6deg)}25%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-130%) scale(1);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(120%)}to{transform:translateY(0)}}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes pop-out{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.4) rotate(-8deg)}100%{transform:scale(0) rotate(35deg);opacity:0}}
/* タイルが割れる：一瞬フラッシュして砕け散る */
@keyframes tilebreak{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.18);filter:brightness(2.4) saturate(1.4)}55%{transform:scale(1.05);filter:brightness(1.3)}100%{transform:scale(.15) rotate(12deg);filter:brightness(1);opacity:0}}
@keyframes drop-in{from{transform:translateY(-34px) scale(.6);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes chain{0%{transform:translate(-50%,-50%) scale(0)}40%{transform:translate(-50%,-50%) scale(1.25)}70%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
@keyframes combo{0%{transform:translate(-50%,-50%) scale(0) rotate(-8deg)}45%{transform:translate(-50%,-50%) scale(1.3) rotate(4deg)}75%{transform:translate(-50%,-50%) scale(1) rotate(0)}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}