<div class="elm-stage">
  <div class="elm-grid">
    <div class="elm-row">
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">1</div><div class="elm-sym">H</div><div class="elm-name">Hydrogen</div><div class="elm-mass">1.008</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">H</div><div class="elm-card-name">Hydrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">1</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">1.008 u</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">State (25°C)</span><span class="elm-card-val">Gas</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−252.9 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1766 · Henry Cavendish</div>
        </div>
      </div>
      <div class="elm-gap" style="width:380px"></div>
      <div class="elm-tile elm-noble">
        <div class="elm-num">2</div><div class="elm-sym">He</div><div class="elm-name">Helium</div><div class="elm-mass">4.003</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">He</div><div class="elm-card-name">Helium</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">2</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">4.003 u</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−268.9 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1895 · Ramsey, Clève, Langlet</div>
        </div>
      </div>
    </div>
    <div class="elm-row">
      <div class="elm-tile elm-alkali">
        <div class="elm-num">3</div><div class="elm-sym">Li</div><div class="elm-name">Lithium</div><div class="elm-mass">6.941</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Li</div><div class="elm-card-name">Lithium</div><span class="elm-cat elm-cat-alkali">Alkali Metal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">3</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">180.5 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Use</span><span class="elm-card-val">Batteries, ceramics</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1817 · J. A. Arfwedson</div>
        </div>
      </div>
      <div class="elm-tile elm-alkaline">
        <div class="elm-num">4</div><div class="elm-sym">Be</div><div class="elm-name">Beryllium</div><div class="elm-mass">9.012</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Be</div><div class="elm-card-name">Beryllium</div><span class="elm-cat elm-cat-alkaline">Alkaline Earth</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">4</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">1,287 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Note</span><span class="elm-card-val">Highly toxic dust</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1798 · L.-N. Vauquelin</div>
        </div>
      </div>
      <div class="elm-gap" style="width:300px"></div>
      <div class="elm-tile elm-metalloid">
        <div class="elm-num">5</div><div class="elm-sym">B</div><div class="elm-name">Boron</div><div class="elm-mass">10.81</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">B</div><div class="elm-card-name">Boron</div><span class="elm-cat elm-cat-metalloid">Metalloid</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p¹</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">2,076 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1808 · Gay-Lussac, Davy</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">6</div><div class="elm-sym">C</div><div class="elm-name">Carbon</div><div class="elm-mass">12.01</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">C</div><div class="elm-card-name">Carbon</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p²</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Allotropes</span><span class="elm-card-val">Diamond, graphite</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Sublimation</span><span class="elm-card-val">3,642 °C</span></div>
          </div>
          <div class="elm-card-disc">Known since antiquity</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">7</div><div class="elm-sym">N</div><div class="elm-name">Nitrogen</div><div class="elm-mass">14.01</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">N</div><div class="elm-card-name">Nitrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p³</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−195.8 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Atmosphere</span><span class="elm-card-val">78% of air</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1772 · Daniel Rutherford</div>
        </div>
      </div>
      <div class="elm-tile elm-nonmetal">
        <div class="elm-num">8</div><div class="elm-sym">O</div><div class="elm-name">Oxygen</div><div class="elm-mass">16.00</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">O</div><div class="elm-card-name">Oxygen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁴</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−183 °C</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1771 · C. W. Scheele</div>
        </div>
      </div>
      <div class="elm-tile elm-halogen">
        <div class="elm-num">9</div><div class="elm-sym">F</div><div class="elm-name">Fluorine</div><div class="elm-mass">19.00</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">F</div><div class="elm-card-name">Fluorine</div><span class="elm-cat elm-cat-halogen">Halogen</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁵</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Electronegativity</span><span class="elm-card-val">3.98 (highest)</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−188 °C</span></div>
          </div>
          <div class="elm-card-disc">Isolated 1886 · Henri Moissan</div>
        </div>
      </div>
      <div class="elm-tile elm-noble">
        <div class="elm-num">10</div><div class="elm-sym">Ne</div><div class="elm-name">Neon</div><div class="elm-mass">20.18</div>
        <div class="elm-card">
          <div class="elm-card-top"><div class="elm-card-sym">Ne</div><div class="elm-card-name">Neon</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
          <div class="elm-card-data">
            <div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁶</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−246.1 °C</span></div>
            <div class="elm-card-row"><span class="elm-card-key">Emission</span><span class="elm-card-val">Red-orange glow</span></div>
          </div>
          <div class="elm-card-disc">Discovered 1898 · Ramsay & Travers</div>
        </div>
      </div>
    </div>
  </div>
</div>

.elm-stage {
  background: #0d0d10;
  /* Top room — element cards pop UP from each tile, ~240px tall. */
  padding: 260px 28px 40px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.elm-grid {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.elm-row {
  display: flex;
  gap: 5px;
}
.elm-tile {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  padding: 5px 6px;
  cursor: help;
  transition: transform .15s;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.elm-tile:hover {
  transform: scale(1.08) translateY(-2px);
  z-index: 10;
}
.elm-nonmetal  { background: rgba(40, 80, 40, 0.3);  border-color: rgba(60, 160, 60, 0.25); }
.elm-alkali    { background: rgba(80, 20, 20, 0.3);  border-color: rgba(200, 60, 40, 0.25); }
.elm-alkaline  { background: rgba(80, 50, 0, 0.3);   border-color: rgba(200, 140, 0, 0.25); }
.elm-metalloid { background: rgba(20, 60, 80, 0.3);  border-color: rgba(40, 160, 200, 0.25); }
.elm-noble     { background: rgba(60, 20, 80, 0.3);  border-color: rgba(160, 60, 200, 0.25); }
.elm-halogen   { background: rgba(60, 60, 0, 0.3);   border-color: rgba(180, 180, 20, 0.25); }
.elm-gap { height: 56px; flex-shrink: 0; }
.elm-num { font-size: 7.5px; color: rgba(255, 255, 255, 0.25); }
.elm-sym {
  font-size: 19px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  margin: 1px 0 2px;
}
.elm-name {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elm-mass {
  font-size: 6.5px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 1px;
}
.elm-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 300;
  width: 220px;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .2s,
    transform .2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .2s;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  text-align: left;
}
.elm-tile:hover .elm-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.elm-card-top {
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.elm-card-sym {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}
.elm-card-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.elm-cat {
  display: inline-block;
  font-size: 7.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 6px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.elm-cat-nonmetal  { background: rgba(60, 160, 60, 0.15); color: #60c060; border: 1px solid rgba(60, 160, 60, 0.2); }
.elm-cat-alkali    { background: rgba(180, 40, 20, 0.15); color: #e06050; border: 1px solid rgba(180, 40, 20, 0.2); }
.elm-cat-alkaline  { background: rgba(160, 100, 0, 0.15); color: #c09020; border: 1px solid rgba(160, 100, 0, 0.2); }
.elm-cat-metalloid { background: rgba(20, 100, 140, 0.15); color: #40c0e0; border: 1px solid rgba(20, 100, 140, 0.2); }
.elm-cat-noble     { background: rgba(120, 40, 160, 0.15); color: #a060e0; border: 1px solid rgba(120, 40, 160, 0.2); }
.elm-cat-halogen   { background: rgba(140, 140, 0, 0.15); color: #c0c020; border: 1px solid rgba(140, 140, 0, 0.2); }
.elm-card-data { padding: 9px 13px; }
.elm-card-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.elm-card-key {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.08em;
}
.elm-card-val {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.elm-card-econfig {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
}
.elm-card-disc {
  padding: 8px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.04em;
}