/* =========================================================
   Chirpy Games — Math Grid (Rounds)
   Unified Ribbon + Status + Dynamic Loader (Clean)
   Full-screen stage, no conflicting width caps
   ========================================================= */

/* --- Layout shell ------------------------------------------------------- */
.cg-math-grid{
  position:relative;
  width:100%;
  max-width:none;                  /* was min(92vw,560px) — remove cap */
  margin:0;                        /* no boxed look */
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#111827;
  font:500 14px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
.cg-embed, .cg-embed .cg-math-grid, .cg-embed .cg-grid{ overflow:visible; }

/* --- Top progress bar (5px, dynamic stripes) --------------------------- */
.cg-progress-bar{
  position:absolute; inset:0 0 auto 0;
  height:5px; border-radius:0 0 6px 6px;
  background:rgba(0,0,0,.06); overflow:hidden;
}
.cg-progress{
  position:absolute; inset:0 auto auto 0; width:0%; height:100%;
  background:
    linear-gradient(90deg, rgba(59,130,246,.15), rgba(99,102,241,.15)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 8px, rgba(255,255,255,0) 8px 16px),
    linear-gradient(90deg,#3b82f6,#60a5fa);
  opacity:0; border-radius:inherit;
  box-shadow:0 0 10px rgba(59,130,246,.35), 0 0 20px rgba(99,102,241,.25);
  transition:width .35s cubic-bezier(.25,1,.5,1),opacity .2s ease;
}
.cg-progress.is-on{ opacity:1; animation:cgStripes 1.1s linear infinite; }
@keyframes cgStripes { from{ background-position:0 0, 0 0, 0 0; } to { background-position:0 0, 40px 0, 0 0; } }

/* Progress bar should never block clicks */
.cg-progress-bar,
.cg-progress { pointer-events: none; }

/* Z-index ladder so nothing steals input unexpectedly */
.cg-grid          { z-index: 2147483641; }
.cg-ribbon,
.cg-rib-status,
.cg-bar           { z-index: 2147483644; }
.cg-start-wrap    { z-index: 2147483645; }
.cg-fx,
.cg-toast         { z-index: 2147483646; }
.cg-modal         { z-index: 2147483647; }

.cg-fx { pointer-events: none; }


/* Pinned ribbon/status/toolbar — MATH GRID ONLY */
.cg-embed[data-cg-slug="math-grid"] .cg-ribbon{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);
  z-index: 2147483644;
  margin: 0;
  border-radius: 0 0 10px 10px;
}

.cg-embed[data-cg-slug="math-grid"] .cg-rib-status{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px); /* ~ ribbon height */
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);
  z-index: 2147483644;
  margin: 0;
  border-radius: 0;
}

.cg-embed[data-cg-slug="math-grid"] .cg-bar{
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);
  z-index: 2147483644;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(250,250,250,.9));
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}

/* Start overlay sits between ribbon and toolbar — MATH GRID ONLY */
.cg-embed[data-cg-slug="math-grid"] .cg-start-wrap{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px + 36px + 8px);
  bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 8px);
  left: 2px; right: 2px;
  display: flex !important;
  align-items: center; justify-content: center;
  z-index: 2147483645; /* above grid, under modal */
}



/* --- Grid --------------------------------------------------------------- */
.cg-grid{
  --gap:3px;
  --cell: clamp(24px, calc((100% - (var(--c) - 1) * var(--gap)) / var(--c)), 44px);
  width:100%;
  display:grid; gap:var(--gap);
  grid-template-rows: repeat(var(--r), var(--cell));
  grid-template-columns: repeat(var(--c), var(--cell));
  justify-content:center;
  position:relative;
}

/* --- Cells -------------------------------------------------------------- */
.cg-cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#ffffff,#f3f4f6);
  border:2px solid #e5e7eb; border-radius:12px;
  font-weight:800; font-size:16px; line-height:1.1;
  box-shadow:0 4px 6px rgba(0,0,0,.08), inset 0 -2px 4px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cg-number{
  position:absolute; top:2px; left:4px;
  font-weight:600; font-size:9px; line-height:1; color:#9ca3af; pointer-events:none;
}
.cg-block{ background:transparent; border:0; box-shadow:none; cursor:default; }

