/* ==========================================================================
   Lapito Games - single stylesheet for the whole site.
   No frameworks, no imports, no web fonts, no external requests.
   Colours and spacing live in the variables below; change them in one place.
   ========================================================================== */

:root{
  --bg:#0f0d17;
  --bg-panel:#171426;
  --bg-panel-2:#1d1930;
  --line:#2c2743;
  --text:#ece8f5;
  --text-dim:#a9a2c0;
  --accent:#e8c37a;
  --accent-ink:#231a08;
  --radius:14px;
  --measure:66ch;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(16px,1.1vw + 14px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 var(--pad)}

a{color:var(--accent);text-underline-offset:3px}
a:hover{color:#f5dba7}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:650;letter-spacing:-.01em}
h1{font-size:clamp(30px,6vw,46px)}
h2{font-size:clamp(22px,3.4vw,28px)}
h3{font-size:clamp(18px,2.4vw,21px)}
p{margin:0 0 1em}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:72px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  font-weight:700;letter-spacing:.16em;font-size:15px;text-transform:uppercase}
.brand:hover{color:var(--text)}
.brand-mark{width:22px;height:22px;flex:0 0 auto}
.site-header nav{display:flex;gap:22px;font-size:15px}
.site-header nav a{color:var(--text-dim);text-decoration:none}
.site-header nav a:hover{color:var(--text)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,11vw,104px) 0 clamp(32px,6vw,56px)}
.hero p{max-width:44ch;color:var(--text-dim);font-size:clamp(17px,1.6vw,20px);margin:0}

/* ---------- game card ---------- */
.section-label{font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);margin:0 0 14px}

.game{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:clamp(48px,9vw,88px)}

/* The cover is a background layer stack: the real artwork sits on top of a
   built-in placeholder. Drop assets/images/mythica-cover.webp in place and it
   simply appears - no HTML or CSS edit needed. If the file is missing the
   placeholder below shows instead, so the page never looks broken. */
.game-cover{
  aspect-ratio:16/9;
  background-color:var(--bg-panel-2);
  background-image:url("../images/mythica-cover.webp"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 675'><defs><linearGradient id='a' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%232b2444'/><stop offset='1' stop-color='%2315121f'/></linearGradient></defs><rect width='1200' height='675' fill='url(%23a)'/><g fill='none' stroke='%23e8c37a' stroke-width='5' opacity='.3'><circle cx='600' cy='338' r='78'/><circle cx='600' cy='338' r='40'/></g></svg>");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  border-bottom:1px solid var(--line);
}

.game-body{padding:clamp(22px,4vw,34px)}
.game-body h3{margin-bottom:.35em}
.game-body p{color:var(--text-dim);max-width:52ch}

.badge{display:inline-block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:5px 14px;margin-bottom:16px}

/* ---------- store buttons (hidden until the game ships) ---------- */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.stores[hidden]{display:none}
.store-btn{display:inline-block;padding:12px 22px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;
  font-size:15px;transition:transform .15s ease,background .15s ease}
.store-btn:hover{background:#f2d295;color:var(--accent-ink);transform:translateY(-1px)}
.store-btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.store-btn.secondary:hover{border-color:var(--accent);color:var(--text)}

/* ---------- text pages ---------- */
.page{padding:clamp(40px,8vw,72px) 0 clamp(32px,6vw,56px)}
.page .lede{color:var(--text-dim);max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:2em}
.prose ul{margin:0 0 1em;padding-left:1.25em}
.prose li{margin-bottom:.45em}
.updated{color:var(--text-dim);font-size:15px;margin-bottom:2em}

/* A visible, honest note wherever a fact still has to be confirmed. */
.todo{border-left:3px solid var(--accent);background:rgba(232,195,122,.07);
  padding:14px 18px;border-radius:0 8px 8px 0;color:var(--text-dim);font-size:15px}
.todo strong{color:var(--accent)}

.draft{border:1px solid var(--accent);background:rgba(232,195,122,.08);
  padding:16px 20px;border-radius:10px;margin-bottom:2.5em;font-size:15px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:32px 0 44px;margin-top:auto;
  color:var(--text-dim);font-size:15px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px}
.site-footer a{color:var(--text-dim);text-decoration:none}
.site-footer a:hover{color:var(--text);text-decoration:underline}
.site-footer p{margin:0}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .store-btn:hover{transform:none}
}