@font-face{font-family:BoldPixels;src:url('assets/boldpixels.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--navy:#050d18;--panel:#0a1929;--ink:#edf8ff;--muted:#94adc3;--cyan:#73e0ff;--line:rgba(106,183,226,.19);font-family:BoldPixels,monospace;font-synthesis:none;font-size:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--ink);font-size:1.75rem;line-height:1.2;min-width:280px}
button,input,select{font:inherit;color:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
a{color:inherit;text-decoration:none}
button{background:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
img{display:block;max-width:100%;object-fit:contain}
h1,h2,h3,p{margin:0;font-weight:400}
input,button,select{border-radius:0}
::selection{background:#73e0ff;color:#061726}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.skip{position:fixed;z-index:100;top:-100px;left:20px;padding:12px;background:#73e0ff;color:#08182a}
.skip:focus{top:12px}
#main:focus{outline:none}
.ocean{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 88% 12%,#0c345366,transparent 48%),radial-gradient(ellipse at 14% 90%,#08466635,transparent 48%),linear-gradient(#071523,#040c17)}
.rays{position:absolute;inset:-80% -20% -10%;background:repeating-linear-gradient(110deg,transparent 0 220px,#73deff09 240px 280px,transparent 310px 460px);transform:rotate(-8deg);filter:blur(18px);animation:water-light 22s ease-in-out infinite alternate}
.grid{position:absolute;inset:0;background-image:linear-gradient(#6895ac06 1px,transparent 1px),linear-gradient(90deg,#6895ac06 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(transparent,#000)}
#bubbles{position:absolute;inset:0}
.bubble{position:absolute;bottom:-60px;left:var(--x);width:var(--s);opacity:0;animation:rise var(--duration) linear infinite;animation-delay:var(--delay)}
@keyframes rise{0%{opacity:0;transform:translate3d(0,0,0)}
15%,85%{opacity:var(--alpha)}
100%{opacity:0;transform:translate3d(35px,-110vh,0)}}
.shell{position:relative;z-index:1;max-width:1500px;margin:auto;padding-inline:clamp(22px,4.4vw,72px);min-height:100svh;display:flex;flex-direction:column}
.header{height:108px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:16px}
.brand img{filter:drop-shadow(0 0 10px #56cffa30);flex-shrink:0}
.wordmark{font-size:3.3rem;line-height:1;white-space:nowrap}
.plus{display:inline-block;background:linear-gradient(120deg,#fff 10%,#94eaff 30%,#278cfa 50%,#a7edff 70%,#fff 90%);background-size:250% 250%;color:#a4eaff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:plus-flow 4s ease-in-out infinite;filter:drop-shadow(0 0 10px #78ddff55)}
@keyframes plus-flow{0%,100%{background-position:0 50%}
50%{background-position:100% 50%}}
.wordmark .plus{margin-left:2px;font-size:1.18em}
.header-end{display:flex;align-items:center;gap:22px}
.network-link{color:#a2bace;font-size:1.65rem;white-space:nowrap}
.network-link span{color:#73dafa;margin-left:8px}
.icon-button{border:1px solid #466071;width:44px;height:44px;font-size:2.1rem}
.header nav{display:flex;gap:3px;padding:4px;background:#081724;border:2px solid #294655;border-top-color:#527284;box-shadow:0 3px 0 #02070d}
.header nav button{border:0;color:#96acc0;padding:10px 18px;font-size:1.7rem;white-space:nowrap}
.header nav button:hover{color:white;background:#152c3d}
.header nav button[aria-current=page]{background:#15384d;color:#c8f5ff;box-shadow:inset 0 2px #3d697f,inset 0 -2px #0c2537}
main{flex:1}
.login{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-areas:"heading art" "form art";align-content:center;column-gap:clamp(28px,4vw,64px);min-height:calc(100svh - 190px);padding-block:52px 64px}
.login-content{display:contents}
.login-heading{grid-area:heading;max-width:480px;min-width:0}
.eyebrow{font-size:1.35rem;letter-spacing:1.7px;color:#7adffb;display:flex;align-items:center;gap:9px}
.mini-plus{font-size:1.3em;color:#c4f6ff}
.login h1{font-size:clamp(4.2rem,5.5vw,5.6rem);line-height:.94;letter-spacing:-.5px;margin:20px 0 18px}
.ice{background:linear-gradient(#d1f8ff,#7be6ff 50%,#369bcf);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:#9db4c9;font-size:1.95rem;line-height:1.15}
.login-box{grid-area:form;width:100%;max-width:480px;min-width:0;align-self:start;transition:border-color .25s,box-shadow .25s;background:linear-gradient(135deg,#0c2337ef,#091726e8);border:1px solid #365469;border-top:2px solid #52798f;padding:25px 28px 20px;margin-top:30px;box-shadow:0 8px 0 #01071166,0 22px 65px #0003;position:relative}
.login-box:before,.profile-card:before{content:'';position:absolute;top:-2px;left:28px;height:2px;width:60px;background:#94e6ff;box-shadow:0 0 18px #73dfff88}
.step{display:flex;align-items:center;gap:13px}
.step-number{height:30px;width:30px;flex-shrink:0;background:#163a50;border:1px solid #2f6078;color:#aceeff;display:grid;place-items:center;font-size:1.7rem}
.step h2,.step label{font-size:1.8rem}
.step p{font-size:1.4rem;color:#8da8bc;margin-top:3px}
.command{display:flex;align-items:center;justify-content:space-between;width:100%;margin:13px 0 24px;background:#04111e;border:1px solid #2a455a;padding:9px 14px;gap:10px}
.command:hover{border-color:#7ed8ef}
.command code{font:inherit;color:#8ee6ff;font-size:2rem}
.command>span{color:#859fb5;font-size:1.35rem}
.command>span span{margin-left:9px;color:#b1d0e1}
#login-code{transition:border-color .2s,box-shadow .2s,background .2s;display:block;width:100%;margin:14px 0 17px;background:#061320;border:2px solid #345267;border-bottom-color:#486c80;padding:12px 16px;text-align:center;color:#b1f1ff;letter-spacing:7px;font-size:2.3rem;line-height:1.15;min-height:59px}
#login-code::placeholder{color:#59768b;letter-spacing:5px}
.pixel-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:11px 20px 10px;border:2px solid #36556b;border-top-color:#718e9e;border-left-color:#597788;background:#112b3e;box-shadow:0 4px 0 #02070c;min-height:47px;font-size:1.7rem;line-height:1.12;transition:transform .18s,background .18s;white-space:nowrap}
.pixel-button:hover:not(:disabled){background:#1a3b50;transform:translateY(-2px)}
.pixel-button:active:not(:disabled){transform:translateY(2px)}
.pixel-button.primary{color:#052339;background:#86e5fb;border-color:#469fbd;border-left-color:#b6f4ff;border-top-color:#d1f9ff;box-shadow:0 5px 0 #104b68,0 8px 25px #27b2e019}
.pixel-button.primary:hover:not(:disabled){background:#b4f1ff}
.full{width:100%;justify-content:space-between;white-space:normal;text-align:left;gap:12px}
.login-note{font-size:1.28rem;text-align:center;color:#7794aa;margin-top:17px}
.text-button{border:0;padding:4px 0;color:#a7bed1;font-size:1.55rem;display:inline-flex;align-items:center;gap:12px}
.text-button:hover{color:#fff}
/* The scene owns its grid area. Every image and its motion stays inside that area. */
.login-art{grid-area:art;position:relative;width:100%;max-width:560px;aspect-ratio:1 / 1.18;isolation:isolate;min-width:0;justify-self:center;align-self:center;pointer-events:none}
.art-scene{position:absolute;inset:0;transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0);transition:transform 1s cubic-bezier(.2,.65,.3,1)}
.art-glow{position:absolute;inset:8% 3% 12%;background:radial-gradient(ellipse,#0c91bc4d,transparent 68%);filter:blur(32px);animation:scene-glow 8s ease-in-out infinite}
.main-logo{position:absolute;z-index:1;width:80%;height:auto;aspect-ratio:1;top:6%;left:5%;object-fit:contain;filter:drop-shadow(0 24px 24px #0008) drop-shadow(0 0 18px #3cc4fa33);animation:float-logo 7s ease-in-out infinite}
.art-plus{position:absolute;z-index:3;top:7%;right:5%;font-size:clamp(90px,12vw,165px);line-height:1;transform:rotate(8deg)}
.art-orbit{position:absolute;border:1px solid #80d9ff24;border-radius:50%;inset:8% 6% 18%;transform:rotate(-30deg) scaleY(.56);box-shadow:0 0 18px #72cfff08,inset 0 0 18px #72cfff08}
.orbit-two{inset:12% 6% 14%;transform:rotate(38deg) scaleY(.6);border-style:dashed;border-color:#80d9ff17}
.axo-glow{position:absolute;width:38%;height:9%;bottom:7%;right:8%;border-radius:50%;background:radial-gradient(ellipse,#82d8ff30,transparent 70%);filter:blur(10px);animation:scene-glow 6s ease-in-out infinite reverse}
.login-axo{position:absolute;z-index:4;width:44%;height:auto;right:7%;bottom:8%;object-fit:contain;filter:drop-shadow(0 13px 15px #010811bb) drop-shadow(0 0 12px #ff8cce18);animation:float-axo 6s ease-in-out infinite}
.art-label{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;font-size:1.15rem;letter-spacing:1.6px;color:#86b8d2}
.label-top{top:1%;left:8%}
.label-top .muted{font-size:1rem}
.label-bottom{bottom:3%;left:9%}
.tiny-spark{font-size:1.8rem;color:#87d7f4}
.art-spark{position:absolute;width:5px;height:5px;background:#c5f5ff;box-shadow:0 0 14px #70dbff99;animation:spark-drift 6s ease-in-out infinite}
.spark-one{top:23%;right:5%}
.spark-two{top:67%;left:8%;animation-delay:-2s;width:3px;height:3px}
.spark-three{bottom:7%;left:39%;animation-delay:-4s;width:4px;height:4px}
@keyframes float-logo{0%,100%{transform:translate3d(0,0,0) rotate(-1.5deg)}
50%{transform:translate3d(0,-2%,0) rotate(1deg)}}
@keyframes float-axo{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}
50%{transform:translate3d(-4%,-7%,0) rotate(1deg)}}
@keyframes scene-glow{0%,100%{opacity:.65;transform:scale(.96)}
50%{opacity:1;transform:scale(1.04)}}
@keyframes spark-drift{0%,100%{opacity:.25;transform:translateY(0) rotate(45deg)}
50%{opacity:.8;transform:translateY(-12px) rotate(135deg)}}
@keyframes water-light{from{transform:translateX(-2%) rotate(-8deg);opacity:.55}
to{transform:translateX(2%) rotate(-4deg);opacity:1}}

/* A four-second welcome, followed by the login. No page controls sit above it. */
.intro{position:fixed;z-index:50;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 48%,#103a56 0,#081c2e 35%,#050e1b 72%);pointer-events:auto;animation:intro-out 4.2s ease forwards}
.intro:before{content:'';position:absolute;width:min(74vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#4ac9ff12,transparent 65%);animation:intro-halo 4.2s ease both}
.intro .wordmark{position:relative;font-size:clamp(6.4rem,18vw,10rem);line-height:.9;animation:intro-mark 1.25s cubic-bezier(.15,.7,.2,1) both;text-shadow:0 0 32px #56cbff33,0 0 90px #56cbff33}
.intro-kicker{position:relative;font-size:clamp(.9rem,3vw,1.25rem);letter-spacing:3px;color:#8bb5ce;margin-bottom:3px;animation:intro-detail 1s .2s ease both}
.intro-tagline{position:relative;font-size:clamp(1.5rem,4vw,1.85rem);letter-spacing:1.4px;color:#93bfd8;animation:intro-detail 1s .6s ease both}
.intro-line{position:relative;height:2px;width:140px;background:#80d9ff19;margin-top:16px}
.intro-line span{display:block;height:100%;background:linear-gradient(90deg,#328fc7,#c6f6ff);box-shadow:0 0 18px #73ddff99;transform-origin:left;animation:intro-line 3.6s cubic-bezier(.2,.55,.25,1) both}
.intro-ripple{position:absolute;width:min(68vw,460px);aspect-ratio:1;border:1px solid #90dfff20;border-radius:50%;animation:intro-ripple 3.6s .1s ease-out both}
.ripple-two{width:min(82vw,650px);animation-delay:.55s;border-color:#90dfff12}
@keyframes intro-mark{from{opacity:0;transform:translateY(14px) scale(.88);filter:blur(5px)}
to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes intro-detail{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}}
@keyframes intro-line{from{transform:scaleX(0)}
to{transform:scaleX(1)}}
@keyframes intro-ripple{0%{opacity:0;transform:scale(.66)}
25%{opacity:1}
100%{opacity:0;transform:scale(1.5)}}
@keyframes intro-halo{0%{opacity:0;transform:scale(.75)}
35%,80%{opacity:1}
100%{opacity:0;transform:scale(1.2)}}
@keyframes intro-out{0%,82%{opacity:1;visibility:visible}
100%{opacity:0;visibility:hidden}}
.shell.intro-pending{opacity:0}
.is-ready .header{animation:page-arrive .6s ease both}
.is-ready .login-heading{animation:page-arrive .65s .05s ease both}
.is-ready .login-box{animation:page-arrive .7s .12s ease both}
.is-ready .login-art{animation:page-arrive .9s .18s ease both}
@keyframes page-arrive{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}}

/* Quiet feedback, with the same icy light on every interactive surface. */
.login-box:focus-within{border-color:#74bad4;box-shadow:0 8px 0 #01071166,0 22px 65px #0003,0 0 36px #45b8e312}
#login-code:focus{border-color:#86dff7;background:#081b2b;box-shadow:0 0 0 3px #73e0ff0d,inset 0 0 22px #3ab8ee08}
.command{transition:background .2s,border-color .2s}
.command:hover{background:#081c2b}
.command>span{transition:color .2s}
.command:hover>span{color:#bcefff}
.pixel-button.primary{position:relative;overflow:hidden;isolation:isolate}
.pixel-button.primary:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff6 50%,transparent 70%);transform:translateX(-150%);pointer-events:none;animation:button-light 7s ease-in-out infinite}
@keyframes button-light{0%,76%{transform:translateX(-150%)}
90%,100%{transform:translateX(150%)}}
.feature-link,.mascot-card{transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.feature-link:hover,.mascot-card:hover{box-shadow:0 0 25px #54cfff0b}
.feature-arrow{transition:transform .2s}
.feature-link:hover .feature-arrow{transform:translateX(4px)}
.view-panel{animation:page-arrive .35s ease both}

.profile-view{padding-top:28px;padding-bottom:58px}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:17px 0 25px}
.page-title h1{font-size:3.9rem;line-height:1;margin-top:8px}
.page-title h1 .plus{margin-left:7px}
.sync-status{font-size:1.25rem;color:#85a7bd;max-width:280px;text-align:right}
.profile-card{position:relative;min-height:235px;display:flex;align-items:center;gap:27px;border:1px solid #3b5d73;border-top:2px solid #537b91;background:radial-gradient(ellipse at 18% 55%,#12618238,transparent 48%),linear-gradient(110deg,#0c263cec,#0b1929f2);padding:22px 36px;box-shadow:0 8px 0 #01061055;isolation:isolate}
.avatar-stage{position:relative;width:238px;height:202px;flex:0 0 238px;display:grid;place-items:center}
.avatar-ring{position:absolute;width:165px;height:165px;border-radius:50%;border:1px solid #76cceb26;box-shadow:0 0 0 22px #75dcff03,0 0 45px #3caada22}
.avatar-core{height:100px;width:100px;transform:rotate(-5deg);border:3px solid #7edfff;border-bottom-color:#2480ac;background:#0d2439;box-shadow:6px 7px 0 #061523,0 0 25px #5bd5ff33;position:relative}
.avatar-core canvas{height:100%;width:100%;image-rendering:pixelated;display:block}
#skin-fallback{position:absolute;inset:0;height:100%;width:100%}
.orbit-pet{position:absolute;width:96px;left:var(--left);top:var(--top);z-index:3;animation:pet-float 5s ease-in-out infinite;animation-delay:var(--delay);pointer-events:none}
.orbit-pet img{width:100%;filter:var(--pet-filter) drop-shadow(0 8px 7px #0009);transform:scaleX(var(--flip,1))}
.avatar-stage[data-motion=off] .orbit-pet{animation:none}
@keyframes pet-float{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}
50%{transform:translate3d(7px,-12px,0) rotate(5deg)}}
.player-identity{min-width:0;flex:1}
.player-identity h2{font-size:4rem;margin:7px 0 13px;overflow-wrap:anywhere;line-height:1}
.identity-line{display:flex;align-items:center;flex-wrap:wrap;gap:15px;font-size:1.4rem}
.rank-badge{display:inline-block;border:1px solid #62788a;background:#15314a;color:#c9edff;font-size:1.6rem;padding:5px 13px;line-height:1}
.profile-action{display:flex;flex-direction:column;gap:4px;text-align:right}
.profile-action>.muted{font-size:1.3rem}
.profile-action>span:nth-child(2){font-size:1.6rem;color:#b8dcec;max-width:250px}
.profile-action .pixel-button{margin-top:15px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:34px 0 18px}
.section-heading h2{font-size:2.15rem}
.section-heading>.muted{font-size:1.35rem}
.section-heading p{font-size:1.5rem;margin-top:5px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.game-card{min-width:0;position:relative;overflow:hidden;background:linear-gradient(160deg,#10283fe8,#0a1727f0 60%);border:1px solid #2c4a61;box-shadow:0 5px 0 #01081166;transition:border-color .2s,transform .2s}
.game-card:hover{transform:translateY(-4px);border-color:#608ba3;box-shadow:0 5px 0 #01081166,0 0 32px #55cfff0d}
.game-art{height:172px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 65%,#19699a3b,transparent 67%)}
.game-art:after{content:'';position:absolute;bottom:12px;left:30%;right:30%;height:5px;background:#66ceff0d;box-shadow:0 0 25px #5ccaff22}
.game-art img{height:168px;width:225px;object-fit:contain;filter:drop-shadow(0 10px 13px #0005);animation:item-bob 7s ease-in-out infinite}
.game-card:nth-child(2) .game-art{background:radial-gradient(ellipse at 50% 65%,#4074c33b,transparent 67%)}
.game-card:nth-child(2) .game-art img{animation-delay:-2s}
.game-card:nth-child(3) .game-art img{animation-delay:-4s}
.game-body{padding:0 23px 23px}
.game-body h3{font-size:2.5rem;line-height:1}
.game-league{margin-top:8px;color:#92dffc;font-size:1.65rem;display:flex;align-items:center;gap:8px}
.league-diamond{height:8px;width:8px;background:currentColor;transform:rotate(45deg);display:inline-block;margin-right:1px}
.points-row{display:flex;align-items:baseline;gap:9px;margin:20px 0 16px}
.points-row strong{font-size:3.8rem;font-weight:400;line-height:.8;letter-spacing:-1px}
.points-row span{color:#8babc1;font-size:1.5rem}
.progress-track{height:7px;border:1px solid #2b5069;background:#041221;padding:1px}
.progress-fill{height:100%;background:linear-gradient(90deg,#3393cb,#a4edff);box-shadow:0 0 12px #56d3ff20;transition:width .5s}
.progress-copy{font-size:1.3rem;color:#829fb5;margin-top:8px;min-height:31px}
.card-meta{display:flex;justify-content:space-between;gap:8px;margin-top:17px;padding-top:14px;border-top:1px solid #284257;font-size:1.35rem;color:#91aec2}
.card-meta b{font-weight:400;color:#cee8f7}
.unavailable{min-height:131px;padding-top:28px;color:#8ca8bd;font-size:1.65rem}
.unavailable small{display:block;font-size:1.35rem;margin-top:8px}
@keyframes item-bob{0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-7px) rotate(2deg)}}
.overview-bottom{display:grid;grid-template-columns:1fr 1fr;gap:21px;margin-top:26px}
.feature-link{display:flex;align-items:center;text-align:left;gap:15px;border:1px solid #294356;background:#0b2030bb;padding:15px 24px;min-height:108px}
.feature-link:hover{border-color:#6396ae;background:#102b3c}
.feature-link>img{width:103px;height:70px;margin-left:-11px;transform:rotate(-8deg);filter:drop-shadow(0 5px 8px #0005)}
.feature-link strong{font-weight:400;display:block;color:#daedfa;font-size:1.9rem}
.feature-link small{display:block;color:#86a7be;font-size:1.4rem;margin-top:4px}
.feature-arrow{margin-left:auto;color:#8fdbf8;font-size:2rem}
.shield-symbol{font-size:3.8rem;color:#76c5e1;width:60px;text-align:center}
.selection-count{font-size:1.8rem;color:#a1eaff;border:1px solid #385c74;background:#0b253b;padding:6px 16px}
.mascot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mascot-card{position:relative;text-align:left;border:1px solid #314c64;background:linear-gradient(#11283d,#0a192b);padding:18px 20px;transition:border-color .2s,background .2s;min-width:0}
.mascot-card[aria-pressed=true]{border-color:#8fe7ff;background:linear-gradient(#163d55,#0c233a);box-shadow:inset 0 0 0 1px #2b6588}
.mascot-card:hover{border-color:#7fcce9}
.mascot-card .check{position:absolute;right:15px;top:13px;height:21px;width:21px;border:1px solid #517086;color:#a4f0ff;text-align:center;font-size:1.3rem}
.mascot-card img{width:100%;aspect-ratio:1.5;object-fit:contain;filter:var(--pet-filter) drop-shadow(0 9px 10px #0006);padding:12px 0;transition:transform .3s}
.mascot-card:hover img{transform:translateY(-7px) rotate(-6deg)}
.mascot-card strong{font-size:2rem;font-weight:400}
.mascot-card small{display:block;color:#91b0c7;font-size:1.4rem;margin-top:4px}
.customization-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px}
.motion-toggle{display:flex;align-items:center;gap:11px;color:#a5c4d9;font-size:1.55rem}
.motion-toggle input{accent-color:#8ce1f9;width:20px;height:20px}
.filter-label{font-size:1.35rem;color:#8eb0c6;display:flex;align-items:center;gap:12px}
.filter-label select{border:1px solid #3a5a71;background:#0c2337;padding:8px 30px 8px 12px;font-size:1.55rem}
.source-note{font-size:1.4rem;color:#8faabf;margin-bottom:18px}
.empty-state{border:1px solid #2c4c61;padding:44px 28px;text-align:center;background:#0c2133a6}
.empty-state .empty-icon{display:block;font-size:3.4rem;color:#87d7ed;line-height:1}
.empty-state h3{font-size:2.3rem;margin:10px 0 8px}
.empty-state p{font-size:1.6rem;color:#8daac0;max-width:550px;margin:auto}
.ban-entry{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:23px;background:#0d2236;border:1px solid #2d4b63;margin-bottom:12px}
.ban-date{color:#94b4ca;font-size:1.4rem}
.ban-entry h3{font-size:1.95rem;overflow-wrap:anywhere}
.ban-entry p{font-size:1.45rem;color:#89a7bd;margin-top:6px}
.ban-status{font-size:1.35rem;border:1px solid #416379;color:#aecadb;padding:5px 11px;height:max-content}
.ban-status.active{border-color:#925966;color:#f7b6c4;background:#8d294222}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:80px;padding-block:20px;border-top:1px solid var(--line);color:#738fa6;font-size:1.4rem}
.footer>span:first-child{color:#aecadd}
.footer>span:first-child>.plus{font-size:1.3em}
.footer-divider{margin-inline:15px;color:#426079}
.footer-motto{font-style:italic;color:#679ebc}
.footer .text-button{font-size:1.4rem}
.form-error{color:#ffb3c7;font-size:1.5rem;margin:0 0 17px}
.toast{position:fixed;z-index:90;bottom:28px;left:50%;transform:translateX(-50%);background:#163c52;border:1px solid #70cde9;box-shadow:0 8px 24px #0008;color:#d1f6ff;font-size:1.7rem;padding:13px 25px;text-align:center;max-width:calc(100% - 36px);width:max-content}
.noscript{position:fixed;inset:auto 20px 20px;background:#18394c;padding:20px;z-index:100}
@media(max-width:1100px){.header{gap:15px}
.header nav button{padding-inline:12px;font-size:1.55rem}
.brand{gap:8px}
.brand img{width:48px;height:48px}
.wordmark{font-size:3rem}
.network-link{font-size:1.4rem}
.profile-card{padding-inline:20px;gap:12px}
.avatar-stage{width:196px;flex-basis:196px}
.player-identity h2{font-size:3.1rem}
.profile-action{max-width:200px}
.profile-action .pixel-button{font-size:1.5rem;padding-inline:14px}
.game-body{padding-inline:18px}
.game-body h3{font-size:2.1rem}
.feature-link{padding:15px;gap:10px}
.feature-link strong{font-size:1.7rem}
.mascot-grid{gap:14px}
.mascot-card{padding-inline:16px}}
@media(max-width:800px){.shell{padding-inline:24px}
.header{height:auto;min-height:91px;flex-wrap:wrap;padding-block:16px;gap:14px}
.header nav{order:3;width:100%;justify-content:stretch}
.header nav button{flex:1;padding:9px 5px;font-size:1.6rem}
.header-end{margin-left:auto}
.profile-card{flex-wrap:wrap;padding:18px 20px}
.avatar-stage{width:190px;flex-basis:190px;height:186px}
.profile-action{max-width:none;flex:1 1 100%;border-top:1px solid #31546a;padding-top:14px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:13px}
.profile-action>.muted{display:none}
.profile-action>span:nth-child(2){max-width:55%}
.profile-action .pixel-button{margin:0}
.stats-grid{gap:13px}
.game-art{height:140px}
.game-art img{height:135px;width:100%}
.game-body{padding:0 15px 17px}
.game-body h3{font-size:1.85rem}
.points-row strong{font-size:3rem}
.game-league{font-size:1.5rem}
.card-meta{flex-direction:column;gap:5px}
.overview-bottom{gap:13px}
.feature-link>img{width:78px;height:62px}
.feature-link small{font-size:1.3rem}
.feature-link strong{font-size:1.55rem}
.shield-symbol{width:35px;font-size:3rem}
.mascot-grid{grid-template-columns:1fr 1fr}
.footer-motto{display:none}}
@media(max-width:600px){body{font-size:1.6rem}
.shell{padding-inline:20px}
.header{min-height:80px}
.brand img{height:44px;width:44px}
.wordmark{font-size:2.8rem}
.header-end{gap:13px}
.network-link{font-size:1.3rem}
.step h2,.step label{font-size:1.7rem}
#login-code{letter-spacing:5px;font-size:2.1rem}
.login-note{font-size:1.2rem}
.profile-view{padding-top:20px;padding-bottom:40px}
.page-title{margin-top:6px;align-items:flex-start;gap:10px}
.page-title h1{font-size:3.25rem}
.page-title .eyebrow{font-size:1.1rem;letter-spacing:1.1px}
.sync-status{font-size:1.15rem;max-width:126px;margin-top:10px}
.profile-card{gap:0;justify-content:center;padding:18px 14px}
.avatar-stage{height:165px;width:187px;flex-basis:187px;margin-top:-9px}
.avatar-ring{width:138px;height:138px}
.avatar-core{width:91px;height:91px}
.orbit-pet{width:81px}
.player-identity{flex:1;min-width:135px}
.player-identity .eyebrow{font-size:1.05rem;letter-spacing:1px}
.player-identity h2{font-size:2.5rem;margin-top:7px}
.rank-badge{font-size:1.4rem;padding:5px 9px}
.identity-line{gap:8px;font-size:1.15rem;flex-direction:column;align-items:flex-start}
.profile-action{margin-top:8px;gap:8px;padding-top:13px}
.profile-action>span:nth-child(2){font-size:1.3rem;max-width:48%}
.profile-action .pixel-button{font-size:1.4rem;gap:8px;padding-inline:11px;min-height:42px}
.section-heading{margin-top:29px;gap:12px}
.section-heading h2{font-size:1.9rem}
.section-heading>.muted{font-size:1.2rem}
.section-heading p{font-size:1.35rem}
.stats-grid{grid-template-columns:1fr;gap:18px}
.game-card{display:grid;grid-template-columns:33% 67%;align-items:center}
.game-art{height:180px}
.game-art img{width:145%;max-width:145%;height:150px;margin-left:8px}
.game-body{padding:23px 20px 20px 8px;z-index:1}
.game-body h3{font-size:2.2rem}
.game-league{font-size:1.5rem;margin-top:5px}
.points-row{margin:17px 0 13px}
.points-row strong{font-size:3.4rem}
.points-row span{font-size:1.3rem}
.progress-copy{font-size:1.2rem;min-height:28px}
.card-meta{flex-direction:row;font-size:1.18rem;margin-top:8px;padding-top:11px}
.overview-bottom{grid-template-columns:1fr;margin-top:20px;gap:14px}
.feature-link{min-height:91px;padding:12px 20px;gap:15px}
.feature-link>img{width:87px;height:65px}
.feature-link strong{font-size:1.8rem}
.feature-link small{font-size:1.3rem}
.shield-symbol{width:66px}
.mascot-card{padding:16px}
.mascot-card strong{font-size:1.9rem}
.mascot-card small{font-size:1.3rem}
.customization-footer{flex-direction:column;align-items:stretch;gap:21px}
.motion-toggle{font-size:1.4rem}
.selection-count{font-size:1.5rem;padding-inline:11px}
.filter-label{font-size:1.1rem;flex-direction:column;align-items:flex-end;gap:3px}
.filter-label select{font-size:1.3rem;padding:6px 10px}
.source-note{font-size:1.3rem}
.ban-entry{grid-template-columns:1fr auto;gap:9px;padding:18px}
.ban-date{grid-column:1/-1;font-size:1.25rem}
.ban-entry h3{font-size:1.75rem}
.ban-entry p{font-size:1.3rem}
.ban-status{font-size:1.2rem}
.empty-state{padding:35px 20px}
.empty-state h3{font-size:2rem}
.empty-state p{font-size:1.5rem}
.footer{min-height:80px;flex-wrap:wrap;gap:10px;font-size:1.2rem}
.footer .text-button{font-size:1.2rem}
.footer-divider{margin-inline:8px}}
@media(max-width:370px){.shell{padding-inline:15px}
.network-link{font-size:1.2rem}
.player-identity{text-align:center;flex:1 1 100%}
.player-identity .eyebrow,.identity-line{justify-content:center;align-items:center}
.identity-line{flex-direction:row;margin-bottom:13px}
.avatar-stage{margin-top:-5px}
.profile-action>span:nth-child(2){font-size:1.2rem}
.profile-action .pixel-button{font-size:1.25rem}
.game-body{padding-right:16px}
.card-meta{flex-direction:column}
.game-body h3{font-size:2rem}}

/* Tablet: a shared hero row and a full-width form. Small phones: a dedicated scene row. */
@media(max-width:900px){
  .login{max-width:600px;margin-inline:auto;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);grid-template-areas:"heading art" "form form";column-gap:20px;padding-block:40px 54px}
  .login h1{font-size:clamp(3.7rem,7.5vw,4.6rem)}
  .login-box{max-width:none;margin-top:28px;padding:25px 28px}
  .login-art{aspect-ratio:1 / 1.18}
.art-label{display:none}
  .art-plus{font-size:clamp(68px,10vw,100px)}
}
@media(max-width:600px){
  .login{max-width:480px;column-gap:12px;padding-block:30px 42px}
  .login-heading>.eyebrow{font-size:1.15rem;letter-spacing:1px}
  .login h1{font-size:3.7rem;margin-block:16px}
  .lead{font-size:1.7rem;line-height:1.2}
  .login-box{padding:23px;margin-top:25px}
  .art-plus{font-size:68px}
}
@media(max-width:420px){
  .login{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "art" "form";padding-top:25px}
  .login-heading{text-align:center;justify-self:center;width:100%}
  .login-heading>.eyebrow{justify-content:center}
  .login h1{font-size:3.5rem;margin-block:14px}
  .login-art{width:min(100%,200px);margin-top:10px;aspect-ratio:1 / 1.12}
  .login-box{margin-top:14px}
  .art-plus{font-size:68px}
}
@media(max-width:370px){.login-box{padding:21px 17px}
.login h1{font-size:3.3rem}
.lead{font-size:1.6rem}
.intro-kicker{letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
.intro{display:none}
#bubbles{display:none}}
body[data-suspended=true] *{animation-play-state:paused!important}