:root{
  --atb-mat-bg:#f2f2f2;
  --tile-font-family:"Cambria Math","STIX Two Math","STIXGeneral","Times New Roman",serif;
  --tile-font-size:35px;
  --tile-font-weight:600;
  --tile-border:2px solid #000;
  --tile-radius:4px;
  --tile-shadow:none;
  --tile-green:#3e9c4e;
  --tile-blue:#4f80d4;
  --tile-yellow:#f3ef4a;
  --tile-negative:#d13b3b;
  --tile-text-light:#fff;
  --tile-text-dark:#000;
  --atb-unit:40px;
  --atb-x:216px;
  --atb-x2:216px;
  --zp-glow-soft:rgba(247,215,91,.46);
}

.tile{
  position:absolute;
  left:0;
  top:0;
  width:var(--tileW);
  height:var(--tileH);
  transform:translate(var(--x),var(--y));
  perspective:900px;
  touch-action:none;
  user-select:none;
  transform-origin:center;
  transition:opacity 140ms ease, transform 170ms ease, filter 140ms ease;
  border:0;
  padding:0;
  background:transparent;
  appearance:none;
  cursor:grab;
  z-index:10;
}
.tile[data-kind="one"]{--tileW:40px;--tileH:40px;}
.tile[data-kind="x"]{--tileW:40px;--tileH:216px;}
.tile[data-kind="x"][data-orientation="h"]{--tileW:216px;--tileH:40px;}
.tile[data-kind="x2"]{--tileW:216px;--tileH:216px;}
.tile:active{cursor:grabbing;}
.tile.is-selected{z-index:22;}
.tile.is-dragging{z-index:40;filter:brightness(1.02);}

.tile__inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 120ms cubic-bezier(0.2,0.8,0.2,1) !important;
}
.tile.is-negative .tile__inner{transform:none;}
.tile__face{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--tile-radius);
  border:var(--tile-border);
  box-shadow:var(--tile-shadow);
  backface-visibility:hidden;
  font-family:var(--tile-font-family);
  font-weight:var(--tile-font-weight);
  color:var(--tile-text-dark);
  font-size:var(--tile-font-size);
  transition:opacity 140ms ease, box-shadow 140ms ease, outline-color 140ms ease, filter 140ms ease, background-color 140ms ease;
}
.tile__face--front{transform:rotateY(0deg);}
.tile__face--back{transform:rotateY(180deg);background:var(--tile-negative);color:var(--tile-text-dark);}
.tile[data-kind="x"] .tile__face--front{background:var(--tile-green);color:var(--tile-text-light);}
.tile[data-kind="x2"] .tile__face--front{background:var(--tile-blue);color:var(--tile-text-light);}
.tile[data-kind="one"] .tile__face--front{background:var(--tile-yellow);color:var(--tile-text-dark);}
.tile.is-selected .tile__face{
  outline:none;
  border-style:dashed;
  border-color:rgba(0,0,0,.82);
  box-shadow:none;
}
.tile.is-selected::after{content:none;}

.tile.is-zero-pair .tile__face,
.tile.is-zeroPairCandidate .tile__face{
  opacity:.46;
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 3px var(--zp-glow-soft),0 0 12px rgba(247,215,91,.24);
  filter:saturate(1.02) brightness(1.01);
}
.tile.is-zero-pair,
.tile.is-zeroPairCandidate{animation:zeroPairPulse 2.4s ease-in-out infinite;}
@keyframes zeroPairPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}

.tile__label,
.tilePreview__label,
.tile-var,
.tile-const,
.tile-sign,
.tile-exp{
  background:none;
  cursor:inherit;
  font-family:var(--tile-font-family) !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:1;
}
.tile__label,
.tilePreview__label{display:inline-flex;align-items:baseline;justify-content:center;gap:0;white-space:nowrap;font-size:var(--tile-font-size) !important;}
.tile-var{font-size:1em !important;}
.tile-const,.tile-sign{font-size:1em !important;}
.tile-exp{font-size:.63em !important;vertical-align:super;margin-left:1px;transform:translateY(-.42em);}
.tile[data-kind="x"] .tile__face--front .tile__label,
.tile[data-kind="x"] .tile__face--front .tile__label *,
.tile[data-kind="x2"] .tile__face--front .tile__label,
.tile[data-kind="x2"] .tile__face--front .tile__label *,
.tilePreview--xV .tilePreview__label,
.tilePreview--xV .tilePreview__label *,
.tilePreview--xH .tilePreview__label,
.tilePreview--xH .tilePreview__label *,
.tilePreview--x2 .tilePreview__label,
.tilePreview--x2 .tilePreview__label *{color:var(--tile-text-light) !important;}
.tile[data-kind="one"] .tile__face--front .tile__label,
.tile[data-kind="one"] .tile__face--front .tile__label *,
.tile.is-negative .tile__label,
.tile.is-negative .tile__label *,
.tilePreview--one .tilePreview__label,
.tilePreview--one .tilePreview__label *,
.tilePreview--neg .tilePreview__label,
.tilePreview--neg .tilePreview__label *{color:var(--tile-text-dark) !important;}

