:root {
  /* 上からの位置：HUD（スコア・時間・コンボ）の下にミニゲームの残り時間バー、その下にミニゲームの中身 */
  --top: max(10px, env(safe-area-inset-top));
  --bar-top: calc(var(--top) + 92px);
  --mg-top: calc(var(--top) + 126px);
  --bot: max(12px, env(safe-area-inset-bottom));
  /* 色には意味を持たせる（docs/design/visual.md 1-1）。ピンクは「萌え・自分・特別」だけ */
  --ink: #3A2A22; --paper: #FFFAF1; --cream: #FFF8EC; --bg: #EFE7DE;
  --yellow: #FFD23A; --gold: #FFC928; --yellow-l: #FFE58A;   /* スコア・Perfect ／ コイン本体 ／ 浮き文字 */
  --orange: #E8893A;                                          /* 行動：主ボタン、スピードアップ */
  --pink: #FF7FA6; --pink-d: #E85C88; --pink-l: #FFE3EC;     /* 萌え・自分・特別 */
  --mint: #7FD3B8; --lav: #9B7FE6; --sky: #8CC8FF; --red: #D9463B;
  --line: #E9D9C3; --dot: #F2DCC4;
  --brown: #8A4A2A; --good: #3FA66B; --bad: #C4453B;
  /* ぷっくり：チップとカードの影に並べて書く */
  --puffy: inset 0 2px 0 #fff, inset 0 -3px 0 rgba(58, 42, 34, .07);
  --logo-font: "Mochiy Pop One", "M PLUS Rounded 1c", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif; touch-action: none; }
button { font: inherit; cursor: pointer; }
#gl, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; z-index: 7; }
/* 太いフチ取り文字（命令、判定、数字など） */
.outline { color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke; }

/* ===== 上の表示 =====
   真ん中の列は 64px 固定、左右は minmax(0, 1fr)（中身が伸びても列が広がらず、タイマーが中央からずれない）。
   スコアは桁数で文字を小さくする（drawMoney が data-len を入れる）。ミニゲームの上に出す（z 6）がタップは素通し（≡ だけ受ける） */
