/* =========================================================
   KANJI GALAXY  宇宙 × 漢字
   ========================================================= */
:root {
  --kk-space: #05041a;
  --kk-space-2: #0e0b33;
  --kk-panel: rgba(20, 18, 64, 0.72);
  --kk-line: rgba(127, 227, 255, 0.28);
  --kk-cyan: #7fe3ff;
  --kk-violet: #9b7bff;
  --kk-pink: #ff7ad9;
  --kk-gold: #ffe27a;
  --kk-ok: #5effa8;
  --kk-ng: #ff5a7a;
  --kk-text: #eef1ff;
  --kk-muted: #a3a9d6;
  --kk-font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --kk-font-mincho: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --kk-font-en: 'Orbitron', 'Zen Kaku Gothic New', sans-serif;
  --grade-color: var(--kk-cyan);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }

.kk-body {
  min-height: 100vh;
  color: var(--kk-text);
  font-family: var(--kk-font-body);
  font-weight: 500;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(122, 77, 255, 0.35), transparent 55%),
    radial-gradient(ellipse at 100% 60%, rgba(255, 122, 217, 0.18), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(63, 167, 255, 0.2), transparent 50%),
    linear-gradient(180deg, var(--kk-space-2), var(--kk-space) 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 星空 ---------- */
.kk-stars,
.kk-stars::before,
.kk-stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}
.kk-stars {
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #cfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent),
    radial-gradient(1px 1px at 60px 210px, #ffd9f3, transparent),
    radial-gradient(1px 1px at 260px 40px, #fff, transparent);
  background-size: 300px 260px;
  opacity: 0.7;
}
.kk-stars::before {
  content: '';
  background-image:
    radial-gradient(2px 2px at 50px 120px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 330px 60px, #bfe8ff, transparent),
    radial-gradient(2px 2px at 180px 300px, #fff6c4, transparent);
  background-size: 420px 380px;
  animation: kk-twinkle 4s ease-in-out infinite alternate;
}
.kk-stars::after {
  content: '';
  background-image: radial-gradient(1px 1px at 90px 50px, #fff, transparent), radial-gradient(1px 1px at 10px 150px, #fff, transparent);
  background-size: 160px 200px;
  opacity: 0.35;
  animation: kk-drift 120s linear infinite;
}

@keyframes kk-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes kk-drift { from { background-position: 0 0; } to { background-position: 0 2000px; } }
@keyframes kk-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kk-spin { to { transform: rotate(360deg); } }
@keyframes kk-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes kk-fly {
  0% { transform: translate(-60px, 60px) rotate(45deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(60px, -60px) rotate(45deg); opacity: 0; }
}
@keyframes kk-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes kk-flash { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }

.kk-app {
  position: relative;
  z-index: 1;
  max-width: 520px;
  min-height: 100vh;
  margin: 0 auto;
}

.kk-page {
  position: relative;
  padding: 12px 16px 56px;
  animation: kk-fade-in 0.4s ease both;
}

/* ---------- 共通パーツ ---------- */
.kk-planet { display: inline-block; line-height: 0; }
.kk-planet svg { width: 100%; height: 100%; overflow: visible; }

.kk-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 8px;
}
.kk-header__title { margin: 0; text-align: center; font-weight: 900; letter-spacing: 0.08em; color: var(--kk-cyan); }
.kk-header__right { min-width: 72px; display: flex; justify-content: flex-end; }

.kk-back {
  padding: 6px 12px;
  border: 1px solid var(--kk-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  color: var(--kk-muted);
}

.kk-panel {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--kk-line);
  border-radius: 18px;
  background: var(--kk-panel);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 30px rgba(127, 227, 255, 0.05);
}
.kk-panel__title { margin: 0 0 12px; font-size: 15px; font-weight: 900; color: var(--kk-cyan); }

.kk-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--grade-color);
  color: #0b0820;
  font-size: 12px;
  font-weight: 900;
}
.kk-chip--ghost { background: transparent; border: 1px solid var(--kk-line); color: var(--kk-muted); }

.kk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin: 10px 0 0;
  padding: 12px 18px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  color: var(--kk-text);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.kk-btn:not(:disabled):active { transform: translateY(1px); }
.kk-btn:disabled { opacity: 0.4; }
.kk-btn--main {
  background: linear-gradient(135deg, var(--kk-violet), var(--kk-pink));
  box-shadow: 0 8px 24px rgba(155, 123, 255, 0.45);
}
.kk-btn--sub { background: rgba(127, 227, 255, 0.12); border: 1px solid var(--kk-line); }
.kk-btn--ghost { background: transparent; border: 1px dashed var(--kk-line); color: var(--kk-muted); min-height: 46px; font-size: 14px; }
.kk-btn--small { width: auto; min-height: 38px; padding: 6px 16px; font-size: 14px; background: linear-gradient(135deg, var(--kk-violet), var(--kk-pink)); }
.kk-btn--x { margin-top: 18px; background: #000; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 24px rgba(127, 227, 255, 0.25); }
.kk-btn__x { font-size: 20px; }

.kk-actions { margin: 8px 0 16px; }

.kk-meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.kk-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--grade-color), var(--kk-pink));
  transition: width 0.3s ease;
}

.kk-lead { color: var(--kk-muted); font-size: 14px; line-height: 1.7; }
.kk-empty { margin: 16px 0; text-align: center; color: var(--kk-muted); }
.kk-foot { margin-top: 32px; font-size: 11px; line-height: 1.7; text-align: center; color: var(--kk-muted); }

/* ---------- タイトル ---------- */
.kk-title__hero {
  position: relative;
  padding: 36px 0 12px;
  text-align: center;
}
.kk-title__planet {
  position: absolute;
  top: -20px;
  right: -60px;
  width: 220px;
  height: 220px;
  opacity: 0.7;
  animation: kk-float 7s ease-in-out infinite;
}
.kk-title__logo {
  position: relative;
  display: grid;
  margin: 0;
  font-family: var(--kk-font-en);
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 35%, #c8b8ff 70%, var(--kk-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(155, 123, 255, 0.8));
}
.kk-title__logo span:last-child { font-size: 0.92em; }
.kk-title__catch {
  position: relative;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--kk-cyan);
  text-shadow: 0 0 12px rgba(127, 227, 255, 0.6);
}

