:root {
      --brand-indigo:#2070A1; /* your site accent */
      --brand-cream:#FAF7F3;
      --brand-ink:#1F2A37;
      --brand-moss:#7CA982;
      --brand-rose:#E8B7C8;
      --card:#FFFFFF;
      --muted:#96A2B1;
      --shadow:0 6px 24px rgba(0,0,0,0.08);
      --radius:18px;
      --cream:#F6F1E8;
      --parch:#EFE7D9;
      --gold:#D8B87C;
      --coffee:#6B4A2F;
      --indigo:#2070A1;
      --ink:#1b1b1b;

      --success-bg:#E2F4E8;   /* from earlier */
      --error-bg:#FCE2E2;
      --ring: rgba(216,184,124,.45);
      --font-heading:"Fraunces", serif;
      --font-body:"Lora", serif;
    }
    body {
      margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--brand-ink); background:linear-gradient(180deg, var(--brand-cream), #FFFFFF 35%);
    }
    .app {
      min-height:100dvh; display:flex; flex-direction:column;
    }
    /* Header */
    .app-header {
      position:sticky; top:0; z-index:5;
      background:linear-gradient(180deg,#ffffffcc,#fff0);
      backdrop-filter: blur(6px);
      border-bottom:1px solid #f0f2f5;
    }
    .header-inner{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; }
    .brand-badge{
      width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
      background:radial-gradient(circle at 30% 30%, var(--brand-rose), #fff 70%);
      border:1px solid #f4d9e4;
      box-shadow: var(--shadow);
      font-size:1.1rem;
    }
    .title-cozy { font-weight:700; letter-spacing:.2px; }
    .subtitle-cozy { color:var(--muted); font-size:.9rem; }

    /* Top controls */
    .top-controls{ display:flex; align-items:center; gap:.5rem; padding:0 .75rem .75rem; margin-bottom: 1em;}
    .chip{ font-size:.8rem; padding:.35rem .6rem; border-radius:999px; border:1px solid #e5e9ef; background:#fff; color:#475569; }
    .chip--accent{ border-color: var(--brand-indigo); color:var(--brand-indigo); }
    .spacer{ flex:1; }
    .btn{ appearance:none; border:1px solid #e5e9ef; background:#fff; padding:.45rem .7rem; border-radius:12px; font-weight:600; }

    /* Difficulty tabs */
    .tabs { display:flex; gap:.5rem; padding:0 .75rem .75rem; overflow:auto; }
    .tab{ white-space:nowrap; padding:.45rem .8rem; border-radius:999px; border:1px solid #e5e9ef; background:#fff; font-weight:600; color:#5b6572; }
    .tab.active{ background: var(--brand-indigo); color:#fff; border-color: transparent; }

    /* Game card */
    .card { background:var(--card); border:1px solid #eef1f5; border-radius: var(--radius); margin:.5rem .75rem; box-shadow: var(--shadow); }
    .card-body-cozy{ padding:1rem; }

    .prompt-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
    .prompt { font-size:1.05rem; font-weight:700; color:#394552; }
    .hint-btn{ color:var(--brand-indigo); background: #eaf5fb; border: none; padding:.4rem .6rem; border-radius:10px; font-weight:700; }

    .scramble { display:flex; gap:.4rem; flex-wrap:wrap; margin:.9rem 0 .4rem; }
    .tile-cozy{ display:grid; place-items:center; width:44px; height:48px; border-radius:12px; background:#f7fafc; border:1px dashed #d9e1ea; font-weight:800; font-size:1.1rem; color:#18202a; }

    .answer-slots{ display:flex; gap:.35rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
    .slot{ width:44px; height:48px; border-radius:12px; border:2px solid #e5e9ef; background:#fff; box-shadow: inset 0 1px 0 #f7f8fa; display:grid; place-items:center; font-size:1.1rem; font-weight:800; color:#18202a; }

    .tool-row{ display:flex; gap:.5rem; }
    .tool{ flex:1; padding:.8rem; border-radius:12px; border:1px solid #e5e9ef; background:#fff; font-weight:700; }
    .tool.primary{ background: var(--brand-indigo); color:#fff; border-color: transparent; }

    /* On-screen keyboard */
    .kbd-wrap{ padding:.5rem .75rem 5rem; }
    .kbd{ display:grid; gap:.4rem; grid-template-columns: repeat(10, 1fr); }
    .key{ padding:.75rem 0; text-align:center; border-radius:12px; border:1px solid #e5e9ef; background:#fff; font-weight:700; }
    .key.wide{ grid-column: span 2; }

    /* Sticky footer nav */
    .app-footer{
      position:fixed; left:0; right:0; bottom:0; z-index:6;
      background:#ffffffee; backdrop-filter: blur(6px); border-top:1px solid #f0f2f5;
    }
    .footer-inner{ display:flex; justify-content:space-around; padding:.5rem .25rem; }
    .nav-btn{ display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:.8rem; color:#4b5563; text-decoration:none; }
    .nav-btn.active{ color:var(--brand-indigo); }

    /* Toast */
    .toast{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%); background:#111827; color:#fff; padding:.6rem .9rem; border-radius:12px; opacity:0; pointer-events:none; transition: .3s ease; }
    .toast.show{ opacity:1; }

    /* Dialog */
    .dialog-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; padding:1rem; z-index:20; }
    .dialog{ width:100%; max-width:420px; background:#fff; border-radius:20px; box-shadow: var(--shadow); border:1px solid #edf1f5; }
    .dialog h3{ margin:0; padding:1rem 1rem .25rem; font-size:1.25rem; }
    .dialog p{ margin:0; padding:0 1rem 1rem; color:#4b5563; }
    .dialog .dialog-actions{ display:flex; gap:.5rem; padding:0 1rem 1rem; }

    /* Larger screens */
    @media (min-width:768px){
      .app{ max-width:480px; margin:0 auto; border-left:1px solid #eef1f5; border-right:1px solid #eef1f5; background:#fff; }
      body{ background:linear-gradient(180deg, var(--brand-cream), #fdfcfb 40%); }
      .app-footer{ left:50%; right:auto; transform:translateX(-50%); width:480px; }
      .toast{ bottom:92px; }
    }

    .page { min-height:100dvh; display:grid; place-items:center; padding:2rem; }
.demo-card { background:var(--card); border:1px solid #eef1f5; border-radius:20px; padding:2rem; max-width:680px; width:100%; box-shadow: 0 8px 30px rgba(0,0,0,.06); }


/* ===== Overlay & Modal ===== */
.overlay {
position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:1.25rem; z-index:1000;
background: rgba(17,24,39,.5); /* slate-900/50 */
backdrop-filter: blur(3px);
}
.overlay[aria-hidden="false"] { display:flex; }


.modal {
position:relative; width:100%; max-width:520px; background:var(--card); border:1px solid #e8edf3; border-radius: var(--radius); box-shadow: var(--shadow);
}


.modal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem .75rem; }
.modal-title { font-size:1.35rem; font-weight:800; letter-spacing:.2px; }
.badge { font-size:.8rem; padding:.35rem .6rem; border-radius:999px; border:1px solid #e5e9ef; color:#374151; }


.modal-body { padding: .25rem 1.25rem 1.25rem; }
.lead { color:var(--muted); margin:.25rem 0 1rem; }


.cta {
display:flex; flex-direction:column; gap:.6rem; margin-top:.25rem;
}
.btn { appearance:none; border:1px solid #e5e9ef; background:#fff; color:#1f2937; padding:.85rem 1rem; border-radius:12px; font-weight:700; cursor:pointer; }
.btn.primary { background: var(--brand-indigo); color:#fff; border-color: transparent; }
.btn.ghost { background: #F3F7FB; color: var(--brand-indigo); border-color:#e5eef7; }


.terms { font-size:.8rem; color:#6b7280; margin-top:.75rem; }


.x { border:none; background:transparent; cursor:pointer; font-size:1.1rem; padding:.4rem; border-radius:10px; }
.x:focus-visible, .btn:focus-visible { outline:3px solid #cfe6f6; outline-offset:2px; }


/* Prevent scroll when overlay is open */
.no-scroll { overflow:hidden; }


/* Responsive niceties */
@media (min-width:768px){
.modal-split { display:grid; grid-template-columns: 1.15fr .85fr; }
.art { border-left:1px dashed #eaeef4; padding:1rem; display:flex; align-items:center; justify-content:center; }
}
.art .poster {
width:100%; max-width:180px; aspect-ratio: 3/4; border-radius:16px; border:1px solid #f0e4ec;
background: radial-gradient(120px 60px at 30% 25%, #E8B7C8 12%, #fff0 40%),
radial-gradient(120px 60px at 75% 65%, #b6d7c4 10%, #fff0 40%),
linear-gradient(180deg,#fff, #f9f3f7);
box-shadow: 0 10px 30px rgba(32,112,161,.15);
display:grid; place-items:center; color:#7f2d46; font-weight:800;
}
.timer {
    margin: 1em;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--brand-indigo);
    border-radius: 12px;
    padding: .6rem 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brand-indigo);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    letter-spacing: .5px;
    min-width: 120px;
    text-align: center;
  }
  .p-wrong {
    background-color: #FCE2E2 !important;
  }
  .p-right {
    background-color: #E2F4E8 !important;
  }
  .stats-card{
  max-width: 760px;
  margin: 20px auto;
  padding: 18px;
  background:
    radial-gradient(800px 120px at 12% 0%, rgba(216,184,124,.16), transparent 60%),
    radial-gradient(700px 120px at 88% 0%, rgba(216,184,124,.12), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--parch));
  border:1px solid #eadfcb;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.stats-card__title{
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--coffee);
  font-size: clamp(20px, 2.2vw, 24px);
}

/* ===== Grid ===== */
.stats-card__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat{
  background: #fff;
  border:1px solid #eadfcb;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  display: grid;
  gap: 6px;
}
.stat--wide{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
/*@media (max-width: 640px){
  .stats-card__grid{ grid-template-columns: 1fr; }
  .stat--wide{ grid-template-columns: 1fr; }
}*/

/* ===== Content ===== */
.stat__label{
  font-family: var(--font-body);
  font-size: 13px;
  color: #5a5a5a;
}
.stat__value{
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.2vw, 28px);
  color: var(--ink);
  line-height: 1.1;
}
.stat__value--accent{
  color: var(--coffee);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.stat__hint{
  font-family: var(--font-body);
  font-size: 12px;
  color:#7b7b7b;
}

/* ===== Progress bar (for Solved %) ===== */
.stat__bar{
  position: relative;
  height: 10px;
  background: #f2eee6;
  border:1px solid #eadfcb;
  border-radius: 999px;
  overflow: hidden;
}
.stat__bar span{
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--success-bg), #bfe9cf);
  border-right: 1px solid rgba(0,0,0,.05);
}

/* ===== Focus style for accessibility when tabbing ===== */
.stats-card:focus-within{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: calc(var(--radius) + 2px);
}