/* =====================================================================
   7on7HQ , PUBLIC DEMO BANNER
   Loaded only by web/demo/index.html, AFTER app.css. It styles the notice
   bar that sits ABOVE the real tenant SPA (.stage). It must not cover the
   app , the app's own chrome renders directly below it.
   Brand tokens (--ink-*, --red*, --fg*, --line*, --r-*, --s-*) come from
   app.css :root. No inline styles anywhere (CSP has no 'unsafe-inline').
   ===================================================================== */

.demobar{
  position: relative;
  z-index: 5;                 /* above the .stage backdrop pseudo-layers (-2 / -1) */
  background:
    linear-gradient(180deg, rgba(210,32,47,0.18), transparent 72%),
    linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 16px 38px -26px rgba(0,0,0,0.9);
}
/* a thin red hairline along the very top , a broadcast "you are live" cue */
.demobar::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red, #D2202F) 18%, var(--red, #D2202F) 82%, transparent);
  opacity: 0.85;
}

.demobar__inner{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px var(--gut);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ---- HOME LINK (logo + wordmark + back chevron) , the clear way out ---- */
.demobar__home{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 8px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--fg-soft);
  background: rgba(255,255,255,0.015);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .2s var(--ease-snap), box-shadow .2s var(--ease-snap), color .2s var(--ease-snap);
}
.demobar__home:hover{
  color: var(--fg);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.demobar__chev{
  flex: 0 0 auto;
  color: var(--fg-mute);
  transition: transform .2s var(--ease-snap), color .2s var(--ease-snap);
}
.demobar__home:hover .demobar__chev{ transform: translateX(-3px); color: var(--red-text); }

.demobar__mark{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: radial-gradient(120% 120% at 30% 20%, rgba(210,32,47,0.24), transparent 60%), var(--ink-700);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.demobar__fox{ width: 26px; height: 26px; }
.demobar__wordmark{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  color: inherit;
}

/* ---- the demo message ("Live demo , a sample tournament ...") ---- */
.demobar__msg{
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 11px;
}
.demobar__tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 11px;
  color: var(--red-text);
  padding: 4px 10px 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(210,32,47,0.13);
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.42);
  white-space: nowrap;
}
/* pulsing "on air" dot */
.demobar__pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red, #D2202F);
  box-shadow: 0 0 0 0 rgba(210,32,47,0.55);
  animation: demopulse 1.8s ease-out infinite;
}
@keyframes demopulse{
  0%   { box-shadow: 0 0 0 0 rgba(210,32,47,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(210,32,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(210,32,47,0); }
}
.demobar__txt{
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--fg-soft);
}

/* ---- CTA cluster (a quiet text home link + the trial button) ---- */
.demobar__cta{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}
.demobar__back{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 12px;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color .2s var(--ease-snap);
}
.demobar__back:hover{ color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* reuses .btn .btn--primary from app.css; trim it to banner scale */
.demobar__trial{
  padding: 9px 18px;
  font-size: 13px;
}

/* ---- narrow screens: keep the home link, let the CTA wrap full-width ---- */
@media (max-width: 720px){
  .demobar__back{ display: none; } /* the left home link is enough on small screens */
}
@media (max-width: 640px){
  .demobar__inner{
    gap: var(--s-3) var(--s-4);
    padding: 10px var(--gut) 12px;
  }
  .demobar__wordmark{ font-size: 15px; }
  .demobar__cta{
    width: 100%;
    margin-left: 0;
  }
  .demobar__trial{ flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .demobar__home,
  .demobar__chev,
  .demobar__back,
  .demobar__trial{ transition: none; }
  .demobar__pulse{ animation: none; }
}

/* =====================================================================
   7on7HQ , DEMO SCOREKEEPER VIEW (#/score)
   Demo-only, rendered by web/app.js viewScore() into #view. It shows the
   OTHER half of the product: the field scorekeeper screen, with tap-to-score
   buttons that post to /api/demo/score. Tokens come from app.css :root. No
   inline styles (CSP). Lives here, not app.css, so production never loads it.
   ===================================================================== */

.skp{ padding-top: var(--s-6); }

.skp__head{ margin-bottom: var(--s-5); }
.skp__title{
  font-family: "Anton", "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  color: var(--fg);
  margin: 0 0 8px;
}
.skp__sub{
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-soft);
  max-width: 70ch;
  margin: 0;
}

/* ---- per-field filter chips (showcases per-field scoping) ---- */
.skp__fields{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s-5) 0 var(--s-3);
}
.skp__chip{
  font-family: "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--fg-soft);
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: color .18s var(--ease-snap), background .18s var(--ease-snap), box-shadow .18s var(--ease-snap);
}
.skp__chip:hover{ color: var(--fg); background: rgba(255,255,255,0.05); }
.skp__chip--on{
  color: #fff;
  background: linear-gradient(180deg, rgba(210,32,47,0.34), rgba(210,32,47,0.18));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.62), 0 6px 18px -10px rgba(210,32,47,0.7);
}

