/* Illustrated menus and wardrobe (Option B). Surfaces only: no layout, sizes or text change, so ?art=a (html.art-a) keeps style.css as is.
   Toy look from the approved art direction: plum panels with lavender rims, gold hero cards, bevelled buttons with a lip, white icons. */
/* Fredoka (SIL OFL 1.1, public/fonts/OFL.txt), self-hosted: variable weight 300-700, Latin plus Latin Extended for the translations. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--i-menu:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='4.5' width='18' height='3.2' rx='1.6'/><rect x='3' y='10.4' width='18' height='3.2' rx='1.6'/><rect x='3' y='16.3' width='18' height='3.2' rx='1.6'/></svg>");
 --i-shirt:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.2 3 2.8 5.9l2.2 5.1 2.4-1.1V21h9.2V9.9l2.4 1.1 2.2-5.1L15.8 3c-.6 1.7-2 2.8-3.8 2.8S8.8 4.7 8.2 3z'/></svg>");
 --i-full:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-home:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2.4 11.2h2.8V21h5.3v-5.8h3V21h5.3v-9.8h2.8z'/></svg>");
 --i-hash:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.8 3.5 7.6 20.5M16.6 3.5l-2.2 17M4.2 9h16.3M3.5 15h16.3' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round'/></svg>");
 --i-user:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7.8' r='4.4'/><path d='M3.4 21c0-4.9 3.9-7.7 8.6-7.7s8.6 2.8 8.6 7.7z'/></svg>");
 --i-back:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.5 5 3.5 12l7 7M4.5 12h16' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-note:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.9 17.4V6.4l11-2.4v11.4' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/><ellipse cx='6.2' cy='17.6' rx='3.4' ry='2.8'/><ellipse cx='17.2' cy='15.5' rx='3.4' ry='2.8'/></svg>");
 --i-speaker:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.8 9.1h4.4L12.6 5v14l-5.4-4.1H2.8z'/><path d='M15.8 8.8a4.6 4.6 0 0 1 0 6.4M18.6 6a8.6 8.6 0 0 1 0 12' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/></svg>");
 --i-gift:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.8 8.2h8.1v4.2H2.8zM13.1 8.2h8.1v4.2h-8.1zM4.2 13.8h6.7V21H4.2zM13.1 13.8h6.7V21h-6.7z'/><path d='M12 7.8C10 3.6 5.6 3.7 6.4 6.4 6.9 8 10 7.9 12 7.8zm0 0c2-4.2 6.4-4.1 5.6-1.4-.5 1.6-3.6 1.5-5.6 1.4z' fill='none' stroke='black' stroke-width='2'/></svg>");
 --i-star:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>");
 --i-bookmark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.2 2.8h11.6c.7 0 1.2.5 1.2 1.2v17.2l-7-4.7-7 4.7V4c0-.7.5-1.2 1.2-1.2z'/></svg>");
 --i-check:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.5 12.5l5 5 10-11' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-undo:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4 4 9l5 5M4.8 9H14a6 6 0 0 1 0 12h-3.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-shoe:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 16.4V9.6c0-1 .8-1.7 1.8-1.4l2.8.9c1 .3 1.9-.3 2.1-1.3l.3-1.4c.2-1 1.3-1.4 2.1-.9l2.4 1.4c.7.4 1.1 1.1 1.2 1.8.2 1.6 1.5 2.9 3.1 3.1 1.7.2 3.2 1.6 3.2 3.5v1.1z'/><rect x='2.5' y='17.7' width='19' height='3' rx='1.4'/></svg>");
 --i-smile:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.3' fill='none' stroke='black' stroke-width='2.4'/><circle cx='8.8' cy='10' r='1.6'/><circle cx='15.2' cy='10' r='1.6'/><path d='M7.8 14c1 1.8 2.5 2.7 4.2 2.7s3.2-.9 4.2-2.7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>");
 --i-chat:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 3.3c5.2 0 9.4 3.4 9.4 7.6s-4.2 7.6-9.4 7.6c-1 0-2-.1-2.9-.4l-4.8 2.6 1.3-4.2C3.8 15.2 2.6 13.2 2.6 10.9c0-4.2 4.2-7.6 9.4-7.6zM6.5 10.9a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zM10.5 10.9a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zM14.5 10.9a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0z'/></svg>");
 --i-people:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='8' r='3.7'/><path d='M1.8 20.2c0-4.1 3.2-6.5 7.2-6.5s7.2 2.4 7.2 6.5z'/><circle cx='17.2' cy='8.6' r='3'/><path d='M17.4 13.4c3 .2 4.9 2.3 4.9 5.8h-4.6c-.1-2.4-1-4.3-2.6-5.5.7-.2 1.5-.3 2.3-.3z'/></svg>");
 --i-pad:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M7.5 6.5h9a5.6 5.6 0 0 1 0 11.2c-1.9 0-2.6-1.5-4.5-1.5s-2.6 1.5-4.5 1.5a5.6 5.6 0 0 1 0-11.2zM6.3 9.6v1.9H4.4v2h1.9v1.9h2v-1.9h1.9v-2H8.3V9.6zM15 11.2a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0zM17.2 13.6a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 1 0-2.4 0z'/></svg>");
 --i-mute:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a6 6 0 0 0-6 6v4.2L4 16.4h16l-2-3.2V9a6 6 0 0 0-6-6zM9.4 18.2a2.6 2.6 0 0 0 5.2 0z'/><path d='M3.6 3.6l16.8 16.8' stroke='black' stroke-width='2.6' stroke-linecap='round'/></svg>");
 --i-door:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 21V4.4L12.5 3v18z'/><path d='M12.5 5h4v5.5M16.5 15.5V21h-4M15 13h6.5M18.8 10.3l2.7 2.7-2.7 2.7' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-copy:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='8.3' y='8.3' width='12.5' height='12.5' rx='2.6'/><path d='M5.6 15.6h-.9c-.9 0-1.6-.7-1.6-1.6V4.7c0-.9.7-1.6 1.6-1.6H14c.9 0 1.6.7 1.6 1.6v.9' fill='none' stroke='black' stroke-width='2.3'/></svg>");
 --i-prev:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 4.5 7.5 12l7.5 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-next:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4.5l7.5 7.5L9 19.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 --i-chev:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23ffd25f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>")}

/* Type: Fredoka everywhere in the DOM UI; display text in its bold (700 is the heaviest weight, so 900 lands there). */
html:not(.art-a) body,html:not(.art-a) :is(button,input,select,textarea,kbd,.brand span,.plaza-heading h2 span){font-family:'Fredoka','Trebuchet MS',Arial,sans-serif}
html:not(.art-a) :is(h1,h2,.brand,#roundBanner strong,#boardDie,.score strong,#combatToast,.welcome-entry h2,#gameFrame .welcome-intro h1,#gameFrame .welcome-showcase h1,#ceremony .podium-block b,#about h2){font-family:'Fredoka','Arial Black',Impact,sans-serif;font-weight:700;letter-spacing:0}
html:not(.art-a) :is(b,strong,summary,button){font-weight:600}html:not(.art-a) :is(.primary,.level-head strong,.track-step b){font-weight:700}

/* Buttons: bevelled plum toys with a dark lip; the primary is a glossy gold slab. */
html:not(.art-a) .quiet,html:not(.art-a) .inventory-pager button,html:not(.art-a) #savedLooks button,html:not(.art-a) .social-tabs button,html:not(.art-a) .plaza-tools summary{background:linear-gradient(180deg,#4b3968,#3c2c55 58%,#35274b);border:2px solid #7862a0;border-radius:12px;color:#fff4e2;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #00000026,0 3px 0 #140d20,0 6px 12px -5px #07030fcc;text-shadow:0 1px 0 #1a102699;transition:transform .08s,filter .15s,border-color .15s}
html:not(.art-a) .quiet:hover,html:not(.art-a) .inventory-pager button:hover,html:not(.art-a) #savedLooks button:hover,html:not(.art-a) .social-tabs button:hover,html:not(.art-a) .plaza-tools summary:hover{background:linear-gradient(180deg,#58447a,#46345f 58%,#3d2d55);border-color:#9c86c6}
html:not(.art-a) :is(.quiet,.inventory-pager button,#savedLooks button,.social-tabs button,.primary):not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff24,0 1px 0 #140d20}
html:not(.art-a) .primary{background:linear-gradient(180deg,#ffe594,#ffd25f 48%,#f6bb45);border:2px solid #2a1c36;border-radius:14px;color:#2a1c36;box-shadow:inset 0 2px 0 #fff6cf,inset 0 -3px 0 #df9c3a,0 4px 0 #8a552b,0 9px 18px -7px #07030f;text-shadow:0 1px 0 #fff3c466}
html:not(.art-a) .primary:hover{background:linear-gradient(180deg,#fff0b8,#ffdc7a 48%,#ffc653)}
html:not(.art-a) .quiet:disabled{box-shadow:inset 0 1px 0 #ffffff1a,0 2px 0 #140d20}
html:not(.art-a) .primary:disabled{opacity:1;background:linear-gradient(180deg,#5c4b73,#4a3b60);border-color:#140d20;color:#cdbbdb;text-shadow:none;box-shadow:inset 0 1px 0 #ffffff1f,0 3px 0 #140d20}
html:not(.art-a) .social-tabs [aria-pressed=true],html:not(.art-a) #wardrobe .locker-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#ffe594,#ffd25f 55%,#f6bb45);border-color:#2a1c36;color:#2a1c36;text-shadow:none;box-shadow:inset 0 2px 0 #fff6cf,inset 0 -3px 0 #df9c3a,0 3px 0 #8a552b}
/* Icons: white glyphs that follow the text colour. */
html:not(.art-a) :is(#frameMenu,#frameCosmetics,#fullscreen,#welcomeWardrobe,#welcomeAccount,#createRoom,#joinCodeButton,#closeGameMenu,#music,#sound,#equipOutfit,#resetDraft,#openCrate,#plazaJump,#plazaMute,#leaveRoom,#lobbyLeaveRoom,#lobbyWardrobe,#copy,#copyFriendCode,#copyOverlay,#previousItems,#nextItems,#wardrobe .locker-tabs button,.plaza-tools summary){display:inline-flex;align-items:center;justify-content:center;gap:.5em}
html:not(.art-a) :is(#frameMenu,#frameCosmetics,#fullscreen,#welcomeWardrobe,#welcomeAccount,#createRoom,#joinCodeButton,#closeGameMenu,#music,#sound,#equipOutfit,#resetDraft,#openCrate,#plazaJump,#plazaMute,#leaveRoom,#lobbyLeaveRoom,#lobbyWardrobe,#copy,#copyFriendCode,#copyOverlay,#previousItems,#wardrobe .locker-tabs button,.plaza-tools summary)::before,html:not(.art-a) #nextItems::after{content:'';flex:0 0 auto;width:1.2em;height:1.2em;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
html:not(.art-a) #frameMenu{--ic:var(--i-menu)}html:not(.art-a) :is(#frameCosmetics,#welcomeWardrobe,#lobbyWardrobe,[data-locker=inventory]){--ic:var(--i-shirt)}html:not(.art-a) #fullscreen{--ic:var(--i-full)}
html:not(.art-a) #welcomeAccount{--ic:var(--i-user)}html:not(.art-a) #createRoom{--ic:var(--i-home)}html:not(.art-a) #joinCodeButton{--ic:var(--i-hash)}html:not(.art-a) #closeGameMenu{--ic:var(--i-back)}
html:not(.art-a) #music{--ic:var(--i-note)}html:not(.art-a) #sound{--ic:var(--i-speaker)}html:not(.art-a) :is(#openCrate,[data-locker=crates]){--ic:var(--i-gift)}html:not(.art-a) [data-locker=progress]{--ic:var(--i-star)}html:not(.art-a) [data-locker=looks]{--ic:var(--i-bookmark)}
html:not(.art-a) #equipOutfit{--ic:var(--i-check)}html:not(.art-a) #resetDraft{--ic:var(--i-undo)}html:not(.art-a) #plazaJump{--ic:var(--i-shoe)}html:not(.art-a) #plazaMute{--ic:var(--i-mute)}html:not(.art-a) :is(#leaveRoom,#lobbyLeaveRoom){--ic:var(--i-door)}
html:not(.art-a) :is(#copy,#copyFriendCode,#copyOverlay){--ic:var(--i-copy)}html:not(.art-a) #previousItems{--ic:var(--i-prev)}html:not(.art-a) #nextItems{--ic:var(--i-next)}
html:not(.art-a) .plaza-tools details:nth-of-type(1)>summary{--ic:var(--i-smile)}html:not(.art-a) .plaza-tools details:nth-of-type(2)>summary{--ic:var(--i-chat)}html:not(.art-a) .plaza-tools details:nth-of-type(3)>summary{--ic:var(--i-people)}html:not(.art-a) .plaza-tools details:nth-of-type(4)>summary{--ic:var(--i-pad)}
html:not(.art-a) .plaza-tools summary{list-style:none}html:not(.art-a) .plaza-tools summary::-webkit-details-marker{display:none}
html:not(.art-a) .plaza-tools details[open]>summary{border-color:#ffd25f;color:#ffe7a6}
html:not(.art-a) #joinPanel .plaza-tools>button,html:not(.art-a) #joinPanel .plaza-tools summary{border-radius:22px;background:linear-gradient(180deg,#4b3968,#3c2c55 58%,#35274b);border-color:#7862a0}
html:not(.art-a) .plaza-tools details>div{background:linear-gradient(180deg,#3d2d55,#2e2242);border:2px solid #7862a0;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff24,0 5px 0 #140d20,0 16px 34px #07030fb3}
html:not(.art-a) .plaza-tools details button{background:#4f3b6c;border:1.5px solid #6e5895;border-radius:10px}
html:not(.art-a) .plaza-tools details button:hover{background:#5d477e}

/* Fields: dark wells with a lavender rim; gold focus. */
html:not(.art-a) input:not([type=checkbox]):not([type=radio]):not([type=range]),html:not(.art-a) select{background-color:#241a35;border:2px solid #5f4c84;border-radius:11px;color:#fff4e2;box-shadow:inset 0 3px 5px #07030f80,0 1px 0 #ffffff14}
html:not(.art-a) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,html:not(.art-a) select:focus{border-color:#ffd25f;outline:none;box-shadow:inset 0 3px 5px #07030f80,0 0 0 3px #ffd25f38}
html:not(.art-a) select{-webkit-appearance:none;appearance:none;background-image:var(--i-chev);background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
html:not(.art-a) #wardrobe .inventory-filters select{padding-right:34px;background-position:right 10px center;background-size:14px}
html:not(.art-a) select option{background:#2b2040;color:#fff4e2}
html:not(.art-a) :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:#ffd25f}

/* Cards: plum panels with a soft top light and a lavender rim; hero cards wear the gold band. */
html:not(.art-a) :is(#langPicker,#voicePanel,#accountPanel,#streamPanel,#socialPanel,#touchSettings,#progressCards>section,#savedLooks article){background:linear-gradient(180deg,#36284c,#2c2040);border:2px solid #5f4c84;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff1c,0 4px 0 #140d20,0 14px 30px -12px #07030fcc}
html:not(.art-a) #langPicker{padding:16px 18px}
html:not(.art-a) :is(#accountPanel,#streamPanel,#progressCards>section) h3,html:not(.art-a) #streamPanel summary{color:#ffe2a2;text-shadow:0 2px 0 #140d20}
html:not(.art-a) :is(.welcome-entry,#joinPanel .welcome-entry,#menuControls .cosmetics-entry){background:radial-gradient(120% 60% at 20% 0%,#46345f,transparent 70%),linear-gradient(180deg,#34264a,#2a1e3c);border:2px solid #e9b85a;border-top:8px solid #ffd25f;box-shadow:inset 0 1px 0 #ffffff1c,0 5px 0 #140d20,0 22px 60px -18px #07030f}
html:not(.art-a) #menuControls .cosmetics-entry{position:relative;padding-right:118px;color:#ffe7a6;text-align:left}
html:not(.art-a) #menuControls .cosmetics-entry::after{content:'';position:absolute;right:18px;top:50%;width:84px;height:84px;margin-top:-42px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='t' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ff9fcf'/><stop offset='1' stop-color='%23e0579e'/></linearGradient></defs><ellipse cx='50' cy='93' rx='34' ry='5' fill='%2307030f' opacity='.45'/><path d='M50 8a6 6 0 1 1 6 6c-3 0-6 2-6 5' fill='none' stroke='%23291e38' stroke-width='6' stroke-linecap='round'/><path d='M50 8a6 6 0 1 1 6 6c-3 0-6 2-6 5' fill='none' stroke='%23e9e0f2' stroke-width='2.6' stroke-linecap='round'/><path d='M50 20 12 34' stroke='%23291e38' stroke-width='6' stroke-linecap='round'/><path d='M50 20l38 14' stroke='%23291e38' stroke-width='6' stroke-linecap='round'/><path d='M50 20 12 34M50 20l38 14' stroke='%23e9e0f2' stroke-width='2.4' stroke-linecap='round'/><path d='M34 30 14 40l7 16 8-4v34h42V52l8 4 7-16-20-10c-2 6-8 10-16 10s-14-4-16-10z' fill='url(%23t)' stroke='%23291e38' stroke-width='4' stroke-linejoin='round'/><path d='M34 30c2 6 8 10 16 10s14-4 16-10' fill='none' stroke='%238fe3c7' stroke-width='5'/><path d='M20 42l10-5M33 58v22' stroke='%23fff' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'/><path d='M50 56l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z' fill='%23ffd25f' stroke='%23291e38' stroke-width='2.4' stroke-linejoin='round'/><path d='M84 8l2 5 5 2-5 2-2 5-2-5-5-2 5-2zM12 12l1.4 3.4 3.4 1.4-3.4 1.4L12 22l-1.4-3.4L7.2 17l3.4-1.4z' fill='%23ffe7a6'/></svg>") center/contain no-repeat;pointer-events:none;transition:transform .2s}
html:not(.art-a) #menuControls .cosmetics-entry:hover::after{transform:rotate(-6deg) scale(1.06)}
html:not(.art-a) #menuControls .cosmetics-entry strong{text-shadow:0 2px 0 #140d20}
html:not(.art-a) .next-goal{background:linear-gradient(180deg,#34264acc,#2a1e3ccc);border:2px solid #5f4c84;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff1a,0 3px 0 #140d20}
html:not(.art-a) .next-goal:hover{border-color:#9c86c6}
html:not(.art-a) .stamp{border-color:#140d20;box-shadow:3px 3px 0 #140d20}

/* Toolbar and menu page. */
html:not(.art-a) #frameToolbar{background:linear-gradient(180deg,#322447,#281d38);border-bottom-color:#140d20;box-shadow:inset 0 -1px 0 #ffffff0f,0 3px 10px #07030f99;position:relative;z-index:6}
html:not(.art-a) #frameToolbar .level-chip{background:linear-gradient(180deg,#4b3968,#35274b);border:2px solid #e9b85a;color:#ffe7a6;box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 #140d20}
html:not(.art-a) #frameCosmetics{border-color:#e9b85a;color:#ffe7a6}
html:not(.art-a) #gameMenu{background:radial-gradient(900px 520px at 50% -8%,#3a2a52f0,transparent 70%),radial-gradient(1.6px 1.6px at 18px 22px,#ffd25f22 99%,transparent),radial-gradient(1.4px 1.4px at 62px 70px,#8fe3c71f 99%,transparent),radial-gradient(1.5px 1.5px at 96px 26px,#ff9fcf1f 99%,transparent),#291e38fa;background-size:auto,131px 97px,173px 139px,227px 181px,auto;scrollbar-color:#6a5590 #231a33}
html:not(.art-a) #gameMenu .menu-heading{background:linear-gradient(180deg,#2f2243f5,#291e38f5);border-bottom:2px solid #140d20;border-radius:0 0 18px 18px;padding:10px 14px;box-shadow:0 6px 16px -8px #07030f;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:not(.art-a) #gameMenu .menu-heading h2,html:not(.art-a) #gameFrame .panel :is(h1,h2){text-shadow:0 3px 0 #140d20,0 8px 18px #07030f99}

/* Wardrobe: a spotlit fitting stage and a shelf of display stands. */
html:not(.art-a) #wardrobe .locker-tabs{background:linear-gradient(180deg,#221831f2,#291e38f2);border:2px solid #140d20;border-radius:18px;padding:7px;box-shadow:inset 0 3px 6px #07030f99,0 1px 0 #ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:not(.art-a) #wardrobe .locker-tabs button{background:linear-gradient(180deg,#4b3968,#3c2c55 58%,#35274b);border:2px solid #6e5895;border-radius:12px;color:#f3e6f7;box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 #140d20}
html:not(.art-a) .fitting-stage{background:conic-gradient(from 160deg at 50% -4%,transparent,#fff1c41f 11deg 29deg,transparent 40deg),radial-gradient(80% 42% at 50% 0%,#ffe6a326,transparent 70%),linear-gradient(180deg,#35274c,#2a1e3c 62%,#231a33);border:2px solid #e9b85a;border-top:8px solid #ffd25f;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff1c,0 5px 0 #140d20,0 20px 40px -16px #07030f}
html:not(.art-a) #gameFrame #wardrobePreview{background:radial-gradient(29% 5.2% at 50% 71.5%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(30.5% 6.6% at 50% 73.2%,#140d20 0 80%,transparent 87%),radial-gradient(42% 11% at 50% 72%,#ffd25f1f,transparent 80%)}
html:not(.art-a) .fitting-stage h3{text-shadow:0 2px 0 #140d20}
html:not(.art-a) #wardrobe .inventory-item{--rar:#a9e6b5;--glow:#a9e6b52e;border:2px solid #5a4780;border-radius:16px;background:radial-gradient(60% 46% at 50% 40%,var(--glow),transparent 72%),linear-gradient(180deg,#3a2b50,#2d2141);box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -4px 0 var(--rar),0 4px 0 #140d20;transition:transform .12s,border-color .15s}
html:not(.art-a) #wardrobe .inventory-item.rarity-uncommon{--rar:#8fe39c;--glow:#8fe39c2e}
html:not(.art-a) #wardrobe .inventory-item.rarity-rare{--rar:#8fc2ff;--glow:#8fc2ff38}
html:not(.art-a) #wardrobe .inventory-item.rarity-epic{--rar:#d9a2ff;--glow:#d9a2ff40}
html:not(.art-a) #wardrobe .inventory-item.rarity-mastery{--rar:#ffd25f;--glow:#ffd25f40;border-color:#b98a3f}
html:not(.art-a) #wardrobe .inventory-item:hover{transform:translateY(-2px);border-color:#9c86c6}
html:not(.art-a) #wardrobe .inventory-item:has(.cosmetic-card:focus-visible){border-color:#ffd25f}
html:not(.art-a) #gameFrame :is(#collectionList,#savedLooks) canvas{background:radial-gradient(40px 7.5px at 50% 66%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(42px 9.5px at 50% calc(66% + 2.5px),#140d20 0 80%,transparent 87%)}
html:not(.art-a) #wardrobe .cosmetic-card small{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:9px;background:#1d1429b3;box-shadow:inset 0 0 0 1.5px var(--rar,#6e5895)}
html:not(.art-a) #wardrobe .inventory-item>button[data-craft]{background:linear-gradient(180deg,#c9f0c3,#a7dca4);border-top:2px solid #140d20;color:#1f2a22;font-weight:700}
html:not(.art-a) #savedLooks article{border-radius:16px}
html:not(.art-a) .crate-theatre{border:2px solid #e9b85a;border-top:8px solid #ffd25f;background:conic-gradient(from 158deg at 50% -6%,transparent,#fff1c41c 12deg 32deg,transparent 44deg),linear-gradient(180deg,#35274c,#2a1e3c 60%,#221831);box-shadow:inset 0 1px 0 #ffffff1c,0 5px 0 #140d20}
html:not(.art-a) .crate-theatre #crateBox{font-size:0;width:170px;height:150px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 150'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ff8cc6'/><stop offset='1' stop-color='%23c94488'/></linearGradient><linearGradient id='l' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffb3dc'/><stop offset='1' stop-color='%23e0609f'/></linearGradient><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23ffe594'/><stop offset='.5' stop-color='%23ffd25f'/><stop offset='1' stop-color='%23e3a444'/></linearGradient></defs><ellipse cx='85' cy='140' rx='66' ry='9' fill='%2307030f' opacity='.5'/><rect x='26' y='66' width='118' height='72' rx='10' fill='url(%23b)' stroke='%23291e38' stroke-width='4.5'/><path d='M34 76v52' stroke='%23fff' stroke-opacity='.4' stroke-width='5' stroke-linecap='round'/><rect x='72' y='66' width='26' height='72' fill='url(%23g)' stroke='%23291e38' stroke-width='4'/><rect x='16' y='46' width='138' height='28' rx='9' fill='url(%23l)' stroke='%23291e38' stroke-width='4.5'/><path d='M26 54h36' stroke='%23fff' stroke-opacity='.55' stroke-width='4' stroke-linecap='round'/><rect x='70' y='46' width='30' height='28' fill='url(%23g)' stroke='%23291e38' stroke-width='4'/><path d='M85 46C70 18 38 22 46 38c4 8 24 8 39 8zM85 46c15-28 47-24 39-8-4 8-24 8-39 8z' fill='url(%23g)' stroke='%23291e38' stroke-width='4' stroke-linejoin='round'/><path d='M60 34c6-2 14 2 18 8M110 34c-6-2-14 2-18 8' fill='none' stroke='%23fff6cf' stroke-width='3' stroke-linecap='round'/><circle cx='85' cy='45' r='8' fill='%23ffd25f' stroke='%23291e38' stroke-width='4'/><path d='M150 18l2.6 6.4 6.4 2.6-6.4 2.6-2.6 6.4-2.6-6.4-6.4-2.6 6.4-2.6zM20 20l2 4.8 4.8 2-4.8 2-2 4.8-2-4.8-4.8-2 4.8-2z' fill='%23ffe7a6'/><circle cx='36' cy='104' r='3' fill='%23fff' opacity='.5'/><circle cx='128' cy='92' r='4' fill='%238fe3c7' stroke='%23291e38' stroke-width='2'/><circle cx='118' cy='122' r='3.4' fill='%23ffd25f' stroke='%23291e38' stroke-width='2'/><circle cx='52' cy='118' r='3.4' fill='%238fc2ff' stroke='%23291e38' stroke-width='2'/></svg>") center/contain no-repeat;filter:drop-shadow(0 6px 10px #07030f80)}
html:not(.art-a) .crate-theatre.rarity-rare{border-color:#8fc2ff;box-shadow:inset 0 0 70px #5f9cee30,0 5px 0 #140d20}
html:not(.art-a) .crate-theatre.rarity-epic{border-color:#d9a2ff;box-shadow:inset 0 0 90px #ca78ff45,0 5px 0 #140d20}

/* Room lobby: the dressing-room line-up stands on the same display stands. */
html:not(.art-a) :is(#roomBar,.playlist-box){background:linear-gradient(180deg,#36284c,#2c2040);border:2px solid #5f4c84;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff1c,0 4px 0 #140d20,0 14px 30px -12px #07030fcc}
html:not(.art-a) .room-exits{border-top:2px solid #4a3a66}
html:not(.art-a) :is(.room-exits details,.room-close){border:2px solid #a8607e;border-radius:12px;background:#3a2238;box-shadow:0 3px 0 #140d20}
html:not(.art-a) :is(.room-exits,.room-close) [data-close-room]{background:linear-gradient(180deg,#9a4a68,#74384f);border:2px solid #140d20;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 #140d20}
html:not(.art-a) .lobby-player{background:radial-gradient(70% 42% at 50% 34%,#ffffff0f,transparent 70%),linear-gradient(180deg,#3a2b50,#2d2141);border:2px solid #5a4780;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff1c,0 4px 0 #140d20}
html:not(.art-a) #gameFrame .lobby-player:not(.empty-seat) canvas{background:radial-gradient(50px 9.5px at 50% 79.5%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(52px 12px at 50% calc(79.5% + 3px),#140d20 0 80%,transparent 87%)}
html:not(.art-a) #gameFrame #wardrobePeers .lobby-player:not(.empty-seat) canvas{background:radial-gradient(32px 6px at 50% 79.5%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(33px 7.5px at 50% calc(79.5% + 2px),#140d20 0 80%,transparent 87%)}
html:not(.art-a) .lobby-player.is-you{border-color:#e9b85a;border-top:7px solid #ffd25f;box-shadow:inset 0 1px 0 #ffffff1c,0 4px 0 #140d20,0 0 26px -6px #ffd25f55}
html:not(.art-a) .lobby-player.empty-seat{background:repeating-linear-gradient(135deg,#ffffff07 0 10px,transparent 10px 20px),#281d37;border:2px dashed #5a4780;box-shadow:inset 0 3px 8px #07030f80}
html:not(.art-a) .lobby-emotes button,html:not(.art-a) .playlist-presets button:not(.quiet){background:linear-gradient(180deg,#5a4470,#46345d);border:2px solid #7862a0;border-radius:20px;color:#ffe7a6;box-shadow:inset 0 1px 0 #ffffff2a,0 3px 0 #140d20}
html:not(.art-a) .lobby-emotes button:hover{border-color:#9c86c6;filter:brightness(1.08)}
html:not(.art-a) #lobbyAction{background:linear-gradient(180deg,#35274cf5,#291e38f5);border:2px solid #5f4c84;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff1c,0 -12px 30px #07030f99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:not(.art-a) #lobbyAction #readyRoom{border:2px solid #2a1c36;box-shadow:inset 0 2px 0 #fff6cf,inset 0 -3px 0 #df9c3a,0 4px 0 #8a552b}
html:not(.art-a) #lobbyAction #readyRoom.is-ready{box-shadow:inset 0 2px 0 #eafff2,inset 0 -3px 0 #4fbf82,0 4px 0 #2d6b4a}

html:not(.art-a) .crate-reel{border-radius:16px;box-shadow:inset 0 0 0 2px #5f4c84,inset 0 8px 16px #07030fb3}
html:not(.art-a) .reel-card{border:2px solid #140d20;border-bottom-width:5px;border-bottom-color:#a9e6b5;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff1c}
html:not(.art-a) .reel-card.rarity-rare{border-bottom-color:#8fc2ff}html:not(.art-a) .reel-card.rarity-epic{border-bottom-color:#d9a2ff}

/* Progress: chunky bars with a gold, candy-striped fill. */
html:not(.art-a) :is(.level-chip i,.next-goal i,.xpbar){background:#1b1228;box-shadow:inset 0 1px 2px #000a,0 0 0 1.5px #140d20}
html:not(.art-a) .level-head .xpbar{height:14px;border-radius:8px}
html:not(.art-a) .next-goal i{height:9px;border-radius:6px}
html:not(.art-a) :is(.level-chip s,.next-goal s,.xpbar i){background:repeating-linear-gradient(135deg,#ffffff38 0 5px,transparent 5px 10px),linear-gradient(180deg,#ffeaa3,#ffcf5a 55%,#f0ae3f);box-shadow:inset 0 1px 0 #fff8}
html:not(.art-a) :is(.challenge,.achievement,.mastery,.track-step){border:2px solid #4f3e70;border-radius:12px;background:linear-gradient(180deg,#33264a,#2a1f3d);box-shadow:inset 0 1px 0 #ffffff14,0 3px 0 #140d20}
html:not(.art-a) .mastery{border-left:5px solid var(--tier)}
html:not(.art-a) .track-step.crate{border-color:#e9b85a}html:not(.art-a) .track-step.special{border-color:#8fe3c7;background:linear-gradient(180deg,#2c3a3c,#24302f)}
html:not(.art-a) .challenge.done{background:linear-gradient(180deg,#2a3a33,#22302a);border-color:#5c9a7a}
html:not(.art-a) .achievement:hover{border-color:#9c86c6}
html:not(.art-a) :is(.challenge,.achievement,.mastery) progress{-webkit-appearance:none;appearance:none;border:0;border-radius:6px;background:#1b1228;box-shadow:inset 0 1px 2px #000a,0 0 0 1.5px #140d20;overflow:hidden}
html:not(.art-a) :is(.challenge,.achievement,.mastery) progress::-webkit-progress-bar{background:#1b1228;border-radius:6px}
html:not(.art-a) :is(.challenge,.achievement) progress::-webkit-progress-value{background:linear-gradient(180deg,#ffeaa3,#ffcf5a 55%,#f0ae3f);border-radius:6px}
html:not(.art-a) :is(.challenge,.achievement) progress::-moz-progress-bar{background:linear-gradient(180deg,#ffeaa3,#ffcf5a 55%,#f0ae3f);border-radius:6px}
html:not(.art-a) .mastery progress::-webkit-progress-value{background:var(--tier);border-radius:6px}
html:not(.art-a) .mastery progress::-moz-progress-bar{background:var(--tier);border-radius:6px}

@media(max-width:550px){html:not(.art-a) #wardrobe .locker-tabs button{flex-direction:column;gap:3px;padding:8px 4px;line-height:1.15}html:not(.art-a) #gameFrame #wardrobePreview{background:radial-gradient(67px 12px at 50% 71.5%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(70px 15px at 50% calc(71.5% + 4px),#140d20 0 80%,transparent 87%),radial-gradient(96px 26px at 50% 72%,#ffd25f1f,transparent 80%)}html:not(.art-a) #gameFrame :is(#collectionList,#savedLooks) canvas{background:radial-gradient(34px 6.5px at 50% 66%,#6a5590 0 60%,#4a3868 64% 88%,transparent 93%),radial-gradient(36px 8.5px at 50% calc(66% + 2px),#140d20 0 80%,transparent 87%)}}
@media(max-width:420px){html:not(.art-a) #frameToolbar :is(#frameMenu,#frameCosmetics,#fullscreen)::before{display:none}html:not(.art-a) #menuControls .cosmetics-entry{padding-right:88px}html:not(.art-a) #menuControls .cosmetics-entry::after{width:60px;height:60px;margin-top:-30px;right:14px}}
@media(prefers-reduced-motion:reduce){html:not(.art-a) :is(.quiet,.primary,.inventory-item,.cosmetics-entry::after){transition:none}}