/* Radatti Games: red dirt at last light. Dark earth, warm sand type, one burnt-orange accent. */
:root {
  --earth: #160d09;
  --earth-2: #22140e;
  --line: #3a2519;
  --sand: #f2e6d4;
  --sand-dim: #b9a58e;
  --sun: #ff6b1f;
  --sun-2: #ffb15c;
  --display: "Futura", "Futura PT", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; }
html { background: var(--earth); color: var(--sand); }
body {
  margin: 0; min-height: 100vh; font: 17px/1.55 var(--body);
  background:
    radial-gradient(120% 70% at 85% -10%, rgba(255, 107, 31, .22), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(255, 177, 92, .08), transparent 60%),
    var(--earth);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 3px; border-radius: 6px; }

.top, main, .foot { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.top { padding: 26px 0 0; }
.mark { font: 800 15px/1 var(--display); letter-spacing: .22em; text-decoration: none; display: inline-flex; gap: .55em; }
.mark span { color: var(--sun); }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 9vw, 110px) 0 clamp(36px, 6vw, 70px); max-width: 760px; }
.kicker { margin: 0 0 18px; font: 700 13px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--sun-2); }
h1 {
  margin: 0; font: 800 clamp(46px, 8.2vw, 104px)/.92 var(--display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--sun); }
.lede { margin: 24px 0 0; max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); color: var(--sand-dim); }

/* ---------- game cards ---------- */
.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-bottom: 40px; min-height: 60vh; align-content: start; } /* room for the cards while games.json is on its way */
.game {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--earth-2), #1b100b); border: 1px solid var(--line); border-radius: var(--r);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms);
}
.game.lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.45fr 1fr; }
.shot { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #2a1a12; }
.game.lead .shot { aspect-ratio: auto; min-height: 100%; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(1.05) contrast(1.02); }
.game:hover .shot img { transform: scale(1.035); filter: saturate(1.15) contrast(1.05); }
.info { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 28px; flex: 1; }
.game.lead .info { justify-content: center; padding: clamp(28px, 4vw, 48px); }
h2 { margin: 0; font: 800 clamp(28px, 3vw, 40px)/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em; }
h2 a { text-decoration: none; }
.game.lead h2 { font-size: clamp(34px, 4.2vw, 56px); }
.info p { margin: 0; color: var(--sand-dim); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.tags li { font: 600 12.5px/1 var(--body); padding: 7px 10px; border-radius: 999px; background: rgba(255, 177, 92, .1); color: var(--sun-2); border: 1px solid rgba(255, 177, 92, .18); }
.play {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 12px; border-radius: 10px; background: var(--sun); color: #1a0d06; text-decoration: none;
  font: 800 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 26px -10px rgba(255, 107, 31, .8); transition: background .2s, transform .2s;
}
.info .play { margin-top: 8px; }
.play span { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.play:hover { background: #ff8239; }
.play:hover span, .game:hover .play span { transform: translateX(4px); }
.play:active { transform: translateY(1px); }

.game.soon { border-style: dashed; background: transparent; justify-content: center; min-height: 200px; }
.game.soon h2 { color: var(--sand-dim); font-size: 26px; }

.plain { padding: 0 0 40px 1.2em; font-size: 20px; }
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); color: #8c7a66; font-size: 14px; }
.foot p { margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .game { animation: none; } .shot img, .play span { transition: none; } }
@media (max-width: 860px) {
  .games { grid-template-columns: 1fr; }
  .game.lead { display: flex; }
  .game.lead .shot { aspect-ratio: 16 / 9; min-height: 0; }
}