.kk-challenge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  padding: 14px;
  border: 2px solid var(--kk-pink);
  border-radius: 18px;
  background: rgba(255, 122, 217, 0.1);
  animation: kk-pop 0.5s ease both;
}
.kk-challenge__planet { flex: none; width: 84px; height: 84px; }
.kk-challenge__lead { margin: 0; font-size: 12px; color: var(--kk-pink); font-weight: 900; }
.kk-challenge__main { margin: 4px 0; font-size: 17px; font-weight: 900; }
.kk-challenge__main b { color: var(--kk-gold); font-size: 20px; }
.kk-challenge__sub { margin: 0 0 8px; font-size: 13px; color: var(--kk-muted); }

/* 3つの入口ボタン */
.kk-cta {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 4px;
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 22px;
  text-align: left;
  color: #fff;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kk-cta:active { transform: translateY(1px) scale(0.99); }
.kk-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.25) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: kk-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
.kk-cta__en { font-family: var(--kk-font-en); font-size: 11px; font-weight: 900; letter-spacing: 0.2em; opacity: 0.85; }
.kk-cta__name { font-size: 22px; font-weight: 900; line-height: 1.25; }
.kk-cta__desc { font-size: 12px; line-height: 1.6; opacity: 0.9; }
.kk-cta__go {
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
}
.kk-cta__icon { font-size: 30px; line-height: 1; margin-bottom: 4px; }

