*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#0a1628;overflow:hidden;font-family:'Courier New',monospace;}

/* ── ゲーム全体ラッパー: 固定論理解像度 960×640 をCSSスケールで拡縮 ─────────
   position:fixed な子要素は CSS transform により #game-wrap 基準で配置される。
   スケール・位置は state.js の resize() が JS で算出して書き込む。         */
/* width / height は state.js の resize() が動的に設定 */
#game-wrap{
  position:fixed;
  transform-origin:top left;
  overflow:hidden;
  background:#000;
}

canvas{display:block;position:absolute;top:0;left:0;touch-action:none;}

/* ── Stage Select ── */
#scr-select{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(ellipse at 50% 25%,#001a2e 0%,#000 70%);
  overflow-y:auto;padding-bottom:48px;
}
#sel-title{
  margin-top:44px;font-size:clamp(28px,6.5vw,58px);letter-spacing:8px;
  color:#00ffff;animation:glow 2s ease-in-out infinite alternate;
}
@keyframes glow{from{text-shadow:0 0 20px #00ffff;}to{text-shadow:0 0 50px #00ffff,0 0 90px #00ffff88;}}
#sel-sub{margin-top:8px;color:#ffffff44;font-size:10px;letter-spacing:4px;}
#stage-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:16px;padding:32px 32px 0;width:100%;max-width:860px;
}
.s-card{
  background:#ffffff07;border:1px solid #ffffff18;border-radius:12px;
  padding:20px 16px;cursor:pointer;text-align:center;position:relative;
  overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.s-card:not(.locked):hover{transform:translateY(-3px);border-color:var(--cc);box-shadow:0 0 20px var(--cc-dim);}
.s-card.locked{opacity:.32;cursor:default;}
.c-num{font-size:28px;font-weight:bold;color:var(--cc);text-shadow:0 0 12px var(--cc);margin-bottom:5px;}
.c-name{font-size:9px;letter-spacing:3px;color:#ffffff88;margin-bottom:10px;}
.c-stars{font-size:17px;letter-spacing:5px;}
.c-stars .lit{color:#ffff00;text-shadow:0 0 7px #ffff00;}
.c-stars .dim{color:#ffffff18;}
.c-badge{font-size:9px;letter-spacing:2px;margin-top:8px;
  color:#ff0099;border:1px solid #ff009966;padding:2px 6px;border-radius:3px;
  display:inline-block;}
.c-lock{font-size:24px;margin-bottom:5px;}

/* ── HUD ── */
#hud{
  position:fixed;top:0;left:0;right:0;z-index:40;height:56px;
  display:none;align-items:center;gap:8px;padding:0 12px;
  background:linear-gradient(to bottom,#000000dd,transparent);
  pointer-events:none;
}
#hud>*{pointer-events:all;}
.hbtn{
  background:transparent;border:1px solid #ffffff33;color:#fff;
  font-family:'Courier New',monospace;font-size:10px;
  padding:5px 10px;cursor:pointer;letter-spacing:2px;border-radius:4px;
  white-space:nowrap;transition:border-color .15s;
}
.hbtn:hover{border-color:#ffffff88;}
#hud-name{color:#ffffff55;font-size:9px;letter-spacing:3px;flex:1;text-align:center;}

/* Stroke counter */
#stroke-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:110px;}
#stroke-num{font-size:18px;font-weight:bold;letter-spacing:2px;transition:color .2s;}
#stroke-tgt{font-size:9px;letter-spacing:2px;color:#ffffff44;}

/* Ink bar (secondary) */
#ink-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
#ink-lbl{color:#00ffff44;font-size:9px;letter-spacing:3px;}
#ink-bg{width:80px;height:6px;background:#ffffff10;border:1px solid #00ffff22;border-radius:3px;overflow:hidden;}
#ink-fg{height:100%;width:100%;background:linear-gradient(90deg,#00ffff88,#ff00ff88);transition:width .05s;}

/* ── ミュートボタン（HUD と タイトル画面で共用） ── */
.btn-mute{
  font-size:15px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  transition:opacity .15s,border-color .15s;
}
.btn-mute:hover{opacity:.85;}

/* ── Hint ── */
#hint{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  color:#ffff0077;font-size:10px;letter-spacing:3px;
  pointer-events:none;z-index:41;transition:opacity 1.2s;white-space:nowrap;
}

/* ── Power bar (shows current line strength) ── */
#powerbar{
  position:fixed;bottom:44px;left:50%;transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:3px;
  pointer-events:none;z-index:41;
}
#pb-label{font-size:9px;letter-spacing:3px;color:#ffff0099;}
#pb-bg{width:160px;height:4px;background:#ffffff10;border:1px solid #ffff0033;border-radius:2px;overflow:hidden;}
#pb-fg{height:100%;width:0%;background:linear-gradient(90deg,#ff6600,#ffff00,#00ff88);transition:width .05s;}

/* ── Result ── */
#scr-result{
  position:fixed;inset:0;z-index:60;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:#000000aa;
}
#res-title{font-size:clamp(28px,8vw,58px);letter-spacing:8px;animation:glow 1s ease-in-out infinite alternate;}

/* ── CLEAR 画像スライドイン ─────────────────────────────────────────────────
   左画面外（-110vw）から中央（0）へ急速スライドし、easeOutExpo で急停止する。
   animationend イベント後に JS 側でキャンバス上の爆発エフェクトを起動する。 */
@keyframes clearSlideIn {
  from { transform: translateX(-1550px); } /* GAME_W=960px の外側 */
  to   { transform: translateX(0);      }
}
#res-clear-img {
  /* サイズ上限：画面幅の 90% か 640px の小さい方 */
  max-width: min(640px, 860px); /* 論理幅 960px 内に収める */
  height: auto;
  display: none;
  /* z-index は scr-result の flex 子なので親に依存。canvas(z:0) より前・overlay 内に収まる */
}
#res-stars{font-size:40px;letter-spacing:8px;}
#res-detail{font-size:10px;letter-spacing:3px;color:#aaa;}
.rbtn{background:transparent;color:inherit;border:1px solid currentColor;
  font-family:'Courier New',monospace;font-size:11px;letter-spacing:3px;
  padding:10px 26px;cursor:pointer;transition:background .2s;}
.rbtn:hover{background:#ffffff1a;}
#res-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* ── Stage intro overlay ── */
#stage-intro{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:45;display:none;flex-direction:column;align-items:center;gap:10px;
  background:#000000dd;border:1px solid #ffffff22;border-radius:14px;
  padding:24px 44px;pointer-events:none;transition:opacity .7s;
}
#intro-stage-num{font-size:10px;letter-spacing:5px;color:#ffffff44;}
#intro-stage-name{font-size:22px;letter-spacing:6px;color:#00ffff;
  text-shadow:0 0 20px #00ffff;}
#intro-stage-conds{font-size:11px;letter-spacing:2px;color:#ffff0099;margin-top:4px;}

/* ── Unlock-all button ── */
#btn-unlock{
  margin-top:28px;background:transparent;border:1px solid #ffffff22;
  color:#ffffff44;font-family:'Courier New',monospace;font-size:9px;
  padding:6px 16px;cursor:pointer;letter-spacing:2px;border-radius:4px;
  transition:border-color .15s,color .15s;
}
#btn-unlock:hover{border-color:#ffffff66;color:#ffffff88;}
/* ── バージョン番号 (左上固定) ── */
#ver-badge{
  position:fixed;top:10px;left:12px;z-index:100;
  color:#00ffff;font-family:'Courier New',monospace;font-size:13px;
  font-weight:bold;letter-spacing:2px;
  text-shadow:0 0 12px #00ffff,0 0 24px #00ffff88;
  pointer-events:none;
}

