/* ─── Site Nav (shared header links) ────────────────────────────────────────── */
.site-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.site-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 24px;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-radius: 50px;
  font-size: .95rem;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.3);
  transition: background .2s, border-color .2s, color .2s;
}
.site-nav-link small {
  font-size: .7rem;
  font-weight: 600;
  opacity: .85;
}
.site-nav-link:hover {
  background: rgba(255,255,255,.35);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.site-nav-link.active {
  background: rgba(255,255,255,.9);
  border-color: #fff;
  color: #E65100;
}

/* ─── Phrases Main Layout ────────────────────────────────────────────────────── */
.phrases-main {
  position: relative;
  z-index: 5;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ─── Situation Tabs ────────────────────────────────────────────────────────── */
#situationTabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 48px 4px;
  scrollbar-width: none;
}
#situationTabs::-webkit-scrollbar { display: none; }

.sit-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;
  font-family: inherit;
  transition: all .22s ease;
}
.sit-tab:hover {
  background: color-mix(in srgb, var(--sit-color) 12%, white);
  border-color: var(--sit-color);
  transform: translateY(-2px);
}
.sit-tab.active {
  background: var(--sit-color);
  border-color: var(--sit-color);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sit-color) 50%, transparent);
  transform: translateY(-3px);
}

/* ─── CSS Art Scenes ─────────────────────────────────────────────────────────── */
.scene {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
}

/* Characters layer */
.scene-chars {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 28px 10px;
}

.scene-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.scene-char .char-emoji {
  font-size: 3.8rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
  display: block;
  animation: char-float 2.8s ease-in-out infinite;
}
.scene-char.char-right .char-emoji { animation-delay: .7s; }

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

.scene-char .char-name {
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  background: rgba(0,0,0,.28);
  padding: 2px 9px;
  border-radius: 20px;
}

/* ── Morning scene ─────────────────────────────────────────── */
.scene-morning {
  background: linear-gradient(180deg,
    #5BA3D9 0%, #87CEEB 52%,
    #98D870 52%, #6CBF45 100%
  );
}
/* Sun */
.scene-morning::before {
  content: "";
  position: absolute;
  top: 18px; right: 34px;
  width: 52px; height: 52px;
  background: radial-gradient(circle at 38% 38%, #FFE566 55%, #FFB800 100%);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,210,0,.75), 0 0 48px rgba(255,210,0,.3);
  animation: sun-glow 4s ease-in-out infinite;
}
@keyframes sun-glow {
  0%,100% { box-shadow: 0 0 22px rgba(255,210,0,.75), 0 0 48px rgba(255,210,0,.3); }
  50%     { box-shadow: 0 0 34px rgba(255,210,0,.95), 0 0 68px rgba(255,210,0,.5); }
}
/* Cloud */
.scene-morning::after {
  content: "";
  position: absolute;
  top: 24px; left: 18px;
  width: 76px; height: 28px;
  background: rgba(255,255,255,.92);
  border-radius: 50px;
  box-shadow: 22px -10px 0 8px rgba(255,255,255,.92),
              48px  2px 0 4px rgba(255,255,255,.92);
  animation: cloud-drift 12s linear infinite;
}
@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(12px); }
  100% { transform: translateX(0); }
}

