:root {
  --blue: #1b9ed4;
  --blue-deep: #0878b5;
  --blue-soft: #dff6ff;
  --yellow: #ffd65a;
  --yellow-soft: #fff5bf;
  --orange: #ff8a3d;
  --orange-deep: #e96520;
  --green: #35b77c;
  --ink: #174b67;
  --muted: #64869a;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(25, 126, 170, 0.16);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: #c8f0ff;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid rgba(255, 138, 61, 0.45);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,214,90,.45) 0 42px, transparent 43px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.6) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 72%, rgba(255,255,255,.52) 0 6px, transparent 7px),
    linear-gradient(180deg, #49c3f4 0%, #a8eaff 43%, #fff3c4 100%);
  isolation: isolate;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.app-shell::before {
  inset: 39% -18% auto;
  height: 180px;
  z-index: 0;
  border-radius: 48%;
  background:
    radial-gradient(circle at 20% 68%, rgba(255,255,255,.7) 0 8px, transparent 9px),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(31,170,223,.22));
  transform: rotate(-4deg);
}

.app-shell::after {
  right: -38px;
  bottom: 118px;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0 18px, transparent 19px);
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 20px calc(160px + env(safe-area-inset-bottom));
  opacity: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.screen-cover {
  background:
    linear-gradient(180deg, rgba(113,216,246,0) 0 74%, rgba(122,221,244,.74) 84%, #fff0bd 100%),
    url("images/home/sea-bg2.jpg") center top / cover no-repeat;
}

.screen.is-active {
  display: block;
  animation: screen-in .42s ease forwards;
}

.screen-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  min-height: calc(100vh - 158px);
  min-height: calc(100dvh - 158px);
  margin: 0 auto;
  text-align: center;
}

.screen-cover .screen-content {
  min-height: calc(100vh - 158px);
  min-height: calc(100dvh - 158px);
}

.sky-decor {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 170px;
  pointer-events: none;
}

.sun {
  position: absolute;
  top: 33px;
  right: 29px;
  width: 54px;
  height: 54px;
  border: 5px solid rgba(255,255,255,.48);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 28px rgba(255, 214, 90, .75);
  animation: sun-breathe 4s ease-in-out infinite;
}

.sun-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 231, 120, .8);
  transform-origin: center;
  z-index: -1;
}

.sun-ray-1 { transform: translate(-50%, -50%); }
.sun-ray-2 { transform: translate(-50%, -50%) rotate(45deg); }
.sun-ray-3 { transform: translate(-50%, -50%) rotate(90deg); }
.sun-ray-4 { transform: translate(-50%, -50%) rotate(135deg); }

.cloud {
  position: absolute;
  width: 70px;
  height: 25px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
}

.cloud::before,
.cloud span {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  width: 32px;
  height: 32px;
  left: 13px;
  bottom: 6px;
}

.cloud span:first-child {
  width: 25px;
  height: 25px;
  right: 12px;
  bottom: 5px;
}

.cloud-left {
  top: 55px;
  left: -18px;
  transform: scale(.8);
}

.cloud-right {
  top: 116px;
  right: 71px;
  transform: scale(.52);
  opacity: .75;
}

.mini-badge,
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 10px;
  padding: 7px 14px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
}

.cover-content h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(43px, 11.2vw, 54px);
  line-height: 1.04;
  letter-spacing: 2px;
  text-shadow: 0 4px 0 rgba(8, 120, 181, .18), 0 10px 22px rgba(8, 120, 181, .15);
}

.cover-content h1 span {
  color: #ffe35d;
  text-shadow: 0 4px 0 rgba(20, 125, 184, .18), 0 7px 16px rgba(255, 167, 48, .24);
}

.subtitle {
  margin: 10px 0 6px;
  color: #096f9e;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hero-illustration {
  display: grid;
  place-items: center;
  height: 196px;
  margin: -4px auto 0;
}

.detective-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 204px;
  height: 164px;
  border: 4px solid rgba(255,255,255,.8);
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 50% 78%, rgba(41,169,221,.24) 0 52px, transparent 53px),
    rgba(255,255,255,.31);
  transform: rotate(-3deg);
}

.lifebuoy {
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  border: 22px solid var(--orange);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 16px 30px rgba(14, 112, 166, .2);
}

.lifebuoy-center {
  display: grid;
  place-items: center;
  width: 71px;
  height: 71px;
  border-radius: 50%;
  color: var(--blue-deep);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.75) 0 10px, transparent 11px),
    linear-gradient(180deg, #d8f7ff, #8bdff9);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: inset 0 0 18px rgba(11,126,181,.12);
}

