/* Game sumbrawl (DECISIONS arbitrage 10): loaded by the layout on the pages of the game only; every class starts
   with sb-. The slate: dark board, chalk digits, the rank read by a border colour and by its number, never the colour
   alone. The site's components (v2/CHARTE.md §3) come first: the game's menu is a nav.tabs, its hidden texts
   .visually-hidden, its main action .button-primary; the base gives every control its 44 px under a finger. */

.sb-page {
    --sb-slate: #26332f;
    --sb-slate-light: #33433e;
    --sb-chalk: #f3f1e7;
    --sb-chalk-dim: #c9c7bb;
    --sb-t1: #f3f1e7;
    --sb-t2: #8cc8ec;
    --sb-t3: #f2d466;
    --sb-t4: #f4a0bd;
    --sb-win: #9be39f;
    --sb-loss: #ff9e9e;
    --sb-slate-line: #5d6d68;
    --sb-tutorial-bg: #eef4ee;
    --sb-tutorial-line: #4a7a4a;
}

/* The link to skip the game's menu: off screen until it has the focus (white on the accent: 5.6:1). */
.sb-skip { position: absolute; left: -10000px; }
.sb-skip:focus { position: static; display: inline-block; margin: 0 0 var(--ns-space-2); padding: 0.625rem var(--ns-space-4); font-weight: 700; color: var(--ns-on-accent); text-decoration: none; background: var(--ns-accent-dark); border-radius: var(--ns-radius-pill); }
#sb-page:focus { outline: none; }

.sb-pitch { font-size: 1.05rem; }
.sb-short, .sb-list { padding-left: 1.3em; }
.sb-short li, .sb-list li { margin: 0.3em 0; }
.sb-steps li { margin: 0.25em 0; }
.sb-plan { max-width: 560px; margin: 0.6em 0 1em; }

/* Catalogue of the digits */
.sb-tier h2 { margin-top: 1.2em; }
.sb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sb-card {
    padding: 0.6em 0.7em;
    color: var(--sb-chalk);
    background: var(--sb-slate);
    border: 3px solid var(--sb-t1);
    border-radius: var(--ns-radius-sm);
}
/* The rank by the colour of the border (cards, cells of a board, offers of the shop), written beside it. */
:is(.sb-card, .sb-digit, .sb-offer).sb-t2 { border-color: var(--sb-t2); }
:is(.sb-card, .sb-digit, .sb-offer).sb-t3 { border-color: var(--sb-t3); }
:is(.sb-card, .sb-digit, .sb-offer).sb-t4 { border-color: var(--sb-t4); }
.sb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; margin: 0 0 0.4em; }
.sb-symbol { min-width: 1.6em; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; line-height: 1; }
.sb-role { padding: 0 0.3em; font-size: var(--ns-size-xs); color: var(--sb-chalk-dim); border: 1px dashed var(--sb-chalk-dim); border-radius: 3px; }
.sb-levels { width: 100%; margin: 0 0 0.4em; border-collapse: collapse; text-align: center; }
.sb-levels th { font-weight: normal; color: var(--sb-chalk-dim); }
.sb-levels td { font-size: 1.05rem; font-weight: bold; }
.sb-effect { margin: 0 0 0.4em; }
.sb-example { margin: 0; font-size: 0.85rem; color: var(--sb-chalk-dim); }

/* Slate boards: 4 columns, the rank by border colour and written for screen readers */
.sb-boards { display: grid; gap: 8px; margin: 0.6em 0; }
.sb-board {
    width: 100%;
    max-width: 520px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
    color: var(--sb-chalk);
    background: var(--sb-slate);
    border-radius: var(--ns-radius-sm);
}
.sb-board caption { padding: 0.2em 0; text-align: left; color: var(--ns-title); }
.sb-board th { width: auto; font-size: var(--ns-size-xs); font-weight: normal; color: var(--sb-chalk-dim); }
.sb-board th[scope="row"], .sb-board .sb-corner { width: 3.2em; text-align: left; }
.sb-board td { height: 4.4em; padding: 2px; text-align: center; vertical-align: middle; border-radius: 4px; }
.sb-empty { border: 1px dashed var(--sb-slate-line); }
.sb-digit { background: var(--sb-slate-light); border: 2px solid var(--sb-t1); }
.sb-digit .sb-symbol { display: block; font-size: 1.3rem; }
.sb-digit-name { display: block; font-size: var(--ns-size-xs); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.sb-stats { display: block; font-weight: bold; }
.sb-shield { font-weight: normal; color: var(--sb-t2); }
/* The rank written, not only the colour of the border (CONCEPTION 6, accessibility); 13 px, the smallest text of the
   site (v2/CHARTE.md §4). */
.sb-rank { display: block; font-size: var(--ns-size-xs); line-height: 1.2; color: var(--sb-chalk-dim); }
.sb-legend { margin: 0.2em 0; font-size: 0.85rem; }

/* Combat report */
.sb-headline { margin: 0.4em 0 0.8em; font-size: 1.25rem; font-weight: bold; }
.sb-headline.sb-win { color: var(--ns-ok); }
.sb-headline.sb-loss { color: var(--ns-error); }
.sb-exchange { margin: var(--ns-space-2) 0; padding: var(--ns-space-1) var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); }
.sb-exchange ul, .sb-steps ul { margin: 0.2em 0 0.4em; padding-left: 1.2em; }

