/* ==========================================================================
   Who's Up? — the ball machine
   A dark broadcast stage sitting inside the normal Paper & Emerald chrome.
   Everything here is scoped under .wu so it cannot leak into the rest of the
   site. Colours are picked to survive a washed-out classroom projector, which
   means more contrast and heavier weights than a monitor would need.
   ========================================================================== */

@layer components {

  .wu {
    --stage:      #06080F;
    --stage-2:    #10162A;
    --stage-3:    #1A2136;
    --gold:       #E8B450;
    --gold-dim:   #A87A28;
    --teal:       #2FBE8E;
    --chalk:      #EDEAE1;
    --chalk-dim:  #9AA1B4;
    --hair:       rgba(232, 180, 80, .22);
    --glass:      rgba(255, 255, 255, .045);
    color: var(--chalk);
  }

  /* ── screens ───────────────────────────────────────────────────────── */
  .wu-setup, .wu-stage { display: none; }
  .wu[data-screen="setup"] .wu-setup { display: block; }
  .wu[data-screen="stage"] .wu-stage { display: block; }

  /* ── setup ─────────────────────────────────────────────────────────── */
  .wu-setup {
    background:
      radial-gradient(120% 90% at 50% -10%, #1B2440 0%, transparent 60%),
      linear-gradient(180deg, var(--stage-2), var(--stage));
    padding: var(--s8) 0 var(--s12);
    border-block: 1px solid var(--hair);
  }
  .wu-setup .eyebrow { color: var(--gold); }
  .wu-setup h1 {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 7vw, 5rem);
    line-height: .95;
    color: var(--chalk);
    margin: var(--s1) 0 var(--s2);
    text-shadow: 0 0 60px rgba(232, 180, 80, .18);
  }
  .wu-tagline {
    color: var(--gold);
    font: 600 var(--fs-h3) var(--sans);
    margin: 0 0 var(--s2);
    max-width: 40ch;
  }
  .wu-lede { color: var(--chalk-dim); max-width: 62ch; font-size: var(--fs-body); }

  .wu-setup-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--s3);
    margin-top: var(--s6);
    align-items: start;
  }
  @media (max-width: 860px) { .wu-setup-grid { grid-template-columns: 1fr; } }

  .wu-panel {
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    padding: var(--s4);
    backdrop-filter: blur(6px);
  }
  .wu input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
  .wu-panel h2 {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--s2);
  }

  .wu-names {
    width: 100%;
    min-height: 250px;
    resize: vertical;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-sm);
    color: var(--chalk);
    font: 400 1rem/1.7 var(--sans);
    padding: var(--s2);
  }
  .wu-names::placeholder { color: #6C7387; }
  .wu-names:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .wu-hint { color: var(--chalk-dim); font-size: var(--fs-small); margin: var(--s1) 0 0; }

  /* saved rosters */
  .wu-rosters { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
  .wu-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--chalk);
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    font: 500 .875rem var(--sans);
    cursor: pointer;
  }
  .wu-chip:hover { border-color: var(--gold); color: #fff; }
  .wu-chip b { font-weight: 600; }
  .wu-chip span { color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
  .wu-chip-x {
    border: 0; background: transparent; color: var(--chalk-dim);
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 999px;
  }
  .wu-chip-x:hover { background: rgba(198, 64, 47, .3); color: #fff; }

  /* mode picker */
  .wu-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .wu-mode {
    text-align: left;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-sm);
    padding: var(--s2);
    color: var(--chalk);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t);
  }
  .wu-mode:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(232, 180, 80, .5); }
  .wu-mode:disabled { opacity: .35; cursor: not-allowed; }
  .wu-mode[aria-pressed="true"] {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(232, 180, 80, .18), rgba(232, 180, 80, .06));
    box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 30px rgba(232, 180, 80, .18);
  }
  .wu-mode b { display: block; font: 600 1rem var(--sans); }
  .wu-mode small { display: block; color: var(--chalk-dim); font-size: .8125rem; margin-top: 2px; }

  .wu-machines { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s1); }
  @media (max-width: 520px) { .wu-machines { grid-template-columns: 1fr; } }

  .wu-field { margin-top: var(--s3); }
  .wu-field > label { display: block; font-size: var(--fs-small); color: var(--chalk-dim); margin-bottom: 6px; }
  .wu-row { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; }
  .wu-seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; overflow: hidden; }
  .wu-seg button {
    background: transparent; border: 0; color: var(--chalk-dim);
    padding: 8px 16px; font: 500 .875rem var(--sans); cursor: pointer;
  }
  .wu-seg button[aria-pressed="true"] { background: var(--gold); color: #17130A; font-weight: 700; }
  #wu-save-name { text-align: left; }
  .wu-opt { color: #6C7387; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .wu-file { display: inline-block; cursor: pointer; }
  .wu-logo-prev {
    width: 44px; height: 44px; object-fit: contain;
    border: 1px solid var(--hair); border-radius: 10px;
    background: rgba(0, 0, 0, .3); padding: 4px;
  }
  .wu-num {
    width: 76px; background: rgba(0, 0, 0, .34); color: var(--chalk);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-sm);
    padding: 8px 10px; font: 600 1rem var(--sans); text-align: center;
  }

  /* Wins on source order over .wu-num above, which sets a 76px width for the
     little number fields. Without this the title and subtitle collapse to
     pills you cannot read what you typed in. */
  .wu-panel input.wu-text {
    width: 100%; text-align: left; margin-bottom: 8px;
    font-weight: 500;
  }

  .wu-go {
    width: 100%; margin-top: var(--s4);
    background: linear-gradient(180deg, #F3C566, var(--gold));
    color: #17130A; border: 0; border-radius: 999px;
    padding: 18px 24px;
    font: 700 1.125rem/1 var(--sans); letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 34px rgba(232, 180, 80, .28);
    transition: transform var(--t), box-shadow var(--t);
  }
  .wu-go:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(232, 180, 80, .42); }
  .wu-go:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

  .wu-privacy {
    margin-top: var(--s4); color: var(--chalk-dim);
    font-size: var(--fs-small); max-width: 72ch;
  }
  .wu-privacy button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--gold); text-decoration: underline; font: inherit;
  }

  /* roster review list */
  .wu-review { margin-top: var(--s3); border-top: 1px solid var(--hair); padding-top: var(--s2); }
  .wu-review-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s1); }
  .wu-tag {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
    background: rgba(0, 0, 0, .25); color: var(--chalk);
    padding: 5px 12px; font: 500 .8125rem var(--sans); cursor: pointer;
  }
  .wu-tag i { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
  .wu-tag[data-absent="true"] { opacity: .4; text-decoration: line-through; }
  .wu-tag:hover { border-color: var(--gold); }

  /* ── stage ─────────────────────────────────────────────────────────── */
  .wu-stage {
    background:
      radial-gradient(90% 70% at 30% 0%, #1C2647 0%, transparent 55%),
      radial-gradient(70% 60% at 78% 20%, rgba(47, 190, 142, .12) 0%, transparent 60%),
      var(--stage);
    border-block: 1px solid var(--hair);
  }
  .wu-marquee {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--hair);
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
    flex-wrap: wrap;
  }
  .wu-title {
    font: 700 var(--fs-eyebrow) var(--sans);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    margin: 0;
  }
  .wu-live {
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: #FF6B5A;
  }
  .wu-live::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #FF6B5A; box-shadow: 0 0 10px #FF6B5A;
    animation: wu-pulse 1.8s var(--ease) infinite;
  }
  @keyframes wu-pulse { 50% { opacity: .25; } }
  .wu-marquee-sp { flex: 1; }

  .wu-btn {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--chalk);
    border-radius: 999px; padding: 9px 16px;
    font: 600 .8125rem var(--sans); cursor: pointer;
    transition: border-color var(--t), background var(--t);
  }
  .wu-btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(232, 180, 80, .14); }
  .wu-btn:disabled { opacity: .35; cursor: not-allowed; }

  /* Fixed height on purpose. A draft board with thirty empty slots would
     otherwise stretch the grid and drag the machine to twice the height of the
     screen — the whole stage has to be visible at once on a projector, so the
     board scrolls inside itself instead. */
  /* ── the backdrop ──────────────────────────────────────────────────── */
  .wu-banner {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--hair);
    background: linear-gradient(180deg, rgba(232, 180, 80, .09), transparent);
  }
  .wu-banner-logo { height: 56px; width: auto; max-width: 140px; object-fit: contain; }
  .wu-banner-title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.2vw, 2.75rem);
    line-height: 1.05; margin: 0; color: var(--chalk);
    text-shadow: 0 0 40px rgba(232, 180, 80, .25);
  }
  .wu-banner-sub {
    margin: 4px 0 0; color: var(--gold);
    font: 600 var(--fs-small) var(--sans); letter-spacing: .1em; text-transform: uppercase;
  }

  /* Step-and-repeat, the way a real press wall works: the same mark over and
     over, dim enough that the machine still reads in front of it. */
  .wu-backdrop {
    position: absolute; inset: 0;
    z-index: 0; overflow: hidden; pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-around;
    opacity: .045;
  }
  .wu-backdrop-row {
    display: flex; align-items: center; gap: 26px;
    white-space: nowrap;
    font: 800 clamp(11px, 1vw, 15px) var(--sans);
    letter-spacing: .22em; text-transform: uppercase; color: var(--chalk);
  }
  .wu-backdrop-row:nth-child(even) { margin-left: -11%; }
  .wu-backdrop-row img { height: 2em; width: auto; opacity: .8; }
  .wu-machine canvas { z-index: 1; }
  .wu[data-banner="on"] .wu-floor { height: clamp(340px, 55vh, 700px); }

  @media (max-width: 640px) {
    .wu-marquee { gap: var(--s1); padding: var(--s2); }
    .wu-btn { padding: 7px 11px; font-size: .75rem; }
    .wu-marquee-sp { flex-basis: 100%; height: 0; }
  }

  .wu-floor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: var(--s3);
    padding: var(--s3);
    align-items: stretch;
    height: clamp(380px, 64vh, 820px);
  }
  @media (max-width: 980px) {
    .wu-floor { grid-template-columns: 1fr; height: auto; }
  }

  /* the machine */
  .wu-machine { position: relative; min-height: 0; }
  @media (max-width: 980px) { .wu-machine { min-height: 46vh; } }
  .wu-machine canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }

  .wu-pull-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: var(--s3);
    padding: 0 var(--s3) var(--s3);
  }
  .wu-pull-wrap .wu-pull { grid-column: 1; justify-self: center; }
  @media (max-width: 980px) {
    .wu-pull-wrap { grid-template-columns: 1fr; }
  }
  .wu-pull {
    background: linear-gradient(180deg, #F3C566, var(--gold));
    color: #17130A; border: 0; border-radius: 999px;
    padding: 18px 56px;
    font: 800 1.1875rem/1 var(--sans); letter-spacing: .02em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 0 6px rgba(232, 180, 80, .12), 0 14px 44px rgba(0, 0, 0, .6);
    transition: transform 160ms var(--ease), box-shadow var(--t);
  }
  .wu-pull:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); }
  .wu-pull:active:not(:disabled) { transform: translateY(1px) scale(.99); }
  .wu-pull:disabled { opacity: .45; cursor: not-allowed; }

  /* the reveal card */
  .wu-card {
    position: absolute; z-index: 4;
    left: 50%; bottom: 1%; top: auto;
    translate: -50% 0;
    width: min(84%, 520px);
    background: linear-gradient(180deg, #FDFBF5, #EFE9DA);
    border: 3px solid var(--gold);
    border-radius: 18px;
    padding: var(--s3);
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 0 10px rgba(232, 180, 80, .12);
    opacity: 0; visibility: hidden;
    scale: .8; rotate: -3deg;
    transition: opacity 240ms var(--ease), scale 320ms var(--ease), rotate 320ms var(--ease), visibility 240ms;
  }
  .wu-card.is-in { opacity: 1; visibility: visible; scale: 1; rotate: 0deg; }
  .wu-card-slot {
    font: 700 var(--fs-eyebrow) var(--sans); letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber-text); margin: 0 0 var(--s1);
  }
  .wu-card-name {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4.4vw, 3.25rem);
    line-height: 1.04;
    color: var(--ink);
    margin: 0;
    word-break: break-word;
  }
  .wu-card-sub { margin: var(--s1) 0 0; color: var(--ink-soft); font-size: var(--fs-small); }

  /* the board */
  .wu-board {
    min-height: 0;
    background: var(--glass);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    padding: var(--s3);
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .wu-board h2 {
    font: 700 var(--fs-eyebrow) var(--sans);
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    margin: 0 0 var(--s2);
  }
  .wu-board-body { overflow: auto; flex: 1; min-height: 0; }

  .wu-slot {
    display: flex; align-items: center; gap: var(--s2);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font: 600 1.0625rem var(--sans);
  }
  .wu-slot i {
    font-style: normal; min-width: 2ch; text-align: right;
    color: var(--gold-dim); font-variant-numeric: tabular-nums;
    font-size: .875rem; font-weight: 700;
  }
  .wu-slot.is-empty { color: #4A5265; }
  .wu-slot.is-empty span { letter-spacing: .3em; }
  .wu-slot.is-new { animation: wu-land 600ms var(--ease); }
  @keyframes wu-land {
    0%   { background: rgba(232, 180, 80, .45); transform: translateX(14px); }
    100% { background: transparent; transform: none; }
  }

  /* team columns */
  .wu-teams { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .wu-team { border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-sm); padding: var(--s2); }
  .wu-team h3 {
    font: 700 .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--teal); margin: 0 0 8px;
  }
  .wu-team li { list-style: none; padding: 4px 0; font: 500 .9375rem var(--sans); }
  .wu-team ul { margin: 0; padding: 0; }
  .wu-team .wu-empty { color: #4A5265; font-style: italic; font-size: .875rem; }

  /* bingo grid */
  .wu-bingo { display: grid; grid-template-columns: auto repeat(15, 1fr); gap: 3px; }
  .wu-bingo-l {
    font: 800 1.125rem var(--sans); color: var(--gold);
    display: grid; place-items: center; padding-right: 6px;
  }
  .wu-cell {
    aspect-ratio: 1; display: grid; place-items: center;
    border-radius: 4px; background: rgba(255, 255, 255, .05);
    color: #59617A; font: 600 .6875rem var(--sans);
    font-variant-numeric: tabular-nums;
  }
  .wu-cell.is-hit {
    background: var(--gold); color: #17130A; font-weight: 800;
    box-shadow: 0 0 12px rgba(232, 180, 80, .6);
  }
  .wu-cell.is-new { animation: wu-hit 700ms var(--ease); }
  @keyframes wu-hit { 0% { transform: scale(1.9); } 100% { transform: scale(1); } }

  /* ticker */
  .wu-ticker {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    border-top: 1px solid var(--hair);
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
    padding: var(--s2) var(--s3);
    font: 700 .8125rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--chalk-dim);
  }
  .wu-ticker b { color: var(--gold); font-variant-numeric: tabular-nums; }
  .wu-ticker .wu-last { color: var(--chalk); letter-spacing: .04em; text-transform: none; font-weight: 600; }

  /* confetti */
  .wu-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
  .wu-confetti i {
    position: absolute; top: -6vh; width: 10px; height: 16px; opacity: .95;
    animation: wu-fall linear forwards;
  }
  @keyframes wu-fall {
    to { transform: translateY(112vh) rotate(760deg); opacity: .9; }
  }

  /* fullscreen: the site chrome gets out of the way */
  .wu:fullscreen { background: var(--stage); overflow: auto; }
  .wu:fullscreen .wu-floor { padding: var(--s3) var(--s4); }
  .wu:fullscreen .wu-machine { min-height: 66vh; }

  @media (prefers-reduced-motion: reduce) {
    .wu-card, .wu-slot.is-new, .wu-cell.is-new, .wu-live::before, .wu-confetti i {
      animation: none !important;
      transition-duration: 1ms !important;
    }
  }
}

@layer utilities {
  /* A class that sets `display` outranks the browser's own [hidden] rule, so
     .wu-banner stayed on screen as an empty strip. Belt and braces. */
  .wu [hidden] { display: none !important; }

  .wu-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}