/* =========================================
   OpGlyph — Premium UI polish (mobile-first)
   Keeps your plumbing intact; only look/feel.
   ========================================= */

:root{
  /* Feedback (strong + premium) */
  --og-green-bg: rgba(0, 255, 140, .18);
  --og-green-br: rgba(0, 255, 140, .55);

  --og-yellow-bg: rgba(255, 200, 0, .18);
  --og-yellow-br: rgba(255, 200, 0, .55);

  --og-bad-bg: rgba(255,255,255,.03);
  --og-bad-br: rgba(255,255,255,.14);

  /* Locked digits */
  --og-locked-bg: rgba(120,160,255,.14);
  --og-locked-br: rgba(120,160,255,.34);
  --og-locked-outline: rgba(120,160,255,.55);

  /* Operators */
  --og-op-bg: rgba(255,255,255,.03);
  --og-op-br: rgba(255,255,255,.20);

  /* Selection ring (premium gold) */
  --og-sel-outline: rgba(216, 177, 90, .70);

  /* Target */
  --og-target-bg: rgba(180,255,220,.10);
  --og-target-br: rgba(180,255,220,.28);

  /* Dialog surfaces */
  --ogHelpBorder: rgba(255,255,255,.10);
  --ogHelpBg: rgba(255,255,255,.03);

  /* Premium card styling */
  --og-radius: 18px;
  --og-radius-sm: 14px;
  --og-card-br: rgba(255,255,255,.10);
  --og-card-bg: rgba(255,255,255,.04);
  --og-card-shadow: 0 18px 55px rgba(0,0,0,.38);

  /* Button styling */
  --og-btn-bg: rgba(255,255,255,.06);
  --og-btn-bg2: rgba(255,255,255,.10);
  --og-btn-br: rgba(255,255,255,.14);

  --og-press: translateY(1px) scale(.99);
}

:root[data-theme="light"]{
  /* Stronger in light mode so feedback is obvious */
  --og-green-bg: rgba(0, 160, 90, .18);
  --og-green-br: rgba(0, 160, 90, .46);

  --og-yellow-bg: rgba(200, 150, 0, .20);
  --og-yellow-br: rgba(200, 150, 0, .50);

  --og-bad-bg: rgba(11,15,20,.03);
  --og-bad-br: rgba(11,15,20,.14);

  --og-locked-bg: rgba(60,120,255,.10);
  --og-locked-br: rgba(60,120,255,.22);
  --og-locked-outline: rgba(60,120,255,.30);

  --og-op-bg: rgba(11,15,20,.03);
  --og-op-br: rgba(11,15,20,.16);

  --og-sel-outline: rgba(170, 130, 40, .60);

  --og-target-bg: rgba(0,160,90,.08);
  --og-target-br: rgba(0,160,90,.20);

  --ogHelpBorder: rgba(11,15,20,.12);
  --ogHelpBg: rgba(255,255,255,.65);

  --og-card-br: rgba(11,15,20,.12);
  --og-card-bg: rgba(255,255,255,.75);
  --og-card-shadow: 0 16px 42px rgba(0,0,0,.14);

  --og-btn-bg: rgba(11,15,20,.04);
  --og-btn-bg2: rgba(11,15,20,.06);
  --og-btn-br: rgba(11,15,20,.12);
}

/* tighter wrapping (page) */
header.wrap { padding-bottom: 8px; }
main.wrap   { padding-top: 8px; }

/* Premium tagline pill */
.sub{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: .92rem;
  line-height: 1.15;
  padding: .40rem .70rem;
  border-radius: 999px;
  letter-spacing: .01em;
  margin: 10px auto 0;
  max-width: 46ch;
  text-wrap: balance;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
:root[data-theme="light"] .sub{
  background: rgba(11,15,20,.03);
  border-color: rgba(11,15,20,.08);
}
@media (max-width:520px){
  .sub{ font-size: .86rem; max-width: 34ch; padding: .38rem .62rem; }
}

/* ============================
   GAME CARD — premium glass
   ============================ */

.card.ogCard{
  position: relative;
  padding: 12px 12px 14px;
  border-radius: var(--og-radius);
  background: var(--og-card-bg);
  border: 1px solid var(--og-card-br);
  box-shadow: var(--og-card-shadow);
  overflow: hidden;
}

/* subtle inner glow + top sheen */
.card.ogCard::before{
  content:"";
  position:absolute;
  inset: -2px;
  pointer-events:none;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(120,160,255,.18), transparent 55%),
    radial-gradient(800px 240px at 90% -20%, rgba(0,255,140,.12), transparent 55%),
    radial-gradient(600px 220px at 55% 115%, rgba(216,177,90,.10), transparent 55%);
  opacity: .9;
}
:root[data-theme="light"] .card.ogCard::before{
  opacity: .55;
}

