/* ============================================================================
   eurocup-fan.css — the modern phone skin for the EUROCUP fan pages.

     eurocup-flagreveal · eurocup-roar

   Loaded AFTER eurocup.min.css and the per-module sheet, and only on the phone
   surfaces. It brings those two pages into the same visual language as the rest
   of the platform's newer modules (crowd-roar-battle, arena-roar-challenge):
   a deep field with brand glow, a film-grain plate, display type with a hard
   offset shadow, pill CTAs, and translucent cards with a lit top edge.

   WHY THIS IS A SEPARATE SHEET, AND WHY IT IS NOT ON THE WALL
   The daylight rules in eurocup.css — no gradient, no blur, no shadow — exist
   because an LED wall at 14:00 in an open plaza loses the bottom of the tonal
   curve. They are a rule about a wall read at 60 m in direct sun. A phone is
   held at 30 cm, usually shaded by the hand holding it, and is the one surface
   in the package where depth actually reads. So the wall keeps the flat, hard
   look and the phone gets this. tests/eurocup-test.php enforces the daylight
   rules on the board sheets and exempts this one by name.

   THEMING
   Every colour below resolves through the --ec-* custom properties that
   js/eurocup-theme.js writes from json/{module}{game_id}.json. There is not one
   client colour in this file: the literals that remain are transparency (a
   white at 8% is the right tint over any themed field) and pure black, which
   is a shadow, not a brand.
   ========================================================================== */

:root {
  /* The fallback tints, and the only literals in this file. They are
     transparency, not colour — a white at 8 % over a themed field is the right
     wash whatever that field is, and wiring them to a brand slot would make
     them fight the theme instead of following it. Same reasoning, and the same
     :root placement, as the --ec-tint-* scale in eurocup.css. */
  --ec-plate: #FFFFFF0A;
  --ec-plate-2: #FFFFFF14;
  --ec-edge: #FFFFFF1F;
  --ec-drop: #00000059;

  --ec-radius: 16px;
  --ec-radius-sm: 12px;
}

/* Where color-mix is available the tints are DERIVED from the themed palette
   instead of being a flat white wash, so the plates take on the clients own
   surface and rule colours. Everything above is what a browser without it
   still gets. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --ec-plate: color-mix(in srgb, var(--ec-surface) 55%, transparent);
    --ec-plate-2: color-mix(in srgb, var(--ec-surface) 80%, transparent);
    --ec-edge: color-mix(in srgb, var(--ec-rule) 16%, transparent);
  }
}

body.ec-fan {
  --ec-glow: var(--ec-hot);
  --ec-edge-lit: var(--ec-hot);
  background: var(--ec-field);
  position: relative;
}
@supports (color: color-mix(in srgb, red, blue)) {
  body.ec-fan { --ec-edge-lit: color-mix(in srgb, var(--ec-hot) 55%, transparent); }
}

/* ------------------------------------------------------------- the field
   Two layers under everything: the operator's background image (already on
   .ec-bg, from intro.mobile_image) and, over it, a brand-tinted ambient wash
   that gives the page a colour temperature even when no image is configured. */

body.ec-fan::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--ec-edge-lit), transparent 62%),
    radial-gradient(90% 55% at 100% 100%, var(--ec-plate-2), transparent 60%),
    linear-gradient(180deg, transparent 0%, var(--ec-ink) 100%);
  opacity: 0.85;
}

/* Film grain. A flat dark field on an OLED phone bands visibly; 5 % of noise
   is what stops it, and it costs one inline SVG rather than an image request
   on plaza wifi. */
body.ec-fan::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The page is a single column with a reading measure, the same 480 px the
   newer modules use. A 900 px-wide phone in landscape must not stretch a
   headline across the whole screen. */
body.ec-fan main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 18px 34px;
}
body.ec-fan > header,
body.ec-fan > .ec-brandbar {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* ---------------------------------------------------------- flag bands
   The three bands of the fan's own nation still frame the app — that is the
   whole premise of the package — but they are thicker and sit under a soft
   drop so they read as a deliberate frame rather than a rendering artefact. */

.ec-fan .ec-bands { height: 5px; }
.ec-fan .ec-bands--bottom { height: 4px; }

/* ------------------------------------------------------------ event head
   Sponsor mark, then the event's own title and strapline — both from the
   per-game JSON (intro.title / intro.subtitle), both hidden when unset. The
   platform's name never appears here: these are white-label surfaces. */

.ec-fan .ec-brandbar { padding: 16px 18px 0; }
.ec-fan .ec-brandbar img { max-height: 48px; }

.ec-eventhead {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 18px 0;
  text-align: center;
}
.ec-eventhead .ttl {
  font-family: var(--ec-font-2, var(--ec-font));
  font-size: var(--ec-font-size-2, 15px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ec-text);
  line-height: 1.2;
}
.ec-eventhead .sub {
  font-size: var(--ec-font-size-2, 11px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ec-hot);
  margin-top: 6px;
  line-height: 1.3;
}
.ec-eventhead [hidden] { display: none; }

/* --------------------------------------------------------------- header
   Flag, nation, and the state line under it. The flag chip gets a real
   keyline and a corner radius so it reads as a badge, not a stray canvas. */

.ec-fan header {
  padding: 16px 18px 6px;
  gap: 14px;
}
.ec-fan header canvas {
  width: 52px;
  height: 34px;
  border: 2px solid var(--ec-edge);
  border-radius: 5px;
  box-shadow: 0 3px 12px var(--ec-drop);
}
.ec-fan header .who {
  font-family: var(--ec-font-2, var(--ec-font));
  font-size: 24px;
  letter-spacing: 0.01em;
}
.ec-fan header .who small {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--ec-hot);
}
.ec-fan header .swap {
  border: 1px solid var(--ec-edge);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  background: var(--ec-plate);
  color: var(--ec-text);
}
.ec-fan header .swap:active { background: var(--ec-plate-2); }