/* Pages of a run: one column, everything usable without JavaScript */
.sb-runline { margin: 0 0 0.6em; }
.sb-banner { margin: 0.4em 0; padding: 0.5em 0.7em; background: var(--sb-chalk); border-left: 4px solid var(--sb-slate); border-radius: var(--ns-radius-sm); }
.sb-qhead { margin: 0.4em 0; font-size: 1rem; font-weight: normal; color: var(--ns-title); }
/* A note that matters (empty board, abandon): the text's colour, not the grey of the notes. */
.sb-note { color: var(--ns-text); }
/* A box with its label (label.inline: the whole label is the target), the box itself readable (22 px), never narrowed
   by a long label (the label is a flex box under a finger). */
.sb-check input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0 0.5em 0 0; vertical-align: middle; }
.sb-statement {
    margin: 0.4em auto 0.6em;
    max-width: 360px;
    padding: 0.4em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    text-align: center;
    color: var(--sb-chalk);
    background: var(--sb-slate);
    border-radius: var(--ns-radius-sm);
}
.sb-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 360px; margin: 0 auto; }
.sb-keypad button { min-height: 48px; font-size: 1.3rem; }
/* The answer that has the focus, from the arrows or from Tab: always seen (audit d'accessibilité). */
.sb-keypad button:focus { outline: 3px solid var(--sb-slate); outline-offset: 2px; }
.sb-offers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb-offer { padding: 0.5em 0.7em; color: var(--sb-chalk); background: var(--sb-slate); border: 3px solid var(--sb-t1); border-radius: var(--ns-radius-sm); }
.sb-offer-head { margin: 0 0 0.3em; }
.sb-offer .sb-form { margin: 0.3em 0 0; }
.sb-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; margin: 0.6em 0; }
/* A label around its list (« Signal » of the admin): no wider than the column, the list shrinks with it. */
.sb-form label { max-width: 100%; margin: 0; }
.sb-end { padding-top: 0.6em; border-top: 1px solid var(--ns-border); }
.sb-arrange fieldset { margin: 0.6em 0; }
.sb-arrange label { display: block; margin: 0.3em 0; }
.sb-arrange .sb-check, .sb-abandon .sb-check { display: inline-flex; align-items: center; margin: 0 1em 0 0; }
.sb-arrange > button { margin: 0 var(--ns-space-2) var(--ns-space-2) 0; }
.sb-recap, .sb-last { margin: 0.8em 0; }
.sb-abandon { margin-top: 1.5em; }
.sb-links { margin-top: 0.8em; font-size: 0.9rem; }
/* Under a finger, the links between the pages of a run are targets of 44 px, as the site's menus. */
@media (max-width: 640px), (pointer: coarse) {
    .sb-links a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
}

/* Rankings */
.sb-me td { font-weight: bold; background: var(--ns-accent-soft); }
.sb-top { padding-left: 1.5em; }
/* Tutorial (lot S5): the comment of the phase, the preview of the face-off. */
.sb-tutorial { margin: 0.6em 0; padding: 0.5em 0.7em; background: var(--sb-tutorial-bg); border-left: 4px solid var(--sb-tutorial-line); border-radius: var(--ns-radius-sm); }
.sb-tutorial p { margin: 0; }
.sb-preview { margin: 0.6em 0; padding: 0.4em 0.7em; border: 1px dashed var(--sb-slate); border-radius: var(--ns-radius-sm); }

/* Optional scripts (lot S7): the cell or offer touched, the line that says what to do next. */
.sb-offer-head[role="button"] { cursor: pointer; }
.sb-pickable { position: relative; }
.sb-page .sb-cell-pick { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sb-cell-pick:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.sb-picked, .sb-picked .sb-offer-head { outline: 3px solid currentColor; outline-offset: -3px; }
.sb-pick-status { min-height: 1.4em; margin: 0.3em 0; }