/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #FFF8F0;
  --surface:   #FFFFFF;
  --text:      #2D2D2D;
  --text-sub:  #6B6B6B;
  --radius:    20px;
  --shadow:    0 6px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
}

body {
  font-family: "Rounded Mplus 1c", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN",
               "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Floating bubbles background ──────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,200,100,.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(100,180,255,.18) 0%, transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(180,120,255,.15) 0%, transparent 40%),
    radial-gradient(circle at 10% 85%, rgba(100,220,150,.15) 0%, transparent 35%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 32px 16px 16px;
  background: linear-gradient(135deg, #FF6B6B 0%, #FFA500 40%, #FFD700 100%);
  box-shadow: var(--shadow);
}

.header-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4);
  line-height: 1.1;
}

.header-sub {
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  color: rgba(255,255,255,.9);
  margin-top: 6px;
  font-weight: 600;
}

/* CSS Art — Rainbow cloud decoration in header */
.header-deco {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.deco-star {
  width: 32px; height: 32px;
  background: #fff;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  opacity: .85;
  animation: spin-star 6s linear infinite;
}
.deco-star:nth-child(2) { animation-delay: -2s; width:24px; height:24px; background:#FFD700; }
.deco-star:nth-child(3) { animation-delay: -4s; width:20px; height:20px; background:#90EE90; }
@keyframes spin-star { to { transform: rotate(360deg); } }

/* ─── Nav / Category tabs ───────────────────────────────────────────────────── */
.nav-wrapper {
  position: relative;
  z-index: 10;
  background: var(--surface);
  padding: 16px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* スクロール矢印ボタン共通 */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .2s, background .2s;
  user-select: none;
}
.scroll-arrow:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transform: translateY(-50%) scale(1.12);
}
.scroll-arrow:active { transform: translateY(-50%) scale(.96); }
.scroll-arrow.hidden { opacity: 0; pointer-events: none; }
.scroll-arrow-left  { left: 4px; }
.scroll-arrow-right { right: 4px; }

/* タブ本体 — 矢印ぶん左右にpaddingを確保 */
#categoryTabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 48px 4px;
  scrollbar-width: none;
}
#categoryTabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border: 3px solid transparent;
  border-radius: 16px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all .22s ease;
  font-family: inherit;
}
.cat-tab:hover {
  background: color-mix(in srgb, var(--tab-color) 12%, white);
  border-color: var(--tab-color);
  transform: translateY(-2px);
}
.cat-tab.active {
  background: var(--tab-color);
  border-color: var(--tab-color);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--tab-color) 50%, transparent);
  transform: translateY(-3px);
}
.tab-icon  { font-size: 1.6rem; }
.tab-label { font-size: .85rem; font-weight: 800; }
.tab-ja    { font-size: .72rem; opacity: .85; }

/* ─── Main content ──────────────────────────────────────────────────────────── */
main {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* Quiz start button */
#startQuizBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,107,.45);
  transition: transform .18s, box-shadow .18s;
}
#startQuizBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,107,.55);
}
#startQuizBtn::before { content: "🎯"; font-size: 1.2rem; }

/* ─── Word Grid ─────────────────────────────────────────────────────────────── */
#wordGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

/* ─── Word Card ─────────────────────────────────────────────────────────────── */
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to   { opacity: 1; transform: translateY(0)   scale(1);  }
}

.word-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 12px 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  border: 3px solid transparent;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: card-in .4s ease both;
  user-select: none;
}

.word-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: var(--card-color);
}

@keyframes pulse-speak {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
.word-card.speaking {
  animation: pulse-speak .6s ease;
  border-color: var(--card-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-color) 30%, transparent);
}

/* CSS Art: coloured top stripe */
.word-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--card-color);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* emoji container — CSS-styled illustrated box */
.card-emoji {
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 10px;
  /* CSS Art: soft circular backdrop */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    color-mix(in srgb, var(--card-color) 20%, white) 0%,
    color-mix(in srgb, var(--card-color) 8%,  white) 100%
  );
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.8),
    inset 0 -2px 6px color-mix(in srgb, var(--card-color) 20%, transparent),
    0 2px 8px color-mix(in srgb, var(--card-color) 18%, transparent);
}
/* 数字テキスト（21〜1000）が円の中に収まるようサイズ調整 */
.card-emoji[data-numlen="2"] { font-size: 2.2rem; }
.card-emoji[data-numlen="3"] { font-size: 1.65rem; font-weight: 900; }
.card-emoji[data-numlen="4"] { font-size: 1.3rem;  font-weight: 900; }