/* ----------------------------------------------------------------- cards
   A translucent plate with a lit top edge. The highlight is what separates
   two stacked cards on a dark field without drawing a second border. */

.ec-fan .ec-card {
  position: relative;
  border: 1px solid var(--ec-edge);
  border-radius: var(--ec-radius);
  background: var(--ec-plate);
  padding: 22px 20px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--ec-drop);
  animation: ec-rise 0.45s ease-out both;
}
.ec-fan .ec-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ec-hot), transparent);
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ec-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ec-fan .ec-card { animation: none; }
}

.ec-fan .ec-card .ec-eyebrow {
  font-size: var(--ec-font-size-2, 10px);
  letter-spacing: 0.3em;
  margin-bottom: 12px;
}

/* The headline sits in the secondary (display) family with a hard offset in
   the brand colour — the newer modules' signature, and the one treatment that
   still reads as intentional when a client's palette is muted. */
.ec-fan .ec-card h2 {
  font-family: var(--ec-font-2, var(--ec-font));
  font-size: var(--ec-font-size, 34px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  text-shadow: 3px 3px 0 var(--ec-edge-lit);
}

.ec-fan .ec-note { font-size: var(--ec-font-size-2, 14.5px); line-height: 1.5; }

/* ---------------------------------------------------------------- meters
   Still segmented, still discrete — a continuous fill loses its top third to
   a phone's own brightness curve outdoors — but rounded and lit. */

.ec-fan .ec-meter {
  height: 18px;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ec-edge);
  border-radius: 999px;
  background: var(--ec-plate-2);
  margin: 16px 0;
}
.ec-fan .ec-meter i { border-radius: 999px; transition: background 0.12s linear; }
.ec-fan .ec-meter i.on { background: var(--ec-hot); }

/* ---------------------------------------------------------------- action
   One full-width pill per screen. Nothing competes with it. */

.ec-fan .ec-go {
  border-radius: 999px;
  padding: 19px 20px;
  font-family: var(--ec-font-2, var(--ec-font));
  font-size: 19px;
  letter-spacing: 0.16em;
  box-shadow: 0 8px 24px var(--ec-edge-lit);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ec-fan .ec-go:active { transform: translateY(2px); box-shadow: 0 3px 10px var(--ec-drop); }
.ec-fan .ec-go[disabled] {
  background: var(--ec-plate-2);
  color: var(--ec-dim);
  box-shadow: none;
  transform: none;
}
.ec-fan .ec-link { text-underline-offset: 3px; }

/* ---------------------------------------------------------------- picker */

.ec-fan .ec-flaggrid { gap: 12px; }
.ec-fan .ec-pick {
  border: 1px solid var(--ec-edge);
  border-radius: var(--ec-radius-sm);
  background: var(--ec-plate-2);
  padding: 10px 8px 12px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.ec-fan .ec-pick canvas { border-radius: 4px; border-color: var(--ec-edge); }
.ec-fan .ec-pick:active { transform: scale(0.97); }
.ec-fan .ec-pick.sel {
  border-color: var(--ec-hot);
  outline: 0;
  box-shadow: 0 0 0 2px var(--ec-hot), 0 8px 20px var(--ec-edge-lit);
}

/* ------------------------------------------------------------- numerals
   The shake count and the roar peak. Display family, tabular, with the same
   offset the headline uses so the page has one voice. */

.ec-fan .ec-huge,
.ec-fan .ec-roar-peak b {
  font-family: var(--ec-font-2, var(--ec-font));
  text-shadow: 3px 3px 0 var(--ec-edge-lit);
}
.ec-fan .ec-huge { font-size: 76px; }
.ec-fan .ec-roar-peak b { font-size: 52px; }

.ec-fan .ec-clock {
  display: inline-block;
  border: 1px solid var(--ec-edge);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--ec-plate-2);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ec-text);
}

/* ----------------------------------------------------------- leaderboard */

.ec-fan .ec-line {
  border-bottom: 0;
  border-radius: 10px;
  background: var(--ec-plate-2);
  padding: 12px 14px;
  margin-bottom: 6px;
}
.ec-fan .ec-line b { font-family: var(--ec-font-2, var(--ec-font)); }

/* ---------------------------------------------------------------- lockup
   Presenting partner, under the content and never over it — the same contract
   the board uses, and the same two JSON fields (intro.partner_intro,
   intro.partner_logo). Absent fields leave no empty furniture behind. */

.ec-fan .ec-lock {
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ec-edge);
}
.ec-fan .ec-lock .by { font-size: 9px; letter-spacing: 0.26em; }
.ec-fan .ec-lock img { height: 26px; }
.ec-fan .ec-lock[hidden] { display: none; }

/* ------------------------------------------------------------ operator copy
   The "how it works" the operator wrote in the back office. Quieter plate than
   a content card: it is read once, at the QR, and never again. */

.ec-fan .ec-rules {
  background: none;
  border: 1px dashed var(--ec-edge);
  box-shadow: none;
  animation: none;
}
.ec-fan .ec-rules::before { display: none; }

/* -------------------------------------------------------- the notice line */

.ec-fan .ec-notice {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 18px 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ec-dim);
}
.ec-fan .ec-notice[hidden] { display: none; }