/* Tamper (CONCEPTION 13): pages of the game only, classes prefixed tp-.
   The charte of the site (v2/CHARTE.md) gives the tokens and the components: the rankings' tabs in nav.tabs, .lead,
   .flash-warn (photosensitivity warning), .inline, .scroll-x, .nowrap. The board and its ink stay here. */
/* Colours of the game, on :root: the board also shows in the short format of the site's games, the duels and the
   member pages. Ink of the board (read on the image) and heat map. */
:root {
    --tp-ink: #26282b; --tp-hover: rgba(38, 40, 43, 0.06); --tp-selected: rgba(38, 40, 43, 0.08); --tp-num: #555;
    --tp-heat-1: rgba(255, 152, 0, 0.15); --tp-heat-2: rgba(255, 152, 0, 0.3); --tp-heat-3: rgba(255, 112, 0, 0.42);
    --tp-heat-4: rgba(230, 74, 25, 0.52); --tp-heat-5: rgba(198, 40, 40, 0.6);
}
.tp-highlight a { font-size: var(--ns-size-lg); }
.tp-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--ns-space-1) var(--ns-space-4); margin: 0; }
.tp-facts dt { color: var(--ns-title); }
.tp-facts dd { margin: 0; font-weight: 700; }
.tp-actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-2) var(--ns-space-4); align-items: center; margin: var(--ns-space-4) 0; }
.tp-head { margin: 0 0 var(--ns-space-1); font-size: inherit; color: inherit; }
.tp-status { display: flex; flex-wrap: wrap; gap: var(--ns-space-1) var(--ns-space-5); margin: 0 0 var(--ns-space-2); font-weight: 700; }
.tp-steps li { margin: var(--ns-space-2) 0; }
.tp-step-done { color: var(--ns-muted); }

/* Board: the image scales with the page, the 48 buttons follow it (13.4). min-height: 0 keeps each row on the image
   when the site's buttons take 44 px on touch screens (charte). */
.tp-board { position: relative; max-width: 640px; aspect-ratio: 4 / 3; }
/* Abandon far from the bottom row of the grid (a finger aiming at H6 must not reach it). */
.tp-abandon { margin-top: var(--ns-space-7); }
.tp-img { display: block; width: 100%; height: auto; }
.tp-grid { position: absolute; inset: 0; display: grid; grid-template: repeat(6, 1fr) / repeat(8, 1fr); }
.tp-grid .tp-cell { position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; cursor: crosshair; }
.tp-grid .tp-cell:hover { background: var(--tp-hover); }
.tp-grid .tp-cell:focus-visible { outline: 3px solid var(--tp-ink); outline-offset: -3px; }
.tp-grid .tp-found, .tp-grid .tp-found:hover { box-shadow: inset 0 0 0 3px var(--ns-ok); background: transparent; cursor: default; }
.tp-grid .tp-miss::after { content: "\00d7"; position: absolute; top: 0; right: 4px; color: var(--ns-error); font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
/* The note of the blinking board (a .flash-warn), shown when the browser asks for less motion. */
.tp-motion-note { display: none; }
@media (prefers-reduced-motion: reduce) {
    .tp-blink .tp-img { visibility: hidden; }
    .tp-motion-note { display: block; }
}

/* Reveal: edited cells outlined, clicks numbered (13.6). */
.tp-pair { display: grid; gap: var(--ns-space-4); }
.tp-pair figure { margin: 0; }
.tp-pair figcaption { font-size: var(--ns-size-sm); }
@media (min-width: 704px) { .tp-pair { grid-template-columns: 1fr 1fr; } }
.tp-grid-read .tp-cell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; padding: 2px; cursor: default; }
.tp-grid-read .tp-cell:hover { background: transparent; }
.tp-grid-read .tp-edited { box-shadow: inset 0 0 0 3px var(--ns-error); }
.tp-num { min-width: 1.2em; padding: 0 2px; font-size: var(--ns-size-xs); font-weight: 700; line-height: 1.2; text-align: center; color: var(--ns-on-accent); background: var(--tp-num); border-radius: 3px; }
.tp-click-hit { background: var(--ns-ok); }
.tp-click-miss { background: var(--ns-error); }
.tp-score { max-width: 28em; }
.tp-score .tp-points { text-align: right; white-space: nowrap; }
.tp-total td { font-weight: 700; }
.tp-edits { padding-left: 1.2em; }
.tp-edit-found { color: var(--ns-ok); }
.tp-edit-missed { color: var(--ns-error); }

