/* 1v1megames.com: the studio page for all the games, in the 1v1Me brand (Brand Book: black + Gold 1, greys,
   Rubik ExtraBold caps headers, white headers with gold emphasis, 3D type when it stands alone). */
@import url("/fonts/fonts.css");
:root{
  --black:#000000; --grey-5:#191919; --grey-4:#333333; --grey-3:#979797; --grey-2:#E5E5E5; --grey-1:#F0F0F0; --white:#FFFFFF;
  --gold:#FFC20E; --gold-2:#4D3900;
  --f:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;color:var(--grey-1);font-family:var(--f);font-size:18px;line-height:1.5;background:var(--black);
  background-image:radial-gradient(70% 40% at 50% -6%,rgba(255,194,14,.16),transparent 70%)}
a{color:var(--gold)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-left:16px;padding-right:16px}

.top{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:30px;width:auto;display:block}
.logo span{font-weight:800;font-size:22px;letter-spacing:.02em;color:var(--white);line-height:1}
.top nav a{color:var(--grey-3);text-decoration:none;font-weight:700;margin-left:22px;text-transform:uppercase;font-size:15px;letter-spacing:.04em}
.top nav a:hover{color:var(--white)}

.hero{padding-top:60px;padding-bottom:68px;text-align:center}
.eyebrow{margin:0 0 16px;color:var(--gold);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:14px}
/* 3D type: stacked shadows in Gold 2 under white / Gold 1 */
.hero h1{font-weight:900;font-size:clamp(38px,6.6vw,72px);line-height:1;margin:0;text-transform:uppercase;letter-spacing:-.01em;color:var(--white);
  text-shadow:0 1px 0 #cfcfcf,0 2px 0 #b5b5b5,0 3px 0 #9a9a9a,0 4px 0 #808080,0 10px 24px rgba(0,0,0,.6)}
.hero h1 span{color:var(--gold);
  text-shadow:0 1px 0 #d9a40b,0 2px 0 #b48608,0 3px 0 #8f6a06,0 4px 0 var(--gold-2),0 0 34px rgba(255,194,14,.35),0 12px 26px rgba(0,0,0,.6)}
.lede{max-width:620px;margin:22px auto 0;color:var(--grey-3);font-size:clamp(18px,2.2vw,21px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--grey-5);
  border:1px solid var(--grey-4);color:var(--white);text-decoration:none;font-weight:700;font-size:16px}
.chip img{width:36px;height:36px;border-radius:9px}
.chip:hover{border-color:var(--gold)}

.game{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding-top:44px;padding-bottom:44px;scroll-margin-top:16px}
.game + .game{border-top:1px solid var(--grey-4)}
.info .icon{width:96px;height:96px;border-radius:22px;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px var(--grey-4)}
.info .kind{margin:18px 0 4px;color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.info h2{font-weight:800;font-size:clamp(32px,4.6vw,48px);line-height:1.02;margin:0;text-transform:uppercase;color:var(--white);letter-spacing:-.005em}
.info .tag{font-weight:700;font-size:21px;margin:10px 0 10px;color:var(--gold)}
.info p{color:var(--grey-3);max-width:540px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:12px;
  font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.btn-main{background:var(--gold);color:var(--black);box-shadow:0 5px 0 var(--gold-2)}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-2)}
.btn-ghost{border:2px solid var(--grey-4);color:var(--white)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-store{background:var(--white);color:var(--black)}
.soon{color:var(--grey-3);font-weight:600;font-size:15px;padding:0 6px}
.phones{display:flex;gap:14px;justify-content:center}
.phones img{width:46%;max-width:230px;height:auto;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px var(--grey-4);background:var(--grey-5)}
.phones img:nth-child(2){transform:translateY(22px)}

.about{display:grid;grid-template-columns:1fr;gap:8px 40px;padding-top:48px;padding-bottom:28px;border-top:1px solid var(--grey-4)}
.about h2{font-weight:800;font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--gold)}
.about p{margin:0 0 18px;color:var(--grey-3)}
footer{padding-top:18px;padding-bottom:44px;color:var(--grey-3);font-size:15px;border-top:1px solid var(--grey-4)}
footer p{margin:6px 0}
footer a{color:var(--grey-3)}

@media (max-width:520px){
  .logo img{height:22px} .logo span{font-size:17px}
  .top nav a{margin-left:14px;font-size:13px} .top nav a[href="#games"]{display:none}
}
/* a game without screenshots yet: text only */
.phones:empty{display:none}
.game:has(.phones:empty){grid-template-columns:1fr}

@media (min-width:860px){
  .game{grid-template-columns:1.1fr 1fr;gap:56px;padding-top:76px;padding-bottom:76px}
  .game.flip .info{order:2}
  .about{grid-template-columns:1fr 1fr}
}