:root {
  --ink: #fff9f2;
  --muted: #c9c0df;
  --night: #10062b;
  --purple: #6c37ff;
  --pink: #ff5bbd;
  --cyan: #5de7ff;
  --yellow: #ffe15b;
  --red: #ff5247;
  --card: rgba(33, 20, 68, .76);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(108, 55, 255, .48), transparent 36rem),
    linear-gradient(180deg, #150939 0%, #0e0625 70%, #090419 100%);
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
button[hidden], [hidden] { display: none !important; }

.stars, .stars::before, .stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.76) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(93,231,255,.5) 1px, transparent 1.5px);
  background-position: 0 0, 37px 57px;
  background-size: 86px 86px, 133px 133px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.stars::before, .stars::after { content: ''; opacity: .35; transform: rotate(17deg) scale(1.2); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(13, 5, 35, .78);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-family: Fredoka, sans-serif; font-weight: 700; }
.brand i { color: var(--pink); font-style: normal; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #160b35;
  background: linear-gradient(135deg, var(--yellow), #ff9c45);
  box-shadow: 0 8px 22px rgba(255, 173, 69, .28);
  font-size: 13px;
  letter-spacing: -1px;
}
.top-actions, .collection { display: flex; align-items: center; gap: 10px; }
.collection { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.06); }
.collection span { white-space: nowrap; font-size: 14px; }
.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font-weight: 900;
}

.hero-shell { max-width: 1180px; min-height: calc(100vh - 72px); margin: 0 auto; padding: clamp(64px, 9vh, 112px) 24px 48px; text-align: center; }
.eyebrow, .kicker { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 14px; }
.eyebrow span { width: 30px; height: 2px; background: currentColor; opacity: .5; }
h1, h2 { margin: 0; font-family: Fredoka, sans-serif; }
h1 { margin-top: 20px; font-size: clamp(3.4rem, 9vw, 7.2rem); line-height: .88; letter-spacing: -.055em; text-wrap: balance; }
h1 em { color: transparent; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--cyan)); background-clip: text; font-style: normal; }
.hero-copy { max-width: 620px; margin: 28px auto 42px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); }

