/* Dagstand-segment "Gemerged vandaag": een vertrekbord op het vliegveld met klapletters. */

.celebration[data-mode="show-merges"] { --c1: #111215; --c2: #ffd400; --c3: #fff3b0; --glow: rgb(255 212 0 / .6); }

.cel-show-merges-scene {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #1c2230, #07080b 75%);
}

.cel-show-merges-board {
  position: absolute; left: 3vh; right: 3vh; top: 3vh; bottom: 3vh;
  display: flex; flex-direction: column; gap: 1.4vh; padding: 0 0 2vh; border-radius: 1.8vh; overflow: hidden;
  background: linear-gradient(180deg, #15171b, #0c0d10);
  border: .7vh solid #2b2e35;
  box-shadow: 0 0 0 .3vh #4b5059, 0 3vh 8vh rgb(0 0 0 / .8);
}

.cel-show-merges-head {
  position: relative; overflow: hidden; flex: 0 0 11vh; display: flex; align-items: center; justify-content: space-between; gap: 3vh; padding: 0 3vh;
  background: linear-gradient(180deg, #ffdd33, #ffc800); color: #111215;
  box-shadow: inset 0 -.5vh 0 rgb(0 0 0 / .2);
}
.cel-show-merges-sign { display: flex; align-items: center; gap: 2.4vh; min-width: 0; }
.cel-show-merges-plane {
  display: flex; align-items: center; justify-content: center; width: 8vh; height: 8vh; border-radius: 1.2vh;
  font-size: 5.6vh; line-height: 1; color: #ffd400; background: #111215;
}
.cel-show-merges-flyer {
  position: absolute; left: -12vh; top: 17vh; font-size: 9vh; line-height: 1; color: #ffd400; pointer-events: none;
  text-shadow: -4vh 0 3vh rgb(255 255 255 / .25), 0 0 2vh rgb(255 212 0 / .6);
}
.cel-show-merges-title { font-size: 6.4vh; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cel-show-merges-meta { display: flex; align-items: center; gap: 3vh; }
.cel-show-merges-pageflaps { display: flex; gap: .15vh; }
.cel-show-merges-clock {
  padding: .6vh 1.8vh; border-radius: 1vh; background: #111215;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 6vh; font-weight: 700; line-height: 1;
  color: #ffd400; font-variant-numeric: tabular-nums; text-shadow: 0 0 1.4vh rgb(255 212 0 / .6);
}
.cel-show-merges-colon { animation: cel-show-merges-blink 1s steps(1) infinite; }
@keyframes cel-show-merges-blink { 50% { opacity: .15; } }

/* Kolommen: led, tijd (5), titel (36), wie (gezicht + 8), regels (6 + 6). */
.cel-show-merges-cols, .cel-show-merges-row {
  display: grid; grid-template-columns: 2vh auto auto auto auto; align-items: center; column-gap: 1.6vh; padding: 0 2.4vh;
}
.cel-show-merges-cols {
  flex: 0 0 auto; justify-content: start;
  font-size: 2.4vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #ffd400;
}
.cel-show-merges-cols span:nth-child(2) { width: calc(5 * 2.45vh); }
.cel-show-merges-cols span:nth-child(3) { width: calc(36 * 2.45vh); }
.cel-show-merges-cols span:nth-child(4) { width: calc(5.4vh + .8vh + 8 * 2.45vh); }
.cel-show-merges-cols span:nth-child(5) { width: calc(12 * 2.45vh + 1vh); text-align: right; }

.cel-show-merges-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1vh; }
.cel-show-merges-row {
  justify-content: start; padding-top: .5vh; padding-bottom: .5vh; border-radius: 1vh; transition: background .25s, box-shadow .25s;
}
.cel-show-merges-row.is-scan { background: rgb(255 212 0 / .1); box-shadow: inset .6vh 0 0 #ffd400; }

.cel-show-merges-led { width: 1.8vh; height: 1.8vh; border-radius: 50%; background: #23262c; transition: background .3s, box-shadow .3s; }
.cel-show-merges-led.is-on { background: #166534; }
.cel-show-merges-led.is-new { animation: cel-show-merges-led 0.9s ease-in-out infinite; }
.cel-show-merges-row.is-scan .cel-show-merges-led { background: #4ade80; box-shadow: 0 0 1.6vh #4ade80; }
@keyframes cel-show-merges-led { 50% { background: #4ade80; box-shadow: 0 0 1.6vh #4ade80; } }

.cel-show-merges-group { display: flex; gap: .15vh; }
.cel-show-merges-group.is-who { align-items: center; gap: 0; }
.cel-show-merges-face { width: 5.4vh; height: 5.4vh; margin-right: .8vh; opacity: 0; }
.cel-show-merges-avatar { width: 5.4vh; height: 5.4vh; font-size: 2.1vh; box-shadow: 0 0 0 .25vh #a5f3fc; }
.cel-show-merges-name { display: flex; gap: .15vh; }
.cel-show-merges-group.is-lines { gap: 1vh; }
.cel-show-merges-sub { display: flex; gap: .15vh; }

/* --- Klapletter ------------------------------------------------------------ */

.cel-show-merges-c {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: 2.3vh; height: 5.8vh; border-radius: .35vh;
  background: linear-gradient(180deg, #2a2d33 0 49%, #1d1f24 51% 100%);
  box-shadow: inset 0 -.2vh 0 rgb(0 0 0 / .5);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 3.7vh; font-weight: 700; line-height: 1;
  color: #f8fafc;
}
.cel-show-merges-c::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .08vh); height: .16vh; background: rgb(0 0 0 / .75); }
.cel-show-merges-c::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; transform-origin: 50% 100%; transform: scaleY(0);
  background: linear-gradient(180deg, #3a3e46, #2a2d33);
}
.cel-show-merges-c.is-flip::before { animation: cel-show-merges-flap .11s linear infinite; }
@keyframes cel-show-merges-flap { from { transform: scaleY(1); } to { transform: scaleY(0); } }

.is-time .cel-show-merges-c { color: #ffd400; }
.is-title .cel-show-merges-c { color: #ffffff; }
.cel-show-merges-name .cel-show-merges-c { color: #a5f3fc; }
.cel-show-merges-sub.is-add .cel-show-merges-c { color: #4ade80; }
.cel-show-merges-sub.is-del .cel-show-merges-c { color: #f87171; }
.cel-show-merges-c.is-page { width: 3.4vh; height: 6.4vh; font-size: 4.4vh; color: #ffd400; }

/* --- Onderbalk met de volledige titel --------------------------------------- */

.cel-show-merges-strip {
  flex: 0 0 7.5vh; margin: 0 2.4vh; display: flex; align-items: center; overflow: hidden; padding: 0 2vh;
  border-radius: 1vh; background: #050506; border: .25vh solid rgb(255 212 0 / .3); opacity: 0; transition: opacity .4s;
}
.cel-show-merges-strip.is-on { opacity: 1; }
.cel-show-merges-strip-text {
  display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 3.6vh; font-weight: 700; color: #ffd400; text-shadow: 0 0 1.4vh rgb(255 212 0 / .6);
}

/* --- Totaal ---------------------------------------------------------------- */

.cel-show-merges-totals {
  display: none; flex: 1 1 auto; min-height: 0;
  flex-wrap: wrap; align-content: center; justify-content: center; gap: 5vh 6vh;
}
.cel-show-merges-board.is-totals .cel-show-merges-cols,
.cel-show-merges-board.is-totals .cel-show-merges-rows,
.cel-show-merges-board.is-totals .cel-show-merges-strip,
.cel-show-merges-board.is-totals .cel-show-merges-pageflaps { display: none; }
.cel-show-merges-board.is-totals .cel-show-merges-totals { display: flex; }
.cel-show-merges-total { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.cel-show-merges-big { display: flex; gap: .3vh; }
.cel-show-merges-c.is-big { width: 7.4vh; height: 13vh; border-radius: .8vh; font-size: 10vh; }
.is-count .cel-show-merges-c { color: #ffd400; }
.cel-show-merges-big.is-add .cel-show-merges-c { color: #4ade80; }
.cel-show-merges-big.is-del .cel-show-merges-c { color: #f87171; }
.cel-show-merges-total-label { font-size: 3.4vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #cbd5e1; }
.cel-show-merges-thanks { flex: 0 0 100%; display: flex; justify-content: center; gap: .15vh; }
.cel-show-merges-thanks .cel-show-merges-c { color: #ffd400; }
.cel-show-merges-board.is-done .cel-show-merges-c.is-big { animation: cel-show-merges-glow 1.6s ease-in-out infinite; }
@keyframes cel-show-merges-glow { 50% { box-shadow: inset 0 -.2vh 0 rgb(0 0 0 / .5), 0 0 3vh rgb(255 212 0 / .35); } }