/* ラクガキバンド v0.9 — 見た目はすべてクラスで持つ（インラインスタイルは使わない） */
:root {
  --paper: #f3ecd9;
  --ink: #2b2b3a;
  --accent: #d9622b;
  --blue: #2f6fb3;
  --orange: #e8892b;
  --dark: #15121c;
  --h: 100vh;
}
@supports (height: 100dvh) {
  :root { --h: 100dvh; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--dark);
  color: var(--ink);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.is-hidden { display: none !important; }

/* 絵は 714×1280。画面もその縦横比に固定して、絵の上の位置（％）がずれないようにする */
.wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }   /* 縦長の機種では、上下の余白を均等に */
.app {
  --ah: min(var(--h), calc(100vw * 1.7927));
  position: relative;
  height: var(--ah);
  aspect-ratio: 714 / 1280;
  background: var(--paper);
  overflow: hidden;
}

.screen { position: absolute; inset: 0; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.btn {
  font: inherit;
  font-size: calc(var(--ah) * 0.03);
  font-weight: bold;
  color: var(--ink);
  background: rgba(255, 252, 240, 0.92);
  border: 0.25em solid var(--ink);
  border-radius: 0.5em;
  padding: 0.5em 1.4em;
  cursor: pointer;
}
.btn:active { transform: scale(0.96); }
/* 控えめなボタン（タイトルの「ランキング」。主役は はじめる） */
.btn--quiet { font-size: calc(var(--ah) * 0.02); font-weight: normal; background: rgba(255, 252, 240, 0.78); border-width: 0.14em; padding: 0.35em 1.2em; }
/* さらに小さく・点線の枠（タイトルの「合わせ直す」。はじめる と押し間違えない・設定のような控えめさ） */
.btn--tiny { font-size: calc(var(--ah) * 0.0155); border-style: dashed; border-width: 0.12em; padding: 0.2em 0.9em; }
/* 辛さ選び（タイトル）。3 つ並べて、選んでいるものは色を付ける */
.level { display: flex; justify-content: center; gap: 0.5em; }
.level__btn { font-size: calc(var(--ah) * 0.02); font-weight: bold; padding: 0.2em 0.9em; }
.level__btn.is-on { background: var(--accent); color: #fff; border-color: var(--ink); }
/* 曲選びは辛さ選びと同じ形。選んでいるものは青（辛さのオレンジと見分ける） */
.level__btn--song.is-on { background: var(--blue); }
.titlerank { display: flex; align-items: center; justify-content: center; }

/* ---- タイトル ---- */
.title__box {
  position: absolute; left: 6%; right: 6%; bottom: 1%;      /* 下に合わせる（行が増えても はじめる が画面の外に出ない。上へ伸びる） */
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--ah) * 0.012);
  text-align: center;
  background: rgba(255, 252, 240, 0.85);
  border-radius: 1em;
  padding: calc(var(--ah) * 0.02);
}
.title__name { margin: 0; font-size: calc(var(--ah) * 0.05); }
.title__sub, .title__hint, .title__calib, .title__ver, .title__badge, .title__error { margin: 0; font-size: calc(var(--ah) * 0.02); }
.title__calibrow { display: flex; align-items: center; justify-content: center; gap: 0.7em; }
.title__ver { position: absolute; right: 4%; bottom: 1.2%; margin: 0; font-size: calc(var(--ah) * 0.016); color: var(--ink); opacity: 0.7; pointer-events: none; }
.title__badge { color: var(--accent); font-weight: bold; }
.title__error { color: #b3261e; font-weight: bold; }

/* ---- 部品の置き場。位置と大きさは config.stage から game.js が <style> で作る（#slotXxx { left; top; width; height }）---- */
.slot { position: absolute; margin: 0; }
.slot img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  pointer-events: none;
}
/* 白い背景の絵を、紙に重ねる。ふるえのフィルターを掛ける要素（人物・客席）自身が、背景に対して multiply する */
.slot--person, .slot--crowd { mix-blend-mode: multiply; transform-origin: 50% 100%; }
.slot--crowd { transition: transform 0.3s ease-in-out; }
.pad img { mix-blend-mode: multiply; }
.slot--crowd.is-sway-a { transform: translateX(-1.6%); }
.slot--crowd.is-sway-b { transform: translateX(1.6%); }

