/* Beveled game controls; the surrounding illustration stays visible. */
.lobby-page{min-height:100dvh;background:#0d1220;color:#f2f4fc;isolation:isolate}
.lobby-page::before{content:'';position:fixed;inset:0;z-index:-2;background-image:url('/vanguard/assets/lobby/v-aichi.webp'),url('/vanguard/assets/lobby/v-kai.webp'),url('/vanguard/assets/lobby/v-ren.webp'),url('/vanguard/assets/lobby/v-space.webp');background-size:auto min(84dvh,839px),auto min(90dvh,974px),auto min(90dvh,1021px),cover;background-position:left 14% bottom,left 1% bottom,right 1% bottom,center;background-repeat:no-repeat;pointer-events:none}
.lobby-page::after{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#0d142bd9 0,#0b11264a 70%),linear-gradient(0deg,#090e20ed,transparent 85%);pointer-events:none}
.lobby-page:not([data-page=lobby])::after{background:linear-gradient(0deg,#0d1220e8,#101322ad)}
.lobby-page .topbar{background:#0c142866;border-bottom-color:#ffffff14;backdrop-filter:blur(8px)}
.lobby-page .topbar button{border-radius:4px;font-size:12px;background:#0e1736b0;border-color:#bed0f044}
.lobby-page .topbar .language button[aria-pressed=true]{background:#ef8272;color:#171a2b}
.lobby-page[data-page=lobby] .tabs{display:none}
.lobby-page[data-page=lobby] #content{display:grid;place-items:center;min-height:calc(100dvh - 70px);max-width:none;padding:28px 20px}
.game-hub{width:min(540px,100%);padding:0 12px;background:none;border:0;box-shadow:none}
.hub-title{display:flex;align-items:center;gap:14px;padding:0 4px 19px;border-bottom:1px solid #c0d2ef47;margin-bottom:19px}
.hub-title .eyebrow{font-size:10px;font-weight:600;letter-spacing:1.5px;color:#c1cee9}.hub-title h1{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:0;margin:5px 0 0;color:#fff;text-shadow:0 2px 5px #0008}
.hub-mark{font-size:48px;line-height:1;font-weight:700;color:#ff8d7b;font-style:italic;text-shadow:3px 2px #301529}
.hub-series{font-size:9px;letter-spacing:1.5px;color:#a6b6d3;margin-left:auto;border-left:2px solid #ee8a7855;padding-left:10px;white-space:nowrap}
.hub-group{margin-top:17px}.hub-group h2{font-size:11px;font-weight:600;letter-spacing:.5px;margin:0 4px 7px;color:#aabbd6;display:flex;align-items:center;gap:12px}.hub-group h2::after{content:'';height:1px;background:#c3d6ff26;flex:1}
.hub-grid,.hub-play{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hub-play{grid-template-columns:1.35fr 1fr}
.hub-button{--bevel:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-width:0;min-height:77px;width:100%;border:0;border-radius:0;background:none!important;padding:13px 16px;color:#f4f7ff;text-align:left;transition:transform .14s,color .14s;filter:drop-shadow(0 3px 2px #0004)}
.hub-button::before,.hub-button::after{content:'';position:absolute;clip-path:var(--bevel);pointer-events:none;z-index:-1;transition:background .14s}
.hub-button::before{inset:0;background:linear-gradient(120deg,#bbd0f575,#52698a55)}
.hub-button::after{inset:1px;background:linear-gradient(115deg,#233753f2,#141e36ee);border-left:3px solid #90a7cb55}
.hub-button:hover{transform:translateX(3px)}.hub-button:hover::before{background:#d2e5ff}.hub-button:hover::after{background:linear-gradient(115deg,#344d6bf5,#1d2b4bee)}.hub-button:active{transform:translateY(2px) scale(.98)}.hub-button:focus-visible,.deck-pick:focus-visible{outline:3px solid #ffb19f;outline-offset:4px}
.hub-button span{display:flex;flex-direction:column;gap:4px;min-width:0}.hub-button b{font-size:17px;line-height:1.35;font-weight:700}.hub-button small{font-size:10px;font-weight:400;color:#aebfd9;line-height:1.4}
.hub-icon{width:30px;height:38px;display:grid;place-items:center;flex:none;font-style:normal;color:#adc5e8}.hub-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.hub-icon img{height:40px;width:29px;object-fit:contain;transform:rotate(-9deg);filter:drop-shadow(2px 2px 1px #0006)}.hub-cards{position:relative}.hub-cards::before{content:'';position:absolute;width:23px;height:33px;background:#457196;border:1px solid #9fbcdf;transform:translate(-3px,-2px) rotate(-20deg);z-index:-1}
.hub-button>svg{width:12px;height:18px;margin-left:auto;opacity:.55;flex:none}
.hub-primary{color:#fff}.hub-primary::before{background:linear-gradient(110deg,#ffd8a1,#fb8373)}.hub-primary::after{border-left-color:#ffd2ae;background:linear-gradient(120deg,#c24e3bf5,#85273ff5)}.hub-primary b{font-size:20px}.hub-primary small,.hub-primary .hub-icon{color:#ffe2d3}.hub-primary:hover::after{background:linear-gradient(120deg,#df6247,#a63749)}
.hub-booster::after{border-left-color:#ffc39977}.hub-booster .hub-icon img{width:24px;height:43px}
.hub-active{margin-top:22px;display:flex;align-items:center;gap:12px;border-top:1px solid #d3e1ff26;padding:15px 4px 0}.hub-active>img{width:41px;height:58px;object-fit:contain;transform:rotate(-6deg);filter:drop-shadow(0 3px 3px #0006)}.hub-active>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.hub-active small{font-size:10px;color:#acbdd9}.hub-active b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-active span{font-size:11px;color:#b2bdd2}.hub-active button{font-size:12px;min-height:44px;padding:8px 13px;border-radius:3px;background:#182840a8;border-color:#96b3d450;flex:none}
#deck-picker{width:min(640px,calc(100vw - 24px))}.deck-picker-grid{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.deck-pick{display:flex;align-items:center;gap:12px;text-align:left;background:#ffffff0c;border:1px solid #ffffff20;border-radius:10px;padding:12px;min-width:0}.deck-pick img{height:85px;width:58px;object-fit:contain;flex:none}.deck-pick span{display:flex;flex-direction:column;gap:6px;min-width:0}.deck-pick b{font-size:13px;overflow-wrap:anywhere}.deck-pick small{font-size:10px;color:#c2c7d3}.deck-pick.selected{border-color:#ffb19f;background:#ec968317}
.lobby-page[data-page=shop] #content{max-width:1000px}.lobby-page[data-page=shop] .pack-page{background:#111b3266;backdrop-filter:blur(10px);border-radius:12px;padding:25px 20px}
.pack-actions{flex-wrap:wrap}.pack-actions button{border-radius:4px;font-weight:600;background:#243b58;border-color:#6b88ab;padding:10px 24px}.pack-actions .primary{background:#c95043;border-color:#ffad87;color:#fff}.pack-actions #open-ten-packs{position:relative;min-width:185px}.pack-actions button small{display:block;font-size:10px;font-weight:400;opacity:.85}.pack-progress{display:flex;align-items:center;justify-content:center;gap:10px;color:#c6d5ee;font-size:12px;margin:0 0 15px}.pack-progress strong{color:#ffbaa6}.pack-progress progress{width:110px;height:4px;accent-color:#ffad87}.pack-batch-badge{position:absolute;bottom:12%;right:-14px;padding:6px 14px;font-weight:700;font-size:20px;background:#bf4f40;color:#fff;transform:rotate(-7deg);box-shadow:0 2px 6px #0005}.pack-results{width:100%}.pack-results h2{margin-bottom:4px}.pack-results>p{font-size:12px;color:#adbedb;margin-bottom:24px}.pack-results .result-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 10px}.pack-results .result-card{position:relative;font-size:10px}.pack-results .result-card>span{line-height:1.35}.result-card .rarity-label{position:absolute;top:2px;right:2px;padding:2px 6px;font-size:9px;background:#152744e8;border-radius:2px;color:#c7d8ef}.result-card.rarity-RRR .rarity-label,.result-card.rarity-VR .rarity-label{background:#985631e8;color:#fff0cd}
@media(max-width:600px){.lobby-page::before{background-size:auto 83dvh,auto 90dvh,auto 90dvh,cover;background-position:left 4% bottom 80px,left -110px bottom,right -145px bottom,center}.lobby-page[data-page=lobby] #content{min-height:calc(100dvh - 54px);padding:28px 10px}.game-hub{padding:0 3px;max-width:440px}.hub-title{gap:10px;padding-bottom:16px;margin-bottom:18px}.hub-title h1{font-size:27px}.hub-mark{font-size:43px}.hub-title .eyebrow{font-size:9px;letter-spacing:1px}.hub-series{font-size:8px;letter-spacing:.5px}.hub-button{min-height:76px;padding:12px 11px;gap:9px}.hub-button b{font-size:15px}.hub-primary b{font-size:18px}.hub-button small{font-size:10px}.hub-button>svg{display:none}.hub-icon{width:26px}.hub-icon svg{width:25px;height:25px}.hub-play{grid-template-columns:1.2fr 1fr}.hub-group{margin-top:18px}.hub-active{gap:10px}.hub-active b{font-size:12px}.hub-active span{font-size:10px}.deck-picker-grid{padding:15px;grid-template-columns:1fr}.lobby-page[data-page=shop] .pack-page{padding:22px 8px;border-radius:10px}.pack-page h1{font-size:27px}.pack-actions{gap:8px}.pack-actions button{min-width:110px;padding:10px 16px}.pack-actions #open-ten-packs{min-width:155px}.pack-results .result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.pack-results h2{font-size:22px}}
@media(max-width:350px){.hub-title h1{font-size:23px}.hub-series{display:none}.hub-button b{font-size:14px}.hub-primary b{font-size:16px}.hub-button small{font-size:9px}.hub-active button{padding:8px}.hub-active b{font-size:11px}}
@media(max-height:550px) and (orientation:landscape){.lobby-page[data-page=lobby] #content{padding:15px 20px;min-height:calc(100dvh - 54px)}.game-hub{width:min(850px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0}.hub-title{grid-column:1/-1;margin:0;padding:0 4px 10px;gap:10px}.hub-title h1{font-size:23px;margin-top:3px}.hub-mark{font-size:37px}.hub-series{font-size:9px}.hub-group{margin-top:0}.hub-grid,.hub-play{grid-template-columns:1fr;gap:7px}.hub-button{min-height:55px;padding:9px 12px}.hub-button b,.hub-primary b{font-size:15px}.hub-button small{font-size:9px}.hub-button>svg{display:none}.hub-icon,.hub-icon img{height:31px}.hub-active{grid-column:1/-1;margin:0;padding-top:10px}.hub-active>img{height:44px;width:30px}.pack-results .result-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.hub-button,.hub-button::before,.hub-button::after{transition:none}.hub-button:hover,.hub-button:active{transform:none}}
.hub-watch{grid-column:1/-1;min-height:58px}.hub-watch::after{background:linear-gradient(115deg,#254557c4,#142237bb);border-left-color:#92dcc1}
.watch-page{max-width:900px;margin:20px auto;padding:20px;background:#14203370;border:1px solid #ffffff25;border-radius:12px;backdrop-filter:blur(8px)}
.watch-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.watch-heading h1{margin:5px 0;font-size:28px}.watch-heading button{min-height:44px}.watch-note,#watch-status{font-size:13px;color:#d6e1ef}.watch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.watch-match{padding:18px;background:#e3efff09;border:1px solid #ffffff30;border-radius:8px}.watch-match-meta{display:flex;align-items:center;gap:10px;font-size:10px;color:#b8c9e0;flex-wrap:wrap}.live-badge{color:#a6f1cf;letter-spacing:1px;font-weight:700}.live-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px}
.watch-mode{padding:4px 8px;border:1px solid currentColor;border-radius:6px;font-size:12px;font-weight:700}.watch-mode.ranked{color:#edcf83;background:#edcf8310}.watch-mode.training{color:#d0acff;background:#d0acff10}.watch-mode.casual{color:#83caff;background:#83caff10}
.daily-login-reward{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:14px 18px;border:1px solid #e6c47777;border-radius:12px;background:linear-gradient(110deg,#e6c47718,#5898ff0d)}.daily-login-reward b{color:#ffe1a0}.daily-login-reward small{display:block;margin-top:4px;color:#b8c9e0;font-size:12px}.daily-login-reward>span{color:#ffe1a0;font-weight:700;white-space:nowrap}
.watch-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:20px 0}.watch-player{min-width:0;display:flex;flex-direction:column;gap:5px}.watch-player strong{font-size:17px;overflow-wrap:anywhere}.watch-player small{font-size:11px;color:#c6d2e6;line-height:1.6}.watch-vs{color:#ffb8a7;font-size:12px;font-style:italic;font-weight:700}
.watch-enter{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;background:#b5dcff13;border:1px solid #ffffff30;border-radius:4px;color:#fff;text-decoration:none;font-size:14px}.watch-enter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.watch-enter svg:last-child{margin-left:auto;width:12px}.watch-enter:hover{background:#b5dcff28}.watch-enter:focus-visible{outline:2px solid #ffb19f;outline-offset:3px}
@media(max-width:600px){.watch-page{margin:10px auto;padding:16px 12px}.watch-list{grid-template-columns:1fr;gap:12px}.watch-heading h1{font-size:25px}.watch-player strong{font-size:16px}.watch-note{line-height:1.7}}

.ranked-lineup{display:grid;gap:12px;width:min(100%,530px);margin:18px auto;text-align:left}.ranked-lineup label{display:grid;gap:5px;font-size:12px;color:#a4e9f1}.ranked-lineup select{width:100%;margin:0}.ranked-lineup p,.ranked-lineup>small{font-size:12px;text-align:center}