@property --rx { syntax: '*'; inherits: false; }
@property --ry { syntax: '*'; inherits: false; }
@property --gx { syntax: '*'; inherits: false; }
@property --gy { syntax: '*'; inherits: false; }

:root {
  --pn-bg: linear-gradient(#170c07, #0d0604);
  --pn-sh: inset 0 0 0 2px #3a2414, inset 0 0 50px rgba(0,0,0,0.55), 0 6px 0 #0e0603;
}

#tab-profile.on, #tab-shop.on, #tab-coll.on { overflow: hidden; padding: 6px 20px 18px; background: radial-gradient(ellipse at 50% 40%, rgba(7,5,4,0.86), rgba(7,5,4,0.97) 75%); }
.pnl { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }

.pv3 { position: absolute; inset: 0; overflow: hidden; }
.pv3-gl { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.pv3-css { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1000px; pointer-events: none; }
.pv3-css.on { pointer-events: auto; }
.pv3-css.m-card { padding-bottom: 7%; }
.pv3-tilt { transform-style: preserve-3d; animation: pvFloat 3.4s ease-in-out infinite; }
@keyframes pvFloat { 50% { transform: translateY(-10px); } }
.pv3-css.m-sticker .pv-stk { position: relative; display: block; width: min(240px, 52%); aspect-ratio: 1; margin-bottom: 16%; animation: pvFloat 2.6s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(0,0,0,0.45)); }

.xcard { position: relative; width: 290px; height: 412px; display: flex; flex-direction: column; align-items: center; border: 3px solid #0e0603; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.xc-edge { position: absolute; inset: -3px; background: #050302; border: 3px solid #000; transform: translateZ(-14px); }
.xc-ban { position: absolute; left: 9px; right: 9px; top: 9px; height: 44%; border: 3px solid #0e0603; transform: translateZ(6px); box-shadow: 0 4px 0 rgba(0,0,0,0.5); }
.xc-ban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,0.55)); }
.xc-ava { margin-top: 110px; transform: translateZ(46px); filter: drop-shadow(0 8px 0 rgba(0,0,0,0.5)); }
.xc-nick { margin-top: 22px; max-width: 92%; font-size: 22px; line-height: 1.3; text-align: center; transform: translateZ(34px); filter: drop-shadow(3px 3px 0 #000); white-space: nowrap; overflow: visible; }
.xc-stats { margin-top: auto; display: flex; gap: 7px; transform: translateZ(22px); }
.xc-stats div { min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; background: rgba(0,0,0,0.5); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.07); }
.xc-stats b { font-weight: normal; font-size: 15px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.xc-stats span { font-size: 6px; color: var(--dim); }
.xc-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255,255,255,0.28), transparent 46%); mix-blend-mode: overlay; transform: translateZ(60px); }

.cat-ico { width: 28px; height: 28px; flex: none; fill: currentColor; image-rendering: pixelated; }
.cat-ico .ac { fill: var(--gold); }
.cat-ico .ac2 { fill: #ff5a2a; }
.cat-ico .bg { fill: #120a06; }

.wd { width: min(1560px, 100%); height: calc(100vh - 112px); display: grid; grid-template-columns: 268px minmax(0, 1fr) 470px; gap: 16px; }
.wd-rail { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; min-height: 0; }
.wd-me { display: flex; align-items: center; gap: 12px; margin: 4px 8px 6px; padding: 10px; font-family: inherit; text-align: left; color: var(--ink); cursor: pointer; background: rgba(0,0,0,0.35); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; transition: box-shadow 0.12s, background 0.12s; }
.wd-me b { display: block; font-weight: normal; font-size: 11px; max-width: 160px; overflow: hidden; }
.wd-me em { display: block; font-style: normal; font-size: 7px; color: var(--dim); margin-top: 6px; }
.wd-me:hover { background: rgba(168,100,46,0.16); }
.wd-me.on { box-shadow: inset 0 0 0 2px #ff8a50, 0 0 16px rgba(255,120,40,0.25); background: linear-gradient(90deg, rgba(200,68,30,0.45), rgba(106,22,8,0.15)); }
.wd-grp { font-size: 7px; color: #8a6a4a; letter-spacing: 3px; padding: 14px 16px 6px; }
.wd-cat { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; font-family: inherit; text-align: left; color: #b49a78; background: transparent; border: none; cursor: pointer; transition: background 0.1s, color 0.1s, padding 0.12s; }
.wd-cat span { min-width: 0; }
.wd-cat b { display: block; font-weight: normal; font-size: 10px; color: var(--ink); text-shadow: var(--sh); }
.wd-cat em { display: block; font-style: normal; font-size: 7px; color: var(--dim); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.wd-cat:hover { background: rgba(168,100,46,0.14); color: var(--ink); padding-left: 18px; }
.wd-cat.on { color: #fff; background: linear-gradient(90deg, rgba(200,68,30,0.6), rgba(106,22,8,0.12)); box-shadow: inset 4px 0 0 #ff8a50; }
.wd-cat.on em { color: var(--gold); }

.wd-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: radial-gradient(ellipse 70% 60% at 50% 62%, #26140a 0%, #120905 60%, #0a0503 100%); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.wd-pv, .sh-pv, .cl-pv { position: relative; flex: 1; min-height: 0; }
.wd-pv::before, .sh-pv::before, .cl-pv::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 62%, rgba(255,140,50,0.10), transparent 70%); pointer-events: none; }
.wd-cap, .sh-cap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 6px; min-height: 120px; text-align: center; }
.wd-type { font-size: 8px; color: var(--dim); letter-spacing: 3px; }
.wd-name { font-size: 24px; color: var(--ink); text-shadow: 3px 3px 0 #000, 0 0 22px var(--rc, transparent); line-height: 1.2; }
.wd-name .nk { font-size: 24px; filter: drop-shadow(3px 3px 0 #000); }
.wd-state { font-size: 8px; padding: 6px 10px; border: 2px solid #0e0603; text-shadow: none; }
.wd-state.on { background: var(--green); color: #0e2a14; }
.wd-state.try { background: #2a1408; color: var(--gold); box-shadow: inset 0 0 0 2px #6a3a1a; }
.wd-state.lock { background: #3a0c08; color: #ffa090; box-shadow: inset 0 0 0 2px #6a1a10; }
.wd-note { font-size: 8px; color: var(--dim); line-height: 1.6; }

.wd-side { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; min-height: 0; }
.wd-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; border-bottom: 2px solid #2a1408; }
.wd-head b { font-weight: normal; font-size: 14px; color: var(--gold); text-shadow: var(--sh); }
.wd-head span { font-size: 9px; color: var(--dim); }
.wd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px 10px; }
.wd-block { display: flex; flex-direction: column; gap: 10px; }
.wd-block .pj input { flex: 1; min-width: 0; }
.wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wd-stat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 12px; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; overflow: hidden; }
.wd-stat span { font-size: 7px; color: var(--dim); }
.wd-stat b { font-weight: normal; font-size: 13px; color: var(--gold); text-shadow: var(--sh); }
.wd-stat i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--green); }
.wd-out { align-self: flex-start; margin-top: auto; }

.it3 { position: relative; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; color: var(--ink); cursor: pointer; background: radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--rc, #6a3a1a) 26%, transparent), transparent 68%), #120a06; border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408, inset 0 -4px 0 0 var(--rc, #6a3a1a), 0 4px 0 #0e0603; transition: transform 0.1s, box-shadow 0.12s, filter 0.12s; animation: it3In 0.28s backwards; }
@keyframes it3In { from { transform: translateY(14px) scale(0.92); opacity: 0; } }
.it3:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--rc, #6a3a1a), inset 0 -4px 0 0 var(--rc, #6a3a1a), 0 8px 0 #0e0603, 0 0 20px color-mix(in srgb, var(--rc, #6a3a1a) 50%, transparent); z-index: 1; }
.it3.sel { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 0 var(--rc, #6a3a1a), 0 4px 0 #0e0603, 0 0 18px rgba(255,255,255,0.25); }
.it3-pv { width: 100%; height: 88px; display: flex; align-items: center; justify-content: center; position: relative; }
.it3-nm { font-size: 8px; line-height: 1.5; text-align: center; min-height: 24px; display: flex; align-items: center; text-shadow: var(--sh); }
.it3-r { font-size: 6px; color: var(--rc); letter-spacing: 1px; filter: brightness(1.3); }
.it3.on::before { content: 'НАДЕТО'; position: absolute; top: -7px; right: -5px; z-index: 2; font-size: 7px; color: #0e2a14; background: var(--green); padding: 3px 5px; border: 2px solid #0e0603; }
.it3.st.on::before { content: 'В КОЛЕСЕ'; }
.wd-grid.ava .it3.on::before { content: 'СТОИТ'; }
.it3.lock { filter: grayscale(1) brightness(0.5); }
.it3.lock::after { content: ''; position: absolute; top: 8px; left: 8px; width: 12px; height: 12px; background: #c8b896; clip-path: polygon(20% 45%, 20% 25%, 35% 10%, 65% 10%, 80% 25%, 80% 45%, 100% 45%, 100% 100%, 0 100%, 0 45%, 32% 45%, 32% 28%, 40% 20%, 60% 20%, 68% 28%, 68% 45%); }
.it3.up { border-style: dashed; border-color: #6a3a1a; }
.it3.up .up-ico { font-style: normal; font-size: 34px; color: var(--gold); text-shadow: 3px 3px 0 #000; }
.tl-img { width: 88px; height: 88px; image-rendering: pixelated; display: block; }
.tl-load { width: 18px; height: 18px; border: 3px solid #3a2414; border-top-color: var(--gold); border-radius: 50%; animation: cosSpin 0.8s linear infinite; }
.tl-ban { display: block; width: 108px; height: 60px; border: 3px solid #0e0603; box-shadow: 0 4px 0 rgba(0,0,0,0.5); }
.tl-card { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; height: 82px; padding: 9px 6px; border: 2px solid #0e0603; }
.tl-card i { display: block; width: 26px; height: 26px; border-radius: 50%; background: #3a2414; box-shadow: 0 0 0 2px #0e0603; }
.tl-card b { display: block; height: 6px; width: 80%; background: rgba(255,255,255,0.45); }
.tl-card b.s { width: 55%; opacity: 0.6; }
.tl-font { font-size: 30px; white-space: nowrap; filter: drop-shadow(2px 2px 0 #000); }
.tl-font.sm { font-size: 22px; }
.tl-ava { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc); }
.it3 .st-m { position: relative; display: block; width: 84px; height: 84px; }

.wh-ed { position: relative; width: 400px; height: 400px; }
.wh-ring { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, transparent 0 74px, rgba(14,6,3,0.86) 75px 178px, transparent 179px); }
.wh-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #6a3a1a; box-shadow: 0 0 0 3px #0e0603, inset 0 0 0 3px #0e0603; }
.wh-hub { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%); border-radius: 50%; background: #120a06; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px #a8642e, 0 0 30px rgba(255,140,40,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.wh-big { position: relative; display: block; width: 92px; height: 92px; }
.wh-lbl { font-size: 7px; color: var(--gold); text-align: center; padding: 0 12px; line-height: 1.5; }
.wh-slot { position: absolute; width: 88px; height: 88px; transform: translate(-50%, -50%); border-radius: 50%; font-family: inherit; cursor: pointer; background: rgba(0,0,0,0.5); border: none; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc, #3a2414); transition: transform 0.1s, box-shadow 0.1s; }
.wh-slot i { position: absolute; inset: 8px; display: block; }
.wh-slot em { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-style: normal; font-size: 6px; color: #fff; background: #a01808; border: 2px solid #0e0603; padding: 2px 4px; opacity: 0; transition: opacity 0.1s; white-space: nowrap; }
.wh-slot:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px #fff, 0 0 20px var(--rc); }
.wh-slot:hover em { opacity: 1; }
.wh-slot.empty { cursor: default; background: rgba(0,0,0,0.25); box-shadow: 0 0 0 3px #0e0603, inset 0 0 0 2px #2a1408; }
.wh-slot.empty b { font-weight: normal; font-size: 12px; color: #4a3020; }
.wh-slot.empty:hover { transform: translate(-50%, -50%); }

.sh { width: min(1500px, 100%); height: calc(100vh - 112px); display: flex; flex-direction: column; gap: 12px; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-end; }
.sh-title { font-size: 28px; line-height: 1; color: var(--ink); text-shadow: 4px 4px 0 #6a1608, 7px 7px 0 #000; display: flex; flex-direction: column; gap: 10px; transform: rotate(-2deg); transform-origin: left bottom; }
.sh-title span { font-size: 8px; color: var(--dim); text-shadow: var(--sh); letter-spacing: 2px; }
.sh-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding: 10px 14px; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.sh-timer span { font-size: 7px; color: var(--dim); letter-spacing: 2px; }
.sh-timer b { font-weight: normal; font-size: 18px; color: var(--gold); text-shadow: var(--sh); }
.sh-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 16px; }
.sh-stage { position: relative; display: flex; flex-direction: column; min-height: 0; background: radial-gradient(ellipse 70% 60% at 50% 60%, #26140a 0%, #120905 60%, #0a0503 100%); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.sh-buy { display: inline-flex; align-items: center; gap: 4px; }
.sh-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; min-height: 0; }
.sh-it { position: relative; font-family: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; padding: 10px 8px 16px; overflow: hidden; background: linear-gradient(transparent 70%, rgba(0,0,0,0.4)), repeating-linear-gradient(90deg, #1c0f08 0 22px, #170c06 22px 24px); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, inset 0 -10px 0 0 #4a2a14, inset 0 -13px 0 0 #0e0603, 0 6px 0 #0e0603; transition: transform 0.1s, box-shadow 0.12s; animation: it3In 0.35s backwards; }
.sh-glow { position: absolute; left: 50%; top: 38%; width: 170px; height: 170px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent), transparent 65%); opacity: 0.55; transition: opacity 0.15s, transform 0.2s; pointer-events: none; }
.sh-it .it3-pv { flex: 1; height: auto; min-height: 80px; }
.sh-it .it3-pv .tl-img { width: 104px; height: 104px; }
.sh-it .it3-pv .st-m { width: 100px; height: 100px; }
.sh-type { position: relative; font-size: 7px; color: var(--dim); letter-spacing: 1px; }
.sh-nm { position: relative; font-size: 11px; text-align: center; text-shadow: var(--sh); }
.sh-price { position: relative; display: inline-flex; align-items: center; font-size: 11px; color: #2a1004; background: var(--gold); border: 2px solid #0e0603; padding: 5px 9px 5px 7px; transform: rotate(-3deg); box-shadow: 2px 3px 0 #0e0603; }
.sh-price.poor { color: #8a0c04; background: #e8c890; }
.sh-price.own { color: #0e2a14; background: var(--green); }
.sh-it:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--rc), inset 0 -10px 0 0 #4a2a14, inset 0 -13px 0 0 #0e0603, 0 10px 0 #0e0603, 0 0 24px color-mix(in srgb, var(--rc) 45%, transparent); }
.sh-it:hover .sh-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
.sh-it.sel { box-shadow: inset 0 0 0 3px #fff, inset 0 -10px 0 0 #4a2a14, inset 0 -13px 0 0 #0e0603, 0 6px 0 #0e0603, 0 0 22px rgba(255,255,255,0.2); }
.sh-it.own .it3-pv, .sh-it.own .sh-nm { opacity: 0.6; }

.cl { width: min(1560px, 100%); height: calc(100vh - 112px); display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px; }
.cl-left { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; min-height: 0; }
.cl-right { background: radial-gradient(ellipse 80% 55% at 50% 45%, #26140a 0%, #120905 60%, #0a0503 100%); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; min-height: 0; }
.cl-head { display: flex; gap: 8px; padding: 10px; border-bottom: 2px solid #2a1408; }
.cl-tab { position: relative; flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 14px; font-family: inherit; color: var(--dim); cursor: pointer; background: rgba(0,0,0,0.3); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; overflow: hidden; }
.cl-tab b { font-weight: normal; font-size: 12px; color: var(--ink); text-shadow: var(--sh); }
.cl-tab span { font-size: 9px; }
.cl-tab i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); }
.cl-tab:hover { background: rgba(168,100,46,0.16); }
.cl-tab.on { background: linear-gradient(#c8441e, #6a1608); box-shadow: inset 0 0 0 2px #ff8a50; color: #fff; }
.cl-tab.on i { background: #fff; }
.cl-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 20px; }
.cl-sh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 7px; margin-bottom: 12px; border-bottom: 2px solid color-mix(in srgb, var(--rc) 60%, #0e0603); }
.cl-sh b { font-weight: normal; font-size: 12px; color: var(--rc); text-shadow: var(--sh); filter: brightness(1.3); }
.cl-sh span { font-size: 8px; color: var(--dim); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 10px; }
.bt { position: relative; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; color: var(--ink); cursor: pointer; background: transparent; border: none; transition: transform 0.1s; }
.bt-ph { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center 25%; image-rendering: pixelated; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc), 0 6px 0 6px #0e0603, inset -10px -12px 0 rgba(0,0,0,0.35), inset 8px 8px 0 rgba(255,255,255,0.12); transition: box-shadow 0.12s; }
.bt-nm { font-size: 8px; text-align: center; line-height: 1.4; text-shadow: var(--sh); }
.bt-n { position: absolute; top: 6px; right: 12px; font-size: 8px; color: #2a1004; background: var(--gold); border: 2px solid #0e0603; padding: 2px 4px; }
.bt:hover { transform: translateY(-4px); }
.bt:hover .bt-ph { box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc), 0 6px 0 6px #0e0603, 0 0 24px 6px color-mix(in srgb, var(--rc) 55%, transparent), inset -10px -12px 0 rgba(0,0,0,0.35), inset 8px 8px 0 rgba(255,255,255,0.12); }
.bt.sel .bt-ph { box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px #fff, 0 6px 0 6px #0e0603, 0 0 22px 4px var(--rc), inset -10px -12px 0 rgba(0,0,0,0.35), inset 8px 8px 0 rgba(255,255,255,0.12); }
.bt.lock { filter: grayscale(1) brightness(0.45); }
.cl-info { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 18px 18px; text-align: center; min-height: 190px; }
.ci-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ci-tags { display: flex; gap: 6px; align-items: center; }
.ci-cls { font-size: 8px; padding: 3px 6px; background: #0e0603; color: var(--dim); border: 2px solid #3a2414; }
.ci-stats { display: flex; gap: 10px; }
.ci-stats div { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 6px; padding: 8px 12px; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.ci-stats b { font-weight: normal; font-size: 16px; text-shadow: var(--sh); }
.ci-stats span { grid-column: 1 / -1; font-size: 6px; color: var(--dim); }
.ci-stats .hp b { color: #6fe070; }
.ci-stats .at b { color: #ffb040; }
.ci-ab { font-size: 8px; line-height: 1.7; color: var(--dim); max-width: 360px; }
.ci-ab b { display: block; font-weight: normal; color: var(--gold); margin-bottom: 4px; font-size: 9px; }

@media (max-width: 1360px) {
  .wd { grid-template-columns: 228px minmax(0, 1fr) 380px; }
  .cl { grid-template-columns: minmax(0, 1fr) 380px; }
  .wd-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .xcard { width: 250px; height: 360px; }
  .xc-ava { margin-top: 92px; }
}
@media (max-height: 760px) {
  .xcard { transform: scale(0.82) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .wd-cap, .sh-cap { min-height: 100px; }
  .wh-ed { transform: scale(0.82); }
}

#gacha-ui .g-banners, #gacha-ui .g-toggles, #gacha-ui .odds { transition: opacity 0.2s; }
#gacha-ui.busy .g-banners, #gacha-ui.busy .g-toggles, #gacha-ui.busy .odds { opacity: 0.18; pointer-events: none; }
.g-banners { position: absolute; top: 96px; left: 18px; width: 300px; display: flex; flex-direction: column; gap: 12px; }
.gbn { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; padding: 10px 12px 12px; text-align: left; font-family: inherit; color: var(--ink); cursor: pointer; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); transition: transform 0.12s, box-shadow 0.15s; }
.gbn .gba { grid-column: 1 / -1; height: 0; overflow: hidden; transition: height 0.22s cubic-bezier(.3,1.4,.5,1); }
.gbn.on .gba { height: 104px; background: radial-gradient(ellipse at 50% 60%, rgba(255,140,40,0.22), transparent 70%); }
.gbn:hover { transform: translateX(4px); }
.gbn.on { box-shadow: inset 0 0 0 3px var(--gold), 0 6px 0 #0e0603, 0 0 26px rgba(255,190,70,0.28); transform: none; }
.gbn-info b { display: block; font-weight: normal; font-size: 14px; text-shadow: var(--sh); }
.gbn.on .gbn-info b { color: var(--gold); }
.gbn-sub { display: block; font-size: 7px; color: var(--dim); margin-top: 6px; }
.gbn-cost { align-self: start; display: flex; align-items: center; font-size: 12px; color: var(--gold); text-shadow: var(--sh); }
.gbn-pity { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; }
.gbn-bar { position: relative; height: 8px; background: #1a0806; border: 2px solid #0e0603; }
.gbn-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c8441e, #ffd060); }
.gbn-pity em { font-style: normal; font-size: 7px; color: var(--dim); }
.gba.balls { display: flex; align-items: center; justify-content: center; }
.gba.balls i { width: 74px; height: 74px; border-radius: 50%; background-size: cover; background-position: center 25%; image-rendering: pixelated; margin: 0 -8px; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc), 0 0 22px var(--rc), inset -10px -12px 0 rgba(0,0,0,0.35), inset 8px 8px 0 rgba(255,255,255,0.12); animation: gbaBob 2.4s ease-in-out infinite; }
.gba.balls i:nth-child(2) { transform: scale(1.14); z-index: 1; animation-delay: -0.8s; }
.gba.balls i:nth-child(3) { animation-delay: -1.6s; }
@keyframes gbaBob { 50% { translate: 0 -5px; } }
.gba.cos { display: flex; align-items: center; justify-content: center; gap: 4px; }
.gba.cos .ava2 { margin-right: 6px; }
.gba-th, .gba-th2 { display: block; width: 88px; height: 88px; }
.gba-th img, .gba-th2 img { width: 88px; height: 88px; image-rendering: pixelated; display: block; }
.gba.st { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gba-stk { position: relative; display: block; width: 86px; height: 86px; }

.odds { position: absolute; top: 96px; right: 18px; width: 316px; padding: 14px 14px 12px; gap: 12px; display: flex; flex-direction: column; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.odds .oh { display: flex; justify-content: space-between; align-items: baseline; margin: 0; text-align: left; }
.odds .oh b { font-weight: normal; font-size: 12px; color: var(--gold); text-shadow: var(--sh); }
.odds .oh.boosted b { color: #ffb060; }
.odds .oh span { font-size: 7px; color: var(--dim); }
.odds .orows { display: flex; flex-direction: column; gap: 8px; }
.odds .orow { display: grid; grid-template-columns: 100px 1fr 46px 36px; gap: 7px; align-items: center; }
.odds .onm { font-size: 8px; color: var(--rc); filter: brightness(1.3); text-shadow: var(--sh); white-space: nowrap; overflow: hidden; }
.odds .orow .pct { font-size: 9px; color: var(--ink); text-align: right; min-width: 0; }
.odds .obar { grid-column: auto; position: relative; height: 8px; background: #1a0806; border: 2px solid #0e0603; }
.odds .obar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.odds .orow .got { font-size: 8px; color: var(--dim); text-align: right; min-width: 0; }
.odds .orow .got.full { color: var(--green); }
.odds .ofoot { display: flex; flex-direction: column; gap: 6px; font-size: 7px; color: var(--dim); text-align: left; margin: 0; padding-top: 10px; border-top: 2px solid #2a1408; }
.odds .obar.big { height: 10px; }
.odds .obar.big i { background: var(--green); box-shadow: none; }

.g-toggles { position: absolute; left: 18px; bottom: 3vh; width: 300px; display: flex; flex-direction: column; gap: 8px; }
.gsw { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.gsw .sw { position: relative; width: 36px; height: 20px; flex: none; background: #1a0806; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414; }
.gsw .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: #6a4a30; transition: left 0.12s, background 0.12s; }
.gsw.on .sw { background: #0e3a1a; box-shadow: inset 0 0 0 2px #2a8a40; }
.gsw.on .sw::after { left: 19px; background: var(--green); }
.gsw span { font-size: 9px; text-shadow: var(--sh); }
.gsw small { display: block; font-size: 6px; color: var(--dim); margin-top: 5px; text-shadow: none; }
.gsw:hover:not(:disabled) { filter: brightness(1.15); }
.gsw:disabled { opacity: 0.4; cursor: default; }
.btn.spin { min-width: 270px; }
.btn.spin small { display: flex; align-items: center; gap: 2px; }

.rv-prev.on { display: block; position: relative; width: calc(100% + 16px); height: 250px; margin: -8px -8px -6px; }
.rv-prev.on .pv3-css.m-card { padding-bottom: 0; }
.rv-prev.on .xcard { transform: scale(0.56) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.rv-prev.on .pv3-css.m-sticker .pv-stk { width: 150px; margin-bottom: 10%; }

.rgx { padding: 0 !important; gap: 0 !important; background: none; justify-content: flex-start; align-items: stretch; }
.rgx.start { background: radial-gradient(ellipse at 50% 45%, rgba(7,5,4,0.5), rgba(7,5,4,0.94) 72%); align-items: stretch; padding: 8px 14px 18px !important; gap: 10px !important; }
.rgx.result { background: radial-gradient(ellipse at 50% 45%, rgba(7,5,4,0.6), rgba(7,5,4,0.92) 70%); align-items: center; justify-content: center; gap: 16px !important; }
.rgx.shop { display: grid; grid-template-columns: 290px minmax(0, 1fr) 268px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px 12px !important; padding: 8px 14px 12px !important; }

.rx-top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.rx-side { display: flex; flex-direction: column; gap: 6px; }
.rx-side.op { align-items: flex-end; }
.rx-who { display: flex; align-items: center; gap: 10px; }
.rx-who b { font-weight: normal; font-size: 13px; text-shadow: var(--sh); }
.rx-side.me .rx-who b { color: var(--green); }
.rx-side.op .rx-who b { color: #ff8a7a; }
.rx-chip { font-size: 8px; padding: 5px 8px; border: 2px solid #0e0603; background: rgba(14,6,3,0.92); box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); text-shadow: var(--sh); }
.rx-chip.think::after { content: ""; display: inline-block; width: 3ch; animation: dots 1.2s steps(4) infinite; }
.rx-chip.ok { box-shadow: inset 0 0 0 2px var(--green); color: var(--green); }
.rx-odeck { display: flex; gap: 4px; }
.rx-odeck i { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center 25%; image-rendering: pixelated; box-shadow: 0 0 0 2px #0e0603, 0 0 0 3px var(--rc); }
.rx-mid { display: flex; align-items: center; gap: 16px; padding: 4px 16px; background: rgba(14,6,3,0.82); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 4px 0 #0e0603; }
.rx-round { font-size: 12px; color: var(--gold); text-shadow: var(--sh); }
.rx-timer { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.rx-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rx-timer circle { stroke-width: 10; }
.rx-timer .trk { fill: rgba(14,6,3,0.9); stroke: #2a1408; }
.rx-timer .arc { fill: none; stroke: var(--gold); stroke-dasharray: 276.46; transition: stroke 0.2s; }
.rx-timer b { position: relative; font-weight: normal; font-size: 18px; text-shadow: 2px 2px 0 #000; }
.rx-timer.low .arc { stroke: var(--red); }
.rx-timer.low b { color: var(--red); animation: pulse 0.5s infinite; }
.rx-score { display: flex; align-items: baseline; gap: 8px; font-size: 22px; text-shadow: 3px 3px 0 #000; }
.rx-score b { font-weight: normal; }
.rx-score .g { color: var(--green); }
.rx-score .r { color: var(--red); }
.rx-score em { font-style: normal; font-size: 7px; color: var(--dim); margin-left: 4px; text-shadow: none; }
.rx-score.big { font-size: 46px; }

.rx-left, .rx-right { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; overflow-y: auto; }
.rx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rx-h b { font-weight: normal; font-size: 12px; color: var(--gold); text-shadow: var(--sh); }
.rx-h span { font-size: 7px; color: var(--dim); }
.rx-h.sm { margin-top: 6px; }
.rx-h.sm b { font-size: 9px; color: var(--ink); }
.rx-slots { display: flex; flex-direction: column; gap: 7px; }
.rx-slot { position: relative; padding: 13px 0 0; }
.rx-sl { position: absolute; left: 4px; top: 0; font-size: 6px; color: var(--dim); letter-spacing: 1px; }
.rx-slot.f .rx-sl { color: var(--green); }
.rx-slot.hot .rx-ball, .rx-slot.hot .rx-empty { box-shadow: inset 0 0 0 3px #fff, 0 0 16px rgba(255,255,255,0.35); }
.rx-empty { display: grid; place-items: center; height: 54px; font-size: 7px; color: #5a3a24; border: 2px dashed #3a2414; }
.rx-empty.wide { height: auto; padding: 14px 8px; text-align: center; line-height: 1.6; }
.rx-empty.tall { padding: 26px 12px; }
.rx-ball { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; cursor: grab; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 18%, #140a06), #120a06 70%); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408, inset 3px 0 0 0 var(--rc); transition: transform 0.1s, box-shadow 0.12s, opacity 0.12s; touch-action: none; }
.rx-ball:hover { transform: translateX(3px); box-shadow: inset 0 0 0 2px var(--rc), inset 3px 0 0 0 var(--rc), 0 0 14px color-mix(in srgb, var(--rc) 40%, transparent); }
.rx-ph { width: 50px; height: 50px; flex: none; border-radius: 50%; background-size: cover; background-position: center 25%; image-rendering: pixelated; box-shadow: 0 0 0 2px #0e0603, 0 0 0 4px var(--rc), inset -6px -8px 0 rgba(0,0,0,0.3), inset 5px 5px 0 rgba(255,255,255,0.1); }
.rx-bt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rx-bt b { font-weight: normal; font-size: 9px; text-shadow: var(--sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-bt span { display: flex; gap: 10px; font-size: 8px; }
.rx-bt em { font-style: normal; }
.rx-bt .hp { color: #6fe070; }
.rx-bt .at { color: #ffb040; }
.rx-cards { display: flex; gap: 3px; flex-wrap: wrap; }
.rx-cards i { width: 15px; height: 20px; background-size: cover; background-position: center; border: 1px solid #0e0603; box-shadow: 0 0 0 1px var(--rc); }
.rx-slot.r .rx-ph { width: 38px; height: 38px; }
.rx-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 40px; }
.rx-bench .rx-ball { padding: 5px; gap: 6px; flex-direction: column; text-align: center; box-shadow: inset 0 0 0 2px #2a1408, inset 0 -3px 0 0 var(--rc); }
.rx-bench .rx-ph { width: 40px; height: 40px; }
.rx-bench .rx-bt { align-items: center; width: 100%; }
.rx-bench .rx-bt b { font-size: 7px; max-width: 100%; }
.rx-bench .rx-bt span { font-size: 7px; gap: 6px; }
.rx-bench.hot { box-shadow: 0 0 0 2px #fff; }
.rx-reopen { margin-top: 4px; animation: pulseGlow 1.2s ease-in-out infinite; }
@keyframes pulseGlow { 50% { filter: brightness(1.35); } }
.rx-sell { display: block; margin-top: auto; padding: 12px; text-align: center; border: 3px dashed #5a1a10; background: rgba(160,24,8,0.06); opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.rx-sell b { display: block; font-weight: normal; font-size: 11px; color: #ff6a50; }
.rx-sell span { font-size: 7px; color: var(--dim); }
.rgx.drag-ball .rx-sell { opacity: 1; border-color: #a01808; background: rgba(160,24,8,0.15); }
.rx-sell.hot { background: rgba(200,40,20,0.4); border-color: #ff6a50; }
.rgx.drag-card .rx-ball, .rgx.attaching .rx-ball { animation: canDrop 0.9s ease-in-out infinite; }
.rx-ball.hot { box-shadow: inset 0 0 0 3px var(--green), 0 0 18px rgba(77,255,128,0.5) !important; animation: none !important; }
.rx-ball.sel { box-shadow: inset 0 0 0 3px var(--green), 0 0 14px rgba(77,255,128,0.45); animation: none !important; }
.rx-ball.sel::after { content: "ВЫБРАН"; position: absolute; top: -6px; right: 4px; font-size: 6px; padding: 2px 4px; background: var(--green); color: #0e2a14; border: 2px solid #0e0603; }
@keyframes canDrop { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(255,200,80,0.35); } }
.lifted { opacity: 0.3; }
.rx-ghost { position: fixed !important; z-index: 60; pointer-events: none; margin: 0 !important; transform: rotate(-3deg) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 0 0 2px #fff !important; opacity: 0.95; transition: opacity 0.1s; }

.rx-board { position: relative; pointer-events: auto; min-height: 0; }
.rgx.placing .rx-board { cursor: crosshair; }
.rgx.drag-build .rx-board, .rgx.drag-inv .rx-board, .rgx.drag-placed .rx-board { box-shadow: inset 0 0 0 3px rgba(77,255,128,0.55), inset 0 0 40px rgba(77,255,128,0.15); }
.rx-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rx-tag { position: absolute; transform: translate(-50%, -100%); font-size: 8px; padding: 4px 7px; background: rgba(14,6,3,0.88); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a8a40; color: var(--ink); white-space: nowrap; text-shadow: var(--sh); }
.rx-placebar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; z-index: 3; }
.rx-placebar:empty { display: none; }
.rx-pb { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: rgba(14,6,3,0.94); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #2a8a40; }
.rx-pb b { font-weight: normal; font-size: 10px; color: var(--green); }
.rx-pb span { font-size: 7px; color: var(--dim); }
.rx-bth { display: block; width: 44px; height: 44px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
.rx-bth.big { width: 72px; height: 62px; }
.rx-pb .rx-bth { width: 34px; height: 34px; }

.rx-inv { display: flex; flex-direction: column; gap: 6px; }
.rx-it { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: grab; background: #120a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; touch-action: none; }
.rx-it > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rx-it b { font-weight: normal; font-size: 9px; }
.rx-it span { font-size: 6px; color: var(--dim); }
.rx-it.off { box-shadow: inset 0 0 0 2px var(--gold); }
.rx-it.off span { color: var(--gold); animation: pulseGlow 1s infinite; }
.rx-it.on span { color: var(--green); }
.rx-it.act { box-shadow: inset 0 0 0 2px #fff; }
.rx-it:hover { filter: brightness(1.2); }
.rx-x { font-family: inherit; font-size: 6px; color: #ffa090; background: #2a0c08; border: 2px solid #0e0603; padding: 4px 5px; cursor: pointer; }
.rx-x:hover { background: #4a140c; }
.rx-opp { display: flex; flex-direction: column; gap: 6px; font-size: 7px; color: var(--dim); padding: 8px; background: rgba(0,0,0,0.3); border: 2px solid #0e0603; }
.rx-opp .ok { color: var(--green); }

.rx-tray { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 14px; padding: 10px 12px; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.rx-shopl { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; padding-right: 10px; border-right: 2px solid #2a1408; }
.rx-shopl > b { font-weight: normal; font-size: 16px; color: var(--ink); text-shadow: 3px 3px 0 #6a1608, 5px 5px 0 #000; }
.rx-offers { flex: 1; min-width: 0; display: flex; gap: 16px; }
.rx-grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rx-grp > span { font-size: 7px; color: var(--dim); letter-spacing: 1px; }
.rx-grp > div { display: flex; gap: 8px; }
.rx-off { position: relative; width: 132px; height: 118px; display: flex; flex-direction: column; overflow: hidden; cursor: grab; background: #120a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px var(--rc), 0 4px 0 #0e0603; transition: transform 0.1s, box-shadow 0.12s; touch-action: none; }
.rx-off:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--rc), 0 8px 0 #0e0603, 0 0 18px color-mix(in srgb, var(--rc) 50%, transparent); }
.rx-art { display: block; height: 50px; flex: none; background-size: cover; background-position: center 30%; image-rendering: pixelated; border-bottom: 2px solid #0e0603; }
.rx-off.build { align-items: center; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 25%, transparent), transparent 70%), #120a06; }
.rx-off.build .rx-bth { margin-top: 2px; }
.rx-ot { display: flex; flex-direction: column; gap: 4px; padding: 5px 7px; min-width: 0; text-align: left; width: 100%; }
.rx-off.build .rx-ot { text-align: center; align-items: center; padding-top: 0; }
.rx-ot b { font-weight: normal; font-size: 8px; text-shadow: var(--sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rx-ot span { font-size: 6px; line-height: 1.5; color: var(--dim); }
.rx-ot em { font-style: normal; font-size: 6px; color: var(--gold); }
.rx-price { position: absolute; top: 4px; right: 4px; font-size: 10px; color: #2a1004; background: var(--gold); border: 2px solid #0e0603; padding: 2px 5px; box-shadow: 1px 2px 0 #0e0603; }
.rx-off.poor .rx-price { background: #5a1408; color: #ffb0a0; }
.rx-off.bought { opacity: 0.38; cursor: default; filter: grayscale(0.7); }
.rx-off.bought .rx-price { background: #2a1408; color: var(--dim); font-size: 6px; padding: 4px 5px; }
.rx-off.bought:hover { transform: none; }
.rx-pts { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 104px; padding: 0 12px; background: rgba(0,0,0,0.35); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #6a4a14; }
.rx-pts b { font-weight: normal; font-size: 30px; color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 16px rgba(255,200,80,0.45); }
.rx-pts span { font-size: 7px; color: var(--dim); }
.rx-fight { align-self: center; min-width: 190px; font-size: 20px; }
.rx-ready { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 190px; }
.rx-wait { font-size: 10px; color: var(--gold); text-shadow: var(--sh); }
.rx-wait.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
.rx-attach { flex: 1; display: flex; align-items: center; gap: 16px; }
.rx-cart { width: 76px; height: 100px; flex: none; background-size: cover; background-position: center; border: 3px solid #0e0603; box-shadow: 0 0 0 3px var(--rc), 0 0 20px var(--rc); animation: pvFloat 2s ease-in-out infinite; }
.rx-at { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rx-at b { font-weight: normal; font-size: 16px; color: var(--gold); text-shadow: var(--sh); }
.rx-at span { font-size: 9px; }
.rx-at em { font-style: normal; font-size: 9px; color: var(--green); animation: pulseGlow 1s infinite; }

.rx-disc { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(ellipse at 50% 50%, rgba(20,10,6,0.86), rgba(5,3,2,0.96) 70%); animation: fadeIn 0.25s; }
@keyframes fadeIn { from { opacity: 0; } }
.rx-dh { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rx-dh b { font-weight: normal; font-size: 30px; text-shadow: 4px 4px 0 #6a1608, 7px 7px 0 #000; transform: rotate(-2deg); }
.rx-dh span { font-size: 9px; color: var(--dim); }
.rx-full { font-size: 9px; color: #ffa090; background: #3a0c08; border: 2px solid #0e0603; padding: 8px 12px; }
.rx-dcards { display: flex; gap: 26px; }
.rx-dc { animation: dcIn 0.5s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes dcIn { from { transform: translateY(80px) rotateY(90deg) scale(0.7); opacity: 0; } }
.rx-dc:hover:not(.used) { transform: translateY(-14px) scale(1.04); box-shadow: inset 0 0 0 4px var(--rc), 0 10px 0 #0e0603, 0 0 40px var(--rc); }
.rx-dc.picked { transform: translateY(-30px) scale(1.12) !important; box-shadow: inset 0 0 0 4px #fff, 0 0 60px var(--rc) !important; transition: transform 0.25s; }
.rx-dbtns { display: flex; gap: 12px; }

.rx-tip { position: fixed; z-index: 70; width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; pointer-events: none; background: rgba(12,6,3,0.97); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #6a3a1a, 0 6px 0 #000; }
.rx-tip b { font-weight: normal; font-size: 11px; text-shadow: var(--sh); }
.rx-tip em { font-style: normal; font-size: 7px; color: var(--dim); }
.rx-tip p { font-size: 7px; line-height: 1.7; color: var(--ink); }
.rx-tip p i { display: block; font-style: normal; color: var(--gold); margin-bottom: 2px; }
.rx-tip small { font-size: 6px; color: var(--dim); }
.tp-st { display: flex; gap: 12px; font-size: 9px; }
.tp-st .hp { color: #6fe070; }
.tp-st .at { color: #ffb040; }
.tp-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-mods span { font-size: 6px; padding: 3px 4px; background: #0e3a1a; color: var(--green); border: 1px solid #0e0603; }

.rx-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.rx-h1 { font-size: 24px; text-shadow: 4px 4px 0 #6a1608, 7px 7px 0 #000; transform: rotate(-2deg); }
.rx-start-cards { display: flex; gap: 40px; }
.rx-sc { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rx-rules { display: flex; gap: 12px; }
.rx-rules div { width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(14,6,3,0.88); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414; }
.rx-rules b { font-weight: normal; font-size: 11px; color: var(--gold); }
.rx-rules span { font-size: 7px; color: var(--dim); line-height: 1.6; }
.rx-res { font-size: 52px; text-shadow: 5px 5px 0 #000; animation: slam 0.35s ease-out; }
.rx-res.win { color: var(--green); }
.rx-res.lose { color: var(--red); }
.rx-res.tie { color: var(--gold); }
.rx-gain { display: flex; align-items: baseline; gap: 10px; }
.rx-gain b { font-weight: normal; font-size: 34px; color: var(--gold); text-shadow: 3px 3px 0 #000; }
.rx-gain span { font-size: 10px; color: var(--dim); }
.rx-gst { display: flex; gap: 22px; font-size: 9px; color: var(--dim); }
.rx-gst b { font-weight: normal; color: var(--ink); }
.rx-note { font-size: 8px; color: var(--dim); }

@media (max-width: 1360px) {
  .rgx.shop { grid-template-columns: 250px minmax(0, 1fr) 230px; }
  .rx-off { width: 112px; height: 110px; }
  .rx-pts { min-width: 84px; }
  .rx-fight { min-width: 150px; font-size: 16px; }
  .rx-rules div { width: 200px; }
}

#np { position: fixed; z-index: 15; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; pointer-events: none; background: rgba(12,6,3,0.94); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #ff5a2a, 0 6px 0 #000, 0 0 24px rgba(255,90,40,0.3); animation: npIn 0.3s cubic-bezier(.3,1.6,.5,1); width: 330px; }
#np::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; background: rgba(12,6,3,0.94); border-right: 3px solid #0e0603; border-bottom: 3px solid #0e0603; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 0 #ff5a2a; }
#np.out { opacity: 0; transform: translate(-50%, -80%) scale(0.85); transition: opacity 0.4s, transform 0.4s; }
#np.land { animation: npLand 0.4s cubic-bezier(.3,1.8,.5,1); }
@keyframes npIn { from { transform: translate(-50%, -60%) scale(0.4); opacity: 0; } }
@keyframes npLand { 40% { transform: translate(-50%, -100%) scale(1.12); } }
.np-disc { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1e1e22 2px 4px); box-shadow: 0 0 0 2px #0e0603, 0 0 0 4px #3a3a42; animation: npSpin 3s linear infinite; }
.np-disc img { position: absolute; inset: 11px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #0e0603; }
.np-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #0e0603; box-shadow: 0 0 0 1px #8a8a94; }
#np.shuf .np-disc { animation-duration: 0.25s; }
@keyframes npSpin { to { transform: rotate(360deg); } }
.np-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-t span { font-size: 6px; color: #ff8a5a; letter-spacing: 2px; }
.np-t b { font-weight: normal; font-size: 9px; line-height: 1.5; color: var(--ink); text-shadow: var(--sh); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#np.shuf .np-t b { color: var(--dim); }
.np-t em { font-style: normal; font-size: 6px; color: var(--dim); }

#topbar { background: linear-gradient(rgba(7,5,4,0.85), rgba(7,5,4,0.4) 70%, rgba(7,5,4,0)); }
.tabs.dock { position: fixed; left: 14px; top: 76px; z-index: 21; display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: none; box-shadow: none; }
.tabs.dock button { position: relative; width: 88px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 8px 4px 7px; font-family: inherit; font-size: 8px; letter-spacing: 0; color: var(--dim); cursor: pointer; text-shadow: var(--sh); background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, inset 0 -4px 0 0 #0e0603, 0 4px 0 #0e0603; transition: transform 0.1s, color 0.1s, box-shadow 0.12s, background 0.12s; }
.tabs.dock button span { white-space: nowrap; }
.tabs.dock .tab-ico { width: 34px; height: 34px; fill: #8a6a4a; transition: fill 0.12s, transform 0.12s; }
.tabs.dock .tab-ico .ac { fill: #b0804a; }
.tabs.dock .tab-ico .ac2 { fill: #6a4a30; }
.tabs.dock .tab-ico .bg { fill: #170c07; }
.tabs.dock button:hover { color: var(--ink); transform: translateX(4px); box-shadow: inset 0 0 0 2px #a8642e, inset 0 -4px 0 0 #0e0603, 0 4px 0 #0e0603; }
.tabs.dock button:hover .tab-ico { fill: var(--ink); transform: scale(1.08); }
.tabs.dock button:hover .tab-ico .ac { fill: var(--gold); }
.tabs.dock button.on { color: #fff; background: linear-gradient(#c8441e, #6a1608); box-shadow: inset 0 0 0 2px #ff8a50, inset 0 -4px 0 0 #4a0c04, 0 4px 0 #0e0603, 0 0 18px rgba(255,100,40,0.35); transform: translateX(6px); }
.tabs.dock button.on .tab-ico { fill: #fff; }
.tabs.dock button.on .tab-ico .ac { fill: var(--gold); }
.tabs.dock button.on .tab-ico .ac2 { fill: #ffb070; }
.tabs.dock button.on .tab-ico .bg { fill: #6a1608; }
.tabs.dock button.on::after { content: ""; position: absolute; right: -11px; top: 50%; width: 0; height: 0; margin-top: -8px; border: 8px solid transparent; border-left-color: #ff8a50; }
.tabs.dock .dot { top: 6px; right: 6px; }
.tabs.dock.lock button:not(.on) { opacity: 0.3; pointer-events: none; }

#lobby .tab-pane { inset: 70px 0 0 116px; }
#tab-profile.on, #tab-shop.on, #tab-coll.on { padding: 8px 20px 18px 10px; }
.wd, .sh, .cl { height: calc(100vh - 96px); }
#lobby #tab-play.on { padding-left: 3vw; }
#party { top: 74px; max-height: calc(100vh - 92px); }
.g-banners { top: 74px; left: 120px; }
.odds { top: 74px; }
.g-toggles { left: 120px; }
#reveal { left: calc(120px + 2vw); }

@media (max-height: 720px) {
  .tabs.dock { top: 66px; gap: 6px; }
  .tabs.dock button { height: 70px; gap: 6px; }
  .tabs.dock .tab-ico { width: 28px; height: 28px; }
}

#tab-friends.on { overflow: hidden; padding: 8px 20px 18px 10px; background: radial-gradient(ellipse at 50% 40%, rgba(7,5,4,0.86), rgba(7,5,4,0.97) 75%); }
.frx { width: min(1400px, 100%); height: calc(100vh - 96px); display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; }
.frx-side, .frx-main { background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); display: flex; flex-direction: column; min-height: 0; }
.frx-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.frx-body .pj input { flex: 1; min-width: 0; }
.frx-me { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.35); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.frx-me span { font-size: 7px; color: var(--dim); }
.frx-me b { font-weight: normal; font-size: 14px; filter: drop-shadow(2px 2px 0 #000); }
.frx-n { display: inline-block; font-size: 8px; color: #0e2a14; background: var(--green); padding: 2px 5px; margin-left: 6px; }
.fr-reqrow { background: rgba(77,255,128,0.08); border-color: #2a8a40; }
.frx-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-content: start; gap: 12px; }
.frx-grid .fr-row { padding: 6px; background: rgba(0,0,0,0.3); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.frx-grid .fr-row.on { box-shadow: inset 0 0 0 2px #2a8a40; }
.frx-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; text-align: center; }
.frx-empty .tab-ico { width: 80px; height: 80px; fill: #4a3020; }
.frx-empty .tab-ico .ac { fill: #6a4a30; }
.frx-empty b { font-weight: normal; font-size: 16px; color: var(--dim); }
.frx-empty span { font-size: 8px; color: #8a6a4a; }

.mode { flex-direction: row !important; align-items: center; gap: 14px !important; }
.mode > div { display: flex; flex-direction: column; gap: 7px; }
.mode-ico { width: 36px; height: 36px; flex: none; fill: #8a6a4a; }
.mode-ico .ac { fill: #b0804a; }
.mode-ico .bg { fill: #170c07; }
.mode.on .mode-ico { fill: var(--ink); }
.mode.on .mode-ico .ac { fill: var(--gold); }

* { scrollbar-width: thin; scrollbar-color: #6a3a1a #0e0603; }
@media (max-height: 800px) {
  .wd-cat { padding: 6px 14px; gap: 10px; }
  .wd-cat em { margin-top: 4px; }
  .wd-grp { padding: 8px 16px 4px; }
  .wd-me { padding: 6px 8px; margin: 2px 8px 4px; }
  .wd-me .ava2 { --s: 38px !important; }
  .cat-ico { width: 24px; height: 24px; }
  .wh-ed { transform: scale(0.82); }
}
@media (max-height: 760px) {
  .rx-off { height: 100px; }
  .rx-art { height: 36px; }
  .rx-bth.big { width: 56px; height: 46px; }
  .rx-ot { gap: 3px; padding: 4px 6px; }
  .rx-pts b { font-size: 24px; }
  .rx-mid { padding: 2px 12px; }
  .rx-timer { width: 48px; height: 48px; }
}
.rx-exit { font-family: inherit; font-size: 7px; color: var(--dim); background: rgba(14,6,3,0.9); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414; padding: 6px 8px; cursor: pointer; }
.rx-exit:hover { color: #ffa090; box-shadow: inset 0 0 0 2px #6a1a10; }
.rx-exit.sure { color: #fff; background: #a01808; box-shadow: inset 0 0 0 2px #ff6a50; }
.frx-me .nk { font-size: 16px; }
@media (max-width: 1360px) {
  .btn.spin { min-width: 220px; }
  .g-banners, .g-toggles { width: 270px; }
  .odds { width: 290px; }
}
@media (max-width: 1180px) {
  .g-btns { margin-left: 300px; }
}
.wd-body.still .it3 { animation: none; }

.ava2 { --s: 48px; position: relative; display: inline-block; width: var(--s); height: var(--s); border-radius: 50%; flex: none; background: #222; box-shadow: none !important; animation: none !important; }
.ava2 img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; image-rendering: pixelated; display: block; z-index: 1; }
.ava2 .afr { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; background-size: calc(var(--s) * 1.5 * var(--n)) 100%; background-position: 0 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.55)); }
.ava2 .afr.anim { animation: frxAnim var(--fd) steps(var(--n)) infinite; }
@keyframes frxAnim { to { background-position-x: calc(var(--s) * -1.5 * var(--n)); } }
.ava2 .fr-ring { display: none; }

#rside { position: fixed; right: 14px; top: 76px; z-index: 21; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; max-height: calc(100vh - 90px); }
#rside > * { pointer-events: auto; }
#rside #party { position: static; width: 330px; max-height: none; overflow: visible; }
.tabs.dock.right { position: static; flex-direction: column; }
.tabs.dock.right button:hover { transform: translateX(-4px); }
.tabs.dock.right button.on { transform: translateX(-6px); }
.tabs.dock.right button.on::after { right: auto; left: -11px; border-left-color: transparent; border-right-color: #ff8a50; }
#lobby .tab-pane { inset: 70px 116px 0 116px; }
#tab-profile.on, #tab-shop.on, #tab-coll.on, #tab-friends.on, #tab-ach.on { padding: 8px 10px 18px; }
#lobby #tab-play.on { align-items: center; justify-content: safe center; overflow-y: auto; padding: 0 0 4vh; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 75%); }
#tab-play .play-col { width: min(470px, 92vw); align-items: stretch; }
#tab-play .logo.small { align-items: center; transform-origin: center; transform: rotate(-3deg) scale(0.7); margin: -18px 0 -22px; }
.ar-desc { font-size: 8px; line-height: 1.7; color: var(--dim); text-align: center; text-shadow: var(--sh); padding: 8px 10px; background: rgba(14,6,3,0.82); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; margin-top: -6px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
#tab-play .hint { text-align: center; }
.odds { right: 120px !important; }
body:has(#tab-play.on) #rside { top: 76px; }
@media (max-width: 1360px) {
  #rside #party { width: 290px; }
}

#tab-ach.on { overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(7,5,4,0.86), rgba(7,5,4,0.97) 75%); }
.achx { width: min(1300px, 100%); height: calc(100vh - 96px); display: flex; flex-direction: column; gap: 12px; }
.ac-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 12px 16px; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); }
.ac-title { display: flex; flex-direction: column; gap: 8px; font-size: 20px; text-shadow: 3px 3px 0 #6a1608, 5px 5px 0 #000; }
.ac-title span { font-size: 8px; color: var(--dim); text-shadow: var(--sh); }
.ac-bar { position: relative; height: 14px; background: #1a0806; border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.ac-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c8441e, #ffd060); }
.ac-all { display: inline-flex; align-items: center; gap: 4px; animation: pulseGlow 1.1s ease-in-out infinite; }
.ac-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-content: start; gap: 10px; padding: 2px 4px 16px; }
.acc { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408, 0 4px 0 #0e0603; animation: it3In 0.3s backwards; }
.acc-ico { width: 64px; height: 64px; display: grid; place-items: center; background: radial-gradient(circle, #2a1408, #120a06 70%); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #4a2a14; }
.acc-ico svg { width: 40px; height: 40px; fill: #6a4a30; }
.acc-ico .ac { fill: #8a6a4a; }
.acc-ico .bg { fill: #120a06; }
.acc-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-t b { font-weight: normal; font-size: 11px; text-shadow: var(--sh); color: var(--dim); }
.acc-t span { font-size: 7px; line-height: 1.5; color: #8a6a4a; }
.acc-bar { position: relative; height: 12px; margin-top: 2px; background: #1a0806; border: 2px solid #0e0603; }
.acc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #6a4a30; }
.acc-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 6px; color: var(--ink); text-shadow: 1px 1px 0 #000; }
.acc-rw { display: inline-flex; align-items: center; font-size: 10px; color: #8a6a4a; }
.acc-ok { font-size: 7px; color: #0e2a14; background: var(--green); padding: 4px 6px; border: 2px solid #0e0603; }
.acc-get { line-height: 1.6; text-align: center; }
.acc.ready { box-shadow: inset 0 0 0 3px var(--gold), 0 4px 0 #0e0603, 0 0 22px rgba(255,200,80,0.25); }
.acc.ready .acc-ico { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,200,80,0.4); background: radial-gradient(circle, #6a4a14, #2a1408 70%); }
.acc.ready .acc-ico svg { fill: #fff; animation: pvFloat 1.6s ease-in-out infinite; }
.acc.ready .acc-ico .ac { fill: var(--gold); }
.acc.ready .acc-t b { color: var(--gold); }
.acc.ready .acc-t span { color: var(--ink); }
.acc.claimed .acc-ico svg { fill: var(--ink); }
.acc.claimed .acc-ico .ac { fill: #ffb040; }
.acc.claimed .acc-t b { color: var(--ink); }
.acc.claimed .acc-t span { color: var(--dim); }
.acc.claimed { box-shadow: inset 0 0 0 2px #2a8a40, 0 4px 0 #0e0603; }
.acc.todo .acc-bar i { background: linear-gradient(90deg, #6a3a1a, #a8642e); }

.mp { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; min-width: 230px; max-width: 320px; padding: 0 8px 0 10px; border: 3px solid #0e0603; background: #120a06; box-shadow: inset 0 0 0 2px #6a3a1a, 0 4px 0 #0e0603; pointer-events: auto; }
.mp-ban { position: absolute; inset: 3px; opacity: 0.9; z-index: 0; }
.mp-ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.45)); }
.mp > .ava2, .mp-t, .mp-fx { position: relative; z-index: 1; }
.mp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-nk { font-size: 12px; white-space: nowrap; overflow: hidden; filter: drop-shadow(2px 2px 0 #000); }
.mp-tag { font-size: 6px; color: var(--dim); text-shadow: var(--sh); }
.mp-fx { display: flex; gap: 4px; }
.mp-c { width: 26px; height: 26px; border-radius: 50%; background: #0e0603 center / 150% no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 2px #0e0603, 0 0 0 3px #a8642e; }
.mp.op { flex-direction: row-reverse; padding: 0 10px 0 8px; }
.mp.op .mp-t { align-items: flex-end; }
.mp.op .mp-ban::after { background: linear-gradient(270deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.45)); }
#hud .team > .mp { margin-bottom: 2px; }
#hud .team.op > .mp { align-self: flex-end; }
#hud.multi .plate .prow { display: flex !important; flex-direction: row; align-items: center; gap: 6px; }
#hud.multi .plate .prow { flex-wrap: wrap; }
#hud.multi .plate .patk { font-size: 9px; }
#hud.multi .plate .info { gap: 3px; }
.dr-who .mp { max-width: 300px; }
.rx-who .mp { height: 40px; min-width: 200px; }
.rx-who .mp .ava2 { --s: 26px !important; }
.rx-who .mp-c { width: 22px; height: 22px; }

.chat-hint { align-self: flex-start; font-size: 7px; color: rgba(244,234,208,0.62); background: rgba(14,6,3,0.42); border: 2px solid rgba(14,6,3,0.55); padding: 5px 8px; pointer-events: none; }
.chat-hint b { font-weight: normal; color: rgba(255,208,96,0.85); padding: 1px 4px; margin-left: 4px; border: 1px solid rgba(255,208,96,0.45); }
#chat.open .chat-hint { display: none; }

.rx-offers { gap: 12px; }
.rx-grp { flex: none; display: flex; flex-direction: column; gap: 0; background: rgba(0,0,0,0.32); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px var(--gc); }
.rx-grp.g-cards { --gc: #7a4a9a; }
.rx-grp.g-builds { --gc: #2a8a40; }
.rx-grp header { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 55%, #0e0603), transparent); border-bottom: 2px solid #0e0603; }
.rx-grp header b { display: block; font-weight: normal; font-size: 9px; color: #fff; text-shadow: var(--sh); }
.rx-grp header span { display: block; font-size: 6px; color: var(--dim); margin-top: 3px; letter-spacing: 0; }
.rx-gi { width: 22px; height: 22px; flex: none; }
.rx-gi svg { width: 100%; height: 100%; fill: #fff; }
.rx-gi .ac { fill: color-mix(in srgb, var(--gc) 70%, #fff); }
.rx-gi .bg { fill: #120a06; }
.rx-gl { display: flex; gap: 8px; padding: 8px; }
.rx-off.card { background: linear-gradient(#1c1024, #120a06); }
.rx-ib { display: flex; flex-direction: column; gap: 3px; }
.rx-x.sell { color: var(--gold); background: #2a1c06; }
.rx-x.sell:hover { background: #4a3008; }
.rx-it.hl { box-shadow: inset 0 0 0 2px var(--green), 0 0 12px rgba(77,255,128,0.35); }
.rx-board.grab { cursor: grab; }
.rgx.drag-inv .rx-sell, .rgx.drag-placed .rx-sell { opacity: 1; border-color: #a01808; background: rgba(160,24,8,0.15); }
.pi { width: 18px; height: 18px; fill: #fff; image-rendering: pixelated; }
.pi .ac { fill: var(--gold); }
.rx-rotb { display: inline-flex; align-items: center; gap: 4px; }
.rx-rotb em { font-style: normal; font-size: 9px; color: var(--gold); border: 2px solid #0e0603; background: #2a1408; padding: 1px 4px; }
.rx-rhint { position: fixed; z-index: 65; display: flex; align-items: center; gap: 4px; padding: 4px 7px; pointer-events: none; background: rgba(12,6,3,0.9); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a8a40; }
.rx-rhint em { font-style: normal; font-size: 8px; color: var(--gold); border: 2px solid #0e0603; background: #2a1408; padding: 1px 4px; }
.rx-rhint span { font-size: 7px; color: var(--ink); margin-left: 2px; }
.rx-rhint .pi { width: 16px; height: 16px; }

#gacha-ui .gh, #gacha-ui .gr { transition: opacity 0.25s; }
#gacha-ui.busy .gh, #gacha-ui.busy .gr { opacity: 0; pointer-events: none !important; }
#gacha-ui.busy .gh *, #gacha-ui.busy .gr * { pointer-events: none !important; }
.gh { position: absolute; left: 120px; right: 120px; top: 70px; bottom: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; pointer-events: none !important; }
.gh > * { pointer-events: auto; }
.gh-main { position: relative; width: min(900px, 100%); padding: 14px 18px 14px; background: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 78% 14%, #cfe 50%, transparent), radial-gradient(1.5px 1.5px at 42% 70%, #fff 50%, transparent), radial-gradient(1px 1px at 88% 64%, #fff 50%, transparent), radial-gradient(ellipse at 50% 0%, rgba(120,90,255,0.35), transparent 60%), linear-gradient(#0d0f2a, #07081a); border: 3px solid #04040c; box-shadow: inset 0 0 0 2px #3a2a8a, inset 0 0 60px rgba(90,60,220,0.25), 0 6px 0 #04040c, 0 0 40px rgba(80,60,200,0.25); }
.gh-main::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(160,140,255,0.25); pointer-events: none; }
.gh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gh-title b { display: block; font-weight: normal; font-size: 22px; color: #fff; text-shadow: 3px 3px 0 #3a1a8a, 5px 5px 0 #000, 0 0 18px rgba(160,130,255,0.7); }
.gh-title span { display: block; font-size: 8px; color: #b8b0ff; margin-top: 8px; letter-spacing: 2px; }
.gh-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 6px 10px; background: rgba(4,4,12,0.7); border: 2px solid #04040c; box-shadow: inset 0 0 0 2px #3a2a8a; }
.gh-timer span { font-size: 6px; color: #9a90d8; letter-spacing: 1px; }
.gh-timer b { font-weight: normal; font-size: 16px; color: #fff; text-shadow: 0 0 10px rgba(160,130,255,0.8); }
.gh-feat { display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: end; gap: 12px; margin: 10px 0 8px; }
.gf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 10px; background: linear-gradient(transparent 30%, rgba(0,0,0,0.45)); border: 2px solid #04040c; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 55%, #04040c); overflow: hidden; }
.gf-glow { position: absolute; left: 50%; top: 38%; width: 240px; height: 240px; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 60%, transparent), transparent 62%); animation: gfGlow 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes gfGlow { 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.12); } }
.gf-ball { position: relative; width: 112px; height: 112px; }
.gf.big .gf-ball { width: 168px; height: 168px; }
.gf-th { position: absolute; inset: 0; background: center / contain no-repeat; image-rendering: pixelated; animation: pvFloat 3s ease-in-out infinite; }
.gf.big { box-shadow: inset 0 0 0 3px var(--rc), 0 0 30px color-mix(in srgb, var(--rc) 45%, transparent); }
.gf-rar { position: relative; font-size: 7px; padding: 3px 6px; color: #fff; background: var(--rc); border: 2px solid #04040c; text-shadow: 1px 1px 0 #000; }
.gf-nm { position: relative; font-size: 10px; color: #fff; text-shadow: var(--sh); text-align: center; }
.gf.big .gf-nm { font-size: 13px; }
.gf-st { position: relative; display: flex; gap: 10px; font-size: 8px; }
.gf-st .hp { color: #6fe070; }
.gf-st .at { color: #ffb040; }
.gf-up { position: relative; display: flex; align-items: center; gap: 6px; font-size: 7px; color: #ffe070; text-shadow: var(--sh); }
.gf-up b { font-weight: normal; color: #fff; background: rgba(4,4,12,0.8); border: 1px solid color-mix(in srgb, var(--rc) 70%, #000); padding: 2px 4px; }
.gh-low { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.gh-pity { display: flex; flex-direction: column; gap: 8px; }
.gp { display: flex; flex-direction: column; gap: 4px; }
.gp-l { display: flex; justify-content: space-between; font-size: 7px; color: #b8b0ff; }
.gp-l b { font-weight: normal; color: #fff; }
.gp-bar { position: relative; height: 14px; background: #04040c; border: 2px solid #04040c; box-shadow: inset 0 0 0 1px #3a2a8a; }
.gp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #e0961c, #ffe070); box-shadow: 0 0 10px rgba(255,200,80,0.5); }
.gp.myth .gp-bar i { background: linear-gradient(90deg, #ff3030, #ff9a20, #ffe830, #40e060, #30b0ff, #7a50ff, #ff40c0); box-shadow: 0 0 10px rgba(200,120,255,0.5); }
.gp-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 7px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.gh-btns { display: flex; gap: 10px; }
.gh-btns .btn.spin { min-width: 200px; }
.gh-main .btn.spin { background: linear-gradient(#5a3ad8, #2a1a7a); box-shadow: inset 0 0 0 2px #9a8aff, inset 0 -4px 0 2px #1a0a4a, 0 4px 0 #04040c; }
.gh-main .btn.spin.gold { background: linear-gradient(#ffcf40, #c08010); color: #2a1004; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); box-shadow: inset 0 0 0 2px #fff0a0, inset 0 -4px 0 2px #7a4a08, 0 4px 0 #04040c; }
.gh-main .btn.spin.gold small { color: #4a2a04; }
.gh-odds { position: absolute; right: 12px; bottom: -22px; font-family: inherit; font-size: 7px; color: #b8b0ff; background: rgba(4,4,12,0.85); border: 2px solid #04040c; padding: 4px 8px; cursor: pointer; }
.gh-odds:hover { color: #fff; }
.gr-panel .gh-odds { position: static; align-self: center; }
.gh-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(900px, 100%); margin-top: 14px; }
.gh-sub { position: relative; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; padding: 10px 12px; font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; border: 3px solid #0e0603; transition: transform 0.12s, box-shadow 0.15s; overflow: hidden; }
.gh-sub.cos { background: radial-gradient(ellipse at 20% 50%, rgba(255,60,220,0.25), transparent 60%), linear-gradient(#1a0820, #0c0412); box-shadow: inset 0 0 0 2px #a02a9a, 0 5px 0 #0e0603; }
.gh-sub.st { background: radial-gradient(ellipse at 20% 50%, rgba(60,220,255,0.22), transparent 60%), linear-gradient(#081a20, #040c12); box-shadow: inset 0 0 0 2px #2a8aa0, 0 5px 0 #0e0603; }
.gh-sub:hover { transform: translateY(-4px); }
.gh-sub.cos:hover { box-shadow: inset 0 0 0 2px #ff6af4, 0 9px 0 #0e0603, 0 0 26px rgba(255,80,230,0.35); }
.gh-sub.st:hover { box-shadow: inset 0 0 0 2px #6ae8ff, 0 9px 0 #0e0603, 0 0 26px rgba(80,220,255,0.35); }
.gs-art { position: relative; height: 92px; }
.gs-th, .gs-stk { position: absolute; display: block; width: 72px; height: 72px; background: center / contain no-repeat; image-rendering: pixelated; }
.gs-th.a, .gs-stk.a { left: 0; top: 14px; transform: rotate(-8deg); }
.gs-th.b, .gs-stk.b { left: 40px; top: 0; z-index: 1; width: 80px; height: 80px; }
.gs-th.c, .gs-stk.c { left: 82px; top: 16px; transform: rotate(8deg); }
.gs-th .ava2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gs-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-t b { font-weight: normal; font-size: 14px; text-shadow: 2px 2px 0 #000; }
.gh-sub.cos .gs-t b { color: #ff9af4; }
.gh-sub.st .gs-t b { color: #8ae8ff; }
.gs-t span { font-size: 7px; line-height: 1.6; color: var(--dim); }
.gs-p { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.gs-p span { font-size: 6px; color: var(--dim); }
.gs-p i { position: relative; display: block; height: 8px; background: #04040c; border: 2px solid #04040c; }
.gs-p s { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #a8642e, #ffd060); }
.gs-cost { position: absolute; top: 8px; right: 10px; display: flex; align-items: center; font-style: normal; font-size: 11px; color: var(--gold); text-shadow: var(--sh); }
.gr { position: absolute; inset: 0; pointer-events: none !important; }
.gr > * { pointer-events: auto; }
.gr-back { position: absolute; left: 120px; top: 76px; }
.gr-panel { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); width: min(640px, 90vw); display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; background: rgba(8,6,14,0.88); border: 3px solid #04040c; box-shadow: inset 0 0 0 2px #3a2a5a, 0 6px 0 #04040c; }
.gr-title b { display: block; font-weight: normal; font-size: 18px; color: #fff; text-shadow: 3px 3px 0 #000; }
.gr-title span { display: block; font-size: 7px; color: var(--dim); margin-top: 6px; }
.gr-panel .gh-btns { justify-content: center; }
.g-toggles { bottom: 3vh; }
body:has(#g-hub:not(.hidden)) .g-toggles { bottom: 3vh; width: 200px; }
@media (max-height: 820px) {
  .gf-ball { width: 84px; height: 84px; }
  .gf.big .gf-ball { width: 124px; height: 124px; }
  .gs-art { height: 70px; }
  .gs-th, .gs-stk { width: 56px; height: 56px; }
  .gs-th.b, .gs-stk.b { width: 62px; height: 62px; left: 34px; }
  .gs-th.c, .gs-stk.c { left: 70px; }
  .gh-sub { grid-template-columns: 124px 1fr; }
}

.wd-rail { padding: 8px; gap: 10px; }
.wd-me { margin: 0; }
.wd-gp { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(0,0,0,0.28); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.wd-gp h4 { font-weight: normal; font-size: 7px; color: var(--gold); letter-spacing: 3px; padding: 0 2px 4px; border-bottom: 2px solid #2a1408; }
.wd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wd-btns .wd-cat { flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 9px 4px 8px; text-align: center; background: linear-gradient(#24140a, #140a06); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, inset 0 -3px 0 0 #0e0603, 0 3px 0 #0e0603; color: #b49a78; }
.wd-btns .wd-cat b { font-weight: normal; font-size: 7px; color: var(--ink); text-shadow: var(--sh); white-space: nowrap; }
.wd-btns .wd-cat em { font-style: normal; font-size: 6px; color: var(--dim); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.wd-btns .wd-cat .cat-ico { width: 30px; height: 30px; }
.wd-btns .wd-cat:hover { padding-left: 4px; transform: translateY(-2px); box-shadow: inset 0 0 0 2px #a8642e, inset 0 -3px 0 0 #0e0603, 0 5px 0 #0e0603; color: var(--ink); background: linear-gradient(#2e1a0c, #160c06); }
.wd-btns .wd-cat.on { color: #fff; background: linear-gradient(#c8441e, #6a1608); box-shadow: inset 0 0 0 2px #ff8a50, inset 0 -3px 0 0 #4a0c04, 0 3px 0 #0e0603, 0 0 14px rgba(255,100,40,0.3); }
.wd-btns .wd-cat.on em { color: var(--gold); }
.wd-btns .wd-cat:only-child { grid-column: 1 / -1; }


#pmodal { position: fixed; inset: 0; z-index: 36; display: flex; align-items: center; justify-content: center; background: rgba(4,2,1,0.82); animation: fadeIn 0.2s; }
.pm2 { position: relative; display: grid; grid-template-columns: 320px 440px; gap: 18px; padding: 18px; background: var(--pn-bg); border: 3px solid #0e0603; box-shadow: var(--pn-sh); animation: it3In 0.25s; }
.pm2-x { position: absolute; top: -14px; right: -10px; }
.pm2-card { display: flex; align-items: center; justify-content: center; perspective: 900px; }
.pm2-card .xcard { transform: none; }
.pm2-info { display: flex; flex-direction: column; gap: 10px; }
.pm2-info .cap { text-align: left; }
.pm2-sts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pm2-st { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; padding: 8px; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.pm2-st span { width: 100%; font-size: 6px; color: var(--dim); margin-bottom: 4px; }
.pm2-st b { font-weight: normal; font-size: 12px; text-shadow: var(--sh); }
.pm2-st b.w { color: var(--green); }
.pm2-st b.l { color: var(--red); }
.pm2-st i { font-style: normal; font-size: 9px; color: var(--dim); }
.pm2-cs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pm2-c { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.pm2-c span { font-size: 6px; color: var(--dim); }
.pm2-c b { font-weight: normal; font-size: 11px; color: var(--gold); text-shadow: var(--sh); }
.pm2-c i { position: relative; display: block; height: 6px; background: #0a0402; border: 1px solid #0e0603; }
.pm2-c s { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.pm2-eqs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pm2-eq { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; text-align: center; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 50%, #0e0603); }
.pm2-th { width: 76px; height: 64px; display: flex; align-items: center; justify-content: center; }
.pm2-th img { width: 64px; height: 64px; image-rendering: pixelated; }
.pm2-th .tl-ban { width: 70px; height: 40px; }
.pm2-th .tl-card { transform: scale(0.75); }
.pm2-th .tl-font { font-size: 22px; }
.pm2-eq em { font-style: normal; font-size: 6px; color: var(--dim); }
.pm2-eq b { font-weight: normal; font-size: 7px; color: var(--ink); line-height: 1.4; }
.frx-grid .fr-row .pcard { cursor: pointer; }
.rx-off { height: 128px; }
.mp-ban::after { background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55)); }
.mp.op .mp-ban::after { background: linear-gradient(270deg, rgba(0,0,0,0.7), rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55)); }
@media (max-height: 760px) { .rx-off { height: 108px; } }
.pop.big-hit { font-size: 18px; color: #fff; text-shadow: 3px 3px 0 #c8441e, 5px 5px 0 #000; animation: mog 1s ease-out forwards; }

.gh { justify-content: center; top: 64px; padding-bottom: 10px; }
.gh-subs { margin-top: 6px; }
.gh-btnc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gsw.gh-fast { padding: 6px 10px; background: rgba(4,4,12,0.75); border: 2px solid #04040c; box-shadow: inset 0 0 0 2px #3a2a8a; }
.gsw.gh-fast span { font-size: 8px; }
.gsw.gh-fast small { font-size: 6px; }
.gr-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.gr-back { left: 50% !important; transform: translateX(-50%); top: 76px; }
.mp-c { box-shadow: 0 0 0 2px #0e0603, 0 0 0 3px var(--rc, #a8642e), 0 0 8px var(--rc, transparent); }
.gr-back:hover:not(:disabled) { transform: translateX(-50%) translateY(-2px); }

#vs { background: none !important; gap: 0 !important; overflow: hidden; }
.vs2-bg { position: absolute; top: 0; bottom: 0; width: 56%; overflow: hidden; }
.vs2-bg.me { left: -3%; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); background: linear-gradient(135deg, rgba(14,70,30,0.97), rgba(6,26,12,0.97)); }
.vs2-bg.op { right: -3%; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(225deg, rgba(90,16,12,0.97), rgba(30,6,4,0.97)); }
.vs2-bg i { position: absolute; inset: -50%; background: repeating-linear-gradient(105deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 28px); animation: vsLines 0.6s linear infinite; }
.vs2-bg.op i { animation-direction: reverse; }
@keyframes vsLines { to { transform: translateX(28px); } }
.vs2-cut { position: absolute; left: 50%; top: -10%; bottom: -10%; width: 10px; transform: translateX(-50%) rotate(6deg); background: #fff; box-shadow: 0 0 0 4px #0e0603, 0 0 40px 10px rgba(255,220,140,0.6); }
.vs2-side { position: relative; z-index: 2; width: min(34vw, 380px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 0 2vw; }
.vs2-plate { margin-bottom: 6px; }
.vs2-ball { position: relative; width: min(22vw, 230px); aspect-ratio: 1; }
.vs2-ring { position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, var(--rc), transparent 30%, var(--rc) 50%, transparent 80%, var(--rc)); animation: cosSpin 3s linear infinite; opacity: 0.8; -webkit-mask: radial-gradient(circle, transparent 58%, #000 60% 70%, transparent 71%); mask: radial-gradient(circle, transparent 58%, #000 60% 70%, transparent 71%); }
.vs2-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent), transparent 60%); animation: vsGlow 1.6s ease-in-out infinite; }
.vs2-th { position: absolute; inset: 0; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 10px 0 rgba(0,0,0,0.5)); }
.vs2-tags { display: flex; gap: 8px; margin-top: 6px; }
.vs2-tags span { font-size: 8px; padding: 4px 8px; border: 2px solid #0e0603; text-shadow: 1px 1px 0 #000; }
.vs2-tags .t1 { background: var(--rc); color: #fff; }
.vs2-tags .t2 { background: #0e0603; color: var(--dim); }
.vs2-nm { font-size: clamp(18px, 2.4vw, 30px); color: #fff; line-height: 1.15; text-shadow: 4px 4px 0 #000, 0 0 20px color-mix(in srgb, var(--rc) 70%, transparent); transform: skewX(-8deg); }
.vs2-bars { display: flex; flex-direction: column; gap: 6px; width: 86%; }
.vs2-bars > div { display: grid; grid-template-columns: 44px 1fr 48px; align-items: center; gap: 8px; font-size: 8px; }
.vs2-bars span { color: var(--dim); text-align: left; }
.vs2-bars i { position: relative; display: block; height: 10px; background: rgba(0,0,0,0.55); border: 2px solid #0e0603; }
.vs2-bars s { position: absolute; left: 0; top: 0; bottom: 0; }
.vs2-bars .hp s { background: linear-gradient(90deg, #2a9a3a, #7af08a); }
.vs2-bars .at s { background: linear-gradient(90deg, #c06010, #ffb040); }
.vs2-bars b { font-weight: normal; font-size: 11px; text-align: right; }
.vs2-bars .hp b { color: #7af08a; }
.vs2-bars .at b { color: #ffb040; }
.vs2-ab { font-size: 8px; line-height: 1.7; color: var(--ink); max-width: 320px; text-shadow: var(--sh); background: rgba(0,0,0,0.4); border: 2px solid rgba(0,0,0,0.5); padding: 6px 10px; }
.vs2-ab b { display: block; font-weight: normal; color: var(--gold); margin-bottom: 2px; }
.vs2-mid { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vs2-t { font-size: clamp(70px, 10vw, 140px); color: #fff; line-height: 1; text-shadow: 6px 6px 0 #c8441e, 12px 12px 0 #000, 0 0 40px rgba(255,200,80,0.6); transform: skewX(-10deg); }
.vs2-rnd { font-size: 14px; color: var(--gold); text-shadow: 3px 3px 0 #000; background: #0e0603; padding: 6px 12px; border: 2px solid #6a3a1a; }
.vs2-ar { font-size: 9px; color: var(--dim); letter-spacing: 3px; text-shadow: var(--sh); }
#vs.in .vs2-bg.me { animation: vsBgL 0.35s cubic-bezier(.2,1.2,.4,1) backwards; }
#vs.in .vs2-bg.op { animation: vsBgR 0.35s cubic-bezier(.2,1.2,.4,1) backwards; }
#vs.in .vs2-side.me { animation: vsL 0.5s cubic-bezier(.2,1.4,.4,1) 0.1s backwards; }
#vs.in .vs2-side.op { animation: vsR 0.5s cubic-bezier(.2,1.4,.4,1) 0.18s backwards; }
#vs.in .vs2-t { animation: vsSlam 0.4s cubic-bezier(.3,1.6,.5,1) 0.4s backwards; }
#vs.in .vs2-cut { animation: vsCut 0.3s ease-out 0.35s backwards; }
@keyframes vsBgL { from { transform: translateX(-100%); } }
@keyframes vsBgR { from { transform: translateX(100%); } }
@keyframes vsCut { from { transform: translateX(-50%) rotate(6deg) scaleY(0); } }
@media (max-height: 760px) { .vs2-ab { display: none; } .vs2-ball { width: min(18vw, 170px); } }
@keyframes vsGlow { 50% { opacity: 0.6; transform: scale(1.12); } }
.ava2 .afr { filter: none; }
.vs2-th { filter: none; }

.tabs.dock { top: 50% !important; transform: translateY(-50%); }
.tabs.dock.right { position: fixed !important; left: auto; right: 14px; z-index: 21; }
#rside #party { width: 330px; }
@media (max-height: 880px) { #rside { right: 116px; } }
@media (max-height: 880px) and (max-width: 1400px) { #rside #party { width: 280px; } }
.gh-tl { display: flex; align-items: center; gap: 12px; }
.gh-tl .gh-odds { position: static !important; transform: none; font-size: 8px; padding: 5px 9px; box-shadow: inset 0 0 0 1px #3a2a8a; }
.gr-title .gh-tl b { margin: 0; }
.gh-btnc .gh-fast, .gr-row .gh-fast { align-self: center; }
.gh-btns { align-items: flex-start; }
.gh-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gh-col .gh-fast { align-self: center; }
.gf { cursor: pointer; transition: transform 0.14s, box-shadow 0.16s, background 0.16s; }
.gf-ball { transition: transform 0.18s cubic-bezier(.3,1.6,.5,1); }
.gf-ball::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; box-shadow: 0 0 0 3px var(--rc), 0 0 24px 4px var(--rc); opacity: 0; transition: opacity 0.16s; pointer-events: none; }
.gf:hover { transform: translateY(-6px); background: linear-gradient(color-mix(in srgb, var(--rc) 22%, transparent), rgba(0,0,0,0.45)); box-shadow: inset 0 0 0 3px var(--rc), 0 8px 0 #04040c, 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent); }
.gf:hover .gf-ball { transform: scale(1.1); }
.gf:hover .gf-ball::after { opacity: 1; }
.gf:hover .gf-glow { opacity: 1; animation-duration: 0.9s; }
.gf:hover .gf-nm { color: var(--gold); }

.sh-main { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
.sh-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.sh-it { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 16px 14px 12px; text-align: left; }
.sh-it .it3-pv { flex: none; width: 124px; height: 100%; max-height: 132px; min-height: 0; }
.sh-it .it3-pv .tl-img { width: 112px; height: 112px; }
.sh-it .it3-pv .st-m { width: 108px; height: 108px; }
.sh-glow { left: 74px; top: 50%; width: 190px; height: 190px; }
.sh-tx { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sh-tx .sh-nm { text-align: left; font-size: 13px; }
.sh-rar { font-size: 7px; color: var(--rc); filter: brightness(1.35); letter-spacing: 1px; }
.sh-it .sh-price { align-self: center; font-size: 12px; padding: 6px 10px 6px 8px; }
.sh-tx .sh-type, .sh-tx .sh-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-it .sh-price { align-self: flex-start; margin-top: 4px; }
@media (max-width: 1400px) { .sh-it .it3-pv { width: 96px; } .sh-it .it3-pv .tl-img { width: 92px; height: 92px; } .sh-it .it3-pv .st-m { width: 88px; height: 88px; } .sh-tx .sh-nm { font-size: 11px; } }

#pmini { position: absolute; right: calc(100% + 12px); top: 0; width: 230px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(14,6,3,0.9); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 4px 0 #0e0603; }
#pmini.hidden { display: none !important; }
.pmi-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 4px; border-bottom: 2px solid #2a1408; }
.pmi-h b { font-weight: normal; font-size: 9px; color: var(--gold); text-shadow: var(--sh); letter-spacing: 2px; }
.pmi-h span { font-size: 7px; color: var(--dim); }
.pmi { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; background: rgba(0,0,0,0.4); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.pmi .ava2 { margin-left: 2px; }
.pmi-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 9px; white-space: nowrap; overflow: hidden; filter: drop-shadow(1px 1px 0 #000); }
.pmi-n em { font-style: normal; font-size: 6px; color: var(--dim); }
.pmi-c { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 2px solid #0e0603; background: #1a0c06; box-shadow: inset 0 0 0 2px #3a2414; }
.pmi-c svg { width: 14px; height: 14px; fill: #0e2a14; }
.pmi.ready { box-shadow: inset 0 0 0 2px #2a8a40; }
.pmi.ready .pmi-c { background: var(--green); box-shadow: none; }
.pmi.off { opacity: 0.5; }
.pmi.wait { justify-content: center; border-style: dashed; border-color: #3a2414; box-shadow: none; background: none; }
.pmi.wait .pmi-n { flex: none; color: var(--dim); font-size: 7px; }
.pmi-x { align-self: flex-end; font-family: inherit; font-size: 7px; color: var(--dim); background: #1a0c06; border: 2px solid #0e0603; padding: 4px 8px; cursor: pointer; }
.pmi-x:hover { color: #ffa090; background: #2a0c08; }

#lobby #tab-shop.on, #lobby #tab-coll.on, #lobby #tab-profile.on, #lobby #tab-friends.on, #lobby #tab-ach.on { justify-content: center; padding-top: 0; padding-bottom: 0; }
.wd, .sh, .cl, .frx, .achx { height: min(720px, calc(100vh - 150px)) !important; }
.wd, .cl { width: min(1320px, 100%) !important; }
.sh { width: min(1240px, 100%) !important; }
.frx, .achx { width: min(1240px, 100%) !important; }

.rx-sell.b { margin-top: auto; }
.rx-left .rx-sell, .rx-right .rx-sell.b { display: block !important; }
.rgx.drag-ball .rx-sell.b, .rgx.drag-inv .rx-sell:not(.b), .rgx.drag-placed .rx-sell:not(.b) { opacity: 0.25 !important; border-color: #3a1a10 !important; background: none !important; }
.rgx.drag-inv .rx-sell.b, .rgx.drag-placed .rx-sell.b { opacity: 1; border-color: #a01808; background: rgba(160,24,8,0.15); }
.sdot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #5a4a3a; border: 1px solid #0e0603; vertical-align: 0; }
.sdot.o { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sdot.p { background: #6ac8ff; box-shadow: 0 0 6px #6ac8ff; }
.sdot.m { background: #ffa040; box-shadow: 0 0 6px #ffa040; animation: pulseGlow 1s infinite; }
.fr-row.st-match .pm-s { color: #ffb060; }
.fr-row.st-party .pm-s { color: #8ad0ff; }
.fr-row.st-on .pm-s { color: var(--green); }
.mp[data-pid], .pmi[data-pid] { cursor: pointer; }
.mp[data-pid]:hover, .pmi[data-pid]:hover { filter: brightness(1.18); }
#pmodal { z-index: 45; }
.pm2-th { overflow: visible; }
#lobby .tab-pane { bottom: 70px !important; }
.wd, .sh, .cl, .frx, .achx { height: min(760px, calc(100vh - 170px)) !important; }
.pmi-fx { display: flex; gap: 3px; }
.pmi-fx .mp-c { width: 20px; height: 20px; }
#pmini { width: 270px; }
.tabs.dock #pmini button.pmi-x { width: auto; height: auto; display: inline-block; padding: 4px 8px; font-size: 7px; gap: 0; color: var(--dim); background: #1a0c06; border: 2px solid #0e0603; box-shadow: none; transform: none; text-shadow: none; }
.tabs.dock #pmini button.pmi-x:hover { color: #ffa090; background: #2a0c08; }
.tabs.dock #pmini button.pmi-x::after { display: none; }

.pcard::after { content: ""; position: absolute; inset: 0; box-shadow: inherit; pointer-events: none; z-index: 3; }
.pcard .ava2 { margin: 6px 4px 2px 6px; }
.pmi { position: relative; height: 44px; border: 3px solid #0e0603; overflow: visible; }
.pmi-ban { position: absolute; inset: 3px; z-index: 0; overflow: hidden; }
.pmi-ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.6)); }
.pmi > .ava2, .pmi-n, .pmi-fx, .pmi-c { position: relative; z-index: 1; }
.pmi.ready { outline: 2px solid var(--green); outline-offset: 1px; }
.pmi.wait { border-style: dashed; }
.pcard { overflow: visible; }
.rx-off.charged { box-shadow: inset 0 0 0 2px var(--green), 0 4px 0 #0e0603, 0 0 14px rgba(77,255,128,0.35); }
.rx-off.charged .rx-price { background: var(--green); color: #0e2a14; font-size: 8px; }
.pcards { display: flex; gap: 3px; flex-wrap: wrap; }
.pcards i { display: block; width: 16px; height: 22px; background-size: cover; background-position: center; image-rendering: pixelated; border: 1px solid #0e0603; box-shadow: 0 0 0 1px var(--rc), 0 2px 0 #000; }
.plate.op .prow { flex-direction: row-reverse; }
#hud.multi .plate .pbuffs { display: flex; gap: 3px; flex-wrap: wrap; }
#hud.multi .plate .pbuffs .chip { font-size: 6px; padding: 2px 4px 2px 2px; }
#hud.multi .plate .pbuffs .chip i { width: 10px; height: 10px; }
#hud.multi .plate .pbuffs { flex-direction: row; }
#hud.multi .plate .pbuffs .chip { min-width: 0; gap: 4px; border-left-width: 2px; }
.rx-disc.still { animation: none; }
.rx-disc.still .rx-dc { animation: none; }
#rx-opst { display: contents; }

.stx { display: flex; flex-direction: column; gap: 8px; }
.stx-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.stx-tabs button { font-family: inherit; font-size: 8px; padding: 7px 4px; color: var(--dim); cursor: pointer; background: #140a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.stx-tabs button:hover { color: var(--ink); }
.stx-tabs button.on { color: #fff; background: linear-gradient(#c8441e, #6a1608); box-shadow: inset 0 0 0 2px #ff8a50; }
.stx-pane { display: none; flex-direction: column; gap: 6px; }
.stx-pane.on { display: flex; }
.stx-row { display: grid; grid-template-columns: 1fr auto auto auto 54px; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(0,0,0,0.38); border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; position: relative; }
.stx-row span { font-size: 8px; color: var(--dim); }
.stx-row b { font-weight: normal; font-size: 13px; text-shadow: var(--sh); }
.stx-row b.w { color: var(--green); }
.stx-row b.l { color: var(--red); }
.stx-row i { font-style: normal; font-size: 9px; color: var(--dim); }
.stx-row em { font-style: normal; font-size: 8px; color: var(--gold); text-align: right; }
.stx-row s { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 3px; background: rgba(255,74,58,0.35); }
.stx-row s u { display: block; height: 100%; background: var(--green); }
.mp-ban::after, .mp.op .mp-ban::after { background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.22)) !important; }
.pmi-ban::after { background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.22)) !important; }
.mp-nk, .pmi-n { filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(2px 2px 0 #000) !important; }
.mp-tag, .pmi-n em { text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }

#boot { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; background: radial-gradient(ellipse at 50% 40%, #2a1208 0%, #0e0603 70%); transition: opacity 0.5s; }
#boot.out { opacity: 0; pointer-events: none; }
.bt-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; transform: rotate(-3deg); gap: 10px; }
.bt-logo .l1 { font-size: clamp(40px, 8vw, 88px); color: var(--ink); text-shadow: 5px 5px 0 #6a1608, 9px 9px 0 #0e0603; }
.bt-logo .l2 { font-size: clamp(30px, 6vw, 66px); color: #ff5a2a; text-shadow: 4px 4px 0 #3a0804, 8px 8px 0 #0e0603; animation: wob 1.6s ease-in-out infinite; }
.bt-bar { width: min(460px, 70vw); height: 22px; padding: 4px; background: #140a06; border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 4px 0 #0e0603; }
.bt-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ff5a2a 0 10px, #c8441e 10px 14px); box-shadow: 0 0 12px rgba(255,90,42,0.5); transition: width 0.25s steps(6); }
.bt-t { font-size: 10px; color: var(--dim); letter-spacing: 3px; }
.stx-row { grid-template-columns: 1fr auto auto auto 70px; }
.stx-row em { white-space: nowrap; font-size: 7px; }
.rx-off.charged .rx-price { background: #1a0c06; color: var(--gold); font-size: inherit; }
.rx-free { position: absolute; left: 4px; right: 4px; top: 4px; font-size: 6px; text-align: center; padding: 3px 2px; background: var(--green); color: #0e2a14; z-index: 3; box-shadow: 0 2px 0 #0e0603; }
.rx-off.card { position: relative; }
.rx-odeck i.hid { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #3a2414 0 3px, #24140a 3px 6px); --rc: #6a4a2a; }
.rx-odeck i.hid b { font-weight: normal; font-size: 9px; color: #c8a070; text-shadow: 1px 1px 0 #000; }
.rx-odeck i.hid.rr { --rc: var(--gold); }
.rx-odeck i.hid.rr b { color: var(--gold); font-size: 12px; }
.rx-odeck i.hid svg { width: 12px; height: 12px; fill: var(--gold); }
.wh-ghost { position: fixed; z-index: 120; width: 84px; height: 84px; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; border-radius: 50%; background: rgba(0,0,0,0.45); box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc), 0 10px 24px rgba(0,0,0,0.6); }
.wh-ghost i { position: absolute; inset: 6px; display: block; }
body.wh-drag, body.wh-drag * { cursor: grabbing !important; user-select: none; }
body.wh-drag .wh-slot { box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--rc, #6a4a2a), 0 0 14px rgba(255,208,96,0.35); }
body.wh-drag .wh-slot em { opacity: 0 !important; }
.wh-slot.hov { transform: translate(-50%, -50%) scale(1.18) !important; box-shadow: 0 0 0 3px #0e0603, 0 0 0 6px var(--gold), 0 0 26px var(--gold) !important; }
.wd-grid.st .it3 { cursor: grab; touch-action: none; }
.wd-grid.st .it3.dragging { opacity: 0.35; }
.rx-free { right: 32px !important; left: 4px; }
#rx-mest, .rx-rdy { display: contents; }
#hud.multi .plate .abl { display: block !important; font-size: 7px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(380px, 30vw); }
#hud.multi .plate.op .abl { margin-left: auto; }
.rx-off.fav { box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 #0e0603, 0 0 16px rgba(255,208,96,0.45); }
.rx-star { position: absolute; left: 4px; top: 4px; z-index: 4; width: 18px; height: 18px; display: grid; place-items: center; background: #0e0603; box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255,208,96,0.6); }
.rx-star svg { width: 12px; height: 12px; fill: var(--gold); }
.acc-t .acc-set { font-size: 7px; color: #ff7ad8; margin-top: 3px; text-shadow: 1px 1px 0 #000; }

.tl-set { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 78px; height: 74px; padding: 0 0 6px; overflow: hidden; border: 2px solid #0e0603; }
.tl-set-b { position: absolute; left: 0; right: 0; top: 0; height: 30px; }
.tl-set .ava2 { position: relative; z-index: 1; }
.tl-set-n { position: relative; z-index: 1; font-size: 9px; white-space: nowrap; }
.wd-grid.sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wd-grid.sets .it3 { min-height: 132px; }
.wd-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 380px; margin-top: 6px; }
.wd-parts span { font-size: 6px; color: var(--dim); background: rgba(0,0,0,0.45); border: 1px solid #2a1408; padding: 3px 5px; display: flex; gap: 4px; }
.wd-parts b { font-weight: normal; color: var(--ink); }

#sandbox { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 70px 24px 24px; background: radial-gradient(ellipse at 50% 40%, rgba(20,10,6,0.55), rgba(7,5,4,0.88)); }
#sandbox.hidden { display: none; }
.sbx { width: min(1100px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 16px; background: rgba(14,6,3,0.92); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 6px 0 #0e0603; }
.sbx-h { display: flex; align-items: baseline; gap: 14px; }
.sbx-h b { font-weight: normal; font-size: 20px; color: var(--gold); text-shadow: var(--sh); }
.sbx-h span { flex: 1; font-size: 8px; color: var(--dim); }
.sbx-vs { display: flex; align-items: center; gap: 14px; }
.sbx-x { font-size: 22px; color: var(--red); text-shadow: var(--sh); }
.sbx-slot { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-family: inherit; text-align: left; cursor: pointer; color: var(--ink); background: #140a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414; }
.sbx-slot.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 16px rgba(255,208,96,0.35); }
.sbx-slot i { width: 64px; height: 64px; flex: none; border-radius: 50%; background: center / cover; image-rendering: pixelated; box-shadow: 0 0 0 3px #0e0603, 0 0 0 5px var(--rc); }
.sbx-slot div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sbx-slot em { font-style: normal; font-size: 7px; color: var(--dim); }
.sbx-slot b { font-weight: normal; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-slot span { font-size: 7px; color: var(--rc); filter: brightness(1.3); }
.sbx-slot.op b { color: #ffb0a0; }
.sbx-slot.me b { color: #9fffb8; }
.sbx-ar { display: flex; flex-wrap: wrap; gap: 5px; }
.sbx-ar button { font-family: inherit; font-size: 8px; padding: 6px 9px; cursor: pointer; color: var(--dim); background: #140a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.sbx-ar button.on { color: #fff; background: linear-gradient(#c8441e, #6a1608); box-shadow: inset 0 0 0 2px #ff8a50; }
.sbx-pick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.sbx-ph { display: flex; align-items: center; gap: 12px; }
.sbx-ph span { flex: 1; font-size: 10px; color: var(--gold); }
.sbx-ph input { width: 220px; font-size: 11px; padding: 7px 10px; }
.sbx-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; padding: 4px; }
.sbx-b { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; font-family: inherit; cursor: pointer; color: var(--ink); background: #120a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px #2a1408; }
.sbx-b:hover { box-shadow: inset 0 0 0 2px var(--rc); transform: translateY(-2px); }
.sbx-b.on { box-shadow: inset 0 0 0 3px var(--gold); background: #2a1608; }
.sbx-b i { width: 54px; height: 54px; border-radius: 50%; background: center / cover; image-rendering: pixelated; box-shadow: 0 0 0 2px #0e0603, 0 0 0 4px var(--rc); }
.sbx-b span { font-size: 7px; line-height: 1.3; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sbx-go { align-self: center; min-width: 280px; }
#sbx-panel { position: fixed; right: 14px; bottom: 14px; z-index: 30; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(14,6,3,0.9); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 4px 0 #0e0603; }
.sbp-h { display: flex; align-items: center; justify-content: space-between; }
.sbp-h b { font-weight: normal; font-size: 10px; color: var(--gold); }
.sbp-sp { display: flex; gap: 4px; }
.sbp-sp button { font-family: inherit; font-size: 8px; padding: 4px 7px; cursor: pointer; color: var(--dim); background: #140a06; border: 2px solid #0e0603; }
.sbp-sp button.on { color: #fff; background: #6a1608; }
.sbp-cap { font-size: 7px; color: var(--dim); }
.sbp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-height: 180px; overflow-y: auto; }
.sbp-grid button { aspect-ratio: 1; padding: 3px; cursor: pointer; background: #120a06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 2px var(--rc); }
.sbp-grid button:hover { transform: scale(1.1); }
.sbp-grid i { display: block; width: 100%; height: 100%; background: center / cover; image-rendering: pixelated; }
.sbp-btns { display: flex; gap: 5px; }
.sbp-btns .btn { flex: 1; font-size: 8px; padding: 7px 4px; }
body.gs-cine #sbx-panel { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
@media (max-height: 600px) {
  #sbx-panel { width: 250px; gap: 6px; padding: 8px; }
  .sbp-grid { grid-template-columns: repeat(7, 1fr); max-height: 92px; gap: 4px; }
  .sbx-slot i { width: 46px; height: 46px; }
}
.play-btns #btn-sbx { align-self: center; min-width: 200px; }
.sbp-dps { font-size: 8px; color: #ffd060; text-shadow: var(--out); padding: 4px 0; border-bottom: 2px solid #2a1408; }
.lvb { display: inline-flex; align-items: baseline; gap: 3px; font-family: 'PS2P', monospace; font-size: 8px; line-height: 1; font-weight: normal; font-style: normal; color: var(--gold); background: #1a0c06; border: 2px solid #0e0603; box-shadow: inset 0 0 0 1px #a8642e; padding: 2px 4px; text-shadow: 1px 1px 0 #000; white-space: nowrap; vertical-align: middle; filter: none; }
.lvb i { font-style: normal; color: var(--dim); }
.lvb.big { font-size: 12px; padding: 4px 7px; border-width: 3px; box-shadow: inset 0 0 0 2px #a8642e, 0 3px 0 #0e0603; gap: 5px; }
.lvb.big i { font-size: 8px; }
.lvb.up { animation: bump 0.4s ease-out; }
.xpb { display: block; position: relative; width: 100%; height: 4px; background: #0e0603; box-shadow: inset 0 0 0 1px #3a2414; overflow: hidden; }
.xpb i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#4dff80, #2a8a40); box-shadow: 0 0 6px rgba(77,255,128,0.5); }
.mp-lv, .pc-lv { display: flex; line-height: 1; }
.mp.op .mp-lv { justify-content: flex-end; }
.xc-lv { margin-top: 10px; transform: translateZ(30px); }
.pmi-l { display: flex; align-items: center; gap: 5px; line-height: 1; }
.pmi-l .lvb { font-size: 8px; padding: 1px 3px; }
#tb-me .tb-txt { gap: 4px; align-items: stretch; }
.tb-row { display: flex; align-items: center; gap: 10px; }
#tb-xp { display: block; }
#tb-xp .xpb { height: 4px; }
.chat-row b .lvb { margin: 0 4px 0 6px; vertical-align: 2px; }
.frx-me .lvb { font-size: 8px; color: var(--gold); margin-left: 8px; vertical-align: 3px; }
.wd-me .lvb { margin-top: 5px; }
.wd-lvr { display: flex; align-items: center; gap: 10px; font-size: 8px; color: var(--dim); margin-bottom: 8px; }
.wd-lvr b { font-weight: normal; color: var(--ink); }
.wd-lvl .xpb { height: 8px; }
.wd-lvl .sub2 { margin-top: 6px; }
.end-pl { display: flex; align-items: center; gap: 16px; }
.end-pl:empty { display: none; }
.end-vs { font-weight: normal; font-size: 14px; color: var(--dim); text-shadow: var(--sh); }
.end-xp { min-height: 24px; display: flex; align-items: center; }
.ex-r { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.ex-r .xpb { width: 220px; height: 10px; box-shadow: inset 0 0 0 2px #3a2414; border: 2px solid #0e0603; }
.ex-r b { font-weight: normal; color: var(--green); text-shadow: var(--sh); }
.rx-rpl { display: flex; gap: 18px; justify-content: center; }
#lvup { position: fixed; inset: 0; z-index: 31; display: none; place-items: center; pointer-events: none; }
#lvup.on { display: grid; }
.lu-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 90px; background: linear-gradient(90deg, transparent, rgba(14,6,3,0.94) 15%, rgba(14,6,3,0.94) 85%, transparent); }
#lvup.on .lu-box { animation: strip 0.25s ease-out, luOut 0.4s ease-in 2.4s forwards; }
.lu-t { font-size: clamp(22px, 4vw, 44px); color: var(--green); text-shadow: 4px 4px 0 #0e2a14, 7px 7px 0 #000; animation: slam 0.35s ease-out; white-space: nowrap; }
.lu-c { font-size: 16px; color: var(--gold); text-shadow: var(--sh); display: flex; align-items: center; gap: 6px; }
.lu-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(rgba(77,255,128,0.16) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: luSpin 6s linear infinite; z-index: -1; }
@keyframes luSpin { to { transform: rotate(360deg); } }
@keyframes luOut { to { opacity: 0; transform: scale(0.9); } }
.vs2-side.rb .vs2-ring { background: var(--rg); opacity: 0.95; }
.ar-pick { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 0; padding: 6px 12px 6px 6px; font-family: inherit; text-align: left; color: var(--ink); cursor: pointer; background: rgba(14,6,3,0.88); border: 3px solid #0e0603; box-shadow: inset 0 0 0 2px #3a2414, 0 4px 0 #0e0603; transition: transform 0.1s, box-shadow 0.12s; }
.ar-pick:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #a8642e, 0 4px 0 #0e0603; }
.ar-pick:disabled { cursor: default; opacity: 0.85; }
.ar-th { width: 66px; height: 44px; flex: none; background: #1a0e08 center / cover; border: 2px solid #0e0603; box-shadow: 0 0 0 2px #3a2414; image-rendering: pixelated; }
.ar-th.rnd, .arp-th.rnd { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #2a1408 0 8px, #1a0c06 8px 16px); }
.ar-th.rnd::after, .arp-th.rnd::after { content: '?'; font-size: 22px; color: var(--gold); text-shadow: var(--sh); }
.ar-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ar-t b { font-weight: normal; font-size: 11px; color: var(--ink); text-shadow: var(--sh); }
.ar-t .ar-cap { font-style: normal; font-size: 7px; color: var(--dim); margin: 0; display: block; }
.ar-t .ar-name { font-size: 10px; color: var(--gold); text-shadow: var(--sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#arp { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,2,1,0.8); animation: fadeIn 0.15s; }
#arp.hidden { display: none; }
.arp { width: min(980px, 100%); max-height: min(88vh, 860px); display: flex; flex-direction: column; background: #0d0806; border: 2px solid #2a1810; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.arp-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.arp-h b { font-weight: normal; font-size: 9px; letter-spacing: 2px; color: #8a7060; }
.arp-x { width: 26px; height: 26px; font-family: inherit; font-size: 14px; color: #8a7060; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.arp-x:hover { color: var(--ink); background: #1e130d; }
.arp-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.arp-c { display: flex; flex-direction: column; gap: 7px; padding: 8px; font-family: inherit; text-align: left; color: var(--ink); cursor: pointer; background: #150d09; border: 2px solid #2a1810; border-radius: 8px; transition: transform 0.1s, border-color 0.12s; }
.arp-c:hover { transform: translateY(-2px); border-color: #a8642e; }
.arp-c.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(255,208,96,0.25); }
.arp-th { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 5px; background: #1a0e08 center / cover; image-rendering: pixelated; }
.arp-c b { font-weight: normal; font-size: 10px; color: var(--gold); text-shadow: var(--sh); }
.arp-c.on b::after { content: ' · ВЫБРАНА'; color: var(--dim); font-size: 7px; }
.arp-c span { font-size: 7px; line-height: 1.6; color: #b8a28e; }
.tabs .fr-on { position: absolute; top: 4px; right: 4px; min-width: 16px; padding: 3px 4px 2px; font-style: normal; font-size: 8px; text-shadow: none; line-height: 1; text-align: center; color: #0e0603; background: var(--green); border: 2px solid #0e0603; box-shadow: 0 0 8px rgba(80,224,110,0.5); }
.tabs .fr-on.hidden { display: none; }
.tabs .fr-on:not(.hidden) ~ .dot { top: 24px; }
.ar-t .ar-ev { font-size: 7px; line-height: 1.5; color: #b8a28e; white-space: normal; }
.lbl.sm .ln { font-size: 7px; opacity: 0.85; }
.lbl.sm .mini { transform: scale(0.85); transform-origin: center top; }
.chat-row b .nk:not([data-f="ps2p"]) { font-size: 17px; line-height: 1.2; }
.chat-row b .nk[data-f="tiny5"] { font-size: 22px; }
.chat-row b .nk[data-f="handjet"], .chat-row b .nk[data-f="neucha"] { font-size: 24px; }
.chat-row b .nk[data-f="ruslan"], .chat-row b .nk[data-f="champ"] { font-size: 19px; }
.chat-row b .nk[data-f="unbounded"], .chat-row b .nk[data-f="mono"] { font-size: 14px; }
.chat-row b .nk[data-f="pixelify"] { font-size: 21px; }