/* ==========================================================================
   ARCADIA — Design System
   Reference: onepagelove.com/react-gg — dark background, winding cream
   "board game" path with numbered checkpoints, bold flat game-piece colors,
   chunky pill buttons with dark outline + hard offset shadow.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --bg:            #0b0b0d;
  --bg-soft:       #141417;
  --panel:         #18181c;
  --line:          #2a2a2e;

  --ink:           #f5f1e6;
  --ink-dim:       #aba895;
  --ink-faint:     #6f6d64;
  --path:          #efe6d2;

  --pink:          #ff6fa0;
  --teal:          #49d6c9;
  --purple:        #9d7cf0;
  --yellow:        #ffcf3d;
  --green:         #5fd16a;
  --orange:        #ff8a42;

  --accent:        var(--green);

  --radius-lg:     26px;
  --radius-md:     18px;
  --radius-sm:     12px;

  --shadow-hard:    6px 6px 0 rgba(0,0,0,0.55);
  --shadow-hard-sm: 4px 4px 0 rgba(0,0,0,0.55);
  --shadow-hard-lg: 9px 9px 0 rgba(0,0,0,0.55);

  --font-display:  'Paytone One', 'Outfit', sans-serif;
  --font-body:     'Outfit', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.bg-grid{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(245,241,230,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,230,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, .display{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.3rem, 5vw, 4rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.3rem; }
p{ color: var(--ink-dim); margin: 0 0 1em; }
a{ color: var(--teal); }
.lede{ font-size: 1.15rem; color: var(--ink-dim); max-width: 640px; }

.text-pink{ color: var(--pink); }
.text-teal{ color: var(--teal); }
.text-purple{ color: var(--purple); }
.text-yellow{ color: var(--yellow); }
.text-green{ color: var(--green); }

/* -------------------------------------------------------------------------
   Checkpoint badge — numbered circle, like the path markers on react.gg
   ------------------------------------------------------------------------- */
.checkpoint{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.checkpoint .num{
  font-family: var(--font-display);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--path);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  border: 2px solid rgba(0,0,0,0.15);
  box-shadow: var(--shadow-hard-sm);
}
.checkpoint .label{
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
}
.checkpoint.pink .num{ background: var(--pink); }
.checkpoint.teal .num{ background: var(--teal); }
.checkpoint.purple .num{ background: var(--purple); }
.checkpoint.yellow .num{ background: var(--yellow); }

/* -------------------------------------------------------------------------
   Winding path — dashed vertical guide connecting sections
   ------------------------------------------------------------------------- */
.path-line{ position: relative; }
.path-line::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background-image: linear-gradient(var(--path) 60%, transparent 0%);
  background-position: top;
  background-size: 3px 22px;
  background-repeat: repeat-y;
  opacity: 0.16;
}

/* -------------------------------------------------------------------------
   Buttons — chunky pill, dark outline, hard offset shadow, press-down
   ------------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--bg);
  background: var(--green);
  border: 2px solid rgba(0,0,0,0.55);
  border-radius: 999px;
  padding: 14px 30px;
  text-decoration: none;
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  user-select: none;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-lg); }
.btn:active{ transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(0,0,0,0.55); }
.btn.ghost{ background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover{ border-color: var(--ink); box-shadow: var(--shadow-hard-sm); transform: none; }
.btn.pink{ background: var(--pink); }
.btn.teal{ background: var(--teal); }
.btn.purple{ background: var(--purple); color: var(--ink); }
.btn.yellow{ background: var(--yellow); }
.btn.small{ padding: 9px 20px; font-size: 0.82rem; }

/* -------------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  padding: 20px 0;
  background: linear-gradient(var(--bg) 65%, rgba(11,11,13,0));
  backdrop-filter: blur(2px);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:1.3rem; color: var(--ink); text-decoration:none; }
.brand .dot{ width:14px; height:14px; background: var(--green); border-radius:4px; transform: rotate(45deg); box-shadow: var(--shadow-hard-sm); }
.nav{ display:flex; align-items:center; gap:6px; background: var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px; }
.nav a{ color: var(--ink-dim); text-decoration:none; font-size:0.92rem; font-weight:600; padding:9px 16px; border-radius:999px; transition: background .15s, color .15s; }
.nav a:hover{ color: var(--ink); background: rgba(255,255,255,0.05); }
.nav a.active{ color: var(--bg); background: var(--path); }
.nav-toggle{ display:none; }
.header-cta{ display:flex; align-items:center; gap:14px; }

@media (max-width: 900px){
  .nav{ position: fixed; top: 78px; left: 20px; right: 20px; flex-direction: column; align-items: stretch; padding: 10px; display: none; z-index: 600; box-shadow: var(--shadow-hard); }
  .nav.open{ display: flex; }
  .nav a{ text-align: center; }
  .nav-toggle{ display: inline-flex; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 10px 14px; font-family: var(--font-display); cursor: pointer; }
  .header-cta .btn.header-only{ display:none; }
}

/* -------------------------------------------------------------------------
   Cards / game pieces
   ------------------------------------------------------------------------- */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-hard);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translate(-3px,-3px); box-shadow: var(--shadow-hard-lg); }

