/* 満点将軍 — Baicizhan-inspired battle UI (no BCZ assets) */
:root {
  --blue: #13a89e;
  --blue-deep: #0f7f78;
  --blue-dark: #0b5f5a;
  --blue-left: #1aa79c;
  --blue-right: #0f7f78;
  --cyan: #ff8a3d;
  --cyan-deep: #e8661a;
  --gold: #8b6cff;
  --gold-deep: #5b3fd6;
  --yellow-btn: #ffe566;
  --orange-txt: #e8890c;
  --orange-deep: #d97706;
  --white: #ffffff;
  --ink: #2c3e50;
  --muted: #8a9aac;
  --line: #e8eef5;
  --ok: #2ecc71;
  --bad: #ff5a5a;
  --font: "Hiragino Sans", "PingFang SC", "Noto Sans JP", "Microsoft YaHei", system-ui, sans-serif;
  --radius: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body.app-body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--blue); min-height: 100%;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 0;
}
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
.hidden { display: none !important; }

/* ----- top bar ----- */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; gap: 8px;
  background: transparent; color: #fff;
}
.app-header.on-white { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.app-header .logo {
  display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; color: inherit;
}
.app-header .logo .mark {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 14px; color: #fff;
}
.app-header.on-white .logo .mark { background: var(--blue); }
.user-chip {
  font-size: 12px; background: rgba(255,255,255,.2); border-radius: 999px;
  padding: 4px 10px; color: #fff; max-width: 110px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.app-header.on-white .user-chip { background: #f0f4f8; color: var(--muted); }
.lang-switch {
  display: inline-flex; gap: 2px; background: rgba(255,255,255,.18);
  border-radius: 999px; padding: 2px;
}
.app-header.on-white .lang-switch { background: #f0f4f8; }
.lang-switch button {
  border: none; background: transparent; padding: 5px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); cursor: pointer;
}
.app-header.on-white .lang-switch button { color: var(--muted); }
.lang-switch button.active { background: #fff; color: var(--blue-deep); }

/* ----- buttons ----- */
.btn-yellow {
  display: flex; align-items: center; justify-content: center; width: 100%;
  border: none; border-radius: 999px; padding: 16px 24px;
  background: linear-gradient(180deg, #ffe97a 0%, var(--yellow-btn) 45%, #ffd000 100%);
  color: var(--orange-txt); font-size: 18px; font-weight: 900;
  box-shadow: 0 4px 0 #e6b800, 0 8px 16px rgba(0,0,0,.12);
  cursor: pointer;
}
.btn-yellow:active { transform: translateY(2px); box-shadow: 0 2px 0 #e6b800; }
.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 14px; padding: 14px 20px;
  background: #fff; color: var(--blue-deep); font-size: 15px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer; flex: 1;
}
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 999px; }

/* ----- views ----- */
.view { display: none; min-height: calc(100vh - 52px); }
.view.active { display: block; }
.view-pad { padding: 12px 14px 28px; max-width: 480px; margin: 0 auto; }

/* ========== HOME / BATTLE HUB (百词斩对战首页) ========== */
.view-battle-home {
  background: linear-gradient(180deg, #1fb5a9 0%, var(--blue) 40%, var(--blue-deep) 100%);
  min-height: 100vh; padding-bottom: 24px;
}
.energy-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 12px; color: #fff;
}
.avatar-sm {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd89b, #ff9a56);
  border: 3px solid var(--gold); display: grid; place-items: center;
  font-size: 20px; position: relative; flex-shrink: 0;
}
.avatar-sm::after {
  content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px #ffb347;
}
.energy-meta { flex: 1; min-width: 0; }
.energy-meta .nm { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.energy-bar {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  background: rgba(0,0,0,.2); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700;
}

.hub-card {
  margin: 8px 14px; background: #fff; border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0,60,55,.18); overflow: visible; position: relative;
}
.season-strip {
  background: #0b5f5a; color: #fff; font-style: italic; font-weight: 800;
  font-size: 13px; padding: 8px 16px; border-radius: 22px 22px 0 0;
  display: flex; justify-content: space-between; align-items: center;
}
.season-trophy {
  position: absolute; right: 18px; top: -8px; font-size: 36px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.hub-body { padding: 20px 16px 22px; text-align: center; }
.stars-row { color: #d0d7e0; font-size: 22px; letter-spacing: 6px; margin-bottom: 6px; }
.stars-row .on { color: var(--gold-deep); }
.rank-badge-wrap {
  position: relative; width: 120px; height: 120px; margin: 8px auto 10px;
}
.rank-burst {
  position: absolute; inset: -10px;
  background: radial-gradient(circle, rgba(139,108,255,.55) 0%, transparent 70%);
  border-radius: 50%;
}
.rank-burst::before, .rank-burst::after {
  content: ''; position: absolute; top: 50%; height: 3px; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(139,108,255,.8));
  border-radius: 2px;
}
.rank-burst::before { left: -28px; }
.rank-burst::after { right: -28px; transform: scaleX(-1); }
.rank-coin {
  position: relative; width: 100px; height: 100px; margin: 10px auto;
  border-radius: 50%;
  background: linear-gradient(160deg, #e8c078, #b8893a 40%, #8b6914);
  border: 5px solid #f5d76e;
  display: grid; place-items: center; font-size: 36px;
  box-shadow: 0 6px 0 #8b6914, inset 0 4px 8px rgba(255,255,255,.35);
  color: #fff; font-weight: 900;
}
.rank-ribbon {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  background: #e74c3c; color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 10px; border-radius: 4px; white-space: nowrap;
}
.rank-name { font-size: 18px; font-weight: 900; color: var(--blue-deep); margin: 8px 0 16px; }
.hub-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 14px 0; padding-bottom: 8px;
}
.hub-tile {
  background: rgba(255,255,255,.22); border-radius: 16px; padding: 14px 6px;
  text-align: center; color: #fff; font-weight: 800; font-size: 12px;
  border: 1px solid rgba(255,255,255,.25); cursor: pointer;
}
.hub-tile .ico { font-size: 28px; display: block; margin-bottom: 4px; }

.more-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px; 
}
.more-links a {
  background: rgba(255,255,255,.15); color: #fff; border-radius: 12px;
  padding: 10px; text-align: center; font-size: 12px; font-weight: 700;
}

/* ========== MATCH ========== */
.view-match, .view-quiz-battle, .view-result-battle {
  background: linear-gradient(90deg, var(--blue-left) 0%, var(--blue-left) 50%, var(--blue-right) 50%, var(--blue-right) 100%);
  min-height: 100vh; position: relative; overflow: hidden;
}
.vs-watermark {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: 160px; font-weight: 900; color: rgba(255,255,255,.08);
  pointer-events: none; letter-spacing: -8px; z-index: 0;
}
.match-center { position: relative; z-index: 1; padding-top: 18vh; text-align: center; }
.match-avs {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 28px;
}
.av-wrap { position: relative; text-align: center; }
.av-ring {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; position: relative; margin: 0 auto;
  background: #fff;
}
.av-ring.cyan {
  box-shadow: 0 0 0 4px var(--cyan), -18px 0 0 -6px rgba(255,138,61,.55),
    -32px 0 0 -10px rgba(255,138,61,.3), -44px 0 0 -14px rgba(255,138,61,.15);
}
.av-ring.gold {
  box-shadow: 0 0 0 4px var(--gold), 18px 0 0 -6px rgba(139,108,255,.55),
    32px 0 0 -10px rgba(139,108,255,.3), 44px 0 0 -14px rgba(139,108,255,.15);
}
.av-face { font-size: 40px; line-height: 1; }
.av-name { color: #fff; font-weight: 800; font-size: 13px; margin-top: 10px; max-width: 110px; }
.vs-badge {
  width: 42px; height: 42px; border-radius: 10px; background: #fff;
  color: var(--blue-deep); font-weight: 900; font-size: 14px;
  display: grid; place-items: center; transform: rotate(0deg);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.match-label {
  font-size: 48px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 4px var(--orange-deep);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.15);
  letter-spacing: 2px;
}

/* ========== BATTLE QUIZ ========== */
.battle-top {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; gap: 8px; padding: 8px 12px 0;
}
.b-player { text-align: center; }
.b-player .av-ring { width: 56px; height: 56px; }
.b-player .av-face { font-size: 26px; }
.b-player.left .av-ring {
  box-shadow: 0 0 0 3px var(--cyan), -12px 0 0 -4px rgba(255,138,61,.5), -22px 0 0 -8px rgba(255,138,61,.25);
}
.b-player.right .av-ring {
  box-shadow: 0 0 0 3px var(--gold), 12px 0 0 -4px rgba(139,108,255,.5), 22px 0 0 -8px rgba(139,108,255,.25);
}
.b-score { font-size: 28px; font-weight: 900; margin-top: 4px; line-height: 1; }
.b-score.cyan { color: var(--cyan); text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.b-score.gold { color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.b-timer {
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 20px; color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255,255,255,.35); margin-top: 4px;
  position: relative;
}
.b-timer svg { position: absolute; inset: -4px; transform: rotate(-90deg); }
.b-timer span { position: relative; z-index: 1; }

.edge-bar {
  position: absolute; top: 100px; bottom: 24px; width: 6px; border-radius: 999px;
  background: rgba(255,255,255,.2); z-index: 2; overflow: hidden;
}
.edge-bar.left { left: 6px; }
.edge-bar.right { right: 6px; }
.edge-bar > i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  border-radius: 999px; transition: height .25s;
}
.edge-bar.left > i { background: linear-gradient(180deg, var(--cyan), var(--cyan-deep)); }
.edge-bar.right > i { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }

.q-area { position: relative; z-index: 2; padding: 28px 28px 16px; text-align: center; }
.q-word {
  color: #fff; font-size: clamp(36px, 10vw, 48px); font-weight: 900;
  margin: 12px 0 24px; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.choices { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 24px; position: relative; z-index: 2; }
.choice {
  background: #fff; border: none; border-radius: 14px; padding: 16px 18px;
  font-size: 17px; font-weight: 700; color: var(--ink); text-align: left;
  cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.08); position: relative;
  display: flex; align-items: center; gap: 10px;
}
.choice:active { transform: translateY(1px); }
.choice.correct {
  background: #0b5f5a; color: #fff;
}
.choice.correct::before { content: '✓'; font-size: 18px; font-weight: 900; }
.choice.wrong {
  background: #ff6b6b; color: #fff;
}
.choice.wrong::before { content: '✗'; font-size: 18px; font-weight: 900; }
.choice:disabled { pointer-events: none; }

/* practice quiz (non-battle) — still blue-ish game feel */
.view-quiz-practice {
  background: #f6f3ea; min-height: 100vh;
}
.prac-card {
  background: #fff; margin: 12px 14px; border-radius: 20px; padding: 28px 16px;
  box-shadow: 0 4px 16px rgba(0,60,55,.08); text-align: center;
}
.prac-card .qtext { font-size: clamp(28px, 8vw, 40px); font-weight: 900; color: var(--ink); }
.prac-top {
  display: flex; justify-content: space-between; padding: 8px 16px; font-weight: 800;
  color: var(--muted); font-size: 13px;
}
.prac-bar { height: 6px; background: #e0e7ef; margin: 0 16px 8px; border-radius: 999px; overflow: hidden; }
.prac-bar > i { display: block; height: 100%; background: var(--blue); width: 0; transition: width .2s; }
.answer-row { display: flex; gap: 8px; padding: 0 16px; }
.answer-row input {
  flex: 1; font-size: 22px; font-weight: 800; text-align: center;
  padding: 14px; border-radius: 14px; border: 2px solid #d0dae6; outline: none;
}
.answer-row input:focus { border-color: var(--blue); }
.feedback { text-align: center; font-weight: 900; font-size: 22px; min-height: 32px; margin: 10px; }
.feedback.ok { color: var(--ok); }
.feedback.bad { color: var(--bad); }

/* ========== RESULT ========== */
.result-top {
  position: relative; z-index: 2; padding: 20px 12px 8px; text-align: center;
}
.result-avs {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
}
.result-avs .av-ring { width: 72px; height: 72px; margin: 0 auto; }
.result-avs .av-face { font-size: 34px; }
.result-avs .av-ring.cyan { position: relative; }
.result-avs .crown {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.win-label {
  font-size: 28px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 3px #e74c3c; paint-order: stroke fill;
  margin: 0 4px;
}
.r-score { font-size: 36px; font-weight: 900; margin-top: 4px; }
.r-name { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; margin-top: 4px; }

.result-list {
  position: relative; z-index: 2;
  margin: 14px 16px; background: rgba(255,255,255,.18);
  border-radius: 16px; padding: 10px 12px; max-height: 38vh; overflow: auto;
  backdrop-filter: blur(4px);
}
.result-list .row {
  display: grid; grid-template-columns: 24px 1fr 24px; gap: 8px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 14px; font-weight: 600;
}
.result-list .row:last-child { border-bottom: none; }
.result-list .mark { text-align: center; font-weight: 900; }
.result-actions {
  position: relative; z-index: 2;
  display: flex; gap: 10px; padding: 8px 16px 20px;
}
.gain-pill {
  display: inline-block; background: #2ecc71; color: #fff; font-size: 12px; font-weight: 800;
  padding: 4px 12px; border-radius: 999px; margin: 0 auto 8px;
}

/* ========== REWARD MODAL ========== */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-bg.show { display: flex; }
.reward-modal {
  background: #13a89e; border-radius: 20px; padding: 28px 18px 22px;
  width: 100%; max-width: 320px; text-align: center; position: relative;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.reward-modal .trophy { font-size: 56px; margin-top: -48px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.reward-modal .winner-ribbon {
  display: inline-block; background: #e74c3c; color: #fff; font-weight: 900;
  font-size: 12px; padding: 3px 16px; border-radius: 4px; letter-spacing: 1px;
  transform: translateY(-8px);
}
.reward-modal h3 { color: #fff; margin: 4px 0 14px; font-size: 20px; }
.reward-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.reward-card {
  background: #fff; border-radius: 14px; padding: 14px 8px;
}
.reward-card .ico { font-size: 36px; }
.reward-card .lab { font-size: 12px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.reward-card .qty { font-size: 12px; color: var(--muted); font-weight: 700; }
.confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px;
}
.confetti i {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: fall 2s linear infinite;
}
@keyframes fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(220px) rotate(200deg); opacity: 0; }
}

/* ========== LEADERBOARD ========== */
.view-rank {
  background: var(--blue); min-height: 100vh; padding-bottom: 72px;
}
.rank-hero {
  padding: 8px 12px 0; text-align: center; color: #fff; position: relative;
  min-height: 200px;
}
.rank-hero .confetti-static {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 30%, #ff6b6b 2px, transparent 3px),
    radial-gradient(circle at 80% 20%, #ffe566 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, #2ecc71 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #ff9f43 2px, transparent 3px),
    radial-gradient(circle at 50% 10%, #fff 2px, transparent 3px);
}
.podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px;
  padding: 20px 8px 0; position: relative; z-index: 1;
}
.pod {
  text-align: center; color: #fff;
}
.pod .av {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 6px;
  background: #fff; border: 3px solid #fff; display: grid; place-items: center;
  font-size: 26px; position: relative;
}
.pod.first .av { width: 72px; height: 72px; font-size: 34px; border-color: var(--gold); }
.pod .medal {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gold); font-size: 11px; font-weight: 900;
  display: grid; place-items: center; color: #fff; border: 2px solid #fff;
}
.pod.second .medal { background: #b0b8c4; }
.pod.third .medal { background: #cd7f32; }
.pod .nm { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; margin: 0 auto; }
.pod .sc { font-size: 13px; font-weight: 900; color: var(--gold); margin-top: 2px; }

.rank-sheet {
  background: #fff; border-radius: 22px 22px 0 0; margin-top: 12px;
  padding: 8px 0 80px; min-height: 50vh;
}
.rank-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid #f0f3f7;
}
.rank-row .num { width: 28px; text-align: center; font-weight: 800; color: var(--muted); font-size: 14px; }
.rank-row .av {
  width: 36px; height: 36px; border-radius: 50%; background: #eef3f9;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.rank-row .nm { flex: 1; font-weight: 700; font-size: 14px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .sc { font-weight: 900; color: var(--gold-deep); font-size: 14px; }
.rank-row .sc::before { content: '★ '; color: var(--gold); font-size: 12px; }
.tag { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.tag-demo { background: #eee; color: #999; }
.tag-you { background: var(--blue); color: #fff; }

.rank-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--blue-dark); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.rank-bottom .me {
  display: flex; align-items: center; gap: 8px; color: #fff; flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700;
}
.rank-bottom .me .av {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 18px;
}
.rank-bottom .btn-start {
  background: #fff; color: var(--blue-deep); border: none; border-radius: 12px;
  padding: 12px 18px; font-weight: 900; font-size: 14px; cursor: pointer; white-space: nowrap;
}

.search-bar {
  display: flex; gap: 8px; padding: 10px 14px; background: #fff;
}
.search-bar input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; outline: none;
}
.search-bar button {
  background: var(--blue); color: #fff; border: none; border-radius: 10px;
  padding: 0 14px; font-weight: 800; cursor: pointer;
}

/* ========== WRONG BOOK ========== */
.view-wrong, .view-parent, .view-practice, .view-grades, .view-trial, .view-home-misc {
  background: #f6f3ea; min-height: 100vh;
}
.page-title {
  background: #fff; padding: 14px 16px; font-size: 17px; font-weight: 900;
  text-align: center; border-bottom: 1px solid var(--line); position: relative;
}
.page-title .back {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-size: 22px; font-weight: 400; line-height: 1;
}
.wrong-summary {
  background: #f0f3f7; padding: 10px 16px; font-size: 13px; color: var(--muted);
  font-weight: 700; display: flex; justify-content: space-between;
}
.date-banner {
  background: #f0f3f7; padding: 8px 16px; font-size: 12px; color: var(--muted); font-weight: 700;
}
.wrong-item {
  background: #fff; padding: 14px 16px; border-bottom: 1px solid #f0f3f7;
  display: flex; align-items: center; gap: 10px;
}
.wrong-item .main { flex: 1; min-width: 0; }
.wrong-item .q { font-weight: 800; font-size: 16px; }
.wrong-item .a { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wrong-item .go {
  color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* ========== PRACTICE PICK / TRIAL / PARENT ========== */
.card-white {
  background: #fff; margin: 12px 14px; border-radius: 16px; padding: 16px;
  box-shadow: 0 2px 10px rgba(0,60,55,.06);
}
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.pick-card {
  background: #fffaf0; border: 2px solid #e0e7ef; border-radius: 16px;
  padding: 22px 10px; text-align: center; font-weight: 900; font-size: 18px;
  color: var(--blue-deep); cursor: pointer;
}
.pick-card.selected, .pick-card:hover { border-color: var(--blue); background: #e3f5f2; }
.grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-card {
  background: #fff; border: 2px solid #e0e7ef; border-radius: 16px;
  padding: 18px 8px; text-align: center; cursor: pointer;
}
.grade-card .g { font-size: 28px; font-weight: 900; color: var(--blue); }
.grade-card .l { font-size: 12px; font-weight: 700; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stat-box {
  background: #e3f5f2; border-radius: 12px; padding: 12px 6px; text-align: center;
}
.stat-box .lab { font-size: 11px; color: var(--muted); }
.stat-box .val { font-weight: 900; font-size: 15px; word-break: break-all; }
.tip-box {
  background: #fff8e0; border-left: 4px solid var(--orange-txt);
  padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 10px 0;
}
.input-line { display: flex; gap: 8px; }
.input-line input {
  flex: 1; padding: 12px; border-radius: 12px; border: 2px solid #e0e7ef;
  font-size: 15px; outline: none;
}
.line-note {
  background: #fff8e0; border-radius: 12px; padding: 14px; margin-top: 12px;
  font-size: 13px;
}
.muted { color: var(--muted); font-size: 13px; }
.list-plain .row {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid #f0f3f7; font-size: 13px;
}

/* bottom nav for white pages */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 700; color: var(--muted); padding: 6px 2px;
}
.bottom-nav a.active { color: var(--blue-deep); }
.bottom-nav .ico { font-size: 18px; }
.toast {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: rgba(20,40,80,.88); color: #fff; padding: 14px 22px;
  border-radius: 12px; font-weight: 800; font-size: 15px; z-index: 200;
  display: none;
}
.toast.show { display: block; }

/* ===== 満点将軍 own brand overrides ===== */
:root{ --cream:#fffaf0; --orange:#ff8a3d; --orange-dark:#d9631a; --purple:#7b5cff; --purple-dark:#5536d6; --green:#22b573; --red:#ef4b4b; }
.btn-yellow{ background:var(--orange)!important; color:#fff!important; border-radius:12px!important;
  box-shadow:0 5px 0 var(--orange-dark), 0 8px 14px rgba(0,0,0,.12)!important; font-weight:900; letter-spacing:.04em; }
.btn-yellow:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--orange-dark)!important; }
.btn-white{ background:var(--cream); color:var(--blue-deep); border-radius:12px; box-shadow:0 4px 0 #d9cdb4; }
.season-strip{ background:var(--blue-deep); font-style:normal; letter-spacing:.06em; }
.hub-card{ background:var(--cream); }
.rank-name{ color:var(--blue-deep); }
.stars-row .on{ color:var(--orange); }
.hub-tile{ background:var(--cream); color:var(--ink); border:none; box-shadow:0 4px 0 #d9cdb4; }
.hub-tile .ico{ width:48px;height:48px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-size:24px;background:#ffe3cf; }
.hub-tile:nth-child(2) .ico{ background:#e6defd; } .hub-tile:nth-child(3) .ico{ background:#d6f2e5; }
.more-links a{ background:rgba(255,250,240,.2); }
.avatar-sm{ border-color:var(--orange); background:linear-gradient(135deg,#ffe3cf,#ffb27a); }
.avatar-sm::after{ border-color:var(--orange); box-shadow:inset 0 0 0 3px #ffb27a; }
.vs-badge{ background:var(--cream); color:var(--blue-deep); border-radius:12px; clip-path:none; transform:rotate(45deg); }
.match-label{ -webkit-text-stroke:4px var(--purple-dark); }
.choices{ padding:0 26px 24px; }
.choice{ background:var(--cream); justify-content:center; text-align:center; font-size:22px; font-weight:900;
  border:3px solid transparent; border-radius:12px; box-shadow:0 4px 0 #d9cdb4; padding:14px; }
.choice:active, .choice:focus-visible{ border-color:var(--blue-deep); outline:none; }
.choice.correct{ background:var(--green); color:#fff; border-color:#178a56; }
.choice.wrong{ background:var(--red); color:#fff; border-color:#b83232; }
.choice.correct::before, .choice.wrong::before{ margin-right:6px; }
.b-timer{ border-radius:14px; background:var(--orange); color:#fff; box-shadow:0 4px 0 var(--orange-dark); width:52px;height:52px; }
.edge-bar{ width:10px; top:110px; bottom:40px; background:rgba(0,0,0,.22); border:2px solid rgba(255,255,255,.55); }
.edge-bar.left{ left:4px; } .edge-bar.right{ right:4px; }
.edge-bar.left > i{ background:var(--orange); } .edge-bar.right > i{ background:var(--purple); }
.edge-bar > i{ min-height:6px; }
.b-score.cyan{ color:#ffb27a; } .b-score.gold{ color:#cbbcff; }
.win-label{ color:var(--cream); -webkit-text-stroke:3px var(--orange-dark); }
.result-list{ background:rgba(255,250,240,.16); }
.gain-pill{ background:var(--orange); }
.reward-modal{ background:var(--cream); }
.reward-modal h3{ color:var(--blue-deep); }
.reward-modal .winner-ribbon{ background:var(--blue-deep); }
.reward-card{ background:#fff; border:2px solid #f1e6cf; }
.rank-row .sc{ color:var(--orange-dark); } .rank-row .sc::before{ color:var(--orange); }
.pod .sc{ color:#ffe3cf; } .pod.first .av{ border-color:var(--orange); } .pod .medal{ background:var(--orange); }
.rank-bottom .btn-start{ background:var(--orange); color:#fff; box-shadow:0 4px 0 var(--orange-dark); border-radius:12px; }
.search-bar button{ background:var(--blue-deep); }
.tag-you{ background:var(--orange); }
.lang-switch button.active{ color:var(--blue-deep); }
.pick-card{ background:var(--cream); color:var(--blue-deep); border-color:#eadfc8; }
.pick-card.selected{ border-color:var(--blue); background:#e3f5f2; }
.card-white{ background:var(--cream); }
.bottom-nav a.active{ color:var(--blue-deep); }


/* result action buttons — always readable on battle gradient */
.view-result-battle .result-actions { padding-bottom: 28px; }
.view-result-battle .btn-result,
.view-result-battle .btn-white {
  background: #fffaf0 !important;
  color: #0f7f78 !important;
  border: 2px solid #fff;
  font-size: 15px;
  font-weight: 900;
  min-height: 48px;
  box-shadow: 0 4px 0 #d9cdb4;
}
.view-result-battle .card-white {
  color: var(--ink);
}
.view-result-battle .card-white .muted { color: var(--muted); }
.view-grades .grade-card:active { transform: scale(0.97); }

/* ===== v2: avatars, grade list, login, hub ===== */
.av-svg { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.av-svg svg, .ap svg, .pod .av svg, .rank-row .av svg, .rank-bottom .me .av svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.av-ring .av-svg { width: calc(100% - 6px); height: calc(100% - 6px); }
.avatar-sm .av-svg { width: 100%; height: 100%; }
.avatar-sm::after { display: none; }
.pod .av, .rank-row .av, .rank-bottom .me .av { overflow: visible; padding: 0; }
.pod .av svg { border-radius: 50%; }
.av-md { width: 52px; height: 52px; flex: none; }
.view-hub { background: #fffaf0; padding: 14px 14px 96px; max-width: 520px; margin: 0 auto; }
.grade-rows { display: grid; gap: 10px; margin-top: 12px; }
.grade-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: #f6fbfa; border: 1px solid #dcefec; }
.g-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 900; font-size: 22px; display: grid; place-items: center; }
.g-info strong { display: block; font-size: 16px; }
.g-info span { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.g-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-test, .btn-learn { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 900; font-size: 15px; }
.btn-test { background: #fff; color: var(--blue-deep); border: 2px solid var(--blue); }
.btn-learn { background: #ff8a3d; color: #fff; box-shadow: 0 4px 0 #d9631a; }
.field-lab { display: block; font-weight: 800; font-size: 14px; margin: 14px 0 6px; }
.field { width: 100%; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); outline: none; }
.field:focus { border-color: var(--blue); }
.grade-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grade-pick .gp { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 2px; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--ink); }
.grade-pick .gp.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.avatar-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.avatar-pick .ap { border: 3px solid transparent; border-radius: 50%; padding: 0; background: none; aspect-ratio: 1; cursor: pointer; }
.avatar-pick .ap.on { border-color: #ff8a3d; box-shadow: 0 0 0 2px #fff inset; }
.form-err { color: var(--bad); font-weight: 800; font-size: 13px; min-height: 18px; margin: 10px 0 4px; }
.device-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; text-align: center; }
.resume-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; }
.resume-name { font-weight: 800; font-size: 16px; }
.btn-link { background: none; border: none; color: var(--blue-deep); font-weight: 800; margin-top: 10px; width: 100%; cursor: pointer; font-size: 14px; }
.hub-hello { display: flex; align-items: center; gap: 12px; margin: 4px 2px 16px; }
.hub-who .nm { font-weight: 900; font-size: 18px; }
.hub-who .gr { display: inline-block; background: var(--blue); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 2px 10px; }
.hub-start { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 210px; border-radius: 28px; color: #fff; padding: 20px;
  background: radial-gradient(circle at 30% 20%, #ffb27a, #ff8a3d 55%, #f06c1e);
  box-shadow: 0 9px 0 #d9631a, 0 16px 30px rgba(240,108,30,.28); }
.hub-start:active { transform: translateY(4px); box-shadow: 0 5px 0 #d9631a; }
.hs-ico { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 32px; padding-left: 6px; margin-bottom: 10px; }
.hs-t { font-size: 30px; font-weight: 900; line-height: 1.2; }
.hs-s { font-size: 13px; font-weight: 700; opacity: .95; margin-top: 4px; }
.hub-count { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 14px; font-size: 13px; color: var(--muted); font-weight: 700; }
.hub-count .cnt { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 800; cursor: pointer; color: var(--ink); }
.hub-count .cnt.on { border-color: var(--blue); color: var(--blue-deep); }
.hub-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h3-tile { background: #fff; border: 1px solid #e3ecea; border-radius: 18px; padding: 14px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 0 #e3ecea; }
.h3-tile .ico { font-size: 28px; }
.h3-tile strong { font-size: 14px; color: var(--blue-deep); }
.h3-tile small { font-size: 11px; color: var(--muted); }
.hub-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 20px; }
.hub-links a, .hub-links button { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px; }
.hub-grade-pick { margin-top: 10px; }
.battle-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; text-align: center; }
.signup-hint { margin-top: 14px; padding: 12px; border-radius: 12px; background: #fff3e8; text-align: center; }
.signup-hint p { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.signup-hint .btn-yellow { display: block; text-align: center; }
.rank-note { padding: 0 16px; font-size: 11px; }
.user-chip { text-decoration: none; }
/* ---- v3 ---- */
.grade-tap { grid-template-columns: 44px 1fr auto; color: inherit; cursor: pointer; }
.grade-tap:active { transform: scale(.98); }
.g-go { font-weight: 900; color: #fff; background: #ff8a3d; border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 #d9631a; }
.hub-stats { margin-top: 20px; background: #fff; border: 1px solid #e3ecea; border-radius: 18px; padding: 14px; }
.hub-sec-t { font-size: 15px; margin: 0 0 10px; color: var(--blue-deep); }
.hub-sec-t + .hist-list { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-grid .sg { background: #e6f7f5; border-radius: 12px; padding: 8px 4px; text-align: center; }
.stat-grid .lab { font-size: 11px; color: var(--muted); font-weight: 700; }
.stat-grid .val { font-size: 17px; font-weight: 900; color: var(--ink); }
.stat-note { font-size: 11px; color: var(--muted); margin: 8px 0 16px; }
.hist-row { display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 0.8fr 0.9fr; gap: 4px; font-size: 12px; padding: 8px 2px; border-bottom: 1px solid #f0f3f7; align-items: center; }
.hist-head { font-weight: 800; color: var(--muted); font-size: 11px; }
.hist-row .hs-num { font-weight: 900; color: #d9631a; }
.hist-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 14px 4px; margin: 0; }
.line-box { margin-top: 16px; border: 2px solid #06c755; border-radius: 16px; padding: 14px; background: #f3fff7; }
.line-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.line-head strong { font-size: 15px; }
.soon { background: #ff8a3d; color: #fff; font-size: 12px; font-weight: 900; border-radius: 999px; padding: 2px 10px; }
.line-desc { font-size: 12px; margin: 6px 0 10px; }
.tg { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; padding: 8px 0; border-top: 1px solid #dcefe4; }
.tg input { width: 20px; height: 20px; accent-color: var(--blue); }
.tg-time { justify-content: space-between; }
.tg-time select { font-size: 15px; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: #fff; }
.line-box .btn-yellow { margin-top: 10px; }
.line-saved { font-size: 12px; color: var(--blue-deep); font-weight: 800; min-height: 16px; margin: 8px 0 0; text-align: center; }
.line-honest { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

/* ---- v4: keypad, levels, level test, legal ---- */
.view-quiz-practice { display: none; }
.view-quiz-practice.active { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); }
.view-quiz-practice .prac-card { margin-bottom: 10px; }
.answer-show { padding: 0 16px; }
.answer-show input {
  width: 100%; height: 64px; border: 3px solid var(--blue); border-radius: 14px; background: #fff;
  font-size: 34px; font-weight: 900; text-align: center; color: var(--ink); font-family: var(--font);
  caret-color: transparent; pointer-events: none; outline: none;
}
.view-quiz-practice .feedback { min-height: 30px; margin: 6px 10px; font-size: 20px; }
.keypad {
  margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: #eef6f5; border-top: 1px solid var(--line);
}
.keypad button {
  min-height: 58px; border: none; border-radius: 12px; background: #fff; color: var(--ink);
  font: 900 26px/1 var(--font); box-shadow: 0 3px 0 #c9d8d6; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.keypad button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9d8d6; }
.keypad .kp-fn { background: #dfeceb; font-size: 24px; }
.keypad .kp-x { color: var(--blue-deep); }
.keypad .kp-x.off { visibility: hidden; }
/* kp-enter layout set below with keypad grid placement */

.hub-level { margin: 16px 0 14px; padding: 14px; border-radius: 14px; background: #fff; border: 2px solid var(--line); }
.hl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hl-top strong { font-size: 15px; color: var(--blue-deep); }
.hl-prog { flex: none; font-size: 13px; font-weight: 900; color: #fff; background: var(--orange); border-radius: 999px; padding: 3px 10px; }
.hl-prog:empty { display: none; }
.hl-steps { display: flex; gap: 4px; margin: 10px 0 6px; }
.hl-steps i { flex: 1; height: 22px; border-radius: 6px; background: #e8eef5; color: #9aaabb; font: 800 11px/22px var(--font); text-align: center; font-style: normal; }
.hl-steps i.done { background: var(--blue); color: #fff; }
.hl-steps i.cur { background: var(--orange); color: #fff; }
.hl-rule { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.lv-out { margin-top: 12px; padding: 12px; border-radius: 12px; background: #f1f8f7; text-align: center; }
.lv-out .lv-name { font-size: 13px; color: var(--muted); font-weight: 800; }
.lv-out .lv-msg { margin-top: 4px; font-weight: 900; font-size: 16px; color: var(--ink); line-height: 1.5; }
.lv-out .lv-msg.ok { color: var(--blue-deep); }
.lv-out .lv-msg.up { color: var(--orange-dark); }

.lt-card { text-align: center; }
.lt-card .lt-ico { font-size: 48px; }
.lt-card p { line-height: 1.7; }
.lt-line { font-size: 22px; font-weight: 900; color: var(--blue-deep); margin: 8px 0 14px; }
.lt-note { font-size: 12px; color: var(--muted); background: #f6f8fa; border-radius: 10px; padding: 8px 10px; }
.lt-warn { font-size: 14px; font-weight: 800; color: #9a3412; background: #ffedd5; border: 2px solid #fb923c; border-radius: 12px; padding: 12px 14px; line-height: 1.6; text-align: left; }
.lt-card .btn-yellow { display: block; text-decoration: none; margin-top: 12px; }
.lt-card .btn-link { display: block; text-decoration: none; }

.consent { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 4px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.consent input { width: 20px; height: 20px; flex: none; accent-color: var(--blue); margin-top: 1px; }
.consent-links { margin: 0 0 4px 28px; font-size: 12px; }
.consent-links a, .legal-links a { color: var(--blue-deep); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 18px 12px 24px; font-size: 12px; }
.stat-lt { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff4ea; color: var(--orange-dark); font-weight: 800; font-size: 13px; }
[hidden] { display: none !important; }
.guide { margin: 0 0 14px; }
.guide h3 { font-size: 16px; margin: 0 0 8px; color: var(--blue-deep); line-height: 1.5; }
.guide h4 { font-size: 14px; margin: 16px 0 6px; }
.guide p, .guide li { font-size: 13px; line-height: 1.8; color: var(--ink); }
.guide ul { padding-left: 18px; margin: 0; }
.guide .guide-end { background: #fff4ea; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.prac-card { position: relative; }
.q-count {
  position: absolute; top: 8px; right: 10px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--bad); color: #fff; font: 900 26px/46px var(--font); text-align: center;
  box-shadow: 0 0 0 4px rgba(255,90,90,.25); animation: qpulse 1s ease-in-out infinite;
}
@keyframes qpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.keypad .kp-del { grid-column: 4; grid-row: 1; }
.keypad .kp-enter {
  grid-column: 4; grid-row: 2 / span 2;
  background: var(--orange); color: #fff; font-size: 22px; letter-spacing: .06em;
  box-shadow: 0 4px 0 var(--orange-dark);
}
.keypad .kp-enter:active { box-shadow: 0 1px 0 var(--orange-dark); transform: translateY(2px); }
.keypad .kp-sym { color: var(--blue-deep); }
.keypad button[data-k="1"] { grid-column: 1; grid-row: 3; }
.keypad button[data-k="2"] { grid-column: 2; grid-row: 3; }
.keypad button[data-k="3"] { grid-column: 3; grid-row: 3; }
.keypad button[data-k="-"] { grid-column: 1; grid-row: 4; }
.keypad button[data-k="0"] { grid-column: 2; grid-row: 4; }
.keypad button[data-k="."] { grid-column: 3; grid-row: 4; }
.keypad button[data-k="/"] { grid-column: 4; grid-row: 4; }
.seg { display: flex; background: #eef3f6; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.seg button { flex: 1; border: none; background: none; padding: 9px 6px; border-radius: 9px; font: 800 13px var(--font); color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--blue-deep); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mini-box { margin: 14px 0 0; padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; }
.mini-box .muted { font-size: 12px; margin: 6px 0 0; line-height: 1.6; }
.sent-box { margin-top: 12px; padding: 12px; background: #f1f8f7; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.sent-box .input-line { display: flex; gap: 8px; }
.kid-list { display: flex; flex-direction: column; gap: 8px; }
.kid-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: 700 14px var(--font); cursor: pointer; text-align: left; }
.kid-row.on { border-color: var(--blue); }
.kid-row .kid-nm { flex: 1; }
.kid-row .kid-gr { color: var(--muted); font-size: 12px; }
.av-sm { width: 36px; height: 36px; display: inline-block; }
.rank-empty { color: #fff; text-align: center; padding: 30px 10px; font-weight: 700; }
.rank-login { text-align: center; padding: 10px 16px; }
.rank-row.me { background: #fff4ea; }

/* ---- v4b: daily routine, where you stand, Beat your best ---- */
.btn-orange{display:block;width:100%;border:none;border-radius:14px;background:var(--orange,#ff8a3d);color:#fff;font-weight:900;font-size:17px;padding:14px;box-shadow:0 4px 0 #d9661a;cursor:pointer;text-align:center;text-decoration:none}
.btn-orange:active{transform:translateY(2px);box-shadow:0 2px 0 #d9661a}
.hub-daily{background:#fff;border-radius:16px;padding:12px 14px;margin:10px 0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hub-daily .hd-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.hub-daily .hd-top span{color:var(--blue-deep);font-weight:800;white-space:nowrap}
.hd-dots{display:flex;gap:6px;margin:8px 0 4px}
.hd-dots i{flex:1;height:10px;border-radius:6px;background:#e8eef5}
.hd-dots i.goal{outline:2px dashed #ffc59b;outline-offset:1px}
.hd-dots i.done{background:var(--blue)}
.hd-msg{margin:4px 0 0;font-size:13px;color:#5a6b7d}
.hub-daily.locked{background:#fff6ec}
.hub-daily.locked .hd-msg{color:#d9661a;font-weight:800}
.hub-start.locked{filter:grayscale(.7);opacity:.6;pointer-events:none}
.self-card{background:#fff;color:var(--ink);border-radius:18px;margin:14px 16px 24px;padding:16px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.sc-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.sc-head .sc-ico{font-size:28px}
.sc-head strong{display:block;font-size:17px}
.sc-head small{display:block;color:#6b7c8e;font-size:12px}
.sc-level{font-size:13px;color:var(--blue-deep);font-weight:700;margin-bottom:8px}
.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.sc-stats div{background:#f3f8f8;border-radius:12px;padding:8px 10px;font-size:12px;color:#6b7c8e}
.sc-stats b{display:block;font-size:18px;color:var(--ink)}
.sc-hist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:4px}
.sc-hist span{font-size:12px;border-radius:10px;padding:3px 8px;background:#eef3f7}
.sc-hist span.pb{background:#fff1d6;color:#b36200;font-weight:800}
.sc-hist span.ng{color:#99a5b3}
.sc-rule{font-size:12px;color:#6b7c8e;margin:8px 0 0;line-height:1.5}
.self-strip{margin:6px 16px 0;background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ss-ghost{display:flex;align-items:center;gap:8px}
.ss-lab{font-size:11px;color:#6b7c8e;white-space:nowrap}
.ss-bar{position:relative;flex:1;height:12px;background:#eef3f7;border-radius:8px}
.ss-bar i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,#c9b8ff,#c9b8ff 6px,#ddd2ff 6px,#ddd2ff 12px);border-radius:8px;width:0}
.ss-bar b{position:absolute;top:-3px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--orange,#ff8a3d);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);left:0;transition:left .2s}
.self-strip.no-pb .ss-ghost{display:none}
.ss-times{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-variant-numeric:tabular-nums}
.ss-now{font-size:22px;font-weight:900;color:var(--ink)}
.ss-pb{font-size:13px;color:#6b5bd6;font-weight:700}
.ss-delta{margin-left:auto;font-size:16px;font-weight:900}
.ahead{color:#16a34a!important}.behind{color:#e11d48!important}
.self-res{text-align:center}
.sr-badge{font-size:20px;font-weight:900;margin:4px 0 6px}
.sr-badge.pb{color:#b36200}.sr-badge.ok{color:var(--blue-deep)}.sr-badge.ng{color:#d9661a;font-size:17px}
.sr-msg{font-size:14px;color:#5a6b7d;margin:0 0 10px}
.sr-h{text-align:left;font-size:14px;margin:14px 0 6px}
.sr-chart{text-align:left;font-size:12px;margin-bottom:14px;font-variant-numeric:tabular-nums}
.spl-row{display:grid;grid-template-columns:22px 1fr 56px 52px;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid #f0f3f6}
.spl-head{color:#6b7c8e;font-size:11px}
.spl-bars{position:relative;height:16px}
.spl-bars i{position:absolute;left:0;height:6px;border-radius:4px}
.spl-bars i.me{top:2px;background:var(--orange,#ff8a3d)}
.spl-bars i.pb{top:9px;background:#b9a8ff}
.spl-bars em{position:absolute;right:0;top:0;font-style:normal;font-size:10px;color:#6b7c8e}
.stand-card{background:#fff;color:var(--ink);border-radius:18px;padding:18px 16px;margin:0 16px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.12);width:100%}
.stand-card .st-lab{font-size:13px;color:#6b7c8e}
.stand-card .st-val{font-size:26px;font-weight:900;color:var(--blue-deep);margin:6px 0}
.stand-card .st-sub{font-size:12px;color:#6b7c8e;line-height:1.5}
.lt-pct{display:flex;flex-direction:column;align-items:center;gap:2px;background:#f3f8f8;border-radius:12px;padding:8px;margin:6px 0 10px}
.lt-pct span{font-size:12px;color:#6b7c8e}.lt-pct strong{font-size:18px;color:var(--blue-deep)}
.hide-box{margin:14px 0;padding:10px 12px;background:#f7f9fb;border-radius:12px}
.hide-box .muted{font-size:12px;margin:4px 0 0}
.row-sub{font-size:11px;color:#8a9aac;padding:0 0 6px}
#podium{display:block;padding:20px 0 4px}
.stand-card{width:auto}
.view-parent,.view-hub,.view-battle-home,.view-wrong{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
#pSelf .row{flex-wrap:wrap;gap:2px 8px}#pSelf .row strong{margin-left:auto}.ss-delta.even{color:#5a6b7d}

/* v4c battle race bars: one row per player, thick and labelled (replaces the thin edge bars) */
.race{position:relative;z-index:2;margin:12px 14px 0;padding:10px 12px 8px;background:rgba(0,0,0,.18);border-radius:16px;border:2px solid rgba(255,250,240,.35)}
.race-row{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:8px;margin:4px 0}
.race-name{color:#fff;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.race-track{height:16px;border-radius:999px;background:rgba(255,250,240,.28);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.race-track > i{display:block;height:100%;width:0;border-radius:999px;transition:width .3s ease}
.race-row.you .race-track > i{background:var(--orange,#ff8a3d)}
.race-row.opp .race-track > i{background:var(--purple,#8b6cff)}
.race-n{color:#fff;font-size:16px;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.race-row.you .race-n{color:#ffd0ad}.race-row.opp .race-n{color:#ded4ff}
.race-cap{display:flex;justify-content:space-between;color:rgba(255,255,255,.75);font-size:11px;margin-top:2px}
.view-quiz-battle .q-area{padding-top:14px}
.view-quiz-battle .q-word{margin:6px 0 18px}

/* v4c Beat-your-best result: readable table, legend, own seconds on each bar, no clipped top cards */
.self-res .stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.self-res .stat-box{min-width:0;padding:10px 4px}
.self-res .stat-box .lab{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.self-res .stat-box .val{font-size:clamp(17px,5.2vw,24px);white-space:nowrap;font-variant-numeric:tabular-nums}
.sr-msg{font-size:15px;font-weight:700;color:#3d4f61}
.sr-chart{font-size:14px}
.spl-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:#5a6b7d;margin:2px 0 8px}
.spl-legend .lg{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--ink)}
.spl-legend .lg i{display:inline-block;width:18px;height:10px;border-radius:5px}
.spl-legend .lg.me i{background:var(--orange,#ff8a3d)}.spl-legend .lg.pb i{background:#a48bff}
.spl-row{grid-template-columns:24px minmax(0,1fr) 62px 62px;gap:8px;padding:6px 0}
.sr-chart.no-cmp .spl-row{grid-template-columns:24px minmax(0,1fr) 66px}
.spl-head{font-size:12px;font-weight:700}
.spl-row > span:nth-child(3),.spl-row > span:nth-child(4){text-align:right}
.spl-bars{position:static;height:auto;display:flex;flex-direction:column;gap:3px}
.spl-bars .bl{display:flex;align-items:center;gap:6px;height:12px}
.spl-bars .bl i{position:static;display:block;height:10px;border-radius:5px;min-width:2px;flex:0 0 auto;max-width:calc(100% - 34px)}
.spl-bars .bl.me i{background:var(--orange,#ff8a3d)}.spl-bars .bl.pb i{background:#a48bff}
.spl-bars .bl em{position:static;font-style:normal;font-size:12px;color:#5a6b7d}
.spl-sum{font-weight:900;border-bottom:none}
.spl-row .ahead{color:#1e9e5a;font-weight:800}.spl-row .behind{color:#d9534f;font-weight:800}

/* ===== v5 LINE notifications ===== */
.line-head { justify-content: flex-start; }
.line-head .ln-badge { margin-left: auto; }
.line-logo { background: #06c755; color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .02em; border-radius: 6px; padding: 3px 6px; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.ln-badge { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 2px 10px; }
.ln-badge-on { background: #06c755; color: #fff; }
.ln-badge-off { background: #fff; color: #4a5b6c; border: 1px solid #c8d6e0; }
.ln-state { margin: 4px 0 8px; }
.ln-state .line-note { margin: 0 0 8px; }
.ln-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; font-weight: 900; font-size: 14px; text-decoration: none; border: none; cursor: pointer; }
.ln-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ln-steps > li { background: #fff; border-radius: 12px; padding: 12px; border: 1px solid #dcefe4; }
.ln-step-t { font-weight: 900; font-size: 14px; margin-bottom: 10px; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 18px; border-radius: 12px;
  background: #06c755; color: #fff; font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 0 4px 0 #04a045; }
.btn-line:active { transform: translateY(2px); box-shadow: 0 2px 0 #04a045; }
.btn-line.ghost { background: #fff; color: #05a647; border: 2px solid #06c755; box-shadow: none; min-height: 44px; }
.ln-add { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ln-add .btn-line { flex: 1 1 200px; }
.ln-qr { display: none; margin: 0; text-align: center; }
.ln-qr div { width: 132px; height: 132px; margin: 0 auto; }
.ln-qr svg { width: 100%; height: 100%; display: block; }
.ln-qr figcaption { font-size: 11px; color: var(--muted); max-width: 180px; margin-top: 4px; line-height: 1.4; }
@media (min-width: 640px) { .ln-qr { display: block; } }
.ln-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 30px; font-weight: 900; letter-spacing: .12em;
  text-align: center; background: #f3fff7; border: 2px dashed #06c755; border-radius: 12px; padding: 10px 6px; color: var(--ink); user-select: all; }
.ln-small { font-size: 12px; margin: 6px 0 0; }
.ln-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ln-row > * { flex: 1 1 140px; }
.ln-ok { margin: 0; font-weight: 800; font-size: 14px; color: #05893c; background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid #bfe9cf; }
.ln-actions { margin-top: 12px; }
.ln-unlink { background: none; border: none; color: #c0392b; font-weight: 800; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.mini-box .line-head { margin-bottom: 4px; }

/* v5 logo */
.app-header .logo { line-height: 0; }
.app-header .logo-img { display: block; height: 36px; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
@media (min-width: 768px) { .app-header .logo-img { height: 46px; } }

/* ======================================================================
   v5 iPad / tablet layout (portrait 768–1024, landscape 1024–1366). Phones are unchanged except
   slightly larger bottom-nav labels.
   ====================================================================== */
.bottom-nav a { font-size: 11px; }
.pd-grid { display: block; }
@media (min-width: 768px) {
  .app-header { padding: 12px 24px; }
  .lang-switch button { font-size: 14px; padding: 6px 12px; }
  .user-chip { font-size: 14px; padding: 6px 14px; max-width: 220px; }
  .bottom-nav { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
  .bottom-nav a { font-size: 13px; gap: 4px; }
  .bottom-nav .ico { font-size: 24px; }
  .view-parent, .view-hub, .view-battle-home, .view-wrong { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
  .muted { font-size: 14px; }
  .page-title { font-size: 20px; padding: 16px 24px; }
  .page-title .back { font-size: 30px; left: 20px; }
  .view-pad { max-width: 680px; padding: 20px 24px 40px; }
  .card-white { padding: 22px; }
  .stat-box .lab { font-size: 13px; }
  .stat-box .val { font-size: 18px; }
  .btn-yellow, .btn-white { font-size: 17px; min-height: 52px; }

  /* hub: two columns */
  .view-hub { max-width: none; padding: 22px max(28px, calc((100% - 1120px) / 2)) 112px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .view-hub.active { display: grid; }
  .view-hub > * { grid-column: 1 / -1; }
  .view-hub > .hub-start { grid-column: 1; grid-row: 2; margin: 0; }
  .view-hub > .hub-daily { grid-column: 1; grid-row: 3; }
  .view-hub > .hub-level { grid-column: 1; grid-row: 4; margin: 14px 0; }
  .view-hub > .hub-three { grid-column: 2; grid-row: 2; align-self: stretch; margin: 0; }
  .view-hub > .hub-stats { grid-column: 2; grid-row: 3 / span 3; margin-top: 14px; }
  .hub-three .h3-tile { justify-content: center; padding: 18px 8px; }
  .h3-tile .ico { font-size: 36px; }
  .h3-tile strong { font-size: 17px; }
  .h3-tile small { font-size: 13px; }
  .hs-ico { width: 84px; height: 84px; font-size: 38px; }
  .hs-t { font-size: 38px; }
  .hs-s { font-size: 15px; }
  .hub-who .nm { font-size: 22px; }
  .hub-who .gr { font-size: 14px; }
  .hl-top strong { font-size: 18px; }
  .hl-prog { font-size: 15px; }
  .hl-steps i { height: 30px; font: 800 13px/30px var(--font); }
  .hl-rule, .hd-msg, .stat-note, .stat-lt { font-size: 14px !important; }
  .hd-top { font-size: 16px; }
  .sg .lab { font-size: 13px; }
  .sg .val { font-size: 20px; }
  .hub-sec-t { font-size: 18px !important; }
  .hist-list { font-size: 15px; }
  .hub-links a, .hub-links button { font-size: 15px; }

  /* battle home + self challenge */
  .view-battle-home > * { max-width: 760px; margin-left: auto; margin-right: auto; }
  .energy-row { padding: 10px 14px 16px; }
  .energy-meta .nm { font-size: 18px; }
  .rank-name { font-size: 24px; }
  .rank-ribbon { font-size: 13px; }

  /* battle quiz (multiple choice) */
  .battle-top, .race, .q-area, .choices { max-width: 860px; margin-left: auto; margin-right: auto; }
  .race { margin-top: 14px; }
  .race-row { grid-template-columns: 96px 1fr 60px; }
  .race-name, .race-n { font-size: 16px; }
  .race-track { height: 20px; }
  .race-cap { font-size: 13px !important; }
  .q-word { font-size: clamp(48px, 7vw, 72px) !important; }
  .choice { min-height: 78px; font-size: 30px !important; border-radius: 18px; }

  /* practice / self challenge / level test (keypad) */
  .view-quiz-practice.active { padding-left: max(0px, calc((100% - 760px) / 2)); padding-right: max(0px, calc((100% - 760px) / 2)); }
  .view-quiz-practice.active > .prac-card { margin-top: auto; }
  .prac-top { font-size: 16px; }
  .prac-card .qtext { font-size: clamp(44px, 6.4vw, 64px); }
  .answer-show input { height: 88px; font-size: 48px; }
  .view-quiz-practice .feedback { font-size: 24px; min-height: 36px; }
  .keypad { gap: 12px; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .keypad button { min-height: 80px; font-size: 34px; border-radius: 16px; }
  .keypad .kp-fn { font-size: 30px; }
  .self-strip { font-size: 15px; }

  /* ranking */
  .rank-hero, .rank-sheet > * { max-width: 900px; margin-left: auto; margin-right: auto; }
  .rank-note { font-size: 14px; }
  .rank-row { padding: 14px 20px; }
  .rank-row .nm, .rank-row .sc { font-size: 17px; }
  .rank-row .av { width: 44px; height: 44px; font-size: 22px; }
  .rank-bottom { padding-left: 24px; padding-right: 24px; }
  .rank-bottom .me { font-size: 16px; }
  #rbScore { font-size: 13px !important; }
  .search-bar input, .search-bar button { font-size: 16px; }

  /* parent */
  .view-parent > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .view-parent > .page-title { max-width: none; }
  .line-desc, .ln-small, .line-saved { font-size: 14px; }
  .line-honest { font-size: 13px; }
  .line-logo { font-size: 13px; }
  .line-head strong { font-size: 18px; }
  .tg { font-size: 16px; }
  .ln-code { font-size: 36px; }
  .list-plain .row { font-size: 15px; }
  .guide p, .guide li { font-size: 15px; }
  .guide h3 { font-size: 19px; }

  /* wrong book, result, login, level test */
  .view-wrong > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  .view-wrong > .page-title { max-width: none; }
  .lt-line { font-size: 26px; }
  .lt-note { font-size: 14px; }
}

/* landscape tablets: keypad beside the problem */
@media (min-width: 960px) and (orientation: landscape) {
  .view-quiz-practice.active {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    grid-auto-rows: min-content; column-gap: 32px; align-content: start;
    padding: 18px max(28px, calc((100% - 1240px) / 2));
    min-height: calc(100dvh - 72px);
  }
  .view-quiz-practice.active > * { grid-column: 1; }
  .view-quiz-practice.active > .keypad {
    grid-column: 2; grid-row: 1 / span 8; align-self: start; margin: 0;
    border: 1px solid var(--line); border-radius: 24px; padding: 18px;
  }
  .view-quiz-practice.active > .prac-card { margin-top: 18px; padding: 36px 16px; }
  .prac-card .qtext { font-size: clamp(52px, 5vw, 76px); }
  .keypad button { min-height: 84px; }
  .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .choice { min-height: 96px; }
}

/* wide screens: parent page in two columns */
@media (min-width: 960px) {
  .pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .pd-side > :first-child h3 { margin-top: 0 !important; }
  .pd-side .line-box { margin-top: 16px; }
}
.rank-ribbon { font-size: 11px; }
@media (min-width: 768px) { .rank-ribbon { font-size: 13px; } }
.tg-time > span { white-space: nowrap; }
.tg-time select { min-width: 0; max-width: 64%; }
@media (min-width: 768px) { .ln-btn { font-size: 15px !important; min-height: 48px; } }

/* ======================================================================
   v6: header sign-up / log-in, signup flow (demo + LINE mock + plan), paywall, trial result, footer
   ====================================================================== */
[hidden] { display: none !important; }
.hdr-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hdr-auth { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hdr-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.hdr-signup { background: var(--orange); color: #fff; box-shadow: 0 3px 0 var(--orange-dark); }
.hdr-login { background: rgba(255,255,255,.95); color: var(--blue-deep); border: 2px solid rgba(255,255,255,.9); }
.hdr-parent { background: rgba(255,255,255,.2); color: #fff; }
.app-header.on-white .hdr-login { background: #fff; border-color: var(--blue); }
.app-header.on-white .hdr-parent { background: #f0f4f8; color: var(--blue-deep); }
.hdr-auth .user-chip { height: 30px; display: inline-flex; align-items: center; }
@media (max-width: 359px) { .hdr-login, .hdr-parent { display: none; } }
@media (min-width: 768px) {
  .hdr-right, .hdr-auth { gap: 10px; }
  .hdr-btn { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
  .hdr-auth .user-chip { height: 40px; }
}

/* steps bar */
.su-steps { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 14px 14px 0; padding: 0; counter-reset: none; }
.su-steps li { flex: 1; max-width: 180px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 999px; background: #ece7da; color: #8a8270; font-weight: 800; font-size: 13px; }
.su-steps li b { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.su-steps li.cur { background: var(--blue); color: #fff; }
.su-steps li.cur b { color: var(--blue-deep); }
.su-steps li.done { background: #d6f2ee; color: var(--blue-deep); }
.su-notice { margin: 12px 14px 0; padding: 12px 14px; border-radius: 12px; background: #fff3e8; color: #9a4a12; font-weight: 700; font-size: 14px; line-height: 1.6; }
.su-nav { margin: 6px 14px 24px; display: grid; gap: 4px; }
.su-nav .btn-yellow, .su-nav .btn-white { text-decoration: none; text-align: center; }
.su-nav .btn-link { display: block; text-align: center; padding: 10px; }

/* demo card */
.demo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-head h2 { margin: 0; font-size: 18px; color: var(--blue-deep); }
.demo-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #ffe3cf; color: #b4501a; font-size: 12px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.demo-badge-img { background: #e6defd; color: #5536d6; }
.demo-card > .muted, .line-mock-card > .muted { margin: 8px 0 12px; line-height: 1.6; }
.demo-frame { border: 2px dashed #cfe3df; border-radius: 16px; padding: 12px; background: #fbfaf6; }
.demo-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.dm-child { display: flex; align-items: center; gap: 10px; }
.dm-child > div { flex: 1; display: flex; flex-direction: column; }
.dm-child strong { font-size: 17px; }
.dm-child > div span { font-size: 13px; color: var(--muted); }
.dm-sec { margin-top: 14px; }
.dm-sec h4 { margin: 0 0 6px; font-size: 14px; }
.dm-steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.dm-steps i { font-style: normal; text-align: center; border-radius: 6px; background: #ece7da; color: #9a917c; font: 800 11px/24px var(--font); }
.dm-steps i.done { background: var(--blue); color: #fff; }
.dm-steps i.cur { background: var(--orange); color: #fff; box-shadow: 0 0 0 2px #ffd2b3; }
.dm-now { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--blue-deep); }
.dm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dm-stats .sg { background: #e3f5f2; border-radius: 12px; padding: 10px; }
.dm-stats .lab { font-size: 12px; color: var(--muted); line-height: 1.4; }
.dm-stats .val { font-size: 18px; font-weight: 900; color: var(--ink); }
.dm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wk-bar { width: 100%; max-width: 28px; height: 70px; background: #ece7da; border-radius: 6px; position: relative; overflow: hidden; }
.wk-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #1fb5a9, #0f7f78); border-radius: 6px 6px 0 0; }
.wk b { font-size: 11px; }
.wk span { font-size: 11px; color: var(--muted); }
.demo-frame .list-plain .row { gap: 8px; align-items: center; }
.demo-frame .list-plain .row strong { white-space: nowrap; }
.dm-mis .row { flex-wrap: wrap; }
.dm-q { font-weight: 900; font-size: 15px; }
.dm-x { color: var(--red); font-size: 12px; font-weight: 700; margin-right: 6px; }
.dm-o { color: var(--blue-deep); font-size: 12px; font-weight: 700; }
.dm-x s { font-size: 14px; }
.dm-o b { font-size: 14px; }

/* phone mock (generic chat, not the LINE app UI) */
.phone-mock { max-width: 320px; margin: 0 auto; border-radius: 34px; padding: 10px; background: #263238; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.pm-screen { border-radius: 26px; overflow: hidden; background: #dfe7ec; display: flex; flex-direction: column; min-height: 420px; }
.pm-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #2f4858; color: #fff; }
.pm-top strong { font-size: 15px; }
.pm-back { font-size: 22px; line-height: 1; opacity: .8; }
.pm-av { border-radius: 50%; background: #fff; flex: none; object-fit: cover; }
.pm-chat { flex: 1; padding: 14px 10px; }
.pm-msg { display: flex; align-items: flex-end; gap: 6px; }
.pm-msg .pm-av { align-self: flex-start; }
.pm-bubble { background: #fff; color: #1d2b33; border-radius: 4px 16px 16px 16px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; max-width: 82%; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pm-time { font-size: 10.5px; color: #6b7c86; white-space: nowrap; }
.pm-input { padding: 10px 12px 14px; background: #f4f6f7; }
.pm-input span { display: block; height: 30px; border-radius: 999px; background: #fff; border: 1px solid #d5dde2; }

/* plan card */
.plan-card .pl-head h2 { margin: 0; font-size: 19px; color: var(--blue-deep); }
.plan-card > .muted { margin: 6px 0 12px; line-height: 1.6; }
.pl-box { border: 2px solid var(--blue); border-radius: 16px; padding: 14px; background: #f3fbfa; }
.pl-name { font-weight: 900; font-size: 17px; }
.pl-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0 10px; padding-bottom: 10px; border-bottom: 1px dashed #bfe0dc; }
.pl-price span { font-size: 13px; color: var(--muted); font-weight: 700; }
.pl-price strong { font-size: 22px; color: var(--orange-dark); }
.plan-card h4 { margin: 8px 0 4px; font-size: 14px; }
.pl-list { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.75; }
.pl-free { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fffaf0; border: 1px solid #efe4cc; }
.pay-soon { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fff3e8; border: 1.5px solid #ffd2b3; }
.pay-soon strong { color: #b4501a; font-size: 15px; }
.pay-soon p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; }
.pl-stripe { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.plan-card .btn-yellow { margin-top: 14px; text-decoration: none; }
.pw-card { text-align: center; }
.pw-card h2 { margin: 6px 0; font-size: 19px; }

/* trial result */
.trial-line { margin: 12px 14px 0; text-align: center; font-weight: 900; font-size: 18px; color: var(--blue-deep); }
.trial-review { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fbfaf6; border: 1px solid #ece7da; }
.trial-review h4 { margin: 0 0 6px; font-size: 14px; }
.tr-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #f0ece0; font-size: 14px; }
.tr-row:last-child { border-bottom: none; }
.tr-q { font-weight: 800; }
.tr-a s { color: var(--red); }
.tr-a b { color: var(--blue-deep); }
.trial-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.trial-btns .btn-white { text-decoration: none; text-align: center; }
.signup-hint .btn-yellow { text-decoration: none; }
.consent a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.guide-reg { margin-top: 16px; text-decoration: none; }

/* footer (every app view except quizzes / battle) */
.app-foot { background: #f6f3ea; border-top: 1px solid #ece7da; padding: 14px 12px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.app-foot .legal-links { margin: 0 0 6px; }
body.nav-on .app-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
body.foot-on .view-parent, body.foot-on .view-hub, body.foot-on .view-wrong { padding-bottom: 20px !important; }
body.foot-on .view { min-height: calc(100vh - 140px); }

@media (min-width: 768px) {
  .su-steps { margin: 20px auto 0; max-width: 640px; }
  .su-steps li { font-size: 15px; padding: 10px; }
  .su-notice, .su-nav { max-width: 640px; margin-left: auto; margin-right: auto; }
  .su-nav { margin-top: 10px; }
  .view-signup .su-pane > .card-white, .view-paywall > .card-white, .view-guide > .card-white { max-width: 760px; margin-left: auto; margin-right: auto; }
  #view-paywall > .card-white { max-width: 640px; margin-left: auto; margin-right: auto; }
  .demo-head h2 { font-size: 21px; }
  .dm-stats { grid-template-columns: repeat(4, 1fr); }
  .dm-steps { grid-template-columns: repeat(20, 1fr); }
  .pm-bubble { font-size: 13.5px; }
  .phone-mock { max-width: 340px; }
  .plan-card .pl-head h2 { font-size: 22px; }
  .pl-list { font-size: 15px; }
  .trial-line { font-size: 22px; }
  .tr-row { font-size: 16px; }
  .app-foot { font-size: 14px; }
  body.nav-on .app-foot { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .view-grades > .card-white, #view-result-prac > .card-white, #view-login > .card-white { max-width: 680px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1000px) {
  .demo-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 20px; max-width: 1180px; margin: 0 auto; padding: 0 14px; align-items: start; }
  .demo-grid > .card-white { margin: 14px 0; max-width: none !important; }
  .su-nav { max-width: 520px; }
  .dm-stats { grid-template-columns: 1fr 1fr; }
  .dm-steps { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 768px) {
  .dm-steps i { font-size: 12px; }
  .wk b, .wk span { font-size: 12px; }
  .pm-time { font-size: 12px; }
}

/* ---- v7: difficulty layers (gauge toward the next layer, parent trend), weekly report, email placeholder ---- */
.hl-gauge { display: flex; gap: 6px; margin: 10px 0 6px; }
.hl-gauge i { flex: 1; height: 14px; border-radius: 999px; background: #e8eef5; font-style: normal; }
.hl-gauge i.done { background: linear-gradient(90deg, var(--blue), #2cc5b8); }
.lv-out .lv-gauge { max-width: 260px; margin: 8px auto; }
.pl-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-now strong { font-size: 16px; color: var(--blue-deep); white-space: nowrap; }
.pl-now .hl-gauge { flex: 1 1 140px; margin: 0; max-width: 240px; }
.pl-note { font-size: 12px; margin: 6px 0 8px; line-height: 1.5; }
.lt-chart { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 6px 8px; background: #f4f8fb; border-radius: 12px; }
.lt-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.lt-col i { display: block; width: 100%; min-height: 6px; border-radius: 4px 4px 2px 2px; background: #9fd9d3; }
.lt-col i.up { background: var(--blue); }
.lt-col i.down { background: #ffb27f; }
.lt-sum { font-size: 13px; margin: 6px 0 0; }
.lt-sum b.up, .lt-changes .up { color: var(--blue-deep); }
.lt-sum b.down { color: #d9631a; }
.lt-changes { margin-top: 8px; }
.mail-box { margin-top: 12px; border: 1.5px solid #b7e0d6; border-radius: 14px; padding: 12px 14px; background: #f3fbf8; }
.mail-box .tg { opacity: .8; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-box .soon { margin-left: 4px; }
.mail-box .muted { font-size: 12px; margin: 4px 0 0; }
.mail-box.mail-on .mail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-box.mail-on .mail-head strong { font-size: 14px; color: #0f6b5c; }
.mail-badge { background: #1aa88a; color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 2px 10px; }
.pin-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.pin-stack input { width: 100%; max-width: 220px; }
.pin-hint { margin-top: 8px; font-size: 12px; }
button.parent-logout { border-color: #ffb4a8; color: #b33b2b; }
@media (min-width: 768px) { .hl-gauge i { height: 18px; } }


/* Parent progress trend charts (v=20261101f) */
.p-charts-note{font-size:12px;margin:0 0 8px}
.p-charts{display:grid;gap:10px;margin-bottom:8px}
.p-chart{background:linear-gradient(180deg,#f7fffc,#fff);border:1px solid #c9ebe0;border-radius:14px;padding:10px 12px 8px}
.p-chart-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.p-chart-h strong{font-size:13px;color:#0f766e}
.p-chart-h .delta{font-size:12px;font-weight:800}
.p-chart-h .delta.up{color:#ea580c}
.p-chart-h .delta.down{color:#0d9488}
.p-chart-h .delta.flat{color:#64748b}
.p-chart svg{display:block;width:100%;height:72px}
.p-chart .axis{font-size:10px;color:#64748b;display:flex;justify-content:space-between;margin-top:2px}
.p-chart-empty{font-size:12px;color:#64748b;padding:18px 4px;text-align:center}


/* Child picker "who is practicing?" (v=20261101g) */
.who-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.who-kid{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:2px solid var(--line);border-radius:16px;background:#fff;font:800 16px var(--font);cursor:pointer;color:inherit}
.who-kid:active,.who-kid:hover{border-color:var(--blue)}
.who-kid .av-svg{width:72px;height:72px}
.who-kid .who-gr{color:var(--muted);font-size:12px;font-weight:700}
.hub-hello.can-swap{cursor:pointer}
.hub-swap{margin-left:auto;border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:800;color:var(--blue);background:#fff;white-space:nowrap}

.su-add-kid{width:100%;margin-top:10px}
.su-kid{margin-top:12px;padding:10px 12px;border:2px dashed var(--line);border-radius:12px;background:#fff}
.su-kid-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.su-kid-x{border:none;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px}
.su-kid .grade-pick{margin-top:8px}
/* v20261102a: LINE "coming soon" badge, email-report "on" badge on the signup form */
.ln-badge-soon { background: #ff8a3d; color: #fff; }
.soon.soon-on { background: #13a89e; }
.mini-box .line-head .soon { margin-left: 6px; }

/* ---------- えいご (English) ---------- */
.subj-seg { display: flex; gap: 0; margin: 10px 16px 4px; background: #e6efee; border-radius: 999px; padding: 4px; }
.subj-seg button { flex: 1; border: none; background: transparent; border-radius: 999px; padding: 9px 0; font-size: 15px; font-weight: 900; color: var(--blue-dark); cursor: pointer; }
.subj-seg button.on { background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-dark); }
.subj-eng .subj-seg button.on { background: var(--orange, #ff8a3d); box-shadow: 0 2px 0 var(--orange-dark, #d9631a); }
.view-battle-home .subj-seg { margin: 10px 16px 6px; }
.view-wrong .subj-seg { margin: 6px 16px 8px; }
.eq-wrap { position: relative; padding: 20px 16px 22px; }
.eq-card { text-align: center; }
.eq-prompt { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--blue-deep); }
.eq-big { font-size: clamp(30px, 9vw, 44px); font-weight: 900; color: var(--ink); line-height: 1.25; word-break: break-word; }
.eq-ja { letter-spacing: .02em; }
.eq-pic { font-size: clamp(54px, 18vw, 80px); line-height: 1.15; word-break: break-all; }
.eq-sent { font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; color: var(--ink); line-height: 1.45; }
.eq-hint { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--muted); }
.eq-dlg { display: inline-block; text-align: left; font-size: clamp(18px, 5vw, 23px); font-weight: 800; color: var(--ink); line-height: 1.6; }
.eq-passage { text-align: left; font-size: 16.5px; line-height: 1.65; color: var(--ink); background: #f8fbfa; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; max-height: 42vh; overflow: auto; }
.eq-q { margin-top: 12px; font-size: 17px; font-weight: 900; color: var(--ink); text-align: left; }
.eq-gap { display: inline-block; color: var(--orange-deep); font-weight: 900; }
.eq-say { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-size: 19px; cursor: pointer; }
.eq-say:active { transform: translateY(1px); }
.eq-wrap .q-count { position: absolute; top: 8px; left: 12px; }
.eq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 14px 8px; }
.eq-choices.long { grid-template-columns: 1fr; }
.eq-choice { background: #fff; border: 2px solid #d6e3e1; border-radius: 14px; padding: 14px 10px; min-height: 56px; font-size: 18px; font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.06); line-height: 1.35; }
.eq-choices.long .eq-choice { text-align: left; padding: 12px 14px; font-size: 16.5px; }
.eq-choice:active { transform: translateY(1px); }
.eq-choice:disabled { cursor: default; }
.eq-choice.correct { background: var(--green, #22b573); border-color: #178a56; color: #fff; }
.eq-choice.wrong { background: var(--red, #ef4b4b); border-color: #b83232; color: #fff; }
.eq-choice.answer { border-color: var(--green, #22b573); box-shadow: 0 0 0 3px rgba(34,181,115,.35); }
/* battle: English questions are longer than math */
#view-quiz.eng .q-word { font-size: 18px; margin: 4px 0 12px; }
.eq-compact { background: rgba(255,255,255,.96); color: var(--ink); text-shadow: none; border-radius: 16px; padding: 12px 14px; }
.eq-compact .eq-big { font-size: 30px; }
.eq-compact .eq-pic { font-size: 54px; }
.eq-compact .eq-sent, .eq-compact .eq-dlg { font-size: 19px; }
#view-quiz.eng .choice { font-size: 17px; padding: 12px 14px; }
.eng-sum { font-size: 14px; }
.p-eng .pe-words { margin: 6px 0 4px; }

.sess-sub{display:inline-block;font-style:normal;font-size:11px;font-weight:800;padding:1px 6px;border-radius:999px;margin-right:4px;vertical-align:middle}
.sess-sub.sub-math{background:#ccfbf1;color:#0f766e}
.sess-sub.sub-eng{background:#ffedd5;color:#c2410c}

/* ---------- billing (plan choice, 特商法 final confirmation, parent box) ---------- */
.pl-price strong { text-align: right; }
.plan-card .pl-price strong { font-size: 16px; line-height: 1.4; }
#planCard2 { text-align: left; }
.bl-h { font-size: 15px; margin: 14px 0 8px; }
.bl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .bl-opts { grid-template-columns: 1fr; } }
.bl-opt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2px solid #bfe0dc; border-radius: 14px; background: #fff; cursor: pointer; }
.bl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bl-opt.on { border-color: var(--orange, #f08a24); background: #fff7ee; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.bl-opt-n { font-weight: 800; font-size: 15px; }
.bl-opt-p { font-weight: 700; color: var(--orange-deep); font-size: 14px; }
.bl-opt-s { font-size: 12px; color: var(--muted, #5b6b70); }
.bl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 10px; }
.bl-table th, .bl-table td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px dashed #bfe0dc; line-height: 1.55; }
.bl-table th { width: 32%; color: var(--muted, #5b6b70); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) { .bl-table th { white-space: normal; width: 36%; } }
.bl-amt { font-size: 17px; color: var(--orange-deep); }
.bl-warn { background: #fff4e5; border: 1.5px solid #f5c58d; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.bl-links { font-size: 12.5px; }
.bl-agree { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 12px; font-weight: 700; font-size: 14px; }
.bl-agree input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
#blGo { width: 100%; }
#blGo:disabled, .bill-box button:disabled { opacity: .6; cursor: progress; }
.bl-done { margin: 10px 0 14px; }
.bill-box .mail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bill-box .btn-white, .bill-box .btn-yellow { display: block; width: 100%; text-align: center; margin-top: 10px; }
.bill-box .list-plain { margin-top: 6px; }
.bl-badge { white-space: normal; }
.bl-past_due .bl-badge, .bl-badge.bl-past_due { background: #ffe1d6; color: #b2401b; }
#billOk { text-align: center; }
#billOk .btn-yellow, #billOk .btn-white { display: inline-block; margin-top: 12px; }
/* no-card free trial (2026-11-03) */
.bl-note { background: #e8f7f5; border: 1.5px solid #9fdcd5; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 8px 0; color: #0b5f5a; }
.tr-rem { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -6px 2px 14px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.tr-rem a { flex: none; font-weight: 900; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: #ff8a3d; color: #fff; box-shadow: 0 3px 0 #d9631a; }
.tr-rem-soon { background: #fff4e5; border: 1.5px solid #f5c58d; color: #8a4a12; }
.tr-rem-ended { background: #f1f4f7; border: 1.5px solid #d5dde6; color: #3d4b59; }
.bl-badge.bl-trialing { white-space: normal; }
/* LINE: one-tap link (opens LINE with the code prefilled) */
.ln-quick { display: grid; gap: 6px; margin: 4px 0 12px; }
.ln-quick .btn-line { width: 100%; font-size: 17px; }
.ln-add .ln-btn { flex: 1 1 200px; }

/* ===== 満点将軍 mascot on the battle screens (test 20261103s1) ===== */
.view-battle-home .hub-card { margin-top: 22px; }
.shogun-perch {
  position: absolute; right: 8px; top: -76px; width: 100px; height: auto; z-index: 3;
  pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,40,50,.18));
  transform-origin: 50% 100%; animation: shogunBob 3.2s ease-in-out infinite;
}
.shogun-match-wrap { margin: -9vh auto 14px; position: relative; z-index: 1; }
.shogun-match {
  display: block; width: 168px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.22));
  animation: shogunPop .55s cubic-bezier(.2,1.4,.4,1) both;
}
.view-match .match-label { position: relative; z-index: 2; }
.shogun-cheer {
  position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; margin: 2px 16px 8px;
}
.shogun-cheer-img { width: 96px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.shogun-bubble {
  position: relative; background: var(--cream, #fffaf0); color: var(--blue-deep, #0b5f5a);
  font-weight: 900; font-size: 15px; line-height: 1.35; padding: 10px 14px; border-radius: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,.12); margin-bottom: 26px; max-width: min(250px, 62vw); word-break: keep-all; overflow-wrap: anywhere;
}
.shogun-bubble:empty { display: none; }
.shogun-bubble::before {
  content: ''; position: absolute; left: -9px; bottom: 12px; border: 6px solid transparent;
  border-right: 10px solid var(--cream, #fffaf0); border-left: 0;
}
.shogun-cheer.pop .shogun-cheer-img { animation: shogunPop .55s cubic-bezier(.2,1.4,.4,1) both; }
.shogun-cheer.pop .shogun-bubble { animation: shogunPop .45s .18s cubic-bezier(.2,1.4,.4,1) both; }
.shogun-cheer[data-r="a"] .shogun-cheer-img { animation-name: shogunPop, shogunHop; animation-duration: .55s, .9s; animation-delay: 0s, .6s; animation-iteration-count: 1, 2; }
@keyframes shogunPop { 0% { opacity: 0; transform: scale(.6) translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes shogunBob { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg) translateY(-2px); } }
@keyframes shogunHop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px); } }
@media (min-width: 768px) {
  .view-battle-home .hub-card { margin-top: 40px; }
  .shogun-perch { width: 136px; top: -103px; right: 18px; }
  .shogun-match { width: 220px; }
  .shogun-cheer-img { width: 124px; }
  .shogun-bubble { font-size: 18px; max-width: 300px; padding: 12px 18px; margin-bottom: 34px; }
}
@media (max-height: 640px) { .shogun-match { width: 128px; } .shogun-cheer-img { width: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .shogun-perch, .shogun-match, .shogun-cheer.pop .shogun-cheer-img, .shogun-cheer.pop .shogun-bubble { animation: none !important; }
}

/* 2026-11-03 s2: guest plan page (plan first, then sign up / log in) + parent-page plan strip */
.pw-steps { display: flex; gap: 6px; margin: 14px 0 8px; font-size: 12px; font-weight: 800; }
.pw-steps span { flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 6px 8px; border-radius: 999px; background: #eef5f4; color: #6b7c7a; }
.pw-steps span.on { background: #13a89e; color: #fff; }
.pw-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pw-acts a { text-decoration: none; text-align: center; }
.pw-acts .btn-white { border: 2px solid #13a89e; box-shadow: none; }
@media (max-width: 520px) { .pw-acts { grid-template-columns: 1fr; } }
#planCard2 .bl-note { background: #e9f7f5; border: 1.5px solid #bfe6e1; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 8px 0; color: #24524f; }
.pp-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.pp-strip[hidden] { display: none; }
.pp-strip .pp-txt { flex: 1 1 200px; }
.pp-strip .pp-btn { flex: none; font-weight: 900; text-decoration: none; padding: 8px 14px; border-radius: 999px; background: #ff8a3d; color: #fff; box-shadow: 0 3px 0 #d9631a; }
.pp-strip.pp-trial { background: #fff4e5; border: 1.5px solid #f5c58d; color: #8a4a12; }
.pp-strip.pp-none { background: #fff; border: 1.5px solid #bfe6e1; color: #24524f; }
#view-paywall .su-nav a[hidden] { display: none; }
.pw-acts > a:only-child { grid-column: 1 / -1; }

/* prod hosts: えいご hidden (KO.ENG_ENABLED false → html.no-eng, js/config.js) */
.no-eng .subj-seg, .no-eng #hubELt, .no-eng .p-eng, .no-eng .p-eng-t { display: none !important; }

/* ms3: bigger 満点将軍 logo (phone 44 / tablet+desktop 60 px) */
.app-header > .logo { flex: none; }
.app-header .logo-img { height: 44px; }
.app-header { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 359px) { .app-header .logo-img { height: 38px; } }
@media (min-width: 768px) { .app-header .logo-img { height: 60px; } .app-header { padding-top: 6px; padding-bottom: 6px; } }

/* ms5/s5: signup step ② plan choice + step ③ email note, parent PIN, chosen plan */
.su-plan-pick { margin: 12px 0 14px; }
.su-plan-h { margin: 0 0 8px; font-size: 16px; color: var(--blue-deep); }
.su-plan-opt { position: relative; }
.su-plan-price { font-size: 20px; }
.su-plan-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--orange, #f08a24); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; vertical-align: 2px; }
.pl-free-sm { padding: 10px 12px; }
.pl-free-sm h4 { font-size: 13px; margin: 0 0 2px; }
.pl-free-sm .pl-list { font-size: 13px; line-height: 1.6; }
.field-note { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.su-pin { margin: 4px 0 12px; }
.su-pin .field-lab { margin-top: 10px; }
.su-pin-in { max-width: 180px; letter-spacing: 6px; text-align: center; }
.su-plan-sum { margin: 14px 0 12px; padding: 10px 14px; border-radius: 14px; background: #fff7ee; border: 1.5px solid #ffd2b3; }
.sps-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sps-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.sps-row strong { font-size: 15px; color: var(--orange-dark, #c4560f); }
.sps-chg { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.sps-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.stat-row.st4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .stat-row.st4 { grid-template-columns: repeat(4, 1fr); } }

/* ms6: weekly email switch */
.mail-badge.off { background: #9aa8b3; }
.mail-tg { margin-top: 8px; }

/* signup step 1: weekly report shown as an email while LINE is off (prod) */
.phone-mock.mail-mock { max-width: 360px; border-radius: 18px; padding: 0; background: #fff; border: 2px solid #cfe9e6; box-shadow: 0 10px 24px rgba(0,0,0,.08); overflow: hidden; }
.mm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #0f7f78; color: #fff; }
.mm-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
.mm-head strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-head span { opacity: .85; }
.mm-head .pm-time { color: #fff; opacity: .85; font-size: 11px; }
.mm-head .pm-av { border-radius: 50%; background: #fff; }
.mm-subj { padding: 12px 14px 6px; font-weight: 700; font-size: 14px; color: #22313f; border-bottom: 1px dashed #dbe7ea; }
.mm-body { padding: 10px 14px; font-size: 13px; line-height: 1.65; color: #22313f; }
.mm-btn { margin: 4px 14px 16px; padding: 10px; text-align: center; border-radius: 999px; background: #f08a24; color: #fff; font-weight: 700; font-size: 13px; }

/* prod: 🏆 ranking hidden until launch (KO.RANK_ENABLED false → html.no-rank, js/config.js) */
.no-rank .rank-only { display: none !important; }
.no-rank .stat-row.st4 > :first-child { grid-column: 1 / -1; }
@media (min-width: 1100px) { .no-rank .stat-row.st4 { grid-template-columns: repeat(3, 1fr); } .no-rank .stat-row.st4 > :first-child { grid-column: auto; } }
.no-rank.no-eng .hub-three { grid-template-columns: repeat(2, 1fr); }
.no-rank .stat-grid { grid-template-columns: repeat(3, 1fr); }