.tileGhost{
  position:absolute;
  left:0;top:0;
  width:var(--ghostW,40px);height:var(--ghostH,40px);
  transform:translate(var(--ghostX,0),var(--ghostY,0));
  border:2px dashed rgba(0,0,0,.45);
  border-radius:4px;
  background:rgba(0,0,0,.045);
  z-index:9;
  pointer-events:none;
}
.tilePreview{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:var(--tile-radius);
  border:var(--tile-border);
  box-shadow:var(--tile-shadow);
  font-family:var(--tile-font-family);
  font-weight:var(--tile-font-weight);
  color:var(--tile-text-dark);
  user-select:none;
  position:relative !important;
  z-index:1;
  background:var(--tile-yellow);
}
.tilePreview--one{width:40px !important;height:40px !important;background:var(--tile-yellow);color:var(--tile-text-dark);}
.tilePreview--x2{width:92px !important;height:92px !important;background:var(--tile-blue);color:var(--tile-text-light);}
.tilePreview--xV{width:40px !important;height:92px !important;background:var(--tile-green);color:var(--tile-text-light);}
.tilePreview--xH{width:92px !important;height:40px !important;background:var(--tile-green);color:var(--tile-text-light);}
.tilePreview--neg{background:var(--tile-negative) !important;color:var(--tile-text-dark) !important;}
.tilePreview__label{font-size:26px !important;}
.tilePreview--one .tilePreview__label{font-size:30px !important;}

