/* ====== クロゼッタ シンプル版: 見た目の共通の決まり(色・文字・余白) ======
   方針: ダンス動画(ネオンのダンスフロア)に画面を合わせる。主役は動画とキャラの絵。
   - 色はここの変数だけを使う。画面ごとに新しい色を作らない
   - グラデーション文字・文字の発光(text-shadowのグロー)・絵文字は使わない
   - 1画面の主ボタンは1つ(--pink のベタ塗り) */
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/ZenMaruGothic-Regular-sub.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/ZenMaruGothic-Bold-sub.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/ZenMaruGothic-Black-sub.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* 数字と英字の見出し(点・コンボ・判定・WIN/LOSE) */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* 地の色(夜のダンスフロア) */
  --bg: #0b0616;
  --bg-2: #160b2e;
  --panel: rgba(22, 11, 46, .86);
  /* 暗い幕(--bg を透かしたもの)。color-mix() が使えない古い端末(iOS 16.1以前)でも消えないよう、値で持つ */
  --bg-a30: rgba(11, 6, 22, .30);
  --bg-a45: rgba(11, 6, 22, .45);
  --bg-a50: rgba(11, 6, 22, .50);
  --bg-a55: rgba(11, 6, 22, .55);
  --bg-a72: rgba(11, 6, 22, .72);
  --bg-a78: rgba(11, 6, 22, .78);
  --bg-a88: rgba(11, 6, 22, .88);
  --bg-a90: rgba(11, 6, 22, .90);
  --bg-a94: rgba(11, 6, 22, .94);
  --line: rgba(255, 255, 255, .16);
  /* ネオン(差し色は3つまで) */
  --pink: #ff2d96;
  --cyan: #5ad1ff;
  --gold: #ffd782;
  /* 文字 */
  --text: #f5f0ff;
  --text-dim: rgba(245, 240, 255, .66);
  /* 判定・勝敗 */
  --perfect: #ffe066;
  --good: #5ad1ff;
  --miss: #ff2038;
  --win: #ffe066;
  --lose: #9aa4c8;
  /* 文字の大きさ(3段+見出し) */
  --fs-s: 12px;
  --fs-m: 15px;
  --fs-l: 20px;
  --fs-xl: 34px;
  /* 角丸・余白 */
  --r: 16px;
  --gap: 12px;
  --font-jp: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-num: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  /* 端末の切り欠き */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.hidden { display: none !important; }