#screen #btn-skin-gallery { display:flex; align-items:center; width:100%; gap:12px; padding:0 12px 0 0; margin:0 0 20px; text-align:left; background:#10232b; border:1px solid #72858055; color:#f3ead7; }
#btn-skin-gallery img { width:64px; height:64px; object-fit:cover; }
#btn-skin-gallery span { display:grid; gap:4px; flex:1; }
#btn-skin-gallery small { color:#b6c5c8; font-size:12px; font-weight:400; }
#btn-skin-gallery b { color:#d9bc83; font-size:12px; }
.skin-gallery { --skin-ivory:#f3ead7; --skin-muted:#b6c5c8; --skin-gold:#d9bc83; box-sizing:border-box; width:min(1060px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); margin:auto; padding:32px; overflow:auto; border:1px solid #647774; border-radius:12px; color:var(--skin-ivory); background:#0c1c24; box-shadow:0 24px 80px #03090db3; font:14px/1.5 Manrope,Arial,sans-serif; }
.skin-gallery::backdrop { background:#030b12d9; }
.skin-gallery[open] { animation:skin-gallery-enter 200ms ease-out; }
.skin-gallery * { box-sizing:border-box; }
.skin-gallery header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; gap:16px; }
.skin-gallery .skin-gallery__eyebrow { color:var(--skin-gold); font-size:12px; margin:0 0 4px; }
.skin-gallery h2 { font:500 42px/1.1 'Cormorant Garamond',Georgia,serif; letter-spacing:-.025em; margin:0; }
.skin-gallery button,.skin-gallery select { font:inherit; letter-spacing:0; clip-path:none; box-shadow:none; min-height:44px; border-radius:8px; cursor:pointer; }
.skin-gallery button:focus-visible,.skin-gallery select:focus-visible { outline:2px solid var(--skin-gold); outline-offset:3px; }
.skin-gallery .skin-gallery__close { width:44px; height:44px; padding:10px; display:grid; place-items:center; background:none; color:var(--skin-ivory); border:1px solid #647774; flex:none; }
.skin-gallery__close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.skin-gallery__body { display:grid; grid-template-columns:1.05fr 1fr; gap:32px; }
.skin-gallery__stage { height:380px; position:relative; overflow:hidden; border-radius:8px; background:#10232b; touch-action:none; cursor:grab; }
.skin-gallery__stage:active { cursor:grabbing; }
.skin-gallery__stage canvas { display:block; width:100%;height:100%; }
.skin-gallery__loader { position:absolute; inset:0; z-index:1; display:grid; place-content:center; justify-items:center; align-content:center; gap:10px; padding:28px; overflow:hidden; text-align:center; color:var(--skin-ivory); background:radial-gradient(circle at 50% 38%,#28414a 0,#152d37 43%,#10232b 100%); }
.skin-gallery [hidden] { display:none!important; }
.skin-gallery__loader::before { content:""; position:absolute; width:240px; height:240px; border:1px solid #d9bc8333; border-radius:50%; box-shadow:0 0 0 28px #d9bc8308,0 0 0 62px #d9bc8305; }
.skin-gallery__loader > * { position:relative; }
.skin-gallery__loader-orbit { width:40px; height:40px; border:2px solid #d9bc8333; border-top-color:var(--skin-gold); border-right-color:var(--skin-gold); border-radius:50%; animation:skin-loader-spin 850ms linear infinite; }
.skin-gallery__loader-skeleton { display:grid; grid-template-columns:38px 38px 38px; gap:8px; opacity:.65; }
.skin-gallery__loader-skeleton i { display:block; height:5px; border-radius:999px; background:#b6c5c855; animation:skin-loader-pulse 1.2s ease-in-out infinite; }
.skin-gallery__loader-skeleton i:nth-child(2) { animation-delay:120ms; }.skin-gallery__loader-skeleton i:nth-child(3) { animation-delay:240ms; }
.skin-gallery__loader-title { margin:4px 0 0; font:600 18px/1.2 'Cormorant Garamond',Georgia,serif; letter-spacing:.01em; }
.skin-gallery__loader-copy { max-width:230px; margin:0; color:var(--skin-muted); font-size:12px; }
.skin-gallery__retry { margin-top:4px; padding:8px 14px; min-height:36px!important; color:#10232b; background:var(--skin-gold); border:0; font-size:12px!important; font-weight:700; }
.skin-gallery[data-preview-state=error] .skin-gallery__loader-orbit,.skin-gallery[data-preview-state=error] .skin-gallery__loader-skeleton { display:none; }
.skin-gallery__status { color:var(--skin-muted); font-size:12px; min-height:18px; margin:8px 0 16px; }
.skin-gallery__controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.skin-gallery label { display:grid; gap:6px; color:var(--skin-muted); font-size:12px; }
.skin-gallery select { background:#152b35; color:var(--skin-ivory); border:1px solid #647774; padding:8px; width:100%; }
.skin-gallery h3 { font:500 32px/1.2 'Cormorant Garamond',Georgia,serif; letter-spacing:-.02em; margin:0 0 8px; }
.skin-gallery__description { color:var(--skin-muted); min-height:44px; margin:0 0 20px; }
.skin-gallery__cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.skin-gallery .skin-card { display:flex; flex-direction:column; gap:2px; padding:0 0 10px; overflow:hidden; border:1px solid #647774; background:#10232b; color:var(--skin-ivory); text-align:left; transition:border-color 150ms ease; }
.skin-card img { width:100%; height:120px; object-fit:cover; object-position:center 36%; }
.skin-card span,.skin-card small { margin:0 10px; }
.skin-card span { margin-top:6px; font-size:14px; font-weight:600; }
.skin-card small { font-size:12px; color:var(--skin-muted); }
.skin-gallery .skin-card[aria-pressed=true] { border:2px solid var(--skin-gold); background:#28332f; }
.skin-gallery .skin-card:hover { border-color:var(--skin-gold); }
.skin-gallery footer { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #72858055; padding-top:20px; margin-top:24px; }
.skin-gallery footer p { color:var(--skin-muted); font-size:12px; margin:0; }
.skin-gallery .skin-gallery__use { padding:12px 32px; background:var(--skin-gold); color:#10232b; border:0; font-weight:700; white-space:nowrap; }
.skin-gallery__use:disabled { opacity:.5;cursor:wait; }
 .skin-gallery button:disabled,.skin-gallery select:disabled { cursor:not-allowed; opacity:.48; }
@keyframes skin-gallery-enter { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} }
@keyframes skin-loader-spin { to { transform:rotate(360deg); } }
@keyframes skin-loader-pulse { 50% { opacity:.32; transform:scaleX(.68); } }
@media(max-width:680px) { .skin-gallery { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:20px; } .skin-gallery__body { grid-template-columns:1fr; gap:24px; } .skin-gallery__stage {height:300px} .skin-gallery h2{font-size:34px} .skin-gallery footer{align-items:stretch;flex-direction:column;gap:12px} .skin-gallery__description{min-height:0} }
@media(prefers-reduced-motion:reduce){.skin-gallery[open]{animation:none}.skin-card{transition:none}.skin-gallery__loader-orbit,.skin-gallery__loader-skeleton i{animation:none}}

/* Follow the authoritative match skin, including reconnects to an existing seat. */
body[data-hero-skin]:not([data-hero-skin="hunter"]) #hero-portrait,
body[data-hero-skin]:not([data-hero-skin="hunter"]) .hud-icon[data-icon="hero"],
.board-portrait[data-skin]:not([data-skin="hunter"]) { background-image:var(--skin-portrait); background-size:260%; background-position:50% 18%; }