/* Fake or Real Law */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#07070c; --ink2:#0d0d16;
  --panel:rgba(22,22,34,.72); --panel-line:rgba(255,255,255,.10);
  --txt:#eceaf5; --dim:#a3a0b8; --faint:#6f6c85;
  --gold:#f0b429; --gold2:#ffd166;
  --indigo:#6366f1; --violet:#a855f7; --pink:#ec4899;
  --good:#34d399; --bad:#fb7185;
  --r:18px;
}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--txt);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* hidden must beat every layout rule below */
[hidden]{display:none !important}

/* drifting background */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(90px);opacity:.5}
.orbs span{position:absolute;display:block;border-radius:50%;width:46vmax;height:46vmax;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite}
.orbs span:nth-child(1){background:var(--indigo);top:-16vmax;left:-10vmax}
.orbs span:nth-child(2){background:var(--violet);bottom:-20vmax;right:-12vmax;animation-delay:-9s}
.orbs span:nth-child(3){background:var(--gold);top:32%;left:52%;width:30vmax;height:30vmax;opacity:.5;animation-delay:-17s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5vmax,-4vmax) scale(1.12)}66%{transform:translate(-4vmax,5vmax) scale(.93)}}
@media (prefers-reduced-motion:reduce){.orbs span{animation:none}}

/* header */
header.site{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px clamp(16px,4vw,44px);
  background:rgba(10,10,18,.55);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:14px}
.seal{
  display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:13px;
  font-family:Spectral,Georgia,serif;font-size:27px;font-weight:600;color:#2b1d00;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  box-shadow:0 6px 20px rgba(240,180,41,.34);
}
header h1{
  margin:0;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(19px,3vw,25px);
  letter-spacing:-.02em;font-weight:700;
  background:linear-gradient(92deg,#fff,#e6d9ff 45%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tag{margin:1px 0 0;font-size:12.5px;color:var(--faint)}
.games{display:flex;gap:8px}
.games a{
  font-size:13px;font-weight:600;color:var(--dim);text-decoration:none;
  padding:8px 14px;border-radius:999px;border:1px solid var(--panel-line);
  background:rgba(255,255,255,.04);transition:.18s;
}
.games a:hover{color:#fff;border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.10)}

main{max-width:800px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,24px) 60px}

/* cards */
.card{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);
  padding:clamp(20px,3.6vw,34px);backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.card+.card,.stage>*+*{margin-top:18px}
h2{margin:0 0 10px;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(21px,3.4vw,28px);letter-spacing:-.02em}
h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.lede{margin:0 0 18px;color:var(--dim);font-size:15.5px}
.lede em{color:var(--gold2);font-style:normal;font-weight:600}
.lede strong{color:var(--txt)}

/* stat strip */
.statbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.statbar .pill{
  font-size:12.5px;color:var(--dim);padding:7px 13px;border-radius:999px;
  border:1px solid var(--panel-line);background:rgba(255,255,255,.04);
}
.statbar .pill b{color:var(--gold2);font-variant-numeric:tabular-nums}
.skel{color:var(--faint);font-size:13px}

/* chips */
.picker{margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font:inherit;font-size:14px;font-weight:600;color:var(--dim);cursor:pointer;
  padding:10px 17px;border-radius:999px;border:1px solid var(--panel-line);
  background:rgba(255,255,255,.04);transition:.16s;
}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.chip.on{
  color:#2b1d00;border-color:transparent;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  box-shadow:0 5px 18px rgba(240,180,41,.3);
}

/* buttons */
.primary{
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;color:#2b1d00;
  padding:13px 26px;border:none;border-radius:13px;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  box-shadow:0 8px 26px rgba(240,180,41,.3);transition:.16s;
}
.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(240,180,41,.42)}
.primary:active{transform:translateY(0)}
.primary.big{width:100%;padding:16px;font-size:16.5px}
.fineprint{margin:14px 0 0;font-size:12.5px;color:var(--faint);text-align:center}

/* HUD */
.hud{display:flex;align-items:center;gap:clamp(14px,3vw,28px);flex-wrap:wrap;
  padding:14px 20px;border-radius:14px;border:1px solid var(--panel-line);
  background:rgba(16,16,26,.6);backdrop-filter:blur(12px);position:relative}
.hud-item{display:flex;flex-direction:column;line-height:1.2}
.hud-item .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--faint)}
.hud-item .v{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.hud-item .v b{color:var(--gold2)}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.07);border-radius:0 0 14px 14px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--violet));transition:width .45s cubic-bezier(.4,0,.2,1)}
.bump{animation:bump .4s ease}
@keyframes bump{50%{transform:scale(1.22);color:var(--gold2)}}

