/* c_bowling.css -- ANSI terminal preview blocks for the C bowling build-along.
   Loaded alongside bowling.css, which supplies the page chrome. */

.bowl-page .ansi-screen {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 5px;
    padding: 16px 18px;
    margin: 0 0 16px;
    overflow-x: auto;
    font-family: Consolas, Menlo, Monaco, "DejaVu Sans Mono", monospace;
    font-size: .8rem;
    line-height: 1.45;
    color: #c9d1d9;
    white-space: pre;
    -webkit-font-smoothing: none;
}

/* The eight colors the C program actually emits, matched to its escape codes. */
.bowl-page .ansi-b { color: #585f68; }   /* 38;5;240  box drawing   */
.bowl-page .ansi-l { color: #b3bac1; }   /* 38;5;250  labels        */
.bowl-page .ansi-x { color: #ff6b6b; font-weight: 700; }  /* 1;31  strike */
.bowl-page .ansi-s { color: #e8c77a; font-weight: 700; }  /* 1;33  spare  */
.bowl-page .ansi-g { color: #6e7681; }   /* 38;5;243  gutter        */
.bowl-page .ansi-p { color: #c9d1d9; }   /* 0;37      pin count     */
.bowl-page .ansi-t { color: #56d4dd; font-weight: 700; }  /* 1;36  running total */
.bowl-page .ansi-f { color: #39d353; font-weight: 700; }  /* 1;32  final score   */

/* Caption bar sitting above a terminal preview. */
.bowl-page .ansi-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #1b1f24;
    border: 1px solid #30363d;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 7px 12px;
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8f9aa3;
}

.bowl-page .ansi-label + .ansi-screen {
    border-radius: 0 0 5px 5px;
    margin-top: 0;
}

.bowl-page .ansi-label .dots {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.bowl-page .ansi-label .dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3d444d;
}

.bowl-page .ansi-label .dots i:first-child { background: #ff5f57; }
.bowl-page .ansi-label .dots i:nth-child(2) { background: #febc2e; }
.bowl-page .ansi-label .dots i:nth-child(3) { background: #28c840; }

/* A small table mapping escape codes to what they do. */
.bowl-page .ansi-key {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: .85rem;
}

.bowl-page .ansi-key th,
.bowl-page .ansi-key td {
    border: 1px solid #dcdcde;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.bowl-page .ansi-key th {
    background: #f6f7f7;
    font-weight: 600;
    color: #1d2327;
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bowl-page .ansi-key td:first-child {
    font-family: Consolas, Menlo, Monaco, monospace;
    white-space: nowrap;
    color: #14694a;
}

.bowl-page .ansi-key tr:nth-child(even) td { background: #fafafa; }

@media (max-width: 720px) {
    .bowl-page .ansi-screen { font-size: .68rem; padding: 12px; }
}