/* けいさんタイムアタック(公開版) 共通スタイル */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic",sans-serif;
  background:linear-gradient(180deg,#aee7ff 0%,#e8f9ff 40%,#fff9e6 100%);
  color:#334; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  overflow-x:hidden;
}
.wrap { max-width:520px; margin:0 auto; padding:14px 14px 40px; min-height:100%; }
.screen { display:none; animation:fadein .25s; }
.screen.on { display:block; }
@keyframes fadein { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

h1.title { text-align:center; font-size:clamp(22px, 7vw, 30px); color:#ff8c1a; margin:10px 0 2px;
  text-shadow:2px 2px 0 #fff, 3px 3px 0 #ffd27f; letter-spacing:1px; }
.subtitle { text-align:center; font-size:13px; color:#789; margin-bottom:14px; }
.grade { display:inline-block; font-size:12px; font-weight:bold; color:#fff; background:#2980ff;
  border-radius:10px; padding:2px 10px; margin-right:6px; }

.card { background:#fff; border-radius:20px; padding:16px; box-shadow:0 4px 14px rgba(80,120,180,.15); margin-bottom:14px; }
.btn-small { background:#eef3f8; border:none; border-radius:12px; padding:8px 14px; font-size:13px; color:#567; font-family:inherit; cursor:pointer; }
.btn-small:active { background:#dde6ef; }

/* ---- ホーム ---- */
.levelbar { display:flex; align-items:center; gap:10px; }
.levelbar .lv { font-size:15px; font-weight:bold; color:#e67e22; }
.levelbar .lv small { display:block; font-size:12px; font-weight:normal; color:#789; }
.course-btn { display:flex; align-items:center; gap:14px; width:100%; border:none; border-radius:18px;
  padding:16px 18px; margin-bottom:12px; font-family:inherit; text-align:left; color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.15); cursor:pointer; }
.course-btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.course-btn .ic { font-size:34px; }
.course-btn .t1 { font-size:21px; font-weight:bold; word-break:keep-all; line-height:1.3; }
.course-btn .t2 { font-size:12px; opacity:.9; word-break:keep-all; }
.course-btn .pb { margin-left:auto; font-size:12px; background:rgba(255,255,255,.25); border-radius:10px;
  padding:4px 8px; text-align:center; flex-shrink:0; white-space:nowrap; }
.course-btn.gold { color:#4a3000; }
.course-btn.gold .pb { background:rgba(255,255,255,.45); }
/* ---- モードの切りかえ + タイル(九九など、コースが多いページ) ---- */
.segs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.segs button { border:none; border-radius:14px; padding:12px 2px; font-size:15px; font-weight:bold; font-family:inherit;
  background:#e4edf5; color:#678; white-space:nowrap; cursor:pointer; }
.segs button.on { background:#ff8c1a; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.12); }
.group-note { font-size:12px; color:#789; text-align:center; margin-bottom:10px; min-height:16px; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.mini-btn { border:none; border-radius:16px; padding:14px 4px; font-family:inherit; background:#fff; color:#345;
  box-shadow:0 4px 0 #cfdcea; cursor:pointer; }
.mini-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #cfdcea; }
.mini-btn .mi { display:block; font-size:18px; font-weight:bold; white-space:nowrap; }
.mini-btn .mp { display:block; font-size:11px; color:#789; margin-top:4px; }
.pb-table { width:100%; border-collapse:collapse; font-size:13px; }
.pb-table th { color:#678; font-weight:bold; padding:4px 2px; white-space:nowrap; }
.pb-table td { padding:2px; }
.pb-table td button { width:100%; border:none; border-radius:9px; padding:8px 2px; font-family:inherit; font-size:13px;
  background:#eef3f8; color:#9ab; cursor:pointer; }
.pb-table td button.has { background:#fff3e0; color:#e67e22; font-weight:bold; }
.pb-table td button.on { outline:2px solid #2980ff; }
.rec-title { text-align:center; font-size:16px; font-weight:bold; color:#456; margin-bottom:8px; }

.home-links { display:flex; gap:10px; }
.home-links button { flex:1; border:none; border-radius:14px; padding:12px; font-size:15px; font-family:inherit;
  background:#fff; color:#456; box-shadow:0 3px 8px rgba(80,120,180,.12); cursor:pointer; }
.home-links button:active { background:#f0f4f8; }
.howto { font-size:14px; line-height:1.9; color:#456; word-break:keep-all; }
.series-link { text-align:center; margin-top:18px; font-size:13px; }
.series-link a { color:#2980ff; }

/* ---- プレイ ---- */
.play-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.timer { font-size:26px; font-weight:bold; color:#e74c3c; font-variant-numeric:tabular-nums; }
.qnum { font-size:15px; color:#678; }
.pbar { height:10px; background:#dfe9f2; border-radius:5px; overflow:hidden; margin-bottom:10px; }
.pbar > div { height:100%; width:0%; background:linear-gradient(90deg,#ffd54f,#ff9800); border-radius:5px; transition:width .2s; }
.question { text-align:center; font-size:clamp(30px, 11vw, 56px); font-weight:bold; letter-spacing:2px; padding:24px 4px;
  background:#fff; border-radius:20px; box-shadow:0 4px 14px rgba(80,120,180,.15); margin-bottom:10px;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
.question.small { font-size:clamp(22px, 8.5vw, 44px); letter-spacing:1px; }
.question.shake { animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px);} 75%{transform:translateX(10px);} }
.combo { text-align:center; height:26px; font-size:17px; font-weight:bold; color:#ff8c1a; margin-bottom:8px; }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pad button { border:none; border-radius:16px; font-size:32px; font-weight:bold; font-family:inherit;
  padding:16px 0; background:#fff; color:#345; box-shadow:0 4px 0 #c9d6e4; cursor:pointer; }
.pad button:active { transform:translateY(3px); box-shadow:0 1px 0 #c9d6e4; }
.pad button.wide { grid-column:span 2; }
.pad button.wide3 { grid-column:span 3; }
.pad button.del { font-size:20px; background:#ffeaea; color:#c0392b; }
.pad button.ok { font-size:20px; background:#2ecc71; color:#fff; box-shadow:0 4px 0 #1e9e56; }
.pad button.ng { background:#ffd6d6; animation:shake .3s; }
.pad.locked button { opacity:.45; pointer-events:none; }
.quit { text-align:center; margin-top:14px; }
body.final-stretch { background:linear-gradient(180deg,#fff3b0 0%,#ffe082 40%,#ffd54f 100%); transition:background .6s; }

/* ---- カウントダウン ---- */
#countdown { position:fixed; inset:0; background:rgba(20,40,70,.75); display:none;
  align-items:center; justify-content:center; z-index:50; }
#countdown.on { display:flex; }
#cd-num { font-size:110px; font-weight:bold; color:#fff; text-shadow:0 0 30px #ffd54f; animation:pop .9s infinite;
  white-space:nowrap; text-align:center; }
#cd-num.go { font-size:clamp(40px, 16vw, 80px); }
@keyframes pop { 0%{transform:scale(.4); opacity:0;} 30%{transform:scale(1.15); opacity:1;} 100%{transform:scale(1);} }

/* ---- 結果 ---- */
.result-time { text-align:center; font-size:46px; font-weight:bold; color:#e74c3c; margin:4px 0; font-variant-numeric:tabular-nums; }
.medal { text-align:center; font-size:60px; height:70px; }
.stars { text-align:center; font-size:34px; letter-spacing:6px; margin-bottom:4px; min-height:10px; }
.result-sub { text-align:center; font-size:15px; color:#567; margin-bottom:4px; }
.newpb { text-align:center; font-size:18px; font-weight:bold; color:#ff4757; animation:pop2 .6s; min-height:4px; }
@keyframes pop2 { 0%{transform:scale(0);} 60%{transform:scale(1.3);} 100%{transform:scale(1);} }
.self-rank { text-align:center; font-size:18px; font-weight:bold; color:#2980ff; margin:8px 0; min-height:24px; }
.result-btns { display:flex; gap:10px; margin-top:10px; }
.result-btns button { flex:1; border:none; border-radius:14px; padding:14px 4px; font-size:16px; font-weight:bold;
  font-family:inherit; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.15); cursor:pointer; }
.result-btns button:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.b-retry { background:#ff8c1a; } .b-rec { background:#2980ff; } .b-home { background:#95a5a6; }

/* ---- じぶんの きろく ---- */
.back { background:none; border:none; color:#678; font-size:15px; font-family:inherit; padding:6px 0; margin-bottom:6px; cursor:pointer; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.tabs button { border:none; border-radius:12px; padding:9px 2px; font-size:13px; font-weight:bold; font-family:inherit;
  background:#e4edf5; color:#678; white-space:nowrap; cursor:pointer; }
.tabs button.on { background:#ff8c1a; color:#fff; }
.rec-sum { display:flex; justify-content:space-around; text-align:center; margin-bottom:10px; }
.rec-sum b { display:block; font-size:24px; color:#e67e22; }
.rec-sum span { font-size:11px; color:#789; }
.rk-row { display:flex; align-items:center; gap:10px; padding:10px 8px; border-bottom:1px dashed #dde6ef; font-size:17px; }
.rk-row .pos { width:44px; font-weight:bold; font-size:20px; text-align:center; }
.rk-row .nm { flex:1; color:#789; font-size:14px; }
.rk-row .tm { font-weight:bold; color:#e74c3c; font-variant-numeric:tabular-nums; }
.rk-row.new { background:#fff6e0; border-radius:10px; }
.rk-empty { text-align:center; color:#9ab; padding:24px 0; font-size:14px; }
.rec-reset { text-align:center; margin-top:18px; }
.rec-reset button { background:none; border:none; color:#9ab; font-size:12px; font-family:inherit; text-decoration:underline; cursor:pointer; }

/* ---- 紙吹雪 ---- */
.confetti { position:fixed; top:-14px; border-radius:3px; z-index:40; pointer-events:none; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }