#demoReview{
    --bg:var(--xf-contentBg); --bg-panel:var(--xf-contentAltBg); --bg-panel-alt:var(--xf-contentHighlightBg); --bg-raised:var(--xf-contentAltBg);
    --border:var(--xf-borderColor); --border-bright:var(--xf-borderColor); --orange:var(--xf-linkColor); --orange-dim:var(--xf-linkColor);
    --orange-glow:rgba(255,255,255,.06); --red:#ff6b6b; --red-dim:rgba(255,107,107,.28); --blu:#5c9cff; --blu-dim:rgba(92,156,255,.28);
    --text:var(--xf-textColor); --text-dim:var(--xf-textColorMuted); --text-faint:var(--xf-textColorMuted); --gold:#d4af37;
}
  #demoReview *{box-sizing:border-box; margin:0; padding:0;}
  #demoReview{
    background: var(--bg);
    color: var(--text);
    font-family: 'Barlow Semi Condensed', sans-serif;
    min-height: 100vh;
  }
  #demoReview{
    background: var(--bg);
  }
  #demoReview .mono{ font-family: 'JetBrains Mono', monospace; }
  #demoReview .disp{ font-family: 'Teko', sans-serif; font-weight:600; letter-spacing:0.02em; }

  #demoReview ::selection{ background: var(--orange); color:#14120d; }

  #demoReview .frame{
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 80px;
  }

  /* ---------- BREADCRUMB / EYEBROW ---------- */
  #demoReview .eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color: var(--text-faint);
    margin-bottom: 14px;
  }
  #demoReview .eyebrow .sep{ color: var(--border-bright); }
  #demoReview .eyebrow a{ color: var(--text-dim); text-decoration:none; }
  #demoReview .eyebrow a:hover{ color: var(--orange); }
  #demoReview .eyebrow .live-dot{
    width:6px;height:6px; background:var(--text-faint); display:inline-block;
    border-radius:50%;
  }

  /* ---------- HEADER ---------- */
  #demoReview .header{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  #demoReview .header-left{ min-width:280px; }
  #demoReview .demo-name{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--orange);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    display:flex; align-items:center; gap:8px;
  }
  #demoReview .demo-name .tag{
    font-size:10px; padding:2px 6px; border:1px solid var(--orange-dim);
    color: var(--orange); text-transform:uppercase; letter-spacing:0.06em;
  }
  #demoReview h1{
    font-family:'Teko', sans-serif;
    font-weight:700;
    font-size: 46px;
    line-height:0.95;
    text-transform:uppercase;
    letter-spacing: 0.01em;
    color: var(--text);
  }
  #demoReview .meta-row{
    display:flex; gap:22px; margin-top:10px; flex-wrap:wrap;
  }
  #demoReview .meta-item{
    display:flex; flex-direction:column; gap:1px;
  }
  #demoReview .meta-item .k{
    font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-faint);
    font-family:'JetBrains Mono', monospace;
  }
  #demoReview .meta-item .v{
    font-size:15px; color: var(--text-dim); font-weight:600;
  }
  #demoReview .meta-item .v.accent{ color: var(--text); }

  #demoReview .header-right{
    display:flex; gap:10px; align-items:center;
  }
  #demoReview .btn{
    font-family:'Barlow Semi Condensed', sans-serif;
    font-weight:600; font-size:14px; letter-spacing:0.03em; text-transform:uppercase;
    padding: 11px 18px;
    border: 1px solid var(--border-bright);
    background: var(--bg-panel-alt);
    color: var(--text-dim);
    cursor:pointer;
    display:flex; align-items:center; gap:8px;
    transition: border-color .12s, color .12s, background .12s;
  }
  #demoReview .btn:hover{ border-color: var(--text-dim); color:var(--text); }
  #demoReview .btn-primary{
    background: var(--orange);
    border-color: var(--orange);
    color: #1a1206;
  }
  #demoReview .btn-primary:hover{
    background: #f78a2e; border-color:#f78a2e; color:#1a1206;
  }
  #demoReview .btn svg{ width:15px; height:15px; }

  /* ---------- TIMELINE (signature element) ---------- */
  #demoReview .timeline-panel{
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 18px 20px 14px;
    margin-bottom: 22px;
    position: relative;
  }
  #demoReview .timeline-panel::before{
    content:"СОБЫТИЯ ПО ВРЕМЕНИ";
    position:absolute; top:-9px; left:16px;
    background: var(--bg);
    padding: 0 8px;
    font-family:'JetBrains Mono', monospace;
    font-size:10px; letter-spacing:0.12em; color: var(--text-faint);
  }
  #demoReview .tl-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 14px;
  }
  #demoReview .tl-legend{
    display:flex; gap:16px; flex-wrap:wrap;
  }
  #demoReview .tl-legend-item{
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--text-dim);
    font-family:'JetBrains Mono', monospace;
  }
  #demoReview .tl-legend-item .sw{ width:9px; height:9px; display:inline-block; }
  #demoReview .tl-time-now{
    font-family:'Teko', sans-serif; font-size:26px; color:var(--orange); font-weight:600;
    letter-spacing:0.02em;
  }
  #demoReview .tl-time-now span{ color: var(--text-faint); font-size:16px; }

  #demoReview .tl-scroll{ overflow-x:auto; padding-bottom:4px; }
  #demoReview svg#timeline{ display:block; cursor: crosshair; }
  #demoReview .tl-tick-label{ font-family:'JetBrains Mono', monospace; font-size:9px; fill: var(--text-faint); }
  #demoReview .tl-round-band{ fill: rgba(255,255,255,0.015); }
  #demoReview .tl-round-band-alt{ fill: rgba(255,255,255,0.03); }
  #demoReview .tl-baseline{ stroke: var(--border-bright); stroke-width:1; }
  #demoReview .tl-playhead{ stroke: var(--text); stroke-width:1; stroke-dasharray:2 2; opacity:0; pointer-events:none; }
  #demoReview .tl-marker{ cursor:pointer; }
  #demoReview .tl-marker:hover .tl-stem{ stroke-width:2.2; }
  #demoReview .tl-marker.dim .tl-stem, .tl-marker.dim .tl-dot{ opacity:0.25; }

  #demoReview .tl-tooltip{
    position:absolute; pointer-events:none;
    background: #0f0d09; border:1px solid var(--border-bright);
    padding: 8px 11px; font-family:'JetBrains Mono', monospace; font-size:11.5px;
    color: var(--text); white-space:nowrap; z-index:20; opacity:0;
    transition: opacity .08s;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  }
  #demoReview .tl-tooltip .tt-time{ color: var(--orange); margin-right:8px; }
  #demoReview .tl-tooltip.show{ opacity:1; }

  /* ---------- TABS ---------- */
  #demoReview .tabs{
    display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:0;
  }
  #demoReview .tab-btn{
    font-family:'Teko', sans-serif; font-weight:600; font-size:20px; letter-spacing:0.04em;
    text-transform: uppercase;
    padding: 9px 22px 11px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-bottom: none;
    color: var(--text-faint);
    cursor: pointer;
    position:relative; top:1px;
    display:flex; align-items:center; gap:8px;
  }
  #demoReview .tab-btn .count{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:500;
    color: var(--text-faint); background: var(--bg); padding:1px 6px;
    border:1px solid var(--border-bright);
  }
  #demoReview .tab-btn.active{
    color: var(--orange);
    background: var(--bg-panel);
    border-color: var(--border-bright);
    border-bottom: 1px solid var(--bg-panel);
  }
  #demoReview .tab-btn.active .count{ color: var(--orange); border-color: var(--orange-dim); }
  #demoReview .tab-btn:hover:not(.active){ color: var(--text-dim); }

  #demoReview .tab-panel{
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-top:none;
    min-height: 420px;
  }
  #demoReview .panel{ display:none; }
  #demoReview .panel.active{ display:block; }

  /* ---------- PLAYERS TAB (scoreboard) ---------- */
  #demoReview .scoreboard{ display:grid; grid-template-columns:1fr 1fr; }
  #demoReview .team-col{ padding: 0; }
  #demoReview .team-col + .team-col{ border-left: 1px solid var(--border); }
  #demoReview .team-head{
    padding: 12px 18px; display:flex; justify-content:space-between; align-items:center;
    font-family:'Teko', sans-serif; font-size:22px; font-weight:600; letter-spacing:0.05em;
  }
  #demoReview .team-head.red{ background: var(--red-dim); color:#e2827a; }
  #demoReview .team-head.blu{ background: var(--blu-dim); color:#8fc0dd; }

  #demoReview .player-row{
    display:grid; grid-template-columns: 30px 1fr 40px 40px 44px 46px;
    align-items:center; gap:10px;
    padding: 9px 18px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
  }
  #demoReview .player-row:hover{ background: var(--bg-panel-alt); }
  #demoReview .class-badge{
    font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:700;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--border-bright); color: var(--text-dim);
    letter-spacing:0.02em;
  }
  #demoReview .pname{ color: var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #demoReview .pname .suspect{ color: var(--orange); margin-left:6px; font-size:10px; font-family:'JetBrains Mono',monospace; border:1px solid var(--orange-dim); padding:1px 4px; }
  #demoReview a.plink{ color: inherit; text-decoration:none; border-bottom: 1px solid transparent; }
  #demoReview a.plink:hover{ color: var(--orange); border-bottom-color: var(--orange-dim); }
  #demoReview .pstat{ font-family:'JetBrains Mono', monospace; text-align:right; color:var(--text-dim); }
  #demoReview .pstat.hi{ color: var(--text); }
  #demoReview .col-labels{
    display:grid; grid-template-columns: 30px 1fr 40px 40px 44px 46px;
    padding: 6px 18px; gap:10px;
    font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.06em;
    color: var(--text-faint); text-transform:uppercase; text-align:right;
    border-top:1px solid var(--border);
  }
  #demoReview .col-labels span:nth-child(1), .col-labels span:nth-child(2){ text-align:left; }

  /* ---------- EVENTS TAB (console log) ---------- */
  #demoReview .events-log{ padding: 4px 0; }
  #demoReview .ev-row{
    display:grid; grid-template-columns: 64px 90px 1fr;
    gap: 14px; align-items:start;
    padding: 7px 18px;
    font-family:'JetBrains Mono', monospace; font-size:12.5px;
    border-top: 1px solid var(--border);
  }
  #demoReview .ev-row:hover{ background: var(--bg-panel-alt); }
  #demoReview .ev-row.highlight{ background: var(--orange-glow); }
  #demoReview .ev-time{ color: var(--text-faint); }
  #demoReview .ev-type{
    text-transform:uppercase; font-size:10px; letter-spacing:0.06em;
    padding: 2px 6px; height:fit-content; border:1px solid var(--border-bright); color: var(--text-dim);
  }
  #demoReview .ev-type.kill{ color:#e2827a; border-color: var(--red-dim); }
  #demoReview .ev-type.cap{ color: var(--gold); border-color:#7a662a; }
  #demoReview .ev-type.uber{ color:#8fc0dd; border-color: var(--blu-dim); }
  #demoReview .ev-type.round{ color: var(--orange); border-color: var(--orange-dim); }
  #demoReview .ev-type.sys{ color: var(--text-faint); }
  #demoReview .ev-text{ color: var(--text-dim); }
  #demoReview .ev-text b{ color: var(--text); font-weight:600; }
  #demoReview .ev-text .weap{ color: var(--text-faint); }
  #demoReview .ev-text .crit{ color: var(--orange); }

  /* ---------- CHAT TAB ---------- */
  #demoReview .chat-log{ padding: 12px 0; }
  #demoReview .chat-row{
    display:flex; gap:10px; padding: 5px 18px;
    font-family:'JetBrains Mono', monospace; font-size:13px;
  }
  #demoReview .chat-row:hover{ background: var(--bg-panel-alt); }
  #demoReview .chat-time{ color: var(--text-faint); flex-shrink:0; }
  #demoReview .chat-name{ flex-shrink:0; font-weight:700; }
  #demoReview .chat-name.red{ color: #d1665c; }
  #demoReview .chat-name.blu{ color: #6fa2c2; }
  #demoReview .chat-name.sys{ color: var(--text-faint); font-weight:400; }
  #demoReview .chat-msg{ color: var(--text-dim); }
  #demoReview .chat-row.team .chat-msg::before{ content:"(команда) "; color:var(--text-faint); }
  #demoReview .chat-row.dead .chat-name::after{ content:"💀"; display:none; }
  #demoReview .chat-row.dead{ opacity:0.6; }
  #demoReview .chat-row.dead .chat-msg::before{ content:"*МЁРТВ* "; color: var(--text-faint); }

  /* ---------- FOOTER STRIP ---------- */
  #demoReview .footer-strip{
    margin-top: 22px; padding-top:14px; border-top:1px solid var(--border);
    display:flex; justify-content:space-between; color: var(--text-faint);
    font-family:'JetBrains Mono', monospace; font-size:11px;
  }

  @media (max-width: 720px){
    #demoReview h1{ font-size:34px; }
    #demoReview .scoreboard{ grid-template-columns:1fr; }
    #demoReview .team-col + .team-col{ border-left:none; border-top:1px solid var(--border); }
    #demoReview .header{ flex-direction:column; align-items:flex-start; }
    #demoReview .player-row, .col-labels{ grid-template-columns: 24px 1fr 32px 32px 38px; }
    #demoReview .player-row > *:nth-child(6), .col-labels > *:nth-child(6){ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }
#demoReview .player-row,#demoReview .col-labels{grid-template-columns:48px 30px 1fr 40px 40px 44px}
#demoReview .player-avatar{width:42px;height:28px;object-fit:cover;background:var(--bg-raised)}
#demoReview img.class-badge{width:26px;height:26px;object-fit:contain;border:0}
#demoReview .pname.blu a{color:#5c9cff}#demoReview .pname.red a{color:#ff6b6b}
#demoReview .team-col.blu .team-head{background:rgba(92,156,255,.28);color:#8fc0dd}
#demoReview .team-col.red .team-head{background:rgba(255,107,107,.28);color:#ff9a9a}
#demoReview .tl-marker{cursor:help}#demoReview .tl-marker:hover .tl-stem{stroke-width:3}
/* Production skin: keep the site palette, but make the reference layout readable. */
#demoReview{
  --bg:#15171a; --bg-panel:#24272b; --bg-panel-alt:#30343a; --bg-raised:#3a3e44;
  --border:rgba(255,255,255,.13); --border-bright:rgba(255,255,255,.30);
  --text:#eef1f5; --text-dim:#c1c9d3; --text-faint:#89939f;
  --orange:#f3bb55; --orange-dim:#a97828; --orange-glow:rgba(243,187,85,.16);
}
#demoReview .frame{margin-top:14px;padding:24px;background:linear-gradient(180deg,#2d3035 0%,#1e2125 100%);border:1px solid var(--border-bright);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05)}
#demoReview .timeline-panel,#demoReview .tab-panel{background:linear-gradient(180deg,rgba(54,58,64,.96),rgba(35,38,43,.98));border-color:var(--border-bright);box-shadow:inset 0 1px rgba(255,255,255,.045)}
#demoReview .timeline-panel{position:relative;border:1px solid var(--border-bright);border-radius:5px;padding:14px 16px}
#demoReview .tab-panel{border-top:0;min-height:430px}
#demoReview .tabs{margin-top:22px}
#demoReview .tab-btn{background:#282c31;border-color:var(--border-bright)}
#demoReview .tab-btn.active{background:#3b4047;color:var(--text);border-bottom-color:#3b4047}
#demoReview .team-col{background:rgba(13,15,18,.20)}
#demoReview .team-head{min-height:56px;border-bottom:1px solid var(--border-bright);box-shadow:inset 0 1px rgba(255,255,255,.08)}
#demoReview .team-col.blu .team-head{background:linear-gradient(90deg,rgba(56,112,190,.72),rgba(48,83,132,.64));color:#b8d8ff}
#demoReview .team-col.red .team-head{background:linear-gradient(90deg,rgba(171,68,68,.68),rgba(121,47,47,.64));color:#ffc0c0}
#demoReview .player-row,#demoReview .col-labels{grid-template-columns:48px 30px minmax(120px,1fr) 72px 72px 72px;gap:9px}
#demoReview .col-labels{padding-top:9px;padding-bottom:8px;font-size:9px;text-transform:none;color:#d2d9e1}
#demoReview .player-row{min-height:46px;padding-top:6px;padding-bottom:6px;background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.09)}
#demoReview .player-row:nth-child(even){background:rgba(0,0,0,.14)}
#demoReview .player-row:hover{background:rgba(255,255,255,.10)}
#demoReview .player-avatar{width:42px;height:32px;border:1px solid rgba(255,255,255,.14)}
#demoReview img.class-badge{width:28px;height:28px}
#demoReview .pname{font-size:14px}
#demoReview .pstat{font-size:12px;color:#d6dde6}
#demoReview .pname.blu a{color:#87b9ff}.pname.red a{color:#ff9797}
#demoReview .tl-tooltip{display:none;position:absolute;z-index:10;max-width:300px;padding:7px 9px;background:#101215;border:1px solid rgba(255,255,255,.30);border-radius:4px;color:#f1f4f7;font:12px/1.35 'JetBrains Mono',monospace;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.38)}
#demoReview .tl-tooltip.show{display:block}
@media(max-width:720px){#demoReview .player-row,#demoReview .col-labels{grid-template-columns:42px 28px minmax(80px,1fr) 54px 54px 54px;gap:5px}#demoReview .col-labels{font-size:8px}#demoReview .frame{padding:14px}}

/* Compact scoreboard and timeline refinements. */
#demoReview .timeline-panel{padding:10px 14px}
#demoReview .tl-scroll{height:100px}
#demoReview .tl-head{margin-bottom:2px}
#demoReview .observers{border-top:1px solid var(--border-bright);background:rgba(0,0,0,.18)}
#demoReview .observers-title{padding:10px 18px;color:#aab1ba;font:600 13px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
#demoReview .observers-title span{color:#737d89}
#demoReview .observer-list{display:grid;grid-template-columns:1fr 1fr}
#demoReview .observer-list .player-row{grid-template-columns:48px 30px minmax(120px,1fr) 72px 72px 72px;opacity:.68}
#demoReview .pname.spectator a{color:#abb2bb}
#demoReview .chat-row{align-items:center}
#demoReview .chat-avatar{width:28px;height:28px;object-fit:cover;background:#20242a;border:1px solid rgba(255,255,255,.13)}
#demoReview .chat-prefix{flex-shrink:0;color:#8f99a4;font:11px 'JetBrains Mono',monospace}
#demoReview .chat-row.team .chat-msg::before{content:none}
@media(max-width:720px){#demoReview .observer-list{grid-template-columns:1fr}#demoReview .chat-avatar{width:24px;height:24px}}

#demoReview .col-labels span:nth-child(3){text-align:left}
#demoReview .timeline-panel{position:relative;overflow:visible}
#demoReview .tl-scroll{height:100px}
#demoReview .tl-tooltip{max-width:330px;display:none;z-index:30;transform:translateY(-100%);pointer-events:none}
#demoReview .tl-tooltip.show{display:block}
#demoReview .tl-tooltip b{color:#f3bb55}.tl-tooltip span{color:#a9c9ff}.tl-tooltip small{display:block;margin-top:4px;color:#89939f}

/* Final alignment and semantic event styling. */
#demoReview .col-labels span:nth-child(3){text-align:left!important;padding-left:0}
#demoReview .pname{display:flex;align-items:center;gap:5px}
#demoReview .player-team-change{display:inline-flex;align-items:center;gap:3px;color:#aab3bd;font-size:12px}
#demoReview .event-team-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle}
#demoReview .event-class-icon{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-left:4px}
#demoReview .event-weapon{color:#f3bb55;margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:11px}
#demoReview .event-arrow{padding:0 6px;color:#bfc7d0}
#demoReview .detail-content{background:linear-gradient(180deg,#2d3035,#1e2125);border:1px solid rgba(255,255,255,.22);padding:16px;color:#eef1f5}
#demoReview .timeline-panel .tl-stem{stroke-width:1.5}

.detail-content{background:linear-gradient(180deg,#2d3035,#1e2125)!important;border:1px solid rgba(255,255,255,.22)!important;color:#eef1f5!important}
.detail-content .detail-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.22);margin-bottom:12px}.detail-content .detail-tabs .tab-btn{background:#282c31;border:1px solid rgba(255,255,255,.22);color:#c1c9d3;padding:9px 14px}.detail-content .detail-tabs .tab-btn.active{background:#3b4047;color:#fff}.detail-content .section-title,.detail-content .info-item{color:#eef1f5}.detail-content .players-ul,.detail-content .events-ul,.detail-content .chat-ul{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.12);padding:8px 12px}.detail-content .event-li,.detail-content .chat-li,.detail-content .player-li{border-bottom:1px solid rgba(255,255,255,.09);padding:6px 0}


/* Inline list expansion mirrors the review score-board without requesting a second payload. */
.detail-content .inline-demo-scoreboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:#4b5056; }
.detail-content .inline-team { min-width:0; background:#202428; }
.detail-content .inline-team h4 { margin:0; padding:12px 15px; font:700 22px/1 Arial,sans-serif; letter-spacing:.5px; }
.detail-content .inline-team h4 small { float:right; margin-top:4px; font:600 11px monospace; color:#d6dce5; }
.detail-content .inline-team.blu h4 { background:#374e70; color:#86c8ff; }
.detail-content .inline-team.red h4 { background:#693b3e; color:#ff9494; }
.detail-content .inline-player-labels, .detail-content .inline-player-row { display:grid; grid-template-columns:38px 24px minmax(80px,1fr) 62px 62px 62px; align-items:center; gap:7px; }
.detail-content .inline-player-labels { min-height:31px; padding:0 13px; color:#b7c7d9; font:9px/1 monospace; }
.detail-content .inline-player-labels span:nth-child(n+3) { text-align:right; }
.detail-content .inline-player-row { min-height:48px; margin:0 8px 5px; padding:4px 5px; background:rgba(255,255,255,.035); color:#d8e9ff; font:13px/1.2 Arial,sans-serif; }
.detail-content .inline-player-row > span { text-align:right; color:#ffd469; font:12px monospace; }
.detail-content .inline-player-avatar { width:34px; height:34px; object-fit:cover; background:#30363c; }
.detail-content .inline-class-icon { width:21px; height:21px; object-fit:contain; }
.detail-content .inline-player-name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detail-content .inline-player-name a { color:#d8e9ff; text-decoration:none; }
.detail-content .inline-name-caption { display:block; margin-bottom:3px; color:#9eb0c5; font:8px/1 monospace; letter-spacing:.4px; }
.detail-content .inline-empty, .detail-content .inline-spectators { margin:0; padding:14px; color:#9ba5af; font:12px Arial,sans-serif; }
.detail-content .inline-spectators { grid-column:1/-1; background:#252a2f; }
.detail-content .inline-spectators b { margin-right:10px; color:#7f8994; font:10px monospace; }
@media(max-width:760px){.detail-content .inline-demo-scoreboard{grid-template-columns:1fr}.detail-content .inline-spectators{grid-column:auto}.detail-content .inline-player-labels,.detail-content .inline-player-row{grid-template-columns:34px 22px minmax(70px,1fr) 45px 45px 45px;gap:4px}.detail-content .inline-team h4{font-size:18px}}


/* Keep the third grid column anchored to the player nick, not to its right edge. */
#demoReview .col-labels > span:nth-child(3){grid-column:3;justify-self:stretch!important;text-align:left!important}
#demoReview .player-team-change{max-width:52px;min-width:0;white-space:nowrap;overflow:hidden;flex:0 0 auto}
#demoReview img.event-team-icon,#demoReview .player-team-change img.event-team-icon{display:inline-block!important;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;max-height:16px!important;object-fit:contain!important;vertical-align:middle!important}
#demoReview img.event-class-icon{display:inline-block!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;max-height:18px!important;object-fit:contain!important;vertical-align:middle!important}
#demoReview .ev-text .event-team-icon,#demoReview .ev-text .event-class-icon{margin:0 3px}


/* Keep the third grid column anchored to the player nick, not to its right edge. */
#demoReview .col-labels > span:nth-child(3){grid-column:3;justify-self:stretch!important;text-align:left!important}
#demoReview .player-team-change{max-width:52px;min-width:0;white-space:nowrap;overflow:hidden;flex:0 0 auto}
#demoReview img.event-team-icon,#demoReview .player-team-change img.event-team-icon{display:inline-block!important;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;max-height:16px!important;object-fit:contain!important;vertical-align:middle!important}
#demoReview img.event-class-icon{display:inline-block!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;max-height:18px!important;object-fit:contain!important;vertical-align:middle!important}
#demoReview .ev-text .event-team-icon,#demoReview .ev-text .event-class-icon{margin:0 3px}


/* Readable, full-width timeline with visible time scale. */
#demoReview .tl-scroll{height:140px!important;padding:0 0 2px}
#demoReview .tl-grid{stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 5}
#demoReview .tl-tick{fill:#9ca7b3;font:10px 'JetBrains Mono',monospace}
#demoReview .tl-baseline{stroke:rgba(255,255,255,.38);stroke-width:1.5}
#demoReview .tl-marker:hover .tl-dot{filter:drop-shadow(0 0 4px currentColor)}
#demoReview .event-observer-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;vertical-align:middle;color:#9ca7b3;font-size:14px;line-height:1;cursor:help}


/* Restore the original dark, gold-accented review palette. */
#demoReview{--bg:#090a0c;--bg-panel:#111315;--bg-panel-alt:#1a1d21;--bg-raised:#15181b;--border:#373c42;--border-bright:#565d65;--orange:#f2b844;--orange-dim:rgba(242,184,68,.45);--orange-glow:rgba(242,184,68,.13);--text:#edf2f7;--text-dim:#bfd3e8;--text-faint:#8998a8;--gold:#d7af38}


/* Observer rows intentionally have no class badge or score columns. */
#demoReview .observer-list .player-row.observer-row{grid-template-columns:48px minmax(120px,1fr);gap:9px}
#demoReview .player-team-change{max-width:none;overflow:visible}
#demoReview .player-team-change img.event-team-icon,#demoReview .player-team-change .event-observer-icon{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;max-height:24px!important;font-size:21px!important}

/* The timeline is always fitted to the panel; it must never create a scrollbar. */
#demoReview .tl-scroll{width:100%!important;max-width:100%!important;overflow:hidden!important;padding:0!important}
#demoReview #timeline{display:block;width:100%!important;max-width:100%!important}


#demoReview .class-badge-placeholder{display:block;width:30px;height:30px}
#demoReview .recording-live-notice{display:flex;align-items:center;gap:13px;min-height:120px;padding:26px 30px;border:1px solid #8f3434;background:linear-gradient(90deg,rgba(132,42,42,.32),rgba(38,20,20,.82));color:#ffd5d5}
#demoReview .recording-live-notice b{display:block;color:#ff7777;font:700 22px 'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em}
#demoReview .recording-live-notice span:last-child{display:block;margin-top:4px;color:#d8c0c0;font-size:14px}
#demoReview .recording-live-dot{width:13px;height:13px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 0 0 rgba(255,92,92,.7);animation:demo-recording-pulse 1.25s infinite}
@keyframes demo-recording-pulse{70%{box-shadow:0 0 0 11px rgba(255,92,92,0)}100%{box-shadow:0 0 0 0 rgba(255,92,92,0)}}


#demoReview .recording-live-notice--inline{min-height:0;margin:0 0 12px;padding:12px 16px}
.detail-content .inline-team.neutral{grid-column:1/-1}