/* =========================================
   おみおみクイズ2026 — Duolingo風スタイル
   iPad Pro 11" (1194×834 landscape) 最適化
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "LINE Seed JP", "Hiragino Sans", sans-serif;
  font-weight: 800;
  color: #3C3C3C;
  background: #FFE3EC;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ========== カラーパレット ========== */
:root {
  --green: #58CC02;
  --green-dark: #43A002;
  --blue: #1CB0F6;
  --blue-dark: #148ECB;
  --yellow: #FFC800;
  --yellow-dark: #CC9F00;
  --red: #FF4B4B;
  --red-dark: #CC3B3B;
  --purple: #CE82FF;
  --purple-dark: #A05FCC;
  --pink: #FF8FB7;
  --pink-dark: #CC7292;
  --ink: #3C3C3C;
  --ink-soft: #6B6B6B;
  --cream: #FFF9EC;
}

/* ========== 背景グラデ ========== */
.bg-gradient {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #FFE3EC 0%, #FFF4C2 50%, #C2F0FF 100%);
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite;
  z-index: 0;
}

@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ========== 浮遊絵文字 ========== */
.bg-floaters {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floater {
  position: absolute;
  font-size: 56px;
  opacity: 0.55;
  animation: floatY 8s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
}

.f1 { top: 8%;  left: 6%;  animation-delay: 0s;    font-size: 72px; }
.f2 { top: 14%; right: 8%; animation-delay: 1.2s;  font-size: 64px; }
.f3 { top: 72%; left: 4%;  animation-delay: 2.4s;  font-size: 80px; }
.f4 { top: 20%; left: 48%; animation-delay: 0.6s;  font-size: 48px; }
.f5 { bottom: 10%; right: 6%; animation-delay: 3.0s; font-size: 68px; }
.f6 { top: 50%; right: 14%; animation-delay: 1.8s;  font-size: 54px; }
.f7 { bottom: 20%; left: 22%; animation-delay: 2.0s; font-size: 60px; }
.f8 { top: 60%; left: 60%; animation-delay: 3.6s;   font-size: 44px; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-24px) rotate(6deg); }
}

/* ========== 紙吹雪キャンバス ========== */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  display: none;
}

#confetti-canvas.active {
  display: block;
}

/* ========== スクリーン共通 ========== */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* ========================================
   表紙
========================================= */
.cover-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.cover-badge {
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 24px;
  box-shadow: 0 6px 0 var(--yellow-dark);
  transform: translateY(-20px);
  opacity: 0;
  animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.cover-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  gap: 4px;
}

.title-line {
  font-size: 108px;
  background: linear-gradient(180deg, #FF4B9F 0%, #FF8B3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 0 rgba(255, 75, 159, 0.15);
  letter-spacing: -2px;
  opacity: 0;
  transform: translateY(-80px) rotate(-6deg);
  animation: dropIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.title-line:nth-child(1) { animation-delay: 0.2s; }
.title-line:nth-child(2) { animation-delay: 0.45s; }

.title-year {
  font-size: 96px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  padding: 4px 36px;
  border-radius: 28px;
  box-shadow: 0 10px 0 var(--blue-dark);
  margin-top: 12px;
  opacity: 0;
  transform: translateY(-40px) scale(0.7);
  animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
  -webkit-text-fill-color: #fff;
}

.cover-sub {
  font-size: 32px;
  color: var(--ink-soft);
  letter-spacing: 1px;
  opacity: 0;
  animation: fadeIn 0.8s ease 1.2s forwards;
}

.btn-start {
  margin-top: 16px;
  font-size: 40px;
  padding: 22px 60px;
  opacity: 0;
  transform: scale(0.7);
  animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards,
             btnPulse 1.8s ease-in-out 2.3s infinite;
}

/* ========================================
   問題 / 答え画面
========================================= */
.quiz {
  padding: 28px 48px;
  justify-content: space-between;
}

.quiz-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 40px;
  color: var(--ink);
}

.q-current {
  color: var(--green);
  font-size: 54px;
}

.q-slash { color: var(--ink-soft); font-size: 30px; }
.q-total { color: var(--ink-soft); font-size: 30px; }

.progress {
  width: 100%;
  height: 18px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}

/* カードステージ */
.card-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  padding: 16px 0;
  max-height: 560px;
}

.card {
  width: min(860px, 92%);
  height: 100%;
  max-height: 560px;
  min-height: 420px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.68, -0.2, 0.27, 1.3);
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #fff;
  box-shadow:
    0 12px 0 rgba(0,0,0,0.08),
    0 20px 40px rgba(0,0,0,0.08);
}

.card-front {
  border: 6px solid var(--card-color, var(--green));
}

.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--card-color, var(--green)) 0%, var(--card-color-2, var(--blue)) 100%);
  color: #fff;
  border: 6px solid rgba(255,255,255,0.4);
}

.card-label {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: #fff;
  background: var(--card-color, var(--green));
  box-shadow: 0 6px 0 rgba(0,0,0,0.12);
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
}

.card-back .card-label {
  background: #fff;
  color: var(--card-color, var(--green));
}

