/* Tidal Club presentation: deep-water enamel, pearl edges and warm gold.
   Scoped screen selectors deliberately beat legacy, dynamically loaded CSS.
   No backdrop filters, external font requests or new full-screen GPU passes. */
@font-face{font-family:'Baloo 2';src:url('../../assets/fonts/Baloo2.ttf') format('truetype');font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:Nunito;src:url('../../assets/fonts/Nunito.ttf') format('truetype');font-style:normal;font-weight:200 1000;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('../../assets/fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
body{--display:'Baloo 2',sans-serif;--ui:Nunito,system-ui,sans-serif;--ink-dim:#afcadb;--ink-faint:#91b3ca;--btn-shape:none;--btn-radius:7px}
button{touch-action:manipulation}
.screen .btn,.screen .pill{clip-path:none;border-radius:7px;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -3px 0 #03091655,0 4px 10px #03091650}
.screen .btn.play{border:1px solid #fff1a2;border-radius:10px;background:linear-gradient(175deg,#fff0a8 0%,#ffd34d 40%,#eca01d 100%);box-shadow:inset 0 2px 0 #fff6cd,inset 0 -5px 0 #b66d16,0 8px 24px #0006;padding-block:15px}
.screen button:focus-visible{outline:3px solid #f2fbff;outline-offset:3px}
.screen .scr-title{font-weight:800;letter-spacing:.015em}
.screen.menu{--mn-pad:clamp(16px,2.5vw,48px);--mn-dim:#c4dbe7}
.screen.menu .mn-top{min-height:78px;padding:12px var(--mn-pad);background:linear-gradient(180deg,#060d21f5,#09162dea);border-bottom:1px solid #73d8e12b;box-shadow:0 8px 32px #02071355;gap:20px}
.screen.menu .mn-avatar{width:52px;height:52px}
.screen.menu .mn-name{font-family:var(--display);font-size:20px;font-weight:800;line-height:1.1;letter-spacing:.04em}
.screen.menu .mn-xp{height:13px;margin-top:6px;min-width:185px}
.screen.menu .mn-xp-lo,.screen.menu .mn-xp-hi{font-size:9px}
.screen.menu .mn-cur{min-width:82px;min-height:36px;border:1px solid #70bfdf36;border-radius:9px;background:linear-gradient(160deg,#183456,#09132a);box-shadow:inset 0 1px 0 #ffffff13}
.screen.menu .mn-curn{font-size:16px;font-variant-numeric:tabular-nums}
.screen.menu .mn-tool{width:38px;height:38px;border-radius:8px;color:#a9d8df;background:#10254165;transition:background .15s,color .15s}
.screen.menu .mn-tool:hover{background:#214669;color:#fff}
.screen.menu .mn-stage{grid-template-columns:minmax(295px,355px) 1fr minmax(250px,300px);gap:24px;padding-top:18px;padding-bottom:22px}
.screen.menu .mn-left{gap:10px;justify-content:center}
.screen.menu .mn-logo{height:auto;width:100%;max-height:145px;object-position:left center;filter:drop-shadow(0 8px 14px #0009)}
.screen.menu .mn-tagline{margin:-4px 0 8px;font:800 11px/1.2 var(--ui);color:#b3d1df;letter-spacing:.18em;text-align:center}
.screen.menu .mn-tagline span{color:#ffe08a}
.screen.menu .mn-stack{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:0 1 auto;align-items:stretch}
.screen.menu .mn-btn{display:flex;align-items:center;gap:13px;flex:none;aspect-ratio:auto;width:100%;height:auto;min-height:47px;max-width:none;padding:10px 13px;margin:0;border:1px solid #72cbd64f;border-radius:10px;background:linear-gradient(155deg,#20506a 0%,#103248 48%,#0c213b 100%);color:#ecfaff;box-shadow:inset 0 1px 0 #b5f4ff39,inset 0 -3px 0 #02091790,0 5px 14px #02091770;text-align:left;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s}
.screen.menu .mn-btn:nth-child(-n+2),.screen.menu .mn-btn:nth-child(5){grid-column:1/-1}
.screen.menu .mn-btn:nth-child(2){min-height:68px}
.screen.menu .mn-btn.is-hero{min-height:93px;padding:13px 18px;color:#352003;border-color:#fff2a8;background:linear-gradient(165deg,#fff0a2,#ffcf3c 50%,#efa520);box-shadow:inset 0 2px 0 #fff4c4,inset 0 -5px 0 #b67519,0 8px 25px #02071480}
.screen.menu .mn-action-icon{display:grid;place-items:center;flex:0 0 34px;color:#7ff5ea;filter:drop-shadow(0 2px 0 #02071880)}
.screen.menu .is-hero .mn-action-icon{width:49px;height:49px;flex-basis:49px;background:linear-gradient(150deg,#ff6aaa,#d51863);border:2px solid #fff1b6;border-radius:50%;color:#fff;box-shadow:0 3px 0 #a65f19}
.screen.menu .mn-action-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.screen.menu .mn-action-copy strong{font:800 19px/1.08 var(--display);letter-spacing:.025em;white-space:nowrap}
.screen.menu .mn-action-copy small{font:600 11px/1.25 var(--ui);color:#adcddb}
.screen.menu .is-hero .mn-action-copy strong{font-size:36px;line-height:1}
.screen.menu .is-hero .mn-action-copy small{color:#654413;font-weight:800}
.screen.menu .mn-action-arrow{opacity:.65;display:flex}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)){gap:7px;padding:10px}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-copy strong{font-size:14px}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-copy small{font-size:10px}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-icon{flex-basis:24px}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-arrow{display:none}
.screen.menu .mn-btn:nth-child(n+6){background:linear-gradient(155deg,#162d48e8,#0b1c33ec);border-color:#a7cce126;min-height:43px}
.screen.menu .mn-btn:nth-child(9) .mn-action-icon{color:#ef93ba}
.screen.menu .mn-btn:hover{transform:translateX(4px);border-color:#a5fbf4;box-shadow:inset 0 1px 0 #fff5,inset 0 -3px 0 #02091790,0 6px 18px #02091770,0 0 16px #46d8dc20}
.screen.menu .mn-btn:active{transform:translateX(3px) translateY(2px)}
.screen.menu .mn-scrim{background:linear-gradient(90deg,#040c21df 0%,#040c21a6 24%,#040c2100 47%,#040c2100 74%,#040c215a 100%),linear-gradient(0deg,#050b2199,transparent 32%,transparent 85%,#040c2144)}
.screen.menu .mn-still{background:#080b1f url('../../assets/ui/bg/menu-still.jpg') center/cover no-repeat}
.screen.menu .mn-right{justify-content:flex-end;padding-bottom:8px;gap:15px}
.screen.menu .mn-card{clip-path:none;border:1px solid #7ccbdd66;border-radius:14px;padding:19px;background:linear-gradient(145deg,#163b57f5,#0b1a34fa 65%);box-shadow:inset 0 1px 0 #d1f8ff25,0 8px 24px #01071388;filter:none}
.screen.menu .mn-season{padding-top:96px;overflow:hidden;background:linear-gradient(0deg,#0b1b34 0%,#102843f5 60%,#163a55aa 100%),url('../../assets/ui/arena/reef.jpg') center top/cover;border-color:#edcb715c}
.screen.menu .mn-season::before{content:'';position:absolute;right:8px;top:-11px;width:118px;height:116px;background:url('../../assets/characters/poses/inkwell_pearl_raise.webp') center/contain no-repeat;pointer-events:none}
.screen.menu .mn-season .mn-tag{position:absolute;top:22px;left:19px;background:#0b253e;color:#9befeb;border:1px solid #79d9d057;max-width:115px;white-space:normal}
.screen.menu .mn-season-name{font:800 29px/.98 var(--display);letter-spacing:.01em;position:relative}
.screen.menu .mn-card-copy{font-size:11px;line-height:1.45;position:relative;color:#bed5df}
.screen.menu .mn-cta{min-height:36px;border-radius:5px;box-shadow:inset 0 1px 0 #fff5,inset 0 -2px 0 #9c670d;color:#3c2909}
.screen.menu .mn-card-head{font:800 12px/1 var(--ui);letter-spacing:.14em;padding-bottom:12px;border-bottom:1px solid #98dce126;margin-bottom:12px}
.screen.menu .mn-daily-name{font:800 19px/1.1 var(--display)}
.screen.menu .mn-daily-what{font-size:12px;line-height:1.45}
.screen.menu .mn-daily-n,.screen.menu .mn-clock{font-variant-numeric:tabular-nums}
.screen.menu .mn-meter{height:8px;margin-block:10px 5px}
.screen.menu .mn-refresh{padding-top:10px;margin-top:10px}
.screen.menu .mn-dots{display:flex;justify-content:center;gap:0;margin-top:8px}
.screen.menu .mn-dots button{position:relative;width:28px;height:25px;border:0;background:none;padding:0;cursor:pointer;border-radius:4px}
.screen.menu .mn-dots button::before{content:'';position:absolute;left:10px;top:9px;width:7px;height:7px;border-radius:50%;background:#506880;transition:background .15s,width .15s}
.screen.menu .mn-dots button.on::before{left:6px;width:15px;border-radius:4px;background:#ffe08a}
.screen.menu .mn-foot{min-height:64px;gap:20px;padding:10px var(--mn-pad);background:#060e20ee;border-top:1px solid #7adbe02a}
.screen.menu .mn-feed-tip{display:none}
.screen.menu .mn-feed{max-width:430px}
.screen.menu .mn-feed-txt em{font-size:11px}
.screen.menu .mn-short{gap:8px;margin-left:auto}
.screen.menu .mn-sc,.screen.menu .mn-invite{min-height:42px;border:1px solid #b0d4e12a;border-radius:7px;clip-path:none;background:#11273fbd;box-shadow:inset 0 1px 0 #fff1;padding-inline:14px}
.screen.menu .mn-sc{flex-direction:row;gap:8px}
.screen.menu .mn-sc span:last-child,.screen.menu .mn-invite>span:last-child{font-size:10px;letter-spacing:.05em}
/* Mode cards are mini arenas: silhouettes explain the rule before reading. */
.screen.modes .mode-grid{max-width:1180px;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.screen.modes .modecard{--mode-tint:#a8deee;min-height:215px;border:1px solid #769bc23d;border-radius:13px;clip-path:none;padding:16px 19px 18px;gap:7px;overflow:hidden;filter:none;background:radial-gradient(ellipse at 50% 0%,#1d49636b,transparent 75%),linear-gradient(145deg,#132a48f5,#0b1830fa);box-shadow:inset 0 1px 0 #e8ffff15,0 6px 16px #03081866}
.screen.modes .m-sab{--mode-tint:#7ff5ea}.screen.modes .m-cha{--mode-tint:#b59aff}.screen.modes .m-ars{--mode-tint:#ffd868}.screen.modes .m-mae{--mode-tint:#ff78b3}.screen.modes .m-pow{--mode-tint:#b1f57b}.screen.modes .m-tour{--mode-tint:#ffe38c}
.screen.modes .mc-art{height:110px;display:block;align-self:stretch;color:var(--mode-tint)}
.screen.modes .mc-art svg{height:100%;width:100%;filter:drop-shadow(0 4px 7px #0005)}
.screen.modes .mc-name{font-size:24px;line-height:1;font-weight:800;color:var(--mode-tint);-webkit-text-stroke:0;text-shadow:0 2px 0 #0006;letter-spacing:.01em}
.screen.modes .mc-desc{font-size:12px;line-height:1.4;color:#b5ccdb}
.screen.modes .modecard.on{border:2px solid #ffe08a;padding:15px 18px 17px;background:radial-gradient(ellipse at 50% 0%,#58746955,transparent 80%),linear-gradient(145deg,#20394e,#122238);box-shadow:inset 0 1px 0 #fff5,0 0 22px #ffcb3914,0 7px 18px #0006;transform:translateY(-2px)}
.screen.modes .modecard.on::after{content:'✓';width:24px;height:24px;right:9px;top:9px;bottom:auto;display:grid;place-items:center;background:#ffe08a;border-radius:50%;color:#27303a;font:900 14px/1 var(--ui)}
.screen.modes .modecard:hover{border-color:var(--mode-tint);transform:translateY(-4px)}
.screen.modes .opt-rows{gap:24px;margin-top:6px;margin-inline:auto;padding:18px 24px;border:1px solid #7daec22b;border-radius:12px;background:#09172cdd;max-width:1180px;width:100%;box-sizing:border-box}
.screen.modes .opt h5{color:#a7c6d9}
.screen.modes .scr-title{margin-bottom:20px;font-size:clamp(30px,4.4vh,48px)}
.screen.modes .modes-foot{padding-bottom:20px}
/* A character stands on a lit platform; the roster remains the focus. */
.screen.sel .sel-panel{clip-path:none;border:1px solid #719fba36;border-radius:13px;background:linear-gradient(145deg,#112c44f2,#0b172ff5);filter:none;box-shadow:inset 0 1px 0 #eaffff12,0 8px 24px #02071455}
.screen.sel .sel-hero{background:radial-gradient(ellipse at 50% 42%,#29405c88,transparent 65%),linear-gradient(160deg,#173b50,#101c39 72%)}
.screen.sel .sel-stage{background:repeating-radial-gradient(ellipse 65% 16% at 50% 85%,transparent 0px,transparent 27px,#8edeee0c 28px,#8edeee0c 29px,transparent 30px)}
.screen.sel .sel-stage::before{opacity:.42}
.screen.sel .sel-stage::after{bottom:11%;height:8%;width:75%;background:radial-gradient(ellipse,#050f22a8 25%,#7dece53d 58%,transparent 63%);border-bottom:1px solid #b3fffa4d;border-radius:50%}
.screen.sel .sel-portrait{z-index:1;filter:drop-shadow(0 14px 16px #03061690)}
.screen.sel .sel-chip{clip-path:none;border:1px solid #8db7d328;border-radius:10px;filter:none;background:radial-gradient(ellipse at 50% 30%,#39597855,transparent 75%),linear-gradient(150deg,#17314f,#0c1b34);box-shadow:inset 0 1px 0 #dfffff15,0 4px 9px #01051140}
.screen.sel .sel-chip.on{border-color:var(--chip);background:radial-gradient(ellipse at 50% 20%,#5077806b,transparent 80%),#1b334e;box-shadow:inset 0 0 0 1px var(--chip),0 0 18px #77dfdd15}
.screen.sel .sel-chip:focus-visible,.screen.sel .sel-ar:focus-visible{outline:3px solid #fff;outline-offset:2px}
.screen.sel .sel-ar{clip-path:none;border:1px solid #90bfd826;border-radius:8px;filter:none;overflow:hidden;background:#0b1b32}
.screen.sel .sel-ar.on{border-color:var(--ar-tint);background:#18354c;box-shadow:inset 0 0 0 1px var(--ar-tint)}
.screen.sel .sel-h{font-family:var(--ui);padding-bottom:10px;border-bottom:1px solid #7cd2de26}
.screen.sel .sel-name{font-weight:800;-webkit-text-stroke:0;font-size:clamp(27px,4vh,42px)}
.screen.sel .sel-badge{clip-path:none;border-radius:5px;font-size:10px}
/* Solid HUD plates remain legible against every arena and seat colour. */
.screen.hud .chip{border:1px solid #9cd8e437;border-radius:7px;background:linear-gradient(160deg,#112840ee,#07142aec);box-shadow:inset 0 1px 0 #ffffff18,0 4px 12px #01051044;clip-path:none}
@media(min-width:1800px) and (min-height:950px){.screen.menu .mn-stage{grid-template-columns:minmax(355px,400px) 1fr 330px}.screen.menu .mn-btn{min-height:58px}.screen.menu .mn-btn.is-hero{min-height:110px}.screen.menu .mn-left{gap:15px}}
@media(max-height:800px) and (min-width:761px){.screen.menu .mn-top{min-height:62px;padding-block:7px}.screen.menu .mn-stage{padding-top:10px;padding-bottom:10px;grid-template-columns:315px 1fr 265px}.screen.menu .mn-logo{max-height:100px}.screen.menu .mn-left{gap:6px}.screen.menu .mn-tagline{margin-bottom:4px;font-size:9px}.screen.menu .mn-stack{gap:7px}.screen.menu .mn-btn{min-height:40px;padding-block:8px}.screen.menu .mn-btn.is-hero{min-height:75px}.screen.menu .mn-btn:nth-child(2){min-height:55px}.screen.menu .mn-btn:nth-child(n+6){min-height:37px}.screen.menu .mn-card{padding:14px}.screen.menu .mn-season{padding-top:75px}.screen.menu .mn-season::before{width:115px;height:125px}.screen.menu .mn-season-name{font-size:24px}.screen.menu .mn-foot{min-height:54px;padding-block:6px}.screen.modes .modecard{min-height:175px;padding:12px 15px}.screen.modes .modecard.on{padding:11px 14px}.screen.modes .mc-art{height:75px}.screen.modes .mc-name{font-size:21px}.screen.modes .opt-rows{padding:13px 18px}}
@media(max-width:1150px){.screen.menu .mn-stage{grid-template-columns:310px 1fr 255px;gap:16px}.screen.menu .mn-feed{display:none}.screen.menu .mn-short{margin-left:0}.screen.menu .mn-foot{justify-content:space-between}.screen.menu .mn-top{gap:12px}.screen.menu .mn-tools{gap:4px}.screen.menu .mn-sc{padding-inline:10px}.screen.modes .mode-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.screen.modes .modecard{padding:12px;min-height:185px}.screen.modes .modecard.on{padding:11px}.screen.modes .mc-art{height:80px}.screen.modes .mc-name{font-size:21px}}
@media(max-width:900px){.screen.menu .mn-stage{grid-template-columns:minmax(260px,330px) 1fr 240px;gap:12px}.screen.menu .mn-curs{gap:5px}.screen.menu .mn-cur{min-width:60px}.screen.menu .mn-tool{width:30px}.screen.menu .mn-xp{min-width:130px}.screen.menu .mn-sc{padding-inline:8px}.screen.menu .mn-invite{padding-inline:8px}.screen.menu .mn-faces{display:none}.screen.modes .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screen.modes .modecard{min-height:155px}.screen.modes .mc-art{height:65px}}
@media(max-width:760px){.screen.menu .mn-top{padding:10px 16px;min-height:0;gap:10px}.screen.menu .mn-avatar{width:42px;height:42px}.screen.menu .mn-name{font-size:17px}.screen.menu .mn-tools{gap:4px}.screen.menu .mn-tool{width:29px;height:32px}.screen.menu .mn-tool svg{width:18px}.screen.menu .mn-curs{order:3;width:100%;justify-content:center;gap:10px}.screen.menu .mn-cur{min-width:86px;min-height:30px}.screen.menu .mn-stage{display:block;padding:16px;overflow:auto}.screen.menu .mn-left{height:auto;align-items:stretch;gap:10px;max-width:440px;margin-inline:auto}.screen.menu .mn-logo{width:265px;height:92px;align-self:center}.screen.menu .mn-tagline{font-size:10px;margin-top:0}.screen.menu .mn-stack{flex:none;gap:9px}.screen.menu .mn-btn{min-height:52px}.screen.menu .mn-btn.is-hero{min-height:87px}.screen.menu .mn-btn:nth-child(n+6){min-height:46px}.screen.menu .mn-right{width:100%;max-width:440px;margin:22px auto 0;display:grid;grid-template-columns:1fr;gap:12px;padding:0}.screen.menu .mn-season{padding-top:80px}.screen.menu .mn-card{border-radius:12px}.screen.menu .mn-season-name{font-size:25px}.screen.menu .mn-scrim{background:linear-gradient(90deg,#030b219c,#040d2180),linear-gradient(0deg,#030b21dd,transparent 80%)}.screen.menu .mn-foot{padding:8px 10px;gap:6px;flex-wrap:wrap;min-height:0}.screen.menu .mn-short{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:5px;flex:auto}.screen.menu .mn-sc{min-height:44px;flex-direction:column;gap:3px;padding:5px 3px}.screen.menu .mn-sc span:last-child{font-size:8px}.screen.menu .mn-sc-ico svg{width:15px;height:15px}.screen.menu .mn-invite{min-height:30px;width:100%;justify-content:center}.screen.modes .mode-grid{gap:10px}.screen.modes .modecard{min-height:175px;padding:12px}.screen.modes .modecard.on{padding:11px}.screen.modes .mc-name{font-size:20px}.screen.modes .mc-desc{font-size:11px}.screen.modes .modes-body{padding-inline:14px}.screen.modes .opt-rows{gap:16px;padding:15px 10px}.screen.modes .scr-title{font-size:30px;margin-top:12px!important}.screen.sel .sel-stage::after{display:none}}
@media(max-height:550px) and (min-width:761px){.screen.menu .mn-stage{overflow:auto;align-items:start;grid-template-columns:300px 1fr 255px}.screen.menu .mn-left{height:auto}.screen.menu .mn-logo{max-height:80px}.screen.menu .mn-right{align-self:start;margin-top:10px}.screen.menu .mn-foot{padding-block:5px}.screen.menu .mn-btn.is-hero{min-height:66px}.screen.menu .mn-action-copy strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.screen.menu .mn-btn,.screen.modes .modecard,.screen.sel .sel-chip{transition:none}.screen.menu .mn-btn:hover,.screen.modes .modecard:hover{transform:none}}
html.op-a11y-still .screen.menu .mn-btn,html.op-a11y-still .screen.modes .modecard{transition:none}

/* Release polish: one enamel face, one border, no stacked glow filters.
   Repeated .screen intentionally outranks legacy screen-specific states. */
body{--display:'Baloo 2',Nunito,sans-serif;--stroke-xl:0;--stroke-lg:0;--stroke-md:0}
.screen.screen :is(.btn,.pill,.tile,.iconbtn){
  filter:none;clip-path:none;border:1px solid #527689;border-radius:6px;
  background:linear-gradient(180deg,#163d52,#123247);color:#edf5fa;
  box-shadow:inset 0 1px 0 #ffffff12,0 2px 0 #030d1b66;
  text-shadow:none;transition:background .14s,border-color .14s,transform .14s;
}
.screen.screen :is(.btn,.pill,.tile,.iconbtn)::after{display:none}
.screen.screen :is(.btn,.pill,.tile,.iconbtn):hover{filter:none;transform:none;background:#214a60;border-color:#8ab7c7;box-shadow:inset 0 1px 0 #ffffff16,0 2px 0 #030d1b66}
.screen.screen :is(.btn,.pill,.tile,.iconbtn):active{filter:none;transform:translateY(1px);box-shadow:inset 0 1px 2px #0005}
.screen.screen :is(.btn,.pill,.tile,.iconbtn):focus{filter:none;outline:none;box-shadow:inset 0 0 0 1px #c8e5eb}
.screen.screen :is(.btn,.pill,.tile,.iconbtn):focus-visible{outline:2px solid #eaf8fc;outline-offset:3px}
.screen.screen :is(.btn.play,.btn.primary){background:linear-gradient(180deg,#f3d576,#e8be4d);border-color:#f7df94;color:#251b0c;filter:none;box-shadow:inset 0 1px 0 #fff4bd80,0 2px 0 #715626;letter-spacing:.035em}
.screen.screen :is(.btn.play,.btn.primary):hover{background:#f6db88;border-color:#ffedb5;filter:none}
.screen.screen .btn.danger{background:#482a3c;border-color:#8b5269;color:#ffe3ec;filter:none}
.screen.screen .btn.danger:hover{background:#613448;border-color:#c67f99}
.screen.screen .btn .ico{background:#ffffff08;border-radius:4px;box-shadow:none;color:inherit}
.screen.screen .pill.on,.screen.screen .pill[aria-checked=true]{background:#244c5b;border-color:#d3c185;color:#fff0ba;box-shadow:inset 0 -2px 0 #d3c185}
.screen.screen :is(.scr-title,.wordmark,.pause-word,.res-word,.res-rank,.res-rank-n,.res-brand,.sel-name,.mc-name){
  -webkit-text-stroke:0;-webkit-text-fill-color:currentColor;background:none;
  filter:none;text-shadow:0 2px 0 #03091680;paint-order:normal;font-weight:800;line-height:1.08;
}
.screen.screen .scr-title{letter-spacing:.045em}
.screen.pause .pause-shard,.screen.res .res-shard,.screen.res .res-shock{display:none}
.screen.pause .pause-mark{padding:0 0 18px;align-self:flex-start;border-bottom:2px solid #f0cf76}
.screen.pause .pause-word{font-size:clamp(48px,5.8vw,84px);color:#f2d784;letter-spacing:.035em;text-align:left}
.screen.pause .pause-stack{gap:9px}
.screen.pause .pause-stack .btn{min-height:50px;padding:12px 18px;font-size:20px}
.screen.res .res-word{font-size:clamp(48px,7.5vw,110px);color:var(--v-hi);letter-spacing:.025em}
.screen.res .res-sub{letter-spacing:.1em;font-family:var(--ui);font-size:13px}
.screen.res .res-brand{font-size:26px}
.screen.res .res-footer .btn{min-height:46px}
.screen.screen :is(.panel,.pause-panel,.res-panel){clip-path:none;filter:none;border:1px solid #66899e50;border-radius:8px;background:#0b192dea;box-shadow:0 8px 24px #02081844}
.screen.screen .panel-head{background:#152d43;color:#d8eef4;text-shadow:none;border-bottom:1px solid #719baa35;letter-spacing:.1em}
.screen.screen .panel-head.aqua.aqua,.screen.screen .panel-head.gold.gold{background:#152d43;color:#dbd2a7;text-shadow:none}
.screen.menu .mn-stack{gap:8px}
.screen.menu .mn-btn,.screen.menu .mn-btn:nth-child(n+6){
  border:1px solid #52778a;border-radius:6px;background:linear-gradient(180deg,#164053,#103247);
  box-shadow:inset 0 1px 0 #ffffff12,0 2px 0 #02091677;filter:none;
}
.screen.menu .mn-btn:hover,.screen.menu .mn-btn:focus{background:#204b60;border-color:#9abbca;filter:none;box-shadow:inset 0 1px 0 #ffffff18,0 2px 0 #02091677;transform:none}
.screen.menu .mn-btn:focus-visible{outline:2px solid #eaf8fc;outline-offset:3px}
.screen.menu .mn-btn:active{transform:translateY(1px)}
.screen.menu .mn-btn.is-hero{background:linear-gradient(180deg,#f3d576,#e8be4d);border-color:#f5de92;color:#261c0e;box-shadow:inset 0 1px 0 #fff4bd80,0 2px 0 #715626}
.screen.menu .mn-btn.is-hero:hover{background:#f6db88;border-color:#ffedb5}
.screen.menu .mn-action-icon{filter:none;color:#b9dfe7}
.screen.menu .is-hero .mn-action-icon{background:none;border:0;border-radius:0;box-shadow:none;color:#302416;flex-basis:35px;width:35px}
.screen.menu .mn-action-copy strong{font-size:22px;letter-spacing:.04em}
.screen.menu .is-hero .mn-action-copy strong{font-size:39px}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-copy strong{font-size:17px}
.screen.menu .mn-action-copy small{font-size:11px;font-weight:600;color:#b5ccd6}
.screen.menu .mn-btn:nth-child(n+3) .mn-action-copy small{display:none}
.screen.menu .mn-tagline{letter-spacing:.14em}
.screen.menu .mn-card{background:#0b1b30f0;border:1px solid #6f95a34d;border-radius:8px;box-shadow:0 5px 18px #02081844}
.screen.menu .mn-season{padding-top:96px;background:linear-gradient(0deg,#0b1b30 25%,#0b1b3055),url('../../assets/ui/arena/reef.jpg') center/cover}
.screen.menu .mn-season-name{font-size:31px;line-height:1.08;-webkit-text-stroke:0;letter-spacing:.02em}
.screen.menu .mn-cta{background:#d9c17d;box-shadow:none;border:1px solid #ead69a;color:#261e0e;text-shadow:none}
.screen.menu .mn-sc,.screen.menu .mn-invite{filter:none;box-shadow:none;background:#11263a;border-color:#5b829b55}
.screen.modes .modecard{background:#0c1d32;box-shadow:inset 0 1px 0 #ffffff10;border-radius:8px}
.screen.modes .modecard:hover{transform:none;background:#142d43;box-shadow:none}
.screen.modes .modecard.on{background:#193449;border-color:#d9c17d;box-shadow:inset 0 -3px 0 #d9c17d;transform:none}
.screen.modes .modecard.on::after{background:#d9c17d;border-radius:4px}
.screen.sel .sel-chip.on{box-shadow:inset 0 -2px 0 var(--chip);background:#1b334e}
.screen.sel .sel-ar.on{box-shadow:inset 0 0 0 1px var(--ar-tint)}
@media(max-height:800px) and (min-width:761px){.screen.menu .mn-season{padding-top:75px}.screen.menu .mn-season-name{font-size:26px}}
@media(max-width:760px){.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-copy strong{font-size:18px}.screen.menu .mn-season{padding-top:80px}.screen.pause .pause-word{font-size:52px}.screen.res .res-word{font-size:58px}}

.screen.screen .res-card :is(.nm,.ord,.ord b,.ord sup){
  -webkit-text-stroke:0;-webkit-text-fill-color:currentColor;
  text-shadow:none;filter:none;font-family:var(--display);font-weight:800;
}
.screen.screen .res-card .ord{color:#d5e4ef}
.screen.screen .res-card.gold .ord{color:#f2d784}

/* Pause owns the screen; the hazard rail must not show through its title. */
body:has(.screen.pause.on) :is(.screen.hud,.screen.tray-layer){opacity:0;visibility:hidden;pointer-events:none}
@media(max-height:600px) and (min-width:761px){
 .screen.pause .pause-body{grid-template-columns:minmax(360px,1fr) minmax(245px,.7fr);gap:20px;padding:12px 22px}
 .screen.pause .pause-center{align-self:stretch;max-height:100%;min-height:0;overflow:auto;scrollbar-width:thin}
 .screen.pause .pause-mark{padding:0 0 8px;margin-bottom:8px}
 .screen.pause .pause-word{font-size:38px}
 .screen.pause .pause-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .screen.pause .pause-stack .btn{min-height:48px;padding:8px 10px;font-size:15px}
 .screen.pause .pause-stack .btn:first-child{grid-column:1/-1}
 .screen.pause .pause-stack .btn .ico{width:22px;height:22px;flex-basis:22px}
 .screen.pause .pause-sep{display:none}
 .screen.pause .pause-hint{margin-top:10px}
}
@media(max-height:600px) and (min-width:761px){
 .screen.pause .pause-center{gap:8px;padding-block:4px}
 .screen.pause .pause-stack{gap:6px}
 .screen.pause .pause-stack .btn{min-height:44px}
 .screen.pause .pause-stack hr{display:none}
 .screen.pause .pause-hint{display:none}
}


/* Playful, pressable controls: a rounded face and a crisp shallow base. */
.screen.screen :is(.btn,.pill),.screen.menu .mn-btn,.screen.menu .mn-btn:nth-child(n+6){
 border-radius:15px 10px 15px 10px;border:2px solid #071629;
 background:linear-gradient(180deg,#216e85,#17465f);color:#effaff;
 box-shadow:inset 0 2px 0 #97e9ee55,0 4px 0 #061327,0 5px 0 #6996ae60;
 text-shadow:0 2px 0 #07152780;filter:none;
 transition:transform .15s cubic-bezier(.2,1.4,.4,1),background .15s,box-shadow .15s;
}
.screen.screen :is(.btn.play,.btn.primary),.screen.menu .mn-btn.is-hero{
 background:linear-gradient(180deg,#ffe79b,#f4c650 78%);border-color:#5b371b;color:#39250e;
 box-shadow:inset 0 3px 0 #fff3c6,0 4px 0 #9b631b,0 5px 0 #100e21;
 text-shadow:0 1px 0 #fff1b655;border-radius:18px 11px 18px 11px;
}
.screen.screen .btn.danger{background:linear-gradient(180deg,#88405f,#592c47);border-color:#351a34;color:#ffe6ef;box-shadow:inset 0 2px 0 #f4a2c333,0 4px 0 #32172b}
.screen.screen .pill.on{background:linear-gradient(180deg,#438c91,#28576d);border-color:#edcc78;color:#fff0bf;box-shadow:inset 0 2px 0 #b9eee533,0 3px 0 #091c32}
.screen.menu .mn-stack{gap:11px}
.screen.menu .mn-action-copy strong{font-size:21px;letter-spacing:.015em;line-height:1.15}
.screen.menu .mn-btn:nth-child(n+3):not(:nth-child(5)) .mn-action-copy strong{font-size:15px;letter-spacing:.005em}
.screen.menu .is-hero .mn-action-copy strong{font-size:38px;letter-spacing:.025em}
.screen.menu .is-hero .mn-action-icon{width:44px;height:44px;flex-basis:44px;border-radius:50%;background:#e7518a;color:#fff0f7;box-shadow:inset 0 2px 0 #ffb1cc,0 3px 0 #a92e5d}
.screen.menu .mn-btn:nth-child(2) .mn-action-icon{color:#ffe08a}
.screen.menu .mn-btn:nth-child(5) .mn-action-icon{color:#ffc63d}
.screen.screen :is(.btn,.pill):active,.screen.menu .mn-btn:active{transform:translateY(3px);box-shadow:inset 0 2px 3px #07142855,0 1px 0 #061327}
.screen.screen :is(.btn,.pill):focus-visible,.screen.menu .mn-btn:focus-visible{outline:3px solid #fff1b9;outline-offset:4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .screen.screen :is(.btn,.pill):hover,.screen.menu .mn-btn:hover{transform:translateY(-2px) rotate(-.35deg);filter:none}
 .screen.menu .mn-btn.is-hero:hover{transform:translateY(-2px) rotate(-.6deg) scale(1.015)}
 .screen.screen :is(.btn,.pill):active,.screen.menu .mn-btn:active{transform:translateY(3px)}
}
.screen.menu .mn-id{appearance:none;font:inherit;color:inherit;text-align:left;padding:5px 8px 5px 0;margin:0;border:1px solid transparent;border-radius:16px;background:transparent;cursor:pointer;min-width:0}
.screen.menu .mn-id:hover{background:#28466155;border-color:#6a9caf55}
.screen.menu .mn-id:focus-visible{outline:3px solid #ffe08a;outline-offset:2px}
.screen.menu .mn-idtxt{display:flex;flex-direction:column;align-items:flex-start}
.screen.menu .mn-xp{display:block}
.screen.sel .sel-player-label{display:block;margin-top:12px;color:#c4e4e9;font:800 12px/1.4 var(--ui);letter-spacing:.08em}
.screen.sel .sel-player-input{display:block;width:100%;box-sizing:border-box;min-height:44px;margin:5px 0 3px;padding:9px 12px;border:2px solid #538b9e;border-radius:10px;background:#091b30;color:#fff0c4;font:800 20px/1.2 var(--display);text-transform:uppercase;outline-offset:3px}
.screen.sel .sel-player-input:focus{border-color:#ffdc83;outline:2px solid #ffdc8355}
.screen.sel .sel-player-input[aria-invalid=true]{border-color:#ff8eb1}
.screen.sel .sel-player-help{color:#a8c1ce;font:600 10px/1.4 var(--ui)}
@media(max-width:760px){.screen.sel :is(.sel-player-label,.sel-player-input,.sel-player-help){grid-column:1/-1}.screen.menu .mn-id{padding:2px;max-width:100%}.screen.menu .mn-stack{gap:10px}}
@media(max-height:600px) and (min-width:761px){.screen.pause .pause-stack .btn{font-size:13px}.screen.menu .mn-stack{gap:8px}}
/* Notifications never intercept taps on a menu underneath them. */
#ui > .hud-toastlayer,#ui > .hud-toastlayer *{pointer-events:none}

/* Reference pass: portrait medallions, illustrated rule cards and inset
   underwater panels. Gold denotes the primary action or current selection. */
.screen.menu .mn-avatar{width:62px;height:62px;flex:0 0 62px}
.screen.menu .mn-face{clip-path:none;border-radius:50%;border:2px solid #ffdb77;background:radial-gradient(circle at 45% 35%,#397c90,#10263f 72%);box-shadow:0 0 0 3px #071429,inset 0 0 0 3px #163d53;overflow:hidden}
.screen.menu .mn-face-img{width:175%;height:175%;left:-37.5%;top:-12%;object-fit:contain;transform:none}
.screen.menu .mn-lvl{border:2px solid #06182b;box-shadow:0 2px 0 #040c1a;border-radius:8px;color:#382511;background:#ffd86f}
.screen.menu .mn-xp{height:16px;min-width:195px;border-radius:9px;border-color:#4b8396}
.screen.menu .mn-xp-lo,.screen.menu .mn-xp-hi{font-size:10px;line-height:14px}
.screen.menu .mn-idtxt{gap:2px}
.screen.menu .mn-stage{grid-template-columns:minmax(320px,390px) 1fr minmax(260px,310px)}
.screen.menu .mn-logo{max-height:166px}
.screen.menu .mn-tagline{text-align:left;padding-left:3px}
.screen.menu .mn-card{border-radius:18px 10px 18px 10px;border-color:#568296;background:linear-gradient(155deg,#17364cec,#0a1b31f5);box-shadow:inset 0 2px 0 #bfdce51b,0 5px 0 #06101f80}
.screen.menu .mn-season{border-color:#b79c60;background:linear-gradient(0deg,#0a1b31 13%,#0a1b31e8 55%,#07182c22),url('../../assets/ui/arena/reef.jpg') center top/cover;padding-top:112px}
.screen.menu .mn-season::before{width:146px;height:143px;top:-8px;right:8px}
.screen.menu .mn-season-name{font-size:35px;letter-spacing:0}
.screen.menu .mn-card-head{color:#a1e5e6;font-size:12px}
.screen.menu .mn-cta{border-radius:10px;min-height:42px;background:linear-gradient(#f6df99,#dfba60);box-shadow:inset 0 2px 0 #fff0bc60,0 3px 0 #68512b}
.screen.menu .mn-sc{border-radius:12px;min-height:49px;border-bottom:3px solid #071628}
.screen.menu .mn-sc[data-act=customize]{background:#442442;border-color:#965076}
.screen.menu .mn-sc[data-act=leaderboards]{background:#3a3223;border-color:#9b8047}
.screen.menu .mn-sc[data-act=challenges]{background:#153e48;border-color:#498a96}
.screen.menu .mn-sc span:last-child{font:800 12px/1 var(--display);letter-spacing:.02em}

.screen.modes .modes-body{gap:20px;padding:8px clamp(16px,4vw,64px) 28px;align-items:center}
.screen.modes .modes-body>.scr-title{margin:0!important;text-align:left;max-width:1320px;width:100%;font-size:clamp(30px,4vh,44px)}
.screen.modes .mode-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(350px,1fr);gap:24px;width:100%;max-width:1320px;align-items:start}
.screen.modes .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;max-width:none}
.screen.modes .modecard,.screen.modes .modecard.on{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto 1fr;align-items:center;column-gap:10px;row-gap:5px;padding:16px 14px;min-height:136px;border:2px solid #315265;border-radius:17px 10px 17px 10px;background:linear-gradient(145deg,#142d44,#0b1b30);box-shadow:inset 0 1px 0 #abcad71a,0 4px 0 #051323;transform:none}
.screen.modes .modecard.on{border-color:#f3d27b;background:linear-gradient(145deg,#2d4654,#152b40);box-shadow:0 4px 0 #051323}
.screen.modes .mc-art{grid-row:1/3;grid-column:1;height:92px;align-self:center}
.screen.modes .mc-art svg{width:120%;margin-left:-10%;filter:drop-shadow(0 4px 0 #040d20)}
.screen.modes .mc-name{grid-column:2;font-size:22px;line-height:1.05;letter-spacing:0;padding-right:8px}
.screen.modes .mc-desc{grid-column:2;font-size:12px;line-height:1.45;align-self:start}
.screen.modes .modecard.on::after{right:6px;top:6px;width:17px;height:17px;border-radius:50%;font-size:11px}
.screen.modes .modecard:focus-visible{outline:3px solid #fff1bd;outline-offset:3px}
.screen.modes .mode-detail{border:1px solid #547b8e;border-radius:18px;overflow:hidden;background:#0c1c30;box-shadow:0 6px 0 #05101f}
.screen.modes .mode-preview{height:190px;position:relative;overflow:hidden;background:#132c40}
.screen.modes .mode-preview img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.screen.modes .mode-preview-tag{position:absolute;left:15px;top:13px;border:1px solid #6997aa;background:#081b30e8;border-radius:6px;padding:6px 9px;font:800 10px/1 var(--ui);letter-spacing:.12em;color:#c8f0f0}
.screen.modes .mode-brief{padding:16px 20px 12px;border-bottom:1px solid #385369}
.screen.modes .mode-brief h3{margin:0 0 4px;font:800 30px/1.1 var(--display);color:#ffdd88}
.screen.modes .mode-brief p{margin:0;color:#c2d9e4;font:600 13px/1.5 var(--ui)}
.screen.modes .opt-rows{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:4px 20px 16px;border:0;border-radius:0;background:none;box-shadow:none;max-width:none}
.screen.modes .opt-rows .opt:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid #29465a}
.screen.modes .opt h5{margin:0;font-size:10px;letter-spacing:.08em;text-align:left;color:#9fc4d1;min-width:72px}
.screen.modes .pills{justify-content:flex-start;gap:6px}
.screen.modes .pill{min-width:38px;min-height:44px;padding:8px 10px;font-size:11px;border-radius:10px 7px;letter-spacing:.02em}
.screen.modes .mo-wide{min-width:0;width:100%}
.screen.modes .modes-foot{padding:12px 20px 18px;background:#071426e8;border-top:1px solid #335369}
.screen.modes .modes-foot .btn{min-width:310px;min-height:60px;font-size:25px}

.screen.sel .sel-panel{border-color:#42667b;border-radius:18px 11px;background:linear-gradient(150deg,#153249ee,#0c1d33f5)}
.screen.sel .sel-hero{border-color:#846980;background:radial-gradient(ellipse at 50% 30%,#4a386260,transparent 64%),linear-gradient(150deg,#1b354c,#111f38)}
.screen.sel .sel-stage{background:radial-gradient(ellipse at 50% 92%,#65c5d120,transparent 65%)}
.screen.sel .sel-chip{border-radius:15px 8px;border-color:#395a71;background:radial-gradient(ellipse at 50% 25%,#31556d90,transparent 72%),#10253e;box-shadow:inset 0 1px 0 #aacbd522,0 3px 0 #071427}
.screen.sel .sel-chip.on{background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--chip) 28%,#223d54),transparent 78%),#1c3049;border-color:var(--chip);box-shadow:inset 0 -3px 0 var(--chip),0 3px 0 #071427}
.screen.sel .sel-arena-hero{flex:none;margin:0 0 12px;position:relative;border-radius:11px;overflow:hidden;border:1px solid #59798d;background:#08192b}
.screen.sel .sel-arena-hero img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.screen.sel .sel-arena-hero figcaption{position:absolute;bottom:0;left:0;right:0;padding:23px 10px 9px;background:linear-gradient(transparent,#051424f0);font:800 17px/1.1 var(--display);color:#ffdf94}
.screen.sel .sel-ar{border-radius:10px;min-height:58px}
.screen.sel .sel-ar-txt b{-webkit-text-stroke:0;line-height:1.15;font-size:13px}
.screen.sel .sel-arenas{justify-content:flex-start}

@media(hover:hover){.screen.modes .modecard:hover{border-color:#93c3cd;background:#1b374d}.screen.modes .modecard.on:hover{border-color:#ffe7aa;background:#304955}}
@media(max-height:800px) and (min-width:761px){
 .screen.menu .mn-stage{grid-template-columns:330px 1fr 270px}.screen.menu .mn-avatar{width:48px;height:48px;flex-basis:48px}.screen.menu .mn-logo{max-height:110px}.screen.menu .mn-season{padding-top:85px}.screen.menu .mn-season::before{width:125px;height:125px}.screen.menu .mn-season-name{font-size:28px}
 .screen.modes .modecard,.screen.modes .modecard.on{min-height:118px;padding:12px 10px;grid-template-columns:60px 1fr}.screen.modes .mc-art{height:74px}.screen.modes .mc-name{font-size:20px}.screen.modes .mode-preview{height:150px}
 .screen.sel .sel-arena-hero img{aspect-ratio:16/8}.screen.sel .sel-ar{min-height:51px}
}
@media(max-width:1050px){.screen.modes .mode-layout{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:16px}.screen.modes .mode-grid{grid-template-columns:1fr}.screen.modes .modecard,.screen.modes .modecard.on{min-height:105px}.screen.modes .mc-art{height:70px}.screen.modes .mode-detail{position:sticky;top:0}}
@media(max-width:760px){
 .screen.menu .mn-stage{grid-template-columns:1fr}.screen.menu .mn-avatar{width:45px;height:45px;flex-basis:45px}.screen.menu .mn-xp{min-width:122px;height:13px}.screen.menu .mn-xp-lo,.screen.menu .mn-xp-hi{font-size:8px;line-height:11px}.screen.menu .mn-logo{max-height:120px}.screen.menu .mn-season{padding-top:95px}.screen.menu .mn-season-name{font-size:29px}
 .screen.modes .mode-layout{grid-template-columns:1fr;gap:20px}.screen.modes .mode-grid{grid-template-columns:1fr 1fr;gap:9px}.screen.modes .modecard,.screen.modes .modecard.on{grid-template-columns:1fr;grid-template-rows:62px auto 1fr;min-height:186px;padding:10px;row-gap:5px}.screen.modes .mc-art{grid-column:1;grid-row:1;height:65px}.screen.modes .mc-name,.screen.modes .mc-desc{grid-column:1}.screen.modes .mc-name{font-size:20px}.screen.modes .mc-desc{font-size:11px}.screen.modes .mode-detail{position:static}.screen.modes .mode-preview{height:170px}.screen.modes .modes-body{padding-inline:13px}.screen.modes .modes-foot .btn{min-width:0;width:100%;min-height:52px;font-size:22px}
 .screen.sel .sel-arena-hero img{aspect-ratio:16/8}.screen.sel .sel-arena-hero{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.screen.modes .modecard{transition:none}}
/* In the two-column tablet layout the arena rail spans the body. Keep its
   preview thumbnail-sized and make the body own overflow, never the screen. */
@media(min-width:761px) and (max-width:1180px){
 .screen.sel .sel-body{overflow-y:auto;grid-auto-rows:min-content;align-content:start}
 .screen.sel .sel-hero,.screen.sel .sel-roster{min-height:480px;max-height:570px}
 .screen.sel .sel-stage{min-height:160px}
 .screen.sel .sel-rail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;min-height:175px}
 .screen.sel .sel-rail>.sel-h{grid-column:1/-1;margin:0;padding-bottom:8px}
 .screen.sel .sel-arena-hero{margin:0;align-self:start}
 .screen.sel .sel-arena-hero img{aspect-ratio:16/10}
 .screen.sel .sel-arenas{min-width:0;min-height:0;align-items:flex-start;overflow:auto}
 .screen.sel .sel-ar{flex-basis:225px;min-height:112px}
}

/* Vibrant lagoon colors. Surface color carries the energy; highlights stay
   confined to button edges so neighboring controls remain distinct. */
.screen.menu .mn-btn,.screen.menu .mn-btn:nth-child(n+6),.screen.screen :is(.btn,.pill){background:linear-gradient(165deg,#147b9d,#144d7b);border-color:#092341;box-shadow:inset 0 2px 0 #81e6ff55,0 4px 0 #05152e,0 5px 0 #4288b470}
.screen.menu .mn-btn.is-hero,.screen.screen :is(.btn.play,.btn.primary){background:linear-gradient(170deg,#ffe894,#ffc737 80%);border-color:#654117;color:#382507;box-shadow:inset 0 3px 0 #fff2b8,0 4px 0 #a56917,0 5px 0 #101226}
.screen.screen .btn.danger{background:linear-gradient(165deg,#b23875,#742d62);border-color:#471c44}
.screen.screen .pill.on{background:linear-gradient(160deg,#157f9a,#2651a0);border-color:#ffda71;color:#fff2c1}
.screen.menu .mn-card{background:linear-gradient(145deg,#123e64f5,#111d45f5);border-color:#447fa4}
.screen.menu .mn-season{background:linear-gradient(0deg,#111d45 15%,#111d45ed 50%,#0c1d3833),url('../../assets/ui/arena/reef.jpg') center top/cover;border-color:#d2ae5e}
.screen.menu .mn-top,.screen.menu .mn-foot{background:linear-gradient(100deg,#09152df5,#112646f2)}
.screen.menu .mn-sc[data-act=customize]{background:#662553;border-color:#bc6198}
.screen.menu .mn-sc[data-act=challenges]{background:#105061;border-color:#37a6b3}
.screen.modes .modecard{background:linear-gradient(145deg,#173c5a,#11244a);border-color:#356f95}
.screen.modes .modecard.on{background:linear-gradient(145deg,#284f75,#2f2a68);border-color:#ffdb78}
.screen.modes .mode-detail{background:linear-gradient(145deg,#16375a,#111f43);border-color:#3d829e}
.screen.modes .mode-brief h3{color:#ffda65}
.screen.modes .mode-brief p,.screen.modes .mc-desc{color:#cfebf7}
.screen.sel .sel-panel{background:linear-gradient(145deg,#123d5cf5,#162443f7);border-color:#3d7494}
.screen.sel .sel-hero{background:radial-gradient(ellipse at 50% 28%,#64368166,transparent 68%),linear-gradient(145deg,#18455d,#24224e);border-color:#8e679a}
.screen.sel .sel-chip{background:radial-gradient(ellipse at 50% 25%,#276e8b80,transparent 75%),#142b51;border-color:#407593}
.screen.sel .sel-chip.on{background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--chip) 35%,#264b69),transparent 80%),#302856;border-color:var(--chip)}
.screen.sel .sel-ar{background:#142c4d;border-color:#3b6882}.screen.sel .sel-ar.on{background:#234871;border-color:var(--ar-tint)}
@media(hover:hover){.screen.menu .mn-btn:hover,.screen.screen :is(.btn,.pill):hover{background:linear-gradient(165deg,#208fae,#23649a)}.screen.menu .mn-btn.is-hero:hover,.screen.screen :is(.btn.play,.btn.primary):hover{background:linear-gradient(170deg,#fff0ac,#ffd45a)}.screen.modes .modecard:hover{background:#245777}.screen.modes .modecard.on:hover{background:#3a497a}}