/* ===========================================================
   PSI UK — Index / Scorecard editorial theme (dark, violet-plum)
   Distinct ledger/watchdog-style system: different type
   pairing, different accent hues, gauge-badge signature mark
   instead of a verification stamp, card-index layout language.
   =========================================================== */

:root{
  --bg:           #150E1A;
  --surface:      #1F1626;
  --surface-2:    #281B31;
  --text:         #EDE6F2;
  --text-soft:    #A398AC;
  --line:         #362A40;
  --line-strong:  #4A3A56;

  --verified:        #34C9C9;
  --verified-bg:     #102828;
  --verified-border: #1D4547;

  --caution:        #E8B94A;
  --caution-bg:     #2E2410;
  --caution-border: #4A3A18;

  --risk:        #E85D8A;
  --risk-bg:     #2E1622;
  --risk-border: #4A2536;

  --slate:    #9B87F0;
  --slate-bg: #201A38;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 6px;
  --max: 900px;
  --wide: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 1100px 550px at 50% 0%, #241A2C 0%, var(--bg) 55%) fixed,
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--slate); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--text); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

:focus-visible{ outline:3px solid var(--slate); outline-offset:2px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
.wrap--wide{ max-width:var(--wide); }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a.visually-hidden:focus{
  position:fixed !important; top:8px; left:8px; width:auto; height:auto;
  margin:0; padding:10px 16px; background:var(--text); color:var(--bg);
  border-radius:var(--radius); z-index:1000; clip:auto; overflow:visible; white-space:normal;
}

/* ---------- Masthead ---------- */
.masthead{
  background:var(--surface);
  color:var(--text);
  border-bottom:1px solid var(--line-strong);
}
.masthead__ribbon{
  background:var(--caution);
  color:#241A05;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-align:center;
  padding:6px 12px;
}
.masthead__bar{
  max-width:var(--wide); margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.masthead__mark{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); }
.masthead__badge{
  width:38px; height:38px; flex:none; border-radius:11px;
  background:var(--surface-2); border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.masthead__badge img{ width:22px; height:22px; }
.masthead__title{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:0.01em; line-height:1.1; }
.masthead__title small{
  display:block; font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--text-soft); font-weight:400; margin-top:3px;
}
.masthead nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap; }
.masthead nav a{ color:var(--text-soft); font-size:0.88rem; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
.masthead nav a:hover, .masthead nav a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--verified); }
.masthead__toggle{
  display:none; background:none; border:1px solid var(--line-strong); color:var(--text);
  padding:7px 10px; border-radius:var(--radius); font-family:var(--font-mono); font-size:0.8rem;
}
@media (max-width:820px){
  .masthead__toggle{ display:inline-block; }
  .masthead nav{ display:none; width:100%; order:3; }
  .masthead nav.is-open{ display:block; }
  .masthead__bar{ flex-wrap:wrap; }
  .masthead nav ul{ flex-direction:column; gap:2px; padding:10px 0 4px; }
  .masthead nav a{ display:block; padding:9px 4px; border-bottom:1px solid var(--line); }
}

/* ---------- Hero ---------- */
.hero{ border-bottom:1px solid var(--line); padding:46px 0 36px; }
.hero__eyebrow{
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--verified); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.hero__eyebrow::before{ content:""; width:26px; height:1px; background:var(--verified); }
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.95rem, 4vw, 3.1rem);
  line-height:1.1; margin:0 0 16px; max-width:16ch; color:var(--text);
}
.hero p.lede{ font-size:1.1rem; color:var(--text-soft); max-width:64ch; margin:0; }