.lifebuoy-band {
  position: absolute;
  z-index: 1;
  width: 25px;
  height: 35px;
  background: white;
}

.band-top { top: -23px; left: 31px; }
.band-bottom { bottom: -23px; left: 31px; }
.band-left { left: -17px; top: 27px; transform: rotate(90deg); }
.band-right { right: -17px; top: 27px; transform: rotate(90deg); }

.sparkle,
.water-drop {
  position: absolute;
  font-weight: 900;
}

.sparkle-one {
  top: 5px;
  right: 3px;
  color: var(--yellow);
  font-size: 29px;
  animation: twinkle 1.8s ease-in-out infinite;
}

.sparkle-two {
  bottom: 8px;
  left: 4px;
  color: white;
  font-size: 26px;
  animation: twinkle 1.8s .5s ease-in-out infinite;
}

.water-drop {
  right: -20px;
  bottom: 26px;
  font-size: 25px;
  transform: rotate(10deg);
}

.splash {
  position: absolute;
  z-index: -1;
  width: 56px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 12% 48%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 44% 24%, #ffffff 0 4px, transparent 5px),
    radial-gradient(circle at 74% 54%, #ffffff 0 6px, transparent 7px);
  opacity: .82;
}

.splash-one {
  right: 15px;
  bottom: 19px;
  transform: rotate(-12deg);
}

.splash-two {
  left: 19px;
  bottom: 16px;
  transform: scale(.8) rotate(14deg);
}

.shell-decor {
  position: absolute;
  right: 10px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 23px;
  border-radius: 50% 50% 35% 35%;
  color: #ff8a3d;
  background: #ffe1c4;
  font-size: 14px;
  font-weight: 900;
  transform: rotate(-13deg);
}

.mini-shell-decor {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 22px;
  height: 18px;
  border-radius: 50% 50% 35% 35%;
  background: linear-gradient(135deg, #fff2ce, #ffc078);
  transform: rotate(12deg);
}

.safety-tips {
  display: grid;
  gap: 8px;
  margin: 1px auto 14px;
}

.safety-tips p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 13px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 17px;
  color: #1b5b75;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(25,126,170,.1);
  text-align: left;
}

.safety-tips span {
  flex: 0 0 auto;
  color: #0878b5;
  font-size: 13px;
  font-weight: 900;
}

.safety-tips span::before {
  content: "✦";
  margin-right: 5px;
  color: #ffb22f;
}

.safety-tips strong {
  min-width: 0;
  color: #214f65;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}

.home-video-card {
  position: relative;
  z-index: 2;
  margin: 0 auto 18px;
  padding: 14px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,250,255,.9));
  box-shadow: var(--shadow);
  text-align: center;
}

.home-video-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #8b6307;
  background: #fff0aa;
  font-size: 15px;
  font-weight: 900;
}

.home-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 3px solid #bde8f6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.92) 0 9px, transparent 10px),
    linear-gradient(135deg, #dff7ff, #fff6bd);
  aspect-ratio: 4 / 3;
}

.home-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0c2835;
  object-fit: cover;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(18, 112, 149, .88);
  box-shadow: 0 8px 18px rgba(10, 75, 104, .28);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}

.video-play-button[hidden] {
  display: none;
}

.video-play-button:active {
  transform: translate(-50%, -50%) scale(.95);
}

.video-play-button:focus-visible {
  outline: 3px solid #ffcf4a;
  outline-offset: 3px;
}

.video-play-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid currentColor;
}

.home-video-note {
  margin: 10px 4px 0;
  color: #4d7f95;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.video-fallback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.video-fallback-link:active {
  transform: scale(.98);
}

.student-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 17px;
  border: 3px solid rgba(255,255,255,.86);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow);
  text-align: left;
}

