/* reppo.games - shared styles
   Liquid-glass tokens (light + dark), layout, components.
   Converted 1:1 from the Claude Design export; values are authoritative. */

/* ---- self-hosted Inter (variable, latin) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* ---- theme tokens (light default) ---- */
:root {
  --bg:#f4f3f1;
  --mesh:
    radial-gradient(38% 32% at 18% 12%, rgba(140,180,255,0.42), transparent 70%),
    radial-gradient(42% 36% at 88% 20%, rgba(255,184,212,0.40), transparent 70%),
    radial-gradient(46% 40% at 30% 88%, rgba(178,232,200,0.40), transparent 72%),
    radial-gradient(40% 34% at 86% 84%, rgba(255,221,168,0.38), transparent 72%);
  --veil:linear-gradient(180deg, rgba(244,243,241,0) 0%, rgba(244,243,241,0.35) 60%, rgba(244,243,241,0.75) 100%);
  --text:#1c1c1e; --text-2:rgba(0,0,0,0.5); --text-3:rgba(0,0,0,0.34); --text-faint:rgba(0,0,0,0.28);
  --hairline:rgba(0,0,0,0.07);
  --card-bg:rgba(255,255,255,0.55); --card-border:rgba(255,255,255,0.7);
  --card-shadow:0 1px 1px rgba(0,0,0,0.03), 0 8px 24px -12px rgba(40,40,80,0.22), inset 0 1px 1px rgba(255,255,255,0.6);
  --card-bg-hover:rgba(255,255,255,0.74); --card-border-hover:rgba(255,255,255,0.95);
  --card-shadow-hover:0 1px 1px rgba(0,0,0,0.04), 0 18px 40px -16px rgba(40,40,80,0.32), inset 0 1px 1px rgba(255,255,255,0.7);
  --spec:rgba(255,255,255,0.6);
  --chevron:rgba(0,0,0,0.22);
  --head-grad:linear-gradient(180deg,#2a2a30,#5a5a66);
  --pill-live-color:#0a7d3f; --pill-live-bg:rgba(52,199,89,0.16); --pill-live-border:rgba(52,199,89,0.30);
  --pill-soon-color:rgba(0,0,0,0.45); --pill-soon-bg:rgba(0,0,0,0.05); --pill-soon-border:rgba(0,0,0,0.08);
  --focus:#3b6fe0;
}

:root[data-theme="dark"] {
  --bg:#0d0d0f;
  --mesh:
    radial-gradient(40% 34% at 16% 10%, rgba(96,128,228,0.34), transparent 70%),
    radial-gradient(44% 38% at 90% 18%, rgba(196,92,156,0.30), transparent 70%),
    radial-gradient(48% 42% at 28% 90%, rgba(60,158,124,0.28), transparent 72%),
    radial-gradient(42% 36% at 88% 86%, rgba(206,154,72,0.26), transparent 72%);
  --veil:linear-gradient(180deg, rgba(13,13,15,0) 0%, rgba(13,13,15,0.42) 58%, rgba(13,13,15,0.82) 100%);
  --text:#f3f3f6; --text-2:rgba(255,255,255,0.56); --text-3:rgba(255,255,255,0.42); --text-faint:rgba(255,255,255,0.3);
  --hairline:rgba(255,255,255,0.09);
  --card-bg:rgba(255,255,255,0.07); --card-border:rgba(255,255,255,0.12);
  --card-shadow:0 1px 1px rgba(0,0,0,0.25), 0 10px 30px -12px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.09);
  --card-bg-hover:rgba(255,255,255,0.12); --card-border-hover:rgba(255,255,255,0.22);
  --card-shadow-hover:0 1px 1px rgba(0,0,0,0.3), 0 22px 46px -16px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.13);
  --spec:rgba(255,255,255,0.16);
  --chevron:rgba(255,255,255,0.3);
  --head-grad:linear-gradient(180deg,#ffffff,#bcbcc8);
  --pill-live-color:#4ade80; --pill-live-bg:rgba(52,199,89,0.18); --pill-live-border:rgba(52,199,89,0.32);
  --pill-soon-color:rgba(255,255,255,0.5); --pill-soon-bg:rgba(255,255,255,0.08); --pill-soon-border:rgba(255,255,255,0.12);
  --focus:#8ab4ff;
}

