/* /switchglyph/switchglyph.css */
:root{
  --sw-board-bg: rgba(255,255,255,.02);
  --sw-board-br: rgba(255,255,255,.08);

  --sw-cell-bg: rgba(255,255,255,.05);
  --sw-cell-br: rgba(255,255,255,.14);
  --sw-cell-br2: rgba(255,255,255,.22);
  --sw-cell-shadow: 0 10px 24px rgba(0,0,0,.25);

  --sw-press: rgba(255,255,255,.10);

  --sw-good: rgba(0,255,140,.55);
  --sw-good2: rgba(0,255,140,.18);
  --sw-bad: rgba(255,70,70,.55);
  --sw-bad2: rgba(255,70,70,.14);

  --sw-chip-bg: rgba(255,255,255,.03);
  --sw-chip-br: rgba(255,255,255,.10);
  --sw-chip-glowA: rgba(0,255,140,.22);
  --sw-chip-glowB: rgba(120,160,255,.18);

  --sw-meter-bg: rgba(255,255,255,.06);
  --sw-meter-br: rgba(255,255,255,.10);
  --sw-meter-fillA: rgba(0,255,140,.35);
  --sw-meter-fillB: rgba(120,160,255,.22);

  /* NEW RULE flash */
  --sw-flash-bg: rgba(11,15,20,.72);
  --sw-flash-br: rgba(255,255,255,.12);
  --sw-flash-glowA: rgba(0,255,140,.22);
  --sw-flash-glowB: rgba(120,160,255,.18);
}

:root[data-theme="light"]{
  --sw-board-bg: rgba(11,15,20,.02);
  --sw-board-br: rgba(11,15,20,.12);

  --sw-cell-bg: rgba(255,255,255,.86);
  --sw-cell-br: rgba(11,15,20,.14);
  --sw-cell-br2: rgba(11,15,20,.20);
  --sw-cell-shadow: 0 10px 22px rgba(0,0,0,.10);

  --sw-press: rgba(11,15,20,.06);

  --sw-chip-bg: rgba(255,255,255,.74);
  --sw-chip-br: rgba(11,15,20,.14);
  --sw-chip-glowA: rgba(0,160,90,.16);
  --sw-chip-glowB: rgba(0,120,255,.12);

  --sw-meter-bg: rgba(11,15,20,.05);
  --sw-meter-br: rgba(11,15,20,.10);
  --sw-meter-fillA: rgba(0,160,90,.22);
  --sw-meter-fillB: rgba(0,120,255,.14);

  --sw-flash-bg: rgba(255,255,255,.88);
  --sw-flash-br: rgba(11,15,20,.16);
  --sw-flash-glowA: rgba(0,160,90,.16);
  --sw-flash-glowB: rgba(0,120,255,.12);
}

header.wrap { padding-bottom: 6px; }
main.wrap { padding-top: 6px; }
.card.swCard{ padding: 10px 10px 12px; }

@media (max-width:520px){
  .wrap { padding-left: 10px; padding-right: 10px; }
  .card.swCard{ padding: 8px 8px 10px; }
}

/* tagline pill */
.sub{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  line-height: 1.15;
  padding: .35rem .6rem;
  border-radius: 999px;
  letter-spacing: .01em;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  max-width: 42ch;
  text-wrap: balance;
  margin: 8px auto 0;
}
:root[data-theme="dark"] .sub{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
@media (max-width:520px){
  .sub{ font-size: .86rem; max-width: 34ch; }
}

/* Desktop layout: center meta column, keep stats on right */
.swTopRow{
  display:grid;
  grid-template-columns: 1fr minmax(340px, 580px) auto;
  align-items:flex-end;
  gap:10px;
  margin-bottom: 10px;
}
.swMeta{ grid-column: 2; display:flex; flex-direction:column; gap:8px; }
.swStats{ grid-column: 3; }

.swModeLine{ font-size: 13px; opacity: .9; }
.swRuleDesc{ font-size: 12px; opacity: .75; max-width: 56ch; }

.swDurRow{ display:flex; gap:6px; flex-wrap:wrap; }

.swRuleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.swRuleChip{
  position: relative;
  display:flex;
  align-items:baseline;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--sw-chip-br);
  background: var(--sw-chip-bg);
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  min-width: 260px;
}
.swRuleKicker{
  opacity:.75;
  letter-spacing:.12em;
  font-size: 12px;
}
.swRuleText{
  font-size: 19px;
  letter-spacing:.02em;
  font-weight: 900;
}