.skp__note{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-mute);
  margin: 0 0 var(--s-5);
}
.skp__note svg{ flex: 0 0 auto; width: 15px; height: 15px; color: var(--fg-faint); }

/* ---- the grid of game cards ---- */
.skp__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.skp__none{
  grid-column: 1 / -1;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px;
  color: var(--fg-mute);
  padding: var(--s-5);
  text-align: center;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
}

.skp__card{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--shadow-panel, inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px -28px rgba(0,0,0,0.9));
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
}
.skp__cardtop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.skp__fieldbadge{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 12px;
  color: var(--fg-soft);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.skp__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 11px;
}
.skp__status--live{ color: var(--red-text); }
.skp__status--ready{ color: var(--fg-mute); }
/* a small, fully self-contained live dot (the shared .pulse helper relies on a
   positioned ancestor; we use our own so it never escapes its box). Reuses the
   demobar's contained box-shadow keyframes , no transform:scale, so nothing grows. */
.skp__livedot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red, #D2202F);
  box-shadow: 0 0 0 0 rgba(210,32,47,0.55);
  animation: demopulse 1.8s ease-out infinite;
}

/* ---- a team's scorable row ---- */
.skp__team{ padding: 4px 0 2px; }
.skp__teamline{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.skp__teamname{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.05;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skp__score{
  font-family: "Anton", "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.skp__divider{
  height: 1px;
  background: var(--line);
  margin: 11px 0;
}

/* ---- the +6 / +3 / +2 / +1 buttons ---- */
.skp__btns{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.skp__btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 50px;
  padding: 7px 4px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg-soft);
  cursor: pointer;
  transition: transform .12s var(--ease-snap), background .15s var(--ease-snap), box-shadow .15s var(--ease-snap), color .15s var(--ease-snap);
  -webkit-tap-highlight-color: transparent;
}
.skp__btn b{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  color: var(--fg);
}
.skp__btn span{
  font-family: "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 9.5px;
  color: var(--fg-mute);
}
/* hover ONLY on devices that truly hover (desktop). On touch, :hover sticks after a tap and
   makes the button look permanently "selected" , gating it removes that lingering look. */
@media (hover: hover){
  .skp__btn:hover{
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    transform: translateY(-1px);
  }
  .skp__btn:first-child:hover{
    background: linear-gradient(180deg, rgba(210,32,47,0.32), rgba(210,32,47,0.16));
    box-shadow: inset 0 0 0 1px rgba(210,32,47,0.7), 0 8px 20px -12px rgba(210,32,47,0.8);
  }
}
/* the touchdown button (always first) carries the brand tint , the common tap. Base goes BEFORE
   :active so the pressed state (equal specificity, later) wins on the TD button too. */
.skp__btn:first-child{
  background: linear-gradient(180deg, rgba(210,32,47,0.22), rgba(210,32,47,0.10));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5);
}
.skp__btn:first-child b{ color: #fff; }
.skp__btn:first-child span{ color: var(--red-text); }
/* a STRONG but momentary pressed state , clearly different so you know the tap landed, and it
   releases the instant you lift (it does not persist). */
.skp__btn:active{ transform: scale(0.92); background: rgba(210,32,47,0.34); box-shadow: inset 0 0 0 1px rgba(255,58,69,0.7); }
/* a quick confirm flash applied on tap (JS adds .skp__btn--hit). The view re-renders with the
   new score a moment later and removes it , so the feedback is unmistakable yet never sticks. */
.skp__btn--hit{ animation: skphit .3s var(--ease-snap); }
@keyframes skphit{
  0%{ transform: scale(0.9); background: var(--red, #D2202F); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 0 0 5px rgba(210,32,47,0.24); }
  100%{ transform: scale(1); }
}

@media (max-width: 560px){
  .skp__grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .skp__chip, .skp__btn{ transition: none; }
  .skp__livedot, .skp__btn--hit{ animation: none; }
}

/* =====================================================================
   DEMO KIOSK EXIT , the board/jumbo hide the topnav in kiosk mode, so the
   only way back is the corner exit. The operator's real venue board keeps the
   subtle .sb-exit, but in the DEMO it MUST be unmistakable so a casual visitor
   never feels trapped and bails out to the marketing home. Inherits .sb-exit's
   fixed top-right position (which renders just under the always-on demo banner).
   ===================================================================== */
.sb-exit--demo{
  opacity: 1;
  color: #fff;
  font-size: 13px;
  padding: 10px 17px;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 12px 28px -12px rgba(210,32,47,0.9);
}
.sb-exit--demo svg{ opacity: 1; }
.sb-exit--demo:hover,
.sb-exit--demo:focus-visible{
  color: #fff;
  background: linear-gradient(180deg, var(--red-hot), var(--red));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36), 0 14px 32px -12px rgba(255,58,69,0.95);
}