/* shell.css — ミニゲーム共通の見た目（画面の土台は shell.js が組む）
   Kenney（UI Pack）の見た目に寄せる：輪郭線なし・フラット・淡い影。ボタンは下に濃い帯（depth）。仕様は docs/設計.md §18.5
   文字（Mochiy Pop One／Rubik／Zen Maru Gothic）と配色の名前は §15 のスタイルガイドのまま */
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Rubik:wght@900&family=Zen+Maru+Gothic:wght@700;900&display=swap');
:root {
  --ink: #2B2140;       /* 文字（こん紫）。輪郭には使わない */
  --cream: #FFF7E8;     /* ベース */
  --bg: #4A90E2;        /* 映像のまわりの余白（Kenney の青） */
  --fg: #ffffff;        /* 映像の上の文字 */
  --sub: #6B6280;       /* カードの中の補足 */
  --accent: #2FA8FF;    /* 強調 */
  --ok: #2BC46B;        /* 成功 */
  --ng: #FF4F64;        /* 失敗 */
  --warn: #FFC833;      /* 注意 */
  --panel: rgba(43, 33, 64, 0.45);   /* 映像の上の数字の帯 */
  --btn: #F7C948;       /* 主ボタン（Kenney UI Pack の黄） */
  --btn-depth: #D9A400; /* ボタンの下の濃い帯 */
  --btn2-depth: #D5D9E0;/* 副ボタン（白）の帯 */
  --card-shadow: 0 6px 0 rgba(43, 33, 64, 0.10);
  --veil: rgba(74, 144, 226, 0.55);   /* 全面の画面の覆い（Kenney の青 #4A90E2 寄り） */
  --on-video: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 0, 0, 0.35);   /* 映像の上の白文字の影（縁取りはしない） */
  --f-head: "Mochiy Pop One", "Hiragino Maru Gothic ProN", sans-serif;
  --f-num: "Rubik", -apple-system, sans-serif;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-weight: 700; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#stage { position: fixed; inset: 0; }
/* 映像と骨格線。鏡にするため左右反転。display:none にはしない（仕様 §2） */
#video, #overlay, #fx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#video, #overlay { transform: scaleX(-1); }
#video.dim { filter: brightness(0.35); }
/* ゲームの絵は反転しないキャンバスに描く（文字や向きのある絵のため）。体の座標は x を 1−x にして写す */
#overlay, #fx { pointer-events: none; }
#fx.full { object-fit: fill; }   /* 画面全体に描くゲーム（キャンバスの大きさを画面に合わせる） */

/* プレイ中の表示。数字は半透明の帯の上 */
#hud { position: absolute; inset: 0; pointer-events: none; }
#status { position: absolute; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top)); text-align: center; }
#timer { display: inline-block; background: var(--panel); border-radius: 16px; padding: 2px 18px;
  font-family: var(--f-num); font-weight: 900; font-size: 40px; font-variant-numeric: tabular-nums; line-height: 1.2;
  text-shadow: var(--on-video); }
/* 残り 3 秒：赤くなり、1 秒ごとに脈打つ（shell.js が beat を付け直す） */
#timer.warn { background: var(--ng); color: #fff; }
#timer.beat { animation: pulse 420ms ease-out; }
@keyframes pulse { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
#score { position: absolute; right: 12px; top: calc(14px + env(safe-area-inset-top)); background: var(--panel);
  border-radius: 16px; padding: 4px 14px; font-family: var(--f-num); font-weight: 900; font-size: 30px;
  color: var(--warn); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
#score.pop { animation: pop 180ms ease-out; }
@keyframes pop { from { transform: scale(1.3); color: var(--ok); } to { transform: scale(1); } }
/* 連続成功の札（点数の下） */
#combo { position: absolute; right: 12px; top: calc(68px + env(safe-area-inset-top));
  background: var(--btn); color: var(--ink); border-radius: 999px; padding: 2px 14px;
  font-family: var(--f-head); font-size: 18px; box-shadow: 0 4px 0 var(--btn-depth); }
#combo.pop { animation: tagpop 260ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tagpop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 中央の大きな一言（お題・○×・ゴール！）。白文字に淡い影（縁取りはしない） */
#big { position: absolute; left: 0; right: 0; top: 24%; text-align: center; padding: 0 12px;
  font-family: var(--f-head); font-weight: 400; font-size: 44px; line-height: 1.25;
  color: #fff; text-shadow: var(--on-video); }
#big.ok { color: var(--ok); } #big.ng { color: var(--ng); }
#big.warn { color: var(--warn); }
#big.ok, #big.ng, #big.warn { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 14px rgba(0, 0, 0, 0.4); }   /* 色の文字は少し濃い影（白い縁は付けない） */
#big.pop { animation: bigpop 220ms ease-out; }
@keyframes bigpop { from { transform: scale(1.25); } to { transform: scale(1); } }
#sub { position: absolute; left: 0; right: 0; top: calc(24% + 64px); text-align: center; padding: 0 12px;
  font-size: 22px; font-weight: 900; text-shadow: var(--on-video); }
#hint-body { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom));
  text-align: center; font-size: 20px; font-weight: 900; text-shadow: var(--on-video); }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#flash.ok { background: var(--ok); animation: flash 400ms ease-out; }
