/* Compendium / Quest Log / Rankings (library.js). Uses site.css tokens and Template 3's frame language. */

/* ---------- shared: game picker, spoiler shield, status badges, chips ---------- */
.lib-top{display:flex; gap:6px; padding:10px 12px 0; flex:none;}
.lib-top .game-sel{flex:1; min-width:0; padding:7px 10px; font-size:12.5px;}
.shield{flex:none; background:rgba(110,243,165,.08); border:1px solid rgba(110,243,165,.35); color:#86EFAC; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;}
.shield.off{background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.4); color:var(--a);}
.shield:hover{filter:brightness(1.15);}
.st{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; border-radius:6px; padding:2px 6px; white-space:nowrap; flex:none;}
.st-confirmed{color:#86EFAC; background:rgba(34,197,94,.12);}
.st-community{color:#93C5FD; background:rgba(59,130,246,.12);}
.st-conflict{color:#FCD34D; background:rgba(245,158,11,.14);}
.cchips{display:flex; gap:5px; padding:10px 12px 2px; overflow-x:auto; flex:none; scrollbar-width:thin;}
.cchip{display:inline-flex; align-items:center; gap:5px; flex:none; background:var(--card); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s;}
.cchip:hover{color:var(--text); border-color:var(--line2);}
.cchip.on{color:#fff; background:rgba(139,92,246,.22); border-color:rgba(139,92,246,.6);}
.cchip i{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--card2); border-radius:6px; padding:0 5px;}
.cchip.on i{color:#fff; background:rgba(255,255,255,.15);}
.lchip{display:inline-flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:4px 9px; font-size:12.5px; cursor:pointer; transition:border-color .15s;}
.lchip:hover{border-color:var(--primary);}
.lchip.muted{color:var(--muted);}
.ltag{display:inline-block; background:var(--card2); border-radius:7px; padding:3px 8px; font-size:12.5px; color:var(--muted);}
.chips-row{display:flex; flex-wrap:wrap; gap:6px;}
.note.tiny{font-size:11px; margin-top:6px;}
.lnote{margin:12px 0; padding:9px 12px; border-radius:10px; background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.28); font-size:12.5px; color:#FDE68A; line-height:1.5;}
.sp{filter:blur(4px); user-select:none;}

/* ---------- compendium list ---------- */
  border-bottom:1px solid rgba(34,39,64,.6); padding:8px 12px 8px 11px; cursor:pointer; font-size:14px;}

/* ---------- entry ---------- */
.lplate{height:170px;}
.lplate .glyph{font-size:84px;}
.lplate .st{position:absolute; top:12px; right:14px;}
.facts{display:grid; grid-template-columns:minmax(110px,max-content) minmax(0,1fr); gap:6px 14px; font-size:13.5px; margin-top:4px;}
.facts dt{color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase; padding-top:2px;}
.facts dd{line-height:1.5;}
.ltable-wrap{overflow-x:auto;}
.ltable{width:100%; border-collapse:collapse; font-size:13px;}
.ltable th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line2); cursor:default;}
.ltable td{padding:7px 8px; border-bottom:1px solid var(--line);}
.spoil{position:relative; margin-top:6px;}
.spoil .spoil-body{filter:blur(6px); user-select:none; font-size:13.5px; line-height:1.6; padding:10px 12px; border-radius:10px; background:var(--card); border:1px dashed var(--line2);}
.spoil.open .spoil-body{filter:none; user-select:auto; border-style:solid; border-color:rgba(245,158,11,.35);}
.spoil-btn{position:absolute; left:50%; top:calc(50% + 12px); transform:translate(-50%,-50%);}
.spoilcard{margin:24px auto; max-width:380px; text-align:center; background:var(--card); border:1px solid var(--line2); border-radius:16px; padding:24px 20px;}
.spoilcard .sc-ico{font-size:36px;}
.spoilcard h3{font-size:18px; margin:6px 0;}
.spoilcard p{color:var(--muted); font-size:13px; margin-bottom:14px;}
.sc-actions{display:flex; flex-direction:column; gap:8px;}

/* verification footer */
.vf{margin-top:22px; padding:12px 14px; border-radius:12px; background:rgba(8,9,15,.5); border:1px solid var(--line); font-size:12px; color:var(--muted);}
.vf-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.vf-top b{color:var(--text);}
.vf-src{list-style:none; margin-top:8px; display:flex; flex-direction:column; gap:4px;}
.vf-src li{display:flex; align-items:center; gap:8px; min-width:0;}
.vf-src a{color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sk{font-family:var(--mono); font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; border-radius:5px; padding:1px 6px; flex:none;}
.sk.official{color:#86EFAC; background:rgba(34,197,94,.12);}
.sk.community{color:#93C5FD; background:rgba(59,130,246,.12);}

/* ---------- quest log ---------- */
.linetabs{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin:10px 12px 0; padding:3px; background:var(--card); border:1px solid var(--line); border-radius:10px; flex:none;}
.linetabs button{display:flex; align-items:center; justify-content:center; gap:5px; background:none; border:0; color:var(--muted); font-size:12px; font-weight:600; padding:7px 4px; border-radius:7px; cursor:pointer;}
.linetabs button:hover{color:var(--text);}
.linetabs button.on{background:var(--primary); color:#fff;}
.qgroup{border-bottom:1px solid var(--line);}
.qgrp{display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; text-align:left; background:none; border:0; padding:10px 14px; cursor:pointer; font-size:14px; font-weight:600;}
.qgrp:hover{background:var(--card2);}
.qgrp small{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); font-weight:500;}
.qgrp .car{color:var(--muted); transition:transform .15s;}
.qgrp.open .car{transform:rotate(90deg); color:var(--accent);}
.qgrp em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--muted);}
.qgrp .ss{font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--a); border:1px solid rgba(245,158,11,.4); border-radius:5px; padding:0 4px; vertical-align:middle;}
.qset{padding:8px 14px 4px 36px; font-family:var(--mono); font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--accent);}
.qrow{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:center; padding:2px 14px 2px 32px; border-left:3px solid transparent;}
.qrow.cur{background:rgba(139,92,246,.14); border-left-color:var(--primary);}
.qrow.empty-row{display:block; padding:4px 14px 8px 36px; color:var(--muted); font-size:12.5px; font-style:italic;}
.qchk{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line2); background:var(--card); color:#fff; font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0;}
.qchk:hover{border-color:var(--mint);}
.qchk.on{background:#16A34A; border-color:#22C55E;}
.qname{display:flex; align-items:center; gap:6px; min-width:0; background:none; border:0; text-align:left; padding:6px 0; cursor:pointer; font-size:13.5px; color:var(--text);}
.qname span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qname:hover span{color:var(--accent);}
.qname .doc{font-style:normal; color:var(--mint); font-size:9px; flex:none;}
.qmeta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 14px;}
.donebtn{background:var(--card); border:1px solid var(--line2); color:var(--text); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer;}
.donebtn:hover{border-color:var(--mint);}
.donebtn.on{background:rgba(22,163,74,.2); border-color:#22C55E; color:#86EFAC;}
.objs, .tips, .patchlist{margin:0 0 0 20px; font-size:13.5px; line-height:1.7;}
.patchlist{list-style:none; margin-left:0;}
.patchlist li{display:flex; gap:8px; align-items:baseline; margin-bottom:4px;}
.pv{flex:none; font-family:var(--mono); font-size:11px; color:#86EFAC; background:rgba(34,197,94,.12); border-radius:5px; padding:1px 6px;}
.undoc{background:var(--card); border:1px dashed var(--line2); border-radius:12px; padding:14px 16px; font-size:13.5px; line-height:1.7;}
.undoc p{margin-top:6px;}

/* ---------- rankings ---------- */
.rankframe{height:100%;}
.rdesc{color:var(--muted); font-size:13px; margin:12px 0 10px;}
.rtable{width:100%; border-collapse:collapse; font-size:13.5px;}
.rtable th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line2); white-space:nowrap; cursor:pointer; user-select:none;}
.rtable th:first-child, .rtable th:nth-child(2){cursor:default;}
.rtable th.on{color:var(--accent);}
.rtable th[data-rsort]:hover{color:var(--text);}
.rtable td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.rtable tr:hover td{background:rgba(255,255,255,.02);}
.rtable .rk{font-family:var(--mono); color:var(--muted); width:34px;}
.rtable .rn .linkbtn{font-size:13.5px; font-weight:600; color:var(--text); text-align:left; padding:0;}
.rtable .rn .linkbtn:hover{color:var(--accent);}
.rtable .rn small{display:block; color:var(--muted); font-size:11px; margin-top:2px; max-width:420px;}
.rtable .rv{font-family:var(--mono); white-space:nowrap;}
.rtable .rv.on{min-width:150px;}
.rtable .rv.on b{color:var(--accent); margin-left:8px;}
.rbar{display:inline-block; width:90px; height:7px; border-radius:4px; background:var(--card2); overflow:hidden; vertical-align:middle;}
.rbar i{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--accent));}
.na{color:var(--line2);}

