/* Hero team: rebuild 33 */
:root{--ink:#152942;--muted:#526278;--yellow:#ffdf65;--paper:#f7f5ef;--line:#d7dde3;--blue:#214bc0;--red:#a82140}*{box-sizing:border-box}body{margin:0;font:17px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper)}button,a,summary{-webkit-tap-highlight-color:transparent}button,select,textarea{font:inherit}button{min-height:48px;padding:11px 17px;background:white;color:var(--ink);border:2px solid var(--line);border-radius:var(--radius-md);cursor:pointer;font-weight:700;transition:background .2s,box-shadow .2s}button:hover:not(:disabled){border-color:var(--blue);box-shadow:0 4px 12px #15294218}button:disabled{opacity:.6;cursor:default}button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #f0ac20;outline-offset:3px}a{color:var(--blue)}header{max-width:1240px;margin:auto;padding:var(--space-24) 28px;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{font-size:30px;letter-spacing:-1.5px;text-decoration:none;color:var(--ink);line-height:1}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:11px}.settings{display:flex;gap:var(--space-8);flex-wrap:wrap}.settings button{font-size:12px;min-height:40px;padding:var(--space-8) var(--space-12)}.progress-wrap{position:sticky;top:0;z-index:20;background:#f7f5eff5;backdrop-filter:blur(15px);padding:var(--space-12) max(var(--space-24),calc((100vw - 1184px)/2));border-block:1px solid var(--line)}.progress-wrap>div{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:1px}progress{appearance:none;width:100%;height:6px;margin-top:10px;border:0;display:block;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--red)}progress::-moz-progress-bar{background:var(--red)}nav{display:flex;gap:var(--space-8);overflow:auto;max-width:1184px;margin:20px auto;padding-bottom:var(--space-8)}nav button{white-space:nowrap;font-size:13px;min-height:40px;padding:var(--space-8) 13px}main{max-width:1184px;margin:38px auto 70px;outline:0;min-height:65vh}h1,h2,p{margin:0 0 18px}h1{font-size:clamp(38px,5vw,67px);line-height:1.04;letter-spacing:-2px;max-width:850px}h2{font-size:25px;line-height:1.15;letter-spacing:-.5px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--red)}.lead{font-size:21px;max-width:760px;color:var(--muted);margin-bottom:30px}.small{font-size:13px;color:var(--muted);margin-top:15px}.primary{background:var(--ink);color:white;border-color:var(--ink);display:inline-block;padding:var(--space-16) var(--space-24);border-radius:var(--radius-md);text-decoration:none;font-weight:800}.primary:disabled{background:#e0e3e8;color:#667183;border-color:#e0e3e8;opacity:1}.hero{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.badges{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}.badges span{background:#fff2b6;border-radius:8px;padding:7px 10px;font-weight:700;font-size:13px}.cover{position:relative;background:#e5e2dd;border-radius:24px;overflow:hidden;border:1px solid #d0cdc8;box-shadow:0 20px 45px #1c2e4520}.cover img{display:block;width:100%;height:auto}.cover-caption{position:absolute;bottom:0;left:0;right:0;background:var(--ink);color:white;text-align:center;letter-spacing:3px;padding:var(--space-12);font-size:12px;font-weight:800}.burst{display:inline-block;background:var(--yellow);color:var(--ink);border-radius:7px;padding:9px 15px;font-size:15px;font-weight:900;letter-spacing:2px}.cover .burst{position:absolute;top:14px;left:14px;z-index:1}.word-bank{display:flex;flex-wrap:wrap;gap:var(--space-12)}.word-bank>div{display:flex;gap:6px}.word-bank button{font-size:22px}.listen{flex-shrink:0;min-width:46px;min-height:46px;padding:var(--space-8);font-size:18px}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.portrait{display:block;aspect-ratio:2/3;background-image:url('heroes-art/team-real.png');background-size:200% 200%;width:100%;pointer-events:none}.hero-card{background:white;border:1px solid var(--line);border-radius:17px;overflow:hidden;position:relative}.hero-pick{display:block;padding:0 0 20px;border:0;width:100%;border-radius:0;background:transparent}.hero-pick:disabled{opacity:1}.hero-pick h2{margin:15px 0 7px}.hero-pick>span:last-child{font-size:14px}.card-sound{position:absolute;top:10px;right:10px}.feedback{min-height:28px;margin:14px 0;font-size:16px;color:#9c431f}.feedback.good{color:#236047;font-weight:650}.next{display:flex;justify-content:space-between;gap:15px;margin-top:36px;padding-top:var(--space-24);border-top:1px solid var(--line)}details{background:#ffffff90;border:1px solid var(--line);border-radius:12px;padding:13px var(--space-16);margin-top:18px}summary{cursor:pointer;font-weight:650;font-size:14px}details p{margin-top:var(--space-12);margin-bottom:0}details label{display:block;margin-top:15px}.rule{display:flex;gap:15px;align-items:center;flex-wrap:wrap;background:#fff0b2;border-radius:14px;padding:18px 22px;margin:22px 0}.rule p{margin:0}.grammar-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-24)}.panel{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}.comic-scene{aspect-ratio:1;background-image:url('heroes-art/scenes-real.png');background-size:200% 300%;width:100%;border-radius:14px}.panel>.comic-scene{border-radius:0}.panel-copy{padding:var(--space-24)}.question{display:flex;gap:var(--space-12);align-items:flex-start}.question p{font-size:22px;font-weight:650;line-height:1.35;flex:1}.question .listen{margin-top:-4px}.answers{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}.answers a{margin:var(--space-8)}.answers button{flex:1}.city-layout,.radio-layout,.bonus-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px}.city-board{align-self:start;border-radius:18px;overflow:hidden;background:var(--ink);color:white}.calls{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);padding:14px}.calls button{display:flex;flex-direction:column;align-items:center;font-size:28px}.calls span{font-size:13px}.calls button[aria-pressed=true]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.city-caption{font-size:12px;text-align:center;padding:0 10px 6px;letter-spacing:1px}.dispatch{background:white;border:1px solid var(--line);border-radius:18px;padding:var(--space-24)}.rescue-team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-top:20px}.rescue-team button{padding:0 0 9px;overflow:hidden;font-size:13px}.rescue-team button:disabled{opacity:1}.rescue-team b{display:block;margin-top:var(--space-8)}.radio-box{background:var(--ink);color:#fff;border-radius:20px;padding:30px;align-self:start}.radio-box .eyebrow{color:var(--yellow)}.radio-box .small{color:#cbd8e8}.radio-box details{background:#ffffff0a;border-color:#ffffff40}.radio-box h2{font-size:33px}.radio-box audio{width:100%;margin:14px 0}.radio-lights{display:flex;gap:var(--space-8);align-items:center;height:48px;margin-bottom:30px}.radio-lights i{width:7px;height:25px;border-radius:8px;background:var(--yellow)}.radio-lights i:nth-child(2n){height:45px}.radio-key{font-size:14px;color:var(--muted)}.radio-q{background:white;padding:20px;border:1px solid var(--line);border-radius:14px;margin-bottom:14px}.radio-q .question p{font-size:20px}.radio-q .answers button{font-size:14px;padding:9px}.custom-hero{background:#dfdcd7;border:1px solid #cecac4;border-radius:20px;overflow:hidden;position:relative;align-self:start;text-align:center}.custom-hero>.portrait{width:100%;max-height:540px;background-size:200% 200%}.custom-hero h2{margin:20px var(--space-12) 10px;font-size:38px}.custom-hero p{margin:0 var(--space-12) 22px;font-size:20px}.power-mark{position:absolute;top:18px;right:18px;z-index:1;background:var(--yellow);border-radius:50%;width:55px;height:55px;display:grid;place-items:center;font-size:28px}.bonus-options{padding:var(--space-24)}.bonus-options h2{margin-top:22px;font-size:21px}.bonus-options h2:first-child{margin-top:0}.costumes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}.costumes button{padding:3px;overflow:hidden}.costumes button .portrait{border-radius:var(--radius-md)}.power-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.power-options>div{display:flex;gap:5px;align-items:stretch}.power-options>div>button:first-child{flex:1;padding:10px;min-width:0}.power-options b,.power-options small{display:block}.power-options b{font-size:15px}.power-options small{font-size:11px;font-weight:400}.power-options .listen{min-width:38px;padding:5px}.try-power{background:var(--yellow);border-color:#f0ca4b;width:100%;margin-top:var(--space-24)}textarea{width:100%;min-height:100px;padding:var(--space-12);border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink)}.tip{max-width:850px;background:white;padding:34px;border:1px solid var(--line);border-radius:18px}.tip .burst{margin-bottom:22px}.tip blockquote{font-size:24px;margin:22px 0;color:var(--muted);padding:15px 0;border-block:1px solid var(--line)}.result{text-align:center}.result h1,.result .lead{margin-inline:auto}.result .badges,.result .answers{justify-content:center}.result .custom-hero{max-width:330px;margin:30px auto}.result .panel{max-width:800px;margin:30px auto;padding:30px}.activated.power-0 .portrait{animation:fly 1.5s ease-in-out 2}.activated.power-1 .portrait{animation:invisible 2s ease-in-out 2}.activated.power-2 .power-mark{animation:glow 1s ease-in-out 3}.activated.power-3 .power-mark{animation:glow 1s ease-in-out 3}.activated.power-3 .portrait{filter:drop-shadow(0 0 10px #e6ac30)}@keyframes fly{50%{transform:translateY(-25px)}}@keyframes invisible{50%{opacity:.1}}@keyframes glow{50%{transform:scale(1.3);box-shadow:0 0 30px #ffe260}}.no-motion *, .no-motion *::before{animation:none!important;transition:none!important}footer{border-top:1px solid var(--line);padding:var(--space-24);display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px}footer button{font-size:13px}dialog{border:1px solid var(--line);border-radius:16px;max-width:440px;padding:25px;color:var(--ink)}dialog::backdrop{background:#15294280}#status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:var(--space-12) 20px;border-radius:12px;z-index:100;width:max-content;max-width:90vw}#status:empty{display:none}[hidden]{display:none!important}@media(max-width:1240px){main,nav{margin-left:var(--space-24);margin-right:var(--space-24)}}@media(max-width:800px){.hero,.city-layout,.radio-layout,.bonus-layout{grid-template-columns:1fr}.hero{gap:25px}.cover{max-width:500px;margin:auto}.team-grid{grid-template-columns:1fr 1fr}.hero-pick .portrait{aspect-ratio:2/3}.bonus-layout>.custom-hero{width:100%;max-width:360px;margin:auto}.grammar-grid{gap:var(--space-16)}.panel-copy{padding:var(--space-16)}.question p{font-size:19px}.city-board{max-width:550px;width:100%;margin:auto}}@media(max-width:520px){body{font-size:16px}header{padding:20px;flex-wrap:wrap}.brand{font-size:27px}.progress-wrap{padding:var(--space-12) 20px}.progress-wrap>div{font-size:10px}main,nav{margin-left:18px;margin-right:18px}main{margin-top:25px}h1{font-size:40px;letter-spacing:-1.5px}.lead{font-size:18px}.grammar-grid{grid-template-columns:1fr}.team-grid{gap:var(--space-12)}.hero-pick h2{font-size:23px}.hero-pick>span:last-child{font-size:12px}.card-sound{top:5px;right:5px}.word-bank{gap:var(--space-8)}.word-bank>div{flex:1}.word-bank>div>button:first-child{flex:1}.word-bank button{font-size:18px}.next{flex-direction:column-reverse}.dispatch,.radio-box,.bonus-options{padding:18px}.rescue-team{grid-template-columns:1fr 1fr}.rescue-team .portrait{max-height:none}.radio-q{padding:15px}.radio-q .answers button{font-size:12px;min-width:0}.tip{padding:20px}.tip blockquote{font-size:21px}.power-options{grid-template-columns:1fr}.custom-hero h2{font-size:30px}.result .panel{padding:20px}.settings button{font-size:11px}footer{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.custom-hero{width:100%;max-width:360px;margin-inline:auto}.custom-hero>.portrait{max-height:none}

.name-pair{display:flex;gap:5px;flex:1;min-width:130px}.name-pair>button:first-child{flex:1}.name-pair>.listen{flex:0 0 44px}.radio-key .listen{vertical-align:middle;margin:var(--space-4);font-size:15px}.rule>.listen{flex:0 0 46px}

/* Equal portrait frames keep every card title on one baseline. */
.portrait-frame{display:block;position:relative;width:100%;aspect-ratio:2/3;background:#d0cdc8;overflow:hidden;pointer-events:none}
.portrait-frame>.portrait{position:absolute;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:auto!important;max-height:none}
.hero-pick{height:100%}.rule-recordings{display:flex;flex-wrap:wrap;gap:var(--space-12)}.rule-recordings>span{display:flex;align-items:center;gap:var(--space-8)}
.custom-picture{width:100%;aspect-ratio:1;background-size:200% 400%;background-repeat:no-repeat}
.new-costumes{grid-template-columns:1fr 1fr}.new-costumes button{padding:0;overflow:hidden}.new-costumes button>span{display:block;padding:10px;font-size:14px}
.gender-options small{display:block;font-weight:400}.custom-hero{max-width:520px}.custom-hero>.custom-picture{border-radius:18px 18px 0 0}
.activated.power-0 .custom-picture{animation:fly 1.5s ease-in-out 2}.activated.power-1 .custom-picture{animation:invisible 2s ease-in-out 2}