[data-shop-link][hidden] { display: none !important; }
.main-nav a[data-shop-link]:not([hidden]) { display: block !important; }
.lu-dice-halloween .lu-cube-face .die { padding: calc(var(--lu-d) * .21); border: 1px solid #b97939; border-radius: calc(var(--lu-d) * .14); background: #f58a29 url('/images/cosmetics/halloween-face-v2.webp') center / cover; box-shadow: inset 0 0 0 1px #ffd36b66, inset 0 -3px 0 #56233b55; }
.lu-dice-halloween .die i.on { width: 72%; background: linear-gradient(145deg, #493049, #211428); border-radius: 28%; box-shadow: 0 0 0 1px #ffd77799, 0 1px 2px #4d200a88; }
.lu-dice-halloween .lu-dice-shadow { background: #e9853344; }
.lu-dice-princess .lu-cube-face .die { padding: calc(var(--lu-d) * .21); border: 1px solid #e6b15f; border-radius: calc(var(--lu-d) * .14); background: #ffd1e8 url('/images/cosmetics/princess-face-v2.webp') center / cover; box-shadow: inset 0 0 0 1px #fff5, inset 0 -3px 0 #ac548c44; }
.lu-dice-crystal .lu-cube-face .die { padding: calc(var(--lu-d) * .18); border: 1px solid #d9b860; border-radius: calc(var(--lu-d) * .14); background: #086a74 url('/images/cosmetics/crystal-face-v1.png') center / cover; box-shadow: inset 0 0 0 1px #fff5, inset 0 -3px 0 #002e3e55; }
.lu-dice-crystal .die i.on { width: 65%; background: radial-gradient(circle at 30% 25%, #fffef0, #ffe7a9 60%, #c59138); border-radius: 30%; transform: rotate(45deg); box-shadow: 0 0 0 1px #153f4b, 0 1px 3px #001f36cc; }
.lu-dice-crystal .lu-dice-shadow { background: #21cdd944; }
.lu-dice-frozen .lu-cube-face .die { padding: calc(var(--lu-d) * .18); border: 1px solid #d6f5ff; border-radius: calc(var(--lu-d) * .14); background: #b6e3ff url('/images/cosmetics/frozen-face-v1.png') center / cover; box-shadow: inset 0 0 0 1px #fff9, inset 0 -3px 0 #297aaf44; }
.lu-dice-frozen .die i.on { width: 67%; border-radius: 30%; transform: rotate(45deg); background: linear-gradient(145deg, #174a94, #062356); box-shadow: 0 0 0 1px #eefbffcc, 0 1px 2px #2a649688; }
.lu-dice-frozen .lu-dice-shadow { background: #99e2ff66; }
.lu-dice-frozen .lu-dice-stage::after { content: '❄'; position: absolute; top: -22%; right: -18%; font-size: calc(var(--lu-d) * .3); line-height: 1; color: #f0fbff; text-shadow: 0 0 8px #77cfff; pointer-events: none; }
.cosmetic-preview:is(.lu-dice-halloween, .lu-dice-princess, .lu-dice-crystal, .lu-dice-frozen) .lu-dice-stage { transform: none; }
.cosmetic-preview:is(.lu-dice-halloween, .lu-dice-princess, .lu-dice-crystal, .lu-dice-frozen) .lu-cube { transform: rotateX(-18deg) rotateY(28deg); }
.lu-controls { position: relative; isolation: isolate; }
.lu-controls.lu-freezing::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 100% 0%, #b6eaff55, transparent 65%), linear-gradient(135deg, #dbf7ff11, #72caff22); box-shadow: inset 0 0 0 2px #c3f1ff99, inset 0 0 28px #91dcff44, 0 0 20px #57beff22; animation: lu-panel-freeze 760ms ease-out both; }
.lu-frost-ring, .lu-snowflake { position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 5; }
.lu-frost-ring { width: calc(var(--lu-d) * 1.55); height: calc(var(--lu-d) * 1.55); border: 2px solid #c7f5ff; border-radius: 50%; background: radial-gradient(circle, transparent 45%, #a7e6ff33 70%, transparent); box-shadow: 0 0 14px #70d0ff88, inset 0 0 12px #d1f6ff66; }
.lu-snowflake { font-size: calc(var(--lu-d) * .23); line-height: 1; color: #eafaff; text-shadow: 0 0 6px #6fc8ff; }
@keyframes lu-panel-freeze { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lu-controls.lu-freezing::after, .lu-frost-ring, .lu-snowflake { display: none; animation: none; } }
.lu-dice-princess .die i.on { width: 78%; background: linear-gradient(145deg, #ca327e, #7e164e); border-radius: 0; clip-path: polygon(50% 20%, 65% 5%, 85% 5%, 100% 25%, 100% 45%, 50% 100%, 0% 45%, 0% 25%, 15% 5%, 35% 5%); }
.lu-dice-princess .lu-dice-shadow { background: #ed91c544; }
.lu-pawn-halloween { --lu-pawn-art: url('/images/cosmetics/halloween-pawn-v2.webp'); }
.lu-pawn-princess { --lu-pawn-art: url('/images/cosmetics/princess-pawn-v2.webp'); }
/* Shared sprites in the shop, profile and board. Team rings and numbered badges stay readable. */
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess) { border: 2px solid var(--lu-color); background: var(--lu-soft); box-shadow: 0 2px 4px #0003; overflow: visible; isolation: isolate; }
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess)::before { content: ''; position: absolute; inset: -28% -7% 3%; background: var(--lu-pawn-art) center bottom / contain no-repeat; filter: drop-shadow(0 2px 1px #0005); pointer-events: none; z-index: 1; }
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess)::after { content: ''; position: absolute; inset: auto -3% -2%; height: 26%; border: 2px solid var(--lu-color); border-radius: 50%; background: var(--lu-soft); pointer-events: none; }
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess) > span { position: absolute; bottom: -3px; right: -4px; display: grid; place-items: center; width: 1.5em; height: 1.5em; border: 1px solid #fff; border-radius: 50%; background: #252532; box-shadow: 0 0 0 1px var(--lu-color); color: #fff; font: 700 .7em/1 var(--font-display); z-index: 2; }
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess).finished { border-color: var(--lu-color); background: var(--lu-soft); box-shadow: 0 0 0 2px #fff9; }
.lu-pawn:is(.lu-pawn-halloween, .lu-pawn-princess).finished > span { background: #256344; }
.cosmetic-preview { min-height: 105px; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.cosmetic-preview .lu-dice-stage { --lu-d: 64px; transform: rotate(-12deg); }
.cosmetic-pawns .lu-pawn { width: 40px; flex: 0 0 40px; font-size: 15px; }
.cosmetic-shop { max-width: 1000px; margin: auto; }
.shop-heading { margin: 28px 0 20px; }
.shop-heading h1 { font: 600 clamp(30px, 5vw, 48px)/1.1 var(--font-display); margin: 16px 0 10px; }
.shop-heading p, .shop-item p, .cosmetic-wardrobe > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 16px 0 28px; }
.shop-item { border: 1px solid #e89a3d55; border-radius: 22px; padding: 24px; background: radial-gradient(ellipse at 50% 0%, #f58a2933, transparent 65%), radial-gradient(ellipse at 100% 100%, #9c65dd22, transparent 60%), var(--surface); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.shop-item.shop-princess { border-color: #f5a5d466; background: radial-gradient(ellipse at 50% 0%, #f3a3d13d, transparent 65%), radial-gradient(ellipse at 100% 100%, #e8b75d20, transparent 60%), var(--surface); }
.shop-princess .shop-kind { color: #f8b3dc; }
.shop-item.shop-crystal { border-color: #52d8cf66; background: radial-gradient(ellipse at 50% 0%, #24c1c038, transparent 65%), radial-gradient(ellipse at 100% 100%, #e8b75d20, transparent 60%), var(--surface); }
.shop-crystal .shop-kind { color: #8bece1; }
.shop-item.shop-frozen { border-color: #b6eaff66; background: radial-gradient(ellipse at 50% 0%, #8dd8ff38, transparent 65%), radial-gradient(ellipse at 100% 100%, #bbb0ff22, transparent 60%), var(--surface); }
.shop-frozen .shop-kind { color: #b6eaff; }
.shop-item .cosmetic-preview { width: 100%; min-height: 145px; }
.shop-item .cosmetic-preview .lu-dice-stage { --lu-d: 76px; }
.shop-item .cosmetic-pawns .lu-pawn { width: 46px; flex-basis: 46px; font-size: 18px; }
.shop-kind { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.shop-item h3 { font: 600 26px var(--font-display); margin: 0; }
.shop-item p { margin: 0; flex: 1; }
.shop-price { display: flex; align-items: center; gap: 8px; color: #ffce60; font-size: 14px; }
.shop-price span { color: var(--muted); font-size: 11px; margin-left: 8px; }
.shop-item .btn { width: 100%; }
.shop-item > small { color: var(--muted); line-height: 1.5; }
.shop-item a, .cosmetic-wardrobe a { color: var(--accent); }
.cosmetic-wardrobe { border-top: 1px solid var(--line-2); padding-top: 18px; }
.cosmetic-wardrobe h3 { font: 600 20px var(--font-display); margin: 0 0 8px; }
.cosmetic-wardrobe fieldset { border: 0; padding: 0; margin: 14px 0; min-width: 0; }
.cosmetic-wardrobe legend { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.cosmetic-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cosmetic-option { padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-2); color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cosmetic-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.cosmetic-option:disabled { opacity: 1; cursor: default; }
.cosmetic-option .cosmetic-preview { min-height: 65px; gap: 8px; }
.cosmetic-option .lu-dice-stage { --lu-d: 36px; }
.cosmetic-option .lu-pawn { width: 24px; flex-basis: 24px; font-size: 10px; }
.cosmetic-option > span { font-size: 12px; }
.cosmetic-option > small, .cosmetic-seat-style { font-size: 10px; color: var(--muted); }
.cosmetic-seat-style { display: block; white-space: normal; }
.cosmetic-message { color: var(--accent); font-size: 12px; min-height: 1em; }
.shop-wallet { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.shop-categories { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.shop-categories button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line-2); border-radius: 100px; background: var(--surface); color: var(--muted); font-weight: 600; transition: background .15s, border-color .15s; }
.shop-categories button:hover, .shop-categories button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.shop-categories button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.shop-categories button span { font-size: 11px; padding: 2px 6px; border-radius: 20px; background: var(--surface-3); }
.shop-section-heading { margin-top: 24px; }
.shop-section-heading h2 { font: 600 26px var(--font-display); margin: 0 0 6px; }
.shop-section-heading p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.shop-avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-item.shop-avatar { border-color: #82d6cb55; background: radial-gradient(ellipse at 50% 0%, #5fbfaf22, transparent 65%), var(--surface); }
.shop-item.shop-premium-avatar { border-color: #bd9af388; background: radial-gradient(ellipse at 50% 0%, #a678e43d, transparent 65%), radial-gradient(ellipse at 100% 100%, #e8b75d18, transparent 60%), var(--surface); }
.shop-premium-avatar .shop-kind, .shop-price-premium { color: #c7b1ff; }
.cosmetic-avatar img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 30px #0003; }
.cosmetic-snake svg { display: block; width: min(240px, 100%); height: auto; stroke: none; stroke-width: 0; image-rendering: pixelated; border: 1px solid #ffffff12; border-radius: 10px; }
.cosmetic-option .cosmetic-snake { width: 128px; }
.shop-item.shop-cobra { border-color: #62d99666; background: radial-gradient(ellipse at 50% 0%, #36b7772e, transparent 65%), var(--surface); }
.shop-cobra .shop-kind { color: #83e8a2; }
.shop-item.shop-coral { border-color: #e75c6166; background: radial-gradient(ellipse at 50% 0%, #e75c612e, transparent 65%), var(--surface); }
.shop-coral .shop-kind { color: #ff9990; }
@media (max-width: 800px) { .shop-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } .shop-item { padding: 18px; } }

.shop-neon{background:radial-gradient(at 50% 10%,#24535455,transparent 65%)}.shop-phantom{background:radial-gradient(at 50% 10%,#6e488244,transparent 65%)}.profile-sidebar{overflow-y:auto}@media(max-width:640px){.profile-tabs{overflow-x:auto;justify-content:flex-start}.profile-tabs button{flex:0 0 auto}}

.shop-item.shop-horror-robot{border-color:#be8ee56b;background:radial-gradient(ellipse at 50% 0,#7d3ca942,transparent 65%),radial-gradient(ellipse at 100% 100%,#db733422,transparent 60%),var(--surface)}.shop-horror-robot .shop-kind{color:#ddadff}

.shop-item.shop-legendary-demon { border-color:#e5b867a6; background:radial-gradient(ellipse at 50% 0,#b362e63b,transparent 60%),radial-gradient(ellipse at 100% 100%,#b41d4330,transparent 65%),#1c1822; box-shadow:inset 0 0 0 1px #f6c96c14,0 8px 30px #130a1c33; }
.shop-legendary-demon .shop-kind { color:#f1ce8a; padding:5px 10px; border:1px solid #d4ab5c4d; border-radius:20px; background:#d4ab5c0c; font-size:10px; }
.shop-legendary-demon .cosmetic-avatar img { box-shadow:0 0 25px #b369e633,0 8px 24px #0005; }
.shop-legendary-demon h3 { color:#f3d9a9; }
.shop-item.shop-winter-royal { position:relative; border-color:#e2c378a6; background:radial-gradient(ellipse at 50% 0,#43c29a30,transparent 65%),radial-gradient(ellipse at 100% 100%,#a12d3d27,transparent 70%),#17231f; box-shadow:inset 0 0 0 1px #f6c96c14,0 8px 30px #061d1733; }
.shop-winter-royal .shop-kind { color:#efcf87; }.shop-winter-royal h3 { color:#f6ddaa; }.shop-winter-royal .cosmetic-avatar img { box-shadow:0 0 30px #63d6b033,0 8px 24px #0005; }
.shop-item.shop-christmas-cat { border-color:#70b69b55; background:radial-gradient(ellipse at 50% 0,#49ad8920,transparent 75%),#18231f; }.shop-christmas-cat .shop-kind { color:#9dd2b9; }
.shop-item.shop-christmas-rare { border-color:#a8a0ed8c; background:radial-gradient(ellipse at 0 0,#6e7aef2e,transparent 65%),radial-gradient(ellipse at 100% 100%,#37c1a51b,transparent 70%),#1a1c2c; }.shop-christmas-rare .shop-kind { color:#bbb7f5; }.shop-christmas-rare .cosmetic-avatar img { box-shadow:0 0 25px #8e9ee533; }

.shop-avatar-open { width:100%; border-radius:16px; transition:transform .2s; }
.shop-avatar-open:hover { transform:translateY(-4px); }
.shop-avatar-open:focus-visible,.shop-family-toggle:focus-visible,.shop-family-close:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.shop-family-toggle { width:100%; display:flex; align-items:center; gap:9px; padding:10px; text-align:left; border:1px solid #c69af343; border-radius:13px; color:#e1c9ff; background:#ae78ef0c; }
.shop-family-toggle:hover,.shop-family-toggle[aria-expanded="true"] { background:#ae78ef20; border-color:#c69af388; }
.shop-family-thumbs { display:flex; padding-left:5px; }
.shop-family-thumbs img { width:28px; height:28px; border-radius:50%; border:2px solid #25212f; margin-left:-5px; }
.shop-family-toggle>span:nth-child(2) { flex:1; font-size:12px; font-weight:600; }
.shop-family-toggle small { display:block; margin-top:2px; font-size:10px; font-weight:400; color:var(--muted); }
.shop-family-toggle>span:last-child { font-size:20px; }
.shop-avatar-skins { grid-column:1 / -1; min-width:0; padding:24px; border:1px solid #c59ae85c; border-radius:24px; background:radial-gradient(ellipse at 50% 0,#613f811a,transparent 65%),#13151d; animation:avatar-skins-in .25s ease both; }
.shop-avatar-skins[hidden] { display:none; }
.shop-avatar-skins>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.shop-avatar-skins h3 { font:600 26px var(--font-display); margin:7px 0; }
.shop-avatar-skins header p { font-size:12px; color:var(--muted); margin:0; line-height:1.6; }
.shop-family-close { flex:none; font-size:25px; width:36px; height:36px; border-radius:50%; background:#ffffff08; color:var(--muted); }
.shop-skins-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.shop-skins-grid .shop-item { min-width:0; padding:18px; border-radius:18px; }
.shop-skins-grid h3 { font-size:21px; overflow-wrap:anywhere; }
.shop-skins-grid .cosmetic-avatar img { width:130px; height:130px; }
@keyframes avatar-skins-in { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
@media(max-width:800px) { .shop-skins-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .shop-avatar-skins { padding:15px; border-radius:18px; } .shop-skins-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .shop-avatar-skins { animation:none; } .shop-avatar-open { transition:none; } }
.shop-office-collection { margin:24px 0 38px; }
.shop-office-banner { display:flex; align-items:center; justify-content:space-between; gap:26px; margin-bottom:22px; padding:26px 30px; border:1px solid #cbb98b55; border-radius:22px; background:radial-gradient(ellipse at 100% 0,#b8904b20,transparent 65%),linear-gradient(120deg,#23384c,#172331); }
.shop-office-banner .shop-kind { color:#d9c18e; letter-spacing:.08em; }
.shop-office-banner h3 { margin:9px 0; font:500 clamp(27px,3vw,39px)/1.15 var(--font-display); color:#f3e3bf; }
.shop-office-banner p { margin:0; max-width:520px; color:#b6c4ce; font-size:13px; line-height:1.7; }
.shop-office-crate-link { display:flex; align-items:center; gap:12px; flex:none; color:#f1dfb8; padding:8px 16px 8px 5px; border:1px solid #d1b77f40; border-radius:15px; background:#0d192755; text-decoration:none; transition:background .2s,border-color .2s; }
.shop-office-crate-link:hover { background:#d1b77f12; border-color:#d1b77f; }
.shop-office-crate-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.shop-office-crate-link img { object-fit:contain; filter:drop-shadow(0 6px 8px #0005); }
.shop-office-crate-link span { display:grid; gap:6px; font-size:13px; font-weight:600; }
.shop-office-crate-link small { color:#a3b9cb; font-size:10px; font-weight:400; }
.shop-other-avatars { margin:0 0 20px; font:500 27px/1.2 var(--font-display); }
.shop-item.shop-office { border-color:#8fa3b145; background:radial-gradient(ellipse at 50% 0,#718eaa20,transparent 70%),#1a2632; }
.shop-office .shop-kind { color:#b4c8d6; }
.shop-office .cosmetic-avatar img { box-shadow:0 9px 24px #0004; }
.shop-item.shop-office-rare { border-color:#80aeea80; background:radial-gradient(ellipse at 50% 0,#5e8fd331,transparent 70%),#192638; }
.shop-office-rare .shop-kind { color:#a3c8ff; }
.shop-item.shop-office-epic { border-color:#b899e2a0; background:radial-gradient(ellipse at 50% 0,#a47cce35,transparent 65%),#252333; }
.shop-office-epic .shop-kind { color:#d7b3ff; }
.shop-item.shop-office-legendary { border-color:#d9b66cbd; background:radial-gradient(ellipse at 50% 0,#c28e4138,transparent 65%),#28251f; box-shadow:inset 0 0 0 1px #e7c67b14,0 8px 30px #0003; }
.shop-office-legendary .shop-kind,.shop-office-legendary h3 { color:#f3d696; }
@media(max-width:800px) { .shop-office-banner { flex-direction:column; align-items:flex-start; padding:23px; gap:18px; }.shop-office-crate-link { align-self:stretch; }.shop-office-crate-link img { width:72px; height:72px; } }