/* ── ステージイントロ: 説明文 ── */
#intro-stage-desc{
  font-size:11px;letter-spacing:1px;color:#ffffffaa;
  max-width:340px;text-align:center;line-height:1.6;
  margin-top:2px;
}

/* ── Title Screen ── */
#scr-title{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
}
/* titleGlow は drop-shadow ベース（img 要素には text-shadow が効かないため） */
@keyframes titleGlow {
  from { filter: drop-shadow(0 0 10px #00ffff99) drop-shadow(0 0 24px #00ffff55); }
  to   { filter: drop-shadow(0 0 28px #00ffff)   drop-shadow(0 0 60px #00ffff88) drop-shadow(0 0 90px #00ffff44); }
}
#title-logo{
  max-width: 560px;
  height: auto;
  margin-bottom: 14px;
  animation: titleGlow 2s ease-in-out infinite alternate;
}
#title-sub{
  color:#ffffff55;font-size:clamp(9px,1.6vw,13px);letter-spacing:4px;
  margin-bottom:52px;text-align:center;padding:0 24px;
}
#btn-start{
  background:transparent;border:2px solid #00ffff88;color:#00ffff;
  font-family:'Courier New',monospace;font-size:clamp(13px,2vw,18px);
  letter-spacing:6px;padding:14px 48px;cursor:pointer;border-radius:6px;
  transition:all .2s;
  animation:startpulse 1.8s ease-in-out infinite alternate;
}
#btn-start:hover{
  background:#00ffff22;border-color:#00ffff;
  box-shadow:0 0 30px #00ffff88;transform:scale(1.04);
}
@keyframes startpulse{
  from{box-shadow:0 0 8px #00ffff44;}
  to{box-shadow:0 0 28px #00ffff99,0 0 60px #00ffff33;}
}
#title-ver{
  position:absolute;bottom:18px;right:20px;
  color:#ffffff22;font-size:9px;letter-spacing:2px;
}

/* ── Star Progress Header ── */
#star-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 32px 0;width:100%;max-width:860px;box-sizing:border-box;
}
#star-count-label{color:#ffff0066;font-size:9px;letter-spacing:3px;white-space:nowrap;}
#star-count-value{color:#ffff00;font-size:11px;font-weight:bold;letter-spacing:2px;white-space:nowrap;min-width:64px;}
#star-bar-bg{flex:1;height:3px;background:#ffffff18;border-radius:2px;overflow:hidden;}
#star-bar-fg{height:100%;background:linear-gradient(90deg,#ffff00,#ff8800);border-radius:2px;transition:width .6s ease;}