/* ---------- hub: featured game + category bars ---------- */
.gcard{padding:18px 22px 22px;}
.g-hero{display:flex; align-items:center; gap:16px;}
.g-ico{font-size:56px; width:84px; height:84px; display:grid; place-items:center; border-radius:20px; background:radial-gradient(circle,rgba(244,63,94,.28),transparent 70%); border:1px solid var(--line2); flex:none;}
.g-hero h2{font-size:28px; letter-spacing:-.03em;}
.gcard .desc{margin:14px 0 10px;}
.g-ver{display:inline-block; font-size:12px; color:#86EFAC; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); border-radius:8px; padding:4px 10px;}
.g-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0;}
.g-stats div{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center;}
.g-stats b{display:block; font-family:var(--mono); font-size:20px; color:var(--accent);}
.g-stats small{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.g-btns{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.catbar{display:grid; grid-template-columns:minmax(0,150px) 1fr 34px; gap:10px; align-items:center; background:none; border:0; border-radius:8px; padding:4px 6px; cursor:pointer; font-size:12.5px; text-align:left; color:var(--text);}
.catbar:hover{background:var(--card2);}
.catbar span:first-child{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.catbar .track{height:6px;}
.catbar b{font-family:var(--mono); font-size:11.5px; color:var(--muted); text-align:right;}

@media (max-width:820px){
  /* minmax(0,1fr): let columns shrink below the chip rows' content width (1fr alone would grow the page sideways) */
  .comp, .quest, .rankframe{grid-template-columns:minmax(0,1fr); min-width:0;}
  .screen > .frame{min-width:0;}
  .quest > .frame:last-child{display:none;} /* quest details open in the modal on phones */
  .g-stats{grid-template-columns:repeat(2,1fr);}
  .rtable .rn small{display:none;}
  .rbar{width:50px;}
  .rtable .rv.on{min-width:0;}
  .facts{grid-template-columns:1fr;}
  .facts dt{padding-top:6px;}
}
.cchips::-webkit-scrollbar{height:4px;}
.cchips::-webkit-scrollbar-thumb{background:var(--line2); border-radius:2px;}
.cchips::-webkit-scrollbar-track{background:transparent;}
.cchips{scrollbar-color:var(--line2) transparent;}
.detail .lplate .st{right:58px;} /* clear the modal close button */

/* ---------- images (pic component) ---------- */
.pic{--s:40px; position:relative; display:inline-grid; place-items:center; flex:none; width:var(--s); height:var(--s); overflow:hidden; border-radius:10px;
  background:radial-gradient(circle at 50% 30%, hsl(var(--hue) 55% 32% / .7), hsl(var(--hue) 45% 12% / .95)); border:1px solid hsl(var(--hue) 40% 50% / .18);}
.pic-fb{font-size:calc(var(--s) * .5); line-height:1; transition:opacity .2s;}
.pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s;}
.pic.ok img{opacity:1;}
.pic.ok .pic-fb{opacity:0;}
.pic.fit-contain img{object-fit:contain; padding:7%;}
.pic-xs{--s:22px; border-radius:6px;}
.pic-s{--s:40px;}
.pic-m{--s:92px; width:100%; height:auto; aspect-ratio:1; border-radius:12px;}
.pic-l{--s:150px; position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:none;}
.pic-l.fit-contain img{padding:14px;}
.lchip .pic{margin-left:-4px;}

/* detail hero */
.hero{height:210px; overflow:hidden; background:radial-gradient(circle at 50% 62%,rgba(139,92,246,.38),transparent 58%);}
.hero.has-img::before{content:""; position:absolute; inset:-30px; background:var(--bg) center/cover; filter:blur(26px) brightness(.45) saturate(1.2); z-index:0;}
.hero .pic-l{z-index:1;}
.hero .pic-l .pic-fb{font-size:84px;}
.hero .no, .hero .st{z-index:2;}
.hero .no{background:rgba(8,9,15,.6); padding:2px 8px; border-radius:6px;}
.hero.fit-cover .pic-l img{object-position:50% 30%;}

/* compendium grid view */
  cursor:pointer; text-align:center; transition:border-color .15s, transform .15s;}

/* rankings */
.rname{display:flex !important; align-items:center; gap:10px;}
.rname > span{display:flex; flex-direction:column;}

/* quest featured image + list avatars */
.qhero{position:relative; display:block; width:100%; height:170px; margin:-4px 0 16px; border-radius:14px; overflow:hidden; border:1px solid var(--line2); cursor:pointer; padding:0; background:var(--card);}
.qhero::before{content:""; position:absolute; inset:-30px; background:var(--bg) center/cover; filter:blur(24px) brightness(.4); z-index:0;}
.qhero .pic-l{z-index:1;}
.qhero:not(.fit-contain) .pic-l img{object-position:50% 25%;}
.qh-cap{position:absolute; left:10px; bottom:10px; z-index:2; font-size:12px; color:var(--text); background:rgba(8,9,15,.75); border:1px solid var(--line2); border-radius:8px; padding:3px 9px;}
.qhero:hover{border-color:var(--primary);}
.qname .pic{flex:none;}

/* hub: key art + category cards */
.g-banner{position:relative; margin:-18px -22px 14px; height:190px; overflow:hidden; border-bottom:1px solid var(--line);}
.g-banner img{width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block;}
.g-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(18,21,36,.95));}
.g-credit{position:absolute; right:10px; bottom:8px; z-index:1; font-size:10.5px; color:var(--muted);}
@media (max-width:820px){ .hero{height:180px;} }
/* hero banners: show the whole image at ~native size over its blurred backdrop (wiki art is ~300px wide; cropping + upscaling blurs it) */
.hero .pic-l img, .qhero .pic-l img{object-fit:contain; padding:10px;}
/* official game logo (emblem) in place of the emoji icon */
.g-ico.g-logo{background:radial-gradient(circle,rgba(212,175,95,.2),transparent 70%);}
.g-ico.g-logo img{width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));}
/* key art banner: official logo over a dark fade on the left, art on the right */
.g-banner > img:first-child{object-position:72% 28%;}
.g-banner::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(13,15,26,.96) 0%,rgba(13,15,26,.86) 30%,rgba(13,15,26,.25) 56%,transparent 72%);}
.g-banner .g-wordmark{position:absolute; left:3%; top:50%; transform:translateY(-50%); z-index:2; width:min(46%,440px); height:auto; object-fit:contain; filter:drop-shadow(0 6px 22px rgba(0,0,0,.75));}
.g-banner .g-credit{z-index:3;}

