/* Scent Stats: shared tokens and components (Console dim) */
@font-face{font-family:"Russo One";font-weight:400;font-display:swap;src:url(../fonts/russo-one-400.woff2) format("woff2")}
@font-face{font-family:Rajdhani;font-weight:500;font-display:swap;src:url(../fonts/rajdhani-500.woff2) format("woff2")}
@font-face{font-family:Rajdhani;font-weight:600;font-display:swap;src:url(../fonts/rajdhani-600.woff2) format("woff2")}
@font-face{font-family:Rajdhani;font-weight:700;font-display:swap;src:url(../fonts/rajdhani-700.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format("woff2")}

:root{--bg:#1c1f25;--ink:#eef0f3;--dim:#909296;--acc:#3ddc78;--alt:#8fbcff;--gold:#f2c14e;--line:rgba(238,240,243,.16);--panel:rgba(34,37,43,.94);--menu:#afb1b5;--soft:#c8cace;--off:#35383e;--tile:#24272d;--tile2:#1e2c2b;--on:#0b0c0f;--sky1:#21242a;--sky2:#0e1012;--glow:#1f2c2c;--key:#393c42;
  --t1:#ff7b72;--t2:#ffae5c;--t3:#ffd75e;--t4:#d9ec7c;--t5:#8fbcff;--t6:#b8a4ff;
  --h:var(--gh-font-heading,Rajdhani),sans-serif;--b:var(--gh-font-body,Barlow),sans-serif;--logo:"Russo One",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--b);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:4px;background:var(--key);color:var(--ink);font:700 13px/1 var(--h);letter-spacing:.06em}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar: console menu tabs */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;height:60px;padding:0 48px;background:var(--bg);border-bottom:1px solid var(--line)}
