/* Scene2-8 | 단자음 낱말 학습 우주 택배 분류 게임 */
.scene28-panel[hidden] { display: none !important; }
.scene28-panel.is-active { display: block; position: absolute; inset: 0; padding: 0; overflow: hidden; border-radius: inherit; }
.scene2-subscene-shell.scene28-integrated { inset: 22.8% 3.2% 14.8% 3.2%; }
.scene2-subscene-shell.scene28-integrated .scene2-activity-stage { border-width: 3px; border-radius: 26px; }

.scene28-game {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: #17366f;
  background: #243f8c url("assets/space_delivery_station_background_v1.svg") center / cover no-repeat;
  isolation: isolate; touch-action: manipulation;
}
.scene28-game::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,19,70,.06),rgba(5,18,61,.22)); pointer-events:none; }
.scene28-game.is-paused *, .scene28-game.is-paused *::before, .scene28-game.is-paused *::after { animation-play-state: paused !important; }

.scene28-target-board {
  position:absolute; z-index:20; top:2.2%; left:50%; transform:translateX(-50%); width:min(70%,820px); min-height:15%;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(9px,1.3vw,18px); padding:.65em 1em;
  border:3px solid rgba(224,252,255,.9); border-radius:26px; background:linear-gradient(135deg,rgba(21,51,126,.94),rgba(54,91,174,.92));
  box-shadow:0 8px 0 rgba(6,20,71,.38),0 14px 28px rgba(0,0,0,.26),inset 0 0 20px rgba(115,241,255,.18);
}
.scene28-target-letter { display:grid; place-items:center; width:clamp(62px,7.2vw,98px); aspect-ratio:1; border:4px solid #fff8ae; border-radius:22px; color:#183a80; background:linear-gradient(145deg,#fffce1,#ffdc6b); box-shadow:0 0 18px rgba(255,238,122,.75); font-size:clamp(2.5rem,5.7vw,5rem); font-weight:1000; line-height:1; }
.scene28-target-copy { min-width:0; color:#fff; text-align:center; }
.scene28-target-copy h2 { margin:0 0 .18em; color:#fff6a8; font-size:clamp(.98rem,1.7vw,1.45rem); text-shadow:0 2px 0 #172966; }
.scene28-target-copy p { margin:0; font-size:clamp(.9rem,1.55vw,1.28rem); font-weight:900; white-space:nowrap; }
.scene28-target-copy p strong { color:#ffef7d; font-size:1.2em; }
.scene28-listen-button { min-width:clamp(92px,10vw,132px); min-height:44px; padding:.55em .8em; border:3px solid #fff; border-radius:18px; color:#183b78; background:linear-gradient(180deg,#e8fdff,#8ce6f3); box-shadow:0 5px 0 #2a6e9c; font:inherit; font-size:clamp(.75rem,1.15vw,1rem); font-weight:1000; cursor:pointer; }
.scene28-listen-button:hover,.scene28-listen-button:focus-visible { transform:translateY(-2px) scale(1.03); outline:4px solid #fff28a; outline-offset:3px; }

.scene28-progress-panel { position:absolute; z-index:18; top:3%; right:2%; display:grid; grid-template-columns:auto auto; align-items:center; gap:.25em .5em; min-width:13%; padding:.45em .7em; border:2px solid rgba(229,250,255,.8); border-radius:18px; color:#fff; background:rgba(17,39,106,.82); box-shadow:0 6px 15px rgba(0,0,0,.22); font-size:clamp(.68rem,1vw,.9rem); font-weight:900; }
.scene28-progress-panel strong { color:#fff6a8; font-size:1.15em; }
.scene28-progress-dots { grid-column:1/-1; display:flex; justify-content:center; gap:5px; }
.scene28-progress-dots i { width:11px; aspect-ratio:1; border:2px solid #dffaff; border-radius:50%; background:rgba(255,255,255,.22); }
.scene28-progress-dots i.is-complete { background:#ffe66c; box-shadow:0 0 8px #fff0a6; }
.scene28-progress-dots i.is-current { transform:scale(1.2); background:#7cf5ff; }

.scene28-conveyor-zone { position:absolute; z-index:10; left:2.2%; right:29%; top:25%; bottom:18%; }
.scene28-conveyor { position:absolute; inset:0; overflow:hidden; border:4px solid rgba(226,249,255,.85); border-radius:26px; background:linear-gradient(180deg,rgba(209,244,255,.96),rgba(100,177,216,.94)); box-shadow:0 12px 0 rgba(12,45,93,.48),0 18px 28px rgba(0,0,0,.24); }
.scene28-conveyor::before { content:""; position:absolute; left:2%; right:2%; top:19%; bottom:22%; border:5px solid #284d8d; border-radius:25px; background:repeating-linear-gradient(90deg,#53689f 0 5%,#7085bd 5% 10%); box-shadow:inset 0 0 0 5px rgba(255,255,255,.14); animation:scene28-belt-motion 6s linear infinite; }
.scene28-conveyor.is-stopped::before { animation-play-state:paused; }
.scene28-belt-lights { position:absolute; left:4%; right:4%; top:8%; height:7%; border-radius:999px; background:repeating-linear-gradient(90deg,#7af5ff 0 18px,transparent 18px 46px); opacity:.72; animation:scene28-light-run 3s linear infinite; }
.scene28-package-row { position:absolute; z-index:3; left:3.5%; right:3.5%; top:25%; bottom:20%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:clamp(7px,1vw,14px); animation:scene28-row-drift 11s ease-in-out infinite alternate; }
.scene28-conveyor.is-stopped .scene28-package-row { animation-play-state:paused; }
.scene28-rollers { position:absolute; left:3%; right:3%; bottom:5%; height:12%; border-radius:999px; background:repeating-linear-gradient(90deg,#173b77 0 24px,#9be8f4 24px 36px,#173b77 36px 62px); box-shadow:inset 0 4px 9px rgba(255,255,255,.28); animation:scene28-rollers 4s linear infinite; }
.scene28-conveyor.is-stopped .scene28-rollers { animation-play-state:paused; }

.scene28-package { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto auto; align-items:center; min-width:0; height:92%; padding:7% 5% 6%; border:4px solid #fff1ab; border-radius:18px; color:#17366f; background:linear-gradient(160deg,#fff8c6,#ffbf69); box-shadow:0 8px 0 #8e5a35,0 12px 16px rgba(0,0,0,.24); cursor:pointer; font:inherit; transition:filter .18s ease,transform .18s ease,opacity .2s ease; }
.scene28-package::before { content:""; position:absolute; top:0; bottom:0; left:48%; width:12%; background:rgba(229,129,60,.26); pointer-events:none; }
.scene28-package:hover,.scene28-package:focus-visible { z-index:4; transform:translateY(-5px) scale(1.03); filter:brightness(1.04); outline:4px solid #7cf4ff; outline-offset:3px; }
.scene28-package.is-heard { border-color:#7cf4ff; box-shadow:0 0 0 5px rgba(104,238,255,.4),0 8px 0 #8e5a35,0 12px 16px rgba(0,0,0,.24); }
.scene28-package.is-correct { animation:scene28-correct-glow .62s ease both; }
.scene28-package.is-wrong { animation:scene28-soft-shake .58s ease both; border-color:#ffd0bd; }
.scene28-package.is-hint { animation:scene28-hint 1.2s ease-in-out 2; }
.scene28-package.is-loaded { opacity:0; visibility:hidden; pointer-events:none; }
.scene28-package img { position:relative; z-index:1; display:block; width:100%; height:100%; min-height:0; object-fit:contain; user-select:none; pointer-events:none; }
.scene28-word { position:relative; z-index:1; display:block; margin-top:.15em; font-size:clamp(.82rem,1.35vw,1.18rem); font-weight:1000; line-height:1.15; }
.scene28-word mark { padding:0 .08em; border-radius:.2em; color:#fff; background:#e34e69; }
.scene28-package small { position:relative; z-index:1; margin-top:.18em; color:#5a4b58; font-size:clamp(.55rem,.78vw,.72rem); font-weight:900; white-space:nowrap; }

.scene28-ship-zone { position:absolute; z-index:12; top:24%; right:1.2%; bottom:18%; width:27%; display:grid; place-items:center; }
.scene28-ship-title { position:absolute; z-index:4; top:0; left:50%; transform:translateX(-50%); min-width:8em; padding:.35em .75em; border:2px solid #fff; border-radius:999px; color:#fff7a8; background:rgba(19,51,123,.9); box-shadow:0 5px 0 rgba(7,24,76,.4); font-size:clamp(.72rem,1.1vw,.94rem); font-weight:1000; text-align:center; }
.scene28-ship-image { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 15px rgba(0,0,0,.32)); pointer-events:none; }
.scene28-cargo-bay { position:absolute; z-index:3; top:38%; left:31%; width:38%; height:23%; display:grid; grid-template-columns:repeat(3,1fr); gap:4%; padding:3%; border:3px solid rgba(255,255,255,.85); border-radius:12px; background:rgba(15,49,117,.84); overflow:hidden; }
.scene28-cargo-slot { display:grid; place-items:center; min-width:0; border:2px dashed rgba(170,246,255,.66); border-radius:8px; background:rgba(255,255,255,.12); }
.scene28-cargo-slot.is-filled { border-style:solid; background:#ffd478; animation:scene28-cargo-pop .42s cubic-bezier(.2,.85,.25,1.3) both; }
.scene28-cargo-slot img { width:88%; height:88%; object-fit:contain; }
.scene28-cargo-count { position:absolute; z-index:4; bottom:3%; left:50%; transform:translateX(-50%); min-width:7em; padding:.35em .75em; border:2px solid #fff; border-radius:999px; color:#17366f; background:#fff7bd; box-shadow:0 5px 0 #b36b3a; font-size:clamp(.72rem,1.1vw,.96rem); font-weight:1000; text-align:center; }
.scene28-ship-zone.is-departing { animation:scene28-ship-depart 1.55s ease-in both; }
.scene28-ship-zone.is-returning { animation:scene28-ship-return .55s ease-out both; }

.scene28-feedback { position:absolute; z-index:21; left:50%; bottom:5.2%; transform:translateX(-50%); width:min(82%,980px); min-height:7.5%; display:grid; place-items:center; margin:0; padding:.45em 1em; border:3px solid rgba(255,255,255,.88); border-radius:999px; color:#17366f; background:rgba(250,254,255,.94); box-shadow:0 7px 0 rgba(15,54,102,.36),0 12px 22px rgba(0,0,0,.2); font-size:clamp(.78rem,1.28vw,1.08rem); font-weight:1000; text-align:center; }

.scene28-flying-box { position:absolute; z-index:50; display:grid; place-items:center; padding:6px; border:4px solid #fff1ab; border-radius:16px; background:linear-gradient(160deg,#fff8c6,#ffbf69); box-shadow:0 9px 15px rgba(0,0,0,.3); pointer-events:none; }
.scene28-flying-box img { width:100%; height:100%; object-fit:contain; }

.scene28-complete[hidden] { display:none !important; }
.scene28-complete { position:absolute; z-index:80; inset:0; display:grid; place-items:center; padding:4%; background:rgba(9,21,73,.76); backdrop-filter:blur(5px); }
.scene28-complete-card { width:min(88%,850px); padding:clamp(18px,3vw,40px); border:5px solid #fff4a7; border-radius:34px; color:#17366f; background:linear-gradient(145deg,#f7feff,#c5f4ff 60%,#fff0a7); box-shadow:0 18px 0 rgba(7,31,83,.48),0 25px 48px rgba(0,0,0,.34); text-align:center; animation:scene28-complete-arrive .55s cubic-bezier(.2,.85,.25,1.2) both; }
.scene28-celebration { color:#ffb62e; font-size:clamp(1.7rem,3.6vw,3.2rem); animation:scene28-stars 1.1s ease-in-out infinite alternate; }
.scene28-fleet { display:flex; justify-content:center; align-items:center; height:clamp(70px,14vh,130px); margin:-.5em 0; }
.scene28-fleet img { width:28%; height:100%; object-fit:contain; }
.scene28-fleet img:nth-child(1) { transform:rotate(-8deg) scale(.86); }
.scene28-fleet img:nth-child(2) { transform:translateY(-8px); }
.scene28-fleet img:nth-child(3) { transform:rotate(8deg) scale(.86); }
.scene28-complete-card h2 { margin:.25em 0; color:#1f3d86; font-size:clamp(1.25rem,2.5vw,2.2rem); }
.scene28-complete-card p { margin:.35em 0 1em; font-size:clamp(.88rem,1.4vw,1.2rem); font-weight:900; }
.scene28-complete-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(7px,1vw,12px); }
.scene28-complete-actions button { min-height:46px; padding:.6em .45em; border:3px solid #fff; border-radius:17px; color:#17366f; background:linear-gradient(180deg,#fff8be,#ffcb5b); box-shadow:0 5px 0 #9c6735; font:inherit; font-size:clamp(.72rem,1vw,.92rem); font-weight:1000; cursor:pointer; }
.scene28-complete-actions button:hover,.scene28-complete-actions button:focus-visible { transform:translateY(-2px); outline:4px solid #6beaff; outline-offset:3px; }
.scene28-complete-actions button[aria-disabled="true"] { color:#536078; background:linear-gradient(#eef2f5,#cbd2db); box-shadow:0 5px 0 #7f8996; }

@keyframes scene28-belt-motion { to { background-position:240px 0; } }
@keyframes scene28-light-run { to { background-position:230px 0; } }
@keyframes scene28-row-drift { from { transform:translateX(-1.2%); } to { transform:translateX(1.2%); } }
@keyframes scene28-rollers { to { background-position:260px 0; } }
@keyframes scene28-correct-glow { 0%{filter:brightness(1);transform:scale(1)} 48%{filter:brightness(1.25) drop-shadow(0 0 15px #fff18a);transform:scale(1.06)} 100%{filter:brightness(1.08);transform:scale(1.01)} }
@keyframes scene28-soft-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px) rotate(-1deg)} 40%{transform:translateX(7px) rotate(1deg)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes scene28-hint { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.28) drop-shadow(0 0 18px #7ff7ff);transform:translateY(-5px) scale(1.04)} }
@keyframes scene28-cargo-pop { 0%{opacity:0;transform:scale(.25) rotate(-12deg)} 75%{opacity:1;transform:scale(1.12) rotate(3deg)} 100%{opacity:1;transform:scale(1)} }
@keyframes scene28-ship-depart { 0%{transform:translate(0,0) scale(1);opacity:1} 25%{transform:translate(-5px,3px) rotate(-2deg)} 100%{transform:translate(120%,-75%) scale(.45) rotate(12deg);opacity:0} }
@keyframes scene28-ship-return { from{transform:translate(95%,-55%) scale(.55);opacity:0} to{transform:none;opacity:1} }
@keyframes scene28-complete-arrive { from{opacity:0;transform:scale(.72) translateY(25px)} to{opacity:1;transform:scale(1)} }
@keyframes scene28-stars { from{transform:scale(.95);filter:brightness(1)} to{transform:scale(1.08);filter:brightness(1.25)} }

@media (max-width:1050px),(max-height:650px) {
  .scene28-target-board { width:73%; top:1.3%; min-height:16%; }
  .scene28-progress-panel { top:2%; right:1%; }
  .scene28-conveyor-zone { top:24%; bottom:17%; right:28%; }
  .scene28-ship-zone { top:23%; bottom:17%; width:27%; }
  .scene28-package { padding:5% 3% 4%; border-width:3px; }
  .scene28-word { font-size:clamp(.68rem,1.45vw,.95rem); }
  .scene28-package small { display:none; }
  .scene28-feedback { bottom:4%; }
}
@media (max-aspect-ratio:4/3) {
  .scene2-subscene-shell.scene28-integrated { inset:22.8% 3.5% 16.2% 3.5%; }
  .scene28-target-board { width:78%; }
  .scene28-conveyor-zone { right:30%; }
  .scene28-package-row { gap:5px; }
  .scene28-progress-panel { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .scene28-conveyor::before,.scene28-belt-lights,.scene28-package-row,.scene28-rollers,.scene28-celebration { animation-duration:18s; }
  .scene28-package,.scene28-ship-zone,.scene28-complete-card { transition-duration:.01ms; }
}