/* the claim */
.claim-card{position:relative;overflow:hidden}
.claim-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--gold),var(--violet))}
.meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.flag{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold2)}
.diff{font-size:11.5px;color:var(--faint);letter-spacing:.05em}
.claim{
  margin:0;font-family:Spectral,Georgia,serif;font-size:clamp(19px,3.3vw,25px);
  line-height:1.48;color:#fff;
}

/* real / fake buttons */
.verdict-btns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.verdict{
  font:inherit;cursor:pointer;color:var(--txt);text-align:left;
  display:flex;flex-direction:column;gap:3px;
  padding:18px 20px;border-radius:15px;border:1.5px solid var(--panel-line);
  background:rgba(255,255,255,.045);transition:.16s;
}
.verdict .big{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700}
.verdict .sub{font-size:12.5px;color:var(--faint)}
.verdict:hover{transform:translateY(-2px)}
.verdict.real:hover{border-color:var(--good);background:rgba(52,211,153,.12);box-shadow:0 10px 28px rgba(52,211,153,.16)}
.verdict.fake:hover{border-color:var(--bad);background:rgba(251,113,133,.12);box-shadow:0 10px 28px rgba(251,113,133,.16)}
.verdict:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}

/* reveal */
.banner{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk",sans-serif;
  font-size:18px;font-weight:700;margin-bottom:12px}
.banner #revealMark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:16px;flex:0 0 30px}
.banner.ok #revealMark{background:rgba(52,211,153,.18);color:var(--good)}
.banner.no #revealMark{background:rgba(251,113,133,.18);color:var(--bad)}
.banner.ok{color:var(--good)} .banner.no{color:var(--bad)}
.banner .pts{margin-left:auto;font-size:14px;color:var(--gold2);font-variant-numeric:tabular-nums}
.ruling{margin:0 0 16px;font-size:15.5px;color:var(--txt)}
.ruling b{color:var(--gold2)}
.quote{margin:0 0 16px;padding:16px 18px;border-radius:13px;
  background:rgba(255,255,255,.045);border:1px solid var(--panel-line);border-left:3px solid var(--gold)}
.quote figcaption{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gold2);margin-bottom:9px}
.quote blockquote{margin:0;font-family:Spectral,Georgia,serif;font-size:15.5px;line-height:1.6;color:#ddd8ee}
.src{display:inline-block;margin-top:11px;font-size:12.5px;color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.src:hover{color:var(--gold2);border-color:var(--gold2)}
.note{margin:0 0 18px;font-size:14px;color:var(--dim)}

/* results */
.scoreline{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.big-score,.accuracy{flex:1 1 120px;padding:16px;border-radius:14px;text-align:center;
  border:1px solid var(--panel-line);background:rgba(255,255,255,.045)}
.big-score b{display:block;font-family:"Space Grotesk",sans-serif;font-size:34px;color:var(--gold2);font-variant-numeric:tabular-nums}
.accuracy b{display:block;font-family:"Space Grotesk",sans-serif;font-size:26px;font-variant-numeric:tabular-nums}
.big-score span,.accuracy span{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.rank{font-size:16px;color:var(--gold2);font-weight:600;margin:0 0 18px}
.recap{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:7px;
  max-height:290px;overflow-y:auto}
.recap li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--dim);
  padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.035)}
.recap .m{flex:0 0 17px;font-weight:700}
.recap .ok{color:var(--good)} .recap .no{color:var(--bad)}
.recap .lbl{margin-left:auto;flex:0 0 auto;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--faint);padding-top:2px}

/* footer */
.site-foot{max-width:800px;margin:0 auto;padding:0 clamp(16px,4vw,24px) 50px;color:var(--faint);font-size:12.5px}
.site-foot a{color:var(--dim)}
.site-foot a:hover{color:var(--gold2)}
.disclaimer{opacity:.75}

@media (max-width:560px){
  .verdict-btns{grid-template-columns:1fr}
  .hud{gap:14px;padding:12px 16px}
  .games{width:100%}
}