/* ============================================================================
   Throwline Darts — BIG-SCREEN STYLES
   Shared by the in-app fullscreen view, the cast window and the TV receiver.
   Sizing is viewport-relative so one stylesheet serves a phone in fullscreen
   and a 55" TV without a media-query ladder.
   ========================================================================== */

.dse-cast-shell {
  display: flex; flex-direction: column; gap: 1.6vh;
  flex: 1 1 auto; min-height: 100%; padding: 2.4vh 2.2vw;
  background: var(--bg-0, #0d0f14); color: var(--text, #f2ede3);
  font-family: inherit;
}

/* ---- header ---- */
.dse-c-top { text-align: center; flex: 0 0 auto; }
.dse-c-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 3.4vw, 60px); font-weight: 700; letter-spacing: .04em;
  color: var(--accent, #c9a14a); line-height: 1.05;
}
.dse-c-sub {
  font-size: clamp(11px, 1.15vw, 20px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted, #8b8579); margin-top: .5vh;
}
.dse-c-status {
  display: inline-block; margin-top: 1vh; padding: .5vh 1.4vw;
  border: 1px solid var(--accent, #c9a14a); border-radius: 999px;
  font-size: clamp(11px, 1.1vw, 19px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent, #c9a14a);
}

/* ---- player board ---- */
.dse-c-board { display: grid; gap: 1.4vw; flex: 1 1 auto; align-content: stretch; }
.dse-c-card {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5vh;
  /* top padding reserves room for the checkout badge so cards stay aligned
     whether or not a player is on a finish */
  padding: 5.4vh 1vw 2.2vh; border-radius: 1.4vh;
  background: var(--bg-1, #161922); border: 2px solid transparent;
  transition: border-color .18s ease, transform .18s ease;
}
.dse-c-card.active {
  border-color: var(--accent, #c9a14a);
  background: linear-gradient(180deg, rgba(201,161,74,.14), var(--bg-1, #161922) 60%);
  transform: translateY(-.6vh);
}
.dse-c-card.winner { border-color: #4ade80; background: rgba(74,222,128,.12); }
.dse-c-card.out    { opacity: .38; }

.dse-c-name {
  font-size: clamp(14px, 1.9vw, 40px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dse-c-score {
  font-size: clamp(48px, 10vw, 240px); font-weight: 800; line-height: .92;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dse-c-card.active .dse-c-score { color: var(--accent, #c9a14a); }
.dse-c-label {
  font-size: clamp(9px, .85vw, 15px); letter-spacing: .28em;
  text-transform: uppercase; color: var(--muted, #8b8579);
}
.dse-c-sl {
  font-size: clamp(10px, 1vw, 18px); letter-spacing: .12em;
  color: var(--muted, #8b8579); margin-top: .4vh;
}

/* checkout suggestion — shown on the big screen by design */
.dse-c-co {
  position: absolute; top: 1vh; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: .4vh 1vw; border-radius: 999px;
  background: rgba(201,161,74,.18); border: 1px solid var(--accent, #c9a14a);
  color: var(--accent, #c9a14a); font-weight: 700;
  font-size: clamp(10px, 1.1vw, 20px); letter-spacing: .08em;
}

.dse-c-stats {
  display: flex; gap: 1.2vw; margin-top: .8vh;
  font-size: clamp(9px, .85vw, 15px); color: var(--muted, #8b8579);
  letter-spacing: .1em; text-transform: uppercase;
}
.dse-c-stats div { display: flex; flex-direction: column; align-items: center; }
.dse-c-stats b {
  font-size: clamp(13px, 1.4vw, 26px); color: var(--text, #f2ede3);
  font-variant-numeric: tabular-nums;
}

/* cricket marks */
.dse-c-marks { display: flex; gap: .5vw; margin-top: .6vh; flex-wrap: wrap; justify-content: center; }
.dse-c-mark {
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(9px, .9vw, 16px); color: var(--muted, #8b8579); min-width: 2.2vw;
}
.dse-c-mark i { font-style: normal; color: var(--accent, #c9a14a); font-size: clamp(10px, 1vw, 18px); }
.dse-c-mark.closed { color: #4ade80; }
.dse-c-mark.closed i { color: #4ade80; }

/* ---- footer: current visit + history ---- */
.dse-c-foot { display: flex; gap: 1.4vw; align-items: stretch; flex: 0 0 auto; }
.dse-c-visit {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  gap: 1.4vw; padding: 1.6vh 1.4vw; border-radius: 1.2vh;
  background: var(--bg-1, #161922); border: 1px solid rgba(201,161,74,.22);
}
.dse-c-visit-l {
  font-size: clamp(9px, .8vw, 14px); letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted, #8b8579);
}
.dse-c-darts { display: flex; gap: .8vw; }
.dse-c-dart {
  min-width: 5.2vw; text-align: center; padding: .9vh .8vw; border-radius: .9vh;
  background: rgba(201,161,74,.14); border: 1px solid var(--accent, #c9a14a);
  color: var(--accent, #c9a14a); font-weight: 800;
  font-size: clamp(15px, 1.9vw, 34px); font-variant-numeric: tabular-nums;
}
.dse-c-dart.empty {
  background: transparent; border-style: dashed; border-color: rgba(139,133,121,.4);
  color: rgba(139,133,121,.55); font-size: clamp(9px, .85vw, 15px);
  font-weight: 600; letter-spacing: .16em; display: flex;
  align-items: center; justify-content: center;
}
.dse-c-total {
  font-size: clamp(28px, 4.4vw, 84px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text, #f2ede3);
  padding-left: 1.2vw; border-left: 1px solid rgba(139,133,121,.3);
}

.dse-c-hist {
  flex: 0 0 20vw; list-style: none; margin: 0; padding: 1.2vh 1vw;
  border-radius: 1.2vh; background: var(--bg-1, #161922);
  display: flex; flex-direction: column; gap: .5vh; justify-content: center;
}
.dse-c-hist li {
  display: flex; justify-content: space-between; gap: .8vw;
  font-size: clamp(10px, 1vw, 18px); color: var(--muted, #8b8579);
}
.dse-c-hist li b { color: var(--text, #f2ede3); font-variant-numeric: tabular-nums; }
.dse-c-hist li b.bust { color: #ef476f; }
.dse-c-hist li.banner {
  justify-content: center; color: var(--accent, #c9a14a);
  letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(9px, .85vw, 15px);
}

/* ---- idle ---- */
.dse-cast-wait {
  flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2vh;
  background: var(--bg-0, #0d0f14); color: var(--text, #f2ede3); text-align: center;
}
.dse-cast-wait-t {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 5vw, 84px); font-weight: 700; letter-spacing: .06em;
}
.dse-cast-wait-t span { color: var(--accent, #c9a14a); }
.dse-cast-wait-s {
  font-size: clamp(12px, 1.4vw, 24px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted, #8b8579);
}

/* ---- celebrations ---- */
.dse-c-celebrate {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1vh; background: rgba(13,15,20,.86);
  animation: dseCelebIn .3s ease both;
}
/* Sits inside .dse-c-celebrate and is removed with it. Behind the text, above
   the dim, never catching a tap. */
.dse-c-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1;
}
.dse-c-180 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(70px, 20vw, 380px); font-weight: 800; line-height: .9;
  color: var(--accent, #c9a14a); text-shadow: 0 0 6vh rgba(201,161,74,.55);
  animation: dseCelebPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.dse-c-180l {
  font-size: clamp(16px, 3vw, 56px); letter-spacing: .38em;
  text-transform: uppercase; color: var(--text, #f2ede3);
}
@keyframes dseCelebIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes dseCelebPop { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .dse-c-celebrate, .dse-c-180 { animation: none; }
  .dse-c-card { transition: none; }
}

/* ---- in-app cast screen chrome ---- */
#castScreen { padding: 0; background: var(--bg-0, #0d0f14); min-height: 100vh; }

/* While the in-app big screen is showing, silence the app's own fixed
   celebration overlays — the cast view draws its own. */
body.dse-casting #celebrate180,
body.dse-casting #winnerSign,
body.dse-casting #legBanner { display: none !important; }
#castScreen .dse-cast-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; background: var(--bg-1, #161922);
  border-bottom: 1px solid rgba(201,161,74,.22);
}
#castScreen .dse-cast-bar .hint {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #8b8579);
}
#castStage { display: flex; min-height: 72vh; background: var(--bg-0, #0d0f14); }
#castScreen:fullscreen .dse-cast-bar,
#castScreen:-webkit-full-screen .dse-cast-bar { display: none; }
#castScreen:fullscreen #castStage,
#castScreen:-webkit-full-screen #castStage { min-height: 100vh; }

/* standalone window / TV receiver */
body.dse-cast-window { margin: 0; background: var(--bg-0, #0d0f14); }
body.dse-cast-window { height: 100%; }
html:has(body.dse-cast-window) { height: 100%; }
body.dse-cast-window #castStage { display: flex; min-height: 100vh; }

/* ============================================================================
   BIG SCREEN: THE RESULT
   ----------------------------------------------------------------------------
   Shown when a match finishes and held until the next one starts. Deliberately
   has no buttons: a television has no one tapping it, and losing them is what
   leaves room for all eight stat columns without the sideways scroll the phone
   needs. Sized in vh/vmin so it fills a TV across the room, and it is the only
   thing on screen, so it can afford to be big.
   ========================================================================== */
.dse-c-final {
  /* width:100% so the column is as wide as the screen. Without it this box is
     shrink-to-fit and anything sized in % inside it resolves against the widest
     line of text, not the display. */
  width: 100%;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2vh;
  padding: 3vh 3vw; text-align: center;
}
.dse-c-trophy { font-size: clamp(48px, 11vh, 140px); line-height: 1; }
.dse-c-final-h {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 9vh, 120px); letter-spacing: .12em; line-height: 1;
  color: var(--accent, #E8B84B);
}
.dse-c-final-w {
  font-size: clamp(26px, 6.5vh, 86px); font-weight: 800; line-height: 1.1;
  color: var(--accent-2, #F4ECD8);
}
.dse-c-final-m {
  font-size: clamp(13px, 2.4vh, 30px); color: var(--muted, #8b8a82);
  letter-spacing: .04em; margin-bottom: 1vh;
}
/* One card per player, the winner outlined in gold — the same shape as the
   player cards during a live match, so the result looks like the rest of the app
   rather than a spreadsheet. Chosen over a wide table because the comparison
   people actually make reads down a column, and because it is the only layout
   that does not degrade as players are added. */
/* vw, NOT a percentage. .dse-c-final is a shrink-to-fit flex column, so `92%`
   resolved against its own narrow content box and left the cards huddled on one
   side of the screen — 57px of margin on the left and 794px on the right. The
   table this replaced used min(96vw,…) and never showed the problem. */
.dse-c-fcards {
  display: flex; gap: 2vmin; width: min(92%, 1600px);
  justify-content: center; flex-wrap: wrap;
}
.dse-c-fcards.many .dse-c-fcard { flex: 1 1 30%; }
.dse-c-fcard {
  flex: 1 1 0; min-width: 0; max-width: 46%;
  background: var(--bg-1, #14161C); border: 1px solid var(--border, #2e3140);
  border-radius: 1.2vmin; padding: 1.8vmin 1.6vmin; text-align: left;
}
.dse-c-fcard.won { border-color: var(--accent, #E8B84B); box-shadow: 0 0 0 1px var(--accent, #E8B84B) inset; }
.dse-c-fcard h3 {
  margin: 0 0 1.2vmin; font-size: clamp(16px, 3vmin, 42px); line-height: 1.1;
  color: var(--text, #F4ECD8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dse-c-fcard.won h3 { color: var(--accent, #E8B84B); }
.dse-c-fr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5vmin;
  padding: .5vmin 0; border-top: 1px solid var(--border, #2e3140);
  font-size: clamp(12px, 2.2vmin, 30px);
}
.dse-c-fr:first-of-type { border-top: 0; }
.dse-c-fr span { color: var(--muted, #8b8a82); letter-spacing: .1em; text-transform: uppercase; font-size: .82em; }
.dse-c-fr b { font-variant-numeric: tabular-nums; font-size: 1.18em; color: var(--text, #F4ECD8); }
.dse-c-fcard.won .dse-c-fr b { color: var(--accent, #E8B84B); }
}