@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#000000;--panel:#242424;--panel2:#1c1c1c;--line:#3a3a3a;--gold:#eab308;--text:#f5f5f5;--muted:#a3a3a3;--green:#34d399;--red:#f87171}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button:disabled{cursor:not-allowed}
.shell{width:100%;max-width:760px;margin:0 auto;padding:17px 17px 48px}
.ui-icon{display:inline-block;vertical-align:middle;flex-shrink:0}
.home{max-width:700px;margin:0 auto}
.brand-stack{display:flex;flex-direction:column;align-items:center;text-align:center;padding:13px 8px 20px;gap:8px}
.brand-mark{color:var(--gold);display:flex;align-items:center;justify-content:center}
.brand-stack h1{font-size:32px;line-height:1.05;letter-spacing:.7px;font-weight:800;margin:0;color:var(--gold)}
.brand-tagline{font-size:12px;letter-spacing:.45px;color:#a3a3a3;font-weight:600}
.badge-row{display:flex;align-items:center;gap:7px;justify-content:center;margin:5px 0 2px}
.chip{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:10px;line-height:1.3;font-weight:750;letter-spacing:.22px;color:#d4d4d4;background:#333;border:1px solid #404040;border-radius:7px;padding:4px 9px}
.chip-season,.chip-official,.chip-open{background:#173e32;color:#8af4bb;border-color:#29644c}
.chip-official{font-size:10px}
.chip-closed{background:#4a2222;color:#ff9c9c;border-color:#613030}
.player-tag{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:2px}
.player-tag .ui-icon{color:#d4d4d4}
.player-tag strong{font-size:16px}
.account-panel{background:#242424;border:1px solid #303030;border-radius:15px;padding:18px 17px;margin-bottom:21px}
.wallet-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.eyebrow{color:var(--muted);font-size:12px;font-weight:650}
.wallet-value{font-size:28px;line-height:1.25;letter-spacing:-.7px;font-weight:800;color:var(--gold);margin-top:5px}
.wallet-btn,.subnav-wallet,.back-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid #545454;border-radius:10px;padding:10px 13px;font-size:13px;font-weight:650}
.wallet-btn:hover,.subnav-wallet:hover,.back-link:hover{border-color:#9a9a9a;background:#292929}
.account-divider{height:1px;background:#454545;margin:15px 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.stat strong{font-weight:800;font-size:25px;line-height:1.2;color:#f7f7f7}
.stat span{font-size:11px;color:var(--muted)}
.account-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px;flex-wrap:wrap}
.rank-chip{display:inline-flex;align-items:center;border:1px solid #555;padding:5px 10px;font-weight:700;border-radius:6px;font-size:11px}
.account-footer>span:last-child{font-size:11px;color:#b4b4b4}
.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:11px}
.menu-heading h2{font-weight:750;font-size:21px;margin:0}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.menu-tile{background:#242424;border:1px solid #303030;color:#fff;border-radius:13px;min-height:133px;padding:15px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:left;gap:17px;transition:border-color .15s,background .15s}
.menu-tile:hover:not(:disabled){background:#2b2b2b;border-color:#666}
.menu-tile-top{display:flex;justify-content:space-between;align-items:flex-start}
.menu-symbol{display:flex}
.menu-play .menu-symbol{color:#ef4444}
.menu-shop .menu-symbol{color:#eab308}
.menu-collection .menu-symbol{color:#60a5fa}
.menu-market .menu-symbol{color:#34d399}
.menu-ranked .menu-symbol{color:#c084fc}
.menu-listings .menu-symbol{color:#fb923c}
.menu-tile-bottom{display:flex;flex-direction:column;gap:5px}
.menu-tile-bottom strong{font-size:15px;font-weight:800;line-height:1.2}
.menu-tile-bottom>span{font-size:12px;color:#a3a3a3;line-height:1.4}
.menu-tile-bottom small{font-size:10px;font-weight:700;color:#f87171;letter-spacing:.25px}
.menu-tile.is-locked{opacity:.67}
.menu-tile.is-locked .menu-symbol{color:#777}
.menu-tile.is-locked strong{color:#999}
.tile-lock{color:#888;display:flex}
.news-panel{background:#171717;border:1px solid #242424;border-radius:12px;padding:17px;margin-top:17px;color:#adadad;line-height:1.55}
.news-panel h3{font-size:13px;font-weight:750;color:#f5f5f5;display:flex;align-items:center;gap:9px;margin:0 0 11px}
.news-panel h3 .ui-icon{color:#eab308}
.news-panel p{font-size:12px;margin:8px 0 0}
.news-panel .news-meta{color:#999}
.subnav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0 15px;border-bottom:1px solid #2e2e2e;margin-bottom:21px}
.subnav-brand{color:var(--gold);font-size:14px;font-weight:900;letter-spacing:.8px}
.subnav-wallet{color:var(--gold)}
/* Secondary screens: same restrained, flat style as the in-chat menu */
.panel,.hero{background:#242424;border:1px solid #343434;border-radius:13px;padding:19px;margin-bottom:16px;box-shadow:none}
.hero h1{font-size:clamp(23px,4vw,34px);line-height:1.25;margin:9px 0;color:var(--gold);font-weight:800}
.hero p{color:#bdbdbd;line-height:1.6;max-width:580px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile,.card{background:#242424;border:1px solid #3a3a3a;border-radius:13px;overflow:hidden}
.tile{cursor:default}
.tile-body,.card .content{padding:15px}
.tile h3,.card h3{font:750 16px Inter,system-ui,sans-serif;margin:4px 0 8px}
.tile p{color:#a3a3a3;line-height:1.5;margin:0 0 10px}
.art{position:relative;background:#202020;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.art:before,.art .halo{display:none}
.art .symbol{font-size:57px;line-height:1;filter:none}
.art .artlabel{position:absolute;bottom:9px;left:12px;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:#aaa}
.tile .art{height:90px}
.card .art{height:116px}
.card .content{padding:13px}
.card h3{font-size:15px}
.badge{display:inline-flex;align-items:center;padding:4px 8px;background:#353535;border:1px solid #505050;border-radius:7px;color:#ddd;font-size:10px;letter-spacing:.2px;font-weight:750;text-transform:uppercase}
.badge.common{color:#d4d4d4}
.badge.uncommon{color:#69e6a8;border-color:#3d795a}
.badge.rare{color:#8cbeff;border-color:#4d78ac}
.badge.epic{color:#d1a7ff;border-color:#8e62b5}
.badge.legendary{color:#eac16a;border-color:#8a6c30}
.badge.mythic,.badge.secret{color:#ff92ad;border-color:#91445b}
.slip{background:#1b1b1b;border:1px solid #373737;border-radius:9px;padding:10px;margin:10px 0;font-size:12px;line-height:1.7}
.slip b{color:#f4f4f4}
.btn{background:#303030;border:1px solid #535353;padding:9px 12px;border-radius:9px;font-weight:700;font-size:12px;line-height:1.3}
.btn.gold{background:#eab308;border-color:#eab308;color:#181818}
.btn.green{background:#19543d;border-color:#398b65}
.btn.red{background:#542a32;border-color:#a34e59}
.btn:hover:not(:disabled){filter:brightness(1.14)}
.btn:disabled{opacity:.45}
.section{font-size:21px;color:#f4f4f4;font-weight:750;margin:21px 0 14px}
.line{height:1px;background:var(--line);margin:13px 0}
.flex{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.notice{background:#1c1c1c;border:1px solid #444;padding:12px;border-radius:10px;color:#ccc;margin:12px 0;line-height:1.6}
.good{color:var(--green)}.bad{color:var(--red)}.goldtext{color:var(--gold)}
input,select{background:#161616;color:#f5f5f5;border:1px solid #555;border-radius:8px;padding:10px;max-width:100%}
input[type=number]{width:90px}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.tabs button{background:#282828;border:1px solid #454545;border-radius:8px;padding:8px 11px;font-size:12px}
.tabs button.active{background:#4f431b;color:#f2cd5e;border-color:#a68b33}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions>*{flex:1}
.cartline,.marketline,.historyline{padding:12px 0;border-bottom:1px solid #414141;display:flex;justify-content:space-between;gap:12px;align-items:center}
.cartline:last-child{border:0}
.battle-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fighter .art{height:152px}
.fighter .content{padding:13px}
.bar{height:12px;border-radius:8px;background:#473134;overflow:hidden;margin:9px 0}
.bar>div{height:100%;background:#38a872;transition:width .25s}
.battlelog{max-height:240px;overflow:auto}
.battlelog div{padding:9px 0;border-bottom:1px solid #3c3c3c;color:#bfbfbf}
.battlelog div:first-child{color:#fff}
.modalback{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10;padding:15px}
.modal{width:min(500px,100%);background:#242424;border:1px solid #75642c;border-radius:13px;padding:24px;max-height:90vh;overflow:auto;box-shadow:0 20px 70px #000b}
.modal h2{font-size:23px;font-weight:800;color:var(--gold);margin:0 0 12px}
.footer{text-align:center;color:#737373;font-size:10px;line-height:1.5;padding:23px 8px}
.empty{padding:25px;text-align:center;color:#a3a3a3;border:1px dashed #565656;border-radius:11px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1b382b;border:1px solid #3e8963;padding:12px 18px;border-radius:10px;z-index:20;box-shadow:0 8px 40px #000a}
.small{font-size:12px}.w100{width:100%}.muted{color:var(--muted)}
@media(max-width:580px){
 .shell{padding:12px 11px 48px}
 .brand-stack{padding-top:11px}
 .brand-stack h1{font-size:28px}
 .account-panel{padding:15px 13px}
 .menu-grid{gap:10px}
 .menu-tile{padding:13px;min-height:130px}
 .menu-tile-bottom strong{font-size:14px}
 .menu-tile-bottom>span{font-size:11px}
 .subnav-brand{display:none}
 .battle-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
 .wallet-value{font-size:25px}
 .stat strong{font-size:22px}
 .stat span{font-size:10px}
 .menu-tile{min-height:123px;padding:11px}
 .menu-tile-bottom strong{font-size:13px}
 .menu-tile-bottom>span{font-size:10px}
 .grid{gap:8px}
 .tile-body,.card .content{padding:10px}
 .card h3{font-size:14px}
 .card .art{height:90px}
 .card .art .symbol{font-size:46px}
}

/* Account entry: unlocked only for this page load. */
.login-shell{min-height:calc(100vh - 65px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:26px 8px}
.login-mark{color:#eab308;display:flex}
.login-shell>h1{font-weight:900;font-size:34px;letter-spacing:.5px;color:#eab308;margin:4px 0}
.login-shell>.muted{letter-spacing:1.3px;font-size:10px;margin:0 0 18px}
.login-panel{background:#232323;border:1px solid #393939;border-radius:14px;padding:28px;max-width:390px;width:100%;text-align:left}
.login-subtitle{color:#eab308;font-weight:800;font-size:11px;letter-spacing:1px}
.login-panel h2{font-size:23px;margin:7px 0 5px}
.login-panel p{color:#aaa;font-size:12px;line-height:1.6}
.login-panel form{display:flex;flex-direction:column;gap:11px;margin-top:23px}
.login-panel form label{font-size:10px;color:#b8b8b8;letter-spacing:1px;font-weight:800}
.login-panel input{width:100%;max-width:100%;font-size:24px;text-align:center;letter-spacing:10px;padding:13px;background:#111;border-color:#555}
.login-panel .btn{margin-top:7px;padding:13px}
.login-error{color:#f87171!important;font-weight:700}
.login-footnote{max-width:375px;font-size:10px;color:#6f6f6f;line-height:1.6}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.format-btn{background:#1b1b1b;border:1px solid #505050;border-radius:10px;padding:15px 8px;display:flex;flex-direction:column;align-items:center;gap:7px}
.format-btn strong{font-size:24px;color:#eab308}
.format-btn span{font-size:11px;color:#a8a8a8}
.format-btn:hover:not(:disabled){border-color:#eab308;background:#2b2b2b}
.format-btn:disabled{opacity:.4}
.team-pick{min-width:0}
.team-pick .card .art{height:85px}
.team-pick .card .art .symbol{font-size:43px}
.team-pick-actions{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;margin-top:13px}
.team-pick-actions span{color:#aaa;font-size:11px}
.team-pick-actions>div{display:flex;gap:5px}
.team-pick-actions .btn{padding:7px 13px}
.pick-pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 17px}
.pick-pill{background:#232323;border:1px solid #555;border-radius:8px;padding:10px;color:#ddd}
.pick-pill.selected{color:#f3d561;border-color:#cba72f;background:#433b1d}
.match-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.match-heading .section{margin:0}
.match-clock{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;color:#eab308;background:#292416;padding:8px 12px;border:1px solid #69571f;border-radius:10px}
.match-clock.urgent{color:#ff8f8f;border-color:#a53b3b;background:#3d2222;animation:clockPulse 1s infinite}
@keyframes clockPulse{50%{opacity:.58}}
.fighter-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin-bottom:17px}
.fighter-slot{display:flex;flex-direction:column;gap:7px;text-align:left;border:1px solid #494949;border-radius:9px;background:#202020;padding:11px;min-width:0}
.fighter-slot.selected{border-color:#eab308;background:#302b19}
.fighter-slot.out{opacity:.43;background:#171717}
.fighter-name{font-size:12px;font-weight:800;overflow-wrap:anywhere}
.fighter-meta{font-size:10px;color:#acacac}
.fighter-slot .bar{width:100%;height:7px;margin:0}
.clash-row{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;color:#eee}
.clash-row span{font-size:13px}
.clash-row strong{color:#eab308}
.bond-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.bond-btn{display:flex;flex-direction:column;gap:7px;text-align:left;padding:12px;border:1px solid #6b5096;border-radius:10px;background:#2b203f}
.bond-btn b{font-size:13px;color:#e2c4ff}
.bond-btn span{font-size:10px;color:#c6b4e0}
.bond-btn:hover{border-color:#c98dff;background:#43305e}
/* Original purple tear-strip opening interaction: no copyrighted assets. */
.opening-screen{min-height:80vh;display:flex;flex-direction:column;align-items:center;gap:14px;padding:5px 0 24px}
.opening-screen>.back-link{align-self:flex-start}
.opening-heading{text-align:center;margin:11px 0 2px}
.opening-kicker{font-size:11px;letter-spacing:2.5px;color:#b898ff;font-weight:800}
.opening-heading h1{font-size:clamp(23px,4vw,37px);color:#f2eaff;margin:11px 0}
.opening-heading p{font-size:12px;color:#aaa}
.opening-stage{position:relative;width:100%;max-width:550px;min-height:350px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid #443364;background:radial-gradient(ellipse at center,#3d2761 0%,#171020 46%,#09090c 85%);box-shadow:inset 0 0 70px #000}
.opening-stage:before,.opening-stage:after{content:'';position:absolute;inset:-50%;background:radial-gradient(circle,#bb7eff20,transparent 52%);animation:floatGlow 5s ease-in-out infinite alternate;pointer-events:none}
.opening-stage:after{animation-delay:2s;transform:translate(20%,20%)}
@keyframes floatGlow{to{transform:translate(11%,-6%) scale(1.25)}}
.sealed-item{position:relative;z-index:2;background:linear-gradient(145deg,#6b4096,#211535 44%,#7a51b0 75%,#140c23);border:1px solid #c197f0;box-shadow:0 10px 25px #000c,0 0 38px #7441c16c;display:flex;align-items:center;justify-content:space-around;flex-direction:column;overflow:hidden;animation:itemFloat 3s ease-in-out infinite alternate}
.sealed-pack{width:167px;height:255px;border-radius:12px 12px 19px 19px}
.sealed-box{width:220px;height:225px;border-radius:11px;transform:perspective(550px) rotateY(-9deg)}
.package-top,.package-label{font-size:13px;font-weight:900;letter-spacing:2px;color:#f6e7ff;text-shadow:0 2px 9px #000}
.package-label{font-size:11px}
.package-glyph{font-size:100px;line-height:1;color:#e7caff;text-shadow:0 0 24px #e7beff}
.package-shine{position:absolute;inset:-100% -50%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,#ffffff21,transparent);animation:packShimmer 3.5s infinite}
@keyframes packShimmer{0%,60%{translate:-100% 0}100%{translate:100% 0}}
@keyframes itemFloat{to{translate:0 -8px}}
.opening-stage.opened{animation:stageFlash .65s ease-out}
@keyframes stageFlash{0%{filter:brightness(3)}100%{filter:brightness(1)}}
.reward-card{z-index:3;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:22px;background:linear-gradient(155deg,#36234d,#171320);border:1px solid #b28bfc;border-radius:15px;width:205px;min-height:266px;box-shadow:0 0 55px #9460c688;animation:cardReveal .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cardReveal{0%{opacity:0;transform:translateY(33px) scale(.75) rotate(-4deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
.reward-emoji{font-size:85px;line-height:1}
.reward-card h2{text-align:center;margin:0;font-size:18px}
.zipper,.reveal-controls{width:100%;max-width:540px;background:#1c1626;border:1px solid #513b74;border-radius:11px;padding:17px 22px;text-align:center}
.zipper label{display:block;color:#dbbcff;font-size:10px;letter-spacing:1.5px;font-weight:900;margin-bottom:12px}
.zip-track{height:10px;border-radius:20px;background:#241530;border:1px solid #6c488d;overflow:hidden}
.zip-fill{height:100%;background:linear-gradient(90deg,#6d30ad,#c477fc);box-shadow:0 0 13px #bc6eff}
.zipper input[type=range]{margin:3px 0 0;width:100%;height:25px;background:transparent;border:0;padding:0;appearance:none;-webkit-appearance:none;cursor:grab;display:block}
.zipper input::-webkit-slider-runnable-track{height:8px;background:#382148;border:1px dashed #a984c9;border-radius:7px}
.zipper input::-moz-range-track{height:8px;background:#382148;border:1px dashed #a984c9;border-radius:7px}
.zipper input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#c778ff;border:3px solid #eee0ff;width:32px;height:27px;border-radius:8px;box-shadow:0 0 13px #aa65ff;margin-top:-10px}
.zipper input::-moz-range-thumb{background:#c778ff;border:3px solid #eee0ff;width:29px;height:25px;border-radius:8px;box-shadow:0 0 13px #aa65ff}
.zipper p{margin:6px 0 0}
.reveal-controls .btn{min-width:210px;padding:13px;margin:8px auto}
@media(max-width:540px){.opening-stage{min-height:310px}.sealed-pack{width:155px;height:235px}.sealed-box{width:195px;height:210px}.fighter-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.login-panel{padding:21px}.formats{gap:6px}.format-btn{padding:12px 3px}.format-btn strong{font-size:20px}}


/* Foil tear line and shudder when the slider reaches the end. */
.sealed-item:after{content:'';position:absolute;top:17px;left:0;right:0;height:4px;border-top:2px dashed #f3ceff;border-bottom:1px solid #8545c6;box-shadow:0 0 14px #c484ff}
.opening-stage.opened .sealed-item{animation:sealTear .7s cubic-bezier(.25,.8,.3,1) both}
.opening-stage.opened .sealed-item:after{border-top-color:#fff;box-shadow:0 0 25px 5px #bd6fff}
@keyframes sealTear{0%{transform:translate(0,0) rotate(0);filter:brightness(2)}20%{transform:translate(-7px,1px) rotate(-3deg)}40%{transform:translate(7px,-3px) rotate(3deg)}70%{transform:translate(-4px,-6px) rotate(-1deg)}100%{transform:translate(0,-5px) rotate(0);filter:brightness(1.2)}}


/* Vaultbound · gameplay, rarity and service UI */
.shell main{animation:pageDrop .23s cubic-bezier(.22,.8,.22,1) both;transform-origin:center top}
@keyframes pageDrop{from{opacity:.25;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
.modal{animation:pageDrop .19s ease-out both}
.menu-tools{display:flex;align-items:center;gap:8px}
.tool-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #454545;background:#242424;border-radius:8px;font-size:17px}
.tool-icon:hover{background:#303030;border-color:#888}
.unread-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;background:#ff5757;border:2px solid #242424;border-radius:50%}
.rank-unlock-panel{background:#201d18;border:1px solid #65502d;padding:15px 17px;border-radius:11px;margin:0 0 19px}
.rank-unlock-title{font-size:12px;letter-spacing:.5px;font-weight:800;color:#eec662}
.rank-unlock-panel>p{font-size:11px;color:#b9b19f;line-height:1.5;margin:7px 0 12px}
.unlock-step{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #3f372e;padding:10px 0;font-size:12px;font-weight:650}
.unlock-step span{color:#f0c56c;font-weight:800;font-variant-numeric:tabular-nums}
.arena-option{border:1px solid #3a3a3a;border-radius:13px;margin-bottom:17px;padding:20px;overflow:hidden;background:#202020}
.arena-casual{border-color:#32634d;background:linear-gradient(115deg,#183529 0%,#202020 39%,#1a1a1a 100%)}
.arena-ranked{border-color:#783538;background:linear-gradient(115deg,#451f24 0%,#242020 38%,#1a1a1a 100%)}
.arena-label{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#6fe4a6;margin-bottom:14px}
.arena-ranked .arena-label{color:#ff797b}
.arena-heading{display:flex;align-items:flex-start;gap:16px}
.arena-icon{color:#62de9b;border:1px solid #4d966f;background:#183a2b;border-radius:10px;font-size:25px;display:flex;justify-content:center;align-items:center;min-width:45px;height:48px}
.arena-ranked .arena-icon{color:#ff7474;border-color:#a24b52;background:#4a2429}
.arena-heading h2{font-size:19px;font-weight:900;margin:3px 0 8px;letter-spacing:.2px}
.arena-ranked h2{color:#ffc7c7}
.arena-casual h2{color:#bff2d5}
.arena-heading p{font-size:12px;color:#c5c5c5;line-height:1.65;margin:0}
.arena-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:19px 0 15px}
.arena-features span{font-size:11px;color:#c9c9c9;line-height:1.5}
.format-btn.casual-format:hover:not(:disabled){border-color:#42b57e}
.format-btn.casual-format strong{color:#6ae6a2}
.format-btn.hardcore-format strong{color:#ff7e7e}
.format-btn.hardcore-format:hover:not(:disabled){border-color:#eb5b61;background:#382629}
.ranked-locked{margin:17px 0 0;padding:9px 11px;background:#3c2628;border:1px solid #894149;color:#ffb2b2;font-size:11px;border-radius:8px}
.rank-profile{background:linear-gradient(120deg,#402126,#1d1d1d 75%);border:1px solid #814549;border-radius:13px;padding:25px;margin-bottom:17px}
.rank-eyebrow{color:#f8a6a6;font-size:10px;letter-spacing:1.6px;font-weight:900}
.rank-profile h1{font-size:35px;font-weight:900;margin:11px 0;color:#e3c0ff}
.rank-profile p{color:#c5c5c5;line-height:1.6}
.leaderboard h2{font-size:19px}
.leader-row{background:#1c1c1c;border:1px solid #363636;border-radius:8px;margin:8px 0;overflow:hidden}
.leader-row summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px}
.leader-row summary::-webkit-details-marker{display:none}
.leader-row[open]{border-color:#7d6886}
.leader-place{color:#f0cd76;font-weight:900;font-size:13px;min-width:30px}
.leader-name{flex:1;font-weight:750;font-size:13px}
.leader-rating{color:#e4c568;font-weight:850;white-space:nowrap;font-size:12px}
.leader-arrow{color:#888}
.leader-row[open] .leader-arrow{transform:rotate(180deg)}
.leader-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px;border-top:1px solid #333}
.leader-details>div{display:flex;flex-direction:column;gap:6px}
.leader-details strong{font-size:12px}
.leader-details span{font-size:10px;color:#999}
.leader-meter{height:5px;background:#292929;margin:0 11px 13px;border-radius:5px;overflow:hidden}
.leader-meter>div{height:100%;background:linear-gradient(90deg,#5e408c,#d0a7ef)}
.leader-self{border-color:#4c675a}
.market-seller{font-size:11px;color:#a7a7a7;margin:9px 0}
.market-buyrow{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:8px;flex-wrap:wrap}
.sales-alerts{background:#173429;border:1px solid #347952;border-radius:12px;margin-bottom:16px;padding:15px}
.sales-alerts h3{font-size:13px;color:#7bf0ae;margin:0 0 7px}
.sales-alerts .marketline{border-color:#38594c}
.skill-list{font-size:11px;color:#b7b7b7;margin:10px 0}
.skill-list summary{cursor:pointer;color:#c5c5c5;font-size:10px;font-weight:800}
.skill-list p{margin:5px 0}
.card-bond-label{color:#d9b5ff;font-weight:800;font-size:10px;line-height:1.4;background:#32263c;border:1px solid #5a4171;border-radius:6px;padding:6px;margin-top:8px}
.tiny-bond{color:#e4bbff;font-weight:700;font-size:9px;line-height:1.35;margin-top:8px}
.card,.table-card,.reward-card{position:relative;isolation:isolate}
.card>*{position:relative;z-index:1}
.card.rarity-uncommon,.table-card.rarity-uncommon,.reward-card.rarity-uncommon{border:1px solid transparent;box-shadow:none}
.card.rarity-common,.table-card.rarity-common,.reward-card.rarity-common{border:1.5px solid #868e95}
.card.rarity-rare,.table-card.rarity-rare,.reward-card.rarity-rare{border:2px solid #39bc70;box-shadow:inset 0 0 5px #36a56820}
.card.rarity-epic,.table-card.rarity-epic,.reward-card.rarity-epic{border:2px solid #408fff;box-shadow:0 0 8px #4287ff3f}
.card.rarity-legendary,.table-card.rarity-legendary,.reward-card.rarity-legendary{border:2px solid #c37aff;box-shadow:0 0 11px #a953e999,0 0 22px #a953e95c,inset 0 0 12px #7835b83f}
.card.rarity-mythic,.table-card.rarity-mythic,.reward-card.rarity-mythic{border:2px solid #fa424e;box-shadow:0 0 10px #f2334e9e,0 0 23px #f123365c,inset 0 0 22px #af233a33;background-image:linear-gradient(110deg,#4c15221b,transparent 65%)}
.card.rarity-secret,.table-card.rarity-secret,.reward-card.rarity-secret{border:2px solid #ffc84d;box-shadow:0 0 10px #ffcd4dce,0 0 29px #e2a52681,inset 0 0 25px #e0aa3355;background-image:linear-gradient(140deg,#73551c38,#1f1b12 38%,#24211a)}
.card.rarity-secret::after,.table-card.rarity-secret::after,.reward-card.rarity-secret::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle at 11% 19%,#fff3accc 0 1px,transparent 2px),radial-gradient(circle at 72% 32%,#ffdf7fbb 0 1.5px,transparent 2.5px),radial-gradient(circle at 86% 77%,#fff1acbb 0 1px,transparent 2px),radial-gradient(circle at 31% 89%,#fff1a6cc 0 1px,transparent 2px);animation:secretSparkles 5s ease-in-out infinite alternate}
@keyframes secretSparkles{50%{opacity:.32;transform:translateY(-2px)}100%{opacity:1;transform:translateY(1px)}}
.badge.rare{color:#60e7a3;border-color:#38845a}
.badge.epic{color:#91beff;border-color:#4779c1}
.badge.legendary{color:#dbadff;border-color:#8b4eb1}
.badge.mythic{color:#ff999e;border-color:#c45162}
.badge.secret{color:#ffdd7d;border-color:#be982f}
/* Card-table battlefield */
.battle-table{padding:13px 14px 15px;background:radial-gradient(ellipse at center,#18382c 1%,#10261f 47%,#0c1a17 90%);border:9px solid #343027;border-radius:21px;box-shadow:inset 0 0 0 2px #626049,0 9px 25px #000a;margin-bottom:18px;overflow:hidden}
.table-edge{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:900;font-size:10px;letter-spacing:1.1px;padding:6px 2px 11px}
.table-edge-red{color:#ff9e9e}
.table-edge-green{color:#a1efc4;padding:11px 2px 4px}
.table-edge strong{font-size:9px;font-weight:800}
.table-hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;align-items:stretch}
.table-card{background:#1d1f22;border:1px solid #4f5558;border-radius:10px;padding:10px 9px 8px;display:flex;flex-direction:column;gap:7px;min-width:0;box-shadow:0 4px 10px #0008;transition:transform .16s,border-color .16s}
.table-card.table-selected{transform:translateY(-3px)}
.enemy-hand .table-card.table-selected{outline:2px solid #e86b6b;outline-offset:2px}
.player-hand .table-card.table-selected{outline:2px solid #47c991;outline-offset:2px}
.table-card.table-out{opacity:.37;filter:grayscale(.75)}
.table-card-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.table-rarity{font-size:9px;color:#aaa;font-weight:800;text-transform:uppercase}
.table-card-level{font-size:8px;color:#b5d6c2}
.table-art{height:61px;display:flex;align-items:center;justify-content:center;background:#222625;border-radius:7px;font-size:45px}
.table-card h4{font-size:12px;line-height:1.25;min-height:31px;overflow-wrap:anywhere;margin:3px 0 0;font-weight:850;color:#fff}
.table-hp{display:flex;justify-content:space-between;align-items:center;gap:5px;flex-wrap:wrap;font-size:9px;color:#ddd}
.table-hp strong{font-weight:700;color:#e9c879}
.table-card .bar{height:7px;margin:0;width:100%}
.table-power-list{display:flex;flex-direction:column;gap:3px;font-size:9px;color:#aaa;line-height:1.35}
.table-power-list span{overflow-wrap:anywhere}
.table-card-actions{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.table-mini{background:#2e3032;border:1px solid #54565b;border-radius:5px;font-size:9px;font-weight:800;padding:6px 3px;text-align:center}
.table-mini.selected{border-color:#e5c04e;color:#f7d77a}
.table-mini.attack{border-color:#a14d4b;color:#ffb0a5;background:#3b2525}
.table-mini.power{border-color:#66529d;color:#e5c6ff;background:#30253f;font-size:8px;white-space:normal}
.table-mini:disabled{opacity:.4}
.table-center{display:flex;align-items:center;justify-content:center;gap:15px;padding:13px 0;margin:11px 0;border-block:1px solid #3e5e4f}
.table-center-label{letter-spacing:2.5px;font-size:10px;font-weight:850;color:#82b49b}
.table-glyph{color:#47735e}
.table-bonds{border:1px solid #745299;background:#261d35;border-radius:12px;padding:15px;margin:0 0 16px}
.table-bonds h3{font-size:12px;color:#ddbaff;margin:0 0 7px}
.table-bonds p{font-size:11px;line-height:1.6;color:#c2aecc}
.table-log{margin-top:20px}
.table-log .battlelog{max-height:220px}
.table-bonds .bond-btn:disabled{opacity:.45}
.result-screen{position:relative;overflow:hidden;text-align:center;border:2px solid #666;padding:31px 18px;border-radius:14px;margin:17px 0 22px}
.result-emblem{font-size:59px;margin-bottom:8px}
.result-eyebrow{font-size:10px;letter-spacing:2px;font-weight:900}
.result-screen h1{font-weight:900;font-size:clamp(28px,6vw,43px);letter-spacing:1px;margin:11px 0}
.result-screen p{font-size:13px;line-height:1.6;max-width:440px;margin:0 auto 17px}
.result-metrics{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:13px 0 18px}
.result-metrics span{border:1px solid #7777;border-radius:7px;padding:8px 11px;font-size:11px;font-weight:800}
.result-win{background:radial-gradient(circle at 50% 0,#517b3878,transparent 70%),linear-gradient(120deg,#123527,#19281b);border-color:#62d995;box-shadow:0 0 27px #39c77d45}
.result-win h1{color:#a1f7ba;text-shadow:0 0 14px #53d98488}
.result-win .result-eyebrow{color:#ffd96a}
.result-win:before{content:'✦   ✧   ✦   ✧    ✦    ✧     ✦';position:absolute;top:5px;left:0;width:100%;color:#f2d97e;animation:celebrate 2.3s ease-in-out infinite alternate}
@keyframes celebrate{to{transform:translateY(18px);opacity:.25}}
.result-loss{background:radial-gradient(circle at 50% 20%,#8825255d,transparent 67%),#200d13;border-color:#b83a45;box-shadow:inset 0 0 35px #a92a3144}
.result-loss h1{color:#ff626d;text-shadow:0 0 16px #ae303a}
.result-loss .result-eyebrow{color:#ff9b9b}
.result-draw{background:#20222b;border-color:#9b9ea8}
.result-draw h1{color:#d7d8de}
/* Transaction confirmation and green success receipt */
.checkout-overview{border:1px solid #4f4f4f;background:#171717;padding:14px;margin:11px 0 17px;border-radius:9px}
.checkout-overview label,.modal label{display:block;margin:10px 0 7px;color:#b4b4b4;font-weight:800;font-size:11px}
#purchasePin,#resetAccountId{width:100%;max-width:100%;text-align:center;letter-spacing:3px;font-weight:800;font-size:20px}
.receipt{text-align:center}
.receipt-check{background:#23543b;border:2px solid #4bc581;border-radius:50%;width:65px;height:65px;margin:3px auto 13px;display:flex;justify-content:center;align-items:center;font-size:34px;font-weight:900;color:#7af6a6;box-shadow:0 0 23px #52d79055}
.receipt h2{color:#7ef0a5!important;font-size:19px;margin:6px 0}
.receipt-sub{color:#9caaa2;font-size:11px;line-height:1.6}
.receipt-paper{padding:15px;text-align:left;background:#141d17;border:1px solid #3e7854;border-radius:10px;margin:14px 0}
.receipt-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#80e8ac;font-size:11px;letter-spacing:.3px}
.receipt-header span{color:#abc7b5;font-size:9px}
.receipt-date{font-size:10px;color:#9baaa0;margin:9px 0 12px}
.receipt-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;text-align:left;font-size:12px}
.receipt-line>*:last-child{white-space:nowrap}
.receipt-rule{height:1px;background:#41644d;margin:11px 0}
.receipt-total{font-size:16px;color:#8ff3b5;font-weight:900;border-top:1px solid #41644d;margin-top:4px}
@media(max-width:580px){.arena-heading{gap:10px}.arena-features{gap:5px}.arena-heading h2{font-size:17px}.table-hand{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-table{padding:10px;border-width:6px}.table-mini{font-size:10px}.leader-details strong{font-size:11px}.menu-tools{gap:5px}}
@media(max-width:380px){.arena-features{grid-template-columns:1fr}.menu-heading h2{font-size:18px}.table-card{padding:7px}.table-art{font-size:36px}}

.table-skills-dropdown{grid-column:1/-1;min-width:0;background:#282034;border:1px solid #66518a;border-radius:6px;padding:5px}
.table-skills-dropdown summary{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:850;color:#dbbaff;letter-spacing:.25px;min-height:22px}
.table-skills-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:8px}
.table-skills-content .table-mini{white-space:normal;word-break:break-word}


/* Vaultbound: tactical cards, player economy, collectible belt & arena feed */
.timer-selector{border:1px solid #826543;background:#302719;border-radius:11px;padding:16px;margin:19px 0}
.timer-selector h3{color:#f6d487;margin:0 0 6px;font-size:14px}
.timer-selector p{font-size:11px;color:#c6b8a4}
.timer-selector .timer-output{font-size:24px;font-weight:900;color:#f1cd6a;text-align:center;margin:11px 0}
.timer-selector input[type=range]{width:100%;accent-color:#edbc4b;max-width:none;cursor:pointer}
.timer-endpoints{display:flex;justify-content:space-between;color:#b8a888;font-size:11px}
.home-level{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:17px;font-size:11px;color:#d6c1ed;font-weight:800}
.home-level span:last-child{font-size:10px;font-weight:650;color:#aeb0b2}
.level-track{width:100%;height:8px;background:#15151a;border:1px solid #55505d;border-radius:9px;margin-top:8px;overflow:hidden}
.level-track>div{height:100%;background:linear-gradient(90deg,#6844a2,#c083f4,#f4d47d);border-radius:8px;box-shadow:0 0 9px #be87f57a;transition:width .3s}
.wallet-hero{background:linear-gradient(132deg,#2a2533,#171b17 85%);border:1px solid #5f4f77;border-radius:14px;padding:24px;margin-bottom:19px}
.wallet-caption{font-size:10px;letter-spacing:1.3px;font-weight:850;color:#d4b5ef}
.wallet-hero h1{font-size:42px;margin:11px 0;color:#eccf74}
.wallet-hero>p{font-size:12px;color:#aaa;line-height:1.6}
.wallet-level{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;color:#d4b5ef;margin-top:20px}
.deposit-panel{border-color:#4b644c;background:#202823}
.deposit-head{display:flex;align-items:center;gap:16px;margin-bottom:19px}
.deposit-head>span{font-size:34px}
.deposit-head h2{font-size:15px;color:#a7efbc;margin:0 0 7px}
.deposit-head p{font-size:12px;line-height:1.5;color:#b7c7ba;margin:0}
.deposit-form{display:flex;flex-direction:column;gap:9px}
.deposit-form label,.bank-review label{font-size:10px;letter-spacing:1px;color:#a9b5ae;font-weight:850}
.deposit-form input[type=number]{width:100%;max-width:400px;height:42px;font-size:18px}
.deposit-form button{width:max-content;padding:12px 19px}
.bank-review{border:1px solid #51624f;border-radius:11px;padding:13px;background:#1b241b}
.bank-step{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#a9eac1;margin:10px 0}
.deposit-approval{background:#232e25;border:1px solid #536c51;border-radius:9px;margin:18px 0;padding:11px}
.deposit-approval label{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.6;font-weight:500;margin:0}
.deposit-approval input[type=checkbox]{flex-shrink:0;accent-color:#54d18c;margin:3px 0 0;width:18px;height:18px;padding:0}
.pin-input{width:100%;max-width:none;font-size:23px;font-weight:800;text-align:center;letter-spacing:8px}
.receipt-check{animation:depositApproved .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes depositApproved{from{opacity:.4;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
/* Glowing accessible hover descriptions: overlay is appended to body, so never clipped by cards */
.ability-floating-tip{position:fixed;z-index:999999;width:min(295px,calc(100vw - 16px));border:1px solid #d7a3ff;border-radius:10px;background:linear-gradient(140deg,#312143,#191526);box-shadow:0 0 10px #b16bfa9c,0 0 29px #9d62ed66,0 8px 35px #000a;color:#efe5ff;line-height:1.55;font-size:12px;font-weight:600;padding:13px 14px;pointer-events:none;white-space:normal}
.ability-floating-tip[hidden]{display:none!important}
.skill-tooltip-target,.mini-ability{cursor:help}
.skill-tooltip-target:hover,.mini-ability:hover{color:#e8ccff;background:#4a315666}
.skill-list summary{color:#d9b2ff}
.skill-list .skill-tooltip-target{padding:7px 8px;background:#26202f;margin:5px 0;border-radius:6px;font-size:10px;line-height:1.45}
.skill-list .skill-tooltip-target:focus-visible{outline:1px solid #cc8fff}
.skill-list .skill-tooltip-target:hover{background:#49365b}
.table-card .table-power-list .skill-tooltip-target{display:block;border-radius:3px;padding:2px}
.table-skills-content .table-mini:hover:not(:disabled){border-color:#d097ff;box-shadow:0 0 11px #ac6ae877}
/* Six-slot collectible display belt */
.collection-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}
.collection-top h2{font-size:23px;margin:0 0 6px}
.collection-top p{font-size:11px;color:#aaa;margin:0}
.belt-panel{background:#222026;border:1px solid #584b62;border-radius:13px;padding:17px 14px;margin-bottom:19px}
.belt-panel h3{font-size:14px;margin:0 0 6px;color:#e7caff}
.belt-panel>p{font-size:11px;color:#aaa;line-height:1.5;margin:0 0 14px}
.belt-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.belt-slot{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:105px;border:1px dashed #6c6174;border-radius:9px;background:#17141b;overflow:visible;transition:background .15s}
.belt-slot:hover{background:#2e2636}
.belt-slot.filled{border-style:solid;background:#201f25}
.belt-selected{cursor:grab;text-align:center;display:flex;align-items:center;flex-direction:column;gap:5px;padding:11px 7px;width:100%;max-width:100%}
.belt-emoji{font-size:23px;line-height:1.25}
.belt-selected strong{font-size:9px;line-height:1.25;overflow-wrap:anywhere;max-width:100%}
.belt-selected small{font-size:9px;color:#bbb}
.belt-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#69636f;gap:5px;text-align:center}
.belt-empty>span{font-size:26px;font-weight:400}
.belt-empty strong{font-size:10px}
.belt-empty small{font-size:9px}
.belt-remove{position:absolute;top:1px;right:1px;width:17px;height:17px;border:0;background:#401e2a;color:#ffb5bc;border-radius:5px;font-size:10px;z-index:3;cursor:pointer}
.belt-slot.rarity-legendary{border-color:#bf80ee;box-shadow:0 0 12px #a969ff77}
.belt-slot.rarity-mythic{border-color:#e34f58;box-shadow:0 0 12px #f6404a66}
.belt-slot.rarity-secret{border-color:#eaca60;box-shadow:0 0 12px #ffd46a77}
.collection-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#1b1b1b;border:1px solid #333;padding:13px;border-radius:9px;margin:12px 0}
.collection-toolbar>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.collection-toolbar label{font-size:10px;font-weight:800;letter-spacing:.9px;color:#aaa}
.collection-toolbar input,.collection-toolbar select{width:100%;max-width:none;height:39px;font-size:12px}
.collection-hint{font-size:11px;color:#a6a6a6;line-height:1.4}
.collection-list{display:flex;flex-direction:column;gap:7px;margin-bottom:25px}
.collection-mini{border:1px solid #555;background:#222;border-radius:9px;overflow:hidden;min-width:0}
.collection-mini[hidden]{display:none!important}
.collection-mini summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:9px 11px;min-height:57px;user-select:none}
.collection-mini summary::-webkit-details-marker{display:none}
.collection-mini summary:hover{background:#2e2c31}
.collection-mini[open] summary{border-bottom:1px solid #4d4d4d}
.mini-emoji{width:33px;height:33px;display:flex;justify-content:center;align-items:center;border-radius:7px;font-size:23px;background:#161616;flex-shrink:0}
.mini-title{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.mini-title strong{font-size:12px;font-weight:850;line-height:1.24;overflow-wrap:anywhere}
.mini-title small{font-size:10px;color:#a3a3a3}
.mini-values{display:flex;flex-direction:column;gap:5px;white-space:nowrap;min-width:75px;text-align:right}
.mini-values strong{font-size:11px;color:#d5d5d5}
.mini-values small{font-size:10px;color:#c7ab72}
.mini-qty{padding:5px 7px;background:#393339;border-radius:6px;color:#fff;font-size:11px;font-weight:800}
.mini-caret{color:#b4a1c0;transition:transform .16s}
.collection-mini[open] .mini-caret{transform:rotate(180deg)}
.mini-detail{background:#1b1b1b;padding:13px 16px;line-height:1.5}
.mini-detail>p{font-size:12px;color:#c2c2c2;margin:0 0 10px}
.mini-detail h4{margin:13px 0 8px;font-size:10px;letter-spacing:.7px;color:#f0d6ff}
.mini-fullstat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.mini-fullstat span{font-size:10px;color:#bbb;padding:6px 8px;background:#272727;border-radius:5px}
.mini-ability{display:flex;flex-direction:column;gap:4px;padding:9px;border:1px solid #40334f;border-radius:7px;margin:5px 0;background:#241d2d}
.mini-ability strong{font-size:11px;color:#dfc1ff}
.mini-ability small{font-size:10px;color:#bcb3c6;line-height:1.45}
.mini-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.collection-unopened{border-top:1px solid #414141;padding-top:12px}
.collection-unopened h3{font-size:15px;margin:18px 0 12px}
.compact-pack{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #414141;background:#202020;border-radius:8px;margin:6px 0}
.compact-pack>div{display:flex;flex-direction:column;gap:4px}
.compact-pack strong{font-size:12px}
.compact-pack span{font-size:10px;color:#a4a4a4}
/* Trading floor, focused on player offers rather than cart shopping */
.trade-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px;border:1px solid #4f5160;background:linear-gradient(120deg,#252d29,#202024);border-radius:13px;margin-bottom:12px}
.trade-eyebrow{font-size:10px;letter-spacing:1.1px;font-weight:900;color:#92e9b8}
.trade-header h2{font-size:21px;margin:10px 0}
.trade-header p{font-size:11px;color:#bcbcbc;max-width:470px;line-height:1.6}
.trade-stats{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:#aebdb4;margin:11px 2px 17px}
.trade-stats span{border:1px solid #3e5146;border-radius:6px;padding:6px 8px}
.trade-list{display:flex;flex-direction:column;gap:15px}
.trade-offer{background:#222;border:1px solid #535353;border-radius:12px;padding:16px}
.trade-offer-top{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #434343;margin-bottom:14px;padding-bottom:12px}
.trade-type{font-size:10px;font-weight:900;letter-spacing:1px;color:#96d9b4}
.trade-offer-top h3{font-size:17px;margin:6px 0}
.trade-offer-top p{font-size:10px;color:#a9a9a9;margin:0}
.trade-icon{font-size:23px}
.trade-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:17px}
.trade-col-label{font-size:10px;color:#bbb;font-weight:850;letter-spacing:1px;margin:0 0 9px}
.trade-give .card{max-width:100%}
.trade-give .card .art{height:95px}
.trade-give .card .art .symbol{font-size:50px}
.trade-want{background:#1b1d1d;border:1px solid #404b45;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.trade-requirement{background:#2b302d;border:1px solid #3e5545;color:#c9e7d4;padding:10px;border-radius:7px;font-size:12px;font-weight:700}
.trade-wanted{background:#2a292c;border:1px solid #51495a;border-radius:7px;padding:8px;color:#e5d1ec;font-size:11px}
.trade-wanted summary{cursor:pointer;font-weight:700}
.trade-wanted p{font-size:10px;line-height:1.5;color:#cfc3da}
.trade-packreq{font-size:11px;color:#d4c3ea;padding:7px 9px;background:#2b2633;border-radius:6px}
.trader-quote{background:#212b26;border-left:3px solid #80c79b;border-radius:0 5px 5px 0;padding:10px;color:#a9c6b3;font-style:italic;font-size:11px;line-height:1.6;margin:7px 0}
.trade-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:auto}
.trade-ready,.trade-missing{font-size:10px;font-weight:800}
.trade-ready{color:#75d99d}
.trade-missing{color:#edb57a}
.trade-card-value{font-size:10px;color:#b2b2b2;margin-top:8px}
/* In-match chat records every meaningful game action */
.arena-chat{border:1px solid #525a61;background:#1e2025;margin-top:17px;padding:14px}
.arena-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #3c4347;padding-bottom:12px}
.arena-chat-head h3{font-size:13px;color:#e5e5e5;margin:0 0 7px}
.arena-chat-head p{font-size:11px;color:#a6afb5;margin:0}
.arena-chat-messages{height:270px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:13px 1px}
.chat-entry{max-width:91%;display:flex;flex-direction:column;gap:5px;align-self:flex-start;border-radius:9px;padding:9px 12px;background:#2b3036;border:1px solid #45505a;color:#e1e9ea;font-size:11px;line-height:1.55;overflow-wrap:anywhere}
.chat-sender{font-size:9px;font-weight:900;letter-spacing:.8px;color:#a6becd}
.chat-entry.chat-player{align-self:flex-end;background:#1c3a2b;border-color:#407b55}
.chat-entry.chat-player .chat-sender{color:#82eeb2}
.chat-entry.chat-opponent{background:#392329;border-color:#844b54}
.chat-entry.chat-opponent .chat-sender{color:#faa3ad}
.chat-entry.chat-arena{align-self:center;max-width:98%;background:#26232a;color:#c3bbc9;border-color:#4f4554;font-size:10px}
.chat-entry.chat-arena .chat-sender{color:#d5b0e4}
.arena-chat-input{display:flex;gap:8px}
.arena-chat-input input{flex:1;min-width:0;max-width:none;background:#131719}
.arena-chat-input button{padding-inline:17px}
.daily-bulletins{display:flex;flex-direction:column;gap:10px;margin-top:15px}
.daily-bulletin{border:1px solid #383638;background:#202020;border-radius:9px;padding:13px}
.daily-bulletin-type{color:#e6c77b;letter-spacing:1.1px;font-size:9px;font-weight:900}
.daily-bulletin h4{font-size:13px;margin:7px 0;color:#e8e8e8}
.daily-bulletin p{font-size:11px;color:#aaa;line-height:1.58;margin:0}
.news-opening{border-bottom:1px solid #393939;padding-bottom:12px}
@media(max-width:580px){
 .belt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .belt-slot{min-height:97px}
 .collection-toolbar{grid-template-columns:1fr 1fr;gap:8px;padding:10px}
 .collection-toolbar input,.collection-toolbar select{font-size:11px}
 .trade-two-col{grid-template-columns:1fr}
 .trade-give .card{max-width:340px;margin:0 auto}
 .trade-header h2{font-size:18px}
 .trade-offer{padding:12px}
 .mini-title strong{font-size:11px}
 .mini-values{min-width:68px}
 .mini-qty{font-size:10px}
 .wallet-hero h1{font-size:34px}
 .deposit-form button{width:100%}
}
@media(max-width:390px){
 .collection-mini summary{gap:6px;padding:8px 7px}
 .mini-values{min-width:57px}
 .mini-emoji{width:29px;height:29px;font-size:20px}
 .mini-title strong{font-size:10px}
 .trade-want{padding:10px}
 .arena-chat-head .chip{display:none}
}


/* Level-gated Ranked / Market progression and itemized match rewards */
.rank-unlock-panel .unlock-step{transition:background .2s}
.rank-unlock-panel .unlock-step:has(span){border-radius:3px}
.menu-tile.menu-market.is-locked .menu-symbol,.menu-tile.menu-ranked.is-locked .menu-symbol{color:#6e6e6e}
.menu-tile.is-locked{opacity:.53;filter:grayscale(.85);background:#202020;border-color:#373737}
.menu-tile.is-locked small{color:#b2a6a6;font-size:10px;letter-spacing:.3px}
.match-outcome-ledger{margin:19px auto 24px;text-align:left;border:1px solid #58645c;border-radius:13px;background:#151b18;overflow:hidden;max-width:650px;box-shadow:0 6px 22px #0005}
.outcome-heading{padding:16px 17px 14px;background:#222b25;border-bottom:1px solid #3d5744}
.outcome-heading h3{margin:0 0 6px;font-size:14px;color:#8cf0af;letter-spacing:.65px;font-weight:900}
.outcome-heading p{margin:0!important;font-size:11px!important;line-height:1.5!important;color:#b2c7b8}
.outcome-lines{display:flex;flex-direction:column;padding:5px 13px}
.outcome-line{display:flex;align-items:center;gap:11px;border-bottom:1px solid #344339;padding:12px 3px;min-width:0}
.outcome-line:last-child{border-bottom:0}
.outcome-icon{font-size:22px;line-height:1;min-width:27px;text-align:center}
.outcome-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.outcome-label strong{font-size:12px;color:#e4ebe5;line-height:1.25}
.outcome-label small{font-size:10px;color:#adbbaf;line-height:1.5;overflow-wrap:anywhere}
.outcome-line>b{font-size:12px;flex-shrink:0;color:#dbddd7;text-align:right;max-width:37%;overflow-wrap:anywhere}
.outcome-line.gain>b{color:#86f0ac}
.outcome-line.loss>b{color:#ff7c82}
.outcome-line.neutral>b{color:#cfc8dc}
.new-unlocks{display:flex;flex-direction:column;gap:8px;padding:14px;border-top:1px solid #4c684e;background:#222d24}
.new-unlock{display:flex;align-items:center;gap:10px;padding:12px;background:#33321d;border:1px solid #b19641;border-radius:9px;box-shadow:0 0 11px #d6ae3c2d;animation:rewardAppear .45s ease-out both}
.new-unlock>span{font-size:24px}
.new-unlock>div{display:flex;flex-direction:column;gap:5px}
.new-unlock strong{color:#ffdb7d;font-size:12px;font-weight:900;letter-spacing:.35px}
.new-unlock small{color:#e5d8aa;font-size:11px;line-height:1.45}
@keyframes rewardAppear{from{transform:translateY(7px);opacity:0}to{transform:translateY(0);opacity:1}}
.outcome-progress{font-size:11px!important;text-align:center;color:#a8b5ab!important;margin:0!important;padding:12px 14px;border-top:1px solid #334839}
.ledger-loss{border-color:#7c434a;background:#231416}
.ledger-loss .outcome-heading{background:#3b1c23;border-color:#70323b}
.ledger-loss .outcome-heading h3{color:#ff858c}
.ledger-loss .outcome-heading p{color:#d2a5ab}
.ledger-loss .outcome-line{border-bottom-color:#4d3036}
.ledger-loss .outcome-label strong{color:#ecd3d5}
.ledger-loss .outcome-label small{color:#bd9da3}
.ledger-draw{background:#22212a;border-color:#5b5b6e}
.ledger-draw .outcome-heading{background:#2a2833;border-color:#5a546a}
.ledger-draw .outcome-heading h3{color:#d7d1ea}
.ledger-draw .outcome-heading p{color:#b5b0c5}
@media(max-width:430px){.match-outcome-ledger{margin:15px 0;padding:0}.outcome-line{gap:7px}.outcome-label strong{font-size:11px}.outcome-line>b{font-size:11px}.outcome-heading{padding:14px}}


/* Central-time live status and original daily version progression */
.home-live-clock{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin:3px 0 19px;background:linear-gradient(100deg,#1a2220,#222126,#1c2221);border:1px solid #3f534a;border-radius:10px;box-shadow:0 1px 12px #0002}
.home-clock-label{color:#a0c1af;font-size:10px;letter-spacing:1.1px;font-weight:900}
.home-live-clock strong{font-size:21px;color:#f0d98a;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.home-clock-date{font-size:11px;color:#aeb6b0}
.home-live-clock:before{content:'';width:7px;height:7px;border-radius:50%;background:#5fdb9c;box-shadow:0 0 7px #65e09c}
.card-point-value,.table-card-points{font-size:10px;font-weight:900;color:#e8d187;background:#42381d;border:1px solid #74602c;border-radius:5px;padding:6px 8px;line-height:1.35;margin:7px 0}
.table-card-points{font-size:9px;padding:5px}
.shop-header{display:flex;justify-content:space-between;align-items:center;gap:14px;background:linear-gradient(120deg,#252b27,#212125);border:1px solid #405649;padding:17px 19px;border-radius:12px;margin-bottom:15px}
.shop-eyebrow{color:#84dbaa;letter-spacing:1.1px;font-weight:900;font-size:10px}
.shop-header h2{font-size:23px;margin:6px 0 8px}
.shop-header p{color:#afbbb3;font-size:12px;line-height:1.5;margin:0}
.shop-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.shop-tabs button{border:1px solid #444;background:#252525;color:#aaa;font-weight:850;font-size:11px;letter-spacing:.5px;border-radius:8px;padding:11px 15px;transition:all .17s ease}
.shop-tabs button.selected{color:#e9d391;background:#342d1b;border-color:#d6ac53}
.shop-tabs button:hover{border-color:#8b8066;color:#e5e5e5}
.shop-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,280px);align-items:start;gap:16px}
.shop-catalog{min-width:0}
.shop-toolbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;padding:13px;background:#202020;border:1px solid #3e3e3e;border-radius:10px;margin-bottom:12px}
.shop-toolbar>div{display:flex;flex-direction:column;min-width:0;gap:7px}
.shop-toolbar label{font-size:9px;font-weight:900;letter-spacing:1px;color:#aeb8b0}
.shop-toolbar input,.shop-toolbar select{height:36px;min-width:0;width:100%;max-width:100%;background:#151515;color:#ddd;border:1px solid #484848;font-size:11px;padding:6px 8px}
.shop-results-label{display:flex;align-items:center;justify-content:space-between;gap:7px;color:#939e96;font-size:10px;margin:11px 3px}
.shop-results-label strong{font-size:11px;color:#c6d3c7;letter-spacing:.6px}
.shop-product-list{display:flex;flex-direction:column;gap:6px;max-height:680px;overflow-y:auto;padding-right:3px;scrollbar-width:thin}
.shop-product{border:1px solid #454545;background:#202020;border-radius:8px;overflow:hidden;flex:0 0 auto;transition:background .13s}
.shop-product summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 11px;min-height:57px}
.shop-product summary::-webkit-details-marker{display:none}
.shop-product[open]{background:#262626}
.shop-product[open] summary{border-bottom:1px solid #3c3c3c}
.shop-product summary:hover{background:#303030}
.shop-product-icon{font-size:26px;width:37px;height:37px;flex-shrink:0;background:#151515;border:1px solid #444;border-radius:8px;display:flex;justify-content:center;align-items:center}
.shop-product-title{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.shop-product-title strong{color:#f0f0f0;font-size:12px;overflow-wrap:anywhere;line-height:1.3}
.shop-product-title small{color:#a1a1a1;font-size:10px}
.shop-product-price{font-size:12px;font-weight:900;color:#e1c57b;white-space:nowrap}
.shop-product-caret{color:#929292;transition:transform .16s}
.shop-product[open] .shop-product-caret{transform:rotate(180deg)}
.shop-product-details{padding:12px 14px;background:#1b1b1b}
.shop-product-subtitle{font-size:11px;color:#b7c1b8;line-height:1.6;margin:0 0 10px}
.shop-detail-meta .slip{font-size:11px}
.shop-detail-meta .slip>div{padding:4px 0}
.shop-power-line{color:#cbb9e2;font-size:11px;line-height:1.55;padding:7px 9px;margin:5px 0;background:#292332;border:1px solid #4f3c5b;border-radius:6px;cursor:help}
.shop-power-line:hover{border-color:#a576cb}
.shop-buy-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;border-top:1px solid #393939;padding-top:13px}
.shop-cost{font-size:15px;font-weight:900;color:#e8d18c}
.shop-cart-panel{position:sticky;top:14px;background:#252525;border:1px solid #54504a;border-radius:11px;padding:14px;max-height:740px;overflow:auto}
.shop-cart-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #464646;padding-bottom:9px;margin-bottom:9px}
.shop-cart-heading h3{font-size:14px;margin:0}
.shop-cart-heading small{font-size:10px;color:#bcb7a7}
.shop-cart-line{display:flex;justify-content:space-between;gap:7px;align-items:center;border-bottom:1px solid #3d3d3d;padding:8px 0}
.shop-cart-line>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.shop-cart-line strong{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.shop-cart-line small{font-size:9px;color:#aaa}
.shop-cart-actions{display:flex;gap:3px}
.shop-cart-actions .btn{min-width:27px;padding:5px 8px}
.shop-cart-totals{margin:13px 0}
.shop-cart-totals>div{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:6px 0}
.shop-cart-total{font-size:14px!important;border-top:1px solid #555;margin:7px 0 0;padding-top:11px!important;color:#f1d388}
.shop-cart-panel>.btn{width:100%;margin:6px 0}
.shop-hours-note{font-size:11px;color:#888;margin-top:14px}
/* One-tap team selection, independent of full card preview artwork */
.deck-builder{display:flex;flex-direction:column;gap:16px}
.deck-builder-header{display:flex;align-items:center;justify-content:space-between;gap:15px;background:linear-gradient(125deg,#22342a,#22212b);border:1px solid #4a6551;border-radius:13px;padding:18px}
.deck-eyebrow{color:#e1c97e;letter-spacing:1.2px;font-size:10px;font-weight:900}
.deck-builder-header h2{font-size:23px;margin:8px 0}
.deck-builder-header p{font-size:12px;color:#b6c7b9;line-height:1.6;margin:0}
.deck-ready-count{color:#aef2c8;border:1px solid #4a9b72;background:#244334;padding:9px;border-radius:7px;font-size:12px;font-weight:900;white-space:nowrap}
.deck-team-panel,.deck-card-browser,.deck-stake-panel{border:1px solid #494949;border-radius:12px;background:#222;padding:15px}
.deck-team-panel h3,.deck-card-browser h3,.deck-stake-panel h3{font-size:13px;margin:0 0 11px;letter-spacing:.6px}
.deck-team-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.deck-slot{min-height:106px;display:flex;align-items:stretch;justify-content:center;background:#181b19;border:1px dashed #58635a;border-radius:9px;overflow:hidden}
.deck-slot.filled{border:1px solid #7b927f;background:#263b2e}
.deck-slot button{width:100%;background:transparent;border:0;color:#ddd;padding:9px 5px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.deck-slot button:hover{background:#344e3d}
.deck-slot strong{font-size:10px;text-align:center;overflow-wrap:anywhere}
.deck-slot small{font-size:9px;text-align:center;color:#aaacaa}
.deck-slot-emoji{font-size:29px;line-height:1}
.deck-slot-remove{font-size:8px;color:#ffaeae;font-weight:900;letter-spacing:.5px}
.deck-slot-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#868f87;padding:8px;text-align:center}
.deck-slot-empty>span{font-size:25px}
.deck-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.deck-browser-heading p{font-size:10px;color:#aaa;margin:0}
.deck-browser-filters{display:flex;gap:7px;flex-wrap:wrap}
.deck-browser-filters input,.deck-browser-filters select{font-size:11px;background:#171717;color:#d7d7d7;border:1px solid #515151;padding:8px;border-radius:6px;min-width:125px;max-width:175px}
.deck-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;max-height:515px;overflow-y:auto;padding:3px}
.deck-pick-card{position:relative;text-align:left;display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:5px 7px;background:#1c1c1d;border:1px solid #525252;border-radius:9px;padding:10px;min-width:0;min-height:98px;transition:transform .15s ease,background .15s ease,border-color .15s}
.deck-pick-card:hover:not(:disabled){transform:translateY(-2px);background:#2a2a2c;border-color:#8b967f}
.deck-pick-card:disabled{opacity:.47}
.deck-pick-card.deck-picked{background:#1b3b2a;box-shadow:0 0 10px #46ae6a45;outline:2px solid #61c98c;outline-offset:1px}
.deck-pick-art{grid-row:1/span 2;font-size:33px;text-align:center}
.deck-pick-title{display:flex;flex-direction:column;gap:5px;min-width:0}
.deck-pick-title strong{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.deck-pick-title small{color:#a9a9a9;font-size:9px}
.deck-pick-stats{display:flex;flex-direction:column;gap:4px;align-self:start}
.deck-pick-stats b{font-size:10px;color:#c3e5cb}
.deck-pick-stats small{font-size:9px;color:#cfc19a;white-space:nowrap}
.deck-pick-badge{font-size:9px;letter-spacing:.3px;color:#87dbaa;font-weight:900;grid-column:2/span 2}
.deck-pick-power{grid-column:1/span 3;font-size:9px;color:#b8a5d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-stake-panel{border-color:#655346;background:#292521}
.deck-stake-panel h3{color:#e8cc9a}
.deck-stake-panel p{font-size:11px;line-height:1.6;color:#bfb5a9}
.deck-bet-options{display:flex;flex-wrap:wrap;gap:7px}
.deck-bet-card{border:1px solid #5a514a;background:#262321;color:#d3d3d3;font-size:11px;font-weight:700;padding:9px 11px;border-radius:7px;cursor:pointer}
.deck-bet-card.picked{border-color:#dda94e;color:#ffe0a2;background:#43351e}
.deck-bet-card:hover{border-color:#d3a054}
.deck-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#1e2722;border:1px solid #536d5d;border-radius:12px;padding:15px}
.deck-bottom-bar strong{font-size:12px;color:#a2eab7}
.deck-bottom-bar p{color:#a8b2a9;font-size:10px;margin:5px 0 0}
.deck-bottom-bar .btn{white-space:normal;min-width:190px}
.ccr-display{margin-top:16px;padding:13px;background:#18382a;border:1px solid #4d956a;border-radius:9px;display:grid;grid-template-columns:1fr auto;gap:5px 10px}
.ccr-display>span{font-size:10px;color:#92ddb0;font-weight:900;letter-spacing:.7px}
.ccr-display>strong{font-size:22px;color:#99f3b4}
.ccr-display>small{grid-column:1/-1;color:#b0cfb8;font-size:10px}
.ccr-track{grid-column:1/-1;height:8px;background:#14271b;border-radius:7px;border:1px solid #457754;overflow:hidden}
.ccr-track>div{background:linear-gradient(90deg,#44a875,#8cdb92);height:100%;transition:width .25s ease}
.outcome-none{font-size:12px;color:#b1afbf;margin:14px 0;text-align:center}
/* Profiles make opponent identity and relative experience easy to compare */
.battle-account-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:9px;align-items:stretch;margin-bottom:17px}
.battle-account{border:1px solid #4d4d4d;background:#242424;border-radius:10px;padding:12px;display:flex;gap:8px;min-width:0;align-items:flex-start}
.battle-account.account-own{border-color:#467961;background:#20372a}
.battle-account.account-rival{border-color:#985659;background:#382528}
.battle-account-marker{font-size:26px}
.battle-account-name{flex:1;display:flex;flex-direction:column;min-width:0;gap:5px}
.battle-account-name>small{font-size:9px;letter-spacing:1px;font-weight:900;color:#a5a5a5}
.battle-account-name strong{font-size:15px;color:#f4f4f4;overflow-wrap:anywhere}
.battle-account-name>span{font-size:10px;font-weight:700;color:#cebca2}
/* Compact, readable ranked tier artwork in the battle header, no visible rank text. */
.battle-account-name>.battle-account-level{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:30px}
.rank-emblem{--rank-ink:#a4a7b1;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border:1px solid currentColor;border-radius:9px;color:var(--rank-ink);background:linear-gradient(155deg,#32353b,#161719);box-shadow:inset 0 1px 0 #ffffff25,0 2px 8px #0006}
.rank-emblem svg{display:block;width:30px;height:30px}
.rank-emblem .rank-shield{fill:#ffffff08;stroke:currentColor;stroke-width:2}
.rank-emblem .rank-glyph{filter:drop-shadow(0 0 1px currentColor)}
.rank-emblem.rank-unranked{--rank-ink:#96999e}
.rank-emblem.rank-copper{--rank-ink:#cf875d}
.rank-emblem.rank-bronze{--rank-ink:#d6a16a}
.rank-emblem.rank-silver{--rank-ink:#d2dae8}
.rank-emblem.rank-gold{--rank-ink:#f7c764}
.rank-emblem.rank-platinum{--rank-ink:#83dbe4}
.rank-emblem.rank-emerald{--rank-ink:#67df9c}
.rank-emblem.rank-diamond{--rank-ink:#97baff}
.rank-emblem.rank-champion{--rank-ink:#efb0ff}
@media(max-width:400px){.rank-emblem{width:30px;height:30px;flex-basis:30px;border-radius:7px}.rank-emblem svg{width:27px;height:27px}}

.battle-account-extras{display:flex;flex-wrap:wrap;gap:6px;max-width:40%;justify-content:flex-end}
.battle-account-extras span{border:1px solid #585858;border-radius:6px;font-size:9px;padding:5px;color:#d5d5d5}
.versus-account{font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;color:#ecd484;padding:0 2px}
/* Common: no rarity border. Uncommon: gray border (corrected rarity order). */
.card.rarity-common,.table-card.rarity-common,.reward-card.rarity-common,.shop-product.rarity-common,.deck-pick-card.rarity-common,.collection-mini.rarity-common{border:1px solid transparent!important;box-shadow:none!important}
.card.rarity-uncommon,.table-card.rarity-uncommon,.reward-card.rarity-uncommon,.shop-product.rarity-uncommon,.deck-pick-card.rarity-uncommon,.collection-mini.rarity-uncommon{border:1.5px solid #8d959b!important;box-shadow:0 0 2px #9ba5ab30!important}
.deck-pick-card.deck-picked{outline:2px solid #67cd95!important;box-shadow:0 0 10px #4ab86d55!important}
.shop-product[hidden],.deck-pick-card[hidden]{display:none!important}
@media(max-width:850px){.shop-main{grid-template-columns:1fr}.shop-cart-panel{position:relative;top:auto;max-height:none}.shop-product-list{max-height:550px}}
@media(max-width:590px){
 .home-live-clock{gap:7px;padding:12px}
 .home-live-clock strong{font-size:18px}
 .shop-toolbar{grid-template-columns:1fr 1fr}
 .shop-toolbar>div:first-child{grid-column:1/-1}
 .deck-browser-heading{align-items:stretch;flex-direction:column}
 .deck-browser-filters input,.deck-browser-filters select{flex:1;max-width:none;min-width:100px}
 .deck-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .deck-team-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
 .deck-builder-header,.deck-bottom-bar{align-items:flex-start;flex-direction:column}
 .deck-ready-count{align-self:flex-end}
 .deck-bottom-bar .btn{width:100%}
 .battle-account-match{grid-template-columns:1fr}
 .versus-account{padding:3px}
 .battle-account-extras{max-width:47%}
}
@media(max-width:370px){.deck-card-grid{grid-template-columns:1fr}.shop-product-title strong{font-size:11px}.shop-tabs button{padding:9px 10px}.deck-pick-card{min-height:82px}.home-clock-date{font-size:10px}}


/* Shop departments are distinct, instantly navigable pages within the shop */
.shop-tabs{position:relative;z-index:2}
.shop-tabs button[aria-current=page]{border-color:#e0c06c;background:#44351c;color:#ffe4a5;box-shadow:0 0 0 1px #c2a15455}
.shop-tabs button:not([aria-current=page]){cursor:pointer}
.shop-department-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 14px;padding:14px 17px;background:linear-gradient(105deg,#222923,#1d1d1f);border:1px solid #4d6550;border-radius:10px}
.shop-department-header>div{min-width:0}
.shop-department-header span{display:block;color:#90cba4;font-weight:850;font-size:9px;letter-spacing:1.15px}
.shop-department-header h3{font-size:18px;line-height:1.3;color:#f2ead5;margin:5px 0}
.shop-department-header p{color:#abbcb0;font-size:11px;margin:0;line-height:1.5}
.shop-department-header>strong{font-size:11px;color:#eed488;background:#352e1d;border:1px solid #6f5e39;border-radius:7px;padding:8px 10px;white-space:nowrap}
/* Compact CCR: this is only a Casual performance percentage, never card XP */
.ccr-display{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;max-width:176px;margin-top:12px;padding:8px 10px;border-radius:7px}
.ccr-display>span{font-size:10px;letter-spacing:1px;font-weight:900}
.ccr-display>strong{font-size:15px;line-height:1}
.ccr-display .ccr-track{height:4px;grid-column:1/-1;border:0;margin:0}
/* Keep daily news genuinely brief */
.news-panel.news-brief{padding:14px 16px;margin-top:18px}
.news-brief-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px}
.news-brief-heading h3{margin:0;font-size:13px;display:flex;align-items:center;gap:6px}
.news-brief-heading>span{font-size:10px;color:#9da5a1}
.news-brief .daily-bulletins{margin-top:9px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.news-brief .daily-bulletin{padding:10px 12px;border-radius:7px}
.news-brief .daily-bulletin-type{font-size:8px}
.news-brief .daily-bulletin h4{font-size:11px;margin:4px 0}
.news-brief .daily-bulletin p{font-size:10px;line-height:1.5}
.news-brief .news-opening,.news-brief .news-meta{display:none}
/* Player profiles: always-visible quick stats, plus tap-to-expand career stats */
.battle-account{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.battle-account-overview{display:flex;gap:8px;align-items:flex-start;min-width:0}
.battle-account-name{min-width:0}
.battle-account-extras{width:100%;max-width:none;justify-content:flex-start;gap:5px}
.battle-account-extras>span{font-size:9px;padding:5px 7px;background:#12171533;border-radius:5px}
.battle-account-expanded{width:100%;padding-top:8px;border-top:1px solid #7775;margin-top:auto}
.battle-account-expanded summary{font-size:9px;letter-spacing:.8px;font-weight:900;color:#cdd0c7;cursor:pointer;padding:4px 0}
.battle-account-expanded[open] summary{color:#f0d79c}
.battle-account-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.battle-account-details>div{background:#14141449;border:1px solid #7774;padding:8px;border-radius:6px;min-width:0;display:flex;flex-direction:column;gap:4px}
.battle-account-details small{font-size:9px;color:#aaadab}
.battle-account-details strong{font-size:10px;line-height:1.4;color:#e2e5e0;overflow-wrap:anywhere}
@media(max-width:590px){
 .shop-department-header{padding:12px 14px}
 .shop-department-header h3{font-size:16px}
 .shop-department-header>strong{font-size:10px;padding:6px 8px}
 .ccr-display{max-width:160px}
 .battle-account-details{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* In-match round tracker and full accessible list of card abilities */
.match-round{display:inline-flex;align-items:center;gap:7px;border:1px solid #ba9b4d;border-radius:7px;background:linear-gradient(120deg,#3c3120,#27231d);color:#e9d397;padding:6px 10px;font-size:11px;font-weight:900;letter-spacing:.85px;white-space:nowrap;box-shadow:0 0 10px #b18b422c}
.match-round strong{font-size:16px;color:#fff0b4;font-weight:950;font-variant-numeric:tabular-nums}
.table-power-list{max-height:155px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6c5486 #241e28;padding:3px 3px 3px 0;gap:4px}
.table-power-list .skill-tooltip-target{cursor:help;line-height:1.45;background:#292531;border:1px solid #483853;padding:4px 6px;border-radius:5px;color:#d7c0ee}
.table-power-list .skill-tooltip-target:hover,.table-power-list .skill-tooltip-target:focus{color:#f6d6ff;border-color:#ae82d7;background:#433050;outline:none;box-shadow:0 0 9px #a46ace55}
.table-skill-hover{display:block;width:100%;min-width:0;border-radius:5px;cursor:help}
.table-skill-hover .table-mini{width:100%;height:100%;white-space:normal;word-break:break-word}
.table-skill-hover:hover .table-mini,.table-skill-hover:focus-visible .table-mini{border-color:#d097ff;box-shadow:0 0 11px #ac6ae877}
.table-skill-hover:focus-visible{outline:2px solid #d097ff;outline-offset:2px}
@media(max-width:580px){.match-round{order:0;padding:5px 8px}.match-round strong{font-size:14px}.table-power-list{max-height:125px}}


/* Battle actions live directly in the in-card purple power list (no separate Powers dropdown). */
.table-power-list{display:flex;flex-direction:column;gap:5px;max-height:178px;overflow-y:auto;overflow-x:hidden;padding:3px 4px 3px 1px;scrollbar-width:thin;scrollbar-color:#8a5fa8 #201b26}
.table-power-list .table-ability-wrap,.table-power-list .table-ability-readonly{display:block;width:100%;min-width:0;border-radius:6px;box-sizing:border-box}
.table-power-list .table-ability-wrap{cursor:help}
.table-power-list .table-ability-row,.table-power-list .table-ability-readonly{font-family:inherit;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.05px;color:#e2c2f1;background:#2c2335;border:1px solid #67487b;border-radius:6px;padding:9px 8px;text-align:left;box-shadow:inset 0 0 0 1px #6f518423}
.table-power-list .table-ability-row{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:100%;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,box-shadow .15s}
.table-power-list .table-ability-readonly{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:help}
.table-power-list .table-ability-row>span,.table-power-list .table-ability-readonly>span{overflow-wrap:anywhere;min-width:0}
.table-power-list .table-ability-row small,.table-power-list .table-ability-readonly small{color:#b9a3c8;font-size:8px;font-weight:850;letter-spacing:.3px;white-space:nowrap}
.table-power-list .table-ability-wrap:hover .table-ability-row:not(:disabled),.table-power-list .table-ability-wrap:focus-within .table-ability-row:not(:disabled),.table-power-list .table-ability-wrap:focus-visible .table-ability-row:not(:disabled){background:#453151;border-color:#d397ef;box-shadow:0 0 11px #bd71ed73;color:#fff1ff}
.table-power-list .table-ability-wrap:focus-visible{outline:2px solid #d9a0ff;outline-offset:2px}
.table-power-list .table-ability-row:disabled{cursor:not-allowed;opacity:.52}
.table-power-list .table-ability-row.ability-unavailable{border-color:#5f5163;background:#29212f}
.table-power-list .table-ability-readonly:hover,.table-power-list .table-ability-readonly:focus-visible{background:#392744;border-color:#c788e4;box-shadow:0 0 8px #965dc45a;outline:none}
.table-power-list .table-no-abilities{display:block;font-size:10px;color:#9b95a2;padding:7px 5px}
@media(max-width:580px){.table-power-list{max-height:178px}.table-power-list .table-ability-row,.table-power-list .table-ability-readonly{font-size:11px;padding:10px 8px;min-height:38px}}

/* Ranked record: only competitive match results count toward these metrics. */
.playtest-build-label{font-size:10px;letter-spacing:1.05px;color:#9ea6ac;font-weight:750;text-align:center;padding:2px 0 11px}
.ranked-wl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:15px 0 12px}
.ranked-wl-stats>div{border:1px solid #765258;background:#1d1b22;border-radius:9px;min-width:0;padding:12px 8px;display:flex;flex-direction:column;gap:7px}
.ranked-wl-stats small{font-size:9px;letter-spacing:.6px;color:#d5b4bd;font-weight:850}
.ranked-wl-stats strong{font-size:24px;line-height:1;color:#f6e5f5;font-variant-numeric:tabular-nums}
@media(max-width:480px){.ranked-wl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ranked-wl-stats strong{font-size:22px}}

/* VAULTBOUND R8: unified rarity frames in every card surface.
   Based on the established website palette: common neutral, uncommon gray,
   rare green, epic blue, legendary violet, mythic red, secret gold.
   Shop packs and boxes deliberately carry no rarity class. */
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline)[class*="rarity-"]{
  position:relative;
  isolation:isolate;
  border:2px solid var(--card-rarity-line,#494d55)!important;
  box-shadow:var(--card-rarity-shadow,none)!important;
  border-radius:9px;
}
/* Commons never have a rarity frame, rim, shadow or sparkles. Transparent
   borders reserve layout space without introducing a visible outline. */
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-common{
  --card-rarity-line:transparent;
  --card-rarity-shadow:none;
  border-color:transparent!important;
  box-shadow:none!important;
}
/* Selected Common cards use their filled background and SELECTED text, not a ring. */
.deck-pick-card.rarity-common.deck-picked{outline-color:transparent!important;outline-style:none!important}

:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-uncommon{--card-rarity-line:#939ca3;--card-rarity-shadow:0 0 5px #afb8bf33;}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-rare{--card-rarity-line:#37c87a;--card-rarity-shadow:0 0 9px #39cf7966, inset 0 0 6px #27b6682b;}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-epic{--card-rarity-line:#458fff;--card-rarity-shadow:0 0 12px #4596ff77, inset 0 0 8px #3674eb33;}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-legendary{--card-rarity-line:#c07bff;--card-rarity-shadow:0 0 13px #b35afc9c, 0 0 24px #a74dff55, inset 0 0 10px #9b55ff36;}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-mythic{--card-rarity-line:#fa4b59;--card-rarity-shadow:0 0 14px #ff365c9e, 0 0 26px #fd2e4f5c, inset 0 0 12px #b72a4540;}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-secret{--card-rarity-line:#ffd05b;--card-rarity-shadow:0 0 15px #ffcb57c9, 0 0 29px #efb73f87, inset 0 0 16px #ffdf6744;}

/* Keep selected team cards clearly selected without replacing their rarity color. */
.deck-pick-card.deck-picked{outline-color:var(--card-rarity-line,#67cd95)!important;outline-offset:2px}
.deck-slot.filled{border-style:solid}
.shop-cart-line[class*="rarity-"],.marketline[class*="rarity-"]{padding:8px 10px;margin:5px 0}
.trade-wanted[class*="rarity-"]{border-radius:7px}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-secret::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(circle at 12% 17%,#fffcd8 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 74% 14%,#fff1a0 0 1px,transparent 2px),
    radial-gradient(circle at 88% 53%,#ffe474 0 1.8px,transparent 3px),
    radial-gradient(circle at 27% 79%,#fff6bc 0 1px,transparent 2px),
    radial-gradient(circle at 64% 91%,#ffd65a 0 1.3px,transparent 2.5px);
  background-repeat:no-repeat;
  animation:vaultboundRaritySparkles 4.5s ease-in-out infinite alternate;
}
:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-secret>*{position:relative;z-index:2}
@keyframes vaultboundRaritySparkles{
  0%{opacity:.45;transform:translateY(2px)}
  48%{opacity:1;transform:translateY(-2px)}
  100%{opacity:.62;transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){:is(.card,.table-card,.reward-card,.shop-product,.collection-mini,.deck-pick-card,.deck-slot.filled,.belt-slot.filled,.deck-bet-card,.trade-wanted,.shop-cart-line,.marketline).rarity-secret::after{animation:none;opacity:.85}}


/* R10 — descriptive menu subtitles and explicit in-match surrender. */
.menu-tile-bottom .menu-tile-note{
  display:block;
  margin-top:4px;
  color:#aeb6b3;
  font-size:9px;
  font-weight:750;
  letter-spacing:.65px;
  line-height:1.35;
  text-transform:uppercase;
}
.menu-tile.is-locked .menu-tile-note{color:#929996;opacity:.75}
.menu-tile.menu-play .menu-tile-bottom strong,
.menu-tile.menu-market .menu-tile-bottom strong{overflow-wrap:break-word}
.match-heading .match-forfeit-btn{
  background:#4a1e26;
  color:#ffdce0;
  border:1px solid #c25a6b;
  font-size:10px;
  font-weight:850;
  letter-spacing:.35px;
  padding:9px 12px;
  min-height:35px;
  white-space:nowrap;
  margin-left:auto;
}
.match-heading .match-forfeit-btn:hover:not(:disabled){background:#6e2935;border-color:#f08c96}
@media(max-width:440px){
 .match-heading .match-forfeit-btn{width:100%;margin-left:0}
 .menu-tile-bottom .menu-tile-note{font-size:8px}
}

/* R12: notification inbox — visible messages, individual ACCEPT dismissal. */
.notifications-list{display:flex;flex-direction:column;gap:0}
.notification-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid #454545}
.notification-item:last-child{border-bottom:0}
.notification-copy{flex:1;min-width:0}
.notification-copy strong{font-size:13px;letter-spacing:.15px;color:#f1ead7;overflow-wrap:anywhere}
.notification-copy p{margin:7px 0 0;line-height:1.6;overflow-wrap:anywhere}
.notification-item>.btn{min-width:82px;flex:0 0 auto;font-size:11px}
.unread-dot{top:-4px;right:-4px;width:12px;height:12px;box-sizing:border-box;z-index:2;box-shadow:0 0 0 1px #691f20,0 0 7px #f34e5099}
@media(max-width:440px){.notification-item{align-items:flex-start;flex-direction:column;gap:10px}.notification-item>.btn{align-self:flex-end}}

/* R13: in-progress battles cannot navigate to other menus. */
.match-nav-locked{justify-content:space-between;align-items:center;gap:8px}
.match-nav-locked>span:first-child{font-size:11px;font-weight:850;letter-spacing:.45px;color:#f0b5ad;line-height:1.5}
@media(max-width:600px){.match-nav-locked>span:first-child{font-size:10px}}
/* Display the existing orange progression checklist beneath inbox messages. */
.notifications-list+.rank-unlock-panel{margin-top:16px}

/* R14: freshly generated pack pulls get a gold, tilted, pulsing NEW! stamp. */
.reward-card .pack-new-tag{
 position:absolute!important;
 top:-9px;
 left:-12px;
 z-index:10!important;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:6px 12px;
 border:2px solid #fff4ad;
 border-radius:7px;
 background:linear-gradient(145deg,#fff2a6 0%,#ffc640 41%,#c98210 100%);
 box-shadow:0 2px 0 #82500c,0 0 13px #ffd15b99,0 0 23px #ffcc4273;
 color:#3c2606;
 font-size:15px;
 font-weight:950;
 letter-spacing:.45px;
 line-height:1;
 text-shadow:0 1px 0 #fff2be;
 pointer-events:none;
 transform-origin:center;
 animation:vaultNewStampPulse 1.45s ease-in-out infinite;
}
@keyframes vaultNewStampPulse{
 0%,100%{transform:rotate(-12deg) scale(.93);box-shadow:0 2px 0 #82500c,0 0 9px #ffd15b66}
 50%{transform:rotate(-12deg) scale(1.13);box-shadow:0 2px 0 #82500c,0 0 19px #ffe08fdd,0 0 30px #ffd34f88}
}
@media(prefers-reduced-motion:reduce){.reward-card .pack-new-tag{animation:none;transform:rotate(-12deg)}}

/* R15: level milestone progress and one-time claim messages. */
.notification-item.notification-milestone{
 background:linear-gradient(100deg,#44331656,transparent 65%);
 padding:13px 10px;
 border-left:3px solid #e4b34c;
 border-radius:5px;
}
.notification-item.notification-milestone .notification-copy strong{color:#ffd981}
.notification-item.notification-milestone>.btn{background:linear-gradient(135deg,#f5ce74,#d59f35);color:#231809;border-color:#ffde8a;font-weight:950;white-space:nowrap}
.milestone-tracker{margin-top:20px;margin-bottom:18px;border-color:#6a542c}
.milestone-tracker>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#f2d28a;font-size:14px;font-weight:850}
.milestone-tracker>summary::-webkit-details-marker{display:none}
.milestone-tracker>summary:before{content:'▸';color:#dcb75a;margin-right:5px}
.milestone-tracker[open]>summary:before{content:'▾'}
.milestone-tracker>summary span{font-size:10px;letter-spacing:.3px;color:#e0c48d;white-space:nowrap}
.milestone-tracker>p{margin:13px 0 10px;line-height:1.5}
.milestone-next{color:#e0c48d!important;font-weight:850;letter-spacing:.3px}
.milestone-tracker-list{display:flex;flex-direction:column;margin-top:8px}
.milestone-tracker-row{display:flex;gap:10px;align-items:center;border-top:1px solid #50462f;padding:10px 1px;min-width:0}
.milestone-level{min-width:53px;font-weight:900;color:#e3c481;font-size:11px}
.milestone-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.milestone-copy strong{font-size:12px;overflow-wrap:anywhere}
.milestone-copy small{color:#a5a5a5;font-size:10px;overflow-wrap:anywhere;line-height:1.3}
.milestone-status{font-size:10px;font-weight:800;letter-spacing:.2px;min-width:73px;text-align:right}
.milestone-claimed .milestone-status{color:#7dc79b}
.milestone-ready .milestone-status{color:#ffdb8a}
.milestone-locked .milestone-status{color:#7e7e7e}
.milestone-title-chip{border:1px solid #daa74e;background:#3d301b;color:#ffdc89;font-weight:900}
@media(max-width:450px){.milestone-tracker>summary{font-size:12px}.milestone-tracker>summary span{font-size:9px}.milestone-status{min-width:60px;font-size:9px}}

/* R16 official: account reset and save replacement locked. */
.setting-locked{
  border:1px solid #806044;
  background:linear-gradient(110deg,#463123,#2b2624);
  border-radius:10px;
  color:#f5d6bc;
  padding:14px;
  line-height:1.6;
  font-size:13px;
}
.setting-locked strong{color:#ffe3ba;font-weight:900;letter-spacing:.4px}
.setting-locked p{margin:6px 0 0;color:#ceb6a1;font-size:12px}
.deposit-panel .setting-locked{margin:14px 0}

/* R17 Casual matchmaking: animated queue followed by opponent reveal. */
.queue-screen{position:relative;max-width:710px;margin:12px auto 32px;padding:30px 20px 38px;border:1px solid #5b492f;border-radius:18px;background:radial-gradient(ellipse at top,#372e30 0%,#222023 55%,#161619 100%);text-align:center;overflow:hidden;min-height:395px}
.queue-eyebrow{font-size:11px;color:#efd08e;letter-spacing:1.8px;font-weight:900}
.queue-screen h1{font-size:30px;margin:20px 0 12px;letter-spacing:1.2px}
.queue-screen>.muted{line-height:1.6}
.queue-spinner{width:130px;height:130px;margin:36px auto 20px;position:relative;display:flex;align-items:center;justify-content:center;font-size:46px;color:#f6d289}
.queue-spinner .queue-orbit{position:absolute;inset:0;border:6px solid #5b452b;border-top-color:#fbd376;border-right-color:#dbab55;border-radius:50%;animation:queueOrbit 1.45s linear infinite;box-shadow:0 0 18px #f0b94d33}
.queue-spinner span{animation:queueHeart 1.8s ease-in-out infinite}
@keyframes queueOrbit{to{transform:rotate(360deg)}}
@keyframes queueHeart{50%{transform:scale(1.18)}}
.queue-search-status{display:inline-flex;align-items:center;gap:9px;margin:10px auto;padding:10px 17px;border-radius:100px;border:1px solid #655436;color:#f0d498;font-size:12px;font-weight:900;letter-spacing:1px}
.queue-search-dot{width:9px;height:9px;background:#e5b34d;border-radius:50%;box-shadow:0 0 9px #ffc553;animation:queueHeart 1.2s infinite}
.queue-elapsed{font-variant-numeric:tabular-nums;font-size:13px;color:#d0c3aa;margin:16px 0}
.queue-found-icon{font-size:55px;margin:20px 0 0;animation:queueVictory .65s cubic-bezier(.2,1.6,.45,1) both}
@keyframes queueVictory{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.queue-opponent{border:1px solid #80643b;border-radius:15px;background:#271f20;padding:22px 18px;margin:24px auto;max-width:510px;box-shadow:0 0 24px #bd903922}
.queue-avatar{margin:0 auto 12px;width:62px;height:62px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#6b4d28,#c59542);border:2px solid #f5d489;border-radius:50%;font-size:22px;font-weight:900;color:#fff5d9}
.queue-opponent h2{margin:0 0 4px}
.queue-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}
.queue-profile-stats>div{border:1px solid #65513c;background:#302624;border-radius:10px;padding:11px 5px;display:flex;flex-direction:column;gap:9px}
.queue-profile-stats span{font-size:9px;color:#c9b59a;font-weight:800;letter-spacing:.7px}
.queue-profile-stats strong{font-size:18px;color:#f5d58c;overflow-wrap:anywhere}
.queue-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.queue-actions .btn{min-width:145px}
@media(max-width:500px){.queue-screen{padding:24px 13px}.queue-screen h1{font-size:24px}.queue-profile-stats strong{font-size:14px}.queue-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.queue-spinner .queue-orbit,.queue-spinner span,.queue-search-dot{animation:none}}

/* R17: cloud account linking and save status. */
.cloud-panel{border:1px solid #4e6274;background:linear-gradient(155deg,#242c35,#222222 45%,#242424)}
.cloud-panel h3{color:#d0e5f4}
.cloud-panel>p{line-height:1.6}
.cloud-panel label{display:block;font-size:11px;letter-spacing:.65px;font-weight:850;margin:18px 0 8px}
.cloud-code-input{width:100%;box-sizing:border-box;letter-spacing:1px;font-size:13px;font-weight:750;padding:13px;border:1px solid #5e788a;border-radius:9px;color:#e9f3fc;background:#181f26;min-width:0}
.cloud-code-input:focus{outline:2px solid #94b4d2;outline-offset:1px}
.cloud-connected{display:inline-block;padding:7px 11px;border-radius:7px;background:#204436;border:1px solid #386f56;color:#9bd5b6;font-size:11px;font-weight:900;letter-spacing:.5px}
.cloud-panel .actions{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.cloud-panel .actions .btn{font-size:11px;max-width:100%}
.cloud-status{padding:11px 12px;border-radius:8px;background:#2a3740;border:1px solid #436174;color:#d7ebf6;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.cloud-panel .bad{line-height:1.5}
@media(max-width:500px){.cloud-panel .actions{flex-direction:column}.cloud-panel .actions .btn{width:100%}.cloud-code-input{font-size:11px}}

/* R19 · Battle FX. Ephemeral purely visual effects, including AI and healing. */
.table-card{overflow:visible}
.table-card .battle-vfx,.table-card .battle-vfx-origin{position:absolute!important;z-index:65!important;inset:-6px;pointer-events:none;user-select:none}
.table-card .battle-vfx{--fx-color:#f9d28b;display:block;border-radius:12px;isolation:isolate;overflow:hidden;animation:vbFxExit 1.18s ease-out both}
.battle-vfx-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--fx-color) 49%,transparent),transparent 75%);opacity:0;animation:vbFxFlash .68s ease-out .06s both}
.battle-vfx-ring{position:absolute;width:min(80%,120px);aspect-ratio:1;border:3px solid var(--fx-color);border-radius:50%;top:46%;left:50%;box-shadow:0 0 19px var(--fx-color),inset 0 0 16px var(--fx-color);opacity:0;animation:vbFxRing .88s ease-out .08s both}
.battle-vfx-symbol{position:absolute;top:43%;left:50%;font-size:clamp(31px,4vw,55px);line-height:1;filter:drop-shadow(0 0 10px var(--fx-color));opacity:0;animation:vbFxGlyph .98s cubic-bezier(.15,1.4,.43,1) .06s both}
.battle-vfx-particle{position:absolute;top:47%;left:50%;font-size:17px;color:var(--fx-color);font-style:normal;text-shadow:0 0 7px var(--fx-color);white-space:nowrap;opacity:0;animation:vbFxParticle 1.08s ease-out var(--lag,0ms) both}
.battle-vfx-slash{display:none}
.battle-vfx.vfx-attack .battle-vfx-ring{border-width:2px;box-shadow:0 0 9px #ffd18a}
.battle-vfx.vfx-attack .battle-vfx-symbol{font-size:32px}
.battle-vfx.vfx-attack .battle-vfx-slash,.battle-vfx.vfx-slash .battle-vfx-slash{display:block;position:absolute;top:45%;left:50%;width:92%;height:6px;transform-origin:center;background:linear-gradient(90deg,transparent,#ffffff,#ffe5a4,transparent);border-radius:100%;box-shadow:0 0 10px var(--fx-color);opacity:0;animation:vbFxCut .52s cubic-bezier(.15,.7,.3,1) .08s both}
.battle-vfx.vfx-slash .battle-vfx-slash{height:10px;box-shadow:0 0 21px var(--fx-color);animation-duration:.72s}
.battle-vfx.vfx-fire .battle-vfx-symbol{filter:drop-shadow(0 0 18px #ff542c);animation-name:vbFxFlame}
.battle-vfx.vfx-electric .battle-vfx-symbol{text-shadow:0 0 18px #ffe93e;animation-name:vbFxShock}
.battle-vfx.vfx-electric .battle-vfx-ring{border-style:dashed;animation-name:vbFxShockRing}
.battle-vfx.vfx-frost .battle-vfx-ring{border-style:double;border-width:7px;transform:rotate(25deg)}
.battle-vfx.vfx-poison .battle-vfx-flash{background:radial-gradient(ellipse at center,#a9fb565c 0%,#62bd4f55 37%,transparent 82%)}
.battle-vfx.vfx-water .battle-vfx-ring{border-style:double;border-width:6px;animation-name:vbFxRipple}
.battle-vfx.vfx-heal .battle-vfx-flash,.battle-vfx.vfx-nature .battle-vfx-flash{background:radial-gradient(ellipse at center,#8cffba70,transparent 77%)}
.battle-vfx.vfx-heal .battle-vfx-symbol,.battle-vfx.vfx-guard .battle-vfx-symbol{animation-name:vbFxBless}
.battle-vfx.vfx-guard .battle-vfx-ring{border-style:double;border-width:6px}
.battle-vfx.vfx-shadow .battle-vfx-flash,.battle-vfx.vfx-drain .battle-vfx-flash{background:radial-gradient(circle,#b182ff70 0%,#28113877 47%,transparent 83%)}
.battle-vfx.vfx-wind .battle-vfx-ring{border-style:dotted;border-width:5px}
.battle-vfx.vfx-earth .battle-vfx-ring{border-style:dashed;border-width:7px}
.table-card .battle-vfx-origin{inset:0;background:radial-gradient(ellipse at center,#ffe1a630,transparent 65%);border-radius:12px;animation:vbFxCaster .82s ease-in-out both}
.table-card .battle-vfx-origin.vfx-cast-strike:after{content:'⚔';position:absolute;top:36%;left:43%;font-size:31px;filter:drop-shadow(0 0 13px #ffe3b5);animation:vbFxCasterIcon .72s ease-in-out both}
.table-card .battle-vfx-origin.vfx-cast-self{background:radial-gradient(circle at center,#8dd7ff46,transparent 70%);box-shadow:inset 0 0 18px #aedfff77}
.table-center{position:relative;isolation:isolate}
.battle-vfx-center{position:absolute!important;inset:-8px 0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;z-index:50;color:var(--fx-color);text-shadow:0 0 12px var(--fx-color);background:linear-gradient(90deg,transparent,#111813ed 25%,#121d19eb 75%,transparent);border-block:1px solid var(--fx-color);animation:vbFxCenter 1.05s ease-out both}
.battle-vfx-center strong{font-size:clamp(11px,2.5vw,17px);letter-spacing:.9px;white-space:normal;overflow-wrap:anywhere;max-width:70%;line-height:1.25}
.battle-vfx-center span{font-size:clamp(20px,3vw,30px)}
.table-card.table-out:has(.battle-vfx){opacity:.95;filter:none}
@keyframes vbFxExit{0%,70%{opacity:1}100%{opacity:0}}
@keyframes vbFxFlash{0%{opacity:0;transform:scale(.4)}16%{opacity:1;transform:scale(1)}75%{opacity:.45}100%{opacity:0;transform:scale(1.25)}}
@keyframes vbFxRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-25deg)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65) rotate(40deg)}}
@keyframes vbFxRipple{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
@keyframes vbFxShockRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-35deg)}25%,48%{opacity:1}40%,65%{opacity:.2}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(40deg)}}
@keyframes vbFxGlyph{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-28deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.27) rotate(12deg)}65%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes vbFxFlame{0%{opacity:0;transform:translate(-50%,-15%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}68%{opacity:1;transform:translate(-50%,-66%) scale(1.4)}100%{opacity:0;transform:translate(-50%,-105%) scale(.6)}}
@keyframes vbFxShock{0%,15%,45%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%,38%,53%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes vbFxBless{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}78%{opacity:.88;transform:translate(-50%,-64%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
@keyframes vbFxParticle{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.4)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-79px) scale(1.25)}}
@keyframes vbFxCut{0%{opacity:0;transform:translate(-50%,-50%) rotate(-43deg) scaleX(.1)}33%{opacity:1;transform:translate(-50%,-50%) rotate(-43deg) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-43deg) scaleX(1.22)}}
@keyframes vbFxCaster{0%{opacity:0;transform:scale(.95)}25%{opacity:1;transform:scale(1.025)}100%{opacity:0;transform:scale(1)}}
@keyframes vbFxCasterIcon{0%{opacity:0;transform:translateX(-26px) scale(.5)}40%{opacity:.9;transform:translateX(2px) scale(1.1)}100%{opacity:0;transform:translateX(35px) scale(.6)}}
@keyframes vbFxCenter{0%{opacity:0;transform:scaleX(.7)}18%{opacity:1;transform:scaleX(1)}76%{opacity:.94}100%{opacity:0;transform:scaleX(1.04)}}
@media(max-width:580px){.battle-vfx-center{gap:5px}.battle-vfx-center strong{font-size:11px;letter-spacing:0}.battle-vfx-particle{font-size:12px}}
@media(prefers-reduced-motion:reduce){.battle-vfx,.battle-vfx *,.battle-vfx-origin,.battle-vfx-center{animation:none!important}.battle-vfx,.battle-vfx-center,.battle-vfx-flash,.battle-vfx-symbol{opacity:.75!important}.battle-vfx-ring,.battle-vfx-particle,.battle-vfx-slash{display:none!important}}

/* R20 · Cinematic account-versus intro. Full profile reveal, no card spoilers. */
.versus-intro{
 --vs-accent:#f5bd68;
 position:relative;isolation:isolate;box-sizing:border-box;min-height:100vh;min-height:100dvh;
 display:flex;align-items:center;justify-content:center;overflow:hidden;
 padding:clamp(15px,3vw,40px) 14px;
 background:
 radial-gradient(ellipse at 50% 14%,#b8424540 0%,transparent 49%),
 radial-gradient(ellipse at 50% 88%,#329a7860 0%,transparent 49%),
 linear-gradient(165deg,#101422 0%,#1d1c28 46%,#0b1820 100%);
 color:#f8f5ee;
 animation:vbVsScreen 3.55s ease-out both;
}
.versus-intro:before{
 content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:.25;
 background:repeating-linear-gradient(107deg,transparent 0 46px,#ffe0aa18 48px 49px,transparent 52px 120px);
 animation:vbVsLightSweep 9s linear infinite
}
.versus-intro:after{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse at center,transparent 18%,#05070c8a 100%);
}
.versus-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.versus-atmosphere i{position:absolute;display:block;width:2px;height:130%;background:linear-gradient(180deg,transparent,#ffa96e50,transparent);transform:rotate(-31deg);animation:vbVsShine 3.3s ease-in-out both}
.versus-atmosphere i:nth-child(1){left:15%;top:-35%;animation-delay:.1s}
.versus-atmosphere i:nth-child(2){left:33%;top:-15%;animation-delay:.4s}
.versus-atmosphere i:nth-child(3){left:73%;top:-42%;animation-delay:.7s}
.versus-atmosphere i:nth-child(4){left:90%;top:-27%;animation-delay:.9s}
.versus-stage{z-index:1;position:relative;width:min(100%,840px);display:flex;flex-direction:column;gap:clamp(12px,2vh,23px)}
.versus-stage-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;color:#d9b58e;font-size:clamp(9px,1.8vw,12px);font-weight:800;letter-spacing:1.2px;text-shadow:0 0 18px #d4a06050}
.versus-stage-header strong{color:#ffdfb2;font-size:inherit;letter-spacing:.8px}
.versus-profile{position:relative;isolation:isolate;overflow:hidden;border-radius:19px;padding:clamp(15px,2.3vw,24px);border:1px solid #775961;background:#221e2be9;box-shadow:0 18px 45px #0008;min-width:0}
.versus-profile:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(125deg,#b44d5840,transparent 50%,#7a293c28)}
.versus-profile.versus-opponent{border-color:#a75b64;box-shadow:0 0 29px #d34b6237,inset 0 0 30px #ac4a471b;animation:vbVsTopIn 1.1s cubic-bezier(.16,.9,.3,1) .15s both}
.versus-profile.versus-self{border-color:#52b49b;background:#172d30f0;box-shadow:0 0 29px #36cf9e36,inset 0 0 30px #2b8e6b22;animation:vbVsBottomIn 1.1s cubic-bezier(.16,.9,.3,1) .35s both}
.versus-profile.versus-self:after{background:linear-gradient(125deg,#307e7773,transparent 50%,#1c615a44)}
.versus-profile-top{display:flex;align-items:center;gap:clamp(10px,2vw,18px);min-width:0}
.versus-avatar{flex:none;width:clamp(55px,9vw,78px);height:clamp(55px,9vw,78px);border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,5vw,44px);color:#fff1dc;border:1px solid #f9a5a7;background:linear-gradient(140deg,#ad5c71,#643344);box-shadow:0 0 16px #d15f6e66}
.versus-self .versus-avatar{color:#dcfff0;border-color:#6fe2b3;background:linear-gradient(140deg,#289e87,#1c6158);box-shadow:0 0 16px #59c9ac66}
.versus-identity{min-width:0;flex:1}
.versus-player-label{display:block;color:#ffa9b3;font-size:clamp(9px,1.65vw,11px);letter-spacing:1.5px;font-weight:900}
.versus-self .versus-player-label{color:#91f0c8}
.versus-identity h2{font-size:clamp(21px,4vw,37px);line-height:1.1;letter-spacing:.3px;overflow-wrap:anywhere;margin:7px 0 6px;color:#fff}
.versus-profile-id{font-size:clamp(10px,1.8vw,13px);color:#d0bdc1;font-weight:650}
.versus-rank-emblem{width:57px;flex:none;display:flex;align-items:center;justify-content:center}
.versus-rank-emblem .rank-emblem{height:49px;width:49px;display:inline-flex;align-items:center;justify-content:center}
.versus-rank-emblem .rank-emblem svg{width:49px;height:49px;max-width:100%}
.versus-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(14px,2vw,21px)}
.versus-stat{border:1px solid #9d69704d;border-radius:9px;background:#10162262;padding:10px 8px;min-width:0;text-align:center}
.versus-self .versus-stat{border-color:#55bc9664;background:#0c262368}
.versus-stat span{display:block;color:#e0c0c6;font-size:clamp(8px,1.3vw,10px);font-weight:850;letter-spacing:.8px;margin-bottom:7px}
.versus-self .versus-stat span{color:#a5e0d3}
.versus-stat strong{display:block;color:#fff5f4;font-size:clamp(16px,2.3vw,23px);line-height:1.1;overflow-wrap:anywhere;white-space:normal}
.versus-divider{position:relative;display:flex;align-items:center;justify-content:center;gap:25px;min-height:75px}
.versus-divider-line{height:2px;width:min(22%,135px);background:linear-gradient(90deg,transparent,#e9bb86,transparent);box-shadow:0 0 13px #f3b962}
.versus-divider strong{font-style:italic;font-weight:1000;font-size:clamp(51px,9vw,90px);line-height:1;color:#fff3cb;letter-spacing:-6px;padding-right:6px;transform:skew(-9deg);text-shadow:0 0 15px #eea05c,0 0 38px #eb65448c,3px 4px 0 #983d37;animation:vbVsPop .85s cubic-bezier(.2,1.5,.27,1) .65s both, vbVsPulse 1.45s ease-in-out 1.55s infinite alternate}
.versus-footer{display:flex;align-items:center;justify-content:center;gap:12px;color:#e5cda7;letter-spacing:2px;font-weight:900;font-size:10px;text-align:center;animation:vbVsBottomIn 1s ease .75s both}
.versus-loading-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#e8b470;box-shadow:0 0 13px #f0b978;animation:vbVsDot 1s ease-in-out infinite alternate}
.versus-loading-dot:last-child{animation-delay:.5s}
@keyframes vbVsScreen{0%{opacity:0;filter:brightness(.6)}12%{opacity:1;filter:brightness(1)}79%{opacity:1;filter:brightness(1)}100%{opacity:0;filter:brightness(1.3)}}
@keyframes vbVsTopIn{0%{opacity:0;transform:translateY(-80px) scale(.93)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vbVsBottomIn{0%{opacity:0;transform:translateY(80px) scale(.93)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vbVsPop{0%{opacity:0;transform:skew(-9deg) scale(2.1) rotate(-10deg)}62%{opacity:1;transform:skew(-9deg) scale(.91)}100%{opacity:1;transform:skew(-9deg) scale(1)}}
@keyframes vbVsPulse{to{text-shadow:0 0 22px #fff0b4,0 0 51px #ffaa62,3px 4px 0 #983d37;filter:brightness(1.25)}}
@keyframes vbVsDot{to{opacity:.35;transform:scale(.6)}}
@keyframes vbVsLightSweep{to{transform:translate(90px,-40px)}}
@keyframes vbVsShine{0%{opacity:0;transform:translateX(-80px) rotate(-31deg)}35%{opacity:.8}100%{opacity:0;transform:translateX(180px) rotate(-31deg)}}
@media(max-width:560px){
 .versus-intro{padding:14px 12px;align-items:center}
 .versus-stage{gap:10px}
 .versus-stage-header{justify-content:center;text-align:center}
 .versus-profile{padding:13px}
 .versus-profile-top{gap:10px}
 .versus-rank-emblem{width:38px}
 .versus-rank-emblem .rank-emblem,.versus-rank-emblem .rank-emblem svg{width:36px;height:36px}
 .versus-stats{gap:5px;margin-top:12px}
 .versus-stat{padding:8px 3px}
 .versus-divider{min-height:55px}
 .versus-footer{font-size:9px;letter-spacing:1.2px}
}
@media(max-height:700px){.versus-intro{align-items:flex-start}.versus-stage{gap:8px}.versus-profile{padding:11px 15px}.versus-stats{margin-top:9px}.versus-divider{min-height:47px}}
@media(prefers-reduced-motion:reduce){
 .versus-intro{animation:vbVsScreenReduced 3.55s ease-out both}
 .versus-intro:before,.versus-atmosphere i,.versus-profile,.versus-divider strong,.versus-footer,.versus-loading-dot{animation:none!important}
}
@keyframes vbVsScreenReduced{0%,79%{opacity:1}100%{opacity:0}}

/* Ease the existing battle screen in immediately after the VS curtain drops. */
.shell.battle-entering > main{animation:vbBattleArrive .75s cubic-bezier(.2,.75,.25,1) both}
@keyframes vbBattleArrive{0%{opacity:0;transform:scale(.986) translateY(9px);filter:brightness(.65)}100%{opacity:1;transform:scale(1) translateY(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.shell.battle-entering > main{animation:none}}

/* R21 · Owner-authorized single-use account reset control. */
.setting-reset-granted{margin-top:15px;padding:16px;border:1px solid #b18859;border-radius:12px;background:linear-gradient(125deg,#392a26,#231f22 85%);color:#f5dcc1;line-height:1.55}
.setting-reset-granted strong{display:block;color:#ffe3aa;letter-spacing:.7px;font-size:13px}
.setting-reset-granted p{font-size:12px;color:#d9c7b5;margin:10px 0}
.setting-reset-granted .btn.red{margin-top:12px;max-width:100%;font-weight:900}
.modal:has(#resetConfirmText){max-width:530px}
.modal:has(#resetConfirmText) label{display:block;color:#edd4b3;font-size:11px;font-weight:850;letter-spacing:.65px;margin:18px 0 7px}
.modal:has(#resetConfirmText) input{box-sizing:border-box;width:100%;padding:13px 12px;border-radius:8px;border:1px solid #887568;background:#171920;color:#fff;font-size:15px}
.modal:has(#resetConfirmText) input:focus{border-color:#f2c986;outline:2px solid #edb86c47}
.modal:has(#resetConfirmText)>p{line-height:1.55}
@media(max-width:550px){.setting-reset-granted .btn.red{width:100%}}

/* R23 · Account portal, saved profiles, and code change controls */
.account-auth-shell{min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:30px 16px 50px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:radial-gradient(ellipse at 50% 20%,#b18d5322,transparent 55%),linear-gradient(#141825,#10121b)}
.account-auth-panel{width:min(100%,480px);box-sizing:border-box;padding:26px 25px 22px;margin:19px auto 0;box-shadow:0 12px 40px #0008;border:1px solid #695638}
.account-entry-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;margin-bottom:20px;background:#151b27;border:1px solid #45485c;border-radius:12px}
.account-entry-choice{cursor:pointer;background:transparent;color:#c2bcc3;border:0;border-radius:9px;padding:13px 7px;font-size:12px;font-weight:900;letter-spacing:.6px;transition:background .2s,border-color .2s}
.account-entry-choice.chosen{background:linear-gradient(135deg,#dcb574,#9c714b);color:#191419;box-shadow:0 3px 14px #bb96543a}
.account-entry-choice:hover:not(.chosen){background:#2e3444;color:#fff}
.account-welcome-note{font-size:15px;line-height:1.7;text-align:center;color:#e6d8bb;padding:18px 7px}
.account-welcome-note strong{color:#ffd591}
.account-auth-panel label{display:block;margin:14px 0 6px;font-size:10px;font-weight:850;letter-spacing:1px;color:#d7c8ae}
.account-auth-panel input{box-sizing:border-box;width:100%;min-width:0;border-radius:9px;border:1px solid #606276;padding:13px;color:#fff;font-size:15px;background:#171c2a}
.account-auth-panel input:focus,.account-security input:focus{outline:2px solid #cca766;outline-offset:2px;border-color:#d1a863}
.account-auth-panel form .btn{margin-top:18px;min-height:45px;font-weight:900;letter-spacing:.6px}
.account-shortcut-email{color:#c0bdd0;font-size:12px;margin:8px 0 12px;overflow-wrap:anywhere}
.account-saved-list{margin-top:24px;border-top:1px solid #555269;padding-top:16px}
.account-saved-list h3{font-size:11px;letter-spacing:1.3px;color:#f0d29d;margin:0 0 7px}
.account-saved-list>.muted{margin:0 0 10px;line-height:1.5}
.account-saved{display:flex;align-items:center;width:100%;min-width:0;padding:12px 11px;margin:9px 0;gap:12px;border-radius:11px;background:#262d38;border:1px solid #575e68;color:#f7f7f7;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.account-saved:hover{transform:translateY(-2px);border-color:#deaf65;box-shadow:0 4px 16px #d3a45a23}
.account-saved-avatar{flex:none;width:45px;height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#f1dba6;font-weight:950;background:linear-gradient(135deg,#6c5b4b,#292b41);border:1px solid #a89265}
.account-saved-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.account-saved-copy strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-saved-copy small{font-size:11px;color:#b2afc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-saved>span:last-child{font-size:28px;color:#d6b57b;font-weight:200}
.account-other-login{background:transparent;border:0;color:#f6cb90;margin:13px auto 0;display:block;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.6px}
.account-security{margin-top:18px;border:1px solid #4a6170;background:linear-gradient(135deg,#1d2734,#22272c 80%)}
.account-security form label{display:block;margin:16px 0 7px;font-size:11px;font-weight:800;letter-spacing:.7px;color:#dfcebb}
.account-security form input{box-sizing:border-box;width:100%;padding:12px;color:#fff;background:#151d2a;border-radius:9px;border:1px solid #4e6574}
.account-security .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.account-security .actions .btn{font-size:12px}
@media(max-width:500px){.account-auth-panel{padding:20px 16px}.account-auth-shell{padding:20px 12px 50px}.account-auth-panel input{font-size:16px}.account-security .actions .btn{width:100%}}