:root { font-family: "Malgun Gothic", "Noto Sans KR", sans-serif; color: #18321f; background: #fffdf3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.intro-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden; background:#07150f; }
.intro-overlay[hidden] { display:none; }
.intro-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#07150f; filter:brightness(.55); transition:filter .35s ease; }
.intro-card { position:relative; z-index:2; width:min(88vw,620px); padding:clamp(24px,4vw,48px); text-align:center; color:#18321f; background:#fffdf3ee; border:6px solid #fff; border-radius:32px; box-shadow:0 24px 80px #000a; transition:opacity .3s ease,transform .3s ease; }
.intro-card span { display:inline-block; padding:8px 18px; border-radius:999px; color:#fff; background:#7357d9; font-weight:900; }
.intro-card h2 { margin:14px 0 8px; font-size:clamp(34px,6vw,68px); line-height:1; color:#1c472b; }
.intro-card p { margin:0 0 24px; font-size:clamp(18px,2.3vw,28px); font-weight:800; color:#526657; }
.intro-card button { min-width:min(100%,320px); border:4px solid #fff; border-radius:999px; padding:16px 28px; color:#fff; background:linear-gradient(#ff9b2f,#f36a29); box-shadow:0 8px 0 #a94200,0 12px 25px #0004; font-size:clamp(22px,3vw,34px); font-weight:1000; }
.intro-card button:active { transform:translateY(5px); box-shadow:0 3px 0 #a94200; }
.skip-intro { position:absolute; right:clamp(16px,3vw,42px); bottom:clamp(16px,3vh,34px); z-index:3; border:3px solid #fff; border-radius:999px; padding:11px 20px; color:#fff; background:#0008; font-weight:900; }
.intro-overlay.playing .intro-video { filter:none; }
.intro-overlay.playing .intro-card { opacity:0; transform:scale(.92); pointer-events:none; }
.game-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(320px, 1fr); background: #fffdf3; }
.board-wrap { position: relative; align-self: center; justify-self:center; width: min(100%, calc(100vh * 1.33518)); aspect-ratio: 1450/1086; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.board-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.star-layer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.hazard-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.board-hazard{--hx:50%;--hy:50%;position:absolute;left:var(--hx);top:var(--hy);width:6.4%;aspect-ratio:1;transform:translate(-50%,-50%);border:5px solid #b98342;border-radius:50%;background:radial-gradient(circle at 50% 58%,#140b06 0 38%,#3a1e0c 40% 58%,#765027 60% 67%,#d8a85e 69% 100%);box-shadow:inset 0 4px 6px #000b,0 2px 3px #0005}
.maze-star { --sx:50%; --sy:50%; position:absolute; left:var(--sx); top:var(--sy); width:7.5%; aspect-ratio:1; display:grid; place-items:center; transform:translate(-50%,-50%); border:3px solid #fff7b3; border-radius:50%; color:#fff3a0; background:radial-gradient(circle,#ffcc2e 0 47%,#f08b16 49% 70%,#fff0 72%); box-shadow:0 3px 0 #a95713,0 0 18px #ffe44c; font-size:clamp(22px,3.4vw,52px); line-height:1; animation:starPulse 1s ease-in-out infinite alternate; }
.maze-star.collected { animation:starCollect .45s ease forwards; }
.maze-marker { --sx:50%; --sy:50%; position:absolute; left:var(--sx); top:var(--sy); min-width:6.2%; aspect-ratio:1; display:grid; place-items:center; transform:translate(-50%,-50%); padding:4px; border:4px solid #fff; border-radius:50%; background:#2357d9; color:#fff; box-shadow:0 4px 0 #0b2d83,0 0 0 4px #ffffff66; font-size:clamp(17px,2.3vw,34px); font-weight:1000; line-height:1; }
.maze-marker.orange{background:#ee7a24;box-shadow:0 4px 0 #9e3d0c,0 0 0 4px #ffffff66}.maze-marker.green{background:#2d9b63;box-shadow:0 4px 0 #11603a,0 0 0 4px #ffffff66}.maze-marker.decoy{background:#687485;box-shadow:0 4px 0 #333c48,0 0 0 4px #ffffff66}.maze-marker.collected{opacity:.22}.maze-marker.next{outline:5px solid #ffe15d;outline-offset:3px}
@keyframes starPulse { to { transform:translate(-50%,-50%) scale(1.12) rotate(8deg); } }
@keyframes starCollect { to { opacity:0; transform:translate(-50%,-75%) scale(1.8) rotate(28deg); } }
.bunny-token { --x:13%; --y:80%; position:absolute; left:var(--x); top:var(--y); width:12%; aspect-ratio:1; pointer-events:none; transform:translate(-50%,-90%); transition:left .28s cubic-bezier(.18,.82,.24,1),top .28s cubic-bezier(.18,.82,.24,1); z-index:5; filter:drop-shadow(0 5px 3px #0005); }
.bunny-token img { display:block; width:100%; height:100%; object-fit:contain; }
.bunny-token.hop { animation: hop .28s ease; }
.bunny-token.bump { animation: bump .42s ease; }
@keyframes hop { 42% { margin-top:-2.8%; filter:drop-shadow(0 12px 5px #0004); } }
@keyframes bump { 25%,75% { margin-left:-1%; } 50% { margin-left:1%; } }
.bunny-token.falling { transition: none; animation: bunnyFall .78s cubic-bezier(.55,.02,.9,.4) forwards; }
@keyframes bunnyFall {
  0% { transform:translate(-50%,-90%) scale(1); filter:drop-shadow(0 5px 3px #0005); }
  18% { transform:translate(-50%,-102%) scale(1.06) rotate(-5deg); }
  55% { transform:translate(-50%,-72%) scale(.72) rotate(18deg); }
  100% { transform:translate(-50%,-45%) scale(.08) rotate(145deg); opacity:0; filter:blur(3px); }
}
.hazard-layer,.impact-hole { position:absolute; inset:0; pointer-events:none; z-index:3; }
.hazard { position:absolute; width:6.2%; aspect-ratio:1.75; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse at center,#020303 0 45%,#2a160c 48% 62%,#7a431f 65% 73%,transparent 75%); box-shadow:inset 0 -5px 7px #000,0 4px 7px #0005; opacity:.92; }
.hazard::before,.hazard::after { content:""; position:absolute; left:48%; top:38%; width:55%; height:3px; transform-origin:left; background:#3f2415; box-shadow:0 1px #d8a15c; }
.hazard::before { transform:rotate(-24deg); }.hazard::after { transform:rotate(25deg); }
.impact-hole { inset:auto; width:9%; aspect-ratio:1.65; transform:translate(-50%,-50%) scale(.08); border-radius:50%; opacity:0; background:radial-gradient(ellipse,#000 0 47%,#1b0b08 50% 61%,#8f5228 64% 72%,transparent 75%); box-shadow:0 0 0 0 #4a160088,0 12px 18px #0008; }
.impact-hole.active { animation:holeOpen .46s cubic-bezier(.15,.8,.25,1) forwards, dangerPulse .85s .46s infinite alternate; }
.impact-hole span,.impact-hole span::before,.impact-hole span::after { position:absolute; content:""; width:12%; aspect-ratio:1; border-radius:50%; background:#84502c; box-shadow:0 2px 3px #0008; }
.impact-hole span { left:5%; top:22%; }.impact-hole span::before { left:600%; top:-260%; }.impact-hole span::after { left:480%; top:360%; }
@keyframes holeOpen { from { opacity:0; transform:translate(-50%,-50%) scale(.08); } 70% { opacity:1; transform:translate(-50%,-50%) scale(1.16); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes dangerPulse { to { box-shadow:0 0 22px 7px #d9231977,0 12px 18px #0008; } }
.route-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .25s; }
.route-guide.show { opacity: 1; }
.route-guide polyline { fill: none; stroke: #ff3e68; stroke-width: .8; stroke-dasharray: 1.5 1.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 1px white); }
.route-guide circle { fill: #fff; stroke: #ff3e68; stroke-width: .35; vector-effect: non-scaling-stroke; }
.checkpoint,.celebration { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); z-index: 8; color: #fff; font-size: clamp(24px,3vw,52px); font-weight: 900; text-shadow: 0 4px 0 #7a3910; background: linear-gradient(#ffbe24,#f57a18); padding: .35em .75em; border: 5px solid #fff; border-radius: 999px; box-shadow: 0 10px 24px #0005; animation: pop .5s both; white-space: nowrap; }
@keyframes pop { from { transform: translateX(-50%) scale(.3); opacity: 0; } 70% { transform: translateX(-50%) scale(1.12); } }
.control-panel { padding: clamp(16px,2vw,34px); background: #fffdf3; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px,1.5vh,22px); box-shadow: -12px 0 30px #0005; z-index: 10; }
header { text-align: center; }
.kindergarten-name { margin-bottom:8px; color:#f05a35; font-size:clamp(18px,1.35vw,25px); font-weight:1000; letter-spacing:-.05em; white-space:nowrap; }
.stage-pill { display: inline-block; padding: 7px 18px; color: white; background: #7357d9; border-radius: 999px; font-weight: 900; }
.maze-selector { grid-template-columns:1fr 1fr; gap:8px; }
.maze-selector:not([hidden]){display:grid}
.maze-choice { min-height:58px; border:2px solid #d9d3bd; border-radius:14px; padding:8px 10px; background:#f4f1e7; color:#586052; font:inherit; cursor:pointer; box-shadow:inset 0 -3px #0001; }
.maze-choice b,.maze-choice span { display:block; }
.maze-choice b { font-size:15px; }
.maze-choice span { margin-top:2px; font-size:12px; font-weight:800; }
.maze-choice b,.maze-choice span{white-space:nowrap}
.maze-choice.active { border-color:#6f56d9; color:#33277a; background:#eeeaff; box-shadow:inset 0 -3px #6f56d933,0 3px 9px #4635a322; }
#mission.condition-rule{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0 5px;font-size:14px;line-height:1.15;letter-spacing:0}.rule-token{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;border:2px solid;border-radius:11px;background:#fff;font-weight:950;white-space:nowrap}.rule-token i{font-size:18px;font-style:normal;line-height:1}.rule-token.blue{border-color:#2c62d7;color:#17429e;background:#edf3ff}.rule-token.orange{border-color:#e37626;color:#98400d;background:#fff1e6}.rule-token.green{border-color:#32945f;color:#17603c;background:#eaf8f0}.rule-next{color:#64748a;font-size:18px;font-weight:900}
h1 { font-size: clamp(22px,1.65vw,32px); line-height: 1.15; margin: 10px 0 5px; }
#coach { margin: 0; color: #526657; font-size: clamp(14px,1vw,18px); line-height:1.35; font-weight: 700; }
.direction-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 430px; width: 100%; margin: 0 auto; }
.move { min-height: clamp(74px,11vh,122px); border: 0; border-radius: 20px; color: #fff; box-shadow: inset 0 -7px #0002,0 5px 9px #0002; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.move:active { transform: translateY(4px); box-shadow: inset 0 -3px #0002; }
.move b { font-size: clamp(34px,3.6vw,62px); line-height: .75; }.move span { font-size: clamp(15px,1.15vw,22px); font-weight: 900; margin-top: 9px; }
.up { grid-column: 2; background: #ef7159; }.left { grid-column: 1; grid-row: 2; background: #3e9bd8; }.right { grid-column: 3; grid-row: 2; background: #53ad61; }.down { grid-column: 2; grid-row: 2; background: #a66ad8; }
.prompt-box { background: #eef6e8; border-radius: 16px; padding: 12px; }.prompt-box label { display:block; font-weight: 900; font-size: 15px; margin-bottom: 7px; }.prompt-box div { display:flex; gap:7px; }.prompt-box input { min-width:0; flex:1; border:3px solid #9dc482; border-radius:12px; padding:12px; font-size:17px; }.prompt-box button { border:0; border-radius:12px; padding:0 18px; background:#ff8b22; color:#fff; font-weight:900; }
.command-log { min-height: 58px; background: #fff; border: 3px dashed #d8c890; border-radius: 14px; padding: 8px 12px; }.command-log span { display:block; color:#776c4b; font-size:13px; font-weight:900; }.command-log div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:20px; font-weight:900; color:#513d1c; }
.progress { height:14px; overflow:hidden; background:#dce7d7; border-radius:999px; }.progress div { width:0; height:100%; background:linear-gradient(90deg,#51b95c,#ffd236); transition:width .5s; }
.teacher-tools { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.teacher-tools button,.teacher-tools a { min-height:42px; border:0; border-radius:12px; padding:11px 5px; display:grid; place-items:center; font-weight:900; background:#e9e5d5; color:#354035; text-decoration:none; }.teacher-tools button:first-child { background:#ffe15d; }.teacher-tools .print-maze{grid-column:1/-1;background:#e7efff;color:#244c9f;box-shadow:inset 0 0 0 2px #bfd0f5}
.trap-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 44%,#2a0808 0,#080202 32%,#000 72%); }
.trap-overlay[hidden] { display:none; }
.trap-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#020403; }
.fall-scene { position:absolute; inset:0; overflow:hidden; perspective:700px; background:radial-gradient(ellipse at center,#35100b 0 8%,#100504 30%,#020101 70%); }
.depth-ring { position:absolute; left:50%; top:48%; width:22vmin; aspect-ratio:1; translate:-50% -50%; border:clamp(8px,2vmin,25px) solid #6f2e16; border-radius:50%; opacity:0; box-shadow:0 0 30px #e74a1e55,inset 0 0 35px #000; }
.trap-overlay.playing .ring-one { animation:depthRush 1.25s 0s infinite; }.trap-overlay.playing .ring-two { animation:depthRush 1.25s .4s infinite; }.trap-overlay.playing .ring-three { animation:depthRush 1.25s .8s infinite; }
.speed-lines { position:absolute; inset:-30%; background:repeating-conic-gradient(from 0deg,transparent 0 7deg,#ffb15155 8deg 8.8deg,transparent 9.5deg 17deg); opacity:.8; animation:spinLines 1.7s linear infinite; mask-image:radial-gradient(circle,transparent 0 12%,#000 34%); }
.fall-rabbit { position:absolute; left:50%; top:48%; width:24vmin; aspect-ratio:1; translate:-50% -50%; filter:drop-shadow(0 10px 14px #000); }
.fall-rabbit img { display:block; width:100%; height:100%; object-fit:contain; }
.trap-overlay.playing .fall-rabbit { animation:fallAway 2.4s cubic-bezier(.42,.02,.9,.5) forwards; }
.fall-cry { position:absolute; left:50%; top:12%; translate:-50% 0; color:#fff; font-size:clamp(50px,9vw,140px); font-weight:1000; letter-spacing:.04em; text-shadow:0 5px 0 #9a160d,0 12px 35px #f30; opacity:0; }
.trap-overlay.playing .fall-cry { animation:cryPop 1.25s ease-out forwards; }
.fall-scene p { position:absolute; left:50%; bottom:14%; translate:-50% 0; margin:0; color:#ffd7ad; font-size:clamp(20px,3vw,46px); font-weight:900; opacity:0; white-space:nowrap; }
.trap-overlay.playing .fall-scene p { animation:captionIn .5s 2s forwards; }
@keyframes depthRush { 0%{transform:scale(.15);opacity:0} 18%{opacity:.8} 100%{transform:scale(5);opacity:0} }
@keyframes spinLines { to{transform:rotate(360deg)} }
@keyframes fallAway { 0%{transform:translateY(-8vh) scale(1.7) rotate(-8deg);opacity:1} 18%{transform:translateY(-3vh) scale(1.9) rotate(8deg)} 58%{opacity:1} 100%{transform:translateY(18vh) scale(.05) rotate(760deg);opacity:0;filter:blur(5px)} }
@keyframes cryPop { 0%{opacity:0;transform:scale(.4)} 18%{opacity:1;transform:scale(1.18)} 70%{opacity:1} 100%{opacity:0;transform:scale(.92)} }
@keyframes captionIn { to{opacity:1} }
.trap-overlay button { position:absolute; right:4vw; bottom:4vh; border:4px solid #fff; border-radius:999px; padding:15px 28px; background:#ff8b22; color:#fff; font-size:clamp(18px,2vw,30px); font-weight:900; box-shadow:0 7px 0 #a94200; }
.goal-overlay { position:fixed; inset:0; z-index:110; display:grid; place-items:center; overflow:hidden; background:#07150f; }
.goal-overlay[hidden] { display:none; }
.goal-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#07150f; }
.goal-overlay button { position:absolute; right:4vw; bottom:4vh; border:4px solid #fff; border-radius:999px; padding:15px 28px; background:#53ad61; color:#fff; font-size:clamp(18px,2vw,30px); font-weight:900; box-shadow:0 7px 0 #236d31; }
@media (max-width: 900px), (orientation: portrait) { body { overflow:auto; }.game-shell { grid-template-columns:1fr; }.board-wrap { width:100%; border-width:4px; border-radius:0; }.control-panel { min-height: auto; }.direction-pad { max-width:520px; }.move { min-height:90px; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms!important; transition-duration:.01ms!important; } }