/* Live play-by-play for the dice simulator (game page modal + stats page).
   Every real roll scrolls past; see the ticker in baseball-game.js. */

.sim-rolls {
    margin: 10px 0 6px;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sim-rolls b { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.sim-ticker {
    height: min(9.6em, 28vh);
    overflow: hidden;
    background: #111;
    border: 2px solid #000;
    padding: 4px 6px;
    text-align: left;
    font-family: 'Courier New', monospace;
    font-size: 0.72em;
    line-height: 1.2;
    color: #9be29b;
    /* fade the oldest lines out at the top */
    -webkit-mask-image: linear-gradient(transparent, #000 35%);
    mask-image: linear-gradient(transparent, #000 35%);
}
.sim-card[data-phase="done"] .sim-ticker,
.sim-card[data-phase="error"] .sim-ticker { -webkit-mask-image: none; mask-image: none; }
.tk-line {
    display: grid;
    grid-template-columns: 3.4em 2.4em 2.6em 1fr auto;
    gap: 0 0.4em;
    white-space: nowrap;
}
.tk-dice { color: #fff; letter-spacing: 1px; }
.tk-play { overflow: hidden; text-overflow: ellipsis; }
.tk-game, .tk-inn { color: #6d8f6d; }
.tk-score { color: #ddd; font-variant-numeric: tabular-nums; }
.tk-out .tk-play { color: #8a8a8a; }
.tk-walk .tk-play { color: #8fc3ff; }
.tk-hit .tk-play { color: #9be29b; font-weight: bold; }
.tk-hr .tk-play { color: #ffd23f; font-weight: bold; }
.tk-final {
    margin: 2px 0;
    background: #ffd23f;
    color: #000;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}