@keyframes kk-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes kk-launch {
  0%, 100% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(-8px) rotate(-45deg); }
}

/* 大きい入口ボタン（レベル診断・タイムアタック共通のレイアウト） */
.kk-cta--big {
  margin: 0 0 16px;
  padding: 22px 20px 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.kk-cta--big .kk-cta__name { font-size: 30px; }
.kk-cta--big .kk-cta__desc { font-size: 13px; }
.kk-cta--big .kk-cta__go { width: 100%; margin-top: 12px; padding: 12px; text-align: center; font-size: 18px; }
.kk-cta__badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}
.kk-cta__mascot {
  position: absolute;
  right: 18px;
  top: 34px;
  font-size: 58px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.kk-cta__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.kk-cta__meta span { padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-size: 12px; font-weight: 700; }

/* レベル診断：紫〜ピンク（メインなので脈打つ） */
.kk-cta--diagnose {
  margin-top: 24px;
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 226, 122, 0.45), transparent 35%),
    linear-gradient(135deg, #6a3dff 0%, #b04dff 50%, #ff5ab8 100%);
  box-shadow: 0 0 0 6px rgba(155, 123, 255, 0.18), 0 16px 40px rgba(155, 123, 255, 0.55);
  animation: kk-pulse 2.4s ease-in-out infinite;
}
.kk-cta--diagnose .kk-cta__badge { background: var(--kk-gold); color: #2a1060; }
.kk-cta--diagnose .kk-cta__go { color: #7a2dff; }
.kk-cta__mascot--rocket { transform: rotate(-45deg); animation: kk-launch 1.6s ease-in-out infinite; }

@keyframes kk-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(155, 123, 255, 0.18), 0 16px 40px rgba(155, 123, 255, 0.55); }
  50% { box-shadow: 0 0 0 12px rgba(155, 123, 255, 0.08), 0 16px 50px rgba(255, 90, 184, 0.6); }
}

