:root{
  --ink:#0d0a14; --panel:#161228; --panel2:#1e1834; --line:#2f2748; --line2:#241d3a;
  --text:#f3eeff; --muted:#a294c2; --faint:#7d6f9b;
  --hot:#ff3b5c; --flame:#ff9d2e; --zap:#3fe0cf; --violet:#a366ff;
  --yes:#3ddc97; --part:#ffb43e; --no:#6b5f80;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --w:1220px;
}
*{box-sizing:border-box}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
html{min-height:100%;background:var(--ink)}
body{margin:0;background:transparent;color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--w);margin:0 auto;padding:0 18px}
a{color:var(--hot);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--zap);outline-offset:2px;border-radius:6px}
h2{font-size:clamp(1.45rem,3vw,2.05rem);font-weight:900;letter-spacing:-.02em;margin:0 0 4px;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 18px;max-width:70ch}

/* header */
.top{position:sticky;top:0;z-index:60;background:rgba(13,10,20,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.topin{display:flex;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand .mark{width:38px;height:38px;flex:0 0 38px}
.brand .wm{line-height:1.05}
.brand .wm b{display:block;font-size:1.06rem;font-weight:900;letter-spacing:-.02em}
.brand .wm span{display:block;font-size:.7rem;letter-spacing:.01em;text-transform:none;color:var(--faint);font-weight:500;margin-top:3px}
nav{display:flex;gap:2px;flex:1 1 auto;flex-wrap:wrap}
nav a{color:var(--muted);font-size:.85rem;font-weight:700;padding:7px 10px;border-radius:8px}
nav a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.searchbox{position:relative;flex:1 1 210px;max-width:260px;min-width:0}
.searchbox input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--text);font:600 .85rem var(--sans);padding:9px 13px 9px 32px}
.searchbox input::placeholder{color:var(--faint)}
.searchbox svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.55}

/* hero */
.hero{padding:34px 0 20px;background:radial-gradient(760px 320px at 78% 0%,rgba(255,59,92,.17),transparent 62%),radial-gradient(600px 300px at 6% 10%,rgba(163,102,255,.13),transparent 60%)}
.heroin{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:center}
h1{font-size:clamp(1.9rem,4.6vw,3.3rem);font-weight:900;line-height:1.03;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
h1 em{font-style:normal;color:transparent;background:linear-gradient(96deg,var(--hot),var(--flame));-webkit-background-clip:text;background-clip:text}
.lede{color:var(--muted);font-size:1.03rem;max-width:58ch;margin:0 0 18px}
.lede b{color:var(--text)}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:104px}
.stat .n{font:900 1.7rem/1 var(--sans);font-variant-numeric:tabular-nums}
.stat.a .n{color:var(--hot)} .stat.b .n{color:var(--flame)} .stat.c .n{color:var(--zap)}
.stat .t{font-size:.72rem;color:var(--muted);margin-top:4px;line-height:1.3}
.mascotwrap{display:flex;justify-content:center}
.mascotwrap svg{width:100%;max-width:210px;height:auto;filter:drop-shadow(0 10px 30px rgba(255,59,92,.35));overflow:visible}

/* mascot: each part on its own rhythm, so it reads as alive rather than as a looping gif.
   Scoped to .m-svg, so the small logo in the header stays perfectly still. */
