/* ---------- 영어 단어 놀이 · 젤리 · 시계 기차 ---------- */

/* 소리 기차: 원숭이 기관사 기차 + 글자 상자 */
.sound-train { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; overflow: hidden; }
.st-rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding-bottom: 10px; }
.st-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: repeating-linear-gradient(90deg, #8A5A3C 0 18px, #B98A5E 18px 26px); border-radius: 3px; }
.st-ear { width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; font-size: 26px; box-shadow: var(--shadow-card); cursor: pointer; }
.st-train { display: flex; align-items: flex-end; gap: 6px; animation: stIn 1s var(--ease) both; transition: transform 1.2s cubic-bezier(.5, 0, .9, .4); }
.st-train.go { transform: translateX(120vw); }
@keyframes stIn { from { transform: translateX(-110vw); } }
.st-engine {
  position: relative; display: grid; place-items: center; width: 150px; height: 104px; padding-top: 16px; border-radius: 18px 22px 10px 10px;
  background: linear-gradient(180deg, #2F7BE0, #1F5FC0); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15);
}
.st-engine::before { content: ""; position: absolute; left: 18px; top: -30px; width: 22px; height: 34px; border-radius: 4px 4px 0 0; background: #F2C230; box-shadow: 0 -8px 0 -2px #E8484F; }
.st-driver { position: absolute; right: 12px; top: -40px; width: 54px; height: 50px; display: grid; place-items: center; border-radius: 10px 10px 0 0; background: #E8484F; font-size: 30px; box-shadow: inset 0 0 0 5px #1F5FC0; }
.st-name { font: 700 34px/1 var(--font-latin); color: #fff; }
.st-car { position: relative; display: grid; place-items: center; width: 82px; height: 78px; border-radius: 8px; background: #29C9C2; border-top: 10px solid #E8484F; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.st-box { display: grid; place-items: center; width: 50px; height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .35); font: 700 34px/1 var(--font-latin); color: #2B2B2B; }
.st-car.full .st-box { background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.st-wheels { position: absolute; left: 10%; right: 10%; bottom: -14px; height: 22px; background: radial-gradient(circle at 20% 50%, #222 0 9px, transparent 10px), radial-gradient(circle at 80% 50%, #222 0 9px, transparent 10px); }
.st-yard { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 76px; }
.st-tile {
  width: 66px; height: 66px; border: 0; border-radius: 12px; background: #fff; cursor: grab; touch-action: none;
  font: 700 38px/1 var(--font-latin); color: #2B2B2B; box-shadow: 0 5px 0 rgba(60, 120, 40, .35); animation: abIn .45s var(--spring) both;
}
.st-tile.dragging { z-index: 50; scale: 1.15; cursor: grabbing; animation: none; }

/* 단어 맞히기: 글자 통 기계 */
.word-machine { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.wm-box { padding: 12px 16px; border-radius: 22px; background: #E8D3A0; box-shadow: inset 0 0 0 6px #D2B676, 0 8px 0 #B89A5A; }
.wm-reels { display: flex; gap: 0; border: 4px solid #6B4A2A; border-radius: 10px; overflow: hidden; background: #fff; }
.wm-reels.done { box-shadow: 0 0 0 4px #FFE68A; }
.wm-reel { position: relative; width: 74px; height: 92px; overflow: hidden; border-right: 2px solid #CDBB98; background: linear-gradient(180deg, #CFCFCF, #fff 30%, #fff 70%, #CFCFCF); }
.wm-reel:last-child { border-right: 0; }
.wm-strip { display: flex; flex-direction: column; }
.wm-strip span { display: grid; place-items: center; height: 92px; font: 700 52px/1 var(--font-latin); color: #2B2B2B; }
.wm-strip.spin.stop { transform: translateY(calc(var(--n) * -92px)); transition: transform var(--t) cubic-bezier(.2, .6, .25, 1.04); }
.wm-row { display: flex; align-items: center; gap: 22px; }
.wm-slot { display: grid; place-items: center; width: 130px; height: 120px; border-radius: 14px; background: #D9C08A; box-shadow: inset 0 4px 8px rgba(100, 70, 20, .3); }
.wm-slot[hidden] { display: none; }
.wm-lever { width: 82px; height: 82px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F2F2F2, #BDBDBD); box-shadow: 0 6px 0 #9A9A9A; cursor: pointer; }
.wm-lever.ready { background: radial-gradient(circle at 40% 35%, #FFE27A, #F2B630); box-shadow: 0 6px 0 #C98A10; animation: wmPulse 1.4s ease-in-out infinite; }
.wm-lever.pull { transform: translateY(4px); box-shadow: 0 2px 0 #9A9A9A; animation: none; }
@keyframes wmPulse { 50% { transform: scale(1.07); } }
.wm-card { position: relative; width: 112px; height: 100px; border: 0; border-radius: 12px; background: #fff; font-size: 60px; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); animation: abIn .4s var(--spring) both; }
.wm-card.right { box-shadow: 0 0 0 4px #7DDB3A, 0 4px 0 rgba(0, 0, 0, .12); }
.wm-ok { position: absolute; top: -16px; left: 50%; translate: -50% 0; padding: 0 10px; border-radius: 8px; background: #6CC93A; color: #fff; font-size: 22px; line-height: 26px; }

/* 우주 정비소 */
.space-repair { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 470px; }
.sr-ufo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; transition: transform 1s cubic-bezier(.5, 0, .9, .3), opacity 1s; }
.sr-ufo.land { animation: srLand .9s var(--ease) both; }
.sr-ufo.fly { transform: translateY(-120vh) scale(.6); opacity: 0; }
@keyframes srLand { from { transform: translateY(-80vh); } }
.sr-dome { position: relative; display: grid; place-items: center; width: 170px; height: 120px; border-radius: 85px 85px 0 0; background: linear-gradient(180deg, #A8C8FF, #7C6CF0); }
.sr-screen { display: grid; place-items: center; gap: 2px; width: 120px; height: 86px; margin-top: 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 3px #CFC6FF; }
.sr-ufo:not(.fixed) .sr-screen { animation: srFlicker 2.4s steps(2) infinite; }
@keyframes srFlicker { 50% { filter: brightness(.82) hue-rotate(-20deg); } }
.sr-pic { font-size: 50px; line-height: 1; }
.sr-word { font: 700 18px/1 var(--font-latin); color: #4A3FB0; }
.sr-ear { position: absolute; left: 14px; top: 20px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: #FFD84A; font-size: 18px; cursor: pointer; }
.sr-ear[hidden] { display: none; }
.sr-body { display: flex; justify-content: center; gap: 22px; width: 280px; height: 54px; margin-top: -8px; border-radius: 50%; background: linear-gradient(180deg, #EDEBFF, #B5AEE8); box-shadow: inset 0 -8px 0 #8E85D8; align-items: center; }
.sr-body i { width: 14px; height: 14px; border-radius: 50%; background: #FFD84A; box-shadow: 0 0 10px #FFD84A; }
.sr-beam { width: 160px; height: 80px; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 230, 140, .55), transparent); }
.sr-toolbox { position: absolute; left: 4%; bottom: 150px; display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 10px; background: #2F2A6B; color: #BFF5F0; font: 700 16px/1.2 var(--font-latin); }
.sr-ground { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; width: min(620px, 100%); margin-top: 6px; padding: 18px 12px; border-radius: 50% 50% 0 0 / 30px 30px 0 0; background: #4E4AA8; }
.sr-tag {
  padding: 8px 18px 8px 22px; border: 0; border-radius: 8px 14px 14px 8px; background: #7FE3DD; color: #183B5A; cursor: grab; touch-action: none; rotate: var(--r);
  font: 700 22px/1.1 var(--font-latin); box-shadow: 0 4px 0 #3BA9A3; animation: abIn .45s var(--spring) both;
}
.sr-tag.up { transition: transform .6s var(--ease), opacity .6s; transform: translateY(-260px) scale(.5); opacity: 0; }
.sr-tag.dragging { z-index: 50; scale: 1.12; cursor: grabbing; animation: none; }
.player[data-scene="space"] .space-repair .sr-toolbox b { color: #BFF5F0; }

/* 젤리 붙이기 */
.jelly-affix { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.jl-board { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: min(640px, 100%); min-height: 236px; }
.jl-row {
  display: inline-flex; align-items: stretch; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; font: 700 20px/1 var(--font-latin);
  animation: abIn .45s var(--spring) both; transition: opacity .4s, transform .4s;
}
.jelly-affix.ko .jl-row { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.jl-row > span { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; }
.jl-pre { border-radius: 14px 0 0 14px; background: var(--tint); color: #3B2A1A; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .35); }
.jl-stem { border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--tint) 55%, #fff); color: #3B2A1A; padding-right: 4px !important; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .1); }
.jelly-affix.ko .jl-stem { border-radius: 14px; }
.jl-stem i { font-style: normal; }
.jl-gap { display: inline-block; width: 56px; height: 30px; margin-left: 6px; border-radius: 10px 14px 14px 10px; background: #2F7F9A; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3); }
.jl-post { color: #20526B; }
.jl-row.whole { background: var(--tint); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12); }
.jl-row.whole .jl-text { padding: 10px 18px; color: #3B2A1A; }
.jl-row.out { opacity: 0; transform: translateX(-30px); }
.jl-sand { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: min(640px, 100%); padding: 18px 12px 12px; border-radius: 40% 40% 0 0 / 26px 26px 0 0; background: #F2ECDC; }
.jl-drop {
  min-width: 64px; padding: 10px 14px; border: 0; border-radius: 45% 45% 40% 40%; background: radial-gradient(circle at 35% 30%, #9BE4FF, #3FA9D6); color: #12405A;
  cursor: grab; touch-action: none; rotate: var(--r); font: 700 22px/1 var(--font-latin); box-shadow: inset 0 -5px 0 rgba(0, 40, 80, .2), 0 4px 6px rgba(0, 0, 0, .15);
  animation: abIn .45s var(--spring) both, abBob 2.8s ease-in-out 1s infinite;
}
.jelly-affix.ko .jl-drop { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.jl-drop.sel { scale: 1.15; box-shadow: 0 0 0 4px #FFE68A, inset 0 -5px 0 rgba(0, 40, 80, .2); }
.jl-drop.dragging { z-index: 50; scale: 1.2; cursor: grabbing; animation: none; }

/* 시계 기차 */
.clock-train { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.ct-station { display: flex; align-items: flex-end; justify-content: center; gap: 24px; width: min(640px, 100%); overflow: hidden; }
.ct-board { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 12px; background: #1E2A3A; color: #FFD45A; box-shadow: 0 6px 0 #0E1622; }
.ct-label { font: 700 13px/1 var(--font-latin); color: #9FB3C8; letter-spacing: .08em; text-transform: uppercase; }
.ct-digital { font: 700 46px/1.1 'Courier New', monospace; letter-spacing: .04em; }
.ct-words { font: 700 16px/1.2 var(--font-latin); color: #fff; }
.ct-train { font-size: 54px; line-height: 1; scale: -1 1; transition: transform 1.6s cubic-bezier(.5, 0, .9, .4); }
.ct-train.leave { transform: translateX(120vw); }
.ct-play { display: flex; align-items: center; gap: 22px; }
.ct-clock { width: min(260px, 66vw); height: auto; touch-action: none; user-select: none; }
.ct-rim { fill: #E8484F; }
.ct-face { fill: #FFFBF0; }
.ct-tick { stroke: #9A8C7A; stroke-width: 1.2; }
.ct-tick.big { stroke: #3B2A1A; stroke-width: 2.4; }
.ct-num { font: 700 17px var(--font-latin); fill: #3B2A1A; text-anchor: middle; }
.ct-hand line { stroke-linecap: round; }
.ct-hand.hour line { stroke: #2F5BD0; }
.ct-hand.minute line { stroke: #E8484F; }
.ct-knob { cursor: grab; }
.ct-hand.hour .ct-knob { fill: rgba(47, 91, 208, .25); }
.ct-hand.minute .ct-knob { fill: rgba(232, 72, 79, .25); }
.ct-hand.grab .ct-knob { fill-opacity: 1; }
.ct-hand.hint-glow line { filter: drop-shadow(0 0 4px #FFD84A) drop-shadow(0 0 6px #FFD84A); }
.ct-pin { fill: #3B2A1A; }
.ct-go { font-size: 22px; }
/* 한글판: 출발 시각을 한글로만 보여 주고, 읽기 판에서는 한글 시각 보기를 고른다 */
.ct-hangul { font: 400 40px/1.2 var(--font-display); color: #FFD45A; white-space: nowrap; }
.clock-train.hangul .ct-words { font: 700 18px/1 'Courier New', monospace; color: #9FB3C8; min-height: 18px; }
.ct-reads:empty { display: none; }
.ct-reads .choices { flex-direction: column; gap: 10px; }
.ct-read { min-height: 0; min-width: 210px; padding: 12px 22px; font-family: var(--font-display); font-size: 28px; }
.ct-clock.locked .ct-knob { cursor: default; }

/* 펫 퀴즈: 칠판 앞 여우 선생님 + 모은 우표 */
.sayafter.cast-quiz .sa-pad { background: #2F5D46; color: #F4F1E8; border-color: #8A5A3C; font-family: 'Comic Sans MS', var(--font-latin); }
.sa-stamps { display: flex; justify-content: center; gap: 6px; min-height: 34px; }
.sa-paw { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #DFF5B8; box-shadow: inset 0 0 0 2px #7BC043; font-size: 20px; animation: abIn .4s var(--spring) both; }

/* 영어판 공용 */
.kicker.en .kick-sentence, .kicker.en .kick-choice { font-family: var(--font-latin); font-weight: 700; }
.mx-text { font: 700 calc(var(--cs, 92px) * .26)/1 var(--font-latin); color: #3B2A1A; }
.mx-grid.words .mx-head { background: #8A5A2A; }
.mx-grid.words .mx-word { color: #FFE9B8; font-size: calc(var(--cs) * .28); }
.choice-caption.latin { font-family: var(--font-latin); font-weight: 700; }

@media (max-width: 700px) {
  .st-engine { width: 104px; height: 80px; }
  .st-name { font-size: 24px; }
  .st-car { width: 56px; height: 60px; }
  .st-box { width: 38px; height: 36px; font-size: 26px; }
  .st-tile { width: 54px; height: 54px; font-size: 30px; }
  .wm-reel { width: 56px; height: 72px; }
  .wm-strip span { height: 72px; font-size: 40px; }
  .wm-strip.spin.stop { transform: translateY(calc(var(--n) * -72px)); }
  .wm-slot { width: 96px; height: 90px; }
  .wm-card { width: 84px; height: 76px; font-size: 44px; }
  .wm-lever { width: 64px; height: 64px; }
  .sr-toolbox { position: static; margin: 4px 0; }
  .sr-tag { font-size: 18px; padding: 6px 12px 6px 16px; }
  .jl-row { font-size: 16px; }
  .jl-row > span { padding: 8px 9px; }
  .jl-gap { width: 40px; }
  .jelly-affix.ko .jl-row { font-size: 18px; }
  .ct-station { flex-direction: column; align-items: center; gap: 8px; }
  .ct-play { flex-direction: column; gap: 12px; }
  .ct-train { font-size: 40px; }
  .ct-hangul { font-size: 32px; }
  .ct-read { font-size: 24px; min-width: 190px; }
}