.mark{font:400 22px/1 var(--logo);letter-spacing:.02em;white-space:nowrap}
.mark b{font-weight:400;color:var(--acc)}
.tabs{display:flex;margin:0 auto;font:600 17px var(--h);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tabs a{padding:19px 14px 16px;color:var(--menu);border-bottom:3px solid transparent}
.tabs a:hover{color:var(--ink)}
[data-section="reviews"] .tabs a[data-tab="reviews"],
[data-section="potion-grading"] .tabs a[data-tab="potion-grading"],
[data-section="save-spend-splurge"] .tabs a[data-tab="save-spend-splurge"],
[data-section="about"] .tabs a[data-tab="about"]{color:var(--ink);border-bottom-color:var(--acc)}
.back{display:flex;align-items:center;gap:8px;font:600 15px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.back:hover{color:var(--ink)}

/* Rarity (price tier) */
.uncommon{--r:var(--acc)}.rare{--r:var(--alt)}.legendary{--r:var(--gold)}
.rar{display:flex;align-items:center;gap:10px;font:600 15px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--r)}
.rar span{background:var(--r);color:var(--on);padding:1px 8px}

/* Stat rows and segmented bars */
.stats>div{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.stats dt{font:600 15px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stats dd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink)}
.stats dd em{font:600 17px var(--h);font-style:normal;letter-spacing:.04em;position:relative}
.seg{position:relative;display:block;width:calc(var(--n)*var(--sw,30px));height:11px;transform:skewX(-20deg);background:var(--off);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--n) - 4px),transparent 0 calc(100%/var(--n)));mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--n) - 4px),transparent 0 calc(100%/var(--n)))}
.seg::after{content:"";position:absolute;inset:0;width:calc(var(--v,0)/var(--n)*100%);background:var(--acc);transform-origin:left}
.pop{position:absolute;left:100%;top:-6px;margin-left:10px;font:400 18px/1 var(--logo);color:var(--acc);text-shadow:0 2px 0 #000;white-space:nowrap;opacity:0;pointer-events:none}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.6)}15%{opacity:1;transform:translateY(-4px) scale(1.15)}25%{transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@keyframes float{50%{transform:rotate(4deg) translateY(-12px)}}

/* Buttons */
.btn{display:inline-flex;gap:12px;align-items:center;background:var(--acc);color:var(--on);font:700 20px var(--h);letter-spacing:.14em;text-transform:uppercase;padding:6px 26px 6px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn kbd{background:var(--on);color:var(--acc);border-radius:50%;width:24px;height:24px;padding:0}
.btn:hover,.btn:focus-visible{background:var(--ink)}
.ghost{display:inline-flex;gap:10px;align-items:center;font:700 17px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ghost kbd{border-radius:50%;width:24px;height:24px;padding:0}
.ghost:hover{color:var(--ink)}

/* Reading column */
.prose>*+*{margin-top:20px}
.prose p,.prose li{font:400 18px/1.7 var(--b);color:var(--soft)}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px}
.prose h2{display:flex;align-items:center;gap:12px;font:700 28px/1.1 var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:44px}
.prose h2::before{content:"";flex:none;width:14px;height:14px;background:var(--acc);transform:skewX(-20deg)}
.prose h3{font:700 22px/1.15 var(--h);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-top:32px}
.prose blockquote{border-left:3px solid var(--acc);padding-left:18px;color:var(--ink)}
.prose figure img{display:block;height:auto}
.prose figcaption{margin-top:8px;font-size:14px;color:var(--dim)}
.kg-width-wide{position:relative;width:min(1040px,calc(100vw - 96px));left:50%;transform:translateX(-50%)}
.kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img,.kg-width-wide img{width:100%}

/* Character portrait (official press art, silhouette until the art loads) */
.portrait{position:absolute;left:0;top:50%;width:340px;aspect-ratio:3/4;transform:translateY(-50%);background:var(--tile);border:1px solid var(--line);border-top:3px solid var(--acc);overflow:hidden}
.portrait .art{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(238,240,243,.035) 0 2px,transparent 2px 10px),radial-gradient(ellipse at 50% 35%,#2c3138,var(--tile) 70%)}
.portrait svg{position:absolute;left:50%;bottom:0;width:86%;transform:translateX(-50%);fill:var(--off)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 20%);opacity:0;transition:opacity .3s}
.portrait img.on{opacity:1}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(14,16,18,.92) 45%)}
.portrait figcaption span{display:block;font:700 13px var(--h);letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.portrait figcaption b{display:block;font:700 34px/1 var(--h);text-transform:uppercase;letter-spacing:.02em;margin-top:4px}
.portrait figcaption em{font-style:normal;font-size:14px;color:var(--soft)}
.portrait figcaption small{display:block;margin-top:6px;font-size:11px;letter-spacing:.04em;color:var(--dim)}

/* Retailer buttons (affiliate links) and the disclosure under them */
.shop{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.shop a{display:flex;gap:10px;align-items:baseline;padding:10px 16px;background:var(--tile);border:1px solid var(--line)}
.shop a:hover{border-color:var(--acc)}
.shop b{font:700 22px var(--h);letter-spacing:.04em}
.shop span{font-size:14px;color:var(--soft)}
.disclose{margin-top:8px;font-size:13px;color:var(--dim)}

/* Save slots: the post card used on lists, Up next and the homepage */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:slot}
.slot{position:relative;display:block;min-height:132px;background:var(--tile);border:1px solid var(--line);padding:16px 18px 18px;counter-increment:slot;transition:transform .15s,border-color .15s}
.slot:hover{border-color:var(--acc);transform:translateY(-3px)}
.slot .no::before{content:"Slot " counter(slot,decimal-leading-zero);font:700 14px var(--h);letter-spacing:.2em;color:var(--dim)}
.slot .shead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px}
.slot .rar{font-size:13px}
.slot small{display:block;margin-top:10px;font-size:13px;color:var(--dim)}
.slot h3{font:700 28px/1 var(--h);text-transform:uppercase;margin:2px 0 4px}
.slot p{font-size:14px;color:var(--soft)}

/* Controller hint footer */
.hints{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:14px 48px;background:var(--sky2);border-top:1px solid var(--line);font:600 15px var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hints span{display:inline-flex;align-items:center;gap:8px;margin-right:22px}
.hints .legal{flex-basis:100%;font:400 12px var(--b);letter-spacing:.02em;text-transform:none;color:var(--dim)}

@media(max-width:900px){
 .bar{padding:0 16px;gap:14px}.tabs{overflow-x:auto;margin:0;font-size:15px}.tabs a{padding:19px 10px 16px}.back span{display:none}
 .stats>div{grid-template-columns:96px 1fr}.stats .seg{width:120px}
 .prose p,.prose li{font-size:17px}
 .kg-width-wide{width:calc(100vw - 32px)}
 .slots{grid-template-columns:1fr}
 .portrait{width:220px}.portrait figcaption{padding:30px 14px 12px}.portrait figcaption b{font-size:24px}
 .hints{padding:14px 16px}
}
@media(max-width:560px){.bar{flex-wrap:wrap;justify-content:space-between;height:auto;padding:12px 16px 0;gap:4px}.mark{font-size:18px}.tabs{order:3;width:100%;margin:0 -10px}.tabs a{padding:12px 10px 10px}html{scroll-padding-top:110px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.pop{display:none}}