/* ============================================================================
   eurocup-flagreveal.css — the daylight wall, and the phone that feeds it.

   The wall is one canvas: every supporter who checked in is a tile, and on a
   reveal one nation's tiles converge into their flag. The flag's physical size
   IS the size of that delegation, so nobody has to explain the graphic.

   Everything in this sheet is furniture AROUND that canvas. The scenes
   themselves are drawn in eurocup-flagreveal-jumbotron.html, because a canvas
   cannot read a stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- the wall */

.ec-wall #ecCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ec-wall .ec-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Headline block, bottom-left. Never over the flag: the flag is the message
   and type sitting on a band is type nobody can read at 60 m. */
.ec-head {
  position: fixed;
  left: var(--ec-pad);
  bottom: var(--ec-pad);
  max-width: 52vw;
}
.ec-head .kicker {
  font-size: 2.4vmin;
  letter-spacing: 0.34em;
  font-weight: 700;
  color: var(--ec-hot);
  text-transform: uppercase;
  height: 2.8vmin;
  overflow: hidden;
}
.ec-head .name {
  font-size: 13vmin;
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The code is knocked out of the headline the same way it is knocked out of
   the flag in SLAM — outline, not fill, so it holds against any band. */
.ec-head .name .code {
  color: var(--ec-field);
  -webkit-text-stroke: 0.6vmin var(--ec-text);
  paint-order: stroke;
}
.ec-head .sub {
  display: flex;
  align-items: baseline;
  gap: 1.6vmin;
  margin-top: 1.4vmin;
}
.ec-head .big {
  font-size: 9vmin;
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.ec-head .big.remote { font-size: 5vmin; color: var(--ec-dim); }
.ec-head .unit {
  font-size: 2.4vmin;
  letter-spacing: 0.24em;
  color: var(--ec-dim);
  font-weight: 700;
  text-transform: uppercase;
}

/* Energy bar: the crowd's shake, and the only thing on this wall the crowd
   can move while they cannot see their own phones. */
.ec-energy {
  position: fixed;
  right: var(--ec-pad);
  bottom: var(--ec-pad);
  width: 26vw;
}
.ec-energy .lbl {
  display: flex;
  justify-content: space-between;
  font-size: 2.2vmin;
  letter-spacing: 0.26em;
  color: var(--ec-dim);
  font-weight: 700;
  margin-bottom: 1vmin;
  text-transform: uppercase;
}

/* The call to action. Steps, not a fade — a crossfade on an LED wall in sun
   is a grey smear for four frames and then a word. */
.ec-call {
  position: fixed;
  inset: auto 0 38vh 0;
  text-align: center;
  font-size: 11vmin;
  font-weight: 900;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: scale(0.9);
  text-transform: uppercase;
}
.ec-call.on {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.12s steps(3), transform 0.12s steps(3);
}
@media (prefers-reduced-motion: reduce) {
  .ec-call.on { transition: none; }
}

/* SUN CHECK badge. Not an effect — a test instrument, and it says so on the
   wall so nobody in the venue mistakes a rehearsal for a fault. */
.ec-sunbadge {
  position: fixed;
  left: 50%;
  top: 9.6vmin;
  transform: translateX(-50%);
  background: var(--ec-ink);
  color: var(--ec-hot);
  border: 0.4vmin solid var(--ec-hot);
  padding: 0.6vmin 1.6vmin;
  font-size: 1.8vmin;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
  display: none;
}
.ec-sunbadge.on { display: block; }

.ec-hint {
  position: fixed;
  left: var(--ec-pad);
  top: 9.6vmin;
  color: var(--ec-dim);
  font-size: 1.6vmin;
  letter-spacing: 0.2em;
  font-family: var(--ec-mono);
}

/* ------------------------------------------------------------- local panel
   The venue console, on the wall machine itself. The back office is the
   operator surface; this is the fallback for the hour when the plaza wifi is
   down and someone still has to cue a reveal from the FOH laptop. */

.ec-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(390px, 92vw);
  z-index: 9;
  background: var(--ec-ink);
  border-left: 0.4vmin solid var(--ec-rule);
  padding: 18px;
  overflow: auto;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  font-family: var(--ec-mono);
  font-size: 12px;
  pointer-events: auto;
}
.ec-panel.open { transform: none; }
.ec-panel h3 {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ec-hot);
  margin: 16px 0 8px;
  text-transform: uppercase;
}
.ec-panel h3:first-child { margin-top: 0; }
.ec-panel button {
  width: 100%;
  padding: 9px;
  margin-bottom: 5px;
  background: var(--ec-surface);
  color: var(--ec-text);
  border: 1px solid var(--ec-line);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.ec-panel button:hover { background: var(--ec-field-2); }
.ec-panel button.hot {
  background: var(--ec-hot);
  color: var(--ec-on-hot);
  border-color: var(--ec-hot);
  font-weight: 700;
}
.ec-panel .row { display: flex; gap: 5px; margin-bottom: 5px; }
.ec-panel .row button { margin: 0; }
.ec-panel label {
  display: flex;
  justify-content: space-between;
  color: var(--ec-dim);
  margin: 7px 0 3px;
}
.ec-panel input[type="range"] { width: 100%; }
.ec-panel p.n { color: var(--ec-dim); line-height: 1.5; margin: 6px 0 2px; }
.ec-panel .nats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ec-panel .nats button { margin: 0; text-align: center; padding: 7px 2px; }

/* ------------------------------------------------------------ the picker
   Step one of one, on the phone. Your flag is your section this weekend —
   nobody moves seats, the wall finds you. */

.ec-flaggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.ec-pick {
  background: none;
  border: 1px solid var(--ec-line);
  padding: 10px 8px 12px;
  cursor: pointer;
  color: var(--ec-text);
  font: inherit;
}
.ec-pick canvas {
  width: 100%;
  height: 44px;
  display: block;
  border: 1px solid var(--ec-line);
}
.ec-pick span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-top: 8px;
}
.ec-pick.sel { border-color: var(--ec-hot); outline: 2px solid var(--ec-hot); }

.ec-link {
  background: none;
  border: 0;
  color: var(--ec-hot);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ------------------------------------------------------------------ lockup
   Presenting partner on the wall. The other four corners are taken —
   headline bottom-left, energy bottom-right, QR top-right, rail across the
   top — so the lockup rides IN the rail, in the gap the flex spacer opens
   between the event name and the phase. Left in static flow it would stack
   under the rail and sit over the reveal, which is the one place a brand
   team will not accept a mark. */

.ec-rail .ec-lock {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: center;
}
.ec-rail .ec-lock[hidden] { display: none; }
.ec-rail .ec-lock img { height: 4.4vmin; }