.game-card{ display:flex; flex-direction:column; gap:14px; text-decoration:none; color: var(--ink); position:relative; }
.game-card .thumb{ height:150px; border-radius: var(--radius-sm); display:grid; place-items:center; font-size:3rem; border:1px solid rgba(0,0,0,0.25); }
.game-card .badge{ position:absolute; top:18px; right:18px; font-family: var(--font-display); font-size:0.68rem; background: var(--bg); border:1px solid var(--line); color: var(--ink-dim); padding:4px 10px; border-radius:999px; }
.game-card h3{ margin-bottom:4px; }
.game-card p{ font-size:0.93rem; margin-bottom:0; }
.game-card .play-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; }
.tag-chip{ font-size:0.72rem; font-weight:600; color: var(--ink-dim); border:1px solid var(--line); padding:3px 10px; border-radius:999px; }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */
section{ padding: 90px 0; position: relative; }
.hero{ padding-top: 68px; padding-bottom: 56px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width: 960px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
@media (max-width: 720px){ section{ padding:56px 0; } }

.divider{ height:2px; background: repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 22px); }

.stat-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; text-align:center; }
.stat-block .num{ display:block; font-family: var(--font-display); font-size:2.6rem; color: var(--path); }
.stat-block .label{ color: var(--ink-dim); font-size:0.9rem; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer{ background: var(--bg-soft); border-top:1px solid var(--line); padding:64px 0 32px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 540px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:0.9rem; color: var(--ink); margin-bottom:14px; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color: var(--ink-dim); text-decoration:none; font-size:0.92rem; }
.footer-links a:hover{ color: var(--path); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:28px; border-top:1px solid var(--line); color: var(--ink-faint); font-size:0.85rem; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color: var(--ink-dim); text-decoration:none; font-size:0.85rem; }
.footer-social a:hover{ border-color: var(--path); color: var(--path); }

/* -------------------------------------------------------------------------
   Cookie banner
   ------------------------------------------------------------------------- */
.cookie-banner{ position:fixed; left:24px; right:24px; bottom:24px; max-width:640px; margin:0 auto; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-hard); padding:20px 22px; z-index:900; display:none; flex-direction:column; gap:14px; }
.cookie-banner.show{ display:flex; }
.cookie-banner-main{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookie-banner p{ margin:0; font-size:0.88rem; flex:1 1 260px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-customize-panel{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); }
.cookie-toggle{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color: var(--ink-dim); }
.cookie-toggle input{ width:auto; }

/* -------------------------------------------------------------------------
   Page hero / legal / contact
   ------------------------------------------------------------------------- */
.page-hero{ padding:70px 0 40px; text-align:center; }
.page-hero .lede{ margin:0 auto; text-align:center; }
.legal-content{ max-width:780px; margin:0 auto; }
.legal-content h2{ margin-top:2em; font-size:1.4rem; }
.legal-content h2:first-child{ margin-top:0; }
.updated-tag{ display:inline-block; color: var(--ink-faint); font-size:0.85rem; border:1px solid var(--line); border-radius:999px; padding:5px 14px; margin-bottom:20px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:960px; margin:0 auto; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.85rem; color: var(--ink-dim); margin-bottom:6px; }
.field input, .field textarea, .field select{ width:100%; background: var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color: var(--ink); font-family: var(--font-body); font-size:0.95rem; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--path); }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-item .icon{ width:42px; height:42px; flex:none; border-radius:10px; background: var(--bg); border:1px solid var(--line); display:grid; place-items:center; color: var(--path); }
.contact-info-item h4{ margin:0 0 4px; font-size:0.95rem; color: var(--ink); font-family: var(--font-body); font-weight:700; }
.contact-info-item p{ margin:0; font-size:0.9rem; }

