@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

/* One shared column keeps the logo, labels and icons aligned. */
body:not(.in-game) { background:#272831; }
body:not(.in-game)>.world, body:not(.in-game)>header { display:none; }
body:not(.in-game) main { max-width:none; padding:0; }
#home.studio-menu { position:relative; max-width:none; margin:0; min-height:100dvh; background:#272831 url('assets/cartoon-lobby.png') center / cover no-repeat; text-align:left; animation:none; }
.studio-controls { width:26.6%; max-width:440px; margin-left:4.7%; padding:4.4vh 0 6vh; }
.studio-logo { display:block; width:94%; height:26.5vh; object-fit:contain; margin:0 auto 2.5vh; }
.main-navigation { display:grid; gap:1.1vh; }
.nav-choice { width:100%; min-height:48px; height:7.1vh; display:grid; grid-template-columns:34px minmax(0,1fr) 20px; gap:clamp(12px,2.3vw,35px); align-items:center; padding:0 6%; border:2px solid #515963; border-radius:5px; background:#10151bed; color:#ded7d0; box-shadow:0 4px 0 #080b10b3,inset 0 0 0 2px #ffffff06; font-family:'Barlow Condensed',sans-serif; font-size:clamp(19px,1.8vw,28px); font-weight:700; line-height:1; text-transform:uppercase; text-align:left; transition:transform .16s,background .16s,border-color .16s,box-shadow .16s; }
.nav-choice.selected { background:#aa0d13ed; border-color:#ff343b; color:#fff6e6; box-shadow:0 4px 0 #570609,0 0 18px #f0203055,inset 0 0 16px #ee29352e; }
.nav-icon,.nav-arrow { display:block; width:100%; height:32px; object-fit:contain; filter:invert(94%) sepia(10%) saturate(218%) hue-rotate(336deg) brightness(96%); }
.nav-arrow { height:20px; opacity:.75; }
.nav-choice:hover { transform:translateX(4px); background:#29323a; border-color:#f5d297; color:#fff6e6; }
.nav-choice.selected:hover { background:#d11c25; border-color:#ff7465; }
.nav-choice:active { transform:translate(2px,2px); box-shadow:0 1px 0 #080b10; }
.nav-choice:focus-visible { outline:3px solid #ffe19a; outline-offset:4px; }
#setup-dialog { width:760px; text-align:center; }
#setup-dialog .lobby-players { margin-top:26px; }
.dialog-dismiss { position:absolute; top:12px; right:15px; background:none; border:0; font-size:26px; }
.prototype-note { font-size:12px; line-height:1.6; color:#a9b5c1; }
dialog { background:#142c35; border-color:#4a626a; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:20px 0; }
.setting-row input { width:22px; height:22px; accent-color:#ffa600; }
.skin-preview { height:260px; border-radius:12px; background:url('assets/cartoon-lobby.png') 84% 72% / auto 430px no-repeat; }
.skin-caption { display:flex; align-items:center; justify-content:space-between; margin:18px 0; }
.skin-caption span { font-size:12px; color:#ffd26b; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation:none!important; transition:none!important; }
.reduce-motion #confetti { display:none; }

@media(min-aspect-ratio:19/10) { .studio-controls { width:25%; padding-top:3vh; }.studio-logo { height:25vh; }.nav-choice { height:8vh; font-size:clamp(18px,3vh,26px); } }
@media(max-width:700px) {
 #home.studio-menu { background-position:60% center; }
 .studio-controls { width:48%; margin-left:4%; padding-top:4vh; }
 .studio-logo { height:23vh; margin-bottom:3vh; }
 .nav-choice { grid-template-columns:24px minmax(0,1fr) 14px; gap:10px; font-size:clamp(18px,3.6vw,24px); height:7.7vh; padding:0 10px; }
 .nav-icon { height:25px; }.nav-arrow { height:15px; }
}
@media(max-width:450px) {
 #home.studio-menu { background-position:57% center; }
 .studio-controls { width:61%; padding-top:3vh; }
 .studio-logo { height:22vh; }
 .nav-choice { font-size:21px; background:#10151bf2; }
 .nav-choice.selected { background:#ac1119f5; }
}
@media(prefers-reduced-motion:reduce) { .nav-choice { transition:none; } }

/* Widescreen scene; body skin and permanent limbs share one square coordinate frame. */
#home.studio-menu { background-image:url('assets/cartoon-arena-solid-floor.png'); overflow:hidden; min-height:100dvh; }
.studio-controls { position:relative; z-index:2; width:22%; max-width:340px; margin-left:14.5%; padding-top:5vh; }
.studio-logo { width:88%; height:23vh; margin-bottom:2.5vh; }
.main-navigation { gap:1vh; }
.nav-choice { height:6.5vh; min-height:42px; font-size:clamp(18px,1.45vw,24px); grid-template-columns:26px minmax(0,1fr) 16px; gap:18px; }
.nav-icon { height:26px; }.nav-arrow { height:16px; }
.lobby-character { position:absolute; width:min(38vw,68vh); aspect-ratio:1; right:19%; bottom:5%; pointer-events:none; }
.lobby-character { isolation:isolate; }
/* Contact shadows follow the mascot's registered square, including mobile scaling. */
.lobby-character::before {
 content:''; position:absolute; z-index:-1; left:-7%; right:4%; top:85%; height:17%;
 background:radial-gradient(ellipse at 50% 43%,#0c0b14b8 0%,#0c0b1499 30%,#0c0b145c 53%,transparent 74%);
 transform:rotate(-5deg); filter:blur(2px); pointer-events:none;
}
.lobby-character::after {
 content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
 background:radial-gradient(ellipse 18% 3.6% at 23% 91%,#08070df2 0%,#08070dc4 40%,transparent 100%),radial-gradient(ellipse 19% 3.6% at 74% 91%,#08070df2 0%,#08070dc4 40%,transparent 100%);
}
.character-limbs,.character-body { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.character-limbs { z-index:0; }.character-body { z-index:1; }
.skin-preview { height:280px; background:#26303a; display:grid; place-items:center; }
.token-preview { position:relative; width:280px; max-width:100%; aspect-ratio:1; }
@media(max-aspect-ratio:4/3) and (min-width:701px) {
 .studio-controls { width:29%; margin-left:5%; }.lobby-character { right:1%; width:64vw; bottom:9%; }
}
@media(max-width:700px) {
 .studio-controls { width:44%; padding-top:4vh; margin-left:4%; }
 .studio-logo { height:21vh; }.nav-choice { font-size:18px; gap:8px; grid-template-columns:22px minmax(0,1fr) 12px; padding:0 9px; height:7vh; }
 .lobby-character { width:74vw; right:-19%; bottom:8%; }
}
@media(max-width:450px) {
 .studio-controls { width:57%; }.studio-logo { height:20vh; }
 .lobby-character { width:92vw; right:-20%; bottom:3%; }
}

/* Anatomical right (screen left) in front; opposite limbs behind the skin.
   Both layers reuse the same registered atlas, without resampling its artwork. */
.character-limbs-back { clip-path:inset(0 0 0 50%); z-index:0; }
.character-body { z-index:1; }
.character-limbs-front { clip-path:inset(0 50% 0 0); z-index:2; transform:translateX(-4%); }
#home > .studio-logo { position:absolute; z-index:3; top:2.5vh; left:50%; transform:translateX(-50%); width:clamp(130px,12vw,190px); height:auto; max-height:18vh; object-fit:contain; margin:0; }
.studio-controls { padding-top:30.5vh; }
@media(max-width:700px) { .studio-controls { padding-top:27vh; } #home > .studio-logo { width:145px; top:3vh; } }

/* Center the complete menu + visible character, with one shared gap. */
@media(min-width:701px) and (min-aspect-ratio:4/3) {
 #home { --character-size:min(38vw,68vh); --menu-size:min(22vw,340px); --scene-gap:9vw; --scene-margin:calc((100vw - var(--menu-size) - var(--character-size) * .91 - var(--scene-gap)) / 2); }
 .studio-controls { width:var(--menu-size); margin-left:var(--scene-margin); }
 .lobby-character { width:var(--character-size); right:calc(var(--scene-margin) - var(--character-size) * .07); }
}

/* Shared modal backdrop keeps the active window in focus. */
dialog::backdrop { background:#080b1466; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#play-dialog { width:min(900px,94vw); max-width:94vw; padding:28px 24px 16px; background:#141923; border:2px solid #566077; border-radius:16px 8px 16px 8px; box-shadow:0 0 0 4px #0b0d15,0 22px 75px #0009; overflow:auto; max-height:92dvh; }
#play-dialog,#play-dialog button { font-family:'Barlow Condensed',sans-serif; }
#play-title { text-align:center; text-transform:uppercase; font-size:clamp(25px,3vw,38px); font-weight:700; letter-spacing:1px; margin:0 30px 24px; color:#fff0de; }
.play-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.play-mode { position:relative; aspect-ratio: .61; padding:0; display:flex; align-items:flex-end; justify-content:center; background-image:url('assets/play-mode-art.png'); background-size:400% auto; border:2px solid var(--mode-color); border-radius:7px; overflow:hidden; box-shadow:0 4px 0 #0008; transition:transform .18s,box-shadow .18s; }
.play-mode.casual { --mode-color:#3388d4; background-position:0% 0; }
.play-mode.ranked { --mode-color:#df2735; background-position:33.3333% 0; }
.play-mode.training { --mode-color:#ecad30; background-position:66.6667% 0; }
.play-mode.private { --mode-color:#9248cf; background-position:100% 0; }
.play-mode span { display:block; margin:0 4px 20px; color:#fff4e7; text-transform:uppercase; font-size:clamp(18px,2.2vw,27px); font-weight:700; text-shadow:0 2px 3px #000; }
.play-mode span::after { content:''; display:block; width:52px; height:3px; background:var(--mode-color); margin:9px auto 0; }
.play-mode:hover { transform:translateY(-5px); box-shadow:0 0 18px color-mix(in srgb,var(--mode-color),transparent 65%); }
.play-mode:focus-visible { outline:3px solid #fff1db; outline-offset:3px; }
#play-dialog .play-close { color:#e72335; font-size:40px; line-height:1; right:16px; top:12px; }
#play-dialog .play-back { position:static; display:block; margin:18px auto 0; font-size:19px; text-transform:uppercase; color:#d4c8bd; padding:6px 22px; }
#play-feedback { text-align:center; margin:18px 0 0; font-size:18px; color:#f4d8a8; }
@media(max-width:580px) { #play-dialog { padding:24px 16px 12px; }.play-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.play-mode { aspect-ratio:.85; }.play-mode span { font-size:21px; margin-bottom:12px; } }

#training-dialog { width:min(900px,94vw); max-width:94vw; max-height:92dvh; overflow:auto; box-sizing:border-box; padding:24px 36px 16px; background:#141923; border:2px solid #566077; border-radius:16px 8px; box-shadow:0 0 0 4px #0b0d15,0 22px 75px #0009; text-align:center; }
#training-dialog,#training-dialog button { font-family:'Barlow Condensed',sans-serif; }
#training-title { color:#fff0de; font-size:clamp(26px,3vw,38px); text-transform:uppercase; margin:0 0 24px; }
#training-title::after { content:''; display:block; width:100px; height:4px; background:#ffbd16; margin:12px auto 0; border-radius:3px; }
.training-selector { display:grid; grid-template-columns:54px minmax(0,1fr) 54px; gap:12px; }
.training-selector button { border:2px solid #566077; border-radius:5px; background:#1a202c; color:#fff4e7; font-size:36px; padding:0; line-height:1; }
.training-selector button:hover { background:#2b3445; border-color:#efc256; }
.training-selector button:focus-visible,#training-back:focus-visible { outline:3px solid #ffbd16; outline-offset:3px; }
#training-mode { display:grid; place-items:center; height:46px; border:2px solid #ffbd16; border-radius:5px; font-size:24px; font-weight:700; color:#fff4e7; text-transform:uppercase; }
#training-description { margin:8px 0 22px; color:#b9c3d4; font-size:18px; min-height:22px; }
.training-arena { align-items:stretch; }
#training-map { width:100%; height:136px; object-fit:cover; object-position:center 48%; border:2px solid #566077; border-radius:5px; box-sizing:border-box; }
#training-map-name { margin:8px 0 16px; font-size:18px; color:#e6e8ed; }
#training-launch { background:#b50921; border:2px solid #ff263e; border-radius:6px; width:42%; min-width:190px; margin:0 auto; padding:10px 20px; font-size:28px; color:#fff0de; }
#training-launch:hover { background:#d21930; }
.training-back { display:block; margin:12px auto 0; border:0; background:none; color:#b9c3d4; font-size:19px; text-transform:uppercase; padding:5px 22px; }
body.training-session .world { background:var(--training-arena) center / cover no-repeat; }
body.training-session .world > * { display:none; }
@media(max-width:580px) { #training-dialog { padding:22px 16px 14px; }.training-selector { grid-template-columns:38px minmax(0,1fr) 38px; gap:8px; }#training-map { height:125px; }#training-mode { font-size:21px; }#training-description { font-size:16px; } }

/* Registered scenery layers: only the sky moves, behind the architecture. */
.lobby-scenery { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.lobby-scenery-stage { position:absolute; left:50%; top:50%; width:max(100vw,177.6833dvh); height:max(100dvh,56.2799vw); transform:translate(-50%,-50%); background:url('assets/cartoon-arena-solid-floor.png') center/100% 100%; }
.lobby-sky { position:absolute; inset:0 0 42%; overflow:hidden; background:linear-gradient(#297bd6,#72b5f4); }
.lobby-cloud-track { position:absolute; left:0; top:0; width:200%; height:172.414%; display:flex; animation:lobby-cloud-drift 200s linear infinite; will-change:transform; }
.lobby-cloud-track img { display:block; flex:0 0 50%; width:50%; height:100%; max-width:none; object-fit:contain; }
.lobby-buildings { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.lobby-character { z-index:1; }
@keyframes lobby-cloud-drift { from { transform:translateX(-50%); } to { transform:translateX(0); } }
body.in-game .lobby-cloud-track, .reduce-motion .lobby-cloud-track { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .lobby-cloud-track { animation:none; transform:translateX(-25%); } }
@media(max-width:700px) { .lobby-scenery-stage { left:60%; transform:translate(-60%,-50%); } }
@media(max-width:450px) { .lobby-scenery-stage { left:57%; transform:translate(-57%,-50%); } }

/* Face the menu without changing the mascot's layout box. */
.lobby-character { transform:scaleX(-1); transform-origin:center; }
/* Move the banner and navigation together, preserving their spacing. */
.studio-controls { transform:translateY(4vh); }

/* Four independent joints, registered to the skin's 1280px square.
   The front atlas retains its existing -4% horizontal adjustment. */
.character-joint { position:absolute; inset:0; pointer-events:none; }
.character-joint img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; animation-duration:3.8s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.character-joint-back { z-index:0; }
.character-joint-front { z-index:2; transform:translateX(-4%); }
.character-joint-front.character-joint-arm img { clip-path:polygon(0 0,50% 0,50% 62%,30% 62%,29% 66%,0 66%); transform-origin:26% 34%; animation-name:character-arm-front; }
.character-joint-front.character-joint-leg img { clip-path:polygon(0 66%,29% 66%,30% 62%,50% 62%,50% 71.5%,0 71.5%); transform-origin:31% 71%; animation-name:character-leg-front; }
.character-joint-back.character-joint-arm img { clip-path:polygon(50% 0,100% 0,100% 68%,75% 68%,73% 62%,50% 62%); transform-origin:76% 37.5%; animation-name:character-arm-back; }
.character-joint-back.character-joint-leg img { clip-path:polygon(50% 62%,73% 62%,75% 68%,100% 68%,100% 71.5%,50% 71.5%); transform-origin:68% 71%; animation-name:character-leg-back; }
@keyframes character-arm-front { 0%,100% { transform:rotate(0); } 50% { transform:translateY(.7%) rotate(2.5deg); } }
@keyframes character-arm-back { 0%,100% { transform:rotate(0); } 50% { transform:translateY(.7%) rotate(-2.2deg); } }
@keyframes character-leg-front { 0%,100% { transform:rotate(0); } 50% { transform:skewX(-.45deg) scaleY(.873); } }
@keyframes character-leg-back { 0%,100% { transform:rotate(0); } 50% { transform:skewX(.45deg) scaleY(.873); } }
body.in-game .character-joint img { animation-play-state:paused; }
.reduce-motion .character-joint img { animation:none; }
@media(prefers-reduced-motion:reduce) { .character-joint img { animation:none; } }

/* The rigid disk and shoulders follow the same breathing displacement.
   Legs compress from their planted soles, rather than lifting the feet. */
.lobby-character .character-body { animation:character-body-breathe 3.8s ease-in-out infinite; }
@keyframes character-body-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(.7%); } }
body.in-game .lobby-character .character-body { animation-play-state:paused; }
.reduce-motion .lobby-character .character-body { animation:none; }
@media(prefers-reduced-motion:reduce) { .lobby-character .character-body { animation:none; } }

/* Shoes and cuffs are rigid; only the exposed shins flex above the ankles. */
.character-joint-shoe img { animation:none; }
.character-joint-front.character-joint-shoe img { clip-path:polygon(0 71%,50% 71%,50% 100%,0 100%); }
.character-joint-back.character-joint-shoe img { clip-path:polygon(50% 71%,100% 71%,100% 100%,50% 100%); }

/* Small overlap hides subpixel seams where the shins enter the rigid cuffs. */
.character-joint-shoe img { mask-image:linear-gradient(to bottom,transparent 70.7%,#000 71.15%); }

/* Rare, distant birds remain inside the sky, behind the foreground image. */
.menu-bird-flock { position:absolute; left:0; width:100%; height:0; animation:menu-bird-pass 20s linear forwards; pointer-events:none; }
.menu-bird { position:absolute; width:clamp(9px,.85vw,15px); height:9px; opacity:.55; }
.menu-bird svg { width:100%; height:100%; overflow:visible; animation:menu-bird-wings .85s ease-in-out infinite; animation-delay:var(--wing-delay); }
.menu-bird path { fill:none; stroke:#344a63; stroke-width:1.7; stroke-linecap:round; }
@keyframes menu-bird-pass { from { transform:translateX(-12%); } to { transform:translateX(110%); } }
@keyframes menu-bird-wings { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.3); } }
.reduce-motion .menu-bird-flock, body.in-game .menu-bird-flock { display:none; }
@media(prefers-reduced-motion:reduce) { .menu-bird-flock { display:none; } }
/* Flat navigation: scenery is softened as one continuous area, never per button. */
#home.studio-menu::after {
 content:''; position:absolute; inset:0 auto 0 0; width:58%; z-index:0; pointer-events:none;
 background:rgba(12,15,23,.28); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
 mask-image:linear-gradient(to right,#000 0%,#000 28%,transparent 100%);
 -webkit-mask-image:linear-gradient(to right,#000 0%,#000 28%,transparent 100%);
}
#home .main-navigation { gap:1.2vh; }
#home .nav-choice {
 grid-template-columns:26px minmax(0,1fr); gap:22px; padding:0 18px;
 border:0; border-radius:2px; background:transparent; box-shadow:none;
 color:#fff5df; font-size:clamp(20px,1.65vw,28px); font-weight:600;
 text-shadow:none; transform:none; transition:color .16s,background-color .16s;
}
#home .nav-arrow { display:none; }
#home .nav-icon { width:26px; height:26px; }
#home .nav-choice.selected { background:#fff5df; color:#151922; box-shadow:none; margin-bottom:.7vh; }
#home .nav-choice.selected .nav-icon { filter:invert(24%) sepia(99%) saturate(3269%) hue-rotate(337deg) brightness(103%) contrast(103%); }
#home .nav-choice:hover { background:#fff5df14; color:#fff; transform:none; box-shadow:none; }
#home .nav-choice.selected:hover { background:#e52b3f; color:#fff; }
#home .nav-choice.selected:hover .nav-icon { filter:brightness(0) invert(1); }
#home .nav-choice:active { background:#fff5df24; transform:none; box-shadow:none; }
#home .nav-choice.selected:active { background:#e9dfcb; }
#home .nav-choice:focus-visible { outline:2px solid #fff5df; outline-offset:4px; }
@media(max-width:700px) {
 #home.studio-menu::after { width:90%; }
 #home .nav-choice { grid-template-columns:22px minmax(0,1fr); gap:12px; padding:0 12px; font-size:20px; }
 #home .nav-icon { width:22px; height:22px; }
}
/* Mode selector floats directly over the softened scene. */
#play-dialog {
 width:min(900px,94vw); max-width:94vw; padding:16px 12px;
 background:transparent; border:0; border-radius:0; box-shadow:none;
 color:#fff5df;
}
#play-dialog::backdrop { background:rgba(12,15,23,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#play-title { text-align:left; margin:0 0 22px; font-size:clamp(28px,3vw,42px); letter-spacing:0; color:#fff5df; }
#play-dialog .play-mode-grid { gap:16px; }
#play-dialog .play-mode { border:0; border-radius:3px; box-shadow:none; transition:transform .18s,filter .18s; }
#play-dialog .play-mode span { text-shadow:none; margin-bottom:22px; color:#fff5df; }
#play-dialog .play-mode span::after { display:none; }
#play-dialog .play-mode:hover { transform:translateY(-4px); box-shadow:none; filter:brightness(1.08); }
#play-dialog .play-mode:focus-visible { outline:2px solid #fff5df; outline-offset:4px; }
#play-dialog .play-back {
 display:block; width:auto; min-width:120px; margin:20px 0 0; padding:11px 26px;
 border:0; border-radius:2px; background:#fff5df; color:#151922;
 font-size:21px; font-weight:600; box-shadow:none; text-shadow:none;
 transition:background-color .16s,color .16s;
}
#play-dialog .play-back:hover { background:#e52b3f; color:white; }
#play-dialog .play-back:focus-visible { outline:2px solid #fff5df; outline-offset:4px; }
@media(max-width:580px) {
 #play-dialog { padding:12px; }
 #play-title { margin-bottom:16px; }
 #play-dialog .play-mode-grid { gap:12px; }
 #play-dialog .play-mode span { margin-bottom:14px; }
}
/* Training shares the frameless mode selector. */
#training-dialog { width:min(900px,94vw); padding:16px 12px; background:transparent; border:0; border-radius:0; box-shadow:none; text-align:left; }
#training-dialog::backdrop { background:rgba(12,15,23,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#training-title { margin:0 0 22px; font-size:clamp(28px,3vw,42px); color:#fff5df; }
#training-title::after { display:none; }
.training-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.training-modes button { padding:12px 6px; background:transparent; border:0; border-radius:2px; color:#fff5df; font-size:clamp(18px,2.2vw,27px); font-weight:600; text-transform:uppercase; box-shadow:none; }
.training-modes button[aria-pressed="true"] { background:#fff5df; color:#151922; }
.training-modes button:disabled { opacity:.45; cursor:not-allowed; }
.training-modes button:not(:disabled):hover { background:#fff5df22; }
.training-modes button[aria-pressed="true"]:hover { background:#fff5df; }
#training-dialog .training-arena { position:relative; display:block; overflow:hidden; border-radius:2px; }
#training-map { display:block; width:100%; height:clamp(150px,25vw,290px); object-fit:cover; object-position:center 48%; border:0; border-radius:0; }
#training-map-prev,#training-map-next { position:absolute; top:0; bottom:0; width:clamp(40px,5vw,58px); padding:0; border:0; border-radius:0; background:#15192238; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff5df; font-size:42px; box-shadow:none; }
#training-map-prev { left:0; } #training-map-next { right:0; }
#training-map-prev:disabled,#training-map-next:disabled { opacity:.6; cursor:default; }
#training-map-name { position:absolute; bottom:16px; left:clamp(54px,7vw,78px); margin:0; color:#fff5df; font-size:25px; font-weight:700; text-transform:uppercase; }
.training-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; }
#training-dialog #training-back,#training-dialog #training-launch { position:static; display:flex; align-items:center; justify-content:center; gap:16px; width:auto; min-width:120px; margin:0; padding:11px 26px; border:0; border-radius:2px; background:#fff5df; color:#151922; font-size:21px; font-weight:600; text-transform:uppercase; box-shadow:none; }
#training-dialog #training-launch { min-width:170px; font-size:21px; letter-spacing:0; }
#training-dialog #training-launch span { margin:0; font-size:inherit; }
#training-dialog .training-actions button { min-height:48px; line-height:1; }
#training-dialog #training-launch:hover,#training-dialog #training-launch:active { transform:none; filter:none; }
#training-launch .nav-icon { width:20px; height:20px; filter:invert(24%) sepia(99%) saturate(3269%) hue-rotate(337deg) brightness(103%) contrast(103%); }
#training-dialog #training-back:hover,#training-dialog #training-launch:hover { background:#e52b3f; color:#fff; }
#training-launch:hover .nav-icon { filter:brightness(0) invert(1); }
#training-dialog button:focus-visible { outline:2px solid #fff5df; outline-offset:3px; }
@media(max-width:580px) { .training-modes { gap:6px; } .training-modes button { font-size:18px; } #training-dialog #training-launch { min-width:130px; } }
/* A short, uninterrupted return to the menu, including the backdrop. */
#play-dialog.is-leaving { animation:modes-leave 220ms ease-in forwards; pointer-events:none; }
#play-dialog.is-leaving::backdrop { animation:modes-backdrop-leave 220ms ease-in forwards; }
@keyframes modes-leave { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.975) translateY(6px); } }
@keyframes modes-backdrop-leave { from { background:rgba(12,15,23,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } to { background:transparent; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { #play-dialog.is-leaving,#play-dialog.is-leaving::backdrop { animation:none; } }

/* Three variants share the play selector's outer dimensions and card height. */
#casual-dialog{width:min(900px,94vw);max-width:94vw;padding:16px 12px;background:transparent;border:0;border-radius:0;box-shadow:none;color:#fff5df;font-family:'Barlow Condensed',sans-serif}
#casual-dialog::backdrop{background:rgba(12,15,23,.22);backdrop-filter:blur(10px)}
#casual-title{margin:0 0 22px;font-size:clamp(28px,3vw,42px);text-align:left;text-transform:uppercase}
.casual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.casual-card{position:relative;aspect-ratio:.60;max-height:calc(90dvh - 150px);padding:0;overflow:hidden;border:0;border-radius:3px;box-shadow:none;background:transparent;display:flex;align-items:flex-end;justify-content:center;transition:transform .18s,filter .18s}
.casual-card::before{content:'';position:absolute;inset:0;background-image:url('assets/casual-mode-art.png');background-size:300% auto;background-position:0 50%;z-index:0}
.casual-card:nth-child(2)::before{background-image:url('assets/grand-format-colosseum.png');background-size:cover;background-position:center}.casual-card:nth-child(3)::before{background-position:100% 50%}
.casual-card span{position:relative;z-index:1;margin:0 6px 22px;color:#fff5df;font:700 clamp(18px,2.2vw,27px) 'Barlow Condensed',sans-serif;text-transform:uppercase}
.casual-card small{display:block;font-size:.65em;opacity:.65;margin-top:4px}.casual-card:disabled{opacity:1;cursor:default}.casual-card:disabled::before{filter:brightness(.72) saturate(.7)}
.casual-card:not(:disabled):hover{transform:translateY(-4px);filter:brightness(1.08)}
#casual-dialog .casual-back{display:block;margin:20px 0 0;padding:11px 26px;min-width:120px;border:0;border-radius:2px;background:#fff5df;color:#151922;font:600 21px 'Barlow Condensed',sans-serif;text-transform:uppercase;box-shadow:none}
#casual-dialog .casual-back:hover{background:#e52b3f;color:white}
#casual-dialog.is-leaving{animation:modes-leave 220ms ease-in forwards}
@media(max-width:580px){#casual-dialog{padding:12px}.casual-grid{gap:8px}.casual-card{aspect-ratio:.48}.casual-card span{font-size:18px;margin-bottom:14px}}