/* タイムアタック：オレンジ〜赤 */
.kk-cta--ta {
  border-color: rgba(255, 226, 170, 0.6);
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 246, 196, 0.5), transparent 35%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #ff8a2b 0%, #ff5a3d 55%, #e8335a 100%);
  box-shadow: 0 0 0 6px rgba(255, 138, 43, 0.15), 0 16px 40px rgba(255, 90, 61, 0.45);
}
.kk-cta--ta .kk-cta__badge { background: #fff; color: #e0402d; }
.kk-cta--ta .kk-cta__go { color: #e0402d; }
/* 名前が長いので、狭い画面では右上の時計と重ならないよう少し小さくする */
@media (max-width: 420px) {
  .kk-cta--big .kk-cta__mascot { font-size: 48px; right: 14px; }
  .kk-cta--ta .kk-cta__name { font-size: 25px; padding-right: 44px; }
}
.kk-cta__mascot--watch { animation: kk-tick 1s steps(1, end) infinite; transform-origin: 50% 60%; }

@keyframes kk-tick {
  0% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

/* 学習：ティール（いまは非表示） */
.kk-cta--study {
  margin: 0 0 16px;
  border: 2px solid rgba(140, 255, 220, 0.55);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(160deg, #1fc8a8, #1f7ae0);
  box-shadow: 0 10px 28px rgba(31, 180, 200, 0.4);
}
.kk-cta--study .kk-cta__go { color: #157a8c; }

/* ---------- 出題（診断・練習） ---------- */
.kk-fuel { display: flex; gap: 4px; margin: 0; }
.kk-fuel__cell {
  width: 18px;
  height: 22px;
  border: 1px solid var(--kk-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.kk-fuel__cell.is-on { background: linear-gradient(180deg, var(--kk-gold), #ff9a3d); box-shadow: 0 0 8px rgba(255, 186, 61, 0.7); border-color: transparent; }

.kk-alt { display: flex; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.kk-alt__dot { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.kk-alt__dot.is-done { background: var(--grade-color); opacity: 0.6; }
.kk-alt__dot.is-now { background: var(--grade-color); box-shadow: 0 0 10px var(--grade-color); }

/* 宇宙航行の映像（診断） */
.kk-voyage {
  position: relative;
  height: 210px;
  margin: 0 -16px 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--grade-color) 18%, #0b0830), #03030c 75%);
  border-top: 1px solid var(--kk-line);
  border-bottom: 1px solid var(--kk-line);
}
.kk-voyage__nebula {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--grade-color) 35%, transparent), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 122, 217, 0.25), transparent 40%);
  animation: kk-spin 60s linear infinite;
  opacity: 0.7;
}

.kk-warp { position: absolute; inset: 0; }
.kk-warp__layer {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 80px 90px, #cfe9ff, transparent),
    radial-gradient(2px 2px at 140px 40px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 50px 140px, #ffd9f3, transparent),
    radial-gradient(1.6px 1.6px at 120px 120px, #fff6c4, transparent);
  background-size: 160px 160px;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, transparent 6%, #000 22%);
  mask-image: radial-gradient(circle, transparent 6%, #000 22%);
  animation: kk-warp 3s linear infinite;
}
.kk-warp__layer:nth-child(2) { animation-delay: -1s; background-position: 40px 70px; }
.kk-warp__layer:nth-child(3) { animation-delay: -2s; background-position: 90px 20px; }
.kk-warp__lines {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 700px;
  height: 700px;
  margin: -350px 0 0 -350px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.5) 0deg 0.6deg, transparent 0.6deg 9deg);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 45%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 12%, #000 45%, transparent 70%);
  opacity: 0.12;
  animation: kk-spin 40s linear infinite;
  transition: opacity 0.3s ease;
}

@keyframes kk-warp {
  0% { transform: scale(0.25); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes kk-approach {
  0% { transform: scale(0.04); opacity: 0; filter: blur(2px); }
  30% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; filter: none; }
}
@keyframes kk-drift-in { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes kk-warp-text {
  0% { opacity: 0; transform: scale(0.6); letter-spacing: 0.1em; }
  30% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); letter-spacing: 0.6em; }
}
@keyframes kk-ship-idle { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes kk-ship-boost { 0% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -34px); } 100% { transform: translate(-50%, -6px); } }
@keyframes kk-ship-hit {
  0%, 100% { transform: translate(-50%, 0) rotate(0); }
  20% { transform: translate(calc(-50% - 10px), 2px) rotate(-12deg); }
  40% { transform: translate(calc(-50% + 9px), -2px) rotate(10deg); }
  60% { transform: translate(calc(-50% - 6px), 1px) rotate(-6deg); }
  80% { transform: translate(calc(-50% + 4px), 0) rotate(4deg); }
}
@keyframes kk-flame { from { transform: translateX(-50%) scaleY(0.8); opacity: 0.8; } to { transform: translateX(-50%) scaleY(1.2); opacity: 1; } }
@keyframes kk-red-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }

.kk-voyage__dest {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  animation: kk-approach 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.kk-voyage__planet { width: 100%; height: 100%; animation: kk-drift-in 12s 1.6s ease-in-out infinite alternate; }
.kk-voyage__warp {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  margin: 0;
  text-align: center;
  font-family: var(--kk-font-en);
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 16px var(--grade-color), 0 0 30px var(--grade-color);
  animation: kk-warp-text 1.4s ease-out forwards;
  pointer-events: none;
}

.kk-voyage__ship {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 52px;
  height: 64px;
  transform: translateX(-50%);
  animation: kk-ship-idle 1.8s ease-in-out infinite;
}
.kk-voyage__rocket { position: absolute; left: 0; top: 0; font-size: 40px; line-height: 1; transform: rotate(-45deg); }
.kk-voyage__flame {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, #fff6c4, #ffb03d 50%, rgba(255, 90, 60, 0));
  transform-origin: top center;
  animation: kk-flame 0.12s linear infinite alternate;
  filter: blur(0.5px);
}

.kk-voyage__hud {
  position: absolute;
  left: 14px;
  top: 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--grade-color);
  background: rgba(3, 3, 12, 0.55);
  border-radius: 0 8px 8px 0;
}
.kk-voyage__en { margin: 0; font-family: var(--kk-font-en); font-size: 10px; letter-spacing: 0.2em; color: var(--grade-color); }
.kk-voyage__grade { margin: 2px 0 0; font-size: 16px; font-weight: 900; }
.kk-voyage__grade span { margin-left: 8px; font-size: 11px; color: var(--kk-muted); }
.kk-voyage__q {
  position: absolute;
  right: 14px;
  top: 12px;
  margin: 0;
  font-family: var(--kk-font-en);
  font-size: 14px;
  font-weight: 900;
  color: var(--kk-muted);
}

/* 正解：加速 */
.kk-voyage.is-boost .kk-warp__lines { opacity: 0.55; }
.kk-voyage.is-boost .kk-voyage__ship { animation: kk-ship-boost 1s ease-out forwards; }
.kk-voyage.is-boost .kk-voyage__flame { height: 46px; }
/* ミス：被弾 */
.kk-voyage.is-hit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(255, 60, 90, 0.8));
  animation: kk-red-flash 0.8s ease-out forwards;
  pointer-events: none;
}
.kk-voyage.is-hit .kk-voyage__ship { animation: kk-ship-hit 0.6s ease-in-out; }
.kk-voyage.is-hit .kk-voyage__flame { height: 8px; }

.kk-timebar { height: 6px; margin-bottom: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.kk-timebar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--kk-ng), var(--kk-gold), var(--grade-color));
  transform-origin: left;
  animation: kk-shrink var(--limit) linear forwards;
}
.kk-timebar.is-stopped span { animation-play-state: paused; }

.kk-qcard {
  position: relative;
  padding: 16px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--grade-color) 50%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--grade-color) 22%, transparent), transparent 60%),
    var(--kk-panel);
  box-shadow: 0 0 30px color-mix(in srgb, var(--grade-color) 20%, transparent);
}
.kk-qcard__meta { display: flex; gap: 6px; margin: 0 0 10px; }
.kk-qcard__inst { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--kk-muted); }