/* system default when no explicit choice persisted (NO-JS friendly) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:#0d0d0f;
    --mesh:
      radial-gradient(40% 34% at 16% 10%, rgba(96,128,228,0.34), transparent 70%),
      radial-gradient(44% 38% at 90% 18%, rgba(196,92,156,0.30), transparent 70%),
      radial-gradient(48% 42% at 28% 90%, rgba(60,158,124,0.28), transparent 72%),
      radial-gradient(42% 36% at 88% 86%, rgba(206,154,72,0.26), transparent 72%);
    --veil:linear-gradient(180deg, rgba(13,13,15,0) 0%, rgba(13,13,15,0.42) 58%, rgba(13,13,15,0.82) 100%);
    --text:#f3f3f6; --text-2:rgba(255,255,255,0.56); --text-3:rgba(255,255,255,0.42); --text-faint:rgba(255,255,255,0.3);
    --hairline:rgba(255,255,255,0.09);
    --card-bg:rgba(255,255,255,0.07); --card-border:rgba(255,255,255,0.12);
    --card-shadow:0 1px 1px rgba(0,0,0,0.25), 0 10px 30px -12px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.09);
    --card-bg-hover:rgba(255,255,255,0.12); --card-border-hover:rgba(255,255,255,0.22);
    --card-shadow-hover:0 1px 1px rgba(0,0,0,0.3), 0 22px 46px -16px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.13);
    --spec:rgba(255,255,255,0.16);
    --chevron:rgba(255,255,255,0.3);
    --head-grad:linear-gradient(180deg,#ffffff,#bcbcc8);
    --pill-live-color:#4ade80; --pill-live-bg:rgba(52,199,89,0.18); --pill-live-border:rgba(52,199,89,0.32);
    --pill-soon-color:rgba(255,255,255,0.5); --pill-soon-bg:rgba(255,255,255,0.08); --pill-soon-border:rgba(255,255,255,0.12);
    --focus:#8ab4ff;
  }
}

/* ---- base ---- */
html { background:var(--bg); color:var(--text); }
body {
  margin:0;
  position:relative;
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
}

/* ---- background mesh ---- */
.bg-mesh { position:fixed; inset:-20%; z-index:0; pointer-events:none; background:var(--mesh); filter:saturate(1.05); }
.bg-veil { position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--veil); }

/* ---- layout column ---- */
.wrap { width:100%; max-width:460px; margin:0 auto; padding-left:20px; padding-right:20px; }
@media (min-width:760px) { .wrap { max-width:1060px; padding-left:32px; padding-right:32px; } }

/* ---- header ---- */
/* The site header (brand + theme toggle) is the shared, namespaced module in
   /embed (reppo-header / rh-*). Its styles live in embed/header.css, not here. */

/* ---- content column ---- */
.content { position:relative; z-index:1; padding-bottom:48px; }
.content.content--about { max-width:680px; }
.content.content--contact { max-width:560px; }

/* ---- hero ---- */
.hero { padding:56px 4px 40px; text-align:center; }
.hero-title {
  font-size:38px; max-width:300px; margin:0 auto;
  font-weight:600; letter-spacing:-0.03em; line-height:1.18; padding-bottom:0.12em; text-wrap:balance;
  background:var(--head-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (min-width:760px) {
  .hero { padding:104px 4px 72px; }
  .hero-title { font-size:62px; max-width:720px; letter-spacing:-0.035em; }
}

/* ---- games ---- */
.section-label { padding:0 6px 12px; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-3); }

.cards { display:grid; gap:14px; }
@media (min-width:760px) { .cards { grid-template-columns:1fr 1fr; gap:18px; } }

.card {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:14px; min-height:76px;
  border-radius:24px; text-decoration:none;
  background:var(--card-bg); border:0.5px solid var(--card-border); box-shadow:var(--card-shadow);
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, background .26s ease, border-color .26s ease;
  will-change:transform;
}
@media (min-width:760px) { .card { padding:18px 20px; min-height:96px; gap:18px; } }

.card-spec {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%), var(--spec), transparent 62%);
}
.card > *:not(.card-spec) { position:relative; z-index:1; }