/* ================= Patch Tracker ================= */
.tbadge{min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:var(--s); color:#fff; font-size:10.5px; font-weight:700; display:inline-grid; place-items:center; line-height:1;}
.tbadge[hidden]{display:none;}
.pscr{overflow-y:auto;}
.pwrap{max-width:1120px; margin:0 auto; padding:10px 6px 60px; display:flex; flex-direction:column; gap:16px;}
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:8px 4px 0;}
.phead h1{font-size:clamp(30px,3.4vw,44px); letter-spacing:-.035em; line-height:1.05; margin:4px 0 6px;}
.phead .note{max-width:620px;}
.phead .lib-top{padding:0;}
.pnext{display:flex; gap:22px; align-items:center; padding:20px 24px; border-radius:22px; border:1px solid rgba(34,211,238,.4); background:linear-gradient(115deg,rgba(34,211,238,.14),rgba(18,21,36,.9) 55%); box-shadow:0 20px 50px rgba(0,0,0,.3);}
.pn-when{flex:none; width:96px; height:96px; border-radius:20px; display:grid; place-content:center; text-align:center; background:rgba(8,9,15,.55); border:1px solid rgba(34,211,238,.35);}
.pn-when b{font-family:var(--mono); font-size:34px; line-height:1; color:var(--accent);}
.pn-when small{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-top:4px;}
.pn-body h3{font-size:22px; letter-spacing:-.02em; margin:4px 0 6px;}
.pn-body p{color:var(--muted); font-size:13.5px; line-height:1.55; max-width:720px; margin-bottom:6px;}
.pn-body a{font-size:12.5px;}
.pfresh{padding:12px 16px; border-radius:14px; background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.35); font-size:13.5px;}
.ptools{display:flex; align-items:center; gap:14px;}
.ptools .csearch{display:flex; flex:1;}
.pchips{flex-wrap:wrap; padding:0; overflow:visible; gap:8px;}
.pchips .cchip{padding:8px 14px; font-size:13px;}
.ptimeline{position:relative; display:flex; flex-direction:column; gap:14px; padding-left:28px;}
.ptimeline::before{content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; border-radius:2px; background:linear-gradient(var(--primary),var(--accent) 60%,var(--line2));}
.pmonth{position:relative; font-family:var(--mono); font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); margin:10px 0 -2px;}
.pmonth::before{content:""; position:absolute; left:-24px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.pcard{position:relative; display:grid; grid-template-columns:200px minmax(0,1fr); border-radius:20px; overflow:hidden; background:rgba(18,21,36,.82); border:1px solid var(--line2); transition:border-color .15s;}
.pcard:hover{border-color:rgba(139,92,246,.55);}
.pcard.major{border-color:rgba(139,92,246,.6); box-shadow:0 0 40px rgba(139,92,246,.18);}
.pcard.new{border-color:rgba(244,63,94,.55);}
.pc-media{position:relative; background:var(--card2); min-height:100%;}
.pc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 50%;}
.pc-media span{position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:12px; font-weight:600; padding:3px 8px; border-radius:8px; background:rgba(8,9,15,.8); color:#fff;}
.pc-body{padding:16px 20px 16px; min-width:0;}
.pc-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pc-v{font-size:19px; letter-spacing:-.02em;}
.pc-kind{font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--card2); border:1px solid var(--line2); color:var(--muted);}
.pcard.major .pc-kind{color:#fff; background:rgba(139,92,246,.35); border-color:rgba(139,92,246,.6);}
.pc-new{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; padding:2px 8px; border-radius:999px; background:var(--s); color:#fff;}
.pc-top time{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted);}
.pc-means{margin:8px 0 6px; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--text);}
.pc-body .tips{margin:4px 0 10px;}
.pc-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between;}
.pc-tags{display:flex; gap:6px; flex-wrap:wrap;}
.ptag{font-size:11.5px; padding:3px 9px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); background:var(--card);}
.ptag-content{color:#C4B5FD; border-color:rgba(139,92,246,.45);}
.ptag-qol{color:#67E8F9; border-color:rgba(34,211,238,.4);}
.ptag-combat{color:#FDA4AF; border-color:rgba(244,63,94,.4);}
.ptag-platform{color:#FCD34D; border-color:rgba(245,158,11,.4);}
.pc-src{font-size:12.5px;}
.pc-rel{margin-top:10px;}
.pc-rel .eh{margin:6px 0 6px;}
@media (max-width:820px){
  .pwrap{padding:4px 2px 20px;}
  .pnext{flex-direction:column; align-items:flex-start; gap:12px; padding:16px;}
  .pn-when{width:auto; height:auto; padding:10px 14px; display:flex; gap:8px; align-items:baseline;}
  .ptimeline{padding-left:20px;} .ptimeline::before{left:5px;} .pmonth::before{left:-20px;}
  .pcard{grid-template-columns:1fr;}
  .pc-media{height:110px; min-height:0;}
  .pc-top time{margin-left:0; width:100%;}
}

/* ================= Tips & Tidbits ================= */
.tipgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; align-items:start;}
.tip{display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:20px; background:rgba(18,21,36,.82); border:1px solid var(--line2); --tc:var(--primary);}
.tip:hover{border-color:color-mix(in srgb,var(--tc) 60%,transparent);}
.tip.tt-beginner{--tc:#4ADE80;} .tip.tt-money{--tc:#FBBF24;} .tip.tt-combat{--tc:#FB7185;} .tip.tt-mounts{--tc:#C084FC;} .tip.tt-settings{--tc:#67E8F9;} .tip.tt-hidden{--tc:#A78BFA;}
.tip-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tip-topic{font-size:11.5px; font-weight:600; color:var(--tc);}
.tip-patch{font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:999px; background:var(--card2); border:1px solid var(--line2); color:var(--muted); cursor:pointer;}
.tip-patch:hover{color:var(--text); border-color:var(--accent);}
.tip h3{font-size:16.5px; letter-spacing:-.015em; line-height:1.3;}
.tip p{font-size:13.5px; line-height:1.6; color:#C9CDE3;}
.tip .chips-row{margin-top:2px;}
.tip-src{font-size:11.5px; margin-top:auto; padding-top:4px;}
.tip-src a{color:var(--muted);} .tip-src a:hover{color:var(--accent);}
.tip-feature{border-color:color-mix(in srgb,var(--tc) 55%,transparent); background:linear-gradient(115deg,color-mix(in srgb,var(--tc) 14%,transparent),rgba(18,21,36,.9) 60%); padding:20px 24px; margin-top:8px;}
.tip-feature h3{font-size:21px;}
.tip-feature p{font-size:14.5px; max-width:780px;}
.gcard .tip-hub{margin:4px 0 8px;}
@media (max-width:820px){ .tipgrid{grid-template-columns:1fr;} }

/* search box with a magnifier (Patch Tracker, Tips) */
.csearch{position:relative; display:flex; align-items:center;}
.csearch .i{position:absolute; left:16px; width:18px; height:18px; color:var(--muted); pointer-events:none;}
.csearch .field{width:100%; padding:12px 16px 12px 44px; font-size:14.5px; border-radius:999px;}

/* entry cards open as pop-ups everywhere; screenshots open wide */
#detailBox .hero{height:240px;}
#detailBox.wide{max-width:min(1200px,96vw); width:96vw; padding:14px;}

/* ================= Game Overview ================= */
.ovwrap{max-width:1180px;}
.ov-hero{position:relative; overflow:hidden; border-radius:26px; border:1px solid var(--line2); min-height:300px; display:flex; align-items:flex-end; background:var(--card);}
.ov-art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 28%;}
.ov-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,15,26,.97) 0%,rgba(13,15,26,.82) 38%,rgba(13,15,26,.2) 70%,transparent), linear-gradient(0deg,rgba(13,15,26,.85),transparent 55%);}
.ov-hero-in{position:relative; z-index:1; padding:28px 30px; max-width:640px;}
.ov-logo{width:min(380px,80%); height:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.7)); margin-bottom:10px;}
.ov-hero-in p{color:#D5D8EA; font-size:14.5px; line-height:1.6; margin-bottom:14px;}
.ov-pills{display:flex; flex-wrap:wrap; gap:8px;}
.ov-pills span{display:flex; flex-direction:column; padding:7px 12px; border-radius:12px; background:rgba(8,9,15,.6); border:1px solid var(--line2); font-size:13px; font-weight:600;}
.ov-pills small{font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.8px; text-transform:uppercase; color:var(--muted);}
.ov-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;}
.ov-card{padding:18px 20px; border-radius:20px; background:rgba(18,21,36,.82); border:1px solid var(--line2);}
.ov-card h3{font-size:16px; margin-bottom:10px;}
.ov-card .facts{margin-bottom:12px;}
.ov-stores{display:grid; gap:8px;}
.ov-store{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--text); text-decoration:none;}
.ov-store:hover{border-color:var(--primary);}
.ov-store small{color:var(--muted); font-size:12px;}
.ov-h{font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; margin:18px 0 -4px;}
.ov-videos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px;}
.ov-video{position:relative; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line2); background:var(--card2); cursor:pointer; padding:0; text-align:left; color:#fff; font:inherit;}
.ov-video img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.ov-video:hover img{transform:scale(1.04);}
.ov-video::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,9,15,.9),transparent 55%); pointer-events:none;}
.ov-play{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:1; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:rgba(244,63,94,.92); font-size:18px; padding-left:4px; box-shadow:0 8px 24px rgba(0,0,0,.5);}
.ov-vt{position:absolute; left:14px; right:14px; bottom:12px; z-index:1; font-size:13.5px; font-weight:600; line-height:1.3; text-shadow:0 2px 8px rgba(0,0,0,.8);}
.ov-video.on{cursor:default;} .ov-video.on::after{display:none;}
.ov-video iframe{width:100%; height:100%; border:0; display:block;}
.ov-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px;}
.ov-shot{display:block; aspect-ratio:16/9; padding:0; border:1px solid var(--line2); border-radius:14px; overflow:hidden; cursor:zoom-in; background:var(--card2);}
.ov-shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.ov-shot:hover img{transform:scale(1.05);}
.ov-full{margin:0;} .ov-full img{width:100%; height:auto; border-radius:12px; display:block;}
.ov-full figcaption{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;}
.ov-addons{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.ov-addon{display:block; padding:18px 20px; border-radius:20px; background:rgba(18,21,36,.82); border:1px solid var(--line2); color:var(--text); text-decoration:none;}
.ov-addon:hover{border-color:var(--primary);}
.ov-addon small{font-family:var(--mono); font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--accent);}
.ov-addon b{display:block; font-size:18px; margin:4px 0 6px;}
.ov-addon p{font-size:13.5px; line-height:1.55; color:#C9CDE3;}
.ov-reqs{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px;}
.ov-req{padding:16px 18px; border-radius:20px; background:rgba(18,21,36,.82); border:1px solid var(--line2);}
.ov-req h4{font-size:15px; margin-bottom:4px;}
.ov-req th{text-align:left; color:var(--muted); font-weight:600;}
.ov-langs{font-size:13.5px; line-height:1.8;}
.ov-links{display:flex; flex-wrap:wrap; gap:8px;}
.ov-src a{color:var(--muted);}

/* ================= My Playthrough ================= */
.pt-top{display:flex; align-items:center; gap:22px; padding:18px 22px; border-radius:22px; background:linear-gradient(115deg,rgba(139,92,246,.2),rgba(18,21,36,.9) 60%); border:1px solid rgba(139,92,246,.45);}
.pt-ring{flex:none; width:116px; height:116px; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:radial-gradient(closest-side,var(--bg2) 78%,transparent 80% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--card2) 0);}
.pt-ring b{font-family:var(--mono); font-size:26px; color:var(--accent); line-height:1;}
.pt-ring small{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px;}
.pt-sums{display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:10px; flex:1;}
.pt-sums a{display:block; padding:10px 14px; border-radius:14px; background:rgba(8,9,15,.45); border:1px solid var(--line2); color:var(--text); text-decoration:none;}
.pt-sums a:hover{border-color:var(--accent);}
.pt-sums b{display:block; font-family:var(--mono); font-size:20px;}
.pt-sums small{font-size:11.5px; color:var(--muted);}
.pt-seg{max-width:420px;}
.pt-tools{flex-wrap:wrap; gap:10px; margin:12px 0 6px;}
.pt-tools .csearch{min-width:min(100%,240px);}
.pt-tools select.field{border-radius:999px; padding:11px 14px;}
@media (max-width:640px){ .pt-tools select.field{flex:1 1 40%;} }
.pt-sec{scroll-margin-top:12px;}
.pt-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:10px 0 6px;}
.pt-h h2{font-size:22px; letter-spacing:-.02em;}
.pt-chaps{display:grid; gap:8px;}
.pt-chap{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; text-align:left; padding:11px 16px; border-radius:14px; background:rgba(18,21,36,.82); border:1px solid var(--line); cursor:pointer; font:inherit; color:inherit; font-size:14px;}
.pt-chap:hover{border-color:var(--primary);}
.pt-chap span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;}
.pt-chap small{font-family:var(--mono); color:var(--muted); font-size:12px;}
.pt-chap.done{border-color:rgba(110,243,165,.45);} .pt-chap.done small{color:#86EFAC;}
.pt-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; margin-bottom:6px;}
.pt-card{display:flex; flex-direction:column; gap:6px; padding:10px 10px 12px; border-radius:18px; background:rgba(18,21,36,.82); border:1px solid var(--line2);}
.pt-card.done{border-color:rgba(110,243,165,.5); box-shadow:inset 0 0 0 1px rgba(110,243,165,.15);}
.pt-pic{padding:0; border:0; background:none; cursor:pointer; display:block;}
.pt-card .pic-m{border-radius:14px;}
.pt-nm{font-size:14px; line-height:1.25;}
.pt-sub{font-size:11.5px; color:var(--muted); min-height:1.2em;}
.pt-ticks{display:flex; flex-wrap:wrap; gap:6px;}
.pt-tick{display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:999px; background:var(--card); border:1px solid var(--line2); color:var(--text); font:inherit; font-size:12px; font-weight:600; cursor:pointer;}
.pt-tick::before{content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--line2); flex:none;}
.pt-tick:hover{border-color:var(--accent);}
.pt-tick.on{color:#0B2415; background:#6EF3A5; border-color:#6EF3A5; font-size:0;}
.pt-tick.on::before{content:"✓"; display:grid; place-items:center; border:0; font-size:13px; font-weight:800;}
.pt-tick.on span{font-size:12px;}
.pt-cnt{display:flex; align-items:center; gap:6px; font-size:12px;}
.pt-cnt small{color:var(--muted); margin-right:auto;}
.pt-cnt button{width:26px; height:26px; border-radius:8px; border:1px solid var(--line2); background:var(--card); color:var(--text); cursor:pointer; font:inherit;}
.pt-cnt button:disabled{opacity:.4; cursor:default;}
.pt-cnt b{font-family:var(--mono); min-width:18px; text-align:center;}
.pt-ms{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:rgba(18,21,36,.82); border:1px solid var(--line); margin-bottom:8px;}
.pt-ms.done{border-color:rgba(110,243,165,.45);}
.pt-ms b{display:block; font-size:14px;} .pt-ms small{font-size:12px; color:var(--muted);}
/* hub: playthrough summary cards */
.hubplay{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
.hp-card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; align-items:center; padding:14px 16px; border-radius:20px; background:rgba(18,21,36,.8); border:1px solid var(--line2); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform .15s, border-color .15s;}
.hp-card:hover{border-color:var(--primary); transform:translateY(-3px);}
.hp-ico{font-size:26px;} .hp-card b{display:block; font-size:15px;} .hp-card small{font-family:var(--mono); color:var(--muted); font-size:12px;}
.hp-card .track{grid-column:1/-1;}

/* ================= Guides ================= */
.gd-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.gd-card{display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:center; padding:12px; border-radius:20px; background:rgba(18,21,36,.82); border:1px solid var(--line2); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform .15s, border-color .15s;}
.gd-card:hover{border-color:var(--primary); transform:translateY(-3px);}
.gd-card .pic-m{width:88px; border-radius:14px;}
.gd-ico{font-size:40px; text-align:center;}
.gd-txt b{display:block; font-size:17px; letter-spacing:-.015em; margin:3px 0 4px;}
.gd-txt small{font-size:13px; color:#C9CDE3; line-height:1.45;}
.gd-tips-h{margin-top:18px;}
.gd-tips-h h2{font-size:clamp(24px,2.6vw,32px); letter-spacing:-.03em;}
.gd-back{margin-bottom:6px; font-size:14px;}
.gd-art{border-radius:24px; overflow:hidden; background:rgba(18,21,36,.82); border:1px solid var(--line2);}
.gd-art .hero{height:220px;}
.gd-body{padding:24px 30px 30px; max-width:820px;}
.gd-body h1{font-size:clamp(28px,3.2vw,40px); letter-spacing:-.03em; line-height:1.1; margin:6px 0 8px;}
.gd-lead{font-size:16px; color:#C9CDE3; line-height:1.55;}
.gd-toc{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 8px;}
.gd-toc a{font-size:12.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); text-decoration:none;}
.gd-toc a:hover{color:var(--text); border-color:var(--accent);}
.gd-body section{scroll-margin-top:12px;}
.gd-body h2{font-size:20px; letter-spacing:-.02em; margin:22px 0 8px;}
.gd-body p{font-size:15px; line-height:1.7; color:#D5D8EA; margin-bottom:10px;}
.gd-body .tips li{font-size:14.5px; line-height:1.6;}

@media (max-width:820px){
  .ov-hero{min-height:260px;} .ov-hero-in{padding:18px;}
  .pt-top{flex-direction:column; align-items:stretch;} .pt-ring{margin:0 auto;}
  .pt-chap{grid-template-columns:minmax(0,1fr) auto;} .pt-chap .track{display:none;}
  .pt-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gd-list{grid-template-columns:1fr;} .gd-body{padding:18px;}
  .ov-reqs{grid-template-columns:1fr;}
}

/* quest summaries (Quest Log rows and detail) and arc info */
.qname .qtxt{display:flex; flex-direction:column; min-width:0;}
.qname .qsum{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35;}
.qsummary{font-size:14.5px; line-height:1.6; margin:4px 0 12px; color:var(--text);}
.arcbox{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:14px 0 10px;}
.arcbox p{font-size:13.5px; line-height:1.6; margin:4px 0;}
.arcbox .note{font-size:12.5px;}