/* Lockwright (shown as config lockwright.name): pages of the game only, classes lw- (DECISIONS arbitrage 10).
   The charte of the site (v2/CHARTE.md) gives the tokens and the components: the game's menu and the rankings' tabs in
   nav.tabs, .lead, .flash-warn, .inline, .visually-hidden, .scroll-x. This file keeps what is the game's own. */
/* Tints of the tiers, on :root: the lock also shows on the duels pages (the tier is always said in text beside it). */
:root { --lw-bronze: #9a5b2b; --lw-silver: #6f7d8a; --lw-gold: #b08900; }
/* The link to skip the game's menu, at its place before the menu: the pill of the site's .skip-link, 44 px high. */
.lw-skip { position: absolute; left: -10000px; }
.lw-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); }
#lw-page:focus { outline: none; }
.lw-code { font-family: var(--ns-font-mono); letter-spacing: .15em; font-weight: 700; }
.lw-lock { vertical-align: -3px; margin-right: var(--ns-space-1); }
.lw-lock-hole { fill: var(--ns-page); }
.lw-tier { white-space: nowrap; }
.lw-tier-bronze .lw-lock { color: var(--lw-bronze); }
.lw-tier-silver .lw-lock { color: var(--lw-silver); }
.lw-tier-gold .lw-lock { color: var(--lw-gold); }
.lw-clues { font-size: var(--ns-size-lg); line-height: 1.6; }
.lw-path { line-height: 1.5; }
.lw-superfluous { margin-left: var(--ns-space-1); color: var(--ns-warn); }
.lw-draw-list { list-style: none; padding-left: 0; }
.lw-family ul { list-style: none; padding-left: var(--ns-space-2); }
.lw-family li { margin: var(--ns-space-1) 0; }
.lw-check { margin: var(--ns-space-4) 0; padding: var(--ns-space-2) var(--ns-space-4); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.lw-tiers fieldset { border: 0; padding: 0; }

.lw-guess { font-family: var(--ns-font-mono); font-size: var(--ns-size-xl); letter-spacing: .2em; width: 8em; }
.lw-outcome { font-size: var(--ns-size-lg); font-weight: 700; }
.lw-cracked { color: var(--ns-ok); }
.lw-held { color: var(--ns-warn); }
.lw-offers li, .lw-attempts li, .lw-tutorials li { margin: var(--ns-space-2) 0; }

/* Notebook: a table of 10 rows and one column per position; ticking a digit strikes it, CSS only. */
.lw-notebook { border-collapse: collapse; margin: var(--ns-space-2) 0 var(--ns-space-4); }
.lw-notebook caption { padding-bottom: var(--ns-space-1); font-size: var(--ns-size-sm); text-align: left; }
.lw-notebook th, .lw-notebook td { width: 36px; height: 36px; text-align: center; border: 1px solid var(--ns-border); padding: 0; }
.lw-notebook input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lw-notebook label { display: block; line-height: 36px; cursor: pointer; font-size: var(--ns-size-lg); }
.lw-notebook input:checked + label { text-decoration: line-through; opacity: .35; }
.lw-notebook input:focus-visible + label { outline: 3px solid var(--ns-focus); outline-offset: -3px; }
/* An irreversible action (abandon, retire, discard): away from the main buttons, behind a box to tick. */
.lw-confirm { margin-top: var(--ns-space-6); }
.lw-last { margin: 0 0 var(--ns-space-2); font-weight: 700; }

@media (max-width: 600px) {
    .lw-notebook th, .lw-notebook td { width: 32px; height: 32px; }
    .lw-notebook label { line-height: 32px; }
    /* Mes coffres: seven columns are 463 px wide; one block per vault, each cell with its label. */
    .lw-vaults, .lw-vaults tbody, .lw-vaults tr, .lw-vaults td { display: block; width: auto; }
    .lw-vaults tr:first-child { display: none; }
    .lw-vaults tr { padding: var(--ns-space-2) 0; border-bottom: 1px solid var(--ns-border); }
    /* table.: the cells of table.list (0,1,2) would keep their padding and line otherwise. */
    table.lw-vaults td { padding: .1rem 0; border: 0; }
    .lw-vaults td[data-label]::before { content: attr(data-label) " : "; }
}