.card-icon {
  flex:none; width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -2px rgba(40,40,80,0.3), inset 0 1px 1.5px rgba(255,255,255,0.65), inset 0 -2px 4px rgba(0,0,0,0.12);
}
.icon--blockfall { background:linear-gradient(155deg,#5ea0ff,#7a6bff); }
.icon--solitaire { background:linear-gradient(155deg,#3ec98a,#1f9d6b); }
.icon--dig { background:linear-gradient(155deg,#ffb35e,#ff7e6b); }

/* geometric app glyphs (no emoji, no fragile SVG) */
.glyph-block { display:grid; grid-template-columns:repeat(2,11px); grid-template-rows:repeat(2,11px); gap:3px; }
.glyph-block i { width:11px; height:11px; border-radius:3px; box-shadow:inset 0 1px 1px rgba(255,255,255,0.5); display:block; }
.glyph-block i:nth-child(1) { background:#fff; }
.glyph-block i:nth-child(2) { background:rgba(255,255,255,0.55); }
.glyph-block i:nth-child(3) { background:rgba(255,255,255,0.85); }
.glyph-block i:nth-child(4) { background:#fff; }
.glyph-spade { font-size:30px; line-height:1; color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.25); }
.glyph-globe { position:relative; width:30px; height:30px; border-radius:50%; border:2.5px solid #fff; box-shadow:inset 0 1px 2px rgba(0,0,0,0.15); }
.glyph-globe::before { content:""; position:absolute; top:50%; left:-1px; right:-1px; height:2.5px; background:#fff; transform:translateY(-50%); }
.glyph-globe::after { content:""; position:absolute; left:50%; top:-1px; bottom:-1px; width:13px; border-radius:50%; border:2.5px solid #fff; transform:translateX(-50%); }

.card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card-name { font-size:17px; font-weight:600; letter-spacing:-0.02em; color:var(--text); }
.card-desc { font-size:14px; line-height:1.35; color:var(--text-2); text-wrap:pretty; }

.pill { display:inline-flex; align-items:center; flex:none; white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:0.01em; border-radius:999px; }
.pill--live { padding:3px 9px 3px 8px; color:var(--pill-live-color); background:var(--pill-live-bg); border:0.5px solid var(--pill-live-border); }
.pill--soon { padding:3px 9px; color:var(--pill-soon-color); background:var(--pill-soon-bg); border:0.5px solid var(--pill-soon-border); }
.pill-dot { width:6px; height:6px; border-radius:50%; background:#34c759; box-shadow:0 0 6px rgba(52,199,89,0.7); display:inline-block; margin-right:5px; }

.chevron { flex:none; color:var(--chevron); font-size:22px; font-weight:600; line-height:1; transition:transform .26s cubic-bezier(.2,.7,.3,1); }

/* ---- contact mail button (a card variant) ---- */
.mail-button { display:inline-flex; width:auto; min-height:0; padding:17px 28px; gap:0; justify-content:center; align-items:center; }
.mail-button .card-name { font-size:17px; font-weight:600; letter-spacing:-0.01em; }

/* ---- hover / press ---- */
@media (hover:hover) {
  .card:hover { transform:translateY(-3px); background:var(--card-bg-hover); border-color:var(--card-border-hover); box-shadow:var(--card-shadow-hover); }
  .card:hover .card-spec { opacity:1; }
  .card:hover .chevron { transform:translateX(4px); }
  .nav-link:hover { color:var(--text); }
}
.card:active { transform:scale(.985); }
.nav-link { transition:color .2s ease; }

/* ---- prose (about) ---- */
.page { padding:48px 4px 8px; }
.page-title {
  margin:0 0 28px; font-size:40px; font-weight:600; letter-spacing:-0.03em; line-height:1.18; padding-bottom:0.06em;
  background:var(--head-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prose p { margin:0 0 22px; max-width:38ch; font-size:18px; line-height:1.62; color:var(--text-2); text-wrap:pretty; }
.prose p:last-child { margin-bottom:0; }

/* ---- contact ---- */
.contact { padding:64px 4px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.contact-title {
  margin:0; font-size:42px; font-weight:600; letter-spacing:-0.03em; line-height:1.16; padding-bottom:0.06em;
  background:var(--head-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact-lead { margin:18px 0 36px; max-width:34ch; font-size:18px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }

/* ---- 404 ---- */
.notfound { padding:96px 4px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.notfound-code { margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); }
.notfound-title {
  margin:0; font-size:40px; font-weight:600; letter-spacing:-0.03em; line-height:1.16; padding-bottom:0.06em;
  background:var(--head-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.notfound-lead { margin:16px 0 36px; max-width:34ch; font-size:18px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }

/* ---- footer ---- */
.site-footer { margin-top:48px; padding:24px 8px 8px; text-align:center; border-top:0.5px solid var(--hairline); display:flex; flex-direction:column; align-items:center; gap:14px; }
.footer-tag { margin:0; font-size:14px; line-height:1.4; color:var(--text-2); }
.footer-nav { display:flex; gap:6px; align-items:center; }
.nav-link { font-size:13px; color:var(--text-3); text-decoration:none; padding:10px 8px; min-height:44px; display:flex; align-items:center; }
.nav-sep { color:var(--text-faint); }
.footer-copy { font-size:12px; color:var(--text-faint); }

/* ---- keyboard focus rings ---- */
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.card:focus-visible { outline-offset:2px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .card, .chevron {
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
  }
  .card:hover { transform:none; }
  .card:active { transform:none; }
  .card:hover .chevron { transform:none; }
  .card-spec { display:none; }
}