/* =========================================================
   Chirpy Games — Word Cross (Science / Geography / History / …)
   Fixed-paned layout + desktop clickability hardening
   (Keyboard height reduced by ~20% via --kb-scale)
   ========================================================= */

/* --- Root & shell ------------------------------------------------------- */
.cg-word-root{
  --ioskb-h: 0px;          /* raw keyboard height (set by JS or fallback) */
  --cg-kb-h: 0px;          /* legacy keyboard height (set by JS) */

  /* ↓ scale both keyboards down by 20% */
  --kb-scale: 0.8;
  --ioskb-h-actual: calc(var(--ioskb-h, 0px) * var(--kb-scale));
  --cg-kb-h-actual: calc(var(--cg-kb-h, 0px) * var(--kb-scale));

  --kb-gap: clamp(4px, 1.4vw, 8px);
  --kb-radius: clamp(10px, 2.6vw, 14px);
  --kb-pad-y: clamp(10px, 2.8vw, 14px);
  --kb-font: clamp(14px, 4.0vw, 18px);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* use *scaled* keyboard height for the bottom inset */
  bottom: calc(
    max(
      var(--ioskb-h-actual, 0px),
      var(--cg-kb-h-actual, 0px)
    ) + env(safe-area-inset-bottom, 0px)
  );

  width: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));

  /* Solid background so nothing (e.g., "Ready.") shows behind the grid */
  background: var(--cg-root-bg, var(--wp--preset--color--background, #fff));

  /* Fallbacks; JS will measure precisely */
  --cg-ribbon-h: 52px;
  --cg-status-h: 32px;
  --cg-top-gap: 2px;
  --cg-bot-gap: 2px;
}

.cg-word-root .cg-math-grid{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  color:#111827;
  font:500 14px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: inherit; /* keep the pane background under everything */
  gap: 8px;            /* a little breathing room between sections */
}

/* Stacking & click-through hygiene */
.cg-word-root .cg-grid{ overflow: hidden; z-index: 10; }
.cg-word-root .cg-math-grid{ overflow: visible; }

/* --- Top progress bar (5px, dynamic stripes) --------------------------- */
.cg-word-root .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;
  z-index: 20;
  pointer-events: none; /* never block clicks */
}
.cg-word-root .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;
  animation: cgWCStripes 1.1s linear infinite;
  pointer-events: none;
}
@keyframes cgWCStripes{
  from{ background-position:0 0, 0 0, 0 0; }
  to  { background-position:0 0, 40px 0, 0 0; }
}

