/* Cydbar, the company behind Lock Party: the once-a-day splash and the small
   mark at the bottom of every page. Shared by all pages; see brand.js. */

/* The Lock Party badge on the splash uses the TV's display fonts. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@600&display=swap');

/* ------------------------------------------------------------ the mark */
.cydbar-foot {
  display: flex; justify-content: center;
  padding: 1.4rem 0 .4rem;
}
.cydbar-mark {
  display: inline-block; line-height: 0;
  opacity: .8; transition: opacity .3s;
}
.cydbar-mark img { height: 26px; width: auto; display: block; }
.cydbar-mark:hover { opacity: 1; }

/* On the TV the mark sits in the rail's footer, bottom-left. */
.rail-foot .cydbar-mark img { height: 1.7rem; }

/* ----------------------------------------------------------- the splash */
.cydbar-splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; align-content: center; gap: 2.2vh;
  background: radial-gradient(ellipse at 50% 45%, #121a20 0%, #05080a 70%);
  cursor: pointer;
  transition: opacity .7s ease;
}
.cydbar-splash.leaving { opacity: 0; pointer-events: none; }
.cydbar-splash img {
  width: min(41vw, 550px, 75vh); height: auto; display: block;
}
.cydbar-splash .presents {
  display: grid; justify-items: center; gap: 1.4vh;
  opacity: 0;
  animation: cydbarFade .6s ease-out 4.2s forwards;
}
.cydbar-splash .presents > span {
  font: 600 clamp(13px, 1.3vw, 22px)/1 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: .4em; text-transform: uppercase; color: #8fa3ad;
  padding-left: .4em;              /* balances the trailing letter-space */
}
/* The Lock Party logo, as on the TV: red, GameDay stripes, a gold edge. */
.cydbar-splash .pp-badge {
  position: relative; overflow: hidden;
  padding: .3em .75em .26em;
  background: linear-gradient(100deg, #8f0505, #d50a0a 55%, #ff2d2d);
  border-bottom: .12em solid #ffd200;
  border-radius: .08em;
  font: clamp(26px, 3.6vw, 64px)/1 'Archivo Black', 'Impact', system-ui, sans-serif;
  letter-spacing: -.02em; text-transform: uppercase; color: #f2f4f8;
  text-shadow: 0 .06em 0 rgba(0,0,0,.45);
  box-shadow: 0 .35em 1.4em rgba(213,10,10,.35);
  clip-path: inset(0 100% 0 0);
  animation: cydbarWipe .55s cubic-bezier(.2,.8,.2,1) 4.45s forwards;
}
.cydbar-splash .pp-badge::after {   /* the diagonal ticker stripes */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.10) 0 .22em, transparent .22em .66em);
}
.cydbar-splash .pp-badge em { color: #ffd200; font-style: normal; }
.cydbar-splash .skip {
  position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: #4d5c64;
  font: 12px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
}
@keyframes cydbarFade { to { opacity: 1; } }
@keyframes cydbarWipe { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .cydbar-splash .presents { animation: none; opacity: 1; }
  .cydbar-splash .pp-badge { animation: none; clip-path: none; }
}

/* ------------------------------------------------------- the party's type
   Real Wagers is red with gold; Points Mode is green with gold, so nobody
   mistakes one for the other. Pages paint their brand surfaces (headers, the
   lock-in button) from these; red that *means* something -- a busted leg, a
   miss, an alert -- stays red in both. PARTY.setMode() sets data-mode. */
:root {
  --brand-deep: #8f0505; --brand: #d50a0a; --brand-hot: #ff2d2d;
}
html[data-mode="points"] {
  --brand-deep: #05502a; --brand: #0b8a45; --brand-hot: #1fb862;
}

/* The chip in each header that names the type. */
.mode-chip {
  display: inline-block; flex: none; position: relative; z-index: 1;
  padding: 3px 8px 2px; border-radius: 4px; border: 1px solid var(--gold, #ffd200);
  background: rgba(0, 0, 0, .35); color: var(--gold, #ffd200);
  font: 700 12px/1.2 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.mode-chip[hidden] { display: none; }