/* The shared dressing room and the cosmetic layer never change puzzle rules. */
.header-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.header-tools #appearance-controls{margin-left:0}
.collection-trigger{display:grid;place-items:center;width:35px;height:37px;flex-shrink:0;background:var(--surface,#fff);border:1px solid var(--stroke,#e9e8f0);border-radius:10px;color:var(--appearance-accent,#9a82bf)}
.collection-trigger svg{width:17px;height:17px}
.collection-trigger:hover{background:var(--surface-soft,#f5f3fa)}
.topbar .header-note{display:none}
.collection-dialog{width:min(820px,calc(100vw - 32px));max-width:none;max-height:85dvh;overflow:auto;border:1px solid var(--stroke,#e9e8f0);background:var(--surface,#fff);color:var(--text,#252a37);border-radius:23px;text-align:left;padding:35px 28px 25px;box-shadow:0 25px 100px #1c15342b;scrollbar-width:thin}
.collection-dialog::backdrop{background:#14182b88;backdrop-filter:blur(8px)}
.collection-dialog-close{position:sticky;display:grid;place-items:center;z-index:4;float:right;top:0;width:29px;height:29px;margin:-20px -12px 0 0;background:var(--surface-soft,#f5f3fa);color:var(--text-soft,#9295a5);border:1px solid var(--stroke,#e9e8f0);border-radius:50%;font-size:20px;line-height:1}
#collection{margin-top:38px;scroll-margin-top:25px}
.reward-toasts{position:fixed;z-index:1100;right:24px;top:105px;display:flex;flex-direction:column;gap:9px;pointer-events:none;max-width:min(320px,calc(100vw - 32px))}
.reward-toast{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--stroke,#e9e8f0);border-radius:14px;background:var(--surface,#fff);color:var(--text,#252a37);box-shadow:0 12px 35px #251c3a1a;animation:reward-arrive .3s ease-out}
.reward-toast-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:11px;color:#b59b6e;background:#cbb78417;font-size:22px}
.reward-toast strong{display:block;font-size:11px;font-weight:600}
.reward-toast div>span{display:block;margin-top:5px;font-size:10px;color:var(--text-soft,#9295a5)}
.bs-dress-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.bs-dress-bar>span{font-size:9px;color:var(--text-soft,#9295a5);letter-spacing:.3px}
.bs-customize{display:inline-flex;align-items:center;gap:5px;background:var(--surface,#fff);border:1px solid var(--stroke,#e9e8f0);border-radius:8px;padding:8px 11px;font-size:10px;color:var(--appearance-accent,#9a82bf)}
.bs-customize:hover{background:var(--surface-soft,#f5f3fa)}
html[data-ball-skin=pearl] :is(.bs-game .bs-ball,.bs-flying-ball):not(.is-hidden){background:radial-gradient(circle at 29% 22%,#fffdf8e0 0%,#fff3dd44 25%,transparent 61%),var(--ball-color);box-shadow:inset -3px -4px 5px #30304a12,inset 1px 1px 2px #ffffffb8,0 2px 3px #6a547314}
html[data-ball-skin=neon] :is(.bs-game .bs-ball,.bs-flying-ball):not(.is-hidden){background:radial-gradient(circle at 30% 25%,#ffffffa6,transparent 52%),var(--ball-color);box-shadow:inset 0 0 0 1.5px #ffffff4f,0 0 9px color-mix(in srgb,var(--ball-color) 60%,transparent),inset -2px -3px 0 #00000015}
html[data-ball-skin=stardust] :is(.bs-game .bs-ball,.bs-flying-ball):not(.is-hidden){background:radial-gradient(circle at 22% 35%,#ffffffcd 0 1px,transparent 1.3px),radial-gradient(circle at 69% 24%,#ffffffdf 0 1px,transparent 1.3px),radial-gradient(circle at 64% 72%,#ffffff99 0 1px,transparent 1.3px),radial-gradient(circle at 30% 25%,#ffffff90,transparent 55%),var(--ball-color);box-shadow:inset 0 0 0 1px #ffffff45,0 0 8px color-mix(in srgb,var(--ball-color) 27%,transparent)}
html[data-ball-skin=stardust] :is(.bs-game .bs-ball,.bs-flying-ball):not(.is-hidden):after{content:'✦';position:absolute;display:grid;place-items:center;inset:22%;font-size:14px;line-height:1;color:#ffffff9c}
html[data-tube-skin=frost] .bs-game .bs-tube-button:not(.is-sealed) .bs-tube{background:linear-gradient(110deg,#e2f4fc67,#ffffff05 40%,#dcecfb60);box-shadow:inset 3px 0 0 #ffffffa0,inset -2px 0 2px #b6d5e655,0 3px 10px #8caec61a}
html[data-tube-skin=crystal] .bs-game .bs-tube-button:not(.is-sealed) .bs-tube{border-bottom-left-radius:14px;border-bottom-right-radius:14px;background:linear-gradient(82deg,#bbd3e522 0 13%,#fff6 14% 19%,transparent 20% 74%,#dbd4f544 75% 86%,#fff4 87%);box-shadow:inset 2px 0 0 #ffffff99,inset -2px 0 0 #d3cce438,0 3px 8px #7c709915}
html[data-tube-skin=gold] .bs-game .bs-tube-button:not(.is-sealed):not(.has-gate) .bs-tube:before{border-color:#cbb986;background:linear-gradient(#f7efcf,#dfcca0);box-shadow:0 1px 3px #a48e5520}
html[data-tube-skin=gold] .bs-game .bs-tube-button:not(.is-sealed) .bs-tube{box-shadow:inset 2px 0 0 #ffffff9c,inset -1px -2px 0 #cbb9867a,0 4px 9px #bba36316}
@keyframes reward-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.topbar:has(.header-tools){gap:22px}.header-tools{gap:6px}}
@media(max-width:650px){.topbar:has(.header-tools){height:auto;min-height:76px;flex-wrap:wrap;padding:15px 20px;gap:12px}.topbar:has(.header-tools) nav{order:3;flex-basis:100%;height:32px;gap:24px;justify-content:center}.topbar:has(.header-tools) nav>a.active:after{bottom:-10px}.game-page .topbar:has(.header-tools) nav{display:none}.game-page .topbar:has(.header-tools) .back-link{display:none}.header-tools{gap:5px}.collection-trigger{width:31px;height:35px}#collection{margin-top:27px}.collection-dialog{padding:30px 17px 20px;border-radius:18px}.reward-toasts{top:85px;right:16px}.reward-toast{padding:12px 14px}.bs-dress-bar{margin-bottom:14px}.bs-dress-bar>span{font-size:8px}.bs-customize{font-size:9px}}
@media(prefers-reduced-motion:reduce){.reward-toast{animation:none}.collection-dialog::backdrop{backdrop-filter:none}}