/* Arcade entry screen: the native modal keeps the neighborhood inert underneath. */
.map-page .resume-intro{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#091b31;color:white;font-family:Impact,'Arial Black',sans-serif}
.resume-intro::backdrop{background:#091b31}
.intro-side{position:absolute;inset:0;overflow:hidden}
.intro-blue{background:radial-gradient(ellipse at 35% 45%,#389abc,#105479 50%,#06182c);clip-path:polygon(0 0,73% 0,29% 100%,0 100%)}
.intro-red{background:radial-gradient(ellipse at 70% 50%,#f17969,#9d292e 55%,#330e1c);clip-path:polygon(73% 0,100% 0,100% 100%,29% 100%)}
.intro-side::before{content:'';position:absolute;inset:-10%;background-image:radial-gradient(#03091588 1px,transparent 1.8px),repeating-linear-gradient(-24deg,transparent 0 95px,#050b1926 96px 125px,transparent 126px 180px);background-size:5px 5px,100% 100%;transform:rotate(-5deg)}
.intro-slash{position:absolute;inset:0;background:white;clip-path:polygon(72.5% 0,73.4% 0,29.5% 100%,28.6% 100%);filter:drop-shadow(0 0 16px white)}
.intro-fighter{position:absolute;height:116%;width:64%;max-width:none;object-fit:contain;bottom:-20%;image-rendering:pixelated;filter:drop-shadow(10px 10px 0 #03132566)}
.intro-blue .intro-fighter{left:-4%;transform:rotate(-8deg);animation:intro-blue-in .45s ease-out both}
.intro-red .intro-fighter{right:-4%;transform:scaleX(-1) rotate(-8deg);animation:intro-red-in .45s ease-out both}
.intro-top{position:absolute;top:0;left:50%;transform:translateX(-50%) skew(-12deg);margin:0;padding:12px 44px 16px;background:#080b10;white-space:nowrap;font-size:clamp(15px,2vw,27px);font-style:italic;letter-spacing:3px;border-bottom:3px solid #ffffff70}
.intro-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}
.intro-center h1{font:italic 900 clamp(45px,8.4vw,130px)/.88 Impact,'Arial Black',sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:0;transform:rotate(-5deg) skew(-8deg);color:#11141a;-webkit-text-stroke:clamp(2px,.35vw,6px) white;paint-order:stroke fill;filter:drop-shadow(0 8px 0 #060e20) drop-shadow(0 0 20px #ffffff55)}
.intro-center h1 span{display:block}
.intro-countdown{margin-top:38px;display:grid;place-items:center;width:76px;height:76px;border:3px solid white;transform:rotate(-5deg);background:#090f1fe8;box-shadow:6px 6px 0 #0005;font:bold 52px/1 Impact,'Arial Black',sans-serif;font-variant-numeric:tabular-nums}
.intro-bottom{position:absolute;bottom:32px;left:24px;right:24px;text-align:center;font:700 11px/1.5 ui-monospace,monospace;letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 4px #000}

@keyframes intro-blue-in{from{translate:-12% 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes intro-red-in{from{translate:12% 0;opacity:0}to{translate:0 0;opacity:1}}
@media(max-width:600px){.intro-fighter{width:100%;height:88%;bottom:2%}.intro-blue .intro-fighter{left:-28%}.intro-red .intro-fighter{right:-28%}.intro-center h1{font-size:clamp(48px,13vw,78px)}.intro-top{font-size:13px;padding:14px 24px;letter-spacing:2px}.intro-bottom{bottom:24px;font-size:9px;letter-spacing:1px}.intro-countdown{margin-top:28px;width:60px;height:60px;font-size:42px}}
@media(prefers-reduced-motion:reduce){.intro-blue .intro-fighter,.intro-red .intro-fighter{animation:none}}

/* Reserve characters remain behind the selected pair and act as real controls. */
.intro-center,.intro-slash,.intro-top,.intro-bottom{pointer-events:none}
.intro-side .intro-fighter{pointer-events:none;height:94%;width:48%;bottom:-19%;z-index:2}
.intro-blue .intro-fighter{left:3%}
.intro-red .intro-fighter{right:3%}
.intro-alternative{position:absolute;top:10%;width:25%;height:48%;border:0;padding:0;background:none;color:white;cursor:pointer}
.intro-alternative::after{content:'';position:absolute;inset:0;z-index:3}
.intro-blue .intro-alternative{left:0}
.intro-red .intro-alternative{right:0}
.intro-alternative img{position:relative;z-index:1;height:100%;width:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none;opacity:.8;filter:brightness(.65) saturate(.75);transition:filter .15s}
.intro-red .intro-alternative img{transform:scaleX(-1)}
.intro-alternative span{position:absolute;top:5%;left:8%;right:8%;background:#071225e8;padding:9px 5px;border:1px solid #ffffff80;font:700 11px/1.2 ui-monospace,monospace;letter-spacing:1px}
.map-page .intro-alternative:hover,.map-page .intro-alternative:focus-visible{outline:none}
.map-page .intro-alternative:hover img{filter:brightness(1.15)}
.intro-alternative:focus-visible img{filter:brightness(1.15) drop-shadow(0 0 9px #fff)}
.intro-name{position:absolute;bottom:12%;font:italic 900 clamp(18px,3vw,42px) Impact,'Arial Black',sans-serif;text-transform:uppercase;text-shadow:3px 4px #0b102a;z-index:3;pointer-events:none}
.intro-blue .intro-name{left:12%}.intro-red .intro-name{right:12%}
@media(max-width:600px){.intro-side .intro-fighter{height:67%;width:75%;bottom:4%}.intro-blue .intro-fighter{left:-17%}.intro-red .intro-fighter{right:-17%}.intro-alternative{width:46%;height:30%;top:12%}.intro-alternative span{font-size:9px;letter-spacing:0}.intro-name{bottom:20%}.intro-blue .intro-name{left:6%}.intro-red .intro-name{right:6%}.intro-bottom{bottom:18px}.intro-center h1{font-size:12vw}}
@media(prefers-reduced-motion:reduce){.intro-alternative img{transition:none}}

.intro-alternative:disabled{cursor:default;filter:none;opacity:.55;outline:none}.intro-alternative img[hidden]{display:none}
/* Every side has the same three reserve choices, arranged down its outer edge. */
.intro-side .intro-alternative{width:19%;height:23%;top:calc(9% + var(--roster-slot,0)*25%)}
.intro-alternative[data-slot="1"]{--roster-slot:1}.intro-alternative[data-slot="2"]{--roster-slot:2}
@media(min-width:801px){.intro-side .intro-fighter{height:106%;width:58%;bottom:-20%}.intro-blue .intro-fighter{left:0}.intro-red .intro-fighter{right:0}}
@media(max-width:800px){.intro-side .intro-fighter{height:74%;width:82%;bottom:0}.intro-blue .intro-fighter{left:-19%}.intro-red .intro-fighter{right:-19%}.intro-alternative{width:40%;height:32%;top:11%}.intro-alternative span{font-size:10px}.intro-name{bottom:17%}.intro-blue .intro-name{left:6%}.intro-red .intro-name{right:6%}.intro-center h1{font-size:12vw}}
@media(max-width:800px){.intro-side .intro-alternative{width:28%;height:18%;top:calc(14% + var(--roster-slot,0)*21%)}}
.intro-team-pickers{display:none}
@media(max-width:800px){
  .intro-side .intro-alternative{display:none}
  .intro-team-pickers{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:absolute;z-index:4;top:112px;left:16px;right:16px;font:11px ui-monospace,monospace}
  .intro-team-pickers label{display:grid;gap:7px;color:#eef9ff;text-shadow:0 1px 3px #000}
  .intro-team-pickers select{width:100%;min-height:44px;padding:8px;background:#122941ed;border:1px solid #8cc6e0;color:white;font:12px ui-monospace,monospace;border-radius:4px}
  .intro-team-pickers label:last-child select{background:#4c2028ed;border-color:#f0a28f}
  .intro-team-pickers select:focus-visible{outline:2px solid white;outline-offset:2px}
  .is-opening-map .intro-team-pickers{animation:intro-reveal-fade .22s ease-out both;pointer-events:none}
}

/* Smooth cartoon portraits retain clean curves at every selector size. */
.intro-fighter[data-character=morty],.intro-fighter[data-character=rick],
.intro-alternative img[data-character=morty],.intro-alternative img[data-character=rick]{image-rendering:auto}

/* The two character panels part like curtains, revealing the actual map beneath. */
.map-page .resume-intro.is-opening-map{background:transparent;pointer-events:none}
.resume-intro.is-opening-map::backdrop{background:transparent;backdrop-filter:none}
.is-opening-map .intro-blue{animation:intro-reveal-left .85s cubic-bezier(.65,0,.2,1) both}
.is-opening-map .intro-red{animation:intro-reveal-right .85s cubic-bezier(.65,0,.2,1) both}
.is-opening-map .intro-center,.is-opening-map .intro-top,.is-opening-map .intro-bottom,
.is-opening-map .intro-slash,
.is-opening-map .intro-moves-toggle,.is-opening-map .intro-moves-panel{animation:intro-reveal-fade .22s ease-out both}
@keyframes intro-reveal-left{to{transform:translateX(-100%)}}
@keyframes intro-reveal-right{to{transform:translateX(100%)}}
@keyframes intro-reveal-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.resume-intro.is-opening-map *{animation:none}}

.intro-side .intro-fighter[role=button]{pointer-events:auto;cursor:pointer}
.map-page .intro-fighter[role=button]:focus-visible{outline:none;filter:drop-shadow(0 0 12px #d7f58d)}
/* Rick's lean portrait has a taller silhouette without changing Morty's chosen scale. */
.intro-side .intro-fighter[data-character=rick]{height:112%;width:46%;bottom:-14%}
@media(max-width:800px){.intro-side .intro-fighter[data-character=rick]{height:84%;width:68%;bottom:0}.intro-blue .intro-fighter[data-character=rick]{left:-10%}}

.intro-moves-toggle{position:absolute;z-index:4;left:24px;top:22px;border:1px solid #ffffff70;padding:10px 18px;background:#0b102a88;color:white;font:12px ui-monospace,monospace;cursor:pointer}
.intro-moves-panel{position:absolute;z-index:5;left:50%;top:50%;translate:-50% -50%;width:min(430px,calc(100% - 40px));max-height:calc(100svh - 140px);overflow:auto;box-sizing:border-box;padding:22px;background:#101b2bf5;border:1px solid #ffffff60;border-radius:10px;box-shadow:0 20px 70px #0008;font:12px/1.5 ui-monospace,monospace;color:#f4f6ff}
.intro-moves-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-page .intro-moves-panel h2{font:bold 20px/1.3 ui-monospace,monospace;margin:0;color:white;letter-spacing:0}
.intro-moves-panel header button{padding:0;border:0;width:36px;height:36px;background:transparent;color:white;font-size:26px;cursor:pointer}
.intro-moves-panel dl{margin:14px 0}
.intro-moves-panel dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #ffffff12}
.intro-moves-panel dd{margin:0;text-align:right;flex-shrink:0}
.intro-moves-panel kbd{font:12px ui-monospace,monospace;padding:3px 6px;border-color:#91a8c7;color:#fff}
.intro-moves-panel h3{font:bold 12px ui-monospace,monospace;text-transform:uppercase;letter-spacing:1px;color:#b1c9e7;margin:22px 0 0}
.intro-moves-panel p{font-size:10px;color:#b1c9e7;margin:14px 0 0}
@media(max-width:600px){.intro-moves-toggle{top:56px;left:16px}.intro-moves-panel{padding:16px;max-height:calc(100svh - 120px)}.intro-moves-panel dl>div{gap:8px;font-size:11px}.intro-moves-panel kbd{font-size:10px;padding:3px}}

/* Preserve the title artwork while giving the center label a real button target. */
.intro-center h1{transition:scale .25s cubic-bezier(.2,.7,.3,1)}
.intro-center h1:has(button:hover),.intro-center h1:has(button:focus-visible){scale:1.07}
.map-page #intro-enter{display:block;pointer-events:auto;cursor:pointer;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;-webkit-text-stroke:inherit;paint-order:inherit;outline:none}
#intro-enter:focus-visible{filter:drop-shadow(0 0 8px #fff9)}
@media(prefers-reduced-motion:reduce){.intro-center h1{transition:none}.intro-center h1:has(button:hover),.intro-center h1:has(button:focus-visible){scale:1}}