@media (max-width:520px){
  .wrap { padding-left: 10px; padding-right: 10px; }
  .card.ogCard { padding: 10px 10px 12px; border-radius: 16px; }
}

.ogTopRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.ogMeta{ display:flex; flex-direction:column; gap:4px; }
.ogDate{ font-size: 13px; opacity: .92; }
.ogRule{ font-size: 12px; opacity: .78; }

/* Mode pills — tighter + premium */
.modeSeg{
  display:inline-flex;
  align-items:center;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  gap: 2px;
}
:root[data-theme="light"] .modeSeg{
  background: rgba(11,15,20,.03);
  border-color: rgba(11,15,20,.10);
}
.modeSeg .seg{
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  min-height: 34px;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.modeSeg .seg:hover{ transform: translateY(-1px); }
.modeSeg .seg:active{ transform: var(--og-press); }
.modeSeg .seg.on{
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
:root[data-theme="light"] .modeSeg .seg.on{
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
@media (max-width:520px){
  .modeSeg .seg{ padding: 8px 10px; font-size: 12px; min-height: 33px; }
}

/* Target — make it feel like a “badge” */
.ogTargetBox{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
  min-width: 76px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .ogTargetBox{
  border-color: rgba(11,15,20,.10);
  background: rgba(255,255,255,.55);
}
.ogTargetLabel{ font-size: 12px; opacity: .75; }
.ogTargetVal{ font-size: 20px; line-height: 1; letter-spacing: .02em; }

@media (max-width:520px){
  .ogTargetBox{ min-width: 64px; padding: 7px 9px; }
  .ogTargetVal{ font-size: 18px; }
}

.ogHint{
  position: relative;
  z-index: 1;
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.25;
}

/* Message — premium toast line */
.msg{
  position: relative;
  z-index: 1;
  min-height: 22px;
  margin: 2px 0 6px;
  font-size: 13px;
  line-height: 1.2;
  opacity: .95;
}

/* ============================
   BOARD
   ============================ */

.ogBoard{
  position: relative;
  z-index: 1;
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.ogRow{
  display:flex;
  justify-content:center;
  width: 100%;
}

/* strip (single line) */
.tokStrip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap: clamp(4px, 1.2vw, 9px);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 3px;
}

/* token base */
.tok{
  position: relative;
  width:  clamp(30px, 7.6vw, 52px);
  height: clamp(44px, 10.1vw, 71px);
  border-radius: 15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: clamp(17px, 4.8vw, 24px);
  line-height:1;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);

  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);

  user-select:none;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
:root[data-theme="light"] .tok{
  border: 1px solid rgba(11,15,20,.12);
  background: rgba(255,255,255,.70);
  box-shadow:
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.tok:active{ transform: var(--og-press); }

/* LOCKED digits + '=' */
.tok.locked{
  background: var(--og-locked-bg);
  border-color: var(--og-locked-br);
  box-shadow:
    inset 0 0 0 2px var(--og-locked-outline),
    0 10px 24px rgba(0,0,0,.16);
  font-weight: 800;
}

/* target tile */
.tok.target{
  width: auto;
  min-width: 72px;
  padding: 0 10px;

  height: clamp(44px, 10.1vw, 71px);
  font-size: clamp(16px, 4.4vw, 22px);

  background: var(--og-target-bg);
  border-color: var(--og-target-br);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.16);
}
:root[data-theme="light"] .tok.target{
  box-shadow:
    inset 0 0 0 2px rgba(11,15,20,.06),
    0 10px 18px rgba(0,0,0,.08);
}

/* operator slots */
button.tok.op{
  cursor:pointer;
  background: var(--og-op-bg);
  border: 1px solid var(--og-op-br);
  padding:0;
  font-weight: 900;
  letter-spacing: .2px;
}

/* Gold “?” placeholder in operator slots */
button.tok.op.placeholder{
  opacity: .98;
  color: rgba(255, 200, 0, .92);
  text-shadow: 0 0 14px rgba(255,200,0,.18);
}
:root[data-theme="light"] button.tok.op.placeholder{
  color: rgba(150, 105, 0, .95);
  text-shadow: 0 0 12px rgba(150,105,0,.12);
}

/* selection ring (gold) */
button.tok.op.sel{
  outline: 3px solid var(--og-sel-outline);
  outline-offset: 2px;
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* feedback */
.tok.g{ background: var(--og-green-bg) !important; border-color: var(--og-green-br) !important; }
.tok.y{ background: var(--og-yellow-bg) !important; border-color: var(--og-yellow-br) !important; }
.tok.b{ background: var(--og-bad-bg) !important; border-color: var(--og-bad-br) !important; opacity:.95; }

/* Small screens */
@media (max-width:420px){
  .tok{
    width:  clamp(28px, 8.2vw, 48px);
    height: clamp(41px, 10.8vw, 67px);
    border-radius: 14px;
  }
  .tok.target{ min-width: 56px; padding: 0 8px; }
}

/* ============================
   KEYPAD — premium grid
   ============================ */

.opPad{
  position: relative;
  z-index: 1;
  margin-top: 14px;

  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.opBtn{
  appearance:none;
  border: 1px solid var(--og-btn-br);
  background: linear-gradient(180deg, var(--og-btn-bg2), var(--og-btn-bg));
  color: inherit;

  height: 44px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .01em;

  box-shadow:
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06);

  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.opBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.opBtn:active{ transform: var(--og-press); }

.opBtn.ghost{
  background: rgba(255,255,255,.03);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.opBtn.primary{
  border-color: rgba(216,177,90,.32);
  background:
    radial-gradient(700px 200px at 40% 0%, rgba(216,177,90,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

#enterBtn{
  grid-column: 2 / span 2; /* makes Enter feel important */
  height: 46px;
}
#clearBtn{
  grid-column: 4;
}
.opPad button[data-op="bk"]{
  grid-column: 1;
}

/* second row layout: bk + enter + clear */
.opPad button[data-op="bk"],
#enterBtn,
#clearBtn{
  margin-top: 2px;
}

@media (max-width:520px){
  .opPad{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
  }
  .opBtn{
    height: 44px;
    border-radius: 13px;
    font-size: 15px;
  }
  #enterBtn{ height: 46px; }
}

/* misc row */
.ogMiniRow{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  font-size: 13px;
  opacity: .96;
}

/* ============================
   SEO example cards
   ============================ */

.ogExampleGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (max-width:720px){
  .ogExampleGrid{ grid-template-columns: 1fr; }
}
.ogExCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 10px 12px;
}
:root[data-theme="light"] .ogExCard{
  border: 1px solid rgba(11,15,20,.10);
  background: rgba(255,255,255,.55);
}
.ogExTitle{ font-size: 14px; font-weight: 850; }
.ogExP{ font-size: 13px; line-height: 1.25; }

/* ============================
   Dialogs — kill default sheet, center, premium
   ============================ */

.ogHelpDlg,
.ogShareDlg{
  padding: 0;
  border: 0;
  background: transparent;
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  margin: auto;
}

.ogHelpDlg::backdrop,
.ogShareDlg::backdrop{ background: rgba(0,0,0,.58); }
:root[data-theme="light"] .ogHelpDlg::backdrop,
:root[data-theme="light"] .ogShareDlg::backdrop{ background: rgba(0,0,0,.30); }

.ogHelpDlg .dlg,
.ogShareDlg .dlg{
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,18,24,.86);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
:root[data-theme="light"] .ogHelpDlg .dlg,
:root[data-theme="light"] .ogShareDlg .dlg{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,15,20,.12);
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Help content */
.ogHelp{
  padding: 12px 12px 14px;
  max-width: 620px;
}
.ogHelpScroll{
  max-height: 70vh;
  overflow: auto;
  padding-right: 2px;
}
.ogHelpBox{
  border: 1px solid var(--ogHelpBorder);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
}
:root[data-theme="light"] .ogHelpBox{
  background: rgba(11,15,20,.03);
}
.ogHelpKicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .80;
  margin-bottom: 6px;
}
.ogHelpList{ margin: 0; padding-left: 18px; }
.ogHelpList li{ margin: 6px 0; }

.ogHelpActions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Share dialog */
.ogShare{
  padding: 12px 12px 14px;
}
.ogShare textarea{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"] .ogShare textarea{
  border-color: rgba(11,15,20,.12);
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}
.ogShareActions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Make dialog X feel premium */
#helpOGX, #shareNowX{
  color: rgba(255,95,95,.95);
}
#helpOGX:hover, #shareNowX:hover{
  color: rgba(255,125,125,.98);
}

/* ============================
   Micro-interactions / motion
   ============================ */

.ogCard .tok {
  transform-style: preserve-3d;
  will-change: transform, opacity, box-shadow;
}

/* Flip reveal for the just-submitted row (operator tiles) */
.ogCard .tok.ogReveal {
  animation: ogFlipIn 420ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes ogFlipIn {
  0%   { opacity: 0; transform: perspective(800px) rotateY(78deg) scale(.98); }
  55%  { opacity: 1; transform: perspective(800px) rotateY(0deg)  scale(1.03); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg)  scale(1); }
}

/* Gold pulse for newly locked greens (active row) */
.ogCard .tok.ogNewSolved {
  animation: ogNewSolved 900ms ease-out both;
  animation-delay: var(--d, 0ms);
}

.ogCard .tok.ogNewSolved::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(circle at 35% 30%, rgba(216,177,90,.48), rgba(216,177,90,0) 60%);
  animation: ogGlow 900ms ease-out both;
  animation-delay: var(--d, 0ms);
}

@keyframes ogNewSolved {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(216,177,90,0); }
  25%  { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 18px rgba(216,177,90,.28); }
  55%  { transform: translateY(0) scale(1.01); box-shadow: 0 0 10px rgba(216,177,90,.16); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(216,177,90,0); }
}

