:root {
  --navy: #102451;
  --ink: #17345e;
  --blue: #1687ff;
  --cyan: #43d9ff;
  --yellow: #ffe459;
  --orange: #ff9d28;
  --coral: #ff675f;
  --green: #29cf91;
  --purple: #7159df;
  --white: #fff;
  --shadow: 0 15px 40px rgba(16, 36, 81, .18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: #dff5ff; }
body { min-height: 100%; margin: 0; color: var(--ink); background: radial-gradient(circle at 50% -10%, #fff 0 8%, transparent 32%), linear-gradient(160deg, #b9eeff, #eaf9ff 42%, #fff6c6); font-family: ui-rounded, "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif; overflow-x: hidden; }
button { font: inherit; }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.app-shell { width: min(100%, 820px); min-height: 100dvh; margin: 0 auto; padding: clamp(12px, 3vw, 24px); }
.screen { min-height: calc(100dvh - clamp(24px, 6vw, 48px)); animation: screen-in .35s ease both; }

.primary-button, .secondary-button, .text-button, .icon-button { border: 0; cursor: pointer; }
.primary-button { min-height: 58px; padding: 14px 28px; border-radius: 20px; color: var(--navy); background: linear-gradient(#fff379, #ffd93c); box-shadow: 0 8px 0 #d59313, 0 13px 25px rgba(179, 112, 0, .2); font-size: 1.08rem; font-weight: 1000; letter-spacing: .02em; transition: transform .16s ease, box-shadow .16s ease; }
.primary-button:active { transform: translateY(6px); box-shadow: 0 2px 0 #d59313; }
.secondary-button { min-height: 52px; padding: 12px 22px; border-radius: 18px; color: white; background: var(--blue); box-shadow: 0 6px 0 #0758ad; font-weight: 950; }
.text-button { min-height: 44px; padding: 8px 14px; color: var(--ink); background: transparent; font-weight: 900; }
.icon-button { width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; color: white; background: rgba(16,36,81,.72); box-shadow: 0 4px 0 rgba(8,20,48,.32); font-weight: 1000; }

/* Start */
.start-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 18px 0 26px; text-align: center; }
.start-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 34px; background: linear-gradient(180deg, rgba(75,201,255,.42), rgba(255,255,255,.72) 55%, rgba(126,220,139,.35)); }
.start-sky::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -7%; height: 32%; border-radius: 50% 50% 0 0; background: #65d78b; box-shadow: 0 -22px 0 rgba(255,255,255,.32); }
.start-sky i { position: absolute; width: 80px; height: 30px; border-radius: 999px; background: white; opacity: .8; filter: drop-shadow(42px 6px 0 white) drop-shadow(18px -12px 0 white); animation: cloud-drift 9s linear infinite; }
.start-sky i:nth-child(1) { left: -80px; top: 15%; }
.start-sky i:nth-child(2) { left: 45%; top: 27%; animation-delay: -4s; animation-duration: 13s; transform: scale(.7); }
.start-sky i:nth-child(3) { left: 75%; top: 8%; animation-delay: -7s; animation-duration: 11s; transform: scale(.52); }
.logo-lockup { position: relative; z-index: 2; }
.logo-kicker, .eyebrow { display: inline-block; padding: 6px 11px; border-radius: 999px; color: white; background: var(--blue); font-size: .82rem; font-weight: 950; }
.logo-lockup h1 { margin: 10px 0 0; color: var(--navy); font-size: clamp(2.65rem, 11vw, 5.4rem); line-height: .86; letter-spacing: -.07em; text-shadow: 0 5px 0 white; }
.logo-lockup h1 em { display: block; color: var(--coral); font-style: normal; transform: rotate(-3deg); }
.logo-lockup p { margin: 10px 0 0; font-size: 1.12rem; font-weight: 1000; letter-spacing: .18em; }
.start-diorama { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; width: min(100%, 580px); height: clamp(210px, 34vh, 285px); margin: 12px 0 0; }
.hero-card, .boss-card { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
.hero-card img { width: min(100%, 200px); filter: drop-shadow(0 15px 8px rgba(16,36,81,.2)); animation: hero-float 2s ease-in-out infinite; }
.boss-card img { width: min(100%, 190px); filter: drop-shadow(0 13px 8px rgba(47,36,96,.25)); animation: boss-bob 2.4s ease-in-out infinite; }
.hero-card b, .boss-card b { position: absolute; bottom: 7px; padding: 5px 10px; border-radius: 999px; color: white; background: var(--navy); font-size: .76rem; }
.energy-path { display: flex; flex-direction: column; gap: 3px; color: var(--yellow); font-size: 2rem; filter: drop-shadow(0 3px 0 #c77700); }
.energy-path span { animation: bolt-run 1.2s ease-in-out infinite; }
.energy-path span:nth-child(2) { animation-delay: .18s; }
.energy-path span:nth-child(3) { animation-delay: .36s; }
.start-copy { position: relative; z-index: 2; margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
.start-copy strong { display: block; font-size: 1.1rem; }
.start-actions { display: flex; gap: 12px; margin-top: 14px; }
.home-best { margin: 4px 0 0; font-size: .84rem; font-weight: 800; }

/* Game header */
.game-screen { display: grid; grid-template-rows: auto auto minmax(430px, 1fr) auto; gap: 10px; }
.game-header, .boss-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.level-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.level-label > span, .boss-header > div > span { flex: none; padding: 6px 9px; border-radius: 999px; color: var(--navy); background: var(--yellow); font-size: .75rem; font-weight: 1000; }
.level-label h2, .boss-header h2 { margin: 0; color: var(--navy); font-size: clamp(1rem, 4.5vw, 1.35rem); line-height: 1.05; white-space: nowrap; }
.level-label small { font-weight: 800; }
.hud-cluster { display: flex; align-items: center; gap: 6px; }
.hud-pill { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 10px; border-radius: 15px; color: white; background: var(--navy); box-shadow: 0 4px 0 #07142e; font-variant-numeric: tabular-nums; }
.hud-pill b { min-width: 24px; font-size: 1rem; }
.score-pill { background: var(--blue); box-shadow-color: #0758ad; }
.hud-pill.danger { background: var(--coral); animation: timer-pulse .65s ease-in-out infinite; }
.mission-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 11px; border-radius: 17px; color: white; background: linear-gradient(90deg, #253b79, #5d47c5); box-shadow: 0 5px 0 #162957; }
.mission-strip > div:first-child { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
#mission-icon { font-size: 1.3rem; }
.combo-meter { flex: 0 0 125px; }
.combo-meter span { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 950; text-align: right; }
.combo-meter i { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.combo-meter b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--yellow); transition: width .25s ease; }

/* Main interactive stage */
.play-stage { position: relative; min-height: 430px; overflow: hidden; border: 4px solid white; border-radius: 27px; background: #95deff; box-shadow: var(--shadow), inset 0 0 0 2px rgba(16,36,81,.08); isolation: isolate; touch-action: none; }
.stage-backdrop { position: absolute; inset: 0; z-index: -3; background: url("./assets/park-background.webp") center / cover no-repeat; transform: scale(1.06); filter: saturate(1.12); }
.play-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(48,171,255,.12), rgba(255,255,255,.04) 55%, rgba(19,116,81,.18)); }
.play-stage.level-past .stage-backdrop { filter: saturate(.78) sepia(.18) hue-rotate(345deg); }
.play-stage.level-past::before { background: radial-gradient(circle at 50% 34%, rgba(255,239,123,.1), rgba(49,51,113,.36)); }
.play-stage.level-contract .stage-backdrop { filter: saturate(.72) hue-rotate(188deg) brightness(.82); }
.play-stage.level-contract::before { background: linear-gradient(135deg, rgba(255,94,161,.3), rgba(48,37,119,.4)); }
.world-collection { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.collected-item { position: absolute; left: var(--x); bottom: var(--y); font-size: var(--size); filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); animation: collectible-in .55s cubic-bezier(.2,.9,.2,1.25) both, collectible-hop 2.2s ease-in-out .55s infinite; animation-delay: 0s, var(--delay); }
.collected-item.word { padding: 4px 8px; border: 2px solid white; border-radius: 999px; color: var(--navy); background: var(--yellow); font-size: .75rem; font-weight: 1000; box-shadow: 0 4px 0 rgba(77,46,0,.22); }
.hero { position: absolute; z-index: 9; left: 16px; bottom: 18px; width: 92px; height: 92px; pointer-events: none; transition: left .14s ease-out, top .14s ease-out, transform .22s ease; }
.hero img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 5px rgba(16,36,81,.25)); }
.hero-ring { position: absolute; inset: 10px; z-index: 1; border: 3px solid rgba(255,228,89,.75); border-radius: 50%; box-shadow: 0 0 24px 7px rgba(255,228,89,.38); animation: ring-pulse 1.2s ease-in-out infinite; }
.hero.dash { animation: hero-dash .5s cubic-bezier(.2,.8,.2,1); }
.grammar-machine { position: absolute; z-index: 2; left: 50%; top: 26px; width: 116px; height: 95px; transform: translateX(-50%); filter: drop-shadow(0 9px 5px rgba(16,36,81,.23)); }
.machine-top { position: absolute; left: 18px; right: 18px; top: 0; height: 34px; border: 5px solid #d9f8ff; border-radius: 50% 50% 35% 35%; background: linear-gradient(#688cf6, #3646a9); box-shadow: inset 0 5px 0 rgba(255,255,255,.22); }
.machine-core { position: absolute; left: 50%; top: 19px; display: grid; place-items: center; width: 61px; height: 61px; border: 6px solid #a9e8ff; border-radius: 50%; background: var(--navy); color: var(--yellow); font-size: 1.6rem; transform: translateX(-50%); animation: machine-spin 3s linear infinite; }
.machine-leg { position: absolute; top: 58px; width: 24px; height: 37px; border-radius: 0 0 9px 9px; background: #334691; }
.machine-leg.left { left: 19px; transform: rotate(10deg); }
.machine-leg.right { right: 19px; transform: rotate(-10deg); }
.level-past .machine-core { animation-duration: 1.8s; }
.level-contract .machine-core { border-radius: 17px; animation: crusher 1.15s ease-in-out infinite; }
.rank-hud { position: absolute; z-index: 24; right: 9px; top: 9px; width: 156px; padding: 7px; border: 3px solid white; border-radius: 18px; color: white; background: linear-gradient(160deg, rgba(16,36,81,.96), rgba(83,60,177,.94)); box-shadow: 0 7px 0 rgba(5,13,38,.5), 0 13px 28px rgba(8,17,44,.25); backdrop-filter: blur(7px); }
.rank-lane-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 24px; padding: 0 3px 5px; }
.rank-lane-head span { font-size: .75rem; font-weight: 900; }
.rank-lane-head strong { color: var(--yellow); font-size: .9rem; white-space: nowrap; }
.rank-viewport { position: relative; height: 102px; overflow: hidden; border-radius: 11px; background: rgba(5,13,38,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.rank-viewport::before, .rank-viewport::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 15px; pointer-events: none; }
.rank-viewport::before { top: 0; background: linear-gradient(rgba(8,18,48,.86), transparent); }
.rank-viewport::after { bottom: 0; background: linear-gradient(transparent, rgba(8,18,48,.86)); }
.rank-track { display: grid; gap: 3px; padding: 3px; }
.rank-track.go-up { animation: rank-track-up .72s cubic-bezier(.16,.9,.22,1); }
.rank-track.go-down { animation: rank-track-down .58s cubic-bezier(.3,.75,.35,1); }
.rank-row { --bar: 70%; position: relative; display: grid; grid-template-columns: 22px 23px minmax(0,1fr); align-items: center; gap: 3px; min-height: 29px; padding: 3px 5px; overflow: hidden; border: 2px solid rgba(255,255,255,.2); border-radius: 9px; color: white; background: rgba(255,255,255,.11); font-size: .75rem; font-weight: 850; }
.rank-row::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--bar); background: linear-gradient(90deg, rgba(67,217,255,.32), transparent); }
.rank-row.you { min-height: 32px; border-color: white; color: #654000; background: var(--yellow); box-shadow: 0 0 14px rgba(255,228,89,.5); transform: scale(1.02); }
.rank-row.you::before { background: linear-gradient(90deg, rgba(255,153,40,.5), transparent); }
.rank-row i { font-style: normal; }
.rank-row b { color: #8feaff; font-size: .75rem; }
.rank-row.you b { color: #734600; }
.rank-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-change { position: absolute; z-index: 5; right: 0; top: calc(100% + 5px); display: grid; place-items: center; min-width: 64px; min-height: 30px; padding: 4px 8px; border: 3px solid white; border-radius: 999px; color: var(--navy); background: var(--yellow); box-shadow: 0 5px 0 #b86b0a; font-size: .75rem; font-weight: 1000; opacity: 0; pointer-events: none; white-space: nowrap; }
.rank-change.show { animation: rank-change-pop 1.7s ease both; }
.rank-change.down { color: white; background: var(--purple); box-shadow-color: #3f2e88; }
.rank-disclosure { display: block; margin-top: 4px; font-size: .75rem; font-weight: 800; text-align: center; opacity: .7; }
.prompt-zone { position: absolute; z-index: 8; left: 50%; top: 118px; display: grid; justify-items: center; width: min(76%, 360px); transform: translateX(-50%); }
#prompt-label { margin-bottom: 7px; padding: 5px 10px; border-radius: 999px; color: white; background: rgba(16,36,81,.78); font-size: .76rem; font-weight: 900; backdrop-filter: blur(5px); }
.drag-object { --drag-x: 0px; --drag-y: 0px; position: relative; z-index: 10; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 8px; min-width: 155px; min-height: 80px; padding: 10px 17px; border: 4px solid white; border-radius: 24px; color: var(--navy); background: linear-gradient(145deg, #fff, #dbf5ff); box-shadow: 0 9px 0 #70b6dc, 0 14px 25px rgba(16,36,81,.25); cursor: grab; user-select: none; touch-action: none; transform: translate3d(var(--drag-x), var(--drag-y), 0); transition: box-shadow .15s ease, scale .15s ease; }
.drag-object > span { grid-row: 1 / 3; font-size: 2.4rem; filter: drop-shadow(0 3px 0 rgba(16,36,81,.1)); }
.drag-object strong { align-self: end; font-size: 1.18rem; line-height: 1; }
.drag-object small { align-self: start; font-size: .75rem; font-weight: 850; opacity: .68; }
.drag-object.dragging { scale: 1.08; cursor: grabbing; box-shadow: 0 12px 0 var(--blue), 0 20px 35px rgba(16,36,81,.32); }
.drag-object.success { animation: object-warp .55s ease forwards; }
.drag-object.wrong { animation: object-wobble .42s ease; }
.gesture-hint { position: absolute; right: -3px; bottom: -38px; display: flex; align-items: center; gap: 2px; color: white; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); animation: gesture-move 1.5s ease-in-out infinite; pointer-events: none; }
.gesture-hint i { width: 40px; height: 3px; border-radius: 999px; background: white; }
.target-zone { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.portal { position: relative; min-width: 0; min-height: 92px; padding: 25px 6px 9px; overflow: hidden; border: 4px solid rgba(255,255,255,.88); border-radius: 48% 48% 17px 17px; color: white; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.25), transparent 24%), linear-gradient(160deg, #4d77ed, #2c357e); box-shadow: inset 0 0 0 4px rgba(67,217,255,.3), 0 8px 0 rgba(18,31,79,.45); cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.portal::before { content: ""; position: absolute; inset: 6px; border: 3px dashed rgba(255,255,255,.48); border-radius: inherit; animation: portal-glow 2s linear infinite; }
.portal span { position: relative; z-index: 2; display: block; overflow-wrap: anywhere; font-size: clamp(.84rem, 3.5vw, 1.08rem); font-weight: 1000; }
.portal small { position: relative; z-index: 2; display: block; margin-top: 5px; color: #d9f8ff; font-size: .75rem; font-weight: 850; }
.level-plural .portal { background: linear-gradient(160deg, #34ca94, #147455); box-shadow: inset 0 0 0 4px rgba(187,255,210,.35), 0 8px 0 #0a513a; }
.level-past .portal { background: linear-gradient(160deg, #ffb939, #c86420); box-shadow: inset 0 0 0 4px rgba(255,243,177,.35), 0 8px 0 #8b3f12; }
.level-contract .portal { border-radius: 18px; background: linear-gradient(160deg, #e95fa9, #7737b4); box-shadow: inset 0 0 0 4px rgba(255,198,234,.32), 0 8px 0 #4f277c; }
.portal.hovered { transform: translateY(-8px) scale(1.04); filter: brightness(1.18); }
.portal.correct { animation: portal-hit .55s ease; }
.portal.wrong { animation: portal-shake .4s ease; filter: grayscale(.3); }
.stage-message { position: absolute; z-index: 7; left: 50%; bottom: 11px; width: max-content; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px; color: white; background: rgba(16,36,81,.78); font-size: .75rem; font-weight: 850; text-align: center; transform: translateX(-50%); backdrop-filter: blur(5px); }
.fx-layer { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.spark { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 22px; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); transform: rotate(var(--r)); animation: spark-out .65s ease-out forwards; }
.error-slime { position: absolute; z-index: 18; right: 9%; top: 34%; display: grid; place-items: center; width: 74px; height: 62px; border: 3px solid white; border-radius: 48% 52% 40% 38%; color: white; background: #7b5ad5; box-shadow: 0 7px 0 #413082; font-size: 1.55rem; cursor: pointer; animation: slime-in .45s ease both, slime-wiggle 1.4s ease-in-out .45s infinite; }
.error-slime small { position: absolute; bottom: 5px; font-size: .75rem; font-weight: 900; }
.error-slime.pop { animation: slime-pop .35s ease forwards; }

.storm-event { position: absolute; inset: 0; z-index: 30; overflow: hidden; background: rgba(24,25,71,.72); backdrop-filter: blur(3px); }
.event-title { position: absolute; z-index: 4; left: 50%; top: 35%; display: grid; justify-items: center; color: white; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.event-title b { color: var(--yellow); font-size: 1.7rem; text-shadow: 0 4px 0 #9a5300; }
.event-title span { margin-top: 5px; font-weight: 850; }
.storm-puff { position: absolute; width: 78px; height: 62px; border: 0; background: transparent; font-size: 3.8rem; filter: drop-shadow(0 8px 4px rgba(0,0,0,.35)); cursor: pointer; animation: storm-fly 2.2s ease-in-out infinite; }
.storm-puff.p1 { left: 7%; top: 14%; }
.storm-puff.p2 { right: 7%; top: 23%; animation-delay: -.8s; }
.storm-puff.p3 { left: 37%; bottom: 10%; animation-delay: -1.4s; }
.storm-puff.cleared { animation: cloud-pop .28s ease forwards; pointer-events: none; }

.charge-dock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: 18px; color: white; background: var(--navy); box-shadow: 0 5px 0 #061329; }
.charge-copy { display: flex; flex-direction: column; min-width: 88px; font-size: .75rem; font-weight: 850; }
.charge-copy strong { color: var(--yellow); font-size: 1rem; }
.charge-track { height: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.12); }
#charge-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--yellow), var(--orange)); box-shadow: 0 0 14px var(--yellow); transition: width .3s cubic-bezier(.2,.8,.2,1); }
#charge-status { grid-column: 2; font-size: .75rem; font-weight: 800; opacity: .78; }

/* Power */
.power-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.power-burst { position: absolute; width: 80vmax; height: 80vmax; opacity: .12; background: repeating-conic-gradient(var(--blue) 0 9deg, transparent 9deg 20deg); animation: slow-spin 18s linear infinite; }
.power-hero { position: relative; z-index: 1; width: min(45vw, 210px); filter: drop-shadow(0 13px 8px rgba(16,36,81,.2)); animation: hero-float 2s ease-in-out infinite; }
.power-screen h2 { position: relative; z-index: 1; margin: 12px 0 3px; color: var(--navy); font-size: clamp(2rem, 8vw, 3.1rem); line-height: .96; }
.power-screen > p { margin: 4px 0 17px; font-weight: 800; }
.power-options { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 620px); }
.power-card { min-height: 160px; padding: 17px 9px; border: 4px solid white; border-radius: 24px; color: var(--navy); background: linear-gradient(150deg, #d7f4ff, #91d8ff); box-shadow: 0 8px 0 #4a96c7, var(--shadow); cursor: pointer; transition: transform .18s ease; }
.power-card:nth-child(2) { background: linear-gradient(150deg, #fff4ad, #ffc95d); box-shadow: 0 8px 0 #c17b12, var(--shadow); }
.power-card:hover { transform: translateY(-5px) rotate(-1deg); }
.power-card span { display: block; font-size: 2.8rem; }
.power-card b { display: block; margin: 8px 0 4px; font-size: 1.08rem; }
.power-card small { font-weight: 800; }
.level-result { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 25px; padding: 9px 14px; border-radius: 15px; color: white; background: var(--navy); font-size: .8rem; }
.level-result b { color: var(--yellow); }

/* Boss */
.boss-screen { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.boss-stage { position: relative; min-height: 580px; overflow: hidden; border: 4px solid white; border-radius: 29px; background: #281f5f; box-shadow: var(--shadow); touch-action: none; }
.boss-sky { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, #8e7ee5, transparent 34%), linear-gradient(#302568 0 54%, #181737 54%); }
.boss-sky::after { content: ""; position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(115deg, transparent 0 28px, white 29px 31px, transparent 32px 56px); animation: rain-slide .9s linear infinite; }
#boss-image { position: absolute; z-index: 2; left: 50%; top: 6px; width: min(42%, 245px); transform: translateX(-50%); filter: drop-shadow(0 12px 8px rgba(0,0,0,.35)); animation: boss-bob 2.1s ease-in-out infinite; }
#boss-image.hit { animation: boss-hit .52s ease; }
.boss-health { position: absolute; z-index: 5; left: 50%; top: 12px; display: flex; gap: 5px; color: var(--coral); font-size: 1.5rem; transform: translateX(-50%); filter: drop-shadow(0 2px 0 white); }
.boss-health span { transition: opacity .3s ease, transform .3s ease; }
.boss-health span.lost { opacity: .18; transform: scale(.5); }
.boss-rank-hud { top: 12px; right: 12px; }
.boss-hero { position: absolute; z-index: 3; left: 12px; top: 98px; width: 108px; }
.boss-hero img { width: 100%; filter: drop-shadow(0 8px 5px rgba(0,0,0,.3)); animation: hero-float 1.8s ease-in-out infinite; }
#boss-beam { position: absolute; z-index: 6; left: 92px; top: 145px; width: 0; height: 10px; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 20px 8px var(--yellow); transform: rotate(-17deg); transform-origin: left; }
#boss-beam.fire { animation: beam-fire .48s ease-out; }
.sentence-card { position: absolute; z-index: 8; left: 14px; right: 14px; top: 235px; padding: 13px; border: 4px solid white; border-radius: 21px; color: var(--navy); background: rgba(255,255,255,.95); box-shadow: 0 8px 0 rgba(5,8,32,.3); text-align: center; }
.sentence-card > span { display: inline-block; padding: 4px 8px; border-radius: 999px; color: white; background: var(--purple); font-size: .75rem; font-weight: 900; }
.sentence-card p { margin: 8px 0 2px; font-size: clamp(1.05rem, 5vw, 1.42rem); font-weight: 1000; line-height: 1.5; }
#sentence-blank { min-width: 92px; min-height: 42px; padding: 5px 10px; border: 3px dashed var(--blue); border-radius: 12px; color: var(--blue); background: #e6f5ff; font-weight: 1000; }
#sentence-blank.ready { border-style: solid; background: var(--yellow); animation: blank-pulse .8s ease-in-out infinite; }
.boss-options { position: absolute; z-index: 9; left: 12px; right: 12px; top: 370px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.boss-word { --drag-x: 0px; --drag-y: 0px; min-width: 0; min-height: 66px; padding: 10px 5px; border: 3px solid white; border-radius: 18px; color: var(--navy); background: linear-gradient(#fff47c, #ffc83f); box-shadow: 0 7px 0 #9f6311; font-weight: 1000; cursor: grab; touch-action: none; transform: translate3d(var(--drag-x), var(--drag-y), 0); }
.boss-word.dragging { position: relative; z-index: 20; scale: 1.08; box-shadow: 0 10px 0 #9f6311, 0 15px 28px rgba(0,0,0,.3); }
.boss-word.wrong { animation: object-wobble .4s ease; background: #ffaaaa; }
.boss-word.correct { animation: object-warp .5s ease forwards; }
.boss-feedback { position: absolute; z-index: 8; left: 12px; right: 12px; bottom: 14px; min-height: 43px; margin: 0; padding: 9px 12px; border-radius: 14px; color: white; background: rgba(16,36,81,.78); font-size: .78rem; font-weight: 850; text-align: center; }

/* Result */
.result-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.result-confetti { color: var(--yellow); font-size: 2.1rem; text-shadow: 0 4px 0 #bd7200; animation: bolt-run 1.1s ease-in-out infinite; }
.result-hero { width: min(42vw, 200px); margin-top: -5px; filter: drop-shadow(0 12px 7px rgba(16,36,81,.2)); animation: hero-float 1.9s ease-in-out infinite; }
.result-screen h2 { margin: 9px 0 3px; color: var(--navy); font-size: clamp(2.2rem, 9vw, 3.8rem); line-height: .95; }
.result-badge { margin: 7px 0 13px; padding: 6px 12px; border-radius: 999px; color: #723f00; background: var(--yellow); box-shadow: 0 4px 0 #cf9012; font-size: .78rem; font-weight: 950; transform: rotate(-2deg); }
.final-energy { display: flex; flex-direction: column; align-items: center; padding: 11px 34px; border-radius: 22px; color: white; background: var(--navy); box-shadow: 0 7px 0 #061329; }
.final-energy span { font-size: .75rem; font-weight: 850; }
.final-energy strong { color: var(--yellow); font-size: 2.25rem; line-height: 1; }
.final-energy small { margin-top: 6px; padding: 3px 7px; border-radius: 999px; background: var(--coral); font-weight: 900; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 620px); margin: 17px 0 11px; }
.result-stats div { padding: 10px 5px; border: 3px solid white; border-radius: 16px; background: rgba(255,255,255,.7); box-shadow: 0 5px 0 #b4d8e8; }
.result-stats span { display: block; font-size: .75rem; font-weight: 850; }
.result-stats b { display: block; margin-top: 3px; color: var(--blue); font-size: 1.18rem; }
.review-card { width: min(100%, 520px); padding: 10px 13px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: left; }
.review-card h3 { margin: 0 0 7px; font-size: .9rem; }
.review-card p { display: flex; justify-content: space-between; gap: 9px; margin: 4px 0; padding: 6px 8px; border-radius: 9px; background: #eef8ff; font-size: .75rem; }
.review-card p b { color: var(--coral); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
#share-status { min-height: 20px; margin: 10px 0 0; font-size: .76rem; font-weight: 800; }

/* Modals and impact */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(7,18,43,.72); backdrop-filter: blur(6px); }
.modal-card { position: relative; width: min(100%, 480px); padding: 25px; border: 4px solid white; border-radius: 28px; background: #f7fcff; box-shadow: 0 24px 70px rgba(5,11,30,.45); text-align: center; animation: modal-in .3s ease both; }
.modal-close { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--navy); background: #e1f3ff; font-size: 1.5rem; font-weight: 900; cursor: pointer; }
.modal-card h2 { margin: 6px 0 17px; color: var(--navy); font-size: 1.8rem; }
.modal-card ol { display: grid; gap: 9px; margin: 0 0 19px; padding: 0; list-style: none; text-align: left; }
.modal-card li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; padding: 10px; border-radius: 15px; background: #eaf7ff; }
.modal-card li > span { font-size: 1.8rem; text-align: center; }
.modal-card li b, .modal-card li small { display: block; }
.modal-card li small { margin-top: 2px; font-weight: 700; }
.modal-card.compact { max-width: 380px; }
.pause-icon { font-size: 3rem; }
.impact-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; overflow: hidden; color: white; background: rgba(16,36,81,.66); text-align: center; backdrop-filter: blur(2px); }
.impact-overlay::before { content: ""; position: absolute; width: 70vmax; height: 70vmax; opacity: .55; background: repeating-conic-gradient(var(--yellow) 0 8deg, transparent 8deg 19deg); animation: impact-spin .8s ease-out both; }
.impact-overlay > span { position: relative; z-index: 2; font-size: 5rem; filter: drop-shadow(0 8px 0 #b56600); animation: bolt-run .5s ease infinite; }
.impact-overlay strong { position: relative; z-index: 2; color: var(--yellow); font-size: clamp(2.2rem, 11vw, 5rem); line-height: 1; text-shadow: 0 6px 0 #9b5500; animation: impact-title .7s cubic-bezier(.2,.8,.2,1) both; }
.impact-overlay small { position: relative; z-index: 2; margin-top: 11px; padding: 6px 12px; border-radius: 999px; color: var(--navy); background: white; font-weight: 950; }

@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cloud-drift { from { translate: -30px 0; } to { translate: calc(100vw + 120px) 0; } }
@keyframes hero-float { 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes boss-bob { 50% { transform: translateX(-50%) translateY(7px) rotate(-2deg); } }
.boss-card img { transform: translateX(0); }
.boss-card img { animation-name: boss-card-bob; }
@keyframes boss-card-bob { 50% { transform: translateY(7px) rotate(-2deg); } }
@keyframes bolt-run { 50% { transform: scale(1.18) rotate(4deg); filter: brightness(1.15); } }
@keyframes timer-pulse { 50% { transform: scale(1.06); } }
@keyframes ring-pulse { 50% { transform: scale(1.14); opacity: .35; } }
@keyframes machine-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes crusher { 50% { transform: translateX(-50%) scaleX(.7) scaleY(1.12); } }
@keyframes collectible-in { from { opacity: 0; transform: translateY(-120px) scale(.2) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes collectible-hop { 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes gesture-move { 50% { transform: translateX(34px) translateY(7px); opacity: .72; } }
@keyframes portal-glow { to { transform: rotate(360deg); } }
@keyframes portal-hit { 45% { transform: scale(1.12); filter: brightness(1.45); } }
@keyframes portal-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@keyframes object-warp { 40% { transform: scale(1.2) rotate(5deg); filter: brightness(1.4); } to { transform: translateY(-70px) scale(.15); opacity: 0; } }
@keyframes object-wobble { 25% { transform: translateX(-10px) rotate(-4deg); } 55% { transform: translateX(9px) rotate(4deg); } 80% { transform: translateX(-5px); } }
@keyframes hero-dash { 45% { transform: translate(120px, -80px) scale(1.15) rotate(8deg); } }
@keyframes spark-out { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + 100deg)) scale(.2); } }
@keyframes slime-in { from { opacity: 0; transform: scale(.2) rotate(25deg); } }
@keyframes slime-wiggle { 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes slime-pop { to { opacity: 0; transform: scale(1.7); filter: blur(3px); } }
@keyframes storm-fly { 50% { transform: translate(18px, -13px) rotate(5deg); } }
@keyframes cloud-pop { to { transform: scale(1.8); opacity: 0; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes rain-slide { to { background-position: 40px 80px; } }
@keyframes boss-hit { 25% { transform: translateX(-62%) rotate(-8deg); filter: brightness(2); } 70% { transform: translateX(-40%) rotate(7deg); opacity: .55; } }
@keyframes beam-fire { from { width: 0; } 60% { width: 58%; } to { width: 0; left: 58%; } }
@keyframes blank-pulse { 50% { transform: scale(1.08); } }
@keyframes rank-track-up { from { transform: translateY(36px); opacity: .25; } 55% { transform: translateY(-7px); opacity: 1; } to { transform: none; } }
@keyframes rank-track-down { from { transform: translateY(-29px); opacity: .35; } 62% { transform: translateY(5px); opacity: 1; } to { transform: none; } }
@keyframes rank-change-pop { 0% { opacity: 0; transform: translateY(-8px) scale(.55); } 20%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) scale(.88); } }
@keyframes modal-in { from { opacity: 0; transform: scale(.84) translateY(16px); } }
@keyframes impact-spin { from { transform: scale(.1) rotate(-30deg); opacity: 0; } to { transform: scale(1.6) rotate(25deg); opacity: 0; } }
@keyframes impact-title { from { opacity: 0; transform: scale(.2) rotate(-10deg); } 70% { opacity: 1; transform: scale(1.16) rotate(2deg); } }

@media (min-width: 700px) {
  .game-screen { grid-template-rows: auto auto minmax(520px, 1fr) auto; }
  .play-stage { min-height: 520px; }
  .prompt-zone { top: 142px; }
  .target-zone { left: 35px; right: 35px; bottom: 70px; gap: 18px; }
  .portal { min-height: 110px; }
  .grammar-machine { top: 32px; transform: translateX(-50%) scale(1.12); }
  .hero { width: 116px; height: 116px; }
  .boss-stage { min-height: 660px; }
  #boss-image { width: 230px; }
  .sentence-card { top: 276px; }
  .boss-options { top: 420px; gap: 14px; }
  .boss-word { min-height: 78px; }
}

@media (max-width: 520px) {
  .app-shell { padding: 9px; }
  .screen { min-height: calc(100dvh - 18px); }
  .start-screen { padding-inline: 9px; }
  .start-diorama { grid-template-columns: 1fr 55px 1fr; height: 215px; }
  .energy-path { font-size: 1.45rem; }
  .game-screen { grid-template-rows: auto auto minmax(405px, 1fr) auto; gap: 7px; }
  .play-stage { min-height: 405px; border-radius: 22px; }
  .level-label > span { display: none; }
  .hud-pill { min-height: 40px; padding: 6px 8px; }
  .score-pill span { display: none; }
  .icon-button { width: 40px; height: 40px; }
  .mission-strip { min-height: 43px; padding: 7px 9px; }
  .mission-strip > div:first-child { font-size: .78rem; }
  .combo-meter { flex-basis: 92px; }
  .hero { width: 75px; height: 75px; bottom: 16px; left: 8px; }
  .grammar-machine { top: 17px; transform: translateX(-50%) scale(.88); transform-origin: top center; }
  .rank-hud { right: 5px; top: 5px; width: 132px; padding: 5px; border-width: 2px; }
  .rank-lane-head { padding-bottom: 3px; }
  .rank-lane-head span { font-size: .75rem; }
  .rank-lane-head strong { font-size: .82rem; }
  .rank-viewport { height: 93px; }
  .rank-row { grid-template-columns: 19px 21px minmax(0,1fr); min-height: 27px; padding-inline: 3px; }
  .rank-row.you { min-height: 30px; }
  .rank-change { right: 0; }
  .prompt-zone { top: 103px; width: 88%; }
  .drag-object { min-width: 138px; min-height: 70px; padding: 8px 13px; }
  .drag-object > span { font-size: 2rem; }
  .target-zone { left: 7px; right: 7px; bottom: 51px; gap: 5px; }
  .portal { min-height: 80px; padding-inline: 3px; border-width: 3px; }
  .portal span { font-size: .78rem; }
  .portal small { display: none; }
  .stage-message { bottom: 7px; font-size: .75rem; }
  .charge-dock { padding: 7px 9px; }
  .power-card { min-height: 150px; }
  .boss-stage { min-height: 540px; }
  #boss-image { width: 180px; }
  .boss-hero { top: 85px; width: 85px; }
  .sentence-card { top: 218px; }
  .boss-options { top: 350px; }
  .boss-word { min-height: 60px; font-size: .8rem; }
  .boss-feedback { bottom: 10px; }
  .result-actions { flex-direction: column; width: 100%; }
  .result-actions button { width: 100%; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-height: 690px) and (max-width: 520px) {
  .game-screen { grid-template-rows: auto auto 390px auto; }
  .play-stage { min-height: 390px; }
  .prompt-zone { top: 94px; }
  .portal { min-height: 74px; }
  .boss-stage { min-height: 500px; }
  #boss-image { width: 150px; }
  .sentence-card { top: 178px; }
  .boss-options { top: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}