.m-svg .m-head,.m-svg .m-card,.m-svg .m-ant,.m-svg .m-eyes{transform-box:fill-box}
.m-svg .m-head{transform-origin:50% 78%;animation:mHead 6s ease-in-out infinite}
.m-svg .m-ant{transform-origin:50% 100%;animation:mAnt 6s ease-in-out infinite}
.m-svg .m-eyes{transform-origin:50% 50%;animation:mEyes 3.4s ease-in-out infinite}
.m-svg .m-card{transform-origin:22% 88%;animation:mCard 6s ease-in-out infinite}
@keyframes mHead{
  0%,100%{transform:translateY(0) rotate(0deg)}
  28%{transform:translateY(-1.6px) rotate(-2deg)}
  62%{transform:translateY(1.2px) rotate(1.6deg)}
}
@keyframes mAnt{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(-9deg)}
  58%{transform:rotate(6deg)}
  80%{transform:rotate(-3deg)}
}
@keyframes mEyes{
  0%,68%,100%{transform:scale(1)}
  76%{transform:scale(1.16)}
  86%{transform:scale(.96)}
}
@keyframes mCard{
  0%,100%{transform:translateY(0) rotate(0deg)}
  20%{transform:translateY(-3px) rotate(-7deg)}
  46%{transform:translateY(.5px) rotate(4deg)}
  72%{transform:translateY(-1.5px) rotate(-2deg)}
}
/* on hover the judge shows the card off */
.mascotwrap:hover .m-card{animation:mCardUp .7s ease-out forwards}
@keyframes mCardUp{to{transform:translateY(-6px) rotate(-12deg) scale(1.07)}}
.mascotwrap:hover .m-head{animation:mHeadTilt .7s ease-out forwards}
@keyframes mHeadTilt{to{transform:translateY(-2px) rotate(-3.5deg)}}