#flash.ng { background: var(--ng); animation: flash 400ms ease-out; }
#flash.go { background: #fff; animation: flashgo 320ms ease-out; }   /* スタートの白い一瞬 */
@keyframes flash { from { opacity: 0.35; } to { opacity: 0; } }
@keyframes flashgo { from { opacity: 0.75; } to { opacity: 0; } }
/* 結果画面の上に重ねる紙吹雪のキャンバス（押せる部品の邪魔をしない） */
#fx-top { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* 全面の画面（開始・カウント・結果）。青い覆いの上に白いカード */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 16px; text-align: center; background: var(--veil); overflow-y: auto; }
.card { width: 100%; max-width: 360px; background: #fff; color: var(--ink);
  border-radius: 24px; box-shadow: var(--card-shadow); padding: 22px 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.screen h1 { margin: 0 0 4px; font-family: var(--f-head); font-weight: 400; font-size: 34px; line-height: 1.2; color: var(--ink); }
.screen p { color: var(--ink); font-size: 16px; line-height: 1.6; margin: 2px 0; }
.screen .note { color: var(--sub); font-size: 13px; }
/* 体の確認中は自分の姿を見せる：背景を薄くし、カードは下に小さく（説明は開始前に読んでいる） */
.screen.clear { background: transparent; }   /* カウントダウン中も場面を見せるゲーム */
.screen.ready { background: rgba(74, 144, 226, 0.12); justify-content: flex-end;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.screen.ready .desc, .screen.ready h1 { display: none; }
.screen.ready .card { background: rgba(255, 255, 255, 0.9); padding: 10px 16px 14px; }
.screen.ready .btn { margin-top: 4px; min-height: 60px; font-size: 22px; }
.screen.ready .maru { margin-top: 10px; }
/* 結果カードの上の「けっか」 */
.pill { margin: -42px 0 4px; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 4px 22px; font-family: var(--f-head); font-size: 18px; box-shadow: 0 4px 0 #1B86D6; }

/* ボタン（Kenney の depth ボタン）：主は黄・高さ 72、副は白・高さ 60。下の濃い帯が押すと 2px に縮む */
.btn { margin-top: 14px; min-height: 72px; padding: 0 40px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-weight: 400; font-size: 26px; color: var(--ink); background: var(--btn);
  border: 0; border-radius: 999px; box-shadow: 0 6px 0 var(--btn-depth); touch-action: manipulation; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--btn-depth); }
.btn:disabled { background: #E6E9EF; color: #A7AFBC; box-shadow: 0 6px 0 #C9CFD9; transform: none; }
a.btn { text-decoration: none; }
.btn.secondary { min-height: 60px; padding: 0 32px; font-size: 20px; background: #fff; box-shadow: 0 6px 0 var(--btn2-depth), 0 0 0 2px #EEF1F5 inset; }
.btn.secondary:active { box-shadow: 0 2px 0 var(--btn2-depth), 0 0 0 2px #EEF1F5 inset; }
/* 🙆 でスタート／もう一回。手を合わせている間は進み具合のバーが伸びる */
.maru { margin-top: 16px; width: 100%; color: var(--ink); font-size: 14px; font-weight: 900; }
.maru.on { color: var(--ok); }
.maru-icon { font-size: 24px; vertical-align: middle; margin-right: 4px; }
.maru-bar { height: 14px; margin: 6px 4px 0; border-radius: 999px; background: #E6EBF2; overflow: hidden; }
.maru-fill { height: 100%; width: 100%; background: var(--ok); transform: scaleX(0); transform-origin: left; }
/* 3・2・1：大きく出て縮む（shell.js が数字ごとに pop を付け直す） */
#count { font-family: var(--f-head); font-size: 160px; line-height: 1; color: #fff; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 24px rgba(0, 0, 0, 0.3); }
#count.pop { animation: countpop 900ms cubic-bezier(.2, .9, .3, 1); }
@keyframes countpop { 0% { transform: scale(2); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(0.85); opacity: 1; } }
#result-score { font-family: var(--f-head); font-size: 44px; line-height: 1.2; margin: 2px 0; color: var(--ink);
  font-variant-numeric: tabular-nums; }
#result-lines { margin: 0; font-size: 17px; }
#result-best:not(:empty) { margin-top: 6px; background: var(--warn); color: var(--ink); border-radius: 999px;
  padding: 2px 14px; font-size: 15px; font-weight: 900; box-shadow: 0 3px 0 var(--btn-depth); }
#result-best.pop { animation: tagpop 320ms cubic-bezier(.2, 1.6, .4, 1); }
/* ランクの札（S 金・A 銀・B 銅・C 紺） */
#rank { width: 72px; height: 72px; margin: 4px 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-num); font-weight: 900; font-size: 44px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  background: #6B7A90; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); }
#rank[data-rank="S"] { background: #F7B500; }
#rank[data-rank="A"] { background: #B8C4CF; }
#rank[data-rank="B"] { background: #D08B5B; }
#rank[data-rank="C"] { background: #6B7A90; }
#rank.pop { animation: rankpop 420ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rankpop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
#message { position: absolute; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
  text-align: center; color: #fff; font-size: 16px; font-weight: 900; pointer-events: none; text-shadow: var(--on-video); }
#debug { position: absolute; left: 12px; bottom: calc(120px + env(safe-area-inset-bottom));
  font: 11px/1.4 ui-monospace, Menlo, monospace; background: rgba(16, 20, 24, 0.78); padding: 6px 8px;
  border-radius: 8px; white-space: pre; pointer-events: none; }
/* 左上の戻るボタン。開始前・プレイ中・結果のどの画面でも押せる（残り時間は中央、点数は右なので左は空いている） */
.back { position: absolute; left: 10px; top: calc(12px + env(safe-area-inset-top)); z-index: 5;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; text-decoration: none;
  font-family: var(--f-head); font-size: 15px; color: var(--ink); background: #fff;
  border-radius: 999px; box-shadow: 0 4px 0 var(--btn2-depth), 0 2px 10px rgba(0, 0, 0, 0.18); touch-action: manipulation; }
.back:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn2-depth); }
[hidden] { display: none !important; }