/* ── Classroom scene ───────────────────────────────────────── */
.scene-classroom {
  background: linear-gradient(160deg, #F5EDDA 0%, #EAD9BB 100%);
}
/* Blackboard */
.scene-classroom::before {
  content: "";
  position: absolute;
  top: 14px; left: 18px;
  width: 120px; height: 72px;
  background: linear-gradient(135deg, #2E7D32, #388E3C);
  border-radius: 6px;
  border: 4px solid #795548;
  box-shadow: inset 0 0 12px rgba(0,0,0,.25), 2px 2px 8px rgba(0,0,0,.15);
}
/* Chalk writing effect */
.scene-classroom::after {
  content: "ABC 123";
  position: absolute;
  top: 38px; left: 26px;
  font-size: .75rem;
  font-weight: 900;
  color: rgba(255,255,255,.7);
  letter-spacing: 2px;
  font-family: monospace;
}

/* ── Shop scene ────────────────────────────────────────────── */
.scene-shop {
  background: linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 100%);
}
/* Shop sign */
.scene-shop::before {
  content: "🏪 SHOP";
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 900;
  color: #E65100;
  background: rgba(255,255,255,.85);
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid #FFCC80;
  white-space: nowrap;
}
/* Counter */
.scene-shop::after {
  content: "";
  position: absolute;
  bottom: 50px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 14px;
  background: linear-gradient(180deg, #A1887F, #6D4C41);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* ── Kitchen scene ─────────────────────────────────────────── */
.scene-kitchen {
  background: linear-gradient(160deg, #FFF8F0 0%, #FFE4CC 100%);
}
/* Window */
.scene-kitchen::before {
  content: "";
  position: absolute;
  top: 14px; right: 22px;
  width: 60px; height: 54px;
  background: linear-gradient(180deg, #87CEEB 0%, #B5E2F8 100%);
  border: 4px solid #C4A882;
  border-radius: 4px;
  box-shadow: inset 1px 1px 6px rgba(255,255,255,.6);
}
/* Curtain lines on window */
.scene-kitchen::after {
  content: "";
  position: absolute;
  top: 14px; right: 46px;
  width: 3px; height: 54px;
  background: rgba(196,168,130,.5);
}
/* Table */
/* (extra element via .scene-table, added by JS would be tricky; use bg instead) */

/* ── Park scene ────────────────────────────────────────────── */
.scene-park {
  background: linear-gradient(180deg,
    #5BBAED 0%, #90CAF9 52%,
    #81C784 52%, #4CAF50 100%
  );
}
/* Tree left */
.scene-park::before {
  content: "🌳";
  position: absolute;
  bottom: 22px; left: 12px;
  font-size: 4rem;
  filter: drop-shadow(2px 3px 5px rgba(0,0,0,.2));
}
/* Tree right */
.scene-park::after {
  content: "🌲";
  position: absolute;
  bottom: 22px; right: 12px;
  font-size: 3.5rem;
  filter: drop-shadow(2px 3px 5px rgba(0,0,0,.2));
}

/* ── Party scene ───────────────────────────────────────────── */
.scene-party {
  background: linear-gradient(160deg, #FCE4EC 0%, #F8BBD0 55%, #FFF9C4 55%, #FFF59D 100%);
}
/* Balloons */
.scene-party::before {
  content: "🎈🎈🎈";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  letter-spacing: 4px;
  animation: balloon-float 3s ease-in-out infinite;
}
@keyframes balloon-float {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-6px); }
}
/* Cake */
.scene-party::after {
  content: "🎂";
  position: absolute;
  bottom: 46px; left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}

/* ── Night / Bedroom scene ─────────────────────────────────── */
.scene-night {
  background: linear-gradient(180deg,
    #1A237E 0%, #283593 52%,
    #5D4037 52%, #4E342E 100%
  );
}
/* Moon */
.scene-night::before {
  content: "🌙";
  position: absolute;
  top: 14px; right: 28px;
  font-size: 2.4rem;
  filter: drop-shadow(0 0 12px rgba(255,235,130,.7));
  animation: moon-glow 4s ease-in-out infinite;
}
@keyframes moon-glow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(255,235,130,.7)); }
  50%     { filter: drop-shadow(0 0 20px rgba(255,235,130,.95)); }
}
/* Stars */
.scene-night::after {
  content: "✦ ✦ ✦";
  position: absolute;
  top: 18px; left: 16px;
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  letter-spacing: 10px;
  animation: star-twinkle 2.5s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* ─── Voice Legend ──────────────────────────────────────────────────────────── */
.voice-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.voice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 8px;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--vc) 30%, transparent);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.vb-emoji { font-size: 1.4rem; }
.vb-name  { font-size: .8rem; font-weight: 900; color: var(--text); }
.vb-role  {
  font-size: .72rem;
  font-weight: 700;
  color: var(--vc);
  background: color-mix(in srgb, var(--vc) 12%, white);
  padding: 2px 8px;
  border-radius: 20px;
}