.swRuleChip::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px circle at 20% 35%, var(--sw-chip-glowA), transparent 55%),
    radial-gradient(520px circle at 80% 65%, var(--sw-chip-glowB), transparent 55%);
  opacity: .55;
  filter: blur(12px);
  animation: swChipFloat 3.2s ease-in-out infinite;
}
:root[data-theme="light"] .swRuleChip::before{
  opacity:.28;
  filter: blur(14px);
}
@keyframes swChipFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
.swRuleChip > *{ position: relative; z-index: 1; }

.swRuleChip.swSwitch{
  animation: swSwitchPop 220ms ease-out;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--sw-meter-fillA), transparent 70%),
    0 10px 22px rgba(0,0,0,.10);
}
@keyframes swSwitchPop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}

.swSwitchHint{
  font-size: 12px;
  opacity: .86;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--sw-chip-br);
  background: var(--sw-chip-bg);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  white-space: nowrap;
}

.swStats{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.swStat{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width: 78px;
}
.swStatVal{ font-size: 18px; line-height: 1; }

.swMeter{
  height: 10px;
  border-radius: 999px;
  background: var(--sw-meter-bg);
  border: 1px solid var(--sw-meter-br);
  overflow: hidden;
  margin: 8px 0 10px;
}
.swMeterFill{
  height: 100%;
  width: 0%;
  background:
    radial-gradient(420px circle at 25% 50%, var(--sw-meter-fillA), transparent 58%),
    radial-gradient(420px circle at 80% 50%, var(--sw-meter-fillB), transparent 60%);
  transition: width 90ms linear;
}

.swBoardWrap{
  display:flex;
  justify-content:center;
  padding-top: 2px;
}

.swBoardStack{
  position: relative;
  width: clamp(290px, 92vw, 520px);
  aspect-ratio: 1 / 1;
}

.swBoardStack.switching::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background:
    radial-gradient(640px circle at 25% 40%, var(--sw-flash-glowA), transparent 60%),
    radial-gradient(640px circle at 78% 65%, var(--sw-flash-glowB), transparent 62%);
  opacity: 0;
  filter: blur(10px);
  animation: swSwitchRing 520ms ease-out;
  pointer-events:none;
}
@keyframes swSwitchRing{
  0%   { opacity: 0; transform: scale(.985); }
  20%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.015); }
}

.swBoard{
  position:absolute;
  inset:0;
  border-radius: 18px;
  user-select:none;

  background: var(--sw-board-bg);
  border: 1px solid var(--sw-board-br);
  overflow: hidden;

  display:grid;
  gap: 8px;
  padding: 10px;
}
@media (max-width:520px){
  .swBoard{ gap: 7px; padding: 9px; }
}
@media (max-width:360px){
  .swBoard{ gap: 6px; padding: 8px; }
}

.swRuleFlash{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition: opacity 180ms ease, transform 220ms ease;
}
.swRuleFlash.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.swFlashCard{
  position: relative;
  max-width: min(92%, 420px);
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--sw-flash-br);
  background: var(--sw-flash-bg);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}
.swFlashCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px circle at 18% 35%, var(--sw-flash-glowA), transparent 58%),
    radial-gradient(520px circle at 82% 65%, var(--sw-flash-glowB), transparent 60%);
  opacity: .65;
  filter: blur(14px);
}
:root[data-theme="light"] .swFlashCard::before{
  opacity: .30;
}
.swFlashCard > *{ position: relative; z-index: 1; }

.swFlashKicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.swFlashText{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .02em;
}

