:root{color-scheme:dark;--bg:#101014;--surface:#18181f;--border:#30303e;--muted:#aaa9ba;--text:#f4f1f9;--accent:#b58aff;--purple:#8349ec;font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}

*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 85% 15%,#28174455,transparent 45%),var(--bg);min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
button{cursor:pointer}
h1,h2,p{margin:0}
h1,h2{line-height:1.08}
p{line-height:1.65}
h1{font-family:Georgia,serif;font-size:clamp(2.7rem,5.5vw,5rem);letter-spacing:-.045em}
h2{font-size:1.25rem}
h1:focus{outline:none}
.site-header,.site-main,.site-footer{width:min(1280px,calc(100% - 80px));margin-inline:auto}
.site-header{display:flex;align-items:center;gap:45px;min-height:100px;border-bottom:1px solid var(--border)}
.wordmark{display:inline-flex;align-items:center;font-family:Georgia,serif;font-weight:800;font-size:1.35rem;letter-spacing:.04em;white-space:nowrap}
.wordmark>span:not(.brand-mark){color:var(--accent)}
.brand-mark{display:grid;place-items:center;background:var(--purple);color:white;width:31px;height:36px;border-radius:5px;margin-right:12px;font-family:Georgia,serif}
.site-header nav{display:flex;gap:30px;align-self:stretch}
.site-header nav a{display:flex;align-items:center;position:relative;color:var(--muted);font-size:.93rem}
.site-header nav a.active{color:var(--text)}
.site-header nav a.active:after{content:"";position:absolute;bottom:19px;left:0;right:0;height:2px;background:var(--accent)}
.account-menu{margin-left:auto;display:flex;align-items:center;gap:16px}
.account-menu form{margin:0}
.account-name{font-size:.88rem;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--purple);border:1px solid transparent;border-radius:8px;color:white;padding:13px 21px;font-size:.95rem;font-weight:600;min-height:46px;transition:background .18s,transform .18s}
.button:hover{background:#955ff5;transform:translateY(-1px)}
.button-small{font-size:.82rem;padding:10px 15px;min-height:40px}
.button-large{padding:19px 26px;font-size:1.06rem}
.button-large span{font-size:1.4rem}
.button-quiet{background:transparent;border-color:#555164}
.button-quiet:hover{background:#24202e}
.site-main{min-height:calc(100vh - 244px)}
.hero{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:24px;min-height:590px;padding:70px 0}
.hero-copy{position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy>p{color:#c0bdcf;font-size:1.16rem;margin:26px 0 30px;max-width:500px}
.hero-copy>.small-note{font-size:.83rem;color:var(--muted);margin:14px 0 0}
.hero-cards{position:relative;height:430px;isolation:isolate}
.hero-cards:before{content:"";position:absolute;inset:15% -5% 0;background:radial-gradient(ellipse,#7840d94d,transparent 67%);filter:blur(25px)}
.hero-card{position:absolute;object-fit:contain;width:56%;height:auto;top:40px;left:22%;box-shadow:0 20px 70px #0008;border-radius:5px}
.hero-card-left{transform:translateX(-39%) rotate(-15deg) scale(.84)}
.hero-card-right{transform:translateX(39%) rotate(15deg) scale(.84)}
.hero-card-center{transform:rotate(-4deg);top:6px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);padding:35px 0 50px;border-top:1px solid var(--border);gap:32px}
.steps article{display:flex;gap:20px;padding-right:22px}
.steps article+article{border-left:1px solid var(--border);padding-left:30px}
.step-number{flex-shrink:0;color:var(--accent);font-size:1.05rem;width:44px;height:44px;border:1px solid #705795;border-radius:50%;display:grid;place-items:center}
.steps h2{margin:4px 0 12px}
.steps p{font-size:.92rem;color:var(--muted)}
.site-footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:32px;color:var(--muted)}
.site-footer .wordmark{font-size:.95rem;color:var(--text)}
.site-footer p{font-size:.75rem;margin-top:8px}
.site-footer>span{font-size:.75rem;letter-spacing:.08em}
.collection-heading{padding-top:55px}
.collection-heading h1{font-size:clamp(2.7rem,5vw,4.3rem)}
.collection-heading p{margin-top:13px;color:var(--muted);font-size:1.1rem}
.collection-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0}
.collection-stats>div{border:1px solid var(--border);border-radius:9px;padding:20px 26px;display:flex;flex-direction:column-reverse;gap:4px;background:linear-gradient(125deg,#23202d66,transparent)}
.collection-stats dt{color:var(--muted);font-size:.86rem}
.collection-stats dd{font-size:1.9rem;font-weight:650;margin:0}
collection-search{display:block}
.search-error[hidden]{display:none}
.collection-filters{display:flex;align-items:flex-end;gap:16px;margin:30px 0 20px}
.collection-filters label:not(.checkbox-label){display:block;font-size:.78rem;margin-bottom:8px;color:var(--muted)}
.search-field{flex:1}
.collection-filters input[type=search],.collection-filters select{background:var(--surface);color:var(--text);border:1px solid #494653;border-radius:7px;padding:12px 14px;min-height:46px;width:100%}
.collection-filters select{min-width:190px;appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23cba5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;cursor:pointer;color-scheme:dark}
.collection-filters select:hover{border-color:var(--accent)}
.checkbox-label{display:flex;align-items:center;gap:9px;min-height:46px;white-space:nowrap;font-size:.88rem}
.checkbox-label{cursor:pointer}
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;border:1px solid #696074;border-radius:6px;background-color:#17131f;background-position:center;background-repeat:no-repeat;background-size:14px;vertical-align:middle;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
input[type=checkbox]:hover{border-color:#cba5ff;box-shadow:0 0 0 3px #a970ff18}
input[type=checkbox]:checked{border-color:#b98aff;background-color:#9146df;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3.2 3.2L13 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:0 0 12px #9146df35}
input[type=checkbox]:focus-visible{outline:2px solid #cba5ff;outline-offset:4px}
input[type=checkbox]:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
@media(forced-colors:active){input[type=checkbox]{appearance:auto;-webkit-appearance:auto}}
.results-line{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.83rem;margin:24px 0}
.text-link{color:var(--accent);text-underline-offset:4px}
.text-link:hover{text-decoration:underline}
.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:50px;align-items:start}
.collection-custom-size{display:block}
.collection-custom-size .collection-filters{flex-wrap:wrap}
.collection-custom-size .collection-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--collection-card-size,240px)),1fr))}
.collection-size-control{display:flex;align-items:center;gap:14px;margin:0 0 24px;color:var(--muted);font-size:.85rem}
.collection-size-control input[type=range]{appearance:none;-webkit-appearance:none;width:clamp(100px,28vw,280px);min-width:0;height:8px;padding:0;border:0;border-radius:999px;background:linear-gradient(to right,#8349ec 0%,#c399ff var(--range-fill,44.44%),#34303f var(--range-fill,44.44%),#34303f 100%);cursor:pointer;box-shadow:inset 0 1px 3px #0005}
.collection-size-control input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:3px solid #eee3ff;background:#a36aff;box-shadow:0 2px 6px #0008,0 0 10px #a36aff60;transition:box-shadow .15s}
.collection-size-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid #eee3ff;background:#a36aff;box-shadow:0 2px 6px #0008,0 0 10px #a36aff60}
.collection-size-control input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.collection-size-control input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 6px #0008,0 0 15px #b58affaa}
.collection-size-control output{min-width:58px;padding:5px 8px;text-align:center;border:1px solid #b58aff40;border-radius:7px;background:#b58aff10;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.card-trigger{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left}
card-lightbox{display:block}
.trading-card{position:relative;aspect-ratio:1061 / 1483;transition:transform .2s,filter .2s}
.card-template{display:block;position:absolute;inset:0;width:100%;height:100%}
.card-character{position:absolute;left:7%;top:6%;width:86%;height:74%;object-fit:contain;filter:drop-shadow(0 12px 10px #18032d77)}
.card-name{position:absolute;left:9%;right:9%;top:84%;height:10%;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:uppercase;font-weight:800;font-size:clamp(.65rem,1.3vw,1.2rem);white-space:nowrap;overflow:hidden;line-height:1.15;text-shadow:0 2px 6px #000}
.card-name-text{display:block;flex:0 0 auto;white-space:nowrap}
.card-trigger>.trading-card{pointer-events:none;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:center;transition:transform 180ms ease-out,filter .2s}
.card-trigger:hover .trading-card{filter:drop-shadow(0 8px 18px #8243e533)}
@media(prefers-reduced-motion:reduce){.card-trigger>.trading-card{transition:none}}
.copy-count{position:absolute;top:5%;left:7%;border:1px solid #8560ad;background:#21152fee;color:#eee0ff;border-radius:6px;padding:5px 10px;white-space:nowrap;font-size:.85rem;font-weight:700;box-shadow:0 2px 8px #0006;pointer-events:none}





.empty-state{display:flex;justify-content:center;align-items:center;gap:45px;min-height:330px;padding:45px 30px;margin:24px 0 50px;border:1px dashed #45404f;border-radius:12px;background:radial-gradient(ellipse at left,#32204055,transparent 70%)}
.empty-state>img{width:125px;transform:rotate(-9deg);box-shadow:0 15px 40px #0005}
.empty-state>div{max-width:470px}
.empty-state h2{font-family:Georgia,serif;font-size:1.85rem;line-height:1.25}
.empty-state p{color:var(--muted);margin:16px 0 24px}
.empty-state.compact{min-height:240px;text-align:center}
.pagination{display:flex;align-items:center;justify-content:center;gap:25px;margin:25px 0 45px}
.pagination>span{color:var(--muted);font-size:.85rem}
.notice{padding:15px 20px;margin-top:25px;border:1px solid #805577;background:#392231;border-radius:8px}
.skip-link{position:fixed;top:-100px;left:15px;z-index:100;background:white;color:black;padding:12px}
.skip-link:focus{top:12px}
.blazor-error-boundary{background:#4d202b;padding:20px;color:white}
.blazor-error-boundary:after{content:"Tapahtui virhe. Lataa sivu uudelleen."}

@media(min-width:1500px){.hero{min-height:660px}
.hero-cards{height:490px}
}

@media(max-width:1000px){.site-header,.site-main,.site-footer{width:calc(100% - 48px)}
.site-header{gap:25px}
.site-header nav{gap:20px}
.account-name{display:none}
.hero{min-height:510px}
.hero-cards{height:330px}
.hero h1{font-size:3.7rem}
.steps{gap:20px}
.steps article{gap:12px;padding-right:0}
.steps article+article{padding-left:20px}
.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.collection-filters{flex-wrap:wrap}
.search-field{min-width:45%}
.card-name{font-size:1rem}
}

@media(max-width:680px){.site-header,.site-main,.site-footer{width:calc(100% - 36px)}
.site-header{flex-wrap:wrap;gap:0;min-height:116px;padding-top:18px}
.wordmark{font-size:1.03rem}
.brand-mark{width:25px;height:29px;margin-right:7px}
.account-menu{gap:0}
.button-small{font-size:.72rem;padding:9px 11px}
.site-header nav{order:3;width:100%;height:49px;gap:25px}
.site-header nav a{font-size:.85rem}
.site-header nav a.active:after{bottom:0}
.hero{grid-template-columns:1fr;padding:44px 0 25px;gap:20px;text-align:center}
.hero h1{font-size:clamp(2.7rem,10vw,3.6rem)}
.hero-copy>p{font-size:1rem;margin:20px auto 24px}
.hero-cards{height:340px;max-width:380px;width:100%;margin:15px auto 0}
.hero-card{width:49%;left:25.5%}
.hero-card-center{top:5px}
.desktop-break{display:none}
.steps{grid-template-columns:1fr;gap:25px;padding:30px 0}
.steps article+article{border:0;padding-left:0}
.steps article{gap:18px}
.steps h2{font-size:1.12rem}
.steps p{font-size:.86rem}
.site-footer{align-items:flex-start;padding-block:24px}
.site-footer>span{max-width:110px;text-align:right;line-height:1.7;font-size:.65rem}
.collection-heading{padding-top:35px}
.collection-heading h1{font-size:2.7rem}
.collection-heading p{font-size:.95rem}
.collection-stats{gap:8px;margin:24px 0}
.collection-stats>div{padding:15px 10px}
.collection-stats dd{font-size:1.5rem}
.collection-stats dt{font-size:.7rem}
.collection-filters{gap:12px}
.search-field{flex-basis:100%}
.collection-filters>div:nth-child(2){flex:1}
.collection-filters select{min-width:0}
.checkbox-label{font-size:.8rem}
.collection-filters>.button{width:100%}
.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}
.card-name{font-size:clamp(.65rem,2.8vw,1rem)}
.copy-count{padding:4px 7px}
.empty-state{flex-direction:column;gap:30px;text-align:center;padding:35px 22px}
.empty-state>img{width:95px}
.empty-state h2{font-size:1.55rem}
.pagination{gap:12px}
.pagination .button{padding:10px;font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}



html:has(.card-dialog[open]){overflow:hidden}
.collection-stats .card-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em}
.card-total span{font-size:.65em;font-weight:400;color:var(--muted)}
.card-dialog{padding:0;border:0;background:transparent;color:var(--text);overflow:visible;width:min(560px,calc(100vw - 48px),calc((100dvh - 96px) * 1061 / 1483));max-width:none;max-height:none;filter:drop-shadow(0 20px 50px #0008)}
.card-dialog::backdrop{background:#08060ee6;backdrop-filter:blur(7px)}
.card-dialog .card-name{font-size:clamp(.8rem,3.5vw,1.7rem)}
.card-dialog .trading-card{pointer-events:none;transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 180ms ease-out;transform-origin:center}
.card-dialog .ability-badge,.card-dialog .replacement-badge{pointer-events:auto}
@media(prefers-reduced-motion:reduce){.card-dialog .trading-card{transition:none}}
.card-dialog-close{position:absolute;right:-12px;top:-18px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid #877497;border-radius:50%;background:#21182f;color:white;font-size:1.8rem;line-height:1;box-shadow:0 4px 15px #0006}
.card-dialog-close:hover{background:#513379}

.pack-shelf{display:flex;align-items:center;justify-content:center;gap:70px;margin:35px 0 50px;padding:35px;border:1px solid var(--border);border-radius:16px;background:radial-gradient(ellipse at 25% 50%,#56249044,transparent 60%)}
.booster-image{width:230px;height:310px;object-fit:contain;filter:drop-shadow(0 18px 24px #0006);transform:rotate(-6deg)}
.pack-copy{max-width:490px}.pack-copy h2{font-size:1.8rem;display:flex;gap:18px;align-items:center}.pack-balance{color:var(--accent);font-variant-numeric:tabular-nums}.pack-copy>p{color:var(--muted);margin:20px 0}.pack-copy>.small-note{font-size:.8rem;margin-bottom:0}.pack-open-form{margin:22px 0}.pack-open-form button:disabled{opacity:.6;cursor:wait}
pack-reveal{display:block}.pack-result{padding-bottom:45px}.pack-result-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.pack-result-heading h2{font-family:Georgia,serif;font-size:2rem}.pack-result-heading p{margin-top:8px;color:var(--muted)}.reveal-progress{font-size:.85rem;color:var(--accent);white-space:nowrap}.pack-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.pack-card-slot{min-width:0}.reveal-card{width:100%;display:block;background:none;border:0;padding:0;perspective:1100px;color:var(--text)}.reveal-rotator{position:relative;display:block;aspect-ratio:1061/1483;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.reveal-card.is-revealed .reveal-rotator{transform:rotateY(180deg)}.reveal-front,.reveal-back{display:block;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.reveal-front{transform:rotateY(180deg)}.reveal-back>img{display:block;width:100%;height:100%;object-fit:fill}.reveal-card:not(.is-revealed):hover{filter:drop-shadow(0 0 16px #a874f84d)}.reveal-label{margin-top:16px;text-align:center;font-size:.86rem}.reveal-label[hidden]{display:none}.reveal-label strong{display:block;overflow-wrap:anywhere}.new-card-badge{display:inline-block;margin-top:9px;font-size:.74rem;padding:5px 10px;border-radius:30px}.new-card-badge{background:#204f3c;color:#b7ffd5;border:1px solid #438966}.pack-result-footer{display:flex;justify-content:space-between;gap:20px;margin-top:32px;font-size:.9rem}.pack-result-footer p{color:var(--muted)}
.skip-link{visibility:hidden}.skip-link:focus{visibility:visible}
@media(max-width:1000px){.pack-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pack-shelf{gap:35px}.site-header{gap:22px}.site-header nav{gap:18px}}
@media(max-width:680px){.pack-shelf{flex-direction:column;gap:25px;padding:25px 18px;text-align:center}.booster-image{width:175px;height:240px}.pack-copy h2{justify-content:center;font-size:1.5rem}.pack-copy>p{font-size:.9rem}.pack-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.pack-result-heading{align-items:flex-start}.pack-result-heading h2{font-size:1.65rem}.pack-result-heading p{font-size:.85rem}.pack-result-footer{flex-direction:column}.site-header nav{gap:22px}.site-header nav a{font-size:.8rem}.pack-result-heading .reveal-progress{font-size:.75rem;padding-top:7px}}


.reveal-tilt{display:block;transform-style:preserve-3d;pointer-events:none;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 180ms ease-out}
@media(prefers-reduced-motion:reduce){.reveal-tilt{transition:none}}

pack-reveal.is-dealing .pack-card-slot{visibility:hidden}
.reveal-all[hidden]{display:none}
.pack-open-form button:disabled{cursor:not-allowed}
html:has(.pack-opening[open]){overflow:hidden}
.pack-opening{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--text);overflow:hidden}
.pack-opening::backdrop{background:#080611aa}
.pack-opening-position{position:absolute;left:calc(50% - 150px);top:calc(50% - 225px);width:300px;height:450px;perspective:1000px}
.pack-opening-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pack-opening-front,.pack-opening-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pack-opening-back{transform:rotateY(180deg)}
.pack-opening-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pack-torn-open,.pack-empty-wrapper{opacity:0}
.pack-animation-skip{position:absolute;right:24px;top:24px;z-index:3;background:#15101e}
.pack-flying-card{position:fixed;object-fit:fill;pointer-events:none;transform-origin:center;z-index:2;opacity:0;box-shadow:0 12px 35px #0007}
@media(max-width:680px){.pack-opening-position{width:220px;height:330px;left:calc(50% - 110px);top:calc(50% - 165px)}.pack-animation-skip{right:16px;top:16px}}

.rarity-badge{position:absolute;top:5%;right:7%;padding:5px 8px;border:1px solid var(--rarity-color);border-radius:6px;background:#15101ff2;color:var(--rarity-color);font-size:clamp(.55rem,1vw,.8rem);font-weight:700;line-height:1.3;letter-spacing:.02em;pointer-events:none;box-shadow:0 2px 8px #0006}
.rarity-common{--rarity-color:#c5cbd2}.rarity-uncommon{--rarity-color:#78e0a0}.rarity-rare{--rarity-color:#79baff}.rarity-epic{--rarity-color:#d395ff}.rarity-legendary{--rarity-color:#ffd06b}.rarity-mythic{--rarity-color:#ff83ad}

/* The glow previews rarity on both faces without revealing the character. */
.pack-card-slot .reveal-card{position:relative;isolation:isolate}
.pack-card-slot .reveal-card::before{content:"";position:absolute;inset:2%;z-index:-1;border-radius:12px;background:var(--rarity-color);filter:blur(20px);opacity:.55;pointer-events:none;transition:opacity .2s}
.pack-card-slot .reveal-card:hover{filter:none}
.pack-card-slot .reveal-card:hover::before{opacity:.8}
.pack-flying-card{box-shadow:0 0 18px color-mix(in srgb,var(--rarity-color) 65%,transparent),0 0 38px color-mix(in srgb,var(--rarity-color) 40%,transparent)}
@media(prefers-reduced-motion:reduce){.pack-card-slot .reveal-card::before{transition:none}}

.pack-shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:30px 0 45px}
.pack-shop .pack-shelf{flex-direction:column;gap:18px;margin:0;padding:24px 18px;text-align:center;justify-content:flex-start;border-color:color-mix(in srgb,var(--pack-color,#a874f8) 40%,var(--border));background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--pack-color,#a874f8) 16%,transparent),transparent 70%)}
.pack-shop .booster-image{width:160px;height:230px;max-width:100%}
.pack-shop .pack-copy{width:100%;display:flex;flex:1;flex-direction:column}
.pack-shop .pack-copy h2{font-size:1.25rem;justify-content:center;gap:10px}
.pack-shop .pack-copy>p{font-size:.85rem;margin:14px 0;min-height:42px}
.pack-shop .pack-open-form{margin:auto 0 0}.pack-shop .pack-open-form button{width:100%;font-size:.8rem;padding:12px 8px}
.pack-shop .pack-balance{color:var(--pack-color,var(--accent))}.pack-shop .pack-unavailable{margin-top:auto;color:var(--muted)}
.pack-kind-rare{--pack-color:#79baff;--pack-hue:310deg}.pack-kind-epic{--pack-color:#d395ff;--pack-hue:15deg}.pack-kind-legendary{--pack-color:#ffd06b;--pack-tint:sepia(1) saturate(2)}
.pack-shop .booster-image{filter:var(--pack-tint,hue-rotate(var(--pack-hue,0deg))) drop-shadow(0 12px 18px #0006)}
.pack-opening[class*="pack-kind-"] .pack-opening-front,.pack-opening[class*="pack-kind-"] .pack-opening-back{filter:var(--pack-tint,hue-rotate(var(--pack-hue,0deg)))}
@media(max-width:1100px){.pack-shop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pack-shop{gap:12px}.pack-shop .pack-shelf{padding:18px 10px}.pack-shop .booster-image{width:120px;height:175px}.pack-shop .pack-copy h2{font-size:1rem}.pack-shop .pack-copy>p{font-size:.78rem;min-height:65px}}

.craft-help{color:var(--muted);font-size:.9rem;line-height:1.7;margin:12px 0 24px;max-width:800px}
.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 50px}
.material-tile{border:1px solid color-mix(in srgb,var(--rarity-color) 40%,var(--border));border-radius:12px;padding:24px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--rarity-color) 10%,transparent),transparent 75%);text-align:center}
.material-icon{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--rarity-color) 30%,transparent))}
.material-rarity{font-size:.75rem;color:var(--muted)}
.material-tile h3{color:var(--rarity-color);font-size:.9rem;letter-spacing:.06em;margin:8px 0}
.material-count{display:block;font-size:2rem;margin:12px 0 22px}.material-count span{font-size:.8rem;font-weight:400;color:var(--muted)}
.craft-action{margin-top:12px}.craft-action button{width:100%;font-size:.85rem}.craft-action button:disabled{opacity:.4;cursor:not-allowed}
.material-max{font-size:.8rem;color:var(--muted);padding:16px 0;margin-top:12px}.material-tile small{display:block;color:var(--muted);margin-top:12px}
.craft-result{padding:22px;margin:26px 0;border:1px solid var(--rarity-color);border-radius:10px;background:var(--surface);scroll-margin-top:25px}.craft-result p{line-height:1.7}
.craft-card .craft-action{margin-top:20px}.craft-destroy h2{margin-top:30px}
@media(max-width:680px){.material-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.material-tile{padding:18px 10px}.craft-action button{font-size:.73rem;padding:12px 6px}.site-header nav{flex-wrap:wrap;row-gap:12px}}
.craft-result-card{max-width:220px;margin:22px auto 0}

html:has(.craft-reveal-dialog[open]){overflow:hidden}
.craft-reveal-dialog{margin:auto;padding:0;border:0;overflow:visible;background:transparent;color:var(--text);width:min(460px,calc(100vw - 64px),calc((100dvh - 170px) * 1061 / 1483));max-width:none;max-height:none}
.craft-reveal-dialog::backdrop{background:#08060ee6;backdrop-filter:blur(7px)}
.craft-reveal-dialog .craft-flip{box-shadow:0 0 35px color-mix(in srgb,var(--rarity-color) 35%,transparent)}
.craft-reveal-dialog .craft-flip:hover{filter:none}
.craft-reveal-instruction{text-align:center;position:absolute;bottom:100%;left:0;right:0;margin-bottom:22px;line-height:1.4;color:var(--rarity-color)}
.craft-reveal-dialog .card-name{font-size:clamp(.8rem,3vw,1.5rem)}
.craft-reveal-dialog .card-dialog-close{right:-22px;top:-18px}
@media(prefers-reduced-motion:reduce){.craft-reveal-dialog .reveal-rotator{transition:none}}
.craft-filters{flex-wrap:wrap}.craft-filters .checkbox-label{min-height:46px;white-space:nowrap}.craft-filters input[type=checkbox]{accent-color:var(--accent)}

.upgrade-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.condition-surface{display:block;position:relative;width:100%;height:100%;aspect-ratio:1061/1483}
.card-back-art{display:block;width:100%;height:100%;object-fit:fill}
.card-wear{position:absolute!important;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;object-fit:fill;opacity:var(--wear-opacity,0)}
.condition-mint{--wear-opacity:0;--wear-fade:1}
.condition-holo{--wear-opacity:0;--wear-fade:1;isolation:isolate}
holo-overlay{position:absolute;inset:0;display:block;z-index:2;pointer-events:none;overflow:hidden;--holo-x:50%;--holo-y:45%;border-radius:1%;mix-blend-mode:screen}
holo-overlay>span{position:absolute;inset:0;pointer-events:none}
.holo-foil{background-image:repeating-linear-gradient(115deg,#ff259980 0%,#803dff80 12%,#16cfff90 24%,#14ff8a80 36%,#ffe72a90 48%,#ff712680 60%,#ff259980 72%);background-size:150% 150%;background-position:var(--holo-x) var(--holo-y);opacity:.6;mask-image:linear-gradient(#000 0 79%,#0005 87%,#000 100%)}
.holo-sparkles{background-image:radial-gradient(ellipse,white 0 1px,transparent 1.8px),radial-gradient(ellipse,#bffcff 0 .7px,transparent 1.5px),radial-gradient(ellipse,#ffddfc 0 .8px,transparent 1.6px);background-size:29px 37px,43px 31px,61px 53px;background-position:0 0,13px 19px,27px 8px;opacity:.65;mask-image:radial-gradient(ellipse at var(--holo-x) var(--holo-y),#000,transparent 65%)}
.holo-glare{background:radial-gradient(ellipse at var(--holo-x) var(--holo-y),#ffffff50 0%,#dff9ff12 25%,transparent 57%);opacity:.5}

.condition-clean{--wear-opacity:.22;--wear-fade:.98;--wear-corners:1.5% / 1.07%;--art-inset:.3% .42%;--art-corners:2% / 1.43%}
.condition-worn{--wear-opacity:.48;--wear-fade:.9;--wear-corners:3% / 2.14%;--art-inset:.6% .84%;--art-corners:4% / 2.86%}
.condition-battered{--wear-opacity:.76;--wear-fade:.8;--wear-corners:4% / 2.86%;--art-inset:.8% 1.12%;--art-corners:5.5% / 3.93%}
.condition-ragged{--wear-opacity:1;--wear-fade:.66;--wear-corners:5% / 3.57%;--art-inset:1% 1.4%;--art-corners:7% / 5%}
.trading-card:not(.condition-mint):not(.condition-holo),.condition-surface:not(.condition-mint):not(.condition-holo){clip-path:inset(0 round var(--wear-corners,0px))}
/* The printed base stops inside the worn edge; the wear layer keeps its full silhouette. */
.trading-card:not(.condition-mint):not(.condition-holo)>.card-template,.condition-surface:not(.condition-mint):not(.condition-holo)>.card-back-art{clip-path:inset(var(--art-inset) round var(--art-corners))}
.condition-clean .card-wear{mask-image:radial-gradient(ellipse at center,transparent 48%,#000 76%)}
.condition-worn .card-wear{mask-image:radial-gradient(ellipse at center,#0005 30%,#000 75%)}
.trading-card>.card-template,.condition-surface>.card-back-art{filter:saturate(var(--wear-fade,1)) brightness(var(--wear-fade,1))}
.trading-card>.card-character{filter:drop-shadow(0 12px 10px #18032d77) saturate(var(--wear-fade,1)) brightness(var(--wear-fade,1))}
.trading-card>.rarity-badge,.trading-card>.copy-count{z-index:3}
material-upgrade{display:contents}
.upgrade-flyer{position:fixed;z-index:1000;pointer-events:none;object-fit:contain;filter:drop-shadow(0 0 18px var(--rarity-color));will-change:transform,opacity}
.upgrade-gain{position:fixed;z-index:1001;pointer-events:none;color:var(--rarity-color);font-size:1.4rem;font-weight:800;text-shadow:0 2px 8px #000}
.craft-dust{position:fixed;z-index:1000;width:9px;height:13px;pointer-events:none;box-shadow:0 0 12px currentColor;clip-path:polygon(50% 0,100% 40%,60% 100%,0 60%)}
.destroy-error{color:#ffb4b4;font-size:.9rem;margin-top:12px}
.destroy-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:18px;container-type:inline-size}.craft-card .destroy-actions .craft-action{margin:0;min-width:0}
.destroy-actions button{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;padding:9px 4px;font-size:.72rem;white-space:nowrap}
.destroy-icon{width:15px;height:15px;flex-shrink:0}
.destroy-tooltip{position:fixed;z-index:2000;box-sizing:border-box;max-width:min(310px,calc(100vw - 16px));padding:13px 15px;border:1px solid #9972d966;border-radius:10px;background:#20192cf5;color:#eee8f8;box-shadow:0 8px 30px #0008;font-size:.8rem;line-height:1.5;backdrop-filter:blur(10px)}
.destroy-tooltip>span,.destroy-tooltip>strong{display:block}.destroy-tooltip-title{color:#d6b6ff;margin-bottom:5px}.destroy-tooltip-detail{color:#c9bfd7}
.destroy-tooltip-shift{margin-top:9px;padding-top:9px;border-top:1px solid #ffffff18;color:#bca5d9;font-size:.74rem}
.destroy-tooltip.shift-active{border-color:#e8a567}.destroy-tooltip.shift-active .destroy-tooltip-shift{color:#ffd09c;font-weight:600}
@container(max-width:230px){.destroy-actions button{flex-direction:column;gap:3px;padding:6px 2px;font-size:.65rem}}
.destroy-confirmation{margin:auto;width:min(460px,calc(100vw - 40px));box-sizing:border-box;padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px #0008}
.destroy-confirmation::backdrop{background:#08060ecc;backdrop-filter:blur(5px)}
.destroy-confirmation h2{margin:0 0 16px;font-size:1.65rem}.destroy-confirmation p{line-height:1.6}
.destroy-confirm-hint{font-size:.85rem;color:var(--muted)}
.destroy-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:24px}
.craft-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;margin:0 0 30px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.craft-tabs a{flex:1;text-align:center;padding:14px 18px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600;transition:background .15s,color .15s}
.craft-tabs a:hover{background:#b58aff12;color:var(--text)}
.craft-tabs a[aria-current=page]{background:var(--purple);color:white;box-shadow:0 3px 14px #8349ec30}
.craft-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.craft-recipe-card{display:block;width:min(100%,210px);height:auto;margin:8px auto 26px;box-shadow:0 0 20px color-mix(in srgb,var(--rarity-color) 45%,transparent),0 0 48px color-mix(in srgb,var(--rarity-color) 22%,transparent)}
.craft-recipe-balance{color:var(--muted);font-size:.85rem;margin:10px 0 16px}.craft-recipe-balance strong{color:var(--text)}
.craft-action .craft-price{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:8px 20px;font-size:1.2rem;border-color:color-mix(in srgb,var(--rarity-color) 55%,var(--border))}
.craft-price img{display:block;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 5px var(--rarity-color))}
.craft-price:not(:disabled):hover{background:color-mix(in srgb,var(--rarity-color) 18%,var(--surface))}
@media(max-width:680px){.material-tile .craft-price{gap:5px;padding:8px 5px}.craft-price img{width:30px;height:30px}}
@media(max-width:520px){.craft-tabs{gap:4px}.craft-tabs a{padding:12px 8px;font-size:.8rem;min-width:80px}}



.collectors-heading{margin:40px 0 30px}
.collectors-heading p{color:var(--muted);margin-top:16px}
.collectors-table-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:48px}
.collectors-table{width:100%;border-collapse:collapse;text-align:left}
.collectors-table caption{text-align:left;padding:18px 24px;color:var(--muted);font-size:.85rem;caption-side:bottom}
.collectors-table th,.collectors-table td{padding:20px 24px;border-bottom:1px solid var(--border)}
.collectors-table thead th{font-size:.8rem;font-weight:500;color:var(--muted);background:#ffffff03}
.collectors-table tbody th{overflow-wrap:anywhere}
.collectors-table td:last-child,.collectors-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.collectors-table td:first-child{width:80px}
.collector-rank{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:10px;color:var(--muted);background:#ffffff06;font-weight:700}
.collector-podium .collector-rank{background:#8349ec28;color:var(--accent);border:1px solid #b58aff50}
.collector-total{color:var(--muted);font-size:.85rem;white-space:nowrap}
@media(max-width:600px){.collectors-table th,.collectors-table td{padding:14px 10px}.collectors-table thead th{font-size:.72rem}.collectors-table td:first-child{width:48px}.collectors-table caption{padding:16px 12px}.collector-total{display:block}.collectors-heading h1{font-size:2.6rem}}
@media(max-width:1100px){.site-header{flex-wrap:wrap;column-gap:20px;row-gap:0;padding-top:18px}.site-header nav{order:3;width:100%;height:52px;overflow-x:auto;white-space:nowrap;flex-shrink:0}.site-header nav a{flex-shrink:0}.site-header nav a.active:after{bottom:5px}}
.collector-identity{display:flex;align-items:center;gap:12px}
.collector-identity>span{min-width:0;overflow-wrap:anywhere}
.collector-avatar{width:40px;height:40px;flex:0 0 40px;object-fit:cover;border-radius:50%;border:1px solid #b58aff40;background:var(--surface) url('/images/avatar-placeholder.svg') center/cover no-repeat}
@media(max-width:600px){.collector-identity{gap:8px}.collector-avatar{width:32px;height:32px;flex-basis:32px}}
.account-profile-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;max-width:200px;padding:10px 12px;border:1px solid #b58aff55;border-radius:9px;background:linear-gradient(135deg,#8349ec25,#8349ec0c);color:#d6bdff;white-space:nowrap;font-weight:600;transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
.account-profile-link:hover{color:white;background:#8349ec38;border-color:var(--accent);box-shadow:0 0 16px #8349ec20}
.account-profile-name{min-width:0;overflow:hidden;text-overflow:ellipsis}.account-profile-icon,.account-profile-arrow{flex-shrink:0}.account-profile-arrow{color:var(--accent)}
@media(max-width:680px){.account-menu{gap:8px}.account-profile-link{width:42px;min-width:42px;max-width:42px;padding:10px;justify-content:center}.account-profile-name,.account-profile-arrow{display:none}}
.profile-heading{display:flex;align-items:center;gap:24px;margin:44px 0 32px}
.profile-heading>div{min-width:0}.profile-heading h1{overflow-wrap:anywhere;font-size:clamp(2.5rem,5vw,4rem)}
.profile-heading p{color:var(--muted);margin-top:12px}.profile-heading .profile-eyebrow{color:var(--accent);margin:0 0 8px;font-size:.85rem}
.profile-avatar{width:96px;height:96px;flex:0 0 96px;object-fit:cover;border-radius:50%;border:2px solid #b58aff60;background:var(--surface) url('/images/avatar-placeholder.svg') center/cover no-repeat}
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 28px}
.profile-stats>div{display:flex;flex-direction:column-reverse;gap:10px;padding:24px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(135deg,#8349ec12,var(--surface))}
.profile-stats dt{font-size:.85rem;color:var(--muted)}.profile-stats dd{margin:0;font-size:2rem;font-weight:650;font-variant-numeric:tabular-nums}.profile-stats dd span{font-size:1rem;color:var(--muted)}
.profile-links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
@media(max-width:900px){.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.profile-heading{gap:16px}.profile-avatar{width:64px;height:64px;flex-basis:64px}.profile-stats{gap:12px}.profile-stats>div{padding:18px 14px}.profile-stats dd{font-size:1.7rem}}
.daily-gift{display:flex;align-items:center;gap:24px;border:1px solid #b58aff60;border-radius:14px;background:linear-gradient(120deg,#8349ec20,var(--surface));padding:24px;margin:28px 0}
.daily-gift>img{object-fit:contain;flex-shrink:0}.daily-gift-copy{flex:1;min-width:0}.daily-gift>form{flex-shrink:0}.daily-gift>form button{white-space:nowrap}.daily-gift p{color:var(--muted);margin-top:10px}.daily-gift small{color:var(--muted)}.daily-gift .reward-collected{color:var(--accent)}
.achievement-list{list-style:none;padding:0;margin:24px 0 48px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.achievement-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(120px,180px) 190px 170px;align-items:center;gap:24px;padding:22px 24px;border-bottom:1px solid var(--border)}
.achievement-row:last-child{border-bottom:0}.achievement-row.is-ready{background:#8349ec0c;box-shadow:inset 3px 0 var(--accent)}.achievement-row.is-claimed{box-shadow:inset 3px 0 #6abf95}
.achievement-details{min-width:0}.achievement-details h2{font-size:1.05rem;margin:7px 0}.achievement-details p,.achievement-progress{font-size:.85rem;color:var(--muted)}
.achievement-state{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.is-ready .achievement-state{color:var(--accent)}.is-claimed .achievement-state{color:#8cdab2}
.achievement-meter{display:flex;flex-direction:column;gap:8px}.achievement-progress{font-variant-numeric:tabular-nums}
.achievement-row progress{appearance:none;border:0;width:100%;height:7px;border-radius:9px;overflow:hidden;background:#ffffff10;color:var(--accent)}.achievement-row progress::-webkit-progress-bar{background:#ffffff10;border-radius:9px}.achievement-row progress::-webkit-progress-value{background:var(--purple);border-radius:9px}.achievement-row progress::-moz-progress-bar{background:var(--purple);border-radius:9px}
.achievement-reward{display:flex;align-items:center;gap:12px;font-size:.9rem}.achievement-reward img{object-fit:contain;flex-shrink:0}.achievement-action .button{width:100%;padding-inline:12px}.achievement-action button:disabled{opacity:.4;cursor:not-allowed;transform:none}.achievement-action .text-link{font-size:.9rem}
@media(max-width:1000px){.achievement-row{grid-template-columns:minmax(0,1fr) 190px;gap:16px}.achievement-details{grid-column:1}.achievement-meter{grid-column:1;grid-row:2}.achievement-reward{grid-column:2;grid-row:1}.achievement-action{grid-column:2;grid-row:2}}
@media(max-width:550px){.achievement-row{grid-template-columns:minmax(0,1fr) 140px;padding:18px 14px;gap:14px}.achievement-details{grid-column:1/-1}.achievement-meter{grid-column:1/-1;grid-row:2}.achievement-reward{grid-column:1;grid-row:3;font-size:.8rem;gap:8px}.achievement-action{grid-column:2;grid-row:3}.achievement-action .button{font-size:.8rem}}
.site-header{flex-wrap:wrap;column-gap:20px;row-gap:0;padding-top:18px}.site-header nav{order:3;width:100%;height:52px;overflow-x:auto;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap}.site-header nav:empty{display:none}.site-header nav a{flex-shrink:0;white-space:nowrap}.site-header nav a.active:after{bottom:5px}.account-menu{flex-shrink:0}.account-menu button{white-space:nowrap}
@media(max-width:900px){.daily-gift{flex-wrap:wrap}.daily-gift form{width:100%}}
@media(max-width:550px){.daily-gift{gap:14px;padding:18px}.daily-gift>img{width:60px;height:84px}.daily-gift-copy{min-width:160px}.daily-gift button{width:100%}}
.showcase-section{margin:32px 0 40px}.showcase-section>p{color:var(--muted);margin-top:12px;font-size:.9rem}
.showcase-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:24px}
.showcase-slot{min-width:0}.showcase-empty{aspect-ratio:1061/1483;border:1px dashed #b58aff50;background:linear-gradient(135deg,#8349ec0d,var(--surface));border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:14px}.showcase-empty>span{font-size:2rem;color:var(--accent)}.showcase-empty p{font-size:.8rem}
.showcase-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}.showcase-actions form{margin:0}.showcase-condition{text-align:center;color:var(--muted);margin:12px 0;font-size:.85rem}.showcase-picker form .button{width:100%}
@media(max-width:900px){.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(max-width:550px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.profile-card-request{padding:24px;border:1px solid #b58aff60;border-radius:14px;background:linear-gradient(120deg,#8349ec18,var(--surface));margin:24px 0}
.profile-card-request p{margin:12px 0;color:var(--muted)}.profile-card-request small{display:block;margin-top:16px;color:var(--muted)}.profile-request-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.admin-request-list{display:grid;gap:16px;margin-bottom:40px}.admin-request{display:flex;align-items:center;gap:24px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.admin-request>img{border-radius:12px;object-fit:cover;flex-shrink:0}.admin-request>div{flex:1;min-width:0;overflow-wrap:anywhere}.admin-request p{color:var(--muted);font-size:.85rem;margin:8px 0}
.admin-tabs{margin:24px 0 32px}.admin-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.admin-stats-grid article,.admin-panel,.admin-user-list article{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:22px}.admin-stats-grid strong{display:block;font-size:2rem;color:var(--accent)}.admin-stats-grid span{color:var(--muted)}.admin-panel{max-width:720px}.admin-rarity-list{display:grid;gap:10px}.admin-rarity-list div{display:grid;grid-template-columns:1fr auto 80px;gap:16px;border-bottom:1px solid var(--border);padding:10px 0}.admin-rarity-list small{color:var(--muted);text-align:right}.admin-user-list{display:grid;gap:12px}.admin-user-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.admin-user-list img{border-radius:50%;object-fit:cover}.admin-user-list h2{margin:0;font-size:1.05rem}.admin-user-list p{margin:5px 0;color:var(--muted);font-size:.85rem}.admin-user-list dl{display:grid;grid-template-columns:auto auto;gap:4px 14px;margin:0;font-size:.8rem}.admin-user-list dt{color:var(--muted)}.admin-user-list dd{margin:0;text-align:right}@media(max-width:700px){.admin-stats-grid{grid-template-columns:1fr}.admin-user-list article{grid-template-columns:auto 1fr}.admin-user-list dl{grid-column:2}}
.admin-user-banner{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;line-height:0}.admin-user-banner:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.admin-user-banner:hover img{box-shadow:0 0 0 3px var(--accent),0 0 24px #8c4dff88}.admin-user-details{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px}.admin-detail-grid{display:grid;grid-template-columns:1fr auto 1fr auto;gap:8px 20px;margin-top:12px}.admin-detail-grid span{color:var(--muted)}.admin-detail-grid b{text-align:right}
.admin-stats-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.admin-stat-lead{color:var(--muted)}.admin-stat-lead strong{font-size:1.8rem;color:var(--accent);margin-right:8px}@media(max-width:700px){.admin-stats-columns{grid-template-columns:1fr}}
@media(max-width:700px){.admin-request{flex-wrap:wrap;padding:18px;gap:16px}.admin-request form{width:100%}.admin-request button{width:100%}}
.showcase-slot-link{display:block;border-radius:14px;cursor:pointer;transition:filter .18s}
.showcase-slot-link:hover{filter:drop-shadow(0 0 12px #b58aff35)}
.showcase-slot-link:hover .showcase-empty{border-color:var(--accent);background:linear-gradient(135deg,#8349ec25,var(--surface))}
.showcase-slot-link:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.showcase-slot-link .showcase-empty{transition:border-color .18s,background .18s}
.showcase-clear{margin-top:20px}
.showcase-slot{position:relative}
.showcase-remove{position:absolute;z-index:5;top:10px;left:10px;margin:0;opacity:0;pointer-events:none;transition:opacity .15s}
.showcase-remove button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d6b6ff80;border-radius:9px;background:#171020ed;color:#f4f1f9;box-shadow:0 3px 12px #0007}
.showcase-remove button:hover{background:#702b49;border-color:#f49bbb}
.showcase-slot:hover .showcase-remove,.showcase-slot:focus-within .showcase-remove{opacity:1;pointer-events:auto}
.showcase-select{cursor:pointer}.showcase-select:hover{filter:drop-shadow(0 0 10px #b58aff45)}
@media(hover:none),(pointer:coarse){.showcase-remove{opacity:1;pointer-events:auto}}
.twitch-login{gap:12px;white-space:nowrap;background:linear-gradient(135deg,#a34bff 0%,#8a2bef 42%,#5714b8 100%);border:1px solid #be87ff;border-radius:9px;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #3b087a70,0 4px 18px #9146ff30;text-shadow:0 1px 2px #33006980;transition:box-shadow .18s,filter .18s,transform .18s}
.twitch-login:hover{background:linear-gradient(135deg,#b263ff 0%,#9840fa 42%,#6b23cb 100%);box-shadow:inset 0 1px 0 #ffffff40,0 5px 24px #9146ff55;transform:translateY(-1px)}
.twitch-login:active{transform:translateY(0);box-shadow:inset 0 2px 5px #31096260,0 2px 10px #9146ff30}
.twitch-login>span{font-size:inherit}.twitch-login-logo{flex-shrink:0;filter:drop-shadow(0 1px 2px #38007880)}
.twitch-login.button-small{min-height:44px;padding:11px 16px}.twitch-login.button-small .twitch-login-logo{width:20px;height:20px}
@media(max-width:480px){.twitch-login.button-small{gap:8px;padding:10px 12px}.twitch-login.button-small .twitch-login-logo{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.twitch-login:hover{transform:none}}
.daily-pack-flight{position:absolute;z-index:10000;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.daily-pack-flight:before{content:"";position:absolute;inset:12% -20%;border-radius:50%;background:radial-gradient(ellipse,var(--flight-color,#b58aff),transparent 68%);filter:blur(18px);opacity:.65}
.daily-pack-flight>img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.daily-gift-error[hidden]{display:none}.daily-gift-error{width:100%;color:#f1a9ba!important}.daily-gift[aria-busy=true] button{opacity:.65;cursor:wait}


/* Combat values share the card face in collections, packs, decks and inspections. */
.trading-card>.card-character{height:66%}
.card-combat-stats{position:absolute;left:8%;right:8%;top:72%;height:7%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:8%;z-index:3;pointer-events:none}
.card-combat-stats>svg{display:block;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--stat-color) 55%,transparent);border-radius:5px;background:linear-gradient(135deg,#21192bf5,#0c0912f5);box-shadow:0 2px 5px #0008;color:var(--stat-color);padding:2%}
.card-combat-stats text{fill:#fff;font-family:Segoe UI,system-ui,sans-serif;font-size:26px;font-weight:800;text-anchor:middle;font-variant-numeric:tabular-nums}
.combat-attack{--stat-color:#ffcb70}.combat-hp{--stat-color:#ff7794}.combat-armor{--stat-color:#7bd7ff}
.combat-icon{fill:currentColor;stroke:#090711;stroke-width:1.5;stroke-linejoin:round}
.combat-highlight{fill:none;stroke:#fff9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


.duel-effects-overlay{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.duel-effect-card{position:absolute;pointer-events:none;transform-origin:top left;filter:drop-shadow(0 8px 14px #0009)}
.duel-effect-card>.trading-card{width:100%;height:100%}
.duel-damage-number{position:absolute;color:#ffddca;font-size:clamp(24px,3vw,42px);font-weight:900;text-shadow:0 2px 3px #200000,0 0 12px #ff352d;line-height:1}

/* Battle values stay readable beside the influence map, including inspection. */
.battle-card .card-combat-stats{left:7%;right:auto;top:6%;width:32%;height:24%;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:7%}
.battle-card .card-combat-stats text{font-size:32px}

/* Board portraits share their surface with the detached combat animation clones. */
.battlefield-character{--field-dark:#06251c;--field-mid:#126647;--field-light:#77e7a4;isolation:isolate;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 48% 42%,var(--field-light) 0%,var(--field-mid) 48%,var(--field-dark) 94%);box-shadow:inset 0 0 22px #0008}
.battlefield-character.character-enemy{--field-dark:#300b16;--field-mid:#963344;--field-light:#fba08e}
.battlefield-character::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:radial-gradient(circle,#05090eaa 1px,transparent 1.8px) 0 0/6px 6px,repeating-linear-gradient(133deg,transparent 0 9px,#ffffff12 10px 11px,transparent 12px 21px);mask-image:radial-gradient(ellipse,transparent 24%,#000 90%)}
.battlefield-character>.battlefield-portrait{position:absolute;inset:5% 3% 2%;width:94%;height:93%;object-fit:contain;z-index:1;filter:drop-shadow(0 8px 5px #0007)}

.battlefield-character .card-combat-stats{left:5%;right:5%;width:auto;top:4%;height:14%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);column-gap:8%}
.battlefield-character .card-combat-stats text{font-size:38px}
.battlefield-character .combat-hp{grid-column:1;grid-row:1}
.battlefield-character .combat-attack{grid-column:2;grid-row:1}

.opponent-card-back{filter:drop-shadow(0 7px 10px #0009);border-radius:7px;overflow:hidden}.opponent-card-back img{display:block;width:100%;height:100%;object-fit:fill}

/* The fixed match owns scrolling; transformed cards cannot expand the page. */
html:has(.match-screen),body:has(.match-screen){overflow:hidden}
.duel-effects-overlay{contain:strict}

/* Navigation hover and keyboard focus share the same visual treatment. */
.site-header nav a{transition:color .18s,text-shadow .18s;background:transparent;isolation:isolate}
.site-header nav a::before{content:"";position:absolute;inset:6px -9px;border-radius:8px;background:radial-gradient(ellipse at center,#a367e629,transparent 75%);opacity:0;transition:opacity .2s;z-index:-1;pointer-events:none}
.site-header nav a::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:2px;background:linear-gradient(90deg,#8850ed,#dab6ff);transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .2s,opacity .2s;pointer-events:none}
.site-header nav a.active::after{transform:scaleX(1);opacity:1}
.site-header nav a:hover,.site-header nav a:focus-visible{color:#e4cfff;text-shadow:0 0 14px #b574ff88}
.site-header nav a:hover::before,.site-header nav a:focus-visible::before{opacity:1}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1);opacity:1}
.site-header nav a:focus-visible{outline:2px solid #c69aff;outline-offset:-2px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.site-header nav a,.site-header nav a::before,.site-header nav a::after{transition:none}}
.ability-badge{position:absolute;left:8%;bottom:31%;z-index:4;border-radius:50%;width:13%;aspect-ratio:1;display:grid;place-items:center;color:#edccff;font-size:clamp(.7rem,1.2vw,1.1rem)}
.ability-details{padding:10px 12px;border:1px solid #9a65d455;border-radius:8px;background:#1c1627;color:#e4d5f3;margin-top:8px;font-size:.78rem;line-height:1.5}
.ability-details strong{color:#dab7ff}.ability-details p{margin:4px 0 0}
.card-dialog.has-ability{width:min(560px,calc(100vw - 48px),calc((100dvh - 235px) * 1061 / 1483))}
.card-dialog .ability-details{max-height:130px;overflow:auto;scrollbar-width:thin;scrollbar-color:#9061bb #17111f;scrollbar-gutter:stable}
.card-dialog .ability-details::-webkit-scrollbar{width:8px;height:8px}
.card-dialog .ability-details::-webkit-scrollbar-track{background:#17111f;border-radius:8px}
.card-dialog .ability-details::-webkit-scrollbar-thumb{background:#9061bb;border:2px solid #17111f;border-radius:8px}
.card-dialog .ability-details::-webkit-scrollbar-thumb:hover{background:#c397ed}
.card-dialog .ability-details::-webkit-scrollbar-button{display:none}
.card-dialog .ability-details::-webkit-scrollbar-corner{background:#17111f}
.duel-heal-number{color:#8effb2;text-shadow:0 2px 3px #002915,0 0 12px #36ff79}

.ability-badge{pointer-events:auto;cursor:help}
.ability-badge:focus-visible,.tile-ability:focus-visible{outline:2px solid #f1dfff;outline-offset:3px}
.duel-effects-overlay .ability-badge{pointer-events:none}
.ability-tooltip{position:fixed;inset:auto;margin:0;z-index:20000;width:min(290px,calc(100vw - 24px));box-sizing:border-box;padding:13px 15px;border:1px solid #b286ed;border-radius:12px;background:linear-gradient(145deg,#30203fee,#130e1cfb);color:#eee5fc;box-shadow:0 12px 36px #0009,0 0 18px #a064da25;font-family:Segoe UI,system-ui,sans-serif;text-align:left;line-height:1.5;font-size:.8rem;overflow:auto;max-height:calc(100dvh - 24px)}
.ability-tooltip strong{display:block;color:#dab7ff;font-size:.9rem;margin-bottom:5px}.ability-tooltip p{margin:0}
.ability-tooltip::backdrop{background:transparent;pointer-events:none}

/* Shared generated special-ability emblem, including tooltip and duel effects. */
.ability-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 3px #10091bbb)}
.ability-details strong,.ability-tooltip strong{display:flex;align-items:center;gap:7px}
.ability-details strong .ability-icon,.ability-tooltip strong .ability-icon{width:24px;height:24px;flex:0 0 24px}
.duel-heal-number .ability-icon{width:38px;height:38px}

/* Shared battle arena: global selectors deliberately support live/hot-reloaded components regardless of CSS scope. */

.match-screen .practice-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:38px 0 24px}
.match-screen .practice-heading h1{font-size:clamp(2.2rem,4vw,3.5rem)}
.match-screen .practice-heading p{color:var(--muted);margin-top:12px}
.match-screen .practice-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.match-screen .practice-note{font-size:.82rem;color:var(--muted);margin:16px 0}
.match-screen .practice-status{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:26px;text-align:center}
.match-screen .practice-status>div{display:flex;flex-direction:column;gap:8px;min-width:95px}
.match-screen .practice-status strong{font-size:2rem;color:var(--accent)}
.match-screen .practice-status>div:last-child strong{color:#ff8ca3}
.match-screen .practice-status span{font-size:.8rem;color:var(--muted)}
.match-screen .practice-status p{font-weight:700}
.match-screen .practice-board-scroll{overflow-x:auto;padding:8px}
.match-screen .practice-board{display:grid;grid-template-columns:40px repeat(5,minmax(90px,1fr)) 40px;gap:12px;max-width:940px;min-width:620px;margin:auto;align-items:center}
.match-screen .board-tile{position:relative;aspect-ratio:1061/1483;background:#17171f;border:2px dashed #45404f;border-radius:7px;padding:3px;color:var(--muted);min-width:0;transition:border-color .15s,background .15s}
.match-screen .owner-left{background:#8b48e51c;border-color:#8153b2}
.match-screen .owner-right{background:#db4b6a16;border-color:#a44c68}
.match-screen .board-tile.legal{border-style:solid;border-color:#c39bff;cursor:pointer}
.match-screen .board-tile.legal:hover,.match-screen .board-tile.legal:focus-visible{background:#b58aff35;outline:2px solid #eee0ff;outline-offset:2px}
.match-screen .board-tile.affected{border-color:#ffda7b;box-shadow:0 0 16px #ffcd6c55}
.match-screen .board-tile:disabled{cursor:default;opacity:1}
.match-screen .empty-tile{font-size:2rem;font-weight:300;color:inherit}
.match-screen .owner-left .empty-tile{color:#b58aff}
.match-screen .owner-right .empty-tile{color:#ed94ab}
.match-screen .tile-pattern{position:absolute;left:50%;right:auto;top:auto;bottom:5%;transform:translateX(-50%);padding:5px;--influence-cell:clamp(10px,1.05vw,14px);border-radius:4px;background:#110b21ed;pointer-events:none}
.match-screen .lane-score{text-align:center;font-size:1.15rem;color:var(--muted);font-variant-numeric:tabular-nums}
.match-screen .lane-score.winning{color:#ffe6a1;font-weight:800}
.match-screen .practice-hand{margin:28px 0}
.match-screen .hand-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.match-screen .hand-heading p{font-size:.85rem;color:var(--muted);margin-top:8px}
.match-screen .hand-cards{display:flex;gap:14px;overflow-x:auto;padding:8px 5px 16px}
.match-screen .hand-card{flex:0 0 145px;min-width:0;background:#18131f;border:2px solid transparent;border-radius:8px;padding:6px;color:var(--text);text-align:center}
.match-screen .hand-card.selected{border-color:#d0acff;box-shadow:0 0 16px #a06aff55;background:#322245}
.match-screen .hand-pattern{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.72rem;margin-top:10px;min-height:34px}
.match-screen .practice-log{margin:28px 0 50px;border-top:1px solid var(--border);padding-top:20px}
.match-screen .practice-log summary{cursor:pointer;color:var(--accent)}
.match-screen .practice-log li{font-size:.83rem;color:var(--muted);margin:8px 0}
@media(max-width:600px){
.match-screen .practice-heading{align-items:start}
.match-screen .practice-heading>a{white-space:nowrap;font-size:.8rem}
.match-screen .practice-status{padding:16px 10px;gap:10px}
.match-screen .practice-status>div{min-width:65px}
.match-screen .practice-status p{font-size:.85rem}
.match-screen .practice-status span{font-size:.7rem}
.match-screen .hand-card{flex-basis:125px}
.match-screen .practice-actions .button{font-size:.8rem}}
.match-screen .practice-play-area{display:grid;grid-template-columns:380px minmax(0,1fr);gap:32px;align-items:start}
.match-screen .practice-field{min-width:0}
.match-screen .practice-play-area .practice-hand{margin:8px 0 0;padding:20px 10px;background:none;border:0;position:sticky;top:20px;isolation:isolate;z-index:5}
.match-screen .practice-play-area .hand-heading{display:flex;align-items:start;gap:14px;margin:0 4px 20px}
.match-screen .practice-play-area .hand-heading h2{font-size:1.25rem}
.match-screen .practice-play-area .hand-heading p{font-size:.76rem;max-width:240px}
.match-screen .practice-play-area .hand-heading button{flex-shrink:0;padding:10px 14px;min-height:40px;font-size:.8rem}
.match-screen .practice-play-area .hand-cards{--fan-spread:190px;position:relative;display:block;height:380px;max-height:none;overflow:visible;padding:0;margin-top:70px;isolation:isolate}
.match-screen .practice-play-area .hand-cards:before{content:"";position:absolute;inset:45px -10px 20px;background:radial-gradient(ellipse,#7840b92b,transparent 68%);pointer-events:none}
.match-screen .hand-slot{position:absolute;left:50%;top:20px;width:158px;z-index:var(--fan-order);transform:translateX(calc(-50% + var(--fan-position) * var(--fan-spread))) translateY(var(--fan-rise)) rotate(var(--fan-angle));transform-origin:50% 100%}
.match-screen .practice-play-area .hand-card{display:block;width:100%;padding:0;background:transparent;border:0;border-radius:9px;cursor:grab;user-select:none;-webkit-user-select:none;transform-origin:50% 80%;filter:drop-shadow(-6px 8px 8px #0009);transition:transform .2s ease,filter .2s ease}
.match-screen .practice-play-area .hand-card img{-webkit-user-drag:none;pointer-events:none}
.match-screen .practice-play-area .hand-card .trading-card{pointer-events:none}
.match-screen .practice-play-area .hand-card.selected{box-shadow:none;background:transparent;transform:translateY(-26px);filter:drop-shadow(0 0 7px #b58affbb)}
.match-screen .hand-slot:has(.selected){z-index:30}
.match-screen .hand-slot:hover,.match-screen .hand-slot:focus-within{z-index:50}
.match-screen .practice-play-area .hand-slot:hover .hand-card:not(:disabled),.match-screen .practice-play-area .hand-slot:focus-within .hand-card:not(:disabled){transform:translateY(-58px) rotate(calc(-1 * var(--fan-angle))) scale(1.14);filter:drop-shadow(0 12px 18px #000b) drop-shadow(0 0 5px #b58aff88)}
.match-screen .practice-play-area .hand-card:active{cursor:grabbing}
.match-screen .practice-play-area .hand-card:disabled{cursor:default}
.match-screen .practice-play-area .hand-pattern{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.72rem;min-height:42px;margin-top:7px;padding:6px;background:#17111feF;border:1px solid #74569d66;border-radius:7px;--influence-cell:10px;opacity:0;transition:opacity .15s}
.match-screen .hand-slot:hover .hand-pattern,.match-screen .hand-slot:focus-within .hand-pattern,.match-screen .hand-card.selected .hand-pattern{opacity:1}
.match-screen .practice-play-area.is-dragging .board-tile.legal{background:radial-gradient(ellipse at 45% 40%,#204f3b,#091e18);border-color:#9cf0b7}
.match-screen .practice-play-area.is-dragging .board-tile.affected{border-color:#ffda7b}
.match-screen .practice-play-area:not(:has(.practice-hand)){grid-template-columns:minmax(0,1fr)}
@media(max-width:1120px){
.match-screen .practice-play-area{grid-template-columns:320px minmax(0,1fr);gap:20px}
.match-screen .practice-play-area .hand-cards{--fan-spread:150px}
.match-screen .hand-slot{width:145px}}
@media(max-width:850px){
.match-screen .practice-play-area{grid-template-columns:minmax(0,1fr)}
.match-screen .practice-play-area .practice-hand{position:relative;top:auto;width:min(420px,100%);justify-self:center}
.match-screen .practice-play-area .hand-cards{height:310px;--fan-spread:180px}
.match-screen .practice-play-area .hand-heading p{max-width:260px}}
@media(max-width:420px){
.match-screen .hand-slot{width:135px}
.match-screen .practice-play-area .hand-cards{--fan-spread:145px;height:290px}
.match-screen .practice-play-area .hand-heading{gap:8px}}
@media(prefers-reduced-motion:reduce){
.match-screen .practice-play-area .hand-card,.match-screen .practice-play-area .hand-pattern{transition:none}}
.match-screen .board-card-inspection{display:contents}
.match-screen .board-tile[data-card-inspect]{cursor:zoom-in}
.match-screen .tile-pattern{width:44%;box-sizing:border-box}
.match-screen .tile-pattern .influence-map{width:100%;grid-template-columns:repeat(var(--influence-columns,3),minmax(0,1fr))}
.match-screen .tile-pattern .influence-map span{width:100%;height:auto;aspect-ratio:1}
.match-screen .board-tile.owner-left{background:radial-gradient(ellipse at 45% 40%,#204f3b,#091e18);border-color:#4aaf7d}
.match-screen .board-tile.owner-right{background:radial-gradient(ellipse at 45% 40%,#682939,#240c14);border-color:#c56a7a}
.match-screen .owner-left .empty-tile{color:#85e7ac}
.match-screen .board-tile.legal{border-color:#9cf0b7;animation:legal-placement-pulse 2.6s ease-in-out infinite}
@keyframes legal-placement-pulse{0%,100%{box-shadow:inset 0 0 5px #8bffc015,0 0 2px #8bffc015}50%{box-shadow:inset 0 0 22px #8bffc045,0 0 9px #8bffc050}}
.duel-drag-preview{position:fixed!important;left:0!important;top:0!important;z-index:-1!important;transform:none!important;transition:none!important;animation:none!important;pointer-events:none!important;margin:0!important;box-sizing:border-box!important}
.match-screen .board-tile.legal:hover,.match-screen .board-tile.legal:focus-visible{background:#256442;outline-color:#cbffdc}
.match-screen .board-tile.affected{border-color:#ffda7b}
.match-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 60% 40%,#21182f,#101014 75%);padding:14px 20px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
.match-screen .practice-status{margin:0;padding:8px 4px 16px;background:none;border:0;min-height:48px;flex-shrink:0;font-size:.85rem}
.match-screen .practice-status p{margin:0}
.match-screen .match-draws{color:var(--muted);font-size:.75rem}
.match-screen .practice-play-area{--tile:min(calc((100dvh - 130px) * .178),calc((100vw - 490px) / 5));grid-template-columns:280px minmax(0,1fr);gap:12px;flex:1;min-height:0;align-items:center}
.match-screen .practice-field{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;gap:8px;align-items:center;justify-self:center}
.match-screen .practice-board-scroll{overflow:visible;padding:0}
.match-screen .practice-board{min-width:0;max-width:none;grid-template-columns:20px repeat(5,var(--tile)) 20px;gap:6px;margin:0}
.match-screen .board-tile{padding:2px}
.match-screen .practice-field>.practice-note{display:none}
.match-screen .match-score{text-align:center;display:flex;flex-direction:column;gap:8px;font-size:.7rem;overflow-wrap:anywhere}
.match-screen .match-score strong{font-size:clamp(1.4rem,3vw,2.8rem);font-variant-numeric:tabular-nums}
.match-screen .score-friendly{color:#91efb7}
.match-screen .score-enemy{color:#ffa1aa}
.match-screen .practice-hand{position:relative;top:auto;padding:10px 0;margin:0;width:100%}
.match-screen .hand-heading{margin:0;flex-wrap:wrap}
.match-screen .hand-heading p{display:none}
.match-screen .hand-cards{height:min(340px,calc(100dvh - 200px));margin-top:55px;--fan-spread:140px}
.match-screen .hand-slot{width:clamp(85px,18vh,140px)}
.match-screen .practice-log{position:absolute;bottom:8px;left:20px;margin:0;padding:4px 8px;border:0;font-size:.75rem;z-index:60;background:#17121fed;border-radius:6px;max-width:min(480px,90vw)}
.match-screen .practice-log[open]{max-height:45dvh;overflow:auto}
.match-screen .practice-play-area:not(:has(.practice-hand)){grid-template-columns:1fr}
@media(max-width:850px){
.match-screen{padding:8px}
.match-screen .practice-status{gap:8px;font-size:.75rem;padding-bottom:8px}
.match-screen .match-draws{display:none}
.match-screen .practice-play-area{--tile:min(calc((100dvh - 270px) * .178),calc((100vw - 140px) / 5));grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 175px;gap:4px}
.match-screen .practice-field{grid-row:1;grid-column:1;grid-template-columns:36px auto 36px;gap:4px}
.match-screen .practice-board{grid-template-columns:12px repeat(5,var(--tile)) 12px;gap:3px}
.match-screen .lane-score{font-size:.7rem}
.match-screen .practice-hand{grid-row:2;width:min(320px,100%);align-self:start;padding:0}
.match-screen .hand-heading{position:absolute;left:-5px;top:0;z-index:55}
.match-screen .hand-heading h2{display:none}
.match-screen .hand-cards{height:155px;margin-top:10px;--fan-spread:155px}
.match-screen .hand-slot{width:78px;top:6px}
.match-screen .hand-pattern{font-size:.55rem;padding:2px;gap:3px;--influence-cell:5px;min-height:20px}
.match-screen .practice-log{left:auto;right:8px;bottom:5px}
.match-screen .match-score strong{font-size:1.3rem}
}
.match-screen .match-error{position:absolute;top:55px;left:50%;transform:translateX(-50%);z-index:70;max-width:90%;margin:0;background:#291b28}
@media(min-width:851px){
.match-screen .practice-play-area{--tile:min(calc((100dvh - 130px) * .178),calc((100vw - 570px) / 5));grid-template-columns:360px minmax(0,1fr)}
.match-screen .practice-hand{box-sizing:border-box;padding-left:48px;padding-right:12px;min-width:0}
.match-screen .hand-cards{width:100%;min-width:0;--fan-spread:120px}
}
@media(min-width:1200px){
.match-screen .practice-play-area{--tile:min(calc((100dvh - 130px) * .178),calc((100vw - 650px) / 5));grid-template-columns:440px minmax(0,1fr)}
.match-screen .practice-hand{padding-left:80px;padding-right:12px}
.match-screen .hand-slot{width:clamp(160px,23dvh,210px);left:calc(50% + 48px)}
.match-screen .hand-cards{height:min(430px,calc(100dvh - 230px));--fan-spread:180px}
}
.match-screen .opponent-hand{min-width:0;text-align:center;align-self:center}
.match-screen .opponent-hand h2{font-size:1.1rem;color:#ffd0d8}
.match-screen .opponent-hand small{color:var(--muted);font-weight:400}
.match-screen .opponent-fan{position:relative;height:380px;margin-top:55px;--fan-spread:120px}
.match-screen .opponent-slot{position:absolute;left:50%;top:20px;width:clamp(85px,18vh,140px);transform:translateX(calc(-50% + var(--fan-position) * var(--fan-spread))) translateY(var(--fan-rise)) rotate(var(--fan-angle));transform-origin:50% 100%;z-index:var(--fan-order)}
@media(min-width:851px){
.match-screen .practice-play-area,.match-screen .practice-play-area:not(:has(.practice-hand)){--side:clamp(210px,23vw,440px);--tile:min(calc((100dvh - 130px) * .178),calc((100vw - var(--side) * 2 - 210px) / 5));grid-template-columns:var(--side) minmax(0,1fr) var(--side)}
.match-screen .practice-field{grid-column:2}
.match-screen .opponent-hand{grid-column:3}
}
@media(min-width:1200px){
.match-screen .opponent-slot{width:clamp(160px,23dvh,210px)}
.match-screen .opponent-fan{height:min(430px,calc(100dvh - 230px));--fan-spread:140px}}
@media(max-width:850px){
.match-screen .practice-play-area{grid-template-columns:1fr 1fr}
.match-screen .practice-field{grid-column:1 / -1}
.match-screen .practice-hand{grid-column:1}
.match-screen .opponent-hand{grid-column:2;grid-row:2;align-self:start}
.match-screen .opponent-hand h2{font-size:.65rem;margin:0}
.match-screen .opponent-fan{height:140px;margin-top:0;--fan-spread:60px}
.match-screen .opponent-slot{width:65px;top:12px}
.match-screen .hand-cards{--fan-spread:60px}
}
.match-screen .hand-actions{display:flex;justify-content:center;position:relative;z-index:55;margin-top:8px}
.match-screen .hand-actions .button{min-height:38px;padding:8px 22px;font-size:.8rem}
@media(min-width:1200px){
.match-screen .hand-actions{transform:translateX(48px)}}
@media(max-width:850px){
.match-screen .practice-play-area{--tile:min(calc((100dvh - 310px) * .178),calc((100vw - 140px) / 5));grid-template-rows:minmax(0,1fr) 215px}
.match-screen .hand-cards{height:155px}
.match-screen .hand-actions{margin-top:0}
.match-screen .hand-actions .button{min-height:32px;padding:5px 18px}}
.match-screen .hand-actions .button{
    background:linear-gradient(135deg,#9555ed,#6331bf);
    border:1px solid #c39aff;
    color:#fff;
    font-weight:800;
    letter-spacing:.035em;
    box-shadow:0 4px 16px #8c44db55,inset 0 1px 0 #ffffff30;
    transition:background .15s,box-shadow .15s,transform .15s;
}
.match-screen .hand-actions .button:not(:disabled):hover{
    background:linear-gradient(135deg,#aa6aff,#7842d5);
    box-shadow:0 6px 24px #a15bf080,inset 0 1px 0 #ffffff45;
    transform:translateY(-2px);
}
.match-screen .hand-actions .button:focus-visible{outline:3px solid #ead8ff;outline-offset:4px}
.match-screen .hand-actions .button:not(:disabled):active{transform:translateY(0);box-shadow:0 2px 8px #8c44db55}
.match-screen .hand-actions .button:disabled{background:#352c45;border-color:#645471;color:#b7a9c5;box-shadow:none;opacity:.65;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
.match-screen .hand-actions .button{transition:none}
.match-screen .hand-actions .button:not(:disabled):hover{transform:none}}
.match-screen .tile-ability{position:absolute;left:8%;bottom:9%;color:#edccff;border-radius:50%;width:18%;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(.6rem,1.1vw,1rem)}
.match-screen .tile-status{position:absolute;top:22%;left:8%;display:flex;gap:3px;color:#f6df99;font-size:.8rem}
.match-screen .tile-status span{background:#19111f;border-radius:3px;padding:1px}
.card-combat-stats .stat-buffed{--stat-color:#8ff2ad;background:linear-gradient(135deg,#163f2b,#0a1911)}
.card-combat-stats .stat-buffed text{fill:#99ffbb}
.card-combat-stats .stat-weakened text{fill:#ff9aab}
.match-screen .tile-status{right:8%;flex-wrap:wrap;gap:3px;font-size:clamp(.5rem,.7vw,.72rem);pointer-events:auto}
.match-screen .tile-status .status-chip{padding:2px 4px;border:1px solid #b49ad955;border-radius:5px;line-height:1.15;cursor:help}
.match-screen .tile-status .buff{color:#a2f5bb;background:#103222ed;border-color:#66ce8b88}
.match-screen .tile-status .shield{color:#9bdeff;background:#112e43ed;border-color:#72caff88}
.match-screen .tile-status .status-chip.shield{display:inline-flex;align-items:center;gap:3px;padding:2px 5px;font-size:clamp(.8rem,1.1vw,1.1rem);font-variant-numeric:tabular-nums}
.armor-status-icon{display:block;width:1.25em;height:1.25em;object-fit:contain;filter:drop-shadow(0 1px 2px #0008)}
.match-screen .tile-status .debuff{color:#ffb1bd;background:#411824ed;border-color:#ec859788}
.match-screen .tile-status .pending{color:#f9dc98}
.match-screen .tile-trap{position:absolute;right:7%;bottom:8%;color:#ffbd76;font-size:1rem}
.match-screen.online-match-info{position:absolute;top:48px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted);z-index:3}
.match-screen.online-match-info button{margin-left:8px;padding:5px 10px}
.match-screen.online-match-info .text-link{background:transparent;border:0;color:#d4adff}
.match-screen.online-match-info + .practice-play-area{padding-top:24px}
@media(min-width:851px){
.match-screen.online-match .practice-hand{padding-left:0;padding-right:0}
.match-screen.online-match .hand-slot,.match-screen.online-match .opponent-slot{width:min(210px,calc(var(--side) * .43));left:50%}
.match-screen.online-match .hand-cards,.match-screen.online-match .opponent-fan{--fan-spread:calc(var(--side) * .32)}
}
@media(max-width:850px){
.match-screen.online-match-info{font-size:.7rem;left:12px;right:12px}
.match-screen.online-match-info>span{max-width:68%}
.match-screen.online-match-info>button{white-space:nowrap;padding:5px 0}}
@media(min-width:851px){
.match-screen.online-match .practice-play-area{--tile:min(calc((100dvh - 150px) * .178),calc((100vw - var(--side) * 2 - 280px) / 5))}
.match-screen.online-match .practice-field{grid-template-columns:44px max-content 44px;gap:6px}
}

/* Guided battle overrides. */

.match-screen.tutorial-match{gap:8px}
.match-screen.tutorial-match .practice-play-area{--side:clamp(170px,22vw,380px);--tile:min(calc((100dvh - 360px) * .178),calc((100vw - var(--side) * 2 - 220px) / 5));min-height:310px}
.match-screen.tutorial-match .practice-field{grid-template-columns:40px max-content 40px;gap:6px}
.match-screen.tutorial-match .practice-hand{padding:0;min-width:0}
.match-screen.tutorial-match .hand-slot,.match-screen.tutorial-match .opponent-slot{left:50%;width:min(175px,calc(var(--side) * .40),22dvh)}
.match-screen.tutorial-match .hand-cards,.match-screen.tutorial-match .opponent-fan{--fan-spread:calc(var(--side) * .24);height:min(290px,32dvh);margin-top:30px}
.match-screen.tutorial-match .hand-actions{transform:none;margin-top:0}
.match-screen.tutorial-match .hand-slot.tutorial-hand-focus{z-index:55}
.match-screen.tutorial-match .tutorial-hand-focus .hand-card{transform:translateY(-32px) rotate(calc(-1 * var(--fan-angle)))}
.match-screen.tutorial-match .tutorial-hand-focus .hand-pattern{opacity:1}
.match-screen.tutorial-match .tutorial-coach{position:relative;flex-shrink:0;z-index:65;width:min(1120px,100%);align-self:center;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 245px;column-gap:26px;padding:18px 24px;border:1px solid #a576d062;border-radius:14px;background:radial-gradient(ellipse at top right,#643da13b,transparent 70%),#19141ff5}
.match-screen.tutorial-match .lesson-progress{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;font-size:.6rem;letter-spacing:.1em;color:#c69be8}
.match-screen.tutorial-match .tutorial-coach progress{grid-column:1/-1;display:block;appearance:none;width:100%;height:3px;border:none;border-radius:4px;margin:8px 0 12px;background:#352a41}
.match-screen.tutorial-match .tutorial-coach progress::-webkit-progress-bar{background:#352a41;border-radius:4px}
.match-screen.tutorial-match .tutorial-coach progress::-webkit-progress-value{background:#b071ed;border-radius:4px}
.match-screen.tutorial-match .tutorial-coach progress::-moz-progress-bar{background:#b071ed}
.match-screen.tutorial-match .lesson-copy{grid-column:1;grid-row:3/6}
.match-screen.tutorial-match .lesson-copy h2{font-size:1.15rem;line-height:1.3;margin:0 0 8px}
.match-screen.tutorial-match .lesson-copy h2:focus{outline:none}
.match-screen.tutorial-match .lesson-copy p{font-size:.82rem;line-height:1.65;color:#d2c6de;margin:0}
.match-screen.tutorial-match .lesson-lock{grid-column:2;font-size:.68rem;line-height:1.5;color:#ad9dbb;margin:0 0 10px}
.match-screen.tutorial-match .lesson-next,.match-screen.tutorial-match .tutorial-coach>.button{grid-column:2;width:100%;align-self:start;font-size:.8rem;padding:12px}
.match-screen.tutorial-match .lesson-action{grid-column:2;padding:12px;border:1px solid #b9eb9955;border-radius:10px;background:#86bc6115;font-size:.8rem;color:#d7f4bf}
.match-screen.tutorial-match .lesson-action span{font-size:1.4rem;vertical-align:middle;margin-right:8px}
.match-screen.tutorial-match .restart-button{grid-column:2;display:block;background:transparent;border:0;color:#cba5e8;cursor:pointer;font-size:.72rem;margin:8px auto 0;padding:5px}
.match-screen.tutorial-match .restart-button:hover{text-decoration:underline}
.match-screen.tutorial-match .tutorial-lobby-link{grid-column:2;display:block;text-align:center;font-size:.8rem;margin-top:10px}
.match-screen.tutorial-match .tutorial-target{position:relative;outline:2px solid #d6a9ff;outline-offset:4px;box-shadow:0 0 24px #ac60ff35;z-index:2}
.match-screen.tutorial-match .tutorial-action-target{outline-color:#e4ffad;box-shadow:0 0 24px #a5da6a55}
.match-screen.tutorial-match .tutorial-action-target::after{content:'↓';position:absolute;left:50%;top:-40px;transform:translateX(-50%);font-size:32px;font-weight:900;color:#e4ffad;text-shadow:0 3px 6px #000;line-height:1;pointer-events:none;animation:tutorial-point 1s ease-in-out infinite;z-index:5}
.match-screen.tutorial-match .tutorial-inspection{position:fixed;top:60px;left:50%;transform:translateX(-50%);width:250px;padding:16px;border:1px solid #bc8fea;border-radius:14px;background:#19131ff5;box-shadow:0 10px 60px #000b;z-index:80}
.match-screen.tutorial-match .inspection-card{width:min(160px,22dvh);margin:auto}
.match-screen.tutorial-match .tutorial-stage button:focus-visible,.match-screen.tutorial-match .tutorial-coach button:focus-visible{outline:3px solid #e4ffad;outline-offset:5px}
@keyframes tutorial-point{
50%{transform:translate(-50%,5px)}}
@media(max-width:850px){
.match-screen.tutorial-match .practice-play-area{--tile:min(75px,calc((100vw - 120px) / 5));grid-template-rows:auto 205px;flex:0 0 auto;min-height:0;gap:15px;padding-top:22px}
.match-screen.tutorial-match .practice-field{grid-template-columns:28px max-content 28px;gap:2px}
.match-screen.tutorial-match .hand-slot,.match-screen.tutorial-match .opponent-slot{width:65px}
.match-screen.tutorial-match .hand-cards,.match-screen.tutorial-match .opponent-fan{--fan-spread:36px;height:155px;margin-top:20px}
.match-screen.tutorial-match .hand-pattern{--influence-cell:5px;font-size:.55rem;min-height:20px}
.match-screen.tutorial-match .match-draws{display:block;font-size:.6rem;max-width:120px}
.match-screen.tutorial-match .tutorial-coach{display:flex;flex-direction:column;padding:16px;gap:8px}
.match-screen.tutorial-match .tutorial-coach progress{margin:0 0 4px}
.match-screen.tutorial-match .lesson-lock{margin:0}
.match-screen.tutorial-match .lesson-copy p{font-size:.8rem}
.match-screen.tutorial-match .tutorial-inspection{position:static;transform:none;align-self:center;width:min(250px,90%)}
}
@media(prefers-reduced-motion:reduce){
.match-screen.tutorial-match .tutorial-action-target::after{animation:none}}
.match-screen.tutorial-match .hand-slot{left:calc(50% + 16px)}


/* Scores are indivisible numbers, including in narrow tutorial side columns. */
.match-screen .match-score strong{white-space:nowrap;overflow-wrap:normal;word-break:normal;align-self:center}

.site-header nav .pack-nav-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pack-nav-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:20px;padding:3px 6px;border-radius:7px;font-size:.62rem;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.pack-nav-free{background:linear-gradient(135deg,#824acb,#52238f);border:1px solid #bb8aef88;color:#f6eaff;box-shadow:0 0 12px #9856e32b}
.pack-nav-count{background:#b987f51c;border:1px solid #b987f54d;color:#d7b5ff}
.pack-nav-badge svg{flex-shrink:0}

/* Online match HUD: names on the viewer's sides, clock anchored to the board. */
.match-screen .match-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}
.match-screen .surrender-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid #d37d915e;border-radius:9px;background:linear-gradient(135deg,#4e24324d,#261922);color:#f1b6c3;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.match-screen .surrender-button:hover:not(:disabled){background:#73334b66;border-color:#f19aaf;box-shadow:0 0 15px #e86d9326}
.match-screen .surrender-button:focus-visible{outline:2px solid #f4bdd0;outline-offset:3px}
.match-screen .surrender-button:disabled{opacity:.5;cursor:default}
.match-screen .surrender-confirm{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:6px 10px;border:1px solid #bb65765c;border-radius:12px;background:#281b27;z-index:80}
.match-screen .surrender-confirm>span{font-size:.75rem;color:#f0c4ce}
.match-screen .surrender-accept{background:#923e55;color:white;border-color:#df8aa2}
.match-screen .surrender-cancel{background:#33283f;color:#e2d0ef;border-color:#826697}
.match-screen.online-match .practice-play-area{position:relative;padding-top:56px}
.match-screen.online-match .practice-field{position:relative}
.match-screen .match-player-name{position:absolute;top:14px;width:var(--side);padding:0 16px;box-sizing:border-box;text-align:center;font-weight:700;font-size:clamp(.8rem,1.1vw,1.05rem);overflow-wrap:anywhere;line-height:1.4}
.match-screen .friendly-name{left:0;color:#9ce9b8}.match-screen .enemy-name{right:0;color:#f5a8b9}
.match-screen .arena-clock{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:9px 17px;border:1px solid #b48adb4d;border-radius:12px;background:linear-gradient(135deg,#31233c,#1d1728);box-shadow:0 5px 20px #0003;color:#dbc0f3;font-size:.72rem;z-index:4}
.match-screen .arena-clock strong{font-size:1.12rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#f3e8ff}
.match-screen .arena-clock.clock-urgent{border-color:#ee8695;color:#ffb9bc;background:#49202d}.match-screen .clock-urgent strong{color:#ffd9d9}
@media(min-width:851px){.match-screen.online-match .practice-play-area{--tile:min(calc((100dvh - 225px) * .178),calc((100vw - var(--side) * 2 - 280px) / 5))}}
@media(max-width:850px){.match-screen.online-match .practice-play-area{padding-top:62px}.match-screen .match-player-name{width:32%;top:9px;font-size:.74rem;padding:0 4px}.match-screen .arena-clock{padding:6px 10px;gap:5px;font-size:.62rem}.match-screen .arena-clock strong{font-size:.95rem}.match-screen .match-header-actions{gap:5px}.match-screen .surrender-button{padding:7px 9px;font-size:.65rem}.match-screen .surrender-confirm{position:absolute;right:8px;top:50px;max-width:calc(100vw - 16px)}.match-screen .surrender-confirm>span{font-size:.68rem}}

.global-duel-queue{display:inline-flex;align-items:center;align-self:center;gap:3px;white-space:nowrap;margin-left:auto;flex-shrink:0}
.duel-result-dialog{text-align:center}
.duel-result-scores{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;margin:26px 0;padding:22px 12px;border:1px solid #ba89e333;border-radius:14px;background:#0c091533}
.duel-result-scores>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.duel-result-scores>div>span:first-child{overflow-wrap:anywhere;font-size:.85rem}
.duel-result-scores strong{font-size:3.3rem;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-own strong{color:#9ff0c4}.result-opponent strong{color:#ff9fad}.result-divider{color:#b99fcc;font-size:1.6rem}
.result-elo{font-size:.85rem;font-weight:700;color:#e6cbff}.duel-result-dialog .offer-actions{margin-bottom:0}.duel-result-dialog .button{display:flex;align-items:center;justify-content:center;text-decoration:none}
.site-header nav a.queue-nav-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #aa7cdd66;border-radius:20px;background:#713cbf26;color:#dec4fa;font-size:.7rem}
.site-header nav a.queue-nav-pill::after{content:none}
.site-header nav a.queue-nav-pill::before{inset:0;border-radius:inherit}
.site-header nav a.queue-nav-pill:hover,.site-header nav a.queue-nav-pill:focus-visible{box-shadow:0 0 14px #b574ff45;border-color:#c69aff;text-decoration:none}
.queue-nav-pill time{font-variant-numeric:tabular-nums}.queue-nav-dot{width:6px;height:6px;background:#b8f1ce;border-radius:50%;box-shadow:0 0 7px #8ae0b4}
.queue-leave{background:transparent;border:0;color:#bba6ce;cursor:pointer;padding:5px;font-size:1rem}
.match-offer-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;margin:auto;padding:30px;border:1px solid #b47aed;border-radius:20px;background:radial-gradient(ellipse at top,#4a285f,#19141f 70%);color:#f3eafa;box-shadow:0 25px 100px #000a;white-space:normal;text-align:left}
.match-offer-dialog::backdrop{background:#08050bc9;backdrop-filter:blur(5px)}
.match-offer-dialog .offer-eyebrow{font-size:.65rem;letter-spacing:.14em;color:#d4a9f6}.match-offer-dialog h2{font-size:1.7rem;margin:12px 0 20px}.match-offer-dialog p{font-size:.85rem;line-height:1.6;color:#c7b5d6;margin:12px 0}.offer-opponent strong{display:block;color:#fff;font-size:1.35rem;overflow-wrap:anywhere}.offer-players{display:grid;gap:8px;padding:14px;background:#ffffff05;border-radius:10px;font-size:.8rem;color:#bb9fcf}.offer-players .accepted{color:#9feaaf}.offer-deadline strong{color:#edd4ff;font-variant-numeric:tabular-nums}.offer-actions{display:flex;gap:10px;margin:22px 0 14px}.offer-actions .button{flex:1;font-size:.82rem}.offer-actions button:disabled{opacity:.5;cursor:default}.offer-decline{background:#492535;border:1px solid #ae657e77;border-radius:8px;color:#ffc3d1;padding:12px 18px;cursor:pointer}.offer-decline:hover:not(:disabled){background:#6c3048}.match-offer-dialog small{display:block;color:#9b87ad;font-size:.7rem;line-height:1.5}.match-offer-dialog .offer-error{color:#ffb2c4}.match-offer-dialog button:focus-visible{outline:2px solid #e6c5ff;outline-offset:4px}.queue-notice{position:fixed;right:20px;bottom:20px;z-index:20000;max-width:min(400px,calc(100vw - 40px));padding:16px;border:1px solid #a176c8;border-radius:12px;background:#23182f;color:#ead9f8;font-size:.8rem;white-space:normal;box-shadow:0 8px 28px #0006}.queue-notice button{background:none;border:0;color:inherit;cursor:pointer;margin-left:10px;font-size:1.2rem}
@media(max-width:480px){.match-offer-dialog{padding:22px}.offer-actions{flex-direction:column}.match-offer-dialog h2{font-size:1.4rem}}

.replacement-badge{position:absolute;right:8%;bottom:31%;z-index:5;display:grid;place-items:center;width:15%;aspect-ratio:1;border:1px solid #88e6ed;border-radius:7px;background:linear-gradient(135deg,#214e62,#122333);color:#b7ffff;font-weight:900;font-size:clamp(.8rem,1.5vw,1.4rem);box-shadow:0 2px 6px #0008;cursor:help}
.replacement-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px #0008)}
.replacement-badge{padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;box-sizing:border-box}
.replacement-badge:hover,.replacement-badge:focus-visible{box-shadow:0 0 12px #78eaff80;outline:2px solid #b5faff;outline-offset:2px}
.tile-status .replacement-icon{width:20px;height:20px}
.replacement-tooltip{border-color:#7edce7;background:linear-gradient(145deg,#183b4cf5,#0d1625fc);box-shadow:0 12px 36px #0009,0 0 18px #64dce425}
.replacement-tooltip strong{color:#b6faff}
.site-header nav .achievement-nav-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.achievement-nav-badge{background:linear-gradient(135deg,#634021,#392218);border:1px solid #d9ab63;color:#ffe1a0;box-shadow:0 0 10px #e9ad4026;font-variant-numeric:tabular-nums}

/* Shared missing-page and access-denied view. */
.route-status{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(32px,5vw,80px);min-height:600px;padding:70px 55px;margin-block:30px;overflow:hidden;border:1px solid #3e2e52;border-radius:24px;background:radial-gradient(ellipse at 25% 50%,#7135b522,transparent 55%),linear-gradient(120deg,#18131e,#111015);box-shadow:inset 0 1px #ffffff05}
.route-status-art{position:relative;height:360px;isolation:isolate;display:grid;place-items:center}
.route-status-art:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#8948df22;filter:blur(45px);z-index:-1}
.route-status-card{position:absolute;width:185px;filter:drop-shadow(0 18px 20px #0008);border-radius:10px}
.route-status-card-left{transform:translate(-88px,12px) rotate(-19deg);opacity:.7}
.route-status-card-right{transform:translate(88px,12px) rotate(19deg);opacity:.7}
.route-status-missing{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:192px;height:274px;transform:rotate(-5deg);border:1px solid #ae7bf6;border-radius:13px;background:radial-gradient(ellipse at 50% 20%,#462769,#191122 75%);box-shadow:0 0 0 5px #20142b,0 0 0 6px #775796,0 24px 35px #0009,inset 0 0 30px #9c5de51a}
.route-status-missing:before{content:"";position:absolute;inset:10px;border:1px solid #b180e044;border-radius:7px}
.route-status-missing>span{font-size:4.7rem;font-weight:800;letter-spacing:-.06em;color:#edddff;text-shadow:0 0 30px #b479ff88}
.route-status-missing>small{position:absolute;bottom:29px;letter-spacing:.22em;font-size:.6rem;color:#b79acf}
.route-status-copy{position:relative;max-width:480px}
.route-status-copy h1{font-family:Segoe UI,system-ui,sans-serif;font-size:clamp(2rem,3.5vw,3.2rem);font-weight:750;line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.route-status-copy p{margin-top:22px;color:#b9b1c5;font-size:1rem;max-width:430px}
.route-status-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.route-status-note{display:block;margin-top:25px;color:#8e7e9f;font-size:.8rem}
@media(max-width:800px){.route-status{grid-template-columns:1fr;gap:25px;padding:35px 22px 42px;min-height:0;text-align:center}.route-status-art{height:290px;transform:scale(.85)}.route-status-copy{margin-inline:auto}.route-status-copy p{margin-inline:auto}.route-status-actions{justify-content:center}.route-status-copy h1{font-size:2.2rem}}
@media(max-width:420px){.route-status{padding-inline:16px;border-radius:16px}.route-status-art{height:240px;transform:scale(.7)}.route-status-actions{flex-direction:column}.route-status-copy h1{font-size:1.9rem}}
.admin-image-review{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0}.admin-image-review>p{flex-basis:100%;font-size:.85rem}.admin-image-review .admin-generated-image{width:200px;height:200px;object-fit:contain;border-radius:12px;background:radial-gradient(ellipse,#59337855,#141019);border:1px solid #684d82}.admin-image-review form{margin:0}.admin-image-review .button{font-size:.8rem}

.profile-visibility-select{color:var(--text);background:var(--surface);border:1px solid #b58aff60;border-radius:8px;padding:12px;margin:8px 12px;max-width:100%}
.profile-card-request a{overflow-wrap:anywhere}
.coin-shop-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:40px 0 32px}.coin-shop-header h1{margin:4px 0 12px}.coin-shop-header p{color:var(--muted)}.coin-wallet{display:flex;align-items:center;gap:16px;padding:20px 28px;border:1px solid #eab95b66;border-radius:16px;background:linear-gradient(130deg,#a7751729,#18181f);flex-shrink:0}.coin-wallet small{display:block;color:#eac781}.coin-wallet strong{display:block;font-size:2rem;line-height:1.2}.coin-wallet img,.coin-price img,.coin-reward img{object-fit:contain}.coin-shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.coin-shop-product{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:24px 18px;border:1px solid var(--pack-color,#8b65b6);border-radius:16px;background:radial-gradient(ellipse at 50% 25%,#8349ec24,transparent 70%),var(--surface)}.coin-shop-art{height:240px;display:grid;place-items:center}.coin-shop-art .booster-image{width:160px;height:224px;filter:var(--pack-tint,hue-rotate(var(--pack-hue,0deg))) drop-shadow(0 16px 20px #0008)}.coin-shop-product h2{font-size:1.3rem;margin:18px 0 8px}.coin-shop-product p{font-size:.88rem;color:var(--muted);min-height:48px;margin:0 0 20px}.coin-price{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;margin-bottom:18px;color:#ffdb85}.coin-price strong{font-size:1.5rem}.coin-price span{font-size:.8rem}.coin-shop-product form,.coin-shop-product button{width:100%}.coin-shop-info{margin:32px 0;padding:26px;border:1px solid var(--border);border-radius:14px}.coin-shop-info p{color:var(--muted)}.coin-shop-info .text-link{margin-left:20px}.coin-reward{display:flex;gap:10px;align-items:center;justify-content:center;color:#ffdb85;flex-wrap:wrap}@media(max-width:1000px){.coin-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.coin-shop-header{align-items:stretch;flex-direction:column}.coin-wallet{align-self:flex-start}.coin-shop-grid{grid-template-columns:1fr}.coin-shop-art{height:200px}.coin-shop-art .booster-image{height:190px}.coin-shop-info .text-link{display:block;margin:16px 0 0}}
.coin-shop-product button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.duel-first-win{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:16px 18px;border:1px solid #edbd5b70;border-radius:12px;background:linear-gradient(120deg,#9c711b25,#241b3320);text-align:left}.duel-first-win img{flex-shrink:0;object-fit:contain}.duel-first-win>div{flex:1;min-width:0}.duel-first-win strong{color:#ffda86;font-size:1rem}.duel-first-win p{margin:5px 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}.first-win-amount{font-size:1.6rem;font-weight:800;color:#ffda86;white-space:nowrap}.result-first-win{color:#ffda86;font-size:.85rem}@media(max-width:500px){.duel-first-win{padding:12px;gap:10px}.duel-first-win img{width:34px;height:34px}.first-win-amount{font-size:1.2rem}}
.achievement-filters{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin:22px 0}.achievement-filters label{display:grid;gap:8px;color:var(--muted);font-size:.85rem}.achievement-filters select{min-width:170px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px}.achievement-category{display:block;color:var(--accent);margin:8px 0}.achievement-details p{max-width:48ch}@media(max-width:500px){.achievement-filters label{flex:1;min-width:0}.achievement-filters select{min-width:0;width:100%}}
.shop-buy-error[hidden]{display:none}.shop-pack-flight{will-change:transform,opacity}.coin-shop-product button{transition:opacity .15s}

/* Fragment navigation focuses the result container, not an interactive control. */
.collection-results[tabindex="-1"]:focus{outline:none}