@font-face{font-family:Outfit;font-weight:100 900;src:url(fonts/outfit-latin-wght-normal.woff2) format('woff2'),url(fonts/Outfit-Regular.ttf) format('truetype')}


@font-face{font-family:Italiana;src:url(fonts/Italiana-Regular.ttf)}

:root{
  --bg:#0b0c10;--panel:#121319;--card:#15161c;--card2:#1c1d24;--line:#23252e;--line2:#2b2d37;
  --ink:#ece6da;--ink2:#d6cfc0;--muted:#8a8373;--muted2:#6e675a;
  --gold:#f0cf8a;--gold2:#e8c98a;--goldbg:#2a2419;--goldline:#5a4a2a;
  --battle:#ff9f8a;--quest:#ffd46a;--nc:#9fd8ff;
  --cols:6;
}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 Outfit,"Segoe UI",Tahoma,sans-serif;direction:rtl;overflow:hidden;
  background-image:radial-gradient(ellipse at 78% -25%,#2c2616 0%,#0b0c10 52%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:var(--gold2)}
.ltr{direction:ltr}
svg.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#2a2c36;border-radius:10px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}

.wrap{height:100vh;display:flex;flex-direction:column;padding:16px 26px 0}
.head{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.brand{font-family:Italiana,serif;font-size:29px;letter-spacing:.08em;color:var(--gold2);direction:ltr;white-space:nowrap}
.search{flex:1;min-width:0;height:48px;border-radius:14px;background:#14151b;border:1px solid #272933;display:flex;align-items:center;padding:0 16px;gap:10px;color:var(--muted);direction:ltr}
.search:focus-within{border-color:var(--goldline)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:15px;color:var(--ink)}
.search input::placeholder{color:#6f6a5e}
.search kbd{font:12px Outfit;color:#6f6a5e;border:1px solid #2b2d37;border-radius:6px;padding:1px 7px}
.active-chips{display:flex;gap:6px;flex-shrink:0;max-width:55%;overflow:hidden}
.fchip{display:flex;align-items:center;gap:6px;background:var(--goldbg);color:var(--gold2);border:1px solid #4a3d25;border-radius:99px;padding:3px 10px 3px 12px;font-size:12.5px;white-space:nowrap}
.fchip b{font-weight:600}.fchip i{font-style:normal;opacity:.7;cursor:pointer}
.count{font-family:Outfit;color:var(--muted);font-size:14px;white-space:nowrap;direction:ltr}.count b{color:var(--ink);font-size:22px;margin-right:6px}

.sections{display:flex;gap:8px;margin-bottom:10px;direction:ltr;flex-shrink:0;overflow:hidden;align-items:flex-start}
.secs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:1;min-width:0;position:relative}
.sec{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:12px;color:#b0a896;font-weight:600;font-size:13.5px;white-space:nowrap;border:1px solid transparent}
.sec .si{width:26px;height:26px;border-radius:8px;overflow:hidden;background:radial-gradient(circle,#2a2c36,#15161c);flex-shrink:0}
.sec .si img{width:100%;height:100%;object-fit:cover}
.sec em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted2)}
.sec:hover{background:#15161c}
.sec.on{background:var(--goldbg);border-color:var(--goldline);color:var(--gold)}
.sec.on em{color:#a8905e}
.sec.aux{padding-left:12px}
.sec .sico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#1a1b22;color:var(--gold2)}

.row2{display:flex;align-items:center;gap:10px 14px;margin-bottom:8px;direction:ltr;flex-shrink:0;flex-wrap:wrap}
.seg{display:flex;background:#14151b;border:1px solid #2a2c36;border-radius:14px;padding:4px;gap:2px;flex-shrink:0;max-width:60%;overflow-x:auto;scrollbar-width:none}
.seg:empty{display:none}
.seg button{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:10px;font-size:13.5px;font-weight:700;color:#a59d8d;white-space:nowrap}
.seg button svg{width:16px;height:16px}.seg button em{font-style:normal;font-weight:400;font-size:12px;color:#77705f}
.seg button:hover{background:#1c1d24}
.seg button.on{background:var(--gold2);color:#17120a}.seg button.on em{color:#5b4a25}
.seg .battle{color:var(--battle)}.seg .quest{color:var(--quest)}.seg .nc{color:var(--nc)}
.tg{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.tg .t{display:flex;align-items:center;gap:6px;padding:4px 11px 4px 6px;border-radius:99px;background:#16171d;border:1px solid #2a2c36;font-size:12.5px;font-weight:600;color:#d6cfc0}
.tg .t svg{width:18px;height:18px}.tg .dv{width:1px;height:22px;background:#2a2c36;margin:0 3px}
.tg .t.on{border-color:var(--gold);box-shadow:0 0 0 2px #f0cf8a33;color:var(--gold)}
.acq{font-family:Outfit;font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:99px;white-space:nowrap;letter-spacing:0;word-spacing:.25em;font-variant-numeric:tabular-nums;display:inline-block}
.tg .acq{font-size:12.5px;padding:5px 12px;opacity:.85}.tg .acq.on{opacity:1;outline:2px solid var(--gold);outline-offset:1px}
.acq.ac{background:#3b2a5c;color:#d9c2ff}.acq.gold{background:#4a3a14;color:#ffd978}.acq.quest{background:#12403f;color:#8ff0e2}
.acq.drop{background:#4a1b20;color:#ff9aa2}.acq.merge{background:#4a2c12;color:#ffb877}.acq.free{background:#1d3d22;color:#9fe3a6}
.acq.chest{background:#2a2f46;color:#b7c3ff}.acq.other{background:#26272e;color:#b3ab9b}

/* tabs + carousel band (horizontal, snapping) */
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;direction:ltr;flex-shrink:0;overflow:hidden}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:4px 13px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--muted);border:1px solid transparent;white-space:nowrap;flex-shrink:0;scroll-snap-align:start;display:flex;align-items:center;gap:6px}
.tab em{font-style:normal;font-weight:400;font-size:11px;color:var(--muted2)}
.tab:hover{color:var(--ink2)}
.tab.on{color:var(--gold2);background:var(--goldbg);border-color:var(--goldline)}.tab.on em{color:#a8905e}
.bandwrap{position:relative;margin-bottom:12px;flex-shrink:0;direction:ltr}
.band{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:3px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
.band::-webkit-scrollbar{display:none}
.barr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;background:#1d1a12ee;border:1px solid var(--goldline);color:var(--gold);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #000a;transition:opacity .18s,transform .18s}
.barr.l{left:-6px}.barr.r{right:-6px}
.barr:hover{background:var(--gold2);color:#17120a}
.barr.off{opacity:0;pointer-events:none}
.bt{flex:0 0 148px;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;text-align:left;min-width:0;transition:border-color .12s,transform .15s}
.bt:hover{border-color:#3a3c48;transform:translateY(-2px)}
.bt .bi{height:84px;background:radial-gradient(ellipse at 50% 45%,#2a2c36,#14151b);position:relative;overflow:hidden}
.bt .bi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.bt .bi-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Italiana,serif;font-size:34px;color:#6e675a;letter-spacing:.05em}
.bt .bi.sw{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 75%,#fff 10%) 0,color-mix(in srgb,var(--c) 55%,#000) 60%,#0c0d11 100%)}
.bt .bi.sw img{opacity:.92;filter:drop-shadow(0 4px 10px #0009)}
.bt .bi.sw::after{content:"";position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 2px 6px #0009}
.bt .bl{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 10px;font-size:13px;font-weight:700;border-top:1px solid #2a2c36;background:linear-gradient(180deg,#1b1c23,#15161c);direction:ltr}
.bt .bl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt .bl em{font-style:normal;font-weight:400;color:var(--muted);font-size:11.5px}
.bt.on{border:2px solid var(--gold);box-shadow:0 0 0 3px #f0cf8a33,0 0 28px #f0cf8a40}.bt.on .bl{background:var(--gold);color:#17120a;border-top-color:var(--gold)}.bt.on .bl em{color:#5b4a25}
.bt.more{align-items:center;justify-content:center;color:var(--gold2);font-weight:700;font-size:14px;gap:2px;background:#14151b;border-style:dashed;min-height:114px}
.bt.more small{color:var(--muted);font-weight:400;font-size:11.5px}
.sheet .sg .bt{flex:none}

#browse{flex:1;min-height:0;display:flex;flex-direction:column}
.body{flex:1;display:grid;grid-template-columns:262px 1fr;grid-template-rows:minmax(0,1fr);gap:18px;min-height:0;padding-bottom:14px}
.body.sel{grid-template-columns:96px 1fr 412px}
.grid-wrap{overflow-y:auto;min-height:0;padding:2px 4px 24px;margin:-2px -4px 0}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;direction:ltr;align-content:start}
.card{border-radius:16px;overflow:hidden;background:var(--card);border:1px solid #22242d;display:flex;flex-direction:column;cursor:pointer;text-align:left;position:relative;transition:border-color .12s,transform .12s}
.card:hover{border-color:#3a3c48}
.card .stage{position:relative;aspect-ratio:1;background:radial-gradient(ellipse at 50% 90%,#e8c98a1a 0%,#0000 40%),radial-gradient(ellipse at 50% 42%,#262833 0%,#15161c 70%);overflow:hidden}
.card .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.cut .stage img{inset:2%;width:96%;height:96%;object-fit:contain}
.card.raw .stage img{inset:4%;width:92%;height:92%;object-fit:contain}
.card .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3c3e48;font-size:12px}
.mks{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:1}
.mk{display:block;width:22px;height:22px;filter:drop-shadow(0 2px 4px #0009)}.mk svg{width:22px;height:22px;display:block}
.cl{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#0b0c10cc;border:1px solid #ffffff1c;z-index:1}
.cl svg{width:15px;height:15px}.cl.battle{color:var(--battle)}.cl.quest{color:var(--quest)}.cl.nc{color:var(--nc)}
.vg{position:absolute;bottom:8px;right:8px;background:#0b0c10d0;border:1px solid #ffffff1c;border-radius:8px;padding:1px 7px;font-size:11px;color:var(--ink2);z-index:1}
.bonusdot{position:absolute;bottom:8px;left:8px;width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#f0cf8a,#b88a3a);display:flex;align-items:center;justify-content:center;z-index:1}
.bonusdot svg{width:14px;height:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;min-height:54px;background:linear-gradient(180deg,#1c1d24,#16171d);border-top:1px solid var(--line2)}
.nm{color:#f1ebdf;font-size:13.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bar .acq{flex-shrink:0}
.card.sel{border:2px solid var(--gold);box-shadow:0 0 0 3px #f0cf8a2e,0 0 30px #f0cf8a40}.card.sel .bar{background:linear-gradient(180deg,#2e2716,#221d12);border-top-color:#f0cf8a88}
.fav-heart{position:absolute;top:40px;right:8px;color:#ff8fa3;z-index:1;font-size:14px}
.empty{padding:60px 0;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:14px}
.empty button{border:1px solid var(--goldline);color:var(--gold2);border-radius:10px;padding:7px 16px}

.bonus{background:var(--panel);border:1px solid #2a2c36;border-radius:18px;padding:14px 12px;align-self:start;position:relative;max-height:100%;overflow-y:auto}
.bh{display:flex;align-items:center;gap:10px;direction:ltr;margin:0 2px 4px}
.bh i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#f0cf8a,#b88a3a);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bh i svg{width:18px;height:18px}
.bh b{font-size:14px;letter-spacing:.16em;color:var(--gold)}
.bsub{font-size:11.5px;color:var(--muted);direction:ltr;margin:0 4px 12px;line-height:1.35}
.br{display:flex;align-items:center;gap:10px;padding:5px;border-radius:12px;direction:ltr;width:100%;text-align:left;position:relative}.br+.br{margin-top:2px}
.br:hover{background:#1a1b22}
.br .ti{width:38px;height:38px;border-radius:10px;overflow:hidden;background:radial-gradient(circle,#2a2c36,#15161c);flex-shrink:0}.br .ti img{width:100%;height:100%;object-fit:cover}
.br b{flex:1;font-size:13.5px;font-weight:600;color:#ddd5c6}.br em{font-style:normal;font-size:12px;color:var(--muted)}
.br.on{background:var(--goldbg);outline:1px solid #f0cf8a66}.br.on b{color:var(--gold)}
.br.zero{opacity:.35}
.sep{font-size:10.5px;letter-spacing:.14em;color:var(--muted2);margin:10px 6px 4px;direction:ltr}
.bonus.mini{padding:12px 8px;overflow:visible}.bonus.mini .bh{flex-direction:column;gap:6px;margin-bottom:10px}.bonus.mini .bh b{font-size:10px;letter-spacing:.12em}.bonus.mini .bsub,.bonus.mini .sep{display:none}
.bonus.mini .br{justify-content:center;padding:4px}.bonus.mini .br b,.bonus.mini .br em{display:none}.bonus.mini .ti{width:50px;height:50px}
.bonus.mini .br:hover::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--gold);color:#17120a;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:10px;white-space:pre;box-shadow:0 8px 24px #0008;z-index:5;line-height:1.35}

.det{background:var(--panel);border:1px solid #272933;border-radius:20px;overflow:hidden;position:relative;align-self:start;direction:ltr;max-height:100%;overflow-y:auto}
.det .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:11px;background:#000a;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2}
.det .pi{height:300px;background:#050608;position:relative}
.det .pi img{width:100%;height:100%;object-fit:contain}
.det .pi .gl{position:absolute;left:10px;bottom:10px;display:flex;gap:6px}
.det .pi .gl button{background:#000b;border:1px solid #ffffff22;border-radius:8px;padding:2px 9px;font-size:11.5px;color:var(--ink2)}
.det .pi .gl button.on{border-color:var(--gold);color:var(--gold)}
.det .pb{padding:16px 20px 18px}
.det h2{font-size:23px;line-height:1.15;margin:0 0 10px;font-weight:700}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.bd{display:flex;align-items:center;gap:5px;padding:3px 9px 3px 5px;border-radius:99px;background:#1b1c23;border:1px solid var(--line2);font-size:12px;font-weight:600;color:#ddd5c6}
.bd svg{width:16px;height:16px}.bd.cls{padding-left:7px}.bd.cls.quest{color:var(--quest);border-color:#5a4a1e;background:#241f10}.bd.cls.battle{color:var(--battle);border-color:#5a2f24;background:#24130f}.bd.cls.nc{color:var(--nc);border-color:#23455a;background:#0f1d24}
.variants{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
.variants button{border:1px solid var(--line2);border-radius:8px;padding:2px 9px;font-size:12px;color:var(--ink2)}
.variants button.on{border-color:var(--gold);color:var(--gold)}
.facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.f{padding:7px 11px;border-bottom:1px solid var(--line);min-width:0}.f:nth-child(odd){border-right:1px solid var(--line)}.f.wide{grid-column:1/-1;border-right:0}
.facts .f:last-child,.facts .f:nth-last-child(2):nth-child(odd){border-bottom:0}
.f small{display:block;font-size:10.5px;letter-spacing:.08em;color:#7d7668;text-transform:uppercase}.f b{font-size:13.5px;font-weight:600;color:var(--ink);word-break:break-word}
.idc{display:inline-flex;align-items:center;gap:4px;background:#241f10;border:1px solid #5a4a1e;color:var(--gold);border-radius:6px;padding:0 6px;font-size:11.5px;font-weight:700;margin-left:4px;cursor:copy;vertical-align:1px}
.desc{color:#a9a191;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.act{display:flex;gap:10px;margin-top:12px}
.pri{flex:1;height:44px;border-radius:13px;background:var(--gold2);color:#1a1409;font-weight:700;font-size:14.5px}
.ghost{width:44px;height:44px;border-radius:13px;border:1px solid var(--line2);color:var(--gold2);font-size:18px;display:flex;align-items:center;justify-content:center}
.ghost.on{background:#3a1d24;border-color:#7a3444;color:#ff8fa3}

/* full page */
.full{position:fixed;inset:0;background:#07080bf2;z-index:20;display:flex;direction:ltr;backdrop-filter:blur(6px)}
.full .fx{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:12px;background:#1a1b22;border:1px solid var(--line2);font-size:17px;z-index:2}
.full .gal{width:46%;display:flex;flex-direction:column;padding:28px;gap:14px;border-right:1px solid var(--line)}
.full .gmain{flex:1;min-height:0;border-radius:20px;background:radial-gradient(ellipse at 50% 45%,#23252e,#0d0e12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.full .gmain img{width:100%;height:100%;object-fit:contain;padding:18px}
.full .gthumbs{display:flex;gap:10px;overflow-x:auto;flex-shrink:0}
.full .gthumbs button{flex-shrink:0;width:92px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--card)}
.full .gthumbs button img{width:100%;height:72px;object-fit:contain;background:#0e0f13;display:block}
.full .gthumbs button span{display:block;font-size:11px;color:var(--ink2);padding:3px 0}
.full .gthumbs button.on{border-color:var(--gold)}
.full .info{flex:1;overflow-y:auto;padding:30px 70px 40px 36px}
.full h1{font-size:32px;line-height:1.1;margin-bottom:6px}
.full .crumb{font-size:12px;letter-spacing:.14em;color:var(--gold2);text-transform:uppercase;margin-bottom:10px}
.full h3{font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin:22px 0 8px}
.full .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.full .kv .f{background:#15161c;border:1px solid var(--line);border-radius:12px}
.full .p{color:#c9c1b1;font-size:14.5px;line-height:1.6}
.full ul{padding-left:18px;color:#c9c1b1;line-height:1.6}
.full li.sub{list-style:circle;margin-left:14px;color:#a9a191}
.loc{background:#15161c;border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:6px}
.loc b{font-size:14px}.loc span{color:var(--muted);font-size:12.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips a,.chips span{background:#1b1c23;border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-size:12.5px;color:var(--ink2);text-decoration:none}
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skill{background:#15161c;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.skill b{font-size:15px}.skill .sm{font-size:11.5px;color:var(--gold2);margin:2px 0 6px}.skill p{font-size:13px;color:#b3ab9b;line-height:1.5}
.links{columns:2;font-size:13px}.links a{display:block;color:var(--ink2);text-decoration:none;padding:2px 0;break-inside:avoid}.links a:hover{color:var(--gold)}
.btnrow{display:flex;gap:10px;margin-top:16px}
.btn{border:1px solid var(--goldline);color:var(--gold2);border-radius:12px;padding:9px 16px;font-weight:600;text-decoration:none;font-size:13.5px}
.btn.pri{background:var(--gold2);color:#17120a;flex:none;padding:9px 22px;height:auto}

/* facet sheet */
.sheet{position:fixed;inset:0;background:#07080bd9;z-index:15;display:flex;align-items:center;justify-content:center;direction:ltr}
.sheet .sc{width:min(1400px,92vw);max-height:86vh;background:var(--panel);border:1px solid var(--line2);border-radius:22px;display:flex;flex-direction:column;overflow:hidden}
.sheet .sh{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet .sh b{font-size:18px}.sheet .sh input{flex:1;background:#0f1014;border:1px solid var(--line2);border-radius:10px;height:38px;padding:0 12px;outline:0}
.sheet .sg{padding:16px 20px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* list views (shops, quests) */
.list-view{flex:1;overflow-y:auto;direction:ltr;padding-bottom:30px}
.lv-head{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.lv-head h2{font-size:22px}.lv-head p{color:var(--muted);font-size:13px}
.lv-head input{margin-left:auto;width:360px;background:#14151b;border:1px solid #272933;border-radius:12px;height:40px;padding:0 14px;outline:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0 6px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600;padding:0 14px;text-transform:uppercase}
.tbl td{background:var(--card);padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tbl td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px;width:110px}
.tbl td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0;text-align:right}
.tbl tr:hover td{background:#1a1b22}
.tbl .idb{font-weight:700;color:var(--gold);cursor:copy}
.tbl .none{color:var(--muted2)}
.tbl button{border:1px solid var(--line2);border-radius:9px;padding:4px 12px;font-size:12.5px;color:var(--ink2)}
.tbl button:hover{border-color:var(--gold);color:var(--gold)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--gold);color:#17120a;font-weight:700;padding:9px 18px;border-radius:12px;z-index:40;box-shadow:0 10px 30px #000a;direction:ltr}
.nodata{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:50;direction:ltr}
.nd-card{max-width:560px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.nd-card h2{font-size:24px}.nd-card p{color:var(--muted);font-size:15px;line-height:1.6}

@media (max-width:1200px){.body,.body.noside{grid-template-columns:minmax(0,1fr)}.body .bonus{display:none}.body.sel{grid-template-columns:1fr 380px}.tg .t span{display:none}}

/* top area: hidden until the Filters button is pressed */
.head,.sections,.row2,.tabs,.bandwrap{transition:max-height .28s ease,opacity .2s ease,margin .28s ease,padding .28s ease}
.head,.row2{overflow:hidden}.wrap.compact .bandwrap{overflow:hidden}
.head{max-height:70px}.sections{max-height:140px}.row2{max-height:120px}.tabs{max-height:100px}.bandwrap{max-height:150px}
.wrap.compact .head,.wrap.compact .sections,.wrap.compact .row2,.wrap.compact .tabs,.wrap.compact .bandwrap{max-height:0;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;pointer-events:none;border-width:0}
.wrap.compact{padding-top:10px}
.peek{position:fixed;top:0;left:50%;transform:translate(-50%,-110%);z-index:12;background:var(--goldbg);border:1px solid var(--goldline);color:var(--gold);border-radius:0 0 12px 12px;padding:4px 16px;font-size:12px;font-weight:700;transition:transform .2s;direction:ltr}
.wrap.compact ~ .peek{transform:translate(-50%,0)}
.hidetop{border:1px solid var(--goldline);background:var(--goldbg);color:var(--gold);border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
.peek{font-size:13px;padding:6px 18px}

/* ======================================================= v4: modes, world, colors, bonus pills, journey, rich pages */
.wi{width:18px;height:18px;flex-shrink:0}
.modes{display:flex;background:#14151b;border:1px solid #2a2c36;border-radius:14px;padding:3px;gap:2px;flex-shrink:0}
.mode{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:11px;font-weight:700;font-size:13.5px;color:#a59d8d;white-space:nowrap;transition:background .15s,color .15s}
.mode .wi{width:17px;height:17px}.mode em{font-style:normal;font-weight:400;font-size:11.5px;color:#77705f}
.mode:hover{background:#1c1d24;color:var(--ink2)}
.mode.on{background:var(--gold2);color:#17120a}.mode.on em{color:#5b4a25}
.mode .hash{font-size:15px;font-weight:700;width:17px;text-align:center}
.sec{scroll-snap-align:start}
.sec .sico.w .wi{width:17px;height:17px}

.tg .dice{width:32px;height:32px;border-radius:10px;border:1px solid #2a2c36;background:#16171d;color:var(--gold2);display:flex;align-items:center;justify-content:center;transition:transform .35s}
.tg .dice:hover{transform:rotate(90deg);border-color:var(--goldline)}.tg .dice .wi{width:18px;height:18px}

/* generative art for pages without an image */
.gart{position:absolute;inset:0;overflow:hidden;container-type:size;
  background:radial-gradient(120% 90% at 18% 8%,hsl(var(--h1) 55% 32% / .95),transparent 62%),radial-gradient(100% 80% at 92% 100%,hsl(var(--h2) 60% 26% / .95),transparent 62%),linear-gradient(160deg,hsl(var(--h1) 30% 14%),hsl(var(--h2) 35% 7%))}
.gart::before{content:"";position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 115%,#ffffff09 0 5deg,transparent 5deg 11deg)}
.gart::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,#0000 40%,#000a 100%)}
.ga-ico{position:absolute;right:-9%;bottom:-12%;width:66cqmin;height:66cqmin;opacity:.2;color:hsl(var(--h1) 70% 82%);transform:rotate(-8deg)}
.ga-ico .wi{width:100%;height:100%;stroke-width:1.1}
.ga-ini,.ga-id{position:absolute;left:10%;top:50%;transform:translateY(-54%);z-index:1;color:hsl(var(--h1) 55% 88%);text-shadow:0 4px 26px #000a;white-space:nowrap}
.ga-ini{font-family:Italiana,serif;font-size:34cqmin;letter-spacing:.06em;font-weight:400}
.ga-id{font-family:Outfit;font-weight:700;font-size:21cqmin;letter-spacing:.02em}
.ga-grain{position:absolute;inset:0;z-index:1;background-image:radial-gradient(#ffffff12 1px,transparent 1.2px);background-size:3px 3px;opacity:.55}
.det .pi .gart,.full .gmain .gart{border-radius:inherit}
.full .gmain{position:relative}

/* bonus % pills on item cards */
.bpills{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:1}
.bpills b{font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:1px 7px;border-radius:6px;background:linear-gradient(135deg,#f6d894,#c9953f);color:#17120a;box-shadow:0 2px 8px #0009;white-space:nowrap}
.bd.bonusbd{background:linear-gradient(135deg,#3a2f14,#2a2412);border-color:#6a5628;color:var(--gold);padding-left:9px}
.cdot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 5px 0 8px;border:1px solid #ffffff55;vertical-align:-1px}

/* world cards */
.grid.wide{gap:16px}
.wcard.wide .stage{aspect-ratio:16/10}
.wcard .stage::after{content:"";position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(0deg,#0b0c10cc,#0000);pointer-events:none}
.wcard.raw .stage img{inset:0;width:100%;height:100%;object-fit:cover}
.wcard:not(.wide).raw .stage img{inset:4%;width:92%;height:92%;object-fit:contain}
.wcard .tr{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:2}
.lvb{background:#0b0c10d9;border:1px solid #f0cf8a55;color:var(--gold);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:8px;white-space:nowrap;backdrop-filter:blur(4px)}
.stars{color:#ffcf5a;font-size:11px;letter-spacing:1px;text-shadow:0 1px 4px #000}
.sidb{background:linear-gradient(135deg,#f6d894,#c9953f);color:#17120a;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:8px;cursor:copy;box-shadow:0 3px 10px #0009}
.sidb:hover{filter:brightness(1.1)}
.lvbar{position:absolute;left:10px;right:10px;bottom:9px;height:4px;border-radius:4px;background:linear-gradient(90deg,#9fe3a64d,#f0cf8a4d,#ff8a8a4d);z-index:2}
.lvbar i{position:absolute;top:-1px;bottom:-1px;border-radius:4px;background:#fff3d0;box-shadow:0 0 8px #f0cf8acc;min-width:5px}
.wbar{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;flex:1}
.wtop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.qidb{flex-shrink:0;font-size:10.5px;font-weight:700;color:#8ff0e2;background:#12403f;border-radius:6px;padding:1px 6px;cursor:copy;margin-top:1px}
.wsub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnts{display:flex;gap:10px;color:#8f887a;font-size:11.5px;margin-top:auto}
.cnts span{display:flex;align-items:center;gap:3px}.cnts .wi{width:13px;height:13px}
.join{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;background:#17150f;border:1px solid #4a3d25;color:var(--gold2);border-radius:8px;padding:2px 8px 2px 6px;font:600 11.5px/1.3 ui-monospace,Consolas,"Cascadia Mono",monospace;cursor:copy;transition:background .15s,border-color .15s,color .15s;vertical-align:1px;white-space:nowrap}
.join svg{width:13px;height:13px;flex-shrink:0}
.join:hover{background:var(--goldbg);border-color:var(--gold)}
.join.done{background:#1d3d22;border-color:#3f8a4c;color:#9fe3a6}
.joinbig{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 14px;padding:10px 14px;border-radius:13px;background:linear-gradient(135deg,#2a2419,#1a170f);border:1px solid var(--goldline);color:var(--gold);cursor:copy;transition:border-color .15s,background .15s}
.joinbig svg{width:18px;height:18px}
.joinbig span{font:700 16px ui-monospace,Consolas,"Cascadia Mono",monospace;letter-spacing:.01em}
.joinbig em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.joinbig:hover{border-color:var(--gold);background:linear-gradient(135deg,#352c19,#1f1b10)}
.joinbig.done{background:#16301b;border-color:#3f8a4c;color:#9fe3a6}
.full .joinbig{max-width:520px;margin-top:14px}
.body.noside{grid-template-columns:minmax(0,1fr)}
.body.noside.sel{grid-template-columns:minmax(0,1fr) 412px}

/* journey (level path for maps / monsters / wars) */
.bonus.journey .jr{display:flex;flex-direction:column;gap:3px}
.jrow{display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;border-radius:10px;direction:ltr;position:relative}
.jrow:hover{background:#1a1b22}
.jl{width:30px;text-align:right;font-size:11.5px;font-weight:700;color:var(--muted)}
.jb{flex:1;height:14px;border-radius:7px;background:#1a1b22;overflow:hidden}
.jb i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,hsl(calc(135 - var(--k) * 15) 55% 38%),hsl(calc(125 - var(--k) * 15) 70% 58%))}
.jrow em{font-style:normal;font-size:11.5px;color:var(--muted);min-width:22px;text-align:right}
.jrow.on{background:var(--goldbg);outline:1px solid #f0cf8a66}.jrow.on .jl{color:var(--gold)}
.bonus.journey.mini .jl,.bonus.journey.mini .jrow em{display:none}
.bonus.journey.mini .jrow{padding:5px 2px}
.bonus.mini .jrow:hover::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--gold);color:#17120a;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:10px;white-space:pre;box-shadow:0 8px 24px #0008;z-index:5}

/* preview panel extras */
.det .pi.wide{height:240px}
.det .pi.wide img{object-fit:cover}
.det h4{font-size:10.5px;letter-spacing:.14em;color:#7d7668;text-transform:uppercase;margin:14px 0 6px;font-weight:600}
.bd.wsec{color:var(--gold);border-color:var(--goldline);background:var(--goldbg);padding-left:7px}.bd.wsec .wi{width:15px;height:15px}
.chips.lst{gap:5px}.chips.lst a,.chips.lst span{font-size:12px;padding:2px 9px}
.chips a.ilink{color:var(--gold2);border-color:#4a3d25;cursor:pointer}.chips a.ilink:hover{background:var(--goldbg)}
.qlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qlist>div{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:12.5px;border-bottom:1px solid var(--line)}
.qlist>div:last-child{border-bottom:0}
.qlist>div>span,.qlist>div>a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.qlist em{font-style:normal;color:var(--muted);font-size:11.5px;white-space:nowrap}
a.ilink{color:var(--gold2);text-decoration:none;border-bottom:1px dotted #f0cf8a77;cursor:pointer}
a.ilink:hover{color:var(--gold);border-bottom-style:solid}
a.xlink{color:#a9c7ff;text-decoration:none;border-bottom:1px dotted #a9c7ff66}

/* rich world page body */
.rbody{color:#c9c1b1;font-size:14.5px;line-height:1.6;margin-top:10px}
.rbody p{margin:6px 0}
.rbody .rh{font-size:12px;letter-spacing:.14em;color:var(--gold2);text-transform:uppercase;margin:24px 0 8px;display:flex;align-items:center;gap:10px}
.rbody .rh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--goldline),transparent)}
.rbody .rs{font-size:15px;color:var(--ink);margin:16px 0 4px}
.rbody .rq{font-size:14.5px;color:var(--ink);margin:14px 0 4px;padding:6px 10px;border-left:3px solid #2e7a70;background:#12201f;border-radius:0 10px 10px 0}
ul.rb{list-style:none;padding:0;margin:4px 0 8px}
ul.rb li{position:relative;padding:2px 0 2px 16px}
ul.rb li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:2px;background:var(--goldline);transform:rotate(45deg)}
ul.rb li.d1{margin-left:18px;font-size:13.5px;color:#aea694}ul.rb li.d1::before{background:#3a3c48;border-radius:50%;transform:none}
ul.rb li.d2{margin-left:36px;font-size:13px;color:#9a927f}ul.rb li.d2::before{background:#2e3039;border-radius:50%;transform:none}
ul.rb li.d3{margin-left:54px;font-size:13px;color:#8a8373}
.rbt{width:100%;border-collapse:separate;border-spacing:0;margin:6px 0 12px;font-size:13px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rbt th{background:#1b1c23;text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px;font-weight:600}
.rbt td{padding:6px 10px;border-top:1px solid var(--line)}
.rbt tr:nth-child(even) td{background:#121318}
.rbt td:last-child{color:var(--gold2);white-space:nowrap}
.kvl{display:flex;align-items:baseline;gap:10px;padding:4px 0;flex-wrap:wrap}
.kvl small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7d7668;min-width:110px}
.kvl b{font-weight:600;color:var(--ink)}
.rbody .rscene{font-style:italic;color:#9a927f;text-align:center;margin:12px 0!important;padding:6px 0;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2)}
.dlg{display:flex;gap:10px;align-items:baseline}
.dlg b{flex-shrink:0;min-width:110px;text-align:right;color:var(--gold2);font-size:13px}
.tb{display:inline-block;margin-left:5px;font-size:10.5px;font-weight:700;padding:0 6px;border-radius:5px;background:#26272e;color:#b3ab9b;vertical-align:1px}
.mk.sm{display:inline-block;width:15px;height:15px;margin-left:4px;vertical-align:-2px}.mk.sm svg{width:15px;height:15px}
.rbadges{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.rbadges .mk.sm{width:18px;height:18px}.rbadges .mk.sm svg{width:18px;height:18px}
.full .gmain.wide{flex:0 0 auto;aspect-ratio:16/10}
.full .gmain.wide img{padding:0;object-fit:cover}
.full .gthumbs button.old{opacity:.6}.full .gthumbs button.old span::after{content:" · old";color:var(--muted)}
.muted{color:var(--muted)}
.idseg{max-width:none}
.lv-head .seg{flex-shrink:0}
.rbody .rwc{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6f9d95;margin:8px 0 2px}
ul.rb.cols{columns:3 200px;column-gap:26px}ul.rb.cols li{break-inside:avoid}
.gart.tile .ga-ini{font-size:40cqmin;left:12%}
.rbody .join{margin-left:2px}

/* v4.1 */
.band{cursor:grab}.band.dragging{cursor:grabbing;scroll-snap-type:none}.band.dragging .bt{pointer-events:none}
.mk.bor svg{width:22px;height:22px}
.card.borrowed .stage img{filter:saturate(.92)}
.bornote{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:#9fc6dc;background:#0f1a20;border-bottom:1px solid #1d3440}
.bornote svg{width:18px;height:18px;flex-shrink:0}.bornote a.ilink{color:#cdeeff;border-bottom-color:#8fd3ff77}
.full .bornote{border:1px solid #1d3440;border-radius:12px;flex-shrink:0}
.tg .vers{padding:4px 11px 4px 8px}.tg .vers svg{width:16px;height:16px}
.stale{flex-shrink:0;margin:-4px 0 10px;padding:9px 14px;border-radius:12px;background:#3a1d14;border:1px solid #8a4a2a;color:#ffd3b8;font-size:13px;direction:ltr;line-height:1.45}
.stale b{color:#ffb08a}.stale span{color:#c9a08a}
.tbl td.cpath{width:auto;font-weight:600;color:var(--ink2)}
.tbl tr.tot td{background:var(--goldbg);color:var(--gold);font-weight:700}
.tbl tr.note td{background:none;border:0;color:var(--muted);font-size:12.5px;text-align:left}
.tbl .bad{color:#ff9aa2}
/* v4.2: pictures inside pages, quest helpers, 0 AC */
.acq.zero,.acq.free{background:#231f35;color:#c9b2ff;border:1px dashed #6f5aa8}
.rthumb{width:30px;height:30px;border-radius:8px;object-fit:cover;vertical-align:middle;margin-right:8px;background:#1b1c23;border:1px solid var(--line2)}
ul.rb li:has(.rthumb){padding-top:3px;padding-bottom:3px}
.who{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;vertical-align:middle;margin:2px 6px 2px 0}
.who .wlink{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:12px;background:#17181f;border:1px solid var(--line2);text-decoration:none;color:var(--ink);cursor:pointer}
.who .wlink:hover{border-color:var(--gold)}
.who .wimg{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#0e0f13}
.who.map .wimg{width:74px}
.who b{font-weight:600;font-size:13.5px}.who em{font-style:normal;font-size:11.5px;color:var(--gold2)}
.who.mon .wlink{border-color:#5a2f24}.who.npc .wlink{border-color:#23455a}.who.map .wlink{border-color:var(--goldline)}
.at{font-size:12.5px;color:var(--muted)}
.stepk{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6f9d95;margin-right:4px}
.rimg{margin:6px 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0d0e12;max-width:640px}
.rimg img{display:block;width:100%;max-height:420px;object-fit:contain;cursor:zoom-in}
.rimg figcaption{padding:6px 12px;font-size:12px;color:var(--ink2);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.rimg.room{border-color:#2e7a70}
.full .gthumbs{flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;max-height:34vh;align-content:flex-start}
.det .pi .gl{flex-wrap:wrap;right:56px;max-height:120px;overflow-y:auto}
/* v4.3: quest objectives, drop tiles */
.ok{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:1px 8px 1px 5px;border-radius:7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;border:1px solid}
.ok .wi{width:14px;height:14px}.ok i{font-style:normal}
.k-drop{color:#ffb877;border-color:#5a3a1c;background:#241a10}.k-defeat{color:#ff9aa2;border-color:#5a2430;background:#24121a}
.k-talk{color:#9fd8ff;border-color:#23455a;background:#0f1d24}.k-click{color:#f7a8ff;border-color:#5a2a5e;background:#221426}
.k-explore{color:#8ff0e2;border-color:#1f5550;background:#0f2220}.k-item{color:#e8c98a;border-color:#5a4a2a;background:#221d12}
.k-shop{color:#b7c3ff;border-color:#2e3660;background:#141a30}
ul.rb li.obj{padding-top:5px;padding-bottom:5px}
.oki{display:inline-flex;padding:1px;border-radius:5px;border:0!important;background:none!important}.oki .wi{width:14px;height:14px}
ul.rb.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:8px 0 16px}
ul.rb.tiles li{padding:0!important;display:flex;flex-direction:column;gap:5px;background:#15161c;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12.5px;line-height:1.3}
ul.rb.tiles li::before{display:none}
ul.rb.tiles li .rthumb{width:100%;height:auto;aspect-ratio:1;margin:0;border-radius:0;border:0;border-bottom:1px solid var(--line)}
ul.rb.tiles li>a,ul.rb.tiles li>span,ul.rb.tiles li>small,ul.rb.tiles li>i{padding:0 9px}
ul.rb.tiles li>:last-child{padding-bottom:8px}
ul.rb.tiles li small{color:var(--muted);font-size:11px}
.qitem{color:var(--ink2)}
.whos{display:flex;flex-wrap:wrap;gap:6px}
.chipx{background:#1b1c23;border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-size:12.5px;color:var(--ink2)}
li.whoi{padding-top:3px!important;padding-bottom:3px!important}
/* v4.4: side peek, film strips */
.full .gal{min-width:0}
.full .gmain{min-height:240px}
.full .gmain.peekon{box-shadow:inset 0 0 0 2px #8fd3ff55}
.strip{position:relative;flex-shrink:0;display:flex;align-items:center;gap:6px}
.full .gthumbs{flex:1;min-width:0;display:flex;flex-wrap:nowrap!important;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;scroll-snap-type:x mandatory;padding:2px 0 6px;scrollbar-width:thin}
.full .gthumbs button{flex:0 0 96px;scroll-snap-align:start}
.full .gthumbs button img{height:64px}
.sarr{flex:0 0 28px;height:64px;border-radius:9px;border:1px solid var(--line2);background:#15161c;color:var(--gold);font-size:20px}
.sarr:hover{border-color:var(--gold)}
.peek2{flex-shrink:0;background:linear-gradient(180deg,#141a20,#101318);border:1px solid #1d3440;border-radius:16px;padding:12px 16px 14px;max-height:42vh;overflow-y:auto}
.peek2 .pk-top{display:flex;align-items:center;justify-content:space-between}
.peek2 small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fd3ff}
.pk-x{width:28px;height:28px;border-radius:9px;border:1px solid var(--line2);color:var(--ink2)}
.peek2 h3{font-size:19px;margin:4px 0 8px;color:var(--ink);text-transform:none;letter-spacing:0}
.pk-bits{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.pk-bits .mk{width:20px;height:20px}.pk-bits .mk svg{width:20px;height:20px}
.pk-at{font-size:12.5px;color:var(--muted);margin:6px 0}
.peek2 p{font-size:13px;color:#a9a191;line-height:1.5;margin:6px 0 10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pk-act{display:flex;gap:8px;flex-wrap:wrap}.pk-act .btn{padding:7px 14px;font-size:13px}
#fullInfo .peeking{background:#16303a;border-color:#8fd3ff!important;outline:1px solid #8fd3ff66;border-radius:6px}
.dstrip{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-bottom:1px solid var(--line);background:#0b0c10;scroll-snap-type:x mandatory;scrollbar-width:thin}
.dstrip button{flex:0 0 74px;scroll-snap-align:start;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:#15161c;padding:0}
.dstrip button img{display:block;width:100%;height:46px;object-fit:contain;background:#0e0f13}
.dstrip button span{display:block;font-size:10px;color:var(--ink2);padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dstrip button.on{border-color:var(--gold)}
.loc{display:flex;gap:10px;align-items:flex-start}
.lthumb{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#0e0f13;border:1px solid var(--line2)}

.full .gmain.wide{flex:1 1 auto;aspect-ratio:auto;min-height:240px}
.full .gmain.wide img,.full .gmain img{object-fit:contain}

.bonus.mini{overflow-y:auto;overflow-x:hidden;max-height:100%}
.bonus.mini .br:hover::after,.bonus.mini .jrow:hover::after{display:none}
/* v4.5: sound toggle, bank/shop icons, boss badges, sort */
.sndbtn{position:fixed;top:8px;right:12px;z-index:13;width:32px;height:32px;border-radius:10px;border:1px solid var(--goldline);background:#1d1a12e6;color:var(--gold);display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s}
.sndbtn:hover{opacity:1}.sndbtn svg{width:18px;height:18px}
.sndbtn .x{display:none}.sndbtn.off{color:var(--muted);border-color:var(--line2)}.sndbtn.off .x{display:block}.sndbtn.off .w1,.sndbtn.off .w2{display:none}
.wrap:not(.compact) ~ .sndbtn{top:auto;bottom:14px}
.cxs{position:absolute;top:38px;right:8px;display:flex;flex-direction:column;gap:4px;z-index:1}.cxs.top{top:8px}
.cx{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#0b0c10cc;border:1px solid #ffffff1c}
.cx svg{width:15px;height:15px}.cx.bank{color:#ffd978}.cx.shop{color:#8ff0e2}
.seg .bank{color:#ffd978}.seg .shop{color:#8ff0e2}
.fav-heart{top:auto;bottom:8px;right:auto;left:auto}
.bossb{background:linear-gradient(135deg,#ff6a5a,#b8323f);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:7px;box-shadow:0 3px 10px #0009}
.bossb.ch{background:linear-gradient(135deg,#c86bff,#6d46c9)}
.sortsel{height:32px;border-radius:10px;border:1px solid #2a2c36;background:#16171d;color:var(--ink2);font:600 12.5px Outfit,sans-serif;padding:0 8px;outline:0;cursor:pointer}
.sortsel:focus{border-color:var(--goldline)}
/* ======================================================= Hall of Legends */
.fav-heart{top:8px;bottom:auto;right:40px;left:auto}
.lg-hall{position:relative;padding:4px 2px 40px}
.lg-hall::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 12% 20%,#f0cf8a88,transparent),radial-gradient(1px 1px at 72% 12%,#f0cf8a66,transparent),radial-gradient(1.2px 1.2px at 40% 70%,#f0cf8a55,transparent),radial-gradient(1px 1px at 88% 60%,#fff5,transparent),radial-gradient(1.4px 1.4px at 25% 90%,#f0cf8a66,transparent);
  background-size:420px 420px;animation:dust 60s linear infinite}
@keyframes dust{to{background-position:420px -420px}}
.lg-title{display:flex;align-items:center;gap:16px;margin:8px 0 20px}
.lg-title>span{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#f6d894,#b88a3a);color:#17120a;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px #f0cf8a33}
.lg-title>span .wi{width:30px;height:30px}
.lg-title h2{font-family:Italiana,serif;font-size:40px;font-weight:400;letter-spacing:.06em;color:var(--gold2);line-height:1}
.lg-title p{color:var(--muted);font-size:13.5px;margin-top:6px;max-width:760px}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.lg-tile{position:relative;height:310px;border-radius:22px;overflow:hidden;text-align:left;border:1px solid color-mix(in srgb,var(--c) 40%,#111);
  background:radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--c) 38%,#0b0c10) 0%,#0e0f14 62%,#08090c 100%);transition:transform .25s,box-shadow .25s,border-color .25s}
.lg-tile:hover{transform:translateY(-4px);box-shadow:0 18px 50px #000a,0 0 0 1px var(--c),0 0 40px color-mix(in srgb,var(--c) 35%,transparent);border-color:var(--c)}
.lg-art{position:absolute;inset:0;overflow:hidden}
.lg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:blur(2px) saturate(1.3)}
.lg-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 62% 38%,color-mix(in srgb,var(--c) 14%,transparent) 0 4deg,transparent 4deg 13deg);transition:transform 1.2s}
.lg-tile:hover .lg-rays{transform:rotate(12deg)}
.lg-art .a{position:absolute;object-fit:contain;filter:drop-shadow(0 10px 18px #000c);transform:var(--r);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lg-tile:hover .lg-art .a{transform:var(--r) translateY(-6px) scale(1.06)}
.a0{--r:rotate(5deg);left:44%;top:3%;width:46%;z-index:4}
.a1{--r:rotate(15deg);left:68%;top:26%;width:34%;z-index:3}
.a2{--r:rotate(-11deg);left:22%;top:12%;width:32%;z-index:2}
.a3{--r:rotate(-5deg);left:74%;top:-2%;width:27%;z-index:1}
.a4{--r:rotate(4deg);left:40%;top:34%;width:30%;z-index:3}
.a5{--r:rotate(20deg);left:86%;top:44%;width:22%;z-index:1}
.a6{--r:rotate(-18deg);left:6%;top:6%;width:24%;z-index:1;opacity:.85}
.lg-vig{position:absolute;inset:0;background:linear-gradient(0deg,#07080bf2 0%,#07080bb0 30%,transparent 62%);z-index:5}
.lg-por{position:absolute;left:18px;bottom:88px;width:84px;height:84px;border-radius:50%;overflow:hidden;z-index:6;border:3px solid var(--c);background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,#15161c),#0b0c10);box-shadow:0 0 0 4px #0b0c10,0 0 30px color-mix(in srgb,var(--c) 55%,transparent);display:flex;align-items:center;justify-content:center}
.lg-por img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.lg-por b{font-family:Italiana,serif;font-size:34px;color:#fff}
.lg-meta{position:absolute;left:18px;right:18px;bottom:14px;z-index:6}
.lg-name{font-family:Italiana,serif;font-size:32px;line-height:1;color:#fff;letter-spacing:.03em;text-shadow:0 2px 18px #000}
.lg-count{font-size:12px;color:var(--c);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 6px}
.lg-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:#bdb5a5}
.lg-stats b{color:#fff}
.lghero{position:relative;height:220px;border-radius:22px;overflow:hidden;margin-bottom:12px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--c,#f0cf8a) 40%,#111)}
.lghero .lg-art{background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--c) 40%,#0b0c10) 0%,#0e0f14 60%,#08090c 100%)}
.lg-art.big .a{cursor:pointer;height:auto}
.lg-art.big .a0{left:34%;top:6%;width:17%}.lg-art.big .a1{left:48%;top:22%;width:13%}.lg-art.big .a2{left:58%;top:0%;width:15%}
.lg-art.big .a3{left:70%;top:18%;width:12%}.lg-art.big .a4{left:79%;top:2%;width:13%}.lg-art.big .a5{left:89%;top:26%;width:11%}
.lg-art.big .a6{left:26%;top:40%;width:11%;opacity:1}.lg-art.big .a7{--r:rotate(-8deg);left:62%;top:44%;width:11%;z-index:2}
.lg-art.big .a8{--r:rotate(10deg);left:40%;top:48%;width:10%;z-index:2}.lg-art.big .a9{--r:rotate(-14deg);left:92%;top:-6%;width:9%}
.lg-art.big .a10{--r:rotate(6deg);left:74%;top:54%;width:9%;z-index:2}.lg-art.big .a11{--r:rotate(-4deg);left:52%;top:60%;width:9%;z-index:2}
.lg-art.big .a:hover{transform:var(--r) scale(1.12);z-index:9}
.lghero .lg-vig{background:linear-gradient(90deg,#07080bf5 0%,#07080bc0 26%,transparent 50%)}
.lgh-front{position:absolute;left:22px;bottom:20px;z-index:7;display:flex;align-items:flex-end;gap:18px}
.lgh-front .lg-por{position:static;width:112px;height:112px}
.lgh-front small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.lgh-front h2{font-family:Italiana,serif;font-weight:400;font-size:46px;line-height:1;color:#fff;text-shadow:0 2px 20px #000;margin:2px 0 8px}
.sec .lgdot{background:var(--c)!important;border-radius:50%;width:14px;height:14px;margin:6px}
.sec.back .sico{font-size:20px;line-height:1}
.wrap.compact .lghero{height:170px}
.lghero,.lg-hall,.lg-tile{direction:ltr}
.tbl tr.tot.big td{font-weight:500;color:var(--ink);text-align:left;font-size:13.5px}.tbl tr.tot.big b{color:var(--gold)}

/* painted Legend art (assets/legends) */
.lg-art.painted{background:#08090c}
.lg-paint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 40%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.lg-tile:hover .lg-paint{transform:scale(1.05)}
.lg-art.painted .lg-vig{background:linear-gradient(0deg,#07080bf2 0%,#07080b99 32%,transparent 60%)}
.lghero.painted{height:auto;aspect-ratio:3/1;max-height:380px}
.lghero.painted .lg-paint{object-position:100% 45%}
.lghero.painted .lg-vig{background:linear-gradient(90deg,#07080bd9 0%,#07080b80 28%,transparent 46%)}
.wrap.compact .lghero.painted{height:170px;aspect-ratio:auto}

/* ================= v4.6 phase 1: calmer chrome, pictures first ================= */
/* details open as a drawer over the grid: the grid never jumps */
.body{position:relative}
.body.sel{grid-template-columns:262px 1fr}
.body.bmini,.body.bmini.sel{grid-template-columns:76px 1fr}
.body.noside,.body.noside.sel,.body.noside.bmini{grid-template-columns:minmax(0,1fr)}
.det{position:absolute;left:0;top:0;bottom:auto;width:420px;max-height:calc(100% - 14px);overflow-y:auto;z-index:30;border-color:#3a3322;box-shadow:0 24px 70px #000d,0 0 0 1px #00000080;animation:detIn .2s ease-out}
@keyframes detIn{from{transform:translateX(-28px);opacity:0}to{transform:none;opacity:1}}
.det .pi{height:290px}
@media (max-width:1200px){.body.sel,.body.bmini.sel{grid-template-columns:minmax(0,1fr)}.det{width:min(400px,92vw)}}
/* cards */
.card{transition:border-color .12s,transform .16s ease,box-shadow .16s}
.card:hover{transform:translateY(-2px)}
.card.sel{border:2px solid var(--gold);box-shadow:0 0 0 2px #f0cf8a22,0 0 22px #f0cf8a2e}
.bar{min-height:50px;padding:7px 11px}
.mk.more{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#0d0e13e6;border:1px solid #f0cf8a55;color:var(--gold);font:700 10.5px Outfit;font-style:normal;letter-spacing:0}
/* filters: the picture band opens only when asked */
.tab.more{color:var(--gold);border:1px solid var(--goldline);background:#16171d}
.tab.more.open{background:var(--goldbg)}
.tab.act{color:var(--gold)}
.tab.act::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:2px}
/* bonus rail: small by default, opens on demand */
.btog{direction:ltr;position:absolute;top:10px;left:8px;width:24px;height:24px;border-radius:8px;border:1px solid #2f313b;background:#16171d;color:var(--gold);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
.btog:hover{border-color:var(--goldline)}
.bonus.mini{padding:10px 6px}
.bonus.mini .btog{position:static;width:100%;height:22px;margin:0 0 8px}
.bonus.mini .ti{width:44px;height:44px}
.bonus:not(.mini) .bh{padding-left:26px}
/* search: quick results under the box */
.sugg{position:fixed;z-index:60;background:#121319;border:1px solid #3a3322;border-radius:14px;box-shadow:0 24px 60px #000d;padding:6px;direction:ltr;max-width:560px}
.sugg .sr{display:flex;align-items:center;gap:11px;width:100%;height:50px;padding:6px 8px;border-radius:10px;text-align:left}
.sugg .sr:hover,.sugg .sr.hi{background:#1c1d25}
.sugg .sr.hi{outline:1px solid #f0cf8a55}
.sugg .st{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0;background:radial-gradient(circle,#2a2c36,#15161c);display:flex;align-items:center;justify-content:center;font:700 12px Outfit;color:#8d8676}
.sugg .st img{width:100%;height:100%;object-fit:contain}
.sugg .sn{display:flex;flex-direction:column;min-width:0}
.sugg .sn b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .sn small{font-size:11.5px;color:var(--muted)}
.sugg .sc{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 4px;border-top:1px solid #23252e;margin-top:4px}
.sugg .sc button{padding:4px 11px;border-radius:99px;background:#16171d;border:1px solid #2a2c36;font-size:12.5px;font-weight:600;color:#d6cfc0}
.sugg .sc button em{font-style:normal;font-size:11px;color:var(--muted);margin-left:5px}
.sugg .sc button:hover{border-color:var(--goldline);color:var(--gold)}
.sugg .sall{display:block;width:100%;text-align:right;padding:8px 10px 4px;font-size:12.5px;font-weight:700;color:var(--gold)}
.sugg .snone{padding:10px 12px;font-size:13px;color:var(--muted)}

/* =====================================================================
   v5 "Arcane Glass" — light blue-slate, flat, sharp corners, 1px seams.
   The game pictures are the only decoration.
   ===================================================================== */
@font-face{font-family:Manrope;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:"Cormorant SC";font-weight:500;src:url(fonts/cormorant-sc-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:"Cormorant SC";font-weight:600;src:url(fonts/cormorant-sc-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:"Cormorant SC";font-weight:700;src:url(fonts/cormorant-sc-latin-700-normal.woff2) format('woff2')}
:root{
  --bg:#18232E;--panel:#1E2B38;--card:#253645;--card2:#2D4152;--line:#344B5E;--line2:#47627A;
  --ink:#F4F7F9;--ink2:#D3DEE6;--muted:#AFC0CD;--muted2:#8398A8;
  --gold:#7DD3F0;--gold2:#7DD3F0;--goldbg:#30495D;--goldline:#4F7F99;
  --acc:#7DD3F0;--acc2:#B9A8F5;--warm:#F2E6C8;--sel:#30495D;
  --battle:#FF9BA8;--quest:#87EEE5;--nc:#9FD8FF;
  --disp:"Cormorant SC",Georgia,serif;--ui:Manrope,"Segoe UI",Tahoma,sans-serif;
}
*,*::before,*::after{border-radius:0!important}
body{background:var(--bg);background-image:none;font-family:var(--ui);color:var(--ink)}
::-webkit-scrollbar-thumb{background:#3A5366;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#4A6A82}
a{color:var(--acc)}

/* ---------- frame: header on top, section list on the left */
.wrap.v5{padding:0;height:100vh;display:flex;flex-direction:column}
.top{direction:ltr;display:flex;align-items:center;gap:12px;height:76px;padding:0 18px 0 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;position:relative;z-index:6}
.top .brand{display:flex;flex-direction:column;gap:5px;min-width:174px;padding-right:10px;flex-shrink:0;font-family:var(--disp)}
.top .brand b{font:600 26px/1 var(--disp);letter-spacing:.03em;color:var(--warm);white-space:nowrap}
.top .brand small{font:600 9px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.v5 .modes{background:none;border:1px solid var(--line);padding:0;gap:0;height:46px;flex-shrink:0}
.v5 .mode{height:100%;padding:0 20px;font:700 12px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line)}
.v5 .mode:last-child{border-right:0}
.v5 .mode .wi,.v5 .mode em,.v5 .mode .hash{display:none}
.v5 .mode:hover{background:var(--card);color:var(--ink)}
.v5 .mode.on{background:var(--sel);color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)}
.top .search{height:46px;background:var(--bg);border:1px solid var(--line);flex:1;min-width:200px;max-width:640px;margin-left:auto;padding:0 14px;color:var(--muted)}
.top .search:focus-within{border-color:var(--acc)}
.top .search input{font:500 14.5px var(--ui)}
.search input::placeholder{color:#7F94A4}
.search kbd{font:600 11px var(--ui);color:var(--muted);border:1px solid var(--line2);padding:1px 7px}
.fchip{background:var(--sel);color:var(--ink);border:1px solid var(--line2);font:600 12px var(--ui);padding:3px 8px 3px 10px}
.fchip i{color:var(--acc)}
.tbtn{height:46px;padding:0 18px;border:1px solid var(--line);font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:var(--panel);white-space:nowrap;flex-shrink:0}
.tbtn:hover{background:var(--card);border-color:var(--line2)}
.tbtn.on{border-color:var(--acc);color:var(--acc)}
.sortslot{flex-shrink:0}
.sortslot .sortsel{height:46px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font:600 12.5px var(--ui);padding:0 10px;cursor:pointer}
.sortslot .sortsel:focus{border-color:var(--acc)}
.sortsel option{background:var(--panel);color:var(--ink)}
.top .count{font:700 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);min-width:118px;text-align:right;flex-shrink:0}
.top .count b{font:600 15px var(--ui);color:var(--ink);letter-spacing:.01em;margin-right:6px}
.v5 ~ .peek{display:none}
.v5 ~ .sndbtn,.wrap.v5:not(.compact) ~ .sndbtn{top:auto;bottom:14px;right:16px;background:var(--panel);border:1px solid var(--line2);color:var(--acc)}
.stale{margin:10px 14px 0;background:#542832;border-color:#A64E60}

.shell{flex:1;min-height:0;display:grid;grid-template-columns:196px minmax(0,1fr);direction:ltr}
.side{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;min-height:0;padding:6px 0 24px;scrollbar-width:thin}
.side .secs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
.side .sgh{font:700 9.5px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--muted2);padding:16px 18px 6px}
.side .sgh.lgh{color:var(--c);font:600 20px var(--disp);letter-spacing:.03em;text-transform:none;padding:14px 18px 8px;border-top:2px solid var(--c);margin-top:6px}
.side .sec{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 14px 8px 15px;border:0;border-left:3px solid transparent;color:var(--ink2);font:500 13.5px var(--ui);text-align:left;white-space:nowrap}
.side .sec .sl{overflow:hidden;text-overflow:ellipsis}
.side .sec em{font:500 11.5px var(--ui);color:var(--muted2);font-style:normal;font-variant-numeric:tabular-nums}
.side .sec:hover{background:var(--card);color:var(--ink)}
.side .sec.on{background:var(--sel);border-left-color:var(--acc);color:var(--ink)}
.side .sec.on em{color:var(--muted)}
.side .sec.back{color:var(--acc);font-weight:600}
.side .sec .si,.side .sec .sico{display:none}
.main{direction:rtl;min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px 14px 0}
.main > #listView{flex:1;min-height:0}

/* ---------- filters (open with the Filters button) */
.v5 .row2{margin:0 0 8px}
.v5.compact .row2,.v5.compact .tabs,.v5.compact .bandwrap{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none;border-width:0}
.seg{background:none;border:1px solid var(--line);padding:0;gap:0}
.seg button{padding:7px 14px;font:600 12.5px var(--ui);color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button svg{display:none}
.seg button em{color:var(--muted2)}
.seg button:hover{background:var(--card);color:var(--ink)}
.seg button.on{background:var(--sel);color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)}
.seg button.on em{color:var(--muted)}
.seg .battle,.seg .quest,.seg .nc,.seg .bank,.seg .shop{color:var(--muted)}
.tg{gap:4px}
.tg .t{padding:6px 12px;background:var(--panel);border:1px solid var(--line);font:600 12px var(--ui);color:var(--ink2)}
.tg .t svg{display:none}
.tg .t:hover{border-color:var(--line2)}
.tg .t.on{border-color:var(--acc);color:var(--acc);box-shadow:none;background:var(--sel)}
.tg .dv{background:var(--line);height:24px}
.tg .acq{padding:6px 11px;opacity:.9}.tg .acq.on{opacity:1;outline:1px solid var(--acc);outline-offset:1px}
.tg .dice{width:32px;height:32px;background:var(--panel);border:1px solid var(--line);color:var(--acc)}
.v5 .tabs{gap:2px;margin-bottom:8px}
.tab{padding:6px 12px;font:600 12.5px var(--ui);color:var(--muted);border:1px solid transparent}
.tab em{color:var(--muted2)}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--sel);color:var(--ink);border-color:var(--line2)}.tab.on em{color:var(--muted)}
.tab.more{color:var(--acc);border-color:var(--line);background:var(--panel)}
.tab.more.open{background:var(--sel)}
.tab.act{color:var(--acc)}.tab.act::after{background:var(--acc)}
.band{gap:1px;-webkit-mask-image:none;mask-image:none}
.bt{flex:0 0 140px;background:var(--card);border:0}
.bt:hover{transform:none;background:var(--card2);outline:1px solid var(--acc);outline-offset:-1px}
.bt .bi{background:var(--card)}
.bt .bl{background:var(--panel);border-top:1px solid var(--line);font:600 12.5px var(--ui)}
.bt .bl em{color:var(--muted)}
.bt.on{border:0;outline:2px solid var(--acc);outline-offset:-2px;box-shadow:none}.bt.on .bl{background:var(--sel);color:var(--ink);border-top-color:var(--line2)}.bt.on .bl em{color:var(--muted)}
.bt.more{background:var(--panel);border:1px dashed var(--line2);color:var(--acc)}
.bt .bi.sw{background:var(--card)}
.bt .bi.sw::after{border:2px solid var(--ink);box-shadow:none}
.barr{width:30px;height:46px;background:var(--panel);border:1px solid var(--line2);color:var(--acc);box-shadow:none}
.barr:hover{background:var(--sel);color:var(--ink)}
.sheet{background:#0F1720D9}
.sheet .sc{background:var(--panel);border:1px solid var(--line2)}
.sheet .sh{border-bottom-color:var(--line)}
.sheet .sh input{background:var(--bg);border:1px solid var(--line2)}
.sheet .sg{gap:1px}

/* ---------- price / how-to-get badges: flat, outlined */
.acq{font:700 11px/1.1 var(--ui);padding:4px 8px;border:1px solid;letter-spacing:.02em;word-spacing:.1em}
.acq.merge{background:#51401E;color:#FFD66F;border-color:#A88738}
.acq.quest{background:#174A4B;color:#87EEE5;border-color:#2C8F8E}
.acq.drop{background:#542832;color:#FF9BA8;border-color:#A64E60}
.acq.ac{background:#403565;color:#C7B4FF;border-color:#7661B2}
.acq.gold{background:#55461F;color:#FFE083;border-color:#9F843A}
.acq.zero,.acq.free{background:#2E3558;color:#C7B4FF;border:1px dashed #7661B2}
.acq.chest{background:#2A3552;color:#B7C3FF;border-color:#5566A0}
.acq.other{background:#2B3A48;color:#C3D0DA;border-color:#4B6275}

/* ---------- the grid: tiles touch, a 1px seam between them */
.v5 .body{gap:12px;padding-bottom:0}
.grid-wrap{padding:0 0 28px;margin:0}
.grid{gap:1px}
.grid.wide{gap:1px}
.card{background:var(--card);border:0;transition:background .12s}
.card:hover{transform:none;background:var(--card2);outline:1px solid var(--acc);outline-offset:-1px;z-index:1}
.card .stage{background:transparent}
.card.cut .stage img{inset:7%;width:86%;height:86%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.card.raw .stage img{inset:7%;width:86%;height:86%}
.card.borrowed .stage img{filter:saturate(.92) drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.bar{background:var(--panel);border-top:1px solid var(--line);min-height:44px;padding:0 10px}
.nm{color:var(--ink);font:600 13.5px/1.25 var(--ui)}
.card.sel{border:0;outline:2px solid var(--acc);outline-offset:-2px;box-shadow:none;z-index:2}
.card.sel .bar{background:var(--sel);border-top-color:var(--line2)}
.mks{top:8px;left:8px;flex-direction:row;gap:3px}
.mk.tx{display:inline-flex;align-items:center;width:auto;height:auto;padding:3px 7px;font:700 10.5px/1 var(--ui);letter-spacing:.03em;font-style:normal;border:1px solid var(--line2);background:#1E2B38E6;color:var(--ink2);filter:none;white-space:nowrap}
.mk.m-Rare,.bd.m-Rare{background:#56303E;color:#FFABC2;border-color:#A75870}
.mk.m-Legend,.bd.m-Legend{background:#574821;color:#F7D975;border-color:#A68B42}
.mk.m-Seasonal,.bd.m-Seasonal{background:#244A3B;color:#99E2BD;border-color:#4D8D72}
.mk.m-AC,.bd.m-AC{background:#403565;color:#C7B4FF;border-color:#7661B2}
.mk.m-0AC,.bd.m-0AC{background:#2E3558;color:#C7B4FF;border:1px dashed #7661B2}
.mk.more{display:inline-flex;align-items:center;width:auto;height:auto;padding:3px 6px;background:#1E2B38E6;border:1px solid var(--line2);color:var(--ink2);font:700 10.5px/1 var(--ui)}
.mk.bor,.mk.bor svg{width:20px;height:20px}
.card .cl.battle,.card .cl.nc{display:none}
.cl,.cx{background:#1E2B38E6;border:1px solid var(--line2)}
.vg{background:#1E2B38E6;border:1px solid var(--line2);color:var(--ink2);font:600 11px var(--ui)}
.bpills b{background:#55461F;color:#FFE083;border:1px solid #9F843A;box-shadow:none;font:700 10.5px/1.3 var(--ui)}
.fav-heart{color:#FF9BA8}
.empty{color:var(--muted)}
.empty button{border:1px solid var(--line2);color:var(--acc)}

/* world tiles */
.wcard .stage::after{display:none}
.lvb{background:#1E2B38E6;border:1px solid var(--line2);color:var(--ink);font:700 11px var(--ui);backdrop-filter:none}
.bossb{background:#542832;border:1px solid #A64E60;color:#FF9BA8;box-shadow:none}
.bossb.ch{background:#403565;border-color:#7661B2;color:#C7B4FF}
.sidb{background:#55461F;border:1px solid #9F843A;color:#FFE083;box-shadow:none}
.lvbar{background:#1E2B38;border:1px solid var(--line2);height:5px}
.lvbar i{background:var(--acc);box-shadow:none}
.wbar{padding:8px 10px}
.wsub{color:var(--muted)}
.cnts{color:var(--muted)}
.qidb{background:#174A4B;border:1px solid #2C8F8E;color:#87EEE5}
.join{background:var(--bg);border:1px solid var(--line2);color:var(--acc)}
.join:hover{background:var(--sel);border-color:var(--acc)}
.join.done{background:#244A3B;border-color:#4D8D72;color:#99E2BD}

/* ---------- "All": one short row per type */
.grid.grouped{display:block}
.grp{margin:0 0 18px}
.grp .gh{display:flex;align-items:baseline;gap:10px;margin:2px 0 8px}
.grp .gh h3{font:600 24px/1 var(--disp);color:var(--warm);letter-spacing:.02em}
.grp .gh em{font:500 12px var(--ui);color:var(--muted);font-style:normal}
.grp .gh .seeall{margin-left:auto;font:600 12.5px var(--ui);color:var(--acc);padding:2px 0}
.grp .gh .seeall:hover{text-decoration:underline}
.grid.gg{grid-template-columns:repeat(var(--gc),minmax(0,1fr))}

/* ---------- bonus / level rail */
.bonus{background:var(--panel);border:1px solid var(--line)}
.bh i{background:var(--sel);border:1px solid var(--line2)}
.bh i svg path{stroke:var(--acc)}
.bh b{color:var(--ink);letter-spacing:.2em;font-weight:700}
.bsub{color:var(--muted)}
.br:hover,.jrow:hover{background:var(--card)}
.br .ti{background:var(--card)}
.br b{color:var(--ink2)}
.br.on,.jrow.on{background:var(--sel);outline:1px solid var(--acc)}.br.on b,.jrow.on .jl{color:var(--acc)}
.jb{background:var(--card)}
.jb i{background:hsl(calc(195 - var(--k) * 9) 62% 62%)}
.btog{background:var(--panel);border:1px solid var(--line2);color:var(--acc)}
.sep{color:var(--muted2)}

/* ---------- details drawer */
.det{background:var(--panel);border:1px solid var(--line2);box-shadow:0 24px 60px #0000008c}
.det .x{background:var(--bg);border:1px solid var(--line2);color:var(--ink)}
.det .pi{background:var(--card)}
.det .pi .gl button{background:#1E2B38E6;border-color:var(--line2)}
.det h2{font:600 27px/1.08 var(--disp);color:var(--warm);letter-spacing:.01em}
.det h4{color:var(--muted2);font-weight:700}
.bd{background:var(--card);border:1px solid var(--line2);color:var(--ink2);font:600 11.5px var(--ui);padding:4px 8px}
.bd svg,.bd .wi{display:none}
.bd.cls,.bd.cls.quest,.bd.cls.battle,.bd.cls.nc{padding-left:8px}
.bd.cls.quest{background:#174A4B;color:#87EEE5;border-color:#2C8F8E}
.bd.cls.battle{background:#542832;color:#FF9BA8;border-color:#A64E60}
.bd.cls.nc{background:#1C3A4E;color:#9FD8FF;border-color:#3D6D8C}
.bd.wsec{background:var(--sel);color:var(--ink);border-color:var(--line2)}
.bd.bonusbd{background:#55461F;border-color:#9F843A;color:#FFE083}
.facts{border:1px solid var(--line)}
.f{border-color:var(--line)!important}
.f small{color:var(--muted2);font-weight:700;letter-spacing:.12em}
.f b{color:var(--ink)}
.desc{color:var(--muted)}
.idc{background:var(--bg);border:1px solid var(--line2);color:var(--acc)}
.variants button{border-color:var(--line2);color:var(--ink2)}
.variants button.on{border-color:var(--acc);color:var(--acc)}
.dstrip{background:var(--bg);border-bottom-color:var(--line);gap:1px}
.dstrip button{background:var(--card);border:1px solid var(--line)}
.dstrip button img{background:var(--card)}
.dstrip button.on{border-color:var(--acc)}
.pri{background:var(--acc);color:#0E2230;font-weight:700}
.pri:hover{background:#9BDFF5}
.ghost{border:1px solid var(--line2);color:var(--acc)}
.ghost.on{background:#542832;border-color:#A64E60;color:#FF9BA8}
.joinbig{background:var(--bg);border:1px solid var(--line2);color:var(--acc)}
.joinbig:hover{background:var(--sel);border-color:var(--acc)}
.joinbig.done{background:#244A3B;border-color:#4D8D72;color:#99E2BD}
.bornote{background:#1C3040;color:#A9CFE6;border-bottom-color:var(--line)}
.chips a,.chips span,.chipx{background:var(--card);border:1px solid var(--line2);color:var(--ink2)}
.chips a.ilink{color:var(--acc);border-color:var(--line2)}.chips a.ilink:hover{background:var(--sel)}
a.ilink{color:var(--acc);border-bottom-color:#7DD3F070}
a.ilink:hover{color:#B5E8F8}
.qlist{border-color:var(--line)}.qlist>div{border-color:var(--line)}
.qlist>div>span,.qlist>div>a{color:var(--ink2)}

/* ---------- full page */
.full{background:var(--bg);backdrop-filter:none;z-index:45}
.sheet{z-index:46}
.full .fx{background:var(--panel);border:1px solid var(--line2);color:var(--ink)}
.full .gal{background:var(--panel);border-right:1px solid var(--line)}
.full .gmain{background:var(--card);border:1px solid var(--line)}
.full .gmain.peekon{box-shadow:inset 0 0 0 2px var(--acc)}
.full .info{padding:34px 70px 44px 40px}
.full h1{font:600 42px/1.04 var(--disp);color:var(--warm);letter-spacing:.01em}
.full .crumb{color:var(--acc);letter-spacing:.2em;font:700 11px var(--ui);text-transform:uppercase}
.full h3{font:600 21px var(--disp);letter-spacing:.03em;color:var(--warm);text-transform:none;margin:28px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.full .kv{gap:0;padding:1px 0 0 1px}
.full .kv .f{background:var(--panel);border:1px solid var(--line);margin:-1px 0 0 -1px}
.full .p,.full ul,.rbody{color:#C9D5DE}
.loc{background:var(--panel);border:1px solid var(--line)}
.loc span{color:var(--muted)}
.lthumb,.rthumb,.who .wimg{background:var(--card);border-color:var(--line2)}
.skill{background:var(--panel);border:1px solid var(--line)}
.skill .sm{color:var(--acc)}.skill p{color:var(--muted)}
.links a{color:var(--ink2)}.links a:hover{color:var(--acc)}
.btn{border:1px solid var(--line2);color:var(--acc);font-family:var(--ui)}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);color:#0E2230;border-color:var(--acc)}
.full .gthumbs{gap:1px}
.full .gthumbs button{background:var(--card);border:1px solid var(--line)}
.full .gthumbs button img{background:var(--card)}
.full .gthumbs button.on{border-color:var(--acc)}
.sarr{background:var(--panel);border:1px solid var(--line2);color:var(--acc)}
.sarr:hover{border-color:var(--acc)}
.peek2{background:var(--panel);border:1px solid var(--line2)}
.peek2 small{color:var(--acc)}.peek2 p{color:var(--muted)}
.peek2 h3{font:600 22px var(--disp);color:var(--warm);border:0;padding:0}
.pk-x{border:1px solid var(--line2);color:var(--ink2)}
#fullInfo .peeking{background:var(--sel);border-color:var(--acc)!important;outline:1px solid #7DD3F066}
.rbody .rh{color:var(--acc);font:700 11.5px var(--ui);letter-spacing:.18em}
.rbody .rh::after{background:var(--line)}
.rbody .rs{color:var(--warm);font:600 18px var(--disp)}
.rbody .rq{border-left-color:#2C8F8E;background:#1B3338}
.rbt{border:1px solid var(--line)}
.rbt th{background:var(--panel);color:var(--muted)}
.rbt td{border-top-color:var(--line)}
.rbt tr:nth-child(even) td{background:#1B2833}
.rbt td:last-child{color:var(--acc)}
ul.rb li::before{background:var(--line2)}
ul.rb li.d1{color:#B5C3CE}ul.rb li.d2,ul.rb li.d3{color:#9FB0BD}
ul.rb.tiles{gap:1px}
ul.rb.tiles li{background:var(--panel);border:1px solid var(--line)}
ul.rb.tiles li small{color:var(--muted)}
.who .wlink{background:var(--panel);border:1px solid var(--line2);color:var(--ink)}
.who .wlink:hover{border-color:var(--acc)}
.who em{color:var(--acc)}
.who.mon .wlink{border-color:#A64E60}.who.npc .wlink{border-color:#2C8F8E}.who.map .wlink{border-color:#4F7F99}
.at{color:var(--muted)}
.rimg{background:var(--card);border:1px solid var(--line)}
.rimg figcaption{border-top-color:var(--line);color:var(--ink2)}
.rbody .rscene{color:var(--muted);border-color:var(--line2)}
.kvl small{color:var(--muted2)}.kvl b{color:var(--ink)}
.dlg b{color:var(--acc)}
.tb{background:var(--card);color:var(--muted)}
.stepk,.rbody .rwc{color:#87EEE5}

/* ---------- IDs / list views */
.list-view{direction:ltr;padding:2px 0 30px}
.lv-head h2{font:600 32px/1 var(--disp);color:var(--warm)}
.lv-head p{color:var(--muted)}
.lv-head input{background:var(--bg);border:1px solid var(--line);height:42px}
.lv-head input:focus{border-color:var(--acc)}
.tbl{border-spacing:0 1px}
.tbl th{color:var(--muted2);font-weight:700}
.tbl td{background:var(--card);border-color:transparent!important}
.tbl tr:hover td{background:var(--card2)}
.tbl .idb{color:var(--acc)}
.tbl .none{color:var(--muted2)}
.tbl button{border:1px solid var(--line2);color:var(--ink2)}
.tbl button:hover{border-color:var(--acc);color:var(--acc)}
.tbl tr.tot td{background:var(--sel);color:var(--ink)}
.tbl tr.tot.big b{color:var(--acc)}
.tbl .bad{color:#FF9BA8}

/* ---------- Hall of Legends: the real sprite on a flat tile, name + count underneath */
.lg-hall{padding:2px 0 40px}
.lg-hall::before{display:none}
.lg-title{display:block;margin:4px 0 16px}
.lg-title>span{display:none}
.lg-title h2{font:600 34px/1 var(--disp);color:var(--warm);letter-spacing:.02em}
.lg-title p{color:var(--muted);font-size:13px;margin-top:8px;max-width:760px}
.lg-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px}
.lg-tile{padding:0;height:auto;display:flex;flex-direction:column;background:var(--card);border:0;border-top:2px solid var(--c);overflow:visible;transition:background .12s}
.lg-tile:hover{transform:none;box-shadow:none;background:var(--card2);outline:1px solid var(--acc);outline-offset:-1px;border-color:var(--c);z-index:1}
.lt-art{position:relative;display:block;aspect-ratio:1/1}
.lt-art img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.lt-art.scene img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.lt-art b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 54px var(--disp);color:var(--c)}
.lt-bar{display:flex;align-items:center;gap:8px;padding:0 12px;min-height:44px;background:var(--panel);border-top:1px solid var(--line);text-align:left}
.lt-bar i{font:700 11.5px var(--ui);font-style:normal;color:var(--c);font-variant-numeric:tabular-nums}
.lt-bar b{flex:1;min-width:0;font:600 14px var(--ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-bar em{font:500 11.5px var(--ui);color:var(--muted);font-style:normal;white-space:nowrap}

/* legend page banner: the painted banner, or the legend's real map with the legend's own picture */
.v5 .lghero,.wrap.v5.compact .lghero,.v5 .lghero.painted,.wrap.v5.compact .lghero.painted{height:clamp(220px,30vh,340px);aspect-ratio:auto;max-height:none;border:1px solid var(--line);border-top:2px solid var(--c);background:var(--card);margin-bottom:12px}
.v5 .lghero.painted{background:#0E1319}
.v5 .lghero.painted .lg-art.painted{background:#0E1319}
.v5 .lghero.painted .lg-paint{left:auto;right:0;width:auto;max-width:100%;height:100%;object-fit:cover;object-position:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.v5 .lghero.painted .lg-vig{background:linear-gradient(90deg,#0E1319 0%,#0E1319c0 24%,transparent 44%)}
.lg-art.plain{background:var(--card)}
.lg-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.lg-fig{position:absolute;right:7%;bottom:5%;height:90%;width:auto;max-width:40%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));cursor:pointer;z-index:2}
.lg-fig.scene,.lg-fig.raw{height:78%;bottom:11%;border:1px solid var(--line2);background:var(--card);filter:none}
.lghero .lg-vig,.lghero.painted .lg-vig{background:linear-gradient(90deg,#18232Ef2 0%,#18232Eb8 30%,transparent 55%);z-index:1}
.lgh-front{left:28px;bottom:24px}
.lgh-front small{font:700 11px var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--c)}
.lgh-front h2{font:600 56px/1 var(--disp);color:var(--warm);text-shadow:0 2px 16px #0009;margin:4px 0 10px;letter-spacing:.01em}
.lg-stats{color:#D3DEE6;font:500 12.5px var(--ui)}.lg-stats b{color:#fff}

/* ---------- small things */
.gart{background:var(--card)!important}
.gart::before,.gart::after,.ga-grain{display:none}
.ga-ini{font-family:var(--disp);font-weight:600;color:#9FB6C6!important;text-shadow:none}
.ga-id{font-family:var(--ui);color:#9FB6C6!important}
.ga-ico{opacity:.12;color:#9FB6C6!important}
.toast{background:var(--acc);color:#0E2230;box-shadow:0 10px 30px #0008;font-family:var(--ui)}
.sugg{background:var(--panel);border:1px solid var(--line2);box-shadow:0 24px 60px #0000008c}
.sugg .sr:hover,.sugg .sr.hi{background:var(--card)}
.sugg .sr.hi{outline:1px solid var(--acc)}
.sugg .st{background:var(--card);color:var(--muted);font-family:var(--ui)}
.sugg .sc{border-top-color:var(--line)}
.sugg .sc button{background:var(--card);border:1px solid var(--line2);color:var(--ink2)}
.sugg .sc button:hover{border-color:var(--acc);color:var(--acc)}
.sugg .sall{color:var(--acc)}
.nodata{background:var(--bg)}
.nodata .brand b{font:600 34px var(--disp);color:var(--warm)}
@media (max-width:1200px){.shell{grid-template-columns:168px minmax(0,1fr)}.top .brand{width:160px}.top .brand b{font-size:22px}.v5 .mode{padding:0 12px}.top .count{display:none}}
/* pages with no picture: an empty tile that says so (no made-up art) */
.gart.none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card)!important}
.gart.none .ga-none{font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);text-align:center;padding:0 10px}
.gart.none .ga-id{position:static;transform:none;font:700 15px var(--ui);color:var(--ink2)!important;text-shadow:none}
.gart.none.tile .ga-none{letter-spacing:.06em;text-transform:none;font-size:12px;color:var(--muted)}
.lt-art .ga-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted2)}

/* =====================================================================
   v5.1 "alive": same calm blue, but light, depth and motion.
   Only light and colour; every picture stays the real one.
   ===================================================================== */
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-6%,4%,0) rotate(8deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}
@keyframes shine{0%{background-position:-40% 0}100%{background-position:140% 0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes selpulse{0%,100%{box-shadow:0 0 0 0 #7DD3F000,inset 0 0 0 2px var(--acc)}50%{box-shadow:0 0 22px 2px #7DD3F040,inset 0 0 0 2px var(--acc)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}

/* a slow, soft light moving behind everything */
body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 34% at 78% 12%,#7DD3F01c 0%,transparent 70%),radial-gradient(34% 30% at 22% 88%,#B9A8F514 0%,transparent 70%),radial-gradient(30% 28% at 55% 55%,#7DD3F00a 0%,transparent 70%);
  animation:aurora 26s ease-in-out infinite;will-change:transform}
.wrap.v5,.v5 ~ .sndbtn{position:relative;z-index:1}
.main,.shell{background:transparent}

/* header: a thin living line of light under it, brand with a soft sheen */
.top{background:linear-gradient(180deg,#223243 0%,#1E2B38 100%)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,#7DD3F0 30%,#B9A8F5 55%,#7DD3F0 75%,transparent 100%);background-size:200% 100%;animation:shine 9s linear infinite;opacity:.75}
.top .brand b{background:linear-gradient(100deg,#F2E6C8 0%,#F2E6C8 40%,#FFFFFF 50%,#F2E6C8 60%,#F2E6C8 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
.v5 .mode{transition:background .18s,color .18s,box-shadow .18s}
.v5 .mode.on{background:linear-gradient(180deg,#34506A,#2C4459)}
.top .search{transition:border-color .18s,box-shadow .18s}
.top .search:focus-within{box-shadow:0 0 0 3px #7DD3F01f}
.tbtn,.sortslot .sortsel{transition:border-color .18s,color .18s,background .18s}

/* sidebar: the active row glows, rows slide a little on hover */
.side{background:linear-gradient(180deg,#1F2D3B 0%,#1B2733 100%)}
.side .sec{transition:background .15s,color .15s,padding-left .18s,border-color .15s}
.side .sec:hover{padding-left:19px}
.side .sec.on{background:linear-gradient(90deg,#35536B 0%,#2C4457 100%);box-shadow:inset 0 0 18px #7DD3F014}
.side .sec.on .sl{text-shadow:0 0 12px #7DD3F055}

/* tiles: a soft stage light behind the picture, a floor glow, the picture lifts on hover */
.card{--glow:#7DD3F0}
.card:has(.m-Legend){--glow:#F7D975}
.card:has(.m-Rare){--glow:#FF9BB5}
.card:has(.m-Seasonal){--glow:#99E2BD}
.card:has(.acq.ac),.card:has(.m-AC){--glow:#C7B4FF}
.card .stage{background:radial-gradient(62% 58% at 50% 48%,color-mix(in srgb,var(--glow) 16%,#253645) 0%,#253645 72%)}
.card .stage::before{content:"";position:absolute;left:18%;right:18%;bottom:7%;height:14%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 30%,transparent),transparent);pointer-events:none;opacity:.75;transition:opacity .25s}
.card.cut .stage img,.card.raw .stage img{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.card:hover .stage::before{opacity:1}
.card.cut:hover .stage img,.card.raw:hover .stage img{transform:translateY(-5px) scale(1.035);filter:drop-shadow(0 12px 16px rgba(0,0,0,.32)) drop-shadow(0 0 14px color-mix(in srgb,var(--glow) 25%,transparent))}
.card.scene .stage img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card.scene:hover .stage img{transform:scale(1.04)}
.card .bar{position:relative;transition:background .2s}
.card .bar::before{content:"";position:absolute;left:50%;right:50%;top:-1px;height:2px;background:var(--glow);transition:left .3s cubic-bezier(.2,.8,.2,1),right .3s cubic-bezier(.2,.8,.2,1);opacity:.9}
.card:hover .bar::before{left:0;right:0}
.card:hover{outline-color:color-mix(in srgb,var(--glow) 70%,#7DD3F0)}
.card.sel{animation:selpulse 2.6s ease-in-out infinite;outline:0}
.card.sel .bar::before{left:0;right:0}
/* new tiles rise in, one after another */
.grid .card{animation:rise .38s cubic-bezier(.2,.8,.2,1) both}
.grid .card:nth-child(2){animation-delay:.03s}.grid .card:nth-child(3){animation-delay:.06s}.grid .card:nth-child(4){animation-delay:.09s}
.grid .card:nth-child(5){animation-delay:.12s}.grid .card:nth-child(6){animation-delay:.15s}.grid .card:nth-child(7){animation-delay:.18s}.grid .card:nth-child(n+8){animation-delay:.2s}
.grid .card.sel{animation:selpulse 2.6s ease-in-out infinite}

/* "All" sections: a small light mark before the title, the arrow moves */
.grp .gh h3{position:relative;padding-left:14px}
.grp .gh h3::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-4px;background:var(--acc);transform:rotate(45deg);box-shadow:0 0 10px #7DD3F0aa;animation:breathe 3.2s ease-in-out infinite}
.grp .gh em{padding:2px 8px;border:1px solid var(--line);background:#1E2B38aa}
.grp .gh .seeall{transition:color .15s,letter-spacing .2s}
.grp .gh .seeall:hover{text-decoration:none;color:#B5E8F8;letter-spacing:.03em}
.grp{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}

/* badges get a faint inner light */
.acq,.mk.tx,.bd{box-shadow:inset 0 1px 0 #FFFFFF14}
.acq.gold,.acq.merge,.mk.m-Legend{box-shadow:inset 0 1px 0 #FFFFFF14,0 0 10px #FFD66F1a}

/* filters and tiles in the band */
.bt{transition:background .15s}
.bt .bi img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bt:hover .bi img{transform:scale(1.06)}
.tab,.seg button,.tg .t{transition:background .15s,color .15s,border-color .15s}

/* Hall of Legends: each legend's colour lives in the tile */
.lg-tile .lt-art{background:radial-gradient(60% 56% at 50% 50%,color-mix(in srgb,var(--c) 18%,#253645) 0%,#253645 74%)}
.lg-tile .lt-art::after{content:"";position:absolute;left:20%;right:20%;bottom:6%;height:12%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 35%,transparent),transparent);opacity:.7;transition:opacity .25s}
.lg-tile .lt-art img{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s}
.lg-tile:hover .lt-art img{transform:translateY(-6px) scale(1.05);filter:drop-shadow(0 12px 16px rgba(0,0,0,.32)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 40%,transparent))}
.lg-tile:hover .lt-art::after{opacity:1}
.lg-tile{border-top-width:3px;animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
.lg-tile:hover{outline-color:var(--c)}
.lg-tile:hover .lt-bar{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,#1E2B38),#1E2B38 70%)}
.lg-title h2,.lv-head h2{text-shadow:0 0 24px #F2E6C826}

/* legend banner: a very slow push-in, the legend colour glows along the top */
.v5 .lghero{box-shadow:0 -1px 18px -4px var(--c)}
.v5 .lghero .lg-paint,.v5 .lghero .lg-map{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:70% 50%}
.lgh-front h2{text-shadow:0 2px 16px #0009,0 0 30px color-mix(in srgb,var(--c) 35%,transparent)}

/* drawer and full page */
.det{animation:detIn .22s ease-out}
.det .pi{background:radial-gradient(60% 60% at 50% 50%,#2F475B 0%,#253645 75%)}
.full .gmain{background:radial-gradient(55% 55% at 50% 48%,#30495D 0%,#253645 72%)}
.full h3{position:relative}
.full h3::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--acc);box-shadow:0 0 8px #7DD3F0aa}
.pri,.btn.pri{transition:background .15s,box-shadow .2s}
.pri:hover,.btn.pri:hover{box-shadow:0 0 18px #7DD3F055}

@media (prefers-reduced-motion:reduce){
  body::before,.top::after,.top .brand b,.card.sel,.grid .card,.grp,.lg-tile,.v5 .lghero .lg-paint,.v5 .lghero .lg-map,.grp .gh h3::before{animation:none!important}
}

/* =====================================================================
   v5.2 "Dark Moon Blue": deep midnight blue, moonlight on the edges
   ===================================================================== */
:root{
  --bg:#0A1120;--panel:#0E182A;--card:#132038;--card2:#192A47;--line:#1F3354;--line2:#2C466E;
  --ink:#EEF3FA;--ink2:#C9D6E8;--muted:#8FA6C4;--muted2:#6A82A3;
  --gold:#A9CFFF;--gold2:#A9CFFF;--goldbg:#1B3050;--goldline:#3A5E91;
  --acc:#A9CFFF;--acc2:#C9B8FF;--warm:#F1E8D2;--sel:#1C3254;--moon:#DCE8FF;
}
/* the page: dark in the middle, moonlight coming in from the edges */
body{background:
  radial-gradient(70% 55% at 100% 0%,#23406E 0%,#162B4D 22%,transparent 58%),
  radial-gradient(55% 50% at 0% 0%,#1A3159 0%,transparent 55%),
  radial-gradient(60% 45% at 0% 100%,#15294A 0%,transparent 60%),
  radial-gradient(60% 45% at 100% 100%,#172B50 0%,transparent 60%),
  #0A1120;background-attachment:fixed}
body::before{background:
  radial-gradient(22% 22% at 92% 6%,#DCE8FF22 0%,#9CC9FF10 45%,transparent 72%),
  radial-gradient(38% 34% at 78% 14%,#6FA6FF14 0%,transparent 70%),
  radial-gradient(34% 30% at 18% 90%,#9C8CFF10 0%,transparent 70%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 160px 20px #00000080,inset 0 0 2px 1px #6F9BD822}
::-webkit-scrollbar-thumb{background:#243B5E;border-color:transparent}
::-webkit-scrollbar-thumb:hover{background:#30507E}

/* header and side list: glass over the moonlight, a lit edge */
.top{background:linear-gradient(180deg,#132440ee 0%,#0E1A2Eee 100%);border-bottom-color:#22395E;box-shadow:0 1px 0 #6F9BD81a,0 10px 30px -12px #000000aa}
.top::after{background:linear-gradient(90deg,transparent 0%,#A9CFFF 28%,#DCE8FF 50%,#C9B8FF 70%,transparent 100%);background-size:200% 100%}
.top .search{background:#0A1322cc;border-color:#22395E}
.tbtn,.sortslot .sortsel{background:#0F1B2Fcc;border-color:#22395E}
.v5 .modes{border-color:#22395E}.v5 .mode{border-right-color:#22395E}
.v5 .mode.on{background:linear-gradient(180deg,#24406A,#1B3154)}
.side{background:linear-gradient(180deg,#10203Ae6 0%,#0C1628e6 60%,#0E1A30e6 100%);border-right-color:#1F3354;box-shadow:inset -1px 0 0 #6F9BD814}
.side .sec.on{background:linear-gradient(90deg,#24416B 0%,#1A2F50 100%);box-shadow:inset 0 0 20px #A9CFFF14}
.side .sec:hover{background:#15253F}

/* tiles: a moonlit stage, lit edges */
.card{--glow:#A9CFFF;background:linear-gradient(180deg,#16263F 0%,#112035 100%);box-shadow:inset 0 1px 0 #FFFFFF0d,inset 0 0 0 1px #FFFFFF05}
.card .stage{background:radial-gradient(64% 60% at 50% 46%,color-mix(in srgb,var(--glow) 14%,#16263F) 0%,#132038 58%,#0F1B30 100%)}
.card:hover{background:linear-gradient(180deg,#1C3050 0%,#152640 100%)}
.bar{background:linear-gradient(180deg,#0F1B2E 0%,#0D182A 100%);border-top-color:#1F3354}
.card.sel .bar{background:#1C3254}
.grid{gap:1px}
.grid-wrap{background:transparent}
.lt-bar{background:linear-gradient(180deg,#0F1B2E,#0D182A);border-top-color:#1F3354}
.lg-tile{background:#132038}
.lg-tile .lt-art{background:radial-gradient(60% 56% at 50% 50%,color-mix(in srgb,var(--c) 18%,#16263F) 0%,#132038 60%,#0F1B30 100%)}
.lt-art.s img,.lt-art.scene img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.lg-tile:hover .lt-art.scene img{transform:scale(1.05);filter:none}

/* panels */
.bonus{background:linear-gradient(180deg,#10203Ae6,#0C1628e6);border-color:#1F3354}
.det{background:linear-gradient(180deg,#112038 0%,#0D1829 100%);border-color:#2C466E;box-shadow:0 30px 70px #000000a8,0 0 0 1px #6F9BD81a}
.det .pi{background:radial-gradient(60% 60% at 50% 50%,#1D3354 0%,#132038 75%)}
.full{background:
  radial-gradient(60% 50% at 100% 0%,#1E3963 0%,transparent 55%),
  radial-gradient(50% 45% at 0% 100%,#15294A 0%,transparent 60%),#0A1120}
.full .gal{background:#0E182Acc}
.full .gmain{background:radial-gradient(55% 55% at 50% 48%,#1D3354 0%,#132038 72%)}
.full .kv .f,.loc,.skill,ul.rb.tiles li,.who .wlink{background:#0F1B2Ecc}
.sheet .sc,.sugg{background:#0E182A;border-color:#2C466E}
.tbl td{background:#132038cc}
.tbl tr:hover td{background:#192A47}
.pri,.btn.pri{background:var(--acc);color:#0A1528}
.pri:hover,.btn.pri:hover{background:#C6DFFF}
.toast{background:var(--acc);color:#0A1528}
.gart{background:#132038!important}

/* bonus icons (instead of pet pictures) */
.bic{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--bc) 22%,#132038),#101C31);border:1px solid color-mix(in srgb,var(--bc) 35%,#1F3354)}
.bic svg{width:58%;height:58%;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--bc) 45%,transparent))}
.bic b{position:absolute;right:3px;bottom:1px;font:800 9px/1 var(--ui);color:var(--bc);letter-spacing:.02em;text-shadow:0 0 4px #000}
.br .ti{background:none;overflow:visible}
.br:hover .bic{border-color:var(--bc)}
.br.on .bic{border-color:var(--bc);box-shadow:0 0 12px color-mix(in srgb,var(--bc) 40%,transparent)}

/* =====================================================================
   v5.3: every card is one clear unit, calm hover, full marks with icons
   ===================================================================== */
/* cards: a real gap and a thin frame, so a name never looks like it belongs to the next picture */
.grid,.grid.wide,.grid.gg{gap:8px}
.card{border:1px solid #22395E;box-shadow:inset 0 1px 0 #FFFFFF0a}
.card:hover{outline:0;border-color:#5E8BC4;background:linear-gradient(180deg,#182B48 0%,#132338 100%)}
.card.sel{animation:none!important;border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 18px #A9CFFF33}
.bar{border-top:1px solid #22395E}
/* calm: no moving pictures on hover */
.card .stage img,.card.cut .stage img,.card.raw .stage img,.card.scene .stage img{transition:none!important}
.card:hover .stage img,.card.cut:hover .stage img,.card.raw:hover .stage img,.card.scene:hover .stage img{transform:none!important}
.card.cut:hover .stage img,.card.raw:hover .stage img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))!important}
.card .stage::before{transition:none}
.card:hover .stage::before{opacity:.75}
.lg-tile .lt-art img{transition:none!important}.lg-tile:hover .lt-art img{transform:none!important}
.lg-tile .lt-art img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.lg-tile .lt-art.scene img{filter:none}
.bt .bi img{transition:none}.bt:hover .bi img{transform:none}
/* wiki pictures with their own background: show the whole picture, never crop it */
.card.scene .stage img{inset:0;width:100%;height:100%;object-fit:contain}
.wcard.wide.scene .stage img{object-fit:cover}

/* icon chips (icons drawn by GPT for the atlas) */
.gb{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 4px;border:1px solid color-mix(in srgb,var(--ic) 50%,transparent);background:#0A1322e6;color:var(--ic);font:700 10.5px/1 var(--ui);font-style:normal;letter-spacing:.02em;white-space:nowrap;box-shadow:inset 0 1px 0 #FFFFFF10}
.gb svg{width:14px;height:14px;flex-shrink:0}
.gb b{font-weight:700}
.gb.io{padding:0;width:20px;justify-content:center}
.mks{top:7px;left:7px;right:40px;flex-direction:row;flex-wrap:wrap;gap:3px}
.tys{position:absolute;top:7px;right:7px;display:flex;flex-direction:column;gap:3px;z-index:2}
.tys .gb{width:26px;height:26px;padding:0;justify-content:center;background:#0A1322ee}
.tys .gb svg{width:17px;height:17px}
.card .cl,.card .cxs{display:none}
.bpills{gap:3px}
.bpills b{display:inline-flex;align-items:center;gap:4px;background:#0A1322e6;color:#FFE08A;border:1px solid #9F843A;padding:2px 7px 2px 5px}
.bpills b svg{width:13px;height:13px}
/* price / how to get: icon + text */
.acq{display:inline-flex;align-items:center;gap:4px}
.acq svg{width:13px;height:13px;flex-shrink:0}
.tg .acq svg{display:none}
/* details: chips as badges */
.badges{gap:5px}
.badges .gb,.pk-bits .gb{height:26px;padding:0 9px 0 6px;font-size:12px}
.badges .gb svg,.pk-bits .gb svg{width:16px;height:16px}
.badges .acq{height:26px;padding:0 9px;font-size:12px}
.bd.bonusbd{display:inline-flex;align-items:center;gap:5px}.bd.bonusbd svg{display:inline-block!important;width:15px;height:15px}
.sidb{display:inline-flex;align-items:center;gap:5px}.sidb svg{width:13px;height:13px}
.bic svg{width:62%;height:62%}
/* rarity tier (the wiki's Rarity field): quieter than the marks */
.mks .gb.tier{border-color:transparent;background:#0A1322c0;font-weight:600}
.fchip i[data-unchip="qtype"]{color:var(--acc)}
/* v5.4 legend shown with its original in-game picture, untouched */
.lg-art.solo{background:#0A1120;display:flex;justify-content:flex-end;align-items:stretch}
.lg-art.solo .lg-solo{height:100%;width:auto;max-width:60%;object-fit:contain;image-rendering:auto;margin-right:6%}
/* v5.5 legend banner folds away while you scroll */
.v5 .lghero{transition:height .28s ease,margin .28s ease,opacity .22s ease,border-width .28s ease}
.v5 .lghero.mini,.wrap.v5.compact .lghero.mini{height:0!important;margin-bottom:0!important;opacity:0;border-width:0!important;box-shadow:none;pointer-events:none}
/* legend: their own items vs items only sold in their shops */
.lg-sw{display:flex;flex-direction:column;gap:2px;margin:6px 10px 10px}
.lg-sw button{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:600 12px var(--ui);text-align:left;cursor:pointer}
.lg-sw button em{font-style:normal;color:var(--muted2);font-weight:500}
.lg-sw button.on{border-color:var(--acc);color:var(--warm);background:var(--card2)}
.lg-sw button.on em{color:var(--acc)}
/* hall tiles show the painted banner, cropped on the character */
.lt-art.banner img{inset:0;width:100%;height:100%;object-fit:cover;object-position:84% 40%;filter:none}
/* quick navigation */
.qnav{position:fixed;right:16px;bottom:58px;z-index:14;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.qnav.on{opacity:1;transform:none;pointer-events:auto}
.qnav button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:36px;padding:0 10px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--acc);font:600 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.qnav button:hover{border-color:var(--acc);color:var(--warm)}
.qnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qnav button[data-q="top"] span{display:none}
.qnav.up button[data-q="top"] span{display:inline}
.qnav.up button[data-q="top"]{border-color:var(--acc)}
@media (max-width:700px){.qnav{right:10px;bottom:56px}.qnav button{height:32px;min-width:34px}}
/* v5.6 legend banner shrinks with the scroll (sticky inside the scroll area) */
.v5 .lghero.mini,.wrap.v5.compact .lghero.mini{opacity:1;border-width:1px!important;border-top-width:2px!important;pointer-events:auto}
.v5 #gridWrap > .lghero,.wrap.v5.compact #gridWrap > .lghero,.v5 #gridWrap > .lghero.painted{position:sticky;top:0;z-index:6;transition:none;aspect-ratio:auto;max-height:none;margin-top:0}
.v5 #gridWrap > .lghero .lgh-front{bottom:calc(24px - 12px*var(--p,0))}
.v5 #gridWrap > .lghero .lgh-front h2{font-size:calc(56px - 30px*var(--p,0));margin:calc(4px - 4px*var(--p,0)) 0 calc(10px - 10px*var(--p,0))}
.v5 #gridWrap > .lghero .lgh-front small{opacity:calc(1 - 1.6*var(--p,0))}
.v5 #gridWrap > .lghero .lg-stats{opacity:calc(1 - 2*var(--p,0));max-height:calc(40px - 40px*var(--p,0));overflow:hidden}
.v5 #gridWrap > .lghero .lg-paint,.v5 #gridWrap > .lghero .lg-map{animation:none}
/* search options row in the suggestions */
.sopt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sopt small{width:100%;font:700 10px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sopt button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line2);background:var(--card);color:var(--warm);font:600 12px var(--ui);cursor:pointer}
.sopt button i{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.sopt button:hover{border-color:var(--acc);background:var(--card2)}

/* =====================================================================
   v5.8 "Warm Onyx": near-black with gold light (as in the original atlas)
   ===================================================================== */
:root{
  --bg:#0D0C0B;--panel:#141311;--card:#191816;--card2:#211F1B;--line:#2A2723;--line2:#3A352E;
  --ink:#F2EADB;--ink2:#D8CDB8;--muted:#9A907F;--muted2:#6E665A;
  --gold:#E8C674;--gold2:#F3D78F;--goldbg:#2A2214;--goldline:#6B5628;
  --acc:#E8C674;--acc2:#F3D78F;--warm:#F2EADB;--sel:#2A2418;--moon:#F7E7BF;
}
body{background:
  radial-gradient(70% 55% at 100% 0%,#2A2316 0%,#18140E 24%,transparent 58%),
  radial-gradient(55% 50% at 0% 100%,#1C1710 0%,transparent 58%),
  #0D0C0B;background-attachment:fixed}
body::before{background:radial-gradient(24% 24% at 92% 6%,#F3D78F14 0%,transparent 70%),radial-gradient(34% 30% at 14% 92%,#E8C67410 0%,transparent 70%)}
body::after{box-shadow:inset 0 0 160px 20px #00000090,inset 0 0 2px 1px #E8C6741a}
::-webkit-scrollbar-thumb{background:#3A342A}::-webkit-scrollbar-thumb:hover{background:#524836}
.top{background:linear-gradient(180deg,#171512ee 0%,#11100Eee 100%);border-bottom-color:#2A2723;box-shadow:0 1px 0 #E8C67414,0 10px 30px -12px #000000cc}
.top::after{background:linear-gradient(90deg,transparent 0%,#9C7A36 25%,#F3D78F 50%,#C99A45 72%,transparent 100%);background-size:200% 100%}
.top .search{background:#0F0E0Ccc;border-color:#2F2B25}
.tbtn,.sortslot .sortsel{background:#14130Fcc;border-color:#2F2B25}
.v5 .modes{border-color:#2F2B25}.v5 .mode{border-right-color:#2F2B25}
.v5 .mode.on{background:linear-gradient(180deg,#3A2F18,#2A2213);color:var(--gold2)}
.side{background:linear-gradient(180deg,#151411e6 0%,#11100Ee6 100%);border-right-color:#2A2723;box-shadow:inset -1px 0 0 #E8C6740d}
.side .sec.on{background:linear-gradient(90deg,#33291A 0%,#221D14 100%);box-shadow:inset 0 0 20px #E8C67412}
.side .sec:hover{background:#1D1B17}
.card{--glow:#E8C674;background:linear-gradient(180deg,#1A1916 0%,#151412 100%);border:1px solid #2A2723;box-shadow:inset 0 1px 0 #FFFFFF08}
.card:hover{border-color:#6B5628;background:linear-gradient(180deg,#201E1A 0%,#181714 100%)}
.card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px -6px #E8C67466}
.card .stage{background:radial-gradient(62% 58% at 50% 46%,#24221E 0%,#191816 60%,#131210 100%)}
.card .stage::before{background:radial-gradient(closest-side,#00000070,transparent);opacity:.9}
.bar,.lt-bar{background:linear-gradient(180deg,#141311 0%,#11100E 100%);border-top:1px solid #2A2723}
.card.sel .bar{background:#221D14}
.lg-tile{background:#191816}
.lg-tile .lt-art{background:radial-gradient(60% 56% at 50% 50%,color-mix(in srgb,var(--c) 14%,#211F1B) 0%,#191816 60%,#131210 100%)}
.bonus{background:linear-gradient(180deg,#151411e6,#11100Ee6);border-color:#2A2723}
.det{background:linear-gradient(180deg,#171613 0%,#11100E 100%);border-color:#3A352E;box-shadow:0 30px 70px #000000b0,0 0 0 1px #E8C67414}
.det .pi{background:radial-gradient(60% 60% at 50% 50%,#26231E 0%,#191816 75%)}
.full{background:radial-gradient(60% 50% at 100% 0%,#2A2316 0%,transparent 55%),radial-gradient(50% 45% at 0% 100%,#1C1710 0%,transparent 60%),#0D0C0B}
.full .gal{background:#141311cc}
.full .gmain{background:radial-gradient(55% 55% at 50% 48%,#26231E 0%,#191816 72%)}
.full .kv .f,.loc,.skill,ul.rb.tiles li,.who .wlink{background:#141311cc}
.sheet .sc,.sugg{background:#141311;border-color:#3A352E}
.tbl td{background:#191816cc}.tbl tr:hover td{background:#211F1B}
.pri,.btn.pri,.toast{background:var(--gold);color:#1A1407}
.gart{background:#191816!important}
.bic{background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--bc) 20%,#1D1B17),#141311);border-color:color-mix(in srgb,var(--bc) 35%,#2A2723)}
.v5 .lghero{box-shadow:0 -1px 18px -4px var(--c)}
.qnav button{background:color-mix(in srgb,#141311 92%,transparent);border-color:#3A352E;color:var(--gold)}
.lg-sw button{background:#191816;border-color:#2A2723}.lg-sw button.on{background:#221D14;border-color:var(--gold)}
.sopt button{background:#191816;border-color:#3A352E}
.fchip{background:#2A2214;border-color:#6B5628}

/* BlurHash preview under every picture; the picture fades in over it */
.stage .bh{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) saturate(1.2);transform:scale(1.15);opacity:.9;transition:opacity .45s ease;pointer-events:none}
.card.cut .stage .bh,.card.raw .stage .bh{inset:12%;border-radius:50%;filter:blur(18px) saturate(1.3);opacity:.55}
.stage img.pic{opacity:0;transition:opacity .4s ease;animation:picshow 0s 3s forwards}
.stage img.pic.in{opacity:1}
.card.cut .stage img.pic.in ~ .bh,.stage img.pic.in + .bh{opacity:.35}
.card.scene .stage img.pic.in{opacity:1}
@keyframes picshow{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.stage img.pic{transition:none}}

/* ================= v5.9 class skills: hotbar, tooltip, side panel ================= */
.skbar{margin:8px 0 14px;min-height:58px}
.skwait{display:block;color:var(--muted);font-size:12.5px;padding:18px 0}
.skrow{display:flex;gap:8px;align-items:flex-start;flex-wrap:nowrap}
.skrow.skhid{margin-top:8px;flex-wrap:wrap;padding:8px;border:1px dashed var(--line2);border-radius:12px;background:#ffffff05}
.sks{position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:12px;padding:0;background:#0b0a09;border:1px solid var(--line2);box-shadow:inset 0 0 0 1px #00000080,0 4px 12px #0006;transition:transform .12s,border-color .12s,box-shadow .12s;cursor:pointer}
.sks .skic{position:absolute;inset:3px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.sks .skic img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.sks .skic svg{width:26px;height:26px}
.sks:hover,.sks:focus-visible{transform:translateY(-2px);border-color:var(--gold);outline:0}
.sks.on{border-color:var(--gold);box-shadow:0 0 0 2px #E8C67466,0 6px 18px #0008;transform:translateY(-2px) scale(1.06)}
.sks .skkey{position:absolute;left:-5px;top:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:6px;background:#17140f;border:1px solid var(--goldline);color:var(--gold);font:700 10.5px/16px Outfit,sans-serif;font-style:normal;text-align:center;z-index:1}
.sks .skmana{position:absolute;right:-4px;bottom:-6px;padding:0 5px;height:16px;border-radius:6px;background:#10263d;border:1px solid #2f5f8f;color:#9fd0ff;font:700 10px/14px Outfit,sans-serif;font-style:normal;z-index:1}
.sks.k-passive{width:44px;height:44px;flex-basis:44px;border-style:dashed}
.skpas{align-self:center;display:flex;align-items:center;gap:4px;height:30px;padding:0 9px;margin-left:2px;border-radius:99px;border:1px solid var(--line2);color:var(--muted);font-size:12px;background:#ffffff06}
.skpas svg{width:15px;height:15px}.skpas b{font-weight:700;color:var(--ink2)}
.skpas:hover,.skpas.on{color:var(--gold);border-color:var(--goldline)}
.sktip{position:fixed;z-index:200;width:230px;padding:10px 12px;border-radius:12px;background:#15130f;border:1px solid #4a3d25;box-shadow:0 14px 40px #000c;color:var(--ink);font-size:12.5px;pointer-events:none;direction:ltr}
.sktip .skth{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.sktip .skic{width:34px;height:34px;flex:0 0 34px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0b0a09;color:var(--gold2)}
.sktip .skic img{width:100%;height:100%;object-fit:cover}.sktip .skic svg{width:20px;height:20px}
.sktip .skth b{display:block;font-size:13.5px;line-height:1.2}.sktip .skth em{font-style:normal;color:var(--muted);font-size:11.5px}
.sktip .sktg{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.sktip .sktg div{min-width:0}.sktip .sktg div:nth-child(3){grid-column:1/-1}
.sktip small{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.sktip .sktg b{font-weight:600;color:var(--gold2)}
.sktip p{margin:0;color:var(--ink2);line-height:1.45}
.skp{position:absolute;top:0;left:432px;width:min(560px,calc(100% - 444px));max-height:calc(100% - 14px);overflow-y:auto;z-index:31;border-radius:20px;background:linear-gradient(180deg,#1b1915 0%,#12110e 100%);border:1px solid #4a3d25;box-shadow:0 30px 80px #000000c0,0 0 0 1px #E8C6741a;animation:skIn .2s ease-out;direction:ltr}
@keyframes skIn{from{transform:translateX(-18px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.skph{position:relative;display:flex;gap:14px;align-items:center;padding:20px 58px 16px 20px;border-bottom:1px solid var(--line)}
.skph .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:11px;background:#000a;color:var(--ink);display:flex;align-items:center;justify-content:center}
.skbig{width:84px;height:84px;flex:0 0 84px;border-radius:18px;overflow:hidden;background:#0b0a09;border:1px solid var(--goldline);box-shadow:0 0 0 3px #E8C67422,0 10px 30px #000a;display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.skbig img{width:100%;height:100%;object-fit:cover}.skbig svg{width:40px;height:40px}
.skht{min-width:0;flex:1}.skht small{color:var(--muted);font-size:12px}
.skht h3{margin:2px 0 4px;font-size:24px;line-height:1.15;font-weight:700;color:var(--ink)}
.skht em{font-style:normal;color:var(--gold2);font-size:13px}
.sknav{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}
.sknav button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);color:var(--ink2);font-size:18px;line-height:1}
.sknav button:hover{border-color:var(--gold);color:var(--gold)}
.skpb{padding:16px 20px 22px}
.skpb h4{margin:16px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2)}
.skx{margin:0;padding:12px 14px;border-radius:12px;background:#ffffff07;border:1px solid var(--line);font-size:14.5px;line-height:1.65;color:var(--ink)}
ul.skx,ul.skw{padding-left:30px}
.skx li,.skw li{margin:3px 0}
.skx.rtl{direction:rtl;text-align:right}
.skx p{margin:0 0 8px}.skx p:last-child{margin:0}.skx b{color:var(--gold2)}
.skw{margin:0;color:var(--ink2);font-size:13px;line-height:1.55}
@media (max-width:1200px){.skp{left:0;width:min(560px,96vw);z-index:40}}
/* class quick filters */
#seg .cfg{align-self:center;margin:0 2px 0 10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
#seg button.cf{display:inline-flex;align-items:center;gap:5px}
#seg button.cf svg{width:14px;height:14px}
.wrap.compact .row2.clsbar,.v5.compact .row2.clsbar{max-height:none;opacity:1;pointer-events:auto;margin:0 0 10px;overflow:visible}
.row2.clsbar .seg{max-width:100%;flex-wrap:wrap}
/* female looks button + tiny language switch */
.tbtn.gbtn{width:40px;padding:0;display:flex;align-items:center;justify-content:center}
.tbtn.gbtn svg{width:19px;height:19px}
.tbtn.gbtn.on{color:#ff9ecf;border-color:#7a3b5c;background:#2a1520}
.langbtn{position:fixed;left:8px;bottom:8px;z-index:90;width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);background:#14130fcc;color:var(--muted);font:600 11px/22px Tahoma,Outfit,sans-serif;text-align:center;padding:0;opacity:.7}
.langbtn:hover{opacity:1;color:var(--gold);border-color:var(--goldline)}

@media (max-width:760px){
  .skp{position:fixed;left:8px;right:8px;top:70px;bottom:8px;width:auto;max-height:none;z-index:120}
  .row2.clsbar .seg{flex-wrap:nowrap;overflow-x:auto}
  .sks{width:46px;height:46px;flex-basis:46px}
}
/* marks bar always ready (no need to open Filters) */
.wrap.compact .row2,.v5.compact .row2{max-height:none;opacity:1;pointer-events:auto;margin:0 0 10px;overflow:visible;border-width:1px}
.pnote{color:var(--muted);font-weight:400;font-size:11.5px}

/* Arabic fonts (v6.10): IBM Plex Sans Arabic for the interface and texts (its own Latin keeps
   mixed lines like «35 Mana، الـ Cooldown» even), El Messiri for Arabic headings. Only downloaded in Arabic mode. */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.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:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.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:"IBM Plex Sans Arabic";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.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:"El Messiri";font-weight:600;font-display:swap;src:url(fonts/el-messiri-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"El Messiri";font-weight:700;font-display:swap;src:url(fonts/el-messiri-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
html.lang-ar{--ui:"IBM Plex Sans Arabic",Manrope,"Segoe UI",sans-serif;--disp:"El Messiri","Cormorant SC",Georgia,serif}
html.lang-ar body{font-family:var(--ui)}
html.lang-ar *:not(.brand):not(.brand *){letter-spacing:normal!important}
html.lang-ar .skx.rtl{font-family:var(--ui);font-size:15px;line-height:1.85}
html.lang-ar .skx.rtl b{font-weight:700}
html.lang-ar .facts small,html.lang-ar .skpb h4,html.lang-ar .sktip small,html.lang-ar #seg .cfg{text-transform:none;font-family:var(--ui);font-weight:500}
html.lang-ar .skpb h4{font-family:var(--disp);font-size:15px;font-weight:700}
/* Arabic mode: order each line by its own first letter, so «جاري تحميل الـ Skills…» reads right even inside English boxes */
html.lang-ar body *:not(svg):not(svg *){unicode-bidi:plaintext}
html.lang-ar #q{direction:rtl}
/* ================================================================ Quest Guide (v6.11) - a quest drawn as a route */
.qg{position:fixed;inset:0;z-index:44;overflow:auto;direction:ltr;color:var(--ink);font-family:var(--ui);
  background:radial-gradient(#ffffff0a 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(180deg,#152029,#18232E 40%,#141d26)}
.qg[hidden]{display:none}
.qgload{padding:80px;text-align:center;color:var(--muted)}
.qgtop{position:relative;padding:26px 40px 14px;border-bottom:1px dashed var(--line2);background:linear-gradient(180deg,#1E2B38ee,#1E2B3800)}
.qgx{position:absolute;right:22px;top:20px;width:38px;height:38px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-size:16px;cursor:pointer}
.qgx:hover{border-color:var(--acc);color:var(--acc)}
.qgcrumb{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.qgcrumb .wi{width:16px;height:16px}
.qgcrumb a{color:var(--muted);letter-spacing:.02em;text-transform:none;cursor:pointer;border-left:1px solid var(--line2);padding-left:8px}
.qgcrumb a:hover{color:var(--ink)}
.qg h1{margin:8px 0 8px;font-family:var(--disp);font-size:40px;font-weight:600;line-height:1.05;color:#fff;text-wrap:balance}
.qgids{display:flex;gap:6px;flex-wrap:wrap}
.qgchainw{padding:14px 40px 4px}
.qgchainw small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.qgchain{list-style:none;margin:10px 0 0;padding:4px 0 14px;display:flex;gap:0;overflow-x:auto}
.qgchain li{position:relative;flex:0 0 auto;display:flex;align-items:center}
.qgchain li+li::before{content:"";width:34px;border-top:2px dashed var(--line2);margin:0 4px}
.qgchain li.past+li::before,.qgchain li.past::before{border-top-color:#4F7F99}
.qgchain button{display:flex;align-items:center;gap:8px;max-width:230px;padding:6px 12px 6px 6px;border:1px solid var(--line);background:#1E2B38cc;color:var(--ink2);cursor:pointer;font:500 13px var(--ui)}
.qgchain button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qgchain button i{flex:0 0 26px;height:26px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;border:1px solid var(--line2);background:var(--bg);color:var(--muted)}
.qgchain li.past button i{background:#30495D;color:var(--acc);border-color:#4F7F99}
.qgchain li.on button{border-color:var(--acc);background:#30495D;color:#fff}
.qgchain li.on button i{background:var(--acc);color:#0E2230;border-color:var(--acc)}
.qgchain button:hover{border-color:var(--acc)}
.qggrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;padding:18px 40px 60px;align-items:start}
.qgmain{min-width:0}
.qg h3,.qg h4{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;display:flex;align-items:center;gap:8px}
.qg h4 svg{width:16px;height:16px}
.qgh{margin-top:22px!important}
.qgstory{position:relative;padding:16px 20px 14px 22px;border:1px solid var(--line);background:#1E2B38b3;border-left:3px solid var(--warm)}
.qgstory p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.qgstory p:last-child{margin:0}
.qgstory.done{margin-top:18px;border-left-color:#78D9AC}
.qgnone{padding:16px;border:1px dashed var(--line2);color:var(--muted)}
/* the route: numbered stops on a dashed path */
.qgsteps{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
.qgsteps::before{content:"";position:absolute;left:25px;top:24px;bottom:24px;border-left:2px dashed #4F7F99}
.qgsteps>li{position:relative;display:flex;gap:16px;align-items:flex-start;margin:0 0 14px}
.qgnode{position:relative;z-index:1;flex:0 0 44px;height:44px;display:grid;place-items:center;font:700 16px var(--ui);color:#0E2230;background:var(--acc);border:3px solid #18232E;box-shadow:0 0 0 1px var(--acc)}
.qgsteps>li.qk-drop .qgnode{background:#FF9A85;box-shadow:0 0 0 1px #FF9A85}
.qgsteps>li.qk-talk .qgnode{background:#F2CD86;box-shadow:0 0 0 1px #F2CD86}
.qgsteps>li.qk-end .qgnode{background:#78D9AC;box-shadow:0 0 0 1px #78D9AC;font-size:18px}
.qgcard{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);background:var(--card)}
.qgcard.end{padding:12px 14px;align-self:center;color:var(--ink2);background:#78D9AC14;border-color:#78D9AC55}
.qgitem{display:flex;gap:14px;align-items:center}
.qgimg{flex:0 0 72px;height:72px;display:grid;place-items:center;background:#18232E;border:1px solid var(--line2);cursor:pointer;overflow:hidden}
.qgimg img{max-width:100%;max-height:100%;object-fit:contain}
.qgimg i{font-style:normal;font-family:var(--disp);font-size:24px;color:var(--muted2)}
.qgitem b{font-size:16px;color:#fff}
.qgitem b a{color:inherit;cursor:pointer}
.qgitem b a:hover{color:var(--acc)}
.qgqty{margin-left:10px;padding:2px 8px;font:700 13px var(--ui);color:#0E2230;background:var(--warm);font-variant-numeric:tabular-nums}
.qgtags{display:flex;gap:5px;margin-top:6px}
.qgtags span{padding:1px 7px;font-size:11px;font-weight:700;border:1px solid var(--line2);color:var(--muted)}
.qghow{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.qgverb{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#18232E;border:1px solid var(--line2)}
.qgverb svg{width:15px;height:15px}
.qk-drop .qgverb{color:#FF9A85;border-color:#FF9A8566}
.qk-talk .qgverb{color:#F2CD86;border-color:#F2CD8666}
.qgprice{align-self:center;font-size:13px;color:var(--muted)}
.qgwhos{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.qwho{display:inline-flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid var(--line);background:#1E2B38;min-width:0}
.qwho>a{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink)}
.qwho>a:hover b{color:var(--acc)}
.qwho img{width:38px;height:38px;object-fit:cover;border:1px solid var(--line2);background:#18232E}
.qwho i{width:38px;height:38px;display:grid;place-items:center;font-style:normal;background:#18232E;color:var(--muted2);border:1px solid var(--line2)}
.qwho b{font-size:13.5px}
.qwho small{font-size:11px;color:var(--muted);margin-left:2px}
.qwho.none{padding:6px 10px;color:var(--ink2)}
.qat{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.qat a{cursor:pointer;color:var(--ink2)}.qat a:hover{color:var(--acc)}
.qat .join{transform:scale(.9);transform-origin:left center}
.pin{width:14px;height:14px;color:var(--acc);flex:0 0 auto}
.qgsub{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.5}
.qgnotes{margin-top:18px;padding:14px 18px;border:1px solid var(--line);background:#1E2B3899}
.qgnotes ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
/* right side: giver, map, requirements, rewards */
.qgside{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}
.qgbox{padding:14px;border:1px solid var(--line);background:var(--panel)}
.qgbox .qwho{width:100%}
.qgmapimg{display:block;position:relative;cursor:pointer;margin-bottom:8px;border:1px solid var(--line2);background:#18232E;min-height:44px}
.qgmapimg img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-width:100%}
.qgmapimg b{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:8px 10px;background:linear-gradient(0deg,#0E1720ee,#0E172000);color:#fff;font-size:14px}
.qgreq{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.qglink{margin-left:4px;padding:1px 6px;border:1px solid var(--line2);background:none;color:var(--acc);font:600 12px var(--ui);cursor:pointer}
.qgrew>small{display:block;margin:12px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.qgpills{display:flex;flex-wrap:wrap;gap:6px}
.qpill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line2);background:#18232E;font-size:13px}
.qpill svg{width:16px;height:16px}
.qpill b{font-variant-numeric:tabular-nums}
.qpill small{color:var(--muted);font-size:11.5px}
.qpill.gold{color:#F6CD64;border-color:#F6CD6655}.qpill.xp{color:#C4A5FF;border-color:#C4A5FF55}.qpill.rep{color:#78D9AC;border-color:#78D9AC55}.qpill.cp{color:#70D5EF;border-color:#70D5EF55}
.qpill.txt{color:var(--ink2)}
.qgtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.qtile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border:1px solid var(--line);background:#18232E;text-align:center;cursor:pointer;color:var(--ink);min-width:0}
.qtile:hover{border-color:var(--acc)}
.qti{position:relative;width:64px;height:64px;display:grid;place-items:center}
.qti img{max-width:100%;max-height:100%;object-fit:contain}
.qti i{font-style:normal;font-family:var(--disp);font-size:20px;color:var(--muted2)}
.qti em{position:absolute;right:-4px;bottom:-4px;padding:0 5px;font:700 11px var(--ui);font-style:normal;background:var(--warm);color:#0E2230}
.qtile b{font-size:11.5px;line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.qtile small{font-size:10px;color:var(--muted2)}
.qtile.rand{opacity:.78;border-style:dashed}
.qtile.pick{border-color:#B9A8F566}
.qgnext{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border:1px solid var(--acc);background:#30495D;color:#fff;cursor:pointer;text-align:left;font-family:var(--ui)}
.qgnext small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.qgnext b{font-size:15px}
.qglinks{display:flex;gap:8px;flex-wrap:wrap}
/* search dropdown + quest page buttons */
.sqg{padding:6px 6px 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sqg>small{display:block;padding:2px 6px 6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.sqr{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:1px solid transparent;background:none;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--ui)}
.sqr:hover{border-color:var(--acc);background:#30495D66}
.sqi{flex:0 0 34px;height:34px;display:grid;place-items:center;background:#30495D;color:var(--acc)}
.sqi .wi{width:18px;height:18px}
.sqr .sn{flex:1;min-width:0;display:flex;flex-direction:column}
.sqr .sn b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqr .sn small{font-size:11.5px;color:var(--muted)}
.sqr em{font-style:normal;font-size:12px;color:var(--acc);white-space:nowrap}
.qgopen{margin:14px 0;padding:12px;border:1px solid var(--goldline,#4F7F99);background:#30495D55;display:flex;flex-wrap:wrap;gap:6px}
.qgopen small{flex-basis:100%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.qgopen button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);cursor:pointer;font:500 13px var(--ui)}
.qgopen button i{width:20px;height:20px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:var(--acc);color:#0E2230}
.qgopen button:hover{border-color:var(--acc)}
@media (max-width:980px){.qggrid{grid-template-columns:1fr;padding:14px 16px 50px}.qgside{position:static}.qgtop{padding:20px 16px 12px}.qgchainw{padding:12px 16px 2px}.qg h1{font-size:30px}}
@media (max-width:560px){.qgsteps::before{left:19px}.qgnode{flex-basis:32px;height:32px;font-size:13px}.qgimg{flex-basis:56px;height:56px}.qghow{flex-direction:column}}
html.lang-ar .qg h3,html.lang-ar .qg h4,html.lang-ar .qgcrumb,html.lang-ar .qgverb,html.lang-ar .qgchainw small,html.lang-ar .qgrew>small,html.lang-ar .sqg>small,html.lang-ar .qgopen small,html.lang-ar .qgnext small{text-transform:none}

.qgsteps>li.qk-shop .qgnode{background:#77D4B0;box-shadow:0 0 0 1px #77D4B0}
.qgsteps>li.qk-quest .qgnode{background:#C4A5FF;box-shadow:0 0 0 1px #C4A5FF}
.qk-shop .qgverb{color:#77D4B0;border-color:#77D4B066}.qk-quest .qgverb{color:#C4A5FF;border-color:#C4A5FF66}
.qgmerge{flex-basis:100%;display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.qgmerge span{padding:2px 7px;font-size:12px;border:1px dashed var(--line2);color:var(--ink2)}
.qghow{flex-wrap:wrap}
/* quest icons on cards (one per quest), quest picker, quest filters, Arabic quest text (v6.12) */
.qrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.card>.qrow{margin:0;padding:0 12px 10px}
.qic{position:relative;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 7px 0 5px;border:1px solid #4F7F99;background:#30495D66;color:var(--acc);cursor:pointer;font:700 12px var(--ui)}
.qic svg{width:15px;height:15px}
.qic:hover{background:var(--acc);color:#0E2230;border-color:var(--acc)}
.qic.more{padding:0 8px;color:var(--ink2);border-style:dashed}
.qpick{position:fixed;inset:0;z-index:70;background:#070b10b8;display:grid;place-items:center;padding:16px;direction:ltr}
.qpick[hidden]{display:none}
.qpbox{position:relative;width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 80px #000c;padding:18px}
.qpbox h3{display:flex;align-items:center;gap:8px;margin:0 44px 12px 0;font:600 20px var(--disp);color:#fff}
.qpbox h3 svg{width:20px;height:20px;color:var(--acc)}
.qpbox .qgx{position:absolute;right:14px;top:14px}
.qpf{width:100%;padding:9px 12px;margin-bottom:10px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);font:14px var(--ui)}
.qplist{overflow:auto;min-height:0}
.qpg>small{display:block;margin:10px 0 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.qpi{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:1px solid transparent;background:none;color:var(--ink);text-align:left;cursor:pointer;font:14px var(--ui)}
.qpi[hidden]{display:none}
.qpi:hover{border-color:var(--acc);background:#30495D66}
.qpi i{flex:0 0 24px;height:24px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:#30495D;color:var(--acc)}
.qpi b{flex:1;font-weight:500}
.qpi em{font-style:normal;font-size:12px;color:var(--muted2);font-variant-numeric:tabular-nums}
.qgopen small svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.qgopen button.all{border-style:dashed;color:var(--acc)}
#tg .t.qo svg{width:16px;height:16px}
.qgtr{margin:0 0 12px;padding:8px 12px;border:1px dashed var(--line2);font-size:13px;color:var(--muted);min-height:20px}
.qgtr:empty{display:none}
.qtr.ar{direction:rtl;text-align:right;font-family:var(--ui);cursor:pointer}
.qtr.en{cursor:pointer}
html.lang-ar .qpg>small{text-transform:none}
#seg .cfg,#tg .cfg{white-space:nowrap}
#tg .cfg{align-self:center;margin:0 4px 0 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
html.lang-ar #tg .cfg{text-transform:none}
/* Quest pages drawn inside the wiki page (v6.13) */
.qgpage{margin-top:16px}
.qgphead{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 14px}
.qgpb{padding:10px;border:1px solid var(--line);background:#ffffff06;min-width:0}
.qgpb>small,.qgpnote>small{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.qgpb .qwho{width:100%}
.qgpb .qgmapimg img{aspect-ratio:21/9}
.qgpnote{margin:0 0 12px;padding:10px 12px;border-left:3px solid #F2CD86;background:#F2CD8610;font-size:13.5px;color:var(--ink2)}
.qgchainw.in{padding:4px 0 0}
.qgchainw.in small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.qgsec{margin:18px 0 26px;padding:0 0 18px;border-bottom:1px dashed var(--line2);scroll-margin-top:12px}
.qgsec.flash .qgsh{animation:qgflash 1.6s ease}
@keyframes qgflash{0%,35%{background:var(--acc);color:#0E2230}100%{background:#30495D}}
.qgsh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;background:#30495D;border-left:3px solid var(--acc);color:#fff}
.qgsh i{flex:0 0 28px;height:28px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--acc);color:#0E2230}
.qgsh b{font-size:17px;font-weight:700}
.qgsh .qgids{display:flex;gap:6px;flex-wrap:wrap}
.qgsub2{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.qgstory .qgsub2{margin-top:0}
.qgpage .qgstory{margin:0 0 4px}
.qgpage .qgsteps>li{margin-bottom:10px}
.qgpage .qgimg{flex-basis:64px;height:64px}
.qgrew2{margin-top:14px;padding:12px;border:1px solid #F6CD6640;background:linear-gradient(180deg,#F6CD660d,transparent)}
.qgrh{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F6CD64}
.qgrh svg{width:16px;height:16px}
.qgrew2>small{display:block;margin:12px 0 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
html.lang-ar .qgpb>small,html.lang-ar .qgpnote>small,html.lang-ar .qgsub2,html.lang-ar .qgrh,html.lang-ar .qgrew2>small,html.lang-ar .qgchainw.in small{text-transform:none}
.qgplace{display:flex;align-items:center;gap:8px;margin:26px 0 10px;padding:8px 0;border-bottom:2px solid var(--acc);font:600 20px var(--disp);color:#fff}
.qgplace .pin{width:20px;height:20px}
.qglink.big{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:13px}
.qglink.big svg{width:15px;height:15px}
.qglink.big em{font-style:normal;color:var(--muted2);font-size:11.5px}
.qgmore{align-self:center;font-size:12px;color:var(--muted2)}
.qgat{align-self:center;font-size:12px;color:var(--muted)}
.qghow2{display:flex;gap:10px;align-items:flex-start;flex-basis:100%;margin-top:8px}
.qgmerge span{display:inline-flex;align-items:center;gap:5px}
.qgmerge img{width:22px;height:22px;object-fit:contain}
.qgpn{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.qgpn button{padding:8px 12px;border:1px solid var(--line2);background:var(--card);color:var(--ink2);cursor:pointer;font:500 13px var(--ui);text-align:left}
.qgpn button.nx{display:flex;flex-direction:column;border-color:var(--acc);background:#30495D;color:#fff}
.qgpn button.nx small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.qgpn button:hover{border-color:var(--acc)}
.qk-quest .qgverb{color:#C4A5FF;border-color:#C4A5FF66}
/* GBot generator */
.gbbtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--acc);background:#0E2230;color:var(--acc);cursor:pointer;font:700 12px var(--ui);letter-spacing:.04em}
.gbbtn svg{width:16px;height:16px}
.gbbtn:hover{background:var(--acc);color:#0E2230}
.gbbox{margin:0 0 14px;padding:12px 14px;border:1px solid var(--acc);background:#0E2230cc}
.gbbox[hidden]{display:none}
.gbh{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--acc);font-weight:700}
.gbsteps{margin:10px 0 0;padding-left:22px;font:13px/1.6 ui-monospace,Consolas,monospace;color:var(--ink2)}
.gbwarn{margin-top:10px;padding:8px 10px;border-left:3px solid #FF9A85;background:#FF9A8512;font-size:13px;color:var(--ink2)}
.gbwarn ul{margin:6px 0 0;padding-left:18px}
.gbnote{display:block;margin-top:8px;font-size:11.5px;color:var(--muted2)}

.gbfarm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 6px;padding:10px 12px;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:10px}
.gbfarm b{font-weight:700}
.gbfarm input{width:90px;padding:6px 8px;border-radius:8px;border:1px solid var(--line,rgba(127,127,127,.35));background:transparent;color:inherit;font:inherit}
.gbnote2{margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(70,130,180,.12)}
.gbnote2 ul{margin:4px 0 0;padding-inline-start:18px}

.gbguide{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);overflow:auto;padding:24px 16px}
.gbgbox{position:relative;max-width:760px;margin:0 auto;background:var(--panel,#1b1d22);color:var(--ink,#e8e8ea);border:1px solid var(--line,rgba(127,127,127,.3));border-radius:14px;padding:26px 28px 30px;line-height:1.75}
.gbgbox h1{margin:0 0 8px;font-size:26px;text-wrap:balance}
.gbgbox h2{margin:26px 0 8px;font-size:19px;border-top:1px solid var(--line,rgba(127,127,127,.25));padding-top:18px}
.gbgbox h3{margin:16px 0 6px;font-size:16px}
.gbgbox .lead{font-size:15.5px;opacity:.92}
.gbgbox ol,.gbgbox ul{padding-inline-start:22px;margin:6px 0}
.gbgbox li{margin:4px 0}
.gbgbox code{font-size:.92em;padding:1px 5px;border-radius:5px;background:rgba(127,127,127,.16);direction:ltr;unicode-bidi:isolate;word-break:break-all}
.gbgbox dt{font-weight:700;margin-top:10px}.gbgbox dd{margin:2px 0 0;margin-inline-start:0;opacity:.9}
.gbgbox .note{margin-top:20px;padding:10px 12px;border-radius:10px;background:rgba(70,130,180,.14)}
.gbgx{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line,rgba(127,127,127,.3));background:transparent;color:inherit;cursor:pointer}
.gbdl{margin:16px 0 6px;display:flex;flex-direction:column;gap:8px}
.gbdl .btn{align-self:flex-start;display:inline-flex;flex-direction:column;gap:2px;padding:12px 18px;font-weight:700}
.gbdl .btn small{font-weight:400;opacity:.8;direction:ltr}
.gbmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;opacity:.8}
@media (max-width:520px){.gbgbox{padding:22px 16px 24px}}

/* ---- phones and tablets (v6.27) */
.navbtn{display:none}
.navshade{display:none}
@media (max-width:900px){
  html,body{overflow-x:hidden}
  .top{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px 10px}
  .navbtn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink)}
  .navbtn svg{width:22px;height:22px}
  .top .brand{min-width:0;padding-right:0;gap:3px;flex:1 1 auto}
  .top .brand b{font-size:19px}
  .top .brand small{display:none}
  .top .modes{order:5;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .v5 .mode{padding:0 12px;white-space:nowrap}
  .top .search{order:4;flex:1 1 100%;max-width:none;min-width:0;margin-left:0;height:42px}
  .top .tbtn{height:42px;padding:0 12px;letter-spacing:.08em}
  .top .count,.sortslot{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:0;bottom:0;left:0;width:min(300px,82vw);z-index:160;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px #000c;padding-top:14px}
  html.navopen .side{transform:none}
  .side,.v5 .side{background:#12110f!important;backdrop-filter:none}
  .qnav{right:6px!important;bottom:60px!important}
  .qnav button{height:30px!important;min-width:30px!important}
  html.navopen .navshade{display:block;position:fixed;inset:0;background:#0009;z-index:150}
  .main{padding:10px 10px 0}
  .body,.body.noside,.body.sel,.body.bmini.sel{grid-template-columns:minmax(0,1fr)!important}
  .body .bonus{display:none}
  .grid-wrap{grid-column:1/-1}
  .seg{max-width:100%}
  .tg{margin-left:0}
  .det{position:fixed;inset:0;width:auto!important;max-height:none;border-radius:0;z-index:140}
  .full{flex-direction:column;overflow-y:auto}
  .full .gal{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:56px 12px 12px;flex:0 0 auto}
  .full .gmain{height:42vh;flex:0 0 auto}
  .full .info{overflow:visible;padding:18px 14px 40px}
  .full h1{font-size:24px}
  .full .kv{grid-template-columns:repeat(2,1fr)}
  .full .fx{top:10px;right:10px}
}
@media (max-width:480px){
  .top #hideTop{display:none}
  .grid{gap:8px}
  .full .kv{grid-template-columns:1fr}
}

/* ---- big screens: hideaway menus (v6.28). Pictures get the room; menus come back at the edges. */
.edge{display:none}
.pinbtn svg{width:18px;height:18px;display:block}
.pinbtn{padding:0 12px}
@media (min-width:901px){
  html.immersive .navbtn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 46px;border:1px solid var(--line);background:transparent;color:var(--ink)}
  html.immersive .navbtn svg{width:22px;height:22px}
  html.immersive .shell{grid-template-columns:minmax(0,1fr)}
  html.immersive .side{position:fixed;top:0;bottom:0;left:0;width:250px;z-index:160;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px #000c;padding-top:14px;background:#12110f!important}
  html.immersive.navopen .side{transform:none}
  html.immersive .body,html.immersive .body.noside{grid-template-columns:minmax(0,1fr)}
  html.immersive .body.sel,html.immersive .body.bmini.sel{grid-template-columns:minmax(0,1fr) 380px}
  html.immersive .body .bonus{display:block;position:fixed;top:90px;right:0;bottom:16px;width:262px;z-index:150;transform:translateX(104%);transition:transform .22s ease;box-shadow:0 0 40px #000c;border-radius:18px 0 0 18px;background:#12110f}
  html.immersive.bonusopen .body .bonus{transform:none}
  html.immersive .top{transition:margin-top .25s ease}
  html.immersive.hidetop .top{margin-top:-78px}
  html.immersive .edge{display:block;position:fixed;z-index:140}
  html.immersive .edge-l{left:0;top:0;bottom:0;width:10px}
  html.immersive .edge-r{right:0;top:120px;bottom:120px;width:10px}
  html.immersive .edge-t{left:0;right:0;top:0;height:8px}
}
@media (min-width:901px){
  html.immersive #browse>.row2,html.immersive #browse>.tabs,html.immersive #browse>.bandwrap{transition:max-height .25s ease,opacity .2s,margin .25s}
  html.immersive.hidetop #browse>.row2,html.immersive.hidetop #browse>.tabs,html.immersive.hidetop #browse>.bandwrap{max-height:0!important;opacity:0;margin:0!important;overflow:hidden;pointer-events:none;border-width:0}
}
/* medium screens (handhelds / small laptops, 901-1400px): compact top bar so nothing is cut off */
@media (min-width:901px) and (max-width:1400px){
  .top{gap:8px;padding:0 12px}
  .top .brand{min-width:0;padding-right:0}
  .top .brand small{display:none}
  .top .brand b{font-size:20px}
  .v5 .mode{padding:0 10px;letter-spacing:.1em}
  .top .search{min-width:140px}
  .top .tbtn{padding:0 11px;letter-spacing:.08em}
  .top .count{display:none}
  .sortslot select{max-width:130px}
}
.seg{max-width:100%}
.bandwrap:has(.band:empty){display:none}

/* HD picture (v6.31): canvas drawn over the original, same box */
.full .gmain canvas.hdc{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;pointer-events:none}
.hdbtn{position:absolute;right:12px;bottom:12px;z-index:3;font:700 11px var(--ui);letter-spacing:.12em;padding:5px 9px;border-radius:8px;border:1px solid var(--line2);background:#000a;color:var(--muted);cursor:pointer}
.hdbtn.on{color:var(--gold);border-color:var(--goldline)}