/* play.vrg.li — VRG brand: near-black, yellow, plain sans, mono labels. */
:root{--bg:#0f1115;--panel:#16191f;--line:#23262d;--ink:#e8eaed;--mute:#8b9098;--yl:#ffd400;--sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:48px 24px 80px}
.kicker{font:600 12px/1 var(--mono);letter-spacing:.18em;color:var(--yl);margin:0 0 14px}
h1{font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;font-weight:600}
.lead{color:var(--mute);font-size:18px;max-width:560px;margin:0 0 40px}
.mute{color:var(--mute)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:56px}
.hero img{width:100%;max-width:520px;justify-self:center;filter:drop-shadow(0 24px 44px rgba(0,0,0,.65))}
.games{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:640px){.games{grid-template-columns:1fr}}
.game{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .15s,border-color .15s}
.game:hover{transform:translateY(-3px);border-color:#3b4049}
.game img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b0c10;border-bottom:1px solid var(--line)}
.game .t{padding:16px 18px 18px}
.game .n{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--mute);margin-bottom:8px}
.game b{display:block;font-size:22px;letter-spacing:-.01em;margin-bottom:6px}
.game span{color:var(--mute);font-size:14px;display:block}
.game .go{display:inline-block;margin:0;text-decoration:none;background:var(--yl);color:#111;font:700 12px/1 var(--mono);letter-spacing:.12em;padding:10px 14px;border-radius:9px}
footer{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--mute);font:500 12px/1 var(--mono);letter-spacing:.08em;border-top:1px solid var(--line);margin-top:64px;padding-top:22px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
table{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 8px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}th{font:600 11px/1 var(--mono);letter-spacing:.12em;color:var(--mute)}
section{margin:34px 0}h2{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
.prose p{max-width:680px;color:#c4c8ce}.prose h2{margin-top:30px}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero img{max-width:260px;order:-1}}
.hero img{cursor:pointer;transform-origin:50% 60%}
@keyframes jerk{0%{transform:none}12%{transform:rotate(-7deg) scale(1.07) translateY(-8px)}30%{transform:rotate(6deg) scale(1.05) translateY(-4px)}48%{transform:rotate(-4deg) scale(1.03)}66%{transform:rotate(2deg) scale(1.01)}100%{transform:none}}
.hero img.jerk{animation:jerk .65s cubic-bezier(.3,1.4,.5,1)}
.game .fork,.fork{display:inline-block;margin:0;background:transparent;border:1px solid var(--yl);color:var(--yl);font:700 12px/1 var(--mono);letter-spacing:.12em;padding:9px 13px;border-radius:9px;text-decoration:none;cursor:pointer}
a.game .fork:hover,.fork:hover{background:var(--yl);color:#111}
.game .cover{display:block}.game .title{text-decoration:none}.game .row{display:flex;gap:10px;align-items:center;margin-top:14px;justify-content:space-between}.game .fork{margin-left:auto;display:inline-flex;align-items:center;gap:7px}.game .t.top{border-bottom:1px solid var(--line)}.game .cover img{border-bottom:0}

#scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:40}
.sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 28px));z-index:41;background:#111419;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.sheet h2{margin:8px 0 10px;font:800 22px/1.15 var(--sans);letter-spacing:-.01em}.sheet p{color:#c4c8ce;font-size:14px}.sheet p a{color:var(--yl)}
.sheet .x{position:absolute;right:10px;top:8px;font-size:22px;color:var(--mute);padding:4px 8px;background:none;border:0;cursor:pointer}
.sheet .ghost{display:block;text-align:center;margin-top:10px;width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font:700 12px/1 var(--mono);letter-spacing:.12em;color:var(--mute);text-decoration:none;background:none;cursor:pointer}
.providers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px}
.providers a,.providers span{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;font:700 12px/1 var(--mono);letter-spacing:.1em;text-decoration:none;border:1px solid var(--yl);color:#111;background:var(--yl)}
.providers span{background:transparent;color:var(--mute);border-color:var(--line)}
.vrg-act .btn.acct{border-color:var(--yl);color:var(--yl)}.vrg-act .btn img{width:18px;height:18px;border-radius:50%}
/* compact home: hero in one short row, posters fully visible without scrolling at 1080p */
body.home .wrap{padding:18px 24px 40px}
body.home .hero{grid-template-columns:1fr auto;gap:24px;margin-bottom:18px;align-items:center}
body.home .hero h1{font-size:clamp(24px,2.4vw,34px);margin:0 0 4px}
body.home .hero h1 br{display:none}
body.home .hero .kicker{margin-bottom:8px}
body.home .hero .lead{font-size:14px;margin:0;max-width:640px}
body.home .hero img{max-width:220px;justify-self:end}
body.home .game .t.top{padding:12px 16px 12px}
body.home .game b{font-size:18px;margin-bottom:2px}
body.home .game span{font-size:13px}
body.home .game .row{margin-top:10px}
body.home .game .go,body.home .game .fork{padding:8px 12px;font-size:11px}
body.home .game .cover img{aspect-ratio:auto;height:min(46vh,480px);object-fit:contain;background:#0b0c10}
body.home footer{margin-top:22px;padding-top:14px}
@media(max-width:760px){body.home .hero{grid-template-columns:1fr}body.home .hero img{max-width:160px;justify-self:start;order:-1}body.home .game .cover img{height:auto;aspect-ratio:1/1;object-fit:cover}}
/* tiles sized to the poster: square art fills the tile width, both tiles fit the viewport height */
body.home .games{--tile:min(50vh,44vw,600px);grid-template-columns:repeat(2,var(--tile));justify-content:center;gap:24px}
body.home .game .cover img{height:auto;aspect-ratio:1/1;object-fit:cover}
body.home .game .t.top span{display:block;min-height:2.7em}
body.home .game .t.top .row{margin-top:8px}
@media(max-width:760px){body.home .games{--tile:1fr;grid-template-columns:1fr}body.home .game .t.top span{min-height:0}}

/* wide tiles: full width, wide posters, no bands */
body.home .wrap{max-width:1480px}
body.home .games{grid-template-columns:1fr 1fr;justify-content:stretch;gap:24px}
body.home .game .cover img{aspect-ratio:16/10;object-fit:cover;height:auto;max-height:calc(100vh - 470px)}
@media(max-width:760px){body.home .games{grid-template-columns:1fr}body.home .game .cover img{max-height:none}}
/* covers designed at 16:9 — shown whole, never cropped */
body.home .wrap{padding-top:10px}
body.home .hero{margin-bottom:12px}
body.home .game .cover img{aspect-ratio:16/9;object-fit:cover;height:auto;max-height:none}
body.home .game .t.top{padding:10px 16px 10px}
body.home .game .t.top span{min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:640px){.wrap table{display:block;overflow-x:auto;white-space:nowrap}.wrap{padding:24px 14px 60px}h1{font-size:30px}}