/* Avatar speaking animation */
@keyframes avatar-speak {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50%     { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(255,180,0,.7)); }
}
.bubble-avatar.avatar-speaking {
  animation: avatar-speak .55s ease-in-out infinite;
}

/* ─── Controls ──────────────────────────────────────────────────────────────── */
.phrase-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn-play-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,107,.4);
  transition: transform .18s, box-shadow .18s;
}
.btn-play-all:hover       { transform: translateY(-2px); }
.btn-play-all.playing     { background: linear-gradient(135deg, #616161, #9E9E9E); }

.btn-toggle-ja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: #fff;
  color: #555;
  border: 2px solid #ddd;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.btn-toggle-ja:hover { background: #f5f5f5; border-color: #bbb; }

/* ─── Dialogue Bubbles ──────────────────────────────────────────────────────── */
.dialogue {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  animation: bubble-in .35s ease both;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bubble-row.speaker-b { flex-direction: row-reverse; }

.bubble-avatar {
  font-size: 2rem;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  cursor: pointer;
  transition: transform .18s;
}
.bubble-avatar:hover { transform: scale(1.1); }

.bubble {
  max-width: 73%;
  padding: 13px 16px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.bubble:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

@keyframes bubble-speak {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.04); }
}
.bubble.speaking {
  animation: bubble-speak .55s ease;
  box-shadow: 0 0 0 3px rgba(255,200,0,.5), var(--shadow);
}

/* Speaker A — left, blue tones */
.speaker-a .bubble {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border: 2px solid #90CAF9;
  border-bottom-left-radius: 4px;
}
/* Tail left */
.speaker-a .bubble::before {
  content: "";
  position: absolute;
  bottom: 6px; left: -10px;
  border: 8px solid transparent;
  border-right-color: #90CAF9;
  border-left: 0;
}

/* Speaker B — right, purple tones */
.speaker-b .bubble {
  background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
  border: 2px solid #CE93D8;
  border-bottom-right-radius: 4px;
}
/* Tail right */
.speaker-b .bubble::before {
  content: "";
  position: absolute;
  bottom: 6px; right: -10px;
  border: 8px solid transparent;
  border-left-color: #CE93D8;
  border-right: 0;
}

.bubble-en {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1A237E;
  line-height: 1.4;
  margin-bottom: 5px;
}
.speaker-b .bubble-en { color: #4A148C; }

.bubble-ja {
  font-size: .82rem;
  color: #546E7A;
  line-height: 1.5;
  margin-bottom: 3px;
}

.bubble-ph {
  font-size: .68rem;
  color: #90A4AE;
  letter-spacing: .3px;
}

.bubble-icon {
  display: block;
  font-size: .75rem;
  opacity: .45;
  margin-top: 5px;
}

/* ─── Learning Point Box ────────────────────────────────────────────────────── */
.point-box {
  background: linear-gradient(135deg, #FFFDE7, #FFF9C4);
  border: 2.5px solid #FDD835;
  border-radius: 18px;
  padding: 16px 20px;
}

.point-title {
  font-size: 1rem;
  font-weight: 900;
  color: #F57F17;
  margin-bottom: 7px;
}

.point-body {
  font-size: .92rem;
  color: #424242;
  line-height: 1.7;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .scene { height: 170px; }
  .scene-char .char-emoji { font-size: 3rem; }
  .bubble { max-width: 82%; padding: 10px 13px 8px; }
  .bubble-en { font-size: .95rem; }
  .phrase-controls { gap: 8px; }
}