/* ナイスタちゃんのよいどれキャッチ ------------------------------------- */
:root{
  --bg:#0b0a10;
  --bg2:#15121f;
  --pink:#ff2d6f;
  --pink-l:#ffd1e0;
  --gold:#ffcf5c;
  --txt:#fff;
  --txt-dim:#b9b3c7;
  /* iPhone のノッチ・ホームバー分の余白 */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,sans-serif;
  font-weight:700;
  /* ゲーム中に画面が動かないように */
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}

/* 画面切り替え ---------------------------------------------------------- */
.screen{
  position:fixed;inset:0;
  display:none;
  background:radial-gradient(120% 80% at 50% 0%,var(--bg2) 0%,var(--bg) 70%);
}
.screen.active{display:flex;align-items:center;justify-content:center}
.box{
  width:100%;max-width:420px;
  padding:calc(24px + var(--sat)) 22px calc(24px + var(--sab));
  text-align:center;
  max-height:100%;overflow-y:auto;overflow-x:hidden;
}

/* 共通パーツ ------------------------------------------------------------ */
.brand{
  font-size:12px;letter-spacing:.3em;color:var(--txt-dim);
  margin:0 0 18px;
}
.brand b{color:var(--pink)}
.btn{
  display:block;width:100%;
  margin:10px 0 0;padding:15px 16px;
  border:0;border-radius:999px;
  font-family:inherit;font-weight:900;font-size:16px;
  text-decoration:none;text-align:center;
  cursor:pointer;
}
.btn-main{
  background:linear-gradient(135deg,#ff5c8d,var(--pink));
  color:#fff;box-shadow:0 8px 22px rgba(255,45,111,.35);
}
.btn-sub{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.btn-ghost{
  background:none;color:var(--txt-dim);font-size:14px;padding:12px;
  border:1px solid rgba(255,255,255,.22);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;pointer-events:none}
.row2{display:flex;gap:10px;margin-top:10px}
.row2 .btn{margin-top:0}

/* 0. 読み込み ----------------------------------------------------------- */
.load-ico{width:64px;margin:0 auto 14px}
.load-ico svg{width:100%;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-title{font-family:"Dela Gothic One";font-size:26px;margin:0 0 18px}
.load-title span{color:var(--pink)}
.meter{height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.meter-bar{height:100%;width:0;background:linear-gradient(90deg,var(--pink-l),var(--pink));transition:width .2s}

/* 1. タイトル ----------------------------------------------------------- */
/* アプリ名は画面の横幅いっぱいに。8文字が収まる大きさを vw で決める */
.title{
  font-family:"Dela Gothic One";font-weight:400;
  line-height:1.15;margin:0 0 6px;display:flex;flex-direction:column;align-items:center;
}
.title small{font-size:min(5.2vw,26px);color:#fff;letter-spacing:.04em}
.title span{
  /* 8文字が .box の内側（左右22pxずつの余白を引いた幅）に収まる大きさ。
     Dela Gothic One のかなは1文字あたり約1.15em幅あるので、8文字＝約9.2em。余裕を見て10.5で割る。
     上限は .box の最大幅 420px（内側376px）に収まる 40px */
  font-size:min(40px, calc((100vw - 44px) / 10.5));color:var(--pink);letter-spacing:0;white-space:nowrap;
  text-shadow:0 6px 24px rgba(255,45,111,.35);
}
.title-ch{
  width:150px;height:auto;margin:6px 0 2px;
  animation:bob 2.2s ease-in-out infinite;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.lead{font-size:14px;line-height:1.95;color:var(--txt-dim);margin:0 0 20px;font-weight:700}
.best{margin:16px 0 0;font-size:13px;color:var(--gold);min-height:1em}

/* 2. あそびかた --------------------------------------------------------- */
.h2{font-family:"Dela Gothic One";font-weight:400;font-size:20px;margin:0 0 18px}
.how{list-style:none;margin:0 0 22px;padding:0;text-align:left}
.how li{
  display:flex;gap:14px;align-items:center;
  margin-bottom:12px;padding:8px 10px 8px 8px;
  border-radius:14px;background:rgba(255,255,255,.04);
}
/* アイコン：ゲーム内描画を canvas に。文章はひとつの箱にまとめて折り返す */
.ic{
  flex:0 0 48px;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.07);
}
.how .txt{
  flex:1 1 auto;min-width:0;
  font-size:13.5px;line-height:1.75;font-weight:500;color:var(--txt-dim);
}
.how b{color:#fff;font-weight:900}

/* 3. ゲーム ------------------------------------------------------------- */
#screen-play.active{flex-direction:column;align-items:stretch;justify-content:flex-start}
/* PCの横長ウィンドウでもスマホと同じ横幅で遊ばせる（レーンが間延びしない） */
#screen-play{left:50%;right:auto;width:min(100vw,520px);transform:translateX(-50%)}

/* 上：スコアだけ。視線はキャラ(下)にあるので情報を置きすぎない */
.hud-top{
  flex:0 0 auto;
  padding:calc(8px + var(--sat)) 16px 6px;
  display:flex;align-items:baseline;gap:9px;
}
.score-label{font-size:10px;letter-spacing:.2em;color:var(--txt-dim)}
.score{font-family:"Dela Gothic One";font-size:26px;line-height:1}

#cv{flex:1 1 auto;width:100%;display:block;touch-action:none}

/* 下：酔いゲージと倍率。キャラのすぐ下に置いて目線を動かさずに読めるように */
.hud-bottom{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px calc(10px + var(--sab));
}
.gauge-label{font-size:11px;color:var(--txt-dim);flex:0 0 auto}
/* 太めのガラス管。満タンでヒビが入る */
.gauge-track{
  flex:1;height:22px;border-radius:99px;position:relative;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.gauge-bar{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#4ad6a8,#ffcf5c 55%,#ff2d6f);
  transition:width .12s linear;
}
/* ガラスの上面ハイライト */
.gauge-track::before{
  content:"";position:absolute;left:6px;right:6px;top:3px;height:6px;
  border-radius:99px;background:rgba(255,255,255,.22);pointer-events:none;
}
/* 酔いが危険域のときは枠が脈打つ */
.gauge-track.danger{animation:pulse .5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 0 rgba(255,45,111,0)}50%{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 5px rgba(255,45,111,.5)}}
/* 即死圏：速く強く赤で脈打つ */
.gauge-track.critical{animation:critpulse .25s ease-in-out infinite}
@keyframes critpulse{
  0%,100%{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 2px rgba(255,20,60,.5),0 0 18px rgba(255,20,60,.4)}
  50%{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 7px rgba(255,20,60,.75),0 0 30px rgba(255,20,60,.8)}
}
/* ヒビ：SVGの折れ線を重ねて、一瞬だけ震わせる */
.gauge-track.cracked{animation:shatter .5s ease-out forwards}
.gauge-track.cracked::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 12 28 6 52 15 80 4 110 17 140 7 170 16 200 5 230 14 260 8 300 12M80 4 92 0M140 7 150 22M200 5 190 0M230 14 245 22M52 15 44 22M110 17 118 22' stroke='rgba(0,0,0,.55)' stroke-width='3'/%3E%3Cpath d='M0 12 28 6 52 15 80 4 110 17 140 7 170 16 200 5 230 14 260 8 300 12M80 4 92 0M140 7 150 22M200 5 190 0M230 14 245 22M52 15 44 22M110 17 118 22' stroke='rgba(255,255,255,.95)' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:crackin .32s ease-out;
}
@keyframes shatter{
  0%{transform:translateX(0)}
  15%{transform:translateX(-4px) scaleY(1.12)}
  30%{transform:translateX(4px) scaleY(.96)}
  45%{transform:translateX(-3px)}
  60%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}
@keyframes crackin{
  0%{clip-path:inset(0 100% 0 0);opacity:0}
  30%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}
.mul{
  font-family:"Dela Gothic One";font-size:16px;color:var(--gold);
  flex:0 0 auto;min-width:3.6em;text-align:right;line-height:1;
  transition:color .15s,text-shadow .15s;
}
.mul.hot{color:#fff;text-shadow:0 0 14px rgba(255,45,111,.95),0 0 4px rgba(255,207,92,.9)}

/* 音のオンオフ。外で開く人がいるので常に押せる場所に出す */
.mute{
  position:absolute;top:calc(8px + var(--sat));right:10px;
  width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.mute.off{color:var(--txt-dim)}

.bonus-flag{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);
  font-family:"Dela Gothic One";
  font-size:min(7.2vw,34px);                       /* 12文字が1行に収まる大きさ */
  color:#fff;text-shadow:0 0 22px rgba(255,207,92,.95),0 2px 0 rgba(0,0,0,.4);
  opacity:0;pointer-events:none;white-space:nowrap;
}
.bonus-flag.show{animation:popflag 1.5s ease-out}
@keyframes popflag{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-80%) scale(1)}
}
/* 高得点のときに一瞬だけ画面を光らせる */
.flash{
  position:absolute;inset:0;pointer-events:none;
  background:#fff;opacity:0;
  transition:opacity .42s ease-out;
}
.flash.on{opacity:var(--flash-a,.5);transition:none}

.countdown{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  font-family:"Dela Gothic One";font-size:68px;
  color:#fff;text-shadow:0 0 30px rgba(255,45,111,.8);
  pointer-events:none;
}
.countdown.show{display:flex}

/* 4. リザルト ----------------------------------------------------------- */
.result-cap{font-size:11px;letter-spacing:.3em;color:var(--txt-dim);margin:0}
.result-score{font-family:"Dela Gothic One";font-size:54px;line-height:1.1;margin:4px 0 2px}
.result-rank{font-size:15px;color:var(--gold);margin:0 0 6px;font-weight:900}
.result-ch{width:140px;height:auto;margin:2px 0}
.result-sub{font-size:13.5px;line-height:1.8;color:var(--txt-dim);margin:2px 0 18px;font-weight:500}

/* 低い画面でも収まるように ---------------------------------------------- */
@media (max-height:680px){
  .title-ch{width:116px}
  .result-ch{width:110px}
  .result-score{font-size:46px}
  .lead{margin-bottom:14px}
}