.kk-prompt {
  margin: 0;
  font-family: var(--kk-font-mincho);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.kk-prompt__mark {
  padding: 0 4px;
  border-bottom: 3px solid var(--grade-color);
  color: #fff;
  text-shadow: 0 0 12px var(--grade-color);
}
.kk-prompt__big { display: inline-block; font-size: 72px; line-height: 1.2; text-shadow: 0 0 20px var(--grade-color); }
.kk-prompt__word { font-size: 34px; }
.kk-prompt__part { font-size: 24px; color: var(--kk-muted); }
.kk-choices:not(.kk-choices--kanji) .kk-choice__text { font-size: 16px; }
.kk-prompt__arrow { margin: 0 12px; color: var(--grade-color); }
.kk-prompt__blank { color: var(--kk-muted); }

.kk-judge { margin: 12px 0 0; text-align: center; font-size: 20px; font-weight: 900; animation: kk-pop 0.35s ease both; }
.kk-judge.is-ok { color: var(--kk-ok); }
.kk-judge.is-ng { color: var(--kk-ng); }

.kk-choices { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.kk-choices--kanji { grid-template-columns: 1fr 1fr; }
.kk-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--kk-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
.kk-choice:not(:disabled):active { transform: scale(0.97); border-color: var(--grade-color); background: rgba(255, 255, 255, 0.16); }
.kk-choice__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--kk-font-en);
  font-size: 11px;
  color: var(--kk-muted);
}
.kk-choice__text { font-size: 18px; font-weight: 700; }
.kk-choices--kanji .kk-choice__text { font-family: var(--kk-font-mincho); font-size: 24px; }
.kk-choice.is-correct { border-color: var(--kk-ok); background: rgba(94, 255, 168, 0.18); box-shadow: 0 0 16px rgba(94, 255, 168, 0.4); }
.kk-choice.is-wrong { border-color: var(--kk-ng); background: rgba(255, 90, 122, 0.18); }
.kk-choice.is-dim { opacity: 0.4; }

