@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Space+Grotesk:wght@400;500;700&family=Press+Start+2P&display=swap');*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button{font:inherit;cursor:pointer}:focus-visible{outline:3px solid #fff;outline-offset:4px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}body{background:#0a1010;color:#d4ffea;font-family:'DM Sans',sans-serif}.wrap{width:min(1100px,calc(100% - 40px));margin:auto}.screen{position:relative;isolation:isolate;min-height:100vh;border-left:1px solid #37df9060;border-right:1px solid #37df9060;background:radial-gradient(circle at 50% 10%,#153d33,#09110f 63%);padding:35px clamp(20px,5vw,65px) 75px;overflow:hidden}.screen:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 4px 5px);opacity:.45}.hud{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid #44db93;padding:0 0 19px;color:#5cf0a9;font:10px 'Press Start 2P';line-height:1.8}.blink{animation:blink 1.4s steps(2) infinite}@keyframes blink{50%{opacity:.25}}.hero{text-align:center;padding:100px 0 86px}.micro{font:11px 'Press Start 2P';color:#66f5b3;line-height:2}.hero h1{font:clamp(38px,7vw,88px)/1.25 'Press Start 2P';letter-spacing:-.07em;margin:27px 0;color:#f5d66f;text-shadow:5px 5px #ad5c51,0 0 32px #f5d66f88}.hero p{font-size:19px;color:#a7d9bf}.pixel-btn{display:inline-block;margin-top:27px;background:#f4d670;color:#1b291e;padding:17px 24px;border:0;font:11px 'Press Start 2P';box-shadow:7px 7px #537260;text-decoration:none;transition:transform .2s,box-shadow .2s}.pixel-btn:hover{transform:translate(4px,4px);box-shadow:3px 3px #537260}.divider{font:10px 'Press Start 2P';color:#58edaa;border-bottom:1px dashed #478a6e;padding-bottom:17px;margin:35px 0 22px;line-height:1.7}.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.score{padding:23px 15px;border:2px solid #398869;background:#10251f;text-align:center}.score strong{display:block;font:clamp(30px,5vw,60px) 'Press Start 2P';color:#f5d66f;margin:13px 0}.score span{font-size:12px;color:#9fd7ba}.quests{display:grid;grid-template-columns:1fr 1fr;gap:25px}.quest{border:2px solid #398869;background:#10251f;padding:30px;min-height:330px}.quest h2{font:15px/1.6 'Press Start 2P';color:#f5d66f}.quest .giant{font:clamp(45px,7vw,80px) 'Press Start 2P';margin:32px 0 10px;color:#7ef6b5}.quest p{color:#a5d5bb;line-height:1.6}.rank{display:flex;gap:20px;padding:18px 0;border-bottom:1px dashed #41836a;align-items:center}.rank b{color:#f5d66f;font:16px 'Press Start 2P'}.rank span{flex:1}.rank em{font-style:normal;color:#78e8ad}.foot{color:#8db69e;font-size:12px;line-height:1.7;margin-top:65px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .65s,transform .65s}.reveal.seen{opacity:1;transform:none}@media(max-width:750px){.scoreboard,.quests{grid-template-columns:repeat(2,1fr)}.hud{font-size:8px}.score strong{font-size:30px}}@media(max-width:520px){.quests{grid-template-columns:1fr}.scoreboard{gap:7px}.score{padding:15px 8px}.score strong{font-size:25px}.score span{font-size:11px}.hero{padding:70px 0}.hero h1{font-size:36px}.rank{font-size:13px;gap:10px}.rank b{font-size:11px}}
/* Level 03: cover timeline in the arcade's pixel palette. */
.level4{margin-top:82px}.arcade-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 35px}.arcade-tab{border:2px solid #398869;background:#10251f;color:#a7dcbb;padding:12px 15px;font:9px/1.5 'Press Start 2P';text-align:center}.arcade-tab.active{background:#f5d66f;border-color:#f5d66f;color:#19291e;box-shadow:4px 4px #54715a}.arcade-view[hidden]{display:none!important}.arcade-timeline{position:relative;padding:25px 0 28px}.arcade-timeline:before{content:'';position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);background:repeating-linear-gradient(to bottom,#71f5b2 0 5px,transparent 5px 14px)}.arcade-month{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;min-height:390px;padding-top:45px}.arcade-month:last-child{min-height:330px}.arcade-month.left .arcade-covers{grid-column:1;grid-row:1;justify-content:flex-end}.arcade-month.right .arcade-covers{grid-column:2;grid-row:1;justify-content:flex-start}.arcade-month h3{position:absolute;top:2px;left:50%;margin:0;font:12px/1.7 'Press Start 2P';color:#f5d66f;white-space:nowrap;transform:translateX(20px);border-bottom:2px solid #71f5b2;padding-bottom:5px}.arcade-month.left h3{transform:translateX(calc(-100% - 20px))}.arcade-month h3:before{content:'';position:absolute;top:11px;left:-20px;width:20px;height:2px;background:#71f5b2}.arcade-month.left h3:before{left:auto;right:-20px}.arcade-covers{display:flex;gap:10px;align-items:flex-start}.arcade-card{position:relative;width:min(32%,165px);min-width:0;transition:transform .2s}.arcade-card:hover{transform:translateY(-7px)}.arcade-cover{position:relative;aspect-ratio:460/690;background:var(--cover-color);border:2px solid #6bba8f;overflow:hidden;box-shadow:6px 6px 0 #0008;display:flex;align-items:end}.arcade-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.arcade-cover img[hidden]{display:none}.arcade-cover span{padding:11px;position:relative;font:11px/1.55 'Press Start 2P';overflow-wrap:anywhere;text-shadow:1px 2px #000}.arcade-cover img:not([hidden])+span{display:none}.arcade-card small{display:block;font-size:11px;line-height:1.4;color:#b1ddc5;text-align:center;margin:20px 0 0}.arcade-score{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#14221a;background:#f5d66f;padding:5px 7px;font:9px 'Press Start 2P';white-space:nowrap;box-shadow:3px 3px #0009}.arcade-first{position:absolute;top:-6px;left:4px;right:4px;text-align:center;background:#48aa76;color:#0e2116;padding:6px 2px;font:7px/1.3 'Press Start 2P';z-index:2}.arcade-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 17px;padding:25px 0 35px}.arcade-grid .arcade-card{width:100%}.arcade-grid-heading{grid-column:1/-1;color:#f5d66f;font:11px 'Press Start 2P';padding:22px 0 9px;border-bottom:1px dashed #479371}.level4-note{font-size:12px;color:#8db69e;line-height:1.7;margin:30px 0 0}@media(max-width:800px){.arcade-month{gap:32px;min-height:300px}.arcade-covers{gap:5px}.arcade-cover span{font-size:8px}.arcade-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.arcade-timeline:before{left:8px}.arcade-month{display:block;min-height:0!important;padding:12px 0 48px 34px}.arcade-month h3,.arcade-month.left h3{position:relative;top:auto;left:auto;display:inline-block;transform:none;font-size:10px}.arcade-month h3:before,.arcade-month.left h3:before{left:-20px;right:auto}.arcade-covers{margin-top:22px;justify-content:flex-start!important}.arcade-card{width:calc((100% - 10px)/3)}.arcade-cover span{font-size:7px}.arcade-card small{font-size:10px}.arcade-score{font-size:7px;padding:4px}.arcade-first{font-size:6px}.arcade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.arcade-tab{font-size:8px}}



/* The HUD remains part of the cover, and the page itself snaps between screens. */
html{scroll-snap-type:y mandatory}body{overflow:auto}.screen{height:auto;min-height:100vh;overflow:hidden;padding:35px clamp(20px,5vw,65px) 75px;background:radial-gradient(circle at 50% 10%,#153d33,#09110f 63%)}.screen:after{position:absolute}.hud{position:static;z-index:auto;padding:0 0 19px;background:none;backdrop-filter:none}.cover-screen,.level-pair,.level4{scroll-snap-align:start;scroll-snap-stop:always}.cover-screen{min-height:calc(100svh - 35px);display:flex;flex-direction:column}.cover-screen .hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:65px 0 85px}.level-pair{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:45px 0}.level-pair .arcade-level{min-height:0;padding:0;border:0;margin:0;display:block;scroll-snap-align:none}.level-pair .divider{margin:0 0 22px}.level-pair .scoreboard,.level-pair .quests{margin:0}.score span:first-child{line-height:1.5;min-height:35px;display:flex;align-items:center;justify-content:center}.pair-next{font:9px/1.6 'Press Start 2P';color:#7af2ad;text-align:center;animation:levelPulse 2.4s ease-in-out infinite}@keyframes levelPulse{50%{opacity:.35;transform:translateY(5px)}}.level4{min-height:100svh;padding:45px 0 75px;margin:0;border-top:2px solid #398869}.level4 .divider{margin:0 0 23px}.arcade-first{display:none}
/* One directional gleam triggered on first pointer entry into a cover. */
.arcade-cover:after{content:'';position:absolute;z-index:2;top:-12%;bottom:-12%;left:0;width:80%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 0%,#fff0 20%,#fff9 48%,#fff3 55%,transparent 80%);transform:translateX(var(--shine-from,-140%)) skewX(-20deg)}.arcade-cover.shine:after{animation:coverShine .7s ease-out forwards}@keyframes coverShine{0%{opacity:0;transform:translateX(var(--shine-from)) skewX(-20deg)}18%{opacity:1}75%{opacity:.85}100%{opacity:0;transform:translateX(var(--shine-to)) skewX(-20deg)}}

@media(max-width:750px){.level-pair{gap:18px;padding:30px 0}.level-pair .divider{margin-bottom:15px}.score span:first-child{font-size:10px}.pair-next{font-size:7px}}@media(max-height:700px){.level-pair .quest{min-height:240px;padding:18px}.level-pair .quest .giant{font-size:clamp(39px,6vw,65px);margin:14px 0}.level-pair .rank{padding:11px 0}.level-pair .score{padding:15px}.level-pair{gap:15px}}@media(max-width:600px){.level-pair .quest{min-height:210px}.level-pair .quest h2{font-size:11px}.level-pair .score strong{font-size:30px}}@media(prefers-reduced-motion:reduce){.pair-next{animation:none}}

/* CRT glass: curved viewport edges and a restrained barrel-glass vignette. */
body{background:#000}.screen{border-radius:26px / 18px;box-shadow:0 0 0 2px #183e2e,inset 0 0 65px #0009,0 0 55px #0b2616;}
.screen:before{content:'';position:fixed;inset:0;z-index:4;pointer-events:none;border-radius:26px / 18px;background:radial-gradient(ellipse 76% 72% at 50% 48%,transparent 46%,#0003 75%,#000a 100%),linear-gradient(110deg,#ffffff08 0%,transparent 15% 83%,#ffffff06 100%);box-shadow:inset 0 0 70px #0007}
/* Lift the hovered cover above the screen-wide glass layers. */
.arcade-card:hover{z-index:7;filter:brightness(1.18) saturate(1.12)}
.arcade-card:hover .arcade-cover{box-shadow:6px 6px 0 #0008,0 0 0 2px #a5ffbf,0 0 30px #68eda365}
@media(max-width:650px){.screen,.screen:before{border-radius:14px / 11px}}
@media(prefers-reduced-motion:reduce){.arcade-card:hover{filter:none}}


/* Black surround, two radar profiles, and exact timeline junctions. */
.screen{border-left:0;border-right:0;box-shadow:inset 0 0 65px #0009,0 0 55px #000}
.profile-level{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;padding:48px 0 65px;display:flex;flex-direction:column;justify-content:center;border-top:2px solid #398869}.profile-level .divider{margin:0 0 22px}.level-foot{font-size:11px;color:#8db69e;line-height:1.65;margin:25px 0 0}.radar-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}.radar-panel{border:2px solid #398869;background:#10251f;padding:25px 17px 16px;text-align:center;min-width:0}.radar-panel h2{font:14px 'Press Start 2P';color:#f5d66f;margin:0 0 12px}.radar{position:relative;width:100%;height:350px}.radar svg{display:block;width:100%;height:100%;overflow:visible}.radar .ring{fill:none;stroke:#56896c;stroke-width:1}.radar .axis{stroke:#56896c;stroke-width:1}.radar .shape{fill:#7bf3b58c;stroke:#adffca;stroke-width:2}.radar text{fill:#c6f0d2;font:10px 'DM Sans';font-weight:700}.radar:after{content:'';position:absolute;left:50%;top:48%;width:min(58%,230px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg 305deg,#87facb05 325deg,#87facb21 358deg,transparent 360deg);opacity:.52;animation:radarSweep 14s linear infinite}@keyframes radarSweep{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.arcade-month:before{content:'';position:absolute;z-index:2;left:50%;top:13px;transform:translate(-50%,-50%);width:10px;height:10px;background:#71f5b2;box-shadow:0 0 0 3px #10251f}
@media(max-width:800px){.radar-pair{grid-template-columns:1fr}.radar{height:315px}.profile-level{padding:38px 0 55px}}@media(max-width:600px){.arcade-month:before{left:8px;top:23px}}@media(max-width:520px){.radar-panel{padding:20px 5px 10px}.radar{height:265px}}@media(prefers-reduced-motion:reduce){.radar:after{animation:none;opacity:.15}}

/* Confine Quest Log copy to its own card at every viewport size. */
.quests{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;min-width:0}.quest{min-width:0;max-width:100%;overflow:hidden;container-type:inline-size}.quest h2{display:flex;align-items:flex-start;gap:12px;font-size:clamp(9px,2.7cqw,15px);line-height:1.6;min-width:0}.quest h2 span{min-width:0;overflow-wrap:anywhere}.pixel-star{display:block;width:17px;height:17px;flex:none;color:#f5d66f;shape-rendering:crispEdges;margin-top:2px}.quest .giant{font-size:clamp(23px,8cqw,80px);line-height:1.3;max-width:100%;overflow-wrap:anywhere}.rank{min-width:0;gap:12px}.rank b,.rank em{flex:none}.rank span{min-width:0;overflow-wrap:anywhere}
@media(max-width:750px){.quests{grid-template-columns:minmax(0,1fr)}.quest .giant{font-size:clamp(24px,8cqw,80px)}}

/* Live review year picker and responsive long names. */
.review-footer{scroll-snap-align:start;text-align:center;padding:60px 0 25px;border-top:2px solid #398869}.review-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0}.review-footer a{display:inline-block;text-decoration:none}.review-year{font:11px 'Press Start 2P';padding:13px 16px;color:#a7dcbb;background:#10251f;border:2px solid #398869}.review-year.active{color:#19291e;background:#f5d66f;border-color:#f5d66f}.review-home{font:9px 'Press Start 2P';color:#72eaae;line-height:2}.review-year:hover,.review-home:hover{filter:brightness(1.3)}.arcade-month h3{white-space:normal;max-width:calc(50% - 24px);overflow-wrap:anywhere}.arcade-month h3:before{top:13px}.arcade-month .arcade-covers{min-width:0;max-width:100%}.arcade-card{flex:0 1 165px}.arcade-card small{overflow-wrap:anywhere}.radar text{font-size:9px}.review-message{font:12px/2 'Press Start 2P';color:#f5d66f;padding:35px 0}.review-year:focus-visible,.review-home:focus-visible{outline:3px solid white;outline-offset:4px}@media(max-width:600px){.arcade-month h3{max-width:100%}.arcade-card{flex:0 1 calc((100% - 10px)/3)}.review-footer{padding:45px 0 20px}}

/* Keep full-size covers. Every month grows vertically as more games arrive. */
.arcade-month{min-height:390px;padding-bottom:64px}
.arcade-covers{display:grid;grid-template-columns:repeat(auto-fit,165px);align-content:start;align-items:start;gap:38px 12px;width:100%}
.arcade-month.left .arcade-covers{justify-content:end}
.arcade-month.right .arcade-covers{justify-content:start}
.arcade-card{width:165px;max-width:100%;flex:none}
.arcade-score{position:static;display:table;left:auto;bottom:auto;transform:none;margin:10px auto 0}
.arcade-card small{margin:11px 0 0}
.arcade-grid .arcade-card{width:min(100%,165px);justify-self:center}
@media(max-width:600px){
  .arcade-month{min-height:0;padding-bottom:48px}
  .arcade-covers{grid-template-columns:minmax(0,165px);gap:30px;margin-top:22px;justify-content:start}
  .arcade-card{width:min(100%,165px)}
}

/* Compact cover-only cards, with scores attached to the bottom edge. */
@media(min-width:1350px){.screen.wrap{width:min(1320px,calc(100% - 40px))}}
.arcade-month,.arcade-month:last-child{min-height:0;padding-bottom:22px}
.arcade-covers{gap:22px 12px}
.arcade-score{position:relative;z-index:3;margin:-12px auto 0;padding:6px 9px;line-height:1}
@media(max-width:600px){.arcade-month,.arcade-month:last-child{padding-bottom:32px}.arcade-covers{gap:26px}}