/* ---------- Article body ---------- */
.article{ padding:40px 0 20px; }
.article h2{
  font-family:var(--font-display); font-weight:600; font-size:1.6rem; margin:2.3em 0 0.7em;
  padding-top:0.6em; border-top:1px solid var(--line); line-height:1.25; color:var(--text);
}
.article > h2:first-child{ border:none; padding-top:0; margin-top:0; }
.article h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:1.6em 0 0.5em; color:var(--text); }
.article p{ margin:0 0 1.05em; max-width:72ch; }
.article ul, .article ol{ margin:0 0 1.2em; padding-left:1.3em; max-width:70ch; }
.article li{ margin-bottom:0.4em; }
.article blockquote{
  margin:1.6em 0; padding:14px 20px; border-left:3px solid var(--verified);
  background:var(--verified-bg); font-style:italic; max-width:64ch; border-radius:0 var(--radius) var(--radius) 0;
}
.article table{ width:100%; border-collapse:collapse; margin:1em 0 1.8em; font-size:0.92rem; background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.article th, .article td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.article th{
  background:var(--slate-bg); color:#D9CFFB; font-family:var(--font-mono); font-size:0.72rem;
  letter-spacing:0.04em; text-transform:uppercase; font-weight:500;
}
.article tr:nth-child(even) td{ background:var(--surface-2); }

/* ---------- Pros / Cons ---------- */
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1em 0 1.6em; }
@media (max-width:600px){ .proscons{ grid-template-columns:1fr; } }
.proscons > div{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--surface); }
.proscons h4{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 8px; }
.proscons .pros h4{ color:var(--verified); }
.proscons .cons h4{ color:var(--risk); }
.proscons ul{ margin:0; padding-left:1.1em; font-size:0.92rem; }
.proscons li{ margin-bottom:0.35em; }

/* ---------- Rankings ---------- */
.rankings{ list-style:none; margin:0 0 2em; padding:0; counter-reset:rank; display:grid; gap:10px; }
.rank-item{
  counter-increment:rank; display:grid; grid-template-columns:44px 48px 1fr 200px;
  grid-template-areas:"num logo info action"; align-items:center; gap:0 16px;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
  padding:15px 18px; transition:border-color .15s ease, box-shadow .15s ease;
}
.rank-item:hover{ border-color:var(--line-strong); box-shadow:0 0 0 1px var(--slate-bg), 0 4px 20px rgba(155,135,240,0.10); }
.rank-item:nth-child(-n+3){ border-left:4px solid var(--verified); }
.rank-item::before{
  grid-area:num; content:counter(rank); font-family:var(--font-display); font-weight:600;
  font-size:1.55rem; color:var(--text-soft); line-height:1;
}
.rank-item:nth-child(-n+3)::before{ color:var(--verified); }
.rank-item__logo{
  grid-area:logo; width:48px; height:48px; border:1px dashed var(--line-strong); border-radius:10px;
  background:#F3F4F5; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;
}
.rank-item__logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.rank-item__logo::before{
  content:attr(data-fallback); display:none; font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-soft); letter-spacing:0.02em;
}
.rank-item__logo.is-missing{ background:var(--surface-2); }
.rank-item__logo.is-missing img{ display:none; }
.rank-item__logo.is-missing::before{ display:block; }
.rank-item__body{ grid-area:info; min-width:0; }
.rank-item__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rank-item__name{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--text); }
.rank-item__rating{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--verified); background:var(--verified-bg);
  padding:1px 8px; border-radius:20px; white-space:nowrap;
}
.rank-item__badge{
  display:inline-block; font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.05em;
  text-transform:uppercase; padding:2px 8px; border-radius:20px; background:var(--slate-bg); color:var(--slate);
}
.rank-item__badge.is-closed{ background:var(--risk-bg); color:var(--risk); }
.rank-item__pros{ margin:7px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.83rem; color:var(--text-soft); }
.rank-item__pros li::before{ content:"◆ "; color:var(--verified); font-weight:600; font-size:0.7em; }
.rank-item__action{ grid-area:action; display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:right; }
.rank-item__bonus{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-soft); line-height:1.4; }
.rank-item__bonus strong{ display:block; color:var(--text); font-size:0.8rem; font-family:var(--font-body); font-weight:600; }