.kk-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--kk-gold);
  border-radius: 10px;
  background: rgba(255, 226, 122, 0.08);
  animation: kk-fade-in 0.3s ease both;
}
.kk-note__answer { margin: 0; font-size: 15px; }
.kk-note__answer b { font-size: 20px; color: var(--kk-gold); }
.kk-note__text { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--kk-muted); }

.kk-counter { margin: 0; font-family: var(--kk-font-en); font-weight: 900; }
.kk-counter small { color: var(--kk-muted); }
.kk-play > .kk-meter { margin-bottom: 14px; }

/* ---------- 結果 ---------- */
.kk-result__lead { margin: 20px 0 10px; text-align: center; font-weight: 700; color: var(--kk-muted); }
.kk-result__card {
  position: relative;
  padding: 20px 16px 24px;
  border: 1px solid color-mix(in srgb, var(--grade-color) 60%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--grade-color) 30%, transparent), transparent 65%),
    var(--kk-panel);
  text-align: center;
  box-shadow: 0 0 40px color-mix(in srgb, var(--grade-color) 30%, transparent);
  animation: kk-pop 0.6s ease both;
}
.kk-result__planet { width: 200px; height: 200px; animation: kk-float 6s ease-in-out infinite; }
.kk-result__en { margin: 4px 0 0; font-family: var(--kk-font-en); font-size: 12px; letter-spacing: 0.25em; color: var(--grade-color); }
.kk-result__planetname { margin: 4px 0 0; font-size: 22px; font-weight: 900; }
.kk-result__grade {
  margin: 8px 0 0;
  font-family: var(--kk-font-mincho);
  font-size: 64px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 20px var(--grade-color);
}
.kk-result__grade small { margin-left: 6px; font-family: var(--kk-font-body); font-size: 20px; }
.kk-result__kanken { margin-right: 4px; font-size: 26px; vertical-align: middle; }
.kk-result__level { margin: 6px 0 0; font-size: 13px; color: var(--kk-muted); }
.kk-result__comment { margin: 14px 0 0; font-size: 15px; line-height: 1.7; font-weight: 700; }
.kk-result__stats { margin: 10px 0 0; font-size: 13px; color: var(--kk-muted); }
.kk-result__stats b { color: var(--kk-gold); font-size: 18px; }

.kk-newbest {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--kk-gold);
  color: #0b0820;
  font-family: var(--kk-font-en);
  font-size: 14px;
  font-weight: 900;
  animation: kk-pop 0.6s 0.3s ease both;
}

.kk-rankinfo { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 700; }
.kk-rankinfo b { font-size: 24px; color: var(--kk-gold); }
.kk-rankinfo small { color: var(--kk-muted); }
.kk-rankinfo.is-good { color: var(--kk-gold); }
.kk-rankinfo.is-muted { font-size: 13px; color: var(--kk-muted); }

.kk-review { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kk-review__item { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kk-line); }
.kk-review__head { display: flex; align-items: center; gap: 8px; margin: 0; }
.kk-review__inst { font-size: 12px; color: var(--kk-muted); }
.kk-review__mark { margin-left: auto; font-weight: 900; color: var(--kk-muted); }
.kk-review__mark.is-ok { color: var(--kk-ok); }
.kk-review__mark.is-ng { color: var(--kk-ng); }
.kk-review__prompt { margin: 8px 0 0; font-family: var(--kk-font-mincho); font-size: 18px; }
.kk-review__prompt .kk-prompt__big { font-size: 32px; }
.kk-review__prompt .kk-prompt__word { font-size: 18px; }
.kk-review__answer { margin: 4px 0 0; }
.kk-review__answer b { color: var(--kk-gold); font-size: 18px; }
.kk-review__note { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--kk-muted); }

