/* Focus psychology + color meaning (Mike, Oct 2026).
   Green = go / win / primary action only.
   Amber = staging / attention.
   Red = foul / error only.
   Everything else = graphite / near-black.
   While the tree is active, surrounding UI dims so bulbs are the brightest thing. */

:root {
  --ptl-focus-dim: 0.42;
  --ptl-frame: #05070a;
  --ptl-frame-edge: rgba(255,255,255,0.06);
}

/* Calm dark frame: marketing/race frames only. Practice tree stays transparent
   so the Dial Lab scoreboard + tree dual layout has no weird box behind the tree. */
.ptl-render, .hero-tree-frame {
  background: var(--ptl-frame);
  box-shadow: inset 0 0 0 1px var(--ptl-frame-edge);
  border-radius: 10px;
}
.tree-v2 {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Tree active: dim chrome that competes with the bulbs */
html.ptl-tree-active .pshell--practice .arena-bar,
html.ptl-tree-active .pshell--practice .ctrl-sheet,
html.ptl-tree-active .pshell--practice .daily-challenge,
html.ptl-tree-active .pshell--practice .ptl-engage,
html.ptl-tree-active .pshell--practice .session-strip,
html.ptl-tree-active .psh-head,
html.ptl-tree-active .psh-bottom {
  opacity: var(--ptl-focus-dim);
  transition: opacity 80ms ease-out;
  pointer-events: none;
}
html.ptl-tree-active .tb-row,
html.ptl-tree-active .tree-v2,
html.ptl-tree-active .ptl-solo-win,
html.ptl-tree-active .solo-board,
html.ptl-tree-active .ptl-seg {
  opacity: 1 !important;
  pointer-events: auto;
}
/* Result hold: restore UI, timeslip full bright, no fade-in animation */
html.ptl-tree-result .pshell--practice .arena-bar,
html.ptl-tree-result .pshell--practice .ctrl-sheet,
html.ptl-tree-result .pshell--practice .ptl-engage,
html.ptl-tree-result .pshell--practice .session-strip,
html.ptl-tree-result .psh-head,
html.ptl-tree-result .psh-bottom {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.ptl-timeslip {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}
.ptl-seg__digits {
  transition: none !important;
  color: #ffb020; /* amber digits = attention/readout, not green */
}
.ptl-seg__digits.foul { color: #ff4436; }
.ptl-seg__digits.empty { color: rgba(255,176,32,0.18); }

/* Color discipline: primary actions green; don't paint decorative greens */
.ptl-timeslip__v.win { color: #d4a72c; }
.ptl-timeslip__v.foul { color: #ff4436; }
.ptl-timeslip__v.amber { color: #ffb020; }
.ptl-timeslip__actions .ptl-again {
  background: #e3263b; color: #ffffff; /* primary re-arm only */
}
.ptl-engage__row b { color: #cfd6df; } /* neutral numbers, not amber decoration */
.ptl-engage {
  background: #0a0c0e;
  border-color: rgba(255,255,255,0.08);
}

/* Race finish: same crisp snap */
html.race-finish .ptl-timeslip,
html.race-finish .result-box {
  transition: none !important;
  animation: none !important;
}

/* Soften decorative green glows left on marketing chrome */
.hero-tree-tag .dot,
.pulse-dot {
  box-shadow: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.ptl-tree-active .pshell--practice .arena-bar,
  html.ptl-tree-active .psh-head,
  html.ptl-tree-active .psh-bottom { transition: none; }
}

/* Poker-lobby racer chip + card (understated) */
button.ptl-racer, .ptl-racer {
  background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer;
  text-align: left;
}
button.ptl-racer:hover { text-decoration: underline; }
.ptl-elo {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: #8a939c; letter-spacing: .02em;
}
.ptl-racer-card {
  position: absolute; z-index: 1200; width: 280px;
  background: #0c1016; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.8); padding: 12px 14px; color: #e7ebe7;
}
.ptl-racer-card__h { font: 700 14px/1.2 Saira, system-ui, sans-serif; margin-bottom: 10px; }
.ptl-racer-card__h .h { margin-left: 8px; color: #8a939c; font-weight: 600; font-size: 12px; }
.ptl-racer-card__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ptl-racer-card__g .k { display: block; font-size: 10px; color: #5b646e; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.ptl-racer-card__g .v { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #cfd6df; }
.ptl-racer-card__a {
  display: block; margin-top: 12px; text-align: center; padding: 8px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #cfd6df;
  text-decoration: none; font-size: 12px; font-weight: 700;
}
.ptl-racer-card__a:hover { border-color: rgba(227,38,59,.35); color: #e3263b; }

/* Race seats: two lanes like poker seats */
.race-hud .rh-racer {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  background: #0a0c0e; min-height: 64px;
}
.race-hud .rh-racer.me { border-color: rgba(227,38,59,.28); }
.race-hud .rh-status {
  margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: #8a939c; text-transform: none;
}
.race-hud .rh-status[data-s="pre"] { color: #ffb020; }
.race-hud .rh-status[data-s="staged"] { color: #35d34b; }
.race-hud .rh-status[data-s="ready"] { color: #cfd6df; }
.race-hud .rh-delay {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8a939c; margin-top: 2px;
}
.rh-stagedot { box-shadow: none !important; }

/* Quiet session strip (poker session tracker feel) */
.ptl-session {
  position: fixed; left: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 35; padding: 6px 10px; border-radius: 8px;
  background: rgba(10,12,14,.92); border: 1px solid rgba(255,255,255,.1);
  font: 700 11px/1.3 'JetBrains Mono', monospace; color: #8a939c;
  pointer-events: none;
}
.ptl-session b { color: #cfd6df; font-weight: 700; }
@media (min-width: 720px) {
  .ptl-session { bottom: 16px; left: 16px; }
}
html.ptl-tree-active .ptl-session { opacity: 0.35; }

/* Lobby live counts line */
.lt-presence {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font: 600 12px/1.3 'JetBrains Mono', monospace; color: #8a939c; margin: 0 0 8px;
}
.lt-presence b { color: #cfd6df; }
.lt-presence .live b { color: #e3263b; }

/* Result declutter + seat framing visibility */
.rt-value.ptl-rt-hidden { display: none !important; }
#rt-status { display: none !important; }
html.race-finish #result-rt,
html.race-finish #result-verdict,
html.race-finish #result-opp { display: none !important; }
html.race-finish #race-hud:not(.hidden) {
  display: grid !important;
  opacity: 1 !important;
  position: relative;
  z-index: 25;
}
.race-hud .rh-racer {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #0a0c0e;
  min-height: 78px;
}
.race-hud .rh-name { font-size: 14px; font-weight: 700; }
.race-hud .rh-status { margin-top: 6px; font-size: 12px; }
.race-hud .rh-delay { margin-top: 4px; font-size: 12px; color: #cfd6df; }


/* Practice arena: zero frame / card chrome around tree or board */
html.arena-mode .tree-v2,
html.arena-mode .stage-pair,
html.arena-mode .solo-board {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
/* The tree file is an opaque black plate. Screen blend drops that black onto
   the page, the same treatment as the lobby and landing trees. Filter stays
   off this element: Safari paints a black rectangle when filter and
   mix-blend-mode are set together. Overlay bulbs still screen-blend on their own. */
html.arena-mode .tree-v2 .ptl-tree-art {
  filter: none !important;
  mix-blend-mode: screen !important;
}

html.arena-mode .psh-head,
html.arena-mode .pshell {
  background: #000 !important;
  box-shadow: none !important;
}