.form-title {
  margin: 0 0 2px;
  color: var(--blue-deep);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.home-challenge-tip {
  position: relative;
  z-index: 2;
  width: min(100%, 320px);
  margin: -4px auto 14px;
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 20px;
  color: #0b78b3;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(25,126,170,.12);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.home-challenge-tip p {
  margin: 0;
}

.home-challenge-tip p + p {
  color: #e96b22;
}

.form-field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.field-stack {
  display: grid;
  gap: 5px;
}

.field-help {
  color: #5b879b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.form-field > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.form-field input,
.form-field select {
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 0 12px;
  border: 2px solid #c8e8f3;
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #f7fcff;
  font: inherit;
  font-size: 14px;
  appearance: none;
}

.form-field select {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue-deep) 50%),
    linear-gradient(135deg, var(--blue-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 18px,
    calc(100% - 12px) 18px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--blue);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(27,158,212,.12);
}

.form-field.is-invalid input,
.form-field.is-invalid select {
  border-color: #ef6b55;
  background-color: #fff5f2;
}

.home-visual {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0 auto 12px;
  padding-top: 0;
}

.home-visual img {
  display: block;
  height: auto;
  object-fit: contain;
}

.home-slogan-img {
  width: min(92vw, 352px);
  margin: 0 auto -4px;
  filter: drop-shadow(0 7px 12px rgba(15, 117, 179, .13));
}

.home-title-img-wrap {
  margin: 0;
  line-height: 0;
}

.home-title-img {
  width: min(94vw, 356px);
  filter: drop-shadow(0 12px 18px rgba(9, 114, 176, .18));
}

.home-subtitle-img {
  width: min(82vw, 312px);
  margin-top: -8px;
  filter: drop-shadow(0 8px 13px rgba(5, 91, 160, .14));
}

.home-lifebuoy-img {
  width: min(86vw, 332px);
  max-width: 332px;
  margin-top: 0;
  filter: drop-shadow(0 18px 20px rgba(13, 112, 161, .18));
}

.primary-button {
  position: relative;
  width: min(100%, 310px);
  min-height: 54px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--orange), #ff7034);
  box-shadow: 0 8px 0 #d95724, 0 14px 24px rgba(220, 87, 36, .23);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.primary-button span {
  display: inline-block;
  margin-left: 8px;
  font-size: 22px;
  line-height: 0;
}

.primary-button:active {
  transform: translateY(5px) scale(.98);
  box-shadow: 0 3px 0 #d95724, 0 7px 14px rgba(220, 87, 36, .2);
}

.float-button {
  animation: button-float 2.2s ease-in-out infinite;
}

.story-content {
  padding-top: 48px;
}

.mission-sign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 16px;
  border: 3px solid #e4a72a;
  border-radius: 8px;
  color: #9a6410;
  background: var(--yellow);
  box-shadow: 0 6px 0 rgba(170, 111, 14, .18);
  font-weight: 900;
  transform: rotate(-2deg);
}

.sign-pin {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: white;
  background: var(--orange);
}

.story-content .eyebrow,
.result-content .eyebrow {
  display: block;
  width: fit-content;
  margin-bottom: 3px;
  color: var(--blue-deep);
  background: transparent;
  border: 0;
}

.story-content h2,
.result-content h2 {
  margin: 0 0 20px;
  color: white;
  font-size: 38px;
  text-shadow: 0 3px 0 rgba(8, 120, 181, .2);
}

.story-content h2 {
  margin-bottom: 44px;
}

.story-card {
  position: relative;
  margin-bottom: 24px;
  padding: 53px 23px 25px;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 25px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow);
}

.story-icon {
  position: absolute;
  top: -31px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 30px;
  transform: translateX(-50%);
  box-shadow: 0 7px 16px rgba(25, 126, 170, .18);
}

.story-card p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.72;
}

.story-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  color: var(--yellow);
}

.story-divider::before,
.story-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #cfeaf3;
}

.quiz-content {
  padding-top: 6px;
}

.quiz-header {
  margin-bottom: 17px;
  padding: 12px 2px 0;
}

.level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #096f9e;
  font-size: 15px;
  font-weight: 900;
}

.stars {
  display: flex;
  gap: 4px;
}

.star {
  color: rgba(255,255,255,.67);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(8, 120, 181, .12);
}

.star.is-lit {
  color: var(--yellow);
  text-shadow: 0 2px 0 #e5a820, 0 0 10px rgba(255,214,90,.7);
  animation: star-pop .55s cubic-bezier(.2, 1.5, .5, 1);
}

.progress-track {
  height: 12px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 1px 3px rgba(0, 92, 130, .12);
}

.progress-fill {
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  transition: width .4s ease;
}

.question-card {
  position: relative;
  padding: 20px 17px 19px;
  border: 3px solid rgba(255,255,255,.88);
  border-radius: 25px;
  background: rgba(255,255,255,.91);
  box-shadow: var(--shadow);
  text-align: left;
}

.question-label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 70px;
}

.level-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 3px solid #ffc344;
  border-radius: 13px;
  color: white;
  background: var(--orange);
  box-shadow: 0 4px 0 #df642a;
  font-size: 21px;
  font-weight: 900;
  transform: rotate(-3deg);
}

.question-label p {
  margin: 0 0 2px;
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.question-label h2 {
  margin: 0;
  color: var(--blue-deep);
  font-size: 18px;
}

.type-badge {
  position: absolute;
  top: 22px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #80620b;
  background: var(--yellow-soft);
  font-size: 12px;
  font-weight: 900;
}

.question-card h3 {
  margin: 20px 2px 6px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.42;
}

.select-hint {
  margin: 0 2px 14px;
  color: var(--muted);
  font-size: 13px;
}

.options-list {
  display: grid;
  gap: 10px;
}

.option-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 13px;
  border: 2px solid #c8e8f3;
  border-radius: 16px;
  color: var(--ink);
  background: #f6fcff;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}

.option-button:active {
  transform: scale(.975);
}

.option-letter {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  border: 2px solid #b7dce9;
  border-radius: 10px;
  color: var(--blue-deep);
  background: white;
  font-size: 15px;
  font-weight: 900;
}

.option-text {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.38;
}

.option-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 2px solid #b7dce9;
  border-radius: 50%;
  background: white;
}

.option-button.is-selected {
  border-color: var(--blue);
  background: #dff6ff;
  transform: scale(1.012);
}

.option-button.is-selected .option-letter {
  color: white;
  border-color: var(--blue);
  background: var(--blue);
}

.option-button.is-selected .option-check {
  border: 5px solid var(--blue);
}

.option-button.is-locked {
  cursor: default;
}

.option-button.is-correct {
  border-color: var(--green);
  background: #e5f9ef;
}

.option-button.is-wrong {
  border-color: #f06e5d;
  background: #fff0ed;
}

.confirm-button {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 18px auto 0;
  font-size: 17px;
}

.confirm-button:disabled {
  color: #91a9b4;
  background: #dce9ee;
  box-shadow: 0 6px 0 #bdcfd6;
  cursor: default;
}

.selection-warning {
  height: 18px;
  margin: 12px 0 -6px;
  color: #dc5539;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: .2s ease;
}

.selection-warning.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(11, 77, 107, .46);
  backdrop-filter: blur(4px);
}

.feedback-overlay.is-visible {
  display: flex;
  animation: fade-in .25s ease;
}

.feedback-card {
  position: relative;
  width: min(100%, 380px);
  padding: 56px 23px 25px;
  border: 4px solid white;
  border-radius: 28px;
  background: #fffdf3;
  box-shadow: 0 22px 55px rgba(12, 67, 93, .28);
  text-align: center;
  animation: card-pop .4s cubic-bezier(.2, 1.15, .4, 1);
}

.feedback-icon {
  position: absolute;
  top: -39px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 5px solid white;
  border-radius: 50%;
  color: white;
  background: var(--green);
  box-shadow: 0 8px 20px rgba(24, 121, 82, .25);
  font-size: 39px;
  transform: translateX(-50%);
}

.feedback-card.is-wrong .feedback-icon {
  background: var(--orange);
}

.feedback-card h2 {
  margin: 0 0 16px;
  color: var(--green);
  font-size: 29px;
}

.feedback-card.is-wrong h2 {
  color: var(--orange-deep);
}

.feedback-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #9b6b0c;
  background: var(--yellow-soft);
  font-size: 13px;
  font-weight: 900;
}

.feedback-text {
  margin: 0 0 20px;
  color: #456f83;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.7;
}

.screen-result {
  padding-top: max(26px, env(safe-area-inset-top));
  overflow-y: auto;
}

.result-content {
  padding-top: 12px;
}

.result-content h2 {
  margin-bottom: 7px;
}

.result-student {
  margin: 0 0 5px;
  color: #176f95;
  font-size: 16px;
  font-weight: 900;
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 3px 0 7px;
}

.result-stars .star {
  font-size: 31px;
}

.score-line {
  margin: 0 0 15px;
  color: #176f95;
  font-size: 15px;
  font-weight: 800;
}

.score-line strong {
  color: var(--orange-deep);
  font-size: 23px;
}

.title-card {
  position: relative;
  margin: 48px 0 17px;
  padding: 88px 20px 28px;
  border: 4px solid white;
  border-radius: 25px;
  background: linear-gradient(145deg, #fff9cd, #fff);
  box-shadow: var(--shadow);
  animation: card-pop .58s .18s cubic-bezier(.2, 1.15, .4, 1) both;
  overflow: visible;
}

.medal {
  position: absolute;
  top: -43px;
  left: 50%;
  z-index: 3;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
}

.medal-face {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 6px solid white;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #ffd75c, #ff9a38);
  box-shadow: 0 7px 15px rgba(203, 123, 23, .22);
  font-size: 34px;
}

.medal-ribbon {
  position: absolute;
  bottom: -18px;
  z-index: 1;
  width: 27px;
  height: 45px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.medal-ribbon.left { left: 8px; transform: rotate(14deg); }
.medal-ribbon.right { right: 8px; transform: rotate(-14deg); }

.title-card p {
  position: relative;
  z-index: 4;
  margin: 0 0 12px;
  color: var(--orange-deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.4;
}

.title-card h3 {
  position: relative;
  z-index: 4;
  margin: 0;
  color: var(--blue-deep);
  font-size: clamp(23px, 7vw, 30px);
  line-height: 1.35;
}

.title-stars {
  position: relative;
  z-index: 4;
  margin-top: 7px;
  color: #f2b822;
  letter-spacing: 8px;
}

.result-message {
  min-height: 73px;
  margin: 0 6px 16px;
  color: #3f6d82;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}

.surprise-boxes {
  position: relative;
  margin: -2px 0 18px;
  padding: 17px 13px 16px;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(218,246,255,.82));
  box-shadow: var(--shadow);
}

.surprise-boxes h3 {
  display: inline-block;
  margin: 0 0 5px;
  padding: 7px 16px;
  border-radius: 999px;
  color: #8a5b00;
  background: linear-gradient(180deg, #fff2a0, #ffd15a);
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(222, 146, 18, .18);
}

.surprise-boxes > p {
  margin: 0 0 12px;
  color: #3e7188;
  font-size: 13px;
  font-weight: 800;
}

.surprise-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.surprise-card {
  min-height: 104px;
  perspective: 700px;
}

.surprise-card-inner {
  position: relative;
  width: 100%;
  min-height: 104px;
  transform-style: preserve-3d;
  transition: transform .55s ease;
  animation: gentle-flip 5.2s ease-in-out infinite;
}

.surprise-card:nth-child(2) .surprise-card-inner {
  animation-delay: .45s;
}

.surprise-card:nth-child(3) .surprise-card-inner {
  animation-delay: .9s;
}

.surprise-card:active .surprise-card-inner,
.surprise-card:hover .surprise-card-inner {
  transform: rotateY(180deg);
}

.surprise-card-front,
.surprise-card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 104px;
  padding: 8px 6px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 18px;
  backface-visibility: hidden;
}

.surprise-card-front {
  color: #166d95;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.8) 0 5px, transparent 6px),
    linear-gradient(180deg, #7bdbff, #27a9dc);
}

.surprise-card-front strong {
  color: white;
  font-size: 13px;
  text-shadow: 0 2px 0 rgba(13,105,154,.18);
}

.surprise-card-back {
  color: #8a5b00;
  background: linear-gradient(180deg, #fff5bd, #ffd56b);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  transform: rotateY(180deg);
}

.surprise-icon {
  display: block;
  width: 42px;
  height: 42px;
}

.ring-icon {
  border: 9px solid #ff8a3d;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 36%, white 37% 63%, transparent 64%),
    linear-gradient(0deg, transparent 36%, white 37% 63%, transparent 64%),
    #ffffff;
}

.shell-icon {
  width: 45px;
  height: 35px;
  border-radius: 50% 50% 36% 36%;
  background:
    radial-gradient(circle at 50% 12%, #ffffff 0 4px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, transparent 3px 8px),
    linear-gradient(135deg, #ffe6c7, #ff9e4a);
}

.drop-icon {
  width: 34px;
  height: 42px;
  border-radius: 58% 58% 58% 58% / 72% 72% 42% 42%;
  background: linear-gradient(180deg, #ffffff, #92efff 54%, #24aee6);
  transform: rotate(14deg);
}

.result-actions {
  display: grid;
  gap: 13px;
  justify-items: center;
}

.secondary-button {
  width: min(100%, 310px);
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  color: var(--blue-deep);
  background: white;
  box-shadow: 0 6px 0 #b6dfec;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.secondary-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b6dfec;
}

.result-confetti span {
  position: absolute;
  color: var(--yellow);
  font-size: 20px;
  animation: twinkle 2s ease-in-out infinite;
}

.result-confetti span:nth-child(1) { top: 38px; left: 15px; }
.result-confetti span:nth-child(2) { top: 90px; right: 14px; color: white; animation-delay: .4s; }
.result-confetti span:nth-child(3) { top: 152px; left: 1px; color: var(--orange); font-size: 10px; }
.result-confetti span:nth-child(4) { top: 210px; right: 1px; animation-delay: .8s; }
.result-confetti span:nth-child(5) { top: 290px; left: 4px; color: white; }

.screen-share {
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: calc(190px + env(safe-area-inset-bottom));
}

.share-main-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin: 2px auto 46px;
  color: white;
  font-size: 36px !important;
  font-weight: 800;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  text-align: center;
  text-shadow: none !important;
  white-space: normal !important;
  transform: none !important;
  -webkit-text-stroke: 0 !important;
}

.share-main-title span {
  display: block;
  line-height: inherit;
}

.share-achievement-card,
.participation-card {
  position: relative;
  padding: 24px 19px;
  border: 4px solid white;
  border-radius: 25px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

.share-achievement-card {
  padding-top: 49px;
  animation: card-pop .58s .1s cubic-bezier(.2, 1.15, .4, 1) both;
}

.share-medal {
  position: absolute;
  top: -35px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 5px solid white;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #ffd75c, #ff9138);
  box-shadow: 0 7px 15px rgba(203,123,23,.22);
  font-size: 32px;
  transform: translateX(-50%);
}

@media (min-width: 391px) {
  .share-main-title {
    font-size: 40px !important;
  }
}

.share-name {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.share-name strong {
  color: var(--orange-deep);
  font-size: 21px;
}

.share-achievement-card h3 {
  margin: 0 0 15px;
  color: var(--blue-deep);
  font-size: 23px;
}

.share-title-block {
  position: relative;
  overflow: hidden;
  margin: 0 auto 12px;
  padding: 12px;
  border-radius: 15px;
  background: var(--yellow-soft);
}

.share-title-block span {
  display: block;
  margin-bottom: 4px;
  color: #87640e;
  font-size: 13px;
  font-weight: 800;
}

.share-title-block strong {
  color: var(--orange-deep);
  font-size: 24px;
}

.share-score {
  margin: 0 0 10px;
  color: #176f95;
  font-size: 16px;
  font-weight: 800;
}

.share-score strong {
  color: var(--orange-deep);
  font-size: 24px;
}

.share-invite {
  margin: 0;
  color: #456f83;
  font-size: 15px;
  font-weight: 700;
}

.participation-card {
  z-index: 3;
  margin: 20px 0 32px;
  padding-top: 18px;
}

.participation-card h3 {
  display: inline-block;
  margin: 0 0 13px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #8b630c;
  background: var(--yellow-soft);
  font-size: 17px;
}

.participation-card .participation-text {
  margin: 24px 0 18px;
  color: #456f83;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  word-break: keep-all;
}

.qrcode-wrap {
  width: 176px;
  min-height: 176px;
  margin: 0 auto;
  padding: 8px;
  border: 3px solid #bce6f3;
  border-radius: 16px;
  background: white;
  box-shadow: 0 7px 18px rgba(25,126,170,.12);
}

.qrcode-img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  object-fit: contain;
}

.toast {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border-radius: 999px;
  color: white;
  background: rgba(14, 64, 88, .92);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: .25s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.page-footer {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 42px;
  padding: 0 4px 54px;
  color: rgba(7, 87, 123, .76);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.page-footer span {
  display: block;
  line-height: 1.75;
}

.page-footer .sponsor {
  letter-spacing: 1px;
  word-spacing: 0;
}

.page-footer .joint,
.page-footer .slogan {
  letter-spacing: 2px;
}

.water-waves {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 58px;
  overflow: hidden;
  pointer-events: none;
}

.wave {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 72px;
  border-radius: 45% 55% 0 0;
}

.wave-back {
  top: 14px;
  background: rgba(55, 184, 226, .58);
  animation: wave-move 7s ease-in-out infinite alternate;
}

.wave-front {
  top: 28px;
  background: #169ed4;
  animation: wave-move 5s ease-in-out infinite alternate-reverse;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes card-pop {
  from { opacity: 0; transform: scale(.82) translateY(15px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

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

@keyframes star-pop {
  0% { transform: scale(.45) rotate(-20deg); }
  60% { transform: scale(1.35) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(.75) rotate(-8deg); opacity: .7; }
  50% { transform: scale(1.15) rotate(8deg); opacity: 1; }
}

@keyframes sun-breathe {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.06) rotate(4deg); }
}

@keyframes wave-move {
  from { transform: translateX(-6%) rotate(-1deg); }
  to { transform: translateX(6%) rotate(1deg); }
}

/* Playful edition visual layer: CSS-only decorations and lightweight motion. */
.app-shell {
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 18%, rgba(255,246,175,.9) 0 4px, transparent 5px),
    linear-gradient(180deg, #66d0f3 0%, #bdf0ff 43%, #fff7ce 100%);
}

.playful-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  display: block;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 10px rgba(255,255,255,.36);
  animation: bubble-rise 8s ease-in-out infinite;
}

.bubble-1 { width: 18px; height: 18px; left: 10%; bottom: 12%; animation-duration: 7s; }
.bubble-2 { width: 28px; height: 28px; right: 12%; bottom: 22%; animation-duration: 9s; animation-delay: 1s; }
.bubble-3 { width: 12px; height: 12px; left: 78%; bottom: 55%; animation-duration: 6s; animation-delay: .4s; }
.bubble-4 { width: 22px; height: 22px; left: 18%; bottom: 48%; animation-duration: 10s; animation-delay: 1.8s; }
.bubble-5 { width: 14px; height: 14px; right: 28%; bottom: 8%; animation-duration: 7.5s; animation-delay: 2.4s; }

.mini-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 9px solid #ff8a3d;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(0deg, transparent 38%, #fff 38% 62%, transparent 62%);
  opacity: .35;
  animation: ring-drift 9s ease-in-out infinite;
}

.ring-1 { top: 210px; left: -12px; transform: rotate(-16deg); }
.ring-2 { right: -14px; top: 52%; transform: scale(.82) rotate(18deg); animation-delay: 1.2s; }

.flag {
  position: absolute;
  top: 146px;
  left: 18px;
  width: 64px;
  height: 36px;
  border-radius: 10px 14px 14px 10px;
  background:
    radial-gradient(circle at 19px 18px, #fff 0 5px, transparent 6px),
    linear-gradient(135deg, #ffd85b 0 55%, #ff9d3f 55%);
  box-shadow: 0 8px 18px rgba(8,120,181,.12);
  transform: rotate(-4deg);
  animation: flag-sway 3.2s ease-in-out infinite;
}

.flag::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 5px;
  height: 44px;
  border-radius: 999px;
  background: rgba(8,120,181,.42);
}

.flag::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 14px solid #ff9d3f;
}

.star-float {
  position: absolute;
  color: rgba(255,216,91,.82);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(8,120,181,.12);
  animation: star-drift 4.5s ease-in-out infinite;
}

.star-float-1 {
  top: 168px;
  right: 38px;
  font-size: 20px;
}

.star-float-2 {
  top: 264px;
  left: 30px;
  color: rgba(255,255,255,.9);
  font-size: 18px;
  animation-delay: 1.2s;
}

.screen-content,
.sky-decor,
.water-waves {
  position: relative;
}

.screen.is-active .screen-content {
  animation: content-float-in .46s ease both;
}

.mini-badge {
  max-width: calc(100vw - 48px);
  padding: 9px 20px;
  border-color: rgba(255,255,255,.96);
  box-shadow: 0 8px 20px rgba(19,129,190,.18), inset 0 -2px 0 rgba(28,151,207,.12);
  font-size: clamp(16px, 4.2vw, 18px);
  line-height: 1.25;
  letter-spacing: 1px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(215,247,255,.9));
  white-space: nowrap;
}

.cover-content h1 {
  animation: title-float 3.3s ease-in-out infinite;
}

.subtitle::after {
  content: "  ✦";
  color: var(--yellow);
}

.launch-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -3px auto 14px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #8f5d0b;
  background: rgba(255,246,181,.86);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(229,168,32,.14);
}

.launch-tip::before,
.launch-tip::after {
  content: "★";
  color: #ffad33;
  font-size: 12px;
}

.student-form,
.story-card,
.question-card,
.title-card,
.share-achievement-card,
.participation-card {
  border-color: rgba(255,255,255,.96);
  box-shadow: 0 16px 34px rgba(25,126,170,.18);
}

.student-form::before,
.question-card::before,
.share-achievement-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 42%);
  pointer-events: none;
}

.student-form {
  overflow: hidden;
}

.primary-button {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(135deg, #ff9d3e, #ff6f32);
  animation: button-glow 2.4s ease-in-out infinite;
}

.screen-cover .primary-button {
  color: #8a5b00;
  border: 3px solid rgba(255,255,255,.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), transparent 45%),
    linear-gradient(135deg, #ffe96a, #ffc01e);
  box-shadow: 0 8px 0 #e69511, 0 16px 28px rgba(217,132,19,.24);
  font-size: 19px;
}

.screen-cover .primary-button:active {
  box-shadow: 0 3px 0 #e69511, 0 8px 16px rgba(217,132,19,.2);
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 7px 20px auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  pointer-events: none;
}

.quiz-header {
  position: sticky;
  top: 0;
  z-index: 6;
  padding-bottom: 8px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(186,239,255,.95), rgba(186,239,255,.6) 70%, transparent);
  backdrop-filter: blur(4px);
}

.level-row span:first-child::before {
  content: "🚩 ";
}

.progress-track {
  height: 15px;
  background: rgba(255,255,255,.76);
}

.progress-fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #ffd85b, #ff9d3f, #2ec9ef);
  box-shadow: 0 0 12px rgba(255,157,63,.28);
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-100%);
  animation: progress-shine 1.8s ease-in-out infinite;
}

.question-card {
  animation: card-slide-up .42s ease both;
}

.level-icon {
  animation: level-wiggle 2.4s ease-in-out infinite;
}

.option-button {
  box-shadow: 0 5px 0 rgba(183,220,233,.45);
}

.option-button:active {
  transform: translateY(3px) scale(.985);
  box-shadow: 0 2px 0 rgba(183,220,233,.55);
}

.option-button.is-selected {
  box-shadow: 0 6px 0 rgba(27,158,212,.25);
}

.feedback-icon,
.medal-face,
.share-medal {
  animation: badge-pop-soft 2.2s ease-in-out infinite;
}

.feedback-card::before,
.title-card::before,
.share-title-block::before {
  content: "✦";
  position: absolute;
  top: 14px;
  right: 18px;
  color: rgba(255,173,51,.62);
  font-size: 18px;
  animation: twinkle 1.9s ease-in-out infinite;
}

.title-card h3,
.share-title-block strong {
  text-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.result-confetti span {
  animation: confetti-drift 3.4s ease-in-out infinite;
}

.result-confetti span:nth-child(2n) {
  animation-delay: .7s;
}

.qrcode-wrap {
  animation: qrcode-breathe 3.2s ease-in-out infinite;
}

.water-waves {
  opacity: .96;
}

.wave-front {
  box-shadow: 0 -10px 24px rgba(22,158,212,.18);
}

@keyframes bubble-rise {
  0%, 100% { transform: translateY(0) scale(1); opacity: .45; }
  50% { transform: translateY(-34px) scale(1.08); opacity: .85; }
}

@keyframes ring-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 8px -14px; }
}

@keyframes flag-sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-4px); }
}

@keyframes star-drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: .72; }
  50% { transform: translateY(-12px) rotate(10deg); opacity: 1; }
}

@keyframes content-float-in {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

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

@keyframes button-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,138,61,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,138,61,.28)); }
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(110%); }
}

@keyframes card-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gentle-flip {
  0%, 72%, 100% { transform: rotateY(0); }
  82%, 88% { transform: rotateY(10deg); }
}

@keyframes level-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes badge-pop-soft {
  0%, 100% { scale: 1; }
  50% { scale: 1.04; }
}

@keyframes confetti-drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: .75; }
  50% { transform: translateY(-10px) rotate(8deg); opacity: 1; }
}

@keyframes qrcode-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}

@media (max-height: 780px) {
  .screen {
    padding-top: max(23px, env(safe-area-inset-top));
  }

  .cover-content h1 {
    font-size: 42px;
  }

  .hero-illustration {
    height: 174px;
    transform: scale(.86);
    margin: -9px auto -13px;
  }

  .intro-copy {
    line-height: 1.5;
  }

  .story-content {
    padding-top: 22px;
  }

  .story-card {
    padding-top: 45px;
  }
}

@media (max-width: 430px) {
  .screen {
    padding-right: 16px;
    padding-left: 16px;
  }

  .screen-content {
    max-width: 398px;
  }

  .cover-content h1 {
    font-size: clamp(40px, 11vw, 48px);
  }

  .student-form,
  .question-card,
  .story-card,
  .share-achievement-card,
  .participation-card {
    border-radius: 22px;
  }

  .form-field input,
  .form-field select {
    font-size: 16px;
  }

  .question-card h3 {
    font-size: 20px;
  }

  .option-text {
    font-size: 14px;
  }

  .title-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .share-main-title {
    font-size: 36px !important;
  }
}

@media (max-width: 390px) {
  .screen {
    padding-right: 14px;
    padding-left: 14px;
  }

  .share-main-title {
    font-size: 34px !important;
  }

  .share-achievement-card h3 {
    font-size: 21px;
  }

  .share-title-block strong {
    font-size: 22px;
  }

  .page-footer {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .question-card {
    padding-right: 13px;
    padding-left: 13px;
  }

  .question-card h3 {
    font-size: 19px;
  }

  .option-text {
    font-size: 14px;
  }

  .form-field {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .share-main-title {
    font-size: 32px !important;
  }
}

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