/* -------------------------------------------------------------------------
   Game player shell
   ------------------------------------------------------------------------- */
.game-shell{ max-width:960px; margin:0 auto; }
.game-frame{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); padding:18px; }
.game-topbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px 18px; flex-wrap:wrap; gap:12px; }
.game-hud{ display:flex; gap:18px; align-items:center; font-family: var(--font-display); }
.hud-pill{ background: var(--bg); border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:0.85rem; color: var(--ink-dim); }
.hud-pill b{ color: var(--path); font-size:1rem; }
canvas{ display:block; width:100%; height:auto; background: var(--bg); border-radius: var(--radius-md); border:1px solid var(--line); touch-action:none; }
.game-overlay{ position:absolute; inset:0; background:rgba(11,11,13,0.9); border-radius: var(--radius-md); display:grid; place-items:center; text-align:center; padding:20px; }
.game-overlay-inner{ max-width:360px; }
.canvas-wrap{ position:relative; }
.how-to{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 720px){ .how-to{ grid-template-columns:1fr; } }
.how-to .card{ padding:20px; }
.how-to .num-tag{ width:32px; height:32px; border-radius:8px; background: var(--green); color: var(--bg); display:grid; place-items:center; font-family: var(--font-display); margin-bottom:12px; }
.related-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width: 860px){ .related-strip{ grid-template-columns:1fr; } }

/* Word Duel */
.wd-board{ display:grid; gap:8px; max-width:360px; margin:0 auto 20px; }
.wd-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.wd-tile{ aspect-ratio:1; border:2px solid var(--line); border-radius:16px; display:grid; place-items:center; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); background:var(--bg); text-transform:uppercase; }
.wd-tile.correct{ background: var(--teal); border-color: var(--teal); color:var(--bg); }
.wd-tile.present{ background: var(--orange); border-color: var(--orange); color:var(--bg); }
.wd-tile.absent{ background: var(--line); border-color: var(--line); color: var(--ink-dim); }
.wd-keyboard{ display:flex; flex-direction:column; gap:8px; align-items:center; max-width:520px; margin:0 auto; }
.wd-krow{ display:flex; gap:6px; }
.wd-key{ background: var(--panel); border:1px solid var(--line); color: var(--ink); border-radius:999px; padding:12px 10px; font-family:var(--font-body); font-weight:600; font-size:0.85rem; cursor:pointer; min-width:32px; text-align:center; }
.wd-key:hover{ border-color: var(--path); }
.wd-key.wide{ padding:12px 16px; font-size:0.75rem; }
.wd-key.correct{ background: var(--teal); color: var(--bg); border-color: var(--teal); }
.wd-key.present{ background: var(--orange); color: var(--bg); border-color: var(--orange); }
.wd-key.absent{ background: var(--line); color: var(--ink-faint); }
.wd-opponent{ max-width:360px; margin:0 auto 20px; }
.wd-opponent-bar{ height:10px; border-radius:999px; background: var(--bg); border:1px solid var(--line); overflow:hidden; }
.wd-opponent-fill{ height:100%; background: var(--pink); width:0%; transition: width .3s; }

/* Memory Rush */
.mr-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.mr-diff{ display:flex; gap:8px; }
.mr-diff button{ background: var(--panel); border:1px solid var(--line); color: var(--ink-dim); padding:8px 16px; border-radius:999px; font-family: var(--font-body); font-weight:600; font-size:0.85rem; cursor:pointer; }
.mr-diff button.active{ background: var(--path); color: var(--bg); border-color: var(--path); }
.mr-board{ display:grid; gap:10px; margin: 0 auto; }
.mr-card{ aspect-ratio:1; border-radius:10px; background: var(--panel); border:1px solid var(--line); display:grid; place-items:center; font-size:1.8rem; cursor:pointer; user-select:none; }
.mr-card.flipped, .mr-card.matched{ background: var(--bg); border-color: var(--path); }
.mr-card.matched{ opacity:0.4; cursor:default; }

/* utility */
.center{ text-align:center; }
.mt-lg{ margin-top: 48px; }
.stack{ display:flex; flex-direction:column; gap: 8px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }