/* LF arcade identity and Lio's shared dimensional showroom. */
:root[data-theme]{--lio-pink:#b72c78;--lio-highlight:#ffb5df;--lio-stage:#f0e8f2;--lio-stage-ink:#261b32;--lio-stage-muted:#695571}
:root[data-theme=dark]{--lio-pink:#ff8bc9;--lio-highlight:#ffd2eb;--lio-stage:#221b30;--lio-stage-ink:#fff4fb;--lio-stage-muted:#cdbad6}
:root[data-theme] body .site-header>.brand{display:grid;place-items:center;width:44px;min-width:44px;height:44px;gap:0;padding:0;justify-self:start;align-self:center;border:0;background:transparent;box-shadow:none}
:root[data-theme] .site-header .brand-name{display:none}
:root[data-theme] .brand-symbol.lf-monogram{width:44px;height:44px;min-width:44px;border:0;border-radius:0;background:none;box-shadow:none;display:block;padding:0;overflow:visible}
:root[data-theme] .brand-symbol.lf-monogram img{display:block;width:100%;height:100%;object-fit:contain}
:root[data-theme] body .site-header .brand-symbol.lf-mark.lf-monogram{width:44px;height:44px;min-width:44px;transform:none}
:root[data-theme] .menu-logo img{width:52px;height:52px}
.member-monogram img{display:block;width:96px;height:96px}
:root[data-theme] .lf-brand-lio>.lf-mascot{width:100%;height:100%}
.member-auth-art{align-items:center;gap:14px}
.member-auth-art .lf-brand-lio{width:112px;aspect-ratio:314/354;flex:none}
.member-auth-art .member-brand{margin-bottom:0}
@media(max-width:600px){.member-auth-art .lf-brand-lio{width:96px}}
:root[data-theme] .home-watch-heading h1.lf-future-wordmark{font-family:'Oxanium',sans-serif!important;font-weight:800;font-size:clamp(25px,2.8vw,44px);letter-spacing:-.04em;line-height:1.14;transform:skewX(-7deg);padding:.06em .12em .12em .02em}
.lf-future-wordmark>span{background:linear-gradient(180deg,#ffffff 12%,#fff2fb 38%,#ffb0dc 42%,#ff79bf 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(1px 1px 0 #ad2d71) drop-shadow(1px 2px 0 #8e215f) drop-shadow(1px 2px 0 #6d224f);-webkit-text-stroke:.6px #af3077;padding-block:.02em .07em}
.lf-future-wordmark>span:last-child{background-image:linear-gradient(180deg,#fffaff 0%,#fffaff 37%,#ffe6f6 39%,#ffe6f6 90%)}
.lf-future-wordmark .lf-wordmark-hyphen{background:none;-webkit-text-fill-color:#ff82c4;color:#ff82c4;margin-inline:.04em}
/* Body, light reflection and shadow sit on different visual planes. */
.lf-mascot{--lio-tilt-x:0deg;--lio-tilt-y:0deg;--lio-light-x:40%;--lio-light-y:20%;transform-style:preserve-3d;background:radial-gradient(ellipse at 45% 18%,color-mix(in srgb,var(--avatar-a) 72%,#fff) 0%,var(--avatar-a) 44%,var(--avatar-b) 100%);border:1px solid #ffffff25}
.lf-mascot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--lio-light-x) var(--lio-light-y),#ffffff1a,transparent 52%);mix-blend-mode:screen;z-index:2}
.lf-mascot canvas{position:relative;z-index:1;image-rendering:auto;filter:drop-shadow(0 7px 5px #050c1c38);transform-origin:50% 89%}
.lf-mascot[data-lio-visible="true"]:not(.lf-mascot-face) canvas{animation:lio-breathe 5.8s ease-in-out infinite}
.lf-mascot[data-lio-visible="false"] canvas{animation-play-state:paused!important}
.lf-mascot-face{border:1px solid #ffffff45;box-shadow:inset 0 1px #ffffff40,0 2px 5px #0002}
.lf-mascot-face::after{background:linear-gradient(145deg,#ffffff17,transparent 50%)}
.lf-mascot-face canvas{filter:drop-shadow(0 3px 2px #0003)}
@keyframes lio-breathe{0%,100%{transform:translateY(0) rotate(-.5deg) scale(1)}45%{transform:translateY(-3px) rotate(.6deg) scale(1.012)}}
.lf-avatar-stage{position:relative;perspective:900px;isolation:isolate}
.lf-avatar-stage::before{content:"";position:absolute;inset:auto 18% 4%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#040b2240,transparent 69%);filter:blur(4px);z-index:-1;pointer-events:none}
:root[data-theme] .lf-avatar-stage>.lf-mascot{border:0;background:transparent!important;box-shadow:none;overflow:visible;transform:rotateX(var(--lio-tilt-x)) rotateY(var(--lio-tilt-y));transition:transform .25s ease;filter:drop-shadow(0 16px 16px #090e2929)}
:root[data-theme] .lf-avatar-stage>.lf-mascot::after{display:none}
:root[data-theme] .lf-avatar-stage>.lf-mascot canvas{filter:drop-shadow(2px 7px 4px #0003);animation:lio-breathe 5.8s ease-in-out infinite}
:root[data-theme] .lf-avatar-preview .lf-avatar-stage:hover>.lf-mascot{transform:rotateX(var(--lio-tilt-x)) rotateY(var(--lio-tilt-y)) translateY(-2px)}
/* The wardrobe is a lighted display case, with readable choices and real states. */
:root[data-theme] .lf-avatar-editor{background:var(--lf-surface);border:1px solid var(--lf-edge);border-radius:24px;gap:24px;padding:20px}
:root[data-theme] .lf-avatar-preview{background:radial-gradient(ellipse at 25% 0%,#f3a8d328,transparent 62%),var(--lio-stage);border:1px solid color-mix(in srgb,var(--lio-pink) 28%,var(--lf-edge));border-radius:22px 8px 22px 22px;padding:24px 18px;box-shadow:inset 0 1px #ffffff38;overflow:hidden;color:var(--lio-stage-ink)}
:root[data-theme] .lf-avatar-preview h2{color:var(--lio-stage-ink);font-size:clamp(22px,2vw,29px);margin:16px 0 8px;font-weight:800}
:root[data-theme] .lf-avatar-preview :is(p,.lf-kicker){color:var(--lio-stage-muted);font-size:.875rem;line-height:1.5}
:root[data-theme] .lf-avatar-preview .lf-back{color:var(--lio-pink);font-weight:700;font-size:.875rem;min-height:40px;line-height:1.5}
:root[data-theme] .lf-avatar-preview .button{background:linear-gradient(120deg,#ffb6df,#ff8dca);color:#35132b;border:1px solid #ffbce1;border-radius:12px 5px 12px 12px;font-weight:700}
:root[data-theme] .lf-wardrobe-tabs{gap:6px;padding:5px;margin:0 0 20px;border:1px solid var(--lf-edge);border-radius:12px;background:var(--panel2);scrollbar-width:thin}
:root[data-theme] .lf-wardrobe-tabs button{border:0;border-radius:8px;min-height:44px;padding:10px 13px;color:var(--muted);font-weight:700;font-size:.875rem}
:root[data-theme] .lf-wardrobe-tabs [aria-selected=true]{color:var(--lio-pink);background:var(--panel);box-shadow:inset 0 -2px var(--lio-pink),0 2px 5px #0001}
:root[data-theme] .lf-wardrobe-item{display:flex;flex-direction:column;align-items:stretch;border:1px solid var(--lf-edge);border-radius:16px;padding:6px 6px 12px;background:var(--panel);color:var(--text);overflow:hidden;transition:border-color .2s,box-shadow .2s}
:root[data-theme] .lf-wardrobe-item>.lf-mascot{aspect-ratio:314/354;border:0;border-radius:11px;background:radial-gradient(ellipse at 42% 25%,#f3c3df22,transparent 63%),var(--lio-stage)}
:root[data-theme] .lf-wardrobe-item strong{font-size:.875rem;font-weight:700;line-height:1.4;margin:11px 6px 4px;overflow-wrap:anywhere}
:root[data-theme] .lf-wardrobe-item small{font-size:.75rem;line-height:1.4;color:var(--muted);margin:0 6px}
:root[data-theme] .lf-wardrobe-item[aria-pressed=true]{border-color:var(--lio-pink);box-shadow:0 0 0 1px var(--lio-pink),inset 0 -3px var(--lio-pink)}
:root[data-theme] .lf-wardrobe-item.is-locked{opacity:.75}
:root[data-theme] .lf-wardrobe-item:not(:disabled):hover{border-color:var(--lio-pink);box-shadow:0 4px 12px #ad4e7b14}
:root[data-theme] .lf-color-row legend{color:var(--text);font-size:1rem;font-weight:700}
:root[data-theme] .lf-wardrobe-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:18px 0;color:var(--muted);font-size:.875rem}
:root[data-theme] .lf-wardrobe-pages button{min-height:44px;padding:10px 14px;border:1px solid var(--lf-edge);border-radius:10px;background:var(--panel);color:var(--text);font:700 .875rem/1.4 var(--font)}
/* Every store look uses the same Lio artwork as the member wearing it. */
.lf-lio-storefront{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:center;gap:20px;height:186px;margin-bottom:22px;padding:12px clamp(16px,8%,90px) 0;border:1px solid var(--lf-edge);border-radius:24px 8px 24px 24px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#ffabd724,transparent 64%),var(--lio-stage);isolation:isolate}
.lf-lio-storefront .lf-avatar-stage{width:168px;max-width:100%;height:178px;align-self:end;align-items:start}
:root[data-theme] .lf-lio-storefront .lf-avatar-stage>.lf-mascot{width:158px;max-width:100%}
.lf-lio-storefront>img{width:72px;height:72px;filter:drop-shadow(0 10px 12px #20103124)}
:root[data-theme] #lfForum .lf-store-grid{gap:16px;align-items:stretch}
:root[data-theme] #lfForum .lf-store-item{border:1px solid var(--lf-edge);border-radius:20px 7px 20px 20px;background:var(--lf-surface);box-shadow:var(--lf-shadow);overflow:hidden;display:flex;flex-direction:column}
:root[data-theme] #lfForum .lf-store-item .lf-product-photo{position:relative;display:grid;place-items:center;aspect-ratio:1.05;height:auto;padding:16px 12px 8px;background:radial-gradient(ellipse at 44% 22%,color-mix(in srgb,var(--item-color) 20%,transparent),transparent 70%),var(--lio-stage);border-bottom:1px solid var(--lf-edge);perspective:800px;isolation:isolate}
:root[data-theme] #lfForum .lf-store-item .lf-product-photo::before{content:"";position:absolute;inset:auto 22% 6%;height:10%;background:radial-gradient(ellipse,#06091830,transparent 70%);border-radius:50%;z-index:-1}
:root[data-theme] #lfForum .lf-store-item .lf-product-photo>.lf-mascot{height:auto;width:min(100%,220px);max-height:none;aspect-ratio:314/354;background:none;border:0;border-radius:0;overflow:visible;transform:rotateX(var(--lio-tilt-x)) rotateY(var(--lio-tilt-y));transition:transform .25s}
:root[data-theme] #lfForum .lf-store-item .lf-product-photo>.lf-mascot::after{display:none}
:root[data-theme] #lfForum .lf-store-item>div:last-child{padding:18px;display:flex;flex-direction:column;flex:1;gap:8px}
:root[data-theme] #lfForum .lf-store-item h3{font-size:1rem;font-weight:750;line-height:1.4;margin:0;color:var(--text);overflow-wrap:anywhere}
:root[data-theme] #lfForum .lf-store-item .lf-kicker{font-size:.75rem;letter-spacing:.06em;color:var(--lio-pink)}
:root[data-theme] #lfForum .lf-store-price{margin-top:auto;padding-top:8px;gap:10px;flex-wrap:wrap}
:root[data-theme] #lfForum .lf-store-price strong{color:var(--text);font-family:var(--display);font-weight:800;font-size:1.125rem}
:root[data-theme] #lfForum .lf-store-price small{font-family:var(--font);font-size:.75rem;color:var(--muted)}
:root[data-theme] #lfForum .lf-store-item .button{min-height:42px;font-size:.875rem}
:root[data-theme] #lfForum .lf-store-item .button:disabled{opacity:.65}
:root[data-theme] #lfForum .lf-store-item:hover{border-color:var(--lio-pink);box-shadow:0 6px 22px #ad4e7b14}
@media(max-width:650px){:root[data-theme] .lf-avatar-editor{grid-template-columns:1fr;padding:12px;gap:18px}:root[data-theme] .lf-avatar-preview{position:static;padding:20px 16px}:root[data-theme] .lf-avatar-preview .lf-avatar-stage{height:260px;max-height:none}:root[data-theme] .lf-avatar-preview .lf-avatar-stage>.lf-mascot{width:230px;max-height:none}:root[data-theme] .lf-wardrobe-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:root[data-theme] .lf-wardrobe-tabs{position:static}:root[data-theme] #lfForum .lf-store-item>div:last-child{padding:14px}:root[data-theme] .home-watch-heading h1.lf-future-wordmark{font-size:clamp(1.25rem,5.5vw,1.85rem)}:root[data-theme] .brand-symbol.lf-monogram{width:44px;height:44px;min-width:44px}}
@media(prefers-reduced-motion:reduce){:root[data-theme] .lf-mascot,:root[data-theme] .lf-mascot canvas,:root[data-theme] .lf-avatar-stage>.lf-mascot,:root[data-theme] #lfForum .lf-product-photo>.lf-mascot{animation:none!important;transition:none!important;transform:none!important}}
@media(forced-colors:active){.lf-future-wordmark>span{-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0;filter:none;background:none}}
@media(max-width:650px){.lf-lio-storefront{height:145px;padding:10px 12px 0;gap:12px}.lf-lio-storefront .lf-avatar-stage{height:138px;width:118px}.lf-lio-storefront>img{width:54px;height:54px}}