.atbTileButtons{display:grid;grid-template-columns:repeat(2,92px);gap:12px;margin:0 auto;justify-content:center;text-align:center;justify-items:center;}
.atbTileBtn{
  height:76px;
  width:92px !important;
  min-height:76px !important;
  padding:0 !important;
  border-radius:0 !important;
  border:2px solid #000 !important;
  background:rgba(255,255,255,.92) !important;
  display:flex !important;
  align-items:center;
  justify-content:center !important;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.atbTileBtn:active{cursor:grabbing;transform:translateY(1px);}
.paletteBtn{border-radius:0;}
@media (max-width:760px){
  .tilePreview--x2{width:52px !important;height:52px !important;}
  .tilePreview--xV{width:26px !important;height:52px !important;}
  .tilePreview--xH{width:52px !important;height:26px !important;}
  .tilePreview--one{width:26px !important;height:26px !important;}
  .tilePreview__label{font-size:20px !important;}
  .tilePreview--one .tilePreview__label{font-size:20px !important;}
}
.tilePreview--x{width:40px;height:92px;background:var(--tile-green);color:#fff;font-size:25px;}

/* v2.1.3 usability correction: force visible original-style tiles in the new PWA engine */
.tile{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  display:block !important;
  width:var(--tileW,36px) !important;
  height:var(--tileH,36px) !important;
  min-width:0 !important;
  min-height:0 !important;
  transform:var(--live-transform,translate(var(--x,0px),var(--y,0px))) !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  appearance:none !important;
  touch-action:none !important;
  user-select:none !important;
  cursor:grab !important;
  z-index:20 !important;
}
.tile.is-dragging{
  transform:translate3d(
    calc(var(--x,0px) + var(--group-drag-x,0px)),
    calc(var(--y,0px) + var(--group-drag-y,0px)),
    0
  ) !important;
}
.tile[data-kind="one"],.tile--one{--tileW:36px;--tileH:36px;}
.tile[data-kind="x"],.tile--x{--tileW:36px;--tileH:144px;}
.tile[data-kind="x"][data-orientation="h"],.tile--x[data-orientation="h"]{--tileW:144px;--tileH:36px;}
.tile[data-kind="x2"],.tile--x2{--tileW:144px;--tileH:144px;}
.tile__inner{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
}
.tile__face{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
  border:2px solid #000 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  font-family:var(--tile-font-family) !important;
  font-size:32px !important;
  font-weight:400 !important;
  line-height:1 !important;
  opacity:1 !important;
  backface-visibility:visible !important;
  transform:none !important;
}
.tile__face--back{display:none !important;}
.tile[data-kind="one"] .tile__face,.tile--one .tile__face{background:var(--tile-yellow) !important;color:#000 !important;}
.tile[data-kind="x"] .tile__face,.tile--x .tile__face{background:var(--tile-green) !important;color:#fff !important;}
.tile[data-kind="x2"] .tile__face,.tile--x2 .tile__face{background:var(--tile-blue) !important;color:#fff !important;}
.tile.is-negative .tile__face{background:var(--tile-negative) !important;color:#000 !important;}
.tile__label,.tile__label *{color:inherit !important;background:transparent !important;font-family:var(--tile-font-family) !important;font-style:normal !important;line-height:1 !important;}
.tile-exp{font-size:.63em !important;vertical-align:super !important;transform:translateY(-.42em);display:inline-block;margin-left:1px;}
.tile.is-selected .tile__face{border:2px dashed rgba(0,0,0,.85) !important;outline:none !important;}
.tile.is-dragging{z-index:80 !important;cursor:grabbing !important;}
.tile.is-zero-pair .tile__face{opacity:.42 !important;filter:saturate(.95) brightness(1.05) !important;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 0 4px rgba(247,215,91,.42),0 0 18px rgba(247,215,91,.32) !important;}
.tileGhost{border:2px dashed rgba(0,0,0,.5) !important;background:rgba(0,0,0,.045) !important;border-radius:4px !important;}

.tilePreview{display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important;border:2px solid #000 !important;border-radius:4px !important;box-shadow:none !important;font-family:var(--tile-font-family) !important;font-weight:400 !important;line-height:1 !important;position:relative !important;overflow:hidden !important;}
.tilePreview--one{width:36px !important;height:36px !important;background:var(--tile-yellow) !important;color:#000 !important;}
.tilePreview--xV{width:36px !important;height:74px !important;background:var(--tile-green) !important;color:#fff !important;}
.tilePreview--xH{width:74px !important;height:36px !important;background:var(--tile-green) !important;color:#fff !important;}
.tilePreview--x2{width:74px !important;height:74px !important;background:var(--tile-blue) !important;color:#fff !important;}
.tilePreview--neg{background:var(--tile-negative) !important;color:#000 !important;}
.tilePreview__label,.tilePreview__label *{color:inherit !important;background:transparent !important;font-family:var(--tile-font-family) !important;font-style:normal !important;font-weight:400 !important;}
.tilePreview__label{font-size:24px !important;line-height:1 !important;}
.tilePreview--one .tilePreview__label{font-size:24px !important;}
.atbTileButtons{display:grid !important;grid-template-columns:repeat(2,94px) !important;gap:12px !important;justify-content:center !important;align-items:center !important;justify-items:center !important;}
.atbTileBtn{width:94px !important;height:86px !important;min-width:94px !important;min-height:86px !important;border:1px solid rgba(0,0,0,.35) !important;border-radius:0 !important;background:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;cursor:grab !important;}

/* v2.1.6 — remove elastic transform lag while preserving original visual styling */
.tile,
.tile.is-dragging,
.tile__inner,
.tile__face{
  transition:none !important;
}


/* v2.1.8/v2.1.10 — ensure x / −x rotation is centred visually as dimensions change. */
.tile[data-kind="x"],
.tile[data-kind="x"] .tile__inner,
.tile[data-kind="x"] .tile__face{
  transform-origin:50% 50% !important;
}

/* v2.1.12 — subtle in-place horizontal flip for board tiles, including the first flip and while dragging. */
.tile.is-flipping .tile__inner{
  transform-origin:50% 50% !important;
  animation:tileCentreFlip 220ms cubic-bezier(.22,.78,.22,1) both !important;
}
.tile.is-flipping.is-dragging .tile__inner{
  animation:tileCentreFlip 220ms cubic-bezier(.22,.78,.22,1) both !important;
}
@keyframes tileCentreFlip{
  0%{transform:scaleX(1)}
  48%{transform:scaleX(.08)}
  52%{transform:scaleX(.08)}
  100%{transform:scaleX(1)}
}


/* v2.1.13 — compact right-hand palette while keeping full board tile sizes unchanged. */
@media (min-width:1061px){
  .rightPalette .atbTileButtons{grid-template-columns:repeat(2,68px) !important;gap:9px !important;}
  .rightPalette .atbTileBtn{width:68px !important;height:72px !important;min-width:68px !important;min-height:72px !important;}
  .rightPalette .tilePreview--x2{width:56px !important;height:56px !important;}
  .rightPalette .tilePreview--xV{width:30px !important;height:60px !important;}
  .rightPalette .tilePreview--xH{width:60px !important;height:30px !important;}
  .rightPalette .tilePreview--one{width:30px !important;height:30px !important;}
  .rightPalette .tilePreview__label{font-size:20px !important;}
}


/* v2.1.14: subtle feedback when a marquee selection rotates as one compound object. */
.tile.is-group-rotating{
  transition:opacity 140ms ease, transform 170ms ease, filter 140ms ease !important;
}

/* v2.1.17: keep the brief rotation transition during drag; normal dragging remains transition-free. */
.tile.is-dragging.is-drag-rotate-transition{
  transition:transform 170ms cubic-bezier(.22,.78,.22,1) !important;
}