/* ═══════════════════════════════════════════════════
   ELEMENTS 2048 — Game Styles
   EnjoyChemistry

   Element tile colours: family (periodic-table column) sets
   the hue, PERIOD sets the lightness. Both axes are keyed to
   real chemistry, so a period-4 tile looks like a period-4
   tile whether it is potassium, calcium or scandium.

   The lightness ramp is deliberately front-loaded. Periods 1
   to 4 are the range a student realistically reaches, so they
   take the whole useful spread; periods 5 to 7 are compressed
   into the dark tail because almost nobody will ever see them.
   The symbol colour flips from ink to white at period 4, which
   makes crossing into the d-block a visible event.

   Every symbol clears WCAG AA against its tile. The measured
   ratio is in the comment beside each pair; worst case is
   5.22:1. Do not hand-edit these values — regenerate them
   from the swatch sheet so the contrast stays verified.

   Tile colours are identical in light and dark themes on
   purpose. A chromium tile should be the same colour whichever
   theme the room calls for; only the chrome changes.

   These are fixed tokens and are deliberately NOT derived from
   --primary. --primary is swapped by the scheme picker, and a
   family hue that moved when a student changed colour scheme
   would be a chemistry bug.
   ═══════════════════════════════════════════════════ */

:root{
  --el-hydrogen-p1: #FAFAFA; --el-hydrogen-p1-fg: #111827;  /* 17.00:1 */
  --el-alkali-p2: #C8B3E4; --el-alkali-p2-fg: #111827;  /* 9.31:1 */
  --el-alkali-p3: #A886D5; --el-alkali-p3-fg: #111827;  /* 5.94:1 */
  --el-alkali-p4: #8453C3; --el-alkali-p4-fg: #FFFFFF;  /* 5.24:1 */
  --el-alkali-p5: #6A3BA7; --el-alkali-p5-fg: #FFFFFF;  /* 7.51:1 */
  --el-alkali-p6: #542E84; --el-alkali-p6-fg: #FFFFFF;  /* 10.00:1 */
  --el-alkali-p7: #402466; --el-alkali-p7-fg: #FFFFFF;  /* 12.63:1 */
  --el-alkaline-p2: #B0B9E8; --el-alkaline-p2-fg: #111827;  /* 9.25:1 */
  --el-alkaline-p3: #8291DB; --el-alkaline-p3-fg: #111827;  /* 5.93:1 */
  --el-alkaline-p4: #4E63CC; --el-alkaline-p4-fg: #FFFFFF;  /* 5.28:1 */
  --el-alkaline-p5: #354AB6; --el-alkaline-p5-fg: #FFFFFF;  /* 7.48:1 */
  --el-alkaline-p6: #293A8E; --el-alkaline-p6-fg: #FFFFFF;  /* 10.05:1 */
  --el-alkaline-p7: #202D6E; --el-alkaline-p7-fg: #FFFFFF;  /* 12.64:1 */
  --el-transition-p4: #25758D; --el-transition-p4-fg: #FFFFFF;  /* 5.24:1 */
  --el-transition-p5: #1D5C6F; --el-transition-p5-fg: #FFFFFF;  /* 7.47:1 */
  --el-transition-p6: #174857; --el-transition-p6-fg: #FFFFFF;  /* 10.00:1 */
  --el-transition-p7: #123742; --el-transition-p7-fg: #FFFFFF;  /* 12.72:1 */
  --el-boron-p2: #65CEA8; --el-boron-p2-fg: #111827;  /* 9.25:1 */
  --el-boron-p3: #35A77D; --el-boron-p3-fg: #111827;  /* 5.89:1 */
  --el-boron-p4: #277A5B; --el-boron-p4-fg: #FFFFFF;  /* 5.22:1 */
  --el-boron-p5: #1E5F47; --el-boron-p5-fg: #FFFFFF;  /* 7.55:1 */
  --el-boron-p6: #184B38; --el-boron-p6-fg: #FFFFFF;  /* 9.99:1 */
  --el-boron-p7: #123A2C; --el-boron-p7-fg: #FFFFFF;  /* 12.60:1 */
  --el-carbon-p2: #7DCE7F; --el-carbon-p2-fg: #111827;  /* 9.30:1 */
  --el-carbon-p3: #40A944; --el-carbon-p3-fg: #111827;  /* 5.89:1 */
  --el-carbon-p4: #2F7B31; --el-carbon-p4-fg: #FFFFFF;  /* 5.25:1 */
  --el-carbon-p5: #256127; --el-carbon-p5-fg: #FFFFFF;  /* 7.45:1 */
  --el-carbon-p6: #1D4C1E; --el-carbon-p6-fg: #FFFFFF;  /* 9.98:1 */
  --el-carbon-p7: #163A17; --el-carbon-p7-fg: #FFFFFF;  /* 12.71:1 */
  --el-nitrogen-p2: #9CCA5F; --el-nitrogen-p2-fg: #111827;  /* 9.32:1 */
  --el-nitrogen-p3: #74A336; --el-nitrogen-p3-fg: #111827;  /* 5.94:1 */
  --el-nitrogen-p4: #547627; --el-nitrogen-p4-fg: #FFFFFF;  /* 5.25:1 */
  --el-nitrogen-p5: #425D1F; --el-nitrogen-p5-fg: #FFFFFF;  /* 7.45:1 */
  --el-nitrogen-p6: #344918; --el-nitrogen-p6-fg: #FFFFFF;  /* 9.94:1 */
  --el-nitrogen-p7: #283813; --el-nitrogen-p7-fg: #FFFFFF;  /* 12.61:1 */
  --el-oxygen-p2: #DABA18; --el-oxygen-p2-fg: #111827;  /* 9.31:1 */
  --el-oxygen-p3: #AD9413; --el-oxygen-p3-fg: #111827;  /* 5.93:1 */
  --el-oxygen-p4: #7D6B0E; --el-oxygen-p4-fg: #FFFFFF;  /* 5.27:1 */
  --el-oxygen-p5: #63540B; --el-oxygen-p5-fg: #FFFFFF;  /* 7.49:1 */
  --el-oxygen-p6: #4E4209; --el-oxygen-p6-fg: #FFFFFF;  /* 9.97:1 */
  --el-oxygen-p7: #3C3307; --el-oxygen-p7-fg: #FFFFFF;  /* 12.58:1 */
  --el-halogen-p2: #ECAD9A; --el-halogen-p2-fg: #111827;  /* 9.30:1 */
  --el-halogen-p3: #DF7859; --el-halogen-p3-fg: #111827;  /* 5.89:1 */
  --el-halogen-p4: #BA4723; --el-halogen-p4-fg: #FFFFFF;  /* 5.23:1 */
  --el-halogen-p5: #92371C; --el-halogen-p5-fg: #FFFFFF;  /* 7.54:1 */
  --el-halogen-p6: #732B16; --el-halogen-p6-fg: #FFFFFF;  /* 10.07:1 */
  --el-halogen-p7: #592211; --el-halogen-p7-fg: #FFFFFF;  /* 12.64:1 */
  --el-noble-p1: #F3D9E3; --el-noble-p1-fg: #111827;  /* 13.39:1 */
  --el-noble-p2: #E5ACC1; --el-noble-p2-fg: #111827;  /* 9.29:1 */
  --el-noble-p3: #D5799B; --el-noble-p3-fg: #111827;  /* 5.94:1 */
  --el-noble-p4: #BD3C6B; --el-noble-p4-fg: #FFFFFF;  /* 5.22:1 */
  --el-noble-p5: #942F54; --el-noble-p5-fg: #FFFFFF;  /* 7.52:1 */
  --el-noble-p6: #752542; --el-noble-p6-fg: #FFFFFF;  /* 10.00:1 */
  --el-noble-p7: #5B1D34; --el-noble-p7-fg: #FFFFFF;  /* 12.57:1 */
  --el-lanthanide-p6: #692867; --el-lanthanide-p6-fg: #FFFFFF;  /* 10.00:1 */
  --el-actinide-p7: #36322E; --el-actinide-p7-fg: #FFFFFF;  /* 12.71:1 */

  /* Tile layout, as a fraction of tile size. Because every value is
     relative, one set of numbers holds from 4x4 down to 8x8. */
  --tile-z-size: 0.22;
  --tile-z-inset-x: 0.09;
  --tile-z-inset-y: 0.16;
  --tile-sym-nudge: -0.05;
  --tile-sym-size: 0.42;
}

/* ── Buttons ───────────────────────────────────────────
   .btn-primary is not in layout.css; every app defines its own,
   per the CSS-duplication convention. Font size is the canonical
   `base` step. */
.btn-primary{
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--radius-sm); padding:.55rem 1.2rem; cursor:pointer;
  font-size:0.85rem; font-weight:600; font-family:var(--font);
  white-space:nowrap; box-shadow:var(--shadow-primary);
  transition:all var(--transition);
}
.btn-primary:hover{ background:var(--primary-hover); transform:translateY(-1px); }
.btn-primary:active{ transform:scale(.97); }

/* ── Board ─────────────────────────────────────────── */
.e2048-wrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; }

.e2048-scores{ display:flex; gap:.6rem; width:100%; max-width:520px; }
.e2048-score{
  flex:1; background:var(--panel); color:var(--panel-text);
  border-radius:var(--radius-sm); padding:.5rem .8rem; text-align:center;
}
.e2048-score .k{ font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; opacity:.8; }
.e2048-score .v{ font-size:1.20rem; font-weight:700; font-variant-numeric:tabular-nums; }
.e2048-score .goal{ font-size:0.80rem; font-weight:600; }

.e2048-board{
  position:relative; width:100%; max-width:520px; aspect-ratio:1;
  background:var(--panel-deep); border-radius:var(--radius);
  padding:var(--tile-gap, 8px); box-shadow:var(--shadow-md);
  touch-action:none; overflow:hidden;
}
.e2048-cell,
.e2048-tile{
  position:absolute; top:var(--tile-gap); left:var(--tile-gap);
  width:var(--tile-size); height:var(--tile-size);
  border-radius:var(--radius-sm);
}
.e2048-cell{ background:rgba(127,127,127,.16); }

.e2048-tile{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; line-height:1; user-select:none;
  transition:transform 110ms cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.e2048-sym{
  font-size:calc(var(--tile-size) * var(--tile-sym-size));
  transform:translateY(calc(var(--tile-size) * var(--tile-sym-nudge)));
}
.e2048-z{
  position:absolute;
  left:calc(var(--tile-size) * var(--tile-z-inset-x));
  bottom:calc(var(--tile-size) * var(--tile-z-inset-y));
  font-size:calc(var(--tile-size) * var(--tile-z-size));
  font-weight:600; opacity:.78; font-variant-numeric:tabular-nums;
}

/* Absorbed tiles slide under the survivor so the merge reads cleanly. */
.e2048-tile.is-absorbed{ z-index:1; }
.e2048-tile.is-survivor{ z-index:3; }
.e2048-tile.is-fresh{ z-index:2; animation:e2048-appear 130ms ease-out; }
.e2048-tile.is-merged{ animation:e2048-pulse 150ms ease-out; }

@keyframes e2048-appear{ from{ transform:scale(.4); opacity:0 } }
@keyframes e2048-pulse{ 50%{ scale:1.14 } }

@media (prefers-reduced-motion: reduce){
  .e2048-tile{ transition:none }
  .e2048-tile.is-fresh, .e2048-tile.is-merged{ animation:none }
}

/* ── Controls ──────────────────────────────────────── */
.e2048-controls{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  justify-content:center; width:100%; max-width:520px; }
.e2048-sizes{ display:flex; gap:.3rem; }
.e2048-size{
  font-family:var(--font); font-size:0.80rem; font-weight:600;
  min-width:2.6rem; padding:.45rem .5rem; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); transition:var(--transition);
}
.e2048-size:hover{ border-color:var(--primary); color:var(--primary); }
.e2048-size[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:#fff; }

.e2048-hint{ font-size:0.72rem; color:var(--text-light); text-align:center; max-width:520px; }

/* ── Overlay ───────────────────────────────────────── */
.e2048-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem; text-align:center;
  padding:1.2rem; background:var(--overlay); backdrop-filter:blur(2px);
  border-radius:var(--radius); z-index:5; animation:e2048-appear 200ms ease-out;
}
.e2048-overlay h3{ font-size:1.50rem; font-weight:700; margin:0; color:#fff; }
.e2048-overlay p{ font-size:0.95rem; margin:0; color:#fff; opacity:.92; max-width:24rem; }
.e2048-overlay .row{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.e2048-overlay button{
  font-family:var(--font); font-size:0.85rem; font-weight:600;
  padding:.55rem 1.1rem; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#fff;
  transition:var(--transition);
}
.e2048-overlay button:hover{ background:rgba(255,255,255,.26); }
.e2048-overlay button.primary{ background:var(--primary); border-color:var(--primary); }

.e2048-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── Element tile colours: family (hue) x period (lightness) ──
   Generated. 56 pairs covering all 118 elements. */
.e2048-tile[data-fam="hydrogen"][data-p="1"]{background:var(--el-hydrogen-p1);color:var(--el-hydrogen-p1-fg)}
.e2048-tile[data-fam="alkali"][data-p="2"]{background:var(--el-alkali-p2);color:var(--el-alkali-p2-fg)}
.e2048-tile[data-fam="alkali"][data-p="3"]{background:var(--el-alkali-p3);color:var(--el-alkali-p3-fg)}
.e2048-tile[data-fam="alkali"][data-p="4"]{background:var(--el-alkali-p4);color:var(--el-alkali-p4-fg)}
.e2048-tile[data-fam="alkali"][data-p="5"]{background:var(--el-alkali-p5);color:var(--el-alkali-p5-fg)}
.e2048-tile[data-fam="alkali"][data-p="6"]{background:var(--el-alkali-p6);color:var(--el-alkali-p6-fg)}
.e2048-tile[data-fam="alkali"][data-p="7"]{background:var(--el-alkali-p7);color:var(--el-alkali-p7-fg)}
.e2048-tile[data-fam="alkaline"][data-p="2"]{background:var(--el-alkaline-p2);color:var(--el-alkaline-p2-fg)}
.e2048-tile[data-fam="alkaline"][data-p="3"]{background:var(--el-alkaline-p3);color:var(--el-alkaline-p3-fg)}
.e2048-tile[data-fam="alkaline"][data-p="4"]{background:var(--el-alkaline-p4);color:var(--el-alkaline-p4-fg)}
.e2048-tile[data-fam="alkaline"][data-p="5"]{background:var(--el-alkaline-p5);color:var(--el-alkaline-p5-fg)}
.e2048-tile[data-fam="alkaline"][data-p="6"]{background:var(--el-alkaline-p6);color:var(--el-alkaline-p6-fg)}
.e2048-tile[data-fam="alkaline"][data-p="7"]{background:var(--el-alkaline-p7);color:var(--el-alkaline-p7-fg)}
.e2048-tile[data-fam="transition"][data-p="4"]{background:var(--el-transition-p4);color:var(--el-transition-p4-fg)}
.e2048-tile[data-fam="transition"][data-p="5"]{background:var(--el-transition-p5);color:var(--el-transition-p5-fg)}
.e2048-tile[data-fam="transition"][data-p="6"]{background:var(--el-transition-p6);color:var(--el-transition-p6-fg)}
.e2048-tile[data-fam="transition"][data-p="7"]{background:var(--el-transition-p7);color:var(--el-transition-p7-fg)}
.e2048-tile[data-fam="boron"][data-p="2"]{background:var(--el-boron-p2);color:var(--el-boron-p2-fg)}
.e2048-tile[data-fam="boron"][data-p="3"]{background:var(--el-boron-p3);color:var(--el-boron-p3-fg)}
.e2048-tile[data-fam="boron"][data-p="4"]{background:var(--el-boron-p4);color:var(--el-boron-p4-fg)}
.e2048-tile[data-fam="boron"][data-p="5"]{background:var(--el-boron-p5);color:var(--el-boron-p5-fg)}
.e2048-tile[data-fam="boron"][data-p="6"]{background:var(--el-boron-p6);color:var(--el-boron-p6-fg)}
.e2048-tile[data-fam="boron"][data-p="7"]{background:var(--el-boron-p7);color:var(--el-boron-p7-fg)}
.e2048-tile[data-fam="carbon"][data-p="2"]{background:var(--el-carbon-p2);color:var(--el-carbon-p2-fg)}
.e2048-tile[data-fam="carbon"][data-p="3"]{background:var(--el-carbon-p3);color:var(--el-carbon-p3-fg)}
.e2048-tile[data-fam="carbon"][data-p="4"]{background:var(--el-carbon-p4);color:var(--el-carbon-p4-fg)}
.e2048-tile[data-fam="carbon"][data-p="5"]{background:var(--el-carbon-p5);color:var(--el-carbon-p5-fg)}
.e2048-tile[data-fam="carbon"][data-p="6"]{background:var(--el-carbon-p6);color:var(--el-carbon-p6-fg)}
.e2048-tile[data-fam="carbon"][data-p="7"]{background:var(--el-carbon-p7);color:var(--el-carbon-p7-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="2"]{background:var(--el-nitrogen-p2);color:var(--el-nitrogen-p2-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="3"]{background:var(--el-nitrogen-p3);color:var(--el-nitrogen-p3-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="4"]{background:var(--el-nitrogen-p4);color:var(--el-nitrogen-p4-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="5"]{background:var(--el-nitrogen-p5);color:var(--el-nitrogen-p5-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="6"]{background:var(--el-nitrogen-p6);color:var(--el-nitrogen-p6-fg)}
.e2048-tile[data-fam="nitrogen"][data-p="7"]{background:var(--el-nitrogen-p7);color:var(--el-nitrogen-p7-fg)}
.e2048-tile[data-fam="oxygen"][data-p="2"]{background:var(--el-oxygen-p2);color:var(--el-oxygen-p2-fg)}
.e2048-tile[data-fam="oxygen"][data-p="3"]{background:var(--el-oxygen-p3);color:var(--el-oxygen-p3-fg)}
.e2048-tile[data-fam="oxygen"][data-p="4"]{background:var(--el-oxygen-p4);color:var(--el-oxygen-p4-fg)}
.e2048-tile[data-fam="oxygen"][data-p="5"]{background:var(--el-oxygen-p5);color:var(--el-oxygen-p5-fg)}
.e2048-tile[data-fam="oxygen"][data-p="6"]{background:var(--el-oxygen-p6);color:var(--el-oxygen-p6-fg)}
.e2048-tile[data-fam="oxygen"][data-p="7"]{background:var(--el-oxygen-p7);color:var(--el-oxygen-p7-fg)}
.e2048-tile[data-fam="halogen"][data-p="2"]{background:var(--el-halogen-p2);color:var(--el-halogen-p2-fg)}
.e2048-tile[data-fam="halogen"][data-p="3"]{background:var(--el-halogen-p3);color:var(--el-halogen-p3-fg)}
.e2048-tile[data-fam="halogen"][data-p="4"]{background:var(--el-halogen-p4);color:var(--el-halogen-p4-fg)}
.e2048-tile[data-fam="halogen"][data-p="5"]{background:var(--el-halogen-p5);color:var(--el-halogen-p5-fg)}
.e2048-tile[data-fam="halogen"][data-p="6"]{background:var(--el-halogen-p6);color:var(--el-halogen-p6-fg)}
.e2048-tile[data-fam="halogen"][data-p="7"]{background:var(--el-halogen-p7);color:var(--el-halogen-p7-fg)}
.e2048-tile[data-fam="noble"][data-p="1"]{background:var(--el-noble-p1);color:var(--el-noble-p1-fg)}
.e2048-tile[data-fam="noble"][data-p="2"]{background:var(--el-noble-p2);color:var(--el-noble-p2-fg)}
.e2048-tile[data-fam="noble"][data-p="3"]{background:var(--el-noble-p3);color:var(--el-noble-p3-fg)}
.e2048-tile[data-fam="noble"][data-p="4"]{background:var(--el-noble-p4);color:var(--el-noble-p4-fg)}
.e2048-tile[data-fam="noble"][data-p="5"]{background:var(--el-noble-p5);color:var(--el-noble-p5-fg)}
.e2048-tile[data-fam="noble"][data-p="6"]{background:var(--el-noble-p6);color:var(--el-noble-p6-fg)}
.e2048-tile[data-fam="noble"][data-p="7"]{background:var(--el-noble-p7);color:var(--el-noble-p7-fg)}
.e2048-tile[data-fam="lanthanide"][data-p="6"]{background:var(--el-lanthanide-p6);color:var(--el-lanthanide-p6-fg)}
.e2048-tile[data-fam="actinide"][data-p="7"]{background:var(--el-actinide-p7);color:var(--el-actinide-p7-fg)}