:root{font-family:Inter,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:#16233e;background:#f7f9ff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse 900px 380px at 50% -90px,#e6eeff 0,transparent 85%),#f7f9ff}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #2f68dd;outline-offset:4px}
.page-shell{max-width:1392px;min-height:100dvh;margin:auto;padding:0 clamp(18px,4vw,55px);display:flex;flex-direction:column}
.site-top{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #e5eaf4}
.site-brand{display:flex;align-items:center;flex-shrink:0}
.site-brand img{display:block;max-width:min(220px,32vw);height:auto}
.site-top h1{font-size:clamp(28px,4.2vw,56px);line-height:1.08;letter-spacing:-.055em;margin:20px 0;font-weight:850}
.site-top h1 span{color:#356be3}
#main-content{flex:1;padding:28px 0 44px}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.game-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-width:0;min-height:0;aspect-ratio:1672 / 941;padding:26px;border:1px solid #d9e0ed;border-radius:23px;background:#e8eef8;box-shadow:0 8px 30px #1f356708;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.game-card::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--game-image);background-position:center;background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}
.game-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(5,13,31,.02) 10%,rgba(5,13,31,.26) 44%,rgba(5,13,31,.86) 100%)}
.game-card h2{color:#fff;font-size:clamp(23px,2.3vw,32px);line-height:1.15;letter-spacing:-.035em;font-weight:850;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.55);overflow-wrap:anywhere}
.game-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px #1f356720;border-color:#afbdd6}
.game-card:hover::before{transform:scale(1.05)}
@media(max-width:1000px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.site-top{min-height:75px;gap:12px}.site-top h1{font-size:clamp(20px,5vw,34px)}#main-content{padding-top:20px}.game-grid{grid-template-columns:1fr;gap:14px}.game-card{padding:21px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.game-card,.game-card::before{transition:none}}