.cg-digit, .cg-op, .cg-eq{ cursor:pointer; }
.cg-digit:hover,.cg-eq:hover{ transform:scale(1.05); box-shadow:0 6px 10px rgba(0,0,0,.12), inset 0 -2px 6px rgba(0,0,0,.06); }
.cg-op:hover{ transform:scale(1.08); box-shadow:0 8px 14px rgba(0,0,0,.14), inset 0 -2px 6px rgba(0,0,0,.08); }

.cg-digit input{
  width:100%; height:100%; border:0; outline:0; background:transparent;
  text-align:center; color:#111827; font:900 18px/1.2 ui-sans-serif,system-ui;
}

/* Pastel categories */
.cg-op{
  background:linear-gradient(145deg,#fde68a,#fef3c7);
  color:#92400e; border:1px solid #facc15; border-radius:10px;
}
.cg-eq{
  background:linear-gradient(145deg,#bfdbfe,#e0f2fe);
  color:#0c4a6e; border:1px solid #60a5fa; border-radius:10px; font-weight:900;
}
.cg-digit{
  background:linear-gradient(145deg,#bbf7d0,#f0fdf4);
  color:#065f46; border:1px solid #34d399; border-radius:10px;
}

/* Givens + filled */
.cg-cell.cg-given{ background:#e5e7eb !important; border-color:#9ca3af !important; }
.cg-cell.cg-given input{ color:#111827; pointer-events:none; }
.cg-cell.cg-filled:not(.cg-given){ background:#fff !important; }

/* Feedback states */
.cg-on{ box-shadow: inset 0 0 0 2px #22c55e; }
.cg-solved .cg-digit input{ color:#16a34a; }
.cg-cell.cg-correct{ background:#dcfce7; border-color:#16a34a; box-shadow: inset 0 0 0 2px #16a34a; }
.cg-cell.cg-wrong{ background:#fee2e2; border-color:#dc2626; box-shadow: inset 0 0 0 2px #dc2626; }
.cg-cell.cg-empty{ outline:2px solid #f59e0b; box-shadow: inset 0 0 0 2px #f59e0b; }

/* --- Toolbar ------------------------------------------------------------ */
.cg-bar{
  display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap;
  padding:6px 8px; border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(250,250,250,.85));
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.cg-btn{
  -webkit-tap-highlight-color:transparent; appearance:none; cursor:pointer;
  padding:9px 14px; border-radius:10px; border:1px solid #e5e7eb;
  background:#fff; color:#111827; font:700 13px/1 ui-sans-serif,system-ui;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.cg-btn:hover{ transform:translateY(-1px); background:#f9fafb; box-shadow:0 6px 14px rgba(0,0,0,.06); }
.cg-btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cg-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.cg-btn.cg-primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.cg-btn.cg-primary:hover{ background:#0284c7; border-color:#0284c7; }
.cg-btn.cg-ghost{ background:#fff; color:#111827; border-color:#e5e7eb; }
.cg-btn.cg-big-start{
  font-size:20px; padding:14px 22px; border-radius:14px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.35);
}


/* --- Gate & running state ---------------------------------------------- */
.cg-math-grid .cg-grid,
.cg-math-grid .cg-bar { display: none; }             /* hidden until Start */

.cg-math-grid.is-running .cg-start-wrap { display: none !important; }
.cg-math-grid.is-running .cg-grid       { display: grid !important; }
.cg-math-grid.is-running .cg-bar        { display: flex !important; }


/* --- FX canvas + party toast ------------------------------------------- */
.cg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }

/* Toast */
.cg-toast {
  position: absolute;
  left: 50%; top: 12%;
  transform: translateX(-50%) translateY(-40px) scale(1) rotate(-3deg);
  padding: 20px 30px; border-radius: 28px;
  font: 900 18px/1.4 ui-sans-serif, system-ui;
  background: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4, #f472b6);
  color: #701a75;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28),
              0 0 20px rgba(255, 255, 255, 0.7) inset;
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: transform .5s cubic-bezier(.68, -0.55, .27, 1.55),
              opacity .4s ease,
              box-shadow .4s ease;
}
.cg-toast.on { opacity:1; transform: translateX(-50%) translateY(0) scale(1.1) rotate(2deg); }
.cg-toast.success { background: linear-gradient(135deg, #d1fae5, #6ee7b7, #34d399, #10b981); color: #064e3b; }
.cg-toast.error   { background: linear-gradient(135deg, #fee2e2, #fca5a5, #f87171, #ef4444); color: #7f1d1d; }
.cg-toast.info    { background: linear-gradient(135deg, #e0e7ff, #a5b4fc, #818cf8, #6366f1); color: #1e1b4b; }
.cg-toast.warning { background: linear-gradient(135deg, #ede9fe, #ddd6fe, #c4b5fd, #a78bfa); color: #312e81; }
.cg-toast::after {
  content:"✨🎉✨"; 
  position:absolute; top:-16px; right:-24px; font-size:26px;
  animation:sparkle 1.2s infinite ease-in-out alternate;
  text-shadow: 0 0 6px rgba(255,255,255,0.9);
}
@keyframes sparkle { from { transform: rotate(-15deg) scale(1); opacity:.7; } to { transform: rotate(15deg) scale(1.4); opacity:1; } }

/* --- Perfect modal ------------------------------------------------------ */
.cg-modal {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255,255,255,0.08), transparent 60%),
    rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(6px);
}
.cg-modal.on { display: flex; }
.cg-modal__dialog {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72));
  padding: 28px 36px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  animation: cgPartyPop .6s cubic-bezier(.68,-0.55,.27,1.55);
  border: 1px solid rgba(16,185,129,0.18);
  overflow: hidden;
}
.cg-modal__dialog::before,
.cg-modal__dialog::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(244,114,182,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, rgba(129,140,248,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 40% 80%, rgba(52,211,153,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 25%, rgba(250,204,21,.20) 0 6px, transparent 7px);
  filter: blur(0.2px);
  animation: confettiDrift 14s linear infinite;
  pointer-events: none;
}
.cg-modal__dialog::after { animation-duration: 18s; opacity: .6; }
.cg-modal__content { font-size: 22px; font-weight: 800; color: #16a34a; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cg-modal__content .tick { font-size: 56px; line-height: 1; animation: tickPop .7s cubic-bezier(.68,-0.55,.27,1.55), tickGlow 2s ease-out 1; text-shadow: 0 0 0 rgba(34,197,94,0); }
.cg-modal__headline { position: relative; }
.cg-modal__headline::after {
  content: "";
  position: absolute; left: 50%; bottom: -6px; width: 56%; height: 4px; transform: translateX(-50%);
  border-radius: 999px; background: linear-gradient(90deg, #a5b4fc, #34d399, #f472b6); opacity: .65;
}
.cg-modal__actions { display: flex; gap: 10px; margin-top: 6px; }
.cg-btn--primary {
  background: linear-gradient(135deg, #34d399, #22c55e);
  color: #052e1a;
  border-color: rgba(16,185,129,0.45);
}
@keyframes cgPartyPop { 0%{transform:scale(.72) rotate(-6deg) translateY(-30px);opacity:0}55%{transform:scale(1.08) rotate(5deg) translateY(8px);opacity:1}75%{transform:scale(.97) rotate(-2deg) translateY(-2px)}100%{transform:scale(1) rotate(0) translateY(0)} }
@keyframes tickPop { 0%{transform:scale(.6);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)} }
@keyframes tickGlow { 0%{text-shadow:0 0 0 rgba(34,197,94,0)}40%{text-shadow:0 0 18px rgba(34,197,94,.55)}100%{text-shadow:0 0 0 rgba(34,197,94,0)} }
@keyframes confettiDrift { 0%{transform:translateY(-6%) rotate(0)}50%{transform:translateY(6%) rotate(180deg)}100%{transform:translateY(-6%) rotate(360deg)} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cg-modal { backdrop-filter: none; }
  .cg-modal__dialog, .cg-modal__content .tick { animation: none; }
}

/* --- Micro animations --------------------------------------------------- */
.cg-shake{ animation:cg-shake .28s linear; }
@keyframes cg-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.cg-pulse{ animation:cg-pulse .32s ease; }
@keyframes cg-pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* --- Responsive tweaks -------------------------------------------------- */
@media (max-width:600px){
  .cg-grid{ --gap:2px; --cell: clamp(22px, calc((100% - (var(--c) - 1) * var(--gap)) / var(--c)), 36px); }
  .cg-cell{ font-size:14px; }
  .cg-number{ font-size:8px; }
  .cg-btn{ padding:8px 12px; border-radius:10px; font-size:12px; }
  .cg-rib-right{ gap:4px; }
}

/* --- Dark mode polish --------------------------------------------------- */
@media (prefers-color-scheme: dark){
  .cg-ribbon{ background:linear-gradient(145deg,#111827,#0b1220); border-color:#334155; }
  .cg-chip{ background:#0b1220; color:#e5e7eb; border-color:#374151; }
  .cg-rib-status{ background:#052e2b; color:#a7f3d0; border-color:#065f46; }
  .cg-bar{
    background:linear-gradient(145deg,rgba(31,41,55,.9),rgba(17,24,39,.85));
    border:1px solid rgba(75,85,99,.6); color:#e5e7eb;
    box-shadow:0 3px 10px rgba(0,0,0,.45);
  }
}

/* ===========================================
   FULLSCREEN STAGE (single, non-duplicated)
   =========================================== */
html, body { height: 100%; }

.cg-embed[data-cg-slug="math-grid"],
#cg-admin-preview {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;                       /* use viewport; JS handles inner sizing */
  background: #fff;
  z-index: 2147483640;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* iOS fill-available fallback */
@supports (-webkit-touch-callout: none) {
  .cg-embed[data-cg-slug="math-grid"],
  #cg-admin-preview { height: -webkit-fill-available; }
}

/* Core container inside the stage */
.cg-embed[data-cg-slug="math-grid"] .cg-math-grid,
#cg-admin-preview .cg-math-grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 16px
           calc(env(safe-area-inset-bottom, 0px) + 100px);
  background: transparent;
}

/* Pinned ribbon/status/toolbar matching JS expectations */
.cg-embed[data-cg-slug="math-grid"] .cg-ribbon,
#cg-admin-preview .cg-ribbon {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);            /* no hard 640px cap */
  z-index: 2147483642;
  margin: 0;
  border-radius: 0 0 10px 10px;
}

.cg-embed[data-cg-slug="math-grid"] .cg-rib-status,
#cg-admin-preview .cg-rib-status {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);
  z-index: 2147483642;
  border-radius: 0;
  margin: 0;
}

.cg-embed[data-cg-slug="math-grid"] .cg-bar,
#cg-admin-preview .cg-bar {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1200px);
  z-index: 2147483642;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(250,250,250,.9));
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}

/* Hide grid & toolbar until Start */
.cg-embed[data-cg-slug="math-grid"] .cg-grid,
.cg-embed[data-cg-slug="math-grid"] .cg-bar,
#cg-admin-preview .cg-grid,
#cg-admin-preview .cg-bar { display: none; }
.cg-embed[data-cg-slug="math-grid"] .cg-math-grid.is-running .cg-grid { display: grid !important; }
.cg-embed[data-cg-slug="math-grid"] .cg-math-grid.is-running .cg-bar { display: flex !important; }