.swCell{
  border-radius: 16px;
  background: var(--sw-cell-bg);
  border: 1px solid var(--sw-cell-br);
  box-shadow: var(--sw-cell-shadow);

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

  cursor:pointer;
  -webkit-tap-highlight-color: transparent;

  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  color: inherit;
}
.swCell:hover{ border-color: var(--sw-cell-br2); }
.swCell:active{
  transform: translateY(1px) scale(.995);
  background: color-mix(in oklab, var(--sw-cell-bg), var(--sw-press) 22%);
}
.swCell:focus-visible{
  outline: 3px solid color-mix(in oklab, rgba(120,160,255,.75), transparent 55%);
  outline-offset: 2px;
}

.swCell.hit{
  opacity: .55;
  filter: saturate(.9);
}
.swCell.good{
  border-color: color-mix(in oklab, var(--sw-good), white 10%);
  box-shadow: 0 0 0 3px var(--sw-good2), var(--sw-cell-shadow);
  animation: swPop 160ms ease-out;
}
.swCell.bad{
  border-color: color-mix(in oklab, var(--sw-bad), white 8%);
  box-shadow: 0 0 0 3px var(--sw-bad2), var(--sw-cell-shadow);
  animation: swShake 220ms ease-out;
}

@keyframes swPop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}
@keyframes swShake{
  0%{ transform: translateX(0); }
  30%{ transform: translateX(-2px); }
  60%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

.swBar{
  margin-top: 12px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.swMiniRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  font-size: 13px;
}

/* Play more games */
.swMoreWrap{ margin-top: 12px; display:flex; justify-content:center; }
.swMoreBtn{
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  animation: swMorePulse 2.8s ease-in-out infinite;
}
@keyframes swMorePulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce){
  .swMoreBtn{ animation:none !important; }
}

/* Help dialog */
.swHelpDlg{
  padding: 0;
  border: 0;
  background: transparent;
  width: fit-content;
  max-width: calc(100vw - 24px);
  margin: auto;
}
.swHelpDlg::backdrop{ background: rgba(0,0,0,.55); }
:root[data-theme="light"] .swHelpDlg::backdrop{ background: rgba(0,0,0,.35); }

.swHelp{ padding: 10px 10px 12px; max-width: 560px; }
.swHelpScroll{ max-height: 70vh; overflow:auto; padding-right:2px; }
.swHelpBox{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 9px 10px;
  margin: 8px 0;
}
:root[data-theme="light"] .swHelpBox{
  border: 1px solid rgba(11,15,20,.12);
  background: rgba(11,15,20,.02);
}
.swHelpKicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 6px;
}
.swHelpList{ margin:0; padding-left:18px; }
.swHelpList li{ margin:5px 0; }
.swHelpActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top: 8px;
}

/* Mobile tightening + keep segments on ONE row */
@media (max-width:720px){
  .swTopRow{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .swStats{
    justify-content: space-between;
  }
  .swStat{
    text-align: center;
    flex: 1;
    min-width: 0;
  }
  .swRuleRow{
    display:grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .swRuleChip{
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  .swRuleText{ font-size: 21px; }
  .swSwitchHint{
    width: 100%;
    text-align: center;
    justify-self: center;
  }
}

@media (max-width:640px){
  .modeSeg, .swDurRow{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .modeSeg .seg, .swDurRow .seg{
    width: 100%;
    justify-content: center;
  }
}

/* Desktop: center the instruction/rule content inside the centered meta column */
@media (min-width:900px){
  .swMeta{ align-items: center; }
  .modeSeg{ justify-content: center; }
  .swDurRow{ justify-content: center; }
  .swRuleRow{ justify-content: center; }
  .swModeLine, .swRuleDesc{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .swCell{ transition:none !important; }
  .swRuleChip::before{ animation:none !important; }
  .swRuleFlash{ transition:none !important; }
  .swBoardStack.switching::after{ animation:none !important; opacity:0 !important; }
}



/* Desktop: keep meta column centered, but left-align the two segment rows */
@media (min-width: 900px){
  .modeSeg,
  .swDurRow{
    width: 100%;
    justify-content: flex-start;
  }
}