/* css/fonts.css */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(../../assets/fonts/cinzel-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../../assets/fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../../assets/fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/oldstandardtt-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/oldstandardtt-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/oldstandardtt-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/oldstandardtt-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/oldstandardtt-normal-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/oldstandardtt-normal-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* css/style.css */
:root {
--bg: #0b0716;
--bg2: #150c2a;
--ink: #f3ecff;
--muted: #a99cc8;
--gold: #f2c14e;
--crystal: #a86bff;
--crystal2: #6fd3ff;
--danger: #ff5a4f;
--heal: #5dff9a;
--panel: rgba(20, 12, 40, 0.82);
--line: rgba(190, 160, 255, 0.22);
--font-ui: "Inter", system-ui, sans-serif;
--font-card: "Old Standard TT", Georgia, serif;
--font-title: "Cinzel", "Old Standard TT", serif;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-ui);
overflow: hidden; overscroll-behavior: none; overscroll-behavior-y: none; touch-action: none; user-select: none; -webkit-user-select: none;
-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
button, a, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }
@media (hover: none) and (pointer: coarse) {
body *:not(input):not(textarea):not(select):not([contenteditable]) { -webkit-user-select: none !important; user-select: none !important; }
input, textarea, select { font-size: max(16px, 1em) !important; }
}
.lr-view, .grid, .page > .body, #rules .doc, #rules .rtoc, #deckbuilder .decklist .rows, .ranklist, #log, #tracker, .ci-info, .dl-menu, .story-body,
#select .detail .dt-info, #sheet .box.acctsheet, .decklistview, .lcs-rail, .lcs-main, .sTrack, .hq-row, [data-scroll] {
overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(232, 186, 90, .45) transparent; }
.lr-view::-webkit-scrollbar, .grid::-webkit-scrollbar, .page > .body::-webkit-scrollbar, #rules .doc::-webkit-scrollbar, .ranklist::-webkit-scrollbar, .sTrack::-webkit-scrollbar,
#deckbuilder .decklist .rows::-webkit-scrollbar, #log::-webkit-scrollbar, #tracker::-webkit-scrollbar, .ci-info::-webkit-scrollbar { width: 6px; height: 6px; }
.lr-view::-webkit-scrollbar-thumb, .grid::-webkit-scrollbar-thumb, .page > .body::-webkit-scrollbar-thumb, #rules .doc::-webkit-scrollbar-thumb, .ranklist::-webkit-scrollbar-thumb, .sTrack::-webkit-scrollbar-thumb,
#deckbuilder .decklist .rows::-webkit-scrollbar-thumb, #log::-webkit-scrollbar-thumb, #tracker::-webkit-scrollbar-thumb, .ci-info::-webkit-scrollbar-thumb { background: rgba(232, 186, 90, .4); border-radius: 99px; }
[data-more="bottom"] { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
[data-more="top"] { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - 44px), transparent); }
[data-more="both"] { -webkit-mask-image: linear-gradient(180deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(180deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
[data-more="right"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
[data-more="left"] { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
[data-more="x"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
#viewport { position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
overscroll-behavior: none; overflow: hidden; overflow: clip; background: radial-gradient(ellipse at 50% 40%, #241244 0%, #0b0716 70%); }
#stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 50% 50%; overflow: hidden; overflow: clip; }
.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; }
.btn {
appearance: none; border: 1px solid rgba(242, 193, 78, 0.55); cursor: pointer;
background: linear-gradient(180deg, rgba(90, 50, 160, 0.95), rgba(45, 22, 90, 0.95));
color: #fff4d6; font-family: var(--font-title); font-weight: 700; letter-spacing: 0.08em;
padding: 14px 30px; border-radius: 12px; font-size: 20px; text-transform: uppercase;
box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 8px 24px rgba(0,0,0,.45), 0 0 18px rgba(168,107,255,.25);
transition: transform .18s cubic-bezier(.2,.8,.2,1.4), box-shadow .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 12px 28px rgba(0,0,0,.5), 0 0 28px rgba(168,107,255,.55); filter: brightness(1.12); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.small { font-size: 14px; padding: 9px 16px; border-radius: 9px; }
.btn.gold { background: linear-gradient(180deg, #f6d06a, #b8811a); color: #2a1600; border-color: #ffe6a0; }
.btn.ghost { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--ink); }
.btn[disabled] { opacity: .4; pointer-events: none; }
#title video.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.55); }
#title .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(20,8,45,.1), rgba(8,4,20,.85) 75%), linear-gradient(0deg, rgba(8,4,20,.9), transparent 45%); }
#title .logo { position: absolute; left: 50%; top: 58px; width: 470px; transform: translateX(-50%); mix-blend-mode: screen; animation: logoFloat 6s ease-in-out infinite; }
@keyframes logoFloat { 50% { transform: translateX(-50%) translateY(-8px); } }
#title .tagline { position: absolute; top: 515px; width: 100%; text-align: center; font-family: var(--font-title); font-size: 26px; letter-spacing: .35em; color: #e9dcff; text-shadow: 0 0 20px rgba(168,107,255,.8); }
#title .menu { position: absolute; top: 575px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; width: 360px; }
#title .menu .row { display: flex; gap: 12px; }
#title .menu .row .btn { flex: 1; font-size: 15px; padding: 11px 10px; }
#title .pack { position: absolute; width: 190px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: packBob 7s ease-in-out infinite; }
@keyframes packBob { 50% { transform: translateY(-14px) rotate(var(--r2, 2deg)); } }
#title .credit { position: absolute; bottom: 14px; width: 100%; text-align: center; font-size: 12px; color: rgba(233,220,255,.55); letter-spacing: .12em; }
.page { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, #2a1552 0%, #0e0820 60%); }
.page h1 { font-family: var(--font-title); font-size: 38px; margin: 0; letter-spacing: .12em; text-shadow: 0 0 22px rgba(168,107,255,.6); }
.page .top { position: absolute; top: 0; left: 0; right: 0; height: 84px; display: flex; align-items: center; gap: 20px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(10,5,24,.6); backdrop-filter: blur(6px); z-index: 5; }
.page .top .spacer { flex: 1; }
#select .leaders { position: absolute; top: 118px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; perspective: 1200px; }
.leaderPick { position: relative; width: 218px; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.leaderPick .lc { width: 218px; height: 324px; }
.leaderPick:hover { transform: translateY(-10px); }
.leaderPick.sel { transform: translateY(-16px) scale(1.04); }
.leaderPick.sel .lc { box-shadow: 0 0 0 3px var(--gold), 0 0 40px var(--glow, #a86bff); }
.leaderPick .setname { text-align: center; margin-top: 12px; font-family: var(--font-title); font-size: 15px; letter-spacing: .2em; color: var(--c); }
#select .detail { position: absolute; left: 110px; right: 110px; top: 560px; height: 250px; display: grid; grid-template-columns: 200px 1fr 330px; gap: 34px; align-items: center; padding: 22px 30px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
#select .detail img.packart { width: 170px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); margin-top: -70px; }
#select .detail h2 { font-family: var(--font-title); margin: 0 0 4px; font-size: 30px; }
#select .detail .theme { color: var(--muted); letter-spacing: .15em; text-transform: uppercase; font-size: 13px; margin-bottom: 12px; }
#select .detail .ability { font-family: var(--font-card); font-size: 18px; line-height: 1.45; white-space: pre-line; }
#select .detail .side { display: flex; flex-direction: column; gap: 12px; }
#select .detail select { background: #1d1238; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 10px; font: inherit; }
#select .detail label { font-size: 12px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.lc { position: relative; border-radius: 12px; overflow: hidden; background: #222; box-shadow: 0 10px 30px rgba(0,0,0,.55); container-type: inline-size; }
.lc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc .plate { position: absolute; left: 42%; right: 3%; bottom: 3.6%; height: 10.5%; display: grid; place-items: center; text-align: center; font-family: var(--font-card); font-weight: 700; color: #2a1740; font-size: 7.4cqw; line-height: 1.05; padding: 0 4%; }
.lc .lpow { position: absolute; left: 4%; bottom: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 900; font-size: 11cqw; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8b6b, #b8261d 70%); border: 2px solid #ffd7a8; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.lc .ltag { position: absolute; top: 3%; left: 4%; font-size: 6cqw; font-weight: 800; letter-spacing: .2em; color: #fff; background: rgba(0,0,0,.55); padding: 1.5% 4%; border-radius: 99px; text-transform: uppercase; }
#game { background:
radial-gradient(ellipse at 50% 50%, rgba(120,70,220,.16), transparent 60%),
linear-gradient(180deg, #120a26 0%, #1a0f35 48%, #1a0f35 52%, #120a26 100%); }
#game::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(168,107,255,.14), transparent 38%), repeating-radial-gradient(circle at 50% 50%, rgba(242,193,78,.035) 0 1px, transparent 1px 46px); }
#game::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 150px; transform: translate(-50%,-50%); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); background: linear-gradient(160deg, rgba(243,230,255,.18), rgba(168,107,255,.12) 45%, rgba(74,26,154,.08)); filter: blur(1px); pointer-events: none; }
.mat { position: absolute; border-radius: 14px; border: 1px dashed rgba(190,160,255,.18); background: rgba(255,255,255,.015); }
.mat.field { border-style: solid; border-color: rgba(190,160,255,.12); background: linear-gradient(180deg, rgba(168,107,255,.05), rgba(168,107,255,.015)); }
.mat .lbl { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .25em; color: rgba(210,190,255,.35); text-transform: uppercase; }
.divider { position: absolute; left: 0; right: 0; top: 399px; height: 2px; background: linear-gradient(90deg, transparent, rgba(242,193,78,.5), transparent); }
.pile { position: absolute; width: 110px; height: 154px; }
.pile .back { position: absolute; inset: 0; border-radius: 9px; }
.pile .count { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); min-width: 34px; padding: 3px 8px; font-weight: 800; font-size: 13px; text-align: center; border-radius: 99px; background: #0d0720; border: 1px solid var(--line); z-index: 2; }
#layer { position: absolute; inset: 0; pointer-events: none; }
#layer .card { pointer-events: auto; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 900; }
.card {
position: absolute; left: 0; top: 0; width: 130px; height: 182px;
transform-origin: 50% 50%; will-change: transform;
transition: transform calc(.5s / var(--spd, 1)) cubic-bezier(.2,.75,.25,1), filter .25s, opacity .3s;
perspective: 900px; cursor: pointer; container-type: inline-size;
}
.card.fast { transition-duration: .22s; }
.card.nomove { transition: none !important; }
.card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform calc(.55s / var(--spd, 1)) cubic-bezier(.3,.7,.2,1); }
.card.down .flip { transform: rotateY(180deg); }
.card .face, .card .backface { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 7.5cqw; overflow: hidden; }
.card .face { background: #1a1030; box-shadow: 0 6px 16px rgba(0,0,0,.55); }
.card .backface { transform: rotateY(180deg); }
.card .face, .card .backface { transition: visibility 0s linear calc(.275s / var(--spd, 1)); }
.card.down .face, .card:not(.down) .backface { visibility: hidden; }
.cardback { background:
radial-gradient(circle at 50% 42%, rgba(168,107,255,.55), transparent 55%),
repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
linear-gradient(160deg, #3a1a78, #160a33 70%);
border: 3px solid #c89b3c; box-shadow: inset 0 0 0 2px #2a1640, inset 0 0 22px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.55);
border-radius: 7.5cqw; }
.cardback::after { content: ""; position: absolute; inset: 8%; background: url(../../assets/ui/extra3.webp) center/118% no-repeat; mix-blend-mode: screen; opacity: .95; border-radius: 6px; }
.card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .rules {
position: absolute; left: 13.6%; right: 13.6%; top: 57.1%; height: 28.6%;
background: radial-gradient(ellipse at 50% 40%, #f7ead0, #ecd8b0 80%);
border-radius: 2cqw; padding: 3.2cqw 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw;
font-family: var(--font-card); color: #2b1a0c; text-align: center; overflow: hidden;
}
.card .rules .t { font-size: 5.3cqw; line-height: 1.18; white-space: pre-line; }
.card .rules .f { font-size: 4.2cqw; line-height: 1.15; font-style: italic; color: #6a4a2a; }
.card.tiny .rules .f { display: none; }
.card.tiny .rules .t { font-size: 5cqw; }
.page .top h1 { font-size: 30px; white-space: nowrap; }
.chip { white-space: nowrap; }
.card .stat { position: absolute; bottom: 3%; width: 25%; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--font-title); font-weight: 900; font-size: 12.5cqw; color: #fff; border-radius: 50%; text-shadow: 0 1px 2px #000; box-shadow: 0 3px 8px rgba(0,0,0,.7); z-index: 3; transition: transform .25s; }
.card .stat.pow { left: 2%; background: radial-gradient(circle at 35% 30%, #ff9a7a, #b3231a 70%); border: 1.5px solid #ffd0a0; }
.card .stat.hp { right: 2%; background: radial-gradient(circle at 35% 30%, #8fe7ff, #1464b4 70%); border: 1.5px solid #cdf2ff; }
.card .stat.up { color: #b8ffcf; }
.card .stat.down { color: #ffd0cc; }
.card .stat.hurt { background: radial-gradient(circle at 35% 30%, #ffb0b0, #7a1010 70%); }
.card .stat.bump { animation: bump .45s cubic-bezier(.3,1.8,.4,1); }
@keyframes bump { 40% { transform: scale(1.45); } }
.card .kws { position: absolute; top: 20%; left: 2%; display: flex; flex-direction: column; gap: 1.5cqw; z-index: 3; }
.card .kws span { width: 15cqw; height: 15cqw; display: grid; place-items: center; border-radius: 50%; background: rgba(15,8,30,.85); border: 1px solid rgba(242,193,78,.7); font-size: 8.5cqw; }
.card .inf { position: absolute; top: 20%; right: 2%; display: flex; flex-direction: column; gap: 1cqw; z-index: 3; }
.card .inf i { width: 11cqw; height: 13cqw; background: linear-gradient(160deg, #e6ccff, #8a3dff 60%, #3b1280); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter: drop-shadow(0 0 3px #b98aff); }
.card .costmod { position: absolute; top: 1%; right: 1%; width: 22%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 900; font-size: 12cqw; color: #1a3a00; background: radial-gradient(circle at 35% 30%, #d8ffb0, #5fbf2a 70%); border: 2px solid #f4ffe0; z-index: 4; box-shadow: 0 0 10px #8cff5a; }
.card .shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s;
background: linear-gradient(115deg, transparent 20%, rgba(255,120,220,.35) 38%, rgba(120,220,255,.4) 48%, rgba(255,255,160,.35) 58%, transparent 75%);
background-size: 250% 250%; background-position: var(--sx, 50%) var(--sy, 50%); }
.card.foil .shine { opacity: .55; }
.card.foil:hover .shine { opacity: .9; }
.card.rested { filter: brightness(.72) saturate(.8); }
.card.sick .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,10,40,.35), transparent 40%); }
.card.can .face { box-shadow: 0 0 0 2px #7dffb0, 0 0 18px rgba(125,255,176,.65), 0 6px 16px rgba(0,0,0,.55); }
.card.ready .face { box-shadow: 0 0 0 2px #ffd36e, 0 0 20px rgba(255,211,110,.7), 0 6px 16px rgba(0,0,0,.55); }
.card.target .face, .lcard.target { box-shadow: 0 0 0 3px #ff6a5a, 0 0 26px rgba(255,90,70,.9) !important; animation: pulse 1s ease-in-out infinite; }
.card.pick .face { box-shadow: 0 0 0 3px #6fd3ff, 0 0 26px rgba(111,211,255,.9) !important; animation: pulse 1s ease-in-out infinite; }
.card.selected .face { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255,255,255,.8) !important; }
@keyframes pulse { 50% { filter: brightness(1.18); } }
.card.dragging { transition: none !important; z-index: 800 !important; }
.card.inhand:hover { z-index: 700 !important; }
.token { position: absolute; inset: 0; border-radius: 7.5cqw; border: 3px solid var(--tc, #c89b3c); background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, var(--tc2, #4a2b10), #120a20); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; color: #fff; font-family: var(--font-card); text-align: center; }
.token .ic { font-size: 34cqw; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.token .nm { font-size: 9cqw; font-weight: 700; line-height: 1.1; padding: 0 6cqw; }
.token .tt { font-size: 6cqw; opacity: .8; padding: 0 8cqw; }
.lcard { position: absolute; width: 130px; height: 193px; pointer-events: auto; cursor: pointer; transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .25s; border-radius: 12px; }
.lcard .lc { width: 100%; height: 100%; }
.lcard.rested { filter: brightness(.7); }
.lcard.can .lc { box-shadow: 0 0 0 2px #ffd36e, 0 0 24px rgba(255,211,110,.8); }
.lcard .act { position: absolute; left: 50%; bottom: -40px; padding: 6px 10px; font-size: 12px; transform: translateX(-50%); white-space: nowrap; }
.lcard .inf { position: absolute; top: 14px; right: -10px; display: flex; flex-direction: column; gap: 3px; }
.lcard .inf i { width: 14px; height: 17px; background: linear-gradient(160deg, #e6ccff, #8a3dff 60%, #3b1280); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter: drop-shadow(0 0 3px #b98aff); }
.life { position: absolute; width: 96px; }
.life .lbl, .crystalbar .lbl { font-size: 10px; letter-spacing: .25em; color: rgba(210,190,255,.5); text-transform: uppercase; text-align: center; }
.lifecount { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 900; font-size: 21px; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8b6b, #a3180f 70%); border: 2px solid #ffd7a8; box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 16px rgba(255,90,70,.6); z-index: 300; transition: transform .3s; }
.lifecount::after { content: "LIFE"; position: absolute; top: 40px; font-size: 9px; letter-spacing: .2em; color: #ffb3a8; font-family: var(--font-ui); }
.crystalbar { position: absolute; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 99px; background: rgba(12,6,28,.7); border: 1px solid var(--line); pointer-events: auto; }
.crystalbar .num { font-family: var(--font-title); font-weight: 900; font-size: 16px; margin-left: 6px; color: #e8d6ff; min-width: 44px; }
.gem { width: 17px; height: 22px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); background: linear-gradient(160deg, #f3e6ff, #a86bff 45%, #4a1a9a); filter: drop-shadow(0 0 4px rgba(185,138,255,.9)); transition: transform .25s, opacity .25s, filter .25s; }
.gem.used { background: linear-gradient(160deg, #6a5a80, #3a2a55); filter: none; opacity: .55; }
.gem.temp { background: linear-gradient(160deg, #e9fbff, #6fd3ff 45%, #1a6a9a); filter: drop-shadow(0 0 4px rgba(111,211,255,.9)); }
.gem.mine.free { cursor: grab; }
.gem.mine.free:hover { transform: scale(1.3) translateY(-3px); }
.gem.pop { animation: gemPop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes gemPop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1); } }
.gem.lock { background: rgba(255,255,255,.07); filter: none; }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 850; }
#hud > * { pointer-events: auto; }
#endTurn { position: absolute; right: 36px; top: 372px; width: 180px; }
#endTurn.theirs { background: linear-gradient(180deg, #3a2f52, #1e1830); color: #bbb; border-color: rgba(255,255,255,.15); }
#banner { position: absolute; left: 0; right: 0; top: 368px; height: 64px; display: grid; place-items: center; pointer-events: none; }
#banner .msg { font-family: var(--font-title); font-weight: 800; font-size: 22px; letter-spacing: .12em; padding: 10px 26px; border-radius: 99px; background: rgba(12,6,28,.85); border: 1px solid rgba(242,193,78,.5); box-shadow: 0 0 30px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: all .3s; }
#banner .msg.on { opacity: 1; transform: none; }
#promptBar { position: absolute; left: 50%; top: 418px; transform: translateX(-50%); display: none; gap: 10px; align-items: center; padding: 8px 10px 8px 18px; border-radius: 14px; background: rgba(12,6,28,.92); border: 1px solid rgba(111,211,255,.6); box-shadow: 0 0 28px rgba(111,211,255,.3); z-index: 860; }
#promptBar.on { display: flex; }
#promptBar .ptxt { font-size: 15px; max-width: 560px; }
#sweep { position: absolute; left: 0; right: 0; top: 330px; height: 140px; display: grid; place-items: center; pointer-events: none; z-index: 880; }
#sweep .t { font-family: var(--font-title); font-weight: 900; font-size: 64px; letter-spacing: .18em; color: #fff; text-shadow: 0 0 30px var(--sc, #a86bff), 0 4px 10px #000; opacity: 0; }
#sweep.go .t { animation: sweep 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-120px) skewX(-12deg); letter-spacing: .5em; } 25% { opacity: 1; transform: none; letter-spacing: .18em; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px); } }
#topbar { position: absolute; top: 10px; right: 16px; display: flex; gap: 8px; z-index: 860; }
#topbar .btn { padding: 7px 12px; font-size: 12px; }
#log { position: absolute; right: 16px; top: 52px; width: 330px; max-height: 300px; overflow: auto; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; border-radius: 12px; background: rgba(10,5,24,.9); border: 1px solid var(--line); display: none; z-index: 860; user-select: text; }
#log.on { display: block; }
#log .me { color: #d7c4ff; } #log .them { color: #ffc9c2; }
#playBtn { position: absolute; z-index: 870; display: none; }
#playBtn.on { display: block; }
#preview { position: absolute; top: 230px; width: 300px; height: 420px; pointer-events: none; z-index: 950; opacity: 0; transition: opacity .15s; }
#preview.on { opacity: 1; }
#preview .card { transition: none; width: 300px; height: 420px; }
#preview .keytips { position: absolute; top: 430px; left: 0; right: 0; display: flex; flex-direction: column; gap: 6px; }
#preview .keytips div { font-size: 13px; background: rgba(10,5,24,.92); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
#preview .keytips b { color: var(--gold); }
.modal { position: absolute; inset: 0; z-index: 990; display: none; place-items: center; background: rgba(5,2,14,.78); backdrop-filter: blur(6px); }
.modal.on { display: grid; }
.modal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px 34px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.modal h2 { font-family: var(--font-title); letter-spacing: .12em; margin: 0 0 16px; font-size: 30px; }
.modal .cards { display: flex; gap: 14px; justify-content: center; margin: 12px 0 22px; }
.modal .cards .card { position: relative; transition: transform .3s; }
.modal .cards .card:hover { transform: translateY(-8px) scale(1.04); }
.modal .actions { display: flex; gap: 14px; justify-content: center; }
#trailerModal video { width: 1180px; border-radius: 14px; box-shadow: 0 30px 80px #000; }
#over .box { min-width: 620px; position: relative; overflow: visible; }
#over .big { font-family: var(--font-title); font-weight: 900; font-size: 72px; letter-spacing: .2em; margin: 0; }
#over .big.win { color: #ffe08a; text-shadow: 0 0 40px rgba(242,193,78,.9); }
#over .big.lose { color: #ff9c92; text-shadow: 0 0 40px rgba(255,90,70,.7); }
#over .packs { display: flex; justify-content: center; gap: 12px; margin: 10px 0 18px; }
#over .packs img { width: 110px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); animation: packBob 5s ease-in-out infinite; }
#over .stats { color: var(--muted); margin-bottom: 20px; }
.float { position: absolute; font-family: var(--font-title); font-weight: 900; font-size: 34px; text-shadow: 0 2px 6px #000, 0 0 18px currentColor; pointer-events: none; animation: floatUp 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }
.ring { position: absolute; border-radius: 50%; border: 4px solid rgba(255,140,90,.9); pointer-events: none; }
.bolt { position: absolute; height: 4px; transform-origin: 0 50%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff, #b98aff); box-shadow: 0 0 14px #b98aff, 0 0 30px #6fd3ff; border-radius: 4px; }
.crack { position: absolute; font-family: var(--font-title); font-weight: 900; font-size: 44px; color: #ff6a5a; text-shadow: 0 0 24px #ff2a1a, 0 3px 8px #000; pointer-events: none; animation: floatUp 1.4s ease-out forwards; }
#arrow { position: absolute; inset: 0; pointer-events: none; z-index: 880; overflow: visible; }
.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.filters { display: flex; gap: 8px; align-items: center; }
.chip { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.chip.on { background: var(--c, #a86bff); color: #120a20; border-color: transparent; }
.search { background: #1d1238; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; font: inherit; width: 200px; }
.grid { position: absolute; top: 96px; left: 30px; right: 30px; bottom: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 18px 16px; justify-content: center; padding: 10px 6px 30px; }
.grid .slotc { position: relative; width: 150px; height: 210px; }
.grid .slotc .card { transition: transform .25s cubic-bezier(.2,.8,.2,1.3); width: 150px; height: 210px; }
.grid .slotc .card:hover { transform: translateY(-6px) scale(1.05); z-index: 5; }
.grid .slotc .qty { position: absolute; top: -8px; right: -8px; z-index: 6; background: var(--gold); color: #241400; font-weight: 900; border-radius: 99px; padding: 2px 8px; font-size: 13px; }
.grid .slotc.maxed .card { filter: grayscale(.7) brightness(.6); }
#inspect .box { display: grid; grid-template-columns: 420px 440px; gap: 34px; text-align: left; align-items: center; padding: 30px; }
#inspect .big { position: relative; width: 420px; height: 588px; perspective: 1100px; }
#inspect .big .card { width: 420px; height: 588px; transition: transform .12s linear; }
#inspect h3 { font-family: var(--font-title); font-size: 28px; margin: 0 0 6px; }
#inspect .meta { color: var(--muted); margin-bottom: 16px; letter-spacing: .06em; }
#inspect .rulesText { font-family: var(--font-card); font-size: 20px; line-height: 1.5; white-space: pre-line; margin-bottom: 14px; }
#inspect .flavorText { font-family: var(--font-card); font-style: italic; color: #d7c3a3; font-size: 17px; line-height: 1.5; }
#inspect .rar { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; }
.r-Legendary { background: linear-gradient(90deg, #ffd36e, #ff8ad8); color: #2a1000; }
.r-Ultra-Rare { background: #b98aff; color: #1a0736; }
.r-Rare { background: #6fd3ff; color: #032035; }
.r-Un-common { background: #9ad99a; color: #062006; }
.r-Common { background: #444; color: #eee; }
#deckbuilder .grid { right: 400px; bottom: 112px; }
#deckbuilder .navbar { left: calc(50% - 200px); }
#deckbuilder .decklist { position: absolute; top: 96px; right: 24px; width: 360px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
#deckbuilder .decklist .rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#deckbuilder .drow { display: grid; grid-template-columns: 28px 1fr 30px; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 13px; border-left: 4px solid var(--c); }
#deckbuilder .drow:hover { background: rgba(255,90,70,.15); }
#deckbuilder .drow .cst { font-family: var(--font-title); font-weight: 900; text-align: center; color: #e9d7ff; }
#deckbuilder .drow .q { text-align: right; font-weight: 800; color: var(--gold); }
#deckbuilder .curve { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
#deckbuilder .curve div { flex: 1; background: linear-gradient(0deg, #6a3dc0, #b98aff); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
#deckbuilder .curve div span { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
#deckbuilder .dcount { font-family: var(--font-title); font-size: 22px; }
#rules .doc { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 1100px; bottom: 16px; overflow-y: auto; padding: 10px 30px 40px; user-select: text; }
#rules .doc h2 { font-family: var(--font-title); letter-spacing: .1em; color: var(--gold); margin: 28px 0 10px; font-size: 24px; }
#rules .doc p, #rules .doc li { font-size: 16px; line-height: 1.6; color: #e6dcf7; }
#rules .doc .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#rules .doc .kw { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; }
#rules .doc .kw b { color: #ffe08a; }
#rules .doc .callout { padding: 14px 18px; border-radius: 12px; background: rgba(168,107,255,.12); border: 1px solid var(--line); }
#board0 { position: absolute; top: 0; bottom: 0; width: 1600px; }
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%; background: #c9a2ff; box-shadow: 0 0 10px #a86bff, 0 0 20px #a86bff; opacity: 0; animation: mote linear infinite; }
.motes i:nth-child(3n) { background: #8fe7ff; box-shadow: 0 0 10px #6fd3ff; width: 4px; height: 4px; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .5; } 100% { transform: translate(40px, -960px); opacity: 0; } }
.mat.field.drop { border-color: rgba(125,255,176,.8); background: linear-gradient(180deg, rgba(125,255,176,.12), rgba(125,255,176,.03)); box-shadow: 0 0 40px rgba(125,255,176,.25) inset; }
.card .flip { transform: rotateX(0) rotateY(0); }
.card.inhand:not(.down):hover .flip, .grid .slotc .card:hover .flip { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s; }
.card.foil::after { content: ""; position: absolute; inset: -2px; border-radius: 8cqw; pointer-events: none; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(255,210,120,.7) 80%, transparent 90%); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; animation: spinAng 4s linear infinite; opacity: .8; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinAng { to { --ang: 360deg; } }
.card.down::after { display: none; }
.card.ready { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { translate: 0 -4px; } }
#rotate { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; background: radial-gradient(circle, #2a1552, #0b0716); text-align: center; padding: 30px; }
#rotate .ph { width: 70px; height: 120px; border: 4px solid #e9dcff; border-radius: 14px; margin: 0 auto 24px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 40%, 60% { transform: rotate(-90deg); } }
#rotate p { font-family: var(--font-title); letter-spacing: .1em; font-size: 20px; }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: grid; } }
#hub { background: radial-gradient(ellipse at 50% 45%, #2a1250 0%, #0b0716 70%); overflow: hidden; }
#hub .three { position: absolute; inset: 0; pointer-events: none; }
#hub .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(5,2,14,.75)), linear-gradient(0deg, rgba(5,2,14,.9), transparent 22%); }
.hubtop { position: absolute; top: 18px; left: 24px; right: 24px; display: flex; align-items: center; gap: 14px; z-index: 5; }
.profile { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 99px; background: rgba(12,6,28,.75); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.profile .av { width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: 50% 18%; border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(242,193,78,.5); }
.profile .lvl { font-family: var(--font-title); font-weight: 900; font-size: 16px; }
.profile .xp { width: 150px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px; }
.profile .xp i { display: block; height: 100%; background: linear-gradient(90deg, #a86bff, #6fd3ff); }
.pill { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: rgba(12,6,28,.75); border: 1px solid var(--line); font-family: var(--font-title); font-weight: 900; font-size: 20px; backdrop-filter: blur(6px); }
.coin { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b0, #f2c14e 45%, #9a6a10); box-shadow: 0 0 10px rgba(242,193,78,.7); }
.packicon { width: 20px; height: 28px; border-radius: 3px; background: linear-gradient(160deg, #c9a2ff, #6a2dd0); box-shadow: 0 0 10px rgba(168,107,255,.8); }
.iconbtn { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(12,6,28,.75); border: 1px solid var(--line); cursor: pointer; }
.iconbtn:hover { border-color: var(--gold); }
.hubleader { position: absolute; left: 110px; top: 128px; width: 330px; perspective: 1000px; z-index: 4; cursor: pointer; }
.hubleader .lc { width: 330px; height: 490px; transition: transform .15s; box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 50px var(--glow, #a86bff); }
.hubleader .lc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); background-size: 250% 250%; animation: sheen 5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 60% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.hubleader .change { margin-top: 18px; width: 100%; }
.hubright { position: absolute; right: 90px; top: 200px; width: 420px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; z-index: 4; }
.hubright .deckline { text-align: center; color: var(--muted); letter-spacing: .12em; font-size: 14px; text-transform: uppercase; }
.bigplay { font-family: var(--font-title); font-weight: 900; font-size: 54px; letter-spacing: .14em; padding: 30px 20px; border-radius: 22px; border: 2px solid #ffe6a0; cursor: pointer; color: #2a1600;
background: linear-gradient(180deg, #ffe08a, #f2c14e 45%, #b8811a); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.6), 0 0 60px rgba(242,193,78,.55); animation: playPulse 2.2s ease-in-out infinite; position: relative; overflow: hidden; }
.bigplay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 250% 100%; animation: sheen 3.2s ease-in-out infinite; }
.bigplay small { display: block; font-size: 15px; letter-spacing: .3em; margin-top: 4px; font-family: var(--font-ui); font-weight: 800; }
@keyframes playPulse { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.6), 0 0 90px rgba(242,193,78,.85); transform: scale(1.015); } }
.hubstats { display: flex; gap: 10px; justify-content: center; }
.hubstats div { flex: 1; text-align: center; padding: 10px; border-radius: 14px; background: rgba(12,6,28,.65); border: 1px solid var(--line); }
.hubstats b { display: block; font-family: var(--font-title); font-size: 24px; }
.hubstats span { font-size: 11px; letter-spacing: .15em; color: var(--muted); text-transform: uppercase; }
.hublogo { position: absolute; left: 50%; top: 20px; width: 250px; transform: translateX(-50%); mix-blend-mode: screen; z-index: 3; pointer-events: none; }
.navbar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border-radius: 26px; background: rgba(12,6,28,.82); border: 1px solid var(--line); backdrop-filter: blur(10px); z-index: 6; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.navbar button { position: relative; appearance: none; border: 0; background: transparent; color: #cbb9ee; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 22px; border-radius: 18px; cursor: pointer; font-family: var(--font-title); font-weight: 800; font-size: 13px; letter-spacing: .1em; transition: background .2s, color .2s, transform .2s; }
.navbar button .ic { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.navbar button:hover { background: rgba(168,107,255,.18); color: #fff; transform: translateY(-3px); }
.navbar button.on { background: linear-gradient(180deg, rgba(168,107,255,.45), rgba(90,40,170,.45)); color: #fff; }
.navbar .badge { position: absolute; top: 4px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #ff4a3a; color: #fff; font: 800 12px var(--font-ui); display: grid; place-items: center; box-shadow: 0 0 10px #ff4a3a; }
#shop .packs { position: absolute; top: 150px; left: 0; right: 0; display: flex; justify-content: center; gap: 26px; perspective: 1200px; }
.shoppack { width: 230px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.shoppack img { height: 340px; width: auto; max-width: 260px; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.7)); transition: transform .3s cubic-bezier(.2,.8,.2,1.4), filter .3s; animation: packBob 6s ease-in-out infinite; }
.shoppack:hover img { transform: translateY(-16px) rotate(-3deg) scale(1.06); filter: drop-shadow(0 36px 34px rgba(0,0,0,.7)) drop-shadow(0 0 26px var(--c)); }
.shoppack .nm { font-family: var(--font-title); font-weight: 900; letter-spacing: .2em; color: var(--c); }
.shoppack .price { display: flex; gap: 8px; align-items: center; font-family: var(--font-title); font-weight: 900; font-size: 20px; padding: 8px 18px; border-radius: 99px; background: rgba(12,6,28,.8); border: 1px solid var(--line); }
#shop .note { position: absolute; bottom: 120px; width: 100%; text-align: center; color: var(--muted); letter-spacing: .06em; }
#opening { position: absolute; inset: 0; z-index: 980; display: none; background: radial-gradient(ellipse at 50% 50%, #321566 0%, #0b0716 72%); }
#opening.on { display: block; }
#opening .three { position: absolute; inset: 0; }
#opening .hint { position: absolute; bottom: 130px; width: 100%; text-align: center; font-family: var(--font-title); font-size: 24px; letter-spacing: .25em; color: #f3e6ff; text-shadow: 0 0 20px #a86bff; animation: hintPulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes hintPulse { 50% { opacity: .45; } }
#opening .bar { position: absolute; bottom: 40px; width: 100%; display: none; justify-content: center; gap: 14px; }
#opening .bar.on { display: flex; }
#opening .labels { position: absolute; left: 0; right: 0; top: 150px; height: 40px; pointer-events: none; }
#opening .labels span { position: absolute; transform: translateX(-50%); font: 900 14px var(--font-ui); letter-spacing: .15em; padding: 5px 12px; border-radius: 99px; background: #ff4a3a; color: #fff; box-shadow: 0 0 16px #ff4a3a; animation: pop .5s cubic-bezier(.2,1.8,.4,1); }
#opening .labels span.dupe { background: #555; box-shadow: none; }
@keyframes pop { from { transform: translateX(-50%) scale(0); } }
#opening .inspectTxt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: 760px; text-align: center; padding: 14px 20px; border-radius: 14px; background: rgba(12,6,28,.85); border: 1px solid var(--line); display: none; }
#opening .inspectTxt.on { display: block; }
#opening .inspectTxt b { font-family: var(--font-title); font-size: 22px; }
#opening .inspectTxt p { font-family: var(--font-card); font-size: 17px; margin: 6px 0 0; white-space: pre-line; }
.owned0 .card { filter: grayscale(1) brightness(.4); }
.slotc .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; z-index: 6; pointer-events: none; text-shadow: 0 0 10px #000; }
.progress { width: 220px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #f2c14e, #ff8ad8); }
body.mobile #topbar .btn { font-size: 22px; padding: 14px 22px; }
body.mobile #endTurn { width: 250px; font-size: 30px; padding: 22px 10px; top: 350px; }
body.mobile .crystalbar { transform: scale(1.45); transform-origin: 0 50%; }
body.mobile .crystalbar[data-side="1"] { transform-origin: 0 0; }
body.mobile #promptBar { top: 405px; padding: 14px 16px 14px 26px; }
body.mobile #promptBar .ptxt { font-size: 24px; max-width: 900px; }
body.mobile #promptBar .btn { font-size: 22px; padding: 14px 24px; }
body.mobile #banner .msg { font-size: 30px; }
body.mobile #playBtn { font-size: 26px; padding: 16px 30px; }
body.mobile .lcard .act { font-size: 18px; padding: 10px 14px; bottom: -52px; }
body.mobile .navbar { bottom: 16px; padding: 10px; }
body.mobile .navbar button { font-size: 20px; padding: 14px 34px; }
body.mobile .navbar button .ic { font-size: 40px; }
body.mobile .pill { font-size: 30px; padding: 12px 22px; }
body.mobile .coin { width: 34px; height: 34px; }
body.mobile .packicon { width: 26px; height: 36px; }
body.mobile .iconbtn { width: 72px; height: 72px; font-size: 32px; }
body.mobile .profile .lvl { font-size: 24px; }
body.mobile .profile .av { width: 72px; height: 72px; }
body.mobile .hubright { width: 520px; }
body.mobile .bigplay { font-size: 70px; }
body.mobile .hubstats b { font-size: 32px; }
body.mobile .hubstats span { font-size: 15px; }
body.mobile .deckline { font-size: 19px !important; }
body.mobile .hubleader .change { font-size: 26px; padding: 18px; }
body.mobile .btn { font-size: 24px; }
body.mobile .btn.small { font-size: 20px; padding: 12px 20px; }
body.mobile .page .top { height: 100px; }
body.mobile .page .top h1 { font-size: 38px; }
body.mobile .chip { font-size: 18px; padding: 10px 18px; }
body.mobile .modal h2 { font-size: 40px; }
body.mobile #opening .hint { font-size: 34px; }
body.mobile .shoppack .price { font-size: 28px; }
body.mobile .shoppack .nm { font-size: 22px; }
body.mobile #log { font-size: 18px; width: 460px; max-height: 420px; }
#sheet .box { min-width: 520px; max-width: 1100px; }
#sheet .box.wide { width: 1000px; }
#sheet .lead { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 640px; margin: 6px auto; }
#sheet .err { color: #ff9c92; min-height: 20px; margin: 8px 0; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 18px; }
.mode { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; border-radius: 18px; color: var(--ink);
background: linear-gradient(180deg, rgba(90,50,160,.55), rgba(30,15,60,.7)); border: 1px solid var(--line); transition: transform .2s cubic-bezier(.2,.8,.2,1.4), border-color .2s, box-shadow .2s; }
.mode:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 0 30px rgba(242,193,78,.3); }
.mode .mi { font-size: 48px; }
.mode b { font-family: var(--font-title); font-size: 24px; letter-spacing: .1em; }
.mode span:last-child { color: var(--muted); font-size: 13px; }
.mode.off { opacity: .4; cursor: not-allowed; }
.mode.off:hover { transform: none; box-shadow: none; border-color: var(--line); }
.modesub { color: var(--muted); margin-bottom: 18px; } .modesub a { color: var(--gold); }
.friend { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center; }
.friend > div { padding: 22px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.friend h3, .acct h3 { font-family: var(--font-title); margin: 0; letter-spacing: .1em; }
.friend p, .acct p { color: var(--muted); margin: 0; font-size: 14px; }
.codein { font: 900 34px var(--font-title); letter-spacing: .4em; text-align: center; text-transform: uppercase; width: 260px; padding: 10px; border-radius: 12px; background: #1d1238; color: #fff; border: 1px solid var(--line); }
.waiting { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 460px; }
.winfo { color: var(--muted); font-size: 16px; }
.roomcode { font: 900 64px var(--font-title); letter-spacing: .35em; color: #ffe08a; text-shadow: 0 0 24px rgba(242,193,78,.7); margin: 6px 0 12px; user-select: text; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(168,107,255,.25); border-top-color: #b98aff; animation: spin 1s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.acct { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.acct form { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.acct input { font: 16px var(--font-ui); padding: 11px 14px; border-radius: 10px; background: #1d1238; color: var(--ink); border: 1px solid var(--line); user-select: text; }
.netdot { font: 800 11px var(--font-ui); letter-spacing: .2em; padding: 6px 10px; border-radius: 99px; color: #ffb3a8; border: 1px solid rgba(255,90,70,.4); background: rgba(12,6,28,.7); }
.netdot.on { color: #9dffc4; border-color: rgba(93,255,154,.45); box-shadow: 0 0 12px rgba(93,255,154,.25); }
.ranklist { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: 820px; bottom: 120px; overflow-y: auto; }
table.ranks { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
table.ranks th { text-align: left; color: var(--muted); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.ranks td { padding: 12px 14px; border-bottom: 1px solid rgba(190,160,255,.08); }
table.ranks tr:nth-child(-n+3) td:first-child { color: var(--gold); font-weight: 900; }
table.ranks tr.me td { background: rgba(168,107,255,.15); }
body.mobile .mode b { font-size: 32px; } body.mobile .mode span:last-child { font-size: 18px; } body.mobile table.ranks { font-size: 24px; }
body.mobile #sheet .lead { font-size: 22px; } body.mobile .acct input { font-size: 22px; }#over .overlead { display: flex; justify-content: center; margin: 6px 0 16px; perspective: 900px; }
#over .overlead .lc { width: 170px; height: 252px; animation: overLead 3.5s ease-in-out infinite; box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 40px rgba(168,107,255,.45); }
@keyframes overLead { 50% { transform: translateY(-6px) rotateY(8deg); } }
.page > .body { position: absolute; top: 96px; left: 30px; right: 30px; bottom: 112px; overflow-y: auto; padding: 6px 6px 20px; }
.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tab { appearance: none; border: 0; background: transparent; color: var(--muted); padding: 9px 16px; border-radius: 10px; font: 700 14px var(--font-ui); cursor: pointer; white-space: nowrap; }
.tab.on { background: linear-gradient(180deg, rgba(168,107,255,.55), rgba(90,40,170,.55)); color: #fff; }
.tab:hover:not(.on) { color: #fff; }
.eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.playing { text-align: center; color: var(--muted); margin: 0 0 14px; } .playing a { color: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.two h3, .quests h3 { font-family: var(--font-title); letter-spacing: .1em; margin: 6px 0 10px; }
#toast { position: absolute; left: 50%; bottom: 130px; transform: translate(-50%, 20px); z-index: 1200; padding: 12px 22px; border-radius: 12px; background: rgba(12,6,28,.95); border: 1px solid rgba(242,193,78,.5); opacity: 0; transition: all .25s; pointer-events: none; font-weight: 600; max-width: 800px; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.err:empty { display: none; }
.chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.chapter { border-radius: 18px; padding: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--d) 70%, transparent), rgba(12,6,28,.8)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: flex; flex-direction: column; gap: 10px; }
.chead { display: flex; flex-direction: column; } .chead span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c); } .chead b { font-family: var(--font-title); font-size: 22px; } .chead em { font-style: normal; color: var(--muted); font-size: 12px; }
.chapter p { font-size: 13px; line-height: 1.45; color: #d8ccef; margin: 0; min-height: 76px; }
.nodes { display: flex; flex-direction: column; gap: 8px; position: relative; }
.node { appearance: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font: 600 14px var(--font-ui); text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.node i { font-style: normal; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); flex: none; }
.node.open { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); }
.node.open:hover { transform: translateX(4px); }
.node.won i { background: var(--c); color: #120a20; font-weight: 900; }
.node.locked { opacity: .45; cursor: not-allowed; }
.node.boss { border-width: 2px; } .node.boss span { font-family: var(--font-title); }
.nodedetail { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; text-align: left; }
.nodedetail .lc { width: 170px; height: 252px; }
.bosswrap { display: grid; grid-template-columns: 330px 1fr; gap: 50px; align-items: center; max-width: 1150px; margin: 10px auto; }
.bosscard .lc { width: 330px; height: 490px; box-shadow: 0 0 60px rgba(255,90,70,.45), 0 30px 60px rgba(0,0,0,.6); animation: overLead 4s ease-in-out infinite; }
.bossinfo h2 { font-family: var(--font-title); font-size: 46px; margin: 6px 0; color: #ffcf9a; }
.bossinfo .lead { text-align: left; margin: 8px 0; max-width: none; }
.rewardline { margin: 14px 0; } .rewardline .done { color: #7dffb0; font-weight: 800; }
.rotation { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; } .rotation span { font-size: 12px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); } .rotation span.on { color: #fff; border-color: var(--gold); }
.puzzles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1300px; margin: 10px auto; }
.puzzle { appearance: none; position: relative; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 18px; min-height: 170px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(90,50,160,.4), rgba(20,10,40,.7)); color: var(--ink); cursor: pointer; transition: transform .15s, border-color .15s; }
.puzzle:hover { transform: translateY(-4px); border-color: var(--gold); }
.puzzle .n { font-family: var(--font-title); font-size: 34px; color: var(--gold); line-height: 1; }
.puzzle b { font-family: var(--font-title); font-size: 18px; } .puzzle em { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.4; flex: 1; }
.puzzle i { font-style: normal; font-weight: 800; font-size: 13px; color: #b98aff; } .puzzle.solved i { color: #7dffb0; } .puzzle.solved { border-color: rgba(125,255,176,.4); }
.runintro { max-width: 1100px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.runintro h2 { font-family: var(--font-title); font-size: 40px; margin: 0; }
.runleaders { display: flex; gap: 14px; margin: 14px 0; }
.rl { cursor: pointer; border-radius: 12px; transition: transform .15s; } .rl .lc { width: 140px; height: 208px; } .rl:hover { transform: translateY(-6px); } .rl.on .lc { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(242,193,78,.6); }
.runhead { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 18px; flex-wrap: wrap; }
.floors { display: flex; gap: 8px; } .floors span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; border: 2px solid var(--line); color: var(--muted); }
.floors span.done { background: #5a3db0; color: #fff; border-color: #b98aff; } .floors span.cur { border-color: var(--gold); color: #fff; box-shadow: 0 0 16px rgba(242,193,78,.7); } .floors span.boss { color: #ff9c92; }
.lives { font-size: 24px; letter-spacing: 4px; }
.relics { display: flex; gap: 8px; } .relics span { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 13px; }
.nextopp { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; max-width: 1000px; margin: 0 auto; }
.nextopp .lc { width: 240px; height: 356px; } .nextopp h2 { font-family: var(--font-title); font-size: 38px; margin: 6px 0; } .nextopp .lead { text-align: left; margin: 6px 0 18px; }
.offer { display: flex; gap: 22px; justify-content: center; align-items: stretch; margin: 16px 0; }
.offc { position: relative; width: 200px; height: 280px; cursor: pointer; transition: transform .2s; } .offc .card { width: 200px; height: 280px; } .offc:hover { transform: translateY(-10px) scale(1.03); }
.offr { appearance: none; width: 200px; border-radius: 16px; border: 1px solid var(--gold); background: linear-gradient(160deg, rgba(242,193,78,.2), rgba(20,10,40,.8)); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; cursor: pointer; transition: transform .2s; }
.offr:hover { transform: translateY(-10px); } .offr i { font-style: normal; font-size: 54px; } .offr b { font-family: var(--font-title); font-size: 18px; } .offr em { font-style: normal; font-size: 13px; color: var(--muted); }
.decklistview { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-width: 460px; text-align: left; }
.decklistview .drow, #stats .drow, .two .drow { display: grid; grid-template-columns: 28px 1fr 40px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border-left: 4px solid var(--c); font-size: 14px; }
.drow .cst { font-family: var(--font-title); font-weight: 900; text-align: center; } .drow .q { text-align: right; font-weight: 800; color: var(--gold); }
.quests { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1300px; margin: 0 auto; }
.quest { display: grid; grid-template-columns: 1fr 70px 100px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 10px; }
.quest b { font-size: 15px; } .quest span { font-size: 12px; color: var(--muted); }
.qbar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 4px; } .qbar i { display: block; height: 100%; background: linear-gradient(90deg, #a86bff, #6fd3ff); }
.quest.ready { border-color: var(--gold); box-shadow: 0 0 20px rgba(242,193,78,.25); } .quest.claimed { opacity: .5; }
.qr { display: flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 900; } .qr .coin { width: 18px; height: 18px; }
.quest em { font-style: normal; color: #7dffb0; font-weight: 700; text-align: center; }
.offline { max-width: 700px; margin: 60px auto; text-align: center; }
.clubhead { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.clubhead h2 { font-family: var(--font-title); font-size: 36px; margin: 4px 0; } .clubhead .lead { text-align: left; margin: 0; }
.invite { text-align: center; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #555; } .dot.on { background: #5dff9a; box-shadow: 0 0 8px #5dff9a; }
.livelist { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; margin: 10px auto; }
.live { display: grid; grid-template-columns: 1fr 40px 1fr 220px 110px; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.live .vs b { font-size: 16px; } .live .vs span { color: var(--muted); font-size: 13px; display: block; } .live i { font-style: normal; color: var(--gold); font-family: var(--font-title); text-align: center; } .live em { font-style: normal; color: var(--muted); font-size: 13px; }
.trade { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 8px; }
.trade p { margin: 4px 0; font-size: 14px; } .trade .tb { display: flex; gap: 6px; flex-direction: column; } .trade.done { font-size: 13px; color: var(--muted); } .trade.done em { font-style: normal; text-transform: capitalize; }
.tradeform { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tradeform input, .acct input { font: 15px var(--font-ui); padding: 10px 12px; border-radius: 10px; background: #1d1238; color: var(--ink); border: 1px solid var(--line); user-select: text; width: 100%; }
.tradeform label { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.picks { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .picks button { appearance: none; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; border-left: 4px solid var(--c); background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; font: 14px var(--font-ui); } .picks button span { color: var(--muted); font-size: 12px; float: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips span { padding: 5px 10px; border-radius: 99px; background: rgba(168,107,255,.25); cursor: pointer; font-size: 13px; }
table.hist td.win { color: #7dffb0; font-weight: 800; } table.hist td.loss { color: #ff9c92; }
.statnums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
.statnums div { text-align: center; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.statnums b { display: block; font-family: var(--font-title); font-size: 34px; font-variant-numeric: tabular-nums; } .statnums span { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.sbar { display: grid; grid-template-columns: 170px 1fr 50px 150px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.sbar > div { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .sbar > div i { display: block; height: 100%; background: linear-gradient(90deg, #f2c14e, #7dffb0); }
.sbar b { text-align: right; font-variant-numeric: tabular-nums; } .sbar em { font-style: normal; color: var(--muted); font-size: 12px; }
.settings { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.set b { font-size: 17px; } .set p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); flex: none; }
.seg button { appearance: none; border: 0; padding: 9px 16px; border-radius: 9px; background: transparent; color: var(--muted); font: 700 14px var(--font-ui); cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, #f6d06a, #b8811a); color: #2a1600; }
.tog { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.grid .slotc.unowned .card { filter: saturate(.35) brightness(.72); }
.nown { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 6; font: 800 10px var(--font-ui); letter-spacing: .12em; padding: 3px 8px; border-radius: 99px; background: rgba(12,6,28,.9); color: #ffb86b; border: 1px solid rgba(255,184,107,.5); pointer-events: none; white-space: nowrap; }
#deckbuilder .drow.ghostrow { opacity: .7; border-left-style: dashed; }
.codebox { width: 620px; max-width: 100%; height: 90px; font: 14px ui-monospace, monospace; padding: 12px; border-radius: 10px; background: #1d1238; color: var(--ink); border: 1px solid var(--line); resize: none; user-select: text; }
.shardbar { position: absolute; top: 96px; left: 30px; right: 30px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.shardbar span { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.shardbar span i { width: 10px; height: 13px; background: var(--c); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
.shardbar em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; }
.craftbox { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .craftbox .own { color: var(--muted); font-size: 14px; }
#topbar .btn.on { background: rgba(242,193,78,.25); border-color: var(--gold); }
#tracker { position: absolute; left: 16px; top: 60px; width: 300px; max-height: 620px; overflow-y: auto; padding: 12px 14px; border-radius: 14px; background: rgba(10,5,24,.94); border: 1px solid var(--line); z-index: 870; display: none; font-size: 13px; }
#tracker.on { display: block; }
#tracker h4 { margin: 10px 0 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } #tracker h4:first-child { margin-top: 0; }
#tracker .tr { display: grid; grid-template-columns: 22px 1fr 30px; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(190,160,255,.08); } #tracker .tr b { color: #e9d7ff; } #tracker .tr i { font-style: normal; text-align: right; color: var(--gold); } #tracker .tr span:only-child { grid-column: 1 / -1; }
#replayBar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 880; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(12,6,28,.92); border: 1px solid rgba(242,193,78,.5); }
#replayBar > b { font-family: var(--font-title); letter-spacing: .2em; color: var(--gold); padding: 0 6px; }
body.mobile #tracker { width: 440px; font-size: 18px; max-height: 760px; } body.mobile .tab { font-size: 20px; padding: 12px 20px; } body.mobile .node { font-size: 18px; } body.mobile .chapter p { font-size: 16px; }
body.mobile .quest b { font-size: 20px; } body.mobile .set b { font-size: 22px; } body.mobile .set p { font-size: 18px; } body.mobile .seg button { font-size: 20px; padding: 12px 20px; }
body.fx-low .motes, body.fx-low #game::after { display: none; }
body.fx-low .card.foil::after, body.fx-low .card .shine { display: none; }
body.fx-low .card.ready, body.fx-low .bigplay, body.fx-low .bigplay::after, body.fx-low .hubleader .lc::after, body.fx-low .shoppack img, body.fx-low #over .overlead .lc, body.fx-low .bosscard .lc { animation: none !important; }
body.fx-low #hub { background: radial-gradient(ellipse at 50% 45%, #2a1250 0%, #0b0716 70%); }
body.theme-midnight { --bg: #000; --panel: rgba(8,8,12,.92); }
body.theme-midnight #viewport, body.theme-midnight { background: #000; }
body.theme-midnight .page { background: #000; }
body.theme-midnight #game { background: linear-gradient(180deg, #030205 0%, #07050c 50%, #030205 100%); }
body.theme-midnight #hub { background: #000; }
body.theme-midnight .page .top { background: rgba(0,0,0,.85); }
body.theme-midnight .crystalbar, body.theme-midnight .navbar, body.theme-midnight #log, body.theme-midnight #tracker { background: rgba(4,4,8,.95); }
#deckbuilder .top .btn, #deckbuilder .top h1, #deckbuilder .top .tog { white-space: nowrap; flex-shrink: 0; }
#deckbuilder .top .chip { padding: 6px 10px; font-size: 12px; }
#deckbuilder .top .filters { gap: 6px; }
#deckbuilder .top .search { width: 140px; }
#deckbuilder .decklist .search { min-width: 0; }
.cmd { position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px 5px 8px; border-radius: 99px; font: 700 12px/1 var(--font-ui, inherit); letter-spacing: .03em; color: #2a1800; background: linear-gradient(180deg, #ffe7a3, #d9a441); border: 1px solid #fff2c4; box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: pointer; z-index: 700; }
.cmd.theirs { pointer-events: none; opacity: .92; }
.cmd i { font-style: normal; font-size: 14px; }
.cmd b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #3b1280; color: #e9d7ff; font-size: 12px; }
.cmd.mine:not(.ready) { filter: grayscale(.55) brightness(.75); }
.cmd.ready::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 4px rgba(255,211,110,.35), 0 0 26px rgba(255,211,110,.8); opacity: 0; animation: cmdReady 1.6s ease-in-out infinite; }
.cmd.used { filter: grayscale(1) brightness(.5); text-decoration: line-through; }
@keyframes cmdReady { 50% { opacity: 1; } }
body.mobile .cmd { font-size: 16px; padding: 8px 14px 8px 10px; }
#game.splashing #intentBox, .splashing #intentBox { opacity: 0 !important; }
#intentBox { position: absolute; left: 400px; top: 318px; width: 330px; padding: 10px 14px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(60,10,16,.94), rgba(22,6,18,.94)); border: 1px solid rgba(255,106,90,.65); box-shadow: 0 0 24px rgba(255,90,70,.28); color: #ffe3de; z-index: 850; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
#intentBox.on { opacity: 1; transform: none; }
#intentBox.pop { animation: intentPop .5s cubic-bezier(.2,.9,.3,1.3); }
#intentBox .k { font: 800 11px/1 var(--font-ui, inherit); letter-spacing: .2em; color: #ff8a7a; }
#intentBox .n { font-family: var(--font-title); font-weight: 900; font-size: 22px; margin: 4px 0 2px; color: #fff; }
#intentBox .t { font-size: 14px; line-height: 1.35; }
#intentBox .h { margin-top: 6px; font-size: 12px; color: #9fe3ff; }
#intentBox.broken { border-color: rgba(111,211,255,.7); background: linear-gradient(160deg, rgba(10,30,50,.94), rgba(10,10,28,.94)); }
#intentBox.broken .k { color: #6fd3ff; } #intentBox.broken .n { text-decoration: line-through; opacity: .7; }
@keyframes intentPop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
body.mobile #intentBox { left: 400px; top: 314px; width: 400px; }
body.mobile #intentBox .n { font-size: 26px; } body.mobile #intentBox .t { font-size: 17px; }
#pickModal { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(8,4,18,.78); backdrop-filter: blur(4px); z-index: 900; }
#pickModal.on { display: flex; }
#pickModal .ptxt { font-family: var(--font-title); font-size: 28px; font-weight: 900; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 10px #000; }
#pickModal .row { display: flex; gap: 28px; }
#pickModal .card.pickc { position: relative; width: 220px; height: 308px; cursor: pointer; animation: pickIn .45s cubic-bezier(.2,.9,.3,1.2) both; transition: transform .2s; }
#pickModal .card.pickc:hover { transform: translateY(-10px) scale(1.04); }
@keyframes pickIn { from { opacity: 0; transform: translateY(40px) rotateY(80deg); } to { opacity: 1; transform: none; } }
body.mobile #pickModal .card.pickc { width: 280px; height: 392px; }
#cmdSplash { position: absolute; left: 0; right: 0; top: 300px; display: grid; justify-items: center; pointer-events: none; z-index: 885; opacity: 0; }
#cmdSplash .k { font: 800 16px/1 var(--font-ui, inherit); letter-spacing: .5em; color: var(--sc, #f2c14e); }
#cmdSplash .n { font-family: var(--font-title); font-weight: 900; font-size: 60px; color: #fff; text-shadow: 0 0 34px var(--sc, #f2c14e), 0 4px 10px #000; }
#cmdSplash .x { max-width: 720px; text-align: center; font-size: 18px; color: #ffeec2; text-shadow: 0 2px 6px #000; }
#cmdSplash.go { animation: cmdSplash 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cmdSplash { 0% { opacity: 0; transform: scale(1.4); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.card .sigb { position: absolute; left: 89.58%; top: 14.2%; transform: translate(-50%, -50%); width: clamp(14px, 15cqw, 26px); height: clamp(14px, 15cqw, 26px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(9px, 9cqw, 15px); line-height: 1; color: #3a2400; background: radial-gradient(circle at 35% 30%, #fff3c4, #e0a93a); border: 1px solid #fff; box-shadow: 0 0 10px rgba(255,211,110,.9); z-index: 4; pointer-events: none; }
body.fx-low .cmd.ready, body.fx-low .cmd.ready::after, body.fx-low #pickModal .card.pickc { animation: none; }
.ability.cmdline { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.4); }
.ability.cmdline b { color: #ffd36e; } .ability.cmdline i { color: var(--muted); font-style: normal; font-size: .85em; }
body.fx-low .cmd.ready::after { opacity: 1; }
/* css/season.css */
.seasonHub { position: absolute; right: 90px; bottom: 132px; width: 420px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.seasonHub .shMain { appearance: none; position: relative; display: flex; align-items: stretch; gap: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink);
border: 1.5px solid color-mix(in srgb, var(--sc, #e8b730) 70%, transparent); background: linear-gradient(100deg, rgba(12,6,28,.92) 40%, color-mix(in srgb, var(--sc, #e8b730) 22%, rgba(12,6,28,.9)));
box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb, var(--sc, #e8b730) 30%, transparent); transition: transform .18s, box-shadow .2s; }
.seasonHub .shMain:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 36px color-mix(in srgb, var(--sc, #e8b730) 50%, transparent); }
.seasonHub .shArt { width: 104px; flex: none; background-size: cover; background-position: 50% 16%; position: relative; }
.seasonHub .shArt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(12,6,28,.95)); }
.seasonHub .shTxt { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px 12px 8px; flex: 1; min-width: 0; }
.seasonHub .shEy { font: 800 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--sc, var(--gold)); }
.seasonHub .shTxt > b { font-family: var(--font-title); font-size: 24px; letter-spacing: .06em; line-height: 1.1; }
.seasonHub .shEv { font-size: 13px; color: #d8ccef; }
.seasonHub .shBar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px; }
.seasonHub .shBar i { display: block; height: 100%; background: linear-gradient(90deg, #f6d06a, #b8811a); }
.seasonHub .shTr { font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.seasonHub .shBadge { position: absolute; top: 8px; right: 10px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #ff4a3a; color: #fff; font: 800 13px var(--font-ui); display: grid; place-items: center; box-shadow: 0 0 12px #ff4a3a; }
.locChip { font-size: 13px; color: #cbb9ee; padding: 8px 14px; border-radius: 99px; background: rgba(12,6,28,.78); border: 1px solid var(--line); cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.locChip b { font-weight: 800; color: #fff4d6; }
.locChip.on { color: #fff4d6; border-color: rgba(242,193,78,.6); box-shadow: 0 0 16px rgba(242,193,78,.3); }
.locChip:empty { display: none; }
body.mobile .seasonHub { width: 520px; bottom: 150px; }
body.mobile .seasonHub .shTxt > b { font-size: 32px; }
body.mobile .seasonHub .shEy { font-size: 16px; }
body.mobile .seasonHub .shEv, body.mobile .seasonHub .shTr { font-size: 18px; }
body.mobile .seasonHub .shArt { width: 130px; }
body.mobile .seasonHub .shBar { height: 10px; }
body.mobile .locChip { font-size: 19px; padding: 10px 16px; }
#season .body.sbody { display: flex; flex-direction: column; gap: 16px; }
#season h3 { font-family: var(--font-title); letter-spacing: .08em; margin: 2px 0 6px; font-size: 22px; }
#season p { margin: 0; }
.sTop { display: grid; grid-template-columns: minmax(520px, 1fr) 1fr; gap: 16px; }
.sHero { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 16px; border-radius: 18px; align-items: center;
background: linear-gradient(120deg, color-mix(in srgb, var(--sd) 80%, transparent), rgba(12,6,28,.85)); border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); }
.sHero .lc { width: 130px; height: 193px; }
.sHero h2 { font-family: var(--font-title); font-size: 32px; margin: 2px 0; letter-spacing: .06em; }
.sHero .tag { color: var(--sc); font-weight: 700; margin-bottom: 6px !important; }
.sHero .lore { font-family: var(--font-card); font-size: 15px; line-height: 1.4; color: #e6dcf6; }
.sHero .sMeta { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.sHero .warn { color: #ffd36e; }
.sWeeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sWeek { appearance: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--ink);
background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.sWeek:hover { transform: translateY(-2px); }
.sWeek .wk { font: 800 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sWeek b { font-family: var(--font-title); font-size: 17px; line-height: 1.15; }
.sWeek .wl { font-size: 12.5px; color: #cbb9ee; }
.sWeek .wd { font-size: 11.5px; color: var(--muted); margin-top: auto; }
.sWeek.cur { border-color: var(--gold); background: linear-gradient(180deg, rgba(242,193,78,.18), rgba(242,193,78,.04)); box-shadow: 0 0 22px rgba(242,193,78,.28); }
.sWeek.cur .wk { color: var(--gold); }
.sWeek.sel { outline: 2px solid #b98aff; outline-offset: 2px; }
.sEvent { padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.sEvHead { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.sEvHead p { color: #d8ccef; font-size: 14px; line-height: 1.45; max-width: 820px; }
.sRec { text-align: center; padding: 8px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); flex: none; }
.sRec b { display: block; font-family: var(--font-title); font-size: 28px; }
.sRec span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sLock { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.05); color: #ffd9a0; font-size: 13.5px; }
.sNodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sNodes .node span { display: flex; flex-direction: column; gap: 2px; }
.sNodes .node small { font-weight: 500; color: var(--muted); font-size: 12px; }
.sChips { display: flex; gap: 8px; flex-wrap: wrap; }
.rchip { appearance: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font: 600 13px var(--font-ui); text-align: left; }
.rchip i { font-style: normal; font-size: 18px; }
.rchip small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rchip em { font-style: normal; font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.1); }
.rchip.ready { border-color: var(--gold); cursor: pointer; box-shadow: 0 0 14px rgba(242,193,78,.35); animation: sGlow 1.8s ease-in-out infinite; }
.rchip.ready em { background: var(--gold); color: #2a1600; }
.rchip.done { opacity: .6; }
.rchip.locked { opacity: .55; }
@keyframes sGlow { 50% { box-shadow: 0 0 24px rgba(242,193,78,.6); } }
.sPlay { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.sFeat { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; margin-right: auto; }
.sEvHead .sFeat { margin-right: 0; flex: none; }
.sCom { padding: 12px 14px; border-radius: 14px; background: rgba(168,107,255,.07); border: 1px solid rgba(168,107,255,.25); display: flex; flex-direction: column; gap: 10px; }
.sCom.off { opacity: .75; }
.sComHead { display: flex; justify-content: space-between; align-items: baseline; }
.sComHead span { color: var(--muted); font-size: 13px; }
.sCom.off .sComHead span { color: #ffd36e; }
.sComBar { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.08); margin: 6px 12px 16px; }
.sComBar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a86bff, #6fd3ff); }
.sComBar em { position: absolute; top: 14px; transform: translateX(-50%); font: 700 10.5px var(--font-ui); font-style: normal; color: var(--muted); }
.sComBar em::before { content: ""; position: absolute; left: 50%; top: -17px; width: 2px; height: 14px; background: rgba(255,255,255,.35); }
.sComBar em.hit { color: #7dffb0; }
.sSub { font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sNote { font-size: 13px; color: var(--muted); }
.sPips { display: flex; gap: 8px; align-items: center; }
.sPips i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: rgba(255,255,255,.04); }
.sPips i.w { background: radial-gradient(circle at 35% 30%, #d8ffb0, #3fae4a); border-color: #b8ffcf; }
.sPips i.l { background: radial-gradient(circle at 35% 30%, #ffb0a0, #a0281c); border-color: #ffc8c0; }
.sPips span { margin-left: 8px; color: var(--muted); font-size: 13px; }
.sLocRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.sLoc { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.sLoc.on { border-color: var(--gold); box-shadow: 0 0 16px rgba(242,193,78,.25); }
.sLoc .li { font-size: 30px; line-height: 1; }
.sLoc b { display: block; font-family: var(--font-title); font-size: 15px; }
.sLoc span { display: block; font-size: 11.5px; color: var(--muted); margin: 2px 0 4px; }
.sLoc span em { font-style: normal; color: #ffd36e; }
.sLoc p { font-size: 12.5px; line-height: 1.35; color: #d8ccef; }
.sTrackHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.sTrackHead p { color: var(--muted); font-size: 14px; }
.sXp { text-align: right; } .sXp b { font-family: var(--font-title); font-size: 34px; display: block; } .sXp span { color: var(--muted); font-size: 13px; }
.sTrack { display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px 14px; scroll-snap-type: x proximity; touch-action: pan-x; }
.sMs { appearance: none; flex: none; width: 150px; min-height: 250px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 16px; text-align: center; color: var(--ink);
background: rgba(255,255,255,.05); border: 1px solid var(--line); font: 600 13px var(--font-ui); }
.sMs .n { font-family: var(--font-title); font-size: 13px; color: var(--muted); }
.sMs i { font-style: normal; font-size: 40px; margin: 6px 0; }
.sMs .t { flex: 1; line-height: 1.3; }
.sMs .x { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sMs.big { background: linear-gradient(180deg, rgba(242,193,78,.1), rgba(255,255,255,.03)); }
.sMs.ready { border-color: var(--gold); cursor: pointer; animation: sGlow 1.8s ease-in-out infinite; }
.sMs.ready .x { color: #2a1600; background: var(--gold); padding: 4px 12px; border-radius: 99px; font-weight: 800; }
.sMs.done { opacity: .55; }
.sMs.locked { opacity: .5; }
.sTrackBar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.sTrackBar i { display: block; height: 100%; background: linear-gradient(90deg, #f6d06a, #b8811a); }
.sLocker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.sSlot { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sCos { appearance: none; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); text-align: left; cursor: pointer; font: 600 14px var(--font-ui); }
.sCos span { font-size: 12px; font-weight: 500; color: var(--muted); }
.sCos.eq { border-color: var(--gold); background: linear-gradient(180deg, rgba(242,193,78,.16), rgba(242,193,78,.04)); }
.sCos.eq span { color: var(--gold); }
.sCos.lock { opacity: .55; cursor: not-allowed; }
.sPrev { display: flex; justify-content: center; padding: 4px 0 6px; }
.sArchLead { max-width: none !important; text-align: left; margin: 0 !important; }
.sArch { display: flex; flex-direction: column; gap: 8px; }
.sArchHead { display: flex; gap: 12px; align-items: baseline; } .sArchHead b { font-family: var(--font-title); font-size: 18px; } .sArchHead span { color: var(--muted); font-size: 13px; }
.sArchRow { display: flex; gap: 14px; flex-wrap: wrap; }
.sArchRow .slotc { width: 130px; height: 182px; position: relative; }
.sArchRow .slotc .card { position: relative; width: 130px; height: 182px; }
.sPick { display: flex; gap: 18px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.sPickC { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sPickC .own { font-size: 12px; color: var(--muted); }
body.mobile #season h3 { font-size: 28px; }
body.mobile .sHero .lore { font-size: 18px; } body.mobile .sHero .sMeta, body.mobile .sEvHead p { font-size: 17px; }
body.mobile .sWeek b { font-size: 21px; } body.mobile .sWeek .wl, body.mobile .sWeek .wd { font-size: 15px; } body.mobile .sWeek .wk { font-size: 14px; }
body.mobile .rchip { font-size: 17px; padding: 10px 14px; } body.mobile .rchip small { font-size: 13px; }
body.mobile .sLoc p { font-size: 15px; } body.mobile .sLoc b { font-size: 18px; } body.mobile .sLoc span { font-size: 14px; }
body.mobile .sMs { width: 190px; font-size: 16px; } body.mobile .sCos { font-size: 18px; } body.mobile .sCos span { font-size: 15px; }
body.mobile .sNodes .node small { font-size: 15px; } body.mobile .sSub, body.mobile .sNote, body.mobile .sFeat { font-size: 16px; }
body.mobile .sTop { grid-template-columns: 1fr 1fr; }
body.mobile .sHero { grid-template-columns: 110px 1fr; } body.mobile .sHero .lc { width: 110px; height: 163px; } body.mobile .sHero .lore { display: none; }
#game .locBanner { position: absolute; left: 16px; top: 348px; z-index: 700; display: flex; gap: 8px; align-items: center; max-width: 230px; padding: 7px 12px 7px 9px; border-radius: 14px; cursor: pointer;
background: rgba(12,6,28,.88); border: 1px solid rgba(242,193,78,.55); box-shadow: 0 8px 20px rgba(0,0,0,.5); opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .4s; }
#game .locBanner.in { opacity: 1; transform: none; }
#game .locBanner .li { font-size: 24px; }
#game .locBanner b { display: block; font-family: var(--font-title); font-size: 13px; letter-spacing: .06em; color: #fff4d6; }
#game .locBanner em { display: none; font-style: normal; font-size: 12px; line-height: 1.35; color: #d8ccef; margin-top: 3px; }
#game .locBanner.open em { display: block; }
#game .boardTag { position: absolute; left: 16px; top: 412px; z-index: 700; font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(12,6,28,.85); border: 1px solid var(--line); color: #cbb9ee; pointer-events: none; }
#game .emoteBtn { position: absolute; right: 230px; top: 380px; z-index: 700; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(12,6,28,.85); font-size: 22px; cursor: pointer; }
#game .emoteBtn:hover { border-color: var(--gold); }
body.mobile #game .locBanner { max-width: 320px; top: 330px; } body.mobile #game .locBanner b { font-size: 19px; } body.mobile #game .locBanner em { font-size: 16px; }
body.mobile #game .emoteBtn { width: 70px; height: 70px; font-size: 32px; right: 300px; top: 360px; }
body.mobile #game .boardTag { font-size: 16px; top: 420px; }
.socPanel { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.socMap { padding: 16px 18px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.expPath { position: relative; height: 96px; margin: 10px 60px 4px; }
.expPath::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 6px; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 12px, transparent 12px 20px); }
.expFill { position: absolute; left: 0; top: 20px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #f6d06a, #b8811a); box-shadow: 0 0 10px rgba(242,193,78,.6); }
.expStop { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; z-index: 1; }
.expStop i { font-style: normal; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--font-title); background: #1d1238; border: 2px solid var(--line); }
.expStop span { font-size: 11px; text-align: center; color: var(--muted); line-height: 1.2; }
.expStop.hit i { background: linear-gradient(180deg, #f6d06a, #b8811a); color: #2a1600; border-color: #ffe6a0; }
.expStop.cur i { box-shadow: 0 0 18px rgba(242,193,78,.8); transform: scale(1.12); }
.expStop.cur span { color: #fff4d6; font-weight: 700; }
.expInfo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.expInfo .muted { color: var(--muted); }
.socDecks { padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.lendRow { display: flex; gap: 10px; align-items: center; }
.lendRow select { background: #1d1238; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px; font: inherit; min-width: 280px; }
.lentList { display: flex; flex-direction: column; gap: 8px; }
.lent { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.lent .lav { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: 50% 18%; border: 2px solid var(--line); }
.lent b { display: block; } .lent span { font-size: 12px; color: var(--muted); }
body.mobile .expStop span { font-size: 14px; } body.mobile .expInfo, body.mobile .lent span { font-size: 17px; } body.mobile .lendRow select { font-size: 18px; }
.oddsT { margin: 10px auto; } .oddsT td { text-align: left; }
.oddsT .rar { font-size: 14px; margin: 0 4px 0 0; } body.mobile .oddsT .rar { font-size: 19px; } body.mobile .oddsT td { font-size: 20px; }
.dupeNote { margin-top: 6px; color: #ffd9a0; }
.adStub { display: grid; place-items: center; height: 140px; position: relative; margin: 10px 0; border-radius: 14px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px); }
.adStub b { position: absolute; font-family: var(--font-title); font-size: 26px; }
.seasonPill { color: #ffd36e; }
.card .face::before { content: none; }
.cs-sepia-archive .card .face .art { filter: sepia(.85) contrast(1.06) brightness(.94); }
.cs-sepia-archive .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 18cqw rgba(60,34,10,.55); border: 1.2cqw solid rgba(222,196,150,.55); border-radius: inherit; }
.cs-gilded .card .face { box-shadow: 0 0 0 1.4cqw #f2c14e, 0 0 6cqw rgba(242,193,78,.55), 0 6px 16px rgba(0,0,0,.55); }
.cs-gilded .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(255,236,170,.35) 45%, transparent 60%); background-size: 260% 100%; animation: csSheen 4.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes csSheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.cs-blueprint .card .face .art { filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(2.6) brightness(.9) contrast(1.2); }
.cs-blueprint .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
background: repeating-linear-gradient(0deg, rgba(160,220,255,.16) 0 1px, transparent 1px 7cqw), repeating-linear-gradient(90deg, rgba(160,220,255,.16) 0 1px, transparent 1px 7cqw); }
.cs-patina .card .face .art { filter: sepia(.55) hue-rotate(45deg) saturate(.9) contrast(1.05); }
.cs-patina .card .face { box-shadow: 0 0 0 1.2cqw #6fa58a, 0 0 0 2.2cqw #7a5a22, 0 6px 16px rgba(0,0,0,.55); }
.cs-voltaic .card .face { animation: csVolt 2.4s ease-in-out infinite; }
@keyframes csVolt { 0%, 100% { box-shadow: 0 0 0 1px #6fd3ff, 0 0 4cqw rgba(111,211,255,.45), 0 6px 16px rgba(0,0,0,.55); } 47% { box-shadow: 0 0 0 1px #6fd3ff, 0 0 4cqw rgba(111,211,255,.45), 0 6px 16px rgba(0,0,0,.55); }
50% { box-shadow: 0 0 0 1.6cqw #d9f6ff, 0 0 10cqw rgba(111,211,255,.95), 0 6px 16px rgba(0,0,0,.55); } 53% { box-shadow: 0 0 0 1px #6fd3ff, 0 0 5cqw rgba(111,211,255,.6), 0 6px 16px rgba(0,0,0,.55); } }
.card.can .face, .card.ready .face { animation: none; }
.fr-brass-gears .hubleader .lc, .fr-brass-gears #game .lcard.mine .lc { outline: 5px dotted #d6a64a; outline-offset: 4px; }
.fr-brass-gears .profile .av { border-color: #d6a64a; outline: 3px dotted #d6a64a; outline-offset: 2px; }
.fr-tesla-coil .hubleader .lc, .fr-tesla-coil #game .lcard.mine .lc { outline: 3px solid #8fe7ff; outline-offset: 4px; animation: frCoil 2.2s ease-in-out infinite; }
.fr-tesla-coil .profile .av { border-color: #8fe7ff; box-shadow: 0 0 16px #6fd3ff; }
@keyframes frCoil { 50% { outline-color: #e6fbff; filter: drop-shadow(0 0 14px #6fd3ff); } }
.fr-clockwork-crown .hubleader .lc, .fr-clockwork-crown #game .lcard.mine .lc { outline: 4px double #b87333; outline-offset: 5px; }
.fr-clockwork-crown .profile .av { border-color: #b87333; }
.fr-archivist .hubleader .lc, .fr-archivist #game .lcard.mine .lc { outline: 4px solid #a86bff; outline-offset: 3px; box-shadow: 0 0 0 10px rgba(242,193,78,.8), 0 30px 60px rgba(0,0,0,.7); }
.fr-archivist .profile .av { border-color: #a86bff; box-shadow: 0 0 0 3px var(--gold); }
.fr-invention-laurel .hubleader .lc, .fr-invention-laurel #game .lcard.mine .lc { outline: 4px solid #f2c14e; outline-offset: 5px; filter: drop-shadow(0 0 16px rgba(125,255,176,.55)); }
.fr-invention-laurel .profile .av { border-color: #7dffb0; box-shadow: 0 0 14px rgba(125,255,176,.7); }
.fr-society-banner .hubleader .lc, .fr-society-banner #game .lcard.mine .lc { outline: 5px solid #c0392b; outline-offset: 3px; box-shadow: 0 0 0 9px #f2c14e, 0 30px 60px rgba(0,0,0,.7); }
.fr-society-banner .profile .av { border-color: #c0392b; box-shadow: 0 0 0 3px #f2c14e; }
body.mobile .sEvHead p { font-size: 20px; } body.mobile .sHero h2 { font-size: 38px; } body.mobile .sHero .tag { font-size: 19px; }
body.mobile .sWeek b { font-size: 24px; } body.mobile .sWeek .wl { font-size: 17px; } body.mobile .sLoc p { font-size: 17px; }
body.mobile .rchip { font-size: 19px; } body.mobile .sPips span, body.mobile .sComHead span { font-size: 17px; } body.mobile .sLock { font-size: 17px; }
body.mobile .sRec b { font-size: 36px; } body.mobile .sRec span { font-size: 14px; }
body.mobile .expPath { height: 120px; } body.mobile .expStop { width: 120px; } body.mobile .expStop span { font-size: 17px; }
body.mobile .expStop i { width: 56px; height: 56px; font-size: 20px; } body.mobile .expPath::before, body.mobile .expFill { top: 25px; }
/* css/progress.css */
.lc.mastered { box-shadow: 0 0 0 3px #ffe08a, 0 0 0 7px rgba(122,74,0,.9), 0 0 34px rgba(255,210,110,.7), 0 10px 30px rgba(0,0,0,.55); }
.lc.mastered::before { content: "✦ MASTERED"; position: absolute; top: 3%; right: 4%; z-index: 3; font: 900 5.4cqw var(--font-title); letter-spacing: .12em; color: #2a1600; padding: 1.5% 4%; border-radius: 99px; background: linear-gradient(180deg, #ffe9a8, #d9a63a); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.chron-av.mastered, .mav.mastered, .mrow.mastered .mav { box-shadow: 0 0 0 3px #ffe08a, 0 0 16px rgba(255,210,110,.8); }
.mast { display: grid; grid-template-columns: 290px 1fr; gap: 24px; max-width: 1480px; margin: 0 auto; }
.mast-list { display: flex; flex-direction: column; gap: 8px; }
.mrow { appearance: none; position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.mrow:hover { transform: translateX(3px); }
.mrow.on { border-color: var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255,255,255,.03)); }
.mav { width: 56px; height: 56px; border-radius: 50%; background: #222 center 18% / cover; border: 2px solid var(--c); }
.mtxt b { font-family: var(--font-title); font-size: 16px; } .mtxt span { display: block; font-size: 12px; color: var(--muted); }
.mtxt .qbar { margin: 6px 0 0; } .mrow.mastered .mtxt span { color: #ffe08a; font-weight: 800; }
.mbadge { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #ff4a3a; color: #fff; font: 800 12px var(--font-ui); display: grid; place-items: center; box-shadow: 0 0 10px #ff4a3a; }
.mast-detail { display: grid; grid-template-columns: 230px 1fr; gap: 26px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--d) 60%, transparent), rgba(12,6,28,.8)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.mast-art .lc { width: 230px; height: 340px; }
.mast-main h2 { font-family: var(--font-title); font-size: 34px; margin: 2px 0 4px; }
.mtitle { color: #d8ccef; font-size: 14px; margin-bottom: 12px; } .mtitle b { color: #ffe08a; }
.tiers { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
.tierpip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: center; }
.tierpip b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--font-title); background: rgba(255,255,255,.08); }
.tierpip span { font-size: 10.5px; color: var(--muted); line-height: 1.15; }
.tierpip.ready { border-color: var(--gold); box-shadow: 0 0 14px rgba(242,193,78,.35); } .tierpip.ready b { background: rgba(242,193,78,.35); color: #fff; }
.tierpip.got { border-color: var(--c); } .tierpip.got b { background: var(--c); color: #120a20; }
.mdone { font: 900 20px var(--font-title); color: #ffe08a; letter-spacing: .12em; margin: 4px 0 12px; text-shadow: 0 0 18px rgba(255,210,110,.6); }
.mnext { color: var(--muted); font-size: 14px; margin: 2px 0 12px; }
.mast-main #mClaim { margin-bottom: 12px; }
.mchal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mchal .quest { grid-template-columns: 1fr 28px; padding: 10px 12px; margin-bottom: 8px; }
.mchal .quest b { font-size: 13.5px; }
.mtitles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mtitles .chip { appearance: none; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); border-radius: 99px; padding: 6px 12px; font: 700 13px var(--font-ui); cursor: pointer; }
.mtitles .chip.on { border-color: var(--gold); background: rgba(242,193,78,.2); color: #ffe08a; }
.mnote { font-size: 12.5px; margin: 10px 0 0; }
.shardbar .albumsbtn { margin-left: auto; }
#albums .top h1 { flex: none; }
.albsum { color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; }
.fragpill .fr { font-size: 18px; }
.albums-lead { text-align: center; max-width: 1100px; margin: 0 auto 16px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.albums-lead b { color: #ffe08a; }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 18px; max-width: 1560px; margin: 0 auto; }
.album { border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--d) 55%, #0e0820), rgba(12,6,28,.9)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); display: flex; flex-direction: column; }
.album.ready { border-color: var(--gold); box-shadow: 0 0 26px rgba(242,193,78,.35); }
.album.done { border-color: var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); }
.ahead { position: relative; height: 86px; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 16px; background: #1a0f33 50% 34% / 175% auto no-repeat; }
.ahead::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,5,24,.92) 0%, rgba(10,5,24,.55) 60%, rgba(10,5,24,.3)); }
.album:not(.done) .ahead { filter: saturate(.55); }
.ahead > * { position: relative; }
.ahead span { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); font-weight: 800; }
.ahead b { font-family: var(--font-title); font-size: 22px; }
.ahead em { font-style: normal; font: 900 20px var(--font-title); color: #ffe08a; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px 16px 6px; }
.aslot { position: relative; aspect-ratio: 5 / 7; border-radius: 10px; }
.aslot .card { position: relative; width: 100%; height: 100%; }
.aslot.own .card:hover { transform: translateY(-6px) scale(1.04); z-index: 3; }
.aslot.miss { cursor: pointer; border: 2px dashed color-mix(in srgb, var(--c) 45%, transparent); overflow: hidden; background: rgba(0,0,0,.3); }
.aslot .ghost { position: absolute; inset: 0; background: center / cover; filter: grayscale(1) brightness(.28) blur(1px); }
.aslot .need { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; text-align: center; }
.aslot .need b { font: 700 12px/1.2 var(--font-card); color: #d8ccef; }
.aslot .need span { font: 800 12px var(--font-ui); padding: 3px 8px; border-radius: 99px; background: rgba(12,6,28,.9); border: 1px solid var(--line); color: var(--muted); }
.aslot .need span.can { color: #ffe08a; border-color: rgba(242,193,78,.6); }
.aslot.miss:hover { border-color: var(--gold); }
.album.done .slots { padding-top: 18px; }
.album.done .aslot { transform: rotate(calc((var(--i) - 2) * 4deg)) translateY(calc(max(var(--i) - 2, 2 - var(--i)) * 5px)); }
.afoot { padding: 6px 16px 14px; min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.alore { margin: 0; font: 15px/1.5 var(--font-card); color: #eee2ff; }
.ateaser { margin: 0; font: italic 14px var(--font-card); color: #d8ccef; } .arew { font-size: 12.5px; color: var(--muted); }
.fillbox { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; text-align: left; }
.fillbox .fc { position: relative; width: 170px; height: 238px; } .fillbox .fc .card { position: relative; width: 170px; height: 238px; }
.fillbox .lead { text-align: left; margin: 6px 0; }
#choiceModal { z-index: 995; }
#choiceModal .box { max-width: 1000px; }
#choiceModal h2 { margin-bottom: 4px; }
.chsub { color: var(--muted); margin: 0 0 14px; }
.chopts { display: flex; gap: 26px; justify-content: center; margin: 6px 0 20px; }
.chopt { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 220px; padding: 10px; border-radius: 16px; border: 2px solid transparent; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1.3), border-color .2s, background .2s; }
.chopt:hover { transform: translateY(-6px); }
.chopt .cf { position: relative; width: 200px; height: 280px; } .chopt .cf .card { position: relative; width: 200px; height: 280px; }
.chopt b { font-family: var(--font-card); font-size: 15px; line-height: 1.2; } .chopt em { font-style: normal; font-size: 12px; color: var(--muted); }
.chopt.sel { border-color: var(--gold); background: rgba(242,193,78,.12); box-shadow: 0 0 30px rgba(242,193,78,.35); transform: translateY(-8px); }
.chmore { margin-top: 10px; font-size: 13px; color: #ffe08a; }
.story-reward .rar, .chopt .rar { display: inline-block; padding: 3px 10px; border-radius: 99px; font: 800 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #120a20; }
.pill.progpill { font: 700 14px var(--font-ui); color: #ffe7b0; border-color: rgba(242,193,78,.45); }
.pill.progpill.k-mastery { color: #d9c2ff; } .pill.progpill.k-choice { color: #7dffb0; }
body.mobile .mast { grid-template-columns: 330px 1fr; } body.mobile .mtxt b { font-size: 21px; } body.mobile .mtxt span { font-size: 16px; }
body.mobile .mast-main h2 { font-size: 40px; } body.mobile .mtitle, body.mobile .mnext { font-size: 19px; } body.mobile .tierpip span { font-size: 14px; }
body.mobile .mchal .quest b { font-size: 18px; } body.mobile .mchal .quest span { font-size: 15px; } body.mobile .mnote { font-size: 16px; }
body.mobile .albums { grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)); }
body.mobile .albums-lead { font-size: 19px; } body.mobile .ahead b { font-size: 28px; } body.mobile .ahead span { font-size: 14px; }
body.mobile .aslot .need b { font-size: 15px; } body.mobile .aslot .need span { font-size: 16px; } body.mobile .alore, body.mobile .ateaser { font-size: 19px; } body.mobile .arew { font-size: 16px; }
body.mobile .chopt b { font-size: 19px; } body.mobile .chopt em, body.mobile .chsub { font-size: 17px; } body.mobile .chmore { font-size: 18px; }
body.mobile .pill.progpill { font-size: 20px; }
body.mobile #sheet .box.wide { width: 1300px; max-width: 1300px; }
/* css/cosmetics.css */
#game.lcb-on { background: #07050d; }
#game.lcb-on::before, #game.lcb-on .motes { display: none; }
.lcb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lcb > * { position: absolute; }
.lcb-bg, .lcb-fx, .lcb-var { inset: 0; }
.lcb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lcb:not(.lcb-default)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 42% 46% at 50% 50%, rgba(4,2,10,.5), rgba(4,2,10,.18) 70%, transparent 100%); }
.lcb-lanes { top: 0; bottom: 0; left: calc(50% - 470px); width: 900px; z-index: 1;
background: linear-gradient(180deg, transparent 0 80px, rgba(5,3,12,.5) 112px 300px, rgba(5,3,12,.22) 330px 470px, rgba(5,3,12,.5) 500px 700px, transparent 740px);
-webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.lcb-edge { top: 0; bottom: 0; width: 240px; }
.lcb-l { left: 0; } .lcb-r { right: 0; }
.lcb-hall { fill: #05060d; stroke: #c3d0ff; stroke-width: 2.5; stroke-opacity: 0; animation: lcbRim 11s infinite; }
.lcb-hall .lcb-lit rect { fill: #e8b560; opacity: .16; stroke: none; }
.lcb-clock { fill: #171c30 !important; stroke: #6b7396; }
.lcb-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 72% 0%, rgba(205,218,255,.55), rgba(120,140,220,.14) 60%, transparent); opacity: 0; animation: lcbFlash 11s infinite; }
.lcb-bolt { fill: #e6ecff; opacity: 0; animation: lcbFlash 11s infinite; filter: drop-shadow(0 0 10px #9fb4ff); }
@keyframes lcbFlash { 0%, 86% { opacity: 0; } 87% { opacity: .95; } 88% { opacity: .12; } 89.5% { opacity: .7; } 92%, 100% { opacity: 0; } }
@keyframes lcbRim { 0%, 86% { stroke-opacity: 0; } 87% { stroke-opacity: .95; } 88% { stroke-opacity: .2; } 89.5% { stroke-opacity: .75; } 93%, 100% { stroke-opacity: 0; } }
.lcb-window { position: absolute; left: 10px; top: 90px; width: 220px; height: 720px; opacity: .8; }
.lcb-r .lcb-window { left: auto; right: 10px; }
.lcb-rain, .lcb-drops { position: absolute; left: 22px; right: 22px; top: 22px; bottom: 22px; border-radius: 92px 92px 0 0; }
.lcb-rain { background: linear-gradient(180deg, rgba(38,50,92,.4), rgba(18,24,48,.55)), repeating-linear-gradient(100deg, transparent 0 14px, rgba(170,190,255,.2) 14px 15px, transparent 15px 31px);
background-size: 100% 100%, 100% 180px; animation: lcbRain 1.1s linear infinite; }
.lcb-rain.r2 { background: repeating-linear-gradient(96deg, transparent 0 22px, rgba(190,205,255,.14) 22px 23px, transparent 23px 47px); background-size: 100% 260px; animation: lcbRain2 1.7s linear infinite; }
.lcb-drops { background: radial-gradient(circle at 30% 30%, rgba(210,220,255,.45) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(210,220,255,.35) 0 1.5px, transparent 2.5px); background-size: 46px 70px, 62px 90px; opacity: .45; }
@keyframes lcbRain { to { background-position: 0 0, -32px 180px; } }
@keyframes lcbRain2 { to { background-position: -48px 260px; } }
.lcb-brick { background: linear-gradient(180deg, #180d13, #0f080c); }
.lcb-brick::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,190,140,.035) 0 2px, transparent 2px 30px), repeating-linear-gradient(90deg, rgba(255,190,140,.025) 0 2px, transparent 2px 64px); }
.lcb-corner { width: 240px; height: 290px; opacity: .8; }
.lcb-corner.tl { left: 0; top: -60px; } .lcb-corner.tr { right: 0; top: -60px; } .lcb-corner.bl { left: 0; bottom: -10px; } .lcb-corner.br { right: 0; bottom: -10px; }
.lcb-press { width: 100%; height: 100%; } .lcb-press.flip { transform: scaleX(-1); }
.lcb-roller { transform-box: fill-box; transform-origin: 50% 50% !important; animation: lcbSpin 9s linear infinite; }
.lcb-roller.rev { animation-direction: reverse; animation-duration: 6s; }
@keyframes lcbSpin { to { transform: rotate(360deg); } }
.lcb-pages { width: 120px; height: 90px; }
.lcb-pages.a { left: 236px; bottom: 26px; } .lcb-pages.b { right: 236px; top: 30px; transform: rotate(180deg); }
.lcb-pages i { position: absolute; left: 0; width: 110px; height: 12px; border-radius: 2px; background: linear-gradient(#efe3c6, #cbbb95); box-shadow: 0 1px 0 rgba(0,0,0,.45); opacity: .5; animation: lcbPage .6s ease-out; }
@keyframes lcbPage { from { transform: translate(40px, -60px) rotate(18deg); opacity: 0; } }
.lcb-crossroads { --dawn: 0; }
.lcb-crossroads .lcb-bg { filter: brightness(calc(.74 + var(--dawn) * .36)); transition: filter 3s; }
.lcb-sky { position: absolute; inset: 0; }
.lcb-sky.night { background: linear-gradient(180deg, #05071a, #0e1233 44%, #1b1d40 49%, #07060f 51%); }
.lcb-sky.dawn { background: linear-gradient(180deg, #1b2552 0%, #4d3a74 28%, #b0607a 43%, #f09a62 48.5%, #1a1426 51%, #0b0914 100%); opacity: var(--dawn); transition: opacity 3s; }
.lcb-sun { position: absolute; left: 50%; top: 0; width: 900px; height: 500px; transform: translate(-50%, 0); background: radial-gradient(ellipse 50% 40% at 50% 88%, rgba(255,200,120,.55), transparent 70%); opacity: calc(var(--dawn) * .9); transition: opacity 3s; }
.lcb-stars { opacity: calc(1 - var(--dawn)); transition: opacity 3s; }
.lcb-road { fill: #231c33; opacity: .75; }
.lcb-fog { left: -10%; right: -10%; height: 440px; bottom: 0; transition: opacity 3s; animation: lcbFog 70s ease-in-out infinite alternate;
background: radial-gradient(ellipse 18% 38% at 8% 62%, rgba(205,210,235,.4), transparent 70%), radial-gradient(ellipse 20% 34% at 92% 58%, rgba(205,210,235,.4), transparent 70%), radial-gradient(ellipse 30% 30% at 50% 78%, rgba(205,210,235,.16), transparent 70%);
opacity: calc(.95 - var(--dawn) * .88); }
.lcb-fog.f2 { bottom: 200px; height: 320px; animation-duration: 95s; animation-direction: alternate-reverse; opacity: calc(.7 - var(--dawn) * .7); }
@keyframes lcbFog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.lcb-pulse { fill: #aef0ff; }
.lcb-litwin { opacity: .8; }
.lcb-shore { left: 0; top: 0; width: 4800px; height: 900px; animation: lcbShore 170s linear infinite; }
@keyframes lcbShore { to { transform: translateX(-1600px); } }
.lcb-shelf { width: 230px; overflow: hidden; opacity: .7;
background: repeating-linear-gradient(0deg, #1d1236 0 8px, transparent 8px 150px), repeating-linear-gradient(90deg, rgba(90,60,120,.35) 0 14px, rgba(60,40,90,.25) 14px 22px, rgba(110,70,60,.3) 22px 34px, transparent 34px 37px);
-webkit-mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.lcb-drift { position: absolute; left: 34px; right: 34px; top: 0; animation: lcbDrift 140s linear infinite; }
.lcb-r .lcb-drift { animation-direction: reverse; }
@keyframes lcbDrift { to { transform: translateY(-50%); } }
.lcb-frame { height: 200px; margin-bottom: 50px; border: 8px solid #3a2a18; outline: 2px solid #8a6a2a; background: #120c08; box-shadow: 0 8px 20px rgba(0,0,0,.7); overflow: hidden; }
.lcb-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: sepia(.55) brightness(.5) contrast(1.05); display: block; }
.lcb-frame.map { background: linear-gradient(135deg, #d9c79a, #a8905c); filter: brightness(.5) sepia(.3); }
.lcb-frame.map svg { width: 100%; height: 100%; }
.lcbv-nightfall-lighting .lcb-var { background: linear-gradient(180deg, rgba(10,22,70,.45), rgba(4,8,30,.5)); mix-blend-mode: multiply; }
.lcbv-nightfall-lighting .lcb-bg { filter: saturate(.7) hue-rotate(12deg); }
.lcb-particles { position: absolute; top: 0; bottom: 0; width: 230px; }
.lcb-particles.l { left: 0; -webkit-mask: linear-gradient(90deg, #000 45%, transparent); mask: linear-gradient(90deg, #000 45%, transparent); }
.lcb-particles.r { right: 0; -webkit-mask: linear-gradient(270deg, #000 45%, transparent); mask: linear-gradient(270deg, #000 45%, transparent); }
.lcbv-first-snow .lcb-particles { background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 2px, transparent 3px), radial-gradient(circle, rgba(235,242,255,.6) 0 1.4px, transparent 2.4px);
background-size: 70px 90px, 46px 60px; background-position: 0 0, 20px 30px; animation: lcbSnow 11s linear infinite; }
@keyframes lcbSnow { to { background-position: 70px 900px, 46px 900px; } }
.lcbv-autumn-leaves .lcb-particles { background-image: radial-gradient(ellipse 5px 2.5px, #d9722e 90%, transparent), radial-gradient(ellipse 4px 2px, #b8452a 90%, transparent), radial-gradient(ellipse 4px 2.2px, #e3a53a 90%, transparent);
background-size: 110px 150px, 80px 110px, 130px 180px; background-position: 0 0, 40px 20px, 70px 90px; opacity: .8; animation: lcbLeaves 16s linear infinite; }
@keyframes lcbLeaves { to { background-position: 110px 900px, -80px 880px, 130px 900px; } }
.lcbv-gilded-trim .lcb-var { box-shadow: inset 0 0 0 3px rgba(242,193,78,.4), inset 0 0 0 12px rgba(0,0,0,.25), inset 0 0 0 14px rgba(242,193,78,.2); }
.lcb-orn { position: absolute; width: 110px; height: 110px; opacity: .65; }
.lcb-orn.tl { left: 8px; top: 8px; } .lcb-orn.tr { right: 8px; top: 8px; transform: scaleX(-1); } .lcb-orn.bl { left: 8px; bottom: 8px; transform: scaleY(-1); } .lcb-orn.br { right: 8px; bottom: 8px; transform: scale(-1); }
body.fx-low .lcb *, .lcb-still *, body.fx-low .lcb *::before, body.fx-low .lcb *::after { animation: none !important; transition: none !important; }
body.fx-low .lcb-pulses, .lcb-still .lcb-pulses { display: none; }
body.theme-midnight .lcb { filter: brightness(.72) saturate(.85); }
body.theme-midnight #game.lcb-on { background: #000; }
.lcb-preview { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #120a26; flex: none; }
.lcb-preview-in { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.lcb-default-bg { background: radial-gradient(ellipse at 50% 50%, rgba(120,70,220,.16), transparent 60%), linear-gradient(180deg, #120a26, #1a0f35 48%, #1a0f35 52%, #120a26); }
.lcb-ghost i { position: absolute; width: 120px; height: 168px; border-radius: 10px; border: 3px dashed rgba(190,160,255,.28); background: rgba(255,255,255,.025); }
.cz { position: relative; display: inline-block; flex: none; pointer-events: none; }
.cz-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.cz-svg g, .cz-svg path, .cz-svg ellipse { transform-box: fill-box; }
.cz-head { transform-origin: 50% 90%; transition: transform .3s; }
.cz-eye { transform-origin: 50% 50%; animation: czBlink 4.6s infinite; }
@keyframes czBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.cz-ink-raven .cz-head { transform-origin: 80% 80%; animation: czTilt 5s ease-in-out infinite; }
@keyframes czTilt { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 85% { transform: rotate(6deg); } }
.cz-scrap { opacity: 0; transition: opacity .2s; }
.has-scrap .cz-scrap { opacity: 1; }
.cz-comet-fox .cz-tail { transform-origin: 0% 100%; animation: czWag 3s ease-in-out infinite; }
.cz-comet-fox .cz-ear { transform-origin: 50% 100%; animation: czEar 6s ease-in-out infinite; }
@keyframes czWag { 50% { transform: rotate(-9deg); } }
@keyframes czEar { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } }
.cz-gear { transform-origin: 50% 50% !important; animation: czSpin 7s linear infinite; }
@keyframes czSpin { to { transform: rotate(360deg); } }
.cz-lens { filter: drop-shadow(0 0 3px #6fd3ff); }
.cz-pip-cat .cz-body { transform-origin: 50% 100%; animation: czBreathe 3.4s ease-in-out infinite; }
@keyframes czBreathe { 50% { transform: scaleY(1.05); } }
.cz-eye-open { display: none; }
.cz-zz text { fill: #cbd6ff; font: 700 12px var(--font-title); opacity: 0; animation: czZ 3.6s infinite; }
.cz-zz text:nth-child(2) { animation-delay: 1.2s; } .cz-zz text:nth-child(3) { animation-delay: 2.4s; }
@keyframes czZ { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -8px); } }
.cz-morrow-moth .cz-wing-l { transform-origin: 100% 50% !important; animation: czFlap 2.6s ease-in-out infinite; }
.cz-morrow-moth .cz-wing-r { transform-origin: 0% 50% !important; animation: czFlap 2.6s ease-in-out infinite; }
@keyframes czFlap { 50% { transform: scaleX(.78); } }
.cz-morrow-moth { animation: czHover 4s ease-in-out infinite; }
@keyframes czHover { 50% { transform: translateY(-6px); } }
.cz-glow { opacity: .1; transition: opacity 1s; }
.cz-glowing .cz-glow { opacity: 1; animation: czGlow 2.2s ease-in-out infinite; }
.cz-flare .cz-glow { opacity: .8; }
@keyframes czGlow { 50% { opacity: .55; } }
.cz-glowing .cz-svg { filter: drop-shadow(0 0 14px rgba(255,211,110,.9)); }
.cz-lantern-glow { animation: czGlow 2.4s ease-in-out infinite; }
.hue-ember .cz-svg { filter: hue-rotate(-28deg) saturate(1.5) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-frost .cz-svg { filter: hue-rotate(185deg) saturate(.8) brightness(1.15) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-verdant .cz-svg { filter: hue-rotate(80deg) saturate(1.2) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-gilded .cz-svg { filter: sepia(1) saturate(3) hue-rotate(-8deg) brightness(1.12) drop-shadow(0 0 8px rgba(242,193,78,.6)); }
.hue-shadow .cz-svg { filter: brightness(.55) contrast(1.25) saturate(.6) drop-shadow(0 0 8px rgba(168,107,255,.6)); }
.hue-lunar .cz-svg { filter: grayscale(1) brightness(1.45) drop-shadow(0 0 8px rgba(220,230,255,.6)); }
.hue-tide .cz-svg { filter: hue-rotate(150deg) saturate(.9) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-ember.cz-ink-raven .cz-svg, .hue-frost.cz-ink-raven .cz-svg, .hue-verdant.cz-ink-raven .cz-svg, .hue-tide.cz-ink-raven .cz-svg { filter: sepia(.5) hue-rotate(var(--rh, 0deg)) saturate(2) brightness(1.5) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-ember.cz-ink-raven { --rh: -40deg; } .hue-frost.cz-ink-raven { --rh: 170deg; } .hue-verdant.cz-ink-raven { --rh: 70deg; } .hue-tide.cz-ink-raven { --rh: 140deg; }
.pose-proud .cz-head { transform: translateY(-4px) rotate(-6deg); }
.pose-proud .cz-svg { transform: scale(1.04); }
.pose-curious .cz-head { transform: rotate(13deg); }
.pose-proud.cz-ink-raven .cz-head, .pose-curious.cz-ink-raven .cz-head { animation: none; }
.pose-sleepy .cz-eye { animation: none; transform: scaleY(.35); }
.pose-sleepy .cz-svg { animation: czBreathe 5s ease-in-out infinite; transform-origin: 50% 100%; }
.cz-hop { animation: czHop .8s cubic-bezier(.3,1.6,.5,1); }
.cz-cheer { animation: czHop .8s cubic-bezier(.3,1.6,.5,1) 4; }
@keyframes czHop { 30% { transform: translateY(-18px); } 60% { transform: translateY(0); } 75% { transform: translateY(-6px); } }
.cz-sad { filter: saturate(.6) brightness(.85); }
.cz-sad .cz-head { animation: none; transform: rotate(14deg) translateY(4px); }
.cz-look .cz-head { animation: none; transform: rotate(-30deg); }
.cz-look .cz-lens { fill: #b8f3ff; }
.cz-startle { animation: czJump .7s ease-out; }
.cz-startle .cz-body { animation: none; transform: scale(1.08, 1.2); }
.cz-startle .cz-eye-open { display: inline; } .cz-startle .cz-eye-closed, .cz-startle .cz-zz { display: none; }
@keyframes czJump { 20% { transform: translateY(-22px) rotate(-4deg); } 60% { transform: translateY(0); } }
.cz-flinch { animation: czShake .5s; }
@keyframes czShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cz-peck .cz-head { animation: czPeck .5s; }
@keyframes czPeck { 40% { transform: rotate(-30deg) translate(-3px, 4px); } }
.cz-flying .cz-wing { animation: czFlapFast .14s infinite alternate; transform-origin: 30% 30%; }
@keyframes czFlapFast { to { transform: scaleY(-.6); } }
.czb { position: absolute; width: 112px; height: 112px; z-index: 1; pointer-events: none; }
.czb .cz { width: 112px; height: 112px; }
.czb-comet-fox .cz { transform: translateY(34px); transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.czb-comet-fox .cz.cz-peek { transform: translate(34px, -16px) rotate(6deg); }
.czb-comet-fox .cz.cz-cheer, .czb-comet-fox .cz.cz-sad { transform: translate(34px, -16px); }
.czb-pip-cat { top: 760px !important; }
body.fx-low .cz *, body.fx-low .cz { animation: none !important; }
.cz-hubpet { position: absolute !important; left: 380px; top: 500px; z-index: 6; pointer-events: auto !important; cursor: pointer; }
.cz-overpet { position: absolute !important; left: -80px; bottom: -34px; }
.cz-packpet { position: absolute !important; left: 44px; bottom: 120px; z-index: 5; }
body.mobile .cz-hubpet { width: 150px !important; height: 150px !important; left: 350px; top: 470px; }
.cc { position: relative; width: 520px; height: 140px; border-radius: 16px; flex: none; color: #f3ecff; text-align: left; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.cc-sm { width: 390px; height: 100px; border-radius: 12px; }
.cc-lg { width: 660px; height: 180px; border-radius: 20px; }
.bn { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; border: 1px solid rgba(242,193,78,.4); }
.cc-portrait { position: absolute; left: 12px; top: 12px; bottom: 12px; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: 50% 16%; border: 3px solid var(--c, #f2c14e); box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 18px var(--c, #a86bff); }
.cc-text { position: absolute; left: 140px; right: 130px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.cc-text b { font: 900 26px var(--font-title); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-title { font: italic 700 17px var(--font-card); color: #ffd98a; }
.cc-text small { font-size: 13px; color: #d8ccef; letter-spacing: .06em; }
.cc-sm .cc-text { left: 96px; right: 90px; } .cc-sm .cc-text b { font-size: 19px; } .cc-sm .cc-title { font-size: 14px; } .cc-sm .cc-text small { font-size: 11px; }
.cc-lg .cc-text { left: 184px; right: 170px; } .cc-lg .cc-text b { font-size: 34px; } .cc-lg .cc-title { font-size: 22px; } .cc-lg .cc-text small { font-size: 16px; }
.cc-art { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #f2c14e; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.2), rgba(20,10,40,.85)); border: 1px solid rgba(242,193,78,.6); }
.cc-art .lcs-icon { width: 30px; height: 30px; }
.cc-lg .cc-art { width: 58px; height: 58px; } .cc-lg .cc-art .lcs-icon { width: 40px; height: 40px; }
.cc > .cz { position: absolute; right: -8px; bottom: -10px; }
.bn-plain { background: linear-gradient(120deg, #2a1552, #140a2a 60%, #231040); }
.bn-plain::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 80% 50%, rgba(242,193,78,.05) 0 1px, transparent 1px 22px); }
.bn-wax .bn-paper { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, #3b2a1a 0%, #2a1c10 60%, #1a1008 100%); }
.bn-wax .bn-paper::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(232,200,140,.35); border-radius: 12px; background: repeating-linear-gradient(0deg, rgba(232,200,140,.05) 0 1px, transparent 1px 7px); }
.bn-seal { position: absolute; right: 92px; top: 50%; width: 70px; height: 70px; margin-top: -35px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e0564a, #9a1c16 60%, #6a0e0a); box-shadow: 0 0 0 5px rgba(154,28,22,.55), 0 6px 14px rgba(0,0,0,.6); animation: bnStamp 6s cubic-bezier(.3,1.5,.5,1) infinite; }
.bn-seal svg { width: 100%; height: 100%; }
@keyframes bnStamp { 0%, 70% { transform: scale(1) rotate(0); } 76% { transform: scale(1.5) rotate(-18deg); opacity: .5; } 82% { transform: scale(.94) rotate(4deg); opacity: 1; } 88%, 100% { transform: scale(1); } }
.cc-sm .bn-seal { width: 50px; height: 50px; margin-top: -25px; right: 64px; } .cc-lg .bn-seal { width: 92px; height: 92px; margin-top: -46px; right: 120px; }
.bn-courier { background: linear-gradient(180deg, #070b26, #16163a 70%, #221a30); }
.bn-stars { position: absolute; inset: 0; background: radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 34% 12%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 58% 28%, #fff 0 1px, transparent 2px), radial-gradient(circle at 76% 14%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 88% 36%, #fff 0 1px, transparent 2px), radial-gradient(circle at 46% 42%, #fff 0 .8px, transparent 1.6px); animation: bnTwinkle 3s ease-in-out infinite alternate; }
@keyframes bnTwinkle { from { opacity: .5; } to { opacity: 1; } }
.bn-road { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; }
.bn-lantern { position: absolute; right: 16%; bottom: 20%; width: 18px; height: 18px; border-radius: 50%; background: #ffd36e; box-shadow: 0 0 20px 10px rgba(255,190,90,.55), 0 0 60px 30px rgba(255,160,60,.25); animation: bnLamp 2.6s ease-in-out infinite; }
@keyframes bnLamp { 50% { box-shadow: 0 0 14px 6px rgba(255,190,90,.4), 0 0 44px 20px rgba(255,160,60,.18); } }
.bn-inventor { background: #0c2750; }
.bn-grid { position: absolute; inset: -40px; background: repeating-linear-gradient(0deg, rgba(160,210,255,.14) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(160,210,255,.14) 0 1px, transparent 1px 20px), repeating-linear-gradient(0deg, rgba(160,210,255,.22) 0 1px, transparent 1px 100px); animation: bnGrid 12s linear infinite; }
@keyframes bnGrid { to { transform: translate(40px, 20px); } }
.bn-gear { position: absolute; fill: none; stroke: #e8c06a; stroke-width: 3; opacity: .7; animation: czSpin 12s linear infinite; }
.bn-gear.g1 { right: 90px; top: 50%; width: 110px; height: 110px; margin-top: -55px; }
.bn-gear.g2 { right: 40px; top: 6px; width: 60px; height: 60px; animation-direction: reverse; animation-duration: 7s; }
.bn-scholar { background: #1a1020; }
.bn-shelves { position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(0deg, #3a2414 0 6px, transparent 6px 46px), repeating-linear-gradient(90deg, #6b2a2a 0 10px, #2a4a6b 10px 18px, #6b5a2a 18px 30px, #2a5a3a 30px 38px, #4a2a6b 38px 50px, transparent 50px 53px); }
.bn-book { position: absolute; right: 70px; top: 50%; width: 110px; height: 70px; margin-top: -35px; perspective: 300px; }
.bn-book i { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: linear-gradient(90deg, #d9c9a2, #efe3c6); border-radius: 4px 0 0 4px; box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.bn-book i::after { content: ""; position: absolute; left: 100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #efe3c6, #d9c9a2); border-radius: 0 4px 4px 0; }
.bn-book .bn-page { left: 50%; border-radius: 0 4px 4px 0; transform-origin: 0 50%; background: repeating-linear-gradient(0deg, #efe3c6 0 7px, #d8caa6 7px 8px); animation: bnTurn 5s ease-in-out infinite; box-shadow: none; }
.bn-book .bn-page::after { display: none; }
@keyframes bnTurn { 0%, 55% { transform: rotateY(0); } 80%, 100% { transform: rotateY(-178deg); } }
.bn-challenger { background: linear-gradient(135deg, #3d0d14, #1b080d 50%, #2e1418); }
.bn-steel { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%); background-size: 260% 100%; animation: bnSheen 6s ease-in-out infinite; }
@keyframes bnSheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bn-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.bn-crack path { fill: none; stroke: #ffb38a; stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff5a3a); animation: bnCrack 3.6s ease-in-out infinite; }
@keyframes bnCrack { 50% { stroke-opacity: .45; } }
.lcs-wrap { position: absolute; top: 96px; left: 24px; right: 24px; bottom: 112px; display: flex; gap: 18px; }
.lcs-rail { width: 214px; flex: none; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; touch-action: pan-y; padding-bottom: 10px; }
.lcs-rail button { text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; background: rgba(255,255,255,.035); color: #cbb9ee; font: 700 15px var(--font-ui); cursor: pointer; }
.lcs-rail button:hover { background: rgba(168,107,255,.14); color: #fff; }
.lcs-rail button.on { background: linear-gradient(90deg, rgba(168,107,255,.38), rgba(90,40,170,.18)); color: #fff; border-color: var(--line); }
.lcs-rail button.lock { color: #8f82ad; }
.lcs-main { flex: 1; min-width: 0; overflow-y: auto; touch-action: pan-y; padding: 4px 6px 30px; }
.lcs-intro { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 2px 0 14px; max-width: 980px; }
.lcs-small { color: var(--muted); font-size: 13px; }
.lcs-small a, .lcs-how a { color: #ffd98a; }
.lcs-sub { font-family: var(--font-title); letter-spacing: .1em; margin: 22px 0 10px; }
.lcs-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.lcs-sum span { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #d8ccef; }
.lcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(274px, 1fr)); gap: 16px; }
.lcs-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: left; transition: transform .2s, border-color .2s; min-height: 250px; }
.lcs-tile:hover { transform: translateY(-3px); border-color: rgba(242,193,78,.6); }
.lcs-tile.eq { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.lcs-tile.locked .lcs-prev > * { filter: grayscale(.7) brightness(.55); }
.lcs-prev { height: 150px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(168,107,255,.2), rgba(10,5,24,.65)); overflow: hidden; position: relative; }
.lcs-prev .cc-sm { transform: scale(.62); }
.lcs-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lcs-meta b { font: 800 16px var(--font-title); letter-spacing: .03em; }
.lcs-rar { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--r); border: 1px solid var(--r); border-radius: 99px; padding: 2px 8px; }
.lcs-new { font-style: normal; font: 800 10px var(--font-ui); letter-spacing: .12em; background: #ff4a3a; color: #fff; border-radius: 99px; padding: 3px 8px; }
.lcs-kind { color: var(--muted); font-size: 13px; letter-spacing: .08em; margin-left: 6px; }
.lcs-foot { margin-top: auto; }
.lcs-price { display: flex; align-items: center; gap: 8px; }
.lcs-price b { display: inline-flex; align-items: center; gap: 6px; font: 900 17px var(--font-title); }
.lcs-price small { color: var(--muted); }
.lcs-price .coin, .lcs-price .gemicon { width: 18px; height: 18px; }
.lcs-owned { color: #7dffb0; font-weight: 800; font-style: normal; }
.lcs-earn { color: #cbb9ee; font-size: 13px; }
.gemicon { display: inline-block; width: 22px; height: 22px; background: linear-gradient(135deg, #c9f7ff, #4fb3ff 45%, #7a4dff); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 6px rgba(111,211,255,.8)); flex: none; }
.lcs-gems { color: #bfefff; }
.lcs-cardwrap .card { position: relative; width: 96px; height: 134px; }
.lcs-plaque { padding: 14px 22px; border-radius: 8px; background: linear-gradient(180deg, #d9b25a, #9a7424); color: #2a1a06; font: 900 18px var(--font-title); letter-spacing: .06em; text-align: center; box-shadow: inset 0 0 0 2px rgba(255,240,200,.5), 0 8px 18px rgba(0,0,0,.5); max-width: 90%; }
.lcs-plaque.small { padding: 8px 14px; font-size: 14px; }
.lcs-record { display: grid; place-items: center; gap: 8px; }
.lcs-record i { display: block; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, #f2c14e 0 13px, #1a1026 14px 16px, #0b0712 17px, #231a30 30px, #0b0712 32px, #1d1428 44px, #0b0712 46px); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.lcs-record span { font-size: 12px; color: var(--muted); }
.lcs-rec.spin .lcs-record i { animation: czSpin 3s linear infinite; }
.lcs-bundle { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lcs-bundle span { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: rgba(242,193,78,.14); border: 1px solid rgba(242,193,78,.4); }
.lcs-icon { width: 48px; height: 48px; color: #f2c14e; }
.lcs-icon.big { width: 96px; height: 96px; filter: drop-shadow(0 0 12px rgba(242,193,78,.45)); }
.lcs-sheet { display: grid; grid-template-columns: minmax(320px, 660px) 1fr; gap: 24px; text-align: left; align-items: start; }
.lcs-sprev .lcs-prev { height: auto; min-height: 300px; padding: 16px; }
.lcs-sinfo .lead { margin: 12px 0 !important; text-align: left; max-width: none !important; }
.lcs-how { color: #e9dcff; font-size: 15px; }
.lcs-list { margin: 8px 0; padding-left: 18px; color: #d8ccef; line-height: 1.6; }
.lcs-list li.got { color: #7dffb0; }
.lcs-actions { justify-content: flex-start !important; flex-wrap: wrap; margin-top: 14px; }
.lcs-prog { position: relative; height: 22px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); overflow: hidden; margin: 10px 0; }
.lcs-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7a4dff, #f2c14e); }
.lcs-prog span { position: relative; display: block; text-align: center; font: 800 12px/22px var(--font-ui); }
.lcs-prog.sm { height: 8px; margin: 6px 0 0; } .lcs-prog.sm span { display: none; }
.lcs-gemrow { display: flex; gap: 20px; flex-wrap: wrap; }
.lcs-gempack { width: 260px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.lcs-gempack b { font: 900 24px var(--font-title); color: #bfefff; }
.lcs-gempack span { color: var(--muted); font-size: 13px; }
.lcs-gempack .btn { min-width: 160px; font-size: 20px; }
.lcs-gemart { height: 90px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.lcs-gemart i { width: 40px; height: 40px; background: linear-gradient(135deg, #c9f7ff, #4fb3ff 45%, #7a4dff); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); filter: drop-shadow(0 0 10px rgba(111,211,255,.8)); }
.lcs-gemart i:nth-child(even) { transform: translateY(12px) scale(.8); }
.lcs-paynote { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(111,211,255,.08); border: 1px solid rgba(111,211,255,.3); color: #d8f4ff; max-width: 860px; }
.lcs-receipts { margin-top: 18px; max-width: 520px; }
.lcs-receipts h3 { font-family: var(--font-title); letter-spacing: .1em; }
.lcs-receipts div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); color: #d8ccef; }
.lcs-cardtop { display: flex; gap: 26px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.lcs-cardside .lead { text-align: left; }
.lcs-slots { display: flex; flex-direction: column; gap: 12px; }
.lcs-slot h4 { margin: 0 0 6px; font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lcs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lcs-chips button { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer; }
.lcs-chips button.on { background: rgba(242,193,78,.2); border-color: var(--gold); color: #fff4d6; }
.lcs-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.lcs-case { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 16px; text-align: center; color: var(--ink); cursor: default;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)), #1a0e2a; border: 1px solid rgba(242,193,78,.25); }
.lcs-case.own { cursor: pointer; }
.lcs-case.fav { border-color: var(--gold); box-shadow: 0 0 22px rgba(242,193,78,.3); }
.lcs-glass { width: 120px; height: 120px; display: grid; place-items: center; border-radius: 12px 12px 4px 4px; background: radial-gradient(ellipse at 50% 90%, rgba(150,30,50,.55), rgba(40,10,30,.6) 60%), linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 -10px 20px rgba(0,0,0,.5); }
.lcs-glass .lcs-icon { width: 72px; height: 72px; filter: drop-shadow(0 0 10px rgba(242,193,78,.5)); }
.lcs-case.locked .lcs-icon { color: #000; opacity: .55; filter: none; }
.lcs-case b { font: 800 15px var(--font-title); }
.lcs-case span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lcs-case em { font-style: normal; color: var(--gold); font-weight: 800; font-size: 12px; }
.lcs-scenehead { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.lcs-frag { display: flex; gap: 10px; align-items: center; color: #d8ccef; }
.lcs-frag b { font: 900 24px var(--font-title); color: #bfefff; }
.lcs-dio { display: grid; grid-template-columns: 560px 1fr; gap: 18px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.lcs-dio.ready { border-color: var(--gold); box-shadow: 0 0 24px rgba(242,193,78,.25); }
.lcs-pano { position: relative; height: 196px; display: flex; gap: 2px; border-radius: 12px; overflow: hidden; background: #0a0616; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.lcs-slice { flex: 1; position: relative; overflow: hidden; }
.lcs-slice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.lcs-slice.miss img { filter: grayscale(1) brightness(.1); }
.lcs-slice.miss span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 42px var(--font-title); color: rgba(210,190,255,.35); }
.lcs-dust, .lcs-ray { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lcs-dio.alive .lcs-slice img { animation: dioPan 16s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -3s); }
.lcs-dio.alive .lcs-ray { opacity: 1; background: linear-gradient(105deg, transparent 30%, rgba(255,230,170,.2) 45%, transparent 60%); background-size: 300% 100%; animation: dioRay 8s ease-in-out infinite; mix-blend-mode: screen; }
.lcs-dio.alive .lcs-dust { opacity: .8; background: radial-gradient(circle, rgba(255,240,200,.8) 0 1px, transparent 2px) 0 0 / 40px 50px, radial-gradient(circle, rgba(255,240,200,.5) 0 1px, transparent 2px) 20px 10px / 64px 70px; animation: dioDust 14s linear infinite; }
@keyframes dioPan { from { transform: scale(1.06); } to { transform: scale(1.16) translateY(-4%); } }
@keyframes dioRay { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes dioDust { to { background-position: 20px -500px, 50px -490px; } }
.lcs-dioinfo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lcs-dioinfo b { font: 900 20px var(--font-title); }
.lcs-dioinfo > span { color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.lcs-dioinfo p { margin: 4px 0; font-family: var(--font-card); font-size: 15.5px; line-height: 1.5; color: #e9dcff; }
.lcs-journals { display: flex; flex-direction: column; gap: 16px; }
.lcs-journal { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); }
.lcs-jhead { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.lcs-jav { width: 58px; height: 58px; border-radius: 50%; background-size: cover; background-position: 50% 16%; border: 2px solid var(--c); flex: none; }
.lcs-jhead b { display: block; font: 900 20px var(--font-title); }
.lcs-jhead span { color: var(--muted); font-size: 13px; }
.lcs-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lcs-page { padding: 12px 14px; border-radius: 10px; min-height: 120px; }
.lcs-page.open { background: linear-gradient(180deg, #efe3c6, #d9c9a2); color: #2a1a0c; box-shadow: inset 0 0 20px rgba(120,80,30,.3); }
.lcs-page.open h5 { margin: 0 0 6px; font: 900 15px var(--font-title); color: #5a2a10; }
.lcs-page.open p { margin: 0; font: 15px/1.45 var(--font-card); }
.lcs-page.shut { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #140c24; border: 1px dashed var(--line); color: var(--muted); }
.lcs-page.shut h5 { margin: 0 0 6px; font: 800 14px var(--font-title); }
.lcs-page.shut p { margin: 0; font-size: 13px; }
.lcs-records, .lcs-titles { display: flex; flex-direction: column; gap: 10px; }
.lcs-rec, .lcs-trow { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.lcs-rec .lcs-record i { width: 64px; height: 64px; }
.lcs-rec > div:nth-child(2), .lcs-tinfo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lcs-rec b { font: 800 16px var(--font-title); } .lcs-rec span, .lcs-tinfo span { color: var(--muted); font-size: 13px; }
.lcs-rec.locked, .lcs-trow.locked { opacity: .65; }
.lcs-rec.locked .lcs-record i { filter: grayscale(1) brightness(.4); }
.lcs-trow.on { border-color: var(--gold); }
.lcs-trow.locked .lcs-plaque { filter: grayscale(1) brightness(.5); }
.lcs-trow .lcs-plaque { min-width: 260px; }
.lcs-room { display: grid; grid-template-columns: 420px 1fr; gap: 22px; align-items: start; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.lcs-roomart svg { width: 100%; border-radius: 12px; display: block; }
.lcs-room.shut .lcs-roomart { filter: grayscale(1) brightness(.35); }
.lcs-roominfo h3 { font: 900 26px var(--font-title); margin: 0 0 6px; letter-spacing: .06em; }
.lcs-roominfo p { color: #d8ccef; }
.lcs-starter { position: absolute; left: 470px; bottom: 128px; width: 610px; z-index: 7; padding: 14px 16px; border-radius: 20px; background: rgba(14,8,32,.95); border: 1px solid rgba(242,193,78,.55); box-shadow: 0 24px 50px rgba(0,0,0,.6); animation: lcsRise .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes lcsRise { from { transform: translateY(30px); opacity: 0; } }
.lcs-sthead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.lcs-sthead b { display: block; font: 900 20px var(--font-title); color: #fff4d6; }
.lcs-sthead span { font-size: 13px; color: var(--muted); }
.lcs-strow { display: flex; gap: 8px; margin-top: 10px; }
.lcs-strow button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.lcs-strow button:hover { border-color: var(--gold); background: rgba(242,193,78,.1); }
.lcs-strow button b { font: 800 15px var(--font-title); }
.lcs-strow button span { font-size: 11px; color: var(--muted); text-align: center; }
.lcs-strow.big button span { font-size: 13px; line-height: 1.35; padding: 0 6px; }
.lcs-stpet { height: 104px; }
.lcs-vs { position: absolute; inset: 0; z-index: 996; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(ellipse at 50% 50%, rgba(10,5,24,.82), rgba(10,5,24,.45) 70%, transparent); animation: lcsFade .35s ease-out; transition: opacity .6s; }
.lcs-vs.out { opacity: 0; }
.lcs-vs .vs-a { animation: vsL .6s cubic-bezier(.2,1.2,.3,1); }
.lcs-vs .vs-b { animation: vsR .6s cubic-bezier(.2,1.2,.3,1); }
.lcs-vs .vs-mid { font: 900 92px var(--font-title); color: #fff4d6; text-shadow: 0 0 30px #a86bff, 0 6px 14px #000; }
@keyframes vsL { from { transform: translateX(-500px); opacity: 0; } }
@keyframes vsR { from { transform: translateX(500px); opacity: 0; } }
@keyframes lcsFade { from { opacity: 0; } }
.lcs-unlocks { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: -6px 0 16px; }
.lcs-unlocks > span { color: var(--muted); font-size: 14px; }
.lcs-unlocks button { padding: 6px 14px; border-radius: 99px; background: rgba(242,193,78,.16); border: 1px solid var(--gold); color: #fff4d6; font: 700 14px var(--font-ui); cursor: pointer; }
.lcs-unlocks em { font-style: normal; color: #bfefff; font-weight: 700; }
.lcs-overopp { margin: 0 auto 16px; }
.lcs-packdrop { position: absolute; left: 40px; top: 30px; z-index: 5; display: flex; flex-direction: column; gap: 8px; animation: lcsRise .5s 1.2s both; pointer-events: none; }
.lcs-packdrop span { padding: 8px 14px; border-radius: 99px; background: rgba(12,6,28,.85); border: 1px solid rgba(111,211,255,.5); color: #d8f4ff; font: 800 14px var(--font-ui); }
.lcs-cardsheet { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.cs-engraving .card .face .art { filter: grayscale(1) contrast(1.3) brightness(1.04) sepia(.28); }
.cs-engraving .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(20,34,26,.09) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; box-shadow: inset 0 0 0 1.2cqw rgba(40,60,50,.55); }
.cs-oil-portrait .card .face .art { filter: saturate(1.35) contrast(1.08) brightness(.97); }
.cs-oil-portrait .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
background: repeating-linear-gradient(0deg, rgba(90,60,20,.06) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(90,60,20,.05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 35%, transparent 58%, rgba(40,20,5,.32));
box-shadow: inset 0 0 0 1.4cqw #6b4a1a, inset 0 0 0 2.1cqw #c9a24e; }
.cs-newspaper-print .card .face .art { filter: grayscale(1) contrast(1.55) brightness(1.06); }
.cs-newspaper-print .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
background: radial-gradient(circle, rgba(0,0,0,.2) 0 .6px, transparent .9px) 0 0 / 3px 3px, rgba(238,228,200,.14); }
body.mobile .lcs-wrap { top: 108px; bottom: 172px; left: 20px; right: 20px; }
body.mobile .lcs-rail { width: 280px; }
body.mobile .lcs-rail button { font-size: 22px; padding: 20px 20px; }
body.mobile .lcs-intro, body.mobile .lcs-how, body.mobile .lcs-dioinfo p { font-size: 21px; }
body.mobile .lcs-small, body.mobile .lcs-case span, body.mobile .lcs-rec span, body.mobile .lcs-tinfo span, body.mobile .lcs-earn { font-size: 18px; }
body.mobile .lcs-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
body.mobile .lcs-tile { min-height: 320px; padding: 16px; }
body.mobile .lcs-prev { height: 190px; }
body.mobile .lcs-meta b, body.mobile .lcs-case b, body.mobile .lcs-rec b { font-size: 24px; }
body.mobile .lcs-price b { font-size: 26px; } body.mobile .lcs-price .coin, body.mobile .lcs-price .gemicon { width: 26px; height: 26px; }
body.mobile .lcs-rar { font-size: 14px; }
body.mobile .lcs-chips button { font-size: 20px; padding: 16px 22px; }
body.mobile .lcs-slot h4 { font-size: 16px; }
body.mobile .lcs-sum span { font-size: 16px; }
body.mobile .lcs-sheet { grid-template-columns: 520px 1fr; }
body.mobile .lcs-gempack { width: 320px; } body.mobile .lcs-gempack b { font-size: 32px; } body.mobile .lcs-gempack span { font-size: 18px; } body.mobile .lcs-gempack .btn { font-size: 28px; padding: 18px; }
body.mobile .lcs-paynote { font-size: 20px; }
body.mobile .lcs-cases { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
body.mobile .lcs-page.open p, body.mobile .lcs-page.shut p { font-size: 19px; }
body.mobile .lcs-page h5 { font-size: 20px !important; }
body.mobile .lcs-dio { grid-template-columns: 600px 1fr; }
body.mobile .lcs-dioinfo b { font-size: 26px; }
body.mobile .lcs-starter { width: 860px; bottom: 170px; left: 440px; }
body.mobile .lcs-sthead b { font-size: 28px; } body.mobile .lcs-sthead span { font-size: 18px; }
body.mobile .lcs-strow button { padding: 12px 6px; } body.mobile .lcs-strow button b { font-size: 22px; } body.mobile .lcs-strow button span { font-size: 16px; }
body.mobile .lcs-unlocks button, body.mobile .lcs-packdrop span { font-size: 20px; padding: 10px 18px; }
body.mobile .lcs-trow .lcs-plaque { min-width: 320px; }
.lcb-preview .lcb-lanes { opacity: .35; }
.lcb-preview .lcb::after { opacity: .45; }
.lcb-preview .lcb-crossroads { --dawn: .55; }
.cc-text b { font-size: calc(26px * min(1, 12 / var(--nl, 12))); line-height: 1.15; }
.cc-sm .cc-text b { font-size: calc(19px * min(1, 12 / var(--nl, 12))); }
.cc-lg .cc-text b { font-size: calc(34px * min(1, 12 / var(--nl, 12))); }
.cc-portrait.cc-medal { border: 0; background-size: 112%; background-position: 50% 50%; box-shadow: 0 6px 16px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--c, #a86bff) 45%, transparent); }
.lcs-medals { display: grid; grid-template-columns: repeat(auto-fill, 62px); gap: 10px; margin-top: 10px; max-width: 900px; }
.lcs-medal { appearance: none; width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 0; background: rgba(10,5,24,.6); cursor: pointer; position: relative;
box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: transform .25s var(--ease-back, cubic-bezier(.2,.9,.3,1.35)), box-shadow .2s, filter .2s; filter: saturate(.85) brightness(.9); }
.lcs-medal img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.lcs-medal:hover { transform: translateY(-4px) scale(1.06); filter: none; }
.lcs-medal.on { filter: none; transform: scale(1.08); box-shadow: 0 0 0 3px #f6d98a, 0 0 22px rgba(242,193,78,.7), 0 6px 14px rgba(0,0,0,.45); }
.lcs-medal.on::after { content: "\2713"; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 12px var(--font-ui); color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
body.mobile .lcs-medals { grid-template-columns: repeat(auto-fill, 88px); gap: 14px; } body.mobile .lcs-medal { width: 88px; height: 88px; }
.lcs-rail { gap: 5px; padding-right: 4px; }
.lcs-rail button { position: relative; padding: 13px 16px 13px 20px; border-radius: 12px; border: 1px solid rgba(232,186,90,.14); background: linear-gradient(180deg, rgba(30,17,58,.72), rgba(14,8,28,.78)); color: #cbb9ee;
transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out, ease-out); }
.lcs-rail button:hover { color: #fff; border-color: rgba(232,186,90,.4); transform: translateX(3px); background: linear-gradient(180deg, rgba(60,34,110,.8), rgba(24,13,48,.85)); }
.lcs-rail button.on { color: #fff4d6; border-color: rgba(232,186,90,.55); background: linear-gradient(90deg, rgba(120,70,210,.6), rgba(60,30,120,.45)); box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 18px rgba(120,60,220,.3); }
.lcs-rail button.on::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 0 8px rgba(242,193,78,.8); }
.lcs-intro { font-size: 14.5px; color: #cdbfe8; padding-left: 14px; border-left: 2px solid rgba(232,186,90,.45); }
.lcs-sum span { background: linear-gradient(180deg, rgba(10,6,22,.9), rgba(26,14,50,.85)); border-color: rgba(232,186,90,.3); font-weight: 700; letter-spacing: .04em; }
.lcs-grid { gap: 18px; }
.lcs-tile { position: relative; overflow: hidden; border-radius: 16px; padding: 12px 12px 14px; border: 1px solid rgba(232,186,90,.26);
background: linear-gradient(180deg, rgba(34,19,64,.9), rgba(14,8,28,.94)); box-shadow: 0 16px 34px rgba(0,0,0,.5);
transition: transform .3s var(--ease-back, cubic-bezier(.2,.9,.3,1.35)), border-color .25s, box-shadow .3s; }
.lcs-tile::before { content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: 12px; z-index: 2; opacity: .75;
background: linear-gradient(#e2b04a, #e2b04a) left top / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) left top / 1.5px 14px no-repeat,
linear-gradient(#e2b04a, #e2b04a) right top / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) right top / 1.5px 14px no-repeat,
linear-gradient(#e2b04a, #e2b04a) left bottom / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) left bottom / 1.5px 14px no-repeat,
linear-gradient(#e2b04a, #e2b04a) right bottom / 14px 1.5px no-repeat, linear-gradient(#e2b04a, #e2b04a) right bottom / 1.5px 14px no-repeat; }
.lcs-tile:hover { transform: translateY(-6px); border-color: #f6d98a; box-shadow: 0 24px 44px rgba(0,0,0,.6), 0 0 26px rgba(242,193,78,.3); }
.lcs-tile:active { transform: translateY(-2px) scale(.99); }
.lcs-prev { border-radius: 11px; border: 1px solid rgba(255,255,255,.06); background: radial-gradient(ellipse at 50% 30%, rgba(150,95,255,.28), rgba(10,5,24,.85) 75%); }
.lcs-prev > * { transition: transform .4s var(--ease-out, ease-out); }
.lcs-tile:hover .lcs-prev > * { transform: scale(1.04); }
.lcs-meta b { font-size: 16.5px; color: #fff4d6; }
.lcs-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(232,186,90,.14); }
.lcs-price { padding: 6px 14px; border-radius: 99px; background: rgba(8,4,18,.7); border: 1px solid rgba(232,186,90,.35); }
.lcs-owned { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(93,255,154,.1); border: 1px solid rgba(93,255,154,.4); font-size: 13px; letter-spacing: .06em; }
.lcs-tile.own .lcs-foot::after { content: "Tap to equip"; font: 600 12px var(--font-ui); color: var(--muted); }
.lcs-tile.eq { border-color: #f6d98a; box-shadow: 0 0 0 1px #f6d98a inset, 0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.25); }
.lcs-tile.eq .lcs-foot::after { content: "Equipped"; font: 900 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: #2b1600; padding: 5px 11px; border-radius: 99px; background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.lcs-earn { font-style: italic; }
.lcs-gempack { border-color: rgba(232,186,90,.3); background: linear-gradient(180deg, rgba(34,19,64,.9), rgba(14,8,28,.94)); box-shadow: 0 16px 34px rgba(0,0,0,.5); transition: transform .3s var(--ease-back, ease-out), border-color .25s; }
.lcs-gempack:hover { transform: translateY(-5px); border-color: #9fe3ff; }
.lcs-gemart i { animation: gemBob 3.4s ease-in-out infinite; }
.lcs-gemart i:nth-child(2) { animation-delay: -.7s; } .lcs-gemart i:nth-child(3) { animation-delay: -1.4s; } .lcs-gemart i:nth-child(4) { animation-delay: -2.1s; }
@keyframes gemBob { 50% { translate: 0 -5px; } }
.lcs-case, .lcs-dio, .lcs-journal, .lcs-rec, .lcs-trow, .lcs-room { border-color: rgba(232,186,90,.24); background: linear-gradient(180deg, rgba(34,19,64,.86), rgba(14,8,28,.92)); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.lcs-journal { border-left: 4px solid var(--c); }
.lcs-case { transition: transform .3s var(--ease-back, ease-out), border-color .25s, box-shadow .3s; }
.lcs-case.own:hover { transform: translateY(-5px); border-color: #f6d98a; box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 24px rgba(242,193,78,.3); }
.lcs-case.own .lcs-glass { box-shadow: inset 0 -10px 20px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.18); }
.lcs-dio.ready { border-color: #f6d98a; }
.lcs-cardtop { padding: 18px; border-radius: 18px; border: 1px solid rgba(232,186,90,.22); background: radial-gradient(ellipse 60% 90% at 30% 50%, rgba(120,70,210,.25), transparent 70%), rgba(10,5,24,.55); }
.lcs-slot { padding: 12px 14px; border-radius: 14px; background: rgba(10,5,24,.5); border: 1px solid rgba(232,186,90,.12); }
.lcs-slot h4 { color: #e2b04a; }
.lcs-chips button { transition: background .2s, border-color .2s, transform .2s var(--ease-back, ease-out); }
.lcs-chips button:hover { border-color: rgba(232,186,90,.55); transform: translateY(-1px); }
.lcs-chips button.on { background: linear-gradient(180deg, rgba(242,193,78,.3), rgba(160,110,30,.25)); border-color: #f6d98a; box-shadow: 0 0 14px rgba(242,193,78,.25); }
body.theme-midnight .lcs-tile, body.theme-midnight .lcs-case, body.theme-midnight .lcs-dio, body.theme-midnight .lcs-journal, body.theme-midnight .lcs-rec, body.theme-midnight .lcs-trow, body.theme-midnight .lcs-room, body.theme-midnight .lcs-rail button, body.theme-midnight .lcs-gempack { background: rgba(6,6,10,.94); }
body.fx-low .lcs-gemart i { animation: none; }
@media (prefers-reduced-motion: reduce) { .lcs-gemart i { animation: none !important; } .lcs-tile, .lcs-case, .lcs-medal { transition: none !important; } }
.lcs-gempack .lcs-usd { color: #ffe7a3; font: 800 16px var(--font-ui); letter-spacing: .02em; }
.lcs-gempack .btn.soon { opacity: .75; filter: saturate(.4); cursor: default; }
.lcs-legalbox { max-width: 860px; }
.lcs-legal { margin: 14px 0 0; padding-left: 20px; color: #d8ccef; font-size: 14px; line-height: 1.55; }
.lcs-legal li { margin: 2px 0; }
.lcs-payfoot { margin-top: 14px; }
.lcs-buyhead { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 6px 0 10px; }
.lcs-buyhead > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lcs-buyhead b { font: 900 30px var(--font-title); color: #bfefff; }
.lcs-buyhead span { color: var(--muted); font-size: 14px; }
.lcs-buyhead em { font-style: normal; font: 800 22px var(--font-ui); color: #ffe7a3; }
.lcs-ppbox { width: min(420px, 100%); margin: 12px auto 4px; min-height: 60px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.lcs-ppbox > .btn { align-self: center; }
.lcs-pploading { text-align: center; color: #d8f4ff; padding: 14px; border-radius: 12px; background: rgba(111,211,255,.08); border: 1px solid rgba(111,211,255,.3); }
.lcs-buysheet .actions { flex-wrap: wrap; }
.lcs-thanks { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 10px; }
.lcs-thanks b { font: 900 34px var(--font-title); color: #bfefff; }
.lcs-thanks span { color: #d8ccef; }
.lcs-history { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; margin: 6px 0; text-align: left; }
.lcs-hrow { display: grid; grid-template-columns: 1fr 1.3fr .9fr 1.2fr; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: #e9dcff; font-size: 15px; align-items: center; }
.lcs-hrow em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.lcs-hhead { color: var(--muted); font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.lcs-hrow .st-fulfilled { color: #7dffb0; } .lcs-hrow .st-refunded, .lcs-hrow .st-partially_refunded { color: #ffd98a; }
.lcs-hrow .st-failed, .lcs-hrow .st-review { color: #ff9b9b; }
body.mobile .lcs-gempack .lcs-usd { font-size: 22px; }
body.mobile .lcs-legal { font-size: 19px; }
body.mobile .lcs-buyhead b { font-size: 38px; } body.mobile .lcs-buyhead span { font-size: 19px; } body.mobile .lcs-buyhead em { font-size: 28px; }
body.mobile .lcs-pploading { font-size: 20px; }
body.mobile .lcs-hrow { font-size: 20px; } body.mobile .lcs-hrow em { font-size: 16px; } body.mobile .lcs-hhead { font-size: 15px; }
body.portrait #store .lcs-gempack .lcs-usd { font-size: 26px; }
body.portrait #store .lcs-legal { font-size: 23px; line-height: 1.45; }
body.portrait #sheet .lcs-buyhead b { font-size: 44px; } body.portrait #sheet .lcs-buyhead span { font-size: 24px; } body.portrait #sheet .lcs-buyhead em { font-size: 34px; }
body.portrait #sheet .lcs-ppbox { width: 100%; }
body.portrait #sheet .lcs-pploading { font-size: 24px; }
body.portrait #sheet .lcs-hrow { font-size: 22px; grid-template-columns: 1fr 1.2fr 1fr 1.1fr; } body.portrait #sheet .lcs-hrow em { font-size: 18px; }
body.portrait #sheet .lcs-history { max-height: none; overflow: visible; }
body.mobile .lcs-thanks b { font-size: 40px; } body.mobile .lcs-thanks span { font-size: 20px; }
body.portrait #sheet .lcs-thanks b { font-size: 48px; } body.portrait #sheet .lcs-thanks span { font-size: 24px; }
body.portrait #sheet .lcs-buysheet .lcs-small, body.portrait #sheet .lcs-histsheet .lcs-small { font-size: 22px; line-height: 1.4; }
#ppButtons { background: #fff; border-radius: 14px; padding: 10px 12px 2px; }
body.mobile .lcs-ppbox { width: min(760px, 100%); }
/* css/arena.css */
:root {
--gold-hi: #fff0c2;
--gold-1: #f6d98a;
--gold-2: #e2b04a;
--gold-3: #a8741c;
--gold-4: #5c3c0a;
--gold-line: rgba(232, 186, 90, .55);
--gold-faint: rgba(232, 186, 90, .18);
--ink-dim: #b7a8d6;
--glass: rgba(14, 8, 28, .72);
--glass-hi: rgba(28, 16, 54, .82);
--violet-glow: rgba(168, 107, 255, .55);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-back: cubic-bezier(.2, .9, .3, 1.35);
--sh-deep: 0 24px 60px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 255, 255, .03) inset;
}
#afBg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0a0615; }
#afBg.none .afb { opacity: 0 !important; }
#afBg .afb { position: absolute; inset: -4%; background-size: cover; background-position: center 35%; opacity: 0; transition: opacity 1.1s ease;
filter: saturate(1.05) brightness(.62) blur(1.5px); transform: scale(1.04); }
#afBg .afb.on { opacity: 1; }
#afBg .afb.drift { animation: afDrift 38s ease-in-out infinite alternate; }
@keyframes afDrift { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.14) translate(-2.2%, -1.6%); } }
#afBg .afv { position: absolute; inset: 0;
background:
radial-gradient(ellipse 75% 70% at 50% 42%, rgba(10, 5, 22, .05) 0%, rgba(10, 5, 22, .55) 62%, rgba(6, 3, 14, .94) 100%),
linear-gradient(180deg, rgba(8, 4, 18, .78) 0%, rgba(8, 4, 18, .15) 22%, rgba(8, 4, 18, .2) 70%, rgba(6, 3, 14, .92) 100%); }
#afBg .afdust { position: absolute; inset: 0; opacity: .5;
background-image: radial-gradient(1.5px 1.5px at 12% 30%, #ffe6a8, transparent), radial-gradient(1px 1px at 72% 18%, #fff, transparent),
radial-gradient(1.5px 1.5px at 44% 72%, #d9c2ff, transparent), radial-gradient(1px 1px at 88% 64%, #ffe6a8, transparent),
radial-gradient(1.2px 1.2px at 28% 86%, #fff, transparent), radial-gradient(1px 1px at 58% 44%, #ffe6a8, transparent);
background-size: 620px 520px; animation: afDust 60s linear infinite; }
@keyframes afDust { to { background-position: 620px -520px; } }
.screen { z-index: 1; }
.page { background: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(80, 40, 150, .22), transparent 60%); }
body.theme-midnight #afBg .afb { filter: saturate(.9) brightness(.42) blur(1.5px); }
.page .top { height: 84px; background: linear-gradient(180deg, rgba(8, 4, 18, .92), rgba(12, 6, 26, .72)); border-bottom: 0;
box-shadow: 0 1px 0 var(--gold-line), 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.page .top::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 12px rgba(242, 193, 78, .7); }
.page h1, .page .top h1 {
background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 38%, var(--gold-2) 62%, var(--gold-3) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(242, 193, 78, .25)); }
.btn { position: relative; overflow: hidden; isolation: isolate;
border: 1px solid var(--gold-line);
background: linear-gradient(180deg, #5a31a6 0%, #3a1c78 55%, #2a1258 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 0 rgba(0, 0, 0, .35) inset, 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .5);
text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s;
background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 240, 200, .28), transparent 70%); }
.btn:hover::after { opacity: 1; }
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: -1; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); }
.btn:hover::before { animation: afSheen .8s var(--ease-out); }
@keyframes afSheen { to { left: 130%; } }
.btn.gold { background: linear-gradient(180deg, #ffe39a 0%, #f0bd4f 42%, #c98a22 78%, #9c6512 100%); color: #2b1600; border-color: #fff0c2; text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 0 rgba(90, 50, 0, .35) inset, 0 10px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(242, 193, 78, .35); }
.btn.gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 0 rgba(90, 50, 0, .35) inset, 0 14px 30px rgba(0, 0, 0, .55), 0 0 34px rgba(242, 193, 78, .65); }
.btn.ghost { background: linear-gradient(180deg, rgba(40, 24, 72, .72), rgba(18, 10, 36, .78)); border-color: rgba(232, 186, 90, .32); color: #f1e6ff; }
.btn.ghost:hover { border-color: var(--gold-line); }
.btn:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.tabs { background: linear-gradient(180deg, rgba(10, 6, 22, .85), rgba(20, 12, 40, .75)); border: 1px solid rgba(232, 186, 90, .22); border-radius: 12px; padding: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.tabs .tab, .tabs > button { position: relative; transition: color .2s, background .25s; }
.tabs .tab.on, .tabs > button.on { background: linear-gradient(180deg, rgba(120, 70, 210, .75), rgba(70, 34, 140, .8)) !important; color: #fff !important;
box-shadow: 0 0 0 1px rgba(232, 186, 90, .45) inset, 0 4px 14px rgba(120, 60, 220, .45); }
.tabs .tab.on::after, .tabs > button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--gold-1), transparent); }
.navbar { background: linear-gradient(180deg, rgba(20, 11, 40, .92), rgba(8, 4, 18, .95)); border: 1px solid rgba(232, 186, 90, .3);
box-shadow: 0 -1px 0 rgba(255, 230, 170, .12) inset, 0 24px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .6); }
.navbar::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); }
.navbar button { color: #bfb0dd; }
.navbar button .ic { transition: transform .3s var(--ease-back), filter .3s; }
.navbar button:hover .ic { transform: translateY(-3px) scale(1.12); }
.navbar button.on { background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(242, 193, 78, .28), transparent 70%), linear-gradient(180deg, rgba(110, 60, 200, .5), rgba(50, 22, 110, .55)); color: var(--gold-hi);
box-shadow: 0 0 0 1px rgba(232, 186, 90, .45) inset; }
.navbar button.on .ic { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 10px rgba(242, 193, 78, .8)); }
.navbar button.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); box-shadow: 0 0 10px var(--gold-2); }
.modal { background: radial-gradient(ellipse at 50% 45%, rgba(20, 8, 44, .55), rgba(4, 2, 10, .88)); }
.modal .box { position: relative; border: 1px solid rgba(232, 186, 90, .4); background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120, 70, 210, .22), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .96), rgba(14, 8, 28, .97));
box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 6px rgba(14, 8, 28, .55), 0 0 0 7px rgba(232, 186, 90, .18), 0 40px 90px rgba(0, 0, 0, .75); }
.modal .box::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 14px; opacity: .9;
background:
linear-gradient(var(--gold-2), var(--gold-2)) left top / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 22px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right top / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 22px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 22px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 22px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 22px no-repeat; }
.modal.on .box { animation: afPop .5s var(--ease-back) both; }
@keyframes afPop { from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.modal h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2) 70%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.af-panel { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .26);
background: linear-gradient(180deg, rgba(30, 17, 58, .86), rgba(14, 8, 28, .9)); box-shadow: var(--sh-deep); backdrop-filter: blur(6px); }
.af-frame { position: relative; }
.af-frame::before { content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: inherit; z-index: 2;
background:
linear-gradient(var(--gold-2), var(--gold-2)) left top / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 16px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right top / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 16px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 16px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 16px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 16px no-repeat; }
.af-title { font-family: var(--font-title); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); display: flex; align-items: center; gap: 12px; }
.af-title::before, .af-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.af-title::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.af-eyebrow { font: 700 12px/1 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2); }
.af-tile { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(232, 186, 90, .35); cursor: pointer; isolation: isolate;
background: var(--art) center / cover no-repeat, #1a1030; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
transition: transform .35s var(--ease-back), box-shadow .3s, border-color .3s; }
.af-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 4, 18, .05) 0%, rgba(8, 4, 18, .35) 45%, rgba(8, 4, 18, .92) 100%); }
.af-tile::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 30%), rgba(255, 230, 170, .22), transparent 70%); }
.af-tile:hover { transform: translateY(-6px) scale(1.02); border-color: var(--gold-1); box-shadow: 0 22px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(242, 193, 78, .35); }
.af-tile:hover::after { opacity: 1; }
.page input:not([type=checkbox]):not([type=radio]), .modal input:not([type=checkbox]):not([type=radio]), .page select, .modal select, .page textarea, .modal textarea {
background: linear-gradient(180deg, rgba(8, 4, 18, .85), rgba(22, 12, 44, .85)) !important; border: 1px solid rgba(232, 186, 90, .28) !important; color: var(--ink) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35) inset; transition: border-color .2s, box-shadow .2s; }
.page input:focus, .modal input:focus, .page select:focus, .modal select:focus { outline: none; border-color: var(--gold-1) !important; box-shadow: 0 0 0 3px rgba(242, 193, 78, .18), 0 2px 8px rgba(0, 0, 0, .35) inset; }
.chip { transition: transform .2s var(--ease-back), background .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px); }
.chip.on { box-shadow: 0 0 0 1px rgba(255, 240, 200, .5) inset, 0 4px 14px rgba(0, 0, 0, .35), 0 0 14px color-mix(in srgb, var(--c, #a86bff) 60%, transparent); }
.pill { background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85)) !important; border: 1px solid rgba(232, 186, 90, .35) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 240, 200, .08) inset; }
.page ::-webkit-scrollbar { width: 8px; height: 8px; }
.page ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 8px; }
.page ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); border-radius: 8px; }
.screen.af-in { animation: afScreenIn .55s var(--ease-out) both; }
@keyframes afScreenIn { from { opacity: 0; transform: scale(1.015); filter: blur(6px) brightness(1.3); } to { opacity: 1; transform: none; filter: none; } }
.af-st { animation: afRise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
@keyframes afRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.navbar button.af-st { animation-name: afRiseNav; }
@keyframes afRiseNav { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.af-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 2000; }
@keyframes afPulseGold { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0), 0 10px 26px rgba(0, 0, 0, .55); } 50% { box-shadow: 0 0 0 6px rgba(242, 193, 78, .18), 0 0 34px rgba(242, 193, 78, .55); } }
.af-pulse { animation: afPulseGold 2.2s ease-in-out infinite; }
body.fx-low .screen.af-in, body.fx-low .af-st, body.fx-low .modal.on .box { animation: none !important; }
body.fx-low #afBg .afb.drift, body.fx-low #afBg .afdust { animation: none; }
body.fx-low .btn:hover::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
.screen.af-in, .af-st, .modal.on .box, #afBg .afb.drift, #afBg .afdust, .af-pulse { animation: none !important; }
}
/* css/battle.css */
#game { background:
radial-gradient(ellipse 60% 44% at 50% 50%, rgba(120, 70, 220, .22), transparent 70%),
radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
linear-gradient(180deg, #0e0720 0%, #1a0e36 30%, #1d1040 50%, #1a0e36 70%, #0e0720 100%); }
#game::before { background:
radial-gradient(circle at 50% 50%, rgba(242, 193, 78, .08), transparent 22%),
repeating-radial-gradient(circle at 50% 50%, rgba(242, 193, 78, .03) 0 1px, transparent 1px 54px); }
#game::after { display: none; }
body.theme-midnight #game { background: radial-gradient(ellipse 60% 44% at 50% 50%, rgba(90, 50, 170, .12), transparent 70%), #020104; }
#mats .mat { border: 1px solid rgba(232, 186, 90, .14); background: rgba(10, 5, 22, .26); border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 8px 24px rgba(0, 0, 0, .22); }
#mats .mat .lbl { font: 700 10px/1 var(--font-title); letter-spacing: .32em; color: rgba(232, 186, 90, .42); }
#mats .mat.k-leader .lbl, #mats .mat.k-life .lbl { display: none; }
#mats .mat.k-leader { border-radius: 16px; border-color: rgba(232, 186, 90, .3);
background: radial-gradient(ellipse at 50% 40%, rgba(168, 107, 255, .14), transparent 70%), rgba(10, 5, 22, .3); }
#mats .mat.field { border-radius: 24px; border: 1px solid rgba(232, 186, 90, .42);
background:
radial-gradient(ellipse 70% 90% at 50% 50%, rgba(120, 70, 220, .16), transparent 75%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px),
linear-gradient(180deg, rgba(30, 16, 62, .5), rgba(14, 7, 32, .56));
box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 18px 40px rgba(0, 0, 0, .35), inset 0 0 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 170, .08);
transition: border-color .25s, box-shadow .25s; }
#mats .mat.field.s1 { background:
radial-gradient(ellipse 70% 90% at 50% 50%, rgba(200, 60, 90, .1), transparent 75%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px),
linear-gradient(180deg, rgba(40, 14, 44, .5), rgba(18, 7, 26, .56)); }
#mats .mat.field .inlay { position: absolute; inset: 7px; border-radius: 18px; border: 1px solid rgba(232, 186, 90, .2); pointer-events: none;
background:
linear-gradient(var(--gold-2), var(--gold-2)) left top / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 26px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right top / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 26px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 26px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 26px no-repeat; opacity: .75; }
#mats .mat.field .slot { position: absolute; top: 50%; width: 143px; height: 196px; margin-top: -98px; border-radius: 12px;
border: 1px solid rgba(232, 186, 90, .1); background: radial-gradient(ellipse at 50% 50%, rgba(168, 107, 255, .07), transparent 72%); }
#mats .mat.field.drop { border-color: var(--gold-1); background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(242, 193, 78, .18), transparent 75%), linear-gradient(180deg, rgba(40, 22, 70, .6), rgba(20, 10, 40, .6));
box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 40px rgba(242, 193, 78, .35), inset 0 0 50px rgba(242, 193, 78, .14); }
#mats .mat.field.drop .slot { border-color: rgba(242, 193, 78, .4); }
#game.lcb-on #mats .mat { background: rgba(6, 3, 14, .2); }
#game.lcb-on #mats .mat.field { background: linear-gradient(180deg, rgba(14, 7, 30, .34), rgba(8, 4, 18, .4)); }
#game .divider{ top: 399px; height: 2px; background: linear-gradient(90deg, transparent 4%, rgba(232, 186, 90, .55) 30%, rgba(232, 186, 90, .1) 46%, transparent 48%, transparent 52%, rgba(232, 186, 90, .1) 54%, rgba(232, 186, 90, .55) 70%, transparent 96%); }
#game .divider::before, #game .divider::after{ content: ""; position: absolute; top: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 10px rgba(242, 193, 78, .6); }
#game .divider::before{ left: calc(30% - 4px); } #game .divider::after{ left: calc(70% - 4px); }
#centerMed { position: absolute; left: 800px; top: 400px; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; z-index: 1; }
#centerMed .cm-ring { position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, var(--gold-3), var(--gold-hi), var(--gold-2), var(--gold-4), var(--gold-1), var(--gold-3));
-webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
box-shadow: 0 0 24px rgba(168, 107, 255, .5); transition: box-shadow .4s; }
#centerMed .cm-core { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 1px;
background: radial-gradient(circle at 50% 35%, #3a1f73, #140a2c 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7), 0 0 26px rgba(168, 107, 255, .45); transition: box-shadow .4s, background .4s; }
#centerMed em { font: 800 8px/1 var(--font-ui); letter-spacing: .3em; color: rgba(242, 216, 150, .75); font-style: normal; margin-left: .3em; }
#centerMed b { font: 900 30px/1 var(--font-title); color: var(--gold-hi); text-shadow: 0 0 12px rgba(242, 193, 78, .6), 0 2px 3px #000; }
#centerMed[data-side="them"] .cm-core { background: radial-gradient(circle at 50% 35%, #5a1822, #1a0710 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7), 0 0 26px rgba(255, 80, 70, .45); }
body.theme-midnight #centerMed .cm-core { background: radial-gradient(circle at 50% 35%, #1e1236, #050308 70%); }
#game .pile .count{ bottom: -12px; min-width: 38px; padding: 4px 9px; font: 900 14px/1 var(--font-title); color: #2b1600; border: 1px solid #fff0c2;
background: linear-gradient(180deg, #ffe39a, #d9a13a 60%, #a8741c); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), 0 0 12px rgba(242, 193, 78, .35); }
#game .pile.low .count{ color: #fff; border-color: #ffc2b0; background: linear-gradient(180deg, #ff8a6a, #b3231a); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 90, 70, .6); }
#game .pile .back{ box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }
#game .tcount{ position: absolute; transform: translateX(-50%); z-index: 95; min-width: 30px; padding: 3px 8px; border-radius: 99px; text-align: center; pointer-events: none;
font: 800 12px/1 var(--font-title); color: #e9dcff; background: rgba(10, 5, 22, .9); border: 1px solid rgba(232, 186, 90, .45); opacity: 0; transition: opacity .3s; }
#game .tcount.on{ opacity: 1; }
#game .bplate{ position: absolute; left: 20px; width: 336px; height: 66px; z-index: 305; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 0;
border-radius: 40px 14px 14px 40px; border: 1px solid rgba(232, 186, 90, .42);
background: linear-gradient(90deg, rgba(8, 4, 18, .94), rgba(30, 16, 60, .88) 62%, rgba(12, 6, 26, .8));
box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .1); transition: border-color .35s, box-shadow .35s; }
#game .bplate.s0{ top: 770px; } #game .bplate.s1{ top: 28px; }
#game .bplate.s1{ background: linear-gradient(90deg, rgba(8, 4, 18, .94), rgba(52, 16, 34, .86) 62%, rgba(14, 6, 18, .8)); }
#game .bplate.active{ border-color: var(--gold-1); box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(242, 193, 78, .32), inset 0 1px 0 rgba(255, 230, 170, .16); }
#game .bp-av{ position: relative; flex: none; width: 76px; height: 76px; margin-left: -8px; border-radius: 50%; padding: 3px;
background: conic-gradient(from 200deg, var(--gold-3), var(--gold-hi), var(--gold-2), var(--gold-4), var(--gold-1), var(--gold-3));
box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 0 2px rgba(0, 0, 0, .55); }
#game .bp-av img{ width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #1a1030; }
#game .bplate.medal .bp-av{ background: none; padding: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .65); }
#game .bplate.active .bp-av{ box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 18px rgba(242, 193, 78, .55); }
#game .bp-info{ flex: 1; min-width: 0; }
#game .bp-name{ display: block; font: 800 18px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; }
#game .bp-lead{ display: block; margin-top: 2px; font: 700 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game .bp-pips{ display: flex; gap: 4px; margin-top: 6px; }
#game .bp-pips i{ width: 11px; height: 11px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(255, 255, 255, .13); transition: background .3s; }
#game .bp-pips i.on{ background: linear-gradient(135deg, #ffd0c2, #ff5a3f 45%, #8a0f08); }
#game .bp-life{ position: relative; flex: none; width: 58px; height: 62px; display: grid; place-items: center; margin-top: -4px; }
#game .bp-life::before{ content: ""; position: absolute; inset: -3px; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
background: linear-gradient(160deg, var(--gold-hi), var(--gold-2) 40%, var(--gold-4)); }
#game .bp-life i{ position: absolute; inset: 0; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
background: linear-gradient(118deg, rgba(255, 255, 255, .45) 0 20%, transparent 21%), linear-gradient(242deg, rgba(255, 255, 255, .18) 0 32%, transparent 33%),
linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .3) 59%), linear-gradient(160deg, #ffb09a 0%, #ff4a30 32%, #a3140a 64%, #4a0503 100%); }
#game .bp-life .bp-num{ position: relative; font: 900 27px/1 var(--font-title); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 10px rgba(255, 120, 90, .7); margin-top: -2px; }
#game .bp-life em{ position: absolute; bottom: -14px; font: 800 8.5px/1 var(--font-ui); letter-spacing: .28em; color: #ffc9bd; font-style: normal; margin-left: .28em; }
#game .bplate.danger .bp-life{ animation: lcDanger 1.1s ease-in-out infinite; }
@keyframes lcDanger { 50% { transform: scale(1.08); filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 60, 40, .9)); } }
#game .crystalbar{ height: 44px; gap: 5px; padding: 0 12px 0 12px; border-radius: 12px; border: 1px solid rgba(232, 186, 90, .42);
background: linear-gradient(180deg, rgba(8, 4, 18, .92), rgba(26, 14, 52, .88)); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 230, 170, .08); }
#game .gem{ position: relative; width: 24px; height: 30px; clip-path: none; background: none; filter: none; opacity: 1; transition: transform .2s var(--ease-back); }
#game .gem i{ position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%);
background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)); transition: background .25s, opacity .25s; }
#game .gem::before{ content: ""; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 138, 255, .75), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
#game .gem.lit i{ background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0 18%, transparent 19%), linear-gradient(242deg, rgba(255, 255, 255, .28) 0 34%, transparent 35%),
linear-gradient(180deg, transparent 30%, rgba(40, 0, 90, .25) 31%), linear-gradient(170deg, #f6ecff 0%, #b98aff 34%, #7a3ee0 60%, #3b1280 100%); }
#game .gem.temp i{ background: linear-gradient(118deg, rgba(255, 255, 255, .75) 0 18%, transparent 19%), linear-gradient(242deg, rgba(255, 255, 255, .3) 0 34%, transparent 35%),
linear-gradient(170deg, #f2fdff 0%, #8fe7ff 36%, #2c9ad0 64%, #0c4a78 100%); }
#game .gem.lit::before, #game .gem.temp::before{ opacity: 1; }
#game .gem.temp::before{ background: radial-gradient(circle, rgba(111, 211, 255, .75), transparent 65%); }
#game .gem.used i{ background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0 18%, transparent 19%), linear-gradient(170deg, #4e3f6c, #261a40 60%, #140b24); opacity: .9; }
#game .gem.used::after{ background: rgba(185, 138, 255, .35) !important; }
#game .gem.lock i{ background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(255, 255, 255, .05)); opacity: .9; }
#game .gem.lock::after, #game .gem.used::after{ content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%, 50% 0, 50% 8%, 8% 32%, 23% 93%, 77% 93%, 92% 32%, 50% 8%); background: rgba(232, 186, 90, .16); }
#game .gem.mine.free{ cursor: pointer; }
#game .gem.mine.free:hover{ transform: translateY(-4px) scale(1.2); }
#game .crystalbar .num{ margin-left: 8px; min-width: 50px; display: flex; align-items: baseline; gap: 1px; }
#game .crystalbar .num b{ font: 900 22px/1 var(--font-title); color: #f3e6ff; text-shadow: 0 0 12px rgba(168, 107, 255, .7); }
#game .crystalbar .num span{ font: 800 13px/1 var(--font-title); color: var(--ink-dim); }
body.theme-midnight #game .crystalbar, body.theme-midnight #game .bplate{ background: rgba(4, 3, 8, .95); }
#hud #endTurn.eorb { position: absolute; right: 44px; top: 326px; width: 148px; height: 148px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
display: grid; place-items: center; align-content: center; gap: 4px; cursor: pointer; overflow: visible; isolation: isolate;
font: 900 17px/1.02 var(--font-title); letter-spacing: .08em; text-transform: uppercase; color: #2b1600; text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
transition: transform .2s var(--ease-back), filter .3s; -webkit-tap-highlight-color: transparent; }
#game .eorb > i{ position: absolute; border-radius: 50%; pointer-events: none; }
#game .eorb .eo-glow{ inset: -22px; z-index: -3; background: radial-gradient(circle, rgba(255, 205, 100, .55), rgba(255, 180, 60, .15) 50%, transparent 70%); opacity: .75; transition: opacity .35s; }
#game .eorb .eo-ring{ inset: 0; z-index: -2;
background: radial-gradient(circle at 50% 30%, #fff3c8 0%, #ffd46e 30%, #e0a03a 58%, #9c6512 82%, #6a400a 100%);
box-shadow: 0 0 0 3px #2a1406, 0 0 0 5px #e7bb62, 0 0 0 7px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .6), inset 0 -8px 16px rgba(90, 50, 0, .45), inset 0 6px 12px rgba(255, 255, 255, .5); transition: background .35s, box-shadow .35s; }
#game .eorb .eo-ring::after{ content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 245, 210, .55); }
#game .eorb .eo-spin{ inset: -9px; z-index: -1; border: 2px solid transparent; border-top-color: rgba(255, 120, 100, .9); border-right-color: rgba(255, 120, 100, .35); opacity: 0; }
#game .eorb .eo-l{ position: relative; max-width: 110px; text-align: center; }
#game .eorb .eo-t{ position: relative; display: none; min-width: 58px; padding: 3px 8px; border-radius: 99px; font: 900 15px/1 var(--font-title); letter-spacing: .04em; color: #fff; background: #8a1a10; box-shadow: 0 0 10px rgba(255, 60, 40, .7); text-shadow: none; }
#game .eorb.clock .eo-t{ display: block; min-width: 0; margin-top: 3px; padding: 2px 7px; font-size: 12px; color: #ffe7a8; background: rgba(20, 8, 4, .55); box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .35); font-variant-numeric: tabular-nums; }
#game .eorb.timed .eo-t{ display: block; min-width: 58px; margin-top: 0; padding: 3px 8px; font-size: 15px; color: #fff; background: #8a1a10; box-shadow: 0 0 10px rgba(255, 60, 40, .7); animation: lcTick 1s steps(1) infinite; }
@keyframes lcTick { 50% { background: #c9261a; } }
#hud #endTurn.eorb:not(:disabled):hover { transform: scale(1.05); }
#hud #endTurn.eorb:not(:disabled):active { transform: scale(.96); }
#game .eorb[data-st="idle"] .eo-glow{ animation: lcOrb 1.6s ease-in-out infinite; }
@keyframes lcOrb { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.1); } }
#game .eorb[data-st="idle"] .eo-ring{ box-shadow: 0 0 0 3px #2a1406, 0 0 0 5px #fff0c2, 0 0 0 7px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 200, 90, .8), inset 0 -8px 16px rgba(90, 50, 0, .45), inset 0 6px 12px rgba(255, 255, 255, .6); }
#game .eorb[data-st="busy"]{ filter: saturate(.7) brightness(.85); }
#game .eorb[data-st="theirs"], #game .eorb[data-st="over"]{ color: #b9a9d8; text-shadow: 0 1px 2px #000; cursor: default; }
#game .eorb[data-st="theirs"] .eo-glow, #game .eorb[data-st="over"] .eo-glow, #game .eorb[data-st="prompt"] .eo-glow{ opacity: 0; }
#game .eorb[data-st="theirs"] .eo-ring, #game .eorb[data-st="over"] .eo-ring{ background: radial-gradient(circle at 50% 30%, #4a3a6e 0%, #2a1d48 45%, #160d2a 100%);
box-shadow: 0 0 0 3px #0c0618, 0 0 0 5px rgba(232, 186, 90, .35), 0 0 0 7px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .6), inset 0 4px 10px rgba(255, 255, 255, .08); }
#game .eorb[data-st="theirs"] .eo-ring::after, #game .eorb[data-st="prompt"] .eo-ring::after{ border-color: rgba(232, 186, 90, .2); }
#game .eorb[data-st="theirs"] .eo-spin{ opacity: 1; animation: lcSpin 1.1s linear infinite; }
@keyframes lcSpin { to { transform: rotate(360deg); } }
#game .eorb[data-st="prompt"]{ color: #d6f3ff; text-shadow: 0 1px 2px #000; cursor: default; }
#game .eorb[data-st="prompt"] .eo-ring{ background: radial-gradient(circle at 50% 30%, #2d5a7e 0%, #173656 45%, #0b1a30 100%);
box-shadow: 0 0 0 3px #06101e, 0 0 0 5px #6fd3ff, 0 0 26px rgba(111, 211, 255, .55), 0 14px 30px rgba(0, 0, 0, .6); }
#game .eorb.timed .eo-ring{ box-shadow: 0 0 0 3px #2a0806, 0 0 0 5px #ff8a6a, 0 0 30px rgba(255, 70, 50, .7), 0 14px 30px rgba(0, 0, 0, .6), inset 0 6px 12px rgba(255, 255, 255, .4); }
#phaseTag { position: absolute; right: 33px; top: 460px; width: 170px; text-align: center; pointer-events: none; z-index: 2; }
#phaseTag b { display: none; }
#phaseTag span { display: inline-block; max-width: 100%; padding: 5px 12px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font: 800 10.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff4d6;
background: linear-gradient(180deg, rgba(30, 16, 60, .96), rgba(10, 5, 22, .96)); border: 1px solid rgba(232, 186, 90, .55); box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
#phaseTag[data-side="them"] span { color: #ffc2b8; border-color: rgba(255, 120, 100, .45); }
#topbar { gap: 6px; }
#topbar .btn { padding: 8px 14px; font: 800 11.5px/1 var(--font-title); letter-spacing: .14em; border-radius: 10px; text-transform: uppercase; }
#topbar .btn.on { background: linear-gradient(180deg, rgba(242, 193, 78, .4), rgba(150, 100, 20, .35)); border-color: var(--gold-1); color: #fff4d6; }
#log, #tracker { background: linear-gradient(180deg, rgba(14, 8, 30, .96), rgba(8, 4, 18, .96)); border: 1px solid rgba(232, 186, 90, .38); border-radius: 14px;
box-shadow: 0 20px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 170, .08); }
#log.on, #tracker.on { animation: lcDrop .25s var(--ease-out); }
@keyframes lcDrop { from { opacity: 0; transform: translateY(-8px); } }
#log div { padding: 3px 0 3px 9px; border-left: 2px solid rgba(255, 255, 255, .1); margin-bottom: 3px; }
#log .me { border-left-color: #a86bff; } #log .them { border-left-color: #ff6a5a; }
#tracker h4 { font-family: var(--font-title); color: var(--gold-1); }
#banner .msg { font: 800 20px/1.2 var(--font-title); padding: 12px 30px; border-radius: 12px; color: #fff4d6;
background: linear-gradient(180deg, rgba(20, 11, 42, .95), rgba(8, 4, 18, .95)); border: 1px solid var(--gold-line); box-shadow: 0 14px 34px rgba(0, 0, 0, .65), 0 0 0 4px rgba(8, 4, 18, .5); }
#promptBar { padding: 10px 12px 10px 22px; border-radius: 14px; border: 1px solid rgba(111, 211, 255, .65);
background: linear-gradient(180deg, rgba(14, 26, 48, .96), rgba(8, 10, 26, .96)); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(111, 211, 255, .28); }
#promptBar.on { animation: lcPrompt .3s var(--ease-back); }
@keyframes lcPrompt { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); } to { transform: translateX(-50%); } }
#promptBar .ptxt { font: 600 16px/1.3 var(--font-ui); color: #eaf8ff; }
#playBtn { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px rgba(242, 193, 78, .55); }
#preview .keytips div { background: linear-gradient(180deg, rgba(20, 11, 42, .96), rgba(8, 4, 18, .96)); border: 1px solid rgba(232, 186, 90, .32); border-radius: 10px; padding: 7px 10px; line-height: 1.35; }
#preview .keytips b { color: var(--gold-1); }
#sweep { top: 300px; height: 200px; overflow: hidden; }
#sweep .band { position: absolute; left: 0; right: 0; top: 50%; height: 124px; margin-top: -62px; opacity: 0; transform: scaleY(0);
background: linear-gradient(90deg, transparent 0%, rgba(10, 5, 24, .9) 18%, rgba(18, 9, 40, .94) 50%, rgba(10, 5, 24, .9) 82%, transparent 100%); }
#sweep .band::before, #sweep .band::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc, #a86bff) 20%, var(--gold-1) 50%, var(--sc, #a86bff) 80%, transparent); box-shadow: 0 0 14px var(--sc, #a86bff); }
#sweep .band::before { top: 0; } #sweep .band::after { bottom: 0; }
#sweep .t { position: relative; font: 900 76px/1 var(--font-title); letter-spacing: .16em; margin-left: .16em;
background: linear-gradient(180deg, #fff 0%, #fff6dc 40%, var(--gold-1) 70%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 22px var(--sc, #a86bff)); opacity: 0; }
#sweep .s { position: absolute; left: 0; right: 0; top: calc(50% + 40px); text-align: center; font: 800 14px/1 var(--font-ui); letter-spacing: .5em; color: var(--gold-1); opacity: 0; text-transform: uppercase; }
#sweep[data-kind="them"] .t, #sweep[data-kind="boss"] .t { background-image: linear-gradient(180deg, #fff 0%, #ffe2dc 40%, #ff9c8a 72%, #e0402f 100%); }
#sweep[data-kind="them"] .s, #sweep[data-kind="boss"] .s { color: #ffb3a6; }
#sweep.go .band { animation: swBand 1.6s var(--ease-out) forwards; }
#sweep.go .t { animation: swText 1.6s cubic-bezier(.2, .8, .2, 1) forwards; }
#sweep.go .s { animation: swSub 1.6s ease-out forwards; }
@keyframes swBand { 0% { opacity: 0; transform: scaleY(0); } 14% { opacity: 1; transform: scaleY(1); } 78% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes swText { 0% { opacity: 0; transform: translateX(-140px) scale(1.12); } 22% { opacity: 1; transform: translateX(0) scale(1); } 72% { opacity: 1; transform: translateX(14px); } 100% { opacity: 0; transform: translateX(150px) scale(.98); } }
@keyframes swSub { 0%, 18% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; } }
#cmdSplash { top: 240px; height: 320px; display: block; left: 0; right: 0; }
#cmdSplash.go { animation: lcCmd 1.9s ease-out forwards; }
@keyframes lcCmd { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
#cmdSplash .band { position: absolute; left: 0; right: 0; top: 60px; height: 200px;
background: linear-gradient(90deg, transparent, rgba(8, 4, 18, .94) 16%, rgba(20, 10, 44, .96) 50%, rgba(8, 4, 18, .94) 84%, transparent); }
#cmdSplash .band::before, #cmdSplash .band::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc, #f2c14e), transparent); box-shadow: 0 0 16px var(--sc, #f2c14e); }
#cmdSplash .band::before { top: 0; } #cmdSplash .band::after { bottom: 0; }
#cmdSplash .a { position: absolute; left: 50%; top: 0; width: 320px; height: 320px; margin-left: -560px; background: center 20% / cover no-repeat;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 0 transparent); }
#cmdSplash .a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }
#cmdSplash .txt { position: absolute; left: 50%; top: 88px; width: 700px; margin-left: -200px; text-align: left; display: block; }
#cmdSplash .k { font: 800 15px/1 var(--font-ui); letter-spacing: .5em; color: var(--sc, #f2c14e); }
#cmdSplash .n { margin: 10px 0 8px; font: 900 62px/1 var(--font-title); letter-spacing: .04em; color: #fff; text-shadow: 0 0 30px var(--sc, #f2c14e), 0 4px 10px #000; white-space: nowrap; }
#cmdSplash .x { max-width: 660px; text-align: left; font: 500 18px/1.35 var(--font-ui); color: #ffeec2; text-shadow: 0 2px 6px #000; }
#cmdSplash.go .band { animation: cmdBand 1.9s var(--ease-out) both; }
#cmdSplash.go .a { animation: cmdArt 1.9s var(--ease-out) both; }
#cmdSplash.go .txt { animation: cmdTxt 1.9s var(--ease-out) both; }
@keyframes cmdBand { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.6); opacity: 0; } }
@keyframes cmdArt { 0% { transform: translateX(-160px) scale(.9); opacity: 0; } 18% { transform: translateX(0) scale(1.04); opacity: 1; } 30% { transform: scale(1); } 85% { transform: translateX(12px); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes cmdTxt { 0%, 8% { transform: translateX(120px); opacity: 0; } 24% { transform: none; opacity: 1; } 85% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }
#intentBox { left: 392px; top: 306px; width: 340px; padding: 14px 18px 14px; border-radius: 6px; color: #ffe3de;
background:
linear-gradient(#ff6a5a, #ff6a5a) left top / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) left top / 2px 18px no-repeat,
linear-gradient(#ff6a5a, #ff6a5a) right top / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) right top / 2px 18px no-repeat,
linear-gradient(#ff6a5a, #ff6a5a) left bottom / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) left bottom / 2px 18px no-repeat,
linear-gradient(#ff6a5a, #ff6a5a) right bottom / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) right bottom / 2px 18px no-repeat,
repeating-linear-gradient(135deg, rgba(255, 90, 70, .05) 0 8px, transparent 8px 16px),
linear-gradient(160deg, rgba(74, 10, 18, .96), rgba(26, 5, 14, .97));
border: 1px solid rgba(255, 106, 90, .55); box-shadow: 0 0 0 4px rgba(20, 3, 8, .75), 0 0 0 5px rgba(232, 186, 90, .35), 0 18px 40px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 60, 40, .28); }
#intentBox::after { content: ""; position: absolute; inset: -6px; border-radius: 9px; border: 1px solid rgba(255, 90, 70, .7); opacity: 0; pointer-events: none; }
#intentBox.on:not(.broken)::after { animation: lcTele 1.8s ease-out infinite; }
@keyframes lcTele { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06, 1.2); } }
#intentBox .k { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-ui); letter-spacing: .3em; color: #ff9a8a; }
#intentBox .k::before { content: ""; width: 14px; height: 14px; flex: none; background: radial-gradient(circle, #fff 0 18%, #ff5a4f 20% 42%, transparent 44%), radial-gradient(ellipse 100% 55% at 50% 50%, rgba(255, 90, 70, .9) 0 60%, transparent 62%); }
#intentBox .n { font: 900 24px/1.1 var(--font-title); margin: 7px 0 4px; color: #fff; text-shadow: 0 0 16px rgba(255, 70, 50, .7), 0 2px 3px #000; }
#intentBox .t { font-size: 14px; line-height: 1.4; color: #ffd9d2; }
#intentBox .h { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 140, 120, .22); font-size: 12.5px; color: #a8e6ff; }
#intentBox.broken { border-color: rgba(111, 211, 255, .6);
background: repeating-linear-gradient(135deg, rgba(111, 211, 255, .05) 0 8px, transparent 8px 16px), linear-gradient(160deg, rgba(12, 32, 54, .95), rgba(8, 10, 26, .96));
box-shadow: 0 0 0 4px rgba(4, 10, 20, .75), 0 18px 40px rgba(0, 0, 0, .6); }
#layer .card::before { content: ""; position: absolute; inset: -7px; border-radius: 11cqw; pointer-events: none; opacity: 0; transition: opacity .25s; }
#layer .card.can::before { opacity: 1; border: 2px solid rgba(255, 228, 150, .95);
box-shadow: 0 0 14px 2px rgba(255, 196, 80, .75), 0 0 34px 6px rgba(242, 160, 40, .35), inset 0 0 12px rgba(255, 210, 120, .5); animation: lcCan 2.2s ease-in-out infinite; }
@keyframes lcCan { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
#game .card.can .face{ box-shadow: 0 0 0 1.5px #ffe7a0, 0 6px 16px rgba(0, 0, 0, .55); }
#game .card.ready .face{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 22px rgba(255, 200, 90, .75), 0 6px 16px rgba(0, 0, 0, .55); }
#layer .card.inhand:not(.down):hover .face { box-shadow: 0 0 0 1.5px rgba(255, 231, 160, .9), 0 30px 46px rgba(0, 0, 0, .65); }
#layer .card.inhand.can:hover::before { box-shadow: 0 0 18px 4px rgba(255, 206, 100, .85), 0 0 44px 10px rgba(242, 160, 40, .4), inset 0 0 12px rgba(255, 210, 120, .5); }
#game .card.target .face, #game .lcard.target{ box-shadow: 0 0 0 3px #ff6a5a, 0 0 28px rgba(255, 70, 50, .95) !important; }
#game .card.selected .face{ box-shadow: 0 0 0 3px #fff6dc, 0 0 30px rgba(255, 230, 170, .85) !important; }
#game .card.dragging .face{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 30px rgba(255, 200, 90, .7); }
#game .card .kws{ gap: 2cqw; }
#game .card .kws span{ width: 17cqw; height: 17cqw; font-size: 9.5cqw; line-height: 1;
background: radial-gradient(circle at 35% 28%, #4a2d80, #150a2c 72%); border: 1.5px solid #e8c374;
box-shadow: 0 2px 5px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .5); }
#game .card.rested{ filter: brightness(.66) saturate(.75); }
#game .lcard .lc{ box-shadow: 0 0 0 2px #c9953a, 0 0 0 4px rgba(10, 5, 20, .85), 0 0 0 5px rgba(232, 186, 90, .35), 0 14px 30px rgba(0, 0, 0, .65); }
#game .lcard.can .lc{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 0 4px rgba(10, 5, 20, .85), 0 0 26px rgba(255, 200, 90, .85), 0 14px 30px rgba(0, 0, 0, .65); }
#game .cmd{ border-radius: 10px; font: 800 12px/1 var(--font-title); letter-spacing: .06em; padding: 6px 10px 6px 8px; background: linear-gradient(180deg, #ffe7a3, #d9a441 60%, #a8741c); box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
#arrow .a-glow { stroke: rgba(255, 110, 50, .55); stroke-width: 28; stroke-linecap: round; }
#arrow .a-shaft { stroke-width: 13; stroke-linecap: round; }
#arrow .a-core { stroke: rgba(255, 250, 232, .9); stroke-width: 3; stroke-linecap: round; }
#arrow .a-flow { stroke: #fff4d0; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 24; animation: aFlow .45s linear infinite; }
@keyframes aFlow { to { stroke-dashoffset: -25; } }
#arrow .a-head path { fill: #ff5a36; stroke: #ffe7a0; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 110, 50, .9)); }
#arrow .a-src { fill: rgba(255, 210, 110, .3); stroke: #ffe7a0; stroke-width: 2; }
#arrow .a-ret { opacity: 0; transition: opacity .15s; }
#arrow .a-ret circle { fill: none; stroke: #ff6a4a; stroke-width: 3; }
#arrow .a-ret circle.in { stroke: #ffe7a0; stroke-width: 2; stroke-dasharray: 12 9; animation: aRet 1.2s linear infinite; }
#arrow .a-ret path { stroke: #ff6a4a; stroke-width: 4; stroke-linecap: round; }
@keyframes aRet { to { stroke-dashoffset: -42; } }
#arrow .aw.lock .a-ret { opacity: 1; }
#arrow .aw.lock .a-glow { stroke: rgba(255, 70, 40, .7); }
#game .float{ font: 900 40px/1 var(--font-title); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 20px currentColor; animation: lcFloat 1.25s cubic-bezier(.2, .8, .3, 1) forwards; white-space: nowrap; z-index: 2; }
#game .float span{ position: relative; display: inline-block; }
@keyframes lcFloat { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.4); } 16% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); } 30% { transform: translate(-50%, -10px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64px) scale(.95); } }
#game .float.dmg{ color: #fff !important; font-size: 44px; text-shadow: 0 2px 0 #5a0500, 0 0 8px rgba(0, 0, 0, .6); }
#game .float.dmg::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: -1;
clip-path: polygon(50% 0, 61% 30%, 95% 20%, 72% 47%, 100% 64%, 66% 67%, 70% 100%, 50% 76%, 28% 100%, 32% 68%, 0 66%, 28% 48%, 5% 20%, 39% 30%);
background: radial-gradient(circle at 50% 45%, #ffb08a, #e0301f 55%, #7a0a05); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
#game .float.dmg span{ z-index: 1; }
#game .float.heal, #game .float.buff{ font-size: 34px; }
#game .float.word, #game .float.shield, #game .float.debuff{ font-size: 30px; letter-spacing: .12em; }
#game .float.shield span{ padding: 6px 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(20, 50, 80, .92), rgba(8, 18, 36, .92)); border: 1.5px solid #8fe7ff; box-shadow: 0 0 20px rgba(111, 211, 255, .6); }
#game .crack{ font: 900 46px/1 var(--font-title); color: #ffd0c6; letter-spacing: .06em; text-shadow: 0 0 26px #ff2a1a, 0 0 8px #ff5a3f, 0 3px 0 #4a0500; transform: translateX(-50%); animation: lcCrack 1.5s cubic-bezier(.2, .8, .3, 1) forwards; white-space: nowrap; }
@keyframes lcCrack { 0% { opacity: 0; transform: translate(-50%, 0) scale(2); } 14% { opacity: 1; transform: translate(-50%, 0) scale(.95); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
#game .spark{ width: 7px; height: 7px; }
#game .spark.streak{ width: 16px; height: 3px; border-radius: 3px; }
#game .spark.mote{ width: 6px; height: 6px; }
#game .impact{ position: absolute; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(210, 180, 255, .75) 16%, rgba(140, 80, 255, .35) 38%, transparent 66%); }
#game .impact.gold{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 226, 150, .8) 16%, rgba(242, 160, 40, .35) 38%, transparent 66%); }
#game .impact.hit{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 200, 140, .85) 14%, rgba(255, 80, 40, .4) 38%, transparent 66%); }
#game .impact.cyan{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(170, 235, 255, .8) 16%, rgba(60, 170, 255, .35) 38%, transparent 66%); }
#game .shard{ position: absolute; pointer-events: none; background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(255, 200, 120, .7)); will-change: transform, opacity; }
#board0.shake { animation: lcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes lcShake { 10%, 90% { transform: translate(-1px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 50%, 70% { transform: translate(-5px, 2px); } 40%, 60% { transform: translate(5px, -1px); } }
#layer.shake { animation: none; }
#vsIntro { position: absolute; inset: 0; z-index: 960; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(10, 5, 24, .55), rgba(4, 2, 10, .92)); animation: vsBg .3s ease-out; transition: opacity .35s; }
#vsIntro.out { opacity: 0; pointer-events: none; }
@keyframes vsBg { from { opacity: 0; } }
#game .vs-side{ position: absolute; top: 0; bottom: 0; width: 58%; overflow: hidden;
background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%), linear-gradient(180deg, #120a26, #07040f); }
#game .vs-side.a{ left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); animation: vsA .6s var(--ease-out) both; }
#game .vs-side.b{ right: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); animation: vsB .6s .08s var(--ease-out) both; }
@keyframes vsA { from { transform: translateX(-70%); } }
@keyframes vsB { from { transform: translateX(70%); } }
#game .vs-art{ position: absolute; top: 50%; width: 640px; height: 640px; margin-top: -350px; background: center / cover no-repeat;
-webkit-mask: radial-gradient(ellipse 50% 52% at 50% 48%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 50% 52% at 50% 48%, #000 55%, transparent 100%); animation: vsDrift 2.6s linear both; }
#game .vs-side.a .vs-art{ left: 5%; } #game .vs-side.b .vs-art{ right: 5%; }
@keyframes vsDrift { from { transform: scale(1.08); } to { transform: scale(1.18); } }
#game .vs-shade{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 2, 10, .88) 88%); }
#game .vs-side::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
#game .vs-side.a::after{ background: linear-gradient(100deg, transparent 80%, var(--gold-2) 80.3%, transparent 80.6%); }
#game .vs-name{ position: absolute; bottom: 90px; }
#game .vs-side.a .vs-name{ left: 80px; animation: vsNameA .6s .3s var(--ease-out) both; }
#game .vs-side.b .vs-name{ right: 80px; text-align: right; animation: vsNameB .6s .38s var(--ease-out) both; }
@keyframes vsNameA { from { opacity: 0; transform: translateX(-40px); } }
@keyframes vsNameB { from { opacity: 0; transform: translateX(40px); } }
#game .vs-name em{ display: block; font: 800 15px/1 var(--font-ui); letter-spacing: .4em; color: var(--gold-1); font-style: normal; text-transform: uppercase; }
#game .vs-name b{ display: block; margin: 10px 0 8px; font: 900 54px/1 var(--font-title); color: #fff; text-shadow: 0 0 26px var(--c), 0 4px 10px #000; }
#game .vs-name span{ font: 700 13px/1 var(--font-ui); letter-spacing: .3em; color: #cbbbe8; text-transform: uppercase; }
#game .vs-mid{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#game .vs-mid b{ position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 900 150px/1 var(--font-title); letter-spacing: -.02em;
background: linear-gradient(180deg, #fff 0%, var(--gold-hi) 30%, var(--gold-1) 55%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(242, 193, 78, .7)); animation: vsSlam .5s .42s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes vsSlam { from { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
#game .vs-mid .vs-flash{ position: absolute; left: -400px; top: -400px; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 220, .9), rgba(242, 193, 78, .3) 25%, transparent 60%); opacity: 0; animation: vsFlash .7s .5s ease-out both; }
@keyframes vsFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
#game .vs-mid .vs-ring{ position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid var(--gold-1); opacity: 0; animation: vsRing .8s .5s ease-out both; }
@keyframes vsRing { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
#game .vs-skip{ position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 700 12px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: rgba(233, 220, 255, .5); animation: vsBg .4s 1s both; }
#vsIntro.still *, #vsIntro.still { animation: none !important; }
#mulligan .box, #triumph .box { padding: 34px 48px 32px; }
#mulligan h2::before, #triumph h2::before { display: block; margin-bottom: 8px; font: 800 12px/1 var(--font-ui); letter-spacing: .45em; }
#mulligan h2::before { content: "PREPARE FOR BATTLE"; }
#triumph h2::before { content: "FROM YOUR LIFE"; }
:is(#mulligan, #triumph) .cards { perspective: 1200px; }
#mulligan .cards { gap: 18px; margin: 22px 0 28px; }
:is(#mulligan, #triumph) .cards .card.deal { animation: lcDeal .6s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 90ms + 160ms); }
@keyframes lcDeal { from { opacity: 0; transform: translateY(90px) rotateX(40deg) rotate(calc(var(--k, 0) * 6deg)) scale(.8); } }
:is(#mulligan, #triumph) .cards .card:hover { transform: translateY(-12px) scale(1.05); }
:is(#mulligan, #triumph) .cards .card .face { box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 186, 90, .4); }
:is(#mulligan, #triumph) .cards .card:hover .face { box-shadow: 0 24px 40px rgba(0, 0, 0, .65), 0 0 0 2px #ffe7a0, 0 0 26px rgba(242, 193, 78, .5); }
#triumph .cards { position: relative; margin: 26px 0 30px; }
#triumph .cards::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: -1; pointer-events: none; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .22) 0 6deg, transparent 6deg 18deg);
-webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: lcRays 14s linear infinite; }
@keyframes lcRays { to { transform: rotate(360deg); } }
#triumph .cards .card.deal { width: 210px !important; height: 294px !important; animation: lcTri .9s var(--ease-out) backwards; }
@keyframes lcTri { 0% { opacity: 0; transform: rotateY(180deg) scale(.6); filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.6); } 100% { filter: none; } }
#pickModal .ptxt { font-family: var(--font-title); background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px #000); }
#pickModal .card.pickc .face { box-shadow: 0 18px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 186, 90, .45); }
#pickModal .card.pickc:hover .face { box-shadow: 0 24px 40px rgba(0, 0, 0, .65), 0 0 0 2px #ffe7a0, 0 0 30px rgba(242, 193, 78, .55); }
#over.lc-over { background: #05020c; }
#over.lc-over::before { content: ""; position: absolute; inset: -3%; background: var(--hero) var(--hero-pos, 50% 30%) / cover no-repeat; filter: blur(3px) saturate(1.1) brightness(.5); transform: scale(1.04); animation: ovHero 14s ease-out both; }
#over.lc-over::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(10, 5, 22, .1), rgba(6, 3, 14, .78) 75%, rgba(4, 2, 10, .96)); }
#over.lose::before { filter: blur(3px) grayscale(.75) brightness(.36) sepia(.2) hue-rotate(190deg); }
@keyframes ovHero { from { transform: scale(1.12); } to { transform: scale(1.02); } }
#over.lc-over .box { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; min-width: 0; width: 1060px; max-width: calc(100% - 60px); padding: 40px 54px 38px 44px; text-align: left; overflow: visible;
background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(140, 90, 230, .2), transparent 70%), linear-gradient(180deg, rgba(24, 13, 48, .9), rgba(10, 5, 22, .94)); animation: ovBox .7s var(--ease-out) both; }
#over.lose .box { background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(120, 50, 70, .2), transparent 70%), linear-gradient(180deg, rgba(20, 13, 30, .92), rgba(8, 6, 14, .95)); border-color: rgba(190, 150, 170, .3); }
@keyframes ovBox { from { opacity: 0; transform: translateY(30px) scale(.97); } }
#over.lc-over .box > .ov-rays { display: none; }
#over.win .box::after { content: ""; position: absolute; left: 60%; top: 60px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: -1; pointer-events: none; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .12) 0 5deg, transparent 5deg 15deg);
-webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); animation: lcRays 30s linear infinite; }
#over .ov-left { flex: none; }
#over .overlead { margin: 0; perspective: 900px; }
#over .overlead .lc { width: 220px; height: 327px; box-shadow: 0 0 0 2px #c9953a, 0 0 0 5px rgba(10, 5, 20, .85), 0 30px 60px rgba(0, 0, 0, .7), 0 0 60px rgba(242, 193, 78, .35); animation: ovLead .9s .15s var(--ease-back) both, overLead 3.5s 1.1s ease-in-out infinite; }
#over.lose .overlead .lc { filter: grayscale(.55) brightness(.75); box-shadow: 0 0 0 2px #7a6a80, 0 0 0 5px rgba(10, 5, 20, .85), 0 30px 60px rgba(0, 0, 0, .7); }
@keyframes ovLead { from { opacity: 0; transform: translateY(40px) rotateY(-30deg) scale(.85); } }
#over .ov-main { flex: 1; min-width: 0; }
#over .ov-eyebrow { font: 800 13px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-1); animation: ovRise .5s .2s var(--ease-out) both; }
#over.lose .ov-eyebrow { color: #c9b4c4; }
#over .big { margin: 8px 0 0; font: 900 96px/1 var(--font-title); letter-spacing: .12em; white-space: nowrap; animation: ovBig .8s .25s cubic-bezier(.2, .9, .3, 1.15) both; }
#over .big.win { background: linear-gradient(180deg, #fff 0%, #fff3c8 25%, var(--gold-1) 55%, var(--gold-2) 78%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 4px 0 rgba(60, 30, 0, .7)) drop-shadow(0 0 30px rgba(242, 193, 78, .6)); }
#over .big.lose { background: linear-gradient(180deg, #f2e6ee 0%, #c6aab8 45%, #8a5a6e 80%, #5a2a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(160, 40, 60, .45)); animation-name: ovBigLose; animation-duration: 1.1s; }
@keyframes ovBig { from { opacity: 0; transform: scale(1.6); letter-spacing: .4em; } }
@keyframes ovBigLose { from { opacity: 0; transform: translateY(-20px); letter-spacing: .3em; } }
@keyframes ovRise { from { opacity: 0; transform: translateY(12px); } }
#over .ov-rule { position: relative; height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, var(--gold-line), transparent 80%); animation: ovRise .5s .45s both; }
#over .ov-rule i { position: absolute; left: 0; top: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); }
#over .stats { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #d8cdf0; animation: ovRise .5s .5s both; }
#over .ov-facts { display: flex; gap: 8px; margin-top: 8px; }
#over .ov-facts i { font: 700 12px/1 var(--font-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 186, 90, .25); color: #e9dcff; }
#over .ov-xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 0 16px; animation: ovRise .5s .6s both; }
#over .ov-lvl { font: 800 14px/1 var(--font-title); letter-spacing: .12em; color: #e9dcff; white-space: nowrap; }
#over .ov-lvl b { font-size: 20px; color: var(--gold-hi); }
#over .ov-xp.up .ov-lvl b { animation: ovLvl .7s var(--ease-back); display: inline-block; }
@keyframes ovLvl { 40% { transform: scale(1.6); color: #fff; } }
#over .ov-bar { position: relative; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(232, 186, 90, .35); }
#over .ov-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #6a3dc0, #b98aff 60%, #f3e6ff); box-shadow: 0 0 14px rgba(185, 138, 255, .8); transition: width .9s var(--ease-out); }
#over .ov-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7)); border-radius: 99px; }
#over .ov-xpn { font: 800 15px/1 var(--font-title); color: #d9c3ff; white-space: nowrap; }
#over .rewards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; perspective: 800px; }
#over .rewards > * { font: 800 17px/1 var(--font-title); }
#over .rewards > .ov-in { animation: ovFlip .55s var(--ease-back) backwards; animation-delay: calc(1s + var(--i, 0) * 260ms); }
@keyframes ovFlip { from { opacity: 0; transform: rotateX(90deg) translateY(10px); } }
#over .actions { justify-content: flex-start; flex-wrap: wrap; gap: 12px; animation: ovRise .5s .8s both; }
#over .actions { flex-wrap: wrap; }
#over .actions .btn { flex: 0 0 auto; min-width: 0; padding: 13px 20px; font-size: 16px; white-space: nowrap; }
#over .lcs-unlocks { justify-content: flex-start; margin: 0 0 16px; }
#over .lcs-overopp { margin: 0 0 16px; }
#over.lc-over .cz-overpet { left: -70px; bottom: -40px; }
body.mobile #game .bplate{ width: 380px; height: 78px; }
body.mobile #game .bplate.s0{ top: 800px; } body.mobile #game .bplate.s1{ top: 14px; }
body.mobile #game .bp-av{ width: 88px; height: 88px; }
body.mobile #game .bp-name{ font-size: 24px; } body.mobile #game .bp-lead{ font-size: 14px; }
body.mobile #game .bp-pips i{ width: 14px; height: 14px; }
body.mobile #game .bp-life{ width: 70px; height: 76px; } body.mobile #game .bp-life .bp-num{ font-size: 34px; } body.mobile #game .bp-life em{ font-size: 11px; bottom: -16px; }
body.mobile #game .crystalbar{ transform: scale(1.4); }
body.mobile #game .crystalbar .num b{ font-size: 24px; }
body.mobile #hud #endTurn.eorb { width: 196px; height: 196px; right: 30px; top: 300px; font-size: 25px; padding: 0; }
body.mobile #game .eorb .eo-l{ max-width: 150px; }
body.mobile #game .eorb .eo-t{ font-size: 20px; }
body.mobile #game .eorb.clock:not(.timed) .eo-t{ font-size: 17px; }
body.mobile #phaseTag { right: 8px; top: 482px; width: 240px; } body.mobile #phaseTag span { font-size: 15px; padding: 7px 14px; }
body.mobile #topbar .btn { font-size: 18px; padding: 14px 20px; }
body.mobile #game .pile .count{ font-size: 20px; padding: 6px 12px; } body.mobile #game .tcount{ font-size: 18px; padding: 5px 12px; }
body.mobile #centerMed { transform: scale(1.25); }
body.mobile #sweep .t { font-size: 96px; } body.mobile #sweep .s { font-size: 20px; top: calc(50% + 52px); }
body.mobile #cmdSplash .n { font-size: 74px; } body.mobile #cmdSplash .x { font-size: 24px; } body.mobile #cmdSplash .k { font-size: 20px; }
body.mobile #intentBox { left: 392px; top: 298px; width: 420px; } body.mobile #intentBox .n { font-size: 28px; } body.mobile #intentBox .t { font-size: 18px; } body.mobile #intentBox .h { font-size: 16px; } body.mobile #intentBox .k { font-size: 14px; }
body.mobile #game .float{ font-size: 54px; } body.mobile #game .float.dmg{ font-size: 58px; } body.mobile #game .float.dmg::before{ width: 120px; height: 120px; margin: -60px 0 0 -60px; }
body.mobile #game .vs-name b{ font-size: 72px; } body.mobile #game .vs-name em{ font-size: 22px; } body.mobile #game .vs-name span{ font-size: 18px; } body.mobile #game .vs-skip{ font-size: 18px; }
body.mobile #mulligan h2::before, body.mobile #triumph h2::before { font-size: 18px; }
body.mobile #mulligan .cards .card { width: 220px !important; height: 308px !important; }
body.mobile #over.lc-over .box { width: 1300px; padding: 44px 60px; }
body.mobile #over .ov-eyebrow { font-size: 20px; } body.mobile #over .big { font-size: 120px; } body.mobile #over .stats { font-size: 24px; }
body.mobile #over .ov-facts i { font-size: 17px; } body.mobile #over .ov-lvl { font-size: 20px; } body.mobile #over .ov-xpn { font-size: 20px; } body.mobile #over .ov-bar { height: 16px; }
body.mobile #over .rewards > * { font-size: 24px; }
body.mobile #over .overlead .lc { width: 250px; height: 372px; }
body.fx-low #layer .card.can::before, body.fx-low #game .eorb .eo-glow, body.fx-low #game .bplate.danger .bp-life, body.fx-low #intentBox.on::after,
body.fx-low #arrow .a-flow, body.fx-low #arrow .a-ret circle.in, body.fx-low #triumph .cards::before, body.fx-low #over.win .box::after,
body.fx-low #over.lc-over::before, body.fx-low #over .overlead .lc, body.fx-low :is(#mulligan, #triumph) .cards .card.deal, body.fx-low #over .rewards > .ov-in,
body.fx-low #over .big, body.fx-low #over .ov-eyebrow, body.fx-low #over .ov-rule, body.fx-low #over .stats, body.fx-low #over .ov-xp, body.fx-low #over .actions, body.fx-low #over.lc-over .box { animation: none !important; }
body.fx-low #layer .card.can::before { opacity: 1; }
body.fx-low #game .eorb[data-st="theirs"] .eo-spin{ animation-duration: 2.5s; }
@media (prefers-reduced-motion: reduce) {
#layer .card.can::before, #game .eorb .eo-glow, #game .bplate.danger .bp-life, #intentBox.on::after, #arrow .a-flow, #arrow .a-ret circle.in, #triumph .cards::before, #over.win .box::after,
#over.lc-over::before, #over .overlead .lc, :is(#mulligan, #triumph) .cards .card.deal, #over .rewards > .ov-in, #over .big, #over .ov-eyebrow, #over .ov-rule, #over .stats, #over .ov-xp, #over .actions, #over.lc-over .box,
#sweep.go .band, #sweep.go .t, #sweep.go .s, #cmdSplash.go .band, #cmdSplash.go .a, #cmdSplash.go .txt, #game .float, #game .crack, #vsIntro * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
#sweep.go .t, #sweep.go .band, #sweep.go .s { animation: lcFadeHold 1.6s linear forwards !important; }
@keyframes lcFadeHold { 0% { opacity: 0; transform: none; } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}
body.mobile #over .actions .btn { font-size: 22px; padding: 16px 24px; }
body.mobile #game .bplate.s0 { width: 196px; top: 804px; gap: 6px; }
body.mobile #game .bplate.s0 .bp-info { display: none; }
body.mobile #over .lcs-unlocks > span { font-size: 18px; } body.mobile #over .lcs-unlocks button { font-size: 18px; padding: 8px 16px; }
#game .bplate.long .bp-name { font-size: 14.5px; }
body.mobile #game .bplate.long .bp-name { font-size: 19px; }
#game.splashing #preview { opacity: 0 !important; }
#game { --m-fast: 140ms; --m-base: 260ms; --m-slow: 480ms; --m-hero: 900ms;
--e-out: cubic-bezier(.2, .8, .2, 1); --e-in: cubic-bezier(.55, 0, .8, .3); --e-inout: cubic-bezier(.65, 0, .35, 1); --e-back: cubic-bezier(.3, 1.5, .5, 1); --e-land: cubic-bezier(.5, 0, .3, 1); }
#chargeArrow { position: absolute; inset: 0; pointer-events: none; z-index: 842; overflow: visible; --ac: #ffb347; --ac2: #fff1c8; }
#chargeArrow[data-side="them"] { --ac: #ff4d3d; --ac2: #ffd6cc; }
#chargeArrow .ca-glow { fill: none; stroke: var(--ac); stroke-opacity: .42; stroke-width: 26; stroke-linecap: round; filter: blur(6px); }
#chargeArrow .ca-shaft { fill: none; stroke: var(--ac); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; }
#chargeArrow .ca-core { fill: none; stroke: var(--ac2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; opacity: .9; }
#chargeArrow .ca-hd path { fill: var(--ac); stroke: var(--ac2); stroke-width: 3; stroke-linejoin: round; }
#chargeArrow .ca-src { fill: rgba(255, 255, 255, .12); stroke: var(--ac2); stroke-width: 2.5; }
#game .card.charging .face, #game .lcard.charging .lc { box-shadow: 0 0 0 3px #ffe7a0, 0 0 30px rgba(255, 170, 70, .9), 0 26px 30px rgba(0, 0, 0, .6) !important; }
#game .card.rested.charging { filter: brightness(.95); }
#game .card.charged .face, #game .lcard.charged .lc { box-shadow: 0 0 0 3px #ff5a4f, 0 0 26px rgba(255, 70, 50, .85) !important; }
#hud #instFx { position: absolute; inset: 0; z-index: 884; pointer-events: none; opacity: 0; --ic: #6fd3ff; }
#instFx .if-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 38%, rgba(4, 2, 12, .5) 100%);
box-shadow: inset 0 0 150px color-mix(in srgb, var(--ic) 50%, transparent); }
#instFx .if-stamp { position: absolute; left: 0; right: 0; top: 400px; height: 0; display: grid; justify-items: center; align-content: center; gap: 10px; }
#instFx .if-stamp b { display: block; padding: 12px 70px; font: 900 72px/1 var(--font-title); letter-spacing: .18em; text-indent: .18em; color: #fff; white-space: nowrap;
text-shadow: 0 0 26px var(--ic), 0 0 8px var(--ic), 0 4px 0 rgba(0, 0, 0, .6);
background: linear-gradient(90deg, transparent, rgba(6, 10, 24, .86) 18%, rgba(6, 10, 24, .92) 50%, rgba(6, 10, 24, .86) 82%, transparent);
border-top: 2px solid; border-bottom: 2px solid; border-image: linear-gradient(90deg, transparent, var(--ic) 25%, #fff 50%, var(--ic) 75%, transparent) 1; }
#instFx .if-stamp span { font: 800 15px/1.2 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--ic) 55%, #fff); text-shadow: 0 2px 4px #000; white-space: nowrap; }
#instFx .if-stamp span:empty { display: none; }
#instFx[data-kind="triumph"] .if-stamp b { background: linear-gradient(90deg, transparent, rgba(40, 24, 4, .88) 18%, rgba(50, 30, 6, .94) 50%, rgba(40, 24, 4, .88) 82%, transparent); }
body.mobile #instFx .if-stamp b { font-size: 92px; } body.mobile #instFx .if-stamp span { font-size: 22px; }
body.portrait #instFx .if-stamp { top: calc(var(--ph) / 2); }
body.portrait #instFx .if-stamp b { font-size: 64px; padding: 12px 40px; } body.portrait #instFx .if-stamp span { font-size: 22px; }
body[data-screen="game"] #afBg { visibility: hidden; }
body[data-screen="game"] #afBg * { animation-play-state: paused !important; }
body:is(.mobile, .portrait) #game .motes i:nth-child(n+11) { display: none; }
body:is(.mobile, .portrait) #layer .card.foil::after, body:is(.mobile, .portrait) #layer .card.promo::after, body:is(.mobile, .portrait) #layer .card .shine,
body:is(.mobile, .portrait) #layer .card .shine::after, body:is(.mobile, .portrait) #layer .card .cf-promo, body:is(.mobile, .portrait) #layer .lcard .fa-holo,
body:is(.mobile, .portrait) #layer .lcard .fa-holo::after, body:is(.mobile, .portrait) #layer .lcard .lc::after { animation-play-state: paused; }
body.fx-low #chargeArrow .ca-glow { filter: none; }
@media (prefers-reduced-motion: reduce) { #chargeArrow .ca-glow { filter: none; } }
body:is(.mobile, .portrait) #chargeArrow .ca-shaft { stroke-width: 16; } body:is(.mobile, .portrait) #chargeArrow .ca-core { stroke-width: 4; }
body:is(.mobile, .portrait) #chargeArrow .ca-hd path { transform: scale(1.35); }
#hud #endTurn.eorb { transition: transform .2s var(--ease-back), filter .3s, opacity .2s; }
#phaseTag { transition: opacity .2s; }
body.portrait #game:has(#hud > .pz:not(.out)) :is(#endTurn, #phaseTag) { opacity: 0; pointer-events: none; }
#game #fx { z-index: 845; }
/* css/screens-core.css */
.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; overflow: visible; }
.ico.gold { stroke: url(#lcIcoGold) var(--gold-1); }
.ico.gold .f { fill: url(#lcIcoGold) var(--gold-1); }
.btn .ico { width: 1.15em; height: 1.15em; margin-right: .45em; vertical-align: -.2em; }
.btn .ico:only-child { margin-right: 0; }
#hub { background: radial-gradient(ellipse 70% 60% at 52% 46%, #2b1356 0%, #120827 55%, #07040f 100%); }
#hub .hubglow { position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(ellipse 34% 40% at 53% 48%, rgba(168, 107, 255, .16), transparent 70%),
radial-gradient(ellipse 60% 22% at 50% 102%, rgba(242, 193, 78, .1), transparent 70%); }
#hub .vignette { z-index: 2; background: radial-gradient(ellipse 90% 85% at 50% 48%, transparent 50%, rgba(5, 2, 14, .82)), linear-gradient(0deg, rgba(5, 2, 14, .88), transparent 24%), linear-gradient(180deg, rgba(5, 2, 14, .7), transparent 16%); }
#hub .hubui { position: absolute; inset: 0; }
.hublogo { top: 14px; width: 230px; animation: lcLogo 7s ease-in-out infinite; }
@keyframes lcLogo { 50% { transform: translateX(-50%) translateY(-4px); } }
.hubtop { top: 18px; left: 24px; right: 24px; gap: 12px; height: 66px; }
.hubtop .hspacer { flex: 1; }
.hubtop .profile { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 5px 22px 5px 5px; border-radius: 99px;
background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .82)); border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 240, 200, .08) inset;
transition: transform .25s var(--ease-back), border-color .25s, box-shadow .25s; text-align: left; }
.hubtop .profile:hover { transform: translateY(-2px); border-color: var(--gold-line); box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(242, 193, 78, .22); }
.avring { position: relative; width: 60px; height: 60px; flex: none; display: block; }
.avring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.avring .trk { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.5; }
.avring .val { fill: none; stroke: url(#lcIcoGold) var(--gold-1); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(242, 193, 78, .7)); transition: stroke-dasharray .8s var(--ease-out); }
.hubtop .profile .avring .av, .avring .av { position: absolute; inset: 6px; width: auto; height: auto; border-radius: 50%; background-size: cover; background-position: 50% 30%; border: 1px solid rgba(255, 230, 170, .55); box-shadow: 0 0 0 2px rgba(8, 4, 18, .9), 0 4px 10px rgba(0, 0, 0, .5); }
.avring.medal .av { inset: 4px; background-position: center; border: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.avring .lvb { position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
font: 900 12px/1 var(--font-title); color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c 60%, #a8741c); border: 1px solid #fff0c2; box-shadow: 0 3px 8px rgba(0, 0, 0, .55); }
.hubtop .ptxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hubtop .profile .lvl { font: 800 17px/1.1 var(--font-title); letter-spacing: .04em; color: #fff6dd; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubtop .profile .sub { font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gtag { font-style: normal; font: 800 9px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-1); padding: 3px 7px; border-radius: 99px; border: 1px solid rgba(232, 186, 90, .45); background: rgba(242, 193, 78, .08); }
.xpline { display: block; width: 140px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.xpline i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a86bff, #f6d98a); }
.netdot { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px; background: rgba(10, 6, 22, .78); }
.netdot i { width: 8px; height: 8px; border-radius: 50%; background: #ff7a6a; box-shadow: 0 0 8px #ff5a4f; }
.netdot.on i { background: #6dffa8; box-shadow: 0 0 8px #3dff8a; animation: lcBeacon 2.4s ease-in-out infinite; }
@keyframes lcBeacon { 50% { opacity: .45; } }
.hubtop .pill { font-size: 19px; padding: 8px 16px; transition: transform .2s var(--ease-back), border-color .2s; }
.pill-packs[data-nav] { cursor: pointer; }
.pill-packs[data-nav]:hover { transform: translateY(-2px); border-color: var(--gold-1) !important; }
.hubtop .iconbtn { appearance: none; padding: 0; width: 48px; height: 48px; color: var(--gold-1); font-size: 22px; line-height: 1;
background: linear-gradient(180deg, rgba(10, 6, 22, .88), rgba(28, 16, 52, .82)); border: 1px solid rgba(232, 186, 90, .3); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 240, 200, .08) inset;
transition: transform .25s var(--ease-back), border-color .2s, box-shadow .25s; }
.hubtop .iconbtn:hover { transform: translateY(-2px); border-color: var(--gold-1); box-shadow: 0 10px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(242, 193, 78, .3); }
.hubtop .iconbtn:active { transform: scale(.94); }
.hubtop .iconbtn .ico { width: 24px; height: 24px; }
.hubleader { left: 104px; top: 118px; }
.hubleader .hl-aura { position: absolute; left: -90px; right: -90px; top: -60px; height: 610px; pointer-events: none; z-index: -1;
background: radial-gradient(ellipse 46% 44% at 50% 48%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 72%); animation: lcAura 5.5s ease-in-out infinite; }
.hubleader .hl-aura::after { content: ""; position: absolute; inset: 8% 14%; border-radius: 50%; opacity: .35;
background: repeating-conic-gradient(from 0deg, rgba(255, 230, 170, .22) 0 2deg, transparent 2deg 16deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
animation: lcSpin 80s linear infinite; }
@keyframes lcAura { 50% { opacity: .7; transform: scale(1.04); } }
@keyframes lcSpin { to { transform: rotate(360deg); } }
.hubleader .hl-float { animation: lcHubFloat 6.5s ease-in-out infinite; }
@keyframes lcHubFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hubleader .lc { box-shadow: 0 34px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 230, 170, .35), 0 0 60px color-mix(in srgb, var(--glow) 70%, transparent); transition: transform .2s var(--ease-out); }
.hubleader .hl-plinth { height: 18px; margin: 6px 30px 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .65), transparent 70%); animation: lcPlinth 6.5s ease-in-out infinite; }
@keyframes lcPlinth { 50% { transform: scaleX(.88); opacity: .7; } }
.hubleader .change { margin-top: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 13px 20px; }
.hubright { right: 84px; top: 112px; width: 430px; gap: 12px; }
.bp-wrap { position: relative; }
.bp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bp-spark { position: absolute; bottom: 12px; width: 6px; height: 6px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd36e, 0 0 16px #f2a93a; }
.bp-wrap::before, .bp-wrap::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 10px #ffc94e; pointer-events: none; z-index: 3; opacity: 0; animation: lcEmber 5s ease-out infinite; }
.bp-wrap::before { left: 18%; bottom: 10px; }
.bp-wrap::after { left: 76%; bottom: 20px; animation-delay: 2.4s; }
@keyframes lcEmber { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(12px, -110px) scale(.4); } }
.bigplay { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px 20px 22px; border-radius: 20px; animation: none; isolation: isolate;
border: 2px solid #fff0c2; color: #2b1600; text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(180deg, #ffe7a0 0%, #f4c55a 40%, #d39526 76%, #a36a14 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -4px 0 rgba(90, 50, 0, .35) inset, 0 0 0 5px rgba(12, 6, 26, .75), 0 0 0 6px rgba(232, 186, 90, .45), 0 22px 44px rgba(0, 0, 0, .6);
transition: transform .3s var(--ease-back), filter .25s; }
.bigplay:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.06); }
.bigplay:active { transform: scale(.985); }
.bigplay::after { z-index: 1; }
.bigplay .bp-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.bigplay .bp-glow::before { content: ""; position: absolute; inset: -40px; border-radius: 40px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 205, 90, .75), transparent 62%); opacity: .35; animation: lcBreathe 2.8s ease-in-out infinite; }
.bp-wrap { filter: drop-shadow(0 0 26px rgba(242, 193, 78, .35)); }
.bp-wrap::marker { display: none; }
@keyframes lcBreathe { 50% { opacity: .85; transform: scale(1.06); } }
.bigplay .bp-t { position: relative; z-index: 2; font: 900 64px/1 var(--font-title); letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; }
.bigplay small { position: relative; z-index: 2; margin-top: 6px; font: 800 13px/1.2 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; opacity: .82; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; border-radius: 16px; text-align: left;
background: linear-gradient(180deg, rgba(30, 17, 58, .86), rgba(14, 8, 28, .9)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
transition: transform .25s var(--ease-back), border-color .25s; }
.hdeck:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.hdeck .hd-art { width: 52px; height: 52px; border-radius: 12px; flex: none; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .45), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.hdeck .hd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hdeck em { font: 800 10px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-style: normal; }
.hdeck b { font: 800 18px/1.15 var(--font-title); letter-spacing: .03em; color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck .hd-txt > span { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck > .ico { width: 20px; height: 20px; color: var(--gold-2); transition: transform .25s var(--ease-back); }
.hdeck:hover > .ico { transform: translateX(3px); }
.hubstats { gap: 10px; }
.hubstats div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px;
background: linear-gradient(180deg, rgba(20, 12, 40, .8), rgba(10, 6, 22, .82)); border: 1px solid rgba(232, 186, 90, .18); }
.hubstats .ico { grid-row: span 2; width: 22px; height: 22px; }
.hubstats b { font: 800 20px/1 var(--font-title); white-space: nowrap; }
.hubstats b small { font-size: 13px; color: var(--ink-dim); }
.hubstats span { font-size: 10px; letter-spacing: .16em; }
.hquest { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; text-align: left;
background: linear-gradient(180deg, rgba(20, 12, 40, .82), rgba(10, 6, 22, .86)); border: 1px solid rgba(232, 186, 90, .18); transition: transform .25s var(--ease-back), border-color .25s; }
.hquest:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.hquest > .ico { width: 26px; height: 26px; }
.hquest .hq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hquest b { display: flex; justify-content: space-between; font: 800 13px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff0cc; }
.hquest b i { font-style: normal; color: var(--gold-1); letter-spacing: .06em; }
.hquest em { font-style: normal; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hquest .hq-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hquest .hq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b98aff, var(--gold-1)); border-radius: inherit; }
.hquest.ready { border-color: rgba(242, 193, 78, .6); animation: afPulseGold 2.4s ease-in-out infinite; }
.hquest.ready em { color: var(--gold-1); font-weight: 700; }
.hubright .seasonHub { position: relative; right: auto; bottom: auto; width: auto; gap: 8px; }
.hubright .seasonHub .shMain { border-color: rgba(232, 186, 90, .4); }
.hubright .seasonHub .shTxt > b { font-size: 21px; }
.hubright .locChip { background: rgba(10, 6, 22, .8); border-color: rgba(232, 186, 90, .22); }
#hub .lcs-starter { left: 470px; right: 548px; width: auto; bottom: 124px; padding: 16px 18px 16px; border-radius: 18px;
background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(120, 70, 210, .25), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .96), rgba(12, 7, 26, .97));
border: 1px solid rgba(232, 186, 90, .5); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 50px rgba(0, 0, 0, .65); animation: lcRiseIn .55s var(--ease-back) both; }
#hub .lcs-starter::before { content: ""; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
background: linear-gradient(var(--gold-2), var(--gold-2)) left top / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 14px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right top / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 14px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 14px no-repeat,
linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 14px no-repeat; }
#hub .lcs-sthead { align-items: center; }
#hub .lcs-sthead b { font-size: 19px; letter-spacing: .06em; background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hub .lcs-sthead span { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 3px; }
#hub .lcs-sthead .btn { flex: none; white-space: nowrap; }
#hub .lcs-strow { gap: 8px; }
#hub .lcs-strow button { padding: 6px 4px 8px; border-color: rgba(232, 186, 90, .2); transition: transform .25s var(--ease-back), border-color .2s, background .2s; min-width: 0; }
#hub .lcs-strow button:hover { transform: translateY(-4px); border-color: var(--gold-1); }
#hub .lcs-strow button b { font-size: 14px; }
#hub .lcs-strow button span { font-size: 10.5px; white-space: nowrap; }
#hub .lcs-stpet { height: 88px; display: grid; place-items: center; }
#hub .lcs-stpet > * { transform: scale(.86); }
#hub:has(.hubui.choosing) .three { opacity: .55; transition: opacity .6s; }
#hub .cz-hubpet { left: 470px; top: auto; bottom: 118px; }
@keyframes lcRiseIn { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.navbar button .ic { display: grid; place-items: center; height: 28px; font-size: 26px; }
.navbar button .ic .ico { width: 26px; height: 26px; }
.navbar button:not(.on) .ic .ico.gold { stroke: currentColor; }
.navbar button:hover .ic .ico.gold { stroke: url(#lcIcoGold) var(--gold-1); }
#sheet .box { padding: 30px 36px 28px; }
#sheet .box > .af-eyebrow { margin-bottom: 8px; }
#sheet .box h2 { display: flex; align-items: center; justify-content: center; gap: 18px; }
#sheet .box h2::before, #sheet .box h2::after { content: ""; width: 70px; height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--gold-line)); }
#sheet .box h2::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
#sheet .actions { margin-top: 18px; }
#sheet .err:not(:empty) { padding: 8px 12px; border-radius: 10px; background: rgba(255, 90, 79, .1); border: 1px solid rgba(255, 90, 79, .35); }
#toast { display: flex; align-items: center; gap: 12px; bottom: 136px; padding: 12px 22px 12px 14px; border-radius: 14px; font: 600 16px/1.35 var(--font-ui); color: #fff6e0; text-align: left;
background: linear-gradient(180deg, rgba(34, 20, 64, .97), rgba(14, 8, 28, .97)); border: 1px solid rgba(232, 186, 90, .6);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(242, 193, 78, .18);
transform: translate(-50%, 18px) scale(.96); transition: opacity .25s var(--ease-out), transform .35s var(--ease-back); }
#toast.on { transform: translate(-50%, 0) scale(1); }
#toast .tico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(242, 193, 78, .25), transparent 70%); }
#toast .tico .ico { width: 20px; height: 20px; }
#toast.on .tico .ico { animation: lcTwinkle .8s var(--ease-back); }
@keyframes lcTwinkle { from { transform: rotate(-90deg) scale(.3); opacity: 0; } }
#trailerModal video { border-radius: 16px; border: 1px solid rgba(232, 186, 90, .45); box-shadow: 0 0 0 6px rgba(14, 8, 28, .6), 0 40px 90px rgba(0, 0, 0, .75); max-width: 1280px; max-height: 720px; display: block; }
#sheet .box.modesheet { width: 1060px; }
.modesheet .modes { gap: 18px; margin: 18px 0 16px; }
.modesheet .mode { position: relative; height: 300px; padding: 0; display: block; text-align: left; color: var(--ink);
background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); border-radius: 16px; }
.modesheet .mode::before { background: linear-gradient(180deg, rgba(8, 4, 18, .1) 0%, rgba(8, 4, 18, .25) 40%, rgba(8, 4, 18, .95) 88%); }
.modesheet .mode .mt-ic { position: absolute; left: 16px; top: 16px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
background: radial-gradient(circle at 50% 35%, rgba(60, 34, 110, .95), rgba(12, 6, 26, .95)); border: 1px solid rgba(232, 186, 90, .6); box-shadow: 0 6px 16px rgba(0, 0, 0, .55); transition: transform .35s var(--ease-back); }
.modesheet .mode:hover .mt-ic { transform: rotate(-8deg) scale(1.08); }
.modesheet .mode .mt-tag { position: absolute; right: 14px; top: 16px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px;
color: var(--gold-hi); background: rgba(10, 6, 22, .72); border: 1px solid rgba(232, 186, 90, .45); }
.modesheet .mode .mt-txt { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.modesheet .mode .mt-txt b { font: 800 28px/1.05 var(--font-title); letter-spacing: .06em; color: #fff4d6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.modesheet .mode .mt-txt span { font-size: 14px; color: #e4d8f5; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.modesheet .mode.off { opacity: 1; cursor: not-allowed; filter: none; }
.modesheet .mode.off::before { background: linear-gradient(180deg, rgba(8, 4, 18, .55), rgba(8, 4, 18, .96) 85%); }
.modesheet .mode.off { background-blend-mode: luminosity; }
.modesheet .mode.off .mt-txt { opacity: .6; }
.modesheet .mode.off .mt-ic { filter: grayscale(1); opacity: .6; }
.modesheet .mode.off:hover { transform: none; border-color: rgba(232, 186, 90, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.modesheet .mode.off:hover::after { opacity: 0; }
.modesheet .mode .mt-lock { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffd9c8; padding: 8px 12px; border-radius: 99px; background: rgba(10, 6, 22, .82); border: 1px solid rgba(255, 150, 120, .4); }
.modesheet .mode .mt-lock .ico { width: 14px; height: 14px; }
.modesheet .modesub { appearance: none; font: inherit; color: var(--ink); cursor: pointer; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 14px; text-align: left;
background: rgba(10, 6, 22, .55); border: 1px solid rgba(232, 186, 90, .22); transition: border-color .2s, background .2s; }
.modesheet .modesub:hover { border-color: var(--gold-line); background: rgba(40, 22, 80, .5); }
.modesheet .ms-av { width: 46px; height: 46px; border-radius: 10px; flex: none; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .45), 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.modesheet .ms-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.modesheet .ms-t em { font: 800 10px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-style: normal; }
.modesheet .ms-t b { font: 800 18px/1.1 var(--font-title); color: #fff4d6; }
.modesheet .ms-t span { font-size: 14px; color: var(--ink-dim); }
.modesheet .ms-ch { display: flex; align-items: center; gap: 6px; font: 800 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.modesheet .ms-ch .ico { width: 16px; height: 16px; transition: transform .25s var(--ease-back); }
.modesheet .modesub:hover .ms-ch .ico { transform: translateX(3px); }
#select .top .btn .ico, #rules .top .btn .ico { width: 18px; height: 18px; }
#select .selhint { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 13px; letter-spacing: .08em; }
#select .selhint .ico { width: 20px; height: 20px; }
#select .leaders { top: 104px; gap: 20px; }
.leaderPick { width: 184px; transition: transform .4s var(--ease-back), filter .3s; filter: brightness(.72) saturate(.85); }
.leaderPick .lc { width: 184px; height: 274px; transition: transform .15s, box-shadow .35s; }
.leaderPick:hover { transform: translateY(-8px); filter: brightness(.95) saturate(1); }
.leaderPick.sel { transform: translateY(-14px) scale(1.05); filter: none; }
.leaderPick.sel .lc { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 5px rgba(12, 6, 26, .9), 0 0 0 6px var(--gold-2), 0 0 44px color-mix(in srgb, var(--glow) 85%, transparent), 0 24px 40px rgba(0, 0, 0, .6); }
.leaderPick.sel::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -12px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); box-shadow: 0 0 12px var(--gold-2); }
.leaderPick .setname { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; letter-spacing: 0; }
.leaderPick .setname b { font: 800 16px/1 var(--font-title); color: #fff4d6; letter-spacing: .04em; }
.leaderPick .setname span { font: 800 10px/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
#select .detail { left: 60px; right: 60px; top: 446px; bottom: 28px; height: auto; display: grid; grid-template-columns: 230px minmax(0, 1fr) 330px 290px; gap: 26px; align-items: stretch;
padding: 26px 30px 26px 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(232, 186, 90, .32);
background: linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(12, 7, 26, .94)); box-shadow: var(--sh-deep); backdrop-filter: blur(6px); }
#select .detail .dt-portrait { margin: -26px 0; background-size: cover; background-position: 50% 22%;
-webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); position: relative; }
#select .detail .dt-info { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 4px; }
#select .detail h2 { font: 800 32px/1.05 var(--font-title); margin: 2px 0 0; letter-spacing: .04em; color: #fff4d6; background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 60%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#select .detail .dt-id { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-dim); font-style: italic; }
#select .detail .dt-box { padding: 10px 14px; border-radius: 12px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(190, 160, 255, .16); }
#select .detail .dt-box.dt-cmd { border-color: rgba(232, 186, 90, .4); background: linear-gradient(90deg, rgba(242, 193, 78, .1), rgba(8, 4, 18, .5)); }
#select .dt-lb { display: flex; align-items: center; gap: 7px; font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 6px; }
#select .dt-lb .ico { width: 14px; height: 14px; }
#select .dt-lb i { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: none; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; }
#select .dt-tx { font: 17px/1.4 var(--font-card); white-space: pre-line; color: #f1e8ff; }
#select .dt-sig { display: flex; flex-direction: column; min-width: 0; }
#select .dt-sig .dt-lb { margin-bottom: 12px; }
#select .sigrow { display: flex; gap: 12px; flex: 1; align-items: center; justify-content: center; perspective: 900px; }
#select .sigc { width: 98px; height: 137px; flex: none; cursor: pointer; transition: transform .3s var(--ease-back); }
#select .sigc .card { width: 98px; height: 137px; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); border-radius: 8px; }
#select .sigc:hover { transform: translateY(-8px) scale(1.12) rotate(-2deg); z-index: 2; }
#select .detail .side { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
#select .detail select { width: 100%; padding: 11px 12px; font: 600 15px var(--font-ui); border-radius: 10px; }
#select .detail label { margin-top: 4px; font-weight: 800; }
#select .detail #begin { margin-top: 14px; padding: 18px 20px; font-size: 26px; letter-spacing: .16em; display: flex; align-items: center; justify-content: center; }
#select .detail #begin .ico { width: 26px; height: 26px; }
#select .detail.swap > * { animation: lcSwap .45s var(--ease-out) both; }
#select .detail.swap > :nth-child(2) { animation-delay: 40ms; } #select .detail.swap > :nth-child(3) { animation-delay: 80ms; }
#select .detail.swap > .side { animation: none; }
#select .detail.swap > .dt-portrait { animation-name: lcFadeIn; }
@keyframes lcSwap { from { opacity: 0; transform: translateY(10px); } }
@keyframes lcFadeIn { from { opacity: 0; } }
#sheet .box.acctsheet { width: 760px; padding-top: 0; overflow: hidden; text-align: left; }
#sheet .box.acctsheet.wide { width: 1000px; }
.acct-hero { position: relative; margin: 0 -36px 20px; padding: 34px 40px 24px; display: flex; align-items: center; gap: 26px; isolation: isolate; }
.acct-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 50% 30%) / cover no-repeat; opacity: .55; }
.acct-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .92) 20%, rgba(14, 8, 28, .45) 70%, rgba(14, 8, 28, .7)), linear-gradient(0deg, rgba(20, 12, 40, 1), transparent 60%);
border-bottom: 1px solid rgba(232, 186, 90, .3); }
.ah-av { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; position: relative; flex: none; transition: transform .3s var(--ease-back); }
.ah-av:hover { transform: scale(1.04); }
.ah-av .avring { width: 112px; height: 112px; }
.ah-av .avring .av { inset: 9px; }
.ah-av .avring.medal .av { inset: 6px; }
.ah-av .avring .lvb { min-width: 32px; height: 28px; font-size: 15px; right: -4px; bottom: -2px; }
.ah-av .ah-edit { position: absolute; left: -4px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff4d6;
background: linear-gradient(180deg, #5a31a6, #2a1258); border: 1px solid var(--gold-line); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ah-av .ah-edit .ico { width: 16px; height: 16px; }
.ah-txt { min-width: 0; }
#sheet .ah-txt h2 { justify-content: flex-start; margin: 6px 0 10px; font-size: 38px; }
#sheet .ah-txt h2::before, #sheet .ah-txt h2::after { display: none; }
.ah-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-chips span { font: 700 13px/1 var(--font-ui); padding: 7px 12px; border-radius: 99px; color: #f3e8ff; background: rgba(10, 6, 22, .7); border: 1px solid rgba(232, 186, 90, .3); }
.avpick { margin: -6px 0 18px; padding: 14px 16px 12px; border-radius: 16px; background: rgba(8, 4, 18, .55); border: 1px solid rgba(232, 186, 90, .25); }
.avpick[hidden] { display: none; }
.avp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avp-head b { flex: none; }
.avp-head span { flex: 1; min-width: 0; }
.avp-head b { font: 800 16px var(--font-title); color: var(--gold-1); letter-spacing: .06em; }
.avp-head span { font-size: 13px; color: var(--ink-dim); }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.avo { appearance: none; position: relative; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1; border-radius: 50%; transition: transform .25s var(--ease-back), filter .2s; filter: brightness(.82); }
.avo img, .avo > span { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.avo > span { background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 2px rgba(232, 186, 90, .5) inset; }
.avo em { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font: 800 8px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 3px 5px; border-radius: 99px; background: rgba(10, 6, 22, .9); color: var(--gold-1); font-style: normal; }
.avo:hover { transform: translateY(-3px) scale(1.08); filter: none; }
.avo.on { filter: none; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(242, 193, 78, .8); }
.avo.on::after { content: ""; position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1600' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.acctsheet .acct { grid-template-columns: 1.08fr 1fr; gap: 18px; margin-top: 0; }
.acctsheet .acf { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; border-radius: 16px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .18); }
.acctsheet .acf.primary { border-color: rgba(232, 186, 90, .45); background: linear-gradient(180deg, rgba(242, 193, 78, .08), rgba(8, 4, 18, .45)); }
.acctsheet .acf-tag { position: absolute; right: 16px; top: -10px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c); }
.acctsheet .acf-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.acctsheet .acf-h > .ico { width: 30px; height: 30px; margin-top: 2px; }
.acctsheet .acf h3 { font: 800 19px/1.2 var(--font-title); letter-spacing: .06em; margin: 0 0 4px; color: #fff4d6; }
.acctsheet .acf p { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); margin: 0; }
.acctsheet .fld { display: flex; flex-direction: column; gap: 5px; }
.acctsheet .fld > span { font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.acctsheet .fld input { font: 16px var(--font-ui); padding: 12px 14px; border-radius: 10px; user-select: text; width: 100%; }
.acctsheet input.bad { border-color: #ff7a6a !important; box-shadow: 0 0 0 3px rgba(255, 90, 79, .18) !important; }
.acctsheet .ferr { font-size: 13px; color: #ffb3a8; min-height: 0; }
.acctsheet .ferr:empty { display: none; }
.acctsheet .acf .btn { margin-top: 4px; display: flex; align-items: center; justify-content: center; font-size: 17px; padding: 13px 16px; }
.acctsheet .acf .btn[disabled] { opacity: .7; }
.acf.shake { animation: lcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes lcShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.acct-note { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(232, 186, 90, .25); }
.acct-note > .ico { width: 26px; height: 26px; margin-top: 2px; }
.acct-note b { display: block; font: 800 16px var(--font-title); color: #fff4d6; letter-spacing: .04em; margin-bottom: 3px; }
.acct-note span { font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.acct-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.acct-info > div { padding: 12px 14px; border-radius: 12px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(190, 160, 255, .16); min-width: 0; }
.acct-info span { display: block; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 7px; }
.acct-info b { font: 800 17px/1.1 var(--font-title); color: #fff4d6; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctsheet .actions { justify-content: flex-end; }
#rules .rwrap { position: absolute; top: 104px; bottom: 18px; left: 50%; transform: translateX(-50%); width: 1380px; display: grid; grid-template-columns: 240px 1fr; gap: 26px; }
#rules .rtoc { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; border-radius: 18px; align-self: start; max-height: 100%; overflow-y: auto;
background: linear-gradient(180deg, rgba(20, 12, 40, .85), rgba(10, 6, 22, .88)); border: 1px solid rgba(232, 186, 90, .22); box-shadow: var(--sh-deep); }
#rules .rtoc .af-eyebrow { padding: 0 10px 10px; }
#rules .rtoc button { appearance: none; border: 0; background: none; color: var(--ink-dim); font: 600 14.5px/1.2 var(--font-ui); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; position: relative; transition: color .2s, background .2s; }
#rules .rtoc button .ico { width: 18px; height: 18px; opacity: .7; }
#rules .rtoc button:hover { color: #fff; background: rgba(168, 107, 255, .12); }
#rules .rtoc button.on { color: var(--gold-hi); background: linear-gradient(90deg, rgba(242, 193, 78, .16), transparent); }
#rules .rtoc button.on .ico { opacity: 1; color: var(--gold-1); }
#rules .rtoc button.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold-1); box-shadow: 0 0 10px var(--gold-2); }
#rules .rwrap .doc { position: relative; top: auto; left: auto; transform: none; width: auto; bottom: auto; height: 100%; padding: 0 14px 60px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scroll-behavior: auto; }
#rules .rsec { flex: none; padding: 22px 28px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(30, 17, 58, .82), rgba(14, 8, 28, .86)); border: 1px solid rgba(232, 186, 90, .2); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
#rules .rsec.intro { position: relative; overflow: hidden; isolation: isolate; padding: 30px 34px; border-color: rgba(232, 186, 90, .4); }
#rules .rsec.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .95) 25%, rgba(14, 8, 28, .55)), var(--art) center 40% / cover; }
#rules .doc h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 800 24px/1.1 var(--font-title); letter-spacing: .08em; color: var(--gold-1); }
#rules .doc h2 .ico { width: 26px; height: 26px; }
#rules .doc p, #rules .doc li { font-size: 16.5px; line-height: 1.62; color: #e6dcf7; }
#rules .doc p { margin: 0 0 10px; } #rules .doc p:last-child { margin-bottom: 0; }
#rules .doc b { color: #fff4d6; }
#rules .doc ul { margin: 0; padding-left: 22px; } #rules .doc ul li::marker { color: var(--gold-2); }
#rules .doc .callout { padding: 0; background: none; border: 0; font: 21px/1.5 var(--font-card); color: #f3eaff; max-width: 820px; margin: 10px 0 20px; }
#rules .goal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; }
#rules .goal > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(8, 4, 18, .6); border: 1px solid rgba(232, 186, 90, .3); }
#rules .goal .ico { grid-row: span 2; width: 30px; height: 30px; }
#rules .goal b { font: 800 17px var(--font-title); } #rules .goal span { font-size: 13.5px; color: var(--ink-dim); }
#rules .steps { list-style: none; padding: 0; margin: 4px 0 12px; counter-reset: st; display: grid; gap: 8px; }
#rules .steps li { counter-increment: st; position: relative; padding: 10px 14px 10px 54px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); line-height: 1.5; }
#rules .steps li::before { content: counter(st); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
font: 900 14px var(--font-title); color: #2b1600; background: linear-gradient(180deg, #ffe39a, #d39526); }
#rules .steps li b { margin-right: 10px; color: var(--gold-1); font-family: var(--font-title); letter-spacing: .04em; }
#rules .note { padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--gold-2); background: rgba(242, 193, 78, .07); }
#rules .tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#rules .tgrid > div { padding: 12px 16px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); }
#rules .tgrid b { display: block; font: 800 16px var(--font-title); color: var(--gold-1); margin-bottom: 4px; letter-spacing: .04em; }
#rules .tgrid span { font-size: 15px; line-height: 1.5; color: #e6dcf7; }
#rules kbd { font: 800 12px var(--font-ui); padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(232, 186, 90, .5); background: rgba(8, 4, 18, .7); color: var(--gold-hi); }
#rules .kwgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#rules .kwc { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); transition: border-color .2s, transform .25s var(--ease-back); }
#rules .kwc:hover { border-color: var(--gold-line); transform: translateY(-2px); }
#rules .kwi { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(70, 40, 130, .9), rgba(12, 6, 26, .95)); border: 1px solid rgba(232, 186, 90, .5); }
#rules .kwi .ico { width: 21px; height: 21px; }
#rules .kwc b { display: block; font: 800 15px var(--font-title); color: #fff4d6; margin-bottom: 3px; }
#rules .kwc span { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
#rules .lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#rules .lrow { display: flex; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); }
#rules .lrow .la { width: 64px; height: 64px; flex: none; border-radius: 12px; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .4), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
#rules .lrow b { font: 800 17px var(--font-title); color: #fff4d6; margin-right: 10px; }
#rules .lrow em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold-1); display: inline-flex; align-items: center; gap: 5px; }
#rules .lrow em .ico { width: 13px; height: 13px; }
#rules .lrow div > span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); margin-top: 3px; }
#rules .setgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#rules .setc { padding: 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(8, 4, 18, .5)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: flex; flex-direction: column; gap: 5px; }
#rules .setc b { font: 800 18px var(--font-title); color: var(--c); letter-spacing: .08em; text-transform: uppercase; }
#rules .setc span { font-size: 13.5px; color: #e6dcf7; line-height: 1.35; } #rules .setc em { font-style: normal; font-size: 12px; color: var(--ink-dim); }
body.mobile .hubtop { height: 84px; gap: 14px; }
body.mobile .avring { width: 80px; height: 80px; }
body.mobile .hubtop .profile { padding-right: 26px; }
body.mobile .hubtop .profile .lvl { font-size: 26px; max-width: 280px; }
body.mobile .hubtop .profile .sub { font-size: 18px; }
body.mobile .avring .lvb { font-size: 17px; height: 30px; min-width: 32px; }
body.mobile .gtag { font-size: 13px; }
body.mobile .xpline { width: 180px; height: 6px; }
body.mobile .netdot { font-size: 16px; padding: 10px 16px; } body.mobile .netdot i { width: 12px; height: 12px; }
body.mobile .hubtop .pill { font-size: 28px; padding: 10px 20px; }
body.mobile .hubtop .iconbtn { width: 72px; height: 72px; }
body.mobile .hubtop .iconbtn .ico { width: 34px; height: 34px; }
body.mobile .hublogo { width: 250px; top: 110px; }
body.mobile .hubleader { top: 124px; left: 70px; }
body.mobile .hubleader .change { font-size: 26px; padding: 18px; }
body.mobile .hubright { right: 60px; top: 124px; width: 560px; gap: 14px; }
body.mobile .bigplay .bp-t { font-size: 84px; }
body.mobile .bigplay small { font-size: 19px; }
body.mobile .hdeck .hd-art { width: 70px; height: 70px; }
body.mobile .hdeck em { font-size: 15px; } body.mobile .hdeck b { font-size: 26px; } body.mobile .hdeck .hd-txt > span { font-size: 18px; }
body.mobile .hubstats { display: none; }
body.mobile .hquest > .ico { width: 36px; height: 36px; }
body.mobile .hquest b { font-size: 18px; } body.mobile .hquest em { font-size: 18px; }
body.mobile .hubright .seasonHub .shTxt > b { font-size: 28px; }
body.mobile #hub .lcs-starter { left: 440px; right: 660px; bottom: 150px; padding: 18px 22px; }
body.mobile #hub .lcs-sthead b { font-size: 28px; } body.mobile #hub .lcs-sthead span { font-size: 18px; }
body.mobile #hub .lcs-strow button b { font-size: 21px; } body.mobile #hub .lcs-strow button span { font-size: 15px; }
body.mobile #hub .lcs-stpet { height: 110px; } body.mobile #hub .lcs-stpet > * { transform: none; }
body.mobile #hub .cz-hubpet { left: 450px; top: auto; bottom: 150px; }
body.mobile .navbar button .ic { height: 42px; } body.mobile .navbar button .ic .ico { width: 40px; height: 40px; }
body.mobile #toast { font-size: 26px; padding: 18px 30px 18px 18px; bottom: 170px; max-width: 1200px; }
body.mobile #toast .tico { width: 44px; height: 44px; } body.mobile #toast .tico .ico { width: 30px; height: 30px; }
body.mobile #sheet .box h2::before, body.mobile #sheet .box h2::after { width: 90px; }
body.mobile .af-eyebrow { font-size: 16px; }
body.mobile #sheet .box.modesheet { width: 1500px; }
body.mobile .modesheet .mode { height: 400px; }
body.mobile .modesheet .mode .mt-ic { width: 72px; height: 72px; font-size: 38px; }
body.mobile .modesheet .mode .mt-tag { font-size: 15px; padding: 8px 14px; }
body.mobile .modesheet .mode .mt-txt b { font-size: 42px; }
body.mobile .modesheet .mode .mt-txt span { font-size: 22px; }
body.mobile .modesheet .mode .mt-lock { font-size: 18px; padding: 12px 18px; } body.mobile .modesheet .mode .mt-lock .ico { width: 20px; height: 20px; }
body.mobile .modesheet .ms-av { width: 70px; height: 70px; }
body.mobile .modesheet .ms-t em { font-size: 15px; } body.mobile .modesheet .ms-t b { font-size: 28px; } body.mobile .modesheet .ms-t span { font-size: 21px; }
body.mobile .modesheet .ms-ch { font-size: 18px; } body.mobile .modesheet .ms-ch .ico { width: 22px; height: 22px; }
body.mobile #select .selhint { font-size: 20px; } body.mobile #select .selhint .ico { width: 28px; height: 28px; }
body.mobile #select .leaders { top: 120px; gap: 26px; }
body.mobile .leaderPick { width: 180px; } body.mobile .leaderPick .lc { width: 180px; height: 268px; }
body.mobile .leaderPick .setname b { font-size: 24px; } body.mobile .leaderPick .setname span { font-size: 15px; }
body.mobile #select .detail { top: 470px; left: 30px; right: 30px; bottom: 22px; grid-template-columns: 170px minmax(0, 1fr) 390px 420px; gap: 26px; padding: 22px 26px 22px 0; }
body.mobile #select .detail .dt-portrait { margin: -22px 0; }
body.mobile #select .detail h2 { font-size: 40px; }
body.mobile #select .detail .dt-id { display: none; }
body.mobile #select .dt-lb { font-size: 15px; } body.mobile #select .dt-lb .ico { width: 18px; height: 18px; }
body.mobile #select .dt-tx { font-size: 23px; line-height: 1.3; }
body.mobile #select .detail .af-eyebrow { font-size: 15px; }
body.mobile #select .sigc, body.mobile #select .sigc .card { width: 118px; height: 165px; }
body.mobile #select .detail select { font-size: 24px; padding: 14px; }
body.mobile #select .detail label { font-size: 16px; }
body.mobile #select .detail #begin { font-size: 36px; padding: 22px; }
body.mobile #sheet .box.acctsheet { width: 1100px; } body.mobile #sheet .box.acctsheet.wide { width: 1500px; }
body.mobile .ah-av .avring { width: 150px; height: 150px; }
body.mobile .ah-av .ah-edit { width: 48px; height: 48px; } body.mobile .ah-av .ah-edit .ico { width: 24px; height: 24px; }
body.mobile #sheet .ah-txt h2 { font-size: 52px; }
body.mobile .ah-chips span { font-size: 20px; padding: 10px 16px; }
body.mobile .avp-head b { font-size: 24px; } body.mobile .avp-head span { font-size: 18px; }
body.mobile .avgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
body.mobile .avo em { font-size: 12px; }
body.mobile .acctsheet .acf h3 { font-size: 28px; } body.mobile .acctsheet .acf p { font-size: 19px; }
body.mobile .acctsheet .fld > span { font-size: 15px; }
body.mobile .acctsheet .fld input, body.mobile .acct input { font-size: 24px; padding: 16px 18px; }
body.mobile .acctsheet .ferr { font-size: 19px; }
body.mobile .acctsheet .acf .btn { font-size: 24px; padding: 18px; }
body.mobile .acctsheet .acf-tag { font-size: 14px; }
body.mobile .acct-note b { font-size: 24px; } body.mobile .acct-note span { font-size: 20px; } body.mobile .acct-note > .ico { width: 36px; height: 36px; }
body.mobile .acct-info span { font-size: 14px; } body.mobile .acct-info b { font-size: 24px; }
body.mobile #rules .rwrap { top: 118px; width: auto; left: 30px; right: 30px; transform: none; grid-template-columns: 330px 1fr; }
body.mobile #rules .rtoc button { font-size: 21px; padding: 12px 12px; } body.mobile #rules .rtoc button .ico { width: 24px; height: 24px; }
body.mobile #rules .doc h2 { font-size: 34px; } body.mobile #rules .doc h2 .ico { width: 34px; height: 34px; }
body.mobile #rules .doc p, body.mobile #rules .doc li, body.mobile #rules .tgrid span { font-size: 23px; }
body.mobile #rules .doc .callout { font-size: 28px; max-width: none; }
body.mobile #rules .goal b, body.mobile #rules .tgrid b { font-size: 24px; } body.mobile #rules .goal span { font-size: 19px; }
body.mobile #rules .kwgrid { grid-template-columns: repeat(2, 1fr); }
body.mobile #rules .kwc b, body.mobile #rules .lrow b { font-size: 23px; } body.mobile #rules .kwc span, body.mobile #rules .lrow div > span, body.mobile #rules .lrow em { font-size: 19px; }
body.mobile #rules .kwi { width: 54px; height: 54px; } body.mobile #rules .kwi .ico { width: 28px; height: 28px; }
body.mobile #rules .setgrid { grid-template-columns: repeat(3, 1fr); }
body.mobile #rules .setc b { font-size: 24px; } body.mobile #rules .setc span { font-size: 19px; } body.mobile #rules .setc em { font-size: 17px; }
body.fx-low .hublogo, body.fx-low .hubleader .hl-aura, body.fx-low .hubleader .hl-aura::after, body.fx-low .hubleader .hl-float, body.fx-low .hubleader .hl-plinth,
body.fx-low .bigplay .bp-glow::before, body.fx-low .bp-wrap::before, body.fx-low .bp-wrap::after, body.fx-low .netdot.on i, body.fx-low .hquest.ready,
body.fx-low #select .detail.swap > *, body.fx-low #hub .lcs-starter, body.fx-low #toast.on .tico .ico, body.fx-low .acf.shake { animation: none !important; }
body.fx-low .bp-wrap { filter: none; }
body.fx-low .bigplay .bp-glow::before { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
.hublogo, .hubleader .hl-aura, .hubleader .hl-aura::after, .hubleader .hl-float, .hubleader .hl-plinth, .bigplay .bp-glow::before, .bp-wrap::before, .bp-wrap::after,
.netdot.on i, .hquest.ready, #select .detail.swap > *, #hub .lcs-starter, #toast.on .tico .ico, .acf.shake, .hubleader .lc::after, .bigplay::after { animation: none !important; }
}
body.theme-midnight #hub { background: radial-gradient(ellipse 70% 60% at 52% 46%, #16092c 0%, #06030c 60%, #000 100%); }
body.theme-midnight .hubtop .profile, body.theme-midnight .hubtop .iconbtn, body.theme-midnight .hdeck, body.theme-midnight .hubstats div, body.theme-midnight .hquest,
body.theme-midnight #select .detail, body.theme-midnight #rules .rsec, body.theme-midnight #rules .rtoc, body.theme-midnight #toast { background: rgba(4, 2, 8, .92); }
body.mobile .hubright .seasonHub { width: auto; bottom: auto; }
body.mobile .hubleader .change { font-size: 22px; padding: 16px 14px; white-space: nowrap; }
#sheet .box.modesheet, #sheet .box.acctsheet { max-width: none; }
#sheet .box.acctsheet { max-height: 880px; overflow-y: auto; overscroll-behavior: contain; }
.acctsheet.picking .acct, .acctsheet.picking .acct-info, .acctsheet.picking .acct-note { display: none; }
.avp-head .avp-done { margin-left: auto; }
#hub .navbar, #hub .pill, #hub .hubtop .profile, #hub .netdot, #hub .iconbtn, #hub .locChip, #hub .seasonHub .shMain { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#hub .navbar { background: linear-gradient(180deg, rgba(22, 12, 44, .97), rgba(8, 4, 18, .98)); }
.hublogo { animation: none; }
.hubleader { left: 104px; top: 116px; width: 262px; }
.hubleader .lc { width: 262px; height: 390px; }
.hubleader .hl-aura { left: -70px; right: -70px; top: -50px; height: 490px; opacity: .8; animation-duration: 8s; }
.hubleader .hl-aura::after { display: none; }
.hubleader .hl-float { animation-duration: 8s; }
.hubleader .hl-plinth { margin: 4px 24px 0; animation-duration: 8s; }
.hubleader .change { margin-top: 8px; font-size: 15px; padding: 11px 14px; }
.hubleader .lc::after, .bigplay::after { background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .26) 50%, transparent 80%); background-size: 100% 100%;
width: 45%; left: -50%; right: auto; animation: lcSheenX 7s ease-in-out infinite; will-change: transform; }
.bigplay::after { background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); animation-duration: 5s; }
@keyframes lcSheenX { 0%, 72% { transform: translateX(0); } 100% { transform: translateX(340%); } }
.hubright { top: 116px; width: 420px; gap: 12px; }
.bp-wrap { filter: none; }
.bigplay { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -4px 0 rgba(90, 50, 0, .35) inset, 0 0 0 5px rgba(12, 6, 26, .75), 0 0 0 6px rgba(232, 186, 90, .45), 0 22px 44px rgba(0, 0, 0, .6), 0 0 46px rgba(242, 193, 78, .28); }
.bigplay .bp-glow::before { animation-duration: 3.6s; }
.hubright .locChip { align-self: stretch; }
.hubstats, .hquest { display: none; }
.hubquests { position: absolute; left: 104px; right: 84px; bottom: 116px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.hq-head { display: flex; align-items: center; gap: 16px; padding: 0 4px; }
.hq-head b { display: flex; align-items: center; gap: 9px; font: 800 13px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #fff0cc; }
.hq-head b .ico { width: 18px; height: 18px; }
.hq-head b i { font-style: normal; letter-spacing: .08em; padding: 4px 8px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c); font-size: 11px; }
.hq-time { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.hq-time .ico { width: 14px; height: 14px; }
.hq-time em { font-style: normal; color: var(--gold-1); font-weight: 700; }
.hq-row { display: flex; gap: 12px; align-items: stretch; }
.hq-row .seasonHub { position: relative; right: auto; bottom: auto; width: auto; flex: 0 0 350px; gap: 0; }
.hq-row .seasonHub .shMain { height: 100%; border-color: rgba(232, 186, 90, .4); }
.hq-row .seasonHub .shArt { width: 86px; }
.hq-row .seasonHub .shTxt { padding: 9px 14px 9px 6px; gap: 2px; justify-content: center; }
.hq-row .seasonHub .shTxt > b { font-size: 18px; }
.hq-row .seasonHub .shEy { font-size: 10px; } .hq-row .seasonHub .shEv { font-size: 12px; } .hq-row .seasonHub .shTr { font-size: 10px; }
.hq-cards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .82fr); gap: 12px; }
.hq { position: relative; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
background: linear-gradient(180deg, rgba(28, 16, 54, .94), rgba(12, 7, 26, .96)); border: 1px solid rgba(232, 186, 90, .2); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
transition: transform .25s var(--ease-back), border-color .25s; }
.hq:hover { transform: translateY(-3px); border-color: var(--gold-line); }
.hq p { margin: 0; font-size: 14px; line-height: 1.3; color: #efe6ff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hq p b { font-family: var(--font-title); color: var(--gold-1); letter-spacing: .04em; margin-right: 4px; }
.hq-foot { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.hq-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hq-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b98aff, var(--gold-1)); transition: width .6s var(--ease-out); }
.hq-n { font: 800 13px/1 var(--font-ui); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hq-gold { display: flex; align-items: center; gap: 5px; font: 900 15px/1 var(--font-title); color: #ffe7a8; }
.hq .coin { width: 16px; height: 16px; display: inline-block; flex: none; }
.hq .packicon { width: 12px; height: 17px; display: inline-block; flex: none; }
.hq-claim { margin-left: auto; padding: 7px 12px; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.hq-claim .coin { width: 14px; height: 14px; }
.hq.ready { border-color: rgba(242, 193, 78, .75); background: linear-gradient(180deg, rgba(64, 40, 20, .95), rgba(20, 10, 26, .96)); }
.hq.ready::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 22px rgba(242, 193, 78, .45); opacity: .5; animation: lcReadyGlow 2.6s ease-in-out infinite; }
@keyframes lcReadyGlow { 50% { opacity: 1; } }
.hq.claimed { opacity: .55; }
.hq.claimed .hq-bar i { background: linear-gradient(90deg, #7dffb0, #3cc47a); }
.hq-done { display: flex; align-items: center; gap: 5px; font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #9dffc4; }
.hq-done .ico { width: 14px; height: 14px; }
.hq.claiming { animation: lcClaimPop .6s var(--ease-back); }
@keyframes lcClaimPop { 40% { transform: scale(1.05); } }
.hq-week { background: linear-gradient(180deg, rgba(40, 22, 80, .92), rgba(14, 8, 28, .95)); }
.hq-pips { flex: 1; display: flex; gap: 6px; }
.hq-pips i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.hq-pips i.rd { background: rgba(242, 193, 78, .5); }
.hq-pips i.on { background: linear-gradient(90deg, #b98aff, var(--gold-1)); }
#hub .lcs-starter { left: 420px; right: 540px; top: 250px; bottom: auto; }
#hub .cz-hubpet { left: 378px; top: 392px; bottom: auto; }
#toast { top: 96px; right: 24px; left: auto; bottom: auto; max-width: 420px; transform: translate(24px, 0) scale(.96); }
#toast.on { transform: translate(0, 0) scale(1); }
body[data-screen="hub"] #toast { top: auto; bottom: 26px; max-width: 360px; }
body[data-screen="deckbuilder"] #toast { right: 430px; }
body.mobile .hubleader { top: 118px; left: 64px; width: 232px; }
body.mobile .hubleader .lc { width: 232px; height: 345px; }
body.mobile .hubleader .hl-aura { height: 440px; }
body.mobile .hubleader .change { font-size: 17px; letter-spacing: .04em; padding: 13px 8px; }
body.mobile .hubright { top: 118px; right: 60px; width: 540px; }
body.mobile .bigplay { padding: 16px 20px 18px; }
body.mobile .bigplay .bp-t { font-size: 78px; }
body.mobile .hubright .locChip { font-size: 19px; }
body.mobile .hubquests { left: 60px; right: 60px; bottom: 146px; gap: 10px; }
body.mobile .hq-head b { font-size: 19px; }
body.mobile .hq-head b .ico { width: 26px; height: 26px; }
body.mobile .hq-head b i { font-size: 16px; }
body.mobile .hq-time { font-size: 19px; }
body.mobile .hq-time .ico { width: 20px; height: 20px; }
body.mobile .hq-row .seasonHub { flex-basis: 440px; width: auto; bottom: auto; }
body.mobile .hq-row .seasonHub .shArt { width: 100px; }
body.mobile .hq-row .seasonHub .shTxt > b { font-size: 25px; }
body.mobile .hq-row .seasonHub .shEy { font-size: 14px; }
body.mobile .hq-row .seasonHub .shEv, body.mobile .hq-row .seasonHub .shTr { font-size: 16px; }
body.mobile .hq { min-height: 118px; padding: 12px 18px; border-radius: 18px; gap: 8px; }
body.mobile .hq p { font-size: 21px; }
body.mobile .hq-bar, body.mobile .hq-pips i { height: 9px; }
body.mobile .hq-n { font-size: 19px; }
body.mobile .hq-gold { font-size: 22px; }
body.mobile .hq .coin { width: 22px; height: 22px; }
body.mobile .hq .packicon { width: 16px; height: 23px; }
body.mobile .hq-claim { font-size: 19px; padding: 10px 16px; }
body.mobile .hq-done { font-size: 17px; }
body.mobile #hub .lcs-starter { left: 330px; right: 640px; top: 150px; bottom: auto; }
body.mobile #hub .cz-hubpet { left: 312px; top: 330px; bottom: auto; }
body.mobile #toast { top: 112px; right: 28px; bottom: auto; max-width: 620px; }
body.mobile[data-screen="hub"] #toast { top: 330px; bottom: auto; left: 50%; right: auto; max-width: 640px; transform: translate(-50%, 12px) scale(.96); }
body.mobile[data-screen="hub"] #toast.on { transform: translate(-50%, 0) scale(1); }
body.mobile[data-screen="deckbuilder"] #toast { right: 566px; max-width: 560px; }
body.fx-low .hq.ready::after, body.fx-low .hq.claiming, body.fx-low .hubleader .lc::after, body.fx-low .bigplay::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hq.ready::after, .hq.claiming, .hubleader .lc::after, .bigplay::after { animation: none !important; } }
body.theme-midnight .hq { background: rgba(4, 2, 8, .94); }
.avring.medal .av { background-position: center !important; }
.acct-hero::before { left: 42%; -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); opacity: .7; }
.hubright .chChip { display: flex; align-items: stretch; gap: 0; border-radius: 14px; background: rgba(10, 6, 22, .8); border: 1px solid rgba(232, 186, 90, .22); overflow: hidden; }
.chChip .chc-go { appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; color: #cbb9ee; font: 600 13px/1.3 var(--font-ui); text-align: left; cursor: pointer; }
.chChip .chc-go b { color: #fff4d6; font-weight: 800; }
.chChip .chc-go .ico { width: 18px; height: 18px; flex: none; }
.chChip .chc-go:hover { color: #fff4d6; }
.chChip .chc-x { appearance: none; flex: none; width: 38px; border: 0; border-left: 1px solid rgba(232, 186, 90, .16); background: none; color: #cbb9ee; font: 700 18px/1 var(--font-ui); cursor: pointer; }
.chChip .chc-x:hover { color: #fff4d6; }
body.mobile:not(.portrait) .chChip .chc-go { font-size: 18px; padding: 12px 16px; } body.mobile:not(.portrait) .chChip .chc-x { width: 52px; font-size: 26px; }
.modesheet .mode.ms-first { box-shadow: 0 0 0 2px rgba(242, 193, 78, .75), 0 0 26px rgba(242, 193, 78, .35); }
.modesheet .ms-learn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 0; text-decoration: none; }
.modesheet .ms-learn span { text-decoration: underline; text-underline-offset: 3px; }
.modesheet .ms-learn .ico { width: 17px; height: 17px; flex: none; }
#solo .solo-learn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; text-decoration: none; }
#solo .solo-learn span { text-decoration: underline; text-underline-offset: 3px; }
#solo .solo-learn .ico { width: 17px; height: 17px; flex: none; }
body.portrait #solo .solo-learn { font-size: 22px; } body.portrait #solo .solo-learn .ico { width: 26px; height: 26px; }
/* css/screens-meta.css */
.mi { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.btn .mi { width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.16em; }
.mi-coin { position: absolute; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 2100;
background: radial-gradient(circle at 35% 30%, #fff5c4, #f2c14e 45%, #9a6a10); box-shadow: 0 0 12px rgba(255, 211, 110, .9), 0 0 0 1px rgba(90, 50, 0, .5) inset; }
.mring .rt { fill: none; stroke: rgba(255, 255, 255, .12); }
.mring .rf { fill: none; stroke: var(--ring, var(--gold-1)); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
.pav { display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1a1030 center / cover no-repeat; }
.pav.lead { background-position: 50% 16%; box-shadow: 0 0 0 2px var(--gold-2), 0 4px 10px rgba(0, 0, 0, .5); }
.pav.med { background-size: 112%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.m-panel { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .24);
background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 240, 200, .05) inset; }
.m-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 800 20px var(--font-title); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); }
.m-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.m-h small { font: 600 12px var(--font-ui); letter-spacing: .08em; text-transform: none; color: var(--muted); }
.m-empty { max-width: 760px; margin: 50px auto 0; padding: 40px 44px 36px; text-align: center; overflow: hidden; }
.m-empty::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--art) var(--pos, center 30%) / cover; opacity: .28; filter: saturate(.9);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.m-empty > * { position: relative; }
.m-empty .ico { width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: var(--gold-1);
background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .6), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 2px var(--gold-2), 0 0 30px rgba(242, 193, 78, .35); }
.m-empty h2 { font: 800 32px var(--font-title); letter-spacing: .08em; margin: 0 0 8px; color: #fff4d6; }
.m-empty p { margin: 0 auto 22px; max-width: 520px; color: #d8ccef; font-size: 16px; line-height: 1.5; }
.m-empty .acts { display: flex; gap: 14px; justify-content: center; }
body.mobile .m-empty h2 { font-size: 42px; } body.mobile .m-empty p { font-size: 22px; max-width: 700px; } body.mobile .m-empty { max-width: 980px; }
body.mobile .m-h { font-size: 26px; } body.mobile .m-h small { font-size: 17px; }
.chron-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 2px 4px 14px; }
.chron-lore { max-width: 900px; }
.chron-lore p { margin: 6px 0 0; color: #d8ccef; font-size: 14px; line-height: 1.45; }
.chron-top .playing { margin: 0; white-space: nowrap; }
.chron-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.chron-ch { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
background: linear-gradient(180deg, color-mix(in srgb, var(--d) 55%, rgba(14, 8, 28, .9)), rgba(12, 6, 26, .92) 55%);
border: 1px solid color-mix(in srgb, var(--c) 40%, rgba(232, 186, 90, .2)); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.chron-ch:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(0, 0, 0, .6), 0 0 26px color-mix(in srgb, var(--c) 25%, transparent); }
.chron-ch.current { border-color: var(--gold-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 193, 78, .35), 0 0 34px rgba(242, 193, 78, .22); }
.chron-ch.restored { border-color: color-mix(in srgb, var(--c) 70%, var(--gold-1)); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); }
.chron-hero { position: relative; height: 150px; flex: none; isolation: isolate; overflow: hidden; }
.chron-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 28%) / cover; transition: transform 1.2s var(--ease-out); }
.chron-ch:hover .chron-hero::before { transform: scale(1.06); }
.chron-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(8, 4, 18, .15) 0%, rgba(8, 4, 18, .1) 35%, color-mix(in srgb, var(--d) 40%, rgba(10, 5, 22, .96)) 100%); }
.chron-ch.sealed .chron-hero::before { filter: grayscale(.75) brightness(.55); }
.chron-num { position: absolute; right: 14px; bottom: 6px; font: 900 44px/1 var(--font-title); color: rgba(255, 240, 200, .16); letter-spacing: .04em; }
.chron-ring { position: absolute; top: 10px; right: 10px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 4, 18, .72); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.chron-ring .mring { position: absolute; inset: 0; --ring: var(--gold-1); }
.chron-ring b { font: 900 17px/1 var(--font-title); color: #fff4d6; } .chron-ring small { font-size: 11px; color: var(--muted); }
.chron-av { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; border-radius: 50%; background: #222 center 16% / cover; border: 2px solid var(--c); box-shadow: 0 0 0 2px rgba(8, 4, 18, .7), 0 6px 14px rgba(0, 0, 0, .5); }
.chron-htxt { position: absolute; left: 14px; right: 14px; bottom: 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.chron-htxt span { display: block; font: 800 10.5px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #fff); }
.chron-htxt b { display: block; font: 800 22px/1.1 var(--font-title); letter-spacing: .05em; color: #fff4d6; }
.chron-ch > p { margin: 0; padding: 10px 14px 4px; font-size: 12.5px; line-height: 1.45; color: #cfc2ea; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 58px; }
.chron-path { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 14px; }
.cnode { appearance: none; position: relative; display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: center; padding: 6px 8px 6px 2px; border-radius: 14px;
border: 1px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 14px var(--font-ui);
transition: transform .25s var(--ease-out), background .25s, border-color .25s; }
.cnode::before { content: ""; position: absolute; left: 34px; top: calc(50% + 29px); height: calc(100% + 6px - 58px); width: 3px; transform: translateX(-50%); z-index: 0; border-radius: 3px;
background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 8px); }
.cnode:last-child::before { display: none; }
.cnode.won::before { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 8px rgba(242, 193, 78, .6); }
.cmed { position: relative; z-index: 1; justify-self: center; width: 58px; height: 58px; border-radius: 50%;
background: var(--art) var(--pos, 50% 35%) / cover no-repeat, #1a0f33; border: 2px solid color-mix(in srgb, var(--c) 45%, #3a2a5a);
box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 8px 18px rgba(0, 0, 0, .55); transition: transform .3s var(--ease-back), box-shadow .3s; }
.cmed::before { content: ""; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.cbadge { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-style: normal;
background: linear-gradient(180deg, #3b2270, #1c0f3a); color: #e9dcff; border: 1.5px solid rgba(232, 186, 90, .55); box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.cnode > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnode b { font-size: 14.5px; line-height: 1.2; }
.cnode small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnode u { display: flex; align-items: center; gap: 5px; text-decoration: none; font-size: 12px; font-weight: 700; color: #ffe08a; min-width: 0; }
.cnode u span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnode u.got { color: #7dffb0; }
.cnode:hover:not(:disabled) { background: rgba(255, 255, 255, .05); transform: translateX(3px); }
.cnode:hover:not(:disabled) .cmed { transform: scale(1.08); }
.cnode.won .cmed { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 4px rgba(242, 193, 78, .45), 0 8px 18px rgba(0, 0, 0, .55); }
.cnode.won .cmed::before { background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: cShine 5.5s ease-in-out infinite; }
.cnode.won .cbadge { background: linear-gradient(180deg, #ffe39a, #d99a2a); color: #2b1600; border-color: #fff0c2; }
@keyframes cShine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.cnode.open { background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); border-color: rgba(242, 193, 78, .45); }
.cnode.open .cmed { border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; }
.cnode.open .cbadge { background: linear-gradient(180deg, #8a55e0, #4a1f9a); color: #fff; border-color: var(--gold-1); }
@keyframes cPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 4px rgba(242, 193, 78, .7), 0 0 0 4px rgba(242, 193, 78, 0); }
50% { box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 5px rgba(242, 193, 78, .9), 0 0 0 13px rgba(242, 193, 78, .14), 0 0 26px rgba(242, 193, 78, .55); } }
.cnode.locked { cursor: not-allowed; }
.cnode.locked .cmed { filter: grayscale(1) brightness(.42); border-style: dashed; border-color: rgba(190, 160, 255, .35); }
.cnode.locked .cbadge { background: #1a1328; color: #8e82ab; border-color: rgba(190, 160, 255, .3); }
.cnode.locked > div { opacity: .55; }
.cnode.boss { grid-template-columns: 66px 1fr; }
.cnode.boss .cmed { width: 64px; height: 64px; border: 3px solid transparent;
background: var(--art) var(--pos, 50% 35%) / cover no-repeat padding-box, conic-gradient(from 0deg, #fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2, #a8741c, #5c3c0a, #f6d98a, #fff0c2) border-box; }
.cnode.boss .cmed::after { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); z-index: 2;
background: linear-gradient(135deg, var(--gold-hi), var(--gold-3)); box-shadow: 0 0 10px rgba(242, 193, 78, .8); }
.cnode.boss b { font-family: var(--font-title); font-weight: 800; letter-spacing: .03em; }
.cnode.boss .cbadge { background: linear-gradient(180deg, #b3261e, #5a0c08); color: #ffe3de; border-color: #ffb3a8; }
.cnode.boss.won .cbadge { background: linear-gradient(180deg, #ffe39a, #d99a2a); color: #2b1600; border-color: #fff0c2; }
.cnode.boss.locked .cmed { border-style: solid; }
body.mobile .chron-lore p, body.mobile .chron-ch > p { display: none; }
body.mobile .chron-lore .af-eyebrow { font-size: 17px; } body.mobile .chron-top .playing { font-size: 20px; }
body.mobile .chron-hero { height: 150px; } body.mobile .chron-htxt b { font-size: 28px; } body.mobile .chron-htxt span { font-size: 14px; }
body.mobile .chron-ring { width: 62px; height: 62px; } body.mobile .chron-ring b { font-size: 21px; } body.mobile .chron-ring small { font-size: 14px; }
body.mobile .cnode { grid-template-columns: 82px 1fr; padding: 8px 8px 8px 2px; }
body.mobile .cmed { width: 72px; height: 72px; } body.mobile .cnode.boss .cmed { width: 78px; height: 78px; }
body.mobile .cnode::before { left: 42px; top: calc(50% + 36px); height: calc(100% + 6px - 72px); }
body.mobile .cbadge { width: 32px; height: 32px; font-size: 18px; }
body.mobile .cnode b { font-size: 21px; } body.mobile .cnode small { font-size: 16px; } body.mobile .cnode u { font-size: 17px; }
#sheet .box.storybox { width: 1060px; max-width: 1100px; padding: 0 0 24px; overflow: hidden; }
.story { position: relative; text-align: left; }
.story-hero { position: relative; height: 200px; isolation: isolate; overflow: hidden; border-radius: 19px 19px 0 0; }
.story-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; animation: stZoom 2.4s var(--ease-out) both; }
.story-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(14, 8, 28, .1) 0%, rgba(14, 8, 28, .25) 45%, rgba(26, 15, 52, .98) 100%), linear-gradient(90deg, rgba(14, 8, 28, .55), transparent 40%, transparent 60%, rgba(14, 8, 28, .55)); }
.story-htxt { position: absolute; left: 262px; right: 228px; bottom: 14px; }
.story-htxt .af-eyebrow { color: color-mix(in srgb, var(--c) 45%, var(--gold-1)); text-shadow: 0 2px 6px #000; animation: stFade .7s .25s both; }
.story-htxt h2 { font: 800 36px/1.08 var(--font-title); letter-spacing: .04em; margin: 6px 0 0; color: #fff4d6; -webkit-text-fill-color: #fff4d6; background: none; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .9));
animation: stTitle 1.1s .15s var(--ease-out) both; }
.story-grid { display: grid; grid-template-columns: 200px 1fr 172px; gap: 28px; align-items: start; padding: 0 30px 0 32px; }
.story-art { margin-top: -150px; position: relative; z-index: 2; animation: stRise .8s .1s var(--ease-out) both; }
.story-art .lc { width: 200px; height: 296px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(232, 186, 90, .4); }
.story.isboss .story-art .lc { box-shadow: 0 24px 50px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 90, 70, .45); }
.story-body { max-height: 380px; overflow-y: auto; padding: 16px 8px 4px 0; }
.scene { border-left: 2px solid var(--gold-2); padding: 2px 0 2px 16px; margin-bottom: 14px; position: relative; }
.scene::before { content: ""; position: absolute; left: -5px; top: -2px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold-1); }
.scene p { margin: 0 0 7px; font: italic 17.5px/1.45 var(--font-card); color: #f1e6ff; animation: stLine .9s var(--ease-out) both; animation-delay: calc(var(--i) * .42s + .55s); }
.teach { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px;
background: linear-gradient(90deg, rgba(242, 193, 78, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(242, 193, 78, .3); animation: stFade .6s 1.4s both; }
.teach span { font: 800 10.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.teach b { font: 800 18px var(--font-title); color: #fff4d6; }
.teach em { grid-column: 1 / -1; font-style: normal; font-size: 14px; color: #d8ccef; line-height: 1.4; }
.histbtn { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .08); color: #ffe08a;
font: 700 14px var(--font-ui); padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: background .2s, transform .2s var(--ease-back); animation: stFade .6s 1.55s both; }
.histbtn:hover { background: rgba(242, 193, 78, .18); transform: translateY(-1px); }
.hist { margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.hist:not([hidden]) { animation: stFade .35s both; }
.hist p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; } .hist em { font-size: 12px; color: var(--muted); }
.foe { margin: 12px 0 8px; font-size: 14px; color: var(--muted); } .foe b { color: #ffcf9a; }
.intents { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; }
.intents > div { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(255, 90, 70, .08); border: 1px solid rgba(255, 90, 70, .3); font-size: 13.5px; }
.intents b { color: #ffcf9a; font-family: var(--font-title); } .intents em { font-style: normal; font-size: 12px; color: #7dffb0; white-space: nowrap; }
.story .playing { text-align: left; margin: 4px 0 0; font-size: 14px; }
.story-reward { margin-top: -120px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 10px 14px; border-radius: 16px;
background: linear-gradient(180deg, rgba(40, 24, 72, .96), rgba(18, 10, 36, .97)); border: 1px solid rgba(242, 193, 78, .5); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(242, 193, 78, .18);
animation: stRise .8s .3s var(--ease-out) both; }
.story-reward .af-eyebrow { font-size: 10.5px; }
.story-reward .rc { position: relative; width: 148px; height: 207px; perspective: 800px; }
.story-reward .rc .card { position: relative; width: 148px; height: 207px; cursor: zoom-in; animation: stFlip .9s .55s var(--ease-back) both; }
.story-reward b { font-family: var(--font-card); font-size: 15px; line-height: 1.2; }
.story-reward span { font-size: 12.5px; color: var(--muted); } .story-reward .plus { color: #ffe08a; font-weight: 700; }
.storybox .actions { margin-top: 16px; padding: 0 30px; }
@keyframes stZoom { from { transform: scale(1.16); filter: brightness(1.6) saturate(.6); } to { transform: none; filter: none; } }
@keyframes stTitle { from { opacity: 0; letter-spacing: .3em; filter: blur(8px) drop-shadow(0 3px 10px rgba(0, 0, 0, .9)); } to { opacity: 1; letter-spacing: .04em; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .9)); } }
@keyframes stFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stLine { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes stRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes stFlip { from { opacity: 0; transform: rotateY(90deg) scale(.9); } to { opacity: 1; transform: none; } }
body.mobile #sheet .box.storybox { width: 1500px; max-width: 1500px; }
body.mobile .story-hero { height: 190px; } body.mobile .story-htxt { left: 262px; right: 250px; } body.mobile .story-htxt h2 { font-size: 44px; } body.mobile .story-htxt .af-eyebrow { font-size: 16px; }
body.mobile .story-grid { grid-template-columns: 200px 1fr 190px; }
body.mobile .story-body { max-height: 440px; }
body.mobile .scene p { font-size: 24px; } body.mobile .teach b { font-size: 25px; } body.mobile .teach span { font-size: 14px; } body.mobile .teach em, body.mobile .hist p { font-size: 21px; }
body.mobile .histbtn, body.mobile .foe, body.mobile .story .playing { font-size: 20px; } body.mobile .story-reward span, body.mobile .story-reward b { font-size: 18px; }
body.mobile .intents > div { font-size: 19px; grid-template-columns: 190px 1fr; } body.mobile .intents em { grid-column: 2; font-size: 17px; }
.bhero { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; max-width: 1420px; margin: 4px auto 0; padding: 30px 44px 30px 40px; overflow: hidden; isolation: isolate;
border-color: rgba(255, 120, 90, .35); }
.bhero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 70% 30%) / cover; opacity: .55; animation: bhDrift 30s ease-in-out infinite alternate; }
.bhero::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(90deg, rgba(14, 6, 22, .96) 0%, rgba(14, 6, 22, .82) 38%, rgba(30, 8, 16, .55) 70%, rgba(14, 6, 22, .7) 100%), radial-gradient(ellipse 60% 80% at 16% 50%, rgba(255, 70, 50, .22), transparent 70%); }
@keyframes bhDrift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-2%); } }
.bcard .lc { width: 300px; height: 445px; box-shadow: 0 0 0 1px rgba(255, 180, 150, .4), 0 0 60px rgba(255, 90, 70, .5), 0 30px 60px rgba(0, 0, 0, .7); animation: overLead 5s ease-in-out infinite; }
.binfo { min-width: 0; }
.binfo .af-eyebrow { color: #ffb39a; }
.binfo h2 { font: 900 50px/1.04 var(--font-title); letter-spacing: .03em; margin: 8px 0 8px; background: linear-gradient(180deg, #fff3e0, #ffcf9a 55%, #e0763a); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(255, 110, 70, .35)); }
.brules { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #eadcf8; max-width: 760px; }
.bints { display: flex; flex-direction: column; gap: 7px; margin: 0 0 20px; max-width: 800px; }
.bints-h { display: flex; align-items: center; gap: 8px; font: 800 12px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #ff9c86; margin-bottom: 2px; }
.bint { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 9px 14px 9px 10px; border-radius: 12px;
background: linear-gradient(90deg, rgba(120, 20, 20, .45), rgba(40, 10, 24, .55)); border: 1px solid rgba(255, 110, 90, .35); animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
.bint > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--font-title); font-style: normal; color: #2a0800; background: linear-gradient(180deg, #ffd0b8, #e0603a); box-shadow: 0 0 12px rgba(255, 110, 70, .5); }
.bint b { display: block; font: 800 16px var(--font-title); color: #fff0e6; letter-spacing: .03em; }
.bint span { display: block; font-size: 13.5px; color: #e6d4ec; }
.bint em { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; padding: 5px 10px; border-radius: 99px; }
.bint em.hit { color: #9fe3ff; background: rgba(111, 211, 255, .12); border: 1px solid rgba(111, 211, 255, .35); }
.bint em.kill { color: #7dffb0; background: rgba(125, 255, 176, .1); border: 1px solid rgba(125, 255, 176, .3); }
.bfoot { display: flex; align-items: center; gap: 26px; margin-bottom: 12px; }
.bfight { font-size: 22px; padding: 18px 36px; letter-spacing: .1em; }
.breward { display: flex; flex-direction: column; gap: 3px; }
.breward span { display: flex; align-items: center; gap: 7px; font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.breward span.done { color: #7dffb0; }
.breward small { font-size: 15px; color: #eadcf8; } .breward b { color: #fff4d6; }
.binfo .playing { text-align: left; margin: 0; }
.bseal { position: absolute; top: 22px; right: 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; height: 104px; justify-content: center; border-radius: 50%; transform: rotate(-12deg);
color: #2b1600; font-size: 34px; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 55%, #a8741c); box-shadow: 0 0 0 4px rgba(14, 6, 22, .8), 0 0 0 6px var(--gold-2), 0 10px 30px rgba(0, 0, 0, .6);
animation: sealIn .7s .3s var(--ease-back) both; }
.bseal span { font: 900 12px var(--font-title); letter-spacing: .14em; text-transform: uppercase; }
@keyframes sealIn { from { opacity: 0; transform: rotate(-30deg) scale(1.8); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.brot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px auto 0; max-width: 1420px; }
.brot .af-eyebrow { margin-right: 6px; }
.brc { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; font-size: 13px; color: var(--muted); background: rgba(14, 8, 28, .7); border: 1px solid rgba(190, 160, 255, .18); }
.brc i { width: 28px; height: 28px; border-radius: 50%; background: center 16% / cover; filter: grayscale(.6) brightness(.8); }
.brc.on { color: #fff4d6; border-color: var(--gold-2); box-shadow: 0 0 16px rgba(242, 193, 78, .25); } .brc.on i { filter: none; box-shadow: 0 0 0 2px var(--gold-1); }
body.mobile .bhero { grid-template-columns: 290px 1fr; gap: 36px; padding: 22px 34px; max-width: none; }
body.mobile .bcard .lc { width: 290px; height: 430px; }
body.mobile .binfo h2 { font-size: 56px; } body.mobile .brules { font-size: 21px; } body.mobile .binfo .af-eyebrow { font-size: 16px; }
body.mobile .bint b { font-size: 21px; } body.mobile .bint span { font-size: 18px; } body.mobile .bint em { font-size: 16px; } body.mobile .bints-h { font-size: 16px; }
body.mobile .bint { padding: 7px 14px 7px 10px; }
body.mobile .brot { display: none; }
body.mobile .breward small { font-size: 20px; } body.mobile .breward span { font-size: 15px; } body.mobile .bfight { font-size: 28px; }
.pzhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; max-width: 1420px; margin: 0 auto 16px; }
.pzhead h2 { font: 800 30px var(--font-title); margin: 4px 0 2px; color: #fff4d6; letter-spacing: .04em; }
.pzhead p { margin: 0; color: #d8ccef; font-size: 15px; } .pzhead p b { color: var(--gold-1); }
.pzprog { width: 260px; text-align: right; }
.pzprog b { font: 900 34px/1 var(--font-title); color: #fff4d6; } .pzprog small { font-size: 18px; color: var(--muted); } .pzprog > span { margin-left: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pzprog .qbar { height: 8px; margin-top: 8px; } .pzprog .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.puzzles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1420px; margin: 0 auto; }
.puzzles .puzzle { appearance: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 0; text-align: left; color: var(--ink); font: inherit;
background: var(--art) var(--pos, center 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); }
.puzzles .puzzle:hover { border-color: var(--gold-1); }
.puzzles .puzzle .n { position: absolute; top: 12px; left: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--font-title); color: #2b1600;
background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 0 3px rgba(8, 4, 18, .75), 0 6px 14px rgba(0, 0, 0, .5); }
.pzt { display: flex; flex-direction: column; gap: 5px; padding: 60px 16px 16px; background: linear-gradient(180deg, transparent, rgba(8, 4, 18, .85) 38%, rgba(8, 4, 18, .96)); }
.pzt b { font: 800 19px var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.pzt em { font-style: normal; font-size: 13px; line-height: 1.4; color: #d8ccef; }
.pzt i { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-style: normal; font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); }
.puzzles .puzzle.solved { border-color: rgba(125, 255, 176, .45); }
.puzzles .puzzle.solved .pzt i { color: #7dffb0; }
.pzseal { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #06301a;
background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); box-shadow: 0 0 0 3px rgba(8, 4, 18, .75), 0 0 18px rgba(125, 255, 176, .55); }
body.mobile .pzhead h2 { font-size: 38px; } body.mobile .pzhead p { font-size: 20px; } body.mobile .pzprog > span { font-size: 16px; }
body.mobile .puzzles { max-width: none; } body.mobile .puzzles .puzzle { min-height: 300px; }
body.mobile .pzt b { font-size: 25px; } body.mobile .pzt em { font-size: 18px; } body.mobile .pzt i { font-size: 16px; } body.mobile .puzzles .puzzle .n { width: 54px; height: 54px; font-size: 25px; }
.runintro { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; max-width: 1420px; margin: 4px auto 0; padding: 34px 40px; text-align: left; overflow: hidden; isolation: isolate; }
.runintro::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; opacity: .3; }
.runintro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .95) 30%, rgba(14, 8, 28, .7)); }
.runintro h2 { font: 900 46px var(--font-title); margin: 6px 0 8px; letter-spacing: .05em; color: #fff4d6; }
.runintro .lead { text-align: left; margin: 0 0 16px; max-width: none; color: #e0d4f4; font-size: 16px; line-height: 1.5; }
.rrules { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rrules li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #d8ccef; }
.rrules .mi { font-size: 20px; color: var(--gold-1); }
.rbest { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .35); color: #eadcf8; font-size: 14px; }
.rbest .mi { color: var(--gold-1); } .rbest b { color: #fff4d6; font-family: var(--font-title); font-size: 18px; }
.rpick { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rpick .runleaders { display: grid; grid-template-columns: repeat(3, 140px); gap: 14px; margin: 4px 0 6px; }
.rpick .rl { border-radius: 12px; transition: transform .3s var(--ease-back), filter .3s; filter: saturate(.7) brightness(.8); }
.rpick .rl:hover { filter: none; transform: translateY(-5px); }
.rpick .rl.on { filter: none; transform: translateY(-5px); }
.rpick .rl .lc { width: 140px; height: 208px; }
.runhead { display: flex; align-items: center; justify-content: space-between; gap: 34px; max-width: 1420px; margin: 0 auto 16px; padding: 14px 26px; flex-wrap: nowrap; }
.rh-sec { display: flex; flex-direction: column; gap: 8px; }
.rh-relics { flex: 1; align-items: flex-end; }
.floors { position: relative; display: flex; align-items: center; gap: 22px; }
.floors::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 11px); }
.floors .fl { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 900 16px var(--font-title); color: var(--muted);
background: #1a1030; border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.floors .fl.done { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; font-size: 20px; }
.floors .fl.cur { color: #fff; background: linear-gradient(180deg, #8a55e0, #4a1f9a); border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; transform: scale(1.12); }
.floors .fl.boss { width: 50px; height: 50px; font-size: 22px; color: #ffb3a8; border: 3px solid transparent;
background: linear-gradient(#3a0c14, #1a0610) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.floors .fl.boss.cur { color: #fff; background: linear-gradient(#b3261e, #5a0c08) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.lives { display: flex; gap: 6px; letter-spacing: 0; }
.hrt .mi { width: 32px; height: 32px; }
.hrt.full { color: #ffc8c0; filter: drop-shadow(0 0 8px rgba(255, 70, 50, .6)); } .hrt.full .mi { fill: #e0342a; }
.hrt.lost { color: #5a4a6a; } .hrt.lost .mi { fill: rgba(0, 0, 0, .35); }
.relics { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.relic { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 99px; background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .35); font-size: 13px; }
.relic i, .offr > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 18px; color: var(--gold-hi);
background: radial-gradient(circle at 40% 35%, #6a3fb8, #1c0f3a 75%); box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 4px rgba(8, 4, 18, .8), 0 0 14px rgba(242, 193, 78, .35); }
.relic b { font-weight: 700; color: #fff4d6; }
.norelic { font-size: 13px; }
.rtitle { font-size: 22px; max-width: 900px; margin: 6px auto 4px; }
.offer { display: flex; gap: 24px; justify-content: center; align-items: stretch; margin: 14px 0; }
.offr { appearance: none; width: 210px; border-radius: 16px; border: 1px solid var(--gold-2); background: radial-gradient(ellipse at 50% 20%, rgba(120, 70, 210, .45), rgba(20, 10, 40, .92) 70%); color: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; cursor: pointer; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); transition: transform .3s var(--ease-back), box-shadow .3s; }
.offr:hover { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(242, 193, 78, .35); }
.offr > i { width: 76px; height: 76px; font-size: 38px; margin-bottom: 6px; }
.offr b { font: 800 18px var(--font-title); } .offr em { font-style: normal; font-size: 13px; color: #d8ccef; line-height: 1.4; }
.nextopp { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 26px 36px; overflow: hidden; isolation: isolate; }
.nextopp::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; opacity: .35; }
.nextopp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .6), rgba(14, 8, 28, .95) 45%); }
.nextopp.boss { border-color: rgba(255, 110, 90, .5); box-shadow: var(--sh-deep), 0 0 40px rgba(255, 90, 70, .25); }
.nextopp .lc { width: 250px; height: 370px; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.nextopp h2 { font: 900 40px var(--font-title); margin: 6px 0; color: #fff4d6; }
.nextopp .lead { text-align: left; margin: 6px 0 20px; max-width: none; }
body.mobile .runintro { max-width: none; padding: 24px 34px; } body.mobile .runintro .lead { font-size: 21px; } body.mobile .rrules li { font-size: 19px; } body.mobile .rbest { font-size: 19px; }
body.mobile .rpick .runleaders { grid-template-columns: repeat(3, 150px); } body.mobile .rpick .rl .lc { width: 150px; height: 222px; }
body.mobile .runhead { max-width: none; } body.mobile .floors .fl { width: 54px; height: 54px; font-size: 20px; } body.mobile .floors .fl.boss { width: 62px; height: 62px; }
body.mobile .hrt .mi { width: 42px; height: 42px; } body.mobile .relic { font-size: 17px; } body.mobile .norelic { font-size: 17px; }
body.mobile .offr b { font-size: 22px; } body.mobile .offr em { font-size: 17px; } body.mobile .nextopp h2 { font-size: 46px; }
.quests { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1420px; margin: 0 auto; }
.qcol { padding: 20px 22px 16px; }
.qcol .m-h small { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.quests .quest { position: relative; display: grid; grid-template-columns: 46px 1fr 78px 108px; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 10px; border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(190, 160, 255, .16); transition: border-color .3s, box-shadow .3s, opacity .3s; }
.qic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #cdb8ff; background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .55), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 1.5px rgba(190, 160, 255, .35); }
.qtxt { min-width: 0; } .qtxt b { font-size: 15px; display: block; line-height: 1.3; } .qtxt > span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quests .qbar { height: 8px; margin: 8px 0 4px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.quests .qbar i { background: linear-gradient(90deg, #7a4ae0, #b98aff); border-radius: 99px; }
.quests .qr { justify-content: flex-end; font-size: 20px; color: #fff4d6; } .quests .qr .coin { width: 22px; height: 22px; }
.quests .quest .btn { justify-self: stretch; }
.quests .quest.ready { border-color: rgba(242, 193, 78, .6); box-shadow: 0 0 22px rgba(242, 193, 78, .18), 0 0 0 1px rgba(242, 193, 78, .25) inset; background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); }
.quests .quest.ready .qic { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 16px rgba(242, 193, 78, .5); }
.quests .quest.ready .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi), var(--gold-1), var(--gold-3)); background-size: 200% 100%; animation: qShim 1.8s linear infinite; }
@keyframes qShim { to { background-position: -200% 0; } }
.quests .quest.claimed { opacity: .62; }
.quests .quest.claimed .qic { color: #06301a; background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); box-shadow: none; }
.quests .quest.claimed .qbar i { background: linear-gradient(90deg, #2f9a5a, #7dffb0); }
.qdone { display: flex; align-items: center; justify-content: center; gap: 6px; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7dffb0; }
.quests .quest.claiming { animation: qPress .3s var(--ease-out) both; }
@keyframes qPress { to { transform: scale(.97); } }
.quests .quest.justclaimed { opacity: 1; animation: qClaim 1.2s var(--ease-out) both; }
.quests .quest.justclaimed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 200, .45) 50%, transparent 70%) -120% 0 / 60% 100% no-repeat; animation: qSweep .9s .1s var(--ease-out) both; }
.quests .quest.justclaimed .qic { animation: qPop .6s var(--ease-back) both; }
@keyframes qClaim { 0% { border-color: var(--gold-hi); box-shadow: 0 0 40px rgba(242, 193, 78, .6); } 100% { border-color: rgba(190, 160, 255, .16); box-shadow: none; } }
@keyframes qSweep { to { background-position: 220% 0; } }
@keyframes qPop { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: none; } }
.qbonus { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 14px; align-items: center; margin-top: 6px; padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .05); }
.qbonus .qpk { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--gold-hi); background: linear-gradient(180deg, #6a3fb8, #2a1258); box-shadow: 0 0 0 1.5px var(--gold-2); }
.qbonus b { display: block; font-size: 15px; color: #fff4d6; } .qbonus div > span { font-size: 12.5px; color: var(--muted); }
.qpips { display: flex; gap: 6px; } .qpips i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(242, 193, 78, .35) inset; }
.qpips i.on { background: var(--gold-1); box-shadow: 0 0 8px rgba(242, 193, 78, .7); }
.qbonus em { font-style: normal; font: 800 15px var(--font-title); color: var(--gold-1); }
.qbonus.got { border-style: solid; border-color: rgba(125, 255, 176, .4); }
body.mobile .quests { max-width: none; gap: 20px; }
body.mobile .quests .quest { grid-template-columns: 56px 1fr 96px 150px; }
body.mobile .qic { width: 54px; height: 54px; font-size: 26px; } body.mobile .qtxt b { font-size: 21px; } body.mobile .qtxt > span { font-size: 16px; }
body.mobile .quests .qr { font-size: 26px; } body.mobile .qbonus b { font-size: 20px; } body.mobile .qbonus div > span { font-size: 16px; } body.mobile .qdone { font-size: 17px; }
.phead { display: grid; grid-template-columns: auto 132px 1fr; grid-template-rows: 1fr auto; gap: 6px 28px; align-items: center; max-width: 1480px; margin: 0 auto 18px; padding: 16px 26px 16px 16px; }
.phead .pcc { grid-row: 1 / 3; cursor: pointer; transition: transform .3s var(--ease-back); }
.phead .pcc:hover { transform: translateY(-3px); }
.plvl { grid-row: 1 / 3; position: relative; width: 112px; height: 112px; display: grid; place-items: center; justify-self: center; }
.plvl .mring { position: absolute; inset: 8px; width: 96px; height: 96px; --ring: var(--gold-1); filter: drop-shadow(0 0 8px rgba(242, 193, 78, .45)); }
.plvl::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .7), rgba(20, 10, 40, .95)); box-shadow: 0 0 0 1px rgba(232, 186, 90, .4) inset; }
.plvl > div { position: relative; text-align: center; }
.plvl b { display: block; font: 900 32px/1 var(--font-title); color: #fff4d6; }
.plvl span { font: 800 10px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-self: end; }
.pstats div { padding: 4px 0 0 14px; border-left: 1px solid rgba(232, 186, 90, .25); }
.pstats b { display: block; font: 900 30px/1.1 var(--font-title); color: #fff4d6; font-variant-numeric: tabular-nums; }
.pstats span { font: 800 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pxp { align-self: start; display: flex; align-items: center; gap: 14px; }
.pxp span { flex: none; font-size: 12px; color: var(--muted); }
.pxp .qbar { flex: 1; height: 6px; margin: 0; } .pxp .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.pname { font: 800 24px var(--font-title); margin-left: 12px; }
.pav.big { width: 110px; height: 110px; }
body.mobile .phead { max-width: none; grid-template-columns: auto 150px 1fr; }
body.mobile .pstats b { font-size: 38px; } body.mobile .pstats span { font-size: 15px; } body.mobile .pxp span { font-size: 17px; } body.mobile .plvl span { font-size: 13px; }
body.mobile .pxp { display: none; } body.mobile .pstats { align-self: center; } body.mobile .phead { grid-template-rows: 1fr; }
.m-h.hh { max-width: 1480px; margin: 4px auto 10px; }
.hlist { display: flex; flex-direction: column; gap: 8px; max-width: 1480px; margin: 0 auto; }
.hrow { position: relative; display: grid; grid-template-columns: 128px 128px minmax(0, 1fr) 170px 150px 110px 128px; gap: 16px; align-items: center; min-height: 72px; padding: 8px 14px 8px 22px;
border-radius: 14px; overflow: hidden; isolation: isolate; background: linear-gradient(90deg, rgba(30, 17, 58, .92), rgba(14, 8, 28, .9)); border: 1px solid rgba(190, 160, 255, .14);
box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; animation: afRise .45s var(--ease-out) both; animation-delay: calc(min(var(--i), 12) * 35ms); }
.hrow:hover { transform: translateX(4px); border-color: rgba(232, 186, 90, .4); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.hrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #6a5a8a; }
.hrow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art) var(--pos, 30% 30%) / cover; opacity: .2;
-webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); mask-image: linear-gradient(90deg, #000, transparent 45%); }
.hrow.win::before { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); box-shadow: 0 0 14px rgba(242, 193, 78, .7); }
.hrow.loss::before { background: linear-gradient(180deg, #ff9c86, #b3261e); }
.hres b { display: block; font: 900 20px var(--font-title); letter-spacing: .08em; text-transform: uppercase; }
.hrow.win .hres b { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hrow.loss .hres b { color: #ff9c92; } .hrow.none .hres b { color: var(--muted); }
.hres span { font-size: 12px; color: var(--muted); }
.hvs { display: flex; align-items: center; gap: 6px; }
.hl { width: 50px; height: 50px; border-radius: 50%; background: #1a1030 center / cover; box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 4px rgba(8, 4, 18, .8), 0 6px 12px rgba(0, 0, 0, .5); }
.hl.opp { box-shadow: 0 0 0 2px rgba(190, 160, 255, .5), 0 0 0 4px rgba(8, 4, 18, .8), 0 6px 12px rgba(0, 0, 0, .5); }
.hrow.loss .hl:not(.opp) { filter: saturate(.6) brightness(.8); } .hrow.win .hl.opp { filter: saturate(.6) brightness(.8); }
.hvs i { font: 900 12px var(--font-title); font-style: normal; color: var(--gold-2); }
.hwho { min-width: 0; } .hwho b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwho span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmode { min-width: 0; } .hmode small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hchip { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 800 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #e9dcff; background: rgba(168, 107, 255, .2); border: 1px solid rgba(168, 107, 255, .4); }
.hchip.m-ranked { color: #2b1600; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); border-color: var(--gold-hi); }
.hchip.m-friend { color: #9fe3ff; background: rgba(111, 211, 255, .12); border-color: rgba(111, 211, 255, .4); }
.hchip.m-solo { color: #7dffb0; background: rgba(125, 255, 176, .1); border-color: rgba(125, 255, 176, .35); }
.hdate { font-size: 13px; color: #cfc2ea; font-variant-numeric: tabular-nums; }
.hrate { text-align: right; } .hrate b { display: block; font: 900 20px var(--font-title); font-variant-numeric: tabular-nums; } .hrate span { font-size: 12px; color: var(--muted); }
.hrate.up b { color: #7dffb0; } .hrate.down b { color: #ff9c92; } .hrate .muted { font-size: 12px; }
.hrp { justify-self: end; }
body.mobile .m-h.hh, body.mobile .hlist { max-width: none; }
body.mobile .hrow { grid-template-columns: 150px 150px minmax(0, 1fr) 200px 130px 170px; min-height: 96px; }
body.mobile .hdate { display: none; }
body.mobile .hres b { font-size: 25px; } body.mobile .hres span, body.mobile .hwho span, body.mobile .hmode small, body.mobile .hrate span { font-size: 16px; }
body.mobile .hwho b { font-size: 22px; } body.mobile .hl { width: 62px; height: 62px; } body.mobile .hchip { font-size: 15px; } body.mobile .hrate b { font-size: 26px; }
.sgrid { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 18px; max-width: 1480px; margin: 0 auto; align-items: start; }
.sgrid > .m-panel { padding: 18px 20px; }
.m-h.sub { margin-top: 18px; font-size: 16px; }
.swr { display: flex; flex-direction: column; align-items: center; }
.swr .m-h { align-self: stretch; }
.donut { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin: 4px 0 16px; }
.donut .mring { position: absolute; inset: 0; --ring: var(--gold-1); filter: drop-shadow(0 0 10px rgba(242, 193, 78, .35)); }
.donut .mring .rf { animation: ringIn 1.2s var(--ease-out) both; }
@keyframes ringIn { from { stroke-dashoffset: var(--c0); } }
.donut > div { text-align: center; } .donut b { font: 900 48px/1 var(--font-title); color: #fff4d6; } .donut small { font: 800 20px var(--font-title); color: var(--gold-2); }
.donut span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.snums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; }
.snums div { text-align: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 160, 255, .14); }
.snums b { display: block; font: 900 28px var(--font-title); color: #fff4d6; } .snums span { font: 800 10.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sbar2 { display: grid; grid-template-columns: auto 1fr 54px; gap: 12px; align-items: center; margin-bottom: 10px; }
.sav { width: 36px; height: 36px; border-radius: 50%; background: center / cover; box-shadow: 0 0 0 2px var(--gold-2); }
.sbt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sbt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbt em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sbl { min-width: 0; }
.sbtrack { height: 9px; margin-top: 5px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.sbtrack i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #7a4ae0, #b98aff); transition: width 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.sbtrack i.go { width: var(--w); }
.sbar2:has(strong.good) .sbtrack i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.sbar2 strong { text-align: right; font: 900 18px var(--font-title); color: #d8ccef; font-variant-numeric: tabular-nums; } .sbar2 strong.good { color: var(--gold-1); }
.snone { font-size: 13px; margin: 4px 0 8px; }
.topcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tcard { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--art) var(--pos, 50% 35%) / cover, #1a1030; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 8px 16px rgba(0, 0, 0, .4); }
.tcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 4, 18, .92)); }
.tcard b { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 2px 8px; border-radius: 99px; font: 900 13px var(--font-title); color: #2b1600; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.tcard span { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 1; font-size: 11.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .sgrid { max-width: none; } body.mobile .sbt b { font-size: 19px; } body.mobile .sbt em { display: none; } body.mobile .sbar2 strong { font-size: 22px; }
body.mobile .snums span, body.mobile .donut span { font-size: 15px; } body.mobile .tcard span { font-size: 15px; } body.mobile .sav { width: 44px; height: 44px; }
.settings.m-panel { max-width: 1000px; margin: 0 auto; padding: 20px 24px 12px; gap: 0; }
.settings .set { display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; align-items: center; padding: 16px 6px; border: 0; border-radius: 0; background: none; border-top: 1px solid rgba(190, 160, 255, .12); }
.settings .set:first-of-type { border-top: 0; }
.setic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .55), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 1.5px rgba(232, 186, 90, .4); }
.settxt b { font-size: 17px; } .settxt p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.seg.mseg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); gap: 0; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 186, 90, .25); }
.seg.mseg .segpill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 9px; transform: translateX(calc(var(--k) * 100%));
background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(242, 193, 78, .3); transition: transform .35s var(--ease-back); }
.seg.mseg button { position: relative; z-index: 1; background: transparent !important; color: var(--muted); transition: color .25s; }
.seg.mseg button.on { color: #2b1600; }
.seg.mseg button:hover:not(.on) { color: #fff; }
.switch { appearance: none; position: relative; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--muted); font: 800 14px var(--font-ui); }
.switch i { position: relative; width: 62px; height: 32px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(232, 186, 90, .3); transition: background .3s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #e9dcff, #9d8cc2); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .35s var(--ease-back), background .3s; }
.switch.on { color: var(--gold-1); } .switch.on i { background: linear-gradient(180deg, rgba(242, 193, 78, .45), rgba(168, 116, 28, .5)); border-color: var(--gold-1); }
.switch.on i::after { transform: translateX(30px); background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.switch span { width: 28px; text-align: left; }
body.mobile .settings.m-panel { max-width: 1400px; } body.mobile .settxt b { font-size: 24px; } body.mobile .settxt p { font-size: 18px; }
body.mobile .setic { width: 60px; height: 60px; font-size: 28px; } body.mobile .settings .set { grid-template-columns: 64px 1fr auto; }
body.mobile .seg.mseg { grid-template-columns: repeat(var(--n), minmax(130px, 1fr)); } body.mobile .switch { font-size: 20px; } body.mobile .switch i { width: 84px; height: 44px; }
body.mobile .switch i::after { width: 34px; height: 34px; top: 4px; left: 4px; } body.mobile .switch.on i::after { transform: translateX(40px); } body.mobile .switch span { width: 40px; }
.acctpanel { display: grid; grid-template-columns: 74px 1fr auto; gap: 22px; align-items: center; max-width: 1480px; margin: 0 auto; padding: 22px 26px; }
.acctpanel .ico { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .6), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 2px var(--gold-2); }
.acctpanel h2 { margin: 0 0 4px; font: 800 24px var(--font-title); color: #fff4d6; } .acctpanel p { margin: 0; color: #d8ccef; font-size: 15px; }
body.mobile .acctpanel { max-width: none; } body.mobile .acctpanel h2 { font-size: 32px; } body.mobile .acctpanel p { font-size: 20px; }
.mast { max-width: 1480px; }
.mrow { background: linear-gradient(90deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .88)); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; }
.mrow:hover { transform: translateX(4px); border-color: rgba(232, 186, 90, .4); }
.mrow.on { border-color: var(--gold-2); box-shadow: 0 0 22px rgba(242, 193, 78, .2); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, rgba(30, 17, 58, .9)), rgba(14, 8, 28, .88)); }
.mrow .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.mast-detail { position: relative; border-color: rgba(232, 186, 90, .3); box-shadow: var(--sh-deep); background: radial-gradient(ellipse 70% 60% at 20% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(14, 8, 28, .92)); }
.mast-main h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiers { position: relative; }
.tierpip { position: relative; background: rgba(8, 4, 18, .5); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-back); }
.tierpip:hover { transform: translateY(-3px); }
.tierpip b { width: 34px; height: 34px; background: #1a1030; box-shadow: 0 0 0 2px rgba(190, 160, 255, .3); }
.tierpip.got b { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); color: #2b1600; box-shadow: 0 0 0 2px #fff0c2, 0 0 12px rgba(242, 193, 78, .5); }
.tierpip.got { border-color: rgba(242, 193, 78, .45); }
.tierpip.ready { animation: afPulseGold 2.2s ease-in-out infinite; }
.mchal .quest { background: rgba(8, 4, 18, .45); border-color: rgba(190, 160, 255, .14); }
.mchal .quest .qbar i { background: linear-gradient(90deg, #7a4ae0, #b98aff); }
.mchal .quest.ready { border-color: rgba(125, 255, 176, .45); } .mchal .quest.ready .qbar i { background: linear-gradient(90deg, #2f9a5a, #7dffb0); }
.quests .quest .qic { font-size: 21px; } body.mobile .quests .quest .qic { font-size: 26px; }
.quests .quest .qtxt > span { font-size: 12px; } body.mobile .quests .quest .qtxt > span { font-size: 16px; }
.socgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; max-width: 1480px; margin: 0 auto; align-items: start; }
.lbpanel { padding: 18px 20px 16px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 14px; margin: 6px 0 14px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; animation: podIn .7s var(--ease-back) both; animation-delay: calc(var(--i) * 120ms + 100ms); }
.pod.p1 { animation-delay: 60ms; }
@keyframes podIn { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.podav { position: relative; margin-bottom: 6px; transition: transform .3s var(--ease-back); }
.pod:hover .podav { transform: translateY(-4px) scale(1.04); }
.podav .pav { width: 78px; height: 78px; }
.pod.p1 .podav .pav { width: 104px; height: 104px; }
.podav .pav.lead { box-shadow: 0 0 0 3px var(--mc, #c0c7d6), 0 8px 18px rgba(0, 0, 0, .5); }
.pod .podav::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mc) 35%, transparent), transparent 70%); z-index: -1; }
.pod.p1 { --mc: #f6d98a; } .pod.p2 { --mc: #d6dce8; } .pod.p3 { --mc: #d99a66; }
.podrank { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #2b1600;
background: radial-gradient(circle at 40% 35%, #fff, var(--mc) 60%, color-mix(in srgb, var(--mc) 50%, #000)); box-shadow: 0 0 0 2px rgba(8, 4, 18, .85), 0 0 12px color-mix(in srgb, var(--mc) 70%, transparent); }
.pod.p1 .podrank { width: 36px; height: 36px; font-size: 19px; bottom: -10px; }
.pod b { max-width: 100%; margin-top: 8px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod.p1 b { font-size: 18px; }
.podr { font: 900 22px var(--font-title); color: var(--mc); } .pod small { font-size: 12px; color: var(--muted); }
.plinth { align-self: stretch; margin-top: 8px; height: 56px; border-radius: 10px 10px 4px 4px; display: grid; place-items: center;
background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 32%, rgba(30, 17, 58, .9)), rgba(14, 8, 28, .9)); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); border-bottom: 0; }
.pod.p1 .plinth { height: 84px; box-shadow: 0 -8px 30px rgba(242, 193, 78, .18); } .pod.p3 .plinth { height: 40px; }
.plinth i { font: 900 28px var(--font-title); font-style: normal; color: var(--mc); opacity: .75; }
.pod.me .podav .pav { outline: 2px dashed var(--gold-1); outline-offset: 4px; }
table.ranks.lb { font-size: 15px; }
table.ranks.lb td { padding: 8px 10px; border-bottom: 1px solid rgba(190, 160, 255, .08); }
table.ranks.lb tr { cursor: pointer; transition: background .2s; }
table.ranks.lb tr:hover td { background: rgba(255, 255, 255, .04); }
table.ranks.lb tr:nth-child(-n+3) td:first-child { color: var(--muted); font-weight: 800; }
table.ranks.lb td.rk { width: 44px; text-align: center; color: var(--muted); font: 800 15px var(--font-title); }
table.ranks.lb td.pl { display: flex; align-items: center; gap: 12px; font-weight: 700; }
table.ranks.lb td.pl .pav { width: 36px; height: 36px; }
table.ranks.lb td.rt { width: 90px; text-align: right; font: 900 17px var(--font-title); color: #fff4d6; }
table.ranks.lb td.wl { width: 80px; text-align: right; color: var(--muted); }
table.ranks.lb tr.me td { background: linear-gradient(90deg, rgba(242, 193, 78, .16), rgba(242, 193, 78, .04)); }
table.ranks.lb tr.me td:first-child { box-shadow: 3px 0 0 var(--gold-1) inset; }
.youtag { font-style: normal; font: 800 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; color: #2b1600; background: var(--gold-1); }
.none { color: var(--muted); text-align: center; padding: 20px !important; }
.lbnote { margin: 10px 4px 0; font-size: 13px; color: var(--ink-dim); }
body.mobile .lbnote, body.portrait .lbnote { font-size: 18px; }
.lbme { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center; margin-top: 12px; padding: 10px 14px; border-radius: 12px;
background: linear-gradient(90deg, rgba(242, 193, 78, .14), rgba(255, 255, 255, .02)); border: 1px solid rgba(242, 193, 78, .45); }
.lbme .pav { width: 42px; height: 42px; }
.lbme b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); } .lbme span { font-size: 15px; font-weight: 700; }
.lbme em { font-style: normal; font: 900 22px var(--font-title); color: #fff4d6; } .lbme strong { font: 900 22px var(--font-title); color: var(--gold-1); }
.soclist { display: flex; flex-direction: column; gap: 8px; }
.socrow { display: grid; grid-template-columns: 30px 54px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 160, 255, .12); }
.socrow .rk { font: 800 15px var(--font-title); font-style: normal; color: var(--muted); text-align: center; }
.socrow.top1 .rk { color: #f6d98a; } .socrow.top2 .rk { color: #d6dce8; } .socrow.top3 .rk { color: #d99a66; }
.socrow b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .socrow div > span { font-size: 12px; color: var(--muted); } .socrow div { min-width: 0; }
.socrow strong { font: 900 18px var(--font-title); color: #fff4d6; }
.crest { display: grid; place-items: center; width: 50px; height: 56px; font: 900 13px var(--font-title); letter-spacing: .04em; color: #2b1600;
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); background: linear-gradient(180deg, var(--gold-hi), var(--gold-2) 60%, var(--gold-3)); }
.crest.big { width: 96px; height: 110px; font-size: 24px; position: relative; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.crest.big span { position: relative; z-index: 1; margin-top: -10px; }
.crest.big::before { content: ""; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(180deg, #4a2690, #22104a); }
.crest.big span { color: var(--gold-hi); }
body.mobile .socgrid { max-width: none; } body.mobile table.ranks.lb { font-size: 21px; } body.mobile table.ranks.lb td.pl .pav { width: 48px; height: 48px; }
body.mobile table.ranks.lb td.rt { font-size: 23px; } body.mobile .pod b { font-size: 22px; } body.mobile .pod small { font-size: 16px; }
body.mobile .socrow b { font-size: 20px; } body.mobile .socrow div > span { font-size: 16px; } body.mobile .lbme span { font-size: 20px; } body.mobile .youtag { font-size: 14px; }
.clubjoin { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 1200px; margin: 10px auto 0; }
.cjcard { display: flex; flex-direction: column; overflow: hidden; }
.cjart { height: 140px; background: var(--art) var(--pos, center 30%) / cover; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.cjbody { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 22px; margin-top: -24px; }
.cjbody h3 { font: 800 26px var(--font-title); margin: 0; color: #fff4d6; letter-spacing: .04em; }
.cjbody p { margin: 0 0 4px; color: #d8ccef; font-size: 14px; line-height: 1.45; }
.cjbody input { font: 16px var(--font-ui); padding: 11px 14px; border-radius: 10px; width: 100%; box-sizing: border-box; user-select: text; }
.cjrow { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.cjbody .codein { width: 100%; font-size: 28px; }
.cjbody .btn { align-self: flex-start; margin-top: 4px; }
.clubhead { display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center; max-width: 1480px; margin: 0 auto 18px; padding: 18px 26px; }
.clubhead h2 { font: 900 38px var(--font-title); margin: 4px 0 2px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motto { margin: 0; font: italic 17px var(--font-card); color: #d8ccef; }
.clubhead .invite { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(232, 186, 90, .3); }
.clubhead .roomcode { font-size: 36px; margin: 0 0 6px; }
#social .m-h { max-width: 1480px; margin-left: auto; margin-right: auto; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; max-width: 1480px; margin: 0 auto; }
.member { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px;
background: linear-gradient(90deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .88)); border: 1px solid rgba(190, 160, 255, .14); animation: afRise .45s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.member.me { border-color: rgba(242, 193, 78, .45); background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(14, 8, 28, .88)); }
.mav2 { position: relative; } .mav2 .pav { width: 52px; height: 52px; } .member:not(.online) .mav2 .pav { filter: grayscale(.5) brightness(.8); }
.mav2 .dot { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border: 2px solid #140a26; }
.mtx { min-width: 0; } .mtx b { display: flex; align-items: center; gap: 6px; font-size: 16px; } .mtx > span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own { color: var(--gold-1); font-size: 15px; } .inm { font-size: 12.5px; }
.clubacts { justify-content: flex-end !important; max-width: 1480px; margin: 12px auto 0; }
body.mobile .clubjoin { max-width: none; } body.mobile .cjbody h3 { font-size: 34px; } body.mobile .cjbody p { font-size: 19px; } body.mobile .cjbody input { font-size: 22px; }
body.mobile .clubhead { max-width: none; } body.mobile .motto { font-size: 22px; } body.mobile .members { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
body.mobile .mtx b { font-size: 22px; } body.mobile .mtx > span { font-size: 17px; } body.mobile .mav2 .pav { width: 64px; height: 64px; } body.mobile .member { grid-template-columns: 70px 1fr auto; }
.socPanel { max-width: 1480px; margin: 22px auto 0; }
.socMap, .socDecks { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .24); background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.socMap { overflow: hidden; isolation: isolate; }
.socMap::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(232, 186, 90, .35) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(232, 186, 90, .35) 38px 39px); }
.expPath::before { top: 21px; height: 4px; background: repeating-linear-gradient(90deg, rgba(232, 186, 90, .35) 0 10px, transparent 10px 18px); }
.expFill { top: 21px; height: 4px; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 12px rgba(242, 193, 78, .8); }
.expStop i { background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border-color: rgba(232, 186, 90, .35); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.expStop.hit i { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; }
.expStop.cur i { animation: cPulse 2.2s ease-in-out infinite; }
.expInfo b { font-family: var(--font-title); color: #fff4d6; }
.lent { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(190, 160, 255, .12); }
.lent .lav { border-color: var(--gold-2); }
.livehead { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto 14px; }
.livehead p { flex: 1; margin: 0; color: #d8ccef; font-size: 14px; }
.livepill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font: 800 12px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #e0342a, #8a120c); box-shadow: 0 0 16px rgba(255, 70, 50, .5); }
.livepill i, .rpdot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: liveBlink 1.2s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }
.livelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; }
.live.m-panel { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.lmatch { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 150px; }
.lside { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; isolation: isolate; overflow: hidden; min-width: 0; }
.lside::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 25%) / cover; transition: transform .6s var(--ease-out); }
.lside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(8, 4, 18, .92)); }
.live:hover .lside::before { transform: scale(1.06); }
.lside.a { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); } .lside.b { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); margin-left: -12%; flex-direction: row-reverse; text-align: right; }
.lside .pav { width: 46px; height: 46px; flex: none; }
.lside div { min-width: 0; } .lside b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px #000; } .lside span { font-size: 12px; color: #d8ccef; }
.lvs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
font: 900 20px var(--font-title); color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 0 4px rgba(8, 4, 18, .85), 0 0 24px rgba(242, 193, 78, .6); }
.lfoot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.lfoot span { display: flex; align-items: center; gap: 5px; } .lfoot .btn { margin-left: auto; }
body.mobile .livehead { max-width: none; } body.mobile .livehead p { font-size: 19px; } body.mobile .livelist { max-width: none; }
body.mobile .lside b { font-size: 22px; } body.mobile .lside span, body.mobile .lfoot { font-size: 17px; } body.mobile .lmatch { height: 180px; }
.tradegrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; max-width: 1480px; margin: 0 auto; align-items: start; }
.trade.m-panel { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; margin-bottom: 12px; animation: afRise .45s var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }
.trade.in { border-color: rgba(242, 193, 78, .5); }
.thead { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.thead b { display: block; font-size: 16px; } .tnote { display: block; font: italic 14px var(--font-card); color: #d8ccef; }
.tdir { font: 800 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; color: var(--muted); border: 1px solid rgba(190, 160, 255, .25); }
.trade.in .tdir { color: #2b1600; background: var(--gold-1); border-color: var(--gold-hi); }
.tcols { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.tswap { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-1); border: 1px solid var(--gold-line); }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 99px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.tchip i { width: 26px; height: 26px; border-radius: 50%; background: var(--art) var(--pos, 50% 35%) / cover; }
.trade .tb { display: flex; flex-direction: row; justify-content: flex-end; gap: 8px; }
.trade.done { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 160, 255, .1); margin-bottom: 6px; }
.trade.done em { font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.trade.done.st-accepted em { color: #7dffb0; } .trade.done.st-declined em, .trade.done.st-cancelled em { color: #ff9c92; }
.tempty { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 12px; color: var(--gold-1); font-size: 28px; }
.tempty b { display: block; font-size: 16px; color: #fff4d6; } .tempty span { font-size: 13.5px; color: var(--muted); }
.tradeform.m-panel { gap: 8px; padding: 18px 20px; }
.tradeform .chips span { background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--c, #a86bff) 55%, transparent); }
body.mobile .tradegrid { max-width: none; } body.mobile .thead b { font-size: 21px; } body.mobile .tchip { font-size: 17px; } body.mobile .tempty b { font-size: 21px; } body.mobile .tempty span { font-size: 17px; }
body.mobile .tradeform label { font-size: 16px; } body.mobile .tradeform input { font-size: 20px; } body.mobile .trade.done { font-size: 17px; }
#replayBar.rpbar { left: auto; right: 16px; top: 50px; transform: none; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 99px;
background: linear-gradient(180deg, rgba(30, 17, 58, .95), rgba(10, 5, 22, .96)); border: 1px solid var(--gold-line);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 34px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 240, 200, .1) inset; backdrop-filter: blur(8px); animation: rpIn .6s var(--ease-back) both; }
@keyframes rpIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.rplabel { display: flex; align-items: center; gap: 8px; padding-right: 6px; border-right: 1px solid rgba(232, 186, 90, .25); margin-right: 2px; }
.rplabel .rpdot { background: #ff4a3a; box-shadow: 0 0 8px #ff4a3a; }
#replayBar.paused .rpdot { animation: none; background: var(--muted); box-shadow: none; }
.rplabel b { font: 900 14px var(--font-title); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-1); }
.rplabel span { min-width: 58px; font: 700 12px var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.rpbtn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0; border-radius: 99px; cursor: pointer;
color: #2b1600; font-size: 18px; border: 1px solid #fff0c2; background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .45);
transition: transform .2s var(--ease-back), box-shadow .2s; }
.rpbtn:hover { transform: scale(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .45), 0 0 16px rgba(242, 193, 78, .5); }
.rpbtn .mi { fill: currentColor; }
.rpbtn.wide { padding: 0 14px; font: 700 13px var(--font-ui); color: #f1e6ff; border-color: rgba(232, 186, 90, .35); background: linear-gradient(180deg, rgba(60, 34, 110, .9), rgba(28, 14, 56, .9)); }
.rpbtn.wide .mi { fill: none; font-size: 17px; }
.rpbtn.wide.on { color: var(--gold-hi); border-color: var(--gold-1); }
.rpspd { padding: 3px; border-radius: 99px; } .rpspd .segpill { border-radius: 99px; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); }
.seg.mseg.rpspd { grid-template-columns: repeat(3, 46px); } .rpspd button { padding: 7px 0; font-size: 13px; border-radius: 99px; }
body.mobile #replayBar.rpbar { top: 62px; transform: scale(1.3); transform-origin: 100% 0; animation: none; }
body.mobile #replayBar #rpReveal span { display: none; }
body.mobile .seg.mseg.rpspd { grid-template-columns: repeat(3, 50px); } body.mobile .rpspd button { font-size: 14px; padding: 7px 0; }
body.fx-low #replayBar.rpbar { animation: none; }
#season .sHero { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--sc) 55%, var(--gold-line)); box-shadow: var(--sh-deep), 0 0 34px color-mix(in srgb, var(--sc) 18%, transparent); }
#season .sHero h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
#season .sHero .lc { box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 26px color-mix(in srgb, var(--sc) 45%, transparent); }
.sWeeks { position: relative; gap: 12px; }
.sWeeks::before { content: ""; position: absolute; left: 34px; right: 34px; top: 30px; height: 2px; background: linear-gradient(90deg, var(--gold-2), rgba(232, 186, 90, .2)); z-index: 0; }
.sWeek { position: relative; z-index: 1; padding: 56px 14px 14px; background: linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(14, 8, 28, .92)); border-color: rgba(190, 160, 255, .16);
transition: transform .3s var(--ease-back), border-color .3s, box-shadow .3s; animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.sWeek:hover { transform: translateY(-4px); border-color: rgba(232, 186, 90, .45); }
.wdot { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font-title); color: var(--muted);
background: #1a1030; border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.sWeek.past .wdot { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; font-size: 17px; }
.sWeek.cur { border-color: var(--gold-1); background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(242, 193, 78, .22), transparent 70%), linear-gradient(180deg, rgba(40, 24, 72, .95), rgba(18, 10, 36, .95));
box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 0 30px rgba(242, 193, 78, .3); }
.sWeek.cur .wdot { color: #fff; background: linear-gradient(180deg, #8a55e0, #4a1f9a); border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; }
.sWeek.cur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 200, .16) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: cShine 4.5s ease-in-out infinite; }
.sWeek.sel { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.sWeek b { color: #fff4d6; }
#season .sEvent { background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .24); box-shadow: var(--sh-deep); }
#season .sEvent h3 { color: #fff4d6; }
.sRec { background: rgba(0, 0, 0, .3); border-color: rgba(232, 186, 90, .3); } .sRec b { color: var(--gold-1); }
.sNodes .node { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border-color: rgba(190, 160, 255, .16); }
.sNodes .node i { width: 50px; height: 50px; font-size: 22px; color: #e9dcff; background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border: 2px solid rgba(190, 160, 255, .35); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.sNodes .node span, .sNodes .node.boss span { font-family: var(--font-ui); }
.sNodes .node b { font: 800 16px var(--font-title); letter-spacing: .03em; color: #fff4d6; }
.sNodes .node small { font: 500 12.5px/1.4 var(--font-ui); color: #cfc2ea; text-transform: none; letter-spacing: 0; }
.sNodes .node em { font-style: normal; font: 700 12px var(--font-ui); color: var(--gold-1); }
.sNodes .node.open { border-color: rgba(242, 193, 78, .55); background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); box-shadow: 0 0 20px rgba(242, 193, 78, .15); }
.sNodes .node.open i { border-color: var(--gold-hi); background: linear-gradient(180deg, #8a55e0, #4a1f9a); color: #fff; animation: cPulse 2.2s ease-in-out infinite; }
.sNodes .node.won i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; }
.sNodes .node.locked { opacity: .6; } .sNodes .node.locked i { color: #8e82ab; border-style: dashed; }
.sNodes .node.boss i { border: 3px solid transparent; background: linear-gradient(#3a0c14, #1a0610) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; color: #ffb3a8; }
.sNodes .node.boss.won i { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; color: #2b1600; }
.rchip { background: linear-gradient(180deg, rgba(40, 24, 72, .7), rgba(18, 10, 36, .8)); border-color: rgba(190, 160, 255, .2); transition: transform .25s var(--ease-back), border-color .25s; }
.rchip i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 17px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); box-shadow: 0 0 0 1.5px rgba(232, 186, 90, .45); }
.rchip i .coin { width: 20px; height: 20px; }
.rchip.ready:hover { transform: translateY(-2px); }
.rchip.ready i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); }
.rchip.done em { background: rgba(125, 255, 176, .15); color: #7dffb0; }
.sTrackHead h3 { color: #fff4d6; }
.sXp b { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sTrack { gap: 0; padding: 12px 10px 18px; }
.sMs { position: relative; width: 158px; min-height: 236px; margin: 0 6px; padding: 12px 10px 14px; gap: 8px; background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .9)); border-color: rgba(190, 160, 255, .16);
animation: afRise .45s var(--ease-out) both; animation-delay: calc(min(var(--i), 10) * 30ms); transition: transform .3s var(--ease-back), border-color .3s; }
.sMs::before { content: ""; position: absolute; left: -8px; right: -8px; top: 70px; height: 4px; z-index: 0; background: rgba(255, 255, 255, .1); }
.sMs.reached::before { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 8px rgba(242, 193, 78, .5); }
.sMs > * { position: relative; z-index: 1; }
.sMs .n { font: 900 13px var(--font-title); color: var(--muted); letter-spacing: .1em; }
.sMs i { display: grid; place-items: center; width: 62px; height: 62px; margin: 2px 0 4px; border-radius: 50%; font-size: 28px; color: var(--gold-1);
background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 4px rgba(8, 4, 18, .9); }
.sMs i .coin { width: 32px; height: 32px; }
.sMs.big i { width: 72px; height: 72px; margin-top: -3px; border: 3px solid transparent; background: radial-gradient(circle at 40% 35%, #4a2690, #1c0f3a) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.sMs.big { background: radial-gradient(ellipse 90% 50% at 50% 20%, rgba(242, 193, 78, .14), transparent 70%), linear-gradient(180deg, rgba(34, 20, 64, .92), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .35); }
.sMs .t { font-size: 13px; color: #eadcf8; }
.sMs.reached i { border-color: var(--gold-2); }
.sMs.done { opacity: .72; } .sMs.done i { color: #06301a; background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); border-color: #b8ffcf; }
.sMs.done .x { color: #7dffb0; display: flex; align-items: center; gap: 4px; }
.sMs.ready { border-color: var(--gold-1); box-shadow: 0 0 22px rgba(242, 193, 78, .3); }
.sMs.ready i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; animation: cPulse 2.2s ease-in-out infinite; }
.sMs.ready:hover { transform: translateY(-5px); }
.sMs.locked { opacity: .55; } .sMs.locked i { filter: grayscale(.5); }
.sMs.s-justclaimed, .rchip.s-justclaimed { animation: sClaim .9s var(--ease-back) both; }
.s-justclaimed i { animation: qPop .6s var(--ease-back) both; }
@keyframes sClaim { 0% { transform: scale(1.08); box-shadow: 0 0 44px rgba(242, 193, 78, .8); } 100% { transform: none; } }
.sTrackBar { height: 8px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; } .sTrackBar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi)); box-shadow: 0 0 10px rgba(242, 193, 78, .5); }
.sSlot { background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .22); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.sSlot h3 { display: flex; align-items: center; gap: 10px; color: var(--gold-1); font-size: 18px !important; }
.sSlot h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.sCos { background: rgba(255, 255, 255, .03); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-out), border-color .25s, background .25s; }
.sCos:not(.lock):hover { transform: translateX(3px); border-color: rgba(232, 186, 90, .45); }
.sCos.eq { border-color: var(--gold-1); background: linear-gradient(90deg, rgba(242, 193, 78, .18), rgba(242, 193, 78, .04)); box-shadow: 0 0 16px rgba(242, 193, 78, .18); position: relative; }
.sCos.eq::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: var(--gold-1); box-shadow: 0 0 8px var(--gold-2); }
.sArch { padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); border: 1px solid rgba(232, 186, 90, .22); }
.sArchHead b { color: var(--gold-1); }
.sArchRow .slotc { transition: transform .3s var(--ease-back); } .sArchRow .slotc:hover { transform: translateY(-6px); }
.sArchRow .slotc.owned0 .card { filter: saturate(.3) brightness(.6); }
.sArchRow .slotc .lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; font-size: 26px; }
body.mobile .wdot { width: 40px; height: 40px; font-size: 19px; } body.mobile .sWeek { padding-top: 66px; } body.mobile .sWeeks::before { top: 36px; }
body.mobile .sNodes .node b { font-size: 21px; } body.mobile .sNodes .node small { font-size: 16px; } body.mobile .sNodes .node em { font-size: 16px; }
body.mobile .sMs { width: 196px; } body.mobile .sMs .t { font-size: 17px; } body.mobile .sMs .x { font-size: 15px; } body.mobile .sMs i { width: 74px; height: 74px; font-size: 34px; } body.mobile .sMs::before { top: 80px; }
body.mobile .sSlot h3 { font-size: 24px !important; } body.mobile .sArchHead b { font-size: 24px; } body.mobile .sArchHead span { font-size: 17px; }
body.fx-low .cnode.open .cmed, body.fx-low .cnode.won .cmed::before, body.fx-low .story-hero::before, body.fx-low .story-htxt h2, body.fx-low .story-htxt .af-eyebrow, body.fx-low .scene p,
body.fx-low .teach, body.fx-low .histbtn, body.fx-low .story-art, body.fx-low .story-reward, body.fx-low .story-reward .rc .card, body.fx-low .bhero::before, body.fx-low .bcard .lc, body.fx-low .bint,
body.fx-low .bseal, body.fx-low .floors .fl.cur, body.fx-low .quests .quest.ready .qbar i, body.fx-low .quests .quest.justclaimed, body.fx-low .quests .quest.justclaimed::after, body.fx-low .quests .quest.justclaimed .qic,
body.fx-low .hrow, body.fx-low .pod, body.fx-low .member, body.fx-low .live.m-panel, body.fx-low .trade.m-panel, body.fx-low .livepill i, body.fx-low .rpdot, body.fx-low .donut .mring .rf, body.fx-low .tierpip.ready,
body.fx-low .sWeek, body.fx-low .sWeek.cur .wdot, body.fx-low .sWeek.cur::after, body.fx-low .sNodes .node.open i, body.fx-low .sMs, body.fx-low .sMs.ready i, body.fx-low .s-justclaimed, body.fx-low .s-justclaimed i, body.fx-low .expStop.cur i { animation: none !important; }
body.fx-low .sbtrack i { transition: none; }
@media (prefers-reduced-motion: reduce) {
.cnode.open .cmed, .cnode.won .cmed::before, .story-hero::before, .story-htxt h2, .story-htxt .af-eyebrow, .scene p, .teach, .histbtn, .story-art, .story-reward, .story-reward .rc .card, .bhero::before, .bcard .lc, .bint,
.bseal, .floors .fl.cur, .quests .quest.ready .qbar i, .quests .quest.justclaimed, .quests .quest.justclaimed::after, .quests .quest.justclaimed .qic,
.hrow, .pod, .member, .live.m-panel, .trade.m-panel, .livepill i, .rpdot, .donut .mring .rf, .tierpip.ready, #replayBar.rpbar,
.sWeek, .sWeek.cur .wdot, .sWeek.cur::after, .sNodes .node.open i, .sMs, .sMs.ready i, .s-justclaimed, .s-justclaimed i, .expStop.cur i { animation: none !important; }
.sbtrack i, .seg.mseg .segpill, .switch i::after { transition: none; }
}
body.theme-midnight .m-panel, body.theme-midnight .chron-ch, body.theme-midnight .hrow, body.theme-midnight .member, body.theme-midnight .sMs, body.theme-midnight .sWeek, body.theme-midnight .sSlot, body.theme-midnight .sArch,
body.theme-midnight #season .sEvent, body.theme-midnight .socMap, body.theme-midnight .socDecks, body.theme-midnight .mrow, body.theme-midnight .mast-detail, body.theme-midnight .story-reward { background: linear-gradient(180deg, rgba(10, 8, 14, .94), rgba(4, 3, 6, .96)); }
body.theme-midnight #sheet .box.storybox { background: #06050a; }
body.theme-midnight .story-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 45%, rgba(6, 5, 10, .98) 100%); }
.storylinks { display: flex; flex-wrap: wrap; gap: 8px; } .lorebtn { border-color: rgba(190, 160, 255, .45); background: rgba(168, 107, 255, .1); color: #e2d2ff; }
.blore { margin: 0 0 8px; font: italic 17px/1.5 var(--font-card); color: #f1e6ff; max-width: 780px; } body.mobile .blore { font-size: 22px; }
#season .sbody > .sNote { padding: 22px 26px; border-radius: 16px; text-align: center; font-size: 15px; color: #d8ccef; background: linear-gradient(180deg, rgba(30, 17, 58, .7), rgba(14, 8, 28, .8)); border: 1px dashed rgba(232, 186, 90, .35); } body.mobile #season .sbody > .sNote { font-size: 20px; }
#choiceModal .box > .eyebrow { color: var(--gold-2); letter-spacing: .28em; }
#choiceModal .chopt { background: linear-gradient(180deg, rgba(40, 24, 72, .55), rgba(14, 8, 28, .6)); border: 1px solid rgba(232, 186, 90, .2); transition: transform .35s var(--ease-back), border-color .3s, box-shadow .3s, background .3s; animation: afRise .5s var(--ease-out) both; }
#choiceModal .chopt:nth-child(2) { animation-delay: .08s; } #choiceModal .chopt:nth-child(3) { animation-delay: .16s; }
#choiceModal .chopt:hover { border-color: rgba(232, 186, 90, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
#choiceModal .chopt.sel { border-color: var(--gold-1); background: radial-gradient(ellipse at 50% 30%, rgba(242, 193, 78, .22), rgba(14, 8, 28, .7)); box-shadow: 0 0 0 1px rgba(242, 193, 78, .4), 0 0 40px rgba(242, 193, 78, .35); }
#choiceModal .chopt:has(~ .chopt.sel), #choiceModal .chopt.sel ~ .chopt { opacity: .6; }
body.fx-low #choiceModal .chopt { animation: none; }
.tierpip.s-justclaimed { animation: sClaim .9s var(--ease-back) both; } body.fx-low .tierpip.s-justclaimed { animation: none; }
body.mobile #social .m-h, body.mobile .members, body.mobile .socPanel, body.mobile .clubacts { max-width: none; }
body.mobile .sTrackHead p { font-size: 18px; } body.mobile .sXp span { font-size: 16px; } body.mobile .sArchLead { font-size: 19px; }
body.mobile .expInfo { font-size: 18px; } body.mobile .socMap .sSub, body.mobile .socDecks .sSub { font-size: 16px; }
.nextopp .actions, .runbody > .actions { display: flex; gap: 12px; align-items: center; }
body:not(.portrait) #profile .top > :is(#back, #loreBtn, #museumBtn, #rules) { flex: none; white-space: nowrap; }
body:not(.portrait) #profile .top > h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.portrait) #profile .top > .tabs { flex: 0 0 auto; min-width: 0; max-width: 62%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body:not(.portrait) #profile .top > .tabs::-webkit-scrollbar { display: none; }
body:not(.portrait) #profile .top > .tabs .tab { flex: none; }
/* css/screens-cards.css */
.lci { width: 18px; height: 18px; flex: none; display: block; }
.setgem { display: block; width: 16px; height: 20px; flex: none; clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #fff) 0%, var(--c) 45%, var(--d, #222) 100%); }
.lc-shard { display: inline-flex; align-items: center; gap: 6px; }
.lc-shard > i, i.lc-shard > i { display: block; width: 11px; height: 15px; flex: none; clip-path: polygon(50% 0, 100% 34%, 78% 100%, 22% 100%, 0 34%);
background: linear-gradient(170deg, color-mix(in srgb, var(--c) 30%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); }
.lc-rar { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 99px; white-space: nowrap;
font: 800 11.5px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--r);
background: color-mix(in srgb, var(--r) 13%, rgba(10, 5, 24, .9)); border: 1px solid color-mix(in srgb, var(--r) 55%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--r) 25%, transparent); }
.lc-rar i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--r); box-shadow: 0 0 8px var(--r); flex: none; }
.cl-bar { position: absolute; top: 98px; left: 30px; right: 30px; height: 54px; z-index: 4; display: flex; align-items: center; gap: 14px; }
.cl-bar .fb { flex: 1; min-width: 0; height: 100%; }
.cl-bar .cnt { flex: none; color: var(--ink-dim, #b7a8d6); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.cl-bar .cnt b { color: var(--gold-1, #f6d98a); font: 800 16px var(--font-title); margin-right: 3px; }
.cf { display: flex; align-items: center; gap: 10px; height: 100%; min-width: 0; }
.cf-g { display: flex; gap: 2px; padding: 3px; border-radius: 12px; flex: none;
background: linear-gradient(180deg, rgba(8, 4, 18, .82), rgba(20, 11, 40, .78)); border: 1px solid rgba(232, 186, 90, .2); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.cf-g button, .cf-tog, .cf-clear { appearance: none; border: 0; cursor: pointer; color: #cbb9ee; background: transparent; font: 700 13px var(--font-ui); letter-spacing: .03em;
height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; position: relative;
transition: background .2s, color .2s, transform .2s var(--ease-back), box-shadow .2s; }
.cf-g button:hover, .cf-tog:hover { color: #fff; background: rgba(168, 107, 255, .16); }
.cf-g button:active { transform: scale(.95); }
.cf-g button.on, .cf-tog.on { color: #fff; background: linear-gradient(180deg, rgba(120, 70, 210, .8), rgba(70, 34, 140, .85)); box-shadow: 0 0 0 1px rgba(232, 186, 90, .5) inset, 0 4px 12px rgba(90, 40, 180, .45); }
.cf-set { width: 40px; }
.cf-set .setgem { opacity: .55; transform: scale(.92); transition: opacity .2s, transform .25s var(--ease-back); }
.cf-set:hover .setgem { opacity: .9; }
.cf-set.on { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 45%, transparent), rgba(20, 10, 40, .6) 72%) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 80%, #fff) inset, 0 0 16px color-mix(in srgb, var(--c) 55%, transparent) !important; }
.cf-set.on .setgem { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 5px var(--c)); }
.cf-set.cf-promo .setgem { clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 38% 35%); width: 20px; height: 20px;
background: linear-gradient(135deg, #ff9de2, #9ad8ff 40%, #fff4a8 70%, #b7ffcf); }
.cf-set.cf-promo { --c: #ff9de2 !important; margin-right: 6px; }
.cf-type { padding: 0 12px; }
.cf-type .lci { width: 16px; height: 16px; }
.cf-own button { padding: 0 14px; }
.cf-arch { padding: 0 12px; white-space: nowrap; }
.cf.has-arch .cf-type { padding: 0 11px; }
.cf.has-arch .cf-type span { display: none; }
.cf-arch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.cf-g button.cf-arch.on { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 40%, transparent), rgba(20, 10, 40, .7) 80%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 80%, #fff) inset, 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.cf-tog { padding: 0 14px 0 10px; flex: none; background: linear-gradient(180deg, rgba(8, 4, 18, .82), rgba(20, 11, 40, .78)); border: 1px solid rgba(232, 186, 90, .2); border-radius: 12px; height: 46px; }
.cf-tog i { width: 30px; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .12); position: relative; transition: background .2s; }
.cf-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cbb9ee; transition: transform .25s var(--ease-back), background .2s; }
.cf-tog.on i { background: linear-gradient(90deg, var(--gold-3, #a8741c), var(--gold-2, #e2b04a)); }
.cf-tog.on i::after { transform: translateX(12px); background: #fff4d6; }
.cf-sort, .cf-search { position: relative; display: flex; align-items: center; flex: none; color: var(--gold-2, #e2b04a); }
.cf-sort .lci, .cf-search .lci { position: absolute; left: 11px; width: 16px; height: 16px; pointer-events: none; z-index: 1; }
.cf-sort select { appearance: none; -webkit-appearance: none; height: 46px; padding: 0 30px 0 34px; border-radius: 12px; font: 700 13px var(--font-ui); cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, #e2b04a 50%), linear-gradient(135deg, #e2b04a 50%, transparent 50%) !important; }
.page .cf-sort select { background: linear-gradient(180deg, rgba(8, 4, 18, .85), rgba(22, 12, 44, .85)) !important; }
.cf-sort::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--gold-2, #e2b04a); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.cf-search { flex: 1 1 180px; min-width: 150px; max-width: 320px; }
.cf-search .search { width: 100%; height: 46px; padding: 0 14px 0 36px; border-radius: 12px; font: 500 14px var(--font-ui); user-select: text; -webkit-user-select: text; }
.cf-clear { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(232, 186, 90, .3); background: rgba(12, 6, 28, .7); color: var(--gold-1, #f6d98a); }
.cf-clear:hover { background: rgba(255, 90, 70, .18); color: #fff; }
.cf-clear.hide { opacity: 0; pointer-events: none; transform: scale(.7); }
#collection .grid, #deckbuilder .grid { top: 164px; bottom: 112px; gap: 30px 18px; padding: 16px 10px 40px; align-content: start; }
.grid .slotc { transition: filter .25s; }
.grid .slotc::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -16px; height: 46px; border-radius: 50%; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse at 50% 50%, var(--rc, #b98aff) 0%, transparent 70%); opacity: 0; transform: scaleX(.6); filter: blur(4px);
transition: opacity .3s, transform .35s var(--ease-out); }
.grid .slotc:hover::before { opacity: .85; transform: scaleX(1); }
.grid .slotc .card { transition: transform .32s var(--ease-back), filter .3s; }
.grid .slotc .card:hover { transform: translateY(-10px) scale(1.06); }
.grid .slotc .card:active { transform: translateY(-4px) scale(1.02); transition-duration: .1s; }
.grid .slotc .card .face { transition: box-shadow .3s; }
.grid .slotc .card:hover .face { box-shadow: 0 18px 30px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 22px color-mix(in srgb, var(--rc) 45%, transparent); }
.cpips { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 6; pointer-events: none; }
.cpips i { width: 8px; height: 8px; transform: rotate(45deg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(232, 186, 90, .45); transition: background .3s, box-shadow .3s; }
.cpips i.on { background: linear-gradient(135deg, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; box-shadow: 0 0 8px rgba(242, 193, 78, .8); }
.cpips.pop i.on { animation: pipPop .6s var(--ease-back); }
@keyframes pipPop { 0% { transform: rotate(45deg) scale(.4); } 60% { transform: rotate(45deg) scale(1.6); } 100% { transform: rotate(45deg) scale(1); } }
#collection .owned0 .card { filter: grayscale(.85) brightness(.4) contrast(1.05); }
#collection .owned0 .card:hover { filter: grayscale(.6) brightness(.62); }
.clock { position: absolute; left: 50%; top: 38%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; z-index: 6; pointer-events: none;
background: radial-gradient(circle at 40% 35%, rgba(60, 36, 110, .95), rgba(10, 5, 24, .95)); border: 1px solid rgba(232, 186, 90, .6); color: var(--gold-1, #f6d98a);
box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 14px rgba(242, 193, 78, .25); transition: transform .3s var(--ease-back); }
.clock .lci { width: 20px; height: 20px; }
.slotc:hover .clock { transform: translateY(-10px) scale(1.06); }
.ccraft { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; pointer-events: none; white-space: nowrap;
font: 800 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; color: #2b1600;
background: linear-gradient(180deg, #ffe39a, #d99a2b); box-shadow: 0 0 12px rgba(242, 193, 78, .6); }
.slotc.isnew .card .face { box-shadow: 0 0 0 2px #ffe08a, 0 0 22px rgba(242, 193, 78, .7), 0 6px 16px rgba(0, 0, 0, .55); animation: newGlow 2.4s ease-in-out infinite; }
@keyframes newGlow { 50% { box-shadow: 0 0 0 2px #fff0c2, 0 0 34px rgba(242, 193, 78, .95), 0 6px 16px rgba(0, 0, 0, .55); } }
.cnew { position: absolute; top: -9px; left: -6px; z-index: 7; pointer-events: none; font: 900 11px var(--font-ui); letter-spacing: .16em; padding: 4px 9px; border-radius: 6px;
color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e 55%, #c98a22); box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 14px rgba(242, 193, 78, .7); }
.cg-in { animation: cgIn .38s var(--ease-out) both; }
@keyframes cgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cl-band { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding: 2px 4px 8px; margin-bottom: -12px; border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--gold-line, rgba(232,186,90,.55)), transparent 70%) 1; }
.cl-band b { font: 800 17px var(--font-title); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-1, #f6d98a); }
.cl-band span { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.cl-band + .slotc, .cl-band ~ .cl-band { margin-top: 0; }
.ccraft.promo { background: linear-gradient(180deg, #e9dcff, #a86bff); color: #1a0736; box-shadow: 0 0 12px rgba(168,107,255,.6);
white-space: normal; width: 86%; text-align: center; text-transform: none; letter-spacing: .02em; line-height: 1.2; font-size: 11px; border-radius: 10px; padding: 5px 8px; bottom: 8%; }
body.mobile .cl-band b { font-size: 24px; } body.mobile .cl-band span { font-size: 18px; }
.cl-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 0; font-size: 16px; }
#collection .top { gap: 18px; }
.cl-prog { display: flex; align-items: center; gap: 10px; flex: none; }
.cl-prog svg { width: 46px; height: 46px; transform: rotate(-90deg); overflow: visible; }
.cl-prog circle { fill: none; stroke-width: 4.5; }
.cl-prog .bg { stroke: rgba(255, 255, 255, .1); }
.cl-prog .fg { stroke: var(--gold-2, #e2b04a); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(242, 193, 78, .7)); transition: stroke-dashoffset 1s var(--ease-out); }
.cl-prog b { display: block; font: 800 19px/1.1 var(--font-title); color: #fff4d6; }
.cl-prog b small { font-size: 13px; color: var(--muted); }
.cl-prog span { font: 700 10.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cl-shards { display: flex; gap: 2px; padding: 4px; border-radius: 99px; flex: none;
background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85)); border: 1px solid rgba(232, 186, 90, .3); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.cl-shards .lc-shard { padding: 6px 12px 6px 10px; border-radius: 99px; }
.cl-shards .lc-shard:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.cl-shards .lc-shard b { font: 800 15px var(--font-title); color: #f3ecff; min-width: 14px; }
.cl-shards .lc-shard > i { filter: drop-shadow(0 0 4px var(--c)); }
.albumsbtn { display: inline-flex !important; align-items: center; gap: 8px; flex: none; }
.albumsbtn .lci { width: 18px; height: 18px; }
.albumsbtn em { font: 800 12px var(--font-ui); font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: #ff4a3a; color: #fff; box-shadow: 0 0 10px #ff4a3a; }
#inspect .box.ci-box { display: grid; grid-template-columns: 420px 480px; gap: 48px; padding: 38px 46px; align-items: center; text-align: left; overflow: hidden; max-width: none; }
.ci-box > * { position: relative; z-index: 1; }
.ci-box > .ci-bg { position: absolute; inset: 0; z-index: 0; background-size: cover, cover; background-position: center; opacity: .2; filter: blur(22px) saturate(1.3);
transform: scale(1.2); -webkit-mask: linear-gradient(90deg, #000 20%, transparent 85%); mask: linear-gradient(90deg, #000 20%, transparent 85%); pointer-events: none; }
.ci-x { position: absolute !important; top: 16px; right: 16px; z-index: 3 !important; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
background: rgba(12, 6, 28, .75); border: 1px solid rgba(232, 186, 90, .35); color: var(--gold-1, #f6d98a); transition: background .2s, transform .2s var(--ease-back); }
.ci-x:hover { background: rgba(120, 70, 210, .5); transform: rotate(90deg); }
.ci-stage { width: 420px; height: 588px; }
.ci-halo { position: absolute; inset: 6% -6%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 68%); filter: blur(20px); opacity: .55; pointer-events: none;
animation: ciHalo 4s ease-in-out infinite; }
@keyframes ciHalo { 50% { opacity: .8; transform: scale(1.04); } }
.ci-stage.crafted .ci-halo { animation: ciFlare 1.2s var(--ease-out); }
@keyframes ciFlare { 0% { opacity: .5; transform: scale(1); } 35% { opacity: 1; transform: scale(1.3); filter: blur(10px) brightness(1.8); } 100% { opacity: .55; transform: scale(1); } }
.ci-stage .big { position: relative; z-index: 1; }
.ci-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 7.5cqw; opacity: 0; transition: opacity .3s;
background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .38), rgba(255, 230, 180, .08) 30%, transparent 55%); mix-blend-mode: overlay; }
.card.glaring .ci-glare { opacity: 1; }
.ci-info { max-height: 640px; overflow-y: auto; padding: 2px 8px 2px 0; display: flex; flex-direction: column; gap: 12px; user-select: text; }
.ci-eyebrow { display: flex; align-items: center; gap: 10px; font: 700 12px var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2, #e2b04a); }
#inspect .ci-info h3 { font: 900 34px/1.1 var(--font-title); letter-spacing: .03em; margin: 0; color: #fff4d6; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.ci-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ci-type { color: var(--muted); font-size: 14px; letter-spacing: .06em; }
.ci-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ci-stats > span { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(232, 186, 90, .18); font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ci-stats i { font: 900 17px var(--font-title); font-style: normal; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; text-shadow: 0 1px 2px #000; }
.ci-cost i { background: radial-gradient(circle at 35% 30%, #d9c2ff, #7a3fd8 60%, #3a1a78); box-shadow: 0 0 10px rgba(168, 107, 255, .6); }
.ci-pow i { background: radial-gradient(circle at 35% 30%, #ff9a7a, #b3231a); }
.ci-hp i { background: radial-gradient(circle at 35% 30%, #8fe7ff, #1464b4); }
.ci-rules { font: 20px/1.5 var(--font-card); white-space: pre-line; padding: 14px 18px; border-radius: 12px; background: rgba(8, 4, 18, .55); border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 3px 0 0 var(--c); }
.ci-rules:empty { display: none; }
.ci-flavor { font: italic 17px/1.5 var(--font-card); color: #d7c3a3; padding: 0 4px; }
.ci-tips { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; }
.ci-tips li { position: relative; padding-left: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ci-tips li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-2, #e2b04a); }
#inspect .craftbox { margin-top: 4px; padding: 14px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; align-items: stretch;
background: linear-gradient(180deg, rgba(40, 22, 76, .7), rgba(16, 9, 32, .75)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.ci-own { display: flex; align-items: center; gap: 12px; }
.ci-own > span { font: 700 11px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ci-own .cpips { position: static; transform: none; gap: 9px; }
.ci-own .cpips i { width: 11px; height: 11px; }
.ci-own b { margin-left: auto; font: 800 16px var(--font-title); color: #fff4d6; }
.ci-full { display: flex; align-items: center; gap: 8px; color: #9dffc4; font-size: 13.5px; }
.ci-full .lci { width: 16px; height: 16px; }
.ci-craft { display: flex; flex-direction: column; gap: 8px; }
.ci-shardline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #d8ccef; }
.ci-shardline b { margin-left: auto; font: 800 16px var(--font-title); color: #ff9c92; }
.ci-shardline b.ok { color: #9dffc4; }
.ci-shardline em { font-style: normal; color: var(--muted); }
.ci-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ci-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #fff)); box-shadow: 0 0 10px var(--c); transition: width .6s var(--ease-out); }
#craftBtn { width: 100%; font-size: 16px; padding: 12px; }
#inspect .err { color: #ff9c92; font-size: 13px; min-height: 0; }
#inspect .err:empty { display: none; }
#deckbuilder .top { gap: 18px; }
#deckbuilder .cl-bar, #deckbuilder .grid { right: 426px; }
#deckbuilder .navbar { left: calc(50% - 206px); }
.dl-bar .cf-type span { display: none; }
.dl-bar .cf-type { padding: 0; width: 40px; }
.dl-hint { color: var(--muted); font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }
.dl-pick { position: relative; flex: none; z-index: 20; }
.dl-pickbtn { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 12px; height: 54px; min-width: 260px; max-width: 400px; padding: 0 14px 0 16px; border-radius: 12px; color: var(--ink); text-align: left;
background: linear-gradient(180deg, rgba(40, 24, 72, .8), rgba(18, 10, 36, .85)); border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transition: border-color .2s, transform .2s var(--ease-back); }
.dl-pickbtn:hover { border-color: var(--gold-1, #f6d98a); transform: translateY(-1px); }
.dl-pickbtn > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-pickbtn small { font: 700 10.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2, #e2b04a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pickbtn b { font: 800 17px var(--font-title); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pickbtn .lci { color: var(--gold-1, #f6d98a); }
.dl-dot { display: block; width: 12px; height: 12px; flex: none; transform: rotate(45deg); border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.dl-menu { position: absolute; top: 62px; left: 0; width: 400px; max-height: 600px; overflow-y: auto; padding: 10px; border-radius: 16px; display: none;
background: linear-gradient(180deg, rgba(30, 17, 58, .98), rgba(14, 8, 28, .98)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 30px 60px rgba(0, 0, 0, .7); }
.dl-menu.on { display: block; animation: afPop .3s var(--ease-back); }
.dl-new { appearance: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 10px; cursor: pointer; color: var(--gold-1, #f6d98a); font: 800 14px var(--font-title); letter-spacing: .08em; text-transform: uppercase;
background: rgba(242, 193, 78, .07); border: 1px dashed rgba(232, 186, 90, .55); }
.dl-new:hover { background: rgba(242, 193, 78, .16); }
.dl-fold h5 { display: flex; align-items: center; gap: 7px; margin: 12px 6px 6px; font: 700 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.dl-fold h5 .lci { width: 14px; height: 14px; color: var(--gold-2, #e2b04a); }
.dl-fold h5 em { font-style: normal; margin-left: auto; opacity: .7; }
.dl-fold button { appearance: none; width: 100%; display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left;
background: transparent; border: 1px solid transparent; color: var(--ink); transition: background .15s; }
.dl-fold button:hover { background: rgba(168, 107, 255, .14); }
.dl-fold button.on { background: rgba(120, 70, 210, .35); border-color: rgba(232, 186, 90, .4); }
.dl-fold button b { font: 700 15px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-fold button em { font-style: normal; font: 800 13px var(--font-title); color: var(--muted); }
.dl-fold button em.ok { color: #9dffc4; }
.dl-none { color: var(--muted); font-size: 14px; text-align: center; margin: 14px 0 6px; }
#deckbuilder .decklist.af-panel { top: 96px; right: 24px; width: 386px; bottom: 16px; padding: 16px 16px 12px; gap: 10px; border-radius: 18px; z-index: 5;
background: linear-gradient(180deg, rgba(30, 17, 58, .92), rgba(12, 7, 26, .95)); border: 1px solid rgba(232, 186, 90, .32); }
.dl-head { display: flex; align-items: center; gap: 14px; }
.dl-ring { position: relative; width: 72px; height: 72px; flex: none; }
.dl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dl-ring circle { fill: none; stroke-width: 6; }
.dl-ring .bg { stroke: rgba(255, 255, 255, .08); }
.dl-ring .fg { stroke: #b98aff; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease-out), stroke .3s; filter: drop-shadow(0 0 4px rgba(168, 107, 255, .7)); }
.dl-ring.full .fg { stroke: var(--gold-2, #e2b04a); filter: drop-shadow(0 0 7px rgba(242, 193, 78, .9)); }
.dl-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dl-ring b { font: 900 25px var(--font-title); color: #fff; }
.dl-ring.full b { color: var(--gold-1, #f6d98a); text-shadow: 0 0 12px rgba(242, 193, 78, .7); }
.dl-ring span { font: 700 11px var(--font-ui); color: var(--muted); margin-top: 2px; }
.dl-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#deckbuilder .dl-name { width: 100%; font: 800 18px var(--font-title); letter-spacing: .03em; padding: 8px 12px; border-radius: 10px; user-select: text; -webkit-user-select: text; }
.dl-folder { position: relative; display: flex; align-items: center; color: var(--gold-2, #e2b04a); }
.dl-folder .lci { position: absolute; left: 10px; width: 15px; height: 15px; pointer-events: none; z-index: 1; }
.dl-folder input { width: 100%; padding: 6px 10px 6px 32px; border-radius: 9px; font: 500 13px var(--font-ui); user-select: text; -webkit-user-select: text; }
.dl-stats { padding: 10px 10px 8px; border-radius: 12px; background: rgba(6, 3, 14, .45); border: 1px solid rgba(232, 186, 90, .12); }
#deckbuilder .curve { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 76px; align-items: stretch; }
#deckbuilder .curve .cv { display: flex; flex-direction: column; align-items: center; background: none; min-height: 0; border-radius: 0; }
#deckbuilder .curve .cv em { font: 800 10.5px/12px var(--font-title); font-style: normal; color: var(--gold-1, #f6d98a); height: 12px; }
#deckbuilder .curve .bar { flex: 1; width: 100%; position: relative; background: rgba(255, 255, 255, .035); border-radius: 3px 3px 0 0; min-height: 0; }
#deckbuilder .curve .bar i { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(0); border-radius: 3px 3px 0 0;
background: linear-gradient(0deg, #4f2aa6, #9b6bff 70%, #d9c2ff); box-shadow: 0 0 10px rgba(168, 107, 255, .45); transition: transform .5s var(--ease-back); }
#deckbuilder .curve .cv > span { position: static; font: 700 10px var(--font-ui); color: var(--muted); margin-top: 3px; }
#deckbuilder .curve .cv.z em { opacity: 0; }
.dl-types { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
.dl-types span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.dl-types .lci { width: 14px; height: 14px; color: var(--gold-2, #e2b04a); }
.dl-types b { color: #f3ecff; font: 800 14px var(--font-title); }
.dnote { font-size: 12.5px; color: var(--muted); min-height: 16px; }
.dnote .warn { color: #ffb86b; }
.dnote .ok { color: #9dffc4; display: inline-flex; align-items: center; gap: 6px; }
.dnote .ok .lci { width: 14px; height: 14px; }
#deckbuilder .decklist .rows { gap: 3px; padding: 2px 4px 2px 0; margin-right: -6px; }
#deckbuilder .drow { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; height: 40px; flex: none; padding: 0 8px 0 5px; border-radius: 8px; border: 0; overflow: hidden; cursor: pointer;
background: linear-gradient(90deg, rgba(12, 6, 26, .98) 0%, rgba(12, 6, 26, .88) 36%, rgba(12, 6, 26, .35) 72%, rgba(12, 6, 26, .12) 100%), var(--art) 100% var(--ay, 28%) / 64% auto no-repeat, #140a28;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 3px 0 0 var(--c); transition: transform .18s var(--ease-out), filter .18s, box-shadow .18s; }
#deckbuilder .drow:hover { background-color: #140a28; filter: brightness(1.2); transform: translateX(-3px); box-shadow: inset 0 0 0 1px rgba(255, 138, 122, .45), inset 3px 0 0 #ff6a5a; }
#deckbuilder .drow:active { transform: scale(.98); }
.dr-cost { width: 28px; height: 30px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 48%, var(--d)); }
.dr-cost span { font: 900 15px var(--font-title); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .6); }
.dr-name { font: 700 14px var(--font-title); letter-spacing: .02em; color: #f7efff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sig { font-style: normal; color: #ffd36e; margin-right: 6px; text-shadow: 0 0 8px rgba(255, 211, 110, .9); }
.dr-q { font: 800 13px var(--font-ui); color: var(--gold-1, #f6d98a); padding: 2px 8px; border-radius: 6px; background: rgba(8, 4, 18, .78); border: 1px solid rgba(232, 186, 90, .35); }
#deckbuilder .drow.ghostrow { background-color: #2a0a14; box-shadow: inset 0 0 0 1.5px rgba(255, 84, 84, .85), inset 3px 0 0 #ff4a4a, inset 0 0 18px rgba(255, 60, 60, .45); animation: drowRed 2.4s ease-in-out infinite; }
#deckbuilder .drow.ghostrow:hover { box-shadow: inset 0 0 0 2px #ff6a6a, inset 3px 0 0 #ff4a4a, inset 0 0 24px rgba(255, 60, 60, .6); }
#deckbuilder .drow.ghostrow .dr-name { color: #ffc2c2; }
#deckbuilder .drow.ghostrow .dr-q { color: #ff9a9a; border: 1px dashed rgba(255, 110, 110, .8); }
@keyframes drowRed { 50% { box-shadow: inset 0 0 0 1.5px rgba(255, 84, 84, .95), inset 3px 0 0 #ff4a4a, inset 0 0 26px rgba(255, 60, 60, .7); } }
#deckbuilder .drow.ghostrow.enter { animation: drowIn .42s var(--ease-back) both, drowRedIn .9s ease-out; }
@keyframes drowRedIn { 0%, 40% { background-color: #6a1020; } }
.dr-miss { position: absolute; left: 22px; top: 50%; z-index: 2; width: 16px; height: 16px; margin-top: -17px; display: grid; place-items: center; border-radius: 50%; font: 900 11px/1 var(--font-ui); font-style: normal; color: #fff;
background: #e8303a; box-shadow: 0 0 0 2px #1a0610, 0 0 10px rgba(255, 60, 60, .9); pointer-events: none; }
body.mobile .dr-miss { width: 22px; height: 22px; font-size: 15px; left: 30px; margin-top: -22px; }
body.portrait #deckbuilder .dl-dock .drow .dr-miss { width: 30px; height: 30px; font-size: 19px; left: 52px; margin-top: -34px; }
body.lite #deckbuilder .drow.ghostrow, body.fx-low #deckbuilder .drow.ghostrow { animation: none; }
@media (prefers-reduced-motion: reduce) { #deckbuilder .drow.ghostrow { animation: none; } }
#sheet .box.dl-leave .dl-missn { color: #ff8a8a; }
.drow.enter { animation: drowIn .42s var(--ease-back) both; }
.drow.enter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 240, 200, .45) 50%, transparent 80%); background-size: 250% 100%; animation: drowSweep .7s ease-out .1s both; pointer-events: none; }
@keyframes drowIn { from { opacity: 0; transform: translateX(28px); max-height: 0; } 60% { max-height: 40px; } to { opacity: 1; transform: none; max-height: 40px; } }
@keyframes drowSweep { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.drow.bump .dr-q { animation: qBump .4s var(--ease-back); }
.drow.drop .dr-q { animation: qDrop .3s ease-out; }
@keyframes qBump { 40% { transform: scale(1.45); color: #fff; box-shadow: 0 0 14px rgba(242, 193, 78, .9); } }
@keyframes qDrop { 40% { transform: scale(.8); color: #ff9c92; } }
.drow.leave { animation: drowOut .23s ease-in forwards; pointer-events: none; }
@keyframes drowOut { to { opacity: 0; transform: translateX(34px); height: 0; margin-top: -3px; } }
.dl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 30px 18px; margin: auto 0; border-radius: 14px; border: 1px dashed rgba(232, 186, 90, .3); color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.dl-empty .lci { width: 30px; height: 30px; color: var(--gold-2, #e2b04a); }
.dl-empty b { font: 800 16px var(--font-title); color: #f3ecff; letter-spacing: .04em; }
.dl-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(232, 186, 90, .16); }
.dl-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-main .btn { font-size: 15px; padding: 12px 6px; border-radius: 11px; white-space: nowrap; }
.dl-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.dl-tools button { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; border-radius: 10px; color: #d8ccef; font: 700 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
background: rgba(255, 255, 255, .035); border: 1px solid rgba(232, 186, 90, .18); transition: background .18s, border-color .18s, color .18s, transform .2s var(--ease-back); }
.dl-tools button .lci { width: 18px; height: 18px; color: var(--gold-1, #f6d98a); transition: transform .25s var(--ease-back); }
.dl-tools button:hover { color: #fff; border-color: rgba(232, 186, 90, .6); background: rgba(168, 107, 255, .16); transform: translateY(-2px); }
.dl-tools button:hover .lci { transform: scale(1.12); }
.dl-tools button:active { transform: scale(.95); }
.dl-tools .danger:hover, .dl-tools .danger.arm { color: #fff; border-color: rgba(255, 106, 90, .7); background: rgba(255, 90, 70, .2); }
.dl-tools .danger:hover .lci, .dl-tools .danger.arm .lci { color: #ff8a7a; }
#dbMsg { font-size: 12.5px; min-height: 16px; text-align: center; color: #ff9c92; }
#dbMsg.good { color: #9dffc4; }
.grid .slotc.indeck .card .face { box-shadow: 0 0 0 2px rgba(242, 193, 78, .75), 0 6px 16px rgba(0, 0, 0, .55); }
.grid .slotc.nope { animation: nope .35s; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
#deckbuilder .grid .nown { bottom: 12px; }
.dl-fly { position: absolute; z-index: 1500; border-radius: 10px; background: center / cover no-repeat #1a1030; pointer-events: none; transform-origin: 50% 50%;
box-shadow: 0 0 0 2px rgba(255, 230, 170, .9), 0 0 24px rgba(242, 193, 78, .7), 0 12px 30px rgba(0, 0, 0, .6); will-change: transform, opacity; }
#shop .packs { top: 108px; gap: 12px; perspective: none; }
#shop .shoppack { position: relative; width: 262px; height: 610px; display: block; cursor: pointer; outline: none; }
#shop .shoppack img { animation: none; height: 330px; max-width: 250px; display: block; margin: 0 auto; transition: transform .45s var(--ease-back), filter .35s; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .7)); }
.sp-spot { position: absolute; left: 50%; top: -30px; width: 330px; height: 520px; transform: translateX(-50%); pointer-events: none; opacity: .5; transition: opacity .4s;
clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
background: linear-gradient(180deg, rgba(255, 244, 214, .26), color-mix(in srgb, var(--c) 16%, transparent) 60%, transparent 92%); filter: blur(2px); }
.sp-ped { position: absolute; left: 50%; top: 354px; width: 236px; height: 64px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--c) 55%, #fff) 0%, color-mix(in srgb, var(--c) 35%, transparent) 30%, rgba(10, 5, 24, .92) 70%);
box-shadow: 0 0 0 2px rgba(232, 186, 90, .5), 0 0 0 7px rgba(10, 5, 24, .7), 0 0 0 8px rgba(232, 186, 90, .22), 0 0 40px color-mix(in srgb, var(--c) 40%, transparent), 0 22px 30px rgba(0, 0, 0, .65);
transition: box-shadow .4s; }
.sp-ped i { position: absolute; inset: 10px 28px; border-radius: 50%; border: 1px solid rgba(255, 240, 200, .35); }
.sp-float { position: relative; padding-top: 30px; animation: packBob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
.sp-tilt { position: relative; transition: transform .25s ease-out; transform-style: preserve-3d; }
.sp-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 48%, transparent 60%); background-size: 260% 100%; mix-blend-mode: overlay; }
.sp-info { position: absolute; left: 0; right: 0; top: 436px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
#shop .shoppack .nm { font: 900 22px var(--font-title); letter-spacing: .24em; color: color-mix(in srgb, var(--c) 70%, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 70%, transparent), 0 2px 0 rgba(0, 0, 0, .6); }
.sp-theme { font: 600 11.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#shop .shoppack .price { margin-top: 4px; padding: 8px 22px; gap: 8px; font-size: 20px; color: #fff4d6; border: 1px solid rgba(232, 186, 90, .5);
background: linear-gradient(180deg, rgba(40, 24, 72, .92), rgba(14, 8, 28, .95)); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 240, 200, .12) inset; transition: transform .3s var(--ease-back), box-shadow .3s; }
#shop .shoppack .price.free { border-color: #fff0c2; background: linear-gradient(180deg, #ffe39a 0%, #f0bd4f 45%, #c98a22 100%); color: #2b1600; box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 22px rgba(242, 193, 78, .45), 0 1px 0 rgba(255, 255, 255, .6) inset; }
#shop .shoppack .price.free span { letter-spacing: .14em; }
#shop .shoppack.poor .price { color: #ff9c92; opacity: .85; }
#shop .shoppack:hover .sp-spot, #shop .shoppack:focus-visible .sp-spot { opacity: 1; }
#shop .shoppack:hover img, #shop .shoppack:focus-visible img { transform: translateY(-20px) scale(1.06); filter: drop-shadow(0 40px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 28px color-mix(in srgb, var(--c) 80%, transparent)); }
#shop .shoppack:hover .sp-sheen { opacity: 1; animation: spSheen 1.1s var(--ease-out); }
@keyframes spSheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
#shop .shoppack:hover .sp-ped { box-shadow: 0 0 0 2px var(--gold-1, #f6d98a), 0 0 0 7px rgba(10, 5, 24, .7), 0 0 0 8px rgba(232, 186, 90, .4), 0 0 60px color-mix(in srgb, var(--c) 70%, transparent), 0 22px 30px rgba(0, 0, 0, .65); }
#shop .shoppack:hover .price { transform: translateY(-2px) scale(1.05); }
#shop .shoppack.go img { transform: translateY(-40px) scale(1.14); filter: brightness(1.6) drop-shadow(0 0 40px #fff); transition-duration: .22s; }
#shop .note { bottom: 124px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; font-size: 13.5px; letter-spacing: .05em; color: var(--muted); }
#shop .note > span { display: inline-flex; align-items: center; gap: 8px; }
#shop .note > span + span::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-2, #e2b04a); margin-right: 18px; margin-left: -14px; }
#shop .note .lci { width: 15px; height: 15px; color: var(--gold-2, #e2b04a); }
#shop .note .dupeNote { width: 100%; text-align: center; font-size: 12.5px; opacity: .85; }
#shop .note .err { color: #ff9c92; font-weight: 700; }
#shop .note .err::before { display: none; }
#shop .top .tabs { flex: none; }
#opening { background: radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--d, #321566) 75%, #2a1252) 0%, #120a26 48%, #07040f 80%); overflow: hidden; }
.pk-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pk-rays { position: absolute; left: 50%; top: 46%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; opacity: .8;
background: repeating-conic-gradient(from 0deg, rgba(255, 238, 200, .055) 0deg 5deg, transparent 5deg 15deg);
-webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: pkSpin 120s linear infinite; }
@keyframes pkSpin { to { transform: rotate(360deg); } }
.pk-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(ellipse 45% 55% at 50% 100%, color-mix(in srgb, var(--c, #a86bff) 30%, transparent), transparent 70%); }
.pk-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, var(--fc, #fff6de) 0%, color-mix(in srgb, var(--fc, #fff6de) 40%, transparent) 25%, transparent 62%); mix-blend-mode: screen; }
.pk-flash.go { animation: pkFlash .8s ease-out; }
@keyframes pkFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
#opening.shake .three { animation: pkShake .45s; }
@keyframes pkShake { 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 4px); } 80% { transform: translate(-2px, 1px); } }
#opening .hint { bottom: 118px; animation: none; }
#opening .hint b { display: inline-block; padding: 12px 30px; border-radius: 99px; font: 800 20px var(--font-title); letter-spacing: .26em; color: #fff4d6;
background: rgba(10, 5, 24, .7); border: 1px solid rgba(232, 186, 90, .45); box-shadow: 0 0 30px rgba(168, 107, 255, .35); animation: hintPulse 1.8s ease-in-out infinite; }
.pk-hud { position: absolute; top: 26px; right: 30px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 99px;
background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.pk-hud .lc-shard > i { width: 16px; height: 21px; filter: drop-shadow(0 0 6px var(--c)); }
.pk-hud small { display: block; font: 700 10px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pk-hud b { font: 900 22px/1 var(--font-title); color: #fff4d6; }
#opening .pk-hud { opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s var(--ease-out); }
#opening .pk-hud.show { opacity: 1; transform: none; }
.pk-hud.got { animation: hudGot .5s var(--ease-back); }
@keyframes hudGot { 40% { transform: scale(1.12); box-shadow: 0 0 0 2px var(--gold-1, #f6d98a), 0 0 30px rgba(242, 193, 78, .7); } }
.pk-shardfly { position: absolute; z-index: 20; width: 16px; height: 22px; pointer-events: none; clip-path: polygon(50% 0, 100% 34%, 78% 100%, 22% 100%, 0 34%);
background: linear-gradient(170deg, #fff, #9fe3ff 50%, #3a8ad8); filter: drop-shadow(0 0 6px #6fd3ff); }
#opening .labels { top: 0; bottom: 0; height: auto; z-index: 4; transition: opacity .25s; }
#opening .labels span { position: static; transform: none; padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none; font: inherit; letter-spacing: inherit; color: inherit; }
.pk-lab { position: absolute; transform: translateX(-50%); animation: pkLab .45s var(--ease-back) both; }
@keyframes pkLab { from { opacity: 0; transform: translate(-50%, -10px) scale(.8); } }
#opening .labels .pk-lab .lc-rar { display: inline-flex; padding: 5px 13px 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--r) 13%, rgba(10, 5, 24, .92)); border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); color: var(--r); font: 800 11.5px/1.2 var(--font-ui); letter-spacing: .14em; box-shadow: 0 0 14px color-mix(in srgb, var(--r) 25%, transparent); }
#opening .labels .pk-tag { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 99px; font: 900 13px var(--font-ui); letter-spacing: .16em; animation: pkTag .55s var(--ease-back) both; white-space: nowrap; }
#opening .labels .pk-tag.new { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e 55%, #c98a22); box-shadow: 0 0 18px rgba(242, 193, 78, .8); }
#opening .labels .pk-tag.dupe { color: #d8f4ff; background: rgba(10, 5, 24, .92); border: 1px solid rgba(111, 211, 255, .55); box-shadow: 0 0 14px rgba(111, 211, 255, .35); }
#opening .labels .pk-tag .lc-shard > i { width: 10px; height: 13px; }
@keyframes pkTag { from { opacity: 0; transform: translate(-50%, -60%) scale(.5); } }
.pk-banner { position: absolute; left: 0; right: 0; top: 64px; z-index: 5; text-align: center; pointer-events: none; opacity: 0; }
.pk-banner small { display: block; font: 800 14px var(--font-ui); letter-spacing: .55em; text-transform: uppercase; color: var(--r, #ffcf5a); text-shadow: 0 0 14px var(--r, #ffcf5a); }
.pk-banner b { display: block; margin-top: 6px; font: 900 52px/1.05 var(--font-title); letter-spacing: .06em;
background: linear-gradient(180deg, #fff 0%, var(--gold-hi, #fff0c2) 30%, var(--r, #ffcf5a) 70%, color-mix(in srgb, var(--r, #ffcf5a) 60%, #000) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 22px color-mix(in srgb, var(--r, #ffcf5a) 70%, transparent)); }
.pk-banner.go { animation: pkBanner 2.6s var(--ease-out) forwards; }
@keyframes pkBanner { 0% { opacity: 0; transform: scale(1.35); letter-spacing: .3em; } 14% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } }
#opening .inspectTxt { left: calc(50% - 16px); top: 50%; bottom: auto; transform: translateY(-50%); width: 540px; text-align: left; padding: 22px 26px 18px; border-radius: 18px; z-index: 6;
background: linear-gradient(180deg, rgba(30, 17, 58, .95), rgba(12, 7, 26, .96)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
#opening .inspectTxt.on { display: flex; flex-direction: column; gap: 10px; animation: itIn .35s var(--ease-out) both; }
@keyframes itIn { from { opacity: 0; transform: translate(20px, -50%); } }
.it-eyebrow { display: flex; align-items: center; gap: 9px; font: 700 11.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2, #e2b04a); }
#opening .inspectTxt h3 { margin: 0; font: 900 30px/1.1 var(--font-title); color: #fff4d6; }
.it-tags { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
#opening .inspectTxt p { margin: 0; }
#opening .inspectTxt .it-rules { font: 19px/1.5 var(--font-card); white-space: pre-line; color: #f3ecff; }
#opening .inspectTxt .it-flavor { font: italic 16px/1.5 var(--font-card); color: #d7c3a3; }
.it-hint { font-size: 12px; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }
#opening.zoomed .labels, #opening.zoomed .pk-sum, #opening.zoomed .hint { opacity: 0; }
.pk-sum { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); z-index: 5; display: none; flex-direction: column; align-items: center; gap: 8px; transition: opacity .25s; white-space: nowrap; }
.pk-sum.on { display: flex; animation: pkSum .5s var(--ease-out) both; }
@keyframes pkSum { from { opacity: 0; transform: translate(-50%, 12px); } }
.pk-sumrow { display: flex; gap: 8px; align-items: center; }
.pk-rc { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 6px; border-radius: 99px; font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--r);
background: rgba(10, 5, 24, .82); border: 1px solid color-mix(in srgb, var(--r) 50%, transparent); }
.pk-rc b { min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--font-title); color: #120a20; background: var(--r); }
.pk-sumrow.sub { gap: 20px; font-size: 14px; color: #d8ccef; }
.pk-sumrow.sub span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-2, #e2b04a); margin: 0 14px 2px -10px; vertical-align: middle; }
.pk-sumrow.sub b { color: #9fe3ff; }
.pk-new { color: var(--gold-1, #f6d98a); font-weight: 800; }
#opening .bar { bottom: 34px; z-index: 6; }
#opening .bar .btn { min-width: 190px; }
.pk-fallback { position: absolute; top: 170px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; }
.pk-fcell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pkDeal .55s var(--ease-back) both; animation-delay: calc(var(--i) * 140ms); }
.pk-fcell .card { box-shadow: 0 0 30px color-mix(in srgb, var(--r) 45%, transparent); border-radius: 14px; }
.pk-fcell .pk-tag { position: absolute; top: -12px; padding: 4px 12px; border-radius: 99px; font: 900 12px var(--font-ui); letter-spacing: .14em; font-style: normal; }
.pk-fcell .pk-tag.new { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e); }
.pk-fcell .pk-tag.dupe { color: #d8f4ff; background: rgba(10, 5, 24, .92); border: 1px solid rgba(111, 211, 255, .55); }
@keyframes pkDeal { from { opacity: 0; transform: translateY(60px) rotateY(90deg); } }
body.mobile .cl-bar { top: 112px; height: 72px; left: 24px; right: 24px; }
body.mobile .cf { gap: 12px; }
body.mobile .cf-g button, body.mobile .cf-clear { height: 58px; font-size: 18px; }
body.mobile .cf-set { width: 58px; }
body.mobile .setgem { width: 22px; height: 28px; }
body.mobile .cf-type { width: 58px; padding: 0; }
body.mobile .cf-type span { display: none; }
body.mobile .cf-type .lci, body.mobile .cf-sort .lci, body.mobile .cf-search .lci { width: 24px; height: 24px; }
body.mobile .cf-own button { padding: 0 20px; }
body.mobile .cf-sort select, body.mobile .cf-search .search, body.mobile .cf-tog { height: 66px; font-size: 20px; }
body.mobile .cf-sort select { padding-left: 46px; }
body.mobile .cf-search .search { padding-left: 48px; }
body.mobile .cf-sort .lci, body.mobile .cf-search .lci { left: 14px; }
body.mobile .cf-clear { width: 58px; }
body.mobile .cl-bar .cnt { font-size: 18px; } body.mobile .cl-bar .cnt b { font-size: 22px; }
body.mobile #collection .grid, body.mobile #deckbuilder .grid { top: 196px; bottom: 150px; grid-template-columns: repeat(auto-fill, 190px); gap: 40px 22px; }
body.mobile .grid .slotc, body.mobile .grid .slotc .card { width: 190px; height: 266px; }
body.mobile .cpips { bottom: -24px; gap: 10px; } body.mobile .cpips i { width: 12px; height: 12px; }
body.mobile .clock { width: 64px; height: 64px; margin: -32px 0 0 -32px; } body.mobile .clock .lci { width: 28px; height: 28px; }
body.mobile .ccraft, body.mobile .cnew { font-size: 14px; }
body.mobile .cl-prog svg { width: 60px; height: 60px; } body.mobile .cl-prog b { font-size: 26px; } body.mobile .cl-prog b small { font-size: 18px; } body.mobile .cl-prog span { font-size: 14px; }
body.mobile .cl-shards .lc-shard { padding: 10px 16px 10px 14px; } body.mobile .cl-shards .lc-shard b { font-size: 24px; } body.mobile .lc-shard > i { width: 15px; height: 20px; }
body.mobile .albumsbtn .lci { width: 24px; height: 24px; }
body.mobile #inspect .box.ci-box { grid-template-columns: 460px 800px; gap: 52px; padding: 40px 50px; }
body.mobile .ci-stage, body.mobile #inspect .big, body.mobile #inspect .big .card { width: 460px; height: 644px; }
body.mobile .ci-info { max-height: 740px; gap: 16px; }
body.mobile .ci-x { width: 64px; height: 64px; } body.mobile .ci-x .lci { width: 28px; height: 28px; }
body.mobile .ci-eyebrow { font-size: 17px; } body.mobile #inspect .ci-info h3 { font-size: 46px; }
body.mobile .lc-rar { font-size: 16px; padding: 6px 16px 6px 13px; } body.mobile .ci-type { font-size: 20px; }
body.mobile .ci-stats > span { font-size: 16px; } body.mobile .ci-stats i { width: 42px; height: 42px; font-size: 24px; }
body.mobile .ci-rules { font-size: 28px; } body.mobile .ci-flavor { font-size: 24px; } body.mobile .ci-tips li { font-size: 19px; }
body.mobile .ci-own > span, body.mobile .ci-shardline, body.mobile .ci-full { font-size: 19px; } body.mobile .ci-own b, body.mobile .ci-shardline b { font-size: 24px; }
body.mobile #craftBtn { font-size: 24px; padding: 18px; }
body.mobile #deckbuilder .decklist.af-panel { width: 520px; top: 108px; padding: 18px; }
body.mobile #deckbuilder .cl-bar, body.mobile #deckbuilder .grid { right: 562px; }
body.mobile #deckbuilder .navbar { left: calc(50% - 280px); }
body.mobile .dl-hint { display: none; }
body.mobile .dl-pickbtn { height: 72px; min-width: 340px; } body.mobile .dl-pickbtn small { font-size: 14px; } body.mobile .dl-pickbtn b { font-size: 24px; }
body.mobile .dl-menu { top: 80px; width: 560px; max-height: 700px; }
body.mobile .dl-fold button b { font-size: 21px; } body.mobile .dl-fold button em, body.mobile .dl-fold h5 { font-size: 16px; } body.mobile .dl-new { font-size: 20px; padding: 16px; }
body.mobile .dl-ring { width: 92px; height: 92px; } body.mobile .dl-ring b { font-size: 32px; } body.mobile .dl-ring span { font-size: 15px; }
body.mobile #deckbuilder .dl-name { font-size: 24px; padding: 10px 14px; } body.mobile .dl-folder input { font-size: 18px; padding: 9px 12px 9px 40px; } body.mobile .dl-folder .lci { width: 20px; height: 20px; }
body.mobile #deckbuilder .curve { height: 72px; } body.mobile #deckbuilder .curve .cv em { font-size: 15px; height: 17px; line-height: 17px; } body.mobile #deckbuilder .curve .cv > span { font-size: 15px; }
body.mobile .dl-types span { font-size: 17px; } body.mobile .dl-types b { font-size: 20px; } body.mobile .dl-types .lci { width: 20px; height: 20px; }
body.mobile .dnote, body.mobile #dbMsg { font-size: 18px; }
body.mobile #deckbuilder .drow { height: 52px; grid-template-columns: 42px 1fr auto; }
body.mobile .dr-cost { width: 38px; height: 42px; } body.mobile .dr-cost span { font-size: 21px; }
body.mobile .dr-name { font-size: 20px; } body.mobile .dr-q { font-size: 20px; padding: 3px 11px; }
body.mobile .dl-main .btn { font-size: 22px; padding: 16px 6px; }
body.mobile .dl-tools button { font-size: 14px; padding: 12px 0 10px; } body.mobile .dl-tools button .lci { width: 26px; height: 26px; }
body.mobile .dl-empty { font-size: 19px; } body.mobile .dl-empty b { font-size: 22px; }
@keyframes drowInM { from { opacity: 0; transform: translateX(28px); } }
body.mobile .drow.enter { animation-name: drowInM; }
body.mobile #shop .packs { top: 104px; gap: 30px; }
body.mobile #shop .shoppack { height: 560px; }
body.mobile #shop .shoppack img { height: 270px; max-width: 220px; }
body.mobile .sp-spot { height: 440px; }
body.mobile .sp-ped { top: 292px; }
body.mobile .sp-info { top: 372px; gap: 6px; }
body.mobile .sp-theme { font-size: 15px; white-space: nowrap; }
body.mobile #shop .shoppack .nm { font-size: 28px; }
body.mobile #shop .note .dupeNote { display: none; }
body.mobile .dl-types { display: none; }
body.mobile .sp-theme { font-size: 16px; }
body.mobile #shop .note { bottom: 158px; font-size: 19px; } body.mobile #shop .note .dupeNote { font-size: 17px; }
body.mobile #opening .hint b { font-size: 32px; padding: 16px 38px; }
body.mobile .pk-hud { padding: 12px 24px 12px 16px; } body.mobile .pk-hud small { font-size: 14px; } body.mobile .pk-hud b { font-size: 30px; }
body.mobile #opening .labels .pk-lab .lc-rar { font-size: 17px; padding: 7px 16px; }
body.mobile #opening .labels .pk-tag { font-size: 19px; padding: 7px 16px; }
body.mobile .pk-banner b { font-size: 72px; } body.mobile .pk-banner small { font-size: 20px; }
body.mobile #opening .inspectTxt { width: 820px; padding: 28px 34px; }
body.mobile #opening .inspectTxt h3 { font-size: 44px; } body.mobile .it-eyebrow, body.mobile .it-tags { font-size: 18px; }
body.mobile #opening .inspectTxt .it-rules { font-size: 28px; } body.mobile #opening .inspectTxt .it-flavor { font-size: 23px; } body.mobile .it-hint { font-size: 17px; }
body.mobile .pk-rc { font-size: 17px; } body.mobile .pk-rc b { min-width: 30px; height: 30px; font-size: 18px; } body.mobile .pk-sumrow.sub { font-size: 20px; }
body.mobile .pk-sum { bottom: 150px; }
body.mobile #opening .bar .btn { min-width: 260px; }
body.theme-midnight .cf-g, body.theme-midnight .cf-tog, body.theme-midnight .cl-shards, body.theme-midnight .dl-pickbtn, body.theme-midnight .pk-hud { background: rgba(4, 4, 8, .92); }
body.theme-midnight #deckbuilder .decklist.af-panel, body.theme-midnight .dl-menu, body.theme-midnight #opening .inspectTxt { background: rgba(6, 6, 10, .97); }
body.theme-midnight #opening { background: radial-gradient(ellipse at 50% 52%, #120a1e 0%, #000 70%); }
body.theme-midnight .dl-stats { background: rgba(0, 0, 0, .6); }
body.fx-low .slotc.isnew .card .face, body.fx-low .ci-halo, body.fx-low .pk-rays, body.fx-low .sp-float, body.fx-low #opening .hint b, body.fx-low .cg-in, body.fx-low .drow.enter, body.fx-low .drow.enter::before { animation: none !important; }
body.fx-low .sp-spot { display: none; }
#opening.lite .pk-rays { animation: none; }
@media (prefers-reduced-motion: reduce) {
.slotc.isnew .card .face, .ci-halo, .pk-rays, .sp-float, #opening .hint b, .cg-in, .drow.enter, .drow.enter::before, .pk-banner.go, #opening.shake .three, .grid .slotc.nope { animation: none !important; }
.grid .slotc .card:hover { transform: none; }
}
.ahead.clean { background-size: cover; }
body.lite #collection .grid .card, body.lite #deckbuilder .grid .card { will-change: auto; perspective: none; transition: none; }
body.lite #collection .grid .card .flip, body.lite #deckbuilder .grid .card .flip { transform: none !important; transform-style: flat; transition: none; }
body.lite #collection .grid .card .face, body.lite #deckbuilder .grid .card .face { backface-visibility: visible; transition: none; }
body.lite #collection .grid .card .backface, body.lite #deckbuilder .grid .card .backface,
body.lite #collection .grid .card .shine, body.lite #deckbuilder .grid .card .shine { display: none; }
body.lite .grid .slotc .card.foil::after, body.lite .grid .slotc .card.promo::after, body.lite .grid .slotc .lcf .cf-promo, body.lite .grid .slotc.isnew .card .face { animation: none; }
body.lite .grid .slotc .card:hover { transform: none; }
body.lite #collection .grid > .af-st, body.lite #deckbuilder .grid > .af-st { animation: none; }
body.lite #collection .grid, body.lite #deckbuilder .grid { z-index: 0; }
body.lite #collection .grid .fa-slot .fa-card { will-change: auto; transform: none !important; transition: none; }
body.lite #collection .grid .fa-slot .fa-card::after { animation: none; }
body.lite #collection .grid .fa-slot .fa-holo, body.lite #collection .grid .fa-slot .fa-glare { display: none; }
body.lite .grid .slotc::before { display: none; filter: none; }
body.lite .grid .slotc.ph::before { display: block; inset: 0; height: auto; opacity: 1; transform: none; filter: none; transition: none; border-radius: 7.5% / 5.4%;
background: linear-gradient(160deg, #2a1650, #120a26 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc, #b98aff) 30%, transparent); }
body.lite .grid .slotc.fa-slot.ph::before { left: 3%; right: 3%; }
body.lite #collection .owned0 .card, body.lite #collection .owned0 .card:hover, body.lite .grid .slotc.unowned .card, body.lite .grid .slotc.maxed .card { filter: none; }
body.lite .grid .slotc.unowned .card { --scrim: rgba(60, 56, 72, .5); }
body.lite .grid .slotc.maxed .card { --scrim: rgba(40, 36, 50, .6); }
body.lite #collection .owned0 .card { --scrim: rgba(24, 20, 34, .72); }
body.lite #collection .owned0 .card .face::after, body.lite .grid .slotc.unowned .card .face::after, body.lite .grid .slotc.maxed .card .face::after {
content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--scrim); }
body.lite .ci-halo, body.lite #inspect .card.foil::after, body.lite #inspect .fa-card::after, body.lite #inspect .fa-holo, body.lite #inspect .fa-holo::after, body.lite #inspect .fa-chip { animation: none; }
body.lite .ci-box > .ci-bg { filter: none; opacity: .12; }
body.lite .ci-halo { filter: none; }
body.lite #shop .sp-sheen { display: none; }
body.lite #shop .sp-tilt { transform-style: flat; }
body.lite #stage:has(> #opening.on) > .screen.on, body.lite #stage:has(> #opening.on) > #afBg { visibility: hidden; }
body.lite #stage:has(> #opening.on) .sp-float { animation-play-state: paused; }
body.lite .pk-rays, body.lite #opening .labels .pk-lab span.lc-rar.fa-rar { animation: none; }
body.lite .pk-flash:not(.go), body.lite .pk-banner:not(.go), body.lite #opening:not(.fa-burst)::after { display: none; }
body.lite #opening.fa-burst::after { animation: faBurst 2.4s ease-out; }
body.lite .pk-fcell .card { will-change: auto; perspective: none; }
body.lite .pk-fcell .card .flip { transform-style: flat; transform: none; }
body.lite .pk-fcell .card .backface, body.lite .pk-fcell .card .shine { display: none; }
.pk-tearfx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#opening .pk-tearhint { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#opening .pk-tearhint small { font: 700 13px var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 244, 214, .7); }
#opening .pk-tearhint .pk-swipe { position: relative; width: 240px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(255, 220, 150, .35), transparent); }
#opening .pk-tearhint .pk-swipe::after { content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #ffe2a0 40%, rgba(255, 190, 90, 0) 72%); animation: pkSwipe 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes pkSwipe { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
#opening .pk-tearhint.tearing { opacity: 0; transition: opacity .2s; }
.pk-2d { position: absolute; left: 50%; top: 50%; width: 300px; height: 480px; margin: -260px 0 0 -150px; z-index: 3; touch-action: none; cursor: grab; --k: 0; animation: pk2dIn .6s var(--ease-back) both; }
.pk-2d-body, .pk-2d-flap { position: absolute; inset: 0; background: center / 100% 100% no-repeat; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.pk-2d-body { clip-path: inset(16% 0 0 0); }
.pk-2d-flap { clip-path: polygon(0 0, 100% 0, 100% 16%, 90% 15.2%, 80% 16.4%, 70% 15.4%, 60% 16.5%, 50% 15.3%, 40% 16.4%, 30% 15.2%, 20% 16.5%, 10% 15.4%, 0 16.2%); transform-origin: 50% 16%; transition: transform .12s; }
.pk-2d-flap.off { transition: none; animation: pk2dFlap .8s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes pk2dFlap { to { transform: translate(calc(var(--dir, 1) * 260px), -260px) rotate(calc(var(--dir, 1) * -70deg)); opacity: 0; } }
.pk-2d-line { position: absolute; left: -4%; right: -4%; top: 16%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, transparent, #ffe9b8, transparent); opacity: calc(.2 + var(--k) * .8); box-shadow: 0 0 16px rgba(255, 210, 130, .9); pointer-events: none; }
.pk-2d.gone { transition: transform .45s ease-in, opacity .45s; transform: translateY(240px) scale(.9); opacity: 0; pointer-events: none; }
.pk-foilbit { position: absolute; top: 16%; width: 9px; height: 6px; background: var(--fc, #fff2c8); box-shadow: 0 0 6px var(--fc); pointer-events: none; animation: pkFoil .9s cubic-bezier(.2, .6, .4, 1) var(--d, 0ms) both; }
@keyframes pkFoil { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)); opacity: 0; } }
@keyframes pk2dIn { from { transform: translateY(220px) rotate(-8deg); opacity: 0; } }
body.portrait .pk-2d { width: 420px; height: 672px; margin: -380px 0 0 -210px; }
body.portrait #opening .pk-tearhint small { font-size: 22px; }
body.portrait #opening .pk-tearhint .pk-swipe { width: 360px; }
body.mobile #opening .pk-tearhint small { font-size: 19px; }
body.lite .pk-2d-body, body.lite .pk-2d-flap { filter: none; }
body.fx-low #opening .pk-tearhint .pk-swipe::after { animation: none; left: 50%; }
@media (prefers-reduced-motion: reduce) { #opening .pk-tearhint .pk-swipe::after { animation: none; left: 50%; } }
.cardpeek { position: absolute; z-index: 60; display: flex; gap: 22px; width: 760px; padding: 18px; border-radius: 20px; pointer-events: none; opacity: 0; visibility: hidden; transform: scale(.97);
background: linear-gradient(160deg, rgba(24, 12, 48, .97), rgba(8, 4, 18, .97)); border: 1px solid color-mix(in srgb, var(--rc, #fff) 45%, transparent);
box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px color-mix(in srgb, var(--rc, #fff) 22%, transparent); transition: opacity .14s, transform .14s var(--ease-out), visibility 0s .14s; }
.cardpeek.on { opacity: 1; visibility: visible; transform: none; transition: opacity .14s, transform .14s var(--ease-out); }
.cardpeek .cp-card { flex: none; width: 300px; height: 420px; position: relative; }
.cardpeek .cp-card .card { transform: none !important; }
.cardpeek .cp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.cp-eyebrow { font: 700 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--c, #cbb8ff); }
.cardpeek h3 { margin: 0; font: 900 32px/1.08 var(--font-title); color: #fff4d6; }
.cp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp-st { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #cfc6e2; }
.cp-st i { font: 900 20px/1 var(--font-title); font-style: normal; color: #ffe39a; }
.cp-st.pow i { color: #ff9a7a; } .cp-st.hp i { color: #8fe8a8; }
.cp-rules { font: 20px/1.45 var(--font-card); color: #f3ecff; white-space: pre-line; }
.cp-flavor { font: italic 16px/1.45 var(--font-card); color: #d7c3a3; }
.cp-own { margin-top: auto; font: 700 13px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #a99cc4; }
body.portrait .cardpeek { width: 820px; } body.portrait .cardpeek .cp-card { width: 340px; height: 476px; }
body.lite .cardpeek { box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
#shop .shoppack .price .sp-gems { font-size: 12px; opacity: .8; margin-left: 4px; }
.cl-wild .lc-wc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; }
.lc-wc i { display: inline-grid; place-items: center; width: 18px; height: 22px; border-radius: 4px; font: 800 11px/1 system-ui, sans-serif; font-style: normal; color: #1a1430; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.lc-wc b { font-variant-numeric: tabular-nums; }
.ci-cstats { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 13px; line-height: 1.35; }
.ci-cs-h { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; opacity: .75; flex: none; }
.ci-cs-t { opacity: .9; }
/* css/cards.css */
.card .face.lcf { background: #140c24; border-radius: 4.9cqw; font-family: var(--font-card); color: #2a1a0a; }
.card .face.lcf > .art { position: absolute; inset: auto; object-fit: cover; object-position: 50% 50%; z-index: 0; background: #2a1d3f; }
.card .face.lcf .cf-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; }
.card .face.lcf > .cf-name, .card .face.lcf > .cf-cost, .card .face.lcf > .cf-type, .card .face.lcf > .cf-rules, .card .face.lcf > .cf-promo { position: absolute; z-index: 2; pointer-events: none; }
.lcf .cf-name { left: 5.2%; top: 4.51%; width: 61.3%; height: 10.36%; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; line-height: 1.02; white-space: nowrap; color: #2a1a0a; text-shadow: 0 .15cqw 0 rgba(255, 244, 214, .7); letter-spacing: .01em; }
.lcf .cf-name span { display: block; flex: none; }
.lcf .cf-name.cf-2l span + span { margin-top: .2cqw; }
.lcf.cf-tiny .cf-name .cf-ep { font-style: italic; color: #4a321a; }
.lcf .cf-cost { left: 89.58%; top: 6.17%; transform: translate(-50%, -46%); font-family: var(--font-title); font-weight: 900; font-size: 12.6cqw; line-height: 1;
color: #fbe7b4; -webkit-text-stroke: 1.1cqw #4a3208; paint-order: stroke fill; text-shadow: 0 .5cqw 1.2cqw rgba(20, 6, 40, .75), 0 0 2.5cqw rgba(255, 220, 140, .35); }
.lcf .cf-cost.cf-less { color: #caff9c; text-shadow: 0 0 3cqw rgba(140, 255, 90, .9), 0 .5cqw 1.2cqw rgba(0, 0, 0, .7); }
.lcf .cf-cost.cf-more { color: #ffb4a8; }
.lcf.cf-tiny .cf-cost { font-size: 15cqw; }
.card .face.lcf .costmod { left: 89.58%; top: 6.17%; right: auto; width: auto; aspect-ratio: auto; transform: translate(-50%, -46%); background: none; border: 0; box-shadow: none; border-radius: 0;
font-family: var(--font-title); font-weight: 900; font-size: 15cqw; line-height: 1; color: #caff9c; -webkit-text-stroke: 1.1cqw #1f3a08; paint-order: stroke fill;
text-shadow: 0 0 3cqw rgba(140, 255, 90, .95), 0 .5cqw 1.2cqw rgba(0, 0, 0, .7); z-index: 5; }
.card .face.lcf:has(.costmod) .cf-cost { opacity: 0; }
.lcf .cf-type { left: 6.58%; width: 86.98%; top: 56.61%; height: 3.08%; display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
font-size: 3.7cqw; line-height: 1; white-space: nowrap; color: #24160a; text-shadow: 0 0 1cqw rgba(255, 240, 200, .55); }
.lcf.cf-tiny .cf-type { font-size: 4.6cqw; top: 56.2%; height: 3.9%; }
.lcf .cf-rar { width: 2.6cqw; height: 2.6cqw; transform: rotate(45deg); border: .35cqw solid rgba(40, 20, 0, .7); background: #d9dde2; flex: none; box-shadow: 0 0 .8cqw rgba(0, 0, 0, .4); }
.lcf .cf-rar.r-Un-common { background: #62d37f; }
.lcf .cf-rar.r-Rare { background: #4fa3ff; }
.lcf .cf-rar.r-Ultra-Rare { background: linear-gradient(135deg, #e7b8ff, #9a4dff); }
.lcf .cf-rar.r-Legendary { background: linear-gradient(135deg, #fff1a8, #f0a91c); box-shadow: 0 0 1.4cqw rgba(255, 200, 60, .9); }
.lcf .cf-rules { left: 12.67%; top: 62.62%; width: 74.67%; height: 31.9%; padding-top: 1.6cqw; overflow: hidden; text-align: center; font-size: var(--fs); line-height: 1.2; color: #2b1a0c; }
.lcf .cf-rules > i { display: block; }
.lcf .cf-rules .cx-gs { float: right; width: 0; height: 49%; }
.lcf .cf-rules .cx-g { float: right; clear: right; width: 12cqw; height: 51%; }
.lcf .cf-rules .cx-ps { float: left; width: 0; height: 61%; }
.lcf .cf-rules .cx-p { float: left; clear: left; width: 8.6cqw; height: 39%; }
.lcf.cf-tiny .cf-rules .cx-ps { height: 48%; } .lcf.cf-tiny .cf-rules .cx-p { width: 13cqw; height: 52%; }
.lcf.cf-tiny .cf-rules.cf-ch .cx-gs { height: 48%; } .lcf.cf-tiny .cf-rules.cf-ch .cx-g { width: 13cqw; height: 52%; }
.lcf .cf-t em { font-style: italic; font-weight: 700; }
.lcf .cf-t b { font-weight: 700; color: #3a1c04; }
.lcf .cf-f { margin-top: calc(var(--fs) * .45); padding-top: calc(var(--fs) * .45); font-size: var(--ffs); line-height: 1.18; font-style: italic; color: #6a4a2a;
background: linear-gradient(90deg, transparent, rgba(106, 74, 42, .45), transparent) top center / 40% 1px no-repeat; }
.lcf.cf-tiny .cf-rules { padding-top: 2.2cqw; line-height: 1.14; }
.card .face.lcf .stat { bottom: auto; top: 92.14%; width: 18.67%; transform: translate(-50%, -50%); font-size: 10.4cqw; border: 0; z-index: 3; line-height: 1;
box-shadow: 0 0 0 1cqw #e7c46a, 0 0 0 1.5cqw rgba(70, 40, 0, .7), 0 1cqw 2.4cqw rgba(0, 0, 0, .65); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .8); }
.card .face.lcf .stat.pow { left: 10.67%; background: radial-gradient(circle at 35% 30%, #ff9a7a, #a51d15 72%); }
.card .face.lcf .stat.hp { left: 89.33%; right: auto; background: radial-gradient(circle at 35% 30%, #8fe7ff, #0f58a6 72%); }
.card .face.lcf .stat.hurt { background: radial-gradient(circle at 35% 30%, #ffb0b0, #7a1010 70%); }
.card .face.lcf .stat.bump { animation: lcfBump .45s cubic-bezier(.3, 1.8, .4, 1); }
@keyframes lcfBump { 40% { transform: translate(-50%, -50%) scale(1.4); } }
.card.tiny .face.lcf .stat { width: 24%; font-size: 14cqw; top: 90.6%; }
.card.tiny .face.lcf .stat.pow { left: 13.4%; } .card.tiny .face.lcf .stat.hp { left: 86.6%; }
.card .face.lcf .kws { top: 21%; left: 8%; } .card .face.lcf .inf { top: 21%; right: 8%; }
.card.foil .face.lcf .shine { z-index: 4; }
.lcf .cf-promo { right: 10%; top: 49.5%; padding: .9cqw 2.6cqw .7cqw; border-radius: 99px; font-family: var(--font-title); font-weight: 900; font-size: 3.6cqw; letter-spacing: .18em; color: #2a1040;
background: linear-gradient(110deg, #ff9de2, #9ad8ff 30%, #fff4a8 55%, #b7ffcf 75%, #ff9de2); background-size: 200% 100%; animation: lcfHolo 5s linear infinite;
box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .75), 0 .6cqw 1.6cqw rgba(0, 0, 0, .5); z-index: 4; }
.card.promo .shine { opacity: .65 !important; mix-blend-mode: color-dodge; z-index: 4;
background: conic-gradient(from var(--ang, 0deg) at var(--sx, 50%) var(--sy, 40%), rgba(255, 120, 220, .35), rgba(120, 220, 255, .35), rgba(255, 250, 150, .35), rgba(140, 255, 190, .35), rgba(255, 120, 220, .35));
animation: spinAng 6s linear infinite; }
.card.promo .shine::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 3cqw, rgba(255, 255, 255, .18) 3.4cqw, rgba(255, 255, 255, 0) 4cqw 7cqw); mix-blend-mode: overlay; }
.card.promo::after { content: ""; position: absolute; inset: -2px; border-radius: 6cqw; pointer-events: none; padding: 2px; opacity: .95;
background: conic-gradient(from var(--ang, 0deg), #ff9de2, #9ad8ff, #fff4a8, #b7ffcf, #ff9de2);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 4s linear infinite; }
@keyframes lcfHolo { to { background-position: -200% 0; } }
body.fx-low .card.promo .shine, body.fx-low .lcf .cf-promo, body.fx-low .card.promo::after { animation: none; }
body.lite .card.promo .shine, body.lite .lcf .cf-promo, body.lite .card.promo::after, body.lite #promoReveal .pr-eyebrow { animation: none; }
body.lite .card.foil::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .card.promo .shine, .lcf .cf-promo, .card.promo::after { animation: none; } }
#promoReveal { position: fixed; inset: 0; z-index: 5000; display: none; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(90, 40, 160, .55), rgba(6, 3, 14, .92) 70%); }
#promoReveal.on { display: grid; animation: prIn .35s ease-out both; }
#promoReveal .pr-box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: #fff4d6; }
#promoReveal .pr-eyebrow { font-family: var(--font-title); font-weight: 900; font-size: 30px; letter-spacing: .28em;
background: linear-gradient(110deg, #ff9de2, #9ad8ff 30%, #fff4a8 55%, #b7ffcf 75%, #ff9de2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lcfHolo 4s linear infinite; }
#promoReveal .pr-sub { font-size: 17px; color: #e4d9f7; max-width: 560px; line-height: 1.45; padding: 10px 18px; border-radius: 12px; background: rgba(10, 5, 22, .72); }
#promoReveal .pr-card { position: relative; width: 300px; height: 420px; animation: prCard .9s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
#promoReveal .pr-card .card { position: relative; width: 300px; height: 420px; }
#promoReveal .pr-card::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), rgba(255, 157, 226, .0), rgba(255, 157, 226, .45), rgba(154, 216, 255, .45), rgba(255, 244, 168, .45), rgba(183, 255, 207, .45), rgba(255, 157, 226, .0));
filter: blur(24px); animation: spinAng 6s linear infinite; z-index: -1; }
@keyframes prIn { from { opacity: 0; } }
@keyframes prCard { from { opacity: 0; transform: translateY(40px) rotateY(160deg) scale(.6); } }
body.mobile #promoReveal .pr-card, body.mobile #promoReveal .pr-card .card { width: 380px; height: 532px; }
.lc.lc-promo { aspect-ratio: 2 / 3; background: #140c24; }
.lc.lc-promo .lp-tag { background: linear-gradient(110deg, #ff9de2, #9ad8ff 40%, #fff4a8 70%, #b7ffcf); color: #2a1040; font-family: var(--font-title); top: 3.4%; left: 5%; }
.lc.lc-promo .lp-plate { position: absolute; left: 38.5%; right: 4.3%; bottom: 4.9%; height: 9.2%; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; font-family: var(--font-card); color: #2a1740; line-height: 1.05; padding: 0 3%; }
.lc.lc-promo .lp-plate b { font-weight: 700; font-size: 7.2cqw; white-space: nowrap; }
.lc.lc-promo .lp-plate em { font-size: 4.3cqw; font-style: italic; color: #5a3e70; white-space: nowrap; }
.lc.lc-promo .lp-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
background: conic-gradient(from var(--ang, 0deg) at 50% 40%, rgba(255, 120, 220, .28), rgba(120, 220, 255, .28), rgba(255, 250, 150, .28), rgba(140, 255, 190, .28), rgba(255, 120, 220, .28));
animation: spinAng 7s linear infinite; }
body.fx-low .lc.lc-promo .lp-shine { animation: none; }
#promoReveal .pr-duo { display: flex; align-items: center; gap: 36px; perspective: 1400px; }
#promoReveal .pr-full { position: relative; width: 300px; height: 450px; animation: prFull 1s cubic-bezier(.2, .9, .3, 1.15) .1s both; }
#promoReveal .pr-full .lc { width: 300px; height: 450px; box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(255, 157, 226, .45); }
#promoReveal .pr-duo .pr-card { width: 260px; height: 364px; animation: prSlide .8s cubic-bezier(.2, .9, .3, 1.1) 1s both; }
#promoReveal .pr-duo .pr-card .card { width: 260px; height: 364px; }
@keyframes prFull { from { opacity: 0; transform: rotateY(-180deg) scale(.7); } 60% { opacity: 1; } }
@keyframes prSlide { from { opacity: 0; transform: translateX(-140px) scale(.85); } }
body.mobile #promoReveal .pr-full, body.mobile #promoReveal .pr-full .lc { width: 360px; height: 540px; }
body.mobile #promoReveal .pr-duo .pr-card, body.mobile #promoReveal .pr-duo .pr-card .card { width: 320px; height: 448px; }
.ci-stage .pr-toggle { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 99px;
background: rgba(20, 10, 40, .85); border: 1px solid rgba(255, 200, 255, .3); }
.ci-stage .pr-toggle button { appearance: none; border: 0; font: 800 13px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #d9c8f0; background: none;
padding: 8px 16px; border-radius: 99px; cursor: pointer; }
.ci-stage .pr-toggle button.on { color: #2a1040; background: linear-gradient(110deg, #ff9de2, #9ad8ff 40%, #fff4a8 70%, #b7ffcf); }
.ci-stage .big .lc.lc-promo { position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform: translateX(-50%); display: none; }
.ci-stage.pr-full .big .lc.lc-promo { display: block; animation: prFade .35s ease-out; }
.ci-stage.pr-full .big .card { visibility: hidden; }
@keyframes prFade { from { opacity: 0; transform: translateX(-50%) scale(.96); } }
body.mobile .ci-stage .pr-toggle button { font-size: 17px; padding: 10px 20px; }
/* css/lore.css */
#lore { --lr-ink: #f1e7d0; --lr-ink-dim: #c9bda6; --lr-vellum: rgba(22, 14, 36, .94); overflow: hidden; }
#lore .top { gap: 16px; }
#lore .top h1 { font-size: 28px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
#lore .top .btn .ico { width: 18px; height: 18px; }
#lore .top .btn.small { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; }
.lr-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 12px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.lr-crumb .ico { width: 12px; height: 12px; opacity: .6; flex: none; }
.lr-crumb b { color: var(--gold-1); font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.lr-search { position: relative; display: flex; align-items: center; flex: none; }
.lr-search .ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--gold-2); pointer-events: none; }
#lore .lr-search input { width: 290px; height: 46px; padding: 0 16px 0 42px; border-radius: 99px; font: 500 15px var(--font-ui); user-select: text; }
#lore .lr-search input::placeholder { color: rgba(201, 189, 166, .6); }
.lr-count { display: flex; align-items: baseline; gap: 5px; flex: none; position: relative; padding: 11px 16px; border-radius: 99px; background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .85));
border: 1px solid rgba(232, 186, 90, .35); font: 800 18px/1 var(--font-title); color: #fff4d6; }
.lr-count .ico { width: 20px; height: 20px; align-self: center; margin-right: 3px; }
.lr-count span { font: 600 13px var(--font-ui); color: var(--ink-dim); }
.lr-count .lr-dot { position: absolute; right: -3px; top: -3px; }
.lr-tools:empty { display: none; }
.lr-fs { display: flex; border: 1px solid rgba(232, 186, 90, .3); border-radius: 99px; overflow: hidden; background: rgba(10, 6, 22, .8); }
.lr-fs button { appearance: none; border: 0; background: none; color: var(--gold-1); font: 700 19px/1 var(--font-card); min-width: 50px; height: 46px; cursor: pointer; transition: background .2s; }
.lr-fs button + button { border-left: 1px solid rgba(232, 186, 90, .22); font-size: 24px; }
.lr-fs button:hover { background: rgba(242, 193, 78, .12); }
.lr-fs sub, .lr-fs sup { font: 800 11px var(--font-ui); }
.lr-readbar { position: absolute; top: 84px; left: 0; right: 0; height: 3px; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; }
#lore[data-v="read"] .lr-readbar { opacity: 1; }
.lr-readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi)); box-shadow: 0 0 12px rgba(242, 193, 78, .7); transition: width .12s linear; }
.lr-view { position: absolute; top: 84px; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; outline: none; scroll-behavior: auto; overscroll-behavior: contain; }
.lr-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none;
background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(20, 8, 10, .6), 0 0 10px rgba(255, 90, 60, .7); }
.lr-bar { display: block; height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(232, 186, 90, .2) inset; overflow: hidden; }
.lr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 8px rgba(242, 193, 78, .6); }
.lr-land { display: grid; grid-template-columns: 540px 1fr; gap: 28px; padding: 26px 36px 36px; max-width: 1760px; margin: 0 auto; min-height: 100%; box-sizing: border-box; }
.lr-hero { padding: 38px 40px 32px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; align-self: start; border-color: rgba(232, 186, 90, .45); }
.lr-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: linear-gradient(180deg, rgba(14, 8, 28, .35) 0%, rgba(14, 8, 28, .82) 38%, rgba(14, 8, 28, .96) 70%), var(--art) var(--pos, 50% 20%) / cover no-repeat; }
.lr-realm { margin: 0; font: 900 64px/1 var(--font-title); letter-spacing: .08em;
background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 40%, var(--gold-2) 70%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(242, 193, 78, .3)); overflow-wrap: anywhere; }
.lr-tag { margin: 0; font: italic 22px/1.35 var(--font-card); color: #f3e3bf; }
.lr-intro p { margin: 0 0 10px; font: 17px/1.62 var(--font-card); color: var(--lr-ink-dim); }
.lr-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 6px; }
.lr-acts .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 22px; font-size: 16px; max-width: 100%; }
.lr-acts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-acts .btn .ico { width: 20px; height: 20px; flex: none; }
.lr-begin { font-size: 18px !important; }
.lr-overall { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(232, 186, 90, .2); }
.lr-ring { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.lr-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lr-ring circle { fill: none; stroke-width: 5; }
.lr-ring .trk { stroke: rgba(0, 0, 0, .5); }
.lr-ring .val { stroke: var(--gold-1); stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(242, 193, 78, .6)); }
.lr-ring b { font: 800 17px var(--font-title); color: #fff4d6; }
.lr-overall b { display: block; font: 800 19px/1.2 var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.lr-overall span { font: 600 14px var(--font-ui); color: var(--ink-dim); }
.lr-shelves { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lr-shelves > .af-title { font-size: 15px; }
.lr-shelfgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(236px, auto); gap: 18px; }
.lr-shelfgrid.n1, .lr-shelfgrid.n2, .lr-shelfgrid.n4 { grid-template-columns: repeat(2, 1fr); }
.lr-shelf { background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; appearance: none; font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px 18px; min-height: 236px; }
.lr-shelf:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.lr-num { position: absolute; left: 16px; top: 12px; font: 900 34px/1 var(--font-title); color: rgba(255, 240, 200, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); letter-spacing: .04em; }
.lr-seal { position: absolute; right: 14px; top: 14px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font: 900 15px/1 var(--font-title); color: #fff2e8;
background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(20, 8, 10, .6), 0 0 14px rgba(255, 90, 60, .6); }
.lr-sh-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lr-sh-txt b { font: 800 25px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .05em; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.lr-sh-txt em { font: italic 15.5px/1.4 var(--font-card); color: #e6dac4; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lr-sh-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 6px; }
.lr-sh-prog small { font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); white-space: nowrap; }
.lr-sh-lock { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.lr-sh-lock .ico { width: 13px; height: 13px; }
.lr-shelf.locked { filter: saturate(.35) brightness(.8); }
.lr-cat { padding: 24px 36px 40px; max-width: 1640px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; }
.lr-cathead { display: flex; align-items: flex-end; gap: 30px; padding: 30px 34px; overflow: hidden; isolation: isolate; min-height: 170px; box-sizing: border-box; }
.lr-cathead::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: linear-gradient(90deg, rgba(14, 8, 28, .97) 30%, rgba(14, 8, 28, .55) 75%, rgba(14, 8, 28, .3)), var(--art) var(--pos, 50% 30%) / cover no-repeat; }
.lr-ch-txt { flex: 1; min-width: 0; }
.lr-ch-txt h2 { margin: 6px 0 6px; font: 900 44px/1.05 var(--font-title); letter-spacing: .06em;
background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 50%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.lr-ch-txt p { margin: 0; font: italic 19px/1.45 var(--font-card); color: #e8dcc4; max-width: 760px; }
.lr-ch-prog { width: 240px; flex: none; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.lr-ch-prog b { font: 800 30px/1 var(--font-title); color: #fff4d6; }
.lr-ch-prog > span:not(.lr-bar) { font: 700 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.lr-ch-prog .lr-bar { grid-column: 1 / -1; margin-top: 6px; }
.lr-ch-prog small { grid-column: 1 / -1; font: 600 13px var(--font-ui); color: var(--ink-dim); }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lr-card { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; padding: 0;
border: 1px solid rgba(232, 186, 90, .3); background: linear-gradient(180deg, rgba(30, 17, 58, .92), rgba(14, 8, 28, .95)); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
transition: transform .3s var(--ease-back), border-color .25s, box-shadow .25s; }
.lr-card:hover { transform: translateY(-5px); border-color: var(--gold-1); box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(242, 193, 78, .3); }
.lr-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.lr-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--art) var(--pos, 50% 28%) / cover no-repeat, linear-gradient(135deg, #2a1650, #120a24); }
.lr-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 8, 28, .95)); }
.lr-card > .lr-dot { position: absolute; top: 12px; right: 12px; z-index: 2; }
.lr-card-txt { display: flex; flex-direction: column; gap: 5px; padding: 12px 18px 16px; min-width: 0; }
.lr-card-txt b { font: 800 20px/1.2 var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.lr-card-txt em { font: italic 16px/1.35 var(--font-card); color: var(--lr-ink-dim); }
.lr-card-txt q { font: 15px/1.45 var(--font-card); color: #ddd0b8; quotes: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lr-card-txt q mark { background: rgba(242, 193, 78, .28); color: #fff4d6; border-radius: 3px; padding: 0 2px; }
.lr-card-txt small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.lr-card-txt small .ico { width: 14px; height: 14px; }
.lr-readmark { display: inline-flex; align-items: center; gap: 4px; color: #9fe0b0; }
.lr-kicker { font: 800 11px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.lr-card.read .lr-card-art { filter: saturate(.85); }
.lr-card.sealed { border-style: dashed; border-color: rgba(232, 186, 90, .28); background: linear-gradient(180deg, rgba(22, 14, 36, .9), rgba(10, 6, 20, .94)); }
.lr-card.sealed .lr-card-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(232, 186, 90, .06) 0 1px, transparent 1px 22px); }
.lr-card.sealed b { color: #cfc2a8; }
.lr-wax { position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; filter: none;
background: radial-gradient(circle at 35% 30%, #d9523c, #8e1a10 60%, #4a0904); box-shadow: 0 0 0 3px rgba(60, 10, 6, .5), 0 6px 18px rgba(0, 0, 0, .6), inset 0 2px 3px rgba(255, 190, 160, .35); color: #ffd9c8; }
.lr-wax .ico { width: 26px; height: 26px; }
.lr-how { display: flex; flex-direction: column; gap: 4px; font: 600 15px/1.35 var(--font-ui); color: #f0e3c8; padding: 9px 12px; border-radius: 10px; background: rgba(242, 193, 78, .07); border-left: 3px solid var(--gold-2); margin-top: 2px; }
.lr-how small { font: 800 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin: 0; }
.lr-card.sealed .lr-card-art { background: linear-gradient(rgba(10, 6, 20, .62), rgba(10, 6, 20, .62)), var(--art) var(--pos, 50% 28%) / cover no-repeat, #120a24; background-blend-mode: normal, luminosity, normal; }
.lr-reader { --fs: 0; max-width: 1180px; margin: 0 auto; padding: 26px 36px 70px; box-sizing: border-box; }
.lr-rhead { position: relative; min-height: 340px; border-radius: 18px 18px 0 0; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; gap: 26px; padding: 34px 48px 30px;
border: 1px solid rgba(232, 186, 90, .4); border-bottom: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); box-sizing: border-box; }
.lr-rhead::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 50% 25%) / cover no-repeat, linear-gradient(135deg, #2a1650, #120a24); }
.lr-rhead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 8, 28, .1) 0%, rgba(14, 8, 28, .45) 45%, rgba(20, 13, 34, .98) 100%); }
.lr-medal { width: 150px; height: 150px; flex: none; border-radius: 50%; background: var(--m) var(--mpos, 50% 22%) / cover no-repeat, #1a1030;
box-shadow: 0 0 0 3px #1a0f2e, 0 0 0 5px var(--gold-2), 0 0 0 7px rgba(26, 15, 46, .9), 0 0 30px rgba(242, 193, 78, .45), 0 16px 30px rgba(0, 0, 0, .7); }
.lr-rhead-txt { min-width: 0; flex: 1; }
.lr-rhead h2 { margin: 8px 0 4px; font: 900 52px/1.04 var(--font-title); letter-spacing: .04em; overflow-wrap: anywhere;
background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 20px rgba(0, 0, 0, .6)); }
.lr-rhead h2.long { font-size: 42px; } .lr-rhead h2.xlong { font-size: 34px; }
.lr-rhead .af-eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .9); }
.lr-sub { margin: 0; font: italic 23px/1.35 var(--font-card); color: #f3e3bf; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.lr-meta { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 700 12.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.lr-meta .ico { width: 15px; height: 15px; }
.lr-page { position: relative; padding: 40px 60px 50px; border-radius: 0 0 18px 18px; border: 1px solid rgba(232, 186, 90, .4); border-top: 0;
background:
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(242, 193, 78, .06), transparent 70%),
radial-gradient(1px 1px at 20% 30%, rgba(255, 240, 200, .05), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255, 240, 200, .05), transparent),
linear-gradient(180deg, rgba(20, 13, 34, .98), rgba(15, 10, 26, .97));
background-size: auto, 7px 7px, 11px 11px, auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 80px rgba(0, 0, 0, .35); }
.lr-page::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.lr-col { font-family: var(--font-card); font-size: calc(22px + var(--fs) * 2px); max-width: 34em; margin: 0 auto; }
.lr-body { line-height: 1.72; color: var(--lr-ink); hyphens: auto; -webkit-hyphens: auto; user-select: text; text-rendering: optimizeLegibility; font-kerning: normal; }
.lr-body p { margin: 0 0 1em; overflow-wrap: break-word; }
.lr-body p + p { text-indent: 1.4em; }
.lr-body h3 + p, .lr-body blockquote + p { text-indent: 0; }
.lr-body p.lr-first { text-indent: 0; }
.lr-body p.lr-first::first-letter { float: left; font: 900 4.1em/.82 var(--font-title); margin: .08em .1em 0 0; padding: .02em 0 0;
color: var(--gold-1); background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.lr-body p.lr-first::first-line { font-variant: small-caps; letter-spacing: .04em; }
.lr-body h3 { margin: 1.4em 0 .5em; font: 800 1.05em/1.2 var(--font-title); letter-spacing: .08em; color: var(--gold-1); text-transform: uppercase; }
.lr-body blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--gold-2); font-style: italic; color: #f7ecd3; }
.lr-body em { color: #fff3d8; }
.lr-hist { box-sizing: border-box; margin-top: 30px; padding: 22px 26px 22px; border-radius: 14px; position: relative;
background: linear-gradient(135deg, rgba(242, 193, 78, .11), rgba(242, 193, 78, .03)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: inset 4px 0 0 var(--gold-2); }
.lr-hist-h { display: flex; align-items: center; gap: 10px; font: 800 13px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 12px; }
.lr-hist-h .ico { width: 22px; height: 22px; }
.lr-hist p { margin: 0; font: calc(18.5px + var(--fs) * 1.5px)/1.6 var(--font-ui); color: #efe6d6; user-select: text; }
.lr-end { display: flex; justify-content: center; margin-top: 30px; color: var(--gold-2); opacity: .8; }
.lr-orn { width: 180px; height: 24px; }
.lr-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.lr-links .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.lr-links .btn .ico { width: 18px; height: 18px; }
.lr-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.lr-pnb { appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; min-height: 84px; border-radius: 14px; box-sizing: border-box;
border: 1px solid rgba(232, 186, 90, .3); background: rgba(8, 4, 18, .55); transition: border-color .2s, background .2s, transform .25s var(--ease-back); min-width: 0; }
.lr-pnb:hover { border-color: var(--gold-1); background: rgba(242, 193, 78, .08); transform: translateY(-2px); }
.lr-pnb.next { text-align: right; align-items: flex-end; }
.lr-pnb small { display: inline-flex; align-items: center; gap: 6px; font: 800 11.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.lr-pnb small .ico { width: 14px; height: 14px; }
.lr-pnb b { font: 800 19px/1.2 var(--font-title); color: #fff4d6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-pnb em { font: 600 13.5px/1.3 var(--font-ui); font-style: normal; color: var(--ink-dim); }
.lr-pnb.sealed b { color: #b9ab92; }
.lr-rel { margin-top: 34px; }
.lr-rel .af-title { font-size: 13px; margin-bottom: 14px; }
.lr-relrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lr-relc { appearance: none; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; min-height: 72px; border-radius: 14px; box-sizing: border-box;
border: 1px solid rgba(232, 186, 90, .25); background: rgba(8, 4, 18, .5); transition: border-color .2s, transform .25s var(--ease-back); min-width: 0; }
.lr-relc:hover { border-color: var(--gold-1); transform: translateY(-2px); }
.lr-relc > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lr-relav { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--art) var(--pos, 50% 25%) / cover no-repeat, #1a1030; box-shadow: 0 0 0 2px var(--gold-3), 0 0 12px rgba(242, 193, 78, .25); color: #ffd9c8; }
.lr-relav .ico { width: 20px; height: 20px; }
.lr-relc.sealed .lr-relav { filter: grayscale(.8) brightness(.6); }
.lr-relc b { font: 800 16px/1.2 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-relc small { font: 500 13px/1.3 var(--font-ui); color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lr-reader.turn .lr-rhead { animation: lrHead .6s var(--ease-out) both; }
.lr-reader.turn .lr-page { transform-origin: 0 0; animation: lrTurn .75s var(--ease-out) .08s both; }
@keyframes lrHead { from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lrTurn { from { opacity: 0; transform: perspective(1800px) rotateY(-9deg) translateX(24px); filter: brightness(1.35) blur(2px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }
.lr-sealedpage { max-width: 820px; margin: 60px auto; padding: 56px 60px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: hidden; isolation: isolate; border-style: dashed; box-sizing: border-box; }
.lr-sealedpage::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: linear-gradient(rgba(14, 8, 28, .86), rgba(14, 8, 28, .94)), var(--art) var(--pos, 50% 30%) / cover no-repeat; filter: grayscale(.7); }
.lr-sealedpage.turn { animation: lrTurn .7s var(--ease-out) both; }
.lr-bigwax { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; color: #ffd9c8;
background: radial-gradient(circle at 35% 30%, #e0593f, #8e1a10 60%, #4a0904); box-shadow: 0 0 0 4px rgba(60, 10, 6, .5), 0 12px 30px rgba(0, 0, 0, .7), inset 0 3px 5px rgba(255, 190, 160, .35), 0 0 40px rgba(220, 70, 40, .35); }
.lr-bigwax .ico { width: 44px; height: 44px; }
.lr-sealedpage h2 { margin: 0; font: 900 42px/1.1 var(--font-title); color: #e8dcc4; letter-spacing: .05em; }
.lr-teaser { margin: 0; font: italic 23px/1.45 var(--font-card); color: #f3e3bf; max-width: 32em; }
body.mobile .lr-teaser { font-size: 36px; }
.lr-sealtxt { margin: 0; font: italic 20px/1.55 var(--font-card); color: var(--lr-ink-dim); max-width: 36em; }
.lr-howbig { display: flex; flex-direction: column; gap: 8px; padding: 16px 26px; border-radius: 14px; background: rgba(242, 193, 78, .08); border: 1px solid rgba(232, 186, 90, .45); }
.lr-howbig small { font: 800 12px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); }
.lr-howbig b { font: 800 22px/1.3 var(--font-title); color: #fff4d6; letter-spacing: .02em; }
.lr-sealedpage .lr-acts { justify-content: center; margin-top: 8px; }
.lr-search-res { padding: 26px 36px 40px; max-width: 1640px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.lr-sr-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lr-sr-head > span { display: inline-flex; align-items: center; gap: 7px; font: 600 14px var(--font-ui); color: var(--ink-dim); }
.lr-sr-head .ico { width: 15px; height: 15px; }
.lr-grid-s { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.lr-grid-s .lr-card-art { aspect-ratio: 21 / 8; }
.lr-empty { max-width: 640px; margin: 60px auto; padding: 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lr-empty > .ico { width: 48px; height: 48px; color: var(--gold-1); }
.lr-empty h2 { margin: 4px 0 0; font: 800 28px var(--font-title); color: var(--gold-1); letter-spacing: .05em; }
.lr-empty p { margin: 0; font: 17px/1.5 var(--font-card); color: var(--lr-ink-dim); }
.lr-hbtn { position: relative; }
.lr-hbadge { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font: 900 12px/1 var(--font-ui); color: #fff2e8; box-sizing: border-box;
background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(10, 5, 20, .9), 0 0 10px rgba(255, 90, 60, .6); pointer-events: none; }
.lr-inwrap { margin: 10px 0 4px; }
.lr-inwrap.lr-instory { display: inline-block; vertical-align: middle; margin: 0 0 0 10px; }
.lr-instory .lr-inlink { min-height: 40px; padding: 7px 14px; font-size: 13px; }
body.mobile .lr-instory .lr-inlink { min-height: 72px; font-size: 20px !important; }
.lr-inlink { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; }
.lr-inlink .ico { width: 18px; height: 18px; }
.lr-inlink.lr-intag { margin-left: auto; min-height: 44px; padding: 6px 16px; }
body.mobile .lr-inlink.lr-intag { min-height: 80px; padding: 8px 24px; }
.lr-count { overflow: visible; }
.lr-profbtn { display: inline-flex; align-items: center; gap: 7px; }
.lr-profbtn .ico { width: 17px; height: 17px; }
body.mobile #lore .top h1 { font-size: 36px; max-width: 560px; }
body.mobile #lore .top .btn.small { min-height: 96px; padding: 0 28px; font-size: 26px; }
body.mobile #lore .top .btn .ico { width: 28px; height: 28px; }
body.mobile .lr-crumb { display: none; }
body.mobile #lore .lr-search .ico { left: 24px; width: 30px; height: 30px; }
body.mobile #lore .lr-search input { width: 420px; height: 96px; font-size: 28px; padding-left: 68px; }
body.mobile .lr-count { padding: 0 26px; height: 96px; align-items: center; font-size: 30px; box-sizing: border-box; }
body.mobile .lr-count span { font-size: 22px; }
body.mobile .lr-count .ico { width: 32px; height: 32px; }
body.mobile .lr-fs button { min-width: 96px; height: 96px; font-size: 32px; }
body.mobile .lr-fs button + button { font-size: 40px; }
body.mobile .lr-fs sub, body.mobile .lr-fs sup { font-size: 18px; }
body.mobile .lr-readbar { top: 100px; height: 6px; }
body.mobile .lr-view { top: 100px; }
body.mobile .lr-dot { width: 24px; height: 24px; }
body.mobile .lr-land { grid-template-columns: 760px 1fr; padding: 28px 36px 40px; gap: 30px; }
body.mobile .lr-hero { padding: 40px 44px 36px; gap: 18px; }
body.mobile .lr-realm { font-size: 84px; }
body.mobile .lr-tag { font-size: 34px; }
body.mobile .lr-intro p { font-size: 28px; line-height: 1.5; }
body.mobile .lr-acts .btn { min-height: 100px; font-size: 28px !important; padding: 16px 30px; }
body.mobile .lr-acts .btn .ico { width: 32px; height: 32px; }
body.mobile .lr-ring { width: 110px; height: 110px; } body.mobile .lr-ring b { font-size: 26px; }
body.mobile .lr-overall b { font-size: 30px; } body.mobile .lr-overall span { font-size: 23px; }
body.mobile .lr-shelves > .af-title { font-size: 24px; }
body.mobile .lr-shelfgrid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(330px, auto); gap: 24px; }
body.mobile .lr-shelf { min-height: 330px; padding: 24px 28px; }
body.mobile .lr-num { font-size: 50px; left: 22px; top: 18px; }
body.mobile .lr-seal { min-width: 54px; height: 54px; font-size: 24px; }
body.mobile .lr-sh-txt b { font-size: 38px; }
body.mobile .lr-sh-txt em { font-size: 25px; }
body.mobile .lr-sh-prog small, body.mobile .lr-sh-lock { font-size: 19px; }
body.mobile .lr-sh-lock .ico { width: 20px; height: 20px; }
body.mobile .lr-bar { height: 10px; }
body.mobile .lr-cat, body.mobile .lr-search-res { padding: 28px 36px 44px; gap: 26px; }
body.mobile .lr-cathead { padding: 36px 40px; min-height: 220px; }
body.mobile .lr-ch-txt h2 { font-size: 64px; }
body.mobile .lr-ch-txt p { font-size: 29px; max-width: 1100px; }
body.mobile .lr-ch-prog { width: 360px; } body.mobile .lr-ch-prog b { font-size: 46px; }
body.mobile .lr-ch-prog > span:not(.lr-bar) { font-size: 20px; } body.mobile .lr-ch-prog small { font-size: 21px; }
body.mobile .lr-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
body.mobile .lr-grid-s { grid-template-columns: repeat(2, 1fr); }
body.mobile .lr-card-txt { padding: 18px 24px 24px; gap: 8px; }
body.mobile .lr-card-txt b { font-size: 32px; }
body.mobile .lr-card-txt em { font-size: 26px; }
body.mobile .lr-card-txt q { font-size: 24px; }
body.mobile .lr-card-txt small, body.mobile .lr-kicker { font-size: 18px; }
body.mobile .lr-card-txt small .ico { width: 20px; height: 20px; }
body.mobile .lr-card > .lr-dot { top: 16px; right: 16px; }
body.mobile .lr-wax { width: 96px; height: 96px; } body.mobile .lr-wax .ico { width: 40px; height: 40px; }
body.mobile .lr-how { font-size: 24px; padding: 14px 18px; } body.mobile .lr-how small { font-size: 16px; }
body.mobile .lr-sr-head > span { font-size: 22px; } body.mobile .lr-sr-head .af-eyebrow { font-size: 20px; }
body.mobile .lr-reader { max-width: 1640px; padding: 28px 40px 90px; }
body.mobile .lr-rhead { min-height: 420px; padding: 40px 60px 36px; gap: 36px; }
body.mobile .lr-medal { width: 200px; height: 200px; }
body.mobile .lr-rhead h2 { font-size: 76px; }
body.mobile .lr-rhead h2.long { font-size: 60px; } body.mobile .lr-rhead h2.xlong { font-size: 48px; }
body.mobile .lr-sub { font-size: 36px; }
body.mobile .lr-meta { font-size: 20px; } body.mobile .lr-meta .ico { width: 24px; height: 24px; }
body.mobile .lr-rhead .af-eyebrow { font-size: 20px; }
body.mobile .lr-page { padding: 50px 70px 60px; }
body.mobile .lr-col { font-size: calc(44px + var(--fs) * 4px); }
body.mobile .lr-body { line-height: 1.66; }
body.mobile .lr-hist { padding: 30px 36px; }
body.mobile .lr-hist-h { font-size: 21px; } body.mobile .lr-hist-h .ico { width: 32px; height: 32px; }
body.mobile .lr-hist p { font-size: calc(34px + var(--fs) * 3px); }
body.mobile .lr-orn { width: 280px; height: 36px; }
body.mobile .lr-links .btn { min-height: 100px; font-size: 26px; padding: 0 30px; } body.mobile .lr-links .btn .ico { width: 30px; height: 30px; }
body.mobile .lr-pnb { min-height: 130px; padding: 22px 28px; gap: 10px; }
body.mobile .lr-pnb small { font-size: 18px; } body.mobile .lr-pnb small .ico { width: 20px; height: 20px; }
body.mobile .lr-pnb b { font-size: 32px; } body.mobile .lr-pnb em { font-size: 22px; }
body.mobile .lr-rel .af-title { font-size: 21px; }
body.mobile .lr-relrow { grid-template-columns: repeat(2, 1fr); gap: 18px; }
body.mobile .lr-relc { min-height: 110px; gap: 18px; }
body.mobile .lr-relav { width: 84px; height: 84px; }
body.mobile .lr-relc b { font-size: 27px; } body.mobile .lr-relc small { font-size: 21px; }
body.mobile .lr-sealedpage { max-width: 1300px; padding: 60px 70px 56px; gap: 22px; }
body.mobile .lr-bigwax { width: 160px; height: 160px; } body.mobile .lr-bigwax .ico { width: 64px; height: 64px; }
body.mobile .lr-sealedpage h2 { font-size: 62px; }
body.mobile .lr-sealtxt { font-size: 32px; }
body.mobile .lr-howbig { padding: 24px 36px; } body.mobile .lr-howbig small { font-size: 18px; } body.mobile .lr-howbig b { font-size: 36px; }
body.mobile .lr-empty h2 { font-size: 44px; } body.mobile .lr-empty p { font-size: 28px; }
body.mobile .lr-hbadge { min-width: 34px; height: 34px; font-size: 18px; }
body.mobile .lr-inlink { min-height: 96px; font-size: 24px !important; }
body.mobile .lr-inlink .ico, body.mobile .lr-profbtn .ico { width: 28px; height: 28px; }
body.fx-low .lr-reader.turn .lr-rhead, body.fx-low .lr-reader.turn .lr-page, body.fx-low .lr-sealedpage.turn { animation: none !important; }
body.fx-low .lr-card, body.fx-low .lr-pnb, body.fx-low .lr-relc { transition: none; }
@media (prefers-reduced-motion: reduce) {
.lr-reader.turn .lr-rhead, .lr-reader.turn .lr-page, .lr-sealedpage.turn { animation: none !important; }
.lr-card, .lr-pnb, .lr-relc, .lr-readbar i { transition: none; }
}
body.theme-midnight .lr-page, body.theme-midnight .lr-card { background: rgba(4, 2, 8, .94); }
/* css/portrait.css */
body.portrait #board0 { width: 900px; }
body.portrait #game .divider { top: calc(var(--ph) / 2); }
body.portrait #game::after { top: calc(var(--ph) / 2); }
body.portrait #centerMed { left: 84px; top: calc(var(--ph) / 2); transform: scale(1.15); }
body.portrait #phaseTag { left: 8px; right: auto; top: calc(var(--ph) / 2 + 64px); width: 200px; }
body.portrait #phaseTag span { font-size: 15px; padding: 6px 12px; }
body.portrait #hud #endTurn.eorb { right: 20px; top: calc(var(--ph) / 2 - 85px); width: 170px; height: 170px; font-size: 22px; }
body.portrait #game .eorb .eo-l { max-width: 130px; }
body.portrait #banner { top: calc(var(--ph) / 2 - 32px); }
body.portrait #banner .msg { font-size: 26px; max-width: 620px; text-align: center; }
body.portrait #promptBar { top: calc(var(--ph) / 2 + 44px); max-width: 860px; }
body.portrait #promptBar .ptxt { font-size: 22px; max-width: 500px; }
body.portrait #sweep { top: calc(var(--ph) / 2 - 70px); }
body.portrait #sweep .t { font-size: 76px; }
body.portrait #intentBox { left: 190px; top: calc(var(--ph) / 2 - 130px); width: 470px; }
body.portrait #game .bplate.s1 { top: 84px; left: 16px; width: 320px; }
body.portrait #game .bplate.s0 { top: calc(var(--ph) - 252px); left: 16px; }
body.portrait #game .crystalbar { transform: none; left: auto; }
body.portrait #log { left: 16px; right: 16px; top: 90px; width: auto; max-height: 44%; font-size: 20px; }
body.portrait #tracker { left: 16px; top: 90px; width: 560px; max-height: 60%; font-size: 19px; }
body.portrait :is(#mulligan, #triumph) .box { max-width: 880px; padding: 28px 22px; }
body.portrait :is(#mulligan, #triumph) .cards { flex-wrap: wrap; justify-content: center; max-width: 840px; }
body.portrait #mulligan .cards .card { width: 190px !important; height: 266px !important; }
body.portrait #over.lc-over .box { width: 860px; max-width: calc(100% - 32px); flex-direction: column; gap: 22px; text-align: center; padding: 40px 30px; }
body.portrait #over .ov-main { width: 100%; }
body.portrait #over .actions { justify-content: center; flex-wrap: wrap; }
body.portrait #over .big { font-size: 96px; }
body.portrait #game .vs-side { width: 100%; height: 56%; left: 0; right: 0; }
body.portrait #game .vs-side.b { top: 0; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
body.portrait #game .vs-side.a { top: auto; bottom: 0; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
body.portrait #game .vs-side .vs-art { left: 50% !important; right: auto !important; margin-left: -320px; }
body.portrait #game .vs-side::after { display: none; }
#rotate { display: none !important; }
body.portrait #over :is(.ov-facts, .rewards, .ov-xp) { justify-content: center; }
#hud #menuBtn, #hud #skipBtn { position: absolute; top: 10px; z-index: 862; display: grid; place-items: center; width: 46px; height: 36px; padding: 0; font-size: 17px; line-height: 1; border-radius: 10px; }
#hud #menuBtn { right: 16px; }
#hud #skipBtn { right: 70px; }
#hud :is(#menuBtn, #skipBtn).on { background: linear-gradient(180deg, rgba(242, 193, 78, .4), rgba(150, 100, 20, .35)); border-color: var(--gold-1); color: #fff4d6; }
#hud #topbar { display: none; top: 54px; right: 16px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; min-width: 150px; border-radius: 14px; background: rgba(10, 5, 24, .95); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform-origin: 100% 0; }
#hud #topbar.open { display: flex; animation: lcMenuIn .18s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes lcMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
body.mobile #hud :is(#menuBtn, #skipBtn) { top: 14px; width: 96px; height: 76px; font-size: 32px; border-radius: 16px; }
body.mobile #hud #skipBtn { right: 124px; }
body.mobile #hud #topbar { top: 102px; min-width: 260px; padding: 12px; gap: 10px; border-radius: 20px; }
body.portrait #hud :is(#menuBtn, #skipBtn) { top: 16px; height: 80px; }
body.portrait #hud #topbar { top: 108px; }
body.portrait #hud #topbar .btn { font-size: 22px; padding: 18px 22px; }
body.fx-low #hud #topbar.open { animation: none; }
#stage.lc-reflow { animation: lcReflow .4s ease-out both; }
@keyframes lcReflow { from { opacity: 0; filter: blur(6px); } }
body.fx-low #stage.lc-reflow { animation-duration: .15s; }
/* css/portrait-core.css */
body.portrait { --top-h: 120px; --nav-h: 132px; --gut: 24px; }
body.portrait .page .top { height: var(--top-h); padding: 0 var(--gut); gap: 16px; }
body.portrait .page .top h1 { flex: 0 1 auto; min-width: 0; font-size: 44px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 0; }
body.portrait .page .top > .btn:first-child { flex: none; width: 96px; height: 96px; min-width: 0; padding: 0; border-radius: 26px; font-size: 0; letter-spacing: 0; display: grid; place-items: center; }
body.portrait .page .top > .btn:first-child > * { display: none; }
body.portrait .page .top > .btn:first-child::before { content: ""; position: static; display: block; width: 44px; height: 44px; left: auto; transform: none; animation: none; z-index: 1;
background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 50%, var(--gold-2));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
body.portrait .page .top .pill { font-size: 28px; padding: 10px 18px; }
body.portrait .page > .body { top: calc(var(--top-h) + 12px); left: var(--gut); right: var(--gut); bottom: calc(var(--nav-h) + 10px); }
body.portrait .navbar, body.portrait #deckbuilder .navbar { left: 0; right: 0; bottom: 0; transform: none; width: auto; height: var(--nav-h); padding: 10px 8px 12px; gap: 2px;
border-radius: 34px 34px 0 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 20; }
body.portrait .navbar::before { left: 18%; right: 18%; }
body.portrait .navbar button { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 8px 0 10px; border-radius: 24px; font-size: 0; letter-spacing: 0; white-space: nowrap;
transition: flex-grow .35s var(--ease-out), background .2s, color .2s; }
body.portrait .navbar button.on { flex-grow: 1.9; font-size: 22px; letter-spacing: .03em; }
body.portrait .navbar button:hover { transform: none; }
body.portrait .navbar button .ic { height: 60px; } body.portrait .navbar button .ic .ico { width: 52px; height: 52px; }
body.portrait .navbar button.on .ic { height: 50px; } body.portrait .navbar button.on .ic .ico { width: 44px; height: 44px; }
body.portrait .navbar button.on::after { bottom: 4px; }
body.portrait .navbar .badge { top: 8px; right: calc(50% - 46px); left: auto; min-width: 32px; height: 32px; padding: 0 8px; font-size: 19px; line-height: 32px; }
body.portrait[data-screen] #toast { top: calc(var(--top-h) + 18px); bottom: auto; left: 50%; right: auto; width: max-content; max-width: 820px; transform: translate(-50%, -14px) scale(.96);
font-size: 26px; padding: 20px 30px 20px 20px; border-radius: 22px; }
body.portrait[data-screen] #toast.on { transform: translate(-50%, 0) scale(1); }
body.portrait[data-screen="hub"] #toast { top: 150px; }
body.portrait #sheet { padding: 0; }
body.portrait #sheet .box:not(.x) { width: calc(100% - 2 * var(--gut)); min-width: 0; max-width: none; max-height: calc(var(--ph) - 160px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
padding: 40px 34px 34px; border-radius: 30px; box-sizing: border-box; }
body.portrait #sheet .box h2 { font-size: 44px; line-height: 1.12; gap: 16px; }
body.portrait #sheet .box h2::before, body.portrait #sheet .box h2::after { width: 60px; }
body.portrait #sheet .lead { font-size: 26px; }
body.portrait #sheet .err { font-size: 24px; }
body.portrait #sheet .actions { flex-wrap: wrap; gap: 18px; margin-top: 26px; }
body.portrait #sheet .actions .btn { min-height: 96px; min-width: 240px; font-size: 26px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; }
body.portrait #sheet .friend { grid-template-columns: 1fr; gap: 20px; }
body.portrait #sheet .friend h3 { font-size: 32px; } body.portrait #sheet .friend p { font-size: 24px; }
body.portrait #sheet .friend .btn { min-height: 96px; font-size: 26px; }
body.portrait #sheet .codein { font-size: 40px !important; padding: 18px !important; }
body.portrait #sheet .waiting h2 { font-size: 40px; } body.portrait #sheet .winfo { font-size: 26px; }
body.portrait #hub .hubui { display: flex; flex-direction: column; gap: 18px; padding: 20px var(--gut) calc(var(--nav-h) + 20px); }
body.portrait #hub .hublogo { display: none; }
body.portrait #hub .vignette { background: radial-gradient(ellipse 110% 70% at 50% 36%, transparent 45%, rgba(5, 2, 14, .8)), linear-gradient(0deg, rgba(5, 2, 14, .92), transparent 40%), linear-gradient(180deg, rgba(5, 2, 14, .75), transparent 12%); }
body.portrait #hub .hubtop { position: relative; top: auto; left: auto; right: auto; flex: none; height: 100px; gap: 14px; }
body.portrait #hub .hubtop .profile { flex: 0 1 auto; min-width: 0; padding: 6px 30px 6px 6px; }
body.portrait #hub .avring { width: 86px; height: 86px; }
body.portrait #hub .hubtop .profile .lvl { font-size: 30px; max-width: 300px; }
body.portrait #hub .hubtop .profile .sub { font-size: 22px; }
body.portrait #hub .xpline { width: 200px; height: 7px; }
body.portrait #hub .netdot { display: none; }
body.portrait #hub .hubtop .pill { font-size: 32px; padding: 12px 22px; height: 76px; box-sizing: border-box; }
body.portrait #hub .hubtop .iconbtn { position: absolute; width: 96px; height: 96px; margin: 0; z-index: 6; }
body.portrait #hub .hubtop .iconbtn .ico, body.portrait #hub .hubtop .iconbtn > svg { width: 42px; height: 42px; }
body.portrait #hub .hubtop #hLore { left: 0; top: 126px; }
body.portrait #hub .hubtop #hMuseum { left: 0; top: 240px; }
body.portrait #hub .hubtop #hSet { right: 0; top: 126px; }
body.portrait #hub .hubtop .lr-hbadge { top: -6px; right: -6px; left: auto; }
body.portrait #hub .hubleader { position: relative; left: auto; top: auto; width: auto; flex: 1 1 0; min-height: 0; margin: 4px 120px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.portrait #hub .hubleader .hl-aura { left: -30%; right: -30%; top: 0; bottom: 60px; height: auto; }
body.portrait #hub .hubleader .hl-float { flex: 0 1 auto; min-height: 0; height: min(780px, 100% - 130px); display: flex; justify-content: center; }
body.portrait #hub .hubleader .lwrap { height: 100%; aspect-ratio: 262 / 390; }
body.portrait #hub .hubleader .lc { width: 100%; height: 100%; border-radius: 20px; }
body.portrait #hub .hubleader .hl-plinth { flex: none; width: 70%; max-width: 360px; margin: 8px auto 0; }
body.portrait #hub .hubleader .change { flex: none; width: auto; min-width: 360px; min-height: 92px; margin-top: 12px; padding: 0 36px; font-size: 24px; letter-spacing: .08em; border-radius: 22px; }
body.portrait #hub .hubleader .change .ico { width: 30px; height: 30px; }
body.portrait #hub .hubright { position: relative; right: auto; top: auto; width: auto; flex: none; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "deck loc" "play play"; gap: 16px 14px; }
body.portrait #hub .hubright:not(:has(.locChip)) { grid-template-areas: "deck deck" "play play"; }
body.portrait #hub .hdeck { grid-area: deck; min-height: 108px; padding: 10px 18px 10px 10px; border-radius: 22px; gap: 16px; }
body.portrait #hub .hdeck .hd-art { width: 86px; height: 86px; border-radius: 16px; }
body.portrait #hub .hdeck em { font-size: 18px; } body.portrait #hub .hdeck b { font-size: 30px; } body.portrait #hub .hdeck .hd-txt > span { font-size: 22px; }
body.portrait #hub .hdeck > .ico { width: 30px; height: 30px; }
body.portrait #hub .hubright .locChip { grid-area: loc; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 12px 18px; border-radius: 22px;
font-size: 22px; line-height: 1.3; white-space: normal; text-align: center; }
body.portrait #hub .hubright .locChip .ico { width: 26px; height: 26px; }
body.portrait #hub .bp-wrap { grid-area: play; }
body.portrait #hub .bigplay { min-height: 176px; padding: 18px 24px 20px; border-radius: 30px; }
body.portrait #hub .bigplay .bp-t { font-size: 100px; }
body.portrait #hub .bigplay small { font-size: 22px; margin-top: 8px; }
body.portrait #hub .hubquests { position: relative; left: auto; right: auto; bottom: auto; flex: none; gap: 12px; }
body.portrait #hub .hq-head { padding: 0 2px; gap: 12px; }
body.portrait #hub .hq-head b { font-size: 22px; gap: 10px; } body.portrait #hub .hq-head b .ico { width: 28px; height: 28px; }
body.portrait #hub .hq-head b i { font-size: 18px; padding: 5px 10px; }
body.portrait #hub .hq-time { font-size: 22px; } body.portrait #hub .hq-time .ico { width: 22px; height: 22px; }
body.portrait #hub .hq-row { margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
body.portrait #hub .hq-row::-webkit-scrollbar { display: none; }
body.portrait #hub .hq-row .seasonHub { flex: 0 0 520px; scroll-snap-align: start; }
body.portrait #hub .hq-row .seasonHub .shArt { width: 118px; }
body.portrait #hub .hq-row .seasonHub .shTxt { padding: 12px 18px 12px 8px; }
body.portrait #hub .hq-row .seasonHub .shEy { font-size: 17px; } body.portrait #hub .hq-row .seasonHub .shTxt > b { font-size: 30px; }
body.portrait #hub .hq-row .seasonHub .shEv, body.portrait #hub .hq-row .seasonHub .shTr { font-size: 20px; }
body.portrait #hub .hq-cards { flex: none; display: flex; gap: 14px; }
body.portrait #hub .hq { flex: 0 0 270px; min-height: 150px; padding: 16px 20px; border-radius: 22px; gap: 10px; scroll-snap-align: start; }
body.portrait #hub .hq p { font-size: 25px; line-height: 1.25; }
body.portrait #hub .hq-bar, body.portrait #hub .hq-pips i { height: 10px; }
body.portrait #hub .hq-n { font-size: 22px; } body.portrait #hub .hq-gold { font-size: 26px; }
body.portrait #hub .hq .coin { width: 26px; height: 26px; } body.portrait #hub .hq .packicon { width: 18px; height: 26px; }
body.portrait #hub .hq-claim { font-size: 22px; padding: 12px 18px; }
body.portrait #hub .hq-done { font-size: 20px; }
body.portrait #hub .lcs-starter { left: var(--gut); right: var(--gut); top: 136px; bottom: auto; width: auto; z-index: 9; padding: 26px 24px 24px; border-radius: 28px; }
body.portrait #hub .lcs-sthead { flex-wrap: wrap; gap: 16px; }
body.portrait #hub .lcs-sthead > div { flex: 1 1 460px; min-width: 0; }
body.portrait #hub .lcs-sthead b { font-size: 36px; } body.portrait #hub .lcs-sthead span { font-size: 23px; }
body.portrait #hub .lcs-sthead .btn { min-height: 80px; font-size: 22px; padding: 0 26px; }
body.portrait #hub .lcs-strow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
body.portrait #hub .lcs-strow button { padding: 10px 4px 14px; border-radius: 18px; }
body.portrait #hub .lcs-strow button b { font-size: 24px; } body.portrait #hub .lcs-strow button span { font-size: 17px; white-space: normal; line-height: 1.2; text-align: center; }
body.portrait #hub .lcs-stpet { height: 120px; }
body.portrait #hub .hubui.choosing .hubleader { opacity: .35; filter: blur(2px); transition: opacity .4s, filter .4s; }
body.portrait #hub .cz-hubpet { left: 40px; top: auto; bottom: calc(var(--nav-h) + 560px); width: 150px !important; height: 150px !important; }
body.portrait .modesheet .modes { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 20px; }
body.portrait .modesheet .mode { width: 100%; height: 250px; flex: none; }
body.portrait .modesheet .mode::before { background: linear-gradient(90deg, rgba(8, 4, 18, .92) 0%, rgba(8, 4, 18, .55) 55%, rgba(8, 4, 18, .15) 100%), linear-gradient(0deg, rgba(8, 4, 18, .7), transparent 50%); }
body.portrait .modesheet .mode.off::before { background: linear-gradient(90deg, rgba(8, 4, 18, .96), rgba(8, 4, 18, .7)); }
body.portrait .modesheet .mode .mt-ic { left: 26px; top: 26px; width: 84px; height: 84px; font-size: 42px; }
body.portrait .modesheet .mode .mt-tag { right: 22px; top: 24px; font-size: 18px; padding: 10px 16px; }
body.portrait .modesheet .mode .mt-txt { left: 28px; right: 28px; bottom: 26px; gap: 8px; }
body.portrait .modesheet .mode .mt-txt b { font-size: 48px; }
body.portrait .modesheet .mode .mt-txt span { font-size: 25px; }
body.portrait .modesheet .mode .mt-lock { left: auto; right: 22px; top: 26px; transform: none; font-size: 18px; padding: 12px 18px; }
body.portrait .modesheet .mode:has(.mt-lock) .mt-tag { display: none; }
body.portrait .modesheet .modesub { min-height: 112px; padding: 12px 20px 12px 12px; gap: 18px; border-radius: 20px; }
body.portrait .modesheet .ms-av { width: 86px; height: 86px; border-radius: 16px; }
body.portrait .modesheet .ms-t { flex-direction: column; align-items: flex-start; gap: 4px; flex-wrap: nowrap; }
body.portrait .modesheet .ms-t em { font-size: 17px; } body.portrait .modesheet .ms-t b { font-size: 32px; }
body.portrait .modesheet .ms-t span { font-size: 22px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.portrait .modesheet .ms-ch { font-size: 20px; } body.portrait .modesheet .ms-ch .ico { width: 26px; height: 26px; }
body.portrait #select.on { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
body.portrait #select::-webkit-scrollbar { display: none; }
body.portrait #select .top { position: sticky; top: 0; }
body.portrait #select .selhint { display: none; }
body.portrait #select .leaders { position: relative; top: auto; left: auto; right: auto; transform: none; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center;
gap: 36px 18px; padding: 42px var(--gut) 34px; }
body.portrait #select .leaderPick { width: 196px; }
body.portrait #select .leaderPick .lc { width: 196px; height: 292px; }
body.portrait #select .leaderPick.sel { transform: translateY(-6px) scale(1.04); }
body.portrait #select .leaderPick .setname { margin-top: 14px; }
body.portrait #select .leaderPick .setname b { font-size: 26px; } body.portrait #select .leaderPick .setname span { font-size: 17px; }
body.portrait #select .detail { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: auto; margin: 0 var(--gut); padding: 0; display: flex; flex-direction: column; gap: 0;
overflow: visible; border-radius: 30px; }
body.portrait #select .detail .dt-portrait { flex: none; height: 380px; margin: 0; border-radius: 30px 30px 0 0; background-position: 50% 22%;
-webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
body.portrait #select .detail .dt-info { margin-top: -120px; padding: 0 30px 10px; gap: 16px; overflow: visible; position: relative; }
body.portrait #select .detail .af-eyebrow { font-size: 19px; }
body.portrait #select .detail h2 { font-size: 54px; }
body.portrait #select .detail .dt-id { display: block; font-size: 25px; line-height: 1.45; }
body.portrait #select .detail .dt-box { padding: 18px 22px; border-radius: 18px; }
body.portrait #select .dt-lb { font-size: 18px; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } body.portrait #select .dt-lb .ico { width: 24px; height: 24px; }
body.portrait #select .dt-tx { font-size: 28px; line-height: 1.38; }
body.portrait #select .detail .dt-sig { padding: 20px 30px 30px; }
body.portrait #select .sigrow { gap: 22px; }
body.portrait #select .sigc, body.portrait #select .sigc .card { width: 196px; height: 274px; }
body.portrait #select .detail .side { position: sticky; bottom: 0; z-index: 4; margin: 0 calc(-1 * var(--gut)); padding: 22px var(--gut) 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
background: linear-gradient(180deg, rgba(14, 8, 28, .9), rgba(8, 4, 18, .98)); border-top: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 -18px 40px rgba(0, 0, 0, .55); backdrop-filter: blur(8px); }
body.portrait #select .detail .side { font-size: 26px; }
body.portrait #select .detail .side label { grid-row: 1; margin: 0; font-size: 18px; }
body.portrait #select .detail .side select { grid-row: 2; font-size: 26px; padding: 0 18px; height: 84px; border-radius: 16px; min-width: 0; }
body.portrait #select .detail #begin { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; min-height: 120px; font-size: 44px; border-radius: 24px; }
body.portrait #select .detail #begin .ico { width: 40px; height: 40px; }
body.portrait #sheet .box.acctsheet { padding-top: 0; }
body.portrait .acct-hero { margin: 0 -34px 26px; padding: 44px 34px 30px; gap: 26px; }
body.portrait .acct-hero::before { left: 30%; }
body.portrait .ah-av .avring { width: 160px; height: 160px; }
body.portrait .ah-av .ah-edit { width: 54px; height: 54px; } body.portrait .ah-av .ah-edit .ico { width: 26px; height: 26px; }
body.portrait .ah-av .avring .lvb { font-size: 22px; height: 38px; min-width: 42px; }
body.portrait #sheet .ah-txt h2 { font-size: 50px; }
body.portrait .ah-chips { gap: 10px; }
body.portrait .ah-chips span { font-size: 22px; padding: 10px 16px; }
body.portrait .avpick { padding: 20px; border-radius: 22px; }
body.portrait .avp-head { flex-wrap: wrap; gap: 10px 16px; }
body.portrait .avp-head b { font-size: 30px; } body.portrait .avp-head span { font-size: 22px; flex-basis: 100%; order: 3; }
body.portrait .avp-head .avp-done { min-height: 80px; font-size: 22px; padding: 0 28px; }
body.portrait .avgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
body.portrait .avo em { font-size: 14px; }
body.portrait .acctsheet .acct { grid-template-columns: 1fr; gap: 22px; }
body.portrait .acctsheet .acf { padding: 26px 26px 28px; border-radius: 22px; gap: 16px; }
body.portrait .acctsheet .acf h3 { font-size: 32px; } body.portrait .acctsheet .acf p { font-size: 23px; }
body.portrait .acctsheet .acf-h > .ico { width: 40px; height: 40px; }
body.portrait .acctsheet .fld { font-size: 28px; }
body.portrait .acctsheet .fld > span { font-size: 18px; }
body.portrait .acctsheet .fld input, body.portrait .acct input { font-size: 28px !important; padding: 0 22px; height: 88px; }
body.portrait .acctsheet .ferr { font-size: 22px; }
body.portrait .acctsheet .acf .btn { min-height: 96px; font-size: 26px; }
body.portrait .acctsheet .acf-tag { font-size: 16px; padding: 7px 14px; top: -14px; }
body.portrait .acct-note { padding: 22px 24px; gap: 18px; border-radius: 20px; }
body.portrait .acct-note b { font-size: 28px; } body.portrait .acct-note span { font-size: 24px; } body.portrait .acct-note > .ico { width: 40px; height: 40px; }
body.portrait .acct-info { grid-template-columns: 1fr 1fr; gap: 14px; }
body.portrait .acct-info > div { padding: 18px 20px; border-radius: 18px; }
body.portrait .acct-info span { font-size: 17px; } body.portrait .acct-info b { font-size: 30px; }
body.portrait .acctsheet .actions { justify-content: center; }
body.portrait .settings.m-panel { max-width: none; }
body.portrait .settings .set { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px 20px; padding: 26px 8px; }
body.portrait .settings .setic { width: 72px; height: 72px; font-size: 32px; }
body.portrait .settings .settxt b { font-size: 30px; } body.portrait .settings .settxt p { font-size: 23px; line-height: 1.4; margin-top: 6px; }
body.portrait .settings .seg.mseg { grid-column: 1 / -1; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 6px; border-radius: 20px; }
body.portrait .settings .seg.mseg .segpill { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n)); border-radius: 15px; }
body.portrait .settings .seg.mseg button { min-height: 84px; font-size: 25px; padding: 0 8px; border-radius: 15px; }
body.portrait .settings .switch { font-size: 24px; min-height: 96px; }
body.portrait .settings .switch i { width: 96px; height: 52px; } body.portrait .settings .switch i::after { width: 42px; height: 42px; top: 4px; left: 4px; }
body.portrait .settings .switch.on i::after { transform: translateX(44px); } body.portrait .settings .switch span { width: 44px; }
body.portrait .settings #fs { min-height: 88px; font-size: 22px; padding: 0 24px; }
body.portrait #hub .hubright .chChip { grid-column: 1 / -1; border-radius: 22px; }
body.portrait .chChip .chc-go { font-size: 22px; padding: 16px 20px; gap: 14px; } body.portrait .chChip .chc-go .ico { width: 28px; height: 28px; }
body.portrait .chChip .chc-x { width: 72px; font-size: 34px; }
body.portrait .modesheet .ms-learn { font-size: 22px; margin: 18px auto 16px; } body.portrait .modesheet .ms-learn .ico { width: 26px; height: 26px; }
/* css/portrait-cards.css */
body.portrait #collection, body.portrait #deckbuilder, body.portrait #shop, body.portrait #opening, body.portrait #inspect {
--ct: var(--top-h, 100px); --cn: var(--nav-h, 150px); }
body.portrait .cl-bar { top: calc(var(--ct) + 134px); left: 24px; right: 24px; height: 96px; }
body.portrait .cl-bar .cnt { display: none; }
body.portrait .cf.cf-p { gap: 14px; height: 100%; position: static; }
body.portrait .cf-p .cf-search { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 30px; }
body.portrait .cf-p .cf-sort { font-size: 28px; }
body.portrait .cf-p .cf-search .search { height: 96px; padding: 0 20px 0 66px; border-radius: 20px; font: 500 30px var(--font-ui); }
body.portrait .cf-p .cf-sort .lci, body.portrait .cf-p .cf-search .lci { left: 22px; width: 30px; height: 30px; }
body.portrait .cf-p .cf-sort select { height: 96px; padding: 0 54px 0 66px; border-radius: 20px; font: 700 28px var(--font-ui); }
body.portrait .cf-p .cf-sort::after { right: 24px; width: 11px; height: 11px; margin-top: -9px; border-width: 0 3px 3px 0; }
body.portrait .cf-ptog { appearance: none; cursor: pointer; flex: none; position: relative; height: 96px; padding: 0 28px 0 24px; border-radius: 20px; display: flex; align-items: center; gap: 12px;
font: 800 28px var(--font-ui); letter-spacing: .03em; color: #e6dbff;
background: linear-gradient(180deg, rgba(8, 4, 18, .85), rgba(22, 12, 44, .85)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 2px 8px rgba(0, 0, 0, .35) inset;
transition: border-color .2s, background .2s, transform .2s var(--ease-back); }
body.portrait .cf-ptog .lci { width: 32px; height: 32px; color: var(--gold-2, #e2b04a); }
body.portrait .cf-ptog:active { transform: scale(.96); }
body.portrait .cf-ptog.act, body.portrait .cf-ptog[aria-expanded="true"] { color: #fff; border-color: var(--gold-1, #f6d98a);
background: linear-gradient(180deg, rgba(120, 70, 210, .8), rgba(70, 34, 140, .85)); box-shadow: 0 0 0 1px rgba(232, 186, 90, .5) inset, 0 6px 16px rgba(90, 40, 180, .45); }
body.portrait .cf-ptog em { position: absolute; top: -12px; right: -10px; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center;
font: 900 24px var(--font-ui); font-style: normal; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e 55%, #c98a22); box-shadow: 0 0 14px rgba(242, 193, 78, .7); }
body.portrait .cf-panel { position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 30; display: none; flex-direction: column; gap: 10px; padding: 18px 22px 22px; border-radius: 26px;
background: linear-gradient(180deg, rgba(34, 19, 64, .985), rgba(12, 7, 26, .985)); border: 1px solid rgba(232, 186, 90, .42); box-shadow: 0 34px 70px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .4); }
body.portrait .cf-p.open .cf-panel { display: flex; animation: cfDrop .28s var(--ease-out) both; }
@keyframes cfDrop { from { opacity: 0; transform: translateY(-14px); } }
body.portrait .cf-ph { margin: 8px 4px 0; font: 700 22px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2, #e2b04a); }
body.portrait .cf-panel .cf-g { display: grid; gap: 8px; padding: 6px; border-radius: 18px; }
body.portrait .cf-panel .cf-sets, body.portrait .cf-panel .cf-own { grid-template-columns: repeat(3, 1fr); }
body.portrait .cf-panel .cf-types { grid-template-columns: repeat(2, 1fr); }
body.portrait .cf-panel .cf-archs { grid-template-columns: repeat(3, 1fr); }
body.portrait .cf-panel .cf-arch { justify-content: flex-start; padding-left: 24px; }
body.portrait .cf-panel .cf-arch i { width: 16px; height: 16px; }
body.portrait .cf-panel .cf-g button { width: auto; height: 96px; padding: 0 14px; gap: 14px; border-radius: 14px; font: 700 26px var(--font-ui); letter-spacing: .02em; }
body.portrait .cf-panel .cf-set { width: auto; margin: 0; justify-content: flex-start; padding-left: 26px; }
body.portrait .cf-panel .cf-set .setgem { width: 26px; height: 32px; }
body.portrait .cf-panel .cf-set.cf-promo .setgem { width: 32px; height: 32px; }
body.portrait .cf-panel .cf-set span { color: inherit; }
body.portrait .cf-panel .cf-set.on span { color: color-mix(in srgb, var(--c) 45%, #fff); }
body.portrait .cf-panel .cf-type { width: auto; justify-content: flex-start; padding-left: 28px; }
body.portrait .cf-panel .cf-type span { display: inline; }
body.portrait .cf-panel .cf-type .lci { width: 30px; height: 30px; }
body.portrait .cf-panel .cf-tog { height: 96px; padding: 0 26px; gap: 18px; justify-content: flex-start; border-radius: 18px; font: 700 26px var(--font-ui); }
body.portrait .cf-panel .cf-tog i { width: 64px; height: 36px; }
body.portrait .cf-panel .cf-tog i::after { top: 4px; left: 4px; width: 28px; height: 28px; }
body.portrait .cf-panel .cf-tog.on i::after { transform: translateX(28px); }
body.portrait .cf-pfoot { display: flex; gap: 14px; margin-top: 14px; }
body.portrait .cf-pfoot .cf-clear { width: auto; height: 96px; padding: 0 30px; gap: 10px; border-radius: 18px; font: 700 26px var(--font-ui); transform: none; }
body.portrait .cf-pfoot .cf-clear .lci { width: 28px; height: 28px; }
body.portrait .cf-pfoot .cf-clear.hide { display: none; }
body.portrait .cf-pfoot .cf-done { flex: 1; height: 96px; padding: 0 20px; border-radius: 18px; font-size: 30px; }
body.portrait #collection .grid, body.portrait #deckbuilder .grid { left: 0; right: 0; grid-template-columns: repeat(3, 256px); gap: 46px 26px; padding: 22px 24px 70px; justify-content: center; }
body.portrait .grid .slotc, body.portrait .grid .slotc .card { width: 256px; height: 358px; }
body.portrait .grid .slotc .card:hover { transform: none; }
body.portrait .grid .slotc .card:active { transform: scale(.96); }
body.portrait .cpips { bottom: -30px; gap: 12px; }
body.portrait .cpips i { width: 15px; height: 15px; }
body.portrait .clock { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
body.portrait .clock .lci { width: 36px; height: 36px; }
body.portrait .ccraft { font-size: 22px; padding: 6px 14px; bottom: 12px; }
body.portrait .ccraft.promo { font-size: 22px; line-height: 1.15; width: 92%; padding: 8px 10px; bottom: 6%; border-radius: 14px; letter-spacing: 0; }
body.portrait .cnew { font-size: 22px; padding: 6px 12px; top: -12px; left: -8px; border-radius: 8px; }
body.portrait .cl-band { flex-wrap: wrap; gap: 4px 16px; padding: 6px 4px 10px; margin-bottom: -18px; }
body.portrait .cl-band b { font-size: 32px; letter-spacing: .14em; }
body.portrait .cl-band span { font-size: 22px; }
body.portrait .cl-empty { font-size: 30px; padding: 120px 40px; }
body.portrait .grid .nown { font-size: 20px; padding: 6px 14px; bottom: 14px; }
body.portrait #collection .grid { top: calc(var(--ct) + 244px); bottom: var(--cn); }
body.portrait #collection .albumsbtn { height: 72px; padding: 0 22px; gap: 10px; font-size: 24px; border-radius: 16px; }
body.portrait #collection .albumsbtn .lci { width: 28px; height: 28px; }
body.portrait #collection .albumsbtn em { font-size: 20px; min-width: 32px; height: 32px; }
body.portrait .cl-sum { position: absolute; top: calc(var(--ct) + 18px); left: 24px; right: 24px; height: 100px; z-index: 4; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 16px; border-radius: 24px;
background: linear-gradient(180deg, rgba(34, 19, 64, .86), rgba(12, 7, 26, .9)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
body.portrait .cl-sum .cl-prog { gap: 14px; }
body.portrait .cl-sum .cl-prog svg { width: 72px; height: 72px; }
body.portrait .cl-sum .cl-prog b { font-size: 36px; }
body.portrait .cl-sum .cl-prog b small { font-size: 24px; }
body.portrait .cl-sum .cl-prog span { font-size: 20px; letter-spacing: .16em; }
body.portrait .cl-sum .cl-shards { margin-left: auto; gap: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body.portrait .cl-sum .cl-shards .lc-shard { padding: 12px 10px; gap: 9px; }
body.portrait .cl-sum .cl-shards .lc-shard > i { width: 18px; height: 24px; }
body.portrait .cl-sum .cl-shards .lc-shard b { font-size: 30px; min-width: 0; }
body.portrait #deckbuilder .cl-bar { top: calc(var(--ct) + 18px); right: 24px; }
body.portrait #deckbuilder .grid { top: calc(var(--ct) + 128px); right: 0; bottom: calc(var(--cn) + 170px); }
body.portrait .dl-hint { display: none; }
body.portrait #deckbuilder .decklist.af-panel.dl-dock { left: 16px; right: 16px; width: auto; bottom: calc(var(--cn) + 6px); top: calc(var(--ph) - var(--cn) - 164px); padding: 14px 16px; gap: 16px; border-radius: 28px; z-index: 8;
background: linear-gradient(180deg, rgba(40, 23, 76, .97), rgba(12, 7, 26, .985)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
transition: top .42s var(--ease-out); }
body.portrait #deckbuilder .decklist.af-panel.dl-dock.open { top: calc(var(--ct) + 14px); overflow: hidden; }
body.portrait #deckbuilder .dl-dock:not(.open) > :not(.dl-dockbar):not(#dbMsg) { display: none; }
body.portrait .dl-dockbar { display: flex; align-items: center; gap: 14px; flex: none; height: 128px; }
body.portrait .dl-dockbar .dl-ring { width: 112px; height: 112px; cursor: pointer; }
body.portrait .dl-dockbar .dl-ring b { font-size: 40px; }
body.portrait .dl-dockbar .dl-ring span { font-size: 22px; margin-top: 4px; }
body.portrait .dl-dockbar .dl-ring.bump { animation: dlBump .42s var(--ease-back); }
@keyframes dlBump { 40% { transform: scale(1.14); filter: drop-shadow(0 0 16px rgba(185, 138, 255, .9)); } }
body.portrait .dl-dockbar .dl-pick { flex: 1; min-width: 0; position: static; }
body.portrait .dl-dockbar .dl-pickbtn { width: 100%; min-width: 0; max-width: none; height: 104px; padding: 0 20px; gap: 16px; border-radius: 18px; }
body.portrait .dl-dockbar .dl-pickbtn small { font-size: 22px; }
body.portrait .dl-dockbar .dl-pickbtn b { font-size: 32px; }
body.portrait .dl-dockbar .dl-pickbtn .lci { width: 30px; height: 30px; }
body.portrait .dl-dockbar .dl-dot { width: 18px; height: 18px; }
body.portrait .dl-dockbar #save { flex: none; height: 104px; min-width: 164px; padding: 0 26px; border-radius: 18px; font-size: 30px; }
body.portrait .dl-grab { appearance: none; cursor: pointer; flex: none; width: 96px; height: 104px; border-radius: 18px; display: grid; place-items: center; color: var(--gold-1, #f6d98a);
background: linear-gradient(180deg, rgba(40, 24, 72, .8), rgba(18, 10, 36, .85)); border: 1px solid rgba(232, 186, 90, .35); transition: background .2s, transform .2s var(--ease-back); }
body.portrait .dl-grab .lci { width: 42px; height: 42px; transition: transform .35s var(--ease-back); }
body.portrait .dl-grab:active { transform: scale(.94); }
body.portrait .dl-dock.open .dl-grab .lci { transform: rotate(180deg); }
body.portrait .dl-dock .dl-menu { left: 0; right: 0; width: auto; top: 150px; bottom: auto; max-height: calc(100% - 170px); padding: 16px; border-radius: 24px; z-index: 30; }
body.portrait .dl-dock:not(.open) .dl-menu { top: auto; bottom: calc(100% + 14px); max-height: 1000px; }
body.portrait .dl-dock .dl-new { font-size: 28px; padding: 28px; border-radius: 16px; gap: 12px; }
body.portrait .dl-dock .dl-new .lci { width: 30px; height: 30px; }
body.portrait .dl-dock .dl-fold h5 { font-size: 22px; margin: 20px 8px 10px; gap: 10px; }
body.portrait .dl-dock .dl-fold h5 .lci { width: 24px; height: 24px; }
body.portrait .dl-dock .dl-fold button { grid-template-columns: 20px 1fr auto; gap: 18px; padding: 28px 20px; border-radius: 14px; }
body.portrait .dl-dock .dl-fold button b { font-size: 30px; }
body.portrait .dl-dock .dl-fold button em { font-size: 26px; }
body.portrait .dl-dock .dl-fold .dl-dot { width: 16px; height: 16px; }
body.portrait .dl-dock .dl-none { font-size: 26px; }
body.portrait .dl-dock .dl-head { gap: 14px; }
body.portrait .dl-dock .dl-names { flex-direction: row; gap: 14px; font-size: 30px; }
body.portrait #deckbuilder .dl-dock .dl-name { flex: 1.3; min-width: 0; height: 96px; font-size: 30px; padding: 0 20px; border-radius: 16px; }
body.portrait .dl-dock .dl-folder { flex: 1; min-width: 0; font-size: 26px; }
body.portrait .dl-dock .dl-folder input { height: 96px; font-size: 26px; padding: 0 16px 0 58px; border-radius: 16px; }
body.portrait .dl-dock .dl-folder .lci { left: 20px; width: 28px; height: 28px; }
body.portrait .dl-dock .dl-stats { padding: 16px 16px 12px; border-radius: 18px; }
body.portrait #deckbuilder .dl-dock .curve { height: 130px; gap: 8px; }
body.portrait #deckbuilder .dl-dock .curve .cv em { font-size: 22px; height: 26px; line-height: 26px; }
body.portrait #deckbuilder .dl-dock .curve .cv > span { font-size: 22px; margin-top: 6px; }
body.portrait .dl-dock .dl-types { display: flex; margin-top: 14px; }
body.portrait .dl-dock .dl-types span { font-size: 22px; gap: 8px; }
body.portrait .dl-dock .dl-types b { font-size: 28px; }
body.portrait .dl-dock .dl-types .lci { width: 28px; height: 28px; }
body.portrait .dl-dock .dnote { font-size: 24px; min-height: 30px; }
body.portrait .dl-dock .dnote .ok .lci { width: 24px; height: 24px; }
body.portrait #deckbuilder .dl-dock .rows { gap: 6px; margin-right: -8px; padding-right: 8px; }
body.portrait #deckbuilder .dl-dock .drow { height: 84px; grid-template-columns: 62px 1fr auto; gap: 16px; padding: 0 16px 0 10px; border-radius: 12px; }
body.portrait .dl-dock .dr-cost { width: 56px; height: 62px; }
body.portrait .dl-dock .dr-cost span { font-size: 30px; }
body.portrait .dl-dock .dr-name { font-size: 29px; }
body.portrait .dl-dock .dr-q { font-size: 26px; padding: 4px 14px; border-radius: 10px; }
body.portrait .drow.enter { animation-name: drowInM; }
body.portrait .dl-dock .dl-empty { font-size: 26px; gap: 14px; padding: 50px 30px; }
body.portrait .dl-dock .dl-empty b { font-size: 32px; }
body.portrait .dl-dock .dl-empty .lci { width: 44px; height: 44px; }
body.portrait .dl-dock .dl-actions { gap: 12px; padding-top: 14px; }
body.portrait .dl-dock .dl-main { grid-template-columns: 1fr; }
body.portrait .dl-dock .dl-main .btn { height: 96px; padding: 0 20px; font-size: 30px; border-radius: 18px; }
body.portrait .dl-dock .dl-tools { gap: 10px; }
body.portrait .dl-dock .dl-tools button { height: 110px; padding: 0; gap: 8px; justify-content: center; border-radius: 16px; font-size: 20px; letter-spacing: .04em; }
body.portrait .dl-dock .dl-tools button .lci { width: 36px; height: 36px; }
body.portrait .dl-dock #dbMsg { font-size: 24px; min-height: 30px; }
body.portrait .dl-dock:not(.open) #dbMsg { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 820px; padding: 16px 28px; border-radius: 99px;
background: rgba(12, 6, 28, .96); border: 1px solid rgba(255, 156, 146, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); pointer-events: none; }
body.portrait .dl-dock:not(.open) #dbMsg.good { border-color: rgba(157, 255, 196, .5); }
body.portrait .dl-dock:not(.open) #dbMsg:empty { display: none; }
body.portrait #shop .packs { top: calc(var(--ct) + 10px); bottom: calc(var(--cn) + 110px); left: 12px; right: 12px; flex-wrap: wrap; align-content: center; gap: 16px 12px; }
body.portrait #shop .shoppack { width: 276px; height: 560px; }
body.portrait #shop .shoppack img { height: 270px; max-width: 220px; }
body.portrait .sp-spot { width: 300px; height: 440px; }
body.portrait .sp-ped { top: 292px; width: 230px; }
body.portrait .sp-info { top: 370px; gap: 8px; padding: 0 6px; }
body.portrait #shop .shoppack .nm { font-size: 32px; letter-spacing: .16em; }
body.portrait #shop .sp-theme { font-size: 22px; letter-spacing: .1em; line-height: 1.2; white-space: normal; text-align: center; min-height: 54px; display: flex; align-items: center; }
body.portrait #shop .shoppack .price { margin-top: 6px; padding: 12px 34px; font-size: 30px; }
body.portrait #shop .shoppack .price .coin { width: 30px; height: 30px; }
body.portrait #shop .shoppack:hover img { transform: none; }
body.portrait #shop .shoppack:active img { transform: translateY(-12px) scale(1.04); }
body.portrait #shop .note { left: 24px; right: 24px; bottom: calc(var(--cn) + 18px); gap: 8px 34px; font-size: 22px; line-height: 1.3; }
body.portrait #shop .note .lci { width: 24px; height: 24px; }
body.portrait #shop .note .dupeNote { font-size: 22px; }
body.portrait #opening .hint { bottom: 260px; }
body.portrait #opening .hint b { font-size: 32px; padding: 20px 40px; letter-spacing: .2em; }
body.portrait #opening .pk-hud { top: 24px; right: 24px; padding: 14px 28px 14px 18px; gap: 14px; }
body.portrait #opening .pk-hud small { font-size: 20px; }
body.portrait #opening .pk-hud b { font-size: 36px; }
body.portrait #opening .pk-hud .lc-shard > i { width: 22px; height: 29px; }
body.portrait .pk-banner { top: 150px; padding: 0 30px; }
body.portrait .pk-banner small { font-size: 22px; letter-spacing: .4em; }
body.portrait .pk-banner b { font-size: 60px; line-height: 1.08; }
body.portrait #opening .labels .pk-lab .lc-rar { font-size: 20px; padding: 8px 18px 8px 15px; gap: 9px; }
body.portrait #opening .labels .pk-lab .lc-rar i { width: 10px; height: 10px; }
body.portrait #opening .labels .pk-tag { font-size: 22px; padding: 8px 18px; }
body.portrait #opening .labels .pk-tag .lc-shard > i { width: 14px; height: 18px; }
body.portrait .pk-sum { bottom: 176px; width: 852px; white-space: normal; gap: 12px; }
body.portrait .pk-sumrow { flex-wrap: wrap; justify-content: center; gap: 10px; }
body.portrait .pk-rc { font-size: 22px; padding: 7px 18px 7px 8px; gap: 10px; }
body.portrait .pk-rc b { min-width: 36px; height: 36px; font-size: 22px; }
body.portrait .pk-sumrow.sub { gap: 6px 30px; font-size: 24px; text-align: center; }
body.portrait .pk-sumrow.sub span + span::before { margin: 0 20px 3px -18px; }
body.portrait #opening .bar { bottom: 44px; left: 24px; right: 24px; width: auto; gap: 14px; }
body.portrait #opening .bar .btn { flex: 1 1 0; min-width: 0; max-width: 400px; height: 104px; padding: 0 18px; font-size: 28px; border-radius: 18px; white-space: nowrap; }
body.portrait #opening.zoomed .bar { opacity: 0; pointer-events: none; }
body.portrait #opening .bar { transition: opacity .25s; }
body.portrait #opening .inspectTxt { left: 24px; right: 24px; top: auto; bottom: 36px; width: auto; max-height: 44%; overflow-y: auto; transform: none; padding: 30px 34px 26px; border-radius: 26px; }
body.portrait #opening .inspectTxt.on { gap: 14px; animation: pkItUp .35s var(--ease-out) both; }
@keyframes pkItUp { from { opacity: 0; transform: translateY(30px); } }
body.portrait #opening .it-eyebrow { font-size: 22px; gap: 12px; }
body.portrait #opening .it-eyebrow .setgem { width: 22px; height: 28px; }
body.portrait #opening .inspectTxt h3 { font-size: 48px; }
body.portrait #opening .it-tags { font-size: 24px; flex-wrap: wrap; gap: 10px 16px; }
body.portrait #opening .it-tags .lc-rar { font-size: 20px; padding: 7px 16px 7px 13px; }
body.portrait #opening .inspectTxt .it-rules { font-size: 30px; }
body.portrait #opening .inspectTxt .it-flavor { font-size: 26px; }
body.portrait #opening .it-hint { font-size: 22px; }
body.portrait .pk-fallback { top: 220px; padding: 0 24px; flex-wrap: wrap; gap: 70px 22px; }
body.portrait .pk-fcell .card { width: 256px !important; height: 358px !important; }
body.portrait .pk-fcell .lc-rar { font-size: 20px; padding: 7px 16px 7px 13px; }
body.portrait .pk-fcell .pk-tag { font-size: 22px; padding: 6px 16px; top: -18px; }
body.portrait #inspect .box.ci-box { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 860px; max-width: calc(100% - 32px); max-height: calc(100% - 64px); padding: 44px 36px 34px; border-radius: 28px; overflow: hidden; }
body.portrait .ci-box > .ci-bg { -webkit-mask: linear-gradient(180deg, #000 15%, transparent 70%); mask: linear-gradient(180deg, #000 15%, transparent 70%); }
body.portrait .ci-stage, body.portrait #inspect .big, body.portrait #inspect .big .card { width: 430px; height: 602px; }
body.portrait .ci-stage { flex: none; }
body.portrait .ci-x { top: 18px; right: 18px; width: 96px; height: 96px; }
body.portrait .ci-x .lci { width: 40px; height: 40px; }
body.portrait .ci-info { width: 100%; max-height: none; flex: 1 1 auto; min-height: 0; gap: 18px; padding: 0 8px 4px 0; }
body.portrait .ci-eyebrow { font-size: 22px; gap: 12px; }
body.portrait .ci-eyebrow .setgem { width: 22px; height: 28px; }
body.portrait #inspect .ci-info h3 { font-size: 52px; }
body.portrait .ci-tags { gap: 14px 18px; }
body.portrait #inspect .lc-rar { font-size: 22px; padding: 8px 18px 8px 15px; gap: 9px; }
body.portrait #inspect .lc-rar i { width: 10px; height: 10px; }
body.portrait .ci-type { font-size: 26px; }
body.portrait .ci-stats { gap: 14px; }
body.portrait .ci-stats > span { font-size: 22px; gap: 12px; padding: 6px 22px 6px 6px; }
body.portrait .ci-stats i { width: 56px; height: 56px; font-size: 32px; }
body.portrait .ci-rules { font-size: 30px; padding: 20px 24px; border-radius: 16px; }
body.portrait .ci-flavor { font-size: 26px; }
body.portrait .ci-tips { gap: 10px; }
body.portrait .ci-tips li { font-size: 24px; padding-left: 24px; }
body.portrait .ci-tips li::before { width: 9px; height: 9px; }
body.portrait #inspect .craftbox { padding: 22px 24px; gap: 16px; border-radius: 20px; }
body.portrait .ci-own { gap: 16px; }
body.portrait .ci-own > span { font-size: 22px; }
body.portrait .ci-own .cpips i { width: 16px; height: 16px; }
body.portrait .ci-own b { font-size: 30px; }
body.portrait .ci-full { font-size: 26px; gap: 12px; line-height: 1.35; }
body.portrait .ci-full .lci { width: 28px; height: 28px; }
body.portrait .ci-shardline { font-size: 26px; gap: 12px; }
body.portrait .ci-shardline b { font-size: 30px; }
body.portrait .ci-shardline .lc-shard > i { width: 16px; height: 22px; }
body.portrait .ci-bar { height: 14px; }
body.portrait #craftBtn { height: 100px; padding: 0 20px; font-size: 30px; border-radius: 18px; }
body.portrait #inspect .err { font-size: 24px; }
/* css/portrait-meta.css */
body.portrait { --mt-row: 110px; }
body.portrait :is(#store, #profile, #social) { --mt-top: calc(var(--top-h, 120px) + var(--mt-row) + 26px); }
body.portrait :is(#store, #profile, #social, #shop) .top .tabs { position: absolute; left: var(--gut, 24px); right: var(--gut, 24px); top: calc(100% + 14px); height: var(--mt-row); box-sizing: border-box;
display: flex; gap: 6px; padding: 6px; margin: 0; border-radius: 30px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x;
box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 240, 200, .06) inset; }
body.portrait :is(#store, #profile, #social, #shop) .top .tabs::-webkit-scrollbar { display: none; }
body.portrait :is(#store, #profile, #social, #shop) .top .tabs .tab { flex: 1 0 auto; min-height: 96px; padding: 0 26px; border-radius: 24px; font-size: 26px; font-weight: 800; letter-spacing: .01em; }
body.portrait #profile .top .tabs .tab { padding: 0 18px; }
body.portrait :is(#store, #profile, #social, #shop) .top .tabs .tab.on::after { left: 30%; right: 30%; bottom: 6px; height: 3px; }
body.portrait #museum #toStore { flex: none; min-height: 96px; padding: 0 30px; border-radius: 26px; font-size: 24px; }
body.portrait #profile .top :is(#museumBtn, #rules) { flex: none; width: 96px; height: 96px; min-width: 0; padding: 0; border-radius: 26px; font-size: 0; letter-spacing: 0; display: grid; place-items: center; }
body.portrait #profile .top :is(#museumBtn, #rules)::before { content: ""; position: static; display: block; width: 50px; height: 50px; transform: none; animation: none; background: var(--gold-1, #f2c14e);
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body.portrait #profile .top #museumBtn::before { background: #2b1600;
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5'/%3E%3Cpath d='M10.3 3v2.4c0 1.2-3.8 2.6-3.8 7.2 0 3.7 2.1 6.3 3.6 7.9h3.8c1.5-1.6 3.6-4.2 3.6-7.9 0-4.6-3.8-6-3.8-7.2V3'/%3E%3Cpath d='M7.4 8.6C5.2 8.4 4.6 10.8 6.8 12.3M16.6 8.6c2.2-.2 2.8 2.2.6 3.7'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
body.portrait #profile .top #rules::before {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1.1.9-1.1 1.6v.4'/%3E%3Cpath d='M12 16.9v.1'/%3E%3C/svg%3E"); }
body.portrait #profile .top #loreBtn { flex: none; width: 96px; height: 96px; min-width: 0; padding: 0; border-radius: 26px; display: grid; place-items: center; }
body.portrait #profile .top #loreBtn > span { display: none; }
body.portrait #profile .top #loreBtn .ico { width: 48px; height: 48px; }
body.portrait #profile .top h1 { font-size: 40px; }
body.portrait :is(#profile, #social) > .body { top: var(--mt-top); padding: 0 0 40px; }
body.portrait :is(#store, #museum, #profile, #social, #ranks) .m-h { font-size: 30px; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
body.portrait :is(#store, #museum, #profile, #social, #ranks) .m-h small { font-size: 22px; }
body.portrait :is(#store, #museum, #profile, #social, #ranks) .m-h .ico { width: 32px; height: 32px; }
body.portrait :is(#museum, #profile, #social) .m-empty { max-width: none; margin: 24px 0 0; padding: 56px 36px 44px; border-radius: 30px; }
body.portrait :is(#museum, #profile, #social) .m-empty .ico { width: 110px; height: 110px; font-size: 52px; margin-bottom: 20px; }
body.portrait :is(#museum, #profile, #social) .m-empty .ico .ico { width: 52px; height: 52px; }
body.portrait :is(#museum, #profile, #social) .m-empty h2 { font-size: 46px; line-height: 1.15; }
body.portrait :is(#museum, #profile, #social) .m-empty p { font-size: 27px; max-width: none; margin-bottom: 30px; }
body.portrait :is(#museum, #profile, #social) .m-empty .acts { flex-direction: column; align-items: stretch; gap: 16px; }
body.portrait :is(#museum, #profile, #social) .m-empty .acts .btn { min-height: 104px; font-size: 28px; justify-content: center; }
body.portrait :is(#store, #museum, #profile, #social, #ranks) .spinner { margin: 80px auto; transform: scale(1.8); }
body.portrait :is(#store, #museum, #profile, #social, #ranks) .err { font-size: 26px; }
body.portrait :is(#store, #museum) .lcs-wrap { top: var(--mt-top); left: 0; right: 0; bottom: var(--nav-h, 132px); flex-direction: column; gap: 16px; }
body.portrait :is(#store, #museum) .lcs-rail { position: relative; width: auto; flex: none; flex-direction: row; gap: 12px; padding: 4px var(--gut, 24px) 6px; overflow-x: auto; overflow-y: hidden;
touch-action: pan-x; scrollbar-width: none; scroll-padding: 0 var(--gut, 24px); }
body.portrait :is(#store, #museum) .lcs-rail::-webkit-scrollbar { display: none; }
body.portrait :is(#store, #museum) .lcs-rail button { flex: none; min-height: 96px; padding: 0 32px; border-radius: 99px; font-size: 26px; white-space: nowrap; text-align: center; }
body.portrait :is(#store, #museum) .lcs-rail button:hover { transform: none; }
body.portrait :is(#store, #museum) .lcs-rail button.on { box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 22px rgba(120, 60, 220, .35), 0 0 0 1px rgba(246, 217, 138, .35) inset; }
body.portrait :is(#store, #museum) .lcs-rail button.on::before { left: 30%; right: 30%; top: auto; bottom: 8px; width: auto; height: 3px; }
body.portrait :is(#store, #museum) .lcs-main { flex: 1 1 0; min-height: 0; padding: 4px var(--gut, 24px) 44px; }
body.portrait :is(#store, #museum, #sheet) .lcs-intro { font-size: 26px; line-height: 1.45; margin: 4px 0 22px; padding-left: 20px; border-left-width: 3px; max-width: none; }
body.portrait :is(#store, #museum, #sheet) .lcs-small { font-size: 23px; line-height: 1.4; }
body.portrait :is(#store, #museum, #sheet) .lcs-owned { font-size: 23px; padding: 8px 18px; }
body.portrait :is(#store, #museum, #sheet) .lcs-rar { font-size: 18px; padding: 4px 12px; }
body.portrait :is(#store, #museum, #sheet) .lcs-new { font-size: 17px; padding: 5px 12px; }
body.portrait :is(#store, #museum, #sheet) .lcs-prog { height: 38px; } body.portrait :is(#store, #museum, #sheet) .lcs-prog span { font-size: 22px; line-height: 38px; }
body.portrait :is(#store, #museum, #sheet) .lcs-prog.sm { height: 12px; }
body.portrait :is(#store, #museum) .lcs-main .btn { min-height: 96px; font-size: 24px; padding: 0 30px; }
body.portrait :is(#store, #museum) .lcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.portrait :is(#store, #museum) .lcs-tile { min-height: 0; gap: 12px; padding: 14px 14px 16px; border-radius: 22px; }
body.portrait :is(#store, #museum) .lcs-tile:hover { transform: none; }
body.portrait :is(#store, #museum) .lcs-tile:active { transform: scale(.98); }
body.portrait :is(#store, #museum) .lcs-tile::before { inset: 7px; border-radius: 16px; }
body.portrait :is(#store, #museum) .lcs-tile .lcs-prev { height: 230px; border-radius: 16px; }
body.portrait :is(#store, #museum) .lcs-tile .lcs-prev .cc-sm { transform: scale(.9); }
body.portrait :is(#store, #museum) .lcs-tile .lcs-prev:is(.k-board, .k-boardVariant) > * { zoom: 1.4; }
body.portrait :is(#store, #museum) .lcs-tile .lcs-prev:is(.k-companion, .k-companionColor, .k-companionPose, .k-outfit) > * { zoom: 1.5; }
body.portrait :is(#store, #museum) .lcs-meta { gap: 8px 10px; }
body.portrait :is(#store, #museum) .lcs-meta b { flex-basis: 100%; font-size: 27px; line-height: 1.15; }
body.portrait :is(#store, #museum) .lcs-foot { flex-wrap: wrap; gap: 10px; padding-top: 14px; }
body.portrait :is(#store, #museum) .lcs-price { padding: 8px 18px; gap: 10px; flex-wrap: wrap; }
body.portrait :is(#store, #museum) .lcs-price b { font-size: 28px; gap: 8px; }
body.portrait :is(#store, #museum) .lcs-price small { font-size: 20px; }
body.portrait :is(#store, #museum) .lcs-price .coin, body.portrait :is(#store, #museum) .lcs-price .gemicon { width: 30px; height: 30px; }
body.portrait :is(#store, #museum) .lcs-earn { font-size: 22px; line-height: 1.35; }
body.portrait :is(#store, #museum) .lcs-tile.own .lcs-foot::after { font-size: 22px; }
body.portrait :is(#store, #museum) .lcs-tile.eq .lcs-foot::after { font-size: 18px; padding: 8px 16px; }
body.portrait :is(#store, #museum, #sheet) .lcs-bundle { gap: 10px; }
body.portrait :is(#store, #museum, #sheet) .lcs-bundle span { font-size: 21px; padding: 6px 16px; }
body.portrait :is(#store, #museum, #sheet) .lcs-plaque { font-size: 26px; padding: 18px 26px; }
body.portrait :is(#store, #museum, #sheet) .lcs-plaque.small { font-size: 22px; padding: 12px 20px; }
body.portrait :is(#store, #museum, #sheet) .lcs-record span { font-size: 21px; }
body.portrait :is(#store, #museum) .lcs-cardwrap .card { width: 130px; height: 182px; }
body.portrait #store .lcs-gemrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.portrait #store .lcs-gempack { width: auto; gap: 12px; padding: 26px 18px 22px; border-radius: 24px; }
body.portrait #store .lcs-gempack:hover { transform: none; }
body.portrait #store .lcs-gemart { height: 120px; } body.portrait #store .lcs-gemart i { width: 54px; height: 54px; }
body.portrait #store .lcs-gempack b { font-size: 36px; }
body.portrait #store .lcs-gempack span { font-size: 22px; text-align: center; }
body.portrait #store .lcs-gempack .btn { align-self: stretch; min-width: 0; min-height: 96px; font-size: 30px; }
body.portrait #store .lcs-paynote { margin-top: 24px; padding: 20px 24px; border-radius: 20px; font-size: 25px; line-height: 1.4; max-width: none; }
body.portrait #store .lcs-receipts { max-width: none; margin-top: 24px; }
body.portrait #store .lcs-receipts h3 { font-size: 30px; }
body.portrait #store .lcs-receipts div { font-size: 24px; padding: 14px 0; }
body.portrait #sheet .lcs-sheet { grid-template-columns: minmax(0, 1fr); gap: 22px; }
body.portrait #sheet .lcs-sprev .lcs-prev { min-height: 360px; border-radius: 20px; }
body.portrait #sheet .lcs-kind { font-size: 22px; }
body.portrait #sheet .lcs-sinfo .lead { font-size: 26px; line-height: 1.45; }
body.portrait #sheet .lcs-how { font-size: 25px; line-height: 1.45; }
body.portrait #sheet .lcs-list { font-size: 25px; padding-left: 30px; }
body.portrait #sheet .lcs-actions .btn { flex: 1 1 300px; }
body.portrait #sheet .lcs-strow.big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 6px; }
body.portrait #sheet .lcs-strow.big button { padding: 16px 12px 20px; border-radius: 22px; gap: 6px; }
body.portrait #sheet .lcs-strow.big button b { font-size: 26px; text-align: center; }
body.portrait #sheet .lcs-strow.big button span { font-size: 21px; }
body.portrait #museum { --mt-top: calc(var(--top-h, 120px) + 94px); }
body.portrait #museum .top .lcs-sum { position: absolute; left: var(--gut, 24px); right: var(--gut, 24px); top: calc(100% + 14px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex-wrap: nowrap; }
body.portrait #museum .top .lcs-sum span { font-size: 22px; padding: 12px 6px; border-radius: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.portrait #museum .lcs-cardtop { flex-direction: column; align-items: stretch; gap: 22px; padding: 24px; border-radius: 26px; }
body.portrait #museum .lcs-cardprev { align-self: center; max-width: 100%; }
body.portrait #museum .lcs-cardside .lead { font-size: 26px; text-align: center; margin: 0 0 16px; }
body.portrait #museum .lcs-cardside .btn { width: 100%; min-height: 104px; font-size: 28px; }
body.portrait #museum .lcs-slots { gap: 16px; }
body.portrait #museum .lcs-slot { padding: 20px 20px 22px; border-radius: 22px; }
body.portrait #museum .lcs-slot h4 { font-size: 22px; margin-bottom: 14px; }
body.portrait #museum .lcs-chips { gap: 12px; align-items: center; }
body.portrait #museum .lcs-chips button { min-height: 96px; padding: 0 28px; font-size: 26px; }
body.portrait #museum .lcs-chips button:hover { transform: none; }
body.portrait #museum .lcs-medals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: none; margin-top: 20px; }
body.portrait #museum .lcs-medal { width: 100%; height: auto; aspect-ratio: 1; }
body.portrait #museum .lcs-medal.on::after { width: 38px; height: 38px; font-size: 20px; }
body.portrait #museum .lcs-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.portrait #museum .lcs-case { gap: 10px; padding: 22px 16px; border-radius: 22px; }
body.portrait #museum .lcs-case:hover { transform: none; }
body.portrait #museum .lcs-glass { width: 170px; height: 170px; border-radius: 18px 18px 6px 6px; }
body.portrait #museum .lcs-glass .lcs-icon { width: 100px; height: 100px; }
body.portrait #museum .lcs-case b { font-size: 26px; }
body.portrait #museum .lcs-case span { font-size: 22px; }
body.portrait #museum .lcs-case em { font-size: 22px; }
body.portrait #museum .lcs-scenehead { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
body.portrait #museum .lcs-scenehead .lcs-intro { margin-bottom: 0; }
body.portrait #museum .lcs-frag { flex-wrap: wrap; gap: 14px; font-size: 26px; }
body.portrait #museum .lcs-frag b { font-size: 40px; }
body.portrait #museum .lcs-frag .btn { flex: 1 1 320px; }
body.portrait #museum .lcs-dio { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; border-radius: 24px; margin-bottom: 18px; }
body.portrait #museum .lcs-pano { height: 300px; border-radius: 16px; }
body.portrait #museum .lcs-slice.miss span { font-size: 60px; }
body.portrait #museum .lcs-dioinfo { gap: 10px; }
body.portrait #museum .lcs-dioinfo b { font-size: 34px; }
body.portrait #museum .lcs-dioinfo > span { font-size: 22px; }
body.portrait #museum .lcs-dioinfo p { font-size: 26px; }
body.portrait #museum .lcs-dioinfo .btn { width: 100%; height: auto; padding: 18px 26px; white-space: normal; line-height: 1.3; }
body.portrait #museum .lcs-journals { gap: 20px; }
body.portrait #museum .lcs-journal { padding: 20px; border-radius: 24px; border-left-width: 6px; }
body.portrait #museum .lcs-jhead { gap: 20px; margin-bottom: 16px; }
body.portrait #museum .lcs-jav { width: 96px; height: 96px; border-width: 3px; }
body.portrait #museum .lcs-jhead b { font-size: 32px; }
body.portrait #museum .lcs-jhead span { font-size: 22px; }
body.portrait #museum .lcs-pages { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.portrait #museum .lcs-page { min-height: 0; padding: 18px 22px; border-radius: 14px; }
body.portrait #museum .lcs-page h5 { font-size: 25px !important; }
body.portrait #museum .lcs-page p { font-size: 24px !important; line-height: 1.45; }
body.portrait #museum .lcs-records, body.portrait #museum .lcs-titles { gap: 16px; }
body.portrait #museum .lcs-rec { flex-wrap: wrap; gap: 16px 20px; padding: 20px; border-radius: 22px; }
body.portrait #museum .lcs-rec .lcs-record i { width: 110px; height: 110px; }
body.portrait #museum .lcs-rec > div:nth-child(2) { flex: 1 1 calc(100% - 140px); min-width: 0; gap: 6px; }
body.portrait #museum .lcs-rec b { font-size: 28px; }
body.portrait #museum .lcs-rec span { font-size: 22px; }
body.portrait #museum .lcs-rec > .btn { flex: 1 1 0; }
body.portrait #museum .lcs-trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plq act" "inf inf"; gap: 14px 18px; padding: 20px; border-radius: 22px; }
body.portrait #museum .lcs-trow .lcs-plaque { grid-area: plq; justify-self: start; min-width: 0; max-width: 100%; }
body.portrait #museum .lcs-trow .lcs-tinfo { grid-area: inf; gap: 8px; }
body.portrait #museum .lcs-trow .lcs-tinfo span { font-size: 22px; }
body.portrait #museum .lcs-trow > .btn, body.portrait #museum .lcs-trow > .lcs-small { grid-area: act; align-self: center; }
body.portrait #museum .lcs-trow > .lcs-small { font-size: 34px; }
body.portrait #museum .lcs-room { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; border-radius: 24px; }
body.portrait #museum .lcs-roomart svg { border-radius: 16px; }
body.portrait #museum .lcs-roominfo h3 { font-size: 38px; }
body.portrait #museum .lcs-roominfo p { font-size: 25px; line-height: 1.45; }
body.portrait #museum .lcs-list { font-size: 25px; padding-left: 10px; list-style: none; }
body.portrait #museum .lcs-sub { font-size: 30px; margin: 30px 0 16px; }
body.portrait #profile .phead { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; gap: 20px 16px; margin: 0 0 22px; padding: 22px; border-radius: 26px; }
body.portrait #profile .phead .pcc { grid-row: 1; grid-column: 1; min-width: 0; }
body.portrait #profile .phead .pcc .cc { max-width: 100%; }
body.portrait #profile .phead .pcc:hover { transform: none; }
body.portrait #profile .plvl { grid-row: 1; grid-column: 2; width: 132px; height: 132px; }
body.portrait #profile .plvl .mring { inset: 10px; width: 112px; height: 112px; }
body.portrait #profile .plvl::before { inset: 20px; }
body.portrait #profile .plvl b { font-size: 42px; }
body.portrait #profile .plvl span { font-size: 15px; letter-spacing: .14em; }
body.portrait #profile .pstats { grid-row: 2; grid-column: 1 / -1; align-self: stretch; gap: 10px; }
body.portrait #profile .pstats div { padding: 12px 6px 10px; border: 1px solid rgba(232, 186, 90, .2); border-radius: 18px; background: rgba(8, 4, 18, .45); text-align: center; }
body.portrait #profile .pstats b { font-size: 42px; }
body.portrait #profile .pstats span { font-size: 18px; letter-spacing: .12em; }
body.portrait #profile .pxp { display: flex; grid-row: 3; grid-column: 1 / -1; gap: 18px; }
body.portrait #profile .pxp span { font-size: 22px; }
body.portrait #profile .pxp .qbar { height: 12px; }
body.portrait #profile .m-h.hh { margin: 6px 0 16px; }
body.portrait #profile .hlist { gap: 14px; }
body.portrait #profile .hrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "vs res rate" "vs who who" "mode date rp"; gap: 10px 20px; min-height: 0; padding: 22px 22px 20px 30px; border-radius: 22px; }
body.portrait #profile .hrow:hover { transform: none; }
body.portrait #profile .hrow::before { width: 8px; }
body.portrait #profile .hres { grid-area: res; display: flex; align-items: baseline; gap: 14px; min-width: 0; }
body.portrait #profile .hres b { font-size: 36px; }
body.portrait #profile .hres span { font-size: 22px; }
body.portrait #profile .hvs { grid-area: vs; gap: 8px; align-self: center; }
body.portrait #profile .hl { width: 80px; height: 80px; }
body.portrait #profile .hvs i { font-size: 18px; }
body.portrait #profile .hwho { grid-area: who; }
body.portrait #profile .hwho b { font-size: 28px; }
body.portrait #profile .hwho span { font-size: 22px; white-space: normal; line-height: 1.3; }
body.portrait #profile .hmode { grid-area: mode; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body.portrait #profile .hmode small { font-size: 20px; }
body.portrait #profile .hchip { font-size: 19px; padding: 8px 16px; }
body.portrait #profile .hdate { grid-area: date; display: block; align-self: center; font-size: 22px; }
body.portrait #profile .hrate { grid-area: rate; align-self: start; }
body.portrait #profile .hrate b { font-size: 34px; } body.portrait #profile .hrate span, body.portrait #profile .hrate .muted { font-size: 22px; }
body.portrait #profile .hrp { grid-area: rp; min-height: 96px; padding: 0 28px; font-size: 24px; }
body.portrait #profile .sgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
body.portrait #profile .sgrid > .m-panel { padding: 24px; border-radius: 24px; }
body.portrait #profile .swr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 30px; }
body.portrait #profile .swr .m-h { grid-column: 1 / -1; }
body.portrait #profile .donut { margin: 0; }
body.portrait #profile .donut b { font-size: 56px; } body.portrait #profile .donut small { font-size: 24px; } body.portrait #profile .donut span { font-size: 22px; }
body.portrait #profile .snums { grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.portrait #profile .snums div { padding: 16px; border-radius: 18px; }
body.portrait #profile .snums b { font-size: 40px; } body.portrait #profile .snums span { font-size: 18px; }
body.portrait #profile .m-h.sub { margin-top: 26px; font-size: 26px; }
body.portrait #profile .sbar2 { grid-template-columns: auto minmax(0, 1fr) 90px; gap: 16px; margin-bottom: 18px; }
body.portrait #profile .sav { width: 60px; height: 60px; }
body.portrait #profile .sbt { flex-wrap: wrap; gap: 4px 12px; }
body.portrait #profile .sbt b { font-size: 26px; }
body.portrait #profile .sbt em { display: inline; font-size: 22px; }
body.portrait #profile .sbtrack { height: 14px; margin-top: 8px; }
body.portrait #profile .sbar2 strong { font-size: 32px; }
body.portrait #profile .snone { font-size: 24px; }
body.portrait #profile .topcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.portrait #profile .tcard { border-radius: 16px; }
body.portrait #profile .tcard b { font-size: 22px; padding: 3px 12px; top: 8px; right: 8px; }
body.portrait #profile .tcard span { font-size: 22px; left: 10px; right: 10px; bottom: 8px; }
body.portrait #profile .settings.m-panel { max-width: none; padding: 26px 26px 16px; border-radius: 26px; }
body.portrait #profile .acctpanel { grid-template-columns: 110px minmax(0, 1fr); gap: 22px 24px; padding: 30px 26px; border-radius: 26px; }
body.portrait #profile .acctpanel .ico { width: 104px; height: 104px; font-size: 46px; } body.portrait #profile .acctpanel .ico .ico { width: 46px; height: 46px; }
body.portrait #profile .acctpanel h2 { font-size: 36px; } body.portrait #profile .acctpanel p { font-size: 26px; line-height: 1.4; }
body.portrait #profile .acctpanel > .btn { grid-column: 1 / -1; min-height: 104px; font-size: 28px; }
body.portrait #profile .mast { max-width: none; }
body.portrait #social .m-h { max-width: none; }
body.portrait #social .socgrid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
body.portrait #social .lbpanel { padding: 26px 22px 22px; border-radius: 26px; }
body.portrait #social .podium { gap: 16px; margin: 12px 0 20px; }
body.portrait #social .podav .pav { width: 120px; height: 120px; }
body.portrait #social .pod.p1 .podav .pav { width: 160px; height: 160px; }
body.portrait #social .podrank { width: 44px; height: 44px; font-size: 22px; bottom: -12px; }
body.portrait #social .pod.p1 .podrank { width: 54px; height: 54px; font-size: 26px; bottom: -14px; }
body.portrait #social .podrank .ico { width: 24px; height: 24px; } body.portrait #social .pod.p1 .podrank .ico { width: 28px; height: 28px; }
body.portrait #social .pod b { margin-top: 18px; font-size: 26px; } body.portrait #social .pod.p1 b { font-size: 30px; }
body.portrait #social .podr { font-size: 32px; } body.portrait #social .pod small { font-size: 22px; }
body.portrait #social .plinth { height: 70px; border-radius: 16px 16px 4px 4px; } body.portrait #social .pod.p1 .plinth { height: 110px; } body.portrait #social .pod.p3 .plinth { height: 50px; }
body.portrait #social .plinth i { font-size: 40px; }
body.portrait #social table.ranks.lb { font-size: 28px; }
body.portrait #social table.ranks.lb td { padding: 14px 10px; }
body.portrait #social table.ranks.lb td.rk { width: 60px; font-size: 26px; }
body.portrait #social table.ranks.lb td.pl { gap: 18px; min-width: 0; }
body.portrait #social table.ranks.lb td.pl > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.portrait #social table.ranks.lb td.pl .pav { width: 72px; height: 72px; flex: none; }
body.portrait #social table.ranks.lb td.rt { width: 110px; font-size: 32px; }
body.portrait #social table.ranks.lb td.wl { width: 104px; font-size: 22px; white-space: nowrap; }
body.portrait #social table.ranks.lb tr.me td:first-child { box-shadow: 5px 0 0 var(--gold-1) inset; }
body.portrait #social .youtag { font-size: 17px; padding: 5px 12px; flex: none; }
body.portrait #social .none { font-size: 26px; padding: 30px !important; }
body.portrait #social .lbme { grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 18px; margin-top: 18px; padding: 16px 20px; border-radius: 20px; }
body.portrait #social .lbme .pav { width: 76px; height: 76px; }
body.portrait #social .lbme b { font-size: 18px; } body.portrait #social .lbme span { display: block; font-size: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.portrait #social .lbme em, body.portrait #social .lbme strong { font-size: 36px; }
body.portrait #social .soclist { gap: 12px; }
body.portrait #social .socrow { grid-template-columns: 44px 76px minmax(0, 1fr) auto; gap: 18px; padding: 16px 20px; border-radius: 20px; }
body.portrait #social .socrow .rk { font-size: 26px; }
body.portrait #social .socrow .crest { width: 72px; height: 82px; font-size: 20px; }
body.portrait #social .socrow b { font-size: 28px; } body.portrait #social .socrow div > span { font-size: 22px; }
body.portrait #social .socrow strong { font-size: 32px; }
body.portrait #social .soclist .none { font-size: 24px; }
body.portrait #social .clubjoin { grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0; }
body.portrait #social .cjcard { border-radius: 26px; }
body.portrait #social .cjart { height: 220px; }
body.portrait #social .cjbody { gap: 16px; padding: 0 30px 30px; margin-top: -40px; }
body.portrait #social .cjbody .af-eyebrow { font-size: 22px; }
body.portrait #social .cjbody h3 { font-size: 42px; }
body.portrait #social .cjbody p { font-size: 26px; }
body.portrait #social .cjbody input { height: 92px; padding: 0 24px; font-size: 28px !important; border-radius: 18px; }
body.portrait #social .cjbody .codein { font-size: 40px !important; }
body.portrait #social .cjrow { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
body.portrait #social .cjbody .btn { align-self: stretch; min-height: 104px; font-size: 28px; justify-content: center; }
body.portrait #social #cErr { font-size: 26px; margin-top: 16px; }
body.portrait #social .clubhead { grid-template-columns: 130px minmax(0, 1fr); gap: 22px 24px; margin: 0 0 24px; padding: 26px; border-radius: 26px; }
body.portrait #social .crest.big { width: 124px; height: 142px; font-size: 32px; }
body.portrait #social .clubhead .af-eyebrow { font-size: 19px; line-height: 1.5; letter-spacing: .12em; }
body.portrait #social .clubhead h2 { font-size: 48px; line-height: 1.1; }
body.portrait #social .motto { font-size: 26px; }
body.portrait #social .clubhead .invite { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 18px 24px; border-radius: 20px; }
body.portrait #social .clubhead .invite .af-eyebrow { flex-basis: 100%; font-size: 20px; }
body.portrait #social .clubhead .roomcode { font-size: 52px; margin: 0; }
body.portrait #social .clubhead .invite .btn { min-height: 96px; padding: 0 30px; font-size: 24px; }
body.portrait #social .members { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.portrait #social .member { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; padding: 14px 20px; border-radius: 20px; min-height: 110px; box-sizing: border-box; }
body.portrait #social .mav2 .pav { width: 78px; height: 78px; }
body.portrait #social .mav2 .dot { width: 22px; height: 22px; border-width: 3px; }
body.portrait #social .mtx b { font-size: 28px; gap: 10px; } body.portrait #social .mtx > span { font-size: 22px; }
body.portrait #social .own { font-size: 24px; } body.portrait #social .own .ico { width: 26px; height: 26px; }
body.portrait #social .member .btn { min-height: 96px; padding: 0 24px; font-size: 22px; }
body.portrait #social .inm { font-size: 22px; }
body.portrait #social .clubacts { max-width: none; margin-top: 18px; }
body.portrait #social .clubacts .btn { min-height: 96px; padding: 0 30px; font-size: 24px; }
body.portrait #social .socPanel { max-width: none; margin-top: 26px; gap: 22px; }
body.portrait #social :is(.socMap, .socDecks) { padding: 24px; border-radius: 24px; }
body.portrait #social .socMap { overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; }
body.portrait #social .socMap::-webkit-scrollbar { display: none; }
body.portrait #social .socPanel .sSub { font-size: 22px; line-height: 1.4; }
body.portrait #social .expPath { width: 1300px; height: 170px; margin: 22px 70px 10px; }
body.portrait #social .expPath::before, body.portrait #social .expFill { top: 33px; height: 6px; }
body.portrait #social .expStop { width: 130px; gap: 10px; }
body.portrait #social .expStop i { width: 72px; height: 72px; font-size: 28px; }
body.portrait #social .expStop span { font-size: 21px; }
body.portrait #social .expInfo { position: sticky; left: 0; max-width: 804px; gap: 8px 12px; font-size: 24px; }
body.portrait #social .expInfo .btn { min-height: 96px; font-size: 24px; }
body.portrait #social .lendRow { flex-wrap: wrap; gap: 14px; }
body.portrait #social .lendRow select { flex: 1 1 100%; min-width: 0; height: 92px; font-size: 26px !important; border-radius: 18px; }
body.portrait #social .lendRow .btn { flex: 1 1 0; min-height: 96px; font-size: 24px; }
body.portrait #social .lent { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; padding: 16px; border-radius: 18px; }
body.portrait #social .lent > div:nth-child(2) { grid-column: 2 / -1; min-width: 0; }
body.portrait #social .lent .lav { width: 76px; height: 76px; }
body.portrait #social .lent b { font-size: 26px; } body.portrait #social .lent span { font-size: 22px; }
body.portrait #social .lent .btn { min-height: 96px; font-size: 22px; }
body.portrait #social .lent .btn[data-load] { grid-column: 1 / 3; }
body.portrait #social .lent .btn[data-test] { grid-column: 3; }
body.portrait #social .livehead { flex-wrap: wrap; gap: 16px 20px; max-width: none; margin-bottom: 20px; }
body.portrait #social .livehead p { flex-basis: 100%; order: 3; font-size: 25px; }
body.portrait #social .livepill { font-size: 20px; padding: 12px 22px; } body.portrait #social .livepill i { width: 14px; height: 14px; }
body.portrait #social .livehead .btn { margin-left: auto; min-height: 96px; font-size: 24px; padding: 0 30px; }
body.portrait #social .livelist { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: none; }
body.portrait #social .live.m-panel { border-radius: 24px; }
body.portrait #social .lmatch { height: 230px; }
body.portrait #social .lside { gap: 14px; padding: 18px 20px; }
body.portrait #social .lside .pav { width: 72px; height: 72px; }
body.portrait #social .lside b { font-size: 28px; } body.portrait #social .lside span { font-size: 22px; }
body.portrait #social .lvs { width: 86px; height: 86px; font-size: 30px; }
body.portrait #social .lfoot { flex-wrap: wrap; gap: 12px 22px; padding: 18px 22px; font-size: 22px; }
body.portrait #social .lfoot .ico { width: 26px; height: 26px; }
body.portrait #social .lfoot .hchip { font-size: 19px; padding: 8px 16px; }
body.portrait #social .lfoot .btn { min-height: 96px; font-size: 24px; padding: 0 30px; }
body.portrait #social .tradegrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
body.portrait #social .trade.m-panel { gap: 18px; padding: 24px 22px; margin-bottom: 16px; border-radius: 24px; }
body.portrait #social .thead { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; }
body.portrait #social .thead .pav { width: 72px; height: 72px; }
body.portrait #social .thead b { font-size: 28px; } body.portrait #social .tnote { font-size: 24px; margin-top: 4px; }
body.portrait #social .tdir { font-size: 17px; padding: 8px 14px; }
body.portrait #social .tcols { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 12px; padding: 18px; border-radius: 18px; }
body.portrait #social .tcols .af-eyebrow { font-size: 20px; }
body.portrait #social .tswap { width: 56px; height: 56px; } body.portrait #social .tswap .ico { width: 28px; height: 28px; }
body.portrait #social .tchips { gap: 10px; margin-top: 10px; }
body.portrait #social .tchip { font-size: 22px; line-height: 1.2; padding: 6px 16px 6px 6px; gap: 10px; }
body.portrait #social .tchip i { width: 44px; height: 44px; flex: none; }
body.portrait #social .trade .tb { gap: 14px; }
body.portrait #social .trade .tb .btn { flex: 1 1 0; min-height: 96px; font-size: 24px; }
body.portrait #social .trade.done { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; border-radius: 18px; font-size: 22px; line-height: 1.4; margin-bottom: 10px; }
body.portrait #social .trade.done em { font-size: 18px; }
body.portrait #social .tradegrid .muted { font-size: 22px; }
body.portrait #social .tempty { gap: 22px; padding: 26px; border-radius: 22px; font-size: 44px; }
body.portrait #social .tempty > .ico { width: 48px; height: 48px; flex: none; }
body.portrait #social .tempty b { font-size: 28px; } body.portrait #social .tempty span { font-size: 23px; line-height: 1.4; }
body.portrait #social .tradeform.m-panel { gap: 12px; padding: 26px; border-radius: 24px; }
body.portrait #social .tradeform label { font-size: 21px; margin-top: 12px; }
body.portrait #social .tradeform input { height: 92px; padding: 0 24px; font-size: 28px !important; border-radius: 18px; box-sizing: border-box; }
body.portrait #social .tradeform .picks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
body.portrait #social .tradeform .picks button { min-height: 88px; padding: 0 22px; font-size: 25px; text-align: left; border-radius: 16px; }
body.portrait #social .tradeform .chips { gap: 10px; }
body.portrait #social .tradeform .chips span { font-size: 23px; padding: 12px 18px; border-radius: 99px; }
body.portrait #social .tradeform > .btn { min-height: 104px; margin-top: 16px; font-size: 28px; justify-content: center; }
body.portrait #social #tErr { font-size: 24px; }
body.portrait #ranks .ranklist { top: calc(var(--top-h, 120px) + 16px); left: var(--gut, 24px); right: var(--gut, 24px); bottom: calc(var(--nav-h, 132px) + 10px); width: auto; transform: none; padding-bottom: 30px; }
body.portrait #ranks table.ranks { border-collapse: separate; border-spacing: 0 12px; font-size: 28px; }
body.portrait #ranks table.ranks th { font-size: 20px; letter-spacing: .14em; padding: 8px 18px 0; border: 0; }
body.portrait #ranks table.ranks th:nth-child(n+3), body.portrait #ranks table.ranks td:nth-child(n+3) { text-align: right; }
body.portrait #ranks table.ranks td { height: 96px; padding: 0 18px; border: 0; background: rgba(24, 13, 46, .9);
border-top: 1px solid rgba(190, 160, 255, .14); border-bottom: 1px solid rgba(190, 160, 255, .14); }
body.portrait #ranks table.ranks td:first-child { width: 70px; text-align: center; border-left: 1px solid rgba(190, 160, 255, .14); border-radius: 20px 0 0 20px; font: 900 28px var(--font-title); color: var(--muted); }
body.portrait #ranks table.ranks td:last-child { border-right: 1px solid rgba(190, 160, 255, .14); border-radius: 0 20px 20px 0; color: var(--muted); font-size: 24px; white-space: nowrap; }
body.portrait #ranks table.ranks td:nth-child(2) { font-weight: 700; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.portrait #ranks table.ranks td:nth-child(3) { font: 900 32px var(--font-title); color: #fff4d6; }
body.portrait #ranks table.ranks tr:nth-child(1) td:first-child { color: #f6d98a; } body.portrait #ranks table.ranks tr:nth-child(2) td:first-child { color: #d6dce8; }
body.portrait #ranks table.ranks tr:nth-child(3) td:first-child { color: #d99a66; }
body.portrait #ranks table.ranks tr.me td { background: rgba(92, 64, 30, .92); border-color: rgba(242, 193, 78, .5); }
body.portrait #ranks table.ranks td[colspan] { text-align: center; color: var(--gold-1); font: 700 26px var(--font-ui); border-radius: 20px; border: 1px solid rgba(190, 160, 255, .14); }
body.portrait #ranks .ranklist .lead { font-size: 26px; margin-top: 16px; }
body.portrait #ranks .ranklist > .err { font-size: 26px; text-align: center; margin-top: 40px; }
body.portrait #replayBar.rpbar { left: 16px; right: auto; top: 10px; transform: none; gap: 12px; padding: 5px 6px 5px 20px; }
body.portrait .rplabel { gap: 10px; padding-right: 12px; }
body.portrait .rplabel b { font-size: 22px; }
body.portrait .rplabel span { min-width: 90px; font-size: 20px; }
body.portrait .rplabel .rpdot { width: 12px; height: 12px; }
body.portrait .rpbtn { height: 60px; min-width: 60px; }
body.portrait .rpbtn .ico { width: 30px; height: 30px; }
body.portrait .rpbtn.wide { width: 60px; padding: 0; }
body.portrait .rpbtn.wide span { display: none; }
body.portrait .seg.mseg.rpspd { grid-template-columns: repeat(3, 66px); }
body.portrait .rpspd button { padding: 14px 0; font-size: 20px; }
body.portrait #shop { --ct: calc(var(--top-h, 120px) + var(--mt-row) + 26px); }
/* css/portrait-story.css */
body.portrait #solo .playing { font-size: 24px; line-height: 1.4; white-space: normal; text-align: left; }
body.portrait #solo .playing a { display: inline-block; padding: 8px 4px; }
body.portrait #solo .af-eyebrow { font-size: 20px; letter-spacing: .16em; }
body.portrait .chron-top { flex-direction: column; align-items: stretch; gap: 10px; margin: 4px 0 22px; }
body.portrait .chron-lore { max-width: none; }
body.portrait .chron-lore .af-eyebrow { font-size: 22px; line-height: 1.35; }
body.portrait .chron-lore p { display: block; font: italic 26px/1.5 var(--font-card); color: #e2d6f4; margin-top: 10px; }
body.portrait .chron-top .playing { white-space: normal; font-size: 24px; padding: 12px 18px; border-radius: 14px; background: rgba(12, 6, 28, .6); border: 1px solid rgba(190, 160, 255, .16); }
body.portrait .chron-map { grid-template-columns: 1fr; gap: 30px; }
body.portrait .chron-ch { border-radius: 24px; }
body.portrait .chron-ch:hover { transform: none; }
body.portrait .chron-hero { height: 250px; }
body.portrait .chron-num { font-size: 120px; right: 24px; bottom: 10px; }
body.portrait .chron-ring { width: 96px; height: 96px; top: 18px; right: 18px; }
body.portrait .chron-ring .mring { width: 100%; height: 100%; }
body.portrait .chron-ring b { font-size: 32px; } body.portrait .chron-ring small { font-size: 20px; }
body.portrait .chron-av { width: 84px; height: 84px; top: 18px; left: 18px; border-width: 3px; }
body.portrait .chron-htxt { left: 26px; right: 26px; bottom: 20px; }
body.portrait .chron-htxt span { font-size: 22px; letter-spacing: .16em; }
body.portrait .chron-htxt b { font-size: 50px; line-height: 1.05; margin-top: 4px; }
body.portrait .chron-ch > p { display: block; -webkit-line-clamp: unset; min-height: 0; padding: 20px 26px 6px; font: 26px/1.5 var(--font-card); color: #d8ccef; }
body.portrait .chron-path { gap: 12px; padding: 16px 18px 24px; }
body.portrait .cnode { grid-template-columns: 124px 1fr; gap: 20px; min-height: 140px; padding: 12px 18px 12px 6px; border-radius: 20px; }
body.portrait .cnode:hover:not(:disabled) { transform: none; }
body.portrait .cmed { width: 108px; height: 108px; border-width: 3px; }
body.portrait .cnode.boss .cmed { width: 118px; height: 118px; }
body.portrait .cnode.boss .cmed::after { width: 18px; height: 18px; top: -13px; }
body.portrait .cnode::before { left: 64px; width: 5px; top: calc(50% + 54px); height: calc(100% + 12px - 108px); }
body.portrait .cbadge { width: 44px !important; height: 44px !important; font-size: 22px !important; }
body.portrait .cbadge .ico { width: 24px; height: 24px; }
body.portrait .cnode > div { gap: 6px; }
body.portrait .cnode b { font-size: 32px; line-height: 1.15; }
body.portrait .cnode small { font-size: 23px; white-space: normal; }
body.portrait .cnode u { font-size: 23px; gap: 8px; }
body.portrait .cnode u .ico { width: 24px; height: 24px; }
body.portrait .cnode u span { white-space: normal; }
body.portrait .bhero { grid-template-columns: 1fr; gap: 26px; justify-items: center; padding: 34px 30px 30px; max-width: none; text-align: left; }
body.portrait .bhero::after { background: linear-gradient(180deg, rgba(14, 8, 28, .45) 0%, rgba(14, 8, 28, .9) 42%, rgba(14, 8, 28, .97)); }
body.portrait .bcard .lc { width: 300px; height: 445px; }
body.portrait .binfo { width: 100%; }
body.portrait .binfo .af-eyebrow { font-size: 22px; line-height: 1.4; text-align: center; }
body.portrait .binfo h2 { font-size: 62px; text-align: center; }
body.portrait .blore { font-size: 28px !important; line-height: 1.5 !important; }
body.portrait .brules { font-size: 28px !important; line-height: 1.45 !important; }
body.portrait .bints { max-width: none; gap: 12px; margin-bottom: 26px; }
body.portrait .bints-h { font-size: 22px; }
body.portrait .bint { grid-template-columns: 52px 1fr; gap: 8px 16px; padding: 16px 18px 16px 14px; }
body.portrait .bint > i { width: 48px; height: 48px; font-size: 22px; grid-row: span 2; }
body.portrait .bint b { font-size: 30px; } body.portrait .bint span { font-size: 25px; line-height: 1.35; }
body.portrait .bint em { grid-column: 2; justify-self: start; font-size: 22px; padding: 8px 16px; }
body.portrait .bint em .ico { width: 22px; height: 22px; }
body.portrait .bfoot { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 18px; }
body.portrait .bfoot .bfight { width: 100%; min-height: 110px; font-size: 34px; }
body.portrait .breward { align-items: center; text-align: center; }
body.portrait .breward span { font-size: 22px; } body.portrait .breward small { font-size: 26px; }
body.portrait .binfo .playing { text-align: center; }
body.portrait .bseal { transform: scale(1.3); transform-origin: top right; }
body.portrait .brot { display: flex; justify-content: flex-start; gap: 12px; margin-top: 26px; }
body.portrait .brot .af-eyebrow { width: 100%; margin: 0 0 4px; }
body.portrait .brc { font-size: 23px; padding: 8px 20px 8px 8px; gap: 12px; }
body.portrait .brc i { width: 52px; height: 52px; }
body.portrait .pzhead { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 24px; }
body.portrait .pzhead h2 { font-size: 48px; }
body.portrait .pzhead p { font-size: 28px; line-height: 1.45; }
body.portrait .pzprog { width: auto; text-align: left; padding: 18px 22px; border-radius: 18px; background: rgba(12, 6, 28, .6); border: 1px solid rgba(232, 186, 90, .25); }
body.portrait .pzprog b { font-size: 48px; } body.portrait .pzprog small { font-size: 26px; } body.portrait .pzprog > span { font-size: 22px; }
body.portrait .pzprog .qbar { height: 14px; margin-top: 14px; }
body.portrait .puzzles { grid-template-columns: 1fr 1fr; gap: 20px; max-width: none; }
body.portrait .puzzles .puzzle { min-height: 400px; }
body.portrait .puzzles .puzzle .n { width: 64px; height: 64px; font-size: 30px; top: 16px; left: 16px; }
body.portrait .pzseal { width: 56px; height: 56px; font-size: 30px; top: 16px; right: 16px; }
body.portrait .pzt { padding: 90px 20px 22px; gap: 8px; }
body.portrait .pzt b { font-size: 30px; line-height: 1.15; }
body.portrait .pzt em { font-size: 23px; line-height: 1.35; }
body.portrait .pzt i { font-size: 22px; letter-spacing: .1em; }
body.portrait .pzt i .ico { width: 22px; height: 22px; }
body.portrait .runintro { grid-template-columns: 1fr; gap: 34px; padding: 36px 30px; max-width: none; }
body.portrait .runintro::after { background: linear-gradient(180deg, rgba(14, 8, 28, .7), rgba(14, 8, 28, .96) 40%); }
body.portrait .runintro h2 { font-size: 64px; }
body.portrait .runintro .lead { font-size: 28px; line-height: 1.5; }
body.portrait .runintro .rstory { font: italic 28px/1.5 var(--font-card); color: #f1e6ff; }
body.portrait .rrules { gap: 16px; }
body.portrait .rrules li { font-size: 26px; gap: 16px; line-height: 1.4; }
body.portrait .rrules .mi, body.portrait .rrules .ico { font-size: 32px; width: 32px; height: 32px; flex: none; }
body.portrait .rbest { font-size: 25px; padding: 14px 24px; }
body.portrait .rbest b { font-size: 30px; }
body.portrait .rpick { gap: 18px; }
body.portrait .rpick .af-eyebrow { font-size: 22px; }
body.portrait .rpick .runleaders { grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; }
body.portrait .rpick .rl { justify-self: center; }
body.portrait .rpick .rl .lc { width: 240px; height: 356px; }
body.portrait .rpick .rl.on .lc { box-shadow: 0 0 0 4px var(--gold-1), 0 0 34px rgba(242, 193, 78, .55); }
body.portrait .rpick #begin { width: 100%; min-height: 110px; font-size: 32px; }
body.portrait #solo .err:not(:empty) { font-size: 24px; }
body.portrait .runhead { flex-wrap: wrap; gap: 22px; padding: 22px 26px; max-width: none; }
body.portrait .runhead .rh-sec:first-child { width: 100%; }
body.portrait .rh-sec { gap: 12px; }
body.portrait .rh-relics { align-items: flex-start; flex-basis: 100%; }
body.portrait .floors { justify-content: space-between; gap: 0; }
body.portrait .floors .fl { width: 72px; height: 72px; font-size: 28px; }
body.portrait .floors .fl.boss { width: 84px; height: 84px; font-size: 30px; }
body.portrait .floors .fl .ico { width: 30px; height: 30px; }
body.portrait .hrt .mi, body.portrait .hrt .ico { width: 52px; height: 52px; }
body.portrait .relics { justify-content: flex-start; }
body.portrait .relic { font-size: 24px; padding: 6px 20px 6px 6px; }
body.portrait .relic i { width: 52px; height: 52px; font-size: 26px; }
body.portrait .norelic { font-size: 24px; }
body.portrait .runbody .rtitle { font-size: 40px; text-align: center; }
body.portrait .offer { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; justify-items: center; }
body.portrait .offc, body.portrait .offc .card { width: 330px; height: 462px; }
body.portrait .offc:hover { transform: none; }
body.portrait .offr { width: 330px; min-height: 462px; gap: 12px; padding: 24px; }
body.portrait .offr > i { width: 110px; height: 110px; font-size: 56px; }
body.portrait .offr .af-eyebrow { font-size: 22px; }
body.portrait .offr b { font-size: 34px; } body.portrait .offr em { font-size: 25px; }
body.portrait .runbody .actions { gap: 18px; flex-wrap: wrap; }
body.portrait .runbody .actions .btn { min-height: 96px; font-size: 26px; padding: 0 30px; }
body.portrait .nextopp { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding: 34px 30px; max-width: none; text-align: center; }
body.portrait .nextopp::after { background: linear-gradient(180deg, rgba(14, 8, 28, .5), rgba(14, 8, 28, .96) 45%); }
body.portrait .nextopp .lc { width: 300px; height: 445px; }
body.portrait .nextopp .af-eyebrow { font-size: 22px; }
body.portrait .nextopp h2 { font-size: 56px; }
body.portrait .nextopp .lead { font-size: 28px; line-height: 1.45; text-align: center; margin: 10px 0 26px; }
body.portrait .nextopp .actions { justify-content: center !important; flex-wrap: wrap; gap: 16px; }
body.portrait .nextopp .actions .btn { min-height: 96px; font-size: 26px; padding: 0 28px; }
body.portrait .nextopp .actions #fight { flex-basis: 100%; min-height: 110px; font-size: 34px; }
body.portrait #sheet .decklistview { min-width: 0; max-height: calc(var(--ph) - 520px); gap: 8px; }
body.portrait #sheet .decklistview .drow { grid-template-columns: 56px 1fr 70px; gap: 14px; min-height: 76px; padding: 8px 18px; font-size: 26px; border-radius: 14px; }
body.portrait #sheet .decklistview .drow .cst { font-size: 28px; }
body.portrait .pill.progpill { font-size: 23px; padding: 10px 18px; }
body.portrait .quests { grid-template-columns: 1fr; gap: 24px; max-width: none; }
body.portrait .qcol { padding: 24px 22px 18px; }
body.portrait .qcol .m-h { font-size: 36px; flex-wrap: wrap; gap: 10px; }
body.portrait .qcol .m-h small { font-size: 22px; }
body.portrait .quests .quest { grid-template-columns: 72px 1fr 168px; grid-template-rows: auto auto; gap: 8px 18px; padding: 20px; margin-bottom: 14px; }
body.portrait .quests .quest .qic { grid-row: 1 / 3; width: 68px; height: 68px; font-size: 32px; }
body.portrait .quests .quest .qic .ico { width: 32px; height: 32px; }
body.portrait .quests .quest .qtxt { grid-row: 1 / 3; }
body.portrait .quests .quest .qtxt b { font-size: 28px; line-height: 1.3; }
body.portrait .quests .qbar { height: 14px; margin: 12px 0 6px; }
body.portrait .quests .quest .qtxt > span { font-size: 22px; }
body.portrait .quests .qr { grid-column: 3; grid-row: 1; font-size: 32px; }
body.portrait .quests .qr .coin { width: 32px; height: 32px; }
body.portrait .quests .quest .btn, body.portrait .quests .quest .qdone { grid-column: 3; grid-row: 2; }
body.portrait .quests .quest .btn { min-height: 80px; font-size: 26px; }
body.portrait .quests .qdone { font-size: 22px; justify-content: flex-end; }
body.portrait .qbonus { grid-template-columns: 72px 1fr auto; gap: 12px 18px; padding: 20px; }
body.portrait .qbonus .qpk { width: 68px; height: 68px; font-size: 32px; grid-row: 1 / 3; }
body.portrait .qbonus b { font-size: 28px; } body.portrait .qbonus div > span { font-size: 23px; }
body.portrait .qbonus .qpips { grid-column: 2; }
body.portrait .qbonus .qpips i { width: 22px; height: 22px; }
body.portrait .qbonus em { grid-column: 3; grid-row: 1 / 3; font-size: 32px; }
body.portrait #sheet .box.storybox { width: 868px; max-width: calc(100% - 2 * var(--gut, 24px)); max-height: calc(var(--ph) - 160px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
body.portrait .story-hero { height: 360px; border-radius: 19px 19px 0 0; }
body.portrait .story-htxt { left: 30px; right: 30px; bottom: 150px; }
body.portrait .story-htxt .af-eyebrow { font-size: 22px; line-height: 1.4; }
body.portrait #sheet .story-htxt h2 { font-size: 54px; line-height: 1.08; display: block; }
body.portrait #sheet .story-htxt h2::before, body.portrait #sheet .story-htxt h2::after { display: none; }
body.portrait .story-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "art reward" "body body"; gap: 22px 24px; padding: 0 30px; }
body.portrait .story-art { grid-area: art; justify-self: center; margin-top: -130px; }
body.portrait .story-art .lc { width: 250px; height: 370px; }
body.portrait .story-reward { grid-area: reward; margin-top: -130px; align-self: stretch; justify-content: center; gap: 10px; padding: 18px 14px 20px; }
body.portrait .story-reward .af-eyebrow { font-size: 20px; }
body.portrait .story-reward .rc, body.portrait .story-reward .rc .card { width: 196px; height: 274px; }
body.portrait .story-reward b { font-size: 26px; }
body.portrait .story-reward span { font-size: 22px; }
body.portrait .story-reward .rar { font-size: 18px; padding: 5px 14px; }
body.portrait .story-body { grid-area: body; max-height: none; overflow: visible; padding: 8px 0 0; }
body.portrait .scene { padding-left: 22px; margin-bottom: 22px; }
body.portrait .scene p { font-size: 30px; line-height: 1.55; margin-bottom: 12px; }
body.portrait .teach { padding: 18px 22px; gap: 6px 14px; margin-bottom: 18px; }
body.portrait .teach span { font-size: 20px; } body.portrait .teach b { font-size: 32px; }
body.portrait .teach em { font-size: 26px; line-height: 1.45; }
body.portrait .storylinks { gap: 14px; }
body.portrait .histbtn { min-height: 96px; font-size: 25px !important; padding: 0 26px; flex: 1 1 360px; justify-content: center; border-radius: 18px; }
body.portrait .histbtn .ico { width: 28px; height: 28px; }
body.portrait .hist { padding: 20px 22px; margin-top: 16px; }
body.portrait .hist p { font-size: 28px; line-height: 1.55; } body.portrait .hist em { font-size: 22px; }
body.portrait .foe { font-size: 26px !important; line-height: 1.45; margin: 22px 0 14px; }
body.portrait .intents { gap: 10px; }
body.portrait .intents .af-eyebrow { font-size: 20px; }
body.portrait .intents > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; font-size: 25px; }
body.portrait .intents em { grid-column: 1; font-size: 22px; white-space: normal; }
body.portrait .story .playing { font-size: 24px !important; margin-top: 14px; }
body.portrait .storybox .actions { position: sticky; bottom: 0; z-index: 5; margin: 26px 0 0; padding: 20px 30px 26px; gap: 16px;
background: linear-gradient(180deg, rgba(14, 8, 28, 0), rgba(14, 8, 28, .96) 26%); }
body.portrait .storybox .actions .btn { min-height: 104px; font-size: 32px; padding: 0 34px; }
body.portrait .storybox .actions #go { flex: 1; }
body.portrait .storybox .lr-instory .lr-inlink { min-height: 96px; font-size: 25px !important; }
body.portrait #choiceModal .box { width: 868px; max-width: calc(100% - 2 * var(--gut, 24px)); max-height: calc(var(--ph) - 160px); overflow-y: auto; padding: 36px 26px 30px; box-sizing: border-box; }
body.portrait #choiceModal .eyebrow { font-size: 22px; }
body.portrait #choiceModal h2 { font-size: 52px; }
body.portrait .chsub { font-size: 27px !important; line-height: 1.45; margin-bottom: 22px; }
body.portrait .chopts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; justify-items: center; margin: 10px 0 26px; }
body.portrait .chopt { width: 100%; max-width: 400px; padding: 16px 12px 18px; gap: 8px; box-sizing: border-box; }
body.portrait .chopt:hover { transform: none; }
body.portrait .chopt.sel { transform: none; }
body.portrait .chopt:first-child:nth-last-child(3) { grid-column: 1 / -1; }
body.portrait .chopt .cf, body.portrait .chopt .cf .card { width: 280px; height: 392px; }
body.portrait .chopt b { font-size: 28px !important; }
body.portrait .chopt .rar { font-size: 18px; padding: 5px 14px; }
body.portrait .chopt em { font-size: 22px !important; line-height: 1.35; }
body.portrait #choiceModal .actions { position: sticky; bottom: -30px; margin: 0 -26px -30px; padding: 20px 26px 30px; flex-wrap: wrap; gap: 16px;
background: linear-gradient(180deg, rgba(20, 11, 40, 0), rgba(20, 11, 40, .97) 28%); }
body.portrait #choiceModal .actions .btn { min-height: 104px; font-size: 30px; padding: 0 30px; }
body.portrait #choiceModal #chTake, body.portrait #choiceModal #chLater { flex: 1 1 100%; }
body.portrait .chmore { font-size: 24px !important; }
body.portrait .albums-lead { font-size: 27px !important; line-height: 1.5; text-align: left; margin-bottom: 22px; }
body.portrait .albums { grid-template-columns: 1fr !important; gap: 26px; max-width: none; }
body.portrait .album { border-radius: 22px; }
body.portrait .ahead { height: 150px; padding: 18px 24px; }
body.portrait .ahead span { font-size: 20px !important; } body.portrait .ahead b { font-size: 40px !important; }
body.portrait .ahead em { font-size: 34px; }
body.portrait .slots { gap: 12px; padding: 18px 18px 8px; }
body.portrait .aslot .need b { font-size: 18px !important; }
body.portrait .aslot .need span { font-size: 20px !important; padding: 4px 10px; }
body.portrait .afoot { padding: 10px 24px 22px; min-height: 0; gap: 8px; }
body.portrait .alore { font-size: 27px !important; line-height: 1.5; }
body.portrait .ateaser { font-size: 26px !important; line-height: 1.45; }
body.portrait .arew { font-size: 22px !important; }
body.portrait .afoot .btn { min-height: 96px; font-size: 26px; }
body.portrait #albums .albsum { font-size: 22px; }
body.portrait .fillbox { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
body.portrait .fillbox .fc, body.portrait .fillbox .fc .card { width: 240px; height: 336px; }
body.portrait .fillbox .lead { font-size: 26px !important; text-align: center; }
body.portrait .mast { grid-template-columns: 1fr; gap: 22px; }
body.portrait .mast-list { flex-direction: row; overflow-x: auto; gap: 12px; padding: 4px 2px 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
body.portrait .mrow { flex: none; width: 250px; grid-template-columns: 72px 1fr; padding: 14px; scroll-snap-align: start; min-height: 96px; }
body.portrait .mrow:hover { transform: none; }
body.portrait .mav { width: 72px; height: 72px; }
body.portrait .mtxt b { font-size: 25px !important; } body.portrait .mtxt span { font-size: 20px !important; }
body.portrait .mbadge { min-width: 30px; height: 30px; font-size: 18px; }
body.portrait .mast-detail { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding: 26px 24px; }
body.portrait .mast-art .lc { width: 260px; height: 385px; }
body.portrait .mast-main { width: 100%; }
body.portrait .mast-main .eyebrow { font-size: 20px; }
body.portrait .mast-main h2 { font-size: 50px !important; }
body.portrait .mtitle, body.portrait .mnext { font-size: 26px !important; line-height: 1.45; }
body.portrait .tiers { grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.portrait .tierpip { padding: 12px 4px; }
body.portrait .tierpip b { width: 48px; height: 48px; font-size: 24px; }
body.portrait .tierpip span { font-size: 20px !important; }
body.portrait .mdone { font-size: 30px; }
body.portrait .mast-main #mClaim { width: 100%; min-height: 96px; font-size: 26px; }
body.portrait .mchal { grid-template-columns: 1fr; }
body.portrait .mchal .quest { padding: 16px 18px; grid-template-columns: 1fr 40px; }
body.portrait .mchal .quest b { font-size: 25px !important; } body.portrait .mchal .quest span { font-size: 22px !important; }
body.portrait .mchal .quest .qbar { height: 12px; margin: 10px 0 6px; }
body.portrait .mtitles .eyebrow { font-size: 20px; width: 100%; }
body.portrait .mtitles .chip { font-size: 23px; padding: 14px 22px; min-height: 64px; }
body.portrait .mnote { font-size: 22px !important; line-height: 1.45; }
body.portrait #season .body.sbody { gap: 24px; }
body.portrait #season h3 { font-size: 40px; line-height: 1.15; }
body.portrait .sTop { grid-template-columns: 1fr; gap: 20px; }
body.portrait .sHero { grid-template-columns: 200px 1fr; gap: 24px; padding: 24px; align-items: start; }
body.portrait .sHero .lc { width: 200px; height: 297px; }
body.portrait .sHero .eyebrow { font-size: 20px; line-height: 1.4; }
body.portrait .sHero h2 { font-size: 48px; line-height: 1.08; margin: 6px 0; }
body.portrait .sHero .tag { font-size: 26px !important; line-height: 1.35; }
body.portrait .sHero .lore { display: block; grid-column: 1 / -1; font-size: 27px !important; line-height: 1.5; }
body.portrait .sHeroTxt { display: contents; }
body.portrait .sHero > .lwrap { grid-row: 1 / span 4; }
body.portrait .sHero .sMeta { grid-column: 1 / -1; font-size: 22px !important; line-height: 1.45; margin-top: 4px; }
body.portrait .sWeeks { display: flex; overflow-x: auto; gap: 14px; padding: 4px 2px 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
body.portrait .sWeeks::before { display: none; }
body.portrait .sWeek { flex: none; width: 330px; min-height: 270px; padding: 96px 20px 20px; gap: 6px; scroll-snap-align: start; animation: none; }
body.portrait .sWeek:hover { transform: none; }
body.portrait .sWeek .wdot { width: 60px; height: 60px; font-size: 26px; top: 20px; left: 20px; }
body.portrait .sWeek .wdot .ico { width: 28px; height: 28px; }
body.portrait .sWeek .wk { font-size: 20px !important; }
body.portrait .sWeek b { font-size: 30px !important; overflow-wrap: anywhere; }
body.portrait .sWeek .wl, body.portrait .sWeek .wd { font-size: 22px !important; }
body.portrait .sEvent { padding: 26px 24px; gap: 20px; border-radius: 22px; }
body.portrait .sEvHead { flex-direction: column; gap: 16px; }
body.portrait .sEvHead .eyebrow { font-size: 20px; }
body.portrait .sEvHead p { font-size: 27px !important; line-height: 1.5; }
body.portrait .sEvHead .sRec { align-self: stretch; display: flex; align-items: baseline; justify-content: center; gap: 14px; padding: 14px 22px; }
body.portrait .sRec b { font-size: 44px !important; } body.portrait .sRec span { font-size: 20px !important; }
body.portrait .sFeat { font-size: 24px !important; gap: 14px; min-height: 64px; line-height: 1.35; }
body.portrait .sFeat input { width: 36px; height: 36px; flex: none; }
body.portrait .sLock { font-size: 24px !important; line-height: 1.45; padding: 14px 18px; }
body.portrait .sNodes { grid-template-columns: 1fr; gap: 14px; }
body.portrait .sNodes .node { grid-template-columns: 90px 1fr; min-height: 130px; padding: 18px 20px; gap: 20px; text-align: left; }
body.portrait .sNodes .node > i { width: 84px; height: 84px; flex: none; font-size: 34px; }
body.portrait .sNodes .node > i .ico { width: 36px; height: 36px; }
body.portrait .sNodes .node b { font-size: 30px; }
body.portrait .sNodes .node small { font-size: 23px !important; line-height: 1.35; }
body.portrait .sNodes .node em { font-size: 22px; }
body.portrait .sChips { gap: 12px; }
body.portrait .rchip { font-size: 23px !important; padding: 14px 18px; gap: 14px; min-height: 88px; flex: 1 1 360px; }
body.portrait .rchip i { font-size: 30px; }
body.portrait .rchip i .ico { width: 30px; height: 30px; }
body.portrait .rchip small { font-size: 18px !important; }
body.portrait .rchip em { font-size: 20px; padding: 6px 14px; margin-left: auto; }
body.portrait .sPlay { flex-direction: column; align-items: stretch; gap: 16px; }
body.portrait .sPlay .sFeat { margin: 0; }
body.portrait .sPlay .btn { min-height: 104px; font-size: 30px; }
body.portrait .sCom { padding: 20px; gap: 14px; }
body.portrait .sComHead { flex-direction: column; gap: 6px; }
body.portrait .sComHead b { font-size: 28px; } body.portrait .sComHead span { font-size: 23px !important; }
body.portrait .sComBar { height: 18px; margin: 10px 20px 34px; }
body.portrait .sComBar em { font-size: 20px; top: 24px; }
body.portrait .sComBar em::before { top: -24px; height: 20px; }
body.portrait .sSub { font-size: 22px !important; line-height: 1.35; }
body.portrait .sNote { font-size: 23px !important; line-height: 1.45; }
body.portrait .sPips { flex-wrap: wrap; gap: 12px; }
body.portrait .sPips i { width: 42px; height: 42px; }
body.portrait .sPips span { font-size: 23px !important; margin-left: 0; flex-basis: 100%; }
body.portrait .sLocRow { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
body.portrait .sLoc { grid-template-columns: 72px 1fr; gap: 18px; padding: 20px; }
body.portrait .sLoc .li { font-size: 54px; }
body.portrait .sLoc b { font-size: 30px !important; }
body.portrait .sLoc span { font-size: 22px !important; margin: 4px 0 8px; }
body.portrait .sLoc p { font-size: 26px !important; line-height: 1.45; }
body.portrait .sTrackHead { flex-direction: column; align-items: stretch; gap: 14px; }
body.portrait .sTrackHead p { font-size: 26px; line-height: 1.5; }
body.portrait .sTrackHead #claimAll { min-height: 96px; font-size: 28px; }
body.portrait .sXp { text-align: left; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
body.portrait .sXp b { font-size: 54px; } body.portrait .sXp span { font-size: 23px; }
body.portrait .sTrackHead { order: -2; }
body.portrait .sTrackBar { order: -1; height: 16px; flex: none; }
body.portrait #season .body.sbody:has(.sTrack) { gap: 18px; }
body.portrait .sTrack { flex-direction: column; overflow-x: visible; overflow-y: visible; padding: 0; gap: 12px; scroll-snap-type: none; touch-action: auto; }
body.portrait .sMs { width: auto !important; min-height: 116px; margin: 0; flex-direction: row; gap: 20px; padding: 16px 22px; text-align: left; font-size: 25px !important; }
body.portrait .sMs::before { left: 134px; right: auto; top: -14px; bottom: -14px; width: 4px; height: auto; }
body.portrait .sMs:first-child::before { top: 50%; } body.portrait .sMs:last-child::before { bottom: 50%; }
body.portrait .sMs.reached::before { background: linear-gradient(180deg, var(--gold-3), var(--gold-1)); }
body.portrait .sMs:hover { transform: none; }
body.portrait .sMs .n { width: 56px; flex: none; text-align: center; font-size: 30px; }
body.portrait .sMs i { font-size: 36px; margin: 0; width: 76px !important; height: 76px !important; flex: none; }
body.portrait .sMs i .ico { width: 38px; height: 38px; }
body.portrait .sMs i .coin { width: 40px; height: 40px; }
body.portrait .sMs .t { font-size: 25px !important; color: #eadcf8; }
body.portrait .sMs .t { line-height: 1.3; }
body.portrait .sMs .x { font-size: 22px; flex: none; white-space: nowrap; }
body.portrait .sMs.ready .x { padding: 10px 20px; font-size: 22px; }
body.portrait .sLocker { grid-template-columns: 1fr; gap: 20px; }
body.portrait .sSlot { padding: 22px; gap: 12px; }
body.portrait .sSlot h3 { font-size: 34px !important; }
body.portrait .sCos { min-height: 96px; padding: 16px 20px; font-size: 26px !important; justify-content: center; }
body.portrait .sCos span { font-size: 22px !important; line-height: 1.35; }
body.portrait .sPrev .card { width: 200px !important; height: 280px !important; }
body.portrait .sArchLead { font-size: 27px !important; line-height: 1.5; }
body.portrait .sArchHead { flex-direction: column; gap: 4px; }
body.portrait .sArchHead b { font-size: 32px; } body.portrait .sArchHead span { font-size: 22px; }
body.portrait .sArchRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.portrait .sArchRow .slotc, body.portrait .sArchRow .slotc .card { width: 100%; height: auto; aspect-ratio: 5 / 7; }
body.portrait .sArchRow .slotc .qty, body.portrait .sArchRow .slotc .lock { font-size: 22px; }
body.portrait .sPick { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
body.portrait .sPickC .card { width: 260px !important; height: 364px !important; }
body.portrait .sPickC .own { font-size: 22px; }
body.portrait .sPickC .btn { min-height: 88px; font-size: 26px; width: 100%; }
body.portrait .oddsT { width: 100%; display: block; margin: 16px 0; }
body.portrait .oddsT thead { display: none; }
body.portrait .oddsT tbody, body.portrait .oddsT tr, body.portrait .oddsT td { display: block; }
body.portrait .oddsT tr { padding: 16px 20px; margin-bottom: 12px; border-radius: 16px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .14); text-align: left; }
body.portrait .oddsT td:first-child { font-size: 26px !important; padding: 0 0 8px; border: 0; }
body.portrait .oddsT td:last-child { padding: 0; border: 0; }
body.portrait .oddsT th { font-size: 22px; }
body.portrait .oddsT td { font-size: 24px !important; line-height: 1.5; padding: 12px 10px; }
body.portrait .oddsT .rar { font-size: 18px !important; }
body.portrait .adStub { height: 240px; } body.portrait .adStub b { font-size: 48px; }
body.portrait .expPath { margin: 16px 44px 8px; height: 140px; }
body.portrait .expStop { width: 110px; } body.portrait .expStop span { font-size: 20px !important; }
body.portrait .expInfo { font-size: 24px !important; line-height: 1.5; }
body.portrait .lendRow { flex-wrap: wrap; }
body.portrait .lendRow select { flex: 1 1 100%; min-height: 88px; font-size: 24px !important; }
body.portrait .lendRow .btn { min-height: 88px; font-size: 24px; flex: 1; }
body.portrait .lent { grid-template-columns: 72px 1fr; gap: 12px 16px; padding: 16px; }
body.portrait .lent .lav { width: 72px; height: 72px; }
body.portrait .lent b { font-size: 26px; } body.portrait .lent span { font-size: 22px !important; }
body.portrait .lent .btn { grid-column: span 1; min-height: 80px; font-size: 22px; }
body.portrait .lent .btn[data-load] { grid-column: 1 / -1; }
body.portrait .lent .btn[data-test] { grid-column: 1 / -1; }
body.portrait #lore .top { gap: 14px; }
body.portrait #lore .top h1 { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 40px; }
body.portrait #lore .lr-crumb { display: none; }
body.portrait #lore .top .spacer { display: none; }
body.portrait #lore .lr-search { flex: none; }
body.portrait #lore .lr-search .ico { left: 30px; width: 34px; height: 34px; }
body.portrait #lore .lr-search input { width: 96px; height: 96px; padding: 0 0 0 96px; font-size: 30px; cursor: pointer; transition: width .3s var(--ease-out), padding .3s; }
body.portrait #lore .lr-search input::placeholder { color: transparent; }
body.portrait #lore .lr-search:focus-within input, body.portrait #lore[data-v="search"] .lr-search input { width: 480px; padding: 0 24px 0 76px; cursor: text; }
body.portrait #lore .lr-search:focus-within input::placeholder { color: rgba(201, 189, 166, .6); }
body.portrait #lore .lr-search:focus-within .ico, body.portrait #lore[data-v="search"] .lr-search .ico { left: 24px; }
body.portrait #lore .top:has(.lr-search:focus-within) :is(h1, .lr-tools), body.portrait #lore[data-v="search"] .top :is(h1, .lr-tools) { display: none; }
body.portrait #lore .top:has(.lr-search:focus-within) .lr-search, body.portrait #lore[data-v="search"] .lr-search { flex: 1 1 auto; }
body.portrait #lore .top:has(.lr-search:focus-within) .lr-search input, body.portrait #lore[data-v="search"] .lr-search input { width: 100%; }
body.portrait #lore .lr-count { height: 96px; padding: 0 22px; font-size: 30px; }
body.portrait #lore .lr-count span { font-size: 22px; }
body.portrait #lore .lr-fs button { min-width: 88px; height: 96px; }
body.portrait #lore .lr-readbar { top: var(--top-h, 120px); height: 6px; }
body.portrait #lore .lr-view { top: var(--top-h, 120px); }
body.portrait .lr-land { grid-template-columns: 1fr; gap: 34px; padding: 24px var(--gut, 24px) 60px; }
body.portrait .lr-hero { padding: 40px 34px 34px; }
body.portrait .lr-realm { font-size: 92px; }
body.portrait .lr-tag { font-size: 34px; }
body.portrait .lr-intro p { font-size: 30px; line-height: 1.55; }
body.portrait .lr-acts { flex-direction: column; align-items: stretch; }
body.portrait .lr-acts .btn { min-height: 104px; font-size: 28px !important; justify-content: center; }
body.portrait .lr-overall b { font-size: 32px; } body.portrait .lr-overall span { font-size: 24px; }
body.portrait .lr-shelves > .af-title { font-size: 28px; }
body.portrait .lr-shelfgrid, body.portrait .lr-shelfgrid.n1, body.portrait .lr-shelfgrid.n2, body.portrait .lr-shelfgrid.n4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(380px, auto); gap: 20px; }
body.portrait .lr-shelf { min-height: 380px; padding: 22px 24px; }
body.portrait .lr-shelfgrid > .lr-shelf:first-child:nth-last-child(odd) { grid-column: 1 / -1; min-height: 320px; }
body.portrait .lr-sh-txt b { font-size: 36px; }
body.portrait .lr-sh-txt em { font-size: 24px; -webkit-line-clamp: 3; }
body.portrait .lr-sh-prog small, body.portrait .lr-sh-lock { font-size: 22px !important; }
body.portrait .lr-cat, body.portrait .lr-search-res { padding: 24px var(--gut, 24px) 60px; gap: 24px; }
body.portrait .lr-cathead { flex-direction: column; align-items: stretch; gap: 22px; padding: 34px 30px 30px; min-height: 300px; justify-content: flex-end; }
body.portrait .lr-ch-txt h2 { font-size: 64px; }
body.portrait .lr-ch-txt p { font-size: 30px; line-height: 1.5; }
body.portrait .lr-ch-prog { width: auto; }
body.portrait .lr-ch-prog > span:not(.lr-bar) { font-size: 22px; } body.portrait .lr-ch-prog small { font-size: 22px; }
body.portrait .lr-grid, body.portrait .lr-grid-s { grid-template-columns: repeat(2, 1fr); gap: 20px; }
body.portrait .lr-card:hover { transform: none; }
body.portrait .lr-card-txt { padding: 18px 20px 22px; }
body.portrait .lr-card-txt b { font-size: 32px; }
body.portrait .lr-card-txt em { font-size: 25px; }
body.portrait .lr-card-txt q { font-size: 25px; line-height: 1.45; }
body.portrait .lr-card-txt small, body.portrait .lr-kicker { font-size: 20px; }
body.portrait .lr-how { font-size: 24px; } body.portrait .lr-how small { font-size: 18px; }
body.portrait .lr-grid-s .lr-card-art { aspect-ratio: 16 / 9; }
body.portrait .lr-sr-head { flex-direction: column; align-items: flex-start; gap: 8px; }
body.portrait .lr-sr-head .af-eyebrow { font-size: 22px; } body.portrait .lr-sr-head > span { font-size: 23px; }
body.portrait .lr-reader { padding: 20px var(--gut, 24px) 80px; }
body.portrait .lr-rhead { min-height: 560px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; padding: 40px 34px 32px; }
body.portrait .lr-medal { width: 170px; height: 170px; }
body.portrait .lr-rhead-txt { flex: none; width: 100%; }
body.portrait .lr-rhead .af-eyebrow { font-size: 22px; }
body.portrait .lr-rhead h2 { font-size: 72px; } body.portrait .lr-rhead h2.long { font-size: 58px; } body.portrait .lr-rhead h2.xlong { font-size: 46px; }
body.portrait .lr-sub { font-size: 32px; }
body.portrait .lr-meta { font-size: 22px; }
body.portrait .lr-page { padding: 40px 34px 50px; }
body.portrait .lr-col { font-size: calc(36px + var(--fs) * 3px); max-width: none; }
body.portrait .lr-body { line-height: 1.6; hyphens: manual; -webkit-hyphens: manual; }
body.portrait .lr-hist { padding: 26px 26px; }
body.portrait .lr-hist-h { font-size: 22px; }
body.portrait .lr-hist p { font-size: calc(30px + var(--fs) * 2px); line-height: 1.55; }
body.portrait .lr-links { flex-direction: column; align-items: stretch; }
body.portrait .lr-links .btn { min-height: 100px; font-size: 26px; justify-content: center; }
body.portrait .lr-pn { grid-template-columns: 1fr; gap: 14px; }
body.portrait .lr-pnb { min-height: 120px; }
body.portrait .lr-pnb:hover, body.portrait .lr-relc:hover { transform: none; }
body.portrait .lr-pnb small { font-size: 20px; }
body.portrait .lr-pnb b { font-size: 32px; white-space: normal; }
body.portrait .lr-pnb em { font-size: 23px; }
body.portrait .lr-rel .af-title { font-size: 24px; }
body.portrait .lr-relrow { grid-template-columns: 1fr; gap: 14px; }
body.portrait .lr-relc b { font-size: 28px; white-space: normal; } body.portrait .lr-relc small { font-size: 22px; }
body.portrait .lr-sealedpage { max-width: none; margin: 24px var(--gut, 24px) 60px; padding: 50px 34px 44px; }
body.portrait .lr-sealedpage h2 { font-size: 56px; }
body.portrait .lr-teaser { font-size: 32px !important; }
body.portrait .lr-sealtxt { font-size: 30px; }
body.portrait .lr-howbig { align-self: stretch; padding: 22px 26px; } body.portrait .lr-howbig small { font-size: 20px; } body.portrait .lr-howbig b { font-size: 32px; }
body.portrait .lr-sealedpage .lr-acts { align-self: stretch; }
body.portrait .lr-empty { margin: 40px var(--gut, 24px); padding: 44px 30px; }
body.portrait .lr-empty p { font-size: 28px; }
body.portrait .lr-inlink { min-height: 96px; font-size: 25px !important; }
body.portrait #rules .top h1 { flex: 1 1 auto; }
body.portrait #rules .top .spacer { display: none; }
body.portrait #rules #rplay { flex: none; min-height: 96px; padding: 0 26px; font-size: 24px; }
body.portrait #rules .rwrap { top: calc(var(--top-h, 120px) + 10px); bottom: 0; left: 0; right: 0; width: auto; transform: none; display: flex; flex-direction: column; gap: 14px; }
body.portrait #rules .rtoc { flex: none; flex-direction: row; gap: 10px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 var(--gut, 24px) 4px; border: 0; border-radius: 0; background: none; box-shadow: none;
scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
body.portrait #rules .rtoc::-webkit-scrollbar { display: none; }
body.portrait #rules .rtoc .af-eyebrow { display: none; }
body.portrait #rules .rtoc button { flex: none; min-height: 80px; padding: 0 26px; gap: 12px; font-size: 24px; border-radius: 99px; white-space: nowrap;
background: rgba(20, 11, 40, .85); border: 1px solid rgba(190, 160, 255, .22); }
body.portrait #rules .rtoc button .ico { width: 26px; height: 26px; }
body.portrait #rules .rtoc button.on { color: #2b1600; background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 55%, var(--gold-2)); border-color: #fff0c2; box-shadow: 0 0 18px rgba(242, 193, 78, .35); }
body.portrait #rules .rtoc button.on .ico { color: #2b1600; }
body.portrait #rules .rtoc button.on::before { display: none; }
body.portrait #rules .rwrap .doc { flex: 1; min-height: 0; height: auto; padding: 0 var(--gut, 24px) 80px; gap: 20px; }
body.portrait #rules .rsec { padding: 30px 28px; border-radius: 22px; }
body.portrait #rules .rsec.intro { padding: 36px 30px; }
body.portrait #rules .rsec.intro::before { background: linear-gradient(180deg, rgba(14, 8, 28, .6), rgba(14, 8, 28, .95) 60%), var(--art) center 30% / cover; }
body.portrait #rules .rsec .af-eyebrow { font-size: 22px; }
body.portrait #rules .doc h2 { font-size: 44px; gap: 14px; margin-bottom: 18px; }
body.portrait #rules .doc h2 .ico { width: 42px; height: 42px; }
body.portrait #rules .doc p, body.portrait #rules .doc li { font-size: 30px; line-height: 1.55; }
body.portrait #rules .doc ul { padding-left: 34px; }
body.portrait #rules .doc li + li { margin-top: 10px; }
body.portrait #rules .doc .callout { font-size: 36px; line-height: 1.45; margin: 12px 0 26px; }
body.portrait #rules .goal { grid-template-columns: 1fr; gap: 12px; max-width: none; }
body.portrait #rules .goal > div { padding: 20px 22px; column-gap: 20px; }
body.portrait #rules .goal .ico { width: 44px; height: 44px; }
body.portrait #rules .goal b { font-size: 32px; } body.portrait #rules .goal span { font-size: 26px; }
body.portrait #rules .steps { gap: 12px; }
body.portrait #rules .steps li { padding: 18px 20px 18px 84px; }
body.portrait #rules .steps li::before { width: 46px; height: 46px; left: 20px; font-size: 24px; }
body.portrait #rules .steps li > b:first-child { display: block; margin: 0 0 4px; font-size: 30px; }
body.portrait #rules .note { padding: 18px 22px; }
body.portrait #rules .tgrid, body.portrait #rules .kwgrid, body.portrait #rules .lgrid { grid-template-columns: 1fr; gap: 12px; }
body.portrait #rules .tgrid > div { padding: 20px 22px; }
body.portrait #rules .tgrid > div > b { font-size: 30px; margin-bottom: 6px; }
body.portrait #rules .tgrid span b { display: inline; margin: 0; font: 700 1em var(--font-ui); letter-spacing: 0; color: #fff4d6; }
body.portrait #rules .tgrid span { font-size: 28px; line-height: 1.5; }
body.portrait #rules kbd { font-size: 22px; padding: 2px 10px; }
body.portrait #rules .kwc { padding: 18px 20px; gap: 18px; }
body.portrait #rules .kwc:hover { transform: none; }
body.portrait #rules .kwi { width: 64px; height: 64px; } body.portrait #rules .kwi .ico { width: 32px; height: 32px; }
body.portrait #rules .kwc b { font-size: 30px; } body.portrait #rules .kwc span { font-size: 26px; line-height: 1.45; }
body.portrait #rules .lrow { padding: 16px 20px 16px 16px; gap: 20px; }
body.portrait #rules .lrow .la { width: 104px; height: 104px; border-radius: 18px; }
body.portrait #rules .lrow b { font-size: 32px; display: block; }
body.portrait #rules .lrow em { font-size: 24px; } body.portrait #rules .lrow em .ico { width: 22px; height: 22px; }
body.portrait #rules .lrow div > span { font-size: 26px; line-height: 1.45; }
body.portrait #rules .setgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
body.portrait #rules .setc { padding: 20px; }
body.portrait #rules .setc b { font-size: 30px; } body.portrait #rules .setc span { font-size: 25px; line-height: 1.4; } body.portrait #rules .setc em { font-size: 22px; }
/* css/ffa.css */
#ffaRail { position: absolute; left: 0; top: 0; bottom: 0; width: 168px; z-index: 855; pointer-events: none;
display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px 8px 12px 10px; }
#ffaRail::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 3, 14, .78), rgba(6, 3, 14, .35) 82%, transparent);
border-right: 1px solid rgba(232, 186, 90, .14); }
#ffaRail .fp { pointer-events: auto; }
.fp { position: relative; appearance: none; border: 1px solid rgba(232, 186, 90, .3); border-radius: 14px; padding: 8px 8px 8px 12px; text-align: left; cursor: pointer; color: var(--ink);
display: grid; grid-template-columns: 1fr auto; grid-template-areas: "av life" "id id" "st st"; gap: 5px 6px; align-items: center; min-height: 0; flex: 0 1 auto;
background: linear-gradient(160deg, rgba(34, 18, 60, .94), rgba(12, 6, 24, .94)); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); overflow: visible;
transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), border-color .25s, box-shadow .25s, filter .3s, opacity .3s; }
.fp::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.fp:hover { transform: translateX(3px); border-color: rgba(242, 193, 78, .6); }
.fp:active { transform: scale(.97); }
.fp-av { grid-area: av; position: relative; width: 58px; height: 58px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--sc), var(--lc), var(--sc)); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.fp-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #1a1030; }
.fp-shard { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 28px; display: none; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
background: linear-gradient(160deg, #f3dcff, #b35cff 45%, #5a1a9e); filter: drop-shadow(0 0 6px #c77dff); animation: ffaShard 1.8s ease-in-out infinite; }
.fp.hasShard .fp-shard { display: block; }
@keyframes ffaShard { 50% { filter: drop-shadow(0 0 12px #e2b3ff) brightness(1.25); transform: translateY(-2px); } }
.fp-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-name { font: 800 15px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-lead { font: 700 9.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim, #b9a9d8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-life { grid-area: life; position: relative; width: 44px; height: 48px; display: grid; place-items: center; justify-self: end; }
.fp-life::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); background: linear-gradient(160deg, #ff9a86, #d8321f 45%, #6a0c06); box-shadow: inset 0 0 0 2px rgba(255, 220, 200, .5); }
.fp-life b { position: relative; font: 900 22px/1 var(--font-title); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
.fp.danger .fp-life { animation: lcDanger 1.1s ease-in-out infinite; }
.fp-stats { grid-area: st; display: flex; gap: 8px; }
.fp-stats i { display: flex; align-items: center; gap: 4px; font-style: normal; }
.fp-stats b { font: 800 13px/1 var(--font-ui); color: #efe4ff; }
.fp-stats u { display: block; flex: none; text-decoration: none; }
.fp-h u { width: 10px; height: 14px; border-radius: 2px; background: linear-gradient(160deg, #8d5bff, #3a1f7a); box-shadow: 0 0 0 1px rgba(255, 230, 170, .55); }
.fp-f u { width: 14px; height: 11px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(232, 186, 90, .85) 0 3px, transparent 3px 5px); }
.fp-c u { width: 11px; height: 14px; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); background: linear-gradient(160deg, #e6d2ff, #a86bff 50%, #4b1f9a); }
.fp-tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); white-space: nowrap; font: 800 9px/1 var(--font-ui); letter-spacing: .16em; padding: 4px 8px; border-radius: 99px;
color: #1b0f00; background: linear-gradient(180deg, #ffe7a0, #e0a53a); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; pointer-events: none; }
.fp-tag:not(:empty) { opacity: 1; }
.fp-out { position: absolute; inset: 0; border-radius: 13px; display: none; place-items: center; align-content: center; gap: 2px; background: rgba(6, 3, 12, .72); }
.fp-out b { font: 900 20px/1 var(--font-title); letter-spacing: .2em; color: #ff9c92; text-shadow: 0 2px 6px #000; }
.fp-out em { font: 800 12px/1 var(--font-ui); letter-spacing: .12em; color: #e8dcff; font-style: normal; }
.fp.focus { border-color: var(--gold-1, #f2c14e); box-shadow: 0 0 0 1px var(--gold-1, #f2c14e), 0 0 22px rgba(242, 193, 78, .35), 0 8px 20px rgba(0, 0, 0, .5);
background: linear-gradient(160deg, rgba(60, 34, 90, .96), rgba(20, 10, 36, .96)); }
.fp.focus::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left-color: var(--gold-1, #f2c14e); border-right: 0; }
.fp.active { box-shadow: 0 0 0 2px var(--sc), 0 0 26px color-mix(in srgb, var(--sc) 60%, transparent), 0 8px 20px rgba(0, 0, 0, .5); }
.fp.active .fp-tag { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--sc) 70%, #fff)); }
.fp.atk { box-shadow: 0 0 0 2px #ff8a5a, 0 0 30px rgba(255, 120, 70, .7); }
.fp.atk .fp-tag { background: linear-gradient(180deg, #ffc2a0, #ff5a36); color: #fff; }
.fp.def { border-color: #ff5a4f; animation: ffaDef 1s ease-in-out infinite; }
.fp.def .fp-tag { background: linear-gradient(180deg, #ff9c92, #b3231a); color: #fff; }
@keyframes ffaDef { 50% { box-shadow: 0 0 0 2px #ff5a4f, 0 0 34px rgba(255, 70, 50, .75); } }
.fp.pick { border-color: #6fd3ff; box-shadow: 0 0 0 2px #6fd3ff, 0 0 26px rgba(111, 211, 255, .7); }
.fp.pick .fp-tag { background: linear-gradient(180deg, #d6f3ff, #3fa6d8); color: #04121c; }
.fp.out { filter: grayscale(.9) brightness(.7); cursor: default; }
.fp.out .fp-out { display: grid; }
.fp.out::before, .fp.out .fp-tag { display: none; }
.fp.flash { animation: ffaFlash .6s ease-out; }
@keyframes ffaFlash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.fp.nudge { animation: ffaNudge .35s ease-out; }
@keyframes ffaNudge { 40% { transform: scale(1.05); } }
.fp.shardin .fp-av { animation: ffaShardIn .9s ease-out; }
@keyframes ffaShardIn { 0% { box-shadow: 0 0 0 0 #c77dff; } 40% { box-shadow: 0 0 0 10px rgba(199, 125, 255, .6), 0 0 40px #c77dff; } 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, .6); } }
body.mobile #game.ffa #ffaRail { width: 232px; gap: 12px; padding: 10px 8px 10px 10px; }
body.mobile .fp { padding: 10px 10px 10px 14px; border-radius: 16px; gap: 6px 8px; }
body.mobile .fp-av { width: 74px; height: 74px; }
body.mobile .fp-name { font-size: 22px; }
body.mobile .fp-lead { font-size: 13px; }
body.mobile .fp-life { width: 58px; height: 62px; }
body.mobile .fp-life b { font-size: 29px; }
body.mobile .fp-stats { gap: 10px; }
body.mobile .fp-stats b { font-size: 19px; }
body.mobile .fp-stats u { transform: scale(1.35); }
body.mobile .fp-tag { font-size: 13px; top: -12px; padding: 5px 10px; }
body.mobile .fp-out b { font-size: 28px; } body.mobile .fp-out em { font-size: 17px; }
body.mobile .fp-shard { width: 30px; height: 38px; }
#ffaRail[data-n="4"] .fp { gap: 4px 6px; }
body.mobile #ffaRail[data-n="4"] .fp-lead { display: none; }
body.mobile #ffaRail[data-n="4"] .fp-av { width: 64px; height: 64px; }
body.portrait #ffaRail { right: 0; bottom: auto; width: auto !important; height: 150px; flex-direction: row; justify-content: center; align-items: stretch; gap: 10px; padding: 16px 14px 10px; }
body.portrait #ffaRail::before { background: linear-gradient(180deg, rgba(6, 3, 14, .9), rgba(6, 3, 14, .5) 80%, transparent); border-right: 0; border-bottom: 1px solid rgba(232, 186, 90, .16); }
body.portrait .fp { flex: 1 1 0; max-width: 300px; min-width: 0; grid-template-columns: auto 1fr auto; grid-template-areas: "av id life" "st st st"; padding: 8px 10px 8px 14px; gap: 6px 8px; border-radius: 16px; }
body.portrait .fp:hover { transform: translateY(2px); }
body.portrait .fp-av { width: 62px; height: 62px; }
body.portrait .fp-name { font-size: 22px; }
body.portrait .fp-lead { font-size: 13px; }
body.portrait .fp-life { width: 50px; height: 54px; }
body.portrait .fp-life b { font-size: 26px; }
body.portrait .fp-stats { gap: 12px; }
body.portrait .fp-stats b { font-size: 19px; }
body.portrait .fp-stats u { transform: scale(1.3); }
body.portrait .fp-tag { font-size: 13px; top: -11px; }
body.portrait .fp-out b { font-size: 28px; } body.portrait .fp-out em { font-size: 17px; }
body.portrait .fp.focus::after { right: auto; left: 50%; top: auto; bottom: -9px; margin: 0 0 0 -8px; border: 8px solid transparent; border-top-color: var(--gold-1, #f2c14e); border-bottom: 0; }
body.portrait #ffaRail[data-n="4"] .fp { grid-template-areas: "av id life" "st st st"; padding: 8px 8px 8px 12px; }
body.portrait #ffaRail[data-n="4"] .fp-lead { display: none; }
body.portrait #ffaRail[data-n="4"] .fp-av { width: 54px; height: 54px; }
body.portrait #ffaRail[data-n="4"] .fp-life { width: 44px; height: 48px; }
body.portrait #ffaRail[data-n="4"] .fp-life b { font-size: 23px; }
body.portrait #ffaRail[data-n="4"] .fp-stats { gap: 8px; }
body.portrait #ffaRail[data-n="4"] .fp-stats b { font-size: 17px; }
body.portrait #ffaRail[data-n="4"] .fp-name { font-size: 19px; }
body.portrait #game.ffa .bplate.s1 { top: calc(84px + var(--ffa-oy)); }
body.portrait #game.ffa #hud :is(#menuBtn, #skipBtn) { top: calc(16px + var(--ffa-oy)); }
body.portrait #game.ffa #hud #topbar { top: calc(108px + var(--ffa-oy)); }
body.portrait #game.ffa #log, body.portrait #game.ffa #tracker { top: calc(90px + var(--ffa-oy)); }
#game .bp-shard { position: absolute; left: 50px; top: 44px; width: 22px; height: 28px; display: none; z-index: 2; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
background: linear-gradient(160deg, #f3dcff, #b35cff 45%, #5a1a9e); filter: drop-shadow(0 0 6px #c77dff); animation: ffaShard 1.8s ease-in-out infinite; }
#game .bplate.hasShard .bp-shard { display: block; }
#game.ffa .bplate.def { border-color: #ff5a4f; animation: ffaDef 1s ease-in-out infinite; }
#game.ffa .bplate.s1 { border-left: 4px solid var(--focus-c, #ff6a5a); }
#game.ffa-watch #endTurn { opacity: .5; }
#ffaFx { position: absolute; inset: 0; pointer-events: none; z-index: 870; }
#ffaFx > * { pointer-events: none; }
.ffa-arc { position: absolute; left: 0; top: 0; overflow: visible; }
.ffa-arc path { fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px currentColor); }
.ffa-arc circle { fill: none; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.ffa-float { position: absolute; transform: translate(-50%, -50%); font: 900 24px/1 var(--font-title); letter-spacing: .08em; white-space: nowrap; text-shadow: 0 2px 6px #000, 0 0 16px currentColor;
animation: ffaFloat 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
body.mobile .ffa-float, body.portrait .ffa-float { font-size: 34px; }
@keyframes ffaFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.ffa-shardfly.entry { width: 60px; height: 76px; }
#sweep[data-kind="shard"] .t { color: #f3dcff; }
.ffa-shardfly { position: absolute; width: 44px; height: 56px; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
background: linear-gradient(160deg, #fff, #d9a6ff 30%, #9b3dff 60%, #4b0f8a); filter: drop-shadow(0 0 14px #c77dff) drop-shadow(0 0 30px #9b3dff); }
#ffaFight { position: absolute; left: 0; right: 0; top: 150px; z-index: 875; pointer-events: none; display: grid; justify-items: center; gap: 14px; opacity: 0; visibility: hidden; }
#ffaFight.go { visibility: visible; animation: ffaFight 1.7s cubic-bezier(.2, .8, .3, 1) forwards; animation-duration: max(1.1s, calc(1.7s / var(--spd, 1))); }
@keyframes ffaFight { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#ffaFight .ff-band { display: flex; align-items: center; gap: 16px; padding: 10px 26px; border-radius: 99px; background: linear-gradient(90deg, rgba(40, 8, 12, .92), rgba(12, 6, 26, .95), rgba(40, 8, 12, .92));
border: 1px solid rgba(255, 138, 90, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 110, 70, .35); font: 900 26px/1 var(--font-title); letter-spacing: .08em; white-space: nowrap; }
#ffaFight .ff-band i { font-style: normal; color: #ffd36e; font-size: 30px; text-shadow: 0 0 14px #ff8a5a; }
#ffaFight .ff-cards { display: flex; align-items: center; gap: 22px; }
#ffaFight .ff-c { position: relative; width: 130px; height: 193px; }
#ffaFight .ff-c > * { position: absolute; inset: 0; width: 130px; height: 182px; }
#ffaFight .ff-c > .lc { height: 193px; }
#ffaFight .ff-att { animation: ffaLunge 1.7s cubic-bezier(.4, 0, .3, 1) both; }
#ffaFight .ff-tgt { animation: ffaHitT 1.7s ease-out both; }
#ffaFight .ff-vs { font: 900 30px/1 var(--font-title); color: #ffd36e; text-shadow: 0 0 16px #ff8a5a, 0 2px 4px #000; }
@keyframes ffaLunge { 0%, 20% { transform: translateX(-30px) rotate(-4deg); } 42% { transform: translateX(40px) rotate(3deg) scale(1.06); } 60%, 100% { transform: none; } }
@keyframes ffaHitT { 0%, 38% { transform: none; filter: none; } 44% { transform: translateX(10px) rotate(4deg); filter: brightness(2); } 56%, 100% { transform: none; filter: none; } }
body.mobile #ffaFight { top: 120px; } body.mobile #ffaFight .ff-band { font-size: 36px; }
body.mobile #ffaFight .ff-cards { transform: scale(1.25); margin-top: 26px; }
body.portrait #ffaFight { top: calc(var(--ph) / 2 - 330px); }
body.portrait #ffaFight .ff-band { font-size: 34px; }
body.portrait #ffaFight .ff-cards { transform: scale(1.5); margin-top: 60px; }
#ffaKO { position: absolute; left: 0; right: 0; top: 290px; height: 220px; z-index: 890; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 26px; opacity: 0; visibility: hidden; }
#ffaKO.go { visibility: visible; animation: ffaKO 1.9s cubic-bezier(.2, .8, .3, 1) forwards; animation-duration: max(1.3s, calc(1.9s / var(--spd, 1))); }
#ffaKO .ko-band { position: absolute; inset: 30px 0; background: linear-gradient(90deg, transparent, rgba(40, 6, 10, .92) 20%, rgba(40, 6, 10, .92) 80%, transparent); border-top: 1px solid rgba(255, 106, 90, .6); border-bottom: 1px solid rgba(255, 106, 90, .6); }
#ffaKO .ko-av { position: relative; width: 150px; height: 150px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 4px var(--sc), 0 0 40px var(--sc); filter: grayscale(.6); animation: ffaKOav 1.9s ease-out both; }
#ffaKO .ko-txt { position: relative; }
#ffaKO .ko-k { font: 900 64px/1 var(--font-title); letter-spacing: .16em; color: #fff; text-shadow: 0 0 30px #ff5a4f, 0 4px 10px #000; }
#ffaKO .ko-n { margin-top: 8px; font: 800 24px/1.2 var(--font-title); color: #ffd9d2; }
#ffaKO .ko-s { margin-top: 6px; font: 700 15px/1.2 var(--font-ui); color: #ffd36e; letter-spacing: .06em; }
@keyframes ffaKO { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ffaKOav { 0%, 20% { transform: none; filter: none; } 35% { transform: rotate(-8deg) scale(1.06); filter: grayscale(1) brightness(1.8); } 100% { transform: rotate(-4deg) scale(.96); filter: grayscale(1) brightness(.7); } }
body.mobile #ffaKO .ko-k { font-size: 84px; } body.mobile #ffaKO .ko-n { font-size: 32px; } body.mobile #ffaKO .ko-s { font-size: 22px; }
body.portrait #ffaKO { top: calc(var(--ph) / 2 - 200px); height: 400px; flex-direction: column; gap: 18px; text-align: center; }
body.portrait #ffaKO .ko-band { inset: 0; }
body.portrait #ffaKO .ko-k { font-size: 76px; } body.portrait #ffaKO .ko-n { font-size: 34px; } body.portrait #ffaKO .ko-s { font-size: 24px; }
#ffaOut { position: absolute; inset: 0; z-index: 940; display: grid; place-items: center; background: rgba(4, 2, 10, .55); pointer-events: auto; animation: ffaIn .3s ease-out; }
@keyframes ffaIn { from { opacity: 0; } }
#ffaOut .fo-box { width: 520px; max-width: calc(100% - 32px); padding: 28px 30px; border-radius: 22px; text-align: center; background: linear-gradient(170deg, rgba(40, 22, 72, .97), rgba(12, 6, 24, .97));
border: 1px solid rgba(232, 186, 90, .45); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
#ffaOut .fo-k { font: 800 12px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#ffaOut .fo-p { font: 900 72px/1.1 var(--font-title); color: #fff4d6; text-shadow: 0 0 24px rgba(242, 193, 78, .5); }
#ffaOut p { color: #dcd0f0; font-size: 15px; line-height: 1.5; margin: 8px 0 20px; }
#ffaOut .fo-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.mobile #ffaOut .fo-box, body.portrait #ffaOut .fo-box { width: 760px; padding: 40px; }
body.mobile #ffaOut .fo-k, body.portrait #ffaOut .fo-k { font-size: 18px; }
body.mobile #ffaOut .fo-p, body.portrait #ffaOut .fo-p { font-size: 104px; }
body.mobile #ffaOut p, body.portrait #ffaOut p { font-size: 24px; }
body.mobile #ffaOut .btn, body.portrait #ffaOut .btn { font-size: 24px; padding: 18px 28px; }
#ffaIntro { position: absolute; inset: 0; z-index: 960; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(10, 5, 24, .6), rgba(4, 2, 10, .94)); animation: vsBg .3s ease-out; transition: opacity .35s; }
#ffaIntro.out { opacity: 0; pointer-events: none; }
#ffaIntro .fi-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
#ffaIntro .fi-col { position: relative; overflow: hidden; border-right: 2px solid rgba(0, 0, 0, .6); animation: ffaCol .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 90ms); }
#ffaIntro .fi-art { position: absolute; inset: 0; background-size: cover; transform: scale(1.05); }
#ffaIntro .fi-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 3, 12, .92)), linear-gradient(0deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 40%); }
#ffaIntro .fi-col::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); box-shadow: 0 0 24px var(--c); }
#ffaIntro .fi-name { position: absolute; left: 12px; right: 12px; bottom: 26px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
#ffaIntro .fi-name em { font: 800 13px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--c); font-style: normal; }
#ffaIntro .fi-name b { font: 900 30px/1.05 var(--font-title); color: #fff4d6; text-shadow: 0 3px 8px #000; }
#ffaIntro .fi-mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; padding: 18px 0; background: rgba(6, 3, 14, .72);
border-top: 1px solid rgba(232, 186, 90, .5); border-bottom: 1px solid rgba(232, 186, 90, .5); animation: ffaMid .7s .25s cubic-bezier(.2, .8, .3, 1) both; }
#ffaIntro .fi-mid b { font: 900 60px/1 var(--font-title); letter-spacing: .14em; color: #fff; text-shadow: 0 0 30px rgba(242, 193, 78, .7), 0 4px 10px #000; }
#ffaIntro .fi-mid span { font: 700 14px/1 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#ffaIntro .vs-skip { position: absolute; bottom: 12px; right: 16px; font-size: 12px; color: rgba(255, 255, 255, .5); letter-spacing: .12em; }
#ffaIntro.still * { animation: none !important; }
@keyframes ffaCol { from { opacity: 0; transform: translateY(40px); } }
@keyframes ffaMid { from { opacity: 0; transform: translateY(-50%) scaleX(.2); } }
body.mobile #ffaIntro .fi-name b { font-size: 40px; } body.mobile #ffaIntro .fi-name em { font-size: 18px; }
body.mobile #ffaIntro .fi-mid b { font-size: 84px; } body.mobile #ffaIntro .fi-mid span { font-size: 20px; }
body.portrait #ffaIntro .fi-cols { grid-template-columns: 1fr; grid-template-rows: repeat(var(--n), 1fr); }
body.portrait #ffaIntro .fi-col { border-right: 0; border-bottom: 2px solid rgba(0, 0, 0, .6); }
body.portrait #ffaIntro .fi-art { background-position: 50% 25% !important; }
body.portrait #ffaIntro .fi-name { left: 24px; right: 24px; bottom: 16px; text-align: left; }
body.portrait #ffaIntro .fi-name b { font-size: 44px; } body.portrait #ffaIntro .fi-name em { font-size: 20px; }
body.portrait #ffaIntro .fi-mid b { font-size: 76px; } body.portrait #ffaIntro .fi-mid span { font-size: 22px; }
body.portrait #ffaIntro .vs-skip { font-size: 20px; }
.pz { position: absolute; left: 50%; top: 50%; z-index: 900; width: 560px; max-width: calc(100% - 32px); transform: translate(-50%, -50%); padding: 16px 18px 16px; border-radius: 20px;
background: linear-gradient(170deg, rgba(24, 40, 70, .97), rgba(10, 8, 26, .97)); border: 1px solid rgba(111, 211, 255, .6); box-shadow: 0 0 34px rgba(111, 211, 255, .28), 0 30px 60px rgba(0, 0, 0, .7);
pointer-events: auto; animation: pzIn .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.pz.out { animation: pzOut .2s ease-in forwards; }
@keyframes pzIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
@keyframes pzOut { to { opacity: 0; transform: translate(-50%, -52%) scale(.96); } }
.pz-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; }
.pz-head > b { font: 900 24px/1 var(--font-title); letter-spacing: .12em; color: #d6f3ff; text-transform: uppercase; text-shadow: 0 0 14px rgba(111, 211, 255, .6); }
.pz-head > span { font-size: 13.5px; line-height: 1.35; color: #d7e7f5; }
.pz-head > span em { font-style: normal; font-weight: 800; }
.pz-time { font: 900 20px/1 var(--font-title); font-style: normal; color: #fff; min-width: 28px; text-align: right; }
.pz:not(.timed) .pz-time, .pz:not(.timed) .pz-bar { display: none; }
.pz-bar { height: 5px; margin: 10px 0 2px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fd3ff, #d6f3ff); transform-origin: 0 50%; }
.pz.hurry .pz-bar i { background: linear-gradient(90deg, #ff5a4f, #ffb070); }
.pz.hurry .pz-time { color: #ff9c92; }
.pz-fight { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 10px; }
.pz-fight > i { font-style: normal; font-size: 22px; color: #ffd36e; }
.pz-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 138, 90, .45); }
.pz-mini.me { border-color: rgba(111, 211, 255, .6); }
.pz-mini b { font: 800 14px/1.2 var(--font-title); color: #fff4d6; text-align: center; max-width: 190px; }
.pz-mini em { font: 900 26px/1 var(--font-title); font-style: normal; color: #ffb49a; }
.pz-mini.me em { color: #9fe4ff; }
.pz-mini em small { font: 800 13px/1 var(--font-ui); color: #7dffb0; margin-left: 4px; vertical-align: super; }
.bz-gems { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.bz-gem { appearance: none; border: 0; background: none; padding: 4px; cursor: pointer; }
.bz-gem i { display: block; width: 30px; height: 38px; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); background: linear-gradient(170deg, #4e3f6c, #261a40 60%, #140b24); transition: transform .15s, background .15s; }
.bz-gem.on i { background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0 18%, transparent 19%), linear-gradient(160deg, #c3f0ff, #3fa6d8 55%, #0d4f78); transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 0 8px #6fd3ff); }
.bz-gem:hover i { transform: translateY(-3px); }
.bz-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.bz-row .btn { width: 46px; height: 42px; padding: 0; font-size: 22px; }
.bz-n { font: 900 30px/1 var(--font-title); color: #9fe4ff; min-width: 56px; text-align: center; }
.bz-res { text-align: center; margin: 8px 0 12px; font: 700 14px/1.35 var(--font-ui); color: #ffe7a0; min-height: 19px; }
.pz-btns { display: flex; justify-content: center; gap: 12px; }
.ij-q { text-align: center; font-size: 14px; color: #dce8f5; margin: 0 0 10px; }
.ij-cards { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 30px; }
.ij-c { position: relative; appearance: none; border: 0; background: none; padding: 0; width: 130px; height: 182px; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .3, 1.2);
animation: ijIn .35s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 60ms); }
.ij-c .card { width: 130px; height: 182px; }
.ij-c:hover, .ij-c.hov { transform: translateY(-8px) scale(1.05); }
.ij-c::after { content: ""; position: absolute; inset: -5px; border-radius: 12px; border: 2px solid rgba(111, 211, 255, .9); box-shadow: 0 0 18px rgba(111, 211, 255, .7); pointer-events: none; }
.ij-pay { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; font: 800 12px/1 var(--font-ui); letter-spacing: .08em; padding: 5px 10px; border-radius: 99px; color: #04121c; background: linear-gradient(180deg, #d6f3ff, #3fa6d8); }
@keyframes ijIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
#ijPanel { width: 700px; }
body.mobile .pz { width: 860px; padding: 22px 26px; border-radius: 26px; }
body.mobile #ijPanel { width: 1000px; }
body.portrait .pz, body.portrait #ijPanel { width: 860px; }
:is(body.mobile, body.portrait) .pz-head > b { font-size: 36px; }
:is(body.mobile, body.portrait) .pz-head > span { font-size: 21px; }
:is(body.mobile, body.portrait) .pz-time { font-size: 32px; }
:is(body.mobile, body.portrait) .pz-bar { height: 8px; }
:is(body.mobile, body.portrait) .pz-mini { min-width: 240px; padding: 12px 18px; }
:is(body.mobile, body.portrait) .pz-mini b { font-size: 22px; max-width: 300px; }
:is(body.mobile, body.portrait) .pz-mini em { font-size: 40px; }
:is(body.mobile, body.portrait) .pz-mini em small { font-size: 20px; }
:is(body.mobile, body.portrait) .bz-gem i { width: 46px; height: 58px; }
:is(body.mobile, body.portrait) .bz-row .btn { width: 76px; height: 68px; font-size: 34px; }
:is(body.mobile, body.portrait) .bz-n { font-size: 46px; min-width: 90px; }
:is(body.mobile, body.portrait) .bz-res { font-size: 22px; }
:is(body.mobile, body.portrait) .pz-btns .btn { font-size: 24px; padding: 18px 30px; }
:is(body.mobile, body.portrait) .ij-q { font-size: 21px; }
:is(body.mobile, body.portrait) .ij-c, :is(body.mobile, body.portrait) .ij-c .card { width: 182px; height: 255px; }
:is(body.mobile, body.portrait) .ij-pay { font-size: 18px; bottom: -16px; }
body.portrait .pz { top: calc(var(--ph) / 2); }
#over.ffa-over .stats { width: 100%; }
.ffa-places { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.ffa-places li { display: grid; grid-template-columns: 58px 46px 1fr auto; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; border-radius: 12px; text-align: left;
background: rgba(10, 6, 22, .6); border: 1px solid rgba(232, 186, 90, .18); border-left: 4px solid var(--sc); animation: ffaRow .45s cubic-bezier(.2, .8, .3, 1) both; }
.ffa-places li:nth-child(2) { animation-delay: .08s; } .ffa-places li:nth-child(3) { animation-delay: .16s; } .ffa-places li:nth-child(4) { animation-delay: .24s; } .ffa-places li:nth-child(5) { animation-delay: .32s; }
@keyframes ffaRow { from { opacity: 0; transform: translateX(-20px); } }
.ffa-places li.first { background: linear-gradient(90deg, rgba(90, 60, 10, .55), rgba(10, 6, 22, .6)); border-color: rgba(242, 193, 78, .6); }
.ffa-places li.me { box-shadow: 0 0 0 1px rgba(255, 231, 160, .7), 0 0 18px rgba(242, 193, 78, .25); }
.fpl-n { font: 900 22px/1 var(--font-title); color: #fff4d6; text-align: center; }
.ffa-places li.first .fpl-n { color: var(--gold-hi, #ffe08a); }
.fpl-av { width: 46px; height: 46px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 2px var(--sc); }
.fpl-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fpl-t b { font: 800 17px/1.1 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpl-t em { font: 600 12px/1 var(--font-ui); color: var(--ink-dim, #b9a9d8); font-style: normal; letter-spacing: .06em; }
.fpl-crown .ico { width: 26px; height: 26px; }
body.mobile .ffa-places li { grid-template-columns: 80px 62px 1fr auto; padding: 8px 18px 8px 10px; }
body.mobile .fpl-n { font-size: 30px; } body.mobile .fpl-av { width: 62px; height: 62px; }
body.mobile .fpl-t b { font-size: 24px; } body.mobile .fpl-t em { font-size: 16px; }
body.mobile .ffa-places { gap: 8px; max-width: 760px; }
body.mobile #over.ffa-over .ov-left { display: none; }
body.portrait .ffa-places { max-width: none; }
body.portrait .ffa-places li { grid-template-columns: 90px 70px 1fr auto; padding: 10px 20px 10px 12px; }
body.portrait .fpl-n { font-size: 34px; } body.portrait .fpl-av { width: 70px; height: 70px; }
body.portrait .fpl-t b { font-size: 28px; } body.portrait .fpl-t em { font-size: 19px; }
body.portrait #over.ffa-over .ov-left { display: none; }
body.portrait #over.ffa-over .big { font-size: 80px; }
.modesheet .modes:has(#mFFA) { grid-template-columns: repeat(3, 1fr); }
.modesheet #mFFA { grid-column: 1 / -1; height: 132px; background-position: var(--pos, 50% 22%); }
.modesheet #mFFA::before { background: linear-gradient(90deg, rgba(8, 4, 18, .94) 0%, rgba(8, 4, 18, .7) 45%, rgba(8, 4, 18, .1) 100%); }
.modesheet #mFFA .mt-ic { top: 50%; margin-top: -25px; }
.modesheet #mFFA .mt-txt { left: 124px; bottom: auto; top: 50%; transform: translateY(-50%); }
#sheet .box.modesheet:has(#mFFA) .modes { margin-bottom: 14px; }
body.portrait .modesheet .modes:has(#mFFA) .mode { height: 206px; }
body.portrait .modesheet #mFFA .mt-ic { top: 26px; margin-top: 0; }
body.portrait .modesheet #mFFA .mt-txt { left: 28px; top: auto; bottom: 26px; transform: none; }
body.portrait .modesheet #mFFA::before { background: linear-gradient(90deg, rgba(8, 4, 18, .92) 0%, rgba(8, 4, 18, .55) 55%, rgba(8, 4, 18, .15) 100%), linear-gradient(0deg, rgba(8, 4, 18, .7), transparent 50%); }
#sheet .box.ffasheet { width: 1100px; }
.ffasheet .ffa-lead { color: var(--ink-dim, #b9a9d8); margin: 4px 0 0; font-size: 15px; }
.ffa-modes { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin: 18px 0 16px; }
.ffa-card { position: relative; min-height: 330px; border-radius: 16px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ffa-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 4, 18, .15) 0%, rgba(8, 4, 18, .55) 38%, rgba(8, 4, 18, .96) 78%); }
.ffa-card > * { position: relative; }
.ffa-card .mt-tag { position: absolute; right: 14px; top: 14px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px;
color: var(--gold-hi, #ffe08a); background: rgba(10, 6, 22, .72); border: 1px solid rgba(232, 186, 90, .45); }
.ffa-card .mt-lock { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffd9c8; padding: 8px 12px; border-radius: 99px; background: rgba(10, 6, 22, .82); border: 1px solid rgba(255, 150, 120, .4); }
.ffa-card .mt-lock .ico { width: 14px; height: 14px; }
.ffa-card.off { background-blend-mode: luminosity; }
.ffa-card.off .fc-txt { opacity: .6; }
.fc-txt { display: flex; flex-direction: column; gap: 6px; }
.fc-txt b { font: 800 28px/1.05 var(--font-title); letter-spacing: .06em; color: #fff4d6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.fc-txt span { font-size: 14px; color: #e4d8f5; line-height: 1.35; }
.ffa-count { display: flex; gap: 8px; }
.ffa-count button { flex: 1; appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px;
background: rgba(10, 6, 22, .7); border: 1px solid rgba(232, 186, 90, .3); color: var(--ink); transition: background .2s, border-color .2s, transform .2s; }
.ffa-count button b { font: 900 26px/1 var(--font-title); }
.ffa-count button span { font: 700 10px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim, #b9a9d8); }
.ffa-count button.on { background: linear-gradient(180deg, rgba(242, 193, 78, .35), rgba(120, 70, 10, .45)); border-color: var(--gold-1, #f2c14e); transform: translateY(-2px); }
.ffa-count button.on b { color: var(--gold-hi, #ffe08a); }
.ffa-card .btn { justify-content: center; }
.ffa-join { display: flex; flex-direction: column; gap: 8px; }
.ffa-join .fj-row { display: flex; gap: 8px; }
.ffa-join .codein { flex: 1; min-width: 0; width: auto; font-size: 18px; padding: 8px 10px; letter-spacing: .3em; text-align: center; }
body.portrait #sheet .box.ffasheet { width: 860px; }
body.portrait .ffasheet .ffa-lead { font-size: 22px; }
body.portrait .ffa-modes { grid-template-columns: 1fr; gap: 16px; }
body.portrait .ffa-card { min-height: 0; padding: 22px; gap: 16px; }
body.portrait .ffa-card:first-child { min-height: 380px; }
body.portrait .ffa-card:not(:first-child) { min-height: 250px; }
body.portrait .fc-txt b { font-size: 44px; } body.portrait .fc-txt span { font-size: 22px; }
body.portrait .ffa-card .mt-tag, body.portrait .ffa-card .mt-lock { font-size: 17px; padding: 10px 14px; }
body.portrait .ffa-count button { padding: 14px 0; } body.portrait .ffa-count button b { font-size: 40px; } body.portrait .ffa-count button span { font-size: 15px; }
body.portrait .ffa-card .btn { font-size: 24px; padding: 18px 20px; }
body.portrait .ffa-join .codein { font-size: 26px; padding: 14px; }
body.portrait .ffasheet .modesub { min-height: 100px; }
.ffa-seats { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; }
.ffa-seats i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(232, 186, 90, .5); background: rgba(10, 6, 22, .6); transition: background .3s, box-shadow .3s; }
.ffa-seats i.on { background: radial-gradient(circle at 40% 35%, #ffe7a0, #e0a53a 60%, #6a4200); box-shadow: 0 0 14px rgba(242, 193, 78, .6); }
.ffalobby { text-align: center; }
.lb-code { display: inline-flex; align-items: center; gap: 14px; margin: 10px auto 4px; padding: 8px 10px 8px 18px; border-radius: 14px; background: rgba(10, 6, 22, .6); border: 1px solid rgba(232, 186, 90, .35); }
.lb-code span { font: 800 11px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
.lb-code b { font: 900 34px/1 var(--font-title); letter-spacing: .3em; color: #fff4d6; }
.lb-seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0 12px; }
.lb-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: rgba(10, 6, 22, .6);
border: 1px solid rgba(232, 186, 90, .22); border-top: 4px solid var(--sc, rgba(232, 186, 90, .2)); animation: ffaIn .3s ease-out; }
.lb-seat.empty { border-style: dashed; opacity: .6; border-top-width: 1px; }
.lb-av { width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .06) center / cover; box-shadow: 0 0 0 2px var(--sc, rgba(255, 255, 255, .15)); display: grid; place-items: center; }
.lb-av.bot { font: 900 22px/1 var(--font-title); color: #d6f3ff; background: radial-gradient(circle, #2d5a7e, #0b1a30); }
.lb-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.lb-t b { font: 800 15px/1.15 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-t em { font: 600 11.5px/1.2 var(--font-ui); font-style: normal; color: var(--ink-dim, #b9a9d8); }
.lb-kick { font-size: 11px !important; padding: 5px 8px !important; }
.lb-host { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; font-weight: 700; color: #e4d8f5; }
.lb-step { display: inline-flex; align-items: center; gap: 10px; }
.lb-step b { font: 900 24px/1 var(--font-title); min-width: 26px; }
.lb-step .btn { width: 38px; height: 34px; padding: 0; font-size: 20px; }
body.portrait .lb-seats { grid-template-columns: 1fr; gap: 12px; }
body.portrait .lb-seat { flex-direction: row; padding: 14px 18px; text-align: left; }
body.portrait .lb-av { width: 88px; height: 88px; flex: none; }
body.portrait .lb-t { flex: 1; } body.portrait .lb-t b { font-size: 28px; } body.portrait .lb-t em { font-size: 19px; }
body.portrait .lb-code b { font-size: 52px; } body.portrait .lb-code span { font-size: 16px; }
body.portrait .lb-host { font-size: 22px; } body.portrait .lb-step b { font-size: 36px; } body.portrait .lb-step .btn { width: 64px; height: 56px; font-size: 30px; }
body.portrait .ffa-seats i { width: 44px; height: 44px; }
body.portrait .lb-kick { font-size: 17px !important; padding: 10px 14px !important; }
@media (prefers-reduced-motion: reduce) {
.fp, .fp-shard, .bp-shard, .fp.def, #game.ffa .bplate.def, .ffa-places li, .lb-seat, .ij-c, .pz { animation: none !important; transition: none !important; }
}
body.fx-low .fp-shard, body.fx-low #game .bp-shard, body.fx-low .fp.def, body.fx-low #game.ffa .bplate.def { animation: none; }
#rules .rsub { margin: 20px 0 8px; font: 800 15px/1.2 var(--font-title); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#rules .rtab { width: 100%; margin: 16px 0 6px; border-collapse: collapse; font-size: 14px; }
#rules .rtab th, #rules .rtab td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(232, 186, 90, .16); }
#rules .rtab th { font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#rules .rtab td:first-child { color: #fff4d6; font-weight: 700; }
#rules .rtab td:not(:first-child) { color: #dcd0f0; }
body.portrait #rules .rsub { font-size: 24px; }
body.portrait #rules .rtab { font-size: 21px; }
body.portrait #rules .rtab th { font-size: 16px; }
.ffalobby [hidden], .ffasheet [hidden] { display: none !important; }
.modesheet .modes:has(#mFFA) .mode:not(#mFFA) { height: 252px; }
.modesheet .modes:has(#mFFA) #mFFA { height: 112px; }
body.portrait .modesheet .modes:has(#mFFA) .mode:not(#mFFA), body.portrait .modesheet .modes:has(#mFFA) #mFFA { height: 206px; }
body.portrait .ffa-card .mt-lock { left: auto; right: 22px; top: 22px; transform: none; }
body.mobile:not(.portrait) .ffasheet .ffa-lead { font-size: 20px; }
body.mobile:not(.portrait) .ffa-card { min-height: 360px; }
body.mobile:not(.portrait) .fc-txt b { font-size: 34px; }
body.mobile:not(.portrait) .fc-txt span { font-size: 19px; }
body.mobile:not(.portrait) .ffa-count button b { font-size: 32px; } body.mobile:not(.portrait) .ffa-count button span { font-size: 13px; }
body.mobile:not(.portrait) .ffa-card .btn { font-size: 20px; padding: 14px 16px; }
body.mobile:not(.portrait) .ffa-join .codein { font-size: 22px; }
body.mobile:not(.portrait) .ffa-card .mt-tag, body.mobile:not(.portrait) .ffa-card .mt-lock { font-size: 14px; }
body.mobile:not(.portrait) .lb-t b { font-size: 21px; } body.mobile:not(.portrait) .lb-t em { font-size: 16px; }
body.mobile:not(.portrait) .lb-av { width: 92px; height: 92px; }
body.mobile:not(.portrait) .lb-code b { font-size: 46px; } body.mobile:not(.portrait) .lb-code span { font-size: 15px; }
body.mobile:not(.portrait) .lb-host, body.mobile:not(.portrait) .ffalobby .winfo { font-size: 20px; }
body.mobile:not(.portrait) .lb-step b { font-size: 32px; } body.mobile:not(.portrait) .lb-step .btn { width: 58px; height: 50px; font-size: 26px; }
body.mobile:not(.portrait) .lb-kick { font-size: 15px !important; padding: 8px 12px !important; }
body.mobile:not(.portrait) .ffalobby .actions .btn { font-size: 22px; padding: 16px 26px; }
body.mobile:not(.portrait) .ffa-seats i { width: 40px; height: 40px; }
body.portrait #ffaIntro .fi-cols { top: 200px; }
body.portrait #ffaIntro .fi-mid { top: 0; height: 200px; transform: none; align-content: center; animation-name: ffaMidP; }
@keyframes ffaMidP { from { opacity: 0; transform: scaleX(.2); } }
#rules .tgrid span strong { color: #fff4d6; font-weight: 700; }
#rules .steps li strong { color: #fff4d6; font-weight: 700; }
#over.ffa-noxp .ov-xp { display: none; }
.fp.ally { border-color: rgba(98, 214, 143, .7); }
.fp.ally::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(98, 214, 143, .45); }
.fp.ally .fp-tag:not(:empty) { background: linear-gradient(180deg, #c9f7da, #3aa86a); color: #04140a; }
.fp.ally.def .fp-tag { background: linear-gradient(180deg, #ff9c92, #b3231a); color: #fff; }
.fp.rival { border-color: rgba(255, 120, 90, .45); }
#teamBar { position: absolute; left: 862px; top: 400px; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; pointer-events: none;
padding: 6px 12px; border-radius: 99px; background: rgba(8, 4, 18, .82); border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); white-space: nowrap; }
#teamBar > span:not(.tb-vs) { display: flex; align-items: center; gap: 6px; }
#teamBar em { font: 800 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(240, 230, 210, .8); }
#teamBar b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font: 900 18px/1 var(--font-title); color: #fff; }
#teamBar .tb-us b { background: linear-gradient(180deg, #5fe39a, #1f7a48); box-shadow: 0 0 12px rgba(98, 214, 143, .45); }
#teamBar .tb-them b { background: linear-gradient(180deg, #ff8a72, #a8261a); box-shadow: 0 0 12px rgba(255, 106, 90, .45); }
#teamBar .tb-vs { font: 800 11px/1 var(--font-ui); color: var(--gold-hi, #f2d896); opacity: .8; }
#teamBar.low-us .tb-us b, #teamBar.low-them .tb-them b { animation: lcDanger 1.1s ease-in-out infinite; }
body.mobile #teamBar { left: 880px; padding: 8px 16px; gap: 12px; }
body.mobile #teamBar em { font-size: 15px; }
body.mobile #teamBar b { min-width: 44px; height: 44px; font-size: 26px; }
body.portrait #teamBar { left: 150px; top: calc(var(--ph) / 2); }
body.lite #teamBar { box-shadow: none; }
body.lite #teamBar b { box-shadow: none; }
body.lite #teamBar.low-us .tb-us b, body.lite #teamBar.low-them .tb-them b { animation: none; outline: 2px solid #ffd36e; }
#promptBar .pbtns .btn.ally { border-color: rgba(98, 214, 143, .8); color: #c9f7da; background: rgba(20, 60, 36, .85); min-height: 40px; }
#promptBar.allyb { flex-wrap: wrap; justify-content: center; max-width: 92%; }
#promptBar.allyb .ptxt { flex: 1 1 100%; max-width: none; }
#promptBar.allyb .pbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* css/onboarding.css */
.wg, .fi, .fd { --u: 1px; }
body.mobile .wg, body.mobile .fi, body.mobile .fd { --u: 1.55px; }
body.portrait .wg, body.portrait .fi, body.portrait .fd { --u: 1.6px; }
body.portrait.mobile .wg, body.portrait.mobile .fi, body.portrait.mobile .fd { --u: 1.75px; }
.wg { position: absolute; inset: 0; z-index: 1100; overflow: hidden; background: #07040f; color: var(--ink); font-family: var(--font-ui);
animation: wgIn .5s ease-out both; }
.wg.out { animation: wgOut .45s ease-in both; pointer-events: none; }
@keyframes wgIn { from { opacity: 0; } }
@keyframes wgOut { to { opacity: 0; transform: scale(1.02); } }
.wg-bg { position: absolute; inset: 0; pointer-events: none; }
.wg-art { position: absolute; inset: -6%; background-size: cover; background-position: center 35%; opacity: 0; transition: opacity 2.4s ease;
filter: saturate(1.1) brightness(.46) blur(2px); animation: wgDrift 34s ease-in-out infinite alternate; }
.wg-art.on { opacity: 1; }
.wg-art:nth-child(2n) { animation-direction: alternate-reverse; }
@keyframes wgDrift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2.4%, -1.8%); } }
.wg-glow { position: absolute; inset: 0;
background: radial-gradient(ellipse 38% 55% at 26% 46%, rgba(150, 80, 255, .38), transparent 70%),
radial-gradient(ellipse 30% 40% at 74% 52%, rgba(242, 193, 78, .10), transparent 70%); animation: wgBreath 7s ease-in-out infinite; }
@keyframes wgBreath { 50% { opacity: .65; } }
.wg-shard { position: absolute; left: 25%; top: 46%; width: calc(var(--u) * 560); height: calc(var(--u) * 560); transform: translate(-50%, -50%); }
.wg-shard i { position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 8%, rgba(190, 140, 255, .16) 10%, transparent 13% 30%, rgba(242, 193, 78, .12) 32%, transparent 35% 58%, rgba(160, 110, 255, .14) 61%, transparent 64% 82%, rgba(255, 230, 170, .10) 84%, transparent 87%);
-webkit-mask: radial-gradient(circle, #000 12%, transparent 70%); mask: radial-gradient(circle, #000 12%, transparent 70%); animation: wgSpin 60s linear infinite; }
.wg-shard i:nth-child(2) { animation-duration: 90s; animation-direction: reverse; opacity: .7; transform: scale(1.3); }
.wg-shard i:nth-child(3) { inset: 34%; background: radial-gradient(circle, rgba(220, 180, 255, .55), rgba(140, 80, 255, .18) 45%, transparent 70%); -webkit-mask: none; mask: none; animation: wgPulse 4.5s ease-in-out infinite; }
@keyframes wgSpin { to { transform: rotate(360deg); } }
@keyframes wgPulse { 50% { transform: scale(1.25); opacity: .6; } }
.wg-dust, .fi .wg-dust { position: absolute; inset: 0; opacity: .55;
background-image: radial-gradient(1.5px 1.5px at 12% 30%, #ffe6a8, transparent), radial-gradient(1px 1px at 72% 18%, #fff, transparent),
radial-gradient(1.5px 1.5px at 44% 72%, #d9c2ff, transparent), radial-gradient(1px 1px at 88% 64%, #ffe6a8, transparent),
radial-gradient(1.2px 1.2px at 28% 86%, #fff, transparent), radial-gradient(1px 1px at 58% 44%, #ffe6a8, transparent);
background-size: 620px 520px; animation: afDust 60s linear infinite; }
.wg-pages i { position: absolute; bottom: -12%; left: calc(6% + var(--i) * 13%); width: calc(var(--u) * 26); height: calc(var(--u) * 34); border-radius: 3px;
background: linear-gradient(160deg, rgba(255, 244, 214, .5), rgba(230, 200, 150, .18)); box-shadow: 0 0 calc(var(--u) * 14) rgba(242, 193, 78, .25);
opacity: 0; animation: wgPage calc(16s + var(--i) * 2.3s) linear calc(var(--i) * -3.1s) infinite; }
.wg-pages i:nth-child(odd) { width: calc(var(--u) * 18); height: calc(var(--u) * 24); }
@keyframes wgPage { 0% { transform: translateY(0) rotate(-20deg); opacity: 0; } 10% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate(calc(var(--u) * 120), calc(var(--u) * -1100)) rotate(260deg); opacity: 0; } }
.wg-veil { position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 30%, rgba(6, 3, 14, .72) 100%), linear-gradient(0deg, rgba(6, 3, 14, .85), transparent 30%, transparent 75%, rgba(6, 3, 14, .6)); }
.wg.still .wg-art, .wg.still .wg-shard i, .wg.still .wg-pages, .wg.still .wg-glow, .fi.still .fi-art { animation: none; }
.wg.still .wg-pages { display: none; }
.wg-main { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.wg-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); text-align: center; padding: 0 calc(var(--u) * 20); }
.wg-logo { width: min(calc(var(--u) * 400), 680px); aspect-ratio: 1; mix-blend-mode: screen; animation: wgLogo 7s ease-in-out infinite; user-select: none; }
@keyframes wgLogo { 50% { transform: translateY(calc(var(--u) * -8)); } }
.wg-tag { margin: calc(var(--u) * -18) 0 0; font: 400 calc(var(--u) * 19) / 1.5 var(--font-card); color: #e9dcff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); letter-spacing: .02em; }
.wg-tag b { font-weight: 700; color: var(--gold-1); }
.wg-panel { display: flex; align-items: center; justify-content: center; height: 100%; padding: calc(var(--u) * 20) 0; }
.wg-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 12); text-align: center; font-size: calc(var(--u) * 11.5); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 220, 255, .45); pointer-events: none; }
body.portrait .wg-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; padding-top: calc(var(--u) * 20); }
body.portrait .wg-shard { left: 50%; top: 17%; }
body.portrait .wg-glow { background: radial-gradient(ellipse 60% 30% at 50% 18%, rgba(150, 80, 255, .38), transparent 70%), radial-gradient(ellipse 50% 30% at 50% 70%, rgba(242, 193, 78, .08), transparent 70%); }
body.portrait .wg-logo { width: min(calc(var(--u) * 200), 420px); }
body.portrait .wg-tag { font-size: calc(var(--u) * 15); margin-top: calc(var(--u) * -12); }
body.portrait .wg-panel { align-items: flex-start; padding: calc(var(--u) * 14) 0 calc(var(--u) * 40); }
.wg-card { position: relative; width: calc(var(--u) * 540); max-width: calc(100% - 40px); max-height: 100%; padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 28);
border-radius: calc(var(--u) * 22); border: 1px solid rgba(232, 186, 90, .45);
background: linear-gradient(180deg, rgba(34, 18, 66, .88), rgba(14, 8, 28, .92)); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 60px rgba(168, 107, 255, .18);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wg-card::before { content: ""; position: absolute; inset: calc(var(--u) * 7); border-radius: calc(var(--u) * 16); pointer-events: none; border: 1px solid rgba(232, 186, 90, .14); }
.wg-card.in { animation: wgCard .55s var(--ease-back, cubic-bezier(.2, .9, .3, 1.35)) both; }
@keyframes wgCard { from { opacity: 0; transform: translateY(calc(var(--u) * 18)) scale(.97); } }
body.portrait .wg-card { width: calc(var(--u) * 470); }
body.portrait .wg-card.coding .wg-head p { display: none; }
.wg-head { text-align: left; margin-bottom: calc(var(--u) * 4); }
.wg-head .af-eyebrow { font-size: calc(var(--u) * 11.5); letter-spacing: .26em; }
.wg-head h2 { margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); font: 800 calc(var(--u) * 30) / 1.1 var(--font-title); letter-spacing: .05em;
background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 40%, var(--gold-2) 70%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.wg-head p { margin: 0; font-size: calc(var(--u) * 14.5); line-height: 1.45; color: var(--ink-dim); }
.wg-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 18); border-radius: 99px;
background: rgba(6, 3, 14, .6); border: 1px solid rgba(190, 160, 255, .2); }
.wg-tabs button { position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; padding: calc(var(--u) * 10) calc(var(--u) * 8); border-radius: 99px;
font: 800 calc(var(--u) * 13) / 1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); transition: color .25s; }
.wg-tabs button.on { color: #2b1600; }
.wg-tabpill { position: absolute; top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); left: calc(var(--u) * 4); width: calc(50% - var(--u) * 4); border-radius: 99px;
background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); box-shadow: 0 0 calc(var(--u) * 18) rgba(242, 193, 78, .35);
transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .35s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.wg-form { display: flex; flex-direction: column; gap: calc(var(--u) * 13); }
.wg-form[hidden] { display: none; }
.wg-form.in { animation: wgRise .4s var(--ease-out, ease-out) both; }
@keyframes wgRise { from { opacity: 0; transform: translateY(calc(var(--u) * 10)); } }
.wg-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.wg-fld { display: flex; flex-direction: column; gap: calc(var(--u) * 6); min-width: 0; }
.wg-fld[hidden] { display: none; }
.wg-fld > span { font: 800 calc(var(--u) * 10.5) / 1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.wg-fld input { width: 100%; height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 15); border-radius: calc(var(--u) * 11); font: 500 calc(var(--u) * 17) var(--font-ui) !important;
color: #fff6e6; background: rgba(6, 3, 14, .62); border: 1px solid rgba(190, 160, 255, .28); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.wg-fld input::placeholder { color: rgba(183, 168, 214, .55); }
.wg-fld input:focus { border-color: var(--gold-2); background: rgba(14, 8, 28, .8); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(242, 193, 78, .18), 0 0 calc(var(--u) * 18) rgba(242, 193, 78, .2); }
.wg-fld input.bad { border-color: #ff7a6b; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(255, 90, 79, .18); }
.wg-hint { font-style: normal; font-size: calc(var(--u) * 12.5); color: rgba(183, 168, 214, .8); line-height: 1.35; }
#wgCode { text-transform: uppercase; letter-spacing: .12em; }
#wgCode::placeholder { text-transform: none; letter-spacing: 0; }
.wg-code { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.wg-codebtn { appearance: none; display: flex; align-items: center; gap: calc(var(--u) * 10); width: 100%; cursor: pointer; text-align: left;
padding: calc(var(--u) * 11) calc(var(--u) * 14); border-radius: calc(var(--u) * 11); border: 1px dashed rgba(232, 186, 90, .42); background: rgba(242, 193, 78, .05);
font: 700 calc(var(--u) * 14.5) / 1.2 var(--font-ui); color: #fff0c8; transition: background .2s, border-color .2s; }
.wg-codebtn:hover { background: rgba(242, 193, 78, .1); border-color: rgba(232, 186, 90, .7); }
.wg-codebtn .ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }
.wg-codebtn span { flex: 1; }
.wg-codebtn em { font: 800 calc(var(--u) * 10) / 1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--ink-dim);
padding: calc(var(--u) * 5) calc(var(--u) * 9); border-radius: 99px; border: 1px solid rgba(190, 160, 255, .25); }
.wg-codebtn .ico-chevron { transform: rotate(90deg); transition: transform .3s; color: var(--ink-dim); }
.wg-codebtn.open { border-style: solid; }
.wg-codebtn.open .ico-chevron { transform: rotate(-90deg); }
.wg-codefld:not([hidden]) { animation: wgRise .35s var(--ease-out, ease-out) both; }
body.mobile:not(.portrait) .wg-card.coding .wg-code { flex-direction: row; align-items: stretch; }
body.mobile:not(.portrait) .wg-card.coding .wg-codebtn { width: auto; flex: none; }
body.mobile:not(.portrait) .wg-card.coding .wg-codebtn span, body.mobile:not(.portrait) .wg-card.coding .wg-codebtn em { display: none; }
body.mobile:not(.portrait) .wg-card.coding .wg-codefld { flex: 1; }
body.mobile:not(.portrait) .wg-card.coding .wg-codefld > span, body.mobile:not(.portrait) .wg-card.coding .wg-codefld .wg-hint { display: none; }
body.mobile:not(.portrait) .wg-card.coding .wg-codefld input { height: 100%; min-height: calc(var(--u) * 46); }
body.mobile:not(.portrait) .wg-card.coding .wg-head p { display: none; }
.wg-err { min-height: 0; font-size: calc(var(--u) * 14); line-height: 1.4; color: #ffb3a8; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 4) calc(var(--u) * 12); }
.wg-err:empty { display: none; }
.wg-link { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: 700 calc(var(--u) * 14) var(--font-ui); color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px; }
.wg .btn { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 15) calc(var(--u) * 26); border-radius: calc(var(--u) * 12); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.wg .btn .ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.wg-submit { width: 100%; margin-top: calc(var(--u) * 2); }
.wg-form.busy .wg-submit { animation: afPulseGold 1.4s ease-in-out infinite; }
.wg-form.shake { animation: wgShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes wgShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.wg-wait { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 30) 0; font: 700 calc(var(--u) * 17) var(--font-title); letter-spacing: .12em; color: #f0e2ff; }
.wg-wait .spinner { width: calc(var(--u) * 46); height: calc(var(--u) * 46); margin: 0; }
.wg-status { display: flex; align-items: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 16) 0; padding: calc(var(--u) * 11) calc(var(--u) * 14); border-radius: calc(var(--u) * 11);
background: rgba(6, 3, 14, .55); border: 1px solid rgba(190, 160, 255, .18); font-size: calc(var(--u) * 14); color: var(--ink-dim); }
.wg-dot { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #ffb35a; box-shadow: 0 0 calc(var(--u) * 10) #ffb35a; animation: wgPulse 1.6s ease-in-out infinite; flex: none; }
.wg-acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); }
.wg-acts .btn { flex: 1 1 auto; }
.wg-offer { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.wg-seal { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; display: grid; place-items: center; margin-bottom: calc(var(--u) * 2);
background: radial-gradient(circle, rgba(242, 193, 78, .28), rgba(242, 193, 78, .04) 70%); border: 1px solid rgba(242, 193, 78, .55); box-shadow: 0 0 calc(var(--u) * 28) rgba(242, 193, 78, .35); }
.wg-seal .ico { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.wg-note { margin: 0; font-size: calc(var(--u) * 13); color: rgba(183, 168, 214, .8); }
.fi { position: absolute; inset: 0; z-index: 1150; overflow: hidden; background: #06030d; color: #fff4d6; cursor: pointer; animation: wgIn .6s ease-out both; }
.fi.out { animation: wgOut .45s ease-in both; pointer-events: none; }
.fi-bg { position: absolute; inset: 0; pointer-events: none; }
.fi-art { position: absolute; inset: -5%; background-size: cover; background-position: center 30%; filter: brightness(.42) saturate(1.1); animation: wgDrift 26s ease-in-out infinite alternate; }
.fi-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10, 5, 22, .25), rgba(6, 3, 14, .9) 100%), linear-gradient(0deg, rgba(6, 3, 14, .8), transparent 40%); }
.fi.at-last .fi-art { filter: brightness(.3) saturate(1.1) blur(2px); transition: filter 1s; }
.fi-stage { position: absolute; inset: calc(var(--u) * 50) calc(var(--u) * 40) calc(var(--u) * 70); }
.fi-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 14); text-align: center;
opacity: 0; visibility: hidden; transform: translateY(calc(var(--u) * 24)); transition: opacity .7s ease, transform .9s var(--ease-out, ease-out), visibility 0s .7s; }
.fi-panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s ease .15s, transform 1s var(--ease-out, ease-out) .15s, visibility 0s; }
.fi-panel.past { transform: translateY(calc(var(--u) * -24)); }
.fi-eyebrow { font: 800 calc(var(--u) * 14) / 1 var(--font-ui); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-1); opacity: .9; }
.fi-eyebrow.holo { background: linear-gradient(110deg, #ff9de2, #9ad8ff 30%, #fff4a8 55%, #b7ffcf 75%, #ff9de2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lcfHolo 4s linear infinite; }
.fi-name { margin: 0; font: 900 calc(var(--u) * 118) / 1 var(--font-title); letter-spacing: .04em;
background: linear-gradient(180deg, #fff6d8 0%, var(--gold-1) 40%, var(--gold-2) 70%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 calc(var(--u) * 30) rgba(242, 193, 78, .35)); }
.fi-panel.on .fi-name { animation: fiName 1.4s var(--ease-out, ease-out) .2s both; }
@keyframes fiName { from { opacity: 0; letter-spacing: .4em; filter: blur(8px); } }
.fi-line { margin: 0; max-width: calc(var(--u) * 900); font: 400 calc(var(--u) * 32) / 1.4 var(--font-card); color: #f3eaff; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.fi-line.big { font-size: calc(var(--u) * 38); }
.fi-line.soft { font-style: italic; color: #d8c8f2; font-size: calc(var(--u) * 27); }
.fi-panel.on .fi-line { animation: wgRise 1s var(--ease-out, ease-out) both; }
.fi-panel.on .fi-line + .fi-line { animation-delay: .9s; }
.fi-duo { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 34); perspective: 1400px; }
.fi-full { position: relative; width: calc(var(--u) * 240); height: calc(var(--u) * 360); }
.fi-full .lc { width: 100%; height: 100%; box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(255, 157, 226, .45); }
.fi-card { position: relative; width: calc(var(--u) * 222); height: calc(var(--u) * 311); }
.fi-card .card { position: relative; width: 100%; height: 100%; }
.fi-card::before { content: ""; position: absolute; inset: calc(var(--u) * -50); border-radius: 50%; z-index: -1; filter: blur(24px);
background: conic-gradient(from var(--ang, 0deg), rgba(255, 157, 226, 0), rgba(255, 157, 226, .45), rgba(154, 216, 255, .45), rgba(255, 244, 168, .45), rgba(183, 255, 207, .45), rgba(255, 157, 226, 0)); animation: spinAng 6s linear infinite; }
.fi-panel.on .fi-full { animation: prFull 1s cubic-bezier(.2, .9, .3, 1.15) .3s both; }
.fi-panel.on .fi-card { animation: prSlide .8s cubic-bezier(.2, .9, .3, 1.1) 1.1s both; }
.fi-h { margin: calc(var(--u) * 6) 0 0; font: 800 calc(var(--u) * 28) / 1.2 var(--font-title); letter-spacing: .05em; color: #fff4d6; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.fi-sub { margin: 0; max-width: calc(var(--u) * 640); font-size: calc(var(--u) * 16); line-height: 1.45; color: #e4d9f7; }
.fi-packs { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 16); border-radius: 99px; background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .35); color: #fff0c8; }
.fi-packs .ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }
.fi-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 18); }
.fi .btn { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 15) calc(var(--u) * 28); border-radius: calc(var(--u) * 12); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.fi .btn .ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.fi-panel.on .fi-acts { animation: wgRise .8s var(--ease-out, ease-out) .9s both; }
.fi-skip { position: absolute; top: calc(var(--u) * 18); right: calc(var(--u) * 20); z-index: 3; font-size: calc(var(--u) * 13) !important; padding: calc(var(--u) * 9) calc(var(--u) * 16) !important; }
.fi-skip .ico { width: calc(var(--u) * 14) !important; height: calc(var(--u) * 14) !important; }
.fi.at-last .fi-skip, .fi.at-last .fi-hint { display: none; }
.fi-dots { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 28); display: flex; justify-content: center; gap: calc(var(--u) * 10); pointer-events: none; }
.fi-dots i { width: calc(var(--u) * 26); height: calc(var(--u) * 4); border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .4s; }
.fi-dots i.on { background: var(--gold-1); box-shadow: 0 0 calc(var(--u) * 8) rgba(242, 193, 78, .6); }
.fi-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 44); text-align: center; font-size: calc(var(--u) * 12); letter-spacing: .24em; text-transform: uppercase; color: rgba(233, 220, 255, .5);
pointer-events: none; animation: wgBreath 2.4s ease-in-out infinite; transition: opacity .3s; }
body.portrait .fi-name { font-size: calc(var(--u) * 86); }
body.portrait .fi-line { font-size: calc(var(--u) * 25); max-width: calc(var(--u) * 480); }
body.portrait .fi-line.big { font-size: calc(var(--u) * 29); }
body.portrait .fi-line.soft { font-size: calc(var(--u) * 21); }
body.portrait .fi-duo { flex-direction: column; gap: calc(var(--u) * 16); }
body.portrait .fi-full { width: calc(var(--u) * 200); height: calc(var(--u) * 300); }
body.portrait .fi-card { width: calc(var(--u) * 150); height: calc(var(--u) * 210); }
body.portrait .fi-h { font-size: calc(var(--u) * 21); }
body.portrait .fi-sub { font-size: calc(var(--u) * 14); max-width: calc(var(--u) * 460); }
body.portrait .fi-acts { flex-direction: column; align-items: stretch; width: calc(var(--u) * 380); }
body.mobile:not(.portrait) .fi-full { width: calc(var(--u) * 196); height: calc(var(--u) * 294); }
body.mobile:not(.portrait) .fi-card { width: calc(var(--u) * 180); height: calc(var(--u) * 252); }
body.mobile:not(.portrait) .fi-name { font-size: calc(var(--u) * 96); }
body.mobile:not(.portrait) .fi-line { font-size: calc(var(--u) * 27); }
body.mobile:not(.portrait) .fi-line.big { font-size: calc(var(--u) * 31); }
body.mobile:not(.portrait) .fi-stage { inset: calc(var(--u) * 34) calc(var(--u) * 30) calc(var(--u) * 50); }
body.mobile:not(.portrait) .fi-panel { gap: calc(var(--u) * 8); }
body.mobile:not(.portrait) .fi-h { font-size: calc(var(--u) * 21); }
body.mobile:not(.portrait) .fi-sub { font-size: calc(var(--u) * 13.5); }
body.mobile:not(.portrait) .fi-dots { bottom: calc(var(--u) * 16); }
body.mobile:not(.portrait) .fi-hint { bottom: calc(var(--u) * 26); }
.acctsheet .acct-code { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px;
background: rgba(242, 193, 78, .06); border: 1px dashed rgba(232, 186, 90, .4); text-align: left; }
.acctsheet .acct-code > .ico { width: 26px; height: 26px; grid-row: span 2; align-self: start; margin-top: 2px; }
.acctsheet .acct-code b { display: block; font: 800 15px/1.2 var(--font-title); letter-spacing: .06em; color: #fff4d6; }
.acctsheet .acct-code span { font-size: 13px; color: var(--ink-dim); }
.acctsheet .acct-code.has { grid-template-columns: auto 1fr auto; border-style: solid; }
.acctsheet .acct-code.has > .ico { grid-row: auto; }
.acctsheet .acct-code .ac-row { grid-column: 2; display: flex; gap: 8px; }
.acctsheet .acct-code .ac-row input { flex: 1; min-width: 0; font: 15px var(--font-ui); padding: 10px 12px; border-radius: 10px; text-transform: uppercase; letter-spacing: .1em; }
.acctsheet .acct-code .ac-row input::placeholder { text-transform: none; letter-spacing: 0; }
.acctsheet .acct-code .ac-row input.bad { border-color: #ff7a6b; }
.acctsheet .acct-code .ferr { grid-column: 2; font-size: 13px; color: #ffb3a8; }
.acctsheet .acct-code .ferr:empty { display: none; }
.acctsheet .actions { flex-wrap: wrap; }
body.portrait .acctsheet .acct-code { padding: 22px 24px; gap: 10px 18px; border-radius: 20px; }
body.portrait .acctsheet .acct-code > .ico { width: 38px; height: 38px; }
body.portrait .acctsheet .acct-code b { font-size: 26px; }
body.portrait .acctsheet .acct-code span { font-size: 21px; }
body.portrait .acctsheet .acct-code .ac-row input { font-size: 26px !important; height: 80px; padding: 0 20px; }
body.portrait .acctsheet .acct-code .ferr { font-size: 21px; }
body.mobile:not(.portrait) .acctsheet .acct-code b { font-size: 22px; }
body.mobile:not(.portrait) .acctsheet .acct-code span, body.mobile:not(.portrait) .acctsheet .acct-code .ferr { font-size: 19px; }
body.mobile:not(.portrait) .acctsheet .acct-code .ac-row input { font-size: 22px !important; padding: 14px 16px; }
body.portrait #rules #rtut { flex: none; min-height: 96px; min-width: 96px; padding: 0 22px; font-size: 24px; }
body.portrait #rules #rtut span { display: none; }
body.portrait #rules #rtut .ico { width: 34px; height: 34px; }
body.mobile:not(.portrait) #rules #rtut { font-size: 20px; }
.fd { position: absolute; inset: 0; z-index: 1160; overflow: hidden; background: #06030d; color: #fff4d6; font-family: var(--font-ui); --c: #f2c14e;
container: fd / size; animation: wgIn .5s ease-out both; }
.fd.out { animation: wgOut .45s ease-in both; pointer-events: none; }
.fd-bg { position: absolute; inset: 0; pointer-events: none; }
.fd-art { position: absolute; inset: -5%; background-size: cover; background-position: center 30%; filter: brightness(.3) saturate(1.15) blur(3px);
animation: wgDrift 30s ease-in-out infinite alternate; }
.fd.still .fd-art { animation: none; }
.fd-veil { position: absolute; inset: 0;
background: radial-gradient(ellipse 55% 60% at 50% 55%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
radial-gradient(ellipse 80% 75% at 50% 45%, transparent 35%, rgba(6, 3, 14, .85) 100%), linear-gradient(0deg, rgba(6, 3, 14, .8), transparent 35%); }
.fd-head { position: absolute; top: calc(var(--u) * 24); left: 0; right: 0; text-align: center; pointer-events: none; }
.fd-head h1 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); font: 900 calc(var(--u) * 44) / 1.05 var(--font-title); letter-spacing: .05em;
background: linear-gradient(180deg, #fff6d8, var(--gold-1) 45%, var(--gold-2) 75%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 calc(var(--u) * 24) rgba(242, 193, 78, .25)); }
.fd-head p { margin: 0 auto; max-width: calc(var(--u) * 720); font-size: calc(var(--u) * 16); line-height: 1.4; color: #e4d9f7; }
.fd .fi-eyebrow { font-size: calc(var(--u) * 13); }
.fd .btn { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 14) calc(var(--u) * 26); border-radius: calc(var(--u) * 12); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.fd .btn .ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.fd-later { position: absolute; top: calc(var(--u) * 18); right: calc(var(--u) * 20); z-index: 3; font-size: calc(var(--u) * 13) !important; padding: calc(var(--u) * 9) calc(var(--u) * 16) !important; opacity: .75; }
.fd-later:hover { opacity: 1; }
.fd-body { position: absolute; top: calc(var(--u) * 150); bottom: calc(var(--u) * 36); left: calc(var(--u) * 40); right: calc(var(--u) * 40);
display: grid; grid-template-columns: auto auto minmax(0, calc(var(--u) * 620)); justify-content: center; align-items: center; gap: calc(var(--u) * 44); }
.fd-picks { display: grid; grid-template-columns: repeat(3, calc(var(--u) * 116)); gap: calc(var(--u) * 14) calc(var(--u) * 12); align-content: center; }
.fd-tile { position: relative; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6);
color: #e4d9f7; font: 800 calc(var(--u) * 13) / 1.1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; animation: fdTile .5s var(--ease-out, ease-out) both; }
.fd-tile:nth-child(2) { animation-delay: .05s; } .fd-tile:nth-child(3) { animation-delay: .1s; } .fd-tile:nth-child(4) { animation-delay: .15s; }
.fd-tile:nth-child(5) { animation-delay: .2s; } .fd-tile:nth-child(6) { animation-delay: .3s; }
@keyframes fdTile { from { opacity: 0; transform: translateY(calc(var(--u) * 16)) scale(.94); } }
.fd-face { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: calc(var(--u) * 10); transition: transform .25s var(--ease-out, ease-out), box-shadow .25s, filter .25s;
filter: brightness(.72) saturate(.85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.fd-face .lc { width: 100%; height: 100%; border-radius: calc(var(--u) * 10); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(0, 0, 0, .55); }
.fd-tile:hover .fd-face { filter: brightness(.95); transform: translateY(calc(var(--u) * -3)); }
.fd-tile.on .fd-face { filter: none; transform: translateY(calc(var(--u) * -5)) scale(1.04); box-shadow: 0 0 0 calc(var(--u) * 3) var(--c), 0 0 calc(var(--u) * 26) var(--c); }
.fd-tile.on .fd-tname { color: #fff4d6; }
.fd-tile:focus-visible { outline: none; }
.fd-tile:focus-visible .fd-face { box-shadow: 0 0 0 calc(var(--u) * 3) #fff; }
.fd-tname { white-space: nowrap; }
.fd-tile.secret .fd-face { box-shadow: 0 0 0 calc(var(--u) * 2) var(--gold-1), 0 0 calc(var(--u) * 18) rgba(242, 193, 78, .45); filter: brightness(.85); }
.fd-tile.secret.on .fd-face { box-shadow: 0 0 0 calc(var(--u) * 3) #ffe9a8, 0 0 calc(var(--u) * 34) rgba(242, 193, 78, .8); }
.fd-tile.secret .fd-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 190, .55) 45%, transparent 60%); background-size: 250% 100%; animation: fdSheen 3.6s ease-in-out infinite; }
.fd.still .fd-tile.secret .fd-face::after { animation: none; }
@keyframes fdSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.fd-rib { position: absolute; z-index: 2; top: calc(var(--u) * -8); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: calc(var(--u) * 4) calc(var(--u) * 10);
border-radius: 99px; font: 900 calc(var(--u) * 10.5) / 1 var(--font-ui); letter-spacing: .14em; color: #2b1600;
background: linear-gradient(180deg, #ffe39a, #f0bd4f 55%, #c98a22); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .5), 0 0 calc(var(--u) * 12) rgba(242, 193, 78, .6); }
.fd-tile.secret .fd-tname { color: var(--gold-1); }
.fd-hero { width: calc(var(--u) * 290); aspect-ratio: 2 / 3; perspective: 1200px; }
.fd-hero .lc { width: 100%; height: 100%; border-radius: calc(var(--u) * 16); box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(0, 0, 0, .7), 0 0 calc(var(--u) * 50) color-mix(in srgb, var(--c) 55%, transparent); }
.fd-hero.swap { animation: fdHero .55s var(--ease-back, cubic-bezier(.2, .9, .3, 1.3)) both; }
@keyframes fdHero { from { opacity: 0; transform: rotateY(-18deg) translateX(calc(var(--u) * -20)) scale(.94); } }
.fd.secret-on .fd-hero .lc { box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(0, 0, 0, .7), 0 0 0 calc(var(--u) * 3) var(--gold-1), 0 0 calc(var(--u) * 60) rgba(242, 193, 78, .55); }
.fd-info { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 10); min-width: 0; }
.fd-info.swap > * { animation: wgRise .45s var(--ease-out, ease-out) both; }
.fd-info.swap > :nth-child(2) { animation-delay: .04s; }
.fd-info.swap > :nth-child(3) { animation-delay: .08s; }
.fd-info.swap > :nth-child(4) { animation-delay: .12s; }
.fd-seal { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 99px;
background: rgba(242, 193, 78, .12); border: 1px solid rgba(242, 193, 78, .5); color: #fff0c8; font-size: calc(var(--u) * 14); line-height: 1.3; }
.fd-seal .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; }
.fd-seal b { color: var(--gold-1); }
.fd-lead { display: flex; align-items: center; gap: calc(var(--u) * 10); font: 700 calc(var(--u) * 15) / 1.2 var(--font-ui); color: #e4d9f7; flex-wrap: wrap; }
.fd-lead em { font: 800 calc(var(--u) * 11) / 1 var(--font-ui); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.fd-pips { display: inline-flex; gap: calc(var(--u) * 4); }
.fd-pips i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, var(--pc) 45%, color-mix(in srgb, var(--pc) 55%, #000));
box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 calc(var(--u) * 8) var(--pc); }
.fd-name { margin: 0; font: 900 calc(var(--u) * 40) / 1.05 var(--font-title); letter-spacing: .04em; color: #fff4d6; text-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 0 calc(var(--u) * 26) color-mix(in srgb, var(--c) 50%, transparent); }
.fd.secret-on .fd-name { background: linear-gradient(180deg, #fff6d8, var(--gold-1) 50%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.fd-style { margin: 0; font: 400 calc(var(--u) * 19) / 1.4 var(--font-card); color: #efe6ff; max-width: calc(var(--u) * 560); }
.fd-hl { display: flex; gap: calc(var(--u) * 14); margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.fd-hc { position: relative; width: calc(var(--u) * 136); aspect-ratio: 130 / 182; transition: transform .25s var(--ease-out, ease-out); }
.fd-hc .card { position: relative; width: 100%; height: 100%; }
.fd-hc:nth-child(1) { transform: rotate(-4deg) translateY(calc(var(--u) * 6)); }
.fd-hc:nth-child(3) { transform: rotate(4deg) translateY(calc(var(--u) * 6)); }
.fd-hc:hover { transform: translateY(calc(var(--u) * -8)) scale(1.05); z-index: 2; }
.fd-meta { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 14); color: #cbbde6; }
.fd-meta .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--c); }
.fd-meta b { color: #fff4d6; }
.fd-acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); }
.fd-acts.end { justify-content: flex-end; }
.fd-info .fd-acts .btn { min-width: calc(var(--u) * 170); }
.fd-layer { position: absolute; inset: 0; z-index: 5; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: calc(var(--u) * 24); background: rgba(6, 3, 14, .72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wgIn .25s ease-out both; }
.fd-layer[hidden] { display: none; }
.fd-sheet { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 24) calc(var(--u) * 28);
border-radius: calc(var(--u) * 20); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
background: linear-gradient(180deg, rgba(34, 18, 66, .94), rgba(14, 8, 28, .96)); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px color-mix(in srgb, var(--c) 22%, transparent);
animation: wgCard .45s var(--ease-back, cubic-bezier(.2, .9, .3, 1.35)) both; }
.fd-sheet h3 { margin: calc(var(--u) * 4) 0 0; font: 900 calc(var(--u) * 30) / 1.1 var(--font-title); letter-spacing: .04em; color: #fff4d6; }
.fd-sheet p { margin: 0; font-size: calc(var(--u) * 16); line-height: 1.45; color: #e4d9f7; }
.fd-sh-head { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.fd-sh-head > div { flex: 1; min-width: 0; }
.fd-layer.list .fd-sheet { width: calc(var(--u) * 1180); }
.fd-list { flex: 1 1 auto; min-height: 0; columns: 3 calc(var(--u) * 300); column-gap: calc(var(--u) * 26); overflow: auto; overscroll-behavior: contain; }
.fd-list section { margin-bottom: calc(var(--u) * 12); }
.fd-list li { break-inside: avoid; }
.fd-list h4 { break-after: avoid; margin: 0 0 calc(var(--u) * 6); font: 800 calc(var(--u) * 12) / 1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c); display: flex; gap: calc(var(--u) * 8); }
.fd-list h4 span { color: #cbbde6; }
.fd-list ul { list-style: none; margin: 0; padding: 0; }
.fd-list li { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 3.5) 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: calc(var(--u) * 14.5); line-height: 1.2; }
.fd-x { width: calc(var(--u) * 24); flex: none; color: #cbbde6; font-weight: 700; }
.fd-cost { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; display: grid; place-items: center; border-radius: 50%; font: 800 calc(var(--u) * 12) / 1 var(--font-ui);
color: #1b0f33; background: radial-gradient(circle at 35% 30%, #fff, #b9a6ff 55%, #6d52c9); }
.fd-cn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff4d6; }
.fd-rar { flex: none; font: 800 calc(var(--u) * 9.5) / 1 var(--font-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #ffe39a;
padding: calc(var(--u) * 3) calc(var(--u) * 6); border-radius: 99px; border: 1px solid rgba(242, 193, 78, .5); }
.fd-new { flex: none; font: 800 calc(var(--u) * 9.5) / 1 var(--font-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #b7ffcf; }
.fd-layer.confirm .fd-sheet { flex-direction: row; align-items: center; gap: calc(var(--u) * 28); width: calc(var(--u) * 760); }
.fd-cf-face { width: calc(var(--u) * 170); flex: none; aspect-ratio: 2 / 3; }
.fd-cf-face .lc { width: 100%; height: 100%; border-radius: calc(var(--u) * 12); }
.fd-cf-txt { display: flex; flex-direction: column; gap: calc(var(--u) * 12); min-width: 0; }
.fd-cf-txt .wg-err { font-size: calc(var(--u) * 14); }
.fd-layer.reward { background: rgba(6, 3, 14, .8); }
.fd-layer.reward .fd-sheet { flex-direction: row; align-items: center; gap: calc(var(--u) * 40); background: none; border: 0; box-shadow: none; padding: 0; width: calc(var(--u) * 1080); }
.fd-rw-stage { position: relative; width: calc(var(--u) * 300); flex: none; aspect-ratio: 2 / 3; }
.fd-rw-face { position: absolute; inset: 0; animation: prFull 1s cubic-bezier(.2, .9, .3, 1.15) .1s both; }
.fd-rw-face .lc { width: 100%; height: 100%; border-radius: calc(var(--u) * 16); box-shadow: 0 30px 60px rgba(0, 0, 0, .7), 0 0 calc(var(--u) * 70) color-mix(in srgb, var(--c) 70%, transparent); }
.fd-rw-cards { position: absolute; inset: 0; pointer-events: none; }
.fd-fly { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 96); aspect-ratio: 130 / 182; margin: calc(var(--u) * -67) 0 0 calc(var(--u) * -48); opacity: 0; z-index: 3; }
.fd-fly .card { position: relative; width: 100%; height: 100%; }
.fd-layer.go .fd-fly { animation: fdFly 2.1s cubic-bezier(.45, .05, .35, 1) calc(.45s + var(--i) * .09s) both; }
@keyframes fdFly {
0% { opacity: 0; transform: translate(0, 0) scale(.3); }
22% { opacity: 1; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(1); }
55% { opacity: 1; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(1); }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(.18); } }
.fd.still .fd-fly { display: none; }
.fd-rw-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 14); min-width: 0; animation: wgRise .8s var(--ease-out, ease-out) .5s both; }
.fd-rw-txt h3 { font-size: calc(var(--u) * 40); }
.fd-rw-txt p { font-size: calc(var(--u) * 18); }
.fd-coll { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 18); border-radius: 99px;
background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .45); font: 800 calc(var(--u) * 14) / 1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff0c8; }
.fd-coll .ico { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--gold-1); }
.fd-count { font: 900 calc(var(--u) * 20) / 1 var(--font-title); letter-spacing: .04em; color: var(--gold-1); min-width: calc(var(--u) * 44); }
.fd-count.done { animation: fdPop .5s var(--ease-back, cubic-bezier(.2, .9, .3, 1.5)); }
@keyframes fdPop { 50% { transform: scale(1.35); } }
body.mobile:not(.portrait) .fd-head { top: calc(var(--u) * 14); }
body.mobile:not(.portrait) .fd-head h1 { font-size: calc(var(--u) * 30); margin: calc(var(--u) * 4) 0 0; }
body.mobile:not(.portrait) .fd-head p { display: none; }
body.mobile:not(.portrait) .fd .fi-eyebrow { font-size: calc(var(--u) * 10.5); }
body.mobile:not(.portrait) .fd-later { top: calc(var(--u) * 12); }
body.mobile:not(.portrait) .fd-body { top: calc(var(--u) * 82); bottom: calc(var(--u) * 14); left: calc(var(--u) * 24); right: calc(var(--u) * 24); gap: calc(var(--u) * 30);
grid-template-columns: auto auto minmax(0, calc(var(--u) * 640)); }
body.mobile:not(.portrait) .fd-picks { grid-template-columns: repeat(3, calc(var(--u) * 104)); gap: calc(var(--u) * 12) calc(var(--u) * 10); }
body.mobile:not(.portrait) .fd-tname { font-size: calc(var(--u) * 11); }
body.mobile:not(.portrait) .fd-hero { width: calc(var(--u) * 250); }
body.mobile:not(.portrait) .fd-info { gap: calc(var(--u) * 7); }
body.mobile:not(.portrait) .fd-name { font-size: calc(var(--u) * 30); }
body.mobile:not(.portrait) .fd-style { font-size: calc(var(--u) * 15.5); }
body.mobile:not(.portrait) .fd-seal { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 12); }
body.mobile:not(.portrait) .fd-hc { width: calc(var(--u) * 100); }
body.mobile:not(.portrait) .fd .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 12) calc(var(--u) * 20); }
body.mobile:not(.portrait) .fd-info .fd-acts .btn { min-width: calc(var(--u) * 140); }
body.mobile:not(.portrait) .fd-layer { padding: calc(var(--u) * 14); }
body.mobile:not(.portrait) .fd-sheet { padding: calc(var(--u) * 16) calc(var(--u) * 22); gap: calc(var(--u) * 10); }
body.mobile:not(.portrait) .fd-layer.list .fd-sheet { width: 100%; }
body.mobile:not(.portrait) .fd-list { columns: 4 calc(var(--u) * 250); column-gap: calc(var(--u) * 18); }
body.mobile:not(.portrait) .fd-list li { font-size: calc(var(--u) * 12.5); padding: calc(var(--u) * 2.5) 0; }
body.mobile:not(.portrait) .fd-list section { margin-bottom: calc(var(--u) * 8); }
body.mobile:not(.portrait) .fd-sheet h3 { font-size: calc(var(--u) * 24); }
body.mobile:not(.portrait) .fd-sheet p { font-size: calc(var(--u) * 14); }
body.mobile:not(.portrait) .fd-rw-stage { width: calc(var(--u) * 230); }
body.mobile:not(.portrait) .fd-rw-txt h3 { font-size: calc(var(--u) * 30); }
body.mobile:not(.portrait) .fd-rw-txt p { font-size: calc(var(--u) * 15); }
body.mobile:not(.portrait) .fd-fly { width: calc(var(--u) * 78); margin: calc(var(--u) * -55) 0 0 calc(var(--u) * -39); }
body.portrait .fd-head { top: calc(var(--u) * 26); padding: 0 calc(var(--u) * 20); }
body.portrait .fd-head h1 { font-size: calc(var(--u) * 32); }
body.portrait .fd-head p { font-size: calc(var(--u) * 13.5); max-width: calc(var(--u) * 440); }
body.portrait .fd-later { top: auto; bottom: calc(var(--u) * 12); right: 50%; transform: translateX(50%); }
body.portrait .fd-body { top: calc(var(--u) * 132); bottom: calc(var(--u) * 54); left: calc(var(--u) * 18); right: calc(var(--u) * 18); gap: calc(var(--u) * 10) calc(var(--u) * 16);
grid-template-columns: calc(var(--u) * 150) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto auto auto auto; align-items: start; justify-content: stretch; align-content: start;
grid-template-areas: "hero seal" "hero lead" "hero name" "hero style" "hero ." "hl hl" "meta meta" "acts acts" "picks picks"; }
body.portrait .fd-info { display: contents; }
body.portrait .fd-hero { grid-area: hero; width: 100%; }
body.portrait .fd-seal { grid-area: seal; font-size: calc(var(--u) * 11.5); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 12); }
body.portrait .fd-lead { grid-area: lead; font-size: calc(var(--u) * 13); }
body.portrait .fd-name { grid-area: name; font-size: calc(var(--u) * 28); }
body.portrait .fd-style { grid-area: style; font-size: calc(var(--u) * 15); }
body.portrait .fd-hl { grid-area: hl; justify-content: center; margin: calc(var(--u) * 4) 0 0; }
body.portrait .fd-hc { width: calc(var(--u) * 104); }
body.portrait .fd-meta { grid-area: meta; justify-content: center; font-size: calc(var(--u) * 13); }
body.portrait .fd-acts { grid-area: acts; }
body.portrait .fd-info .fd-acts { display: grid; grid-template-columns: 1fr 1fr; }
body.portrait .fd-info .fd-acts .btn { min-width: 0; white-space: nowrap; font-size: calc(var(--u) * 15); padding: calc(var(--u) * 13) calc(var(--u) * 12); }
body.portrait .fd-picks { grid-area: picks; grid-template-columns: repeat(3, calc(var(--u) * 92)); justify-content: center; gap: calc(var(--u) * 12) calc(var(--u) * 26); margin-top: calc(var(--u) * 8); }
body.portrait .fd-tname { font-size: calc(var(--u) * 11); }
body.portrait .fd-layer { padding: calc(var(--u) * 16); }
body.portrait .fd-layer.list .fd-sheet { width: 100%; }
body.portrait .fd-list { columns: 2 calc(var(--u) * 200); column-gap: calc(var(--u) * 16); }
body.portrait .fd-list li { font-size: calc(var(--u) * 12.5); }
body.portrait .fd-layer.confirm .fd-sheet { flex-direction: column; text-align: center; width: 100%; }
body.portrait .fd-cf-face { width: calc(var(--u) * 150); }
body.portrait .fd-cf-txt { align-items: center; }
body.portrait .fd-cf-txt .fd-acts { justify-content: center; }
body.portrait .fd-sheet h3 { font-size: calc(var(--u) * 24); }
body.portrait .fd-sheet p { font-size: calc(var(--u) * 14.5); }
body.portrait .fd-layer.reward .fd-sheet { flex-direction: column; width: 100%; gap: calc(var(--u) * 24); }
body.portrait .fd-rw-stage { width: calc(var(--u) * 210); }
body.portrait .fd-rw-txt { align-items: center; text-align: center; }
body.portrait .fd-rw-txt h3 { font-size: calc(var(--u) * 28); }
body.portrait .fd-rw-txt p { font-size: calc(var(--u) * 15); }
body.portrait .fd-fly { width: calc(var(--u) * 74); margin: calc(var(--u) * -52) 0 0 calc(var(--u) * -37); }
@container fd (max-height: 1680px) {
body.portrait.mobile .fd-head p { display: none; }
body.portrait.mobile .fd-body { top: calc(var(--u) * 100); }
body.portrait.mobile .fd-picks { grid-template-columns: repeat(3, calc(var(--u) * 80)); gap: calc(var(--u) * 10) calc(var(--u) * 30); }
body.portrait.mobile .fd-hc { width: calc(var(--u) * 94); }
}
.wg-terms { margin: calc(var(--u) * -3) 0 0; font-size: calc(var(--u) * 12.5); line-height: 1.35; color: rgba(183, 168, 214, .85); }
.wg-forgot { display: flex; justify-content: flex-end; margin-top: calc(var(--u) * -6); }
.wg-forgot .wg-link, .wg-links .wg-link { font-size: calc(var(--u) * 13.5); }
.wg-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 8) calc(var(--u) * 16); }
.wg-links .wg-link[hidden] { display: none; }
.wg-okmsg { font-size: calc(var(--u) * 14); line-height: 1.4; color: #b7ffcf; }
.wg-okmsg:empty { display: none; }
.wg-rc { gap: calc(var(--u) * 12); }
.wg-rcbox { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 12);
background: rgba(6, 3, 14, .7); border: 1px solid rgba(242, 193, 78, .55); box-shadow: inset 0 0 calc(var(--u) * 18) rgba(242, 193, 78, .08); }
.wg-rcbox code { flex: 1; min-width: 0; font: 800 calc(var(--u) * 24) / 1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; color: var(--gold-1);
user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.wg-rcbox .btn { flex: none; font-size: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 16); }
.wg-warn { margin: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); font-size: calc(var(--u) * 13.5); line-height: 1.4;
color: #ffe1b0; background: rgba(255, 150, 60, .1); border: 1px solid rgba(255, 170, 80, .35); }
.wg-check { display: flex; align-items: center; gap: calc(var(--u) * 10); cursor: pointer; font-size: calc(var(--u) * 15); color: #f0e2ff; }
.wg-check input { width: calc(var(--u) * 20); height: calc(var(--u) * 20); accent-color: var(--gold-2); flex: none; margin: 0; }
.wg-submit:disabled { opacity: .5; cursor: not-allowed; }
body.mobile:not(.portrait) .wg-card .wg-terms { display: none; }
body.mobile:not(.portrait) .wg[data-state="forgot"] .wg-head p, body.mobile:not(.portrait) .wg[data-state="newpass"] .wg-head p { display: none; }
.ax { --u: 1px; position: absolute; inset: 0; z-index: 1180; display: grid; place-items: center; background: rgba(5, 2, 14, .72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wgIn .25s ease-out both; color: var(--ink); font-family: var(--font-ui); }
body.mobile .ax { --u: 1.55px; } body.portrait .ax { --u: 1.6px; } body.portrait.mobile .ax { --u: 1.75px; }
.ax.out { animation: wgOut .3s ease-in both; pointer-events: none; }
.ax .ax-card { width: calc(var(--u) * 480); max-height: calc(100% - 24px); overflow: auto; }
.ax .btn { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 13) calc(var(--u) * 22); border-radius: calc(var(--u) * 12); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.ax .btn .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.ax .wg-acts .wg-submit { width: auto; flex: 2 1 auto; margin: 0; }
.ax .wg-head h2 { font-size: calc(var(--u) * 26); }
body.mobile:not(.portrait) .ax .ax-card { width: calc(var(--u) * 520); padding: calc(var(--u) * 16) calc(var(--u) * 22); }
body.mobile:not(.portrait) .ax .wg-form { gap: calc(var(--u) * 8); }
body.mobile:not(.portrait) .ax .wg-terms { display: none; }
body.mobile:not(.portrait) .ax .wg-fld input { height: calc(var(--u) * 40); }
.acctsheet .acct-sec { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.acctsheet .as-warn { grid-column: 1 / -1; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: #ffe1b0; background: rgba(255, 150, 60, .1); border: 1px solid rgba(255, 170, 80, .35); text-align: left; }
.acctsheet .as-warn b { color: #fff4d6; }
.acctsheet .as-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px; padding: 10px 10px 10px 14px; border-radius: 12px;
background: rgba(8, 4, 18, .5); border: 1px solid rgba(190, 160, 255, .16); text-align: left; min-width: 0; }
.acctsheet .as-row > span { grid-column: 1; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.acctsheet .as-row > b { grid-column: 1; font: 700 15px/1.15 var(--font-ui); color: #fff4d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acctsheet .as-row .btn { grid-column: 2; grid-row: 1 / span 2; padding: 6px 12px; font-size: 13px; }
body.mobile .acctsheet .acct-sec { gap: 14px; }
body.mobile .acctsheet .as-warn { font-size: 19px; padding: 12px 16px; }
body.mobile .acctsheet .as-row { padding: 14px 14px 14px 18px; }
body.mobile .acctsheet .as-row > span { font-size: 14px; } body.mobile .acctsheet .as-row > b { font-size: 21px; }
body.mobile .acctsheet .as-row .btn { font-size: 18px; padding: 10px 16px; }
body.mobile:not(.portrait) .acctsheet:has(.acct-sec) .acct-note.ok { display: none; }
body.portrait .acctsheet .acct-sec { grid-template-columns: 1fr; gap: 12px; }
body.portrait .acctsheet .as-warn { font-size: 20px; padding: 14px 18px; border-radius: 16px; }
body.portrait .acctsheet .as-row { padding: 14px 16px 14px 22px; border-radius: 16px; }
body.portrait .acctsheet .as-row > span { font-size: 15px; } body.portrait .acctsheet .as-row > b { font-size: 26px; }
body.portrait .acctsheet .as-row .btn { font-size: 19px; padding: 10px 18px; }
.wg-card { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; outline: 1px solid rgba(232, 186, 90, .14); outline-offset: calc(var(--u) * -7); }
.wg-card::before { display: none; }
body.kb .wg .wg-brand, body.kb .wg .wg-foot, body.kb .lg-notice { visibility: hidden; }
body.kb .wg .wg-main { display: block; padding: 0; }
body.kb .wg .wg-panel { position: absolute; left: 0; right: 0; top: var(--kb-top, 0px); height: var(--kb-h, 100%); padding: calc(var(--u) * 8) 0; align-items: flex-start; }
body.kb .wg-card { max-height: 100%; animation: none; }
body.kb .ax { place-items: start center; padding-top: calc(var(--kb-top, 0px) + var(--u) * 8); }
body.kb .ax .ax-card { max-height: calc(var(--kb-h, 100%) - var(--u) * 16); animation: none; }
body.lite .wg-art, body.fx-low .wg-art { filter: none; animation: none; inset: 0; }
body.lite .wg-art.on, body.fx-low .wg-art.on { opacity: .42; }
body.lite .fi-art, body.fx-low .fi-art { filter: none; animation: none; inset: 0; opacity: .4; }
body.lite .fd-art, body.fx-low .fd-art { filter: none; animation: none; inset: 0; opacity: .3; }
body.lite .wg-dust, body.lite .wg-pages, body.lite .wg-shard, body.fx-low .wg-dust, body.fx-low .wg-pages, body.fx-low .wg-shard { display: none; }
body.lite .wg-glow, body.fx-low .wg-glow, body.lite .wg-logo, body.fx-low .wg-logo { animation: none; }
body.lite .wg-logo, body.fx-low .wg-logo { mix-blend-mode: normal; content: url("../../assets/icons/logo-600.png"); }
body.lite .wg-card, body.lite .ax, body.fx-low .wg-card, body.fx-low .ax { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.lite .wg-card, body.fx-low .wg-card { background: linear-gradient(180deg, rgba(34, 18, 66, .97), rgba(14, 8, 28, .98)); }
body.lite .ax, body.fx-low .ax { background: rgba(5, 2, 14, .9); }
body.lite .fi-card::before, body.fx-low .fi-card::before { display: none; }
body.lite .fi-eyebrow.holo, body.fx-low .fi-eyebrow.holo { animation: none; }
body.lite .fi-panel.on .fi-name, body.fx-low .fi-panel.on .fi-name { animation-name: wgRise; }
body:has(#friendIntro) .wg, body:has(#firstDeck) .wg { visibility: hidden; }
body:has(#friendIntro) .wg *, body:has(#firstDeck) .wg * { animation-play-state: paused; }
.fi-name[style*="--n"] { font-size: calc(var(--u) * 118 * min(1, 16 / var(--n))); overflow-wrap: anywhere; }
body.portrait .fi-name[style*="--n"] { font-size: calc(var(--u) * 86 * min(1, 14 / var(--n))); }
body.mobile:not(.portrait) .fi-name[style*="--n"] { font-size: calc(var(--u) * 96 * min(1, 16 / var(--n))); }
.wg-start { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.wg .wg-play { width: 100%; font-size: calc(var(--u) * 21); padding: calc(var(--u) * 19) calc(var(--u) * 26); letter-spacing: .04em; }
.wg .wg-play .ico { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.wg-playterms { margin: 0; text-align: center; }
.wg-playterms a { color: var(--gold-1); }
.wg-alt { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.wg .wg-alt .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.wg-codelink { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); align-self: center; text-decoration: none; }
.wg-codelink span { text-decoration: underline; text-underline-offset: 3px; }
.wg-codelink .ico { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.wg-opt { font: 700 calc(var(--u) * 9.5) / 1 var(--font-ui); letter-spacing: .14em; font-style: normal; color: rgba(183, 168, 214, .7); margin-left: calc(var(--u) * 6); }
.wg-back { justify-content: center; margin-top: calc(var(--u) * 10); }
.wg-rc .wg-acts { margin-top: calc(var(--u) * 4); }
body.mobile:not(.portrait) .wg-start .wg-head p { display: none; }
body.mobile:not(.portrait) .wg-start { gap: calc(var(--u) * 9); }
.onb-nudge { --u: 1px; position: absolute; left: 50%; bottom: calc(var(--u) * 96); z-index: 1150; transform: translateX(-50%);
display: flex; align-items: center; gap: calc(var(--u) * 14); max-width: min(calc(100% - 24px), calc(var(--u) * 640));
padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 18); border-radius: calc(var(--u) * 16);
background: linear-gradient(160deg, rgba(34, 20, 62, .97), rgba(16, 9, 32, .97)); border: 1px solid rgba(242, 193, 78, .45);
box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(0, 0, 0, .55); color: var(--ink); font-family: var(--font-ui); animation: onbIn .4s ease-out both; }
body.mobile .onb-nudge { --u: 1.55px; } body.portrait .onb-nudge { --u: 1.6px; } body.portrait.mobile .onb-nudge { --u: 1.75px; }
.onb-nudge.out { animation: wgOut .3s ease-in both; pointer-events: none; }
@keyframes onbIn { from { opacity: 0; transform: translate(-50%, calc(var(--u) * 16)); } }
.onb-nudge > .ico { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: none; }
.onb-txt { display: flex; flex-direction: column; gap: calc(var(--u) * 3); min-width: 0; font-size: calc(var(--u) * 13.5); line-height: 1.35; color: var(--ink-dim); }
.onb-txt b { font-size: calc(var(--u) * 15); color: #fff0c8; }
.onb-nudge .btn { flex: none; font-size: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 16); white-space: nowrap; }
.onb-x { appearance: none; border: 0; background: none; padding: calc(var(--u) * 6); cursor: pointer; color: var(--ink-dim); flex: none; }
.onb-x .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
body.portrait #firstDeck .fd-acts .btn { min-height: calc(var(--u) * 54); }
.wg-learnlink { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); align-self: center; text-decoration: none; text-align: center; }
.wg-learnlink span { text-decoration: underline; text-underline-offset: 3px; }
.wg-learnlink .ico { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; }
/* css/tutorial.css */
#tutLayer { position: absolute; inset: 0; z-index: 3000; pointer-events: none; font-family: var(--font-ui); }
#tutLayer button { pointer-events: auto; }
#tutLayer .tut-ring { position: absolute; left: 0; top: 0; border-radius: 22px; border: 4px solid #ffd36e;
box-shadow: 0 0 0 3px rgba(20, 8, 40, .55), 0 0 28px 6px rgba(255, 196, 80, .75), inset 0 0 22px rgba(255, 211, 110, .45);
animation: tutPulse 1.25s ease-in-out infinite; will-change: transform; }
#tutLayer .tut-dim { position: absolute; left: 0; top: 0; border-radius: 22px; box-shadow: 0 0 0 2600px rgba(6, 2, 16, .5) ; transition: opacity .3s; }
#tutLayer .tut-ring:not(.main) { border-style: dashed; animation-delay: -.3s; }
#tutLayer .tut-ring.flash { animation: tutFlash .5s ease-out, tutPulse 1.25s ease-in-out .5s infinite; }
@keyframes tutPulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .72; scale: 1.035; } }
@keyframes tutFlash { 0% { border-color: #fff; scale: 1.12; } 100% { scale: 1; } }
#tutLayer .tut-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#tutLayer .tut-arrow i { position: absolute; left: -26px; bottom: 0; width: 52px; height: 60px; display: block;
background: linear-gradient(180deg, #fff1c2, #f2c14e 55%, #c4861c); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 12px rgba(255, 200, 90, .7));
clip-path: polygon(30% 0, 70% 0, 70% 48%, 100% 48%, 50% 100%, 0 48%, 30% 48%); animation: tutBob .9s ease-in-out infinite; }
#tutLayer .tut-arrow.up i { bottom: auto; top: 0; transform: rotate(180deg); animation-name: tutBobUp; }
@keyframes tutBob { 0%, 100% { translate: 0 -14px; } 50% { translate: 0 0; } }
@keyframes tutBobUp { 0%, 100% { translate: 0 14px; } 50% { translate: 0 0; } }
#tutLayer .tut-bubble { position: absolute; left: 0; top: 0; width: 620px; display: none; gap: 18px; align-items: flex-start; padding: 20px 22px 22px;
border-radius: 22px; background: linear-gradient(180deg, rgba(34, 18, 64, .97), rgba(16, 8, 34, .97)); border: 1.5px solid rgba(242, 193, 78, .75);
box-shadow: 0 22px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); pointer-events: auto;
transition: transform .38s cubic-bezier(.2, .8, .3, 1); color: #f4ecff; }
#tutLayer .tut-bubble.on { display: flex; }
#tutLayer .tut-bubble.pop { animation: tutPop .34s cubic-bezier(.2, .9, .3, 1.2); }
#tutLayer .tut-bubble.nudge { animation: tutNudge .42s ease-in-out; }
@keyframes tutPop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes tutNudge { 0%, 100% { translate: 0 0; } 20% { translate: -10px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
#tutLayer .tb-face { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid #f2c14e; box-shadow: 0 0 18px rgba(242, 193, 78, .45); background: #1a0f30; }
#tutLayer .tb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tutLayer .tb-body { flex: 1; min-width: 0; }
#tutLayer .tb-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
#tutLayer .tb-head b { font-family: var(--font-title); font-size: 22px; letter-spacing: .08em; color: #ffd36e; }
#tutLayer .tb-lesson { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #bfa8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tutLayer .tb-text { font-size: 21px; line-height: 1.42; }
#tutLayer .tb-text b { color: #ffe08a; font-weight: 700; }
#tutLayer .tb-hint { font-size: 17px; line-height: 1.3; color: #ffb3a8; min-height: 0; margin-top: 6px; }
#tutLayer .tb-hint:empty { display: none; }
#tutLayer .tb-btns { display: none; justify-content: flex-end; margin-top: 12px; }
#tutLayer .tut-bubble.tap .tb-btns { display: flex; }
#tutLayer .tb-next { min-width: 130px; }
#tutLayer .tb-prog { position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#tutLayer .tb-prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #a86bff, #f2c14e); border-radius: 4px; transition: width .5s; }
#tutLayer .tut-skip { position: absolute; right: 150px; top: 20px; z-index: 2; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28);
background: rgba(14, 7, 30, .82); color: #e9dcff; font: 600 15px/1 var(--font-ui); letter-spacing: .04em; cursor: pointer; }
#tutLayer .tut-skip:hover { border-color: #f2c14e; color: #fff; }
#tutLayer .tut-skip[hidden] { display: none; }
#tutLayer .tut-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(5, 2, 14, .66); backdrop-filter: blur(4px); pointer-events: auto; }
#tutLayer .tut-confirm[hidden] { display: none; }
#tutLayer .tc-box { width: 560px; max-width: calc(100% - 48px); padding: 30px 34px; border-radius: 22px; text-align: center; display: grid; gap: 12px;
background: linear-gradient(180deg, #24133f, #120a24); border: 1.5px solid rgba(242, 193, 78, .6); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
#tutLayer .tc-box b { font-family: var(--font-title); font-size: 28px; letter-spacing: .06em; color: #ffe08a; }
#tutLayer .tc-box span { font-size: 18px; line-height: 1.4; color: #d9ccef; }
#tutLayer .tc-btns { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
#tutLayer .tut-done { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: auto; opacity: 0; transition: opacity .45s;
background: radial-gradient(ellipse at 50% 45%, rgba(60, 26, 110, .72), rgba(5, 2, 14, .9) 70%); }
#tutLayer .tut-done.on { opacity: 1; }
#tutLayer .td-box { width: 720px; max-width: calc(100% - 48px); text-align: center; padding: 34px 40px 36px; border-radius: 28px;
background: linear-gradient(180deg, rgba(40, 20, 74, .96), rgba(16, 8, 34, .97)); border: 2px solid rgba(242, 193, 78, .8);
box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 60px rgba(168, 107, 255, .35); transform: translateY(18px) scale(.96); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2); }
#tutLayer .tut-done.on .td-box { transform: none; }
#tutLayer .td-eyebrow { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: #bfa8e6; }
#tutLayer .td-box h2 { margin: 10px 0 14px; font-family: var(--font-title); font-size: 52px; line-height: 1.08; letter-spacing: .08em; color: #ffe08a;
text-shadow: 0 0 26px rgba(242, 193, 78, .55); }
#tutLayer .td-box p { font-size: 21px; line-height: 1.5; color: #eadfff; margin: 0 auto 18px; max-width: 580px; }
#tutLayer .td-guide { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; font-size: 18px; color: #d9ccef; font-style: italic; }
#tutLayer .td-guide img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #f2c14e; }
#tutLayer .td-guide b { font-style: normal; color: #ffd36e; margin-left: 6px; }
#tutLayer .td-go { min-width: 220px; }
body.mobile #tutLayer .tut-bubble { width: 800px; padding: 24px 28px 28px; gap: 22px; border-radius: 28px; }
body.mobile #tutLayer .tb-face { width: 120px; height: 120px; }
body.mobile #tutLayer .tb-head b { font-size: 30px; }
body.mobile #tutLayer .tb-lesson { font-size: 20px; }
body.mobile #tutLayer .tb-text { font-size: 32px; line-height: 1.36; }
body.mobile #tutLayer .tb-hint { font-size: 26px; }
body.mobile #tutLayer .tb-next { font-size: 28px; padding: 16px 34px; min-width: 190px; }
body.mobile #tutLayer .tut-skip { right: 236px; top: 22px; font-size: 26px; padding: 16px 28px; }
body.mobile #tutLayer .tc-box { width: 820px; }
body.mobile #tutLayer .tc-box b { font-size: 40px; }
body.mobile #tutLayer .tc-box span { font-size: 30px; }
body.mobile #tutLayer .tc-btns .btn, body.mobile #tutLayer .td-go { font-size: 28px; padding: 18px 34px; }
body.mobile #tutLayer .td-box { width: 960px; }
body.mobile #tutLayer .td-box h2 { font-size: 70px; }
body.mobile #tutLayer .td-box p, body.mobile #tutLayer .td-guide { font-size: 30px; }
body.mobile #tutLayer .td-eyebrow { font-size: 22px; }
body.mobile #tutLayer .td-guide img { width: 90px; height: 90px; }
body.mobile #tutLayer .tut-arrow i { left: -36px; width: 72px; height: 84px; }
body.portrait #tutLayer .tut-bubble { width: 852px; padding: 24px 26px 30px; gap: 20px; border-radius: 30px; }
body.portrait #tutLayer .tb-face { width: 116px; height: 116px; }
body.portrait #tutLayer .tb-head b { font-size: 32px; }
body.portrait #tutLayer .tb-lesson { font-size: 22px; }
body.portrait #tutLayer .tb-text { font-size: 34px; line-height: 1.36; }
body.portrait #tutLayer .tb-hint { font-size: 28px; }
body.portrait #tutLayer .tb-next { font-size: 30px; padding: 18px 36px; min-width: 200px; }
body.portrait #tutLayer .tut-skip { left: 16px; right: auto; top: 12px; font-size: 24px; padding: 12px 20px; }
body.portrait #tutLayer .tc-box { width: 852px; padding: 40px 34px; }
body.portrait #tutLayer .tc-box b { font-size: 44px; }
body.portrait #tutLayer .tc-box span { font-size: 32px; }
body.portrait #tutLayer .tc-btns .btn, body.portrait #tutLayer .td-go { font-size: 32px; padding: 20px 36px; }
body.portrait #tutLayer .td-box { width: 852px; padding: 44px 34px; }
body.portrait #tutLayer .td-box h2 { font-size: 76px; }
body.portrait #tutLayer .td-box p, body.portrait #tutLayer .td-guide { font-size: 32px; }
body.portrait #tutLayer .td-eyebrow { font-size: 24px; }
body.portrait #tutLayer .td-guide img { width: 96px; height: 96px; }
body.portrait #tutLayer .tut-arrow i { left: -36px; width: 72px; height: 84px; }
body.fx-low #tutLayer .tut-ring, body.fx-low #tutLayer .tut-arrow i { animation: none; }
@media (prefers-reduced-motion: reduce) { #tutLayer .tut-ring, #tutLayer .tut-arrow i, #tutLayer .tut-bubble.pop { animation: none; } }
#tutLayer .tut-quip { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 10px 18px 10px 10px;
border-radius: 20px 20px 20px 6px; background: linear-gradient(180deg, #fff8e8, #f1e2c2); color: #2a1740; border: 2px solid #c79a3c;
box-shadow: 0 12px 30px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; will-change: transform; }
#tutLayer .tut-quip.on { opacity: 1; visibility: visible; transition: opacity .2s; animation: tqPop .32s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes tqPop { from { scale: .8; } to { scale: 1; } }
#tutLayer .tut-quip .tq-face { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid #c79a3c; background: #1a0f30; }
#tutLayer .tut-quip .tq-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tutLayer .tut-quip.echo { background: linear-gradient(180deg, #2c1650, #1a0c33); color: #f0e4ff; border-color: #b77bff; box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(168, 107, 255, .5); }
#tutLayer .tut-quip.echo .tq-face { border-color: #b77bff; }
#tutLayer .tut-quip.echo .tq-face img, #game .bplate.echoface .bp-av img, #vsIntro .vs-art.echoface, #tutLayer .td-guide.echo img, #chapterUI .echo img { filter: sepia(1) hue-rotate(225deg) saturate(2.4) contrast(1.05) brightness(.9); }
#tutLayer .tq-body { display: grid; gap: 2px; min-width: 0; }
#tutLayer .tq-body b { font: 800 13px/1.1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #8a5a12; }
#tutLayer .tut-quip.echo .tq-body b { color: #d7b8ff; }
#tutLayer .tq-body span { font: italic 600 19px/1.3 "Old Standard TT", Georgia, serif; }
#tutLayer .tut-battle { position: absolute; right: 150px; top: 70px; padding: 7px 16px; border-radius: 99px; font: 700 13px/1 var(--font-ui);
letter-spacing: .22em; text-transform: uppercase; color: #ffe08a; background: rgba(14, 7, 30, .72); border: 1px solid rgba(242, 193, 78, .45); pointer-events: none; }
#tutLayer .tut-battle[hidden] { display: none; }
#game .lc.ch-echo img, #game .ch-echo .lc img { filter: sepia(.9) hue-rotate(225deg) saturate(2.2) contrast(1.05); }
#tutLayer .ch-end .td-box h2 { font-size: 60px; }
#tutLayer .ch-end.lost .td-box h2 { color: #d9ccef; text-shadow: none; }
body.mobile #tutLayer .tut-quip { max-width: 640px; padding: 14px 24px 14px 14px; gap: 16px; }
body.mobile #tutLayer .tut-quip .tq-face { width: 84px; height: 84px; }
body.mobile #tutLayer .tq-body b { font-size: 20px; }
body.mobile #tutLayer .tq-body span { font-size: 28px; }
body.mobile #tutLayer .tut-battle { font-size: 20px; padding: 10px 22px; right: 236px; top: 96px; }
body.portrait #tutLayer .tut-quip { max-width: 700px; padding: 14px 26px 14px 14px; gap: 16px; }
body.portrait #tutLayer .tut-quip .tq-face { width: 90px; height: 90px; }
body.portrait #tutLayer .tq-body b { font-size: 21px; }
body.portrait #tutLayer .tq-body span { font-size: 30px; }
body.portrait #tutLayer .tut-battle { display: none; }
#chapterUI { position: absolute; inset: 0; z-index: 3500; overflow: hidden; font-family: var(--font-ui); color: #f4ecff; background: #0b0616; }
#chapterUI[hidden] { display: none; }
#chapterUI .chx-bg { position: absolute; inset: 0; }
#chapterUI .chx-art { position: absolute; inset: -3%; background-size: cover; background-position: center; filter: saturate(1.05) brightness(.62);
animation: chxDrift 26s ease-in-out infinite alternate; }
@keyframes chxDrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-1.2%, -1%); } }
#chapterUI .chx-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(20, 8, 44, .15), rgba(6, 2, 16, .82) 78%), linear-gradient(180deg, rgba(6, 2, 16, .35), rgba(6, 2, 16, .15) 40%, rgba(6, 2, 16, .9)); }
#chapterUI[data-mode="scene"] .chx-art { filter: saturate(1.1) brightness(.78); }
#chapterUI .chx-main { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 60px 50px; }
#chapterUI .chx-main.in > * { animation: chxIn .5s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes chxIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-skipall { position: absolute; right: 28px; top: 22px; z-index: 3; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28);
background: rgba(14, 7, 30, .78); color: #e9dcff; font: 600 15px/1 var(--font-ui); letter-spacing: .04em; cursor: pointer; }
#chapterUI .chx-skipall:hover { border-color: #f2c14e; color: #fff; }
#chapterUI .chx-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(5, 2, 14, .7); backdrop-filter: blur(4px); }
#chapterUI .chx-confirm[hidden] { display: none; }
#chapterUI .tc-box { width: 560px; max-width: calc(100% - 48px); padding: 30px 34px; border-radius: 22px; text-align: center; display: grid; gap: 12px;
background: linear-gradient(180deg, #24133f, #120a24); border: 1.5px solid rgba(242, 193, 78, .6); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
#chapterUI .tc-box b { font-family: var(--font-title); font-size: 28px; letter-spacing: .06em; color: #ffe08a; }
#chapterUI .tc-box span { font-size: 18px; line-height: 1.4; color: #d9ccef; }
#chapterUI .tc-btns { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
#chapterUI .chx-eyebrow { font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-eyebrow.holo { background: linear-gradient(90deg, #ffd36e, #ff9de2, #9ad8ff, #ffd36e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chxHolo 4s linear infinite; }
@keyframes chxHolo { to { background-position: 200% 0; } }
#chapterUI h1, #chapterUI h2 { margin: 8px 0 10px; font-family: var(--font-title); letter-spacing: .08em; color: #ffe08a; text-shadow: 0 0 28px rgba(242, 193, 78, .45); line-height: 1.05; }
#chapterUI h1 { font-size: 72px; }
#chapterUI h2 { font-size: 50px; }
#chapterUI .chx-sub { font-size: 21px; line-height: 1.45; color: #e3d6fa; max-width: 760px; margin: 0 auto; }
#chapterUI .chx-note { font-size: 16px; color: #bfa8e6; margin: 10px 0 0; }
#chapterUI .chx-acts { display: flex; gap: 14px; justify-content: center; margin-top: 26px; }
#chapterUI .chx-acts .btn { min-width: 240px; }
#chapterUI .chx-title { text-align: center; width: min(1320px, 100%); }
#chapterUI .chx-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; position: relative; }
#chapterUI .chx-nodes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 66px; height: 3px; background: linear-gradient(90deg, rgba(242, 193, 78, .6), rgba(168, 107, 255, .5)); z-index: 0; }
#chapterUI .chx-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 0 8px 18px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#chapterUI .chx-node[disabled] { cursor: default; opacity: .55; }
#chapterUI .cn-face { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(242, 193, 78, .55); background: #1a0f30; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: transform .25s, border-color .25s; }
#chapterUI .cn-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chapterUI .chx-node.cur .cn-face { border-color: #ffd36e; box-shadow: 0 0 0 6px rgba(255, 211, 110, .18), 0 0 36px rgba(255, 211, 110, .55); animation: chxBeat 1.8s ease-in-out infinite; }
@keyframes chxBeat { 50% { transform: scale(1.05); } }
#chapterUI .chx-node:not([disabled]):hover .cn-face { transform: scale(1.06); }
#chapterUI .chx-node.won .cn-face { border-color: #8fe3a8; }
#chapterUI .cn-k { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #bfa8e6; margin-top: 8px; }
#chapterUI .cn-t { font-family: var(--font-title); font-size: 21px; color: #fff1c9; letter-spacing: .04em; }
#chapterUI .cn-o { font-style: normal; font-size: 16px; color: #d9ccef; }
#chapterUI .cn-ok { position: absolute; top: 96px; left: calc(50% + 34px); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2f9e5a; color: #fff; border: 3px solid #0b0616; }
#chapterUI .cn-ok svg { width: 22px; height: 22px; }
#chapterUI[data-mode="scene"] .chx-main { place-items: stretch; padding: 0; }
#chapterUI .chx-scene { position: relative; width: 100%; height: 100%; cursor: pointer; }
#chapterUI .chx-sctitle { position: absolute; left: 44px; top: 28px; display: grid; gap: 4px; }
#chapterUI .chx-sctitle span { font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-sctitle b { font-family: var(--font-title); font-size: 34px; color: #ffe08a; letter-spacing: .06em; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
#chapterUI .chx-actor { position: absolute; left: 70px; bottom: 250px; width: 330px; height: 330px; border-radius: 50%; overflow: hidden; border: 5px solid #f2c14e;
box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(242, 193, 78, .35); background: #1a0f30; }
#chapterUI .chx-actor[hidden] { display: none; }
#chapterUI .chx-actor.echo { border-color: #b77bff; box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(168, 107, 255, .55); }
#chapterUI .chx-actor.pop { animation: chxActor .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes chxActor { from { opacity: 0; translate: -30px 0; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
#chapterUI .chx-actor img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chapterUI .chx-box { position: absolute; left: 50px; right: 50px; bottom: 40px; min-height: 200px; padding: 26px 36px 22px; border-radius: 26px;
background: linear-gradient(180deg, rgba(34, 18, 64, .95), rgba(16, 8, 34, .96)); border: 1.5px solid rgba(242, 193, 78, .7); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); cursor: auto; }
#chapterUI .chx-who { display: flex; align-items: baseline; gap: 14px; min-height: 28px; }
#chapterUI .chx-who b { font-family: var(--font-title); font-size: 26px; color: #ffd36e; letter-spacing: .06em; }
#chapterUI .chx-who em { font-style: normal; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-line { margin: 10px 0 0; font-size: 27px; line-height: 1.45; color: #f6efff; max-width: 1400px; padding-right: 330px; }
#chapterUI .chx-scene.narr .chx-line { font-family: "Old Standard TT", Georgia, serif; font-style: italic; color: #eadfff; }
#chapterUI .chx-line.in { animation: chxLine .4s ease-out; }
@keyframes chxLine { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-dots { display: flex; gap: 8px; margin-top: 16px; }
#chapterUI .chx-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
#chapterUI .chx-dots i.on { background: #f2c14e; }
#chapterUI .chx-btns { position: absolute; right: 30px; bottom: 20px; display: flex; gap: 12px; }
#chapterUI .chx-btns .btn { min-width: 130px; }
#chapterUI .chx-tap { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(233, 220, 255, .55); }
#chapterUI .chx-reward, #chapterUI .chx-final { text-align: center; width: min(1200px, 100%); }
#chapterUI .chx-beat { display: inline-flex; align-items: center; gap: 16px; max-width: 820px; margin: 4px auto 0; font-size: 20px; line-height: 1.4; color: #e3d6fa; text-align: left; }
#chapterUI .chx-beat img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #f2c14e; }
#chapterUI .chx-beat.echo img { border-color: #b77bff; }
#chapterUI .chx-rws { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 30px; min-height: 180px; }
#chapterUI .chx-rw { display: grid; justify-items: center; gap: 6px; animation: chxRw .6s cubic-bezier(.2, .9, .3, 1.3) both; }
#chapterUI .chx-rw:nth-child(2) { animation-delay: .18s; }
@keyframes chxRw { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
#chapterUI .chx-rw > b { font-family: var(--font-title); font-size: 44px; color: #ffe08a; }
#chapterUI .chx-rw > span { font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #d9ccef; max-width: 320px; }
#chapterUI .chx-coin { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #a8701a 80%);
box-shadow: inset 0 0 0 6px rgba(255, 240, 190, .55), 0 0 34px rgba(242, 193, 78, .6); }
#chapterUI .chx-pack { width: 84px; height: 110px; border-radius: 12px; display: grid; place-items: center; color: #fff3c4;
background: linear-gradient(160deg, #6b3fc0, #2b1560); border: 3px solid #f2c14e; box-shadow: 0 0 30px rgba(168, 107, 255, .6); }
#chapterUI .chx-pack svg { width: 46px; height: 46px; }
#chapterUI .chx-cardslot { width: 230px; height: 322px; }
#chapterUI .chx-cardslot .card { position: relative; width: 100%; height: 100%; }
#chapterUI .chx-fan { position: relative; height: 400px; margin: 18px auto 6px; display: flex; justify-content: center; align-items: flex-start; }
#chapterUI .chx-fa { width: 200px; margin: 0 -26px; transform-origin: 50% 120%; transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)) translateY(calc(max(var(--k) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--k)) * 16px));
animation: chxFa .8s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--k) * .12s); transition: translate .25s; }
#chapterUI .chx-fa:hover { translate: 0 -22px; z-index: 2; }
#chapterUI .chx-fa .lc { width: 100%; }
@keyframes chxFa { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-final.one .chx-fa { width: 280px; margin: 0; transform: none; }
body.mobile #chapterUI .chx-skipall { font-size: 24px; padding: 16px 26px; }
body.mobile #chapterUI .tc-box { width: 820px; }
body.mobile #chapterUI .tc-box b { font-size: 40px; }
body.mobile #chapterUI .tc-box span { font-size: 30px; }
body.mobile #chapterUI .tc-btns .btn, body.mobile #chapterUI .chx-acts .btn, body.mobile #chapterUI .chx-btns .btn { font-size: 28px; padding: 18px 34px; }
body.mobile #chapterUI .chx-main { padding: 40px 50px 30px; }
body.mobile #chapterUI .chx-eyebrow { font-size: 22px; }
body.mobile #chapterUI h1 { font-size: 80px; }
body.mobile #chapterUI h2 { font-size: 62px; }
body.mobile #chapterUI .chx-sub, body.mobile #chapterUI .chx-beat { font-size: 30px; }
body.mobile #chapterUI .chx-note { font-size: 24px; }
body.mobile #chapterUI .chx-nodes { margin-top: 18px; }
body.mobile #chapterUI .cn-k { font-size: 18px; }
body.mobile #chapterUI .cn-t { font-size: 28px; }
body.mobile #chapterUI .cn-o { font-size: 22px; }
body.mobile #chapterUI .chx-sub { max-width: 1100px; }
body.mobile #chapterUI .chx-title .chx-sub { display: none; }
body.mobile #chapterUI .chx-actor { width: 280px; height: 280px; bottom: 350px; }
body.mobile #chapterUI .chx-box { min-height: 300px; padding: 30px 40px 30px; }
body.mobile #chapterUI .chx-who b { font-size: 36px; }
body.mobile #chapterUI .chx-who em { font-size: 22px; }
body.mobile #chapterUI .chx-line { font-size: 38px; max-width: none; padding-right: 0; margin-bottom: 90px; }
body.mobile #chapterUI .chx-sctitle b { font-size: 44px; }
body.mobile #chapterUI .chx-sctitle span { font-size: 20px; }
body.mobile #chapterUI .chx-tap { display: none; }
body.mobile #chapterUI .chx-rw > b { font-size: 60px; }
body.mobile #chapterUI .chx-rw > span { font-size: 24px; }
body.mobile #chapterUI .chx-rws { margin-top: 18px; }
body.mobile #chapterUI .chx-fan { height: 380px; }
body.mobile #chapterUI .chx-reward .chx-beat img { width: 100px; height: 100px; }
body.portrait #chapterUI .chx-main { padding: 110px 30px 60px; }
body.portrait #chapterUI .chx-skipall { right: 16px; top: 16px; font-size: 24px; padding: 14px 22px; }
body.portrait #chapterUI .tc-box { width: 852px; padding: 40px 34px; }
body.portrait #chapterUI .tc-box b { font-size: 44px; }
body.portrait #chapterUI .tc-box span { font-size: 32px; }
body.portrait #chapterUI .tc-btns .btn, body.portrait #chapterUI .chx-acts .btn, body.portrait #chapterUI .chx-btns .btn { font-size: 32px; padding: 20px 36px; }
body.portrait #chapterUI .chx-eyebrow { font-size: 24px; }
body.portrait #chapterUI h1 { font-size: 84px; }
body.portrait #chapterUI h2 { font-size: 64px; }
body.portrait #chapterUI .chx-sub, body.portrait #chapterUI .chx-beat { font-size: 32px; }
body.portrait #chapterUI .chx-note { font-size: 26px; }
body.portrait #chapterUI .chx-nodes { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
body.portrait #chapterUI .chx-nodes::before { left: 90px; right: auto; top: 60px; bottom: 60px; width: 4px; height: auto; }
body.portrait #chapterUI .chx-node { grid-template-columns: 150px 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 26px; row-gap: 2px; padding: 0 10px; }
body.portrait #chapterUI .cn-face { grid-row: 1 / 4; width: 150px; height: 150px; }
body.portrait #chapterUI .cn-k { font-size: 22px; margin-top: 18px; }
body.portrait #chapterUI .cn-t { font-size: 36px; }
body.portrait #chapterUI .cn-o { font-size: 26px; }
body.portrait #chapterUI .cn-ok { top: 104px; left: 108px; width: 46px; height: 46px; }
body.portrait #chapterUI .chx-acts { flex-direction: column; align-items: center; }
body.portrait #chapterUI .chx-sctitle { left: 30px; top: 110px; }
body.portrait #chapterUI .chx-sctitle b { font-size: 46px; }
body.portrait #chapterUI .chx-sctitle span { font-size: 22px; }
body.portrait #chapterUI .chx-actor { left: 50%; translate: -50% 0; bottom: auto; top: 260px; width: 440px; height: 440px; }
body.portrait #chapterUI .chx-actor.pop { animation: none; }
body.portrait #chapterUI .chx-box { left: 24px; right: 24px; bottom: 40px; min-height: 420px; padding: 34px 34px 120px; }
body.portrait #chapterUI .chx-who { flex-direction: column; gap: 6px; }
body.portrait #chapterUI .chx-who b { font-size: 42px; }
body.portrait #chapterUI .chx-who em { font-size: 22px; }
body.portrait #chapterUI .chx-line { font-size: 38px; padding-right: 0; }
body.portrait #chapterUI .chx-btns { left: 30px; right: 30px; bottom: 28px; justify-content: space-between; }
body.portrait #chapterUI .chx-tap { display: none; }
body.portrait #chapterUI .chx-rws { flex-direction: column; gap: 26px; }
body.portrait #chapterUI .chx-rw > b { font-size: 64px; }
body.portrait #chapterUI .chx-rw > span { font-size: 26px; }
body.portrait #chapterUI .chx-cardslot { width: 260px; height: 364px; }
body.portrait #chapterUI .chx-beat img { width: 110px; height: 110px; }
body.portrait #chapterUI .chx-fan { height: 560px; }
body.portrait #chapterUI .chx-fa { width: 250px; margin: 0 -80px; }
body.portrait #chapterUI .chx-final.one .chx-fa { width: 400px; }
body.fx-low #chapterUI .chx-art, body.fx-low #chapterUI .cn-face { animation: none; }
#chapterUI.still .chx-art { animation: none; }
@media (prefers-reduced-motion: reduce) { #chapterUI .chx-art, #chapterUI .chx-node.cur .cn-face, #chapterUI .chx-fa, #tutLayer .tut-quip.on { animation: none; } }
body.lite #chapterUI .chx-art, body.fx-low #chapterUI .chx-art { filter: none; animation: none; inset: 0; opacity: .62; }
body.lite #chapterUI[data-mode="scene"] .chx-art, body.fx-low #chapterUI[data-mode="scene"] .chx-art { opacity: .78; }
body.lite #chapterUI .chx-confirm, body.lite #tutLayer .tut-confirm, body.fx-low #chapterUI .chx-confirm, body.fx-low #tutLayer .tut-confirm { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 2, 14, .86); }
/* css/fullart.css */
.lc.fa-card { aspect-ratio: 560 / 832; background: #140c24; transform: perspective(900px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); transition: transform .35s var(--ease-out, ease-out), filter .3s;
box-shadow: 0 0 0 2px rgba(255, 225, 150, .9), 0 0 26px rgba(255, 211, 110, .45), 0 16px 34px rgba(0, 0, 0, .6); will-change: transform; }
.lc.fa-card.fa-promo { aspect-ratio: 2 / 3; }
.lc.fa-card.fa-tilting { transition: transform .08s linear; }
.lc.fa-card::after, .lc.fa-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 3px; z-index: 5;
background: conic-gradient(from var(--ang, 0deg), #ffd36e, #ff9de2, #9ad8ff, #fff4a8, #b7ffcf, #ffd36e);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
animation: spinAng 4s linear infinite; }
.fa-holo { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: color-dodge; opacity: .42;
background: conic-gradient(from var(--ang, 0deg) at var(--gx, 50%) var(--gy, 40%), rgba(255, 120, 220, .32), rgba(120, 220, 255, .32), rgba(255, 250, 150, .32), rgba(140, 255, 190, .32), rgba(255, 120, 220, .32));
animation: spinAng 7s linear infinite; }
.fa-holo::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 3cqw, rgba(255, 255, 255, .22) 3.5cqw, rgba(255, 255, 255, 0) 4.2cqw 8cqw); background-size: 200% 200%; animation: faStripes 6s linear infinite; }
@keyframes faStripes { to { background-position: 200% 0; } }
.fa-glare { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 45%); }
.lc.fa-card:hover .fa-glare, .lc.fa-card.fa-tilting .fa-glare { opacity: 1; }
.fa-stamp { position: absolute; top: 3.2%; right: 4.5%; z-index: 4; display: inline-flex; align-items: center; gap: .9cqw; padding: 1.3cqw 3.2cqw 1.1cqw 2.6cqw; border-radius: 99px; pointer-events: none;
font: 900 4.6cqw/1 var(--font-title, Cinzel, serif); letter-spacing: .14em; color: #2b1600; white-space: nowrap;
background: linear-gradient(180deg, #fff3c4, #f2c14e 55%, #b67a1c); box-shadow: 0 0 0 .45cqw rgba(255, 255, 255, .85), 0 .8cqw 2cqw rgba(0, 0, 0, .55), 0 0 3cqw rgba(255, 211, 110, .75); }
.fa-stamp i { font-style: normal; color: #7a3d00; }
.lc.fa-card .plate, .lc.fa-card .lp-plate { z-index: 3; }
.lc.fa-card.fa-locked { box-shadow: 0 0 0 1px rgba(255, 225, 150, .25), 0 10px 24px rgba(0, 0, 0, .5); transform: none; }
.lc.fa-card.fa-locked::after { display: none; }
.lc.fa-card.fa-locked img { filter: grayscale(1) brightness(.3) contrast(1.25) blur(1.5px); }
.lc.fa-card.fa-locked .plate, .lc.fa-card.fa-locked .lp-plate { opacity: .35; }
.fa-lock { position: absolute; left: 50%; top: 42%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; z-index: 3;
border: .6cqw solid rgba(255, 211, 110, .45); background: rgba(10, 5, 24, .7); }
.fa-lock i { font-style: normal; font-size: 12cqw; color: rgba(255, 211, 110, .55); }
.lc.fa-on .fa-holo { opacity: .34; }
.lc.fa-on .fa-stamp { top: 12%; right: auto; left: 4%; font-size: 4.4cqw; }
.lc.fa-on .plate, .lc.fa-on .lpow { z-index: 3; }
.card .face.lcf.fa-face { background: #140c24; }
.card .face.lcf.fa-face > .fa-art { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.card .face.lcf.fa-face > .fa-bar, .card .face.lcf.fa-face > .fa-panel, .card .face.lcf.fa-face > .fa-gem { position: absolute; z-index: 1; pointer-events: none; }
.fa-face .fa-bar { left: 3.2%; top: 3%; width: 65%; height: 13.2%; border-radius: 3.4cqw; background: linear-gradient(180deg, rgba(20, 10, 40, .78), rgba(20, 10, 40, .6));
box-shadow: inset 0 0 0 .45cqw rgba(255, 225, 150, .7), 0 .8cqw 2cqw rgba(0, 0, 0, .45); backdrop-filter: blur(3px); }
.fa-face .fa-gem { left: 89.58%; top: 6.9%; width: 17cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 60%, #fff), var(--fd) 75%); box-shadow: 0 0 0 .8cqw #e9c46a, 0 0 0 1.3cqw rgba(60, 30, 0, .7), 0 1cqw 2.4cqw rgba(0, 0, 0, .6); }
.fa-face .fa-panel { left: 4%; right: 4%; top: 55.2%; bottom: 2.4%; border-radius: 4.4cqw; background: linear-gradient(180deg, rgba(14, 7, 30, .66), rgba(14, 7, 30, .82));
box-shadow: inset 0 0 0 .45cqw rgba(255, 225, 150, .55), 0 -1cqw 3cqw rgba(0, 0, 0, .35); backdrop-filter: blur(4px); }
.lcf.fa-face .cf-name { color: #fff4d6; text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .9); }
.lcf.fa-face .cf-name .cf-ep, .lcf.fa-face.cf-tiny .cf-name .cf-ep { color: #f2d9a6; font-style: italic; }
.lcf.fa-face .cf-type { color: #f6e7c8; text-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .9); }
.lcf.fa-face .cf-rules { color: #f3ecff; text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .8); }
.lcf.fa-face .cf-t b { color: #ffd98a; } .lcf.fa-face .cf-t em { color: #ffe9b8; }
.lcf.fa-face .cf-f { color: #d9c7a6; background: linear-gradient(90deg, transparent, rgba(255, 225, 150, .5), transparent) top center / 40% 1px no-repeat; }
.card .face.lcf.fa-face > .fa-stamp { top: 49.4%; right: 5.5%; font-size: 3.4cqw; padding: .9cqw 2.4cqw .8cqw 2cqw; }
.lcf.fa-face.cf-tiny > .fa-stamp { font-size: 4.2cqw; top: 48.2%; }
.card .face.lcf.fa-face > .fa-holo { z-index: 0; opacity: .34; }
.card:has(.fa-face) .face { box-shadow: 0 0 0 1px rgba(255, 225, 150, .6), 0 0 16px rgba(255, 211, 110, .35), 0 6px 16px rgba(0, 0, 0, .55); }
.grid .slotc.fa-slot { display: flex; justify-content: center; }
.grid .slotc.fa-slot .fa-card { height: 100%; width: auto; cursor: pointer; }
.grid .slotc.fa-slot:not(.owned0) .fa-card:hover { transform: perspective(900px) translateY(-8px) scale(1.05) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); }
.fa-where, .fa-off, .fa-n { position: absolute; z-index: 6; pointer-events: none; white-space: nowrap; font: 800 11px/1.2 var(--font-ui, Inter, sans-serif); letter-spacing: .06em; border-radius: 99px; }
.fa-where { left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px; color: #ffe9b0; background: rgba(12, 6, 26, .88); border: 1px solid rgba(255, 211, 110, .4); }
.fa-off { left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px; color: #d9c8f0; background: rgba(12, 6, 26, .85); }
.fa-n { top: -8px; right: 2px; padding: 3px 9px; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e); }
body.mobile .fa-where, body.mobile .fa-off { font-size: 15px; } body.mobile .fa-n { font-size: 15px; }
body.portrait .fa-where, body.portrait .fa-off { font-size: 20px; padding: 6px 14px; bottom: 16px; } body.portrait .fa-n { font-size: 20px; padding: 4px 12px; }
#inspect .fa-stage .big { display: flex; justify-content: center; }
#inspect .fa-stage .big .fa-card { height: 100%; width: auto; }
.fa-chip, .lc-rar.fa-rar { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 11px; border-radius: 99px; font: 900 12px/1.2 var(--font-ui, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase;
color: #2b1600; background: linear-gradient(110deg, #ffd36e, #ff9de2 35%, #9ad8ff 60%, #fff4a8 85%); background-size: 200% 100%; animation: lcfHolo 5s linear infinite; box-shadow: 0 0 14px rgba(255, 211, 110, .5); }
.fa-chip i, .lc-rar.fa-rar i { font-style: normal; }
.lc-rar.fa-rar i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: #fff; box-shadow: 0 0 6px #fff; }
.fa-ctl { gap: 12px; }
.fa-switch { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 211, 110, .35); background: rgba(12, 6, 26, .55); color: #fff4d6; text-align: left; cursor: pointer; font: inherit; }
.fa-switch > i { flex: none; position: relative; width: 50px; height: 28px; border-radius: 99px; background: #3a2d52; transition: background .25s; }
.fa-switch > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #d9c8f0; transition: transform .25s var(--ease-back, ease), background .25s; }
.fa-switch.on > i { background: linear-gradient(90deg, #f2c14e, #ff9de2); }
.fa-switch.on > i::after { transform: translateX(22px); background: #fff; }
.fa-switch span { display: flex; flex-direction: column; gap: 2px; } .fa-switch b { font-size: 15px; } .fa-switch small { font-size: 12.5px; color: #cdbfe6; }
.fa-switch:disabled { opacity: .6; }
.fa-row { appearance: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px dashed rgba(255, 211, 110, .35); background: rgba(12, 6, 26, .4); color: #e8dcc0; font: 700 13px var(--font-ui, Inter, sans-serif); cursor: pointer; text-align: left; }
.fa-row.own { border-style: solid; color: #ffe9b0; box-shadow: 0 0 14px rgba(255, 211, 110, .25); }
.fa-row i { font-style: normal; color: #ffd36e; } .fa-row span { flex: 1; } .fa-row .lci { width: 16px; height: 16px; transform: rotate(-90deg); }
body.mobile .fa-switch b { font-size: 21px; } body.mobile .fa-switch small { font-size: 17px; } body.mobile .fa-row { font-size: 18px; } body.mobile .fa-chip { font-size: 16px; }
body.portrait .fa-switch b { font-size: 24px; } body.portrait .fa-switch small { font-size: 19px; } body.portrait .fa-switch > i { width: 70px; height: 38px; }
body.portrait .fa-switch > i::after { width: 30px; height: 30px; top: 4px; left: 4px; } body.portrait .fa-switch.on > i::after { transform: translateX(32px); }
body.portrait .fa-row { font-size: 21px; padding: 12px 16px; } body.portrait .fa-chip { font-size: 18px; padding: 7px 16px; }
#opening .labels .pk-lab span.lc-rar.fa-rar { display: inline-flex; font: 900 11.5px/1.2 var(--font-ui, Inter, sans-serif); letter-spacing: .16em; padding: 5px 13px; border-radius: 99px; color: #2b1600;
background: linear-gradient(110deg, #ffd36e, #ff9de2 35%, #9ad8ff 60%, #fff4a8 85%); background-size: 200% 100%; animation: lcfHolo 5s linear infinite; box-shadow: 0 0 16px rgba(255, 211, 110, .7); }
#opening .labels .pk-lab span.pk-fa-note { display: block; margin-top: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(10, 5, 24, .9); border: 1px solid rgba(255, 211, 110, .45); color: #ffe9b0; font: 800 11.5px var(--font-ui, Inter, sans-serif); }
.pk-rc.pk-rc-fa b { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e); }
.pk-fa-note { display: block; margin-top: 6px; padding: 4px 10px; border-radius: 99px; font: 800 11.5px var(--font-ui, Inter, sans-serif); color: #ffe9b0; background: rgba(10, 5, 24, .9); border: 1px solid rgba(255, 211, 110, .45); white-space: nowrap; text-align: center; }
#opening .labels .pk-lab { display: flex; flex-direction: column; align-items: center; }
.pk-banner.fa-banner small.fa-bs { color: transparent; background: linear-gradient(110deg, #ffd36e, #ff9de2 30%, #9ad8ff 55%, #fff4a8 80%, #ffd36e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
text-shadow: none; animation: lcfHolo 3s linear infinite; font-size: 18px; letter-spacing: .5em; }
#opening::after { content: ""; position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
background: conic-gradient(from var(--ang, 0deg), rgba(255, 211, 110, .0), rgba(255, 157, 226, .5), rgba(154, 216, 255, .5), rgba(255, 244, 168, .55), rgba(183, 255, 207, .45), rgba(255, 211, 110, .0));
filter: blur(40px); }
#opening.fa-burst::after { animation: faBurst 2.4s ease-out, spinAng 3s linear infinite; }
@keyframes faBurst { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: .95; } 100% { opacity: 0; transform: scale(1.15); } }
.pk-fcell.pk-fa { animation-duration: .9s; }
.pk-fcell .pk-fa-card { height: 280px; width: auto; animation: faFlipIn 1.2s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 140ms + 500ms); }
@keyframes faFlipIn { 0% { transform: perspective(900px) rotateY(180deg) scale(.8); filter: brightness(0); } 55% { filter: brightness(1.8); } 100% { transform: perspective(900px); filter: none; } }
body.portrait .pk-fcell .pk-fa-card { height: 358px; }
body.mobile .pk-fa-note { font-size: 16px; } body.portrait .pk-fa-note { font-size: 19px; padding: 6px 14px; }
body.mobile #opening .labels .pk-lab .lc-rar.fa-rar { font-size: 17px; } body.portrait #opening .labels .pk-lab .lc-rar.fa-rar { font-size: 20px; padding: 8px 18px; }
.note .fa-note { color: #ffe9b0; } .note .fa-note i { font-style: normal; color: #ffd36e; }
body.fx-low .fa-holo, body.fx-low .fa-holo::after, body.fx-low .lc.fa-card::after, body.fx-low .lc.fa-on::after, body.fx-low .fa-chip, body.fx-low .lc-rar.fa-rar,
body.fx-low #opening.fa-burst::after, body.fx-low .pk-fcell .pk-fa-card, body.fx-low .pk-banner.fa-banner small.fa-bs { animation: none !important; }
body.fx-low .lc.fa-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
.fa-holo, .fa-holo::after, .lc.fa-card::after, .lc.fa-on::after, .fa-chip, .lc-rar.fa-rar, #opening.fa-burst::after, .pk-fcell .pk-fa-card, .pk-banner.fa-banner small.fa-bs { animation: none !important; }
.lc.fa-card { transform: none !important; }
}
#shop .packs.has-trav .shoppack { width: 232px; }
#shop .packs.has-trav .shoppack img { max-width: 222px; }
#shop .shoppack.trav .sp-tilt img { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .7)) hue-rotate(0deg) saturate(1.15); }
.tv-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35; border-radius: 8px;
background: conic-gradient(from var(--ang, 0deg), rgba(255, 157, 226, .5), rgba(154, 216, 255, .5), rgba(255, 244, 168, .5), rgba(183, 255, 207, .5), rgba(255, 157, 226, .5));
-webkit-mask: url("../../assets/packs/6.webp") center / contain no-repeat; mask: url("../../assets/packs/6.webp") center / contain no-repeat; animation: spinAng 6s linear infinite; }
.tv-n { position: absolute; right: 8px; top: 30px; z-index: 3; font: 900 22px/1 var(--font-title); font-style: normal; color: #2b1600; padding: 7px 12px; border-radius: 99px;
background: linear-gradient(180deg, #fff0c2, #f2c14e 55%, #c98a22); box-shadow: 0 0 18px rgba(242, 193, 78, .8); }
#shop .shoppack.trav .nm { background: linear-gradient(110deg, #ffd36e, #ff9de2 30%, #9ad8ff 55%, #fff4a8 80%, #ffd36e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: lcfHolo 4s linear infinite; }
.tv-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 10px 0 6px; }
.tv-col { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px; border-radius: 16px; cursor: pointer; font: inherit; color: #fff4d6;
border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--c) 35%, transparent), rgba(12, 6, 26, .85) 70%);
transition: transform .2s var(--ease-back, ease), box-shadow .2s; }
.tv-col:hover, .tv-col:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); }
.tv-col .setgem { width: 26px; height: 26px; }
.tv-col b { font: 900 17px var(--font-title); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #fff); }
.tv-col span { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; }
body.portrait .tv-pick { grid-template-columns: 1fr; gap: 14px; } body.portrait .tv-col { flex-direction: row; justify-content: flex-start; padding: 18px 22px; gap: 18px; }
body.portrait .tv-col b { font-size: 28px; } body.portrait .tv-col span { font-size: 20px; text-align: left; } body.portrait .tv-col .setgem { width: 40px; height: 40px; }
body.mobile .tv-col b { font-size: 22px; } body.mobile .tv-col span { font-size: 16px; }
#shop .note .sp-code { appearance: none; border: 1px solid rgba(232, 186, 90, .45); background: rgba(12, 6, 26, .6); color: #f6d98a; font: 800 12.5px var(--font-ui, Inter, sans-serif); letter-spacing: .08em;
padding: 5px 14px; border-radius: 99px; cursor: pointer; }
#shop .note .sp-code:hover { background: rgba(242, 193, 78, .18); }
body.mobile #shop .note .sp-code { font-size: 18px; padding: 8px 18px; } body.portrait #shop .note .sp-code { font-size: 20px; padding: 10px 20px; }
.sp-codef { display: flex; gap: 10px; margin: 8px 0; }
.sp-codef input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(232, 186, 90, .45); background: rgba(10, 5, 24, .8); color: #fff4d6; font: 700 16px var(--font-ui, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.sp-ok { color: #b7ffcf; font: 900 20px var(--font-title); text-align: center; } .sp-ok:empty { display: none; }
body.portrait .sp-codef input { font-size: 24px; padding: 16px 18px; } body.portrait .sp-ok { font-size: 30px; }
body.fx-low .tv-foil, body.fx-low #shop .shoppack.trav .nm { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tv-foil, #shop .shoppack.trav .nm { animation: none !important; } }
body:not(.portrait) #opening.pk-ready .hint { bottom: 36px; }
body:not(.portrait) .pk-fallback { top: 50%; transform: translateY(-62%); }
#deckbuilder .drow.has-fa { grid-template-columns: 32px 1fr auto auto; }
.dr-fa { appearance: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px 0 7px; border-radius: 99px; cursor: pointer; position: relative; z-index: 3;
font: 800 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #c9bce0; background: rgba(8, 4, 18, .82); border: 1px solid rgba(255, 211, 110, .3); }
.dr-fa i { font-style: normal; font-size: 13px; color: #6d5f86; transition: color .2s, text-shadow .2s; }
.dr-fa.on { color: #2b1600; background: linear-gradient(180deg, #fff3c4, #f2c14e 55%, #c98d2a); border-color: rgba(255, 255, 255, .8); box-shadow: 0 0 10px rgba(255, 211, 110, .45); }
.dr-fa.on i { color: #2b1600; text-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.dr-fa:hover { border-color: #ffd36e; } .dr-fa:disabled { opacity: .6; cursor: wait; }
.dr-fa:focus-visible, .dl-fachoose button:focus-visible { outline: 2px solid #ffd36e; outline-offset: 2px; }
#deckbuilder .drow .dr-fa ~ .dr-q { margin-left: 2px; }
.dl-fachoose { display: flex; align-items: center; gap: 6px; flex: none; margin: -1px 0 3px 10px; padding: 6px 6px 6px 10px; border-radius: 0 0 10px 10px;
background: linear-gradient(90deg, rgba(60, 38, 8, .92), rgba(20, 11, 40, .9)); border: 1px solid rgba(255, 211, 110, .45); border-top: 0; }
.dl-fachoose > span { flex: 1; min-width: 0; font: 800 12px/1.2 var(--font-ui); color: #fff4d6; }
.dl-fachoose > span i { font-style: normal; color: #ffd36e; margin-right: 5px; }
.dl-fachoose button { appearance: none; min-height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: 800 12px var(--font-ui); color: #f3ecff; background: rgba(8, 4, 18, .8); border: 1px solid rgba(255, 255, 255, .25); }
.dl-fachoose button.fa1 { color: #2b1600; background: linear-gradient(180deg, #fff3c4, #f2c14e 55%, #c98d2a); border-color: rgba(255, 255, 255, .7); }
.dl-fachoose button:hover { filter: brightness(1.12); } .dl-fachoose button:disabled { opacity: .6; cursor: wait; }
.dl-names .dl-fachoose { margin: -2px 0 0; border-radius: 10px; border-top: 1px solid rgba(255, 211, 110, .45); }
.dl-names { position: relative; }
.dl-lfa { position: absolute; top: 2px; right: 30px; height: 44px; display: flex; align-items: center; z-index: 3; }
.dl-names .dl-lfa .dr-fa span { display: none; }
.dl-names .dl-lfa .dr-fa { padding: 0 8px; }
body.mobile #deckbuilder .drow.has-fa { height: 100px; grid-template-columns: 42px 1fr auto auto; }
body.mobile .dr-fa { height: 92px; min-width: 92px; padding: 0 16px 0 12px; gap: 8px; font-size: 17px; border-radius: 16px; justify-content: center; }
body.mobile .dr-fa i { font-size: 26px; }
body.mobile .dl-fachoose { gap: 10px; padding: 8px 8px 8px 16px; }
body.mobile .dl-fachoose > span { font-size: 19px; }
body.mobile .dl-fachoose button { min-height: 92px; padding: 0 20px; font-size: 20px; border-radius: 14px; }
body.mobile .dl-lfa { top: 4px; right: 40px; height: 80px; }
body.portrait #deckbuilder .dl-dock .drow.has-fa { height: 96px; grid-template-columns: 62px 1fr auto auto; }
body.portrait #deckbuilder .dl-dock .dr-fa { height: 92px; min-width: 100px; font-size: 20px; padding: 0 18px 0 14px; }
body.portrait #deckbuilder .dl-dock .dr-fa i { font-size: 30px; }
body.portrait .dl-dock .dl-fachoose { margin-left: 16px; padding: 10px 10px 10px 20px; gap: 14px; }
body.portrait .dl-dock .dl-fachoose > span { font-size: 26px; }
body.portrait .dl-dock .dl-fachoose button { min-height: 96px; padding: 0 26px; font-size: 26px; border-radius: 16px; }
body.portrait .dl-dock .dl-lfa { top: 2px; right: 56px; height: 92px; }
body.portrait .dl-dock .dl-names .dl-fachoose { flex: 1 1 100%; margin-left: 0; }
body.lite .dr-fa.on, body.fx-low .dr-fa.on { box-shadow: none; }
body.mobile:not(.portrait) .dl-lfa { position: static; height: auto; }
body.mobile:not(.portrait) .dl-names .dl-lfa .dr-fa { width: 100%; height: 92px; justify-content: center; }
body.mobile:not(.portrait) .dl-names .dl-lfa .dr-fa span { display: inline; }
#deckbuilder .drow.has-fa .dr-off { right: 118px; }
body.mobile #deckbuilder .drow.has-fa .dr-off { right: 170px; }
body.portrait #deckbuilder .dl-dock .drow.has-fa .dr-off { right: 196px; }
.lc.fa-card.fa-set1 { aspect-ratio: 2 / 3; }
.lc.fa-card.fa-set1 > img { object-fit: cover; object-position: 50% 30%; }
.lc.fa-card .fa-cplate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16cqw 5cqw 5cqw; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
background: linear-gradient(180deg, rgba(14, 7, 30, 0), rgba(14, 7, 30, .78) 45%, rgba(14, 7, 30, .92)); }
.lc.fa-card .fa-cplate b { font: 700 7.4cqw/1.1 "Old Standard TT", Georgia, serif; color: #fff4d6; text-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .9); }
.lc.fa-card .fa-cplate em { font: italic 400 4.6cqw/1.2 "Old Standard TT", Georgia, serif; color: #f2d9a6; margin-top: .6cqw; }
.lc.fa-card.fa-locked .fa-cplate { opacity: .45; }
/* css/leaders.css */
.lcpips { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; vertical-align: middle; flex: none; }
.lcpips i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(8, 4, 18, .85), 0 0 7px color-mix(in srgb, var(--c) 70%, transparent); }
#select .leaders.l14 { gap: 10px; left: 24px; right: 24px; align-items: flex-start; }
#select .leaders.l14 .leaderPick { flex: 0 1 132px; width: auto; min-width: 0; }
#select .leaders.l14 .leaderPick .lc { width: 100%; height: auto; aspect-ratio: 184 / 274; }
#select .leaders.l14 .leaderPick .setname { margin-top: 9px; gap: 4px; }
#select .leaders.l14 .leaderPick .setname b { font-size: 14px; }
#select .leaders.l14 .leaderPick .setname span { display: block; max-width: 100%; text-align: center; font-size: 8.5px; line-height: 1.35; letter-spacing: .08em; white-space: normal; }
#select .leaders.l14 .leaderPick .setname span .lcpips { display: flex; justify-content: center; margin: 0 0 3px; }
#select .leaders.l14 .leaderPick .setname .lcpips i { width: 8px; height: 8px; }
#select .leaders .lsep { flex: none; align-self: stretch; width: 2px; margin: 8px 6px 34px; border-radius: 2px; position: relative;
background: linear-gradient(180deg, transparent, rgba(242, 193, 78, .7), transparent); }
#select .leaders .lsep span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; padding: 3px 8px; border-radius: 99px;
font: 800 9px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-1); background: rgba(12, 7, 26, .92); }
#select .detail .dt-colors { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-dim); }
#select .detail .dt-colors b { color: #f1e8ff; }
#select .detail .dt-offnote { margin: 0; font-size: 11.5px; color: #ffb86b; line-height: 1.3; }
.hdeck .hd-txt span .lcpips { margin-right: 5px; }
.lrow b .lcpips { margin: 0 0 0 8px; }
.dl-leader { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 10px 5px 5px; border-radius: 10px; cursor: pointer; text-align: left; color: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, rgba(8, 4, 18, .8)), rgba(8, 4, 18, .7)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.dl-leader:hover { border-color: var(--gold-1); }
.dl-leader .lci { width: 14px; height: 14px; margin-left: auto; opacity: .7; }
.dl-la { flex: none; width: 34px; height: 34px; border-radius: 8px; background-size: cover; background-position: 50% 20%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.dl-lt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.dl-lt small { font: 800 9px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.dl-lt b { font: 800 15px/1.2 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; max-height: 58vh; overflow-y: auto; padding: 2px; }
.dl-lopt { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; text-align: left; color: inherit;
background: rgba(8, 4, 18, .6); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.dl-lopt .dl-la { grid-row: 1 / 3; width: 44px; height: 44px; }
.dl-lopt b { font: 800 14px/1.1 var(--font-title); color: #fff4d6; display: flex; align-items: center; }
.dl-lopt .lcpips { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
.dl-lopt em { grid-column: 2; font-style: normal; font-size: 11.5px; color: var(--ink-dim); }
.dl-lopt em.ok { color: #9dffc4; } .dl-lopt em.bad { color: #ffb86b; }
.dl-lopt.on { box-shadow: 0 0 0 2px var(--gold-1); background: color-mix(in srgb, var(--c) 18%, rgba(8, 4, 18, .7)); }
.dl-lopt:hover { border-color: var(--gold-1); }
#deckbuilder .drow.offrow { outline: 1.5px dashed #ffb86b; outline-offset: -2px; }
#deckbuilder .drow.offrow .dr-name { opacity: .72; }
#deckbuilder .drow .dr-off { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2; font: 800 9px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-style: normal;
padding: 3px 6px; border-radius: 99px; color: #2a1206; background: #ffb86b; }
.dnote .warn.off { display: block; margin-bottom: 6px; }
.dl-fix { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; cursor: pointer; font: 800 12px var(--font-ui); color: #2a1206;
background: linear-gradient(180deg, #ffd08a, #ffab4a); border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.dl-fix .lci { width: 14px; height: 14px; }
.dl-menu em.fixme { font-style: normal; font-size: 10px; font-weight: 800; color: #2a1206; background: #ffb86b; padding: 2px 6px; border-radius: 99px; margin-left: 6px; }
.cf-lead { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 46px; padding: 0 8px 0 12px; border-radius: 12px; cursor: pointer;
background: linear-gradient(180deg, rgba(8, 4, 18, .82), rgba(20, 11, 40, .78)); border: 1px solid rgba(232, 186, 90, .2); }
.cf-lead.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px rgba(242, 193, 78, .35); }
.cf-lead select { background: transparent; border: 0; color: inherit; font: 700 13px var(--font-ui); max-width: 150px; cursor: pointer; }
.cf-lead .cf-lead-i { width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(#e8b730, #2f9be8, #3cc460, #e0473a, #a44ee0, #e8b730); }
body.portrait #select .leaders.l14 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 16px; left: auto; right: auto; }
body.portrait #select .leaders.l14 .leaderPick { width: 100%; max-width: 190px; flex: none; }
body.portrait #select .leaders.l14 .leaderPick .lc { width: 100%; height: auto; }
body.portrait #select .leaders.l14 .leaderPick .setname b { font-size: 24px; }
body.portrait #select .leaders.l14 .leaderPick .setname span { font-size: 14px; letter-spacing: .1em; }
body.portrait #select .leaders.l14 .leaderPick .setname .lcpips i { width: 13px; height: 13px; }
body.portrait #select .leaders .lsep { grid-column: 1 / -1; width: auto; height: 2px; margin: 6px 0 0; align-self: center; background: linear-gradient(90deg, transparent, rgba(242, 193, 78, .7), transparent); }
body.portrait #select .leaders .lsep span { transform: translate(-50%, -50%); font-size: 16px; padding: 6px 16px; }
body.portrait #select .detail .dt-colors { font-size: 22px; gap: 8px; }
body.portrait #select .detail .dt-colors .lcpips i { width: 16px; height: 16px; }
body.portrait #select .detail .dt-offnote { grid-column: 1 / -1; font-size: 18px; }
body.portrait .lcpips i { width: 13px; height: 13px; }
body.portrait .dl-dock .dl-names { flex-wrap: wrap; }
body.portrait .dl-leader { height: 96px; padding: 8px 16px 8px 8px; border-radius: 16px; flex: 1 1 100%; min-width: 0; }
body.portrait .dl-la { width: 78px; height: 78px; border-radius: 12px; }
body.portrait .dl-lt small { font-size: 15px; } body.portrait .dl-lt b { font-size: 28px; }
body.portrait .dl-leader .lci { width: 24px; height: 24px; }
body.portrait .dl-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-height: 62vh; }
body.portrait .dl-lopt { grid-template-columns: 84px 1fr; padding: 14px; border-radius: 18px; column-gap: 16px; }
body.portrait .dl-lopt .dl-la { width: 84px; height: 84px; }
body.portrait .dl-lopt b { font-size: 28px; } body.portrait .dl-lopt em { font-size: 20px; }
body.portrait #deckbuilder .drow .dr-off { right: 78px; font-size: 16px; padding: 5px 10px; }
body.portrait .dnote .dl-fix { font-size: 24px; padding: 14px 22px; } body.portrait .dl-fix .lci { width: 24px; height: 24px; }
body.portrait .dl-menu em.fixme { font-size: 18px; padding: 4px 10px; }
body.portrait .cf-p .cf-lead { height: 96px; padding: 0 12px 0 18px; border-radius: 18px; }
body.portrait .cf-p .cf-lead select { font-size: 24px; max-width: 220px; }
#select .leaderPick.locked .lc { filter: grayscale(.85) brightness(.55); }
#select .leaderPick.locked.sel .lc { filter: grayscale(.5) brightness(.75); }
#select .leaderPick .lp-lock { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 86%; padding: 8px 6px; border-radius: 12px; background: rgba(10, 6, 22, .82); border: 1px solid rgba(255, 220, 150, .35); color: #ffe7a8; font: 800 11px/1.2 var(--font-ui); letter-spacing: .04em; text-align: center; pointer-events: none; }
#select .leaderPick .lp-lock .lci { width: 18px; height: 18px; }
body.mobile #select .leaderPick .lp-lock, body.portrait #select .leaderPick .lp-lock { font-size: 16px; } body.mobile #select .leaderPick .lp-lock .lci, body.portrait #select .leaderPick .lp-lock .lci { width: 26px; height: 26px; }
#select .detail .dt-locknote { margin: 6px 0 2px; color: #ffe7a8; font-size: 14px; line-height: 1.35; } #select .detail .dt-locknote .lci { width: 16px; height: 16px; vertical-align: -3px; }
body.mobile #select .detail .dt-locknote, body.portrait #select .detail .dt-locknote { font-size: 20px; }
.dl-lopt.locked { opacity: .55; } .dl-lopt.locked .dl-la { filter: grayscale(.85); }
.dl-lopt em.lk { color: #ffe7a8; } .dl-lopt em.lk .lci { width: 12px; height: 12px; vertical-align: -2px; }
#opening .pk-ld-card .fa-stamp { display: none; }
#opening .pk-ld-card { filter: none; }
/* css/feedback.css */
#fbSheet { --fbk: 1; position: absolute; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(5, 2, 14, .74);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .18s ease; font-family: var(--font-ui); color: var(--ink); }
body.mobile #fbSheet { --fbk: 1.45; }
body.portrait #fbSheet { --fbk: 1.75; }
#fbSheet.on { opacity: 1; }
#fbSheet .fb-box { position: relative; width: min(calc(640px * var(--fbk)), calc(100% - 48px)); max-height: calc(100% - 48px); overflow: hidden;
padding: calc(22px * var(--fbk)) calc(26px * var(--fbk)); border-radius: calc(18px * var(--fbk)); border: 1px solid rgba(232, 186, 90, .45);
background: radial-gradient(120% 80% at 50% 0%, rgba(168, 107, 255, .16), transparent 60%), linear-gradient(180deg, #1a1033, #0e0820);
box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .3, 1.2); }
#fbSheet.on .fb-box { transform: none; }
#fbSheet .fb-head { display: flex; align-items: center; gap: 12px; }
#fbSheet h2 { flex: 1; margin: 0; font: 800 calc(26px * var(--fbk))/1.1 var(--font-title); letter-spacing: .04em; color: var(--gold); }
#fbSheet .fb-x { appearance: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); border-radius: 50%; width: calc(38px * var(--fbk)); height: calc(38px * var(--fbk));
display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
#fbSheet .fb-x svg, #fbSheet .fb-x .ico { width: 55%; height: 55%; }
#fbSheet .fb-sub { margin: calc(8px * var(--fbk)) 0 calc(14px * var(--fbk)); color: var(--muted); font-size: calc(15px * var(--fbk)); line-height: 1.4; }
#fbSheet .fb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8px * var(--fbk)); margin-bottom: calc(12px * var(--fbk)); }
#fbSheet .fb-cats button { appearance: none; cursor: pointer; padding: calc(9px * var(--fbk)) 6px; border-radius: calc(10px * var(--fbk)); border: 1px solid var(--line);
background: rgba(255, 255, 255, .04); color: var(--ink); font: 700 calc(15px * var(--fbk)) var(--font-ui); transition: background .15s, border-color .15s, color .15s; }
#fbSheet .fb-cats button.on { border-color: var(--gold); background: rgba(242, 193, 78, .16); color: #ffe7a6; box-shadow: 0 0 14px rgba(242, 193, 78, .25); }
#fbSheet textarea { display: block; width: 100%; resize: none; min-height: calc(120px * var(--fbk)); padding: calc(10px * var(--fbk)) calc(12px * var(--fbk)); border-radius: calc(10px * var(--fbk));
border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); font: 400 calc(15px * var(--fbk))/1.45 var(--font-ui); user-select: text; -webkit-user-select: text; touch-action: auto; }
#fbSheet textarea { font-size: max(16px, calc(15px * var(--fbk))) !important; }
#fbSheet textarea:focus { outline: none; border-color: var(--crystal); box-shadow: 0 0 0 3px rgba(168, 107, 255, .2); }
#fbSheet .fb-chk { display: flex; gap: 10px; align-items: flex-start; margin-top: calc(12px * var(--fbk)); font-size: calc(14px * var(--fbk)); color: var(--ink); cursor: pointer; }
#fbSheet .fb-chk input { width: calc(18px * var(--fbk)); height: calc(18px * var(--fbk)); margin: 2px 0 0; accent-color: var(--gold); flex: none; }
#fbSheet .fb-note { margin-top: calc(6px * var(--fbk)); color: var(--muted); font-size: calc(12.5px * var(--fbk)); }
#fbSheet .fb-err { min-height: calc(18px * var(--fbk)); margin-top: calc(8px * var(--fbk)); color: #ff9c92; font-size: calc(14px * var(--fbk)); }
#fbSheet .fb-acts { display: flex; justify-content: flex-end; gap: calc(10px * var(--fbk)); margin-top: calc(8px * var(--fbk)); }
#fbSheet .fb-acts .btn { font-size: calc(16px * var(--fbk)); padding: calc(10px * var(--fbk)) calc(22px * var(--fbk)); min-width: calc(120px * var(--fbk)); }
#fbSheet .fb-acts .btn[disabled] { opacity: .6; }
#fbSheet .fb-done { text-align: center; padding: calc(10px * var(--fbk)) 0; }
#fbSheet .fb-done > svg, #fbSheet .fb-done > .ico { width: calc(54px * var(--fbk)); height: calc(54px * var(--fbk)); }
#fbSheet .fb-done p { color: var(--muted); font-size: calc(15px * var(--fbk)); margin: 8px 0 14px; }
#fbSheet .fb-done .fb-acts { justify-content: center; }
body.portrait #hub .hubtop #hFeedback { right: 0; top: 240px; }
/* css/aidiff.css */
.aidiff { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 auto 12px; width: 100%; padding: 6px 8px 6px 16px;
border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line, rgba(232, 186, 90, .2)); box-sizing: border-box; }
.aidiff .ad-l { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font-ui, Inter, sans-serif); color: var(--ink-dim, #cdbfe6); letter-spacing: .02em; }
.aidiff .ad-l .ico { width: 18px; height: 18px; color: var(--gold, #e8ba5a); }
.aidiff .ad-seg { display: grid; grid-template-columns: repeat(3, minmax(84px, 1fr)); }
.aidiff .ad-seg button { padding: 7px 12px; font-size: 13px; }
.ffasheet .aidiff { margin-top: -4px; }
body.mobile .aidiff .ad-l { font-size: 19px; } body.mobile .aidiff .ad-seg button { font-size: 19px; padding: 10px 14px; }
body.portrait .aidiff { padding: 10px 10px 10px 20px; border-radius: 20px; margin-bottom: 18px; }
body.portrait .aidiff .ad-l { font-size: 22px; } body.portrait .aidiff .ad-l .ico { width: 26px; height: 26px; }
body.portrait .aidiff .ad-seg { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
body.portrait .aidiff .ad-seg button { font-size: 22px; padding: 16px 12px; border-radius: 12px; }
/* css/friends.css */
.fr-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 18px; align-items: start; }
.fr-main, .fr-add, .fr-reqs { padding: 18px 20px; }
.fr-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fr-list { display: flex; flex-direction: column; gap: 10px; }
.fr-btn { min-height: 52px; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-size: 15px; border-radius: 12px; white-space: nowrap; }
.fr-btn .ico { width: 20px; height: 20px; flex: none; }
.fr-btn:disabled { opacity: .45; cursor: default; }
.fr-danger { color: #ffb2a6; border-color: rgba(255, 120, 100, .45); }
.fr-muted { color: var(--muted); margin: 6px 0 0; font-size: 15px; }
.fr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fr-tabn { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 99px; font: 900 12px/1 var(--font-ui); font-style: normal; color: #fff2e8; box-sizing: border-box;
background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); vertical-align: middle; }
.fr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px;
background: rgba(255, 255, 255, .035); border: 1px solid rgba(232, 186, 90, .14); }
.fr-row.offline .fr-t b { color: #cfc4b6; }
.fr-avw { position: relative; width: 58px; height: 58px; flex: none; }
.fr-av { display: block; width: 100%; height: 100%; border-radius: 50%; background: #20143a center / cover no-repeat; box-shadow: 0 0 0 2px rgba(232, 186, 90, .5); }
.fr-dot { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #140b26; background: #6f6680; }
.fr-dot.online { background: #4fe08a; box-shadow: 0 0 10px rgba(79, 224, 138, .8); }
.fr-dot.match { background: #f2c14e; box-shadow: 0 0 10px rgba(242, 193, 78, .7); }
.fr-t { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.fr-t b { font: 800 18px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff6e0; }
.fr-t em { font: 600 13px/1.3 var(--font-ui); font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row.online .fr-t em { color: #8ff0b4; } .fr-row.match .fr-t em { color: #f6d680; }
.fr-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fr-menu { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.fr-menu[hidden] { display: none; }
.fr-note { grid-column: 2 / -1; font-size: 13px; color: var(--muted); }
.fr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 18px; color: var(--muted); }
.fr-empty .ico { width: 44px; height: 44px; } .fr-empty b { color: #fff6e0; font-size: 20px; }
.fr-pend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fr-prow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(242, 193, 78, .16), rgba(242, 193, 78, .04)); border: 1px solid rgba(242, 193, 78, .45); }
.fr-prow > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.fr-prow .ico { width: 20px; height: 20px; color: var(--gold-1); flex: none; }
.fr-add { display: flex; flex-direction: column; gap: 10px; }
.fr-add .m-h { margin-bottom: 2px; }
.fr-fld input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px; border-radius: 12px; font: 600 17px var(--font-ui); color: #fff6e0;
background: rgba(8, 4, 18, .7); border: 1px solid rgba(232, 186, 90, .35); }
.fr-fld input:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(242, 193, 78, .25); }
.fr-fld input.bad { border-color: #ff7a66; }
.fr-add .ferr { min-height: 18px; font-size: 14px; color: #ffcf9a; }
.fr-reqs { display: flex; flex-direction: column; gap: 8px; }
.fr-rrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(232, 186, 90, .1); }
.fr-rrow .fr-av { width: 46px; height: 46px; }
.fr-rrow.out .fr-t em { color: #bdb3c9; }
.fr-blocked summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: 14px; }
.fr-blocked .fr-rrow { grid-template-columns: minmax(0, 1fr) auto; }
.fr-guest .fr-big { min-height: 60px; padding: 0 28px; font-size: 18px; display: inline-flex; gap: 10px; align-items: center; margin-top: 10px; }
.hubtop .fr-hbtn { position: relative; }
.hubtop .fr-hbtn::after { content: ""; position: absolute; inset: -10px; }
.fr-hbadge { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font: 900 12px/1 var(--font-ui); color: #fff2e8; box-sizing: border-box;
background: radial-gradient(circle at 35% 30%, #ff9b7a, #c3281c 55%, #6e0f08); box-shadow: 0 0 0 2px rgba(10, 5, 20, .9), 0 0 10px rgba(255, 90, 60, .6); pointer-events: none; }
.fr-inv { position: absolute; left: 50%; top: 22px; z-index: 1150; width: 720px; max-width: calc(100% - 40px); box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
padding: 18px 22px 22px; border-radius: 20px; overflow: hidden; text-align: left;
background: linear-gradient(180deg, rgba(40, 24, 74, .98), rgba(16, 9, 32, .98)); border: 1px solid rgba(242, 193, 78, .7);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(242, 193, 78, .22);
transform: translate(-50%, -140%); opacity: 0; transition: transform .45s var(--ease-back, cubic-bezier(.3, 1.4, .5, 1)), opacity .25s; }
.fr-inv.on { transform: translate(-50%, 0); opacity: 1; }
.fr-inv-av { width: 84px; height: 84px; border-radius: 50%; background: #20143a center / cover no-repeat; box-shadow: 0 0 0 3px rgba(242, 193, 78, .8), 0 0 24px rgba(242, 193, 78, .4); }
.fr-inv-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-inv-t em { display: flex; align-items: center; gap: 8px; font: 800 13px var(--font-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); }
.fr-inv-t em .ico { width: 18px; height: 18px; }
.fr-inv-t b { font: 800 26px/1.15 var(--font-title); color: #fff6e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-inv-t > span { font-size: 16px; color: #e9dfcf; }
.fr-inv-deck { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 12px; align-self: flex-start; max-width: 100%;
border-radius: 10px; border: 1px solid rgba(232, 186, 90, .3); background: rgba(255, 255, 255, .05); color: #d8cdbd; font: 600 14px var(--font-ui); cursor: pointer; }
.fr-inv-deck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-inv-deck u { color: var(--gold-1); text-underline-offset: 3px; }
.fr-inv-deck .ico { width: 18px; height: 18px; flex: none; }
.fr-inv-b { display: flex; flex-direction: column; gap: 10px; }
.fr-inv-b .btn { min-height: 56px; min-width: 150px; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fr-inv-b .btn .ico { width: 20px; height: 20px; }
.fr-inv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .08); }
.fr-inv-bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #f6d06a, #ff9b5a); animation: frDrain linear forwards; }
@keyframes frDrain { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .fr-inv { transition: opacity .2s; } }
.fr-qbadge { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 1100; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
border-radius: 99px; border: 1px solid rgba(242, 193, 78, .7); background: rgba(20, 11, 40, .92); color: #fff6e0; font: 800 14px var(--font-ui); cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, .5); animation: frPulse 2.4s ease-in-out infinite; }
.fr-qbadge .ico { width: 20px; height: 20px; }
@keyframes frPulse { 50% { box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 18px rgba(242, 193, 78, .55); } }
.fr-lbpick { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; margin: 6px 0 14px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(232, 186, 90, .2); text-align: left; }
.fr-lbpick[hidden] { display: none; }
.fr-lbrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fr-lbrow .fr-avw { width: 46px; height: 46px; }
.fr-dks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 480px; overflow-y: auto; margin: 10px 0 18px; text-align: left; }
.fr-dk { appearance: none; display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 14px; border-radius: 12px; cursor: pointer; text-align: left;
border: 1px solid rgba(232, 186, 90, .3); background: rgba(255, 255, 255, .05); color: #fff6e0; font: 800 16px var(--font-ui); }
.fr-dk span { font: 600 13px var(--font-ui); color: var(--muted); }
.fr-dk.on { border-color: var(--gold-1); box-shadow: 0 0 0 2px rgba(242, 193, 78, .35); }
#sheet .box.fr-dksheet { width: 820px; max-width: 94%; }
body.mobile .fr-btn { min-height: 104px; min-width: 104px; font-size: 22px; padding: 0 22px; border-radius: 16px; }
body.mobile .fr-btn .ico { width: 28px; height: 28px; }
body.mobile .fr-avw { width: 84px; height: 84px; } body.mobile .fr-dot { width: 24px; height: 24px; }
body.mobile .fr-t b { font-size: 26px; } body.mobile .fr-t em, body.mobile .fr-note, body.mobile .fr-muted { font-size: 19px; }
body.mobile .fr-fld input { min-height: 104px; font-size: 24px; }
body.mobile .fr-add .ferr { font-size: 19px; }
body.mobile .fr-prow > span { font-size: 20px; }
body.mobile .fr-rrow .fr-av { width: 70px; height: 70px; }
body.mobile .fr-blocked summary { min-height: 104px; font-size: 20px; }
body.mobile .fr-tabn { min-width: 32px; height: 32px; font-size: 17px; }
body.mobile .fr-hbadge { min-width: 34px; height: 34px; font-size: 18px; }
body.mobile .fr-inv { width: 1100px; top: 26px; gap: 24px; padding: 24px 28px 30px; }
body.mobile .fr-inv-av { width: 120px; height: 120px; }
body.mobile .fr-inv-t em { font-size: 19px; } body.mobile .fr-inv-t b { font-size: 38px; } body.mobile .fr-inv-t > span { font-size: 24px; }
body.mobile .fr-inv-deck { min-height: 104px; font-size: 21px; padding: 0 18px; }
body.mobile .fr-inv-b .btn { min-height: 104px; min-width: 220px; font-size: 26px; }
body.mobile .fr-qbadge { min-height: 104px; font-size: 22px; padding: 0 26px; top: 90px; }
body.mobile .fr-dk { min-height: 108px; font-size: 22px; } body.mobile .fr-dk span { font-size: 18px; }
body.mobile .fr-lbpick { max-height: 360px; }
body.portrait .fr-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.portrait .fr-main, body.portrait .fr-add, body.portrait .fr-reqs { padding: 22px; border-radius: 24px; }
body.portrait .fr-row { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
body.portrait .fr-row .fr-acts { grid-column: 1 / -1; justify-content: stretch; }
body.portrait .fr-row .fr-acts .fr-btn { flex: 1 1 0; }
body.portrait .fr-row .fr-acts .fr-more { flex: 0 0 auto; }
body.portrait .fr-note { grid-column: 1 / -1; }
body.portrait .fr-btn { min-height: 104px; font-size: 24px; border-radius: 18px; }
body.portrait .fr-btn .ico { width: 30px; height: 30px; }
body.portrait .fr-avw { width: 92px; height: 92px; } body.portrait .fr-dot { width: 26px; height: 26px; }
body.portrait .fr-t b { font-size: 30px; } body.portrait .fr-t em, body.portrait .fr-note, body.portrait .fr-muted { font-size: 22px; }
body.portrait .fr-fld input { min-height: 104px; font-size: 28px; }
body.portrait .fr-add .ferr { font-size: 21px; }
body.portrait .fr-prow { flex-wrap: wrap; } body.portrait .fr-prow > span { flex: 1 1 100%; font-size: 24px; } body.portrait .fr-prow .fr-btn { flex: 1 1 0; }
body.portrait .fr-rrow .fr-av { width: 76px; height: 76px; }
body.portrait .fr-blocked summary { min-height: 104px; font-size: 22px; }
body.portrait .fr-tabn { min-width: 34px; height: 34px; font-size: 19px; }
body.portrait #hub .hubtop #hFriends { right: 0; top: 354px; }
body.portrait .fr-hbadge { top: -6px; right: -6px; min-width: 36px; height: 36px; font-size: 19px; }
body.portrait .fr-inv { width: 860px; max-width: calc(100% - 24px); top: 24px; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 24px 24px 30px; }
body.portrait .fr-inv-av { width: 120px; height: 120px; }
body.portrait .fr-inv-t em { font-size: 20px; } body.portrait .fr-inv-t b { font-size: 40px; } body.portrait .fr-inv-t > span { font-size: 26px; }
body.portrait .fr-inv-deck { min-height: 104px; font-size: 22px; padding: 0 18px; }
body.portrait .fr-inv-b { grid-column: 1 / -1; flex-direction: row; }
body.portrait .fr-inv-b .btn { flex: 1 1 0; min-height: 108px; font-size: 28px; }
body.portrait .fr-qbadge { min-height: 104px; font-size: 24px; padding: 0 28px; top: 120px; }
body.portrait .fr-dks { grid-template-columns: minmax(0, 1fr); max-height: 900px; }
body.portrait .fr-dk { min-height: 100px; font-size: 26px; } body.portrait .fr-dk span { font-size: 20px; }
body.portrait #sheet .box.fr-dksheet { width: 860px; }
body.portrait .fr-lbpick { max-height: 520px; }
body.portrait .fr-lbrow .fr-avw { width: 76px; height: 76px; }
body.portrait .fr-none .fr-side { order: -1; }
body.portrait .fr-fld input { font-size: 34px; }
body.portrait .fr-empty { padding: 44px 24px; gap: 12px; } body.portrait .fr-empty .ico { width: 64px; height: 64px; }
body.portrait .fr-empty b { font-size: 32px; } body.portrait .fr-empty span { font-size: 24px; line-height: 1.4; }
body.mobile .fr-empty b { font-size: 28px; } body.mobile .fr-empty span { font-size: 21px; }
body.portrait .fr-add .m-h, body.portrait .fr-reqs .m-h { justify-content: flex-start; }
/* css/coldopen.css */
.co { position: fixed; inset: 0; z-index: 5000; overflow: hidden; background: #07040f; color: #f6ecd8; user-select: none; -webkit-user-select: none;
touch-action: none; -webkit-tap-highlight-color: transparent; font-family: "Old Standard TT", Georgia, serif; transition: opacity .4s ease; }
.co.out { opacity: 0; pointer-events: none; }
.co-stage { position: absolute; inset: 0; overflow: hidden; }
.co-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.co-vig { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(7, 4, 15, 0) 45%, rgba(7, 4, 15, .72) 100%),
linear-gradient(180deg, rgba(4, 2, 10, .55) 0, rgba(4, 2, 10, 0) 16%, rgba(4, 2, 10, 0) 70%, rgba(4, 2, 10, .8) 100%); }
.co-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
background: radial-gradient(circle at 50% 45%, #fff 0, #d8b8ff 30%, rgba(150, 90, 255, 0) 75%); }
.co-count { position: absolute; left: 50%; top: max(9vh, calc(env(safe-area-inset-top) + 56px)); transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
.co-count small { display: block; font: 700 clamp(10px, calc(1vmin + 6px), 14px) Cinzel, Georgia, serif; letter-spacing: .35em; text-transform: uppercase; color: rgba(233, 220, 255, .7); }
.co-count b { display: block; font: 800 clamp(34px, calc(6vmin + 12px), 72px) Cinzel, Georgia, serif; font-variant-numeric: tabular-nums; color: rgba(240, 230, 255, .85); line-height: 1.05;
text-shadow: 0 0 18px rgba(160, 100, 255, .6); transition: color .3s, text-shadow .3s; }
.co-count.hit b { color: #f5d38a; text-shadow: 0 0 26px rgba(242, 196, 106, .85), 0 0 60px rgba(160, 100, 255, .6); }
.co-cap { position: absolute; left: 50%; bottom: max(10vh, calc(env(safe-area-inset-bottom) + 40px)); width: min(88vw, 920px); transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; }
.co-cap.on { animation: coCap .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes coCap { from { opacity: 0; transform: translate(-50%, 10px); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, 0); filter: blur(0); } }
.co-cap small { display: block; margin-bottom: .55em; font: 700 clamp(10px, calc(1.1vmin + 7px), 16px) Cinzel, Georgia, serif; letter-spacing: .26em; text-transform: uppercase; color: #e9c46a;
text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.co-cap.noeb small { display: none; }
.co-cap p { margin: 0; font: italic 400 clamp(19px, calc(2.6vmin + 9px), 38px)/1.3 "Old Standard TT", Georgia, serif; color: #f8efdc; text-wrap: balance;
text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }
.co-cap.gold p { font: 700 clamp(20px, calc(2.8vmin + 10px), 42px)/1.25 Cinzel, Georgia, serif; font-style: normal; color: #f5d38a; letter-spacing: .02em;
text-shadow: 0 0 22px rgba(242, 196, 106, .55), 0 2px 12px rgba(0, 0, 0, .95); }
.co-cap.big p { font: 900 clamp(30px, calc(5vmin + 12px), 68px)/1.1 Cinzel, Georgia, serif; font-style: normal; color: #fff4d6; letter-spacing: .03em;
text-shadow: 0 0 30px rgba(242, 196, 106, .7), 0 3px 14px rgba(0, 0, 0, .95); }
.co-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 22px); opacity: 0; pointer-events: none; }
.co-end.on { opacity: 1; pointer-events: auto; transition: opacity 1s ease; }
.co-logo { width: min(60vmin, 440px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 40px rgba(150, 90, 255, .45)); transform: scale(.92); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.co-end.on .co-logo { transform: scale(1); }
.co-begin { appearance: none; border: 0; cursor: pointer; font: 800 clamp(16px, calc(1.6vmin + 10px), 24px) Cinzel, Georgia, serif; letter-spacing: .18em; text-transform: uppercase;
padding: .85em 2.6em; border-radius: 999px; color: #2a1606; background: linear-gradient(180deg, #ffe7a8, #e0a93c 60%, #b77a1e);
box-shadow: 0 0 0 2px rgba(255, 236, 190, .5) inset, 0 8px 30px rgba(242, 196, 106, .45), 0 0 60px rgba(150, 90, 255, .35); animation: coBegin 2.6s ease-in-out infinite; }
.co-begin:focus-visible { outline: 3px solid #fff4d6; outline-offset: 4px; }
@keyframes coBegin { 50% { box-shadow: 0 0 0 2px rgba(255, 236, 190, .6) inset, 0 8px 40px rgba(242, 196, 106, .7), 0 0 80px rgba(150, 90, 255, .5); } }
body.portrait .co-logo, .co-end .co-logo { max-height: 52vh; }
.co-tap { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer;
background: radial-gradient(ellipse at 50% 45%, #1a0e33 0, #07040f 70%); transition: opacity .6s ease; }
.co.loading .co-tap, .co.tap .co-tap { display: flex; }
.co-tap.gone { opacity: 0; pointer-events: none; }
.co-tap b, .co-tap small { display: none; }
.co.tap .co-tap b { display: block; font: 800 clamp(20px, calc(2.4vmin + 12px), 34px) Cinzel, Georgia, serif; letter-spacing: .2em; text-transform: uppercase; color: #f5d38a;
text-shadow: 0 0 20px rgba(242, 196, 106, .5); animation: coPulse 2.2s ease-in-out infinite; }
.co.tap .co-tap small { display: block; font: italic 400 clamp(13px, calc(1vmin + 9px), 18px) "Old Standard TT", Georgia, serif; color: rgba(240, 230, 255, .65); }
.co.tap:not(.ready) .co-tap b { opacity: .5; }
.co-tapgem { width: clamp(46px, 9vmin, 80px); aspect-ratio: .66; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%);
background: linear-gradient(160deg, #e6ccff, #9a5cff 45%, #3a0f8a); animation: coGem 2.2s ease-in-out infinite; }
@keyframes coPulse { 50% { opacity: .55; } }
@keyframes coGem { 50% { transform: scale(1.08); filter: brightness(1.35); } }
.co-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 3; appearance: none; cursor: pointer;
font: 700 clamp(12px, calc(.8vmin + 9px), 15px) Cinzel, Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 236, 216, .85);
padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(233, 196, 106, .45); background: rgba(10, 6, 20, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s, background .2s; }
.co-skip:hover, .co-skip:focus-visible { background: rgba(40, 24, 70, .7); color: #fff4d6; }
.co.ended .co-skip { opacity: 0; pointer-events: none; }
.co-hold { position: absolute; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; }
.co-hold svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.co-hold circle { fill: rgba(10, 6, 20, .35); stroke: #f5d38a; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.co-hold span { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); white-space: nowrap; font: 700 11px Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #f5d38a; text-shadow: 0 1px 6px #000; }
.co-hold.on { opacity: 1; transition: opacity .2s .15s; }
.co-hold.on circle { animation: coHold .75s .15s linear forwards; }
@keyframes coHold { to { stroke-dashoffset: 0; } }
.c2 { position: absolute; inset: 0; overflow: hidden; }
.c2 > * { position: absolute; opacity: 0; visibility: hidden; }
.c2-bg { inset: -4%; background-size: cover; background-repeat: no-repeat; will-change: opacity, transform; }
.c2-bg[data-k="lab"], .c2-bg[data-k="archive"] { filter: saturate(.8) brightness(.8); }
.c2-crys { left: 62%; top: 47%; width: min(40vmin, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.c2-crys.logo { left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.8); }
.c2-crys > * { position: absolute; }
.c2-halo { inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(170, 110, 255, .75) 0, rgba(170, 110, 255, .2) 35%, rgba(170, 110, 255, 0) 65%); }
.c2-wave { inset: 0; border-radius: 50%; border: 3px solid rgba(230, 205, 255, .9); box-shadow: 0 0 24px rgba(200, 160, 255, .8); opacity: 0; }
.c2-gem { left: 32%; right: 32%; top: 6%; bottom: 30%; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%);
background: linear-gradient(150deg, #efdcff 0, #b27cff 30%, #7a3ae0 55%, #2a0a66 100%); }
.c2-coils { left: 14%; right: 14%; top: 50%; bottom: 4%; }
.c2-coils i { position: absolute; left: 0; right: 0; height: 18%; border-radius: 50%; border: 3px solid #c27a3e; box-shadow: 0 0 4px rgba(255, 170, 90, .3); }
.c2-coils i:nth-child(1) { top: 0; left: 8%; right: 8%; } .c2-coils i:nth-child(2) { top: 18%; left: 3%; right: 3%; } .c2-coils i:nth-child(3) { top: 36%; }
.c2-coils i:nth-child(4) { top: 54%; left: 3%; right: 3%; } .c2-coils i:nth-child(5) { top: 72%; left: 8%; right: 8%; background: #3a2418; border-color: #5a3620; }
.c2-coils.live i { box-shadow: 0 0 10px rgba(255, 180, 100, .7); border-color: #e09a55; }
.c2-shard { left: 50%; top: 40%; width: min(4vmin, 30px); aspect-ratio: .3; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(160deg, #fff, #c9a0ff 40%, #7a3ae0); }
.c2-win { left: 50%; top: 44%; width: min(70vw, 118vh); aspect-ratio: 1.61; background-size: cover; background-position: 70% 42%;
clip-path: polygon(0 45.2%, 22.5% 1.6%, 60% 0, 97.5% 29.8%, 100% 66.1%, 70% 100%, 27.5% 94.4%); }
body.portrait .c2-win, .co.portrait .c2-win { width: 94vw; }
.c2-eras { left: 50%; top: 45%; width: min(84vw, 132vh); margin-left: calc(min(84vw, 132vh) / -2); translate: 0 -50%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2vmin 3vmin; }
.c2-era { transition: none; }
.c2-art { position: relative; aspect-ratio: 16 / 9; background-size: cover; border: 2px solid #c89b3c; box-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.c2-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c2-art line { stroke: #f0dcff; stroke-width: 1.6px; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 2px #b27cff); }
.c2-era b { display: block; margin-top: .45em; text-align: center; font: 700 clamp(10px, calc(1vmin + 7px), 17px) Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #f5dca0; text-shadow: 0 1px 6px #000; }
.c2-falls, .c2-pages { opacity: 1; visibility: visible; }
.c2-falls { inset: 0; }
.c2-falls i { position: absolute; left: 0; top: 0; width: clamp(8px, 1.6vmin, 16px); aspect-ratio: .38; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background: linear-gradient(160deg, #f3e6ff, #b27cff 40%, #5a1fb0); opacity: 0; visibility: hidden; }
.c2-pages { inset: 0; }
.c2-pages i { position: absolute; left: 50%; top: 46%; width: 8vmin; height: 10.6vmin; margin: -5.3vmin 0 0 -4vmin; opacity: 0; visibility: hidden; border-radius: 2px;
background: repeating-linear-gradient(180deg, rgba(60, 40, 25, 0) 0 12%, rgba(60, 40, 25, .45) 12% 14%) 18% 16% / 64% 76% no-repeat, #efe2c2; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.c2-pages i.blank:not(.wrote) { background: linear-gradient(135deg, rgba(0, 0, 0, 0) 60%, rgba(150, 100, 255, .45) 60%), #d9cdb4; }
.c2-pages i.blank.wrote { box-shadow: 0 0 18px rgba(242, 196, 106, .8); }
.c2-card { left: 50%; top: 44%; height: min(60vh, 118vw); aspect-ratio: 2 / 3; border-radius: 3%; overflow: hidden;
box-shadow: 0 0 0 3px #f2c46a, 0 0 60px rgba(242, 196, 106, .55), 0 20px 50px rgba(0, 0, 0, .6); }
.c2-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-aspect-ratio: 9/10) {
.c2-eras { grid-template-columns: 1fr; width: min(72vw, 30vh); margin-left: calc(min(72vw, 30vh) / -2); top: 42%; gap: 1.4vh; }
.c2-crys { left: 50%; top: 56%; }
.c2-win { width: 94vw; }
.co-cap { bottom: max(9vh, calc(env(safe-area-inset-bottom) + 34px)); }
}
@media (prefers-reduced-motion: reduce) {
.co-cap.on { animation: coCapCalm .6s ease both; }
@keyframes coCapCalm { from { opacity: 0; } to { opacity: 1; } }
.co-begin, .co-tapgem, .co.tap .co-tap b { animation: none; }
}
/* css/unlocks.css */
:root {
--ul-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d58a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.3v2.6'/%3E%3C/svg%3E");
}
body.ul-lock-solo .navbar [data-nav="solo"],
body.ul-lock-packs .navbar [data-nav="shop"],
body.ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"]),
body.ul-lock-riftrun #solo .tabs [data-tab="run"],
body.ul-lock-seasons #solo .tabs [data-tab="season"],
body.ul-lock-social #solo .tabs [data-tab="quests"],
body.ul-lock-store :is(#toStore, #toMuseum, #stMuseum, #museumBtn),
body.ul-lock-packs #store .tabs [data-nav="shop"] {
color: rgba(203, 185, 238, .42) !important; position: relative;
}
body.ul-lock-solo .navbar [data-nav="solo"] .ic, body.ul-lock-packs .navbar [data-nav="shop"] .ic,
body.ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"]) .ic { opacity: .45; filter: grayscale(.6); }
body.ul-lock-solo .navbar [data-nav="solo"] .badge, body.ul-lock-packs .navbar [data-nav="shop"] .badge,
body.ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"]) .badge { display: none; }
body.ul-lock-solo .navbar [data-nav="solo"]::before,
body.ul-lock-packs .navbar [data-nav="shop"]::before,
body.ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"])::before,
body.ul-lock-riftrun #solo .tabs [data-tab="run"]::before,
body.ul-lock-seasons #solo .tabs [data-tab="season"]::before,
body.ul-lock-social #solo .tabs [data-tab="quests"]::before,
body.ul-lock-store :is(#toStore, #toMuseum, #stMuseum, #museumBtn)::before {
content: ""; position: absolute; top: 4px; right: 8px; width: 16px; height: 16px; border-radius: 50%; pointer-events: none;
background: var(--ul-lock) center / 12px no-repeat, rgba(20, 10, 40, .92); box-shadow: 0 0 0 1px rgba(242, 193, 78, .45);
}
body.portrait.ul-lock-solo .navbar [data-nav="solo"]::before,
body.portrait.ul-lock-packs .navbar [data-nav="shop"]::before,
body.portrait.ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"])::before { top: 6px; right: calc(50% - 44px); width: 30px; height: 30px; background-size: 20px; }
body.mobile:not(.portrait).ul-lock-solo .navbar [data-nav="solo"]::before,
body.mobile:not(.portrait).ul-lock-packs .navbar [data-nav="shop"]::before,
body.mobile:not(.portrait).ul-lock-social .navbar :is([data-nav="social"], [data-nav="ranks"])::before { width: 24px; height: 24px; background-size: 16px; }
body.portrait.ul-lock-seasons #solo .tabs [data-tab="season"]::before,
body.portrait :is(.ul-lock-riftrun #solo .tabs [data-tab="run"], .ul-lock-social #solo .tabs [data-tab="quests"])::before { width: 26px; height: 26px; background-size: 17px; }
body.ul-lock-social .modesheet :is(#mRanked, #mFriend), body.ul-lock-ffa .modesheet #mFFA { filter: saturate(.25) brightness(.62); }
body.ul-lock-social .modesheet :is(#mRanked, #mFriend) .mt-tag, body.ul-lock-ffa .modesheet #mFFA .mt-tag,
body.ul-lock-social .modesheet :is(#mRanked, #mFriend) .mt-lock { display: none; }
body.ul-lock-social .modesheet :is(#mRanked, #mFriend)::after, body.ul-lock-ffa .modesheet #mFFA::after {
inset: auto; left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: 1; z-index: 3; white-space: nowrap;
padding: 8px 14px 8px 36px; border-radius: 99px; font: 700 14px/1.2 var(--font-ui, Inter, sans-serif); color: #f7e7bd; letter-spacing: .01em;
background: var(--ul-lock) 12px 50% / 16px no-repeat, rgba(12, 6, 28, .88); border: 1px solid rgba(242, 193, 78, .5);
}
body.ul-lock-social .modesheet :is(#mRanked, #mFriend)::after { content: var(--ul-t-social); }
body.ul-lock-ffa .modesheet #mFFA::after { content: var(--ul-t-ffa); }
body.portrait :is(.ul-lock-social .modesheet :is(#mRanked, #mFriend), .ul-lock-ffa .modesheet #mFFA)::after { left: auto; right: 22px; top: 22px; transform: none; font-size: 20px; padding: 10px 18px 10px 46px; background-size: 22px, auto; background-position: 14px 50%, 0 0; }
body.mobile:not(.portrait) :is(.ul-lock-social .modesheet :is(#mRanked, #mFriend), .ul-lock-ffa .modesheet #mFFA)::after { font-size: 20px; }
body.ul-lock-quests #hub .hubquests,
body.ul-lock-seasons #hub :is(.seasonHub, .locChip, #hLore),
body.ul-lock-store #hub :is(#hMuseum, .lcs-gems, .lcs-starter),
body.ul-lock-store :is(#shop, #solo, #collection) .lcs-gems,
body.ul-lock-packs .pill-packs { display: none !important; }
body.portrait.ul-lock-seasons #hub .hubright { grid-template-areas: "deck deck" "play play"; }
body.ul-dayone:not(.portrait) #hub .hubright { top: 236px; transition: top .4s; }
body[class*="ul-reveal-"] #hub :is(.seasonHub, #hMuseum, .hubquests, .locChip) { animation: ulGlowIn .9s ease-out both; }
#ulTip { position: absolute; z-index: 1150; display: none; align-items: center; gap: 10px; max-width: 520px; padding: 11px 18px 11px 14px; border-radius: 14px;
background: rgba(14, 7, 32, .96); border: 1px solid rgba(242, 193, 78, .55); color: #fff3d6; font: 600 16px/1.3 var(--font-ui, Inter, sans-serif);
box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 20px rgba(242, 193, 78, .18); pointer-events: none; white-space: nowrap; }
#ulTip.on { display: flex; animation: ulTipIn .22s ease-out both; }
#ulTip .ico { width: 20px; height: 20px; flex: none; }
#ulTip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
background: rgba(14, 7, 32, .96); border: solid rgba(242, 193, 78, .55); border-width: 0 1px 1px 0; }
#ulTip.below::after { bottom: auto; top: -7px; border-width: 1px 0 0 1px; }
body.mobile #ulTip, body.portrait #ulTip { font-size: 26px; padding: 16px 26px 16px 20px; gap: 14px; max-width: 820px; white-space: normal; }
body.mobile #ulTip .ico, body.portrait #ulTip .ico { width: 30px; height: 30px; }
.ul-nudge { animation: ulNudge .42s ease-in-out; }
#ulCer { position: absolute; inset: 0; z-index: 995; pointer-events: auto; }
#ulCer .ul-veil { position: absolute; inset: 0; }
#ulCer .ul-veil.full { background: rgba(5, 2, 14, .72); opacity: 0; transition: opacity .35s; }
#ulCer.on .ul-veil.full { opacity: 1; }
#ulCer .ul-ring { position: absolute; border-radius: 22px; pointer-events: none; box-shadow: 0 0 0 4000px rgba(5, 2, 14, 0); transition: box-shadow .45s ease; }
#ulCer.on .ul-ring { box-shadow: 0 0 0 4000px rgba(5, 2, 14, .72), 0 0 0 3px #f2c14e, 0 0 34px 8px rgba(242, 193, 78, .75); }
#ulCer .ul-ring i { position: absolute; inset: -3px; border-radius: inherit; border: 3px solid #ffe6a0; opacity: 0; }
#ulCer.on .ul-ring i { animation: ulRing 1.6s ease-out .35s infinite; }
#ulCer .ul-card { position: absolute; left: 50%; top: 50%; width: 520px; max-width: calc(100% - 48px); padding: 30px 34px 26px; border-radius: 24px; text-align: center; overflow: hidden;
background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(242, 193, 78, .2), transparent 65%), linear-gradient(180deg, rgba(44, 22, 90, .97), rgba(16, 8, 36, .98));
border: 1px solid rgba(242, 193, 78, .6); box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 50px rgba(242, 193, 78, .22);
transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: transform .45s var(--ease-back, cubic-bezier(.3, 1.4, .5, 1)) .12s, opacity .3s .12s; }
#ulCer .ul-card.above { top: var(--ty); transform: translate(-50%, -100%) scale(.85); }
#ulCer .ul-card.below { top: var(--ty); transform: translate(-50%, 0) scale(.85); }
#ulCer.on .ul-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#ulCer.on .ul-card.above { transform: translate(-50%, -100%) scale(1); }
#ulCer.on .ul-card.below { transform: translate(-50%, 0) scale(1); }
#ulCer.out .ul-card { opacity: 0; transition-delay: 0s; }
#ulCer.out .ul-ring { box-shadow: 0 0 0 4000px rgba(5, 2, 14, 0); }
#ulCer .ul-rays { position: absolute; left: 50%; top: 58px; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; opacity: .55; z-index: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .22) 0deg 6deg, transparent 6deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
#ulCer.on .ul-rays { animation: ulSpin 14s linear infinite; }
#ulCer .ul-card > :not(.ul-rays) { position: relative; z-index: 1; }
#ulCer .ul-ic { width: 76px; height: 76px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(255, 226, 150, .35), rgba(90, 50, 170, .5) 70%); border: 1px solid rgba(242, 193, 78, .7); box-shadow: 0 0 26px rgba(242, 193, 78, .5); }
#ulCer .ul-ic .ico { width: 40px; height: 40px; }
#ulCer.on .ul-ic { animation: ulPop .7s var(--ease-back, cubic-bezier(.3, 1.4, .5, 1)) .2s both; }
#ulCer .ul-ey { font: 800 12px/1 var(--font-ui, Inter, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: #f2c14e; }
#ulCer h2 { margin: 8px 0 8px; font: 900 34px/1.1 var(--font-title, Cinzel, serif); color: #fff3d6; text-shadow: 0 0 22px rgba(242, 193, 78, .45); }
#ulCer p { margin: 0 auto 20px; max-width: 420px; font: 500 17px/1.45 var(--font-ui, Inter, sans-serif); color: #d9ccf2; }
#ulCer .ul-acts { display: flex; justify-content: center; gap: 12px; }
#ulCer .ul-acts .btn { display: inline-flex; align-items: center; gap: 8px; }
#ulCer .ul-acts .ico { width: 18px; height: 18px; }
#ulCer.still *, #ulCer.still { transition: none !important; animation: none !important; }
body.mobile #ulCer .ul-card, body.portrait #ulCer .ul-card { width: 760px; padding: 44px 44px 36px; border-radius: 32px; }
body.mobile #ulCer .ul-ic, body.portrait #ulCer .ul-ic { width: 110px; height: 110px; } body.mobile #ulCer .ul-ic .ico, body.portrait #ulCer .ul-ic .ico { width: 58px; height: 58px; }
body.mobile #ulCer .ul-ey, body.portrait #ulCer .ul-ey { font-size: 18px; }
body.mobile #ulCer h2, body.portrait #ulCer h2 { font-size: 52px; }
body.mobile #ulCer p, body.portrait #ulCer p { font-size: 26px; max-width: 640px; margin-bottom: 30px; }
body.mobile #ulCer .ul-acts .btn, body.portrait #ulCer .ul-acts .btn { font-size: 24px; min-height: 84px; padding: 0 34px; }
body.mobile #ulCer .ul-acts .ico, body.portrait #ulCer .ul-acts .ico { width: 26px; height: 26px; }
#ulCoach { position: absolute; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .3s; }
#ulCoach.on { opacity: 1; }
#ulCoach .ul-cring { position: absolute; border-radius: 16px; box-shadow: 0 0 0 2px #f2c14e, 0 0 22px 4px rgba(242, 193, 78, .55); animation: ulBeat 1.5s ease-in-out infinite; }
#ulCoach .ul-bub { position: absolute; max-width: 380px; padding: 12px 16px 12px 18px; border-radius: 14px; display: flex; align-items: center; gap: 14px;
background: linear-gradient(180deg, #fff6dc, #f3dca0); color: #2a1648; font: 700 16px/1.35 var(--font-ui, Inter, sans-serif); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
#ulCoach .ul-bub em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6a4a12; opacity: .8; }
#ulCoach .ul-bub::after { content: ""; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #f5e1aa; }
#ulCoach .ul-bub.above::after { bottom: -7px; }
#ulCoach .ul-bub.below::after { top: -7px; background: #fff6dc; }
#ulCoach.on .ul-bub.above { animation: ulBobUp 1.6s ease-in-out infinite; }
#ulCoach.on .ul-bub.below { animation: ulBobDn 1.6s ease-in-out infinite; }
body.mobile #ulCoach .ul-bub, body.portrait #ulCoach .ul-bub { max-width: 640px; font-size: 26px; padding: 18px 22px 18px 26px; border-radius: 20px; gap: 18px; }
body.mobile #ulCoach .ul-bub em, body.portrait #ulCoach .ul-bub em { font-size: 18px; }
body.mobile #ulCoach .ul-bub::after, body.portrait #ulCoach .ul-bub::after { width: 22px; height: 22px; }
body.mobile #ulCoach .ul-bub.above::after, body.portrait #ulCoach .ul-bub.above::after { bottom: -11px; }
body.mobile #ulCoach .ul-bub.below::after, body.portrait #ulCoach .ul-bub.below::after { top: -11px; }
@keyframes ulTipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ulNudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes ulRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ulSpin { to { transform: rotate(360deg); } }
@keyframes ulPop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ulGlowIn { 0% { opacity: 0; filter: brightness(2.2) saturate(1.4); } 100% { opacity: 1; filter: none; } }
@keyframes ulBeat { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ulBobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ulBobDn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #ulCer *, #ulCoach *, #ulTip, .ul-nudge { animation: none !important; } }
/* css/pass.css */
:root { --pp-prem: #c98bff; --pp-prem-2: #7b3fd0; --pp-free: #f2c14e; }
#season .body.passBody { display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 4px 4px 6px; }
.pHead { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.3fr) auto; gap: 22px; align-items: center; flex: none;
padding: 16px 22px; border-radius: 18px; border: 1px solid rgba(232,186,90,.28);
background: radial-gradient(ellipse at 0% 0%, rgba(242,193,78,.16), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(168,107,255,.2), transparent 60%), linear-gradient(180deg, rgba(30,17,58,.92), rgba(14,8,28,.94));
box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.pTitle h2 { margin: 2px 0 6px; font: 900 38px/1.05 var(--font-title); letter-spacing: .04em;
background: linear-gradient(180deg, #fff4d6, #f2c14e 55%, #b8811a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.pTitle .eyebrow { font: 800 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pEnds { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #d9cdf3; }
.pEnds .mi { width: 16px; height: 16px; }
.pLevel { display: flex; align-items: center; gap: 18px; }
.pMedal { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center;
background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 38%, #9c6a12 80%); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 0 7px rgba(242,193,78,.5), 0 10px 26px rgba(0,0,0,.6); color: #2a1604; }
.pMedal.prem { background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 40%, #5a1f9e 82%); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 0 7px rgba(242,193,78,.75), 0 0 30px rgba(201,139,255,.55); color: #1e0a33; }
.pMedal small { font: 800 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.pMedal b { font: 900 46px/1 var(--font-title); }
.pXp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pXpTop { display: flex; align-items: baseline; gap: 10px; }
.pXpTop b { font: 800 22px var(--font-ui); color: #fff4d6; } .pXpTop span { font-size: 15px; color: var(--muted); }
.pBar { position: relative; height: 16px; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.pBar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #b8811a, #f2c14e 60%, #fff1c2); box-shadow: 0 0 14px rgba(242,193,78,.65); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.pBar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 220% 100%; animation: pSheen 2.8s ease-in-out infinite; }
@keyframes pSheen { 0% { background-position: 140% 0; } 70%, 100% { background-position: -60% 0; } }
.pXpSub { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.pCatch { display: inline-flex; align-items: center; gap: 6px; color: #7dffb0; font-weight: 700; }
.pCatch .mi { width: 16px; height: 16px; }
.pInfoBtn { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid rgba(190,160,255,.25); background: rgba(255,255,255,.04); color: #e8dcff; border-radius: 99px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.pInfoBtn .mi { width: 15px; height: 15px; }
.pCta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 290px; }
.pCtaRow { display: flex; gap: 10px; } .pCtaRow .btn { flex: 1; }
.pCtaRow .btn .mi, .pBuy .mi { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.pBuy { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; font-size: 20px; position: relative; overflow: hidden;
background: linear-gradient(180deg, #e7b6ff, #a45ff0 45%, #6a2cc0) !important; color: #fff !important; border-color: #f2c14e !important; box-shadow: 0 0 0 2px rgba(242,193,78,.4), 0 0 26px rgba(201,139,255,.55) !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pBuy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); background-size: 240% 100%; animation: pSheen 3.2s ease-in-out infinite; pointer-events: none; }
.pBuy em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.3); font-weight: 800; }
.pOwned { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; border: 1px solid rgba(242,193,78,.55);
background: linear-gradient(135deg, rgba(201,139,255,.3), rgba(90,31,158,.35)); box-shadow: 0 0 22px rgba(201,139,255,.35); }
.pOwned > .mi { width: 34px; height: 34px; color: #f2c14e; filter: drop-shadow(0 0 8px rgba(242,193,78,.7)); }
.pOwned b { display: block; font: 800 19px var(--font-title); color: #fff4d6; } .pOwned small { color: #e2d4ff; font-size: 13px; }
.pTrackWrap { position: relative; flex: 1; min-height: 0; border-radius: 18px; border: 1px solid rgba(190,160,255,.14);
background: linear-gradient(180deg, rgba(20,11,40,.7), rgba(10,6,22,.8)); overflow: hidden; }
.pTrack { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 10px; padding: 12px 18px 14px 0; overflow-x: auto; overflow-y: hidden;
touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(232,186,90,.45) transparent; }
.pTrack::-webkit-scrollbar { height: 8px; } .pTrack::-webkit-scrollbar-thumb { background: rgba(232,186,90,.4); border-radius: 99px; }
.pRowLab { position: sticky; left: 0; z-index: 4; flex: none; width: 92px; display: grid; grid-template-rows: 44px 1fr 1fr; gap: 10px; padding-left: 12px;
background: #120a24; }
.pRowLab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 22px; pointer-events: none; background: linear-gradient(90deg, #120a24, rgba(18,10,36,0)); }
.pRowLab span { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 900 15px var(--font-title); letter-spacing: .24em; text-transform: uppercase; border-radius: 12px; }
.pRowLab .pl-free { color: #f2c14e; background: #1d1424; border: 1px solid rgba(242,193,78,.25); }
.pRowLab .pl-prem { color: #e3bfff; background: #2a1646; border: 1px solid rgba(201,139,255,.35); gap: 8px; }
.pRowLab .pl-prem .mi { width: 18px; height: 18px; transform: rotate(90deg); }
.pCol { position: relative; flex: none; width: 146px; display: grid; grid-template-rows: 44px 1fr 1fr; gap: 10px; }
.pNode { position: relative; display: grid; place-items: center; }
.pNode::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 4px; margin-top: -2px; background: rgba(255,255,255,.1); }
.pCol.reached .pNode::before { background: linear-gradient(90deg, #b8811a, #f2c14e); box-shadow: 0 0 8px rgba(242,193,78,.5); }
.pNode b { position: relative; z-index: 1; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 99px; font: 900 17px var(--font-title);
background: #1b1034; border: 2px solid rgba(190,160,255,.3); color: var(--muted); }
.pCol.reached .pNode b { background: linear-gradient(180deg, #fff1c2, #f2c14e 55%, #9c6a12); border-color: #fff1c2; color: #2a1604; }
.pCol.cur .pNode b { border-color: #f2c14e; color: #fff4d6; box-shadow: 0 0 0 4px rgba(242,193,78,.25); animation: pCur 1.8s ease-in-out infinite; }
@keyframes pCur { 50% { box-shadow: 0 0 0 8px rgba(242,193,78,.08), 0 0 18px rgba(242,193,78,.5); } }
.pCol.ten .pNode b { min-width: 50px; font-size: 19px; }
.pTile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 8px 30px; min-height: 0;
border-radius: 14px; cursor: pointer; text-align: center; overflow: hidden; transition: transform .18s, box-shadow .18s, filter .18s;
background: linear-gradient(180deg, rgba(44,26,80,.9), rgba(18,10,36,.95)); border: 1px solid rgba(190,160,255,.18); }
.pTile.prem { background: linear-gradient(180deg, rgba(74,32,120,.9), rgba(26,10,48,.96)); border-color: rgba(201,139,255,.3); }
.pTile.big { border-width: 2px; }
.pTile.rar-Legendary { border-color: rgba(242,193,78,.7); box-shadow: inset 0 0 22px rgba(242,193,78,.15); }
.pTile.rar-Epic { border-color: rgba(199,125,255,.6); }
.pTile:hover { transform: translateY(-3px); }
.pTile .pt-art { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.pTile .pt-name { font: 700 13.5px/1.2 var(--font-ui); color: #f3ecff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pTile .pt-kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pTile .pt-state { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: grid; place-items: center; font: 800 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.pTile .pt-state .mi { width: 16px; height: 16px; }
.pTile.locked { filter: saturate(.55) brightness(.72); }
.pTile.locked:hover { filter: saturate(.8) brightness(.9); }
.pTile.held { filter: saturate(.8) brightness(.9); }
.pTile.held .pt-state { background: rgba(0,0,0,.45); color: #e3bfff; }
.pTile.done .pt-state { background: rgba(125,255,176,.12); color: #7dffb0; }
.pTile.done .pt-art { opacity: .55; }
.pTile.ready { border-color: #f2c14e; box-shadow: 0 0 0 2px rgba(242,193,78,.45), 0 0 22px rgba(242,193,78,.4); animation: pReady 1.6s ease-in-out infinite; }
.pTile.prem.ready { border-color: #e3bfff; box-shadow: 0 0 0 2px rgba(227,191,255,.5), 0 0 24px rgba(201,139,255,.55); }
.pTile.ready .pt-state { background: linear-gradient(180deg, #fff1c2, #f2c14e 60%, #b8811a); color: #2a1604; }
.pTile.prem.ready .pt-state { background: linear-gradient(180deg, #fbe9ff, #c98bff 60%, #7b3fd0); color: #1e0a33; }
@keyframes pReady { 50% { transform: translateY(-3px); } }
.pTile.revealing { animation: pFlip .55s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pFlip { 0% { transform: perspective(600px) rotateY(0) scale(1); } 45% { transform: perspective(600px) rotateY(90deg) scale(1.08); filter: brightness(2); } 100% { transform: perspective(600px) rotateY(0) scale(1); } }
.pNext { flex: none; width: 300px; align-self: stretch; margin-left: 10px; padding: 18px; border-radius: 16px; border: 1px dashed rgba(190,160,255,.35); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 8px; }
.pNext .eyebrow { font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pNext b { font: 800 20px var(--font-title); color: #fff4d6; } .pNext span { font-size: 14px; line-height: 1.45; color: #d9cdf3; }
.pNext ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: #cfc2ec; line-height: 1.5; } .pNext small { color: var(--muted); font-style: italic; }
.pFoot { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 14px; color: #cfc2ec; }
.pFoot > .mi { width: 20px; height: 20px; color: #f2c14e; flex: none; } .pFoot b { color: #fff4d6; } .pFoot em { color: #e3bfff; font-style: normal; margin-left: 6px; }
.pr-ico { position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.14), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pr-ico .coin { width: 40px; height: 40px; }
.pr-ico .mi { width: 36px; height: 36px; color: #f2c14e; }
.pr-shard .mi { color: #6fd3ff; } .pr-pick .mi { color: #ffe08a; }
.pr-ico .packicon { transform: scale(1.35); }
.pr-ico em { position: absolute; right: -4px; bottom: -2px; font: 900 16px var(--font-title); font-style: normal; color: #fff4d6; text-shadow: 0 2px 4px #000; }
.pr-ico .gemicon, .ps-chip .gemicon { width: 34px; height: 34px; }
.pp { position: relative; width: 100%; height: 100%; max-height: 150px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.pp-card { width: 72px; height: 100px; max-height: none; container-type: inline-size; overflow: visible; }
.pp-card .card { position: relative; width: 100%; height: 100%; }
.pp-board { width: 120px; height: 68px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.pp-board .lcb-preview { border-radius: inherit; }
.pp-frame { width: 70px; height: 100px; overflow: visible; }
.pp-frame .lc { position: relative; width: 100%; height: 100%; }
.pp-banner { width: 124px; height: 48px; border-radius: 10px; }
.pp-comp { width: 96px; height: 96px; overflow: visible; }
.pp-emote span { display: inline-block; max-width: 124px; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: #f3ecff; color: #1d1433; font: 700 13px/1.25 var(--font-ui); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pp-title span { display: inline-block; max-width: 128px; padding: 7px 10px; border-radius: 6px; font: 800 12.5px/1.25 var(--font-title); letter-spacing: .04em; color: #2a1604;
background: linear-gradient(180deg, #fff1c2, #f2c14e 60%, #b8811a); box-shadow: 0 0 0 2px #5a3a0a, 0 4px 10px rgba(0,0,0,.5); }
.pp-frame.fr-brass-gears .lc { outline: 5px dotted #d6a64a; outline-offset: 3px; }
.pp-frame.fr-tesla-coil .lc { outline: 3px solid #8fe7ff; outline-offset: 3px; animation: frCoil 2.2s ease-in-out infinite; }
.pp-frame.fr-invention-laurel .lc { outline: 4px solid #f2c14e; outline-offset: 3px; filter: drop-shadow(0 0 10px rgba(125,255,176,.55)); }
#sheet .box.passSheet { max-width: 880px; }
#sheet .box.buySheet { max-width: 1180px; }
.passSheet h2 .mi { width: 26px; height: 26px; vertical-align: -4px; color: #f2c14e; }
.pDetail { display: flex; gap: 26px; align-items: center; }
.pd-art { flex: none; width: 240px; height: 220px; display: grid; place-items: center; }
.pd-art .pp { max-height: none; }
.pd-art .pp-card { width: 150px; height: 210px; } .pd-art .pp-board { width: 240px; height: 135px; } .pd-art .pp-frame { width: 140px; height: 200px; }
.pd-art .pp-banner { width: 240px; height: 90px; } .pd-art .pp-comp { width: 180px; height: 180px; } .pd-art .pr-ico { width: 130px; height: 130px; }
.pd-art .pr-ico .coin { width: 70px; height: 70px; } .pd-art .pr-ico .mi { width: 64px; height: 64px; }
.pd-art .pp-emote span, .pd-art .pp-title span { font-size: 20px; max-width: 220px; }
.pd-txt .eyebrow { display: flex; align-items: center; gap: 6px; font: 800 13px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-txt .eyebrow .mi { width: 16px; height: 16px; color: #e3bfff; }
.pd-st { font-weight: 700; color: #ffe08a; }
.pReveal { position: relative; text-align: center; overflow: hidden; padding: 6px 0; }
.pReveal .eyebrow { position: relative; font: 800 13px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #e3bfff; }
.pReveal h2 { position: relative; }
.pr-rays { position: absolute; left: 50%; top: 45%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: .5;
background: repeating-conic-gradient(from 0deg, rgba(242,193,78,.18) 0 8deg, transparent 8deg 22deg); animation: pSpin 22s linear infinite;
-webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); }
@keyframes pSpin { to { transform: rotate(360deg); } }
.pr-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 14px 0; }
.pr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 170px; animation: pPop .6s cubic-bezier(.3,1.6,.5,1) both; }
.pr-item:nth-child(2) { animation-delay: .08s; } .pr-item:nth-child(3) { animation-delay: .16s; } .pr-item:nth-child(4) { animation-delay: .24s; }
@keyframes pPop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pr-item > .pp { height: 150px; } .revealSheet .pr-item .pp-card { width: 108px; height: 150px; } .revealSheet .pr-item .pp-board { width: 170px; height: 96px; }
.revealSheet .pr-item .pp-frame { width: 100px; height: 146px; } .revealSheet .pr-item .pp-banner { width: 170px; height: 64px; } .revealSheet .pr-item .pp-comp { width: 140px; height: 140px; }
.pr-item b { font: 800 17px var(--font-title); color: #fff4d6; } .pr-item span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ps-row { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.ps-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(242,193,78,.3); animation: pPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.ps-chip b { font: 900 26px var(--font-title); color: #fff4d6; } .ps-chip small { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ps-chip .coin { width: 34px; height: 34px; } .ps-chip .mi { width: 32px; height: 32px; color: #6fd3ff; }
.pBuySheet .pbs-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.pBuySheet .eyebrow { font: 800 13px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pbs-bal { flex: none; display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(111,211,255,.3); }
.pbs-bal b { font: 900 26px var(--font-title); } .pbs-bal small { color: var(--muted); font-size: 12px; } .pbs-bal .gemicon { width: 26px; height: 26px; }
.pbs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 12px 0; }
.pbs-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(74,32,120,.6), rgba(26,10,48,.8)); border: 1px solid rgba(201,139,255,.3); text-align: center; }
.pbs-item.rar-Legendary { border-color: rgba(242,193,78,.7); box-shadow: inset 0 0 18px rgba(242,193,78,.15); }
.pbs-item > .pp { height: 104px; } .pbs-item b { font: 700 13px/1.2 var(--font-ui); color: #fff4d6; } .pbs-item span { font-size: 11px; color: var(--muted); }
.pbs-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.pTier { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(242,193,78,.4); background: linear-gradient(180deg, rgba(60,36,10,.35), rgba(20,10,4,.35)); }
.pTier.deluxe { border-color: rgba(201,139,255,.55); background: linear-gradient(180deg, rgba(74,32,120,.45), rgba(26,10,48,.5)); }
.pTier.owned { opacity: .7; }
.pTier b { font: 800 21px var(--font-title); color: #fff4d6; }
.pTier ul { margin: 0; padding-left: 18px; color: #d9cdf3; font-size: 14.5px; line-height: 1.5; flex: 1; }
.pTier .pl-gets { color: var(--muted); font-size: 13px; }
.pTier .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; }
.pTier .btn.armed { background: linear-gradient(180deg, #7dffb0, #1f9d58) !important; color: #042612 !important; }
.pTier .gemicon { width: 22px; height: 22px; }
.pOwnTag { display: inline-flex; align-items: center; gap: 6px; color: #7dffb0; font-weight: 800; } .pOwnTag .mi { width: 18px; height: 18px; }
.pbs-note { font-size: 14px; color: #cfc2ec; line-height: 1.5; } .pbs-note .mi { width: 17px; height: 17px; vertical-align: -3px; color: #f2c14e; } .pbs-note a { color: #6fd3ff; }
.pbs-note .gemicon { width: 18px; height: 18px; vertical-align: -3px; }
.pInfoT td { padding: 7px 10px; font-size: 15px; } .pInfoT td:last-child { text-align: right; color: #fff4d6; }
.pUnlock, .pLvUp { position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(40,14,70,.78), rgba(5,2,12,.9)); animation: pFade .3s ease both; }
.pUnlock.out, .pLvUp.out { animation: pFadeOut .35s ease both; }
@keyframes pFade { from { opacity: 0; } } @keyframes pFadeOut { to { opacity: 0; } }
.pUnlock { flex-direction: column; text-align: center; align-content: center; gap: 10px; }
.pUnlock b { font: 900 46px var(--font-title); color: #fff4d6; text-shadow: 0 0 24px rgba(201,139,255,.8); } .pUnlock span { font-size: 20px; color: #e3d4ff; }
.pu-rays, .plu-rays { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; pointer-events: none;
background: repeating-conic-gradient(from 0deg, rgba(242,193,78,.16) 0 7deg, transparent 7deg 20deg); animation: pSpin 26s linear infinite;
-webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%); }
.pu-crest { position: relative; width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; animation: pPop .7s cubic-bezier(.3,1.6,.5,1) both;
background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 40%, #5a1f9e 82%); box-shadow: 0 0 0 6px rgba(242,193,78,.7), 0 0 60px rgba(201,139,255,.8); }
.pu-crest .mi { width: 84px; height: 84px; color: #fff4d6; }
.plu-card { position: relative; width: min(900px, 92%); padding: 26px 30px 24px; border-radius: 24px; text-align: center; overflow: hidden;
background: linear-gradient(180deg, rgba(40,22,76,.97), rgba(14,8,28,.98)); border: 2px solid rgba(242,193,78,.6); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(242,193,78,.25);
animation: pPop .6s cubic-bezier(.3,1.5,.5,1) both; }
.plu-card > *:not(.plu-rays) { position: relative; }
.plu-card .eyebrow { font: 800 14px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #e3bfff; }
.plu-medal { width: 150px; height: 150px; margin: 10px auto 4px; border-radius: 50%; display: grid; place-content: center; color: #2a1604;
background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 38%, #9c6a12 80%); box-shadow: 0 0 0 6px rgba(0,0,0,.3), 0 0 0 10px rgba(242,193,78,.55), 0 0 50px rgba(242,193,78,.6);
animation: pMedal 1s cubic-bezier(.3,1.7,.5,1) .15s both; }
@keyframes pMedal { 0% { transform: scale(.2) rotate(-40deg); } 100% { transform: none; } }
.plu-medal small { font: 800 13px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; } .plu-medal b { font: 900 66px/1 var(--font-title); }
.plu-title { font: 900 38px var(--font-title); color: #fff4d6; text-shadow: 0 0 18px rgba(242,193,78,.6); margin-bottom: 10px; }
.plu-rw { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.plu-l { display: flex; flex-direction: column; gap: 6px; align-items: center; animation: pPop .5s cubic-bezier(.3,1.6,.5,1) .5s both; }
.plu-l > span { font: 800 13px var(--font-title); letter-spacing: .12em; color: var(--muted); }
.plu-t { width: 180px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid rgba(242,193,78,.35); background: rgba(255,255,255,.04); }
.plu-t.prem { border-color: rgba(201,139,255,.5); background: rgba(123,63,208,.18); }
.plu-t.held { filter: saturate(.6) brightness(.8); }
.plu-t > .pp, .plu-t > .pr-ico { max-height: 84px; height: 84px; } .plu-t .pr-ico { width: 64px; height: 64px; }
.plu-t .pp-card { width: 60px; height: 84px; } .plu-t .pp-board { width: 130px; height: 73px; } .plu-t .pp-frame { width: 58px; height: 84px; } .plu-t .pp-comp { width: 84px; height: 84px; }
.plu-t small { font-size: 12.5px; color: #e8dcff; line-height: 1.2; } .plu-t small .mi { width: 13px; height: 13px; vertical-align: -2px; }
.plu-act { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.passPill { display: inline-flex; align-items: center; gap: 12px; padding-right: 16px; }
.passPill .ppLv { display: grid; place-content: center; text-align: center; width: 48px; height: 48px; border-radius: 50%; color: #2a1604; flex: none;
background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 40%, #9c6a12 85%); box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 0 12px rgba(242,193,78,.5); }
.passPill .ppLv small { font: 800 8.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; } .passPill .ppLv b { font: 900 20px/1 var(--font-title); }
.passPill.lvUp .ppLv { animation: pMedal .8s cubic-bezier(.3,1.7,.5,1) both; box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 0 26px rgba(242,193,78,.95); }
.passPill .ppMid { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.passPill .ppBar { position: relative; display: block; height: 9px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; }
.passPill .ppBar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #b8811a, #f2c14e, #fff1c2); box-shadow: 0 0 10px rgba(242,193,78,.6); transition: width .65s cubic-bezier(.2,.8,.2,1); }
.passPill .ppTxt { font-size: 15px; color: #ffd36e; } .passPill .ppTxt em { color: #7dffb0; font-style: normal; font-size: 13px; }
.passHub { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 14px; cursor: pointer; color: inherit; text-align: left;
border: 1px solid rgba(242,193,78,.4); background: linear-gradient(135deg, rgba(60,36,10,.55), rgba(26,12,48,.75)); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.passHub.prem { border-color: rgba(201,139,255,.6); background: linear-gradient(135deg, rgba(123,63,208,.5), rgba(26,12,48,.8)); }
.passHub .ph-crest { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff1c2, #f2c14e 45%, #9c6a12); color: #2a1604; }
.passHub.prem .ph-crest { background: radial-gradient(circle at 35% 30%, #fbe9ff, #c98bff 45%, #5a1f9e); }
.passHub .ph-crest .mi { width: 22px; height: 22px; }
.passHub .ph-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.passHub .ph-txt b { font: 800 15px var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passHub .ph-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; } .passHub .ph-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8811a, #f2c14e); }
.passHub .ph-txt small { font-size: 12px; color: #d9cdf3; }
.passHub .shBadge { position: absolute; top: -8px; right: -8px; }
body.portrait .pHead { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
body.portrait .pTitle h2 { font-size: 50px; } body.portrait .pTitle .eyebrow { font-size: 19px; } body.portrait .pEnds { font-size: 21px; }
body.portrait .pMedal { width: 130px; height: 130px; } body.portrait .pMedal b { font-size: 58px; } body.portrait .pMedal small { font-size: 14px; }
body.portrait .pXpTop b { font-size: 28px; } body.portrait .pXpTop span { font-size: 21px; } body.portrait .pBar { height: 22px; }
body.portrait .pXpSub { font-size: 19px; flex-wrap: wrap; } body.portrait .pInfoBtn { font-size: 19px; padding: 8px 16px; }
body.portrait .pCta { min-width: 0; } body.portrait .pBuy { min-height: 88px; font-size: 28px; } body.portrait .pCtaRow .btn { min-height: 76px; font-size: 24px; }
body.portrait .pOwned b { font-size: 26px; } body.portrait .pOwned small { font-size: 19px; }
body.portrait .pRowLab { width: 110px; grid-template-rows: 60px 1fr 1fr; } body.portrait .pRowLab span { font-size: 20px; }
body.portrait .pCol { width: 220px; grid-template-rows: 60px 1fr 1fr; }
body.portrait .pNode b { min-width: 52px; height: 52px; font-size: 24px; }
body.portrait .pTile { padding-bottom: 42px; } body.portrait .pTile .pt-name { font-size: 21px; } body.portrait .pTile .pt-kind { font-size: 16px; }
body.portrait .pTile .pt-state { height: 38px; font-size: 19px; }
body.portrait .pr-ico { width: 100px; height: 100px; } body.portrait .pr-ico .coin { width: 56px; height: 56px; } body.portrait .pr-ico .mi { width: 50px; height: 50px; }
body.portrait .pTile .pp { max-height: 200px; }
body.portrait .pTile .pp-emote span, body.portrait .pTile .pp-title span { font-size: 19px; max-width: 190px; }
body.portrait .pNext { width: 420px; } body.portrait .pNext b { font-size: 28px; } body.portrait .pNext span, body.portrait .pNext ul { font-size: 20px; }
body.portrait .pFoot { font-size: 20px; }
body.portrait .pbs-tiers { grid-template-columns: 1fr; } body.portrait .pDetail { flex-direction: column; text-align: center; }
body.portrait .plu-card { width: 94%; } body.portrait .plu-t { width: 250px; height: 180px; } body.portrait .plu-t small { font-size: 18px; }
body.portrait .plu-title { font-size: 48px; }
body.portrait .passPill .ppTxt { font-size: 22px; } body.portrait .passPill .ppMid { min-width: 220px; }
body.portrait .passHub .ph-txt b { font-size: 24px; } body.portrait .passHub .ph-txt small { font-size: 19px; } body.portrait .passHub .ph-crest { width: 56px; height: 56px; }
body.portrait .passHub .ph-crest .mi { width: 32px; height: 32px; } body.portrait .passHub .ph-bar { height: 9px; }
body.mobile:not(.portrait) .pHead { grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.3fr) auto; padding: 12px 18px; }
body.mobile:not(.portrait) .pTitle h2 { font-size: 40px; } body.mobile:not(.portrait) .pTitle .eyebrow { font-size: 18px; } body.mobile:not(.portrait) .pEnds { font-size: 20px; }
body.mobile:not(.portrait) .pXpTop b { font-size: 28px; } body.mobile:not(.portrait) .pXpTop span, body.mobile:not(.portrait) .pXpSub { font-size: 20px; }
body.mobile:not(.portrait) .pInfoBtn { font-size: 18px; } body.mobile:not(.portrait) .pBuy { font-size: 24px; min-height: 70px; }
body.mobile:not(.portrait) .pCtaRow .btn { font-size: 21px; min-height: 58px; } body.mobile:not(.portrait) .pOwned b { font-size: 23px; } body.mobile:not(.portrait) .pOwned small { font-size: 17px; }
body.mobile:not(.portrait) .pCol { width: 176px; } body.mobile:not(.portrait) .pNode b { font-size: 22px; height: 42px; }
body.mobile:not(.portrait) .pTile .pt-name { font-size: 19px; } body.mobile:not(.portrait) .pTile .pt-kind { font-size: 14px; } body.mobile:not(.portrait) .pTile .pt-state { font-size: 17px; height: 30px; }
body.mobile:not(.portrait) .pRowLab span { font-size: 19px; } body.mobile:not(.portrait) .pFoot { font-size: 19px; }
body.mobile:not(.portrait) .pNext b { font-size: 24px; } body.mobile:not(.portrait) .pNext span, body.mobile:not(.portrait) .pNext ul { font-size: 18px; }
body.mobile .passPill .ppTxt { font-size: 21px; } body.mobile .passHub .ph-txt b { font-size: 21px; } body.mobile .passHub .ph-txt small { font-size: 17px; }
body.mobile .plu-t small { font-size: 18px; } body.mobile .plu-card .eyebrow { font-size: 18px; }
.cs-arc-light .card .face .art { filter: saturate(1.15) hue-rotate(-18deg) brightness(1.06) contrast(1.05); }
.cs-arc-light .card .face { animation: csArcGlow 3s ease-in-out infinite; }
.cs-arc-light .card .face::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
background: linear-gradient(118deg, transparent 38%, rgba(200,170,255,.0) 42%, rgba(235,220,255,.75) 47%, rgba(170,120,255,.35) 50%, transparent 56%) 0 0 / 300% 100%,
radial-gradient(ellipse at 50% 0%, rgba(190,150,255,.28), transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(190,150,255,.22), transparent 40%);
animation: csArcSweep 3s ease-in-out infinite; }
@keyframes csArcSweep { 0%, 35% { background-position: 110% 0, 0 0, 0 0; } 70%, 100% { background-position: -20% 0, 0 0, 0 0; } }
@keyframes csArcGlow { 0%, 100% { box-shadow: 0 0 0 1.1cqw #b58cff, 0 0 5cqw rgba(170,120,255,.55), 0 6px 16px rgba(0,0,0,.55); }
52% { box-shadow: 0 0 0 1.1cqw #f1e6ff, 0 0 10cqw rgba(200,160,255,.95), 0 6px 16px rgba(0,0,0,.55); } 56% { box-shadow: 0 0 0 1.1cqw #b58cff, 0 0 6cqw rgba(170,120,255,.6), 0 6px 16px rgba(0,0,0,.55); } }
.cs-brass-etch .card .face .art { filter: sepia(1) saturate(1.6) hue-rotate(-12deg) contrast(1.25) brightness(.92); }
.cs-brass-etch .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay;
background: repeating-linear-gradient(35deg, rgba(255,230,170,.18) 0 .6cqw, transparent .6cqw 1.6cqw), linear-gradient(135deg, rgba(255,220,140,.25), transparent 50%, rgba(120,70,10,.35)); }
.cs-brass-etch .card .face { box-shadow: 0 0 0 1.2cqw #b8863a, 0 0 0 1.8cqw #5a3a10, 0 6px 16px rgba(0,0,0,.55); }
.cs-kinetoscope .card .face .art { filter: sepia(.9) contrast(1.15) brightness(.95); animation: csFlicker 3.2s steps(1) infinite; }
.cs-kinetoscope .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
background: repeating-linear-gradient(90deg, #f3e3c0 0 2.4cqw, transparent 2.4cqw 5cqw) top 1.2cqw left 1cqw / calc(100% - 2cqw) 2cqw no-repeat,
repeating-linear-gradient(90deg, #f3e3c0 0 2.4cqw, transparent 2.4cqw 5cqw) bottom 1.2cqw left 1cqw / calc(100% - 2cqw) 2cqw no-repeat,
linear-gradient(#120a04, #120a04) top / 100% 4.4cqw no-repeat, linear-gradient(#120a04, #120a04) bottom / 100% 4.4cqw no-repeat,
radial-gradient(ellipse at center, transparent 55%, rgba(30,16,4,.55)); z-index: 4; }
@keyframes csFlicker { 0%, 100% { opacity: 1; } 12% { opacity: .9; } 13% { opacity: 1; } 47% { opacity: .93; } 48% { opacity: 1; } 81% { opacity: .88; } 82% { opacity: 1; } }
.cs-exposition-fa .card .face:not(.fa-face) .art { left: 0 !important; top: 0 !important; width: 100% !important; height: 60% !important; object-fit: cover; border-radius: 0; }
.cs-exposition-fa .card .face:not(.fa-face) .cf-frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 48%, #000 58%); mask-image: linear-gradient(180deg, transparent 0, transparent 48%, #000 58%); }
.cs-exposition-fa .card .face:not(.fa-face) .cf-name { z-index: 2; text-shadow: 0 0 .8cqw #000, 0 .3cqw .6cqw #000; }
.cs-exposition-fa .card .face:not(.fa-face)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%), linear-gradient(115deg, transparent 20%, rgba(255,120,220,.22) 35%, rgba(120,220,255,.22) 45%, rgba(255,240,150,.22) 55%, transparent 70%);
background-size: 100% 100%, 250% 100%; mix-blend-mode: screen; animation: csHolo 5s ease-in-out infinite; }
.cs-exposition-fa .card .face { box-shadow: 0 0 0 1.2cqw #f2c14e, 0 0 6cqw rgba(242,193,78,.45), 0 6px 16px rgba(0,0,0,.55); }
@keyframes csHolo { 0%, 100% { background-position: 0 0, 120% 0; } 50% { background-position: 0 0, -20% 0; } }
.fr-wardenclyffe-crown .hubleader .lc, .fr-wardenclyffe-crown #game .lcard.mine .lc, .pp-frame.fr-wardenclyffe-crown .lc {
outline: 3px solid #bff0ff; outline-offset: 5px; animation: frCrown 2.6s ease-in-out infinite; }
.fr-wardenclyffe-crown .profile .av { border-color: #bff0ff; box-shadow: 0 0 0 3px #f2c14e, 0 0 18px #6fd3ff; animation: frCrown 2.6s ease-in-out infinite; }
@keyframes frCrown {
0%, 100% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 18px 6px rgba(111,211,255,.45); outline-color: #bff0ff; }
46% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 18px 6px rgba(111,211,255,.45); }
50% { box-shadow: 0 0 0 9px #fff4d6, 0 0 44px 14px rgba(191,240,255,.95); outline-color: #ffffff; }
54% { box-shadow: 0 0 0 7px rgba(242,193,78,.85), 0 0 26px 8px rgba(111,211,255,.6); } }
body.fx-low .fr-wardenclyffe-crown .lc, body.fx-low .cs-arc-light .card .face, body.fx-low .cs-arc-light .card .face::before, body.fx-low .cs-kinetoscope .card .face .art, body.fx-low .cs-exposition-fa .card .face::before { animation: none !important; }
.lcb-wc-arc { opacity: 0; animation: wcArc 5.5s steps(1) infinite; } .lcb-wc-arc .a2 { animation: wcArc2 5.5s steps(1) infinite; }
@keyframes wcArc { 0%, 100% { opacity: 0; } 62% { opacity: 1; } 64% { opacity: .2; } 66% { opacity: .9; } 70% { opacity: 0; } }
@keyframes wcArc2 { 0%, 64%, 100% { opacity: 0; } 66% { opacity: 1; } 69% { opacity: 0; } }
.lcb-wc-halo { animation: wcHalo 5.5s ease-in-out infinite; } @keyframes wcHalo { 0%, 55%, 75%, 100% { opacity: .35; } 63% { opacity: 1; } }
.lcbv-arc-storm .lcb-var { pointer-events: none; }
.lcbv-arc-storm .lcb-var::before, .lcbv-arc-storm .lcb-var::after { content: ""; position: absolute; top: 0; bottom: 0; width: 180px; opacity: 0;
background: radial-gradient(ellipse at 0% 50%, rgba(160,230,255,.55), transparent 70%); animation: arcStorm 4.6s steps(1) infinite; }
.lcbv-arc-storm .lcb-var::before { left: 0; } .lcbv-arc-storm .lcb-var::after { right: 0; transform: scaleX(-1); animation-delay: 2.1s; }
@keyframes arcStorm { 0%, 100% { opacity: 0; } 40% { opacity: .9; } 42% { opacity: .15; } 44% { opacity: .75; } 48% { opacity: 0; } }
.bn-dynamo { background: radial-gradient(ellipse at 78% 50%, #1b2c52, #0a1024 70%); }
.bn-dyn-glow { position: absolute; right: 70px; top: 50%; width: 140px; height: 140px; margin-top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(111,211,255,.5), transparent 70%); animation: bnLamp 2.4s ease-in-out infinite; }
.bn-dyn-coil { position: absolute; right: 100px; top: 50%; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; border: 6px solid #b87333; box-shadow: inset 0 0 0 5px #6b3a14, 0 0 12px rgba(184,115,51,.6); animation: czSpin 3s linear infinite; }
.bn-dyn-coil i { position: absolute; left: 50%; top: 50%; width: 4px; height: 34px; margin: -34px 0 0 -2px; background: #e8a060; transform-origin: 50% 100%; }
.bn-dyn-coil i:nth-child(2) { transform: rotate(60deg); } .bn-dyn-coil i:nth-child(3) { transform: rotate(120deg); } .bn-dyn-coil i:nth-child(4) { transform: rotate(180deg); }
.bn-dyn-coil i:nth-child(5) { transform: rotate(240deg); } .bn-dyn-coil i:nth-child(6) { transform: rotate(300deg); }
.bn-dyn-sparks i { position: absolute; right: 140px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #dff6ff; box-shadow: 0 0 8px #6fd3ff; animation: bnSpark 1.6s ease-out infinite; }
.bn-dyn-sparks i:nth-child(2) { animation-delay: .4s; right: 120px; } .bn-dyn-sparks i:nth-child(3) { animation-delay: .8s; right: 160px; } .bn-dyn-sparks i:nth-child(4) { animation-delay: 1.2s; right: 110px; }
@keyframes bnSpark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-60px, -26px); opacity: 0; } }
.bn-whitecity { background: linear-gradient(180deg, #060818, #121a3a 70%, #1c2446); }
.bn-wc-sky { position: absolute; inset: 0; background: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 15%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 30%, #fff 0 1.2px, transparent 2px); opacity: .7; }
.bn-wc-city { position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; }
.bn-wc-beam { position: absolute; bottom: 20%; width: 26px; height: 170%; background: linear-gradient(0deg, rgba(255,240,190,.55), transparent); transform-origin: 50% 100%; filter: blur(2px); }
.bn-wc-beam.b1 { left: 40%; animation: bnBeam 7s ease-in-out infinite; } .bn-wc-beam.b2 { left: 72%; animation: bnBeam 9s ease-in-out infinite reverse; }
@keyframes bnBeam { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(24deg); } }
.hue-brass .cz-svg { filter: sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(1.05) contrast(1.1) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-voltaic .cz-svg { filter: hue-rotate(170deg) saturate(1.8) brightness(1.2) drop-shadow(0 0 10px rgba(111,211,255,.9)); animation: czVolt 3s ease-in-out infinite; }
@keyframes czVolt { 50% { filter: hue-rotate(170deg) saturate(1.8) brightness(1.45) drop-shadow(0 0 16px rgba(191,240,255,1)); } }
.pose-eureka .cz-svg { animation: czEureka 2.8s cubic-bezier(.3,1.6,.5,1) infinite; transform-origin: 50% 100%; }
@keyframes czEureka { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-10px) scale(1.05); } 80% { transform: none; } }
.pose-eureka .cz-head { transform: rotate(-10deg) translateY(-2px); }
.pose-tinkering .cz-head { animation: czTinker 1.4s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes czTinker { 0%, 100% { transform: rotate(18deg) translateY(4px); } 50% { transform: rotate(12deg) translateY(6px); } }
body.fx-low .hue-voltaic .cz-svg, body.fx-low .pose-eureka .cz-svg, body.fx-low .pose-tinkering .cz-head { animation: none !important; }
.pTile .pt-art { position: relative; overflow: hidden; }
.pTile .pt-art > .pr-ico { width: auto; height: min(70px, 100%); aspect-ratio: 1; }
.pTile .pt-art > .pp-card, .pTile .pt-art > .pp-frame { width: auto; height: min(100px, 100%); aspect-ratio: 5 / 7; }
.pTile .pt-art > .pp-comp { width: auto; height: min(96px, 100%); aspect-ratio: 1; }
.pTile .pt-art > .pp-banner { height: auto; max-height: 100%; aspect-ratio: 124 / 48; width: min(124px, 100%); }
.pTile .pt-art > .pp-board { height: auto; max-height: 100%; aspect-ratio: 16 / 9; width: min(120px, 100%); }
body.portrait .pTile .pt-art > .pr-ico { height: min(100px, 100%); } body.portrait .pTile .pt-art > .pp-card, body.portrait .pTile .pt-art > .pp-frame { height: min(150px, 100%); }
body.portrait .pTile .pt-art > .pp-comp { height: min(140px, 100%); } body.portrait .pTile .pt-art > .pp-banner { width: min(190px, 100%); } body.portrait .pTile .pt-art > .pp-board { width: min(190px, 100%); }
body.portrait .pRowLab { width: 76px; padding-left: 8px; } body.portrait .pRowLab span { font-size: 18px; }
body.portrait .tl-long { display: none; }
body.mobile:not(.portrait) #season .body.passBody { bottom: 150px; gap: 10px; }
body.mobile:not(.portrait) .pHead { padding: 10px 16px; gap: 16px; }
body.mobile:not(.portrait) .pTitle h2 { font-size: 34px; margin: 0 0 4px; }
body.mobile:not(.portrait) .pMedal { width: 86px; height: 86px; } body.mobile:not(.portrait) .pMedal b { font-size: 40px; }
body.mobile:not(.portrait) .pXpSub > span:not(.pCatch) { display: none; }
body.mobile:not(.portrait) .pXpSub { justify-content: flex-start; }
body.mobile:not(.portrait) .pTile .pt-kind { display: none; }
body.mobile:not(.portrait) .pTile { padding: 8px 6px 32px; gap: 3px; }
body.mobile:not(.portrait) .pTile .pt-name { font-size: 18px; -webkit-line-clamp: 1; }
body.mobile:not(.portrait) .pNext ul, body.mobile:not(.portrait) .pNext small { display: none; }
body.mobile:not(.portrait) .pFoot { font-size: 17px; }
.plu-l { display: grid; grid-template-columns: auto auto; gap: 8px; } .plu-l > span { grid-column: 1 / -1; }
body.mobile .plu-card { width: min(1200px, 94%); } body.mobile .plu-t { width: 250px; height: 170px; } body.mobile .plu-t small { font-size: 24px; }
body.mobile .plu-card .eyebrow { font-size: 22px; } body.mobile .plu-title { font-size: 50px; } body.mobile .plu-l > span { font-size: 20px; }
body.mobile .plu-act .btn { font-size: 24px; min-height: 64px; padding: 0 26px; }
body.mobile:not(.portrait) .plu-medal { width: 120px; height: 120px; margin-top: 4px; } body.mobile:not(.portrait) .plu-medal b { font-size: 54px; }
body.portrait .plu-l { grid-template-columns: 1fr 1fr; }
.pr-wc .lc-wc i { width: 30px; height: 38px; font-size: 18px; border-radius: 6px; }
body.cs-declaration-parchment .card .face .art { filter: sepia(.65) saturate(1.25) contrast(1.08) brightness(1); }
body.cs-patent-1790 .card .face .art { filter: grayscale(1) sepia(1) hue-rotate(-12deg) saturate(1.6) brightness(.86) contrast(1.25); }
body.cs-copperplate .card .face .art { filter: sepia(1) saturate(2) hue-rotate(-28deg) contrast(1.25) brightness(.9); }
body.cs-magic-lantern .card .face .art { filter: sepia(.7) saturate(1.5) hue-rotate(-20deg) brightness(1.05); }
body.cs-kite-spark .card .face, body.cs-liberty-fa .card .face::before { filter: hue-rotate(-150deg) saturate(1.3); }
body.fr-kite-and-key .hubleader .lc, body.fr-lightning-crown .hubleader .lc, body.fr-lightning-crown #game .lcard.mine .lc { filter: hue-rotate(-160deg) saturate(1.4); }
body.board-franklins-storm .lcb, .lcb-as-franklins-storm { filter: hue-rotate(25deg) saturate(.8) brightness(.95); }
body.board-frontier-landing .lcb, .lcb-as-frontier-landing { filter: hue-rotate(-15deg) saturate(1.2) sepia(.2); }
.lcbv-kite-storm .lcb-var { filter: hue-rotate(-150deg) saturate(1.5); }
.bn-as-banner-franklin-battery { filter: hue-rotate(-25deg) saturate(1.2); }
.bn-as-banner-lamplight { filter: sepia(.35) hue-rotate(-10deg) brightness(.95); }
.hue-continental .cz-svg { filter: grayscale(.4) sepia(.4) hue-rotate(190deg) saturate(1.6) brightness(.95) drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hue-stormcloud .cz-svg { filter: grayscale(.75) brightness(.9) contrast(1.1) drop-shadow(0 0 9px rgba(200,225,255,.85)); }
/* css/legal.css */
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible, [role="switch"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: 3px solid #ffd76a; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(11, 7, 22, .75); }
.lg-body:focus-visible { outline-offset: -3px; }
h2[tabindex="-1"]:focus, h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.wg-dust, .wg-logo, .wg-dot, .wg-form.busy .wg-submit, .fi-art { animation: none !important; }
.lg-ov, .lg-ov.out, .lg-notice, .lg-notice.out, .lg-card { animation: none !important; transition: none !important; }
}
.lg-ov { z-index: 1190; }
.lg-ov .lg-card { position: relative; text-align: left; }
.lg-x { position: absolute; top: calc(var(--u) * 12); right: calc(var(--u) * 12); z-index: 2; width: calc(var(--u) * 40); height: calc(var(--u) * 40); display: grid; place-items: center;
border-radius: 50%; border: 1px solid rgba(190, 160, 255, .3); background: rgba(8, 4, 18, .7); color: var(--ink); cursor: pointer; padding: 0; }
.lg-x .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.lg-x:hover { border-color: var(--gold-2, #e0a53a); }
.lg-ov a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; }
.lg-ov .wg-head { padding-right: calc(var(--u) * 40); }
.lg-ov .wg-acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); }
.lg-ov .wg-link { font-size: calc(var(--u) * 14); }
.lg-docov .lg-card { width: calc(var(--u) * 820); height: calc(100% - 32px); max-height: calc(100% - 32px); overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--u) * 22) calc(var(--u) * 26); }
.lg-doc { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); padding-right: calc(var(--u) * 46); }
.lg-tabs button { appearance: none; cursor: pointer; border-radius: 99px; border: 1px solid rgba(190, 160, 255, .28); background: rgba(6, 3, 14, .55); color: #ddd2f2;
font: 800 calc(var(--u) * 12.5) / 1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: calc(var(--u) * 9) calc(var(--u) * 14); }
.lg-tabs button.on { color: #2b1600; border-color: transparent; background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); }
.lg-title { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); font: 800 calc(var(--u) * 26) / 1.15 var(--font-title); letter-spacing: .04em; color: #ffd76a; }
.lg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: calc(var(--u) * 10); color: #e9e0fa; font-size: calc(var(--u) * 15.5); line-height: 1.6;
-webkit-user-select: text; user-select: text; }
.lg-body h2 { margin: calc(var(--u) * 18) 0 calc(var(--u) * 6); font: 800 calc(var(--u) * 14) / 1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #ffd76a; }
.lg-body section:first-child h2 { margin-top: 0; }
.lg-body p { margin: 0 0 calc(var(--u) * 10); }
.lg-body ul { margin: 0 0 calc(var(--u) * 10); padding-left: calc(var(--u) * 22); }
.lg-body li { margin: 0 0 calc(var(--u) * 7); }
.lg-body b { color: #fff4d6; }
.lg-updated { margin-top: calc(var(--u) * 16) !important; color: #c9bde6; font-size: calc(var(--u) * 13.5); }
.lg-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); padding-top: calc(var(--u) * 12); margin-top: calc(var(--u) * 6); border-top: 1px solid rgba(190, 160, 255, .16); }
.lg-foot .lg-web { font-size: calc(var(--u) * 13.5); }
.lg-foot .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 11) calc(var(--u) * 26); }
body.portrait .lg-docov .lg-card { width: calc(100% - 40px); height: calc(100% - 80px); }
body.mobile:not(.portrait) .lg-docov .lg-card { width: calc(100% - 60px); height: calc(100% - 20px); max-height: calc(100% - 20px); padding: calc(var(--u) * 12) calc(var(--u) * 18); }
body.mobile:not(.portrait) .lg-title { margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 19); }
body.mobile:not(.portrait) .lg-tabs button { padding: calc(var(--u) * 7) calc(var(--u) * 12); }
body.mobile:not(.portrait) .lg-foot { padding-top: calc(var(--u) * 6); }
body.mobile:not(.portrait) .lg-docov .lg-body { font-size: calc(var(--u) * 17.5); }
body.mobile:not(.portrait) .lg-foot .btn { padding: calc(var(--u) * 8) calc(var(--u) * 22); }
.lg-sum { margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); padding-left: calc(var(--u) * 20); color: #e9e0fa; font-size: calc(var(--u) * 14.5); line-height: 1.5; }
.lg-read { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 14); color: #ddd2f2; }
.lg-u13 .wg-form { gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6); }
.lg-u13 .wg-form + .wg-form { margin-top: calc(var(--u) * 12); }
.lg-u13acts { align-items: center; }
.lg-danger { border-color: rgba(255, 110, 95, .6) !important; color: #ffd3cc !important; }
.lg-danger:hover { background: rgba(255, 90, 79, .16) !important; }
.lg-del .wg-submit.lg-danger { background: linear-gradient(180deg, #d9534a, #a8332c); color: #fff !important; }
body.mobile:not(.portrait) .lg-ov .wg-head p { font-size: calc(var(--u) * 13); }
body.mobile:not(.portrait) .lg-termsov .lg-sum { display: none; }
.lg-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lg-links a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lg-links i { font-style: normal; color: rgba(233, 220, 255, .5); }
.wg-foot .wg-legal { margin-left: calc(var(--u) * 10); pointer-events: auto; letter-spacing: .08em; }
.wg-foot .wg-legal a { color: rgba(255, 215, 106, .85); }
.lg-acctlinks { margin: 10px 0 0; font-size: 13px; text-align: center; color: var(--muted); }
body.mobile .lg-acctlinks { font-size: 18px; } body.portrait .lg-acctlinks { font-size: 20px; }
.lcs-legal .lg-links { margin-left: 4px; }
.lg-notice { --u: 1px; position: absolute; left: 50%; bottom: calc(var(--u) * 18); z-index: 1170; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 20); border-radius: calc(var(--u) * 16);
background: rgba(14, 8, 28, .94); border: 1px solid rgba(232, 186, 90, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); color: #f3ecff; font-family: var(--font-ui);
animation: lgUp .35s ease-out both; }
body.mobile .lg-notice { --u: 1.55px; } body.portrait .lg-notice { --u: 1.6px; bottom: calc(var(--u) * 40); } body.portrait.mobile .lg-notice { --u: 1.75px; }
.lg-notice.out { animation: lgDown .25s ease-in both; }
.lg-notice p { margin: 0; font-size: calc(var(--u) * 14.5); line-height: 1.35; }
.lg-notice .lg-more { appearance: none; background: none; border: 0; color: #ffd76a; text-decoration: underline; cursor: pointer; font: 600 calc(var(--u) * 14) var(--font-ui); padding: calc(var(--u) * 6); white-space: nowrap; }
.lg-notice .lg-ok, .lg-notice .lg-no { font-size: calc(var(--u) * 14); padding: calc(var(--u) * 8) calc(var(--u) * 20); border-radius: calc(var(--u) * 10); }
.lg-consent { gap: calc(var(--u) * 8); }
body.portrait .lg-notice { flex-wrap: wrap; justify-content: center; text-align: center; width: calc(100% - 60px); }
body.gate-on:not(.portrait) .lg-notice { left: 3%; transform: none; max-width: 40%; width: auto; flex-wrap: wrap; bottom: calc(var(--u) * 44); }
body.gate-on:not(.portrait) .lg-notice p { flex: 1 1 100%; }
body.gate-on.portrait .lg-notice { top: auto; bottom: calc(var(--u) * 36); }
body.gate-on.portrait:has(#friendIntro) .lg-notice { top: auto; bottom: calc(var(--u) * 60); }
body.gate-on:not(.portrait) .lg-notice, body.gate-on:not(.portrait) .lg-notice.out { animation-name: lgFade; }
@keyframes lgFade { from { opacity: 0; } }
@keyframes lgUp { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes lgDown { to { opacity: 0; transform: translate(-50%, 16px); } }
.lg-signup { display: grid; grid-template-columns: calc(var(--u, 1px) * 132) minmax(0, 1fr); gap: calc(var(--u, 1px) * 12); align-items: start; text-align: left; }
.lg-signup .lg-year input { text-align: center; letter-spacing: .08em; }
.lg-checks { display: flex; flex-direction: column; gap: calc(var(--u, 1px) * 7); padding-top: calc(var(--u, 1px) * 18); min-width: 0; }
.lg-signup .wg-check { align-items: flex-start; font-size: calc(var(--u, 1px) * 14); line-height: 1.35; }
.lg-signup .wg-check[hidden], .acctsheet .lg-signup .wg-check[hidden] { display: none; }
.lg-signup .wg-check input { margin-top: calc(var(--u, 1px) * 1); }
.lg-signup .wg-check a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; }
.lg-hint { font-style: normal; font-size: calc(var(--u, 1px) * 12); line-height: 1.35; color: rgba(201, 189, 230, .9); }
body.mobile:not(.portrait) .wg-card .lg-hint { display: none; }
body.mobile:not(.portrait) .wg-card #wgCreate .wg-head p { display: none; }
body.mobile:not(.portrait) .wg-card #wgCreate { gap: calc(var(--u) * 9); }
body.mobile:not(.portrait) .wg-card .lg-checks { padding-top: calc(var(--u) * 14); gap: calc(var(--u) * 4); }
body.mobile:not(.portrait) .wg-card .lg-signup .wg-check { font-size: calc(var(--u) * 12.5); }
.acctsheet .lg-signup { --u: 1px; margin: 2px 0 4px; }
body.mobile .acctsheet .lg-signup { --u: 1.35px; } body.portrait .acctsheet .lg-signup { --u: 1.5px; }
.acctsheet .lg-signup .wg-fld { display: flex; flex-direction: column; gap: 6px; }
.acctsheet .lg-signup .wg-fld > span { font: 800 calc(var(--u) * 10.5) / 1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.acctsheet .lg-signup .wg-fld input { width: 100%; box-sizing: border-box; height: calc(var(--u) * 40); border-radius: 10px; border: 1px solid var(--line); background: #1d1238; color: var(--ink); font: 500 calc(var(--u) * 16) var(--font-ui); }
.acctsheet .lg-signup .wg-check { display: flex; gap: 8px; cursor: pointer; color: var(--ink); }
.acctsheet .lg-signup .wg-check input { width: calc(var(--u) * 18); height: calc(var(--u) * 18); accent-color: var(--gold); flex: none; }
.acctsheet .lg-checks { padding-top: calc(var(--u) * 16); }
.lg-buy { display: flex; flex-direction: column; gap: 8px; margin: 8px auto 10px; max-width: 560px; text-align: left; }
.lg-bcheck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; color: #ece3fb; padding: 10px 12px; border-radius: 12px;
background: rgba(8, 4, 18, .5); border: 1px solid rgba(232, 186, 90, .35); }
.lg-bcheck input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--gold); }
.lg-bcheck a { color: #ffd76a; text-decoration: underline; }
body.mobile .lg-bcheck { font-size: 19px; gap: 14px; } body.mobile .lg-bcheck input { width: 28px; height: 28px; }
body.portrait .lg-bcheck { font-size: 21px; padding: 14px 16px; } body.portrait .lg-bcheck input { width: 30px; height: 30px; }
body.portrait .lg-buy { max-width: none; }
.settings.lg-set { margin-top: 18px; }
.lg-set .settxt p a { color: #ffd76a; }
.lg-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lg-ctl .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.lg-ctl .btn .ico { width: 16px; height: 16px; }
.lg-docbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lg-about { padding: 6px 6px 12px; color: #e3d9f6; font-size: 15px; line-height: 1.6; text-align: left; }
.lg-about p { margin: 6px 0; } .lg-about a { color: #ffd76a; }
.lg-set .err { color: #ff9d8f; min-height: 0; padding: 0 6px 8px; font-size: 14px; }
body.mobile .lg-about { font-size: 20px; } body.mobile .lg-ctl .btn { font-size: 18px; } body.mobile .lg-set .err { font-size: 19px; }
body.portrait .lg-set .set .lg-ctl { grid-column: 1 / -1; justify-content: flex-start; }
body.portrait .lg-ctl .btn { font-size: 21px; padding: 14px 20px; } body.portrait .lg-ctl .btn .ico { width: 22px; height: 22px; }
body.portrait .lg-about { font-size: 23px; } body.portrait .lg-set .err { font-size: 21px; }
body.portrait #sheet .box.acctsheet, body.portrait #sheet .box.acctsheet.wide { width: calc(100% - 40px); max-width: calc(100% - 40px); }
/* css/shop.css */
.lcs-tile.rar-Epic, .lcs-tile.rar-Legendary { box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--r) 30%, transparent) inset; }
.lcs-tile.rar-Legendary .lcs-prev { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r) 30%, transparent), rgba(10,5,24,.85) 75%); }
.lcs-tile.rar-Epic .lcs-prev { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r) 26%, transparent), rgba(10,5,24,.85) 75%); }
.lcs-tile.own::after { content: "✓"; position: absolute; top: 14px; right: 14px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font: 900 14px var(--font-ui); color: #0c2a18; background: linear-gradient(180deg, #b8ffd6, #5dff9a); box-shadow: 0 0 12px rgba(93,255,154,.5); }
.lcs-dealtag, .lcs-tagtag { position: absolute; top: 14px; left: 14px; z-index: 3; font: 900 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-style: normal;
padding: 5px 10px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.lcs-tagtag { background: linear-gradient(180deg, #e6d8ff, #a86bff); color: #1a0a33; }
.lcs-price s, .lcs-heroprice s, .lcs-dealprice s { color: #9d8fc0; font: 700 13px var(--font-ui); text-decoration-thickness: 2px; }
.lcs-save { font-style: normal; font: 900 12px var(--font-ui); color: #0c2a18; background: #7dffb0; border-radius: 99px; padding: 3px 8px; }
.lcs-looks { display: inline-flex; gap: 5px; margin-left: auto; }
.lcs-looks i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--e) 0 22%, var(--a) 30%); border: 1.5px solid rgba(255,255,255,.35); }
.lcs-looks i.own { border-color: #7dffb0; box-shadow: 0 0 6px rgba(125,255,176,.6); }
.lcs-btile .lcs-prev { height: 170px; }
.lcs-bthumbs { display: flex; gap: 8px; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding: 6px; }
.lcs-thumb { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; overflow: hidden;
border-radius: 10px; background: rgba(8,4,18,.35); padding: 4px 2px 6px; }
.lcs-mini { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; overflow: hidden; }
.lcs-mbn { position: relative; width: 94%; aspect-ratio: 39 / 10; border-radius: 6px; overflow: hidden; }
.lcs-mbn .bn { border-radius: 6px; }
.lcs-msl { width: 46px; height: 64px; }
.lcs-mcard .card { zoom: .56; }
.lcs-mtitle { font-size: 10.5px !important; padding: 6px 8px !important; line-height: 1.2; max-width: 94%; }
.lcs-mrec { transform: scale(.6); }
.lcs-thumb span { font: 700 10.5px var(--font-ui); color: #d8ccef; text-align: center; line-height: 1.15; max-height: 2.4em; overflow: hidden; }
.lcs-thumb.own span { color: #7dffb0; }
.lcs-thumb.own span::before { content: "✓ "; }
.lcs-sprev .lcs-bthumbs { flex-wrap: wrap; gap: 12px; }
.lcs-sprev .lcs-thumb { flex: 1 1 40%; min-height: 120px; }
.lcs-herothumbs .lcs-bthumbs { gap: 10px; }
.lcs-sprev .lcs-msl, .lcs-herothumbs .lcs-msl { width: 70px; height: 98px; }
.lcs-sprev .lcs-mtitle, .lcs-herothumbs .lcs-mtitle { font-size: 14px !important; }
.lcs-sprev .lcs-thumb span, .lcs-herothumbs .lcs-thumb span { font-size: 13px; }
.lcs-subs { position: sticky; top: -4px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 4px; scrollbar-width: none; touch-action: pan-x;
background: linear-gradient(180deg, rgba(12,7,26,.96) 70%, rgba(12,7,26,0)); }
.lcs-subs::-webkit-scrollbar { display: none; }
.lcs-subs button { flex: none; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(232,186,90,.22); background: rgba(20,11,40,.8); color: #cbb9ee; font: 700 14px var(--font-ui); cursor: pointer; }
.lcs-subs button:hover { color: #fff; border-color: rgba(232,186,90,.5); }
.lcs-subs button.on { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); border-color: #f6d98a; }
.lcs-feat { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 6px; }
.lcs-hero, .lcs-deal { position: relative; border-radius: 18px; border: 1px solid rgba(232,186,90,.35); cursor: pointer; overflow: hidden;
background: radial-gradient(ellipse 70% 90% at 20% 30%, rgba(140,80,240,.35), transparent 70%), linear-gradient(180deg, rgba(34,19,64,.95), rgba(14,8,28,.96)); box-shadow: 0 18px 40px rgba(0,0,0,.5);
transition: transform .3s var(--ease-back, ease-out), border-color .25s; }
.lcs-hero:hover, .lcs-deal:hover { transform: translateY(-4px); border-color: #f6d98a; }
.lcs-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 16px; min-height: 300px; }
.lcs-herothumbs .lcs-prev { height: 100%; min-height: 260px; }
.lcs-heroinfo { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lcs-heroinfo > b { font: 900 26px var(--font-title); color: #fff4d6; letter-spacing: .03em; line-height: 1.1; }
.lcs-heroinfo > span { color: #cdbfe8; font-size: 14px; line-height: 1.45; }
.lcs-heroprice, .lcs-dealprice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lcs-heroprice b, .lcs-dealprice b { display: inline-flex; align-items: center; gap: 6px; font: 900 22px var(--font-title); color: #fff4d6; }
.lcs-dealprice span { display: inline-flex; align-items: center; gap: 6px; }
.lcs-heroprice .gemicon, .lcs-dealprice .gemicon, .lcs-dealprice .coin { width: 20px; height: 20px; }
.lcs-ribbon { align-self: flex-start; font: 900 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; font-style: normal; padding: 5px 12px; border-radius: 99px;
color: #1a0a33; background: linear-gradient(180deg, #e6d8ff, #a86bff); }
.lcs-ribbon.deal { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.lcs-deal { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.lcs-deal > b { font: 900 19px var(--font-title); color: #fff4d6; }
.lcs-dealhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lcs-dealhead small { color: #bfb0dd; font: 600 12px var(--font-ui); }
.lcs-dealprev .lcs-prev { height: 150px; }
.lcs-deal .lcs-rar { align-self: flex-start; }
.lcs-dealnote { margin: 4px 0 8px; color: #f6d98a; font-size: 14px; line-height: 1.5; }
.lcs-sub small { font: 600 13px var(--font-ui); letter-spacing: .02em; color: #9d8fc0; }
.lcs-passart { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
background: radial-gradient(ellipse at 50% 40%, rgba(242,193,78,.35), transparent 65%), linear-gradient(135deg, #2a1552, #120a26); }
.lcs-passart i { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #f2c14e; box-shadow: 0 0 18px rgba(242,193,78,.6), inset 0 0 12px rgba(242,193,78,.4);
background: conic-gradient(from 0deg, #f2c14e 0 25%, transparent 0 50%, #f2c14e 0 75%, transparent 0); animation: czSpin 14s linear infinite; }
.lcs-passart b { font: 900 20px var(--font-title); color: #fff4d6; letter-spacing: .08em; }
.lcs-passart span { font: 700 13px var(--font-ui); color: #f6d98a; letter-spacing: .12em; text-transform: uppercase; }
.lcs-seasontile .lcs-small { margin: 0; }
.lcs-lookrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.lcs-lookrow button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 99px; border: 1px solid rgba(232,186,90,.25); background: rgba(20,11,40,.8); color: #d8ccef; font: 700 13px var(--font-ui); cursor: pointer; }
.lcs-lookrow button.on { border-color: #f6d98a; color: #fff4d6; background: rgba(242,193,78,.18); }
.lcs-lookrow i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--e) 0 22%, var(--a) 30%); border: 1.5px solid rgba(255,255,255,.4); }
.lcs-lookrow em { font-style: normal; color: #7dffb0; }
.lcs-gempack { position: relative; }
.lcs-bonus, .lcs-bestval, .lcs-firstx { position: absolute; font-style: normal; font: 900 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; z-index: 2; }
.lcs-bonus { top: 10px; left: 10px; color: #0a2030; background: linear-gradient(180deg, #d8f6ff, #6fd3ff); }
.lcs-bestval { top: 10px; right: 10px; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 0 14px rgba(242,193,78,.5); }
.lcs-firstx { bottom: 64px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #0c2a18; background: linear-gradient(180deg, #d4ffe6, #5dff9a); }
.lcs-gempack.best { border-color: rgba(242,193,78,.7); box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.25); }
.lcs-gemart.huge i { width: 34px; height: 34px; }
.lcs-gemrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lcs-gemrow .lcs-gempack { width: auto; padding-top: 34px; }
.lcs-firstnote { color: #7dffb0; }
.lcs-bought { display: flex; justify-content: center; margin: 6px 0 10px; }
.lcs-bought .lcs-prev { min-height: 220px; width: min(560px, 100%); }
.lcs-sleeves { display: flex; gap: 18px; align-items: center; justify-content: center; }
.lcs-sleeve { position: relative; width: 84px; height: 118px; container-type: inline-size; }
.lcs-sleeves.big .lcs-sleeve { width: 150px; height: 210px; }
.lcs-sleeve.tilt { transform: rotate(8deg) translateY(10px); }
.lcs-sleeve .cardback { position: absolute; inset: 0; border-radius: 7.5cqw; overflow: hidden; }
.sl-sleeve-inkwash .cardback { background: radial-gradient(ellipse at 50% 40%, rgba(111,160,255,.35), transparent 60%),
repeating-linear-gradient(170deg, transparent 0 14px, rgba(160,190,255,.12) 14px 16px), linear-gradient(170deg, #1b2452, #070a1c 75%);
border: 3px solid #b8c4e8; box-shadow: inset 0 0 0 2px #0a1030, inset 0 0 22px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-inkwash .cardback::after { background: radial-gradient(circle at 50% 44%, #eef3ff 0 6%, transparent 7%), radial-gradient(circle at 50% 44%, transparent 0 16%, rgba(200,215,255,.5) 17% 18%, transparent 19%),
linear-gradient(transparent 60%, rgba(120,150,230,.3) 61% 62%, transparent 63% 70%, rgba(120,150,230,.25) 71% 72%, transparent 73%); mix-blend-mode: normal; opacity: 1; }
.sl-sleeve-cogwork .cardback { background: radial-gradient(circle at 18% 12%, #5a3c0e 0 3px, transparent 4px), radial-gradient(circle at 82% 12%, #5a3c0e 0 3px, transparent 4px),
radial-gradient(circle at 18% 88%, #5a3c0e 0 3px, transparent 4px), radial-gradient(circle at 82% 88%, #5a3c0e 0 3px, transparent 4px), linear-gradient(160deg, #e8c06a, #b3842f 45%, #6e4b14);
border: 3px solid #3a2a0c; box-shadow: inset 0 0 0 2px #f2d898, inset 0 0 22px rgba(60,30,0,.6), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-cogwork .cardback::after { inset: 22%; border-radius: 50%; background: radial-gradient(circle, #6e4b14 0 18%, transparent 19%), repeating-conic-gradient(#5a3c0e 0 12deg, transparent 12deg 30deg);
-webkit-mask: radial-gradient(circle, transparent 0 30%, #000 31% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 30%, #000 31% 70%, transparent 71%);
mix-blend-mode: normal; opacity: .9; animation: czSpin 18s linear infinite; }
.sl-sleeve-travelers .cardback { background: radial-gradient(ellipse 40% 26% at 50% 40%, rgba(214,184,255,.9), rgba(168,107,255,.35) 55%, transparent 75%), linear-gradient(180deg, #120a26, #2a1a40 60%, #150e24);
border: 3px solid #d6b8ff; box-shadow: inset 0 0 0 2px #2a1640, inset 0 0 22px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-travelers .cardback::after { inset: auto 10% 12% 10%; height: 16%; border-radius: 0; background: radial-gradient(circle at 10% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 30% 50%, #ffd36e 0 8%, transparent 20%),
radial-gradient(circle at 50% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 70% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 90% 50%, #ffd36e 0 8%, transparent 20%); mix-blend-mode: normal; opacity: 1; }
.sl-sleeve-gilt-folio .cardback { background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.35) 45%, transparent 60%) 0 0 / 300% 100%,
repeating-linear-gradient(45deg, rgba(242,193,78,.12) 0 2px, transparent 2px 10px), radial-gradient(ellipse at 50% 45%, #5a1a1a, #2a0a0c 75%);
border: 3px solid #f2c14e; box-shadow: inset 0 0 0 3px #3a0c0c, inset 0 0 0 5px rgba(242,193,78,.6), inset 0 0 24px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.55); animation: slSheen 6s ease-in-out infinite; }
.sl-sleeve-gilt-folio .cardback::after { inset: 18%; border-radius: 4px; background: radial-gradient(circle at 50% 50%, #f2c14e 0 9%, transparent 10%), linear-gradient(#f2c14e, #f2c14e) center / 70% 2px no-repeat,
linear-gradient(#f2c14e, #f2c14e) center / 2px 70% no-repeat; border: 2px solid rgba(242,193,78,.7); mix-blend-mode: normal; opacity: .9; }
.sl-sleeve-readers-satchel .cardback { background: radial-gradient(ellipse 34% 14% at 50% 30%, rgba(0,0,0,.35), transparent 70%),
linear-gradient(180deg, transparent 0 34%, rgba(0,0,0,.28) 34% 35%, transparent 35%), repeating-linear-gradient(100deg, rgba(255,220,170,.05) 0 3px, transparent 3px 9px),
linear-gradient(160deg, #a5662e, #7a4519 50%, #4a2810);
border: 3px solid #e2b768; box-shadow: inset 0 0 0 2px #3a1e08, inset 0 0 0 5px rgba(255,214,150,.35), inset 0 0 22px rgba(30,12,0,.65), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-readers-satchel .cardback::after { inset: 26% 30% auto 30%; height: 20%; border-radius: 6px; mix-blend-mode: normal; opacity: 1;
background: radial-gradient(circle at 50% 50%, #c9a8ff 0 16%, #9b6bff 17% 26%, transparent 27%), linear-gradient(160deg, #f6d98a, #c9962f 60%, #8a6216);
border: 2px solid #5a3c0e; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes slSheen { 0%, 100% { background-position: 100% 0, 0 0, 0 0; } 50% { background-position: 0 0, 0 0, 0 0; } }
body.fx-low [class*="sl-sleeve"] .cardback, body.fx-low .sl-sleeve-cogwork .cardback::after { animation: none !important; }
.cs-folio-foil .card .face:not(.fa-face) .art { left: 0 !important; top: 0 !important; width: 100% !important; height: 62% !important; object-fit: cover; border-radius: 0; }
.cs-folio-foil .card .face:not(.fa-face) .cf-frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 60%); mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 60%); }
.cs-folio-foil .card .face:not(.fa-face) .cf-name { z-index: 2; text-shadow: 0 0 .8cqw #000, 0 .3cqw .6cqw #000; }
.cs-folio-foil .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .35;
background: linear-gradient(125deg, rgba(255,90,90,.6), rgba(255,220,90,.6) 20%, rgba(90,255,160,.6) 40%, rgba(90,180,255,.6) 60%, rgba(200,110,255,.6) 80%, rgba(255,90,90,.6)) 0 0 / 300% 300%;
animation: csFoil 9s linear infinite; }
.cs-folio-foil .card .face { box-shadow: 0 0 0 .9cqw #f2c14e, 0 0 5cqw rgba(242,193,78,.35), 0 6px 16px rgba(0,0,0,.55); }
@keyframes csFoil { to { background-position: 300% 300%; } }
body.fx-low .cs-folio-foil .card .face::before { animation: none !important; }
.czs .cz-shadow { transform-box: fill-box; transform-origin: 50% 50%; }
.czs-ink-sprite .cz-body { transform-origin: 50% 100% !important; animation: czsWobble 3.2s ease-in-out infinite; }
@keyframes czsWobble { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.06, .95); } 60% { transform: scale(.96, 1.05); } }
.czs-ink-sprite .cz-drops circle { animation: czsDrip 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes czsDrip { 50% { transform: translateY(-3px); opacity: .6; } }
.czs-paper-crane, .czs-little-echo, .czs-lantern-bat { animation: czHover 4s ease-in-out infinite; }
.czs-paper-crane .cz-wing-l { transform-origin: 100% 100% !important; animation: czsCrane 2.6s ease-in-out infinite; }
.czs-paper-crane .cz-wing-r { transform-origin: 0% 100% !important; animation: czsCrane 2.6s ease-in-out infinite; }
@keyframes czsCrane { 50% { transform: scaleY(.7) skewX(-6deg); } }
.czs-paper-crane .cz-tail { transform-origin: 0% 100% !important; animation: czWag 3.8s ease-in-out infinite; }
.czs-lantern-bat .cz-wing-l { transform-origin: 100% 40% !important; animation: czsBat .9s ease-in-out infinite; }
.czs-lantern-bat .cz-wing-r { transform-origin: 0% 40% !important; animation: czsBat .9s ease-in-out infinite; }
@keyframes czsBat { 50% { transform: scaleX(.62) scaleY(.9); } }
.czs-lantern-bat .cz-lamp { transform-origin: 50% 0% !important; animation: czsSway 3s ease-in-out infinite; }
@keyframes czsSway { 50% { transform: rotate(7deg); } }
.czs-lantern-bat .cz-lampglow { animation: czGlow 2.2s ease-in-out infinite; }
.czs-lantern-bat.cz-glowing .cz-lampglow { transform: scale(1.5); }
.czs-rimecrawler .cz-leg, .czs-clockwork-beetle .cz-leg { transform-origin: 50% 0% !important; animation: czsLeg 1.6s ease-in-out infinite; }
.czs-rimecrawler .cz-leg.l2, .czs-clockwork-beetle .cz-leg.l2 { animation-delay: -.8s; }
@keyframes czsLeg { 50% { transform: rotate(8deg); } }
.czs-rimecrawler .cz-shine { animation: czsShine 3.6s ease-in-out infinite; }
@keyframes czsShine { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .9; } }
.czs-rimecrawler .cz-eye, .czs-lantern-bat .cz-eye { filter: drop-shadow(0 0 2px currentColor); }
.czs-rimecrawler .cz-svg { filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(160,220,255,.35)); }
.czs-clockwork-beetle .cz-key { transform-origin: 50% 70% !important; animation: czsKey 4s ease-in-out infinite; }
@keyframes czsKey { 0%, 20% { transform: scaleX(1); } 45% { transform: scaleX(-1); } 70%, 100% { transform: scaleX(1); } }
.czs-little-echo .cz-tail { transform-origin: 50% 20% !important; animation: czsEcho 3s ease-in-out infinite; }
@keyframes czsEcho { 50% { transform: skewX(-4deg) scaleY(1.03); } }
.czs-little-echo .cz-motes circle { animation: czZ 3.6s infinite; } .czs-little-echo .cz-motes circle:nth-child(2) { animation-delay: 1.2s; } .czs-little-echo .cz-motes circle:nth-child(3) { animation-delay: 2.4s; }
.czs-little-echo .cz-glow { opacity: .55; animation: czGlow 3s ease-in-out infinite; }
.czs-quill-hedgehog .cz-body { transform-origin: 50% 100% !important; animation: czBreathe 3.4s ease-in-out infinite; }
.czs-quill-hedgehog .cz-spines { transform-origin: 55% 90% !important; animation: czsRuffle 5s ease-in-out infinite; }
@keyframes czsRuffle { 0%, 80%, 100% { transform: scale(1); } 86% { transform: scale(1.07, 1.1); } 92% { transform: scale(.98); } }
.czs-bookwyrm .cz-head { transform-origin: 20% 90% !important; animation: czTilt 5.4s ease-in-out infinite; }
.czs-bookwyrm .cz-wing { transform-origin: 100% 100% !important; animation: czsCrane 3.2s ease-in-out infinite; }
.czs-bookwyrm .cz-page { transform-origin: 0% 50% !important; animation: czsPage 6s ease-in-out infinite; }
@keyframes czsPage { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(-.9) translateX(2px); } 90% { transform: scaleX(1); } }
.czs-bookwyrm .cz-tail { transform-origin: 0% 100% !important; animation: czWag 3s ease-in-out infinite; }
.czs.cz-flare .cz-svg { filter: drop-shadow(0 0 12px rgba(255,211,110,.9)); }
.czb.czs-rimecrawler .cz, .czb-rimecrawler .cz, .czb-rimecrawler-v2 .cz, .czb-rimecrawler-v3 .cz { transform: translateX(-10px); }
body.fx-low .czs *, body.fx-low .czs { animation: none !important; }
.bns-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bns-inkwash { background: linear-gradient(180deg, #060a20, #121a44 60%, #0a0e26); }
.bns-flow path { animation: bnsFlow 9s linear infinite; }
.bns-flow path:nth-child(2) { animation-duration: 12s; } .bns-flow path:nth-child(3) { animation-duration: 15s; }
@keyframes bnsFlow { to { stroke-dashoffset: -560; } }
.bns-glint { animation: bnTwinkle 3s ease-in-out infinite alternate; }
.bns-corner { background: #1c1030; }
.bns-win rect { animation: bnsFlicker 4.2s ease-in-out infinite; } .bns-win rect:nth-child(2n) { animation-delay: -1.7s; }
@keyframes bnsFlicker { 0%, 100% { opacity: .95; } 40% { opacity: .75; } 55% { opacity: 1; } }
.bns-teslawin { filter: drop-shadow(0 0 6px #ffd36e); animation: bnsFlicker 5s ease-in-out infinite; }
.bns-sign { position: absolute; right: 2%; top: 33%; width: 16%; transform-origin: 50% 0; animation: bnsSwing 4s ease-in-out infinite; }
.bns-sign::before { content: ""; position: absolute; left: 20%; right: 20%; top: -6px; height: 8px; border-left: 2px solid #3a2418; border-right: 2px solid #3a2418; }
.bns-sign i { display: block; margin-top: 2px; padding: 3px 4px; border-radius: 3px; background: #3a2418; border: 1.5px solid #c9953a; color: #f6d98a; font: 700 7.5px var(--font-title); font-style: normal; text-align: center; white-space: nowrap; overflow: hidden; transform: rotate(-4deg); }
.cc-lg .bns-sign i { font-size: 10px; } .cc-sm .bns-sign i { font-size: 6px; }
@keyframes bnsSwing { 50% { transform: rotate(7deg); } }
.bns-cog { background: radial-gradient(ellipse at 70% 50%, #2a2410, #0e0c06 75%); }
.bns-needle { animation: bnsNeedle 2.8s ease-in-out infinite; }
@keyframes bnsNeedle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-40deg); } 60% { transform: rotate(20deg); } }
.bns-steam { position: absolute; bottom: 30%; width: 18px; height: 18px; border-radius: 50%; background: rgba(230,225,215,.4); filter: blur(4px); animation: bnsSteam 3.6s ease-out infinite; opacity: 0; }
.bns-steam.s1 { left: 44%; } .bns-steam.s2 { left: 76%; animation-delay: 1.2s; } .bns-steam.s3 { left: 84%; animation-delay: 2.4s; }
@keyframes bnsSteam { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-60px) scale(2.2); } }
.bns-wilds { background: linear-gradient(180deg, #0a1a24, #16323a 60%, #0c1a14); }
.bns-flies { position: absolute; inset: 0; }
.bns-flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e8ff8a; box-shadow: 0 0 8px 2px rgba(220,255,120,.7); animation: bnsFly 7s ease-in-out infinite; }
.bns-flies i:nth-child(1) { left: 18%; top: 60%; } .bns-flies i:nth-child(2) { left: 34%; top: 40%; animation-delay: -1s; animation-duration: 8s; } .bns-flies i:nth-child(3) { left: 52%; top: 66%; animation-delay: -2s; }
.bns-flies i:nth-child(4) { left: 64%; top: 34%; animation-delay: -3s; animation-duration: 9s; } .bns-flies i:nth-child(5) { left: 78%; top: 56%; animation-delay: -4s; } .bns-flies i:nth-child(6) { left: 88%; top: 30%; animation-delay: -5s; animation-duration: 6s; }
.bns-flies i:nth-child(7) { left: 8%; top: 36%; animation-delay: -6s; }
@keyframes bnsFly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(14px, -10px); opacity: .5; } 75% { transform: translate(-8px, -18px); opacity: 1; } }
.bns-spine { background: #231440; }
.bns-pennant { position: absolute; width: 5%; height: 9%; background: linear-gradient(90deg, #b3261e, #e0564a); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; animation: bnsFlag 1.6s ease-in-out infinite; }
.bns-pennant.p1 { left: 64.75%; top: 3%; } .bns-pennant.p2 { left: 81.75%; top: 3%; animation-delay: -.8s; }
@keyframes bnsFlag { 50% { transform: scaleX(.8) skewY(8deg); } }
.bns-rime { background: linear-gradient(180deg, #030818, #0c1a36); }
.bns-aurora { position: absolute; left: -20%; right: -20%; top: -10%; height: 70%; filter: blur(8px); opacity: .75;
background: linear-gradient(100deg, transparent 10%, rgba(90,255,180,.55) 25%, transparent 38%, rgba(120,200,255,.4) 52%, transparent 64%, rgba(160,110,255,.45) 78%, transparent 90%); animation: bnsAurora 12s ease-in-out infinite alternate; }
@keyframes bnsAurora { from { transform: translateX(-8%) skewX(-10deg); opacity: .55; } to { transform: translateX(8%) skewX(8deg); opacity: .9; } }
.bns-harbor { background: linear-gradient(180deg, #06102a, #102448 70%, #0a1830); overflow: hidden; }
.bns-beam { position: absolute; right: 16.5%; top: 29%; width: 260%; height: 30%; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255,230,150,.55), rgba(255,230,150,0) 70%);
clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%); animation: bnsBeam 7s ease-in-out infinite; }
@keyframes bnsBeam { 0%, 100% { transform: rotate(-8deg); opacity: .8; } 50% { transform: rotate(10deg); opacity: .5; } }
.bns-waves { animation: bnsWaves 4s linear infinite; }
@keyframes bnsWaves { to { transform: translateX(40px); } }
.bns-shard { background: radial-gradient(ellipse at 62% 20%, #3a1a6a, #120824 70%); }
.bns-crack { filter: drop-shadow(0 0 6px #b58cff); animation: bnsCrack 4s ease-in-out infinite; }
@keyframes bnsCrack { 50% { stroke: #fff; } }
.bns-shards { position: absolute; inset: 0; }
.bns-shards i { position: absolute; top: -10%; width: 8px; height: 12px; background: linear-gradient(135deg, #f3e6ff, #a86bff); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); filter: drop-shadow(0 0 4px #b58cff); animation: bnsFall 6s linear infinite; }
.bns-shards i:nth-child(1) { left: 56%; } .bns-shards i:nth-child(2) { left: 62%; animation-delay: -1s; animation-duration: 7s; } .bns-shards i:nth-child(3) { left: 68%; animation-delay: -2s; }
.bns-shards i:nth-child(4) { left: 48%; animation-delay: -3s; animation-duration: 8s; } .bns-shards i:nth-child(5) { left: 74%; animation-delay: -4s; } .bns-shards i:nth-child(6) { left: 84%; animation-delay: -5s; animation-duration: 9s; }
@keyframes bnsFall { from { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(140px) rotate(200deg); opacity: 0; } }
.bns-blank { background: linear-gradient(180deg, #4a4658, #6a6678 60%, #3a3648); }
.bns-fog { position: absolute; top: 0; bottom: 0; width: 70%; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(245,242,250,.55), transparent 70%); animation: bnsFog 14s ease-in-out infinite alternate; }
.bns-fog.f1 { left: -20%; } .bns-fog.f2 { right: -24%; animation-direction: alternate-reverse; animation-duration: 18s; }
@keyframes bnsFog { from { transform: translateX(-8%); } to { transform: translateX(10%); } }
.bns-trav { background: linear-gradient(180deg, #0a0820, #241640 70%, #150e24); }
.bns-shardglow { animation: czGlow 4s ease-in-out infinite; }
.bns-lamps { position: absolute; left: 30%; right: 36%; bottom: 20%; height: 20%; display: flex; justify-content: space-between; align-items: flex-end; }
.bns-lamps i { width: 7px; height: 9px; border-radius: 2px; background: #ffd36e; box-shadow: 0 0 10px 4px rgba(255,190,90,.5); animation: bnsBob 2.4s ease-in-out infinite; }
.bns-lamps i:nth-child(2) { animation-delay: -.5s; transform: translateY(-3px); } .bns-lamps i:nth-child(3) { animation-delay: -1s; } .bns-lamps i:nth-child(4) { animation-delay: -1.5s; } .bns-lamps i:nth-child(5) { animation-delay: -2s; }
@keyframes bnsBob { 50% { translate: 0 -4px; } }
body.fx-low .bns *, body.fx-low .bns { animation: none !important; }
.lcb-fc-halo { animation: lcbFcPulse 7s ease-in-out infinite; }
.lcb-fc-light { animation: lcbFcPulse 7s ease-in-out infinite; }
@keyframes lcbFcPulse { 50% { opacity: .55; } }
.lcb-fc-lamp { position: absolute; top: 120px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,100,.32), rgba(255,160,70,.08) 45%, transparent 70%); animation: lcbFcLamp 5s ease-in-out infinite; }
.lcb-fc-lamp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 24px; margin: -12px 0 0 -9px; border-radius: 40% 40% 50% 50%; background: #ffd9a0; box-shadow: 0 0 20px 8px rgba(255,190,100,.6); }
.lcb-fc-lamp.l1 { left: 140px; } .lcb-fc-lamp.l2 { left: 470px; animation-delay: -1.3s; } .lcb-fc-lamp.l3 { left: 1130px; animation-delay: -2.6s; } .lcb-fc-lamp.l4 { left: 1460px; animation-delay: -3.9s; }
@keyframes lcbFcLamp { 0%, 100% { opacity: 1; } 20% { opacity: .82; } 26% { opacity: .96; } 60% { opacity: .88; } }
.lcb-ik-lamp { animation: lcbIkSway 5s ease-in-out infinite; }
.lcb-ik-lamp:nth-child(2n) { animation-delay: -2.5s; }
@keyframes lcbIkSway { 50% { transform: rotate(5deg); } }
.lcb-ik-current { position: absolute; left: -10%; right: -10%; height: 90px; bottom: 0; opacity: .5;
background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(120,150,255,.25) 60px 140px, transparent 140px 260px) 0 0 / 520px 100%;
-webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); animation: lcbIkFlow 14s linear infinite; }
.lcb-ik-current.c2 { bottom: 40px; height: 50px; opacity: .3; animation-duration: 22s; }
@keyframes lcbIkFlow { to { background-position: 520px 0; } }
.lcb-rf-aurora { position: absolute; left: -10%; right: -10%; top: 0; height: 330px; filter: blur(22px); opacity: .6;
background: linear-gradient(100deg, transparent 8%, rgba(90,255,180,.5) 22%, transparent 36%, rgba(110,190,255,.4) 50%, transparent 62%, rgba(170,110,255,.4) 76%, transparent 90%);
-webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); animation: bnsAurora 26s ease-in-out infinite alternate; }
.lcb-rf-aurora.a2 { top: 40px; height: 220px; opacity: .4; animation-duration: 34s; animation-direction: alternate-reverse; }
body.portrait :is(#store) .lcs-feat { grid-template-columns: 1fr; gap: 20px; }
body.portrait #store .lcs-hero { grid-template-columns: 1fr; min-height: 0; padding: 22px; gap: 16px; border-radius: 26px; }
body.portrait #store .lcs-herothumbs .lcs-prev { min-height: 300px; }
body.portrait #store .lcs-heroinfo > b { font-size: 40px; }
body.portrait #store .lcs-heroinfo > span { font-size: 24px; }
body.portrait #store .lcs-heroprice b, body.portrait #store .lcs-dealprice b { font-size: 34px; }
body.portrait #store .lcs-heroprice s, body.portrait #store .lcs-dealprice s, body.portrait #store .lcs-price s { font-size: 20px; }
body.portrait #store .lcs-heroprice .gemicon, body.portrait #store .lcs-dealprice .gemicon, body.portrait #store .lcs-dealprice .coin { width: 30px; height: 30px; }
body.portrait #store .lcs-deal { padding: 22px; border-radius: 26px; gap: 12px; }
body.portrait #store .lcs-deal > b { font-size: 32px; }
body.portrait #store .lcs-dealhead small { font-size: 20px; }
body.portrait #store .lcs-dealprev .lcs-prev { height: 240px; }
body.portrait :is(#store, #sheet) .lcs-ribbon, body.portrait #store .lcs-dealtag, body.portrait #store .lcs-tagtag, body.portrait #store .lcs-save { font-size: 17px; padding: 7px 14px; }
body.portrait #store .lcs-sub { font-size: 30px; } body.portrait #store .lcs-sub small { font-size: 20px; }
body.portrait #store .lcs-subs { gap: 12px; padding-bottom: 16px; }
body.portrait #store .lcs-subs button { min-height: 80px; padding: 0 28px; font-size: 24px; }
body.portrait #store .lcs-tile.own::after { width: 40px; height: 40px; font-size: 22px; }
body.portrait #store .lcs-looks i { width: 24px; height: 24px; }
body.portrait #store .lcs-btile .lcs-prev { height: 250px; }
body.portrait #store .lcs-bgrid { grid-template-columns: 1fr; }
body.portrait #store .lcs-thumb span { font-size: 18px; }
body.portrait :is(#store, #sheet) .lcs-mtitle { font-size: 16px !important; } body.portrait :is(#store, #sheet) .lcs-msl { width: 64px; height: 90px; }
body.portrait #store .lcs-passart b { font-size: 32px; } body.portrait #store .lcs-passart span { font-size: 20px; }
body.portrait #store .lcs-gemrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.portrait #store .lcs-bonus, body.portrait #store .lcs-bestval, body.portrait #store .lcs-firstx { font-size: 16px; padding: 7px 12px; }
body.portrait #store .lcs-gemrow .lcs-gempack { padding-top: 54px; }
body.portrait #store .lcs-firstx { bottom: 118px; }
body.portrait #sheet .lcs-lookrow button { font-size: 22px; padding: 12px 20px 12px 12px; } body.portrait #sheet .lcs-lookrow i { width: 28px; height: 28px; }
body.portrait #sheet .lcs-dealnote { font-size: 22px; }
body.portrait #sheet .lcs-sprev .lcs-thumb span { font-size: 20px; }
body.mobile:not(.portrait) #store .lcs-subs button { font-size: 19px; padding: 12px 20px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > span, body.mobile:not(.portrait) #store .lcs-dealhead small { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-thumb span { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-ribbon, body.mobile:not(.portrait) #store .lcs-dealtag, body.mobile:not(.portrait) #store .lcs-tagtag { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-gemrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (prefers-reduced-motion: reduce) { .lcs-passart i, .czs *, .bns * { animation: none !important; } }
.lcs-bthumbs.n4 .lcs-mtitle { font-size: 9px !important; padding: 4px 5px !important; overflow-wrap: anywhere; }
body.portrait #store .lcs-bthumbs.n4 .lcs-mtitle { font-size: 14px !important; }
.lcs-firstx { position: static !important; transform: none !important; order: 0; margin: -2px 0 2px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > b { font-size: 34px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > span { font-size: 20px; }
body.mobile:not(.portrait) #store .lcs-deal > b { font-size: 28px; }
body.mobile:not(.portrait) #store .lcs-heroprice b, body.mobile:not(.portrait) #store .lcs-dealprice b { font-size: 30px; }
body.mobile:not(.portrait) #store .lcs-heroprice s, body.mobile:not(.portrait) #store .lcs-dealprice s, body.mobile:not(.portrait) #store .lcs-price s { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-sub small { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-save, body.mobile:not(.portrait) #store .lcs-bonus, body.mobile:not(.portrait) #store .lcs-bestval, body.mobile:not(.portrait) #store .lcs-firstx { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-thumb span { font-size: 15px; }
body.mobile:not(.portrait) #sheet .lcs-lookrow button { font-size: 18px; } body.mobile:not(.portrait) #sheet .lcs-dealnote { font-size: 18px; }
/* css/decklib.css */
#decklib .dlb-active { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 14px; border: 1px solid rgba(232, 186, 90, .35); background: rgba(20, 11, 40, .7); max-width: 420px; min-width: 0; }
#decklib .dlb-aa { flex: none; width: 52px; height: 52px; border-radius: 10px; background: center / cover no-repeat; box-shadow: 0 0 0 2px var(--gold-1, #f2c14e); }
#decklib .dlb-active span:last-child { display: flex; flex-direction: column; min-width: 0; }
#decklib .dlb-active small { font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1, #f2c14e); }
#decklib .dlb-active b { font: 800 18px var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff4d6; }
#decklib .dlb-cap { font: 700 15px var(--font-ui); color: #bfb0dd; letter-spacing: .08em; }
#decklib .dlb-cap.full { color: #ff8a7a; }
#decklib .dlb-grid { position: absolute; top: 100px; left: 34px; right: 34px; bottom: 196px; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); grid-auto-rows: 290px; gap: 22px; padding: 10px 8px 20px; align-content: start; }
#decklib .dlb-box { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 0 14px 14px; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; color: #fff;
border: 2px solid color-mix(in srgb, var(--c, #8a7aa8) 70%, transparent); background: #120a26; box-shadow: 0 14px 28px rgba(0, 0, 0, .5); content-visibility: auto; contain-intrinsic-size: 196px 290px;
transition: transform .16s var(--ease-out, ease-out), box-shadow .16s; font: inherit; }
#decklib .dlb-box:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(0, 0, 0, .6), 0 0 22px color-mix(in srgb, var(--c) 40%, transparent); }
#decklib .dlb-face { position: absolute; inset: 0; background: var(--art, none) center 22% / cover no-repeat, linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, #1a0d33), #0b0618); }
#decklib .dlb-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(8, 4, 18, .55) 58%, rgba(8, 4, 18, .96) 100%); }
#decklib .dlb-lid { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .9; }
#decklib .dlb-box > :not(.dlb-face):not(.dlb-lid) { position: relative; }
#decklib .dlb-nm { font: 800 19px/1.15 var(--font-title); color: #fff4d6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 2px 6px #000; }
#decklib .dlb-sub { display: flex; align-items: center; gap: 7px; font: 600 13px var(--font-ui); color: #d8ccf0; }
#decklib .dlb-sub em { margin-left: auto; font-style: normal; font-weight: 800; color: #bfb0dd; }
#decklib .dlb-sub em.ok { color: #8fe8a8; }
#decklib .dlb-box.short .dlb-face { filter: saturate(.55) brightness(.8); }
#decklib .dlb-bad { position: absolute !important; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 var(--font-ui); font-style: normal; color: #fff; background: #d8372b; box-shadow: 0 0 0 2px #fff3, 0 0 14px #ff3b2b99; z-index: 2; }
#decklib .dlb-on { position: absolute !important; top: 12px; left: 10px; padding: 3px 10px; border-radius: 999px; font: 800 11px var(--font-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #2a1606; background: linear-gradient(180deg, #ffe39a, #e2a93a); z-index: 2; }
#decklib .dlb-box.active { border-color: #f2c14e; box-shadow: 0 0 0 2px rgba(242, 193, 78, .45), 0 14px 28px rgba(0, 0, 0, .5); }
#decklib .dlb-box.sel { outline: 3px solid #fff4d6; outline-offset: 3px; transform: translateY(-4px); }
#decklib .dlb-new { align-items: center; justify-content: center; border-style: dashed; background: rgba(30, 16, 60, .5); border-color: rgba(232, 186, 90, .45); }
#decklib .dlb-new .dlb-plus { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(232, 186, 90, .6); margin-bottom: 10px; }
#decklib .dlb-new .dlb-plus b { font: 400 64px/1 var(--font-title); color: #ffe39a; }
#decklib .dlb-new .dlb-plus .lci { display: none; }
#decklib .dlb-new .dlb-nm, #decklib .dlb-new .dlb-sub { text-align: center; justify-content: center; }
#decklib .dlb-new.off { opacity: .5; cursor: not-allowed; }
#decklib .dlb-none { grid-column: 1 / -1; text-align: center; color: #bfb0dd; font-size: 18px; }
#decklib .dlb-bar { position: absolute; left: 34px; right: 34px; bottom: 118px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: rgba(12, 6, 28, .82); border: 1px solid var(--line, rgba(255, 255, 255, .12)); z-index: 4; }
#decklib .dlb-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
#decklib .dlb-bar .btn .lci { width: 18px; height: 18px; }
#decklib .dlb-bar .btn.danger, .dlb-sheet .btn.danger { background: linear-gradient(180deg, #b8322a, #7a1a14); color: #fff; border-color: #ff8a7a66; }
#decklib .dlb-selnm { font: 800 18px var(--font-title); color: #fff4d6; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#decklib .dlb-why { font: 600 14px var(--font-ui); color: #ffb09a; }
#decklib .dlb-hint { color: #bfb0dd; font-size: 15px; }
#decklib .dlb-msg.bad { color: #ff9a8a; } #decklib .dlb-msg.good { color: #8fe8a8; }
.dlb-sheet .dlb-input { width: 100%; box-sizing: border-box; font: 600 20px var(--font-ui); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(232, 186, 90, .4); background: rgba(8, 4, 18, .8); color: #fff; }
.dlb-sheet .dl-lgrid { max-height: min(560px, 60vh); overflow-y: auto; }
body.mobile #decklib .dlb-grid { top: 112px; bottom: 262px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 320px; }
body.mobile #decklib .dlb-bar { bottom: 154px; min-height: 96px; }
body.mobile #decklib .dlb-bar .btn { min-height: 80px; font-size: 22px; }
body.mobile #decklib .dlb-nm { font-size: 24px; } body.mobile #decklib .dlb-sub { font-size: 17px; }
body.portrait #decklib .dlb-active { max-width: 330px; } body.portrait #decklib .dlb-active b { font-size: 22px; } body.portrait #decklib .dlb-active small { font-size: 14px; }
body.portrait #decklib .dlb-cap { display: none; }
body.portrait #decklib .dlb-grid { top: calc(var(--top-h) + 12px); left: 0; right: 0; bottom: calc(var(--nav-h) + 216px); grid-template-columns: repeat(3, 1fr); grid-auto-rows: 380px; gap: 26px 22px; padding: 16px 24px 40px; }
body.portrait #decklib .dlb-box { contain-intrinsic-size: 260px 380px; padding: 0 16px 18px; }
body.portrait #decklib .dlb-nm { font-size: 28px; } body.portrait #decklib .dlb-sub { font-size: 20px; }
body.portrait #decklib .dlb-bad { width: 44px; height: 44px; font-size: 26px; } body.portrait #decklib .dlb-on { font-size: 16px; padding: 5px 14px; }
body.portrait #decklib .dlb-bar { left: var(--gut, 24px); right: var(--gut, 24px); bottom: calc(var(--nav-h) + 10px); min-height: 170px; gap: 12px; align-content: center; }
body.portrait #decklib .dlb-bar .btn { min-height: 72px; font-size: 24px; padding: 0 20px; }
body.portrait #decklib .dlb-selnm { flex-basis: 100%; text-align: center; max-width: none; font-size: 26px; }
body.portrait #decklib .dlb-hint, body.portrait #decklib .dlb-why, body.portrait #decklib .dlb-msg { font-size: 22px; text-align: center; }
body.portrait .dlb-sheet .dlb-input { font-size: 30px; padding: 18px; }
body.lite #decklib .dlb-box { box-shadow: none; transition: none; }
body.lite #decklib .dlb-box:hover { transform: none; box-shadow: none; }
body.lite #decklib .dlb-bad { box-shadow: none; }
#preview.bigpv { width: auto; height: auto; display: flex; gap: 18px; padding: 14px; border-radius: 18px; max-width: 760px;
background: linear-gradient(160deg, rgba(24, 12, 48, .97), rgba(8, 4, 18, .97)); border: 1px solid color-mix(in srgb, var(--rc, #e8ba5a) 45%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
#preview.bigpv .holder { flex: none; position: relative; width: 300px; height: 420px; }
#preview.bigpv .holder > .card, #preview.bigpv .holder > * { position: relative !important; transform: none !important; }
#preview.bigpv .pv-info { width: 400px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#preview.bigpv h3 { margin: 0; font: 900 30px/1.08 var(--font-title); color: #fff4d6; }
#preview.bigpv .cp-rules { font-size: 19px; }
#preview.bigpv .keytips { position: static; display: flex; flex-direction: column; gap: 6px; }
#preview.bigpv .keytips div { font-size: 15px; line-height: 1.4; }
body.lite #preview.bigpv { box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
body.portrait #preview.bigpv { max-width: 868px; gap: 16px; }
body.portrait #preview.bigpv .pv-info { width: 500px; gap: 14px; }
body.portrait #preview.bigpv h3 { font-size: 40px; }
body.portrait #preview.bigpv .cp-eyebrow { font-size: 20px; }
body.portrait #preview.bigpv .cp-st { font-size: 20px; } body.portrait #preview.bigpv .cp-st i { font-size: 32px; }
body.portrait #preview.bigpv .cp-rules { font-size: 28px; }
body.portrait #preview.bigpv .keytips div { font-size: 23px; }
.dlb-code { width: 100%; min-height: 64px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; box-sizing: border-box; }
.dlb-prev { max-height: 40vh; overflow: auto; }
.dlb-plist { list-style: none; margin: 4px 0; padding: 0; columns: 2 180px; font-size: 13px; }
.dlb-plist li.unowned { color: #e05a5a; }
/* css/admin.css */
.pt-badge { display: inline-flex; align-items: center; margin-left: 12px; padding: 3px 10px; border-radius: 99px; vertical-align: middle;
font: 800 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #10261a; background: linear-gradient(135deg, #7ff0b4, #3cc480);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 2px 10px rgba(60, 196, 128, .35); }
.pt-card, .pt-item { position: relative; }
.pt-ribbon { position: absolute; z-index: 6; top: 9%; left: -6%; padding: 2px 14% 2px 10%; transform: rotate(-12deg); pointer-events: none;
font: 900 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #10261a; white-space: nowrap;
background: linear-gradient(90deg, #3cc480, #7ff0b4); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.card.tiny .pt-ribbon { font-size: 8px; }
.pt-item .pt-ribbon { top: 10px; left: -4px; transform: rotate(-8deg); padding: 2px 12px; }
.adm { display: grid; gap: 18px; max-width: 1000px; margin: 0 auto; }
.adm-sec { padding: 18px 22px; }
.adm-sec .m-h small { margin-left: 8px; }
.adm-list { display: grid; gap: 12px; margin-top: 12px; }
.adm-drop { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(232, 186, 90, .2); }
.adm-dh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-dh b { font: 800 18px var(--font-ui); color: #fff; margin-right: 4px; }
.adm-tag { padding: 2px 8px; border-radius: 8px; font: 700 12px var(--font-ui); color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.adm-tag.mono { font-family: ui-monospace, Consolas, monospace; }
.adm-tag.ovr { color: var(--gold); border-color: rgba(242, 193, 78, .4); }
.adm-state { padding: 2px 10px; border-radius: 99px; font: 800 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.adm-state.out { color: #10261a; background: #7ff0b4; }
.adm-state.pt { color: #10261a; background: #f2c14e; }
.adm-state.off { color: #fff; background: rgba(255, 255, 255, .14); }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.adm-row > label { min-width: 70px; font: 700 13px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.adm-seg { flex: 1 1 320px; max-width: 460px; }
.adm-seg button { min-height: 36px; font: 800 14px var(--font-ui); }
.adm-date { flex: 0 1 240px; min-height: 38px; padding: 4px 10px; border-radius: 10px; color: #fff; background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 186, 90, .3); font: 600 14px var(--font-ui); color-scheme: dark; }
.adm-help { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.adm-drop .adm-reset { justify-self: start; }
.adm-search { display: flex; gap: 10px; margin-top: 12px; }
.adm-search input { flex: 1; min-width: 0; min-height: 38px; padding: 4px 12px; border-radius: 10px; color: #fff; background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 186, 90, .3); font: 600 15px var(--font-ui); }
.adm-acc { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(190, 160, 255, .12); }
.adm-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.adm-who b { font: 800 16px var(--font-ui); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-who span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sws { display: flex; gap: 16px; flex: none; }
.adm-sw span { width: auto; min-width: 70px; }
.adm-sw:disabled { opacity: .5; }
body.portrait .pt-badge { font-size: 20px; padding: 6px 16px; }
body.portrait .adm-sec { padding: 26px 24px; }
body.portrait .adm-dh b { font-size: 30px; }
body.portrait .adm-tag, body.portrait .adm-state { font-size: 20px; padding: 4px 12px; }
body.portrait .adm-row > label { font-size: 21px; min-width: 120px; }
body.portrait .adm-seg { flex: 1 1 100%; max-width: none; }
body.portrait .adm-seg button { min-height: 72px; font-size: 24px; }
body.portrait .adm-date { flex: 1 1 100%; min-height: 72px; font-size: 24px; }
body.portrait .adm-help { font-size: 21px; }
body.portrait .adm-search input { min-height: 72px; font-size: 24px; }
body.portrait .adm-acc { flex-wrap: wrap; padding: 18px; gap: 14px; }
body.portrait .adm-who b { font-size: 28px; } body.portrait .adm-who span { font-size: 21px; }
body.portrait .adm-sws { width: 100%; justify-content: space-between; }
body.portrait .adm-sw { font-size: 22px; }
body.portrait .adm-sw i { width: 86px; height: 46px; } body.portrait .adm-sw i::after { width: 38px; height: 38px; top: 3px; left: 3px; }
body.portrait .adm-sw.on i::after { transform: translateX(40px); }
body.portrait .pt-ribbon { font-size: 18px; }
body.portrait .card.tiny .pt-ribbon { font-size: 12px; }
.pt-card-badge { display: table; margin: 8px auto 0; }
/* css/lite.css */
body.lite *, body.lite *::before, body.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.lite .page .top { background: linear-gradient(180deg, rgba(8, 4, 18, .97), rgba(12, 6, 26, .93)); }
body.lite .navbar { background: linear-gradient(180deg, rgba(22, 12, 44, .97), rgba(8, 4, 18, .98)); }
body.lite .af-panel { background: linear-gradient(180deg, rgba(30, 17, 58, .95), rgba(14, 8, 28, .97)); }
body.lite #select .detail { background: linear-gradient(180deg, rgba(30, 17, 58, .96), rgba(12, 7, 26, .98)); }
body.lite .modal { background: radial-gradient(ellipse at 50% 45%, rgba(16, 7, 36, .8), rgba(4, 2, 10, .94)); }
body.lite #pickModal { background: rgba(8, 4, 18, .9); }
body.lite #fbSheet { background: rgba(5, 2, 14, .9); }
body.lite.theme-midnight .page .top { background: rgba(0, 0, 0, .95); }
body.lite.theme-midnight :is(.navbar, #select .detail) { background: rgba(4, 3, 8, .97); }
body.lite #afBg .afb { filter: none; transform: none; inset: 0; animation: none !important; }
body.lite #afBg .afb.on { opacity: .62; }
body.lite.theme-midnight #afBg .afb.on { opacity: .42; }
body.lite #afBg .afdust { animation: none; }
body.lite #afBg.none { visibility: hidden; }
body.lite .screen.af-in { animation: none; }
body.lite .modal.on .box { animation-name: afPopLite; animation-fill-mode: backwards; }
@keyframes afPopLite { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
body.lite #stage.lc-reflow { animation: none; }
body.lite .af-st, body.lite #select .detail.swap > *, body.lite #hub .lcs-starter,
body.lite :is(.bint, .hrow, .member, .live.m-panel, .trade.m-panel, .sWeek, .sMs, .pod, .story-art, .scene p, .hist, .pr-item),
body.lite #over :is(.box, .overlead .lc, .ov-eyebrow, .big, .ov-rule, .stats, .ov-xp, .actions) { animation-fill-mode: backwards; }
body.lite :is(.aslot, .sigc, .pp-card, .lcs-cardwrap, .fillbox .fc) .card:not(.down) { will-change: auto; perspective: none; isolation: isolate; }
body.lite :is(.aslot, .sigc, .pp-card, .lcs-cardwrap, .fillbox .fc) .card:not(.down) .flip { transform: none !important; transform-style: flat; }
body.lite :is(.aslot, .sigc, .pp-card, .lcs-cardwrap, .fillbox .fc) .card:not(.down) .face { backface-visibility: visible; }
body.lite :is(.aslot, .sigc, .pp-card, .lcs-cardwrap, .fillbox .fc) .card:not(.down) .backface { display: none; }
body.lite [data-more] { -webkit-mask-image: none; mask-image: none; }
body.lite .card, body.lite #game .shard, body.lite .hubleader .lc::after, body.lite .bigplay::after { will-change: auto; }
body.lite .hubleader .hl-aura, body.lite .hubleader .hl-aura::after, body.lite .hubleader .hl-float, body.lite .hubleader .hl-plinth,
body.lite .hubleader .lc::after, body.lite .bigplay::after, body.lite .bp-wrap::before, body.lite .bp-wrap::after, body.lite .hublogo { animation: none; }
body.lite .hubleader .lc::after, body.lite .bigplay::after { display: none; }
body.lite #hub .hubui.choosing .hubleader { filter: none; }
body.lite .cs-arc-light .card .face, body.lite .cs-arc-light .card .face::before, body.lite .cs-kinetoscope .card .face .art,
body.lite .cs-exposition-fa .card .face::before, body.lite .cs-voltaic .card .face, body.lite .cs-folio-foil .card .face::before,
body.lite .cs-gilded .card .face::before { animation: none !important; }
body.lite .cs-arc-light .card:not(.can):not(.ready) .face { box-shadow: 0 0 0 1.1cqw #b58cff, 0 0 5cqw rgba(170, 120, 255, .55), 0 6px 16px rgba(0, 0, 0, .55); }
body.lite .cs-voltaic .card:not(.can):not(.ready) .face { box-shadow: 0 0 0 1px #6fd3ff, 0 0 4cqw rgba(111, 211, 255, .45), 0 6px 16px rgba(0, 0, 0, .55); }
body.lite .lc.lc-promo .lp-shine, body.lite #promoReveal .pr-card::before { animation: none; }
body.lite .lc.fa-on::after, body.lite :is(.lc.fa-on, #game, #pickModal, .modal, .aslot, .sigc, .pp-card, .lcs-cardwrap) .fa-holo,
body.lite :is(.lc.fa-on, #game, #pickModal, .modal, .aslot, .sigc, .pp-card, .lcs-cardwrap) .fa-holo::after { animation: none; }
body.lite :is(.backface, .back).cardback, body.lite :is(.backface, .back).cardback::after { animation: none !important; }
body.lite .fr-wardenclyffe-crown .lc, body.lite .fr-wardenclyffe-crown .profile .av, body.lite .fr-tesla-coil .lc { animation: none !important; }
body.lite .fr-wardenclyffe-crown :is(.hubleader, #game .lcard.mine) .lc { box-shadow: 0 0 0 7px rgba(242, 193, 78, .85), 0 0 18px 6px rgba(111, 211, 255, .45); }
body.lite .lcb *, body.lite .lcb *::before, body.lite .lcb *::after { animation: none !important; }
body.lite .lcb-pulses { display: none; }
body.lite .lcb-crossroads .lcb-bg { filter: none; transition: none; }
body.lite .lcb-crossroads .lcb-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #04020a; opacity: calc(.26 - var(--dawn, 0) * .26); transition: opacity 3s; }
body.lite .lcbv-nightfall-lighting .lcb-bg { filter: none; }
body.lite .lcbv-nightfall-lighting .lcb-var { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(8, 16, 52, .42), rgba(3, 6, 24, .48)); }
body.lite .lcb-rf-aurora, body.lite .bns-aurora, body.lite .bns-steam, body.lite .bn-wc-beam { filter: none; }
body.lite.theme-midnight .lcb { filter: none; opacity: .72; }
body.lite .screen .lcs-prev *, body.lite .screen .lcs-prev *::before, body.lite .screen .lcs-prev *::after,
body.lite .screen .cz-ctx-shelf, body.lite .screen .cz-ctx-shelf * { animation: none !important; }
body.lite .lcs-dio.alive :is(.lcs-slice img, .lcs-ray, .lcs-dust) { animation: none; }
body.lite .screen .lcs-rec.spin .lcs-record i { animation: none; }
body.lite .pTrack *:not(.pTile), body.lite .pTrack *::before, body.lite .pTrack *::after { animation: none !important; }
body.lite .pBar i::after, body.lite .pBuy::after { animation: none; }
body.lite .pTile.locked { filter: none; opacity: .72; }
body.lite .pTile.locked:hover, body.lite .pTile.held { filter: none; opacity: .9; }
body.lite .plu-t.held { filter: none; opacity: .85; }
body.lite :is(.pr-rays, .pu-rays, .plu-rays), body.lite #ulCer .ul-rays { animation: none; }
body.lite .cnode.won .cmed::before, body.lite .sWeek.cur::after, body.lite .bhero::before { animation: none; }
body.lite :is(.rchip, .sMs, .tierpip).ready { animation: none; box-shadow: 0 0 18px rgba(242, 193, 78, .55); }
body.lite .quests .quest.ready .qbar i { animation: none; }
body.lite .lr-sealedpage::after { filter: none; }
body.lite .lr-reader.turn .lr-rhead { animation-name: lrHeadLite; animation-fill-mode: backwards; }
body.lite .lr-reader.turn .lr-page, body.lite .lr-sealedpage.turn { animation-name: lrTurnLite; animation-fill-mode: backwards; }
@keyframes lrHeadLite { from { opacity: 0; transform: translateY(10px); } }
@keyframes lrTurnLite { from { opacity: 0; transform: translateX(24px); } 60% { opacity: 1; } }
body.lite .lr-shelf.locked { filter: none; opacity: .8; }
body.lite .aslot .ghost { filter: grayscale(1); opacity: .3; }
body.lite .m-empty::before { filter: none; }
body.lite .leaderPick { filter: none; opacity: .76; transition: transform .4s var(--ease-back), opacity .3s; }
body.lite .leaderPick:hover { filter: none; opacity: .95; }
body.lite .leaderPick.sel { opacity: 1; }
body.lite #game .motes { display: none; }
body.lite #game::after, body.lite #cmdSplash .a { filter: none; }
body.lite #game .bplate.danger .bp-life, body.lite .fp.danger .fp-life { animation-name: lcDangerLite; }
@keyframes lcDangerLite { 50% { transform: scale(1.08); } }
body.lite .fp-shard, body.lite #game .bp-shard { animation-name: ffaShardLite; }
@keyframes ffaShardLite { 50% { transform: translateY(-2px); } }
body.lite #chargeArrow .ca-glow { filter: none; stroke-opacity: .3; }
body.lite :is(#game, #pickModal, .modal, .aslot, .sigc, .pp-card, .lcs-cardwrap) .card.foil::after { animation: none; }
body.lite #game .impact { mix-blend-mode: normal; }
body.lite #triumph .cards::before, body.lite #over.win .box::after { animation: none; }
body.lite #over.lc-over::before { filter: none; transform: none; inset: 0; animation: none; opacity: .5; }
body.lite #over.lose::before { opacity: .42; background: linear-gradient(rgba(16, 22, 40, .62), rgba(16, 22, 40, .62)), var(--hero) var(--hero-pos, 50% 30%) / cover no-repeat; }
body.lite #over.lose .overlead .lc { filter: none; opacity: .8; }
/* css/touch.css */
#game #board0 > .act { position: absolute; z-index: 700; padding: 6px 10px; font-size: 12px; white-space: nowrap; transform: translate(-50%, -100%); }
:is(body.mobile, body.portrait) #game #board0 > .act { transform: translate(-50%, 0); display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap, 96px); min-height: var(--tap, 96px); max-width: 330px;
padding: 6px 22px; font-size: 20px; line-height: 1.1; white-space: normal; text-align: center; border-radius: 16px; }
body.portrait #game #board0 > .act { max-width: 276px; }
:is(body.mobile, body.portrait) #game .cmd.mine { min-height: var(--tap, 96px); max-width: 540px; padding: 0 22px 0 20px; gap: 12px; font-size: 20px; border-radius: 18px; }
body.portrait #game .cmd.mine { max-width: 520px; }
:is(body.mobile, body.portrait) #game .cmd.mine i { font-size: 26px; }
:is(body.mobile, body.portrait) #game .cmd.mine span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(body.mobile, body.portrait) #game .cmd.mine b { min-width: 42px; height: 42px; font-size: 22px; }
:is(body.mobile, body.portrait) #game #promptBar .btn { min-height: var(--tap, 96px); min-width: calc(var(--tap, 96px) * 1.4); padding: 0 28px; font-size: 24px; white-space: nowrap; }
:is(body.mobile, body.portrait) #game #promptBar .ptxt { min-width: 0; }
body.mobile:not(.portrait) #game #promptBar { top: 372px; }
body.portrait #game #promptBar { top: calc(var(--ph) / 2 - 62px); max-width: 510px; padding: 12px 12px 12px 18px; }
body.portrait #game #promptBar .ptxt { font-size: 21px; line-height: 1.25; max-width: 300px; }
body.portrait #game #promptBar .btn { font-size: 21px; padding: 0 20px; }
:is(body.mobile, body.portrait) #game #playBtn { min-height: var(--tap, 96px); padding: 0 40px; font-size: 28px; white-space: nowrap; transform: translateX(-50%); }
:is(body.mobile, body.portrait) :is(#mulligan, #triumph, #over) .actions .btn { min-height: var(--tap, 96px); min-width: calc(var(--tap, 96px) * 1.4); padding: 0 34px; font-size: 26px; }
:is(body.mobile, body.portrait) #game .pz .bz-gems { gap: 4px; }
:is(body.mobile, body.portrait) #game .pz .bz-gem { display: grid; place-items: center; min-width: var(--tap, 96px); min-height: var(--tap, 96px); padding: 0; }
:is(body.mobile, body.portrait) #game .pz .bz-gem i { width: 52px; height: 66px; }
:is(body.mobile, body.portrait) #game .pz .bz-row .btn { width: var(--tap, 96px); height: var(--tap, 96px); }
:is(body.mobile, body.portrait) #game .pz .pz-btns .btn { min-height: var(--tap, 96px); padding: 0 34px; font-size: 26px; }
#game #cmdSplash.go.cut { animation: none; opacity: 0; }
body.portrait #game #cmdSplash { top: calc(var(--ph) / 2 - 180px); height: 360px; }
body.portrait #game #cmdSplash .band { top: 40px; height: 280px; }
body.portrait #game #cmdSplash .a { left: 22px; margin-left: 0; top: 80px; width: 200px; height: 200px; }
body.portrait #game #cmdSplash .txt { left: 236px; right: 20px; width: auto; margin-left: 0; top: 60px; }
body.portrait #game #cmdSplash .k { font-size: 20px; }
body.portrait #game #cmdSplash .n { font-size: 50px; line-height: 1.02; white-space: normal; }
body.portrait #game #cmdSplash .x { max-width: none; font-size: 27px; line-height: 1.3; }
body.portrait #game .bplate.s0 { top: calc(var(--ph) - 282px); }
@media (hover: none) { #game #layer .card.inhand:not(.dragging):hover { z-index: var(--z, 500) !important; } }
#game #board0 > .act[aria-disabled="true"] { opacity: .55; cursor: help; }
#game #board0 > :is(.act, .cmd.mine) { touch-action: none; -webkit-touch-callout: none; user-select: none; }
:is(body.mobile, body.portrait) #game .crystalbar { z-index: 600; }
:is(body.mobile, body.portrait) #game #layer .card { perspective: none; }
:is(body.mobile, body.portrait) #game #layer .card > .flip { transform: none; transform-style: flat; transition: none; }
:is(body.mobile, body.portrait) #game #layer .card > .flip > :is(.face, .backface) { transform: none; backface-visibility: visible; visibility: visible; transition: none; }
:is(body.mobile, body.portrait) #game #layer .card.down > .flip > .face,
:is(body.mobile, body.portrait) #game #layer .card:not(.down) > .flip > .backface { display: none; }
#game #abilityConfirm { position: absolute; inset: 0; z-index: 20000; display: grid; place-items: center; padding: 24px; background: rgba(4, 2, 12, .78); pointer-events: auto; }
#game #abilityConfirm section { box-sizing: border-box; width: min(760px, 100%); max-height: 100%; overflow: auto; padding: 30px; border: 1px solid #e8ba5a; border-radius: 20px; background: #160d27; color: #fff4d6; box-shadow: 0 18px 70px #000; }
#game #abilityConfirm .ac-kind, #game #abilityConfirm .ac-cost { font-size: 20px; color: #e8ba5a; }
#game #abilityConfirm h3 { margin: 12px 0; font-size: 36px; }
#game #abilityConfirm p { font-size: 24px; line-height: 1.45; }
#game #abilityConfirmStatus { color: #c9bfdc; }
#game #abilityConfirm .ac-actions { display: flex; justify-content: flex-end; gap: 18px; margin-top: 24px; }
#game #abilityConfirm .btn { min-height: 48px; min-width: 120px; font-size: 22px; }
:is(body.mobile, body.portrait) #game #abilityConfirm .btn { min-height: var(--tap, 96px); min-width: calc(var(--tap, 96px) * 1.4); font-size: 30px; }
:is(body.mobile, body.portrait) #game #abilityConfirm :is(p, .ac-kind, .ac-cost) { font-size: 30px; }
/* css/laned.css */
body.cb .lcpips i { width: 12px; height: 12px; border-radius: 0; }
body.cb .lcpips i[style*="#e8b730"] { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
body.cb .lcpips i[style*="#2f9be8"] { border-radius: 50%; }
body.cb .lcpips i[style*="#3cc460"] { clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
body.cb .lcpips i[style*="#e0473a"] { border-radius: 1px; transform: scale(.86); }
body.cb .lcpips i[style*="#a44ee0"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
body.cb .card .face.lcf::after { position: absolute; z-index: 3; right: 5%; top: 56.5%; width: 9cqw; height: 9cqw; display: grid; place-items: center;
border-radius: 50%; background: rgba(10, 6, 20, .82); color: #fff; font: 900 6cqw/1 system-ui, sans-serif; box-shadow: 0 0 0 .6cqw var(--fc); pointer-events: none; }
body.cb .card .face.lcf.f-gold::after { content: "\2605"; }
body.cb .card .face.lcf.f-cobalt::after { content: "\25CF"; }
body.cb .card .face.lcf.f-emerald::after { content: "\25B2"; }
body.cb .card .face.lcf.f-garnet::after { content: "\25A0"; }
body.cb .card .face.lcf.f-quarts::after { content: "\25C6"; }
body.cb .dr-lead[data-sym]::before { content: attr(data-sym); margin-right: 6px; }
body.ts-large .lcf .cf-rules { font-size: calc(var(--fs) * 1.1); }
body.ts-larger .lcf .cf-rules { font-size: calc(var(--fs) * 1.2); line-height: 1.12; }
body:is(.ts-large, .ts-larger) .lcf .cf-f { display: none; }
body.ts-large :is(#sheet .box p, #sheet .box .lead, .settings .settxt p, .settings .settxt b, .mt-txt > span > span, .muted, #toast .tmsg, .modesub .ms-t) { zoom: 1.12; }
body.ts-larger :is(#sheet .box p, #sheet .box .lead, .settings .settxt p, .settings .settxt b, .mt-txt > span > span, .muted, #toast .tmsg, .modesub .ms-t) { zoom: 1.25; }
body.ts-larger .btn { zoom: 1.08; }
body.rm *, body.rm *::before, body.rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.draftsheet .dr-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.draftsheet .dr-rw { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(242, 193, 78, .25); }
.draftsheet .dr-rw b { display: block; color: #f2c14e; font-size: 18px; }
.draftsheet .dr-rw span { font-size: 16px; opacity: .9; }
.draftsheet .dr-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.draftsheet .dr-lead { text-align: left; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, #120a22), #120a22);
border: 2px solid var(--c); color: #fff; cursor: pointer; font: inherit; }
.draftsheet .dr-lead b { display: block; font-size: 19px; }
.draftsheet .dr-lead span { font-size: 15px; opacity: .85; }
.draftsheet .dr-offer { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.draftsheet .dr-offer .card { position: relative; width: 170px; height: 238px; cursor: pointer; transition: transform .15s; }
.draftsheet .dr-offer .card:hover, .draftsheet .dr-offer .card:focus-visible { transform: translateY(-6px); outline: 2px solid #f2c14e; outline-offset: 3px; }
.draftsheet .dr-pips { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.draftsheet .dr-pips i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #7dffb0; }
.draftsheet .dr-pips i.l { border-color: #ff6a5a; border-radius: 3px; }
.draftsheet .dr-pips i.w.on { background: #7dffb0; } .draftsheet .dr-pips i.l.on { background: #ff6a5a; }
@media (max-width: 600px) { .draftsheet .dr-offer { gap: 6px; } .draftsheet .dr-offer .card { width: 31%; height: auto; aspect-ratio: 170 / 238; } }
#lcLegFlash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 226, 140, .85), rgba(255, 180, 60, .25) 45%, transparent 75%);
animation: lcLegFlash .7s ease-out forwards; }
@keyframes lcLegFlash { from { opacity: 1; } to { opacity: 0; } }
.lc-legshake { animation: lcLegShake .45s ease-out; }
@keyframes lcLegShake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -3px; } 60% { translate: -3px 2px; } 80% { translate: 2px -1px; } }
body.lite #lcLegFlash { animation-duration: .45s; opacity: .6; }
body:is(.rm, .fx-low) .lc-legshake { animation: none; }
body.rm #lcLegFlash { display: none; }
@media (prefers-reduced-motion: reduce) { .lc-legshake { animation: none; } #lcLegFlash { display: none; } }
.modesheet .modes:has(#mFFA):has(#mDraft) #mFFA { grid-column: span 2; }
.modesheet .modes:has(#mFFA):has(#mDraft):has(#mArcade) #mFFA { grid-column: span 1; }
.modesheet .modes:has(#mFFA):has(#mDraft):has(#mArcade) #mFFA .mt-txt { left: 92px; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) { height: 112px; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade)::before { background: linear-gradient(90deg, rgba(8, 4, 18, .94) 0%, rgba(8, 4, 18, .7) 55%, rgba(8, 4, 18, .2) 100%); }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-ic { top: 50%; margin-top: -25px; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-txt { left: 92px; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-lock { top: auto; bottom: 10px; left: 92px; right: auto; transform: none; font-size: 10px; padding: 5px 10px; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade).off .mt-txt { top: 36%; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade).off .mt-txt > span { display: none; }
.modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade).off .mt-tag { display: none; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) { height: 206px; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-ic { top: 26px; margin-top: 0; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-txt { left: 28px; top: auto; bottom: 26px; transform: none; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade) .mt-lock { top: 22px; bottom: auto; left: auto; right: 22px; font-size: 17px; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade).off .mt-txt { top: auto; }
body.portrait .modesheet .modes:has(#mFFA) .mode:is(#mDraft, #mArcade).off .mt-txt > span { display: block; }
body:not(.portrait).ul-lock-ffa .modesheet .modes:has(#mDraft) #mFFA::after { left: auto; right: 12px; top: 12px; transform: none; font-size: 12px; padding: 6px 12px 6px 32px; }
/* css/steam.css */
body.steam .lcpwa, body.steam [data-lc-paypal], body.steam #ppTab, body.steam .lcs-ppbox, body.steam script[data-lc-paypal] { display: none !important; }
.lcsteam-acct { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,.05); border: 1px solid rgba(242,193,78,.25); font: 600 14px/1.35 Inter, system-ui, sans-serif; color: #efe7ff; }
.lcsteam-acct b { color: #f2c14e; }
.lcsteam-acct span { flex: 1 1 200px; opacity: .85; font-weight: 400; }
.lcsteam-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(5,3,12,.72); }
.lcsteam-box { max-width: 460px; margin: 16px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(180deg,#241244,#150c2a);
color: #efe7ff; border: 1px solid rgba(242,193,78,.45); font: 400 15px/1.45 Inter, system-ui, sans-serif; }
html.lcpad .lcpad-focus { outline: 3px solid #f2c14e !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(242,193,78,.25), 0 0 22px rgba(242,193,78,.45) !important;
border-radius: 8px; position: relative; z-index: 5; }
html.lcpad, html.lcpad * { cursor: none !important; }