@keyframes ogGlow {
  0%   { opacity:0; }
  30%  { opacity:1; }
  100% { opacity:0; }
}

/* Nudge shake on invalid submit */
.ogCard.ogNudge{
  animation: ogNudge 340ms ease-out both;
}
@keyframes ogNudge{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  55%{ transform: translateX(6px); }
  85%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ogCard .tok.ogReveal,
  .ogCard .tok.ogNewSolved,
  .ogCard .tok.ogNewSolved::after,
  .ogCard.ogNudge{
    animation: none !important;
  }
}

/* =========================
   OpGlyph SEO card premium spacing
   ========================= */

.ogSeoCard .learnGrid{ gap: 14px; }
@media (min-width: 720px){
  .ogSeoCard .learnGrid{ gap: 16px; }
}

.ogSeoCard .agTips{ margin-top: 14px; }

.ogSeoCard .agTipsGrid{
  display:grid;
  gap: 12px;
}
@media (min-width: 720px){
  .ogSeoCard .agTipsGrid{ gap: 14px; }
}

.ogSeoCard .agTipCard{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .ogSeoCard .agTipCard{
  border: 1px solid rgba(11,15,20,.10);
  background: rgba(11,15,20,.03);
}

.ogSeoCard .agTipTitle{ margin-bottom: 6px; }
.ogSeoCard .agTipCard p{ margin: 0; line-height: 1.55; }

.ogSeoCard .agTips.faq .agTipsGrid{ gap: 14px; }
@media (min-width: 720px){
  .ogSeoCard .agTips.faq .agTipsGrid{ gap: 16px; }
}
.ogSeoCard .agTips.faq .agTipCard{ padding: 14px 16px; }

.ogSeoCard .chips{ gap: 8px; }
.ogSeoCard .chip{ padding: 7px 10px; border-radius: 999px; }

/* A nice premium callout card for the left to right rule */
.ogSeoCard .ogRuleCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px 14px;
}
:root[data-theme="light"] .ogSeoCard .ogRuleCard{
  border: 1px solid rgba(11,15,20,.12);
  background: rgba(11,15,20,.02);
}

/* Example grid polish */
.ogSeoCard .ogExampleGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .ogSeoCard .ogExampleGrid{ grid-template-columns: 1fr; }
}
.ogSeoCard .ogExCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px 14px;
}
:root[data-theme="light"] .ogSeoCard .ogExCard{
  border: 1px solid rgba(11,15,20,.12);
  background: rgba(11,15,20,.02);
}
.ogSeoCard .ogExP{ line-height: 1.5; }