/* CTA — pill-shaped solid button */
.btn-play{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--verified); color:#08211F; font-family:var(--font-body); font-weight:600;
  font-size:0.92rem; text-decoration:none; padding:10px 18px; border-radius:30px;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
  width:100%; box-sizing:border-box; white-space:nowrap;
}
.btn-play:hover{ background:#4DDBDB; box-shadow:0 0 20px rgba(52,201,201,0.35); transform:translateY(-1px); }
.btn-play::after{ content:"›"; font-family:var(--font-mono); font-weight:700; }
.btn-play--disabled{
  background:none; border:1px dashed var(--line-strong); color:var(--text-soft);
  font-weight:500; cursor:default; box-shadow:none; border-radius:30px;
}
.btn-play--disabled:hover{ transform:none; background:none; color:var(--text-soft); box-shadow:none; }
.btn-play--disabled::after{ content:""; }

@media (max-width:640px){
  .rank-item{ grid-template-columns:32px 40px 1fr; grid-template-areas:"num logo info" "action action action"; row-gap:12px; }
  .rank-item::before{ font-size:1.25rem; }
  .rank-item__logo{ width:40px; height:40px; }
  .rank-item__action{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
  .rank-item__bonus{ text-align:left; min-width:0; }
  .btn-play{ flex:0 0 auto; width:auto; padding:10px 18px; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-block; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.03em; text-transform:uppercase; text-decoration:none; padding:10px 16px; border-radius:30px; white-space:nowrap; }
.btn-primary{ background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); }
.btn-primary:hover{ background:var(--slate); color:#160F2E; border-color:var(--slate); }

/* ---------- Review cards ---------- */
.review{ border:1px solid var(--line); border-left:4px solid var(--verified); background:var(--surface); border-radius:var(--radius); padding:22px 24px; margin:1.4em 0 2.2em; }
.review__head{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.review__head h2{ margin:0; padding:0; border:none; font-size:1.35rem; }
.review__rank{ font-family:var(--font-mono); font-size:0.7rem; color:#160F2E; background:var(--slate); padding:3px 10px; border-radius:20px; letter-spacing:0.05em; }

/* ---------- Callouts ---------- */
.callout{ border-radius:var(--radius); padding:16px 18px; margin:1.6em 0; font-size:0.95rem; max-width:70ch; }
.callout--safe{ background:var(--verified-bg); border:1px solid var(--verified-border); }
.callout--warn{ background:var(--caution-bg); border:1px solid var(--caution-border); }
.callout--risk{ background:var(--risk-bg); border:1px solid var(--risk-border); }
.callout h4{ margin:0 0 6px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; }
.callout--safe h4{ color:var(--verified); }
.callout--warn h4{ color:var(--caution); }
.callout--risk h4{ color:var(--risk); }
.callout p:last-child{ margin-bottom:0; }

/* ---------- Related cards ---------- */
.related{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:1.6em 0 2em; padding:0; list-style:none; }
.related li{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:16px; }
.related a{ font-family:var(--font-display); font-weight:600; text-decoration:none; color:var(--text); }
.related p{ font-size:0.85rem; color:var(--text-soft); margin:6px 0 0; }

/* ---------- Table of Contents ---------- */
.article details.toc{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:12px 16px; margin:0 0 1.8em; max-width:70ch; }
.article details.toc summary{ cursor:pointer; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-soft); padding:2px 0; }
.article details.toc[open] summary{ margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.article details.toc ul{ list-style:none; margin:0; padding-left:0; max-height:340px; overflow-y:auto; font-size:0.86rem; }
.article details.toc li{ margin:0; }
.article details.toc li a{ display:block; padding:5px 0 5px 10px; border-left:2px solid var(--line); text-decoration:none; color:var(--text-soft); line-height:1.35; }
.article details.toc li a:hover{ color:var(--verified); border-left-color:var(--verified); }
.article details.toc ul ul{ max-height:none; overflow:visible; padding-left:14px; }
.article details.toc ul ul li a{ font-size:0.82rem; opacity:0.85; }

/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.02rem; list-style:none; color:var(--text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"+"; display:inline-block; width:1.1em; color:var(--verified); font-family:var(--font-mono); }
.faq details[open] summary::before{ content:"–"; }
.faq details p{ margin:10px 0 0 1.1em; color:var(--text-soft); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface); color:var(--text-soft); border-top:1px solid var(--line); margin-top:60px; padding:40px 0 30px; font-size:0.86rem; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
@media (max-width:700px){ .site-footer .wrap{ grid-template-columns:1fr; } }
.site-footer h5{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); margin:0 0 12px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:7px; }
.site-footer a{ color:var(--text-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--text); text-decoration:underline; }
.site-footer__disclaimer{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:0.78rem; color:var(--text-soft); line-height:1.7; opacity:0.85; }
.site-footer__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:18px; font-size:0.75rem; color:var(--text-soft); opacity:0.75; }

/* ---------- 18+ note ---------- */
.age-note{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.72rem; background:var(--surface-2); color:var(--text-soft); padding:3px 10px; border-radius:20px; }

/* ---------- Tables wrapper ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1em 0 1.8em; }
.table-scroll table{ margin:0; min-width:640px; }

@media print{ .masthead, .site-footer, .btn{ display:none; } }