#hud { position: fixed; top: var(--top); left: 10px; right: 10px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 8px; pointer-events: none; }
.chip { background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink), var(--puffy); }
.money { position: relative; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 5px; }
.money > div { min-width: 0; }
.coin { flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--yellow-l) 30%, var(--gold) 32%); border: 2.5px solid #7A4A1A; }
.money small { display: block; font-size: 9px; font-weight: 800; opacity: .6; line-height: 1; white-space: nowrap; }
.money b { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.money b[data-len="7"], .money b[data-len="8"] { font-size: 17px; }   /* 123,456 */
.money b[data-len="9"] { font-size: 14px; }                           /* 1,234,567 */
.money b[data-len="10"] { font-size: 12.5px; }                        /* 12,345,678 */
.money b[data-len="11"], .money b[data-len="12"] { font-size: 11px; }
/* 大きな加点のとき、スコアのチップに光の帯を通す */
.money.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%); background-size: 250% 100%; animation: shine .45s ease-out forwards; pointer-events: none; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -30% 0; } }
@keyframes bump { 50% { transform: scale(1.18); } }
.timer { position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 0; }
/* inset をやめて大きさを書く（枠 64 − 線 3×2 = 58 の中心に 52）。回転は SVG の中の g で（iOS Safari でのずれ対策） */
.timer svg { position: absolute; left: 3px; top: 3px; width: 52px; height: 52px; display: block; }
.timer circle { fill: none; stroke-width: 5; }
.timer .bg { stroke: #EADFCD; }
.timer .fg { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 119.4; }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 900; line-height: 1; }
.timer.hurry { animation: hurry .5s infinite; }
.timer.hurry .fg { stroke: var(--bad); }
@keyframes hurry { 50% { transform: scale(1.08); } }
.hud-r { justify-self: end; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.combo { text-align: right; padding: 4px 10px; min-width: 84px; }
.combo b { font-size: 24px; font-weight: 900; line-height: 1; }
.combo small { font-size: 10px; font-weight: 800; margin-left: 3px; }
.combo span { display: block; margin-top: 2px; font-size: 13px; font-weight: 900; color: #fff; background: var(--orange); border-radius: 99px; padding: 0 8px; text-align: center; -webkit-text-stroke: 3px var(--ink); paint-order: stroke; }
.combo.pop { animation: bump .18s; }
/* コンボの段階で ×倍率の札の色を変える。2 から上はチップの外に色の輪 */
.combo[data-tier="1"] span { background: #FFB020; }
.combo[data-tier="2"] span { background: var(--pink); }
.combo[data-tier="3"] span { background: var(--lav); }
.combo[data-tier="4"] span { background: linear-gradient(90deg, #FF7FA6, #FFD23A, #7FD3B8, #8CC8FF, #FF7FA6); background-size: 200% 100%; animation: rainbow 2s linear infinite; }
.combo[data-tier="2"] { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--pink-l), var(--puffy); }
.combo[data-tier="3"] { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #EDE6FF, var(--puffy); }
.combo[data-tier="4"] { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #FFF1B8, var(--puffy); }
@keyframes rainbow { to { background-position: 200% 0; } }
/* ≡（ゲーム中メニュー）：営業中だけ出す。ビンタタイム中は押せない（連打で誤って開かないように） */
.menu-btn { position: relative; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 12px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink), var(--puffy); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: auto; transition: opacity .15s; }
.menu-btn::before { content: ''; position: absolute; inset: -6px; }   /* 押せる範囲 44×44 */
.menu-btn i { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--ink); }
.menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
body.in-shift .menu-btn { display: flex; }
body.fever .menu-btn { opacity: .35; pointer-events: none; }

/* ===== 萌えゲージ ===== */
body.mg-on #bottom { opacity: 0; transform: translateY(20px); }
#bottom { transition: opacity .15s, transform .15s; }
#bottom { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.moe { width: min(100%, 440px); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; }
.moe .moe-heart { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#FFB3C8, var(--pink)); border: 3px solid var(--ink); }
.moe .moe-heart svg { display: block; margin-top: 2px; }
.moe-main { flex: 1; }
.moe .lbl { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.moe .lbl small { margin-left: 6px; font-size: 10px; font-weight: 500; opacity: .7; }
.moe .bar { height: 14px; border-radius: 99px; background: #EADFCD; border: 2px solid var(--ink); overflow: hidden; }
.moe .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFB3C8, var(--pink)); transition: width .25s; }
.moe b { flex: none; min-width: 48px; text-align: right; font-size: 18px; font-weight: 900; color: var(--pink-d); }
.moe.gain { animation: bump .3s; }
/* 75% から：ハートが鼓動し、バーに白い斜めの縞が流れる */
.moe.near .moe-heart svg { animation: beat2 .6s infinite; }
.moe.near .bar i { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px) 0 0 / 22.63px 22.63px, linear-gradient(90deg, #FFB3C8, var(--pink)); animation: stripe 1s linear infinite; }
@keyframes stripe { to { background-position: 22.63px 0, 0 0; } }
@keyframes beat2 { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.15); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } }
/* 満タン：白く光る */
.moe.full { animation: moeglow .2s ease-out; }
@keyframes moeglow { 50% { background: #fff; box-shadow: 0 4px 0 var(--ink), 0 0 0 4px #fff, var(--puffy); } }

/* ===== 命令（毎回、始まる瞬間に大きく出る） ===== */
#cmd { position: fixed; left: 0; right: 0; top: 24%; z-index: 7; text-align: center; pointer-events: none; }
#cmd b { display: inline-block; white-space: nowrap; font-size: min(11vw, 60px); font-weight: 900; color: #FFD23A; -webkit-text-stroke: 9px var(--ink); paint-order: stroke; text-shadow: 0 6px 0 var(--ink); opacity: 0; }

/* ===== 節目のお知らせ（コンボ、レベル、スピード、ビンタタイム） ===== */
#banner { position: fixed; left: 0; right: 0; top: 16%; z-index: 7; pointer-events: none; text-align: center; }
/* 全種類に硬い影と内側のステッチ、左にアイコン（コンボ＝音符、レベル＝上の二重矢印、スピード＝右の二重矢印、ビンタ＝ハート） */
.banner { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 8px 20px 8px 14px; border-radius: 18px; background: var(--ink); color: var(--yellow); font-size: min(28px, 7vw); font-weight: 900; border: 3px solid var(--yellow); box-shadow: 0 4px 0 var(--ink); }
.banner::before { content: ''; position: absolute; inset: 4px; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 13px; pointer-events: none; }
.banner .bn-ic { flex: none; width: 22px; height: 22px; }
.banner small { display: block; font-size: 15px; color: #FFF3D6; }
.banner.fever { background: var(--red); color: #fff; font-size: min(34px, 8vw); border-color: var(--ink); }
.banner.level { background: var(--pink); color: #fff; border-color: var(--ink); }
.banner.speed { background: var(--orange); color: #fff; border-color: var(--ink); }
.banner.level > div, .banner.speed > div, .banner.fever > div { -webkit-text-stroke: 5px var(--ink); paint-order: stroke; }
.banner.level small, .banner.speed small, .banner.fever small { color: #fff; -webkit-text-stroke: 3px var(--ink); }
.flash { position: fixed; inset: 0; z-index: 6; background: #fff; pointer-events: none; }

/* ===== ビンタタイム（3D の行列の上に重ねる。背景は透明で、タップを受けるだけ） ===== */
#fever { position: fixed; inset: 0; z-index: 5; touch-action: none; }
#fever[hidden] { display: none; }
#fever::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 55%, rgba(217, 70, 59, .45)); }
.fv-info { position: absolute; left: 0; right: 0; top: calc(var(--top) + 104px); text-align: center; font-size: 22px; font-weight: 800; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke; pointer-events: none; }
.fv-info b { font-size: 38px; }
/* 先頭の客の体力：名前・体力バー・倒したときの賞金 */
.fv-hp { position: absolute; left: 50%; bottom: 16vh; transform: translateX(-50%); width: min(84vw, 360px); padding: 8px 12px; border-radius: 16px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); pointer-events: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.fv-hp .fv-name { font-size: 17px; font-weight: 800; }
.fv-hp .fv-tag { justify-self: end; grid-column: 2; grid-row: 1; font-style: normal; font-size: 13px; font-weight: 800; padding: 1px 10px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.fv-hp .fv-tag:empty { display: none; }
.fv-hp[data-lv='2'] { border-color: #FF9A3C; } .fv-hp[data-lv='3'] { border-color: #5AA9FF; } .fv-hp[data-lv='4'] { border-color: #FFD23A; } .fv-hp[data-lv='5'] { border-color: #FFB5C5; box-shadow: 0 4px 0 #3A2A22, 0 0 16px #FFE58A; }
/* 呼び名の札：パンピ, オタク, 常連, 熟練者, 筋金入り, 悟り, 仙人, 神 */
.fv-hp .fv-tag[data-idx='0'] { background: #EEE8E2; color: #8A7A6E; border-color: #B8A89A; } .fv-hp .fv-tag[data-idx='2'] { background: #7ED39B; }
.fv-hp .fv-tag[data-idx='3'] { background: #FF9A3C; color: #fff; } .fv-hp .fv-tag[data-idx='4'] { background: #5AA9FF; color: #fff; }
.fv-hp .fv-tag[data-idx='5'] { background: #A98AE0; color: #fff; } .fv-hp .fv-tag[data-idx='6'] { background: #FFD23A; }
.fv-hp .fv-tag[data-idx='7'] { background: linear-gradient(90deg, #FFB5C5, #FFE58A, #A8E6CF, #A8C8FF); }
.fv-hp .fv-prize { grid-column: 1 / -1; font-size: 17px; font-weight: 800; color: #B8641F; }
.fv-hp .bar { grid-column: 1 / -1; height: 16px; border-radius: 99px; background: #EADFCD; border: 2px solid var(--ink); overflow: hidden; }
.fv-hp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF8A7A, #D9463B); transition: width .08s; }
.fv-hp .fv-hpnum { grid-column: 1 / -1; font-size: 12px; font-weight: 800; opacity: .7; text-align: right; }
.fv-hp.tough { background: #3A2A22; color: #FFD23A; border-color: #FFD23A; }
.fv-hp.tough .fv-prize { color: #FFE58A; }
#feverTop { position: fixed; left: 16px; right: 16px; top: calc(var(--top) + 86px); z-index: 5; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 2px solid var(--ink); overflow: hidden; }
#feverTop i { display: block; height: 100%; width: 100%; background: #D9463B; }
#feverTop[hidden] { display: none; }

/* ===== ミニゲーム共通 ===== */
#mg { position: fixed; inset: 0; z-index: 5; }
/* 残り時間：導火線のように縮み、先端が光る */
/* 残り時間：太い導火線。残り 3 割で赤く震える。先端の火花は大きめ */
.mg-time { position: absolute; left: 14px; right: 14px; top: var(--bar-top); height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.mg-time i { position: relative; display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #FFB547 0 10px, #E8893A 10px 20px); }
.mg-time i::after { content: ''; position: absolute; right: -14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(#FFFBE0, #FFD23A 35%, rgba(255, 120, 30, .6) 55%, rgba(255, 120, 30, 0) 72%); animation: spark .1s infinite alternate; }
.mg-time.low { animation: lowshake .12s infinite; }
.mg-time.low i { background: repeating-linear-gradient(-45deg, #FF6B5B 0 10px, #D9463B 10px 20px); }
@keyframes lowshake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
/* バーの左端のストップウォッチ：残り秒数。残り 3 秒から赤く大きく */
.mg-time { margin-left: 30px; }
.mg-time .watch { position: absolute; left: -34px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 4px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 22px; font-weight: 800; line-height: 1; }
.mg-time .watch::before { content: ''; position: absolute; top: -10px; left: 50%; width: 12px; height: 8px; margin-left: -6px; border-radius: 3px; background: var(--ink); }
.mg-time .watch.hot { width: 58px; height: 58px; left: -40px; background: #D9463B; color: #fff; font-size: 30px; }
@keyframes spark { to { transform: scale(1.4); } }

/* 判定 */
.stamp { position: fixed; left: 50%; top: 42%; z-index: 7; transform: translate(-50%, -50%); font-size: min(15vw, 68px); font-weight: 900; pointer-events: none; -webkit-text-stroke: 9px var(--ink); paint-order: stroke; text-shadow: 0 6px 0 var(--ink); animation: stamp .55s ease-out forwards; }
.stamp.P { color: var(--yellow); } .stamp.G { color: #8FE0AE; } .stamp.B { color: #B9AFA6; }
@keyframes stamp { 0% { transform: translate(-50%, -50%) scale(2.6) rotate(-8deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(.9) rotate(-4deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1) rotate(-4deg); opacity: 0; } }

#float { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.say { position: absolute; padding: 6px 14px; border-radius: 16px; background: #fff; border: 3px solid var(--ink); font-size: 17px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.say::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 18px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke; white-space: nowrap; }

/* ===== 画面 =====
   地は生成りに、点・ハート・きらめきをごく薄く散らす（72px ごと。色は --dot 1 色）。後ろの 3D の店が少し見える。
   全画面の画面を出している間は HUD と萌えゲージを隠す（薄い地の下から透けてうるさいので） */
.screen { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: rgba(255, 248, 236, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23F2DCC4'%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Ccircle cx='45' cy='45' r='2'/%3E%3Cpath d='M45 12.5c-2.6-1.9-4-3.3-4-4.8 0-1.1.9-2 2-2 .8 0 1.5.4 2 1.1.5-.7 1.2-1.1 2-1.1 1.1 0 2 .9 2 2 0 1.5-1.4 2.9-4 4.8z'/%3E%3Cpath d='M9 40l1.1 2.9 2.9 1.1-2.9 1.1L9 48l-1.1-2.9L5 44l2.9-1.1z'/%3E%3C/g%3E%3C/svg%3E"); }
.screen[hidden] { display: none; }
body:has(.screen:not([hidden])) #hud, body:has(.screen:not([hidden])) #bottom { visibility: hidden; }
.screen h2 { margin: 0; font-family: var(--logo-font); font-weight: 400; font-size: 26px; line-height: 1.3; }
.screen h3 { font-family: var(--logo-font); font-weight: 400; }
.screen p { margin: 0; line-height: 1.7; }
/* 主ボタン：上につや。押すと影の分だけ沈む */
.big { position: relative; overflow: hidden; border: 3px solid var(--ink); border-radius: 99px; padding: 14px 36px; font-size: 21px; font-weight: 900; color: #fff; background: var(--orange); box-shadow: 0 5px 0 var(--ink); -webkit-text-stroke: 4px var(--ink); paint-order: stroke; }
.big::after { content: ''; position: absolute; left: 18%; right: 18%; top: 3px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .4); pointer-events: none; }
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big.pink { background: var(--pink); }
.big[disabled] { opacity: .45; box-shadow: 0 2px 0 var(--ink); }
.best { font-size: 14px; opacity: .8; }
.sales b { display: block; font-size: 44px; font-weight: 900; }
#rStats { list-style: none; margin: 0; padding: 12px 18px; display: grid; grid-template-columns: auto auto; gap: 4px 18px; text-align: left; font-size: 15px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; }
#rStats b { text-align: right; }
.sub { border: 3px solid var(--ink); border-radius: 99px; padding: 8px 26px; font-size: 16px; font-weight: 800; color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--ink), var(--puffy); }
.sub:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.icon-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink), var(--puffy); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.seg { display: flex; gap: 4px; }
.seg button { padding: 6px 10px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); font-weight: 800; font-size: 13px; color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.seg button:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.seg button.on { background: var(--ink); color: var(--yellow); }

/* ===== タイトル ===== */
#title { justify-content: flex-start; gap: clamp(10px, 2vh, 18px); padding: calc(var(--top) + clamp(16px, 11vh, 110px)) 16px var(--bot); }
#title .big { width: min(100%, 300px); flex-shrink: 0; }
.mute-btn { position: absolute; top: var(--top); right: 12px; }
.mute-btn .slash { display: none; }
.mute-btn[aria-pressed="true"] .slash { display: inline; }
.best-tag { flex-shrink: 0; padding: 3px 16px 4px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 13px; font-weight: 800; line-height: 1.5 !important; }
.best-tag b { margin-left: 4px; font-size: 18px; font-weight: 900; }
/* ランキング：開店のすぐ下。開店（オレンジの大ボタン）より小さく、下の 2 つ（練習モード・遊び方）より目立つ */
.rank-btn { flex-shrink: 0; width: min(100%, 240px); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px 10px; border-radius: 99px; border: 3px solid var(--ink); background: #FFF1B8; color: var(--ink); font-size: 18px; font-weight: 900; box-shadow: 0 4px 0 var(--ink), var(--puffy); }
.rank-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rank-btn svg { flex: none; margin-top: -2px; }
.title-sub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: min(100%, 300px); flex-shrink: 0; }
.title-sub .sub { padding: 8px 2px; font-size: 14px; white-space: nowrap; letter-spacing: -.02em; }
/* 下端のクレジット・このゲームについて：小さく控えめに。流れの中に置いて一番下へ寄せる（背の低い画面でもボタンに重ならない） */
#title .title-foot { flex-shrink: 0; margin: auto 0 -6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 10px; font-size: 11px; font-weight: 800; line-height: 1.3; }
.title-foot a, .title-foot button { padding: 6px 4px; border: 0; background: none; color: rgba(58, 42, 34, .68); font-size: inherit; font-weight: inherit; text-decoration: none; }
.title-foot button { text-decoration: underline; text-decoration-color: rgba(58, 42, 34, .3); text-underline-offset: 3px; }
.title-foot a:active, .title-foot button:active { color: var(--ink); }

/* このゲームについて：名前入力と同じ、下から出るシート。長いときはシートの中だけスクロール */
.about { position: fixed; inset: 0; z-index: 12; display: flex; align-items: flex-end; justify-content: center; }
.about[hidden] { display: none; }
.about-bg { position: absolute; inset: 0; background: rgba(58, 42, 34, .32); animation: fadeIn .15s ease-out; }
.about-card { position: relative; width: min(100%, 420px); max-height: calc(100% - var(--top) - 6px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 16px 18px calc(var(--bot) + 6px); display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--paper); border: 3px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; animation: aboutUp .2s ease-out; }
.about-card h2 { margin: 0; text-align: center; font-family: var(--logo-font); font-weight: 400; font-size: 19px; line-height: 1.3; }
.about-lead { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.6; }
.about-list { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 14px; background: var(--cream); border: 2px solid var(--line); }
.about-list li { position: relative; padding-left: 13px; font-size: 12px; font-weight: 700; line-height: 1.6; }
.about-list li::before { content: ''; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(58, 42, 34, .4); }
.about-list b { font-weight: 900; }
.about-list a { color: inherit; text-underline-offset: 2px; }
.about-card .sub { flex-shrink: 0; align-self: center; min-width: 150px; margin-top: 2px; }
@keyframes aboutUp { from { transform: translateY(24px); opacity: 0; } }

/* ロゴ「千客万来！萌え萌えお給仕タイム」（visual.md 2 章の A 案：ぷっくりステッカー） */
.logo:not(.enter) { visibility: hidden; }   /* フォントを待ってから登場させる（起動時に showTitle が .enter を付ける） */
.logo { position: relative; isolation: isolate; display: inline-block; flex-shrink: 0; margin: 0; line-height: 1; font-family: var(--logo-font); font-weight: 400; color: var(--ink); }
.logo > span { display: block; white-space: nowrap; }
.logo i { font-style: normal; display: inline-block; position: relative; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
/* 白いステッカーの縁（字の後ろに同じ字を太い白線で。影はここに付ける） */
.logo i::before { content: attr(data-c); position: absolute; inset: 0; z-index: -1; color: #fff; -webkit-text-stroke: var(--sw) #fff; paint-order: stroke; text-shadow: 0 var(--sh) 0 var(--ink); }
.logo-rib { display: inline-block !important; position: relative; margin-bottom: 6px; font-size: clamp(17px, 5.6vw, 23px); color: #fff; padding: 6px 20px 7px; background: var(--pink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-3deg); }
.logo-rib::before, .logo-rib::after { content: ''; position: absolute; top: 8px; width: 18px; height: 22px; background: #F2648F; border: 3px solid var(--ink); z-index: -1; }
.logo-rib::before { left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.logo-rib::after { right: -14px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.logo-l2 { font-size: clamp(54px, 17.6vw, 76px); letter-spacing: -.02em; --sw: .30em; --sh: .09em; }
.logo-l2 i { -webkit-text-stroke: .136em var(--ink); paint-order: stroke; }
.logo-l2 i:nth-child(odd) { color: var(--pink); }
.logo-l2 i:nth-child(even) { color: var(--yellow); }
/* ぷっくりのつや：同じ字を白で重ね、上の 3 割だけ見せる */
.logo-l2 i::after { content: attr(data-c); position: absolute; inset: 0; color: #fff; opacity: .45; -webkit-text-stroke: 0; clip-path: inset(8% 12% 62% 10% round 40%); }
.logo-l3 { margin-top: 4px; font-size: clamp(32px, 10.7vw, 46px); --sw: .45em; --sh: .125em; }
.logo-l3 i { color: #fff; -webkit-text-stroke: .2em var(--ink); paint-order: stroke; }
.logo-l3 i:nth-child(n+4) { color: var(--yellow); }
/* 文字ごとの傾きと上下のずれ（弾むリズム）と、登場の順番 */
.logo-l2 i:nth-child(1) { --r: -6deg; --y: 2px; --i: 0; } .logo-l2 i:nth-child(2) { --r: 5deg; --y: -5px; --i: 1; }
.logo-l2 i:nth-child(3) { --r: -4deg; --y: 1px; --i: 2; } .logo-l2 i:nth-child(4) { --r: 7deg; --y: -6px; --i: 3; }
.logo-l3 i:nth-child(1) { --r: -4deg; --y: 0px; --i: 0; } .logo-l3 i:nth-child(2) { --r: 0deg; --y: -3px; --i: 1; }
.logo-l3 i:nth-child(3) { --r: 3deg; --y: 0px; --i: 2; } .logo-l3 i:nth-child(4) { --r: -3deg; --y: -2px; --i: 3; }
.logo-l3 i:nth-child(5) { --r: 0deg; --y: 1px; --i: 4; } .logo-l3 i:nth-child(6) { --r: 5deg; --y: -3px; --i: 5; }
.logo-heart { position: absolute; width: 30px; height: 30px; right: -26px; top: 58px; transform: rotate(14deg); }
.logo-spk { position: absolute; width: 22px; height: 22px; left: -20px; top: 44px; }
.logo-spk.s2 { width: 16px; height: 16px; left: auto; right: 8px; top: -6px; }
/* 登場（タイトルを開いた時だけ。ゲームから戻った時も）→ 待機中はゆっくり揺れる */
.logo.enter { animation: lgBob 2.8s ease-in-out 1.1s infinite alternate; }
.logo.enter .logo-rib { animation: lgRib .42s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.logo.enter .logo-l2 i { --s0: .2; animation: lgPop .38s cubic-bezier(.34, 1.56, .64, 1) calc(120ms + var(--i) * 70ms) backwards; }
.logo.enter .logo-l3 i { --s0: .4; animation: lgPop .32s cubic-bezier(.34, 1.56, .64, 1) calc(420ms + var(--i) * 45ms) backwards; }
.logo.enter .logo-heart { animation: lgHeart .3s cubic-bezier(.34, 1.56, .64, 1) .8s backwards, lgBeat 2.4s 1.1s infinite; }
.logo.enter .logo-spk { animation: lgTw 1.6s ease-in-out 1.1s infinite alternate; }
.logo.enter .logo-spk.s2 { animation-delay: 1.9s; }
@keyframes lgBob { to { transform: translateY(-4px); } }
@keyframes lgRib { from { transform: translateY(-24px) rotate(-12deg); opacity: 0; } }
@keyframes lgPop { 0% { transform: translateY(calc(var(--y, 0px) + 20px)) rotate(var(--r, 0deg)) scale(var(--s0)); opacity: 0; } 60% { transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)) scale(1.12); opacity: 1; } }
@keyframes lgHeart { 0% { transform: rotate(14deg) scale(0); } 60% { transform: rotate(14deg) scale(1.2); } }
@keyframes lgBeat { 0%, 25%, 100% { transform: rotate(14deg) scale(1); } 6.25% { transform: rotate(14deg) scale(1.15); } 18.75% { transform: rotate(14deg) scale(1.1); } }
@keyframes lgTw { from { transform: scale(.6); opacity: .5; } }

/* ===== 遊び方 ===== */
#howto { justify-content: flex-start; overflow-y: auto; gap: 10px; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
#howto h3 { margin: 6px 0 0; font-size: 18px; }
.how-steps { list-style: none; margin: 0; padding: 0; width: min(100%, 440px); display: grid; gap: 8px; text-align: left; }
.how-steps li { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink), var(--puffy); }
.how-steps .ic { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.how-steps .ic .coin { width: 24px; height: 24px; }
.how-steps b { font-size: 16px; font-weight: 900; }
.how-steps span { font-size: 13px; opacity: .75; line-height: 1.45; }
.how-games { list-style: none; margin: 0; padding: 0; width: min(100%, 440px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.how-games li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.how-games b { font-size: 14px; }
.how-games em { font-style: normal; font-size: 15px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke; }
.how-games span { font-size: 12px; opacity: .75; line-height: 1.45; }
#howBack { margin-top: 6px; flex-shrink: 0; }
#howClose { flex-shrink: 0; }

/* ===== 練習モード ===== */
.pr-note { font-size: 13px; font-weight: 800; opacity: .7; margin-top: -8px !important; }
#practice { justify-content: flex-start; overflow-y: auto; gap: 12px; padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.pr-row { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.pr-row > span { font-size: 13px; }
.pr-check { font-size: 14px; }
.pr-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 420px); }
.pr-grid button small { display: block; font-size: 11px; opacity: .6; margin-top: 2px; }
.pr-grid button.fever small { opacity: .9; }
.pr-grid button { white-space: nowrap; letter-spacing: -.02em; padding: 10px 2px; border-radius: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 900; font-size: 14px; box-shadow: 0 3px 0 var(--ink), var(--puffy); }
.pr-grid button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pr-grid button.fever { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--ink); }
.pr-last { min-height: 1.4em; font-size: 13px; font-weight: 800; }
.pr-stop { position: fixed; right: 12px; bottom: calc(var(--bot) + 84px); z-index: 9; padding: 8px 16px; border-radius: 99px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 900; box-shadow: 0 3px 0 var(--ink), var(--puffy); }
.pr-stop:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pr-stop[hidden] { display: none; }

#countdown { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; font-size: 96px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke; text-shadow: 0 8px 0 var(--ink); pointer-events: none; }
#countdown[hidden] { display: none; }
#countdown.beat { animation: beat .4s ease-out; }
@keyframes beat { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(.95); opacity: 1; } }
/* 時間切れの「営業終了！」 */
#cmd.end b { color: var(--pink); }

/* ===== ゲーム中メニュー =====
   背景はぼかさず薄く（後ろでゲームが動き続けているのを見せる）。開いている間は HUD を背景より上に出し、時間が減るのを見せる */
#menu[hidden] { display: none; }
.menu-bg { position: fixed; inset: 0; z-index: 8; background: rgba(58, 42, 34, .28); animation: fadeIn .12s ease-out; }
body.menu-open #hud { z-index: 10; }
.menu-card { position: fixed; z-index: 11; left: 50%; top: calc(var(--top) + 96px); width: min(88vw, 320px); margin-left: calc(min(88vw, 320px) / -2); padding: 16px; display: flex; flex-direction: column; gap: 10px; border-radius: 22px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), var(--puffy); animation: menuIn .16s ease-out; }
.menu-card::before { content: ''; position: absolute; inset: 6px; border: 2px dashed rgba(58, 42, 34, .16); border-radius: 16px; pointer-events: none; }
#menu.closing .menu-bg, #menu.closing .menu-card { animation: fadeOut .1s ease-in forwards; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-head h2 { margin: 0; font-family: var(--logo-font); font-weight: 400; font-size: 20px; }
.menu-live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-size: 13px; font-weight: 900; white-space: nowrap; }
.menu-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1s steps(2, jump-none) infinite; }
.menu-live b { min-width: 1.4em; text-align: right; }
.menu-note { margin: -4px 0 2px; font-size: 12px; font-weight: 800; opacity: .7; }
.menu-card .big { width: 100%; height: 52px; padding: 0; }
.menu-card .sub { position: relative; overflow: hidden; width: 100%; height: 46px; padding: 0; }
/* 2 回押しの確認中：ピンクの淡い地、下に 2.5 秒で縮むバー */
.menu-card .sub.asking { background: var(--pink-l); border-color: var(--pink-d); color: var(--pink-d); }
.cf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pink); transform-origin: left; transform: scaleX(0); }
.sub.asking .cf-bar { animation: cfbar 2.5s linear forwards; }
@keyframes cfbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.menu-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: 14px; font-weight: 900; }
.menu-row .seg button { min-width: 52px; }
@keyframes menuIn { from { transform: translateY(-8px) scale(.96); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes blink { 50% { opacity: .2; } }

/* ===== 動きを減らす設定：待機中の動き・脈動はなし。スタンプは大きさを変えずに現れて消えるだけ ===== */
@media (prefers-reduced-motion: reduce) {
  .logo, .logo *, .combo span, .moe.near .moe-heart svg, .moe.near .bar i, .menu-live i { animation: none !important; }
  .stamp { animation: rmStamp .8s linear forwards; transform: translate(-50%, -50%) rotate(-4deg); }
  .menu-card { animation: fadeIn .12s; }
  .about-card { animation: fadeIn .12s; }
  .timer.hurry { animation: none; }
}
@keyframes rmStamp { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } }