@font-face {
      font-family: "ONDER";
      src: url("../ONDER-REGULAR.TTF") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --bg-a: #16d7ff;
      --bg-b: #8af58f;
      --ink: #14233a;
      --white: #ffffff;
      --pink: #ff79bb;
      --yellow: #ffe25b;
      --mint: #b9fff2;
      --cream: #fff8d2;
      --input-bg: rgba(255, 255, 255, 0.96);
      --shadow-flat: 0 12px 0 rgba(20, 35, 58, 0.14);
      --shadow-soft: 0 24px 40px rgba(20, 35, 58, 0.16);
      --card-shadow: 0 16px 0 rgba(20, 35, 58, 0.12), 0 30px 46px rgba(20, 35, 58, 0.16);
      --radius-xl: 36px;
      --radius-lg: 26px;
      --radius-md: 18px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), transparent 18%),
        linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
      color: var(--ink);
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image: radial-gradient(var(--ink) 1.7px, transparent 1.7px);
      background-size: 18px 18px;
      opacity: 0.16;
      pointer-events: none;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 48%);
      pointer-events: none;
    }

    .scene {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
      padding: 34px 20px 48px;
    }

    .blob,
    .mini-burst,
    .sticker,
    .ring,
    .burst-main {
      position: absolute;
      pointer-events: none;
    }

    .blob {
      border: 8px solid var(--ink);
      border-radius: 999px;
      box-shadow: 0 16px 0 rgba(20,35,58,0.12);
      animation: blobFloat 8s ease-in-out infinite;
      z-index: 1;
    }

    .blob.left {
      top: -4rem;
      left: -4rem;
      width: 16rem;
      height: 16rem;
      background: var(--pink);
    }

    .blob.right {
      right: -3rem;
      top: 12rem;
      width: 18rem;
      height: 18rem;
      background: var(--yellow);
      animation-duration: 9s;
      animation-direction: reverse;
    }

    .ring {
      left: 50%;
      top: 320px;
      width: min(84vmin, 760px);
      height: min(84vmin, 760px);
      transform: translate(-50%, -50%);
      border: 8px dashed rgba(255,255,255,0.54);
      border-radius: 50%;
      animation: spin 38s linear infinite;
      z-index: 1;
    }

    .burst-main {
      left: 50%;
      top: 320px;
      width: min(92vw, 980px);
      height: min(56vmin, 620px);
      transform: translate(-50%, -50%) rotate(-2deg);
      z-index: 2;
    }

    .burst-main::before,
    .burst-main::after,
    .burst-main .inner {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: polygon(50% 0%,58% 12%,72% 5%,74% 19%,89% 12%,84% 28%,100% 32%,89% 44%,98% 58%,82% 60%,86% 77%,70% 72%,66% 90%,50% 79%,34% 90%,30% 72%,14% 77%,18% 60%,2% 58%,11% 44%,0% 32%,16% 28%,11% 12%,26% 19%,28% 5%,42% 12%);
      border-radius: 18%;
    }

    .burst-main::before {
      background: #ffe500;
      border: 8px solid var(--ink);
      box-shadow: 0 18px 0 rgba(20,35,58,0.16), 0 34px 60px rgba(20,35,58,0.18);
    }

    .burst-main::after {
      inset: 5%;
      background: rgba(255, 180, 94, 0.26);
    }

    .burst-main .inner {
      inset: 11%;
      background: rgba(255,255,255,0.20);
    }

    .mini-burst {
      width: 5rem;
      height: 5rem;
      border: 5px solid var(--ink);
      border-radius: 18px;
      clip-path: polygon(50% 0%,58% 18%,76% 10%,74% 29%,96% 27%,82% 43%,100% 50%,82% 57%,96% 73%,74% 71%,76% 90%,58% 82%,50% 100%,42% 82%,24% 90%,26% 71%,4% 73%,18% 57%,0% 50%,18% 43%,4% 27%,26% 29%,24% 10%,42% 18%);
      box-shadow: 0 10px 0 rgba(20,35,58,0.12);
      animation: pulseWobble 4.8s ease-in-out infinite;
      z-index: 1;
    }

    .mini-burst.b1 { left: 6%; top: 8%; background: #fff; }
    .mini-burst.b2 { right: 7%; top: 10%; background: #ff8fc9; animation-delay: -1s; }
    .mini-burst.b3 { left: 8%; top: 44%; background: #fff4a3; animation-delay: -1.8s; }
    .mini-burst.b4 { right: 8%; top: 50%; background: #baf6ff; animation-delay: -0.7s; }

    .sticker {
      z-index: 4;
      animation: stickerFloat 6s ease-in-out infinite;
    }

    .sticker-card {
      width: 96px;
      height: 96px;
      border: 5px solid var(--ink);
      border-radius: 28px;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow-flat), var(--shadow-soft);
      background: #fff;
    }

    .sticker svg {
      width: 50px;
      height: 50px;
      display: block;
    }

    .s1 { left: 7%; top: 17%; }
    .s2 { right: 9%; top: 18%; animation-delay: -1.2s; }
    .s3 { left: 8%; top: 61%; animation-delay: -0.8s; }
    .s4 { right: 9%; top: 64%; animation-delay: -1.6s; }
    .s5 { left: 14%; top: 9%; animation-delay: -0.6s; }
    .s6 { right: 15%; top: 8%; animation-delay: -1.4s; }
    .s7 { left: 10%; bottom: 8%; animation-delay: -0.9s; }
    .s8 { right: 10%; bottom: 8%; animation-delay: -1.7s; }

    .s2 .sticker-card { background: var(--yellow); }
    .s3 .sticker-card { background: #ffb0d3; }
    .s4 .sticker-card { background: var(--mint); }
    .s5 .sticker-card,
    .s6 .sticker-card { background: #ffffff; }
    .s7 .sticker-card { background: #ffdff0; }
    .s8 .sticker-card { background: #e9ffcc; }

    .icon-stroke,
    .figma-stroke {
      stroke: var(--ink);
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .icon-stroke {
      stroke-width: 2.5;
    }

    .figma-stroke {
      stroke-width: 1.6;
    }

.shell {
  position: relative;
  z-index: 8;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: 34px;
  justify-items: center;
}

  .hero {
    width: 100%;
    display: grid;
    justify-items: center;
    padding-bottom: 28px;
  }

    .badge {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid var(--ink);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      box-shadow: 0 10px 0 rgba(20,35,58,0.12);
      white-space: nowrap;
      user-select: none;
      z-index: 12;
      animation: stickerFloat 6s ease-in-out infinite;
    }

    .badge.top {
      top: 30px;
      padding: 0.8rem 1.4rem;
      font-size: clamp(0.85rem, 1.6vw, 1.2rem);
    }

    .title-stage {
      width: min(92vw, 1400px);
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .title-fit {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: scale(var(--word-fit-scale, 1));
      transform-origin: center center;
    }

    .word-shadow,
    .word {
      font-family: "ONDER", Impact, Arial Black, Arial, sans-serif;
      letter-spacing: 0.005em;
      line-height: 0.82;
    }

    .word-shadow {
      position: absolute;
      font-size: clamp(74px, 16vw, 240px);
      text-transform: uppercase;
      color: rgba(20,35,58,0.18);
      transform: translate(0.05em, 0.08em);
      white-space: nowrap;
      user-select: none;
    }

    .word-plate {
      position: absolute;
      inset: -1.2rem -1.7rem;
      border: 5px solid var(--ink);
      border-radius: 32px;
      background: rgba(255,255,255,0.52);
      animation: plateMove 7s ease-in-out infinite;
      z-index: -1;
      box-shadow: 0 16px 32px rgba(20,35,58,0.08);
    }

    .word {
      position: relative;
      font-size: clamp(74px, 16vw, 240px);
      text-transform: uppercase;
      white-space: nowrap;
      color: #fffdf6;
      -webkit-text-stroke: 7px var(--ink);
      paint-order: stroke fill;
      text-shadow: 0 10px 0 rgba(20,35,58,0.14), 0 20px 30px rgba(20,35,58,0.16);
      user-select: none;
    }

    .letter {
      display: inline-block;
      transform-origin: center bottom;
    }

    .letter.jump {
      animation: letterJump 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
    }

    .form-card {
      position: relative;
      width: min(1180px, 100%);
      justify-self: center;
      margin-top: 0;
      border: 6px solid var(--ink);
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 18px 0 rgba(20,35,58,0.14), 0 34px 54px rgba(20,35,58,0.18);
      backdrop-filter: blur(6px);
      padding: clamp(42px, 4vw, 58px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px);
      overflow: visible;
    }

    .form-card::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 3px dashed rgba(20,35,58,0.18);
      border-radius: calc(var(--radius-xl) - 10px);
      pointer-events: none;
    }

    .form-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 20;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 64px;
  padding: 0.9rem 1.8rem;
  border: 5px solid var(--ink);
  border-radius: 999px;
  background: #fffdf6;
  color: var(--ink);

  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 0 10px 0 rgba(20,35,58,0.12), 0 20px 30px rgba(20,35,58,0.12);
}

    .form-doodle {
      position: absolute;
      width: 118px;
      height: 118px;
      z-index: 0;
      pointer-events: none;
      opacity: 0.85;
    }

    .form-doodle svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .form-doodle path,
    .form-doodle circle {
      fill: none;
      stroke: rgba(20,35,58,0.72);
      stroke-width: 3.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .form-doodle.left {
      left: -34px;
      top: 56px;
      transform: rotate(-7deg);
    }

    .form-doodle.right {
      right: -28px;
      bottom: 46px;
      transform: rotate(9deg);
    }

    .form-grid {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 18px;
    }

    .top-fields {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
    }

    .field {
      display: grid;
      gap: 8px;
    }
    .participant-card .field {
    align-self: start;
    }

    .field label,
    .participants-title,
    .hint,
    .status {
      color: var(--ink);
    }

    .field label,
    .participants-title {
      font-size: 0.95rem;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .field input {
      width: 100%;
      min-height: 60px;
      padding: 0.95rem 1rem;
      border: 4px solid var(--ink);
      border-radius: var(--radius-md);
      background: var(--input-bg);
      color: var(--ink);
      font-size: 1rem;
      font-weight: 700;
      outline: none;
      box-shadow: 0 8px 0 rgba(20,35,58,0.08);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .field input:focus {
      transform: translateY(-2px);
      box-shadow: 0 12px 0 rgba(20,35,58,0.1);
      border-color: #20395d;
    }

    .participants-wrap {
      display: grid;
      gap: 14px;
    }

    .participants-title-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      align-items: baseline;
      justify-content: space-between;
    }

    .hint {
      font-size: 0.92rem;
      font-weight: 700;
      opacity: 0.7;
    }

    .participants-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .participant-card {
      display: grid;
      gap: 12px;
      padding: 18px;
      border: 4px solid var(--ink);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,0.88);
      box-shadow: 0 10px 0 rgba(20,35,58,0.08);
    }

    .participant-card.captain-card {
      background: linear-gradient(180deg, rgba(255, 240, 171, 0.98), rgba(255,255,255,0.96));
    }


    .participant-deco {
      display: grid;
      place-items: center;
      align-content: center;
      justify-items: center;
      text-align: center;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,232,0.94));
      position: relative;
      overflow: hidden;
      min-height: 100%;
      padding: 22px;
    }

    .participant-deco::before {
      content: "";
      position: absolute;
      inset: 16px;
      border-radius: 24px;
      border: 3px dashed rgba(20,35,58,0.14);
      transform: rotate(-1.8deg);
    }

    .participant-deco::after {
      content: "";
      position: absolute;
      width: 110px;
      height: 110px;
      right: -18px;
      top: -14px;
      border-radius: 50%;
      background: rgba(255,143,201,0.18);
      border: 3px dashed rgba(20,35,58,0.12);
    }

    .stamp-badge {
      position: relative;
      z-index: 1;
      width: 170px;
      height: 170px;
      border: 5px solid rgba(20,35,58,0.78);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at center, rgba(255,255,255,0.72), rgba(255,248,210,0.4));
      box-shadow:
        inset 0 0 0 6px rgba(20,35,58,0.08),
        0 8px 0 rgba(20,35,58,0.08);
      transform: rotate(-10deg);
    }

    .stamp-badge::before,
    .stamp-badge::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      inset: 12px;
      border: 2px dashed rgba(20,35,58,0.28);
    }

    .stamp-badge::after {
      inset: 26px;
      border-style: solid;
      border-width: 2px;
      opacity: 0.55;
    }

    .stamp-lines {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 6px;
      text-align: center;
      text-transform: uppercase;
      color: rgba(20,35,58,0.92);
      line-height: 1;
    }

    .stamp-small {
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.2em;
    }

    .stamp-main {
      font-size: 1.5rem;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .stamp-sub {
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.16em;
    }

    .stamp-stars {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 8px;
      margin-top: 12px;
      opacity: 0.72;
    }

    .stamp-stars svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: var(--ink);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.3;
    }

    .participant-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .participant-title {
      font-size: 1rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--ink);
    }

    .captain-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 3px solid var(--ink);
      border-radius: 999px;
      background: #fff;
      font-size: 0.82rem;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--ink);
      cursor: pointer;
      user-select: none;
      transition: transform 0.18s ease, background 0.18s ease;
    }

    .captain-toggle:hover {
      transform: translateY(-2px);
      background: #fff7b8;
    }

    .captain-toggle input {
      appearance: none;
      width: 16px;
      height: 16px;
      border: 3px solid var(--ink);
      border-radius: 50%;
      background: #fff;
      position: relative;
      margin: 0;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .captain-toggle input:checked::after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 50%;
      background: var(--ink);
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
      padding-top: 4px;
    }

    .submit-btn,
    .back-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 64px;
      border: 5px solid var(--ink);
      border-radius: 999px;
      text-decoration: none;
      font-weight: 900;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .submit-btn {
      min-width: 280px;
      padding: 1.05rem 2rem;
      background: linear-gradient(180deg, #ffd84d 0%, #ffbe2e 100%);
      color: var(--ink);
      box-shadow: 0 12px 0 rgba(20,35,58,0.14), 0 22px 34px rgba(20,35,58,0.14);
      font-size: 1.18rem;
    }

    .submit-btn:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 16px 0 rgba(20,35,58,0.14), 0 28px 40px rgba(20,35,58,0.18);
      background: linear-gradient(180deg, #ffe36a 0%, #ffc93c 100%);
    }

    .submit-btn:active {
      transform: translateY(2px) scale(0.995);
      box-shadow: 0 8px 0 rgba(20,35,58,0.14), 0 16px 24px rgba(20,35,58,0.14);
    }

    .back-link {
      min-width: 180px;
      padding: 0.95rem 1.3rem;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 10px 0 rgba(20,35,58,0.1);
    }

    .back-link:hover {
      transform: translateY(-3px);
      background: #fff7b8;
    }

    .status {
      min-height: 24px;
      font-size: 0.95rem;
      font-weight: 800;
      opacity: 0.82;
    }

    .submit-btn:focus-visible,
    .back-link:focus-visible,
    .field input:focus-visible {
      outline: 4px solid rgba(255,255,255,0.95);
      outline-offset: 4px;
    }


    .paper-clip {
      position: absolute;
      width: 56px;
      height: 56px;
      z-index: 3;
      pointer-events: none;
      opacity: 0.82;
    }

    .paper-clip svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: rgba(20,35,58,0.44);
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .paper-clip.left {
      top: 14px;
      left: 16px;
      transform: rotate(-18deg);
    }

    .paper-clip.right {
      top: 14px;
      right: 16px;
      transform: rotate(15deg);
    }


    .success-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(20,35,58,0.34);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.26s ease, visibility 0.26s ease;
      z-index: 100;
    }

    .success-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .success-dialog {
      width: min(460px, 100%);
      border: 5px solid var(--ink);
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,248,227,0.98));
      box-shadow: 0 18px 0 rgba(20,35,58,0.14), 0 30px 54px rgba(20,35,58,0.18);
      padding: 28px 24px 22px;
      text-align: center;
      transform: translateY(18px) scale(0.96);
      transition: transform 0.26s ease;
      position: relative;
      overflow: hidden;
    }

    .success-modal.is-open .success-dialog {
      transform: translateY(0) scale(1);
    }

    .success-dialog::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 14px;
      background: linear-gradient(90deg, #ffd84d 0%, #ff9fc9 48%, #baf6ff 100%);
    }

    .success-badge {
      width: 92px;
      height: 92px;
      margin: 6px auto 16px;
      border: 5px solid var(--ink);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #ffe36a 0%, #ffc93c 100%);
      box-shadow: 0 10px 0 rgba(20,35,58,0.12);
      font-size: 2rem;
      font-weight: 900;
      color: var(--ink);
    }

    .success-title {
      font-size: clamp(1.4rem, 2.4vw, 2rem);
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .success-text {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.45;
      color: rgba(20,35,58,0.82);
      margin-bottom: 18px;
    }

    .success-actions {
      display: flex;
      justify-content: center;
    }

    .success-close {
      min-width: 190px;
      min-height: 58px;
      padding: 0.9rem 1.2rem;
      border: 4px solid var(--ink);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 0 rgba(20,35,58,0.1);
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .success-close:hover {
      transform: translateY(-2px);
      background: #fff7b8;
      box-shadow: 0 12px 0 rgba(20,35,58,0.12);
    }

    .success-close:active {
      transform: translateY(2px);
      box-shadow: 0 6px 0 rgba(20,35,58,0.1);
    }

    .success-close:focus-visible {
      outline: 4px solid rgba(255,255,255,0.95);
      outline-offset: 4px;
    }


    @keyframes blobFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(12px) rotate(8deg); }
    }

    @keyframes spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

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

    @keyframes stickerFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-10px) rotate(5deg); }
    }

    @keyframes plateMove {
      0%,100% { transform: rotate(-1deg) translateY(0); }
      50% { transform: rotate(0.8deg) translateY(-3px); }
    }

    @keyframes letterJump {
      0% { transform: translateY(0) rotate(0deg) scale(1,1); }
      35% { transform: translateY(calc(var(--lift, 10px) * -1)) rotate(var(--tilt, 0deg)) scale(0.98,1.04); }
      100% { transform: translateY(0) rotate(0deg) scale(1,1); }
    }

    @media (max-width: 980px) {
      .burst-main {
        width: min(94vw, 900px);
        height: min(58vmin, 560px);
      }

      .participants-grid {
        grid-template-columns: 1fr;
      }

      .participant-deco {
        min-height: 170px;
      }

      .top-fields {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .scene {
        padding: 22px 14px 34px;
      }

      .ring {
        width: 94vmin;
        height: 94vmin;
        top: 270px;
      }

      .burst-main {
        top: 270px;
        width: 96vw;
        height: min(62vmin, 500px);
      }

      .badge.top,
      .s5,
      .s6 { display: none; }

      .hero {
    min-height: 440px;
    padding-bottom: 20px;
  }

  .form-card {
    margin-top: 0;
    border-width: 5px;
  }

      .corner-fold {
        width: 58px;
        height: 58px;
        right: 12px;
      }

      .form-doodle {
        width: 92px;
        height: 92px;
      }

      .participant-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .actions {
        flex-direction: column-reverse;
        align-items: stretch;
      }

      .submit-btn,
      .back-link {
        width: 100%;
      }
    }


    @media (max-width: 560px) {
      .sticker-card {
        width: 68px;
        height: 68px;
        border-radius: 22px;
      }

      .sticker svg {
        width: 36px;
        height: 36px;
      }

      .mini-burst {
        width: 4.2rem;
        height: 4.2rem;
      }

      .s3,
      .s4,
      .s5,
      .s6 { display: none; }

      .field input {
        min-height: 56px;
      }

      .form-doodle.left {
        left: -18px;
        top: 46px;
      }

      .form-doodle.right {
        right: -18px;
        bottom: 34px;
      }

      .word-plate {
        inset: -0.8rem -1rem;
        border-width: 4px;
        border-radius: 24px;
      }

      .word {
        -webkit-text-stroke: 5px var(--ink);
      }
    }

    @media (max-width: 430px) {
      .scene {
        padding: 14px 10px 28px;
      }

     

      .badge.top {
        display: none;
      }

      .ring {
        width: 110vmin;
        height: 110vmin;
        top: 210px;
        opacity: 0.55;
      }

      .burst-main {
        top: 210px;
        width: 108vw;
        height: 340px;
      }

      .word-stage {
        width: 96vw;
      }

      .word-plate {
        inset: -0.55rem -0.7rem;
        border-width: 3px;
        border-radius: 18px;
      }

      .word,
      .word-shadow {
        font-size: clamp(48px, 14vw, 72px);
        -webkit-text-stroke: 4px var(--ink);
      }

       .hero {
    min-height: 220px;
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .form-card {
    margin-top: 0;
    padding: 16px;
    border-width: 4px;
    border-radius: 24px;
  }

      .form-card::before {
        inset: 10px;
        border-width: 2px;
      }

      .participant-card {
        padding: 14px;
        border-width: 3px;
        border-radius: 18px;
      }

      .participant-deco {
        min-height: 150px;
        padding: 16px;
      }

      .stamp-badge {
        width: 128px;
        height: 128px;
      }

      .stamp-main {
        font-size: 1.2rem;
      }

      .stamp-small,
      .stamp-sub {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
      }

      .stamp-stars {
        margin-top: 10px;
      }

      .stamp-stars svg {
        width: 16px;
        height: 16px;
      }

      .field label,
      .participants-title {
        font-size: 0.82rem;
      }

      .field input {
        min-height: 52px;
        padding: 0.82rem 0.9rem;
        font-size: 0.95rem;
        border-width: 3px;
      }

      .participant-title {
        font-size: 0.9rem;
      }

      .captain-toggle {
        padding: 8px 10px;
        font-size: 0.74rem;
      }

      .actions {
        gap: 10px;
      }

      .submit-btn,
      .back-link {
        min-height: 58px;
        font-size: 0.92rem;
        border-width: 4px;
      }

      .paper-clip.right {
        width: 46px;
        height: 46px;
        top: 8px;
        right: 10px;
      }

      .form-doodle {
        width: 72px;
        height: 72px;
        opacity: 0.65;
      }

      .form-doodle.left {
        left: -10px;
        top: 38px;
      }

      .form-doodle.right {
        right: -10px;
        bottom: 24px;
      }

      .s7,
      .s8,
      .mini-burst.b3,
      .mini-burst.b4 {
        display: none;
      }

      .success-modal {
        padding: 12px;
      }

      .success-dialog {
        width: min(340px, 100%);
        padding: 24px 16px 18px;
        border-width: 4px;
        border-radius: 24px;
      }

      .success-badge {
        width: 74px;
        height: 74px;
        margin: 4px auto 12px;
        font-size: 1.6rem;
      }

      .success-title {
        font-size: 1.22rem;
        margin-bottom: 8px;
      }

      .success-text {
        font-size: 0.92rem;
        margin-bottom: 14px;
      }

      .success-close {
        min-width: 160px;
        min-height: 52px;
        font-size: 0.9rem;
        border-width: 3px;
      }
    }
@media (max-width: 720px) {
  .form-badge {
    min-height: 56px;
    padding: 0.75rem 1.3rem;
    font-size: 0.92rem;
    border-width: 4px;
  }

  .form-card {
    padding-top: 48px;
  }
}
@media (max-width: 430px) {
  .form-badge {
    min-height: 48px;
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    border-width: 3px;
    letter-spacing: 0.05em;
  }

  .form-card {
    padding-top: 40px;
  }
}
@media (max-width: 430px) {
  .submit-btn {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}

.page-transition-layer {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transform: scale(1.04);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}

body.page-is-entering .scene {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
}

body.page-ready .scene {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

body.page-leaving .scene {
  opacity: 0;
  transform: translateY(-18px) scale(0.985);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

body.page-leaving .page-transition-layer {
  opacity: 1;
  transform: scale(1);
}