/* =========================================================================
   AfterShow Stay — shared stylesheet
   Design: "Isometric playground" — bright, dimensional, friendly.
   Signature: game cards that lift like 3D iso tiles on hover.
   ========================================================================= */

:root{
  --bg:        #e9edfb;
  --bg-soft:   #f4f6ff;
  --surface:   #ffffff;
  --ink:       #16163a;
  --muted:     #6a6a8c;
  --line:      #dfe3f5;

  --coral:     #ff6b4a;
  --coral-dk:  #ec4f2c;
  --teal:      #14cfb0;
  --violet:    #6c5ce7;
  --yellow:    #ffc93c;

  --shadow-iso: 0 18px 30px -16px rgba(108,92,231,.45);
  --shadow-soft: 0 10px 24px -14px rgba(22,22,58,.35);

  --radius: 18px;
  --maxw: 1120px;

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(233,237,251,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0;
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:1.3rem;
  letter-spacing:-.01em;
}
.brand .cube{ width:30px; height:30px; flex:none; }
.nav-links{ display:flex; gap:.35rem; align-items:center; }
.nav-links a{
  font-weight:600; font-size:.95rem; color:var(--muted);
  padding:.45rem .8rem; border-radius:10px; transition:.15s;
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-soft); }
.nav-links a.cta{
  color:#fff; background:var(--coral);
  box-shadow:0 8px 16px -8px var(--coral);
}
.nav-links a.cta:hover{ background:var(--coral-dk); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:5.5rem 0 4rem;
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient( 60deg, rgba(108,92,231,.07) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(-60deg, rgba(108,92,231,.07) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(  0deg, rgba(108,92,231,.05) 0 1px, transparent 1px 104px);
}
.hero::after{
  /* fade the grid out toward the bottom */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--bg) 100%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:680px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet); background:#fff;
  padding:.4rem .8rem; border-radius:99px; box-shadow:var(--shadow-soft);
}
.hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem, 6vw, 4rem); line-height:1.02;
  letter-spacing:-.02em; margin:1.1rem 0 .8rem;
}
.hero h1 em{ color:var(--coral); font-style:normal; }
.hero p{ font-size:1.12rem; color:var(--muted); max-width:46ch; margin:0 0 1.8rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  padding:.85rem 1.5rem; border-radius:14px; cursor:pointer; border:0;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.btn-primary{ color:#fff; background:var(--coral); box-shadow:0 12px 22px -10px var(--coral); }
.btn-primary:hover{ background:var(--coral-dk); transform:translateY(-2px); }
.btn-ghost{ color:var(--ink); background:#fff; box-shadow:var(--shadow-soft); margin-left:.6rem; }
.btn-ghost:hover{ transform:translateY(-2px); }
.hero-cubes{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); z-index:0; opacity:.9; }

/* ---------- section heading ---------- */
.section{ padding:4rem 0; }
.section-head{ margin-bottom:2rem; max-width:60ch; }
.section-head .eyebrow{ box-shadow:none; background:#fff; }
.section-head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,3.5vw,2.5rem); letter-spacing:-.02em; margin:.8rem 0 .4rem;
}
.section-head p{ color:var(--muted); margin:0; font-size:1.05rem; }

/* ---------- games grid ---------- */
.games{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(3, 1fr);
}
.card{
  position:relative;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-iso);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 44px -20px rgba(108,92,231,.55);
}
.card-thumb{
  aspect-ratio:16/10; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.card-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-tag{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); background:#fff; padding:.28rem .6rem; border-radius:99px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.3);
}
.card-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:0; }
.card-body p{ color:var(--muted); font-size:.95rem; margin:0; flex:1; }
.card-play{
  align-self:flex-start; margin-top:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  color:#fff; background:var(--ink); padding:.55rem 1.1rem; border-radius:11px;
  transition:.15s;
}
.card:hover .card-play{ background:var(--coral); }

/* ---------- about strip ---------- */
.about-strip{ background:var(--bg-soft); border-block:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center; }
.about-grid h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .8rem; letter-spacing:-.02em; }
.about-grid p{ color:var(--muted); margin:0 0 1rem; }
.facts{ display:grid; gap:1rem; }
.fact{ background:#fff; border-radius:14px; padding:1.1rem 1.2rem; box-shadow:var(--shadow-soft); }
.fact b{ font-family:var(--font-display); font-size:1.6rem; display:block; color:var(--violet); }
.fact span{ color:var(--muted); font-size:.9rem; }

/* ---------- content pages ---------- */
.page{ padding:3.5rem 0 4rem; }
.page-narrow{ max-width:740px; }
.page h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.02em; margin:.2rem 0 1rem; }
.page h2{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; margin:2rem 0 .6rem; }
.page p, .page li{ color:#3a3a55; }
.page ul{ padding-left:1.2rem; }
.page a.inline{ color:var(--violet); font-weight:600; text-decoration:underline; }
.updated{ color:var(--muted); font-size:.9rem; }
.contact-card{
  background:#fff; border-radius:var(--radius); padding:1.6rem 1.8rem;
  box-shadow:var(--shadow-soft); margin-top:1.4rem;
}
.contact-card a{ color:var(--coral); font-weight:700; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#cfcfe6; padding:3rem 0 2.2rem; margin-top:2rem; }
.footer-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.footer-brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:#fff; }
.footer-brand .cube{ width:28px; height:28px; }
.footer-tag{ color:#9a9ac0; max-width:30ch; margin:.6rem 0 0; font-size:.95rem; }
.footer-nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-nav a{ color:#cfcfe6; font-weight:600; font-size:.95rem; }
.footer-nav a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.4rem; color:#8b8bb3; font-size:.88rem; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .games{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .hero-cubes{ display:none; }
}
@media (max-width:560px){
  .games{ grid-template-columns:1fr; }
  .nav-links a:not(.cta){ display:none; }
  .btn-ghost{ display:none; }
}

/* ---------- a11y ---------- */
:focus-visible{ outline:3px solid var(--violet); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}