/* ---------- タイムアタック ---------- */
.kk-rules { margin: 0 0 14px; font-size: 14px; line-height: 1.8; }
.kk-rules b { color: var(--kk-ng); }
.kk-name { display: grid; gap: 6px; }
.kk-name__label { font-size: 12px; font-weight: 700; color: var(--kk-muted); }
.kk-name__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--kk-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--kk-text);
  font: inherit;
  font-size: 16px;
}
.kk-name__input:focus { outline: none; border-color: var(--kk-cyan); box-shadow: 0 0 0 3px rgba(127, 227, 255, 0.2); }

.kk-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.kk-grade {
  display: grid;
  border: 1px solid color-mix(in srgb, var(--grade-color) 45%, transparent);
  border-radius: 16px;
  background: var(--kk-panel);
  overflow: hidden;
}
.kk-grade__play {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  border: none;
  background: transparent;
}
.kk-grade__planet { width: 58px; height: 58px; }
.kk-grade__label { font-size: 18px; font-weight: 900; color: var(--grade-color); }
.kk-grade__best { font-size: 10px; color: var(--kk-muted); }
.kk-grade__rank {
  padding: 6px 0;
  border: none;
  border-top: 1px solid var(--kk-line);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  font-weight: 700;
  color: var(--kk-muted);
}

.kk-loading { display: grid; place-items: center; min-height: 80vh; text-align: center; }
.kk-loading__planet { width: 160px; height: 160px; animation: kk-spin 2.5s linear infinite; }
.kk-loading__text { margin: 16px 0 0; font-weight: 900; }
.kk-loading__count { margin: 6px 0 0; font-family: var(--kk-font-en); font-size: 28px; letter-spacing: 0.3em; color: var(--grade-color); animation: kk-twinkle 0.6s ease-in-out infinite alternate; }

.kk-ta__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 48px; }
.kk-ta__grade { margin: 0; text-align: center; font-weight: 900; color: var(--grade-color); }
.kk-ta__score { margin: 0; font-size: 14px; }
.kk-ta__score b { font-family: var(--kk-font-en); font-size: 28px; color: var(--kk-gold); }

.kk-ta__clock { margin: 4px 0 6px; }
.kk-ta__time { margin: 0; text-align: center; font-family: var(--kk-font-en); font-size: 44px; font-weight: 900; line-height: 1.1; }
.kk-ta__time small { font-family: var(--kk-font-body); font-size: 16px; }
.kk-ta__bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.kk-ta__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--grade-color), var(--kk-cyan)); transition: width 0.1s linear; }
.kk-ta__clock.is-danger .kk-ta__time { color: var(--kk-ng); animation: kk-twinkle 0.5s ease-in-out infinite alternate; }
.kk-ta__clock.is-danger .kk-ta__bar span { background: var(--kk-ng); }

.kk-ta__combo { position: relative; height: 28px; margin: 0 0 6px; text-align: center; }
.kk-combo { font-family: var(--kk-font-en); font-weight: 900; color: var(--kk-gold); text-shadow: 0 0 10px rgba(255, 226, 122, 0.8); }
.kk-flash { position: absolute; right: 8px; top: 0; font-weight: 900; font-size: 20px; animation: kk-flash 0.7s ease forwards; }
.kk-flash.is-ok { color: var(--kk-ok); }
.kk-flash.is-ng { color: var(--kk-ng); }
.kk-ta__q { animation: kk-fade-in 0.18s ease both; }