.card-en {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--card-color);
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.card-ja {
  font-size: .88rem;
  color: var(--text-sub);
  font-weight: 600;
  margin-bottom: 8px;
}

.card-speaker {
  font-size: .9rem;
  opacity: .55;
}

/* Level badges */
.badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.badge-k { background: #FFF3E0; color: #E65100; }
.badge-e { background: #E3F2FD; color: #1565C0; }

/* ─── Quiz Section ──────────────────────────────────────────────────────────── */
#quizSection {
  max-width: 480px;
  margin: 0 auto;
}

.quiz-card {
  background: var(--surface);
  border-radius: 28px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.quiz-progress {
  font-size: .9rem;
  color: var(--text-sub);
  font-weight: 700;
  margin-bottom: 12px;
}

/* CSS Art: quiz emoji display */
#quizEmoji {
  font-size: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 16px;
  /* layered radial gradient for 3-D sphere effect */
  background: radial-gradient(
    circle at 33% 33%,
    rgba(255,255,255,.95) 0%,
    rgba(255,240,200,.6)  40%,
    rgba(255,210,100,.25) 100%
  );
  box-shadow:
    0 8px 32px rgba(255,180,0,.25),
    inset 0 -4px 12px rgba(0,0,0,.06),
    inset 0 4px 10px rgba(255,255,255,.8);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

#quizJa {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 24px;
  color: var(--text);
}

#quizChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quiz-choice {
  padding: 16px 8px;
  font-size: 1.1rem;
  font-weight: 800;
  font-family: inherit;
  background: #f5f5f5;
  border: 3px solid #e0e0e0;
  border-radius: 16px;
  cursor: pointer;
  transition: all .18s;
}
.quiz-choice:not(:disabled):hover {
  background: #EDE7F6;
  border-color: #9C27B0;
  transform: scale(1.04);
}
.quiz-choice.correct {
  background: #E8F5E9;
  border-color: #43A047;
  color: #1B5E20;
  animation: bounce .4s ease;
}
.quiz-choice.wrong {
  background: #FFEBEE;
  border-color: #EF5350;
  color: #B71C1C;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.1); }
  60%       { transform: scale(.95); }
}

.quiz-feedback {
  margin-top: 18px;
  font-size: 1.4rem;
  font-weight: 900;
  padding: 10px 20px;
  border-radius: 50px;
  display: none;
  animation: pop .3s ease;
}
@keyframes pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.quiz-feedback.ok { background: #FFF9C4; color: #F57F17; }
.quiz-feedback.ng { background: #FCE4EC; color: #AD1457; }

/* ─── Quiz Result ───────────────────────────────────────────────────────────── */
.quiz-result {
  text-align: center;
  padding: 40px 24px;
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.result-stars  { font-size: 3rem; margin-bottom: 12px; animation: pop .5s ease; }
.quiz-result h2 { font-size: 2rem; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.result-score  { font-size: 3rem; font-weight: 900; color: #FF6B6B; }
.result-pct    { font-size: 1.2rem; color: var(--text-sub); margin-bottom: 24px; }

.btn-retry, .btn-back {
  display: inline-block;
  margin: 6px;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.btn-retry {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,107,.4);
}
.btn-retry:hover { transform: translateY(-2px); }
.btn-back {
  background: #f0f0f0;
  color: var(--text);
}
.btn-back:hover { background: #e0e0e0; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 20px;
  font-size: .8rem;
  color: #aaa;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #wordGrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .card-emoji { width: 70px; height: 70px; font-size: 2.8rem; }
  #quizEmoji  { width: 110px; height: 110px; font-size: 4.5rem; }
  #quizChoices { gap: 8px; }
}

/* Google Fonts import (rounded, child-friendly) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800;900&display=swap');