/* Skin Gallery and Map Gallery (js/gallery-page.js) */
[hidden]{display:none!important}
/* the page scrollbar comes and goes as filters change the grid: keep its space so nothing jumps sideways */
html{scrollbar-gutter:stable}
.kinds{display:flex;gap:8px;margin-top:18px}
.kinds a{padding:8px 16px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:800;text-decoration:none;font-size:14px}
.kinds a:hover{color:#fff;border-color:#3a4657}
.kinds a[aria-current=page]{color:#fff;border-color:var(--blue);background:#17304d}
.sk img.th{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#05070b}
.pv img.big{width:100%;border-radius:12px;border:1px solid var(--line);background:#05070b;display:block}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.facts div{padding:8px 10px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg2);font-size:12px;color:var(--muted)}
.facts b{display:block;color:var(--text);font-size:15px}
.top .authBox{align-self:center}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{padding:9px 15px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#06101f}
.btn.danger{color:#ffb3bc}
.btn.danger:hover:not(:disabled){border-color:var(--red)}
.btn.small{padding:6px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 16px}
.filters input,.filters select{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;font-size:14px}
.filters input{flex:1 1 220px;min-width:0}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--blue)}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--bg2);border:1px solid var(--line);gap:3px}
.seg button{min-width:64px;padding:6px 12px;border:0;border-radius:8px;background:transparent;color:#9fb0c6;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:#17304d;color:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
.count{color:var(--muted);font-size:13px;margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sk{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#111823,#0c1118);overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;font:inherit;transition:border-color .15s,transform .15s}
.sk:hover,.sk:focus-visible{border-color:var(--blue);transform:translateY(-2px);outline:none}
.sk canvas{display:block;width:100%;aspect-ratio:16/10;image-rendering:pixelated;background:#05070b}
.sk .b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.sk .nm{font-weight:800;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);min-width:0}
.who img{width:20px;height:20px;border-radius:50%;flex:0 0 auto}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.badge{display:inline-block;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.04em;background:var(--blue-dim);color:var(--blue)}
.badge.clan{background:rgba(242,196,0,.13);color:var(--gold)}
.badge.rank{font-size:10px;background:rgba(87,230,255,.12);color:var(--neon);text-transform:uppercase}
.badge.rank.leader{background:rgba(242,196,0,.16);color:var(--gold)}
.badge.priv{background:rgba(255,93,108,.14);color:#ff9aa5}
.stars{color:var(--gold);letter-spacing:1px;white-space:nowrap}
.stars .off{color:#3a4557}
.empty{padding:50px 10px;text-align:center;color:var(--muted)}
.empty b{color:var(--text)}

/* detail dialog */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(3,5,9,.74);backdrop-filter:blur(6px);z-index:50;padding:16px}
.modal.on{display:grid}
.dialog{position:relative;width:min(980px,100%);max-height:calc(100vh - 32px);overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain;border-radius:18px;border:1px solid #273448;background:linear-gradient(180deg,#101724,#0a0f17);box-shadow:0 30px 80px #000c;padding:22px}
.x{position:absolute;right:14px;top:14px}
.det{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
.pv{display:flex;flex-direction:column;gap:8px;min-width:0}
.pv canvas{width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);image-rendering:pixelated;background:#05070b}
.pvc{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pvc input[type=range]{flex:1;accent-color:var(--blue)}
.sw{display:inline-flex;align-items:center;gap:5px}
.sw i{width:14px;height:14px;border-radius:4px;border:1px solid #0009;box-shadow:0 0 0 1px #2b3a50}
.info h2{margin:0 36px 6px 0;font-family:var(--font-display);font-size:28px;letter-spacing:.02em;line-height:1.1;word-break:break-word}
.info .desc{margin:10px 0 0;color:#c3cedb;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.rate{margin-top:14px;padding:12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg2)}
.rate .avg{font-size:22px;font-weight:900}
.rate .rrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick{display:inline-flex;gap:2px}
.pick button{border:0;background:none;padding:0 2px;font-size:26px;line-height:1;color:#3a4557;cursor:pointer}
.pick button.on{color:var(--gold)}
.pick button:disabled{cursor:default}
.small-note{font-size:12.5px;color:var(--muted)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.edit{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:10px}
.edit label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.edit label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:13.5px}
.edit input[type=text],.edit textarea,.edit select,.cform textarea{padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;font-size:14px}
.edit textarea,.cform textarea{box-sizing:border-box;width:100%;height:84px;min-height:64px;max-height:260px;resize:vertical;overflow-y:auto}
.msg{min-height:18px;font-size:13px;margin:6px 0 0}
.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.comments{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:16px}
.comments h3{margin:0 0 10px;font-family:var(--font-display);font-size:19px;letter-spacing:.04em}
.cm{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cm img{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.cm .t{flex:1;min-width:0}
.cm .h{font-size:12.5px;color:var(--muted)}
.cm .h b{color:var(--text)}
.cm p{margin:3px 0 0;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cm .del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 0 0 8px}
.cm .del:hover{color:var(--red)}
.cform{display:flex;flex-direction:column;gap:8px;margin-top:12px;overflow-anchor:none}
.cform .r{display:flex;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;padding:9px 14px;border-radius:11px;background:#0f1a29;border:1px solid #2d4466;color:#e8f1ff;font-size:13px;font-weight:600;box-shadow:0 12px 30px #000a;transition:.2s;pointer-events:none;z-index:70}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.det{grid-template-columns:1fr}.count{margin-left:0;width:100%}}
/* Crown Gallery (crowns.js): transparent PNG crowns on a dark tile */
.sk .crc{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#1d2636,#070a10 75%)}
.sk .crc img{width:58%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.sk .crcOn{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:7px;background:rgba(242,196,0,.18);color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.04em}
.crBig{aspect-ratio:1;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.crBig img{width:72%;height:72%;object-fit:contain}
.crBig[data-bg=dark]{background:radial-gradient(circle at 50% 45%,#1d2636,#070a10 75%)}
.crBig[data-bg=light]{background:#e9edf2}
.crBig[data-bg=check]{background:repeating-conic-gradient(#1a2230 0 25%,#121925 0 50%) 0 0/20px 20px}
.crBig[data-bg=map]{background:radial-gradient(ellipse 70% 55% at 55% 58%,#c98a3a 0 96%,#7a4d12 97% 99%,transparent 100%),radial-gradient(ellipse 30% 25% at 6% 8%,#4f9a46 0 99%,transparent 100%),#1d5f9e}