/* ---------- ランキング ---------- */
.kk-tabs { display: flex; gap: 6px; margin: 0 -16px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.kk-tabs::-webkit-scrollbar { display: none; }
.kk-tab {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--kk-line);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--kk-muted);
}
.kk-tab.is-active { border-color: var(--grade-color); background: var(--grade-color); color: #0b0820; }

.kk-ranking { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kk-ranking__row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.kk-ranking__row:nth-child(-n + 3) { background: rgba(255, 226, 122, 0.1); }
.kk-ranking__row.is-mine { outline: 2px solid var(--kk-cyan); background: rgba(127, 227, 255, 0.12); }
.kk-ranking__pos { grid-row: 1 / span 2; text-align: center; font-family: var(--kk-font-en); font-size: 18px; font-weight: 900; }
.kk-ranking__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ranking__name small { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--kk-cyan); color: #0b0820; font-size: 10px; }
.kk-ranking__score { grid-row: 1 / span 2; grid-column: 3; font-size: 13px; }
.kk-ranking__score b { font-family: var(--kk-font-en); font-size: 22px; color: var(--kk-gold); }
.kk-ranking__sub { font-size: 11px; color: var(--kk-muted); }

/* ---------- 学習 ---------- */
.kk-studylist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kk-studyitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--grade-color) 40%, transparent);
  border-radius: 16px;
  background: var(--kk-panel);
  text-align: left;
}
.kk-studyitem__planet { flex: none; width: 60px; height: 60px; }
.kk-studyitem__body { display: grid; gap: 6px; flex: 1; }
.kk-studyitem__label { font-size: 18px; font-weight: 900; color: var(--grade-color); }
.kk-studyitem__label small { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--kk-muted); }
.kk-studyitem__count { font-size: 12px; color: var(--kk-muted); }
.kk-studyitem__count em { font-style: normal; color: var(--kk-ng); }

.kk-gradehead { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.kk-gradehead__planet { flex: none; width: 110px; height: 110px; animation: kk-float 6s ease-in-out infinite; }
.kk-gradehead__en { margin: 0; font-family: var(--kk-font-en); font-size: 11px; letter-spacing: 0.2em; color: var(--grade-color); }
.kk-gradehead__label { margin: 2px 0; font-family: var(--kk-font-mincho); font-size: 40px; font-weight: 900; line-height: 1.1; }
.kk-gradehead__label small { margin-left: 8px; font-family: var(--kk-font-body); font-size: 15px; color: var(--kk-muted); }
.kk-gradehead__info { margin: 0; font-size: 12px; color: var(--kk-muted); }

.kk-progress { margin: 0 0 8px; font-size: 14px; }
.kk-progress b { font-family: var(--kk-font-en); font-size: 22px; color: var(--kk-gold); }
.kk-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

/* ---------- ホバー ----------
   タッチ端末ではタップした位置に :hover が残り、次の問題の同じ位置のボタンまで光ってしまう。
   マウスなど本当にホバーできる端末だけで効かせる。
   選択肢は、回答後にマウスを動かすまで光らせない（.kk-hover-ok は app.ts で付け外しする）。 */
@media (hover: hover) and (pointer: fine) {
  .kk-back:hover { color: var(--kk-text); border-color: var(--kk-cyan); }
  .kk-btn:not(:disabled):hover { transform: translateY(-2px); }
  .kk-cta:hover { transform: translateY(-3px); }
  .kk-hover-ok .kk-choice:not(:disabled):hover { border-color: var(--grade-color); background: rgba(255, 255, 255, 0.1); }
  .kk-grade__play:hover { background: rgba(255, 255, 255, 0.06); }
  .kk-grade__rank:hover { color: var(--kk-gold); }
  .kk-studyitem:hover { border-color: var(--grade-color); }
}

@media (max-width: 380px) {
  .kk-title__logo { font-size: 58px; }
  .kk-prompt { font-size: 22px; }
  .kk-grades { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .kk-timebar span { animation-duration: var(--limit) !important; }
}