/* --- Ribbon ------------------------------------------------------------- */
.cg-word-root .cg-ribbon{
  width:100%;
  box-sizing:border-box;              /* include padding/border in the 100% */
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* let sides shrink */
  align-items:center;
  gap:8px;
  color:#374151;
  background: linear-gradient(145deg, #fefce8, #fef9c3);
  border:1px solid #eab308;
  border-radius:10px;
  padding:8px 10px 6px 10px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  padding-left:max(10px, env(safe-area-inset-left, 0px));
  padding-right:max(10px, env(safe-area-inset-right, 0px));
}

/* allow grid children to actually shrink (prevents right-side overflow) */
.cg-word-root .cg-ribbon > * { min-width:0; }

/* optional: if the right area has multiple inline items, allow wrapping */
.cg-word-root .cg-ribbon .right {
  justify-self:end;
  display:flex;
  gap:8px;
  flex-wrap:wrap;     /* drop to next line on small screens instead of overflowing */
  min-width:0;
}

.cg-word-root .cg-rib-left,
.cg-word-root .cg-rib-right{ display:flex; align-items:center; gap:8px; }
.cg-word-root .cg-rib-left{ justify-content:flex-start; }
.cg-word-root .cg-rib-right{ justify-content:flex-end; }
.cg-word-root .cg-rib-center{ min-width:0; display:flex; align-items:center; justify-content:center; }

/* Badges / chips */
.cg-word-root .cg-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font:800 12px/1 ui-sans-serif,system-ui; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12); user-select:none;
}
.cg-word-root .cg-badge-round{ background: linear-gradient(135deg, #22c55e, #16a34a); }
.cg-word-root .cg-badge-total{ background: linear-gradient(135deg, #3b82f6, #6366f1); }

.cg-word-root .cg-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font:700 12px/1 ui-sans-serif,system-ui;
  background:#fff; color:#0f172a; border:1px solid #e2e8f0;
}
.cg-word-root .cg-chip-timer{ opacity:.95; }
.cg-word-root .cg-chip-score{
  border-color:#c4b5fd;
  background:linear-gradient(145deg,#ede9fe,#e9d5ff);
  color:#5b21b6;
}

/* Ribbon Status */
.cg-word-root .cg-rib-status{
  grid-column:1 / -1;
  width:100%;
  min-height:28px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#374151;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
}
.cg-word-root .cg-rib-status .tok{
  font-weight:800; font-size:13px; line-height:1;
  padding:2px 6px; border-radius:6px; border:1px solid transparent;
  background:#fff;
}
.cg-word-root .cg-rib-status .tok-num{ color:#0f172a; border-color:#e5e7eb; }
.cg-word-root .cg-rib-status .tok-op{
  color:#92400e;
  background:linear-gradient(145deg,#fde68a,#fef3c7);
  border-color:#facc15;
}
.cg-word-root .cg-rib-status .tok-eq{
  color:#0c4a6e;
  background:linear-gradient(145deg,#bfdbfe,#e0f2fe);
  border-color:#60a5fa;
}
.cg-word-root .cg-rib-status .tok-blank{
  color:#6b7280; background:#ffffff; border-style:dashed; border-color:#d1d5db;
}
.cg-word-root .cg-rib-status .tok-muted{
  color:#6b7280; background:transparent; border-color:transparent; padding:0;
}

/* Ribbon close (X) button */
.cg-word-root .cg-rib-close{
  -webkit-tap-highlight-color: transparent;
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; min-width:30px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#111827;
  font: 800 14px/1 ui-sans-serif,system-ui;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.cg-word-root .cg-rib-close:hover{ transform:translateY(-1px); background:#f9fafb; box-shadow:0 6px 14px rgba(0,0,0,.06); }
.cg-word-root .cg-rib-close:active{ transform:translateY(0); }
.cg-word-root .cg-rib-right{ gap:8px; } /* already present, keeps spacing */

/* Dark mode */
@media (prefers-color-scheme: dark){
  .cg-word-root .cg-rib-close{
    background:#0b1220; color:#e5e7eb; border-color:#374151;
    box-shadow:0 1px 2px rgba(0,0,0,.45);
  }
  .cg-word-root .cg-rib-close:hover{ background:#0f172a; }
}


/* --- Start gate --------------------------------------------------------- */
.cg-word-root .cg-start-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
}

/* Base button */
.cg-word-root .cg-btn{
  -webkit-tap-highlight-color:transparent; appearance:none; cursor:pointer;
  padding:10px 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-word-root .cg-btn:hover{ transform:translateY(-1px); background:#f9fafb; box-shadow:0 6px 14px rgba(0,0,0,.06); }
.cg-word-root .cg-btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cg-word-root .cg-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.cg-word-root .cg-btn.cg-primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.cg-word-root .cg-btn.cg-primary:hover{ background:#0284c7; border-color:#0284c7; }
.cg-word-root .cg-btn.cg-ghost{ background:#fff; color:#111827; border-color:#e5e7eb; }

/* Prominent Play */
.cg-word-root .cg-start{
  width:100%;
  font-size: clamp(20px, 5.5vw, 28px);
  padding: clamp(16px, 4.5vw, 22px) clamp(22px, 6.2vw, 32px);
  border-radius:16px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border:0;
  box-shadow:0 10px 26px rgba(37,99,235,.45), 0 2px 0 rgba(255,255,255,.25) inset;
  transition:transform .12s cubic-bezier(.25,.9,.3,1.6), box-shadow .2s ease, filter .2s ease;
}
.cg-word-root .cg-start:hover{ transform:translateY(-2px) scale(1.02); filter:saturate(1.05); }
.cg-word-root .cg-start:active{ transform:translateY(0) scale(0.99); }

/* Toolbar (always clickable, sits above grid) */
.cg-word-root .cg-bar{
  display:none;
  align-items:center; gap:8px;
  padding:6px 8px; border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(250,250,250,.9));
  border:1px solid rgba(229,231,235,.95);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  margin: 0;                /* avoid overlap gaps */
  position: relative;
  z-index: 40;              /* >>> grid & FX */
  pointer-events: auto;     /* make extra sure clicks land */
}
.cg-word-root .cg-bar .cg-btn{
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 3vw, 14px);
  font-size: clamp(12px, 3.4vw, 14px);
}

/* --- Grid --------------------------------------------------------------- */
.cg-word-root .cg-grid{
  --gap:1px;
  --rows: var(--r);
  --cols: var(--c);
  --cell-size: clamp(24px, calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), 44px);
  width:100%;
  display:none;
  gap:var(--gap);
  grid-template-rows: repeat(var(--rows), var(--cell, var(--cell-size)));
  grid-template-columns: repeat(var(--cols), var(--cell, var(--cell-size)));
  grid-auto-rows: var(--cell, var(--cell-size));
  grid-auto-columns: var(--cell, var(--cell-size));
  justify-content:center;
  align-content:center;
  position:relative;
  outline:none;
  padding:2px;                 /* unified with pinned layout */
  border-radius:12px;
  touch-action: manipulation;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  z-index: 10;                 /* sits under toolbar */
}

/* Hidden IME input anchor */
.cg-word-root .cg-ime-hidden{
  position: fixed; bottom: 0; left: 0;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none; border: 0; padding: 0; z-index: -1;
}

/* --- Cells -------------------------------------------------------------- */
.cg-word-root .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:900; font-size:16px; line-height:1; text-transform:uppercase;
  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, filter .18s ease;
  user-select:none; -webkit-user-select:none;
  aspect-ratio:1 / 1; height:auto; will-change:transform;
}
.cg-word-root .cg-cell.cg-focus{
  outline:3px solid #34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.55), 0 10px 22px rgba(16,185,129,.20);
  z-index:2;
}
.cg-word-root .cg-letter{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:linear-gradient(145deg,#bbf7d0,#f0fdf4);
  color:#065f46; border:1px solid #34d399; border-radius:10px;
}
.cg-word-root .cg-block{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  pointer-events:none;
  visibility:hidden;
}
.cg-word-root .cg-letter: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-word-root .cg-on{
  box-shadow: inset 0 0 0 2px #22c55e, 0 8px 16px rgba(34,197,94,.18);
  filter:saturate(1.05);
}
.cg-word-root .cg-solved .cg-letter{ color:#16a34a; }
.cg-word-root .cg-cell.cg-correct{
  background:#dcfce7 !important; border-color:#16a34a; box-shadow: inset 0 0 0 2px #16a34a;
}
.cg-word-root .cg-cell.cg-wrong{
  background:#fee2e2 !important; border-color:#dc2626; box-shadow: inset 0 0 0 2px #dc2626;
}
.cg-word-root .cg-cell.cg-empty{
  outline:2px solid #f59e0b; box-shadow: inset 0 0 0 2px #f59e0b;
}
.cg-word-root .cg-cell:focus,
.cg-word-root .cg-cell *:focus{ outline:none; }

/* Selected word highlight */
.cg-word-root .cg-cell.cg-word-on,
.cg-word-root .cg-word-selected .cg-cell{
  background: linear-gradient(145deg, #fef9c3, #fef3c7) !important;
  border-color: #facc15 !important;
  box-shadow: inset 0 0 0 2px #facc15, 0 4px 10px rgba(250,204,21,.28) !important;
}

/* Typed state */
.cg-word-root .cg-cell.is-typed{
  background:#ffffff !important;
  border-color:#e5e7eb !important;
  box-shadow: inset 0 0 0 2px #34d399;
}
.cg-word-root .cg-cell.is-typed .cg-letter{
  background:#ffffff !important;
  color:#0f172a;
  border-color:#e5e7eb;
}

/* Word numbers */
.cg-word-root .cg-cell .cg-num{
  position:absolute; top:3px; left:4px;
  font-size:9px; font-weight:700; line-height:1;
  color:#0f172a; opacity:.8; pointer-events:none; user-select:none;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* --- Gate & running state ---------------------------------------------- */
.cg-word-root .cg-math-grid .cg-start-wrap{ display:flex; }
.cg-word-root .cg-math-grid .cg-grid,
.cg-word-root .cg-math-grid .cg-bar{ display:none; }
.cg-word-root .cg-math-grid.is-running .cg-start-wrap{ display:none !important; }
.cg-word-root .cg-math-grid.is-running .cg-grid{ display:grid !important; }
.cg-word-root .cg-math-grid.is-running .cg-bar{ display:flex !important; }

/* --- FX canvas + toast -------------------------------------------------- */
.cg-word-root .cg-fx{
  position:absolute; inset:0; pointer-events:none; /* never steal clicks */
  z-index:100;   /* higher than grid to show FX, lower than toolbar */
  overflow:hidden;
}
.cg-word-root .cg-toast{
  position:absolute;
  left:50%; top:12%;
  transform:translateX(-50%) translateY(-40px) scale(1) rotate(-3deg);
  transform-origin:center;
  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,.28), 0 0 20px rgba(255,255,255,.7) inset;
  opacity:0; pointer-events:none; z-index:110;
  will-change:transform, opacity;
  transition:transform .5s cubic-bezier(.68,-0.55,.27,1.55), opacity .4s ease, box-shadow .4s ease;
}
.cg-word-root .cg-toast.on{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1.1) rotate(2deg);
  animation:partyBounce .8s ease-out both;
}
@keyframes partyBounce{
  0%   { transform: translateX(-50%) translateY(-50px) scale(.8)  rotate(-8deg); opacity:0; }
  60%  { transform: translateX(-50%) translateY(10px)  scale(1.2) rotate(6deg);  opacity:1; }
  80%  { transform: translateX(-50%) translateY(-4px)  scale(1.05) rotate(-3deg); }
  100% { transform: translateX(-50%) translateY(0)     scale(1.1)  rotate(2deg); }
}

/* --- Perfect modal (popup) --------------------------------------------- */
.cg-word-root .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; /* above everything */
  backdrop-filter: blur(6px);
}
.cg-word-root .cg-modal.on{ display:flex; }

.cg-word-root .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;
  z-index:10010;
}
.cg-word-root .cg-modal__content{
  font-size:22px; font-weight:800; color:#16a34a;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
@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); }
}

/* ========== Word emphasis & whole-word states =========================== */
.cg-word-root .cg-cell.cg-word-on{
  transform: scale(1.02);
  outline: 3px solid #facc15;
  box-shadow: 0 0 0 3px #facc15, 0 10px 24px rgba(250,204,21,.45) !important;
  z-index: 2;
}
.cg-word-root .cg-cell.cg-word-correct{
  background:#dcfce7 !important; border-color:#16a34a !important;
  box-shadow: inset 0 0 0 2px #16a34a, 0 6px 14px rgba(16,163,74,.18) !important;
}
.cg-word-root .cg-cell.cg-word-wrong{
  background:#fee2e2 !important; border-color:#dc2626 !important;
  box-shadow: inset 0 0 0 2px #dc2626, 0 6px 14px rgba(220,38,38,.2) !important;
}
.cg-word-root .cg-cell.cg-word-incomplete{
  background:#fef9c3 !important; border-color:#facc15 !important;
  box-shadow: inset 0 0 0 2px #facc15 !important;
}

/* Dark mode variants */
@media (prefers-color-scheme: dark){
  .cg-word-root .cg-ribbon{ background:linear-gradient(145deg,#111827,#0b1220); border-color:#334155; }
  .cg-word-root .cg-chip{ background:#0b1220; color:#e5e7eb; border-color:#374151; }
  .cg-word-root .cg-rib-status{ background:#052e2b; color:#a7f3d0; border-color:#065f46; }
  .cg-word-root .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);
  }
  .cg-word-root .cg-letter{
    background:linear-gradient(145deg,#064e3b,#065f46); color:#cffafe; border-color:#10b981;
  }
  .cg-word-root .cg-cell.cg-word-on{
    background: linear-gradient(145deg, #f59e0b, #fbbf24) !important;
    border-color:#f59e0b !important;
    box-shadow: inset 0 0 0 2px #fb923c, 0 4px 10px rgba(251,146,60,.35) !important;
    color:#0b1220;
  }
  .cg-word-root .cg-cell.is-typed,
  .cg-word-root .cg-cell.is-typed .cg-letter{
    background:#0b1220 !important; color:#e5e7eb; border-color:#334155;
  }
  .cg-word-root .cg-block{ background:transparent !important; }
  .cg-word-root .cg-cell.cg-word-correct{
    background:#052e1a !important; border-color:#16a34a !important;
    box-shadow: inset 0 0 0 2px #16a34a, 0 6px 14px rgba(16,163,74,.25) !important; color:#a7f3d0;
  }
  .cg-word-root .cg-cell.cg-word-wrong{
    background:#2b0b0b !important; border-color:#ef4444 !important;
    box-shadow: inset 0 0 0 2px #ef4444, 0 6px 14px rgba(239,68,68,.25) !important; color:#fecaca;
  }
  .cg-word-root .cg-cell.cg-word-incomplete{
    background:#3b2a05 !important; border-color:#f59e0b !important;
    box-shadow: inset 0 0 0 2px #f59e0b !important; color:#fde68a;
  }
}

/* ======================= iOS-style Software Keyboard ==================== */
.cg-ioskb{
  position:fixed; left:0; right:0; bottom: env(safe-area-inset-bottom, 0px);
  display:none;
  z-index:2147483646;

  /* ↓ use scaled min-height */
  min-height: var(--ioskb-h-actual);

  background: linear-gradient(180deg, #e7e7ea, #d6d7da);
  border-top: 1px solid #c7c8cc;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  touch-action: manipulation;
}
.cg-ioskb__inner{
  max-width: 700px;
  margin: 0 auto;
  padding: 8px clamp(8px, 3vw, 16px) calc(env(safe-area-inset-bottom) + 10px);
  display: grid;
  gap: var(--kb-gap);
}
.cg-ioskb-row{ display:grid; gap:var(--kb-gap); }
.cg-ioskb-row.row-1{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
.cg-ioskb-row.row-2{ grid-template-columns: repeat(9,  minmax(0, 1fr)); }
.cg-ioskb-row.row-3{ grid-template-columns: repeat(7, minmax(0, 1fr)) 1.3fr 1.8fr; }
.cg-ioskb-key{
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select:none;
  appearance: none; border: 1px solid #c9cbd1;
  border-radius: var(--kb-radius);
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  box-shadow: 0 1px 1px rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.05);
  font: 600 var(--kb-font)/1 -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#0f172a;
  padding: var(--kb-pad-y) 0;
  text-align: center;
  transition: transform .05s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.cg-ioskb-key:active{
  transform: scale(.985);
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.cg-ioskb-key.kb-backspace{ font-weight:700; }
.cg-ioskb-key.kb-submit{
  font-weight:800; color:#fff; border-color:#2563eb;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 6px rgba(37,99,235,.28), inset 0 -1px 0 rgba(255,255,255,.25);
}
.cg-ioskb-key.kb-submit:active{ background: linear-gradient(135deg, #2563eb, #1d4ed8); }

@media (max-width:360px){
  .cg-ioskb-row.row-3{ grid-template-columns: repeat(7, 1fr) 1fr 1.4fr; }
}
@media (prefers-color-scheme: dark){
  .cg-ioskb{
    background: linear-gradient(180deg, #0b0f15, #0a0e14);
    border-top-color:#222938; box-shadow: 0 -2px 18px rgba(0,0,0,.5);
  }
  .cg-ioskb-key{
    background: linear-gradient(180deg, #141923, #0f1420);
    border-color:#212838; color:#e6ebff;
    box-shadow: 0 1px 1px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03);
  }
  .cg-ioskb-key:active{
    background: linear-gradient(180deg, #101522, #0b101c);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
  }
  .cg-ioskb-key.kb-submit{
    border-color:#3b82f6; background: linear-gradient(135deg, #3b82f6, #2563eb);
    color:#f8fbff;
  }
}

/* VisualViewport-friendly fallback height — default to 0 on desktop;
   JS will set this only when the soft keyboard is actually shown */
@supports (height: 100svh) {
  .cg-word-root{ --ioskb-h: 0svh; }
}

/* Extra safety: on mouse/keyboard devices force both vars to zero */
@media (hover: hover) and (pointer: fine){
  .cg-word-root{ --ioskb-h: 0px; --cg-kb-h: 0px; }
}

/* ======================= Legacy Built-in Soft Keyboard ================== */
.cg-word-root .cg-kb{
  position:fixed; left:0; right:0; bottom: env(safe-area-inset-bottom, 0px);

  /* ↓ use scaled height */
  height: var(--cg-kb-h-actual);

  padding:8px clamp(8px, 3vw, 16px) calc(env(safe-area-inset-bottom) + 8px);
  background:#11141a;
  border-top:1px solid #232832;
  display:none; gap:var(--kb-gap); z-index:2147483646;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.cg-word-root .cg-kb.on{ display:grid; }
.cg-word-root .cg-kb .row{ display:grid; gap:var(--kb-gap); }
.cg-word-root .cg-kb .row:nth-child(1){ grid-template-columns:repeat(10,minmax(0,1fr)); }
.cg-word-root .cg-kb .row:nth-child(2){ grid-template-columns:repeat(9, minmax(0,1fr)); }
.cg-word-root .cg-kb .row:nth-child(3){ grid-template-columns:1.2fr repeat(8,minmax(0,1fr)) 1.2fr; }
.cg-word-root .cg-kb .row:nth-child(4){ grid-template-columns:1fr 1fr; }
.cg-word-root .cg-kb button{
  font:600 var(--kb-font)/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:var(--kb-pad-y) 0; border:0; border-radius:var(--kb-radius);
  background:#1b202b; color:#e7ecff; letter-spacing:.5px;
  transition:transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.cg-word-root .cg-kb button:active{ transform:scale(.98); background:#202635; }
.cg-word-root .cg-kb button.wide{ font-size:calc(var(--kb-font) + 1px); }
.cg-word-root .cg-kb button.pill{ padding:var(--kb-pad-y) 10px; border-radius:999px; }

@media (max-width:420px){
  .cg-word-root .cg-kb button.wide{ font-size:calc(var(--kb-font)); }
}
@media (prefers-color-scheme: dark){
  .cg-word-root .cg-kb{ background:#0b0f15; border-top-color:#222938; }
  .cg-word-root .cg-kb button{ background:#151a24; color:#e8edff; }
  .cg-word-root .cg-kb button:active{ background:#1b2130; }
}

/* ===== Pinned header + centered viewport & gate overlay ================= */
.cg-word-root .cg-ribbon{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  margin: 0;
  z-index: 2147483641;
  border-radius: 0 0 10px 10px;
}

.cg-word-root .cg-rib-status{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--cg-ribbon-h));
  left: 0; right: 0;
  margin: 0;
  z-index: 2147483641;
  border-radius: 0;
  border-top: 0;
}

.cg-word-root .cg-math-grid{
  padding-top: calc(
    env(safe-area-inset-top, 0px) + var(--cg-ribbon-h) + var(--cg-status-h) + var(--cg-top-gap)
  );
  padding-bottom: calc(
    var(--cg-bar-h, 72px) + env(safe-area-inset-bottom, 0px) + var(--cg-bot-gap)
  );
  padding-left: 2px;
  padding-right: 2px;
}

/* ensure grid box never tucks under */
.cg-word-root .cg-grid{
  margin: 0;
  box-sizing: border-box;
}

/* Play gate overlay: perfectly centered between status and toolbar */
.cg-word-root .cg-start-wrap{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--cg-ribbon-h) + var(--cg-status-h) + var(--cg-top-gap));
  bottom: calc(var(--cg-bar-h, 72px) + env(safe-area-inset-bottom, 0px) + var(--cg-bot-gap));
  left: 2px; right: 2px;
  margin: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2147483640; /* under ribbon/status; above grid */
}