/* ── Daily Challenge Banner ── */
#daily-banner{
  width:100%;max-width:860px;margin:12px 32px 0;
  background:linear-gradient(135deg,#001833,#002244);
  border:1px solid #00ffff44;border-radius:10px;
  padding:12px 20px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
#daily-banner:hover{border-color:#00ffff99;box-shadow:0 0 16px #00ffff33;}
#daily-label{color:#00ffff;font-size:9px;letter-spacing:3px;}
#daily-stage-name{color:#fff;font-size:12px;font-weight:bold;letter-spacing:2px;flex:1;text-align:center;}
#daily-status{color:#ffff00;font-size:11px;letter-spacing:2px;white-space:nowrap;}

/* ── Theme Panel ── */
#theme-panel{width:100%;max-width:860px;padding:12px 32px 0;box-sizing:border-box;}
.theme-label{color:#ffffff44;font-size:9px;letter-spacing:3px;margin-bottom:8px;}
#theme-btns{display:flex;flex-wrap:wrap;gap:8px;}
.theme-btn{
  background:transparent;border:1px solid #ffffff22;color:#fff;
  font-family:'Courier New',monospace;font-size:10px;
  padding:6px 14px;cursor:pointer;border-radius:4px;
  display:flex;align-items:center;gap:6px;
  transition:border-color .15s;letter-spacing:2px;
}
.theme-btn:hover{border-color:#ffffff55;}
.theme-btn.active{border-color:#ffff0088;color:#ffff00 !important;}
.theme-btn.locked{opacity:.4;cursor:default;pointer-events:none;}
.theme-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: pointer:coarse = touch (phone/tablet)
   pointer:fine = mouse  -> base styles already handle this case.

   Strategy:
     - Enlarge all interactive targets to 44px minimum (Apple HIG / WCAG 2.5.5)
     - Increase font sizes for readability at arm's length
     - Disable mouse-only hover effects to avoid sticky states on touch
     - Compact stage-grid columns for narrow screens
     - Hide debug-only INK+ button (not useful without precise mouse)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* ── HUD ── */
  #hud { height: 64px; gap: 6px; padding: 0 8px; }

  /* HUD buttons: 44px minimum tap target */
  .hbtn {
    font-size: 15px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 6px;
  }

  /* Mute button: square 44px */
  .btn-mute { width: 44px; height: 44px; font-size: 20px; }

  /* Stroke counter */
  #stroke-num { font-size: 28px; }
  #stroke-tgt { font-size: 13px; }
  #stroke-wrap { min-width: 120px; }

  /* Ink bar: wider for readability on mobile */
  #ink-bg { width: 120px; height: 10px; border-radius: 5px; }
  #ink-lbl { font-size: 13px; }

  /* HUD stage name */
  #hud-name { font-size: 13px; }

  /* INK+ is a debug shortcut that needs precise clicking -- hide on touch */

  /* ── Title Screen ── */
  #btn-start {
    font-size: clamp(15px, 4vw, 22px);
    padding: 18px 52px;
    min-height: 56px;
  }

  /* ── Stage Select ── */
  #stage-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px 16px 0;
  }
  .s-card { padding: 16px 12px; }
  .c-num  { font-size: 32px; }
  .c-name { font-size: 13px; letter-spacing: 2px; }  /* 9px→13px */
  .c-stars { font-size: 22px; }
  .c-badge { font-size: 13px; padding: 3px 8px; }

  /* ステージ選択画面の左上・右上ボタン（インライン style を上書き） */
  #btn-to-title, #btn-debug-open {
    font-size: 13px !important;
    padding: 8px 14px !important;
    min-height: 36px;
  }

  #star-header  { padding: 10px 16px 0; }
  #star-count-label { font-size: 13px; }
  #star-count-value { font-size: 15px; }
  #star-bar-bg { height: 5px; }
  #daily-banner { margin: 10px 16px 0; padding: 12px 14px; }
  #daily-label  { font-size: 13px; }
  #daily-stage-name { font-size: 15px; }
  #daily-status { font-size: 14px; }

  /* Theme panel */
  #theme-panel { padding: 12px 16px 0; }
  .theme-btn {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
  }
  .theme-dot { width: 10px; height: 10px; }

  /* UNLOCK ALL debug button */
  #btn-unlock {
    font-size: 13px;
    padding: 10px 20px;
    min-height: 44px;
  }

  /* Power bar label */
  #pb-label { font-size: 13px; }

  /* ── Result Screen ── */
  .rbtn {
    font-size: 16px;
    padding: 17px 40px;
    min-height: 52px;
  }

  /* ── Hint text ── */
  #hint { font-size: 14px; bottom: 20px; }

  /* ── Power bar ── */
  #powerbar { bottom: 52px; }
  #pb-bg    { width: 230px; height: 6px; }

  /* Disable hover effects -- touch has no hover, avoiding sticky states */
  .s-card:not(.locked):hover {
    transform: none;
    border-color: #ffffff18;
    box-shadow: none;
  }
  .rbtn:hover         { background: transparent; }
  .hbtn:hover         { border-color: #ffffff33; }
  .theme-btn:hover    { border-color: #ffffff22; }
  #btn-unlock:hover   { border-color: #ffffff22; color: #ffffff44; }
  #daily-banner:hover { border-color: #00ffff44; box-shadow: none; }
}

/* ── Very narrow portrait phones (< 400px) ── */
@media (pointer: coarse) and (max-width: 400px) {
  #stage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 12px 0;
  }
  .c-name { font-size: 9px; letter-spacing: 1px; }
  #hud    { gap: 4px; padding: 0 6px; }
  .hbtn   { padding: 8px 10px; font-size: 13px; }
  #stroke-wrap { min-width: 80px; }
  #ink-wrap    { display: none; }
}

