:root{
  --cell:60px; --gap:5px; --label:28px;

  /* LIGHT (default) */
  --blue:#1f64e0; --game-bg:#113a9a;
  --header-bg:#0b255f; --footer-bg:#0b255f; --header-text:#eef3ff;
  --page-bg:#0a1a3a; --page-text:#eef3ff;

  --win-ring:#52ff86; --win-glow:rgba(82,255,134,.55);
}

/* DARK overrides (toggle per .theme-dark on .c4-app) */
.c4-app.theme-dark{
  --page-bg:#050b18;
  --page-text:#dde7ff;
  --header-bg:#091a3b;
  --footer-bg:#091a3b;
  --game-bg:#0c1f4b;
  --blue:#0f4cd0;
}

/* Base */
.c4-app{position:relative;width:100%;min-height:60vh;background:var(--page-bg);color:var(--page-text);}
.c4-screen{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;display:none;}
.c4-screen.c4-active{display:block;opacity:1;transform:translateY(0);}

.c4-btn-primary,.c4-btn-secondary{
  padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);cursor:pointer;font-weight:700;color:var(--page-text);
  backdrop-filter: blur(2px);
}
.c4-btn-primary:hover,.c4-btn-secondary:hover{background: rgba(255,255,255,.12)}
.c4-btn-primary:disabled,.c4-btn-secondary:disabled{opacity:.5;cursor:not-allowed}

/* Setup */
.c4-setup-wrap{min-height:60vh;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center}
.c4-setup-wrap input{
  width:min(360px,90%);padding:10px 12px;border:1px solid rgba(255,255,255,.25);
  border-radius:8px;font-size:16px;background:rgba(255,255,255,.06);color:var(--page-text)
}
.c4-setup-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}