/* Workshop (13.8): cells chosen by links, edited cells outlined, options with their visibility. */
.tp-grid a.tp-cell { display: block; cursor: pointer; }
.tp-grid .tp-edited { box-shadow: inset 0 0 0 3px var(--ns-error); }
.tp-grid .tp-selected { box-shadow: inset 0 0 0 3px var(--tp-ink); background: var(--tp-selected); }
.tp-grid .tp-edited.tp-selected { box-shadow: inset 0 0 0 3px var(--ns-error), inset 0 0 0 6px var(--tp-ink); }
.tp-options p { margin: var(--ns-space-1) 0; }
.tp-level { margin-left: var(--ns-space-2); color: var(--ns-title); font-size: var(--ns-size-sm); }
.tp-refused { color: var(--ns-muted); }
.tp-refused span { margin-left: var(--ns-space-2); font-size: var(--ns-size-sm); }
/* The edits of the workshop, one .inline form each, on a line. */
.tp-inline + .tp-inline { margin-left: var(--ns-space-4); }

/* Board page (13.9): bars of finds in steps of 5 %, heat map of the clicks. */
.tp-bars { margin: 0; padding: 0; list-style: none; }
.tp-bars li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-1) var(--ns-space-3); margin: var(--ns-space-2) 0; }
.tp-bar { display: inline-block; height: 0.8em; min-width: 2px; background: var(--ns-ok); }
.tp-bar-0 { width: 2px; } .tp-bar-1 { width: 5%; } .tp-bar-2 { width: 10%; } .tp-bar-3 { width: 15%; } .tp-bar-4 { width: 20%; }
.tp-bar-5 { width: 25%; } .tp-bar-6 { width: 30%; } .tp-bar-7 { width: 35%; } .tp-bar-8 { width: 40%; } .tp-bar-9 { width: 45%; }
.tp-bar-10 { width: 50%; } .tp-bar-11 { width: 55%; } .tp-bar-12 { width: 60%; } .tp-bar-13 { width: 65%; } .tp-bar-14 { width: 70%; }
.tp-bar-15 { width: 75%; } .tp-bar-16 { width: 80%; } .tp-bar-17 { width: 85%; } .tp-bar-18 { width: 90%; } .tp-bar-19 { width: 95%; }
.tp-bar-20 { width: 100%; }
.tp-grid-read .tp-heat-1 { background: var(--tp-heat-1); }
.tp-grid-read .tp-heat-2 { background: var(--tp-heat-2); }
.tp-grid-read .tp-heat-3 { background: var(--tp-heat-3); }
.tp-grid-read .tp-heat-4 { background: var(--tp-heat-4); }
.tp-grid-read .tp-heat-5 { background: var(--tp-heat-5); }

/* Rankings (13.11). */
.tp-mine td { font-weight: 700; background: var(--ns-accent-soft); }
.tp-received { margin: var(--ns-space-2) 0; padding-left: 1.2em; font-size: var(--ns-size-sm); }
.tp-report { margin: var(--ns-space-4) 0; }
.tp-titles { font-size: var(--ns-size-sm); color: var(--ns-title); }
.tp-bar-label { display: inline-block; min-width: 7em; font-size: var(--ns-size-sm); }
.tp-caption { margin: var(--ns-space-1) 0 0; font-size: var(--ns-size-sm); }

/* Under a finger, or at 640 px and less (v2/CHARTE.md, mobile 2): the links of a row of actions, targets of 44 px. */
@media (max-width: 640px), (pointer: coarse) {
    .tp-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
}