/* ── Phone landscape with limited height ── */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #hud    { height: 52px; }
  .hbtn   { min-height: 38px; padding: 6px 12px; }
  .btn-mute { width: 38px; height: 38px; }
  #stroke-num { font-size: 18px; }
  #powerbar   { bottom: 46px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOCK AD SYSTEM
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 広告オーバーレイ（全画面） ── */
#mock-ad-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:#000;
}
#mock-ad-inner{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
}
/* 広告種別バッジ (右上) */
#mock-ad-type{
  position:absolute;top:18px;right:18px;
  background:#ffcc00;color:#000;
  font-family:'Courier New',monospace;font-size:10px;
  font-weight:bold;letter-spacing:2px;
  padding:3px 9px;border-radius:3px;
}
/* 大きなカウントダウン数字 */
#mock-ad-timer{
  font-size:clamp(64px,15vw,96px);font-weight:bold;
  color:#fff;font-family:'Courier New',monospace;
  text-shadow:0 0 40px #ffffff44;
  min-height:1.1em;line-height:1;
}
/* プログレスバー */
#mock-ad-bar-wrap{
  width:min(320px,70vw);height:3px;
  background:#ffffff18;border-radius:2px;overflow:hidden;
}
#mock-ad-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,#00ffff,#ff00ff);
  transition:width 1s linear;
}
#mock-ad-label{
  color:#ffffff44;font-family:'Courier New',monospace;
  font-size:10px;letter-spacing:3px;
}
/* スキップボタン (インタースティシャルのみ、カウント後に出現) */
#mock-ad-skip{
  display:none;
  background:transparent;border:1px solid #ffffff66;color:#fff;
  font-family:'Courier New',monospace;font-size:12px;
  letter-spacing:3px;padding:10px 28px;cursor:pointer;border-radius:4px;
  transition:border-color .15s;
}
#mock-ad-skip:hover{border-color:#fff;}
/* シミュレーション表示 (左下) */
#mock-ad-sim-label{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#ffffff18;font-family:'Courier New',monospace;
  font-size:9px;letter-spacing:3px;
}

