/* ===== ドットフォント ===== */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');


#game{
  display:block;
  padding:0;
  background:none;
  position:relative;
  overflow:hidden;
  min-height:0;
}
.ggame{
  position:relative;
  width:100%;
  aspect-ratio: 608 / 432;
  background:#f3e9d6;
  overflow:hidden;
  font-family:"DotGothic16","Noto Sans JP",sans-serif;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;      /* iOS Safari向け */
  -webkit-touch-callout:none;    /* 長押しメニュー抑止 */
}
/* ゲーム内の画像は長押し選択・ドラッグ・保存メニューを無効化 */
.ggame img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
#gcanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ---- HUD ---- */
.hud{
  position:absolute;
  top:14px; left:14px;
  z-index:6;
  pointer-events:none;
}
.hud-pill{
  display:inline-block;
  white-space:nowrap;
  background:url('images/ui/btn_kyori.png') center/100% 100% no-repeat;
  border:none;
  color:#e6007e;
  font-weight:900;
  font-size:clamp(13px,2.6vw,18px);
  padding:8px 30px;
  border-radius:0;
  letter-spacing:.02em;
  min-width:clamp(100px,22%,140px);
  text-align:center;
}
/* ドット風の角 */
.gauge{
  position:relative;
  margin-top:7px;
  width:clamp(150px,42%,230px);
  height:clamp(7px,1.6vw,9px);                 
  box-sizing:border-box;
  padding:2px;                                  /* 枠の太さ分の余白 */
  background:linear-gradient(#ffffff,#fbe0ea);  /* 内側の淡ピンクのトラック */
  box-shadow:inset 0 0 0 2px #e6007e;           /* 外周のマゼンタ枠 */
  /* 角を1px刻みの2段ステップ（細かいドット風）にカット */
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0,
    calc(100% - 2px) 1px, calc(100% - 1px) 1px,
    calc(100% - 1px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 1px) calc(100% - 2px),
    calc(100% - 1px) calc(100% - 1px), calc(100% - 2px) calc(100% - 1px),
    calc(100% - 2px) 100%, 2px 100%,
    2px calc(100% - 1px), 1px calc(100% - 1px),
    1px calc(100% - 2px), 0 calc(100% - 2px),
    0 2px, 1px 2px,
    1px 1px, 2px 1px
  );
}
.gauge-fill{
  position:relative;
  height:100%;
  width:0%;
  /* 上半分は白を軽く重ねて明るく／下半分は元の色 → 立体感 */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.32) 0,
      rgba(255,255,255,.32) 50%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 100%),
    linear-gradient(90deg,#ff5fb0,#e6007e);
  transition:width .35s ease;
}
.gauge-label{
  margin-top:4px;
  font-size:clamp(9px,1.8vw,11px);
  font-weight:700;
  color:#e6007e;
  text-shadow:0 1px 2px rgba(255,255,255,.8);
}
.hud-score{
  position:absolute;
  top:14px; right:14px;
  z-index:6;
  background:url('images/ui/btn_score.png') center/contain no-repeat;
  aspect-ratio:511 / 116;
  width:clamp(140px,30%,200px);
  border:none;
  color:#7a5a22;
  font-weight:800;
  /* スコアは最大8桁。枠画像内に収まるようフォント上限は控えめに */
  font-size:clamp(11px,2.2vw,14px);
  white-space:nowrap;
  border-radius:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.quit-btn{
  position:absolute;
  bottom:8px; left:8px;
  z-index:6;
  background:url('images/ui/btn_yameru.png') center/100% 100% no-repeat;
  color:#fff;
  border:none;
  font-family:inherit;
  font-weight:700;
  font-size:clamp(9px,1.7vw,11px);
  padding:4px 10px;
  border-radius:0;
  cursor:pointer;
  white-space:nowrap;
}
.quit-btn:hover{ opacity:.85; }

/* 音声ON/OFF：やめるボタンと同じ高さで画面右下 */
.sound-btn{
  position:absolute;
  bottom:8px; right:8px;
  z-index:6;
  width:clamp(24px,5vw,32px);
  height:clamp(24px,5vw,32px);
  padding:0;
  border:none;
  border-radius:0;
  cursor:pointer;
  background:url('images/ui/music_off.png') center/contain no-repeat;
  background-color:transparent;
}
.sound-btn.on{ background-image:url('images/ui/music_on.png'); }
.sound-btn:hover{ opacity:.85; }

/* ---- カットイン（救済） ---- */
.cutin{
  position:absolute;
  left:0; right:0;
  top:46%;
  transform:translateY(-50%) translateX(-110%);
  height:34%;
  background:#c41230;
  border-top:none;
  border-bottom:none;
  display:flex;
  align-items:center;
  z-index:8;
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .2s;
  pointer-events:none;
}
.cutin.show{ transform:translateY(-50%) translateX(0); opacity:1; }
.cutin-text{
  flex:1;
  text-align:center;
  color:#fff;
  padding-left:4%;
  line-height:1.5;
}
.cutin-lines{
  margin:0;
  font-weight:700;
  font-size:clamp(10px,2.05vw,15px);
  line-height:1.7;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  text-align:left;
}
.cutin-name{
  margin:7px 0 0;
  font-weight:900;
  font-size:clamp(10px,1.95vw,14px);
  text-align:right;
}
.cutin-face{
  /* 帯の高さに対する比率で指定するため、SPで帯が変わっても同じ見え方を維持。
     100%超＝下端を帯の底辺に合わせつつ、上部が帯からはみ出す */
  height:118%;
  width:auto;
  align-self:flex-end;    /* 画像の下端を帯の底辺に揃える */
  margin-right:4%;
  margin-bottom:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
  object-fit:contain;
}

/* ---- カットイン再開テキスト ---- */
.cutin-resume{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  z-index:9;
  color:#fff;
  font-weight:700;
  font-size:clamp(10px,2vw,14px);
  white-space:nowrap;
  opacity:0;
  transition:opacity .3s;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  pointer-events:none;
}
.cutin-resume.visible{ opacity:1; animation:pulse-resume 1.2s ease-in-out infinite; }
@keyframes pulse-resume{ 0%,100%{opacity:.6;} 50%{opacity:1;} }
.resume-sp{ display:none; }
@media (max-width:608px){
  .resume-pc{ display:none; }
  .resume-sp{ display:inline; }
  /* SPはキャンバスが小さくHUD/トーストが相対的に下がるため、
     カットイン帯を下げて「頑張りゲージ」や告知トーストとの被りを回避 */
  .cutin{ top:56%; height:32%; }
  /* やめるボタンは隅っこにさらに小さく */
  .quit-btn{ left:5px; bottom:5px; font-size:8px; padding:2px 6px; }
  .sound-btn{ right:5px; bottom:5px; width:22px; height:22px; }
  /* 告知トーストも少し小さく（基本定義より後勝ちさせるため詳細度を上げる） */
  .ggame .toast{ width:clamp(150px,48%,210px); font-size:clamp(9px,2vw,12px); }
}

/* ---- トースト（告知） ---- */
.toast{
  position:absolute;
  top:64px; left:50%;
  transform:translate(-50%,-14px);
  z-index:7;
  /* 画像はアスペクト比を保って表示（文字に合わせて伸縮させない） */
  background:url('images/ui/btn_pupup.png') center/contain no-repeat;
  aspect-ratio:725 / 116;
  width:clamp(200px,58%,280px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:clamp(11px,2.3vw,15px);
  border-radius:0;
  opacity:0;
  transition:opacity .3s, transform .3s;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- オーバーレイ共通 ---- */
.overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:6%;
}
.overlay.hidden{ display:none; }
/* 結果画面は上からスライドインで登場 */
#resultOv:not(.hidden){ animation:resultSlideDown .45s cubic-bezier(.2,.9,.3,1); }
@keyframes resultSlideDown{
  from{ transform:translateY(-100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* start */
.start{
  background:rgba(20,10,12,.55);
  backdrop-filter:blur(1px);
  cursor:pointer;
}
.start h3{
  margin:0 0 10px;
  font-size:clamp(18px,4.4vw,30px);
  font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.start p{
  margin:4px 0;
  font-size:clamp(12px,2.7vw,17px);
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.start .tap-cta{
  margin-top:18px;
  display:inline-block;
  background:#ff2e93;
  color:#fff;
  font-weight:900;
  font-size:clamp(14px,3vw,20px);
  padding:12px 30px;
  border-radius:999px;
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

/* result */
.result{
  /* 黒背景の上に装飾画像を重ねる（画像はアスペクト比保持でcover） */
  background:url('images/bg/result.png') center/cover no-repeat, #0c0709;
  overflow:hidden;
  padding:3% 4%;
  /* 終了画面はドット文字でなく通常フォントに統一 */
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.result .diag{
  position:absolute; height:3px; background:#fff;
  transform:rotate(-22deg); opacity:.4; z-index:1;
}
.result-inner{
  /* スタンプ(z-index:3)より前面に。桁数が多くてもスコアがスタンプに隠れない */
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}
/* 記録まわりはスタンプに重なっても読めるよう、ぼかした影で文字を浮かせる
   （点数はテキストストロークのみ＝影なし） */
.result .rec-label,
.result .rec-dist{
  text-shadow:
    0 0 4px rgba(12,7,9,.9),
    0 0 8px rgba(12,7,9,.8),
    0 2px 12px rgba(12,7,9,.7);
}
.result .rec-label{ font-size:clamp(12px,2.65vw,16px); font-weight:700; margin:0; letter-spacing:.12em; }
.result .rec-score{
  font-size:clamp(30px,8.6vw,52px);
  font-weight:900;
  margin:-2px 0 10px;   /* ラベルとの間隔を確保しつつ少し上げる */
  letter-spacing:.02em;
  line-height:1;
  /* 数字の縁取り。paint-order対応ブラウザ(Safari/Firefox)では線が外側に付き文字が痩せない */
  -webkit-text-stroke:5px #0c0709;
  paint-order:stroke fill;
}
.result .rec-score small{ font-size:.4em; font-weight:700; margin-left:5px; }
.result .rec-dist{
  margin:2px 0 0;
  font-size:clamp(11px,2.5vw,15px);
  font-weight:700;
  opacity:.85;
}
.result .promo{
  margin:9px 0 2px;
  font-size:clamp(11px,2.5vw,15px);
  font-weight:800;
  line-height:1.45;
}
.result .promo-big{
  display:block;
  margin-top:6px;
  padding:5px 0;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  font-size:clamp(14px,3.3vw,20px);
}
.result .promo-sub{
  margin:3px 0 0;
  font-size:clamp(9px,2vw,12px);
  font-weight:600;
  opacity:.9;
}
.result .promo-period{
  margin:8px 0 0;      /* 上のテキストと余白をあける */
  font-size:12px;
  font-weight:600;
  opacity:.75;
}
.result .btn-row{
  display:flex; gap:clamp(10px,3.6vw,22px);
  margin-top:clamp(16px,4.3vw,26px);   /* 期間テキストに合わせて少し下げる */
  flex-wrap:wrap; justify-content:center;
}
.result .btn-wrap{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.result .btn-tag{ font-size:clamp(9px,2vw,12px); font-weight:800; }
.result .rbtn{
  position:relative;
  background:#fff; color:#111;
  border:2px solid #ffd400; font-family:inherit;
  font-weight:900;
  font-size:clamp(12px,2.65vw,16px);
  padding:10px clamp(16px,5.3vw,32px);
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s;
}
/* 立体感：白い輪郭だけの「影」を右下にずらして重ねる（黒背景でも見える） */
.result .rbtn::after{
  content:"";
  position:absolute;
  inset:-2px;                 /* ボタンの外形（ボーダー込み）と同サイズ */
  border:2px solid #fff;
  border-radius:999px;
  transform:translate(4px,5px);
  transition:transform .12s;
  z-index:-1;                 /* ボタン本体の背面に */
  pointer-events:none;
}
.result .rbtn:hover{ transform:translate(-1px,-2px); }
.result .rbtn:hover::after{ transform:translate(6px,8px); }
.result .rbtn:active{ transform:translate(3px,4px); }
.result .rbtn:active::after{ transform:translate(1px,1px); }
.result .rbtn.share{ background:#fff; }
/* 共有ボタンのXアイコン（テキストサイズに合わせる） */
.result .rbtn .x-icon{
  height:1em;
  width:auto;
  vertical-align:-0.12em;
  margin-right:.35em;
}
/* stamp：PC・SPとも結果ブロックの左上に固定。中央の文字に被らないサイズに抑える */
.stamp{
  position:absolute;
  left:40px;
  /* 得点表示と同じ高さに中心を合わせる（%指定で画面サイズに追従） */
  top:27%;
  transform:translateY(-50%) rotate(-12deg);
  width:clamp(66px,17.1vw,104px);
  height:auto;
  object-fit:contain;
  z-index:3;
}
@media (max-width:520px){
  .result .diag{ display:none; }
}
/* 小型スマホ(〜400px)：上下の余白を確保するため文字・画像をわずかに縮小 */
@media (max-width:400px){
  .result{ padding:2% 3%; }
  .stamp{ width:64px; left:6px; top:24%; }
  .result .rec-label{ font-size:11px; }
  .result .rec-score{ font-size:26px; -webkit-text-stroke:4px #0c0709; }
  .result .rec-dist{ font-size:10px; }
  .result .promo{ margin:6px 0 2px; font-size:10px; }
  .result .promo-big{ margin-top:4px; padding:4px 0; font-size:12px; }
  .result .promo-sub{ font-size:8.5px; }
  .result .promo-period{ margin-top:6px; font-size:10px; }
  .result .btn-row{ margin-top:10px; gap:8px; }
  .result .btn-tag{ font-size:8px; }
  .result .rbtn{ font-size:11px; padding:7px 14px; }
}