.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.portal {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px 18px;
  min-height: 230px;
  padding: 26px;
  overflow: hidden;
  color: white;
  text-align: left;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.portal::before { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border: 30px solid rgba(255,255,255,.07); border-radius: 50%; }
.portal:hover { transform: translateY(-6px) rotate(-.4deg); border-color: rgba(255,255,255,.42); }
.portal-little { background: linear-gradient(145deg, rgba(255,91,189,.9), rgba(110,55,255,.78)); box-shadow: 0 22px 70px rgba(255,91,189,.18); }
.portal-big { background: linear-gradient(145deg, rgba(39,121,255,.9), rgba(67,25,161,.86)); box-shadow: 0 22px 70px rgba(53,107,255,.18); }
.portal-icon { display: grid; place-items: center; width: 72px; height: 72px; border: 2px solid rgba(255,255,255,.28); border-radius: 24px; background: rgba(255,255,255,.12); font: 700 35px Fredoka, sans-serif; transform: rotate(-5deg); }
.portal-copy { display: flex; flex-direction: column; align-items: flex-start; }
.portal-copy small { margin-bottom: 5px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.portal-copy strong { font: 700 clamp(24px, 3vw, 34px) Fredoka, sans-serif; }
.portal-copy > span { margin-top: 8px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.45; }
.portal-go { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; font-weight: 900; }
.portal-go b { font-size: 24px; transition: transform .2s ease; }
.portal:hover .portal-go b { transform: translateX(5px); }
.scroll-cue { margin-top: 40px; color: rgba(255,255,255,.45); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.scroll-cue span { display: block; margin-top: 6px; color: var(--cyan); font-size: 18px; animation: bob 1.5s ease-in-out infinite; }

.heroes-section { max-width: 1180px; margin: 0 auto; padding: 90px 24px 120px; }
.section-heading { text-align: center; }
.section-heading h2, .mission-copy h2 { margin-top: 9px; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em; }
.section-heading p { color: var(--muted); }
.hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 520px;
  padding: 18px;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: var(--card);
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
}
.hero-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.34); }
.hero-badge { align-self: flex-start; z-index: 2; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portrait-wrap { position: relative; display: grid; place-items: center; height: 330px; margin: 4px -10px 8px; }
.portrait-wrap img { position: relative; z-index: 1; max-width: 100%; max-height: 340px; object-fit: contain; filter: drop-shadow(0 20px 14px rgba(0,0,0,.25)); transition: transform .3s ease; }
.hero-card:hover img { transform: scale(1.04) rotate(1deg); }
.hero-glow { position: absolute; width: 230px; height: 230px; border-radius: 50%; filter: blur(28px); opacity: .24; }
.sawyer-card .hero-glow { background: var(--pink); }
.odin-card .hero-glow { background: var(--yellow); }
.colin-card .hero-glow { background: var(--cyan); }
.hero-name { font: 700 29px Fredoka, sans-serif; text-align: left; }
.hero-owner { color: var(--muted); text-align: left; font-size: 13px; }
.hero-power { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 14px 0 2px; border-top: 1px solid rgba(255,255,255,.1); color: var(--cyan); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.hero-power b { font-size: 22px; }
.custom-face { position: absolute; z-index: 4; top: 35.5%; left: 36%; display: flex; justify-content: center; gap: 16%; width: 28%; height: 10%; padding: 2%; overflow: hidden; background: #091840; border-radius: 28%; transform: perspective(90px) rotateX(-2deg); pointer-events: none; }
.custom-face i { width: 24%; height: 72%; margin-top: 4%; background: #fff9df; box-shadow: 0 0 8px #62eaff; image-rendering: pixelated; }
.custom-face[data-face="happy"] i { clip-path: polygon(0 0,100% 0,100% 65%,75% 65%,75% 100%,25% 100%,25% 65%,0 65%); }
.custom-face[data-face="laser"] i { width: 35%; height: 35%; margin-top: 19%; background: #ff5bbd; }
.custom-face[data-face="wink"] i:last-child { height: 10%; margin-top: 31%; }
.custom-face[data-face="star"] i { background: var(--yellow); clip-path: polygon(50% 0,61% 35%,100% 35%,69% 57%,81% 100%,50% 72%,19% 100%,31% 57%,0 35%,39% 35%); }
.hero-message { max-width: 720px; min-height: 56px; margin: 28px auto 0; padding: 16px 22px; color: var(--muted); text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.04); }

.mission-section { display: grid; grid-template-columns: 1.3fr .7fr; gap: 52px; align-items: center; max-width: 1080px; margin: 0 auto 120px; padding: 54px; border: 1px solid rgba(255,255,255,.13); border-radius: 38px; background: linear-gradient(135deg, rgba(75,36,153,.46), rgba(18,9,52,.7)); }
.mission-copy p { max-width: 600px; color: var(--muted); line-height: 1.65; }
.mission-copy ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.mission-copy li { display: flex; align-items: center; gap: 12px; }
.mission-copy li span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; color: #170a39; background: var(--yellow); font-weight: 900; }
.surprise-machine { position: relative; min-height: 360px; padding: 28px; text-align: center; border: 3px solid rgba(255,255,255,.16); border-radius: 38px; background: linear-gradient(160deg, #ee46a9, #7338ff); box-shadow: inset 0 0 0 8px rgba(24,11,59,.18), 0 28px 60px rgba(0,0,0,.25); }
.machine-label { font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.surprise-preview { display: grid; place-items: center; width: 170px; height: 170px; margin: 25px auto; border: 8px solid #311363; border-radius: 34px; background: #f7edff; box-shadow: inset 0 5px 20px rgba(33,10,72,.2); font-size: 80px; }
.surprise-machine button { padding: 13px 20px; color: #221044; border: 0; border-radius: 999px; background: var(--yellow); box-shadow: 0 6px 0 #bd8432; cursor: pointer; font-weight: 900; }
.surprise-machine button:active { transform: translateY(4px); box-shadow: 0 2px 0 #bd8432; }
.surprise-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.surprise-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 18px 0 0 var(--yellow); }

footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1180px; margin: 0 auto; padding: 30px 24px 42px; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
footer button { color: inherit; border: 0; background: transparent; cursor: pointer; }
footer button:hover { color: white; }

.eye-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; background: #20104b; box-shadow: 0 40px 120px #000; }
.eye-dialog::backdrop { background: rgba(7,3,20,.78); backdrop-filter: blur(8px); }
.eye-dialog form { position: relative; padding: 38px; }
.eye-dialog h2 { margin-top: 8px; font-size: 38px; }
.eye-dialog p { color: var(--muted); }
.dialog-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; color: white; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); cursor: pointer; font-size: 24px; }
.eye-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.eye-options button { display: grid; gap: 5px; padding: 18px; color: white; border: 2px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.06); cursor: pointer; font-weight: 900; }
.eye-options button span { color: var(--cyan); font-size: 24px; letter-spacing: .2em; }
.eye-options button.selected { border-color: var(--yellow); background: rgba(255,225,91,.12); }

.game-open { overflow: hidden; }
.game-screen { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr; color: #241245; background: #dff8ff; }
.game-header { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 10px clamp(12px, 3vw, 38px); color: white; background: #160b35; box-shadow: 0 5px 0 rgba(42,19,85,.2); }
.game-back { justify-self: start; padding: 10px 16px; color: white; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.08); cursor: pointer; font-weight: 900; }
.game-mode { display: flex; flex-direction: column; text-align: center; }
.game-mode small { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.game-mode strong { font: 700 clamp(18px, 3vw, 28px) Fredoka, sans-serif; }
.game-stats { justify-self: end; display: flex; gap: 8px; }
.game-stats span { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.09); font-size: 12px; white-space: nowrap; }
.game-stats b { color: var(--yellow); }
.game-arena { position: relative; overflow: hidden; background: linear-gradient(#6ee9ff 0%, #c8f8ff 58%, #b2ef9d 59%, #65ca65 100%); outline: none; isolation: isolate; }
.game-arena::after { content: ''; position: absolute; z-index: -1; bottom: 0; left: 0; right: 0; height: 25%; opacity: .38; background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(40,130,51,.25) 72px 76px); }
.game-arena.glitch-mode { background: linear-gradient(#17295d 0%, #4d37a5 59%, #2a1a61 60%, #120d32 100%); }
.game-arena.glitch-mode::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 4px, #6df7ff 5px); }
.arena-cloud { position: absolute; top: 15%; width: 190px; height: 58px; border-radius: 99px; background: rgba(255,255,255,.7); }
.arena-cloud::before, .arena-cloud::after { content: ''; position: absolute; bottom: 0; width: 80px; height: 80px; border-radius: 50%; background: inherit; }
.arena-cloud::before { left: 30px; } .arena-cloud::after { right: 25px; width: 100px; height: 100px; }
.cloud-one { left: 8%; } .cloud-two { top: 28%; right: 8%; transform: scale(.7); opacity: .7; }
.glitch-mode .arena-cloud { opacity: .12; }
.bubble-layer { position: absolute; inset: 0; }
.rescue-bubble { position: absolute; z-index: 3; left: var(--left); bottom: -150px; display: grid; place-items: center; width: var(--size); height: var(--size); padding: 0; color: white; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.86) 0 5%, rgba(255,255,255,.18) 7% 18%, rgba(103,190,255,.32) 55%, rgba(101,71,255,.4)); box-shadow: inset -12px -10px 20px rgba(78,65,220,.18), 0 8px 20px rgba(45,81,154,.22); cursor: crosshair; animation: bubble-fly var(--flight) linear forwards; }
.rescue-bubble span { font-size: calc(var(--size) * .43); filter: drop-shadow(0 3px 2px rgba(38,22,86,.25)); }
.rescue-bubble:hover { filter: brightness(1.12); }
.glitch-bubble { border-style: dashed; border-color: #ff6bd6; background: radial-gradient(circle, #3b1a66, #120620); box-shadow: 0 0 25px #ff4bd0; animation-name: glitch-fly; }
.glitch-bubble span { color: #ff70d9; }
.player-dock { position: absolute; z-index: 5; bottom: 0; left: clamp(10px, 3vw, 34px); display: flex; align-items: flex-end; pointer-events: none; }
.player-dock img { width: clamp(120px, 19vw, 230px); max-height: 34vh; object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 12px rgba(24,32,77,.3)); }
.shot-readout { margin: 0 0 30px -12px; padding: 10px 14px; color: white; border: 3px solid white; border-radius: 16px; background: #702eff; transform: rotate(-2deg); box-shadow: 0 6px 0 #3f158f; }
.shot-readout small { display: block; color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.shot-readout strong { font: 700 16px Fredoka, sans-serif; }
.team-dock { position: absolute; z-index: 6; right: clamp(10px, 3vw, 30px); bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px; color: white; border-radius: 20px; background: rgba(20,8,52,.82); box-shadow: 0 10px 30px rgba(20,8,52,.25); }
.team-dock > span { padding: 0 6px; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.team-dock button { display: grid; grid-template-columns: 42px auto; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; color: #27114a; border: 0; border-radius: 14px; background: white; cursor: pointer; font-size: 11px; font-weight: 900; }
.team-dock button img { width: 42px; height: 42px; object-fit: contain; }
.team-dock button.used { opacity: .5; filter: grayscale(1); }
.boss { position: absolute; z-index: 4; top: 15%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(180px, 28vw, 330px); height: clamp(150px, 23vw, 270px); color: white; border: 6px solid rgba(255,255,255,.6); cursor: crosshair; transform: translateX(-50%); animation: boss-arrive .7s cubic-bezier(.2,1.5,.4,1), boss-float 2s .7s ease-in-out infinite; }
.boss.blobzilla { border-radius: 46% 52% 38% 44% / 55% 40% 54% 42%; background: linear-gradient(145deg, #ff73ce, #8433ee); box-shadow: inset -18px -15px 0 rgba(75,20,120,.2), 0 20px 0 rgba(78,41,137,.16); }
.boss.glitch-king { border-radius: 18px; border-color: #61ecff; background: #1d0a40; box-shadow: 12px 12px 0 #ff3fcb, -12px -12px 0 #5ee8ff; animation-name: boss-arrive, glitch-king-float; }
.boss span { display: block; font-size: clamp(26px, 5vw, 52px); line-height: 1; }
.boss strong { margin-top: 12px; font: 700 clamp(18px, 3vw, 30px) Fredoka, sans-serif; }
.boss.bonked { animation: bonk .25s ease-out; }
.boss-meter { position: absolute; z-index: 6; top: 9%; left: 50%; width: min(360px, 60vw); height: 18px; padding: 4px; border: 2px solid white; border-radius: 999px; background: #351266; transform: translateX(-50%); }
.boss-meter span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #ff683f); transition: width .25s ease; }
.game-announcement { position: absolute; z-index: 12; top: 42%; left: 50%; padding: 14px 24px; color: white; border: 4px solid white; border-radius: 18px; background: #ff3aa8; box-shadow: 8px 8px 0 #45137d; font: 700 clamp(20px,4vw,42px) Fredoka,sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.7) rotate(-4deg); transition: opacity .2s, transform .2s; white-space: nowrap; }
.game-announcement.show { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
.projectile, .pop-burst { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%,-50%); }
.projectile { font-size: 42px; animation: projectile .55s ease-out forwards; }
.pop-burst { color: white; font: 900 22px Fredoka,sans-serif; text-shadow: 3px 3px 0 #ff42aa; animation: pop .55s ease-out forwards; }

.result-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(17,7,44,.72); backdrop-filter: blur(8px); }
.result-card { width: min(520px, 100%); padding: 38px; color: white; text-align: center; border: 2px solid rgba(255,255,255,.22); border-radius: 34px; background: linear-gradient(145deg, #6f32ed, #321260); box-shadow: 0 30px 90px #080318; }
.result-emoji { display: block; font-size: 74px; }
.result-card h2 { margin-top: 10px; font-size: clamp(32px, 7vw, 50px); line-height: .95; }
.result-card p { color: #d8cfec; line-height: 1.5; }
.result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.result-actions button { padding: 13px 20px; color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.1); cursor: pointer; font-weight: 900; }
.result-actions button:first-child { color: #27114a; border: 0; background: var(--yellow); }

@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes hero-bounce { 30% { transform: translateY(-14px) rotate(-1deg); } 65% { transform: translateY(3px) rotate(1deg); } }
.hero-bounce { animation: hero-bounce .55s ease; }
@keyframes bubble-fly { to { transform: translateY(calc(-100vh - 180px)) rotate(18deg); } }
@keyframes glitch-fly { 25% { transform: translate(-18px,-25vh) rotate(-12deg); } 50% { transform: translate(20px,-50vh) rotate(12deg); } 75% { transform: translate(-12px,-75vh) rotate(-12deg); } 100% { transform: translate(14px,calc(-100vh - 180px)); } }
@keyframes boss-arrive { from { opacity: 0; transform: translateX(-50%) scale(.2) rotate(30deg); } }
@keyframes boss-float { 50% { transform: translateX(-50%) translateY(10px) rotate(2deg); } }
@keyframes glitch-king-float { 25% { transform: translateX(calc(-50% - 8px)); } 50% { transform: translateX(calc(-50% + 10px)) translateY(5px); } 75% { transform: translateX(calc(-50% - 4px)); } }
@keyframes bonk { 50% { transform: translateX(-50%) scale(.88) rotate(8deg); filter: brightness(1.5); } }
@keyframes projectile { from { transform: translate(-50%, 160px) scale(.3) rotate(-30deg); } to { transform: translate(-50%,-50%) scale(1.4) rotate(20deg); opacity: 0; } }
@keyframes pop { to { transform: translate(-50%,-120%) scale(1.8) rotate(-8deg); opacity: 0; } }

@media (max-width: 820px) {
  .brand > span:last-child { display: none; }
  .portal-grid, .mission-section { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .hero-card { min-height: 500px; }
  .mission-section { margin-left: 18px; margin-right: 18px; padding: 32px; }
  .surprise-machine { min-height: auto; }
  .game-header { grid-template-columns: auto 1fr; }
  .game-mode { text-align: left; margin-left: 12px; }
  .game-stats { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 6px; }
  .team-dock > span, .team-dock button { font-size: 0; }
  .team-dock button { grid-template-columns: 44px; padding: 3px; }
  .shot-readout { display: none; }
}

@media (max-width: 560px) {
  .topbar { min-height: 62px; }
  .collection { gap: 6px; padding: 7px 9px; }
  .collection span { font-size: 12px; }
  .icon-button { width: 38px; height: 38px; }
  .hero-shell { min-height: auto; padding-top: 58px; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .portal { grid-template-columns: 56px 1fr; min-height: 220px; padding: 20px; border-radius: 24px; }
  .portal-icon { width: 54px; height: 54px; border-radius: 17px; font-size: 28px; }
  .portal-copy strong { font-size: 24px; }
  .heroes-section { padding-top: 60px; }
  .mission-section { padding: 26px 20px; border-radius: 26px; }
  .eye-dialog form { padding: 30px 22px; }
  .eye-options { grid-template-columns: 1fr; }
  .game-header { min-height: 104px; }
  .game-back { padding: 8px 10px; font-size: 12px; }
  .game-mode strong { font-size: 17px; }
  .game-stats { gap: 4px; overflow-x: auto; }
  .game-stats span { padding: 7px 8px; font-size: 10px; }
  .player-dock img { width: 126px; }
  .team-dock { bottom: 8px; right: 8px; }
  .team-dock button img { width: 38px; height: 38px; }
  .boss { top: 21%; }
  .boss-meter { top: 15%; }
  .game-announcement { white-space: normal; text-align: center; }
  .result-card { padding: 28px 20px; }
  .result-actions { flex-direction: column; }
  footer { flex-direction: column; align-items: center; }
}

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