/* Ludicious: a fictional video-game review site on Molecupedia. */
@font-face{font-family:"LU Display";src:url(fonts/outfit-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#f7f5fc;--card:#fff;--ink:#17121f;--text:#231d2e;--muted:#625a72;--line:#e4def0;
  --night:#2e1065;--grape:#5b21b6;--grape-soft:#ede9fe;--lime:#a3e635;--pink:#ec4899;--yellow:#facc15;--orange:#fb923c;
  --display:"LU Display","Outfit","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --px:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* ---------- Masthead ---------- */
.masthead{background:var(--night);color:#fff;border-bottom:4px solid var(--lime)}
.mast-row{display:flex;align-items:center;gap:30px;height:76px}
.logo{display:block;flex:none;line-height:0}
.logo img{width:200px;height:auto;image-rendering:pixelated}
.sections{display:flex;gap:4px 20px;flex:1;flex-wrap:wrap;min-width:0}
.sections a,.sections-m a{font:600 15px/1.2 var(--display);color:#efe9ff;text-decoration:none;white-space:nowrap}
.sections a:hover{color:var(--lime)}
.sections-m{display:none}
.tools{display:flex;align-items:center;gap:16px;margin-left:auto;flex:none}
.search svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;display:block}
.login{font:700 14px/1 var(--display);text-decoration:none;color:var(--night);background:var(--lime);padding:10px 14px;clip-path:var(--px)}

/* ---------- Layout ---------- */
.page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;padding-top:34px;padding-bottom:40px}
.story{min-width:0;max-width:780px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font:700 13px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.crumbs a{color:var(--pink);text-decoration:none}
.chip{font:700 12px/1 var(--display);letter-spacing:.04em;text-transform:none;background:var(--grape-soft);color:var(--grape);padding:6px 9px;clip-path:var(--px)}
.chip-2{background:#fdf2f8;color:#be185d}
.story-head h1{font:800 clamp(32px,4.4vw,54px)/1.04 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 14px;text-wrap:balance}
.dek{font:400 20px/1.45 var(--sans);color:#463e55;margin:0 0 20px}
.byline{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:2px solid var(--ink);margin-bottom:26px}
.px-av{width:40px;height:40px;display:grid;place-items:center;background:var(--grape);color:#fff;font:800 15px/1 var(--display);clip-path:var(--px);flex:none}
.who{display:flex;flex-direction:column;gap:3px;min-width:0}
.by{font:700 15px/1.2 var(--display);color:var(--ink)}
.when{font-size:13.5px;color:var(--muted)}
.score-chip{margin-left:auto;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.sc-word{font:800 15px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;max-width:90px}

/* ---------- Score tiles ---------- */
.tile{display:inline-flex;align-items:baseline;justify-content:center;width:62px;height:62px;padding-top:12px;clip-path:var(--px);font-family:var(--display);color:var(--ink);flex:none}
.tile-n{font:900 28px/1 var(--display)}
.tile-of{font:700 11px/1 var(--display);margin-left:1px;opacity:.75}
.tile-great{background:var(--lime)}
.tile-good{background:var(--yellow)}
.tile-meh{background:var(--orange)}
.tile-bad{background:var(--pink);color:#fff}
.tile-lg{width:96px;height:96px;padding-top:20px}
.tile-lg .tile-n{font-size:46px}
.tile-lg .tile-of{font-size:14px}

/* ---------- Hero and screenshots ---------- */
.shot img,.body figure img{display:block;width:100%;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--grape);background:#0f0b18}
.hero{margin:0 0 30px}
.hero img{max-height:70vh;object-fit:cover}
.hero figcaption,.body figcaption{font:400 14px/1.45 var(--sans);color:var(--muted);margin-top:14px}
.body figcaption::before{content:"Screenshot";display:inline-block;font:800 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--pink);padding:4px 6px;margin-right:8px;vertical-align:1px}
.credit{font:600 12px/1 var(--display);color:var(--grape)}
.credit a{text-decoration:none}

/* ---------- Body ---------- */
.body{font:400 18px/1.68 var(--sans)}
.body>*{margin:0 0 1.05em}
.body a{color:var(--grape);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--lime);text-underline-offset:3px}
.body a:hover{color:var(--pink)}
.body h2{font:800 28px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin:1.6em 0 .5em}
.body h2::before{content:"";display:inline-block;width:12px;height:12px;background:var(--lime);margin-right:10px;vertical-align:4px}
.body h3{font:800 21px/1.25 var(--display);color:var(--ink);margin:1.4em 0 .4em}
.body h4{font:800 13px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.body strong,.body b{font-weight:700;color:var(--ink)}
.body ul,.body ol{padding-left:1.3em}
.body li{margin:.35em 0}
.body ul li::marker{color:var(--pink)}
.body ol li::marker{font-family:var(--display);font-weight:800;color:var(--grape)}
.body figure{margin:2em 0}
.body figure img{width:auto;max-width:100%;max-height:560px;margin:0 auto}
.body figure.pixel img,.body img.pixel{image-rendering:pixelated;min-width:min(100%,480px)}
.body blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:4px solid var(--grape);color:#352d43}
.body blockquote p{margin:0 0 .5em}
.body blockquote cite,.body blockquote footer{display:block;font:700 13px/1.4 var(--display);font-style:normal;color:var(--muted)}
.body .pull,.body .pullquote,.body .pull-quote,.body blockquote.pull,.body aside.pull,.body blockquote.dialog,.body .dialog{position:relative;margin:2em 0 1.6em;padding:22px 24px 26px;background:#140f22;color:#fff;border:4px double #fff;box-shadow:0 0 0 4px #140f22,8px 8px 0 4px var(--pink);font:600 21px/1.45 var(--display)}
.body .pull p,.body .pullquote p,.body blockquote.dialog p,.body .dialog p{margin:0}
.body .pull::after,.body .pullquote::after,.body blockquote.dialog::after,.body .dialog::after{content:"\25BC";position:absolute;right:14px;bottom:6px;font-size:13px;color:var(--lime);animation:blink 1s steps(1) infinite}
.body .pull cite,.body .pullquote cite,.body blockquote.dialog cite,.body .dialog cite{position:absolute;left:14px;top:-17px;font:800 13px/1 var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--night);background:var(--lime);padding:6px 9px}
.body aside,.body .sidebar,.body .box{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px 18px;font-size:16px;line-height:1.55}
.body aside>:last-child,.body .sidebar>:last-child{margin-bottom:0}
.body aside h3,.body aside h4,.body .sidebar h3{margin:0 0 .5em;font:800 13px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.body aside.scorecard{padding:0;background:var(--card);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--grape);max-width:460px}
.body aside.scorecard table{background:none;font:600 15.5px/1.3 var(--display)}
.body aside.scorecard th{background:var(--night);color:#fff;font:800 13px/1.2 var(--display);letter-spacing:.06em;padding:10px 14px}
.body aside.scorecard th:last-child,.body aside.scorecard td:last-child{text-align:right}
.body aside.scorecard td{padding:9px 14px;border-bottom:1px solid var(--line)}
.body aside.scorecard tr:last-child td{background:var(--lime);color:var(--night);font:900 20px/1.1 var(--display);border-bottom:0}
.body aside.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0;background:none;border:0;box-shadow:none}
.body .pros,.body .cons,.body .buffs,.body .nerfs{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 16px;font-size:15.5px;line-height:1.45}
.body .pros h3,.body .cons h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.body .pros h3::before,.body .cons h3::before{content:"+";display:grid;place-items:center;width:22px;height:22px;font:900 18px/1 var(--display);background:var(--lime);color:var(--night)}
.body .cons h3::before{content:"";background:var(--pink) linear-gradient(#fff,#fff) center/12px 4px no-repeat}
.body .pros ul,.body .cons ul{list-style:none;margin:0;padding:0}
.body .pros li,.body .cons li{position:relative;margin:0;padding:6px 0 6px 18px;border-top:1px solid var(--line)}
.body .pros li::before,.body .cons li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--lime)}
.body .cons li::before{background:var(--pink)}
.body aside.update{border-color:var(--grape);box-shadow:5px 5px 0 var(--grape)}
.body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4;background:var(--card)}
.body th{font:800 12px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:left;background:var(--grape-soft);color:var(--grape);padding:8px 10px}
.body td{border-bottom:1px solid var(--line);padding:8px 10px}
.body caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--muted);padding-top:8px}
.body code,.body kbd{font:.85em ui-monospace,Menlo,Consolas,monospace;background:var(--grape-soft);padding:.1em .35em}
.body kbd{border:1px solid #c4b5fd;border-bottom-width:3px}
.body pre{font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#140f22;color:#e9e3ff;padding:14px 16px;overflow-x:auto}
.body sup{font-size:.66em;line-height:0}
.body mark{background:var(--lime);padding:0 .15em}
.body .footnotes,.body ol.notes{font-size:15px;border-top:2px solid var(--line);padding-top:1em}
.body video,.body audio{width:100%}
@keyframes blink{50%{opacity:0}}

/* ---------- Verdict ---------- */
.verdict{margin:40px 0 0;background:var(--card);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--grape);padding:22px}
.vd-head{display:flex;gap:18px;align-items:center}
.vd-head h2{margin:0 0 6px;display:flex;flex-direction:column;gap:4px}
.vd-label{font:800 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.vd-word{font:900 34px/1 var(--display);color:var(--ink);letter-spacing:-.01em}
.vd-text{margin:0;font-size:16.5px;line-height:1.5}
.bn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.bn h3{display:flex;align-items:center;gap:8px;font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.bn h3::before{content:"+";display:grid;place-items:center;width:22px;height:22px;font:900 18px/1 var(--display);background:var(--lime);color:var(--night);clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.nerfs h3::before{content:"";background:var(--pink) linear-gradient(#fff,#fff) center/12px 4px no-repeat}
.bn ul{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.45}
.bn li{position:relative;padding:6px 0 6px 18px;border-top:1px solid var(--line)}
.bn li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--lime)}
.nerfs li::before{background:var(--pink)}
.bars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;margin:20px 0 0;padding-top:16px;border-top:2px solid var(--ink)}
.bars dt{font:700 14px/1 var(--display)}
.bars dd{margin:0;display:flex;align-items:center;gap:10px}
.bar{flex:1;height:12px;background:var(--grape-soft);display:block}
.bar span{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--grape) 0 10px,#7c3aed 10px 12px)}
.bv{font:800 14px/1 var(--display);width:28px;text-align:right}
.bv-text{width:auto;text-align:left;font-weight:600}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font:600 14px/1.3 var(--display)}
.facts span{display:block;font:700 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0}
.tags a{font:700 13.5px/1 var(--display);text-decoration:none;color:var(--grape);background:var(--grape-soft);padding:8px 11px;clip-path:var(--px)}
.tags a:hover{background:var(--lime);color:var(--night)}

/* ---------- Newsletter ---------- */
.newsletter{margin-top:40px;padding:24px;background:var(--night);color:#e9e3ff;clip-path:var(--px)}
.newsletter h2{font:900 26px/1.1 var(--display);margin:0 0 6px;color:var(--lime)}
.newsletter p{margin:0 0 14px;font-size:16px}
.nl-form{display:flex;gap:8px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:180px;font:400 15px/1 var(--sans);padding:12px 14px;border:2px solid #6d28d9;background:#1d0b45;color:#fff}
.nl-form button{font:800 15px/1 var(--display);padding:12px 18px;border:0;background:var(--pink);color:#fff;cursor:pointer;clip-path:var(--px)}
.newsletter .fine{font-size:12.5px;color:#b9a8e8;margin:12px 0 0}

/* ---------- Rail ---------- */
.rail{min-width:0;display:flex;flex-direction:column;gap:26px}
.box{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px 18px}
.box-title{font:900 16px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:0 0 12px;padding-bottom:10px;border-bottom:3px solid var(--pink)}
.more ul,.trending ol{list-style:none;margin:0;padding:0}
.more li,.trending li{padding:9px 0;border-top:1px solid var(--line)}
.more li:first-child,.trending li:first-child{border-top:0;padding-top:0}
.more a,.trending a{font:700 16px/1.3 var(--display);text-decoration:none;color:var(--ink)}
.more a:hover,.trending a:hover{color:var(--grape)}
.more .d{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.trending ol{counter-reset:t}
.trending li{counter-increment:t;display:grid;grid-template-columns:30px 1fr}
.trending li::before{content:counter(t);font:900 22px/1 var(--display);color:var(--pink)}
.sg{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.sg li{display:flex;align-items:center;gap:10px;font:600 14.5px/1.2 var(--display)}
.sg-n{display:grid;place-items:center;width:28px;height:28px;font:900 14px/1 var(--display);clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.sg-great .sg-n{background:var(--lime)}
.sg-good .sg-n{background:var(--yellow)}
.sg-meh .sg-n{background:var(--orange)}
.sg-bad .sg-n{background:var(--pink);color:#fff}

/* ---------- Front page ---------- */
.front-title{font:900 34px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.front-title::before{content:"";width:16px;height:16px;background:var(--pink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.rcard{background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column}
.rcard-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.rc-img{position:relative;display:block;background:#140f22;line-height:0}
.rc-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.rcard-lead .rc-img img{height:100%;aspect-ratio:auto;min-height:280px}
.rc-noimg{display:block;aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#1d0b45 0 12px,#2e1065 12px 24px)}
.tile-card{position:absolute;right:12px;bottom:12px}
.rc-copy{padding:16px 18px 18px}
.rc-k{font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.rcard h2{font:800 22px/1.15 var(--display);margin:8px 0 8px;color:var(--ink)}
.rcard-lead h2{font-size:32px}
.rcard h2 a{text-decoration:none}
.rcard h2 a:hover{color:var(--grape)}
.rcard .dek{font-size:15.5px;margin:0 0 10px}
.meta{font-size:13px;color:var(--muted);margin:0}
.meta b{color:var(--ink)}

/* ---------- Footer ---------- */
.foot{background:var(--night);color:#cdbff5;padding:30px 0 26px;border-top:4px solid var(--lime)}
.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:16px;border-bottom:1px solid #4c1d95;margin-bottom:14px}
.foot-top img{width:160px;height:auto;image-rendering:pixelated}
.foot-top nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-top a{font:600 14px/1.3 var(--display);color:#efe9ff;text-decoration:none}
.foot-top a:hover{color:var(--lime)}
.note{margin:0 0 8px;font-size:14px}
.honest{margin:0 0 8px;font-size:14px;color:#fff}
.honest a{color:var(--lime)}
.copy{margin:0;font-size:12.5px;color:#a594d8}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .sections{display:none}
  .sections-m{display:flex;gap:20px;overflow-x:auto;padding:0 24px 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .sections-m::-webkit-scrollbar{display:none}
  .page{grid-template-columns:1fr}
  .story{max-width:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .sections-m{padding:0 16px 12px}
  .mast-row{height:64px;gap:12px}
  .logo img{width:150px}
  .story-head h1{font-size:32px}
  .dek{font-size:18px}
  .byline{flex-wrap:wrap}
  .score-chip{margin-left:0;flex-basis:100%}
  .hero{margin-right:6px}
  .body{font-size:17.5px}
  .body .pull,.body .pullquote,.body blockquote.pull,.body blockquote.dialog{font-size:18px;padding:20px 18px 24px}
  .bn,.body aside.pros-cons{grid-template-columns:1fr}
  .vd-word{font-size:28px}
  .tile-lg{width:80px;height:80px;padding-top:16px}
  .tile-lg .tile-n{font-size:38px}
  .grid{grid-template-columns:1fr}
  .rcard-lead{grid-template-columns:1fr}
  .rcard-lead .rc-img img{min-height:0;aspect-ratio:16/10}
  .rcard-lead h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.body .pull::after,.body blockquote.dialog::after{animation:none}}
@media print{.masthead,.rail,.newsletter,.foot-top nav{display:none}.page{display:block}}