/* ---- アニメーション（transform と opacity と class だけ）---- */
.is-bounce { animation: bounce 0.28s ease-out; }
@keyframes bounce {
  0% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-5%) scaleY(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}
.is-boil { filter: url(#boil); }
.boil-defs { position: absolute; width: 0; height: 0; }
.scene-oops { animation: tumble 0.9s ease-in; transform-origin: 50% 60%; }
@keyframes tumble {
  0% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-7deg) translateY(0); }
  100% { transform: rotate(11deg) translateY(9%); }
}

/* ---- パッド（PAD.jpg）と、たたいた瞬間の言葉 ---- */
.pad img { object-position: 50% 50%; }
.pad.is-hit img { animation: padhit 0.14s ease-out; }
@keyframes padhit {
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.hit {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--ah) * 0.045); font-weight: bold; opacity: 0;
  text-shadow: 0 0 0.25em var(--paper), 0 0 0.25em var(--paper);
  pointer-events: none;
}
.hit.is-pop { animation: pop 0.55s ease-out forwards; }
@keyframes pop {
  0% { opacity: 1; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1) translateY(-30%); }
}
.hit--perfect { color: #2e8b3d; }
.hit--early { color: var(--orange); }
.hit--late { color: var(--blue); }
.hit--miss { color: #777; }

/* ---- 暴れの予告・結果の言葉 ---- */
.ramp {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(var(--ah) * 0.032); font-weight: bold; opacity: 0; white-space: nowrap;
  text-shadow: 0 0 0.25em var(--paper), 0 0 0.25em var(--paper), 0 0 0.25em var(--paper);
  pointer-events: none;
}
.ramp.is-pop { animation: rampshow 2.4s ease-out forwards; }
@keyframes rampshow {
  0% { opacity: 0; transform: scale(0.7); }
  12% { opacity: 1; transform: scale(1.1); }
  25% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.ramp--warn { color: #c0392b; }
.ramp--good { color: #2e8b3d; }
.ramp--mess { color: #777; }
/* ギターが前に出る（走る）／キーボードが傾く（もたる）。拍の弾みは外側（slot）、これは中の絵（img）に付ける */
.slot--person img { transition: transform 0.4s ease-out; }
.slot--person.is-front img { transform: translateY(8%) scale(1.18); }
.slot--person.is-sleepy img { transform: rotate(-7deg) translateY(2%); }

/* ---- ノリゲージ（マーカーで塗った帯）---- */
.gauge { display: flex; align-items: center; gap: 0.6em; }
.gauge__label { flex: none; font-size: calc(var(--ah) * 0.026); font-weight: bold; transform: rotate(-3deg); padding-left: 0.3em; text-shadow: 0 0 0.3em var(--paper), 0 0 0.3em var(--paper), 0 0 0.3em var(--paper); }
.gauge__bar {
  flex: 1; height: 100%; display: flex; padding: 0.15em;
  border: 0.18em solid var(--ink); border-radius: 0.7em 0.4em 0.8em 0.5em / 0.5em 0.8em 0.4em 0.7em;
  background: rgba(255, 252, 240, 0.7);
}
.seg { flex: 1; background: transparent; }
.seg.is-on { background: #f2c94c; }
.gauge--high .seg.is-on { background: #6cc04a; }
.gauge--low .seg.is-on { background: #e5604d; }
.seg:first-child { border-radius: 0.5em 0 0 0.5em; }
.seg:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- ずれメーター（左 = 早い・右 = 遅い）---- */
.meter { border-bottom: 0.15em solid var(--ink); }
.meter::after { content: ''; position: absolute; left: 50%; top: -25%; bottom: 0; border-left: 0.15em solid var(--ink); }
.meter__cells { position: absolute; inset: 0; display: flex; }
.meter__cell { flex: 1; position: relative; }
.meter__cell::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--ah) * 0.014); height: calc(var(--ah) * 0.014);
  margin: calc(var(--ah) * -0.007) 0 0 calc(var(--ah) * -0.007);
  border-radius: 50%; opacity: 0; background: #2e8b3d;
}
.meter__cell.is-early::after { background: var(--orange); }
.meter__cell.is-late::after { background: var(--blue); }
.meter__cell.is-lit::after { animation: dotfade 1.8s ease-out forwards; }
@keyframes dotfade {
  0% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ---- 遅れ合わせ: 上から順に流して並べる（重ねない）---- */
.screen--calib { background: var(--paper); }
.calib__flow {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--ah) * 0.015);
  padding: calc(var(--ah) * 0.05) 4% calc(var(--ah) * 0.03);
}
.calib__title { flex: none; margin: 0; text-align: center; font-size: calc(var(--ah) * 0.034); }
.calib__msg { flex: none; margin: 0; text-align: center; font-size: calc(var(--ah) * 0.026); }
.calib__dots { flex: none; display: flex; gap: calc(var(--ah) * 0.015); }
.cdot {
  display: block; width: calc(var(--ah) * 0.042); height: calc(var(--ah) * 0.042);
  border-radius: 50%; border: 0.18em solid var(--ink); background: transparent; opacity: 0.35;
  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
}
.cdot--count { border-width: 0.28em; }
.cdot.is-lit { opacity: 1; transform: scale(1.25); background: rgba(217, 98, 43, 0.35); }
.cdot--count.is-lit { background: var(--accent); }
.cdot.is-ok { opacity: 1; transform: none; background: #6cc04a; }
.cdot.is-miss { opacity: 1; transform: none; background: transparent; border-color: #d43c3c; }
.calib__btns { flex: none; display: flex; justify-content: center; gap: 1em; }
.calib__pad { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: center; }
.calib__padimg { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.calib__pad.is-hit .calib__padimg { animation: padhit 0.14s ease-out; }

/* ---- 演奏 ---- */
.stage-layer { position: absolute; inset: 0; }
.hud__phase {
  position: absolute; left: 0; right: 0; top: max(9%, env(safe-area-inset-top)); margin: 0; text-align: center;
  font-size: calc(var(--ah) * 0.07); font-weight: bold; color: var(--ink);
  text-shadow: 0 0 0.3em var(--paper), 0 0 0.3em var(--paper);
  pointer-events: none;
}
.hud__bpm {
  position: absolute; right: 4%; top: max(7.5%, env(safe-area-inset-top)); margin: 0;
  font-size: calc(var(--ah) * 0.022); font-weight: bold;
  background: rgba(255, 252, 240, 0.8); border-radius: 0.5em; padding: 0.1em 0.6em;
}

/* 演奏中の「やめる」と、その選び。ボタンの外のたたきは今までどおり 1 打に数える（置き場は config.stage.playMenu / playMenuPanel） */
.playmenu { display: flex; align-items: flex-start; }
.playmenu .btn { font-size: calc(var(--ah) * 0.018); }
.playmenu__panel { display: flex; flex-direction: row; align-items: center; gap: calc(var(--ah) * 0.01); z-index: 3; }
.playmenu__panel .btn { font-size: calc(var(--ah) * 0.018); white-space: nowrap; background: rgba(255, 252, 240, 0.96); }

/* ---- 結果（B3 の紙の札の上に重ねる） ---- */
.card__title { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--ah) * 0.034); }      /* 置き場は config.stage.resultTitle */
.bins {
  position: absolute; left: 7%; top: 36%; width: 82%; height: 13%;
  display: flex; align-items: flex-end;
}
.bin { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--ah) * 0.0007); }
.dot {
  display: block;
  width: calc(var(--ah) * 0.0064); height: calc(var(--ah) * 0.0042);
  background: #111; border-radius: 50%;
}
.bin--mid .dot { background: #000; }
.edges {
  position: absolute; left: 7%; top: 50.3%; width: 82%;
  display: flex; justify-content: space-between;
  font-size: calc(var(--ah) * 0.016); color: var(--ink);
}
.card__date { position: absolute; left: 6%; top: 60%; margin: 0; font-size: calc(var(--ah) * 0.022); }
.card__word { position: absolute; left: 6%; top: 63%; margin: 0; font-size: calc(var(--ah) * 0.045); font-weight: bold; color: var(--ink); }
.card__ramp { position: absolute; left: 6%; top: 77%; width: 64%; margin: 0; font-size: calc(var(--ah) * 0.017); }
.card__bpm { position: absolute; left: 6%; top: 70%; margin: 0; font-size: calc(var(--ah) * 0.024); }
.card__detail { position: absolute; left: 6%; top: 74%; margin: 0; font-size: calc(var(--ah) * 0.02); }
.map { position: absolute; right: 5%; top: 58%; width: 22%; height: auto; border: 0.15em solid var(--ink); }
.map__next { position: absolute; right: 3%; top: 81%; width: 26%; margin: 0; text-align: center; font-size: calc(var(--ah) * 0.0115); white-space: nowrap; }
/* 3 つのボタンは 1 つの流れ（縦に、上に「ランキングを見る」・下に 2 つ）。重ならない */
.card__btns { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--ah) * 0.012); }
.card__btnrow { display: flex; justify-content: center; gap: 0.8em; }
.card__btns .btn { font-size: calc(var(--ah) * 0.022); }

/* ---- 設定エラー ---- */
.fatal {
  position: absolute; inset: 0; z-index: 10; padding: 1.2em;
  background: #2a0f12; color: #ffd9d6; font-size: 0.95rem; overflow: auto;
}
.fatal__title { margin: 0 0 0.6em; font-size: 1.1rem; }

/* ---- 横向き: 「縦にしてね」（スマホのような粗いポインタのときだけ） ---- */
.rotate-hint { display: none; }
@media (orientation: landscape) and (pointer: coarse) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 20; margin: 0;
    align-items: center; justify-content: center;
    background: rgba(21, 18, 28, 0.92); color: var(--paper);
    font-size: 6vh; font-weight: bold; pointer-events: none;
  }
}

/* ---- 成績（点数）。絵は白地の jpg なので multiply で紙に重ねる。置き場は config.stage（score / resultBand / resultMark / resultWord）---- */
/* 付せん（.score）は普通に重ねる（multiply にすると照明の色の上で沈む）。数字だけが付せんの上で multiply */
.resultband, .resultmark { mix-blend-mode: multiply; }
.score { transform-origin: 50% 50%; isolation: isolate; }
.score .score__note { object-position: 50% 50%; }
.resultband .resultband__img { object-fit: fill; object-position: 50% 50%; mix-blend-mode: multiply; }
.score__digits { position: absolute; left: 12%; right: 12%; top: 16%; bottom: 14%; display: flex; justify-content: center; }
.score .score__digits img { flex: 0 1 50%; min-width: 0; width: auto; height: 100%; object-fit: contain; object-position: 50% 50%; mix-blend-mode: multiply; }
.score.is-up { animation: scoreup 0.35s ease-out; }
@keyframes scoreup {
  0% { transform: rotate(var(--tilt)) scale(1); }
  35% { transform: rotate(calc(var(--tilt) - 3deg)) scale(1.15); }
  100% { transform: rotate(var(--tilt)) scale(1); }
}
.score.is-down { animation: scoredown 0.4s ease-out; }
@keyframes scoredown {
  0% { transform: translateX(0) rotate(var(--tilt)); }
  20% { transform: translateX(-4%) rotate(calc(var(--tilt) - 3deg)); }
  45% { transform: translateX(4%) rotate(calc(var(--tilt) + 3deg)); }
  70% { transform: translateX(-2%) rotate(calc(var(--tilt) - 1.5deg)); }
  100% { transform: translateX(0) rotate(var(--tilt)); }
}

.resultband__row { position: absolute; left: 6%; right: 6%; top: 14%; bottom: 14%; display: flex; justify-content: center; align-items: stretch; }
.resultband__digits { display: flex; height: 100%; min-width: 0; }
.resultband .resultband__digits img { flex: 0 1 auto; width: auto; min-width: 0; height: 100%; object-fit: contain; object-position: 50% 50%; mix-blend-mode: multiply; }
.resultband__unit { align-self: flex-end; margin-left: 0.1em; font-size: calc(var(--ah) * 0.065); line-height: 1; font-weight: bold; color: var(--accent); }
.resultmark { transform: rotate(-6deg); }
.resultmark img { object-position: 50% 50%; }
.resultmark.is-stamp { animation: stamp 0.6s ease-out forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-200deg) scale(2.6); }
  60% { opacity: 1; transform: rotate(8deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.resultword {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(var(--ah) * 0.03); font-weight: bold; color: var(--accent);
  pointer-events: none;
}
.resultword.is-word-in { animation: wordin 0.5s ease-out forwards; }
@keyframes wordin {
  0% { opacity: 0; transform: translateY(40%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- ランキング。手書き風の字・紙は multiply ---- */
.modal, .screen--rank { font-family: var(--hand); }      /* --hand は config.font から game.js が作る */

/* 参加のモーダル。後ろをほぼ不透明の紙色で覆い、メモの紙（R2）を multiply で載せる */
.modal { position: absolute; inset: 0; z-index: 5; background: rgba(243, 236, 217, 0.96); }
.modal__paper { mix-blend-mode: multiply; transform: rotate(-1deg); }
.modal__paper .modal__bg { object-fit: fill; object-position: 50% 50%; position: absolute; inset: 0; }
.modal__paper.is-in { animation: modalin 0.45s ease-out; }
@keyframes modalin {
  0% { opacity: 0; transform: translateY(6%) rotate(-5deg) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
}
.modal__step { position: absolute; left: 9%; right: 9%; top: 21%; bottom: 15%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ah) * 0.016); text-align: center; }
.modal__title { margin: 0; font-size: calc(var(--ah) * 0.031); font-weight: bold; color: var(--ink); }
.modal__score { margin: 0; font-size: calc(var(--ah) * 0.05); font-weight: bold; color: var(--accent); }
.modal__btns { display: flex; flex-direction: column; align-items: center; gap: calc(var(--ah) * 0.012); margin-top: calc(var(--ah) * 0.012); }
.modal .btn--main { font-size: calc(var(--ah) * 0.034); background: var(--accent); color: #fff; border-color: var(--ink); }
.modal .btn--sub { font-size: calc(var(--ah) * 0.022); background: transparent; border-width: 0.12em; border-style: dashed; }
.modal__input {
  width: 100%; font: inherit; font-size: max(16px, calc(var(--ah) * 0.026)); font-weight: bold; color: var(--ink);
  text-align: center; padding: 0.3em 0.2em; background: rgba(255, 252, 240, 0.9);
  border: 0.14em solid var(--ink); border-radius: 0.5em 0.3em 0.55em 0.35em / 0.35em 0.55em 0.3em 0.5em;
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.modal__input:focus { outline: none; border-color: var(--accent); }
.modal__err { margin: 0; min-height: 1.2em; font-size: calc(var(--ah) * 0.02); font-weight: bold; color: #b3261e; }
.modal__note { margin: 0; min-height: 1.2em; font-size: calc(var(--ah) * 0.018); color: var(--ink); }

/* ランキングの画面（R1 のノートの 1 枚） */
.rank__title { position: absolute; left: 0; right: 0; top: 6.5%; margin: 0; text-align: center; font-size: calc(var(--ah) * 0.05); font-weight: bold; color: var(--ink); }
.rank__board { margin-left: 0.5em; font-size: 0.62em; color: var(--accent); }
/* 切り替え（曲ごと・総合）。選んでいる表は青 */
.rank__tabs { display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.rank__tab { font-size: calc(var(--ah) * 0.024); font-weight: bold; padding: 0.15em 0.8em; }
.rank__tab.is-on { background: var(--blue); color: #fff; border-color: var(--ink); }
.rank__msg { position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; font-size: calc(var(--ah) * 0.03); color: var(--ink); }
.rank__list { display: flex; flex-direction: column; }
.rank__row { flex: none; display: flex; align-items: center; border-radius: 0.5em; font-size: calc(var(--ah) * 0.027); color: var(--ink); }
.rank__row.is-mine { background: rgba(255, 232, 110, 0.55); font-weight: bold; }
.rank__no { flex: 0 0 11%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.rank__list .rank__no img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: 50% 50%; mix-blend-mode: multiply; }
.rank__name { flex: 1 1 0; min-width: 0; padding-left: 0.4em; white-space: nowrap; overflow: hidden; }
.rank__name.has-pen { overflow: visible; }      /* 鉛筆が行の外へはみ出すので。字の大きさは nameFit で収める */
.rank__score { flex: 0 0 22%; text-align: right; font-weight: bold; }
.rank__date { flex: 0 0 15%; text-align: right; font-size: 0.65em; opacity: 0.7; }
/* 辛さのバッジ（曲ごとの表だけ）。字は config.score.levels.*.badge・色のクラスは badgeClass */
/* 曲ごとの表は右端にバッジの列（8%）が入る。名前の欄を総合と同じ 52%（nameFit の倍率を決めた幅）に保つため、点数と日付の幅を詰める。日付とバッジのすき間は日付の右の余白 */
.rank__list--song .rank__score { flex-basis: 16%; }
.rank__list--song .rank__date { flex-basis: 12%; padding-right: 0.4em; }
.rank__badge { flex: 0 0 8%; display: flex; align-items: center; justify-content: center; }
.badge { display: inline-block; min-width: 1.5em; padding: 0.05em 0.3em; border: 0.1em solid var(--ink); border-radius: 50%; font-size: 0.6em; font-weight: bold; line-height: 1.2; text-align: center; color: #fff; }
.badge--amakuchi { background: #4f9a5a; }
.badge--chukara { background: var(--orange); }
.badge--karakuchi { background: #c0392b; }
.rank__me { display: flex; align-items: center; justify-content: center; font-size: calc(var(--ah) * 0.034); font-weight: bold; color: var(--accent); }
.rank__me--note { font-size: calc(var(--ah) * 0.02); color: var(--ink); }
.rank__btns { display: flex; align-items: center; justify-content: center; }
.rank__btns .btn { font-size: calc(var(--ah) * 0.028); }

/* ペンで書く: 1 文字ずつ現れ、鉛筆（R6）の先がその右端を動く。秒数・文字数は config（game.js が .pen-nK を作る） */
.pen { position: relative; display: inline-block; }
.pen__text {
  display: inline-block; clip-path: inset(0 100% 0 0);
  animation: penclip var(--pen-dur) steps(var(--pen-steps), end) var(--pen-start) both;
}
@keyframes penclip {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.pen__tip {
  position: absolute; left: 0; bottom: 0.05em; width: 0; height: 0; pointer-events: none; mix-blend-mode: multiply;
  animation: pentip var(--pen-dur) steps(var(--pen-steps), end) var(--pen-start) both, penfade 0.3s linear calc(var(--pen-start) + var(--pen-dur)) forwards;
}
@keyframes pentip {
  from { left: 0%; }
  to { left: 100%; }
}
@keyframes penfade {
  from { opacity: 1; }
  to { opacity: 0; }
}
.pen .pen__tipimg { position: absolute; left: -0.1em; bottom: 0; width: 2.1em; height: auto; object-fit: fill; transform-origin: 0% 100%; animation: penwiggle 0.18s ease-in-out infinite alternate; }
@keyframes penwiggle {
  from { transform: rotate(-3deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-6%); }
}

/* ---- 曲の進み具合のバー（鉛筆で塗る）。区切りの数・印は config.progress ---- */
.progress { display: flex; padding: 0.1em; border: 0.14em solid var(--ink); border-radius: 0.6em 0.3em 0.7em 0.4em / 0.4em 0.7em 0.3em 0.6em; background: rgba(255, 252, 240, 0.7); pointer-events: none; }
.progress__bar { flex: 1; display: flex; }
.pseg { flex: 1; }
.pseg.is-intro { background: rgba(43, 43, 58, 0.14); }
.pseg.is-on { background: #3d3d4d; }
.pseg.is-ramp { box-shadow: inset 0 -0.3em 0 #c0392b; }

/* ---- 「はやい／ぴったり／おそい」の数。手書きの字（--hand）・色は判定の言葉（hit--early など）と同じ。置き場は config.stage（tally / resultTally）---- */
.tally, .rtally { font-family: var(--hand); font-weight: bold; }
.tally {
  display: flex; flex-direction: column; justify-content: space-around;
  font-size: calc(var(--ah) * 0.02); line-height: 1.1; padding: 0 0.4em; white-space: nowrap;
  background: rgba(255, 252, 240, 0.85); border: 0.12em solid var(--ink);
  border-radius: 0.6em 0.4em 0.7em 0.45em / 0.45em 0.7em 0.4em 0.6em;
  transform: rotate(-1.5deg); pointer-events: none;
}
.tally__item { display: flex; justify-content: space-between; align-items: baseline; }
.tally__num { min-width: 1.3em; text-align: right; }
.tally__item.is-tick { animation: tallytick 0.28s ease-out; }
@keyframes tallytick {
  0% { transform: scale(1); }
  35% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.tally__item--early, .rtally__item--early { color: #c26a14; }
.tally__item--just, .rtally__item--just { color: #2e8b3d; }
.tally__item--late, .rtally__item--late { color: var(--blue); }

.rtally { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; pointer-events: none; }
.rtally__item { display: flex; align-items: baseline; gap: 0.3em; line-height: 1; }
.rtally__item--early { justify-self: start; }
.rtally__item--just { justify-self: center; }
.rtally__item--late { justify-self: end; }
.rtally__label { font-size: calc(var(--ah) * 0.019); }
.rtally__num { min-width: 2.2ch; font-size: calc(var(--ah) * 0.026); font-variant-numeric: tabular-nums; }