: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}
/* Shared scrollbar theme for the page, chat and other scrollable panels. */
*{scrollbar-width:thin;scrollbar-color:#8056ad #17111f}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#17111f;border-radius:10px}
::-webkit-scrollbar-thumb{background:#8056ad;border:2px solid #17111f;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#b58aff}
::-webkit-scrollbar-thumb:active{background:#cdaaff}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:#17111f}
@media(forced-colors:active){*{scrollbar-color:auto}}
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{margin-top:24px;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:none}
.craft-reveal-dialog .reveal-front,.craft-reveal-dialog .reveal-back{filter:drop-shadow(0 0 18px 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 26px;border:1px solid #a16aca38;border-radius:14px;background:#17121d;width:fit-content;max-width:100%}
.craft-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 22px;border:1px solid transparent;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.88rem;transition:background .18s,color .18s,box-shadow .18s}
.craft-tabs a:hover{background:#9a55d51c;color:#f3e6ff}
.craft-tabs a[aria-current=page]{background:linear-gradient(135deg,#9146df,#7132b7);border-color:#c18aef66;color:white;box-shadow:0 3px 16px #803ac535}
.craft-tabs a:focus-visible{outline:2px solid #d2a2ff;outline-offset:3px}
.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:480px){.craft-tabs{width:100%;gap:3px}.craft-tabs a{flex:1;padding:11px 8px;font-size:.76rem}}
@media(prefers-reduced-motion:reduce){.craft-tabs a{transition:none}}



.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}
.duel-buff-aura{position:absolute;pointer-events:none;box-sizing:border-box;border:2px solid #a5ffd0;border-radius:10px;background:linear-gradient(0deg,#43ef9b38,transparent 70%);box-shadow:inset 0 0 20px #4dffae66,0 0 20px #4dffae88;transform-origin:center}
.duel-buff-spark{position:absolute;width:6px;height:10px;border-radius:50%;background:#d6ffeb;box-shadow:0 0 9px 3px #59ffb7;pointer-events:none}

.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;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 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 a.queue-nav-pill::after{content:none}
.site-header a.queue-nav-pill::before{inset:0;border-radius:inherit}
.site-header a.queue-nav-pill:hover,.site-header 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}
/* Arena identities keep the total directly below each player's name. */
.match-screen.player-identity-match .practice-play-area{position:relative;padding-top:100px}
.match-screen.player-identity-match .practice-field{position:relative;grid-template-columns:minmax(0,1fr)}
.match-screen.player-identity-match .match-player-name{top:10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.arena-player-label{display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%;min-width:0}
.arena-player-label img{width:36px;height:36px;flex:0 0 36px;object-fit:cover;border-radius:50%;border:2px solid currentColor;background:#211729}
.arena-player-label span{min-width:0;overflow-wrap:anywhere}
.arena-player-score{display:flex;align-items:baseline;justify-content:center;gap:7px;font-weight:400;font-size:.7rem}
.arena-player-score strong{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
@media(max-width:850px){.match-screen.player-identity-match .practice-play-area{padding-top:110px}.match-screen.player-identity-match .match-player-name{width:44%;padding:0 6px}.arena-player-label img{width:28px;height:28px;flex-basis:28px}.arena-player-label{gap:6px}.arena-player-score strong{font-size:1.5rem}}
/* Compact lane score badges stay within the board's narrow score columns. */
.match-screen .lane-score{align-self:center;justify-self:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;min-height:32px;padding:4px 2px;border:1px solid #78628f;border-radius:7px;background:#211929;color:#f2e9ff;font-weight:700;line-height:1;box-shadow:0 2px 7px #0006;z-index:1}
.match-screen .lane-score.winning{border-color:#dab864;background:#3b2c15;color:#ffe6a1;box-shadow:0 0 9px #e9bd4930}
@media(max-width:850px){.match-screen .lane-score{min-width:18px;min-height:26px;padding:3px 1px;border-radius:5px;font-size:.7rem}}
/* Fit the arena to the viewport; override legacy hand margins at equal specificity. */
.match-screen.player-identity-match{height:100dvh;box-sizing:border-box;overflow:hidden;scrollbar-gutter:auto}
.match-screen.player-identity-match .practice-play-area{box-sizing:border-box;min-height:0;min-width:0;grid-template-rows:minmax(0,1fr);padding-top:90px;gap:10px}
.match-screen.player-identity-match .practice-play-area .practice-hand{position:relative;top:auto;margin:0;padding:0;min-height:0;align-self:center}
.match-screen.player-identity-match .practice-play-area .hand-cards,.match-screen.player-identity-match .opponent-fan{height:calc(var(--arena-hand) * 1.65 + 50px);margin:0;--fan-spread:calc(var(--side) * .25)}
.match-screen.player-identity-match .hand-slot,.match-screen.player-identity-match .opponent-slot{width:var(--arena-hand);top:12px}
.match-screen.player-identity-match .practice-play-area{--arena-hand:min(175px,calc(var(--side) * .43),calc((100dvh - 280px) * .43));--tile:min(calc((100dvh - 235px) / 5.65),calc((100vw - var(--side) * 2 - 110px) / 5))}
.match-screen.player-identity-match .hand-actions{transform:none;margin:0}
.match-screen.player-identity-match .practice-play-area .hand-pattern{min-height:20px;padding:2px;font-size:.55rem;--influence-cell:5px;gap:3px}
@media(max-width:850px){
.match-screen.player-identity-match{padding:6px}
.match-screen.player-identity-match .practice-play-area{--side:calc((100vw - 24px) / 2);--arena-hand:min(70px,calc(var(--side) * .38),calc(100dvh * .10));--tile:min(calc((100dvh - 345px) / 5.65),calc((100vw - 70px) / 5));padding-top:95px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 170px;gap:4px}
.match-screen.player-identity-match .practice-play-area .practice-hand,.match-screen.player-identity-match .opponent-hand{align-self:start;min-width:0;width:100%}
.match-screen.player-identity-match .practice-play-area .hand-cards,.match-screen.player-identity-match .opponent-fan{height:130px;--fan-spread:calc(var(--side) * .28)}
.match-screen.player-identity-match .hand-slot,.match-screen.player-identity-match .opponent-slot{top:0}
.match-screen.player-identity-match .practice-log{bottom:3px;font-size:.6rem}
}
@media(max-height:520px){
.match-screen.player-identity-match .practice-play-area{--side:clamp(110px,23vw,210px);--arena-hand:min(80px,calc((100dvh - 145px) * .35));--tile:min(calc((100dvh - 155px) / 5.65),calc((100vw - var(--side) * 2 - 95px) / 5));padding-top:65px;grid-template-columns:var(--side) minmax(0,1fr) var(--side);grid-template-rows:minmax(0,1fr)}
.match-screen.player-identity-match .practice-field{grid-column:2;grid-row:1}
.match-screen.player-identity-match .practice-play-area .practice-hand{grid-column:1;grid-row:1;align-self:center}
.match-screen.player-identity-match .opponent-hand{grid-column:3;grid-row:1;align-self:center}
.match-screen.player-identity-match .match-player-name{width:var(--side);top:0;gap:3px}
.match-screen.player-identity-match .arena-player-label img{width:24px;height:24px;flex-basis:24px}
.match-screen.player-identity-match .arena-player-score strong{font-size:1.2rem}
.match-screen.player-identity-match .practice-play-area .hand-cards,.match-screen.player-identity-match .opponent-fan{height:calc(var(--arena-hand) * 1.5 + 25px);--fan-spread:calc(var(--side) * .25)}
}
.match-screen.player-identity-match .practice-play-area .hand-cards,.match-screen.player-identity-match .opponent-fan{--fan-spread:calc(var(--side) * .18)}
.match-screen.player-identity-match .hand-slot,.match-screen.player-identity-match .opponent-slot{width:min(var(--arena-hand),calc(var(--side) * .35))}
/* Recessed arena slots with restrained faction lighting. */
.match-screen .practice-board .board-tile{--slot-edge:#63536f;--slot-glow:#9475b5;--slot-wash:#251e32;appearance:none;-webkit-appearance:none;border:1px solid var(--slot-edge);border-radius:9px;background:radial-gradient(ellipse at 50% 20%,var(--slot-wash),#100e17 85%);box-shadow:inset 0 1px 0 #ffffff12,inset 0 0 18px #0006,0 2px 5px #0005;isolation:isolate;transition:border-color .2s,box-shadow .2s,background .2s}
.match-screen .practice-board .board-tile.owner-left{--slot-edge:#43876d;--slot-glow:#82e9b0;--slot-wash:#16372e}
.match-screen .practice-board .board-tile.owner-right{--slot-edge:#985166;--slot-glow:#ef94ae;--slot-wash:#3b1b2b}
.match-screen .practice-board .board-tile.owner-neutral{--slot-edge:#737780;--slot-glow:#c2c6cd;--slot-wash:#303238;background:radial-gradient(ellipse at 50% 20%,var(--slot-wash),#151619 85%)}
.match-screen .practice-board .board-tile:not([data-card-inspect])::before{content:"";position:absolute;inset:5px;border:1px solid var(--slot-edge);border-radius:5px;opacity:.4;pointer-events:none;background:linear-gradient(135deg,#ffffff08,transparent 40%)}
.match-screen .practice-board .board-tile:not([data-card-inspect])::after{content:"";position:absolute;left:22%;right:22%;top:0;height:2px;background:var(--slot-glow);opacity:.55;border-radius:0 0 3px 3px;box-shadow:0 0 10px var(--slot-glow);pointer-events:none}
.match-screen .practice-board .empty-tile{display:inline-flex;align-items:center;justify-content:center;width:clamp(18px,2.8vw,34px);aspect-ratio:1;border:1px solid var(--slot-edge);border-radius:8px;background:#09081055;color:var(--slot-glow);font-size:clamp(.8rem,1.8vw,1.35rem);font-weight:400;line-height:1;box-shadow:0 0 18px #0004}
.match-screen .practice-board .board-tile.legal{--slot-edge:#8aebb0;--slot-glow:#b3ffcf;--slot-wash:#1d4934;border-color:var(--slot-edge);cursor:pointer}
.match-screen .practice-board .board-tile.legal:hover,.match-screen .practice-board .board-tile.legal:focus-visible{background:radial-gradient(ellipse at 50% 25%,#295e40,#10281d);outline:2px solid #b3ffcf;outline-offset:2px}
.match-screen .practice-board .board-tile.affected{border-color:#efd18c;box-shadow:inset 0 0 14px #e6be4420,0 0 13px #e6be4440}
.match-screen .practice-board .board-tile[data-card-inspect]{padding:2px;box-shadow:0 3px 8px #0008}
@media(max-width:850px){.match-screen .practice-board .board-tile{border-radius:6px}.match-screen .practice-board .board-tile:not([data-card-inspect])::before{inset:3px;border-radius:3px}.match-screen .practice-board .empty-tile{border-radius:5px}}
.collection-filters.collection-filters-expanded{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--surface);gap:18px;align-items:end}
.collection-filters-expanded>div{min-width:0}.collection-filters-expanded select,.collection-filters-expanded input:not([type=checkbox]){width:100%;min-width:0;box-sizing:border-box}.collection-filters-expanded .search-field{grid-column:span 2}
.collection-battle-filters{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-width:0;border:1px solid #b987f52a;border-radius:10px;padding:14px}.collection-battle-filters legend{font-size:.8rem;color:var(--accent);padding:0 7px}.collection-filters .collection-duplicates{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}.collection-duplicates small{color:var(--muted);font-weight:400}.collection-duplicates input{accent-color:#9146df;width:18px;height:18px}
@media(max-width:950px){.collection-filters.collection-filters-expanded{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-battle-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:450px){.collection-filters.collection-filters-expanded{padding:14px;gap:14px}.collection-filters-expanded .search-field{grid-column:1/-1}.collection-battle-filters{padding:10px;gap:10px}}
.collection-filters-expanded input[type=number]{background:#131018;color:var(--text);border:1px solid #494653;border-radius:7px;padding:12px;min-height:46px;color-scheme:dark}.collection-filters-expanded input:focus-visible,.collection-filters-expanded select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:450px){.collection-filters-expanded>div:has(#card-sort),.collection-filters-expanded>div:has(#collection-pattern){grid-column:1/-1}.collection-filters-expanded select{font-size:.82rem;padding-left:10px;padding-right:28px;background-position:right 8px center}.collection-filters-expanded .search-field{order:-1}}
influence-pattern-select{display:block;min-width:0;position:relative}.pattern-dropdown{display:none}influence-pattern-select[data-ready]>select{display:none}influence-pattern-select[data-ready]>.pattern-dropdown{display:block}.pattern-dropdown summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 12px;border:1px solid #494653;border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;box-sizing:border-box}.pattern-dropdown summary::-webkit-details-marker{display:none}.pattern-dropdown summary:focus-visible,.pattern-options button:focus-visible{outline:2px solid #c89dff;outline-offset:2px}.pattern-dropdown[open]{z-index:80;position:relative}.pattern-dropdown[open] summary{border-color:#b68bea}.pattern-options{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:210px;max-height:min(380px,50dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8056ad #1b1525;background:#1b1525;border:1px solid #78539e;border-radius:10px;padding:6px;box-shadow:0 14px 36px #0009;z-index:100}.pattern-options button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px;border:0;border-radius:6px;background:transparent;color:#e9dff4;cursor:pointer;font:inherit;font-size:.85rem;min-height:48px}.pattern-options button:hover,.pattern-options button[aria-pressed=true]{background:#3b2655;color:white}.pattern-dropdown [data-pattern-current]{display:flex;align-items:center;gap:10px;min-width:0;font-size:.85rem}.pattern-dropdown .influence-map{--influence-cell:5px;flex-shrink:0;pointer-events:none}.pattern-map-placeholder{width:35px;text-align:center;color:#be96eb;flex-shrink:0}.pattern-dropdown .influence-map .affected{background:#ae75ef}.pattern-dropdown .influence-map .origin{background:#f7df9d}@media(max-width:450px){.pattern-options{min-width:0}}
.account-profile-avatar{display:block;width:28px;height:28px;flex:0 0 28px;object-fit:cover;border-radius:50%;border:1px solid #b58aff80;background:#24192f}.account-profile-link{padding-top:7px;padding-bottom:7px}@media(max-width:680px){.account-profile-link{padding:6px}}
.brand-mark.brand-card{display:block;width:31px;height:auto;aspect-ratio:1061/1483;object-fit:contain;flex-shrink:0;background:transparent;border-radius:3px;filter:drop-shadow(0 0 5px #9146df40)}@media(max-width:680px){.brand-mark.brand-card{width:25px}}
.profile-visibility-select{appearance:none;-webkit-appearance:none;color-scheme:dark;background-color:#19141f;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23c9a6ff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}.profile-visibility-select option{background:#19141f;color:#f2eafa}

/* The desktop keeps its navigation row; small screens get a full-width menu. */
.header-navigation{display:contents}.mobile-menu-toggle{display:none}
@media(max-width:800px){
.site-header .header-navigation{display:block;order:3;width:100%;padding:12px 0}
.site-header .header-navigation:not(:has(.mobile-menu-toggle)){display:none}
.header-navigation:defined .mobile-menu-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 14px;border:1px solid #684887;border-radius:10px;background:#251932;color:#f3eafa;font:inherit;font-weight:600;text-align:left}
.mobile-menu-toggle .menu-chevron{margin-left:auto;transition:transform .15s}.header-navigation[data-open] .menu-chevron{transform:rotate(180deg)}
.site-header .header-navigation nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;height:auto;overflow:visible;white-space:normal;padding:12px 0 0}
.site-header .header-navigation:defined:not([data-open]) nav{display:none}
.site-header .header-navigation nav a{min-width:0;min-height:48px;padding:12px;font-size:.85rem;white-space:normal;flex-wrap:wrap;gap:6px;border:1px solid #3e304e;border-radius:10px;background:#1b1523;line-height:1.4}
.site-header .header-navigation nav a.active{border-color:#a675de;background:#332045}
.site-header .header-navigation nav a::before,.site-header .header-navigation nav a::after{display:none}
.site-header .header-navigation nav .pack-nav-badge{flex-shrink:0}
}

.site-footer .changelog-link{color:#c494ff;font-weight:600;text-decoration:underline;text-underline-offset:4px}.site-footer .changelog-link:hover{color:#e1c5ff}
.nav-scroll{display:none}
@media(min-width:801px){
.site-header .header-navigation{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:8px;align-items:center;order:3;width:100%;min-width:0}
.site-header .header-navigation:not(:has(nav a)){display:none}
.site-header .header-navigation nav{width:100%;min-width:0;order:0;scrollbar-width:thin;scrollbar-color:#634383 transparent;overscroll-behavior-x:contain}
.header-navigation .nav-scroll{display:flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;border:0;border-radius:50%;background:radial-gradient(ellipse,#a66be51a,transparent 72%);color:#caa2ed;visibility:hidden;transition:color .18s,background .18s,transform .18s}
.header-navigation[data-can-left] .nav-scroll-left,.header-navigation[data-can-right] .nav-scroll-right{visibility:visible}
.header-navigation .nav-scroll:hover{background:radial-gradient(ellipse,#a66be538,transparent 72%);color:#f0dcff;transform:scale(1.08)}
.header-navigation .nav-scroll:active{transform:scale(.94)}
.header-navigation .nav-scroll svg{display:block;filter:drop-shadow(0 0 5px #b77bea55)}
}


.collection-tabs{display:flex;align-items:center;gap:5px;width:fit-content;margin:30px 0 28px;padding:5px;border:1px solid #493457;border-radius:14px;background:linear-gradient(135deg,#201728,#151119);box-shadow:0 4px 18px #0002}
.collection-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:116px;padding:10px 24px;border:1px solid transparent;border-radius:10px;color:#bfaacd;font-size:.9rem;font-weight:600;transition:background .16s,color .16s,border-color .16s}
.collection-tabs a:hover{background:#362341;color:#f1e6fa}
.collection-tabs a[aria-current=page]{background:linear-gradient(135deg,#753bb4,#542b83);border-color:#a46bd066;color:#fff;box-shadow:0 2px 8px #0003}
.collection-tabs a:focus-visible{outline:2px solid #d7adff;outline-offset:2px}
@media(max-width:550px){.collection-tabs{margin:24px 0;width:100%}.collection-tabs a{flex:1;min-width:0;padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.collection-tabs a{transition:none}}
/* Prismatic is a manual custom-card tier, above Mythic. Keep the label readable on a dark face. */
.rarity-prismatic{--rarity-color:#c2a8ff}
.rarity-badge.rarity-prismatic{border:1px solid transparent;color:#ffb0d2;background:linear-gradient(#1a1027,#1a1027) padding-box,linear-gradient(110deg,#ff8dc3,#ffe18b,#a3f0b3,#83e6ff,#bca1ff,#ff8dc3) border-box;background-size:100% 100%,300% 100%;box-shadow:0 0 12px #be8aff55,0 2px 8px #0008;animation:prismatic-rainbow 9s ease-in-out infinite}
@keyframes prismatic-rainbow{0%,100%{background-position:0 0,0% 50%;color:#ffb0d2}20%{color:#ffe39b}40%{color:#b4f2be}50%{background-position:0 0,100% 50%}60%{color:#99e8ff}80%{color:#ceb4ff}}
@media(prefers-reduced-motion:reduce){.rarity-badge.rarity-prismatic{animation:none;background-position:0 0,50% 50%;color:#eee0ff}}

.coin-shop-product{position:relative}.shop-discount-badge{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,#ed5579,#ac284c);color:#fff;border:1px solid #ff98ad80;border-radius:10px;padding:7px 11px;font-size:1rem;font-weight:800;box-shadow:0 4px 16px #ad214638}.shop-price-stack{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:76px;gap:5px}.shop-price-stack .coin-price{margin-top:0}.shop-original-price{color:#b8adc7;font-size:.9rem;text-decoration-color:#ff526f;text-decoration-thickness:3px}.shop-offer-note{color:#d1b4f7;margin:0 0 22px;line-height:1.6}

/* Short landscape screens: a readable hand, central board and compact opponent. */
@media (orientation:landscape) and (max-height:520px) and (min-width:600px){
.match-screen.player-identity-match{padding:6px max(8px,env(safe-area-inset-right)) 20px max(8px,env(safe-area-inset-left))}
.match-screen.player-identity-match .practice-status{min-height:34px;padding:0 0 5px;gap:10px;font-size:.72rem}
.match-screen.player-identity-match .practice-play-area{--side:clamp(155px,24vw,210px);--tile:min(calc((100dvh - 112px) / 5.65),calc((100vw - var(--side) - 180px) / 5));padding:0;grid-template-columns:var(--side) minmax(0,1fr) 110px;grid-template-rows:40px minmax(0,1fr);gap:5px 12px;align-items:center}
.match-screen.player-identity-match .match-player-name{position:static;width:100%;padding:0;gap:4px;font-size:.73rem;min-width:0}
.match-screen.player-identity-match .friendly-name{grid-column:1;grid-row:1;flex-direction:row;justify-content:space-between}
.match-screen.player-identity-match .enemy-name{grid-column:3;grid-row:1}
.match-screen.player-identity-match .arena-player-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-screen.player-identity-match .arena-player-score{gap:4px;font-size:.6rem;white-space:nowrap}
.match-screen.player-identity-match .arena-player-score strong{font-size:1.1rem}
.match-screen.player-identity-match .practice-field{grid-column:2;grid-row:1 / 3;align-self:center;gap:4px}
.match-screen.player-identity-match .arena-clock{position:static;transform:none;justify-self:center;padding:2px 10px;box-shadow:none;border-radius:7px;font-size:.6rem}
.match-screen.player-identity-match .arena-clock strong{font-size:.8rem}
.match-screen.player-identity-match .practice-board{grid-template-columns:18px repeat(5,var(--tile)) 18px;gap:3px}
.match-screen.player-identity-match .practice-play-area .practice-hand{grid-column:1;grid-row:2;align-self:center}
.match-screen.player-identity-match .practice-play-area .hand-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;height:auto;margin:0;max-width:100%}
.match-screen.player-identity-match .hand-slot{position:relative;left:auto;top:auto;width:100%;max-width:calc((100dvh - 145px) / 2.8);justify-self:center;transform:none}
.match-screen.player-identity-match .practice-play-area .hand-cards:before{display:none}
.match-screen.player-identity-match .practice-play-area .hand-card.selected,.match-screen.player-identity-match .practice-play-area .hand-slot:hover .hand-card:not(:disabled),.match-screen.player-identity-match .practice-play-area .hand-slot:focus-within .hand-card:not(:disabled){transform:translateY(-3px)}
.match-screen.player-identity-match .practice-play-area .hand-pattern{position:absolute;left:0;right:0;bottom:0;margin:0;pointer-events:none;font-size:0;min-height:0}
.match-screen.player-identity-match .hand-actions{margin:8px 0 0}.match-screen.player-identity-match .hand-actions .button{min-height:32px;padding:6px 18px;font-size:.75rem}
.match-screen.player-identity-match .opponent-hand{grid-column:3;grid-row:2;align-self:center}
.match-screen.player-identity-match .opponent-fan{--fan-spread:18px;height:110px}
.match-screen.player-identity-match .opponent-slot{width:52px;top:0}
.match-screen.player-identity-match .practice-log{bottom:2px;right:8px;font-size:.6rem}
}

/* Keep even seven-column influence patterns legible inside small board cards. */
.match-screen .practice-board .tile-pattern{width:max-content;max-width:calc(100% - 4px);padding:2px;bottom:3px;--influence-cell:clamp(2px,.4vw,5px);line-height:0}
.match-screen .practice-board .tile-pattern .influence-map{display:grid;width:max-content;gap:1px;grid-template-columns:repeat(var(--influence-columns,3),var(--influence-cell))}
.match-screen .practice-board .tile-pattern .influence-map span{width:var(--influence-cell);height:var(--influence-cell);aspect-ratio:1}
@media (orientation:landscape) and (max-height:520px) and (min-width:600px){
.match-screen.player-identity-match .practice-play-area{--tile:min(calc((100dvh - 74px) / 5.6),calc((100vw - var(--side) - 180px) / 5))}
.match-screen.player-identity-match.online-match .practice-play-area{--tile:min(calc((100dvh - 98px) / 5.6),calc((100vw - var(--side) - 180px) / 5))}
.match-screen.player-identity-match .practice-board .empty-tile{width:16px;border-radius:4px;font-size:.7rem;background:transparent;box-shadow:none}
.match-screen.player-identity-match .practice-board .tile-pattern{--influence-cell:3px}
}

/* Desktop own hand: straight cards in rows, without fan overlap. */
@media(min-width:851px) and (min-height:521px){
.match-screen.player-identity-match .practice-play-area .hand-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;height:auto;margin:0;padding:0;align-items:start}
.match-screen.player-identity-match .hand-slot{position:relative;left:auto;top:auto;width:100%;max-width:min(calc((var(--side) - 20px) / 3),calc((100dvh - 255px) / 2.8));justify-self:center;transform:none}
.match-screen.player-identity-match .practice-play-area .hand-cards:before{display:none}
.match-screen.player-identity-match .practice-play-area .hand-card.selected{transform:translateY(-6px)}
.match-screen.player-identity-match .practice-play-area .hand-slot:hover .hand-card:not(:disabled),.match-screen.player-identity-match .practice-play-area .hand-slot:focus-within .hand-card:not(:disabled){transform:translateY(-6px);filter:drop-shadow(0 0 7px #b58aff88)}
.match-screen.player-identity-match .practice-play-area .hand-pattern{position:absolute;left:0;right:0;bottom:0;margin:0;pointer-events:none;font-size:.6rem;line-height:1.2}
.match-screen.player-identity-match .hand-actions{margin:18px 0 0}
}

/* Let the desktop board use the space between the header and event log. */
@media(min-width:851px) and (min-height:521px){
.match-screen.player-identity-match{padding-bottom:30px}
.match-screen.player-identity-match .practice-play-area{--side:clamp(165px,20vw,800px);--arena-hand:min(calc(var(--side) * .43),calc((100dvh - 280px) * .43));--tile:min(calc((100dvh - 116px) / 5.6),calc((100vw - var(--side) * 2 - 110px) / 5));padding-top:0}
.match-screen.player-identity-match.online-match .practice-play-area{--tile:min(calc((100dvh - 164px) / 5.6),calc((100vw - var(--side) * 2 - 110px) / 5));padding-top:44px}
.match-screen.player-identity-match .practice-field{align-self:center}
.match-screen.player-identity-match .match-player-name{top:4px}
}
@media(min-width:851px) and (min-height:521px){
.match-screen.player-identity-match .practice-board .tile-pattern{--influence-cell:clamp(3px,calc(var(--tile) * .045),18px);padding:clamp(2px,calc(var(--tile) * .015),6px);bottom:3%}
.match-screen.player-identity-match .practice-board .tile-pattern .influence-map{gap:clamp(1px,calc(var(--tile) * .006),3px)}
}

/* Portrait phones: keep the player's cards separate and the opponent in a fan. */
@media(max-width:850px) and (orientation:portrait){
.match-screen.player-identity-match .practice-play-area .hand-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;height:auto;margin:0;padding:0;align-items:start}
.match-screen.player-identity-match .hand-slot{position:relative;left:auto;top:auto;width:100%;max-width:43px;justify-self:center;transform:none}
.match-screen.player-identity-match .practice-play-area .hand-cards:before{display:none}
.match-screen.player-identity-match .practice-play-area .hand-card.selected,.match-screen.player-identity-match .practice-play-area .hand-slot:hover .hand-card:not(:disabled),.match-screen.player-identity-match .practice-play-area .hand-slot:focus-within .hand-card:not(:disabled){transform:translateY(-3px)}
.match-screen.player-identity-match .practice-play-area .hand-pattern{position:absolute;left:0;right:0;bottom:0;margin:0;pointer-events:none;font-size:0;min-height:0;padding:2px}
.match-screen.player-identity-match .hand-actions{margin:7px 0 0}
.match-screen.player-identity-match .hand-actions .button{min-height:32px;padding:6px 16px;font-size:.75rem}
}
/* Full-body tower guardians occupy the opponent corner, never the board. */
.match-screen.player-identity-match.tower-art-match .enemy-name{gap:4px}
.match-screen.player-identity-match.tower-art-match .tower-boss-art{display:block;width:auto;max-width:100%;height:clamp(110px,23dvh,250px);object-fit:contain;flex:none;border:0;border-radius:0;margin:0 auto;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);filter:drop-shadow(0 4px 12px #0006)}
@media(max-width:850px) and (min-height:521px){
.match-screen.player-identity-match.tower-art-match .practice-play-area{padding-top:155px;--tile:min(calc((100dvh - 405px) / 5.65),calc((100vw - 70px) / 5))}
.match-screen.player-identity-match.tower-art-match .tower-boss-art{height:85px}
.match-screen.player-identity-match.tower-art-match .enemy-name .arena-player-label{font-size:.72rem}}
@media(max-height:520px){
.match-screen.player-identity-match.tower-art-match .tower-boss-art{height:clamp(40px,15dvh,70px)}
.match-screen.player-identity-match.tower-art-match .enemy-name{align-self:start}
.match-screen.player-identity-match.tower-art-match .enemy-name .arena-player-label{font-size:.65rem}}
/* Give the guardian identity and its fan separate grid rows: absolute positioning
   allowed large cards to cover the name and score at intermediate viewport sizes. */
@media(min-width:851px), (orientation:landscape) and (max-height:520px){
.match-screen.player-identity-match.tower-art-match .practice-play-area{grid-template-rows:auto minmax(0,1fr);row-gap:24px}
.match-screen.player-identity-match.tower-art-match .enemy-name{position:static;grid-column:3;grid-row:1;align-self:start;width:100%;min-width:0}
.match-screen.player-identity-match.tower-art-match .practice-field{grid-column:2;grid-row:1 / 3}
.match-screen.player-identity-match.tower-art-match .practice-play-area .practice-hand{grid-column:1;grid-row:1 / 3}
.match-screen.player-identity-match.tower-art-match .opponent-hand{grid-column:3;grid-row:2;align-self:start;margin-top:12px;--arena-hand:min(calc(var(--side) * .43),calc((100dvh - clamp(110px,23dvh,250px) - 210px) * .43))}
}
@media(orientation:landscape) and (max-height:520px){
.match-screen.player-identity-match.tower-art-match .practice-play-area{row-gap:12px}
.match-screen.player-identity-match.tower-art-match .opponent-hand{--arena-hand:min(70px,calc((100dvh - 170px) * .43));margin-top:8px}
}
.craft-new-badge[hidden]{display:none}
.pack-open-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.pack-open-options .button{min-width:105px}

.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:14px;font-size:.8rem}

/* Informational notice; acknowledgement does not grant tracking consent. */
cookie-notice:not([hidden]) { position:fixed; z-index:12000; bottom:max(16px,env(safe-area-inset-bottom)); left:16px; right:16px; max-width:1050px; margin-inline:auto; display:flex; align-items:center; gap:24px; padding:20px 24px; border:1px solid #776089; border-radius:16px; background:#201729; color:#f5eefb; box-shadow:0 8px 36px #0008; }
cookie-notice[hidden] { display:none !important; }
cookie-notice p { margin:0; line-height:1.6; flex:1; }
cookie-notice a { color:#d4b5ff; text-decoration:underline; text-underline-offset:3px; }
cookie-notice button { flex-shrink:0; min-width:80px; }
@media(max-width:600px) { cookie-notice:not([hidden]) { left:10px; right:10px; padding:16px; gap:12px; align-items:stretch; flex-direction:column; font-size:.9rem; } }

.xp-meter{display:inline-flex;flex-direction:column;gap:4px;min-width:110px;font-size:11px;color:#e1cbff;vertical-align:middle}.xp-meter>span{display:flex;gap:4px;align-items:center}.xp-meter small{margin-left:auto;font-size:9px}.xp-meter progress{width:100%;height:5px;border:0;border-radius:8px;overflow:hidden;background:#33243e;accent-color:#ae76ff}.xp-meter progress::-webkit-progress-bar{background:#33243e}.xp-meter progress::-webkit-progress-value{background:linear-gradient(90deg,#8750ea,#dfaeff)}
.xp-prizes,.xp-help,.xp-table-wrap,.xp-admin{background:#191420;border:1px solid #443151;border-radius:18px;padding:24px;margin:20px 0}.xp-prizes>div{display:flex;flex-wrap:wrap;gap:12px}.xp-prizes article{display:flex;flex-direction:column;gap:8px;background:#2a1c39;border:1px solid #72528e;padding:18px;border-radius:12px;min-width:160px}.xp-prizes article strong{color:#ffd268}.xp-table{width:100%;border-collapse:collapse;text-align:left}.xp-table caption{text-align:left;margin-bottom:18px;color:#c4b5d0}.xp-table td,.xp-table th{padding:14px 10px;border-bottom:1px solid #3a2d46}.xp-table a{display:inline-flex;align-items:center;gap:12px}.xp-table img{border-radius:50%}.xp-table-wrap{overflow-x:auto}.xp-admin-row{display:flex;gap:16px;flex-wrap:wrap;align-items:end;padding:16px 0;border-bottom:1px solid #443151}.xp-admin-row label{display:flex;flex-direction:column;gap:6px}.xp-admin-row input{max-width:140px}.xp-admin-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.xp-help summary{cursor:pointer;font-weight:bold}
@media(max-width:600px){.account-profile-link{gap:6px}.account-profile-link .xp-meter{min-width:68px}.account-profile-link .xp-meter small{display:none}.xp-prizes,.xp-table-wrap,.xp-admin{padding:14px}.xp-table td,.xp-table th{padding:10px 5px}}

.account-profile-link{max-width:310px}.account-profile-link .xp-meter{flex-shrink:0}@media(max-width:680px){.account-profile-link{width:auto;min-width:108px;max-width:140px;gap:7px}.account-profile-link .xp-meter{min-width:62px}.account-profile-link .xp-meter small{display:none}}

.chat-link-confirm{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid #745988;border-radius:16px;background:#1c1425;color:#f5effb;box-shadow:0 24px 90px #0009}.chat-link-confirm::backdrop{background:#08050cbf}.chat-link-confirm h2{font-size:1.15rem;margin:0 0 12px}.chat-link-confirm p{font-size:.9rem;line-height:1.5}.chat-link-confirm .chat-link-url{overflow-wrap:anywhere;padding:12px;border-radius:8px;background:#100c16;color:#d8bcf3;max-height:180px;overflow:auto}.chat-link-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

admin-toast:defined{display:none}.admin-toast-stack{position:fixed;right:20px;top:20px;z-index:50000;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 32px));pointer-events:none}.admin-toast-popup{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #9c7cbd;border-radius:14px;background:#241a30;color:#f3eafc;box-shadow:0 12px 38px #0007;pointer-events:auto;animation:admin-toast-enter .2s ease-out;font-size:.87rem;line-height:1.5}.admin-toast-popup>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}.admin-toast-icon{display:grid;place-items:center;border-radius:50%;width:25px;height:25px;flex-shrink:0;background:#caa0f328;color:#d7b8f1;font-weight:bold}.admin-toast-popup button{width:30px;height:30px;flex-shrink:0;padding:0;border:0;border-radius:6px;background:transparent;color:#d1bedf;font-size:24px;cursor:pointer}.admin-toast-popup button:hover{background:#ffffff14}@keyframes admin-toast-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:600px){.admin-toast-stack{top:12px;right:16px}}@media(prefers-reduced-motion:reduce){.admin-toast-popup{animation:none}}

.shared-card-link{display:inline;padding:2px 0;border:0;background:transparent;color:var(--rarity-color);font:inherit;font-weight:700;cursor:pointer}.shared-card-link:hover{text-decoration:underline}.shared-card-popover{position:fixed;inset:auto;margin:0;padding:10px;background:#17111f;border:1px solid #75538f;border-radius:14px;color:#fff;box-shadow:0 14px 45px #0009;max-height:calc(100dvh - 16px);overflow:auto}.shared-card-preview{width:min(260px,calc(100vw - 44px),calc((100dvh - 90px)*.715))}.shared-card-popover button{display:block;margin:0 0 6px auto;background:#352442;color:white;border:1px solid #75538f;border-radius:6px;cursor:pointer}

chat-shared-card{display:inline}chat-shared-card [data-shared-card-content]{display:none!important}.shared-card-preview{display:block}

/* Shared pack reward preview: achievements and community bosses. */
.pack-preview-trigger{display:flex;align-items:center;gap:12px;background:transparent;border:0;border-radius:8px;padding:6px;color:inherit;font:inherit;text-align:left;cursor:help}.pack-preview-trigger:focus-visible{outline:2px solid #bc8dff;outline-offset:3px}.pack-preview-card{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(270px,calc(100vw - 24px));padding:20px;border:1px solid #a879d7;border-radius:16px;background:radial-gradient(ellipse at top,#382049,#16111e 75%);color:#efe5ff;box-shadow:0 18px 60px #000a;text-align:center;pointer-events:auto}.pack-preview-card img{display:block;margin:0 auto 12px;object-fit:contain;filter:var(--pack-tint,hue-rotate(var(--pack-hue,0deg)))}.pack-preview-card strong{display:block;font-size:1.1rem}.pack-preview-card p{font-size:.85rem;line-height:1.6;color:#d0bfdc;margin:8px 0}.pack-preview-card small{display:block;color:#e5c278;border-top:1px solid #ffffff18;padding-top:12px;margin-top:12px}@media(max-width:550px){.pack-preview-trigger{gap:7px;font-size:.8rem}}

pack-reward-preview{display:block}pack-reward-preview .pack-preview-trigger img{object-fit:contain;flex:none;filter:var(--pack-tint,hue-rotate(var(--pack-hue,0deg)))}

.arena-player-label .master-avatar{display:block;position:relative;overflow:hidden;width:64px;height:64px;flex:0 0 64px;border:2px solid currentColor;border-radius:50%;background:#211729}.arena-player-label .master-avatar img{position:absolute;width:220%;height:auto;max-width:none;min-width:0;border:0;border-radius:0;left:var(--master-face-x,50%);top:var(--master-face-y,15%);transform:translate(calc(-1 * var(--master-face-x,50%)),calc(-1 * var(--master-face-y,15%)))}@media(max-width:850px){.arena-player-label .master-avatar{width:48px;height:48px;flex-basis:48px}}

/* Shared tabletop for practice, AI, PvP, tournaments, tower and masters. */
.match-screen{background-color:#21170f;background-image:linear-gradient(#08050c38,#08050c38),url('/images/duels/tavern-table-vertical.png');background-position:center;background-size:100% 100%;background-repeat:no-repeat}.match-screen .board-tile{background-color:#19101855}.match-screen .board-tile.owner-left{background-color:#59337b35}.match-screen .board-tile.owner-right{background-color:#8d334735}.match-screen .board-tile.owner-neutral{background-color:#17101844}.match-screen .arena-player-label,.match-screen .arena-player-score{filter:drop-shadow(0 2px 3px #000);text-shadow:0 1px 4px #000,0 0 10px #000}.match-screen .practice-board .board-tile{box-shadow:0 3px 9px #0005}.match-screen .board-tile.legal:hover,.match-screen .board-tile.legal:focus-visible{background-color:#b58aff35}

body:has(.match-screen) duel-chat-window.community-chat{display:none!important}
@media(max-width:850px){.match-screen{background-size:cover;background-position:center center}}

/* Landscape phones: equal side rails center the board on the tabletop. */
@media(orientation:landscape) and (max-height:520px) and (min-width:600px){
.match-screen.player-identity-match .practice-status{flex:0 0 34px;box-sizing:border-box;margin:0;position:relative;z-index:6}
.match-screen.player-identity-match .practice-play-area,.match-screen.player-identity-match.online-match .practice-play-area,.match-screen.player-identity-match.tower-art-match .practice-play-area{--side:clamp(130px,22vw,210px);--tile:min(calc((100dvh - 86px) / 5.65),calc((100vw - var(--side) * 2 - 90px) / 5));grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);grid-template-rows:90px minmax(0,1fr);gap:6px 12px;padding:4px 0 0;min-height:0}
.match-screen.player-identity-match .practice-field{grid-column:2;grid-row:1 / 3;justify-self:center;align-self:center;width:auto;max-width:none}
.match-screen.player-identity-match .match-player-name,.match-screen.player-identity-match.tower-art-match .enemy-name{position:static;align-self:start;width:100%;min-width:0;padding:4px 0;display:flex;flex-direction:column;gap:4px}
.match-screen.player-identity-match .friendly-name{grid-column:1;grid-row:1}.match-screen.player-identity-match .enemy-name{grid-column:3;grid-row:1}
.match-screen.player-identity-match .arena-player-label{width:100%;gap:6px;min-width:0}.match-screen.player-identity-match .arena-player-label>span:not(.master-avatar){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.2;font-size:.72rem}
.match-screen.player-identity-match .arena-player-label .master-avatar{width:36px;height:36px;flex-basis:36px}.match-screen.player-identity-match .practice-play-area .practice-hand,.match-screen.player-identity-match.tower-art-match .practice-play-area .practice-hand{grid-column:1;grid-row:2;align-self:center}.match-screen.player-identity-match .opponent-hand,.match-screen.player-identity-match.tower-art-match .opponent-hand{grid-column:3;grid-row:2;align-self:center;margin-top:0}
.match-screen.player-identity-match .hand-slot{max-width:calc((100dvh - 190px) / 2.8)}
}

/* Match player profile sizes to the master portrait without resizing its inner crop. */
.match-screen .arena-player-label>img{width:64px;height:64px;flex:0 0 64px;box-sizing:content-box}
@media(max-width:850px){.match-screen .arena-player-label>img{width:48px;height:48px;flex-basis:48px}}
@media(orientation:landscape) and (max-height:520px) and (min-width:600px){.match-screen.player-identity-match .arena-player-label>img{width:36px;height:36px;flex-basis:36px}}

/* Simple translucent placement slots: preserve ownership and move highlights. */
.match-screen .practice-board .board-tile{border:2px dashed var(--slot-edge);background:rgb(37 30 50 / 50%);box-shadow:none}
.match-screen .practice-board .board-tile.owner-neutral{background:rgb(48 50 56 / 50%)}
.match-screen .practice-board .board-tile.owner-left{background:rgb(32 79 59 / 50%)}
.match-screen .practice-board .board-tile.owner-right{background:rgb(104 41 57 / 50%)}
.match-screen .practice-board .board-tile:not([data-card-inspect])::before,.match-screen .practice-board .board-tile:not([data-card-inspect])::after{content:none}
.match-screen .practice-board .board-tile.legal,.match-screen .practice-play-area.is-dragging .practice-board .board-tile.legal{border-style:dashed;background:rgb(29 73 52 / 50%)}
.match-screen .practice-board .board-tile.legal:hover,.match-screen .practice-board .board-tile.legal:focus-visible{background:rgb(41 94 64 / 50%);outline:2px solid #b3ffcf;outline-offset:2px}

/* Empty slots use their border and tint without a center symbol. */
.match-screen .practice-board .empty-tile{display:none}


.match-screen .match-exit-button{text-decoration:none;flex-shrink:0}

/* Occupied slots advertise card inspection without shifting the board. */
@media(hover:hover) and (pointer:fine){
.match-screen .practice-board .board-tile[data-card-inspect]:not(:disabled):hover{border-color:var(--slot-glow);box-shadow:0 0 0 1px var(--slot-glow),0 0 16px color-mix(in srgb,var(--slot-glow) 45%,transparent),inset 0 0 18px #ffffff12;filter:brightness(1.15)}
}
.match-screen .practice-board .board-tile[data-card-inspect]:not(:disabled):focus-visible{outline:2px solid var(--slot-glow);outline-offset:3px;box-shadow:0 0 14px color-mix(in srgb,var(--slot-glow) 45%,transparent)}

.pass-tooltip{position:relative;display:inline-flex}.pass-tooltip-text{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:190px;max-width:70vw;padding:9px 12px;border:1px solid #79558e;border-radius:8px;background:#211529;color:#f4e9fc;font-size:.75rem;line-height:1.4;text-align:center;box-shadow:0 4px 16px #0008;z-index:20;pointer-events:none}.pass-tooltip:hover .pass-tooltip-text,.pass-tooltip:focus-within .pass-tooltip-text{display:block}.pass-tooltip:has(.pass-tooltip-text) button:disabled{pointer-events:none}

.duel-rematch { margin: 1rem 0; }
.duel-rematch > .button { width: 100%; }
.match-offer-dialog .duel-rematch > .button:disabled,
.match-offer-dialog .duel-rematch > .button:disabled:hover {
    background: #352c45;
    border-color: #645471;
    color: #b7a9c5;
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}
.duel-rematch > p { font-size: .85rem; margin: .65rem 0; }
.card-removal-panel details { margin: 1rem 0; }
.card-removal-panel summary { width: fit-content; cursor: pointer; }
.card-removal-panel form { padding-top: 1rem; max-width: 65rem; }
.card-removal-panel .removal-confirm { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; }
.card-removal-panel .removal-confirm input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; }

.removal-card-previews{display:flex;flex-wrap:wrap;gap:24px;margin:4px 0 18px}
.removal-card-preview{width:180px;max-width:100%;display:flex;flex-direction:column;gap:6px}
.removal-card-preview .trading-card{width:100%;margin-bottom:6px}
.removal-card-preview>span{color:var(--muted);font-size:.85rem}
.card-removal-panel .removal-copy-total{font-size:1rem;color:var(--text)}

.card-removal-panel button.button:disabled,
.card-removal-panel button.button:disabled:hover{background:#352c45;border-color:#645471;color:#b7a9c5;opacity:.65;cursor:not-allowed;box-shadow:none;transform:none;filter:none}

.profile-settings-dialog .profile-card-removal-section{border-top:1px solid #624251;margin-top:32px;padding-top:16px}
.profile-settings-dialog .profile-card-removal-section h2{color:#ffb2bc}

image-preview{display:block}.boss-art-trigger{display:block;width:100%;padding:0;border:0;border-radius:14px;background:transparent;cursor:zoom-in}.boss-art-trigger:focus-visible{outline:2px solid #bd88ff;outline-offset:4px}.boss-art-trigger .boss-admin-art{display:block}.boss-image-dialog{padding:0;border:1px solid #79558e;border-radius:14px;background:#110c18;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;overflow:hidden}.boss-image-dialog::backdrop{background:#080610dd;backdrop-filter:blur(4px)}.boss-image-dialog>img{display:block;width:auto;height:auto;max-width:calc(100vw - 34px);max-height:calc(100dvh - 34px);object-fit:contain}.boss-image-close{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #b792cf;border-radius:9px;background:#211529eF;color:white;font-size:28px;cursor:pointer}.boss-image-close:focus-visible{outline:2px solid white;outline-offset:2px}

/* The actual drop destination is distinct from all other legal slots. */
.match-screen .practice-play-area.is-dragging .practice-board .board-tile.legal.is-drop-target{background:rgba(176,126,30,.65);border:2px solid #ffe294;outline:2px solid #fff0b8;outline-offset:3px;box-shadow:0 0 24px #ffd15e99,inset 0 0 22px #ffdc6a66}

.duel-exit-controls{position:relative;display:inline-flex;flex-shrink:0;align-items:center}.duel-exit-controls duel-music{position:absolute;top:calc(100% + 6px);left:0;z-index:120;display:block}duel-music .duel-music-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #9671ae;border-radius:10px;background:#20152beF;color:#e8d2fa;cursor:pointer}duel-music .duel-music-panel{position:absolute;top:100%;left:0;width:210px;padding:14px;border:1px solid #9671ae;border-radius:12px;background:#20152bf5;box-shadow:0 5px 20px #0008}duel-music .duel-music-panel[hidden]{display:none}duel-music label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.8rem;color:#eadcf6}duel-music input{width:100%;accent-color:#ba85ff;cursor:pointer}duel-music output{font-variant-numeric:tabular-nums}duel-music .music-muted,duel-music.is-muted .music-waves{display:none}duel-music.is-muted .music-muted{display:block}

duel-music input[type=range]{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;height:6px;min-height:0;margin:9px 0 7px;padding:0;border:0;border-radius:999px;background:linear-gradient(to right,#9253ed 0%,#c79aff var(--music-volume,50%),#493750 var(--music-volume,50%),#493750 100%);box-shadow:inset 0 1px 3px #0005;cursor:pointer}
duel-music input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:2px solid #f1ddff;border-radius:50%;background:#b982f3;box-shadow:0 2px 5px #0007;transition:box-shadow .15s,background .15s}
duel-music input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid #f1ddff;border-radius:50%;background:#b982f3;box-shadow:0 2px 5px #0007}
duel-music input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:transparent}
duel-music input[type=range]:hover::-webkit-slider-thumb{background:#d1a7ff;box-shadow:0 0 8px #ba85ff80}
duel-music input[type=range]:focus-visible{outline:2px solid #c79aff;outline-offset:7px}

duel-music .duel-effects-volume,duel-music .duel-results-volume{margin-top:16px;padding-top:12px;border-top:1px solid #9671ae55}

.account-menu duel-music{position:relative;display:block;flex-shrink:0}.account-menu duel-music .duel-music-panel{left:auto;right:0;top:calc(100% + 8px);width:240px;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:200}.account-menu duel-music .duel-music-button:hover{background:#382443;border-color:#c49aea}

.game-settings-dialog{width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:24px;border:1px solid #88669f;border-radius:18px;background:linear-gradient(145deg,#281c35,#16121d);color:#f1e7fb;box-shadow:0 20px 80px #0009;overflow:auto;text-align:left}
.game-settings-dialog::backdrop{background:#080510b8;backdrop-filter:blur(4px)}
.game-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.game-settings-heading h2{margin:0;font-size:1.35rem}.game-settings-close{width:34px;height:34px;padding:0;border:1px solid #715781;border-radius:8px;background:#31213e;color:#efdefa;font-size:25px;cursor:pointer}
.game-settings-tabs{display:flex;gap:8px;border-bottom:1px solid #654a784f;margin-bottom:24px}.game-settings-tabs [role=tab]{border:0;border-bottom:3px solid #b780ff;padding:12px 16px;background:#a66bec1a;color:#e5caff;font:inherit;cursor:pointer;border-radius:8px 8px 0 0}
.account-menu duel-music .game-settings-dialog .duel-music-panel{position:static;width:100%;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}.game-settings-dialog .duel-music-panel label{font-size:.9rem}.game-settings-hint{margin:24px 0 0;color:#b8a7c5;font-size:.78rem;line-height:1.5}

.ability-tooltip.greed-room-tooltip{width:320px;max-width:calc(100vw - 24px);padding:18px 20px;border:1px solid #c09a60;border-radius:14px;background:linear-gradient(135deg,#32213e,#140e1d);box-shadow:0 14px 45px #000b, inset 0 0 0 3px #d5ac5610;color:#f8e9d0}.greed-room-tooltip>small{display:block;letter-spacing:.16em;font-size:10px;color:#c6a1db;margin-bottom:9px}.greed-room-tooltip>strong{display:flex;align-items:center;gap:12px;font:700 22px Georgia,serif;color:#ffdda0}.greed-room-tooltip .room-tooltip-art{width:42px;height:42px;flex-shrink:0}.greed-room-tooltip p{white-space:pre-line;line-height:1.65;font-size:13px;color:#ded0e6;margin:12px 0 0}

.greed-flight-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:21000;pointer-events:none}.greed-fx-hidden{visibility:hidden}.greed-fx-target span:has(>b){position:relative}.greed-fx-readout{position:absolute;left:0;top:0;font:700 27px Georgia,serif;color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}.loot-stat .greed-fx-readout{color:#ffda8c}.health-stat .greed-fx-readout{color:#ffafc1}.greed-coin-hit{animation:greedCoinHit .3s ease-out}.greed-health-hit{animation:greedHealthHit .32s ease-out}@keyframes greedCoinHit{0%{filter:brightness(1.65);box-shadow:0 0 26px #ffd36199}100%{filter:brightness(1)}}@keyframes greedHealthHit{0%,65%{transform:translateX(0)}20%{transform:translateX(-4px);filter:brightness(1.8);box-shadow:0 0 28px #ff3b7588}40%{transform:translateX(4px)}100%{transform:translateX(0);filter:brightness(1)}}@media(max-width:1200px){.greed-fx-readout{font-size:24px}}@media(max-width:760px){.greed-fx-readout{font-size:22px}}@media(prefers-reduced-motion:reduce){.greed-coin-hit,.greed-health-hit{animation:none}}

.greed-health-heal{animation:greedHealthHeal .4s ease-out}.greed-health-heal .greed-fx-readout{color:#b6ffdb}@keyframes greedHealthHeal{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.07);filter:brightness(1.5);box-shadow:0 0 28px #73ffc18a}100%{transform:scale(1);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.greed-health-heal{animation:none}}

.greed-shield-hit{animation:greedShieldHit .35s ease-out}.armor-stat .greed-fx-readout{color:#bce5ff}@keyframes greedShieldHit{35%{transform:scale(1.08);box-shadow:0 0 30px #74bbff99;filter:brightness(1.6)}100%{transform:scale(1);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.greed-shield-hit{animation:none}}

.greed-card-flight{position:fixed!important;left:0;top:0;width:90px;z-index:21001;pointer-events:none!important;transition:none!important;filter:drop-shadow(0 0 10px #c88aff);transform-origin:center}

/* Shared Blazor error banner for all layouts. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
.player-avatar-shell{display:inline-grid;position:relative;place-items:center;width:var(--avatar-size,40px);height:var(--avatar-size,40px);flex:none;vertical-align:middle;overflow:visible!important;border:0!important;isolation:isolate}.player-avatar-shell>.avatar-portrait{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;margin:0;padding:0}.player-avatar-shell.has-frame>.avatar-portrait{width:74%;height:74%;box-shadow:0 0 8px var(--frame-glow)}.player-avatar-shell>.avatar-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;object-fit:contain;border-radius:0;pointer-events:none;z-index:1;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--frame-glow) 70%,transparent))}.frame-animated>.avatar-frame{animation:frame-breathe 1.4s ease-in-out infinite alternate}.frame-cosmos>.avatar-frame{animation:frame-orbit 18s linear infinite,frame-glow 1.5s ease-in-out infinite alternate}@keyframes frame-breathe{from{filter:drop-shadow(0 0 4px var(--frame-glow)) drop-shadow(0 0 0px var(--frame-glow)) brightness(1);transform:scale(1)}to{filter:drop-shadow(0 0 10px var(--frame-glow)) drop-shadow(0 0 3px var(--frame-glow)) brightness(1.3);transform:scale(1.025)}}@keyframes frame-glow{from{filter:drop-shadow(0 0 4px var(--frame-glow)) brightness(1)}to{filter:drop-shadow(0 0 10px var(--frame-glow)) brightness(1.3)}}@keyframes frame-orbit{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.player-avatar-shell>.avatar-frame{animation:none}}
.player-avatar-shell>img:not(.avatar-frame){width:100%!important;height:100%!important;margin:0!important;object-fit:cover;border-radius:50%}.player-avatar-shell.has-frame>img:not(.avatar-frame){width:74%!important;height:74%!important;border:0!important}

/* Keep mobile pass away from the selectable hand cards. */
.match-screen .match-header-actions .mobile-pass-action{display:none}
@media(max-width:850px),(max-width:1100px) and (pointer:coarse){
.match-screen:has(.mobile-pass-action) .practice-hand .hand-actions{display:none}
.match-screen .match-header-actions .mobile-pass-action{display:flex;margin:0;transform:none}
.match-screen .match-header-actions .mobile-pass-action .button{min-height:44px;min-width:88px;padding:10px 16px}
}

/* One straight hand layout at every breakpoint, including medium landscape windows. */
.match-screen .practice-play-area .hand-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:auto;margin:0;padding:0;align-items:start}
.match-screen .practice-play-area .hand-slot{position:relative;left:auto;top:auto;width:100%;max-width:min(140px,calc((100dvh - 230px) / 3.2));justify-self:center;transform:none}
.match-screen .practice-play-area .hand-cards:before{display:none}
.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),.match-screen .practice-play-area .hand-card.selected{transform:translateY(-3px)}
.match-screen .practice-play-area .hand-pattern{position:absolute;left:0;right:0;bottom:0;margin:0;pointer-events:none;font-size:0;min-height:0;padding:2px}

/* Identities occupy a real row above the board on narrow, tall viewports. */
@media(max-width:850px) and (min-height:521px){
.match-screen.player-identity-match .practice-play-area,.match-screen.player-identity-match.online-match .practice-play-area,.match-screen.player-identity-match.tower-art-match .practice-play-area{--tile:min(calc((100dvh - 330px) / 5.65),calc((100vw - 85px) / 5));padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 130px;gap:8px}
.match-screen.player-identity-match .match-player-name,.match-screen.player-identity-match.tower-art-match .enemy-name{position:static;width:100%;padding:0;gap:4px;align-self:start;grid-row:1}
.match-screen.player-identity-match .friendly-name{grid-column:1}
.match-screen.player-identity-match .enemy-name{grid-column:2}
.match-screen.player-identity-match .practice-field{grid-column:1 / -1;grid-row:2;align-self:center}
.match-screen.player-identity-match .practice-play-area .practice-hand{grid-column:1;grid-row:3;align-self:start}
.match-screen.player-identity-match .opponent-hand,.match-screen.player-identity-match.tower-art-match .opponent-hand{grid-column:2;grid-row:3;align-self:start;margin:0}
.match-screen.player-identity-match .practice-play-area .hand-slot{max-width:38px}
.match-screen.player-identity-match .arena-clock{position:static;transform:none;justify-self:center;padding:3px 8px}
.match-screen.player-identity-match .arena-player-label>img{width:36px;height:36px;flex-basis:36px}
.match-screen.player-identity-match .arena-player-score strong{font-size:1.3rem}
.match-screen.player-identity-match .tower-boss-art{height:48px}
}

/* Keep selectable cards together instead of spreading them across the side rail. */
.match-screen .practice-play-area .hand-cards,.match-screen.player-identity-match .practice-play-area .hand-cards{--compact-card:min(140px,calc((100dvh - 230px) / 3.2),calc((var(--side) - 24px) / 3));grid-template-columns:repeat(3,minmax(0,var(--compact-card)));justify-content:center;gap:8px}
@media(max-width:850px) and (min-height:521px){
.match-screen.player-identity-match .practice-play-area .hand-cards{--compact-card:38px}
}

/* Personal standing across all ranking tables. */
tr.ranking-self > td, tr.ranking-self > th { background: #193c38 !important; color: #e6fff7; border-top: 1px solid #65d8ad; border-bottom: 1px solid #65d8ad; }
tr.ranking-self > :first-child { box-shadow: inset 4px 0 #65d8ad; }

.account-profile-link[popovertarget]{font-family:inherit;cursor:pointer;anchor-name:--profile-trigger}
.profile-menu-popup{position:fixed;inset:90px 16px auto auto;margin:0;width:230px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px;border:1px solid #86609e;border-radius:12px;background:#21172e;color:#f4eafb;box-shadow:0 16px 44px #0008}
.profile-menu-popup:popover-open{display:flex;flex-direction:column;gap:4px}
.profile-menu-popup>a,.profile-menu-popup>form>button{display:flex;align-items:center;gap:8px;width:100%;max-width:none;min-height:44px;box-sizing:border-box;padding:12px 14px;margin:0;border:0;border-radius:7px;background:transparent;color:#f4eafb;text-align:left;text-decoration:none;font-size:.9rem;font-weight:600;cursor:pointer}
.profile-menu-popup>a:hover,.profile-menu-popup>form>button:hover{background:#53346c}
.profile-menu-popup>a:focus-visible,.profile-menu-popup>form>button:focus-visible{outline:2px solid #cba5ff;outline-offset:-2px}
.profile-menu-popup>form{margin:4px 0 0;padding-top:4px;border-top:1px solid #654879}
.account-profile-link[popovertarget] .account-profile-arrow{transform:rotate(90deg)}
@supports(top:anchor(bottom)){.profile-menu-popup{position-anchor:--profile-trigger;inset:auto;top:anchor(bottom);right:anchor(right);margin-top:8px;position-try-fallbacks:flip-inline,flip-block}}

/* Header controls must not overlay the open mobile navigation. */
@media(max-width:800px){
 .site-header:has(site-navigation[data-open]) .account-menu{visibility:hidden;pointer-events:none}
}

/* Leave scroll space above the fixed chat/friends controls on mobile. */
@media(max-width:800px), (max-height:500px) and (pointer:coarse){
 .site-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

.game-settings-dialog{padding:0;overflow:hidden}
.game-settings-scroll{box-sizing:border-box;max-height:calc(100dvh - 34px);overflow:auto;padding:24px;scrollbar-gutter:stable;overscroll-behavior:contain}
.game-settings-tabs [role=tab][aria-selected=false]{border-bottom-color:transparent;background:transparent;color:#baa6ca}
.game-settings-tabs [role=tab]:focus-visible{outline:2px solid #d5acff;outline-offset:-2px}
.game-ui-option{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #654a784f;cursor:pointer;white-space:normal}
.game-ui-option input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;margin:0}
html.hide-friends-button .friends-toggle{display:none!important}
html.hide-community-chat .community-chat{display:none!important}

/* Expedition menus and their dialogs use the atlas palette. */
.expedition-layout,.expedition-layout *{scrollbar-color:#b69a58 #0c211b;scrollbar-width:thin}
.expedition-layout::-webkit-scrollbar-track,.expedition-layout *::-webkit-scrollbar-track{background:#0c211b}
.expedition-layout::-webkit-scrollbar-thumb,.expedition-layout *::-webkit-scrollbar-thumb{background:#b69a58;border-color:#0c211b}
.expedition-layout::-webkit-scrollbar-thumb:hover,.expedition-layout *::-webkit-scrollbar-thumb:hover{background:#dfc47d}
.expedition-layout::-webkit-scrollbar-thumb:active,.expedition-layout *::-webkit-scrollbar-thumb:active{background:#ffe2a1}

.raid-ready-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 28px));max-height:90dvh;overflow:auto;padding:26px;border:1px solid #c8ad6a;border-radius:16px;background:linear-gradient(140deg,#183b4b,#081b2b);color:#dae9eb;box-shadow:0 24px 90px #000b}.raid-ready-dialog::backdrop{background:#020a14b8;backdrop-filter:blur(3px)}.raid-ready-label{font:10px system-ui;letter-spacing:.14em;color:#99d9ce}.raid-ready-dialog h2{color:#f2d99b;font:700 28px Georgia;margin:12px 0}.raid-ready-dialog ul{list-style:none;padding:0;margin:20px 0}.raid-ready-dialog li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #77938a40;font:13px system-ui}.raid-ready-dialog li strong{color:#a6e0c7}.raid-ready-dialog button{margin:5px 8px 0 0;min-height:44px;padding:10px 18px;border:1px solid #bba46e;border-radius:6px;background:#1d4051;color:#f3e5c3;font-weight:bold}.raid-ready-dialog button:disabled{opacity:.5}.raid-ready-dialog [role=alert]{color:#ffc0b8}