/* trustpilot stars in the expanded panel */
.tpbig{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.9rem}
.tpbig b{font:900 1.15rem var(--mono);font-variant-numeric:tabular-nums}
.tpbig .tpn{color:var(--muted);font-size:.84rem}
.tpbig.none,.tpbig.gone{color:var(--faint);font-weight:700}
.tpbig.gone{color:#ffc9d2}
.tpwhy{flex-basis:100%;color:var(--faint);font-size:.76rem;line-height:1.4;font-weight:400}
.stars{position:relative;display:inline-block;font-size:1.02rem;letter-spacing:2px;line-height:1;flex:0 0 auto}
.stars span:first-child{color:#3a3157}
.stars span:last-child{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:var(--pct);color:var(--c)}

/* trustpilot */
.tpwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.tpcol{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;min-width:0}
.tpcol h4{margin:0 0 10px;font-size:1rem;font-weight:900}
.tpnote{font-size:.83rem;color:var(--muted);margin:0 0 11px;line-height:1.45}
.tprow{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line2)}
.tprow:last-child{border-bottom:0}
.tprow img{width:24px;height:24px;border-radius:6px;background:#fff;object-fit:contain;padding:2px;flex:0 0 24px}
.tprow .nm2{flex:1 1 auto;font-weight:800;font-size:.88rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tprow .cnt2{font:600 .72rem var(--mono);color:var(--faint);flex:0 0 auto}
.tprow .bar2{flex:0 1 84px;min-width:38px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.tprow .bar2 i{display:block;height:100%}
.tprow .sc2{flex:0 0 30px;text-align:right;font:800 .85rem var(--mono);font-variant-numeric:tabular-nums}
.tpgone a{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line2);color:var(--text);font-weight:800;font-size:.86rem;text-decoration:none}
.tpgone a:last-child{border-bottom:0}
.tpgone img{width:22px;height:22px;border-radius:5px;background:#fff;object-fit:contain;padding:2px}
.tpgone .st{margin-left:auto;font:800 .66rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#ffc9d2}
@media(max-width:820px){.tpwrap{grid-template-columns:minmax(0,1fr)}}

.fullrev{display:inline-block;margin-top:4px;font-weight:800;font-size:.9rem;color:var(--flame);text-decoration:none;
  border:1px solid rgba(255,157,46,.4);border-radius:10px;padding:8px 13px;background:rgba(255,157,46,.08)}
.fullrev:hover{background:rgba(255,157,46,.16);text-decoration:none}
/* hub links to the sub-pages, so they are reachable by crawlers and by people */
.hub{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 4px}
.hub a{font-size:.85rem;font-weight:800;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:9px 14px;background:var(--panel2);transition:color .15s,border-color .15s}
.hub a:hover{color:#fff;border-color:var(--flame)}
/* awards */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:24px 0 6px}
.aw{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:9px;min-width:0;transition:border-color .15s,transform .15s}
.aw:hover{border-color:var(--flame);transform:translateY(-2px);text-decoration:none}
.aw .k{font:800 .6rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--flame);line-height:1.3;overflow-wrap:anywhere}
.aw .b{display:flex;align-items:center;gap:9px;min-width:0}
.aw img{width:32px;height:32px;border-radius:8px;background:#fff;object-fit:contain;padding:3px;flex:0 0 32px}
.aw .n{font-weight:900;font-size:1rem;line-height:1.15;color:var(--text);min-width:0;overflow-wrap:anywhere}
.aw .s{margin-left:auto;font:800 .8rem var(--mono);color:var(--flame);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* quiz */
.quiz{background:linear-gradient(120deg,rgba(255,59,92,.12),rgba(163,102,255,.10));border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:22px 0 6px}
.quiz h3{margin:0 0 3px;font-size:1.05rem;font-weight:900}
.quiz p{margin:0 0 12px;color:var(--muted);font-size:.88rem}
.qrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.qlabel{font:800 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);flex:0 0 118px}
.qopt{font:700 .82rem var(--sans);color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s}
.qopt:hover{color:var(--text);border-color:var(--zap)}
.qopt[aria-pressed="true"]{background:linear-gradient(180deg,rgba(63,224,207,.2),rgba(63,224,207,.08));border-color:var(--zap);color:#eafffb}
.qresult{margin-top:10px;padding-top:11px;border-top:1px solid var(--line2);font-size:.9rem;color:var(--muted);display:none}
.qresult.on{display:block}
.qresult b{color:var(--text)}
.qpick{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 5px;margin:5px 6px 0 0;font-weight:800;font-size:.85rem;color:var(--text)}
.qpick img{width:22px;height:22px;border-radius:5px;background:#fff}

/* controls */
.ctl{position:sticky;top:56px;z-index:50;background:rgba(13,10,20,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2);padding:11px 0}
.ctlrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chip{font:700 .8rem var(--sans);color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--text);border-color:var(--hot)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,59,92,.22),rgba(255,59,92,.09));border-color:var(--hot);color:#fff}
.chip.cat[aria-pressed="true"]{background:linear-gradient(180deg,rgba(163,102,255,.24),rgba(163,102,255,.1));border-color:var(--violet)}
.sel{font:700 .8rem var(--sans);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.grow{flex:1 1 20px}
.cnt{font:700 .78rem var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.clear{font:700 .78rem var(--sans);color:var(--flame);background:none;border:0;cursor:pointer;padding:6px 4px}

/* list */
.rows{display:flex;flex-direction:column;gap:8px;padding:18px 0 6px}
/* rows re-enter on every filter change, so pressing a chip always looks like it did something,
   even when the top of the list happens to be unchanged. No fill-mode, so :hover still works after. */
@keyframes rowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.row{animation:rowIn .26s cubic-bezier(.22,.9,.3,1)}
@keyframes pulseHit{0%{transform:scale(1)}35%{transform:scale(1.13);color:var(--hot)}100%{transform:scale(1)}}
.cnt.hit{display:inline-block;animation:pulseHit .5s ease}
@keyframes moreHit{0%{border-color:var(--line)}30%{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,59,92,.16)}100%{border-color:var(--line)}}
#showMore.hit{animation:moreHit .6s ease}
.row{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;transition:border-color .16s,transform .16s}
.row:hover{border-color:rgba(255,59,92,.45);transform:translateY(-1px)}
.row.top3{border-color:rgba(255,157,46,.5)}
.rmain{cursor:pointer;display:grid;grid-template-columns:34px 104px minmax(140px,1.1fr) auto minmax(170px,1.6fr) auto auto;gap:12px;align-items:center;padding:11px 13px}
.rank{font:900 1.05rem var(--mono);color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.row.top3 .rank{color:var(--flame)}
.thumb{position:relative;width:104px;height:65px;border-radius:10px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);flex:0 0 104px;display:flex;align-items:center;justify-content:center}
.thumb .sc{width:100%;height:100%;object-fit:cover;display:block}
.thumb .bd{position:absolute;left:4px;bottom:4px;width:22px;height:22px;border-radius:5px;background:#fff;object-fit:contain;padding:2px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.thumb .solo{width:34px;height:34px;border-radius:8px;background:#fff;object-fit:contain;padding:3px}
.shotbig{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.lg{width:46px;height:46px;border-radius:11px;background:#fff;object-fit:contain;padding:5px;flex:0 0 46px}
.nm{min-width:0}
.nm b{display:block;font-weight:900;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.nm .cat{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-top:3px}
.score{text-align:center;min-width:60px}
.score .v{font:900 1.15rem var(--mono);font-variant-numeric:tabular-nums;line-height:1}
.score .bar{width:56px;height:4px;border-radius:99px;background:var(--line);margin:5px auto 0;overflow:hidden}
.score .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--flame))}
.score .lbl{font-size:.6rem;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.descwrap{min-width:0}
.desc{color:var(--muted);font-size:.86rem;line-height:1.42;overflow-wrap:anywhere}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.tg{font:800 .62rem var(--sans);letter-spacing:.03em;padding:3px 6px;border-radius:5px;border:1px solid transparent;white-space:nowrap}
.tg.y{color:#c6f7e2;background:rgba(61,220,151,.13);border-color:rgba(61,220,151,.3)}
.tg.p{color:#ffe3b5;background:rgba(255,180,62,.12);border-color:rgba(255,180,62,.28)}
.tg.n{color:#b9adcf;background:rgba(107,95,128,.16);border-color:rgba(107,95,128,.32)}
.tg.w{color:#ffc9d2;background:rgba(255,59,92,.14);border-color:rgba(255,59,92,.34)}
.tg.tp{text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.ministars{position:relative;display:inline-block;font-size:.72rem;letter-spacing:.5px;line-height:1;flex:0 0 auto}
.ministars span:first-child{color:rgba(255,255,255,.18)}
.ministars span:last-child{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:var(--pct);color:var(--c)}
a.tg.tp:hover{filter:brightness(1.25)}
.pricecol{text-align:right;white-space:nowrap}
.pricecol .p{font:800 .95rem var(--mono);font-variant-numeric:tabular-nums}
.pricecol .f{font-size:.66rem;color:var(--yes);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.acts{display:flex;flex-direction:column;gap:5px}
.btn{font:800 .76rem var(--sans);border-radius:9px;padding:7px 12px;cursor:pointer;border:1px solid transparent;text-align:center;white-space:nowrap;transition:.15s}
.btn.go{background:linear-gradient(180deg,var(--hot),#e02347);color:#fff}
.btn.go:hover{filter:brightness(1.12);text-decoration:none}
.btn.gh{background:transparent;border-color:var(--line);color:var(--muted)}
.btn.gh:hover{color:var(--text);border-color:var(--zap)}
.btn.cmp[aria-pressed="true"]{background:rgba(63,224,207,.16);border-color:var(--zap);color:#eafffb}
.det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.det>div{overflow:hidden}
.row.open .det{grid-template-rows:1fr}
.detin{border-top:1px solid var(--line2);margin:0 13px;padding:12px 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.dl{font:800 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.dv{font-size:.88rem;line-height:1.45}
.dv.good{color:#c6f7e2} .dv.bad{color:#ffd7c9} .dv.warn{color:#ffc9d2}
.rev{grid-column:1/-1;order:9}
.rev p{margin:0 0 9px;font-size:.9rem;line-height:1.62;color:var(--text);max-width:78ch}
.rev p:last-child{margin-bottom:0}
.brk{display:flex;flex-wrap:wrap;gap:5px}
.brkitem{font:700 .68rem var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--muted)}
.brkitem b{color:var(--text)}
.brkitem.yes{border-color:rgba(61,220,151,.35)}.brkitem.yes b{color:#8ff0c4}
.brkitem.part{border-color:rgba(255,180,62,.35)}.brkitem.part b{color:#ffcf8a}
.brkitem.no{border-color:rgba(107,95,128,.4)}.brkitem.no b{color:#9c8fb3}
#showMore{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:6px 0 4px;
  padding:15px;border-radius:14px;cursor:pointer;font:800 .92rem var(--sans);color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:.16s}
#showMore:hover{border-color:var(--hot);color:#fff}
#showMore svg{width:18px;height:18px;color:var(--hot)}
#showMore[hidden]{display:none}
.row.folded{display:none}
.empty{text-align:center;color:var(--muted);padding:44px 0}

/* compare: a centred sheet, so no second bar can hide under the iOS address bar */
.cmpModal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(6,4,10,.72);backdrop-filter:blur(6px)}
.cmpModal.on{display:flex}
.cmpBox{width:100%;max-width:820px;max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:18px;box-shadow:0 30px 80px -20px #000;overflow:hidden}
.cmpHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line2)}
.cmpHead b{font-size:1.05rem;font-weight:900}
.cmpX{background:none;border:0;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:0 4px}
.cmpX:hover{color:var(--text)}
.cmpSlots{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px}
.slot{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:5px 9px 5px 5px;font-weight:800;font-size:.84rem}
.slot img{width:24px;height:24px;border-radius:6px;background:#fff}
.slot button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
.cmpScroll{overflow:auto;padding:6px 16px 14px;flex:1 1 auto}
.cmpTable{width:100%;border-collapse:collapse;font-size:.85rem}
.cmpTable th,.cmpTable td{border-bottom:1px solid var(--line2);padding:8px 10px;text-align:left;vertical-align:top}
.cmpTable th{color:var(--faint);font:800 .68rem var(--sans);letter-spacing:.1em;text-transform:uppercase;
  position:sticky;top:0;background:var(--panel)}
.cmpTable td:first-child{color:var(--faint);font-weight:800;white-space:nowrap}
.cmpFoot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line2)}

/* sections */
section{padding:34px 0 6px}
.lie{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.liecol{border-radius:14px;border:1px solid var(--line);padding:14px;background:var(--panel)}
.liecol.t{border-color:rgba(61,220,151,.4)}
.liecol.m{border-color:rgba(255,180,62,.4)}
.liecol.f{border-color:rgba(255,59,92,.4)}
.liecol h4{margin:0 0 3px;font-size:1rem;font-weight:900}
.liecol .c{font:900 2rem/1 var(--mono);font-variant-numeric:tabular-nums}
.liecol.t .c{color:var(--yes)} .liecol.m .c{color:var(--part)} .liecol.f .c{color:var(--hot)}
.liecol p{font-size:.82rem;color:var(--muted);margin:5px 0 9px}
.mini{display:flex;flex-wrap:wrap;gap:5px}
.mini img{width:26px;height:26px;border-radius:6px;background:#fff;object-fit:contain;padding:2px}

.tombs{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.tomb{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--faint);border-radius:12px;padding:13px 14px}
.tomb .yr{font:800 .68rem var(--mono);color:var(--faint);letter-spacing:.08em}
.tomb h4{margin:3px 0 5px;font-size:1rem;font-weight:900}
.tomb .cz{display:inline-block;font:800 .62rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#ffc9d2;background:rgba(255,59,92,.14);border:1px solid rgba(255,59,92,.3);border-radius:5px;padding:2px 6px;margin-bottom:7px}
.tomb p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}
.src{font:800 .72rem var(--sans);color:var(--zap);text-decoration:none;overflow-wrap:anywhere;border-bottom:1px dotted rgba(63,224,207,.5)}
.src:hover{color:#bafff5;text-decoration:none}
.tomb .srcrow{margin-top:9px;padding-top:8px;border-top:1px solid var(--line2)}

.warns{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}
.warn{background:var(--panel);border:1px solid rgba(255,59,92,.3);border-radius:12px;padding:13px 14px;display:flex;gap:11px}
.warn img{width:34px;height:34px;border-radius:8px;background:#fff;object-fit:contain;padding:3px;flex:0 0 34px}
.warn b{display:block;font-weight:900;margin-bottom:3px}
.warn p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}


/* floating pill navigator: small, centred, icons only */
#jump{--jy:96px;position:fixed;left:50%;transform:translateX(-50%) translateY(var(--jy));
  opacity:0;pointer-events:none;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:65;display:none;flex-wrap:nowrap;align-items:center;gap:1px;padding:5px 7px;border-radius:999px;
  background:rgba(18,13,30,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:0 10px 30px -8px rgba(0,0,0,.75);
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),opacity .28s ease}
#jump.show{--jy:0px;opacity:1;pointer-events:auto}
#jump .jlogo{width:24px;height:21px;display:block;padding:0;margin:0 4px 0 1px;flex:0 0 24px;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .16s}
#jump a.jlogo:hover{background:none;transform:translateY(-2px) scale(1.1);filter:drop-shadow(0 3px 7px rgba(255,59,92,.5))}
#jump a.jlogo:active{transform:scale(.94)}
#jump .jlogo svg{width:100%;height:100%;display:block}
#jump a{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  color:var(--faint);text-decoration:none;transition:color .15s,background .15s}
#jump a svg{width:18px;height:18px}
#jump a:hover{color:var(--text);background:rgba(255,255,255,.06)}
#jump .jsep{flex:0 0 1px;width:1px;height:22px;background:var(--line);margin:0 4px}
.top nav a.navmail{color:var(--flame)}
#jump a.jmail{color:var(--flame)}
#jump a.jmail:hover{color:#fff;background:linear-gradient(180deg,var(--flame),#e07d18)}
#jump a.on{color:#fff;background:linear-gradient(180deg,var(--hot),#e02347);
  box-shadow:0 4px 14px -4px rgba(255,59,92,.8)}

@media(max-width:1000px){
  #jump{display:flex}
  body{padding-bottom:96px}
  /* the pill replaces it, so the top bar stops eating a strip of every screen */
  .top{position:static}
  .top nav{display:none}
}
section[id],div[id="index"],#contact{scroll-margin-top:64px}

footer{border-top:1px solid var(--line2);margin-top:38px;padding:22px 0 120px;color:var(--faint);font-size:.8rem;line-height:1.6}
/* the contact card is the one thing on the page we want people to act on, so it gets gold */
footer .contact{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:radial-gradient(125% 165% at 0% 0%,rgba(255,198,90,.22),transparent 58%),
             radial-gradient(120% 160% at 100% 100%,rgba(255,124,54,.17),transparent 62%),
             linear-gradient(165deg,#251b12,#1a1426);
  border:1px solid rgba(255,192,96,.45);border-radius:16px;padding:18px 20px;margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(255,224,170,.16),0 16px 44px -24px rgba(255,168,60,.85)}
footer .contact>*{position:relative;z-index:1}
footer .contact::before{content:"";position:absolute;inset:-60% -15%;z-index:0;pointer-events:none;
  background:linear-gradient(72deg,transparent 43%,rgba(255,228,168,.14) 50%,transparent 57%);
  transform:translateX(-75%);animation:goldShine 7.5s ease-in-out infinite}
@keyframes goldShine{0%,66%{transform:translateX(-75%)}100%{transform:translateX(75%)}}
footer .contact b{display:flex;align-items:center;gap:7px;font-size:1.06rem;font-weight:900;
  color:#ffd489;margin-bottom:5px;letter-spacing:-.01em}
footer .contact b svg{width:17px;height:17px;flex:0 0 17px;color:#ffb352}
footer .contact p{margin:0;font-size:.85rem;color:rgba(255,238,214,.72);line-height:1.5;max-width:58ch}
footer .mailwrap{display:flex;align-items:center;gap:8px;flex:0 0 auto}
footer .cpy{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;cursor:pointer;
  border:1px solid rgba(255,192,96,.42);border-radius:11px;background:rgba(255,196,96,.10);color:#ffcd84;
  transition:color .15s,border-color .15s,background .15s,transform .12s}
footer .cpy svg{width:17px;height:17px}
footer .cpy:hover{color:#2a1c04;border-color:#ffce6a;background:linear-gradient(180deg,#ffd98a,#ffb352)}
footer .cpy:active{transform:scale(.92)}
footer .cpy.done{color:#0d0a14;background:var(--good,#3ddc97);border-color:var(--good,#3ddc97)}
@keyframes contactLand{0%{box-shadow:0 0 0 0 rgba(255,196,96,0)}
  22%{box-shadow:0 0 0 5px rgba(255,196,96,.4),0 16px 44px -24px rgba(255,168,60,.85)}
  100%{box-shadow:0 0 0 0 rgba(255,196,96,0)}}
footer .contact.land{animation:contactLand 1.25s ease}
footer .mail{flex:0 0 auto;font:800 .95rem var(--sans);color:#2a1c04;text-decoration:none;
  background:linear-gradient(180deg,#ffd98a,#ffab3e);border-radius:11px;padding:11px 16px;white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(255,170,60,.95);transition:filter .15s,transform .12s}
footer .mail:hover{filter:brightness(1.07);text-decoration:none;transform:translateY(-1px)}
footer .mail:active{transform:translateY(0)}


/* tippy-style tooltips */
#tip{position:fixed;z-index:9998;max-width:290px;background:#0b0812;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:600 .78rem/1.45 var(--sans);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.8);opacity:0;transform:translateY(4px);
  transition:opacity .13s,transform .13s;pointer-events:none}
#tip.on{opacity:1;transform:none}
#tip b{color:var(--flame)}
[data-tip]{cursor:help}

@media(max-width:1000px){
  /* stacked cards need real air between them, otherwise they read as one wall of boxes */
  .rows{gap:15px}
  .rmain{grid-template-columns:26px 84px 1fr auto;grid-template-areas:"r l n s" "d d d d" "p p p p" "a a a a";
         gap:12px 10px;padding:14px 14px 15px}
  /* four actions no longer fit beside the price, so they get their own full-width row */
  .acts{flex-wrap:wrap;justify-content:flex-start!important;gap:7px}
  .acts .btn{flex:0 0 auto}
  /* long one-word names (GirlfriendGPT) blew past their column and ran under the score */
  .nm{min-width:0}
  .nm b{overflow-wrap:anywhere}
  .nm .cat{line-height:1.35;margin-top:4px}
  .tags{margin-top:8px;gap:5px}
  .desc{line-height:1.5}
  .descwrap{grid-area:d;min-width:0}
  .rank{grid-area:r}.thumb{grid-area:l;width:84px;height:53px;flex-basis:84px}.nm{grid-area:n}.score{grid-area:s}
  .descwrap{grid-area:d;min-width:0}.pricecol{grid-area:p;text-align:left}.acts{grid-area:a;flex-direction:row;justify-content:flex-end}
  .detin{grid-template-columns:1fr}
  .heroin{grid-template-columns:1fr}.mascotwrap{order:-1}
  .lie{grid-template-columns:1fr}
  .ctl{top:0;position:static}
  .searchbox{flex:1 1 100%;max-width:none;order:3}
  nav{order:2;gap:0}
  nav a{padding:6px 8px;font-size:.8rem}
}
@media(max-width:430px){
  .nm b{font-size:.96rem}
  .nm .cat{letter-spacing:.05em;overflow-wrap:anywhere}
}
@media(max-width:380px){
  /* free up width for the name column on the smallest phones */
  .rmain{grid-template-columns:22px 72px 1fr auto;padding:13px 11px 14px}
  .thumb{width:72px;height:46px;flex-basis:72px}
  .nm b{font-size:.92rem}
  .nm .cat{font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.langpick{position:relative;flex:0 0 auto;margin-left:6px}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;
  padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  font-size:1rem;line-height:1;transition:border-color .15s}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{border-color:var(--flame)}
.langpick summary svg{width:12px;height:12px;color:var(--faint)}
.langpick .fl{font-size:1.05rem;line-height:1}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:80;min-width:158px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8)}
.langmenu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:700;white-space:nowrap}
.langmenu a:hover{background:var(--panel2);color:#fff}
.langmenu a.on{color:var(--flame)}
@media(max-width:1000px){.langpick{order:1;margin-left:auto}}

.art{max-width:860px;margin:0 auto}
.crumb{font-size:.8rem;color:var(--faint);margin:0 0 14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--flame)}
.art h1{font-size:clamp(1.6rem,4.2vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin:0 0 10px;line-height:1.15}
.art h2{font-size:1.25rem;font-weight:900;margin:30px 0 10px;letter-spacing:-.01em}
.art h3{font-size:1.02rem;font-weight:900;margin:22px 0 6px}
.art p{color:var(--muted);line-height:1.65;margin:0 0 13px}
.art p.lede{font-size:1.05rem;color:var(--text)}
.art a{color:var(--flame)}
.rhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 18px}
.rhead img.lg{width:56px;height:56px;border-radius:13px;background:#fff;object-fit:contain;padding:6px;flex:0 0 56px}
.rhead .who{flex:1 1 200px;min-width:0}
.rhead .who b{display:block;font-size:1.3rem;font-weight:900;letter-spacing:-.02em}
.rhead .who span{font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.rhead .sc{flex:0 0 auto;text-align:right}
.rhead .sc b{display:block;font:900 2rem var(--mono);line-height:1;
  background:linear-gradient(90deg,var(--hot),var(--flame));-webkit-background-clip:text;background-clip:text;color:transparent}
.rhead .sc span{font-size:.72rem;color:var(--faint);font-weight:800}
.shotwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 20px;background:var(--panel)}
.shotwrap img{display:block;width:100%;height:auto}
.tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.9rem}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl th{color:var(--faint);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.tbl td b{color:var(--text)}
.tbl tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.v-yes{color:var(--yes);font-weight:800}.v-part{color:var(--part);font-weight:800}.v-no{color:var(--no);font-weight:800}
.rank-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.rank-list li{display:flex;align-items:center;gap:11px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.rank-list .n{font:900 .95rem var(--mono);color:var(--flame);flex:0 0 22px;text-align:center}
.rank-list img{width:34px;height:34px;border-radius:9px;background:#fff;object-fit:contain;padding:3px;flex:0 0 34px}
.rank-list .t{flex:1 1 auto;min-width:0}
.rank-list .t b{display:block;font-weight:900;font-size:.98rem}
.rank-list .t b a{color:var(--text);text-decoration:none}
.rank-list .t b a:hover{color:var(--flame)}
.rank-list .t span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:2px}
.rank-list .s{flex:0 0 auto;font:900 1rem var(--mono);color:var(--flame)}
.faq dt{font-weight:900;margin:16px 0 5px}
.faq dd{margin:0;color:var(--muted);line-height:1.65}
.tomb{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin:0 0 11px}
.tomb b{font-size:1.02rem;font-weight:900;display:block}
.tomb .meta{font-size:.75rem;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin:2px 0 7px}
.tomb p{margin:0 0 7px;font-size:.9rem}
.tomb .src{font-size:.78rem}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.pillrow a{font-size:.82rem;font-weight:800;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:7px 13px;background:var(--panel2)}
.pillrow a:hover{color:#fff;border-color:var(--flame)}
.backhome{display:inline-block;margin:22px 0 0;font-weight:800;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,var(--hot),#e02347);border-radius:11px;padding:11px 17px}
.visit{display:inline-block;font-weight:800;text-decoration:none;color:#2a1c04;
  background:linear-gradient(180deg,#ffd98a,#ffab3e);border-radius:11px;padding:10px 16px}
.note{background:rgba(255,59,92,.09);border:1px solid rgba(255,59,92,.4);border-radius:13px;padding:13px 15px;margin:0 0 18px}
.note b{color:#ff8ea3}
.claim{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:radial-gradient(120% 160% at 0% 0%,rgba(255,157,46,.14),transparent 60%),linear-gradient(165deg,#221a12,#181326);
  border:1px solid rgba(255,192,96,.4);border-radius:15px;padding:15px 17px;margin:6px 0 4px}
.claim>div{flex:1 1 240px;min-width:0}
.claim b{display:block;font-size:1rem;font-weight:900;color:#ffd489;margin-bottom:3px}
.claim p{margin:0;font-size:.85rem;color:rgba(255,238,214,.72);line-height:1.5}
.claim img{display:block;max-width:100%;height:auto;flex:0 0 auto}