/* ── リワード確認ダイアログ ── */
#mock-ad-confirm{
  position:fixed;inset:0;z-index:9998;
  display:none;align-items:center;justify-content:center;
  background:#000000cc;
}
#mock-confirm-inner{
  background:#001122;border:1px solid #00ffff44;
  border-radius:14px;padding:28px 36px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(340px,90vw);text-align:center;
}
#mock-confirm-title{
  color:#00ffff;font-size:15px;letter-spacing:2px;
  font-family:'Courier New',monospace;
}
#mock-confirm-body{
  color:#ffffff88;font-size:11px;letter-spacing:1px;line-height:1.7;
  font-family:'Courier New',monospace;white-space:pre-line;
}
#mock-confirm-btns{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap;justify-content:center;}
#mock-confirm-yes{
  background:#00ffff22;border:1px solid #00ffff88;color:#00ffff;
  font-family:'Courier New',monospace;font-size:11px;letter-spacing:2px;
  padding:10px 20px;cursor:pointer;border-radius:4px;
  transition:background .15s;
}
#mock-confirm-yes:hover{background:#00ffff44;}
#mock-confirm-no{
  background:transparent;border:1px solid #ffffff22;color:#ffffff44;
  font-family:'Courier New',monospace;font-size:11px;letter-spacing:2px;
  padding:10px 20px;cursor:pointer;border-radius:4px;
  transition:border-color .15s;
}
#mock-confirm-no:hover{border-color:#ffffff44;color:#ffffff66;}

/* タッチデバイスではボタンを大きく */
@media (pointer: coarse) {
  /* デバッグメニュータイトルとボタン */
  #debug-menu-inner > div:first-child {
    font-size: 16px !important;
    margin-bottom: 8px;
  }
  .dbtn {
    font-size: 13px;
    padding: 14px 20px;
    min-height: 48px;
  }
  #mock-ad-skip       { min-height:48px;font-size:14px;padding:12px 32px; }
  #mock-confirm-yes,
  #mock-confirm-no    { min-height:48px;font-size:13px;padding:12px 24px; }
  #mock-confirm-inner { padding:28px 24px; }
}

/* ── ステージグループヘッダー ── */
.stage-band-header {
  grid-column: 1 / -1;   /* グリッド全幅 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 4px 6px;
  margin-top: 8px;
  border-bottom: 1px solid var(--bc, #ffffff22);
}
.band-name {
  color: var(--bc, #00ffff);
  font-size: clamp(11px, 2.5vw, 16px);
  font-weight: bold;
  letter-spacing: 5px;
  text-shadow: 0 0 14px var(--bc, #00ffff);
}
.band-sub {
  color: #ffffff44;
  font-size: 9px;
  letter-spacing: 2px;
}

/* ── 次に挑戦すべきステージを強調 ── */
@keyframes nextPulse {
  from { box-shadow: 0 0 8px var(--cc) , inset 0 0 0px var(--cc-dim); }
  to   { box-shadow: 0 0 22px var(--cc), inset 0 0 6px var(--cc-dim); }
}
.s-card.next-stage {
  border-color: var(--cc) !important;
  animation: nextPulse 1.4s ease-in-out infinite alternate;
}
.s-card.next-stage .c-num::after {
  content: ' ▶';
  font-size: 0.6em;
  opacity: 0.7;
}

/* タッチデバイスではバンドヘッダーを読みやすく */
@media (pointer: coarse) {
  .stage-band-header { padding: 12px 4px 4px; }
  .band-name { font-size: 20px; letter-spacing: 3px; }
  .band-sub  { font-size: 13px; }
}

/* ── デバッグメニューボタン ── */
/* デバッグメニュータイトル（モバイル対応用セレクタ） */
#debug-menu-inner > div:first-child { font-size: 12px; }

.dbtn {
  background: transparent;
  border: 1px solid #ffcc0066;
  color: #ffcc00;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 5px;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.dbtn:hover { background: #ffcc0018; border-color: #ffcc0099; }

/* デバッグメニューオーバーレイ: display:flex で中央配置 */
#debug-menu { display: none; }
#debug-menu.open { display: flex; }

/* ステージ選択の星ヘッダーに余白（左右ボタン分） */
#star-header { padding-top: 44px; }