.card-text {
  font-size: 44px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.card-back .card-text {
  color: #fff;
  font-size: 56px;
  text-shadow: 0 4px 0 rgba(0,0,0,0.15);
}

/* 答え面のクロスフェード（動画 ↔ 答えテキスト） */
.back-stack {
  display: grid;
  place-items: center;
  width: 100%;
}

.back-stack > * {
  grid-area: 1 / 1;
  transition: opacity 0.45s ease;
  max-width: 100%;
}

/* YouTube iframe 埋め込みメディア */
.card-media {
  display: none;
  width: min(640px, 92%);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  background: #000;
}

.card-back.has-media .card-media {
  display: block;
}

.card-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* show-media 状態: 動画を表示、答えテキストを隠す */
.card-back.show-media .card-media {
  opacity: 1;
  pointer-events: auto;
}
.card-back.show-media .a-text {
  opacity: 0;
  pointer-events: none;
}
/* 非 show-media 状態: 答えテキストを表示、動画を隠す */
.card-back:not(.show-media) .card-media {
  opacity: 0;
  pointer-events: none;
}
.card-back:not(.show-media) .a-text {
  opacity: 1;
}

/* 答え登場時の star burst */
.starburst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.card.flipped .card-back:not(.show-media) .starburst {
  display: block;
}

.starburst span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #FFF;
  border-radius: 50%;
  opacity: 0;
  animation: starShoot 1s ease-out forwards;
}

.card.flipped .starburst span { opacity: 1; }

.starburst span:nth-child(1) { --angle:   0deg; --dist: 340px; animation-delay: 0.3s; }
.starburst span:nth-child(2) { --angle:  45deg; --dist: 300px; animation-delay: 0.35s; }
.starburst span:nth-child(3) { --angle:  90deg; --dist: 280px; animation-delay: 0.4s; }
.starburst span:nth-child(4) { --angle: 135deg; --dist: 300px; animation-delay: 0.45s; }
.starburst span:nth-child(5) { --angle: 180deg; --dist: 340px; animation-delay: 0.3s; }
.starburst span:nth-child(6) { --angle: 225deg; --dist: 300px; animation-delay: 0.35s; }
.starburst span:nth-child(7) { --angle: 270deg; --dist: 280px; animation-delay: 0.4s; }
.starburst span:nth-child(8) { --angle: 315deg; --dist: 300px; animation-delay: 0.45s; }

@keyframes starShoot {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateX(var(--dist))
      rotate(calc(-1 * var(--angle)))
      scale(1.2);
    opacity: 0;
  }
}

/* アクションボタンエリア */
.quiz-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
  min-height: 100px;
  position: relative;
}

.btn-reveal, .btn-next {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.btn-reveal.visible, .btn-next.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
   ボタン共通（Duolingo風）
========================================= */
.btn {
  font-family: inherit;
  font-weight: 800;
  border: none;
  cursor: pointer;
  border-radius: 22px;
  padding: 18px 44px;
  font-size: 32px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 0 var(--green-dark);
  text-transform: uppercase;
}

.btn-reveal {
  background: var(--blue);
  box-shadow: 0 8px 0 var(--blue-dark);
}

.btn-next {
  background: var(--purple);
  box-shadow: 0 8px 0 var(--purple-dark);
}

.btn:active,
.btn.pressed {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--green-dark);
}
.btn-reveal:active,
.btn-reveal.pressed {
  box-shadow: 0 2px 0 var(--blue-dark);
}
.btn-next:active,
.btn-next.pressed {
  box-shadow: 0 2px 0 var(--purple-dark);
}

.btn-arrow {
  font-size: 28px;
}

/* ========================================
   フィナーレ
========================================= */
.finale-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.finale-emoji-row {
  display: flex;
  gap: 14px;
  font-size: 56px;
}

.finale-emoji-row span {
  display: inline-block;
  animation: wiggle 1.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.1));
}
.finale-emoji-row span:nth-child(1) { animation-delay: 0.0s; }
.finale-emoji-row span:nth-child(2) { animation-delay: 0.2s; }
.finale-emoji-row span:nth-child(3) { animation-delay: 0.4s; }
.finale-emoji-row span:nth-child(4) { animation-delay: 0.6s; }
.finale-emoji-row span:nth-child(5) { animation-delay: 0.8s; }

@keyframes wiggle {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

.finale-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 0.95;
}

.finale-line {
  font-size: 80px;
  color: #fff;
  letter-spacing: 2px;
  opacity: 0;
  transform: scale(0.5);
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.finale-line:nth-child(1) {
  animation-delay: 0.2s;
  color: var(--yellow);
  text-shadow: 0 6px 0 var(--yellow-dark);
}
.finale-line:nth-child(2) {
  animation-delay: 0.5s;
  color: var(--red);
  text-shadow: 0 8px 0 var(--red-dark);
  font-size: 148px;
  line-height: 1;
}
.finale-line:nth-child(3) {
  animation-delay: 0.8s;
  color: var(--blue);
  text-shadow: 0 6px 0 var(--blue-dark);
}

.finale-big sup {
  font-size: 56px;
  vertical-align: super;
}

.finale-name {
  font-size: 96px;
  background: linear-gradient(180deg, #FF4B9F 0%, #FF8B3D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8px;
  letter-spacing: 4px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}

.finale-msg {
  font-size: 32px;
  color: var(--ink-soft);
  line-height: 1.7;
  opacity: 0;
  animation: fadeIn 0.8s ease 1.5s forwards;
}

/* ========================================
   共通アニメーション
========================================= */
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(8px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dropIn {
  0%   { opacity: 0; transform: translateY(-80px) rotate(-6deg); }
  60%  { opacity: 1; transform: translateY(12px) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes btnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 画面の切り替えトランジション */
.screen.leaving {
  animation: screenLeave 0.35s ease forwards;
}

.screen.entering {
  animation: screenEnter 0.45s ease forwards;
}

@keyframes screenLeave {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

@keyframes screenEnter {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}