/* Icônes de l'accueil */
.app__icon--chroniques { --icon: radial-gradient(circle at 50% 58%, #5a0d16 0%, #2a070b 38%, #0c0c0e 72%); }
.app__icon--jeux { --icon: linear-gradient(160deg, #ff4f8b, #7a3cff); }
.app__icon--run { --icon: linear-gradient(180deg, #1d1238 0%, #5b2a6e 38%, #ff7a59 62%, #ffc46b 76%); overflow: hidden; }
a.app { text-decoration: none; }
.void--jeux .void__icon { background: rgba(122, 60, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(122, 60, 255, 0.4); }
.void--jeux .void__icon svg { stroke: #a77dff; }

/* Favoris */

/* Recherches et historique */

/* Résultats */

/* Page */

/* Adresse introuvable */

/* Admin : liste des pages */

/* Mini-jeux */
.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.game {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px; border: 0; border-radius: 16px; background: var(--panel);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
a.game { text-decoration: none; }
.game__icon.game__icon--run svg { stroke: #ff7a59; stroke-linejoin: round; }
.game:hover { background: var(--panel-2); }
.game:active { transform: scale(0.98); }
.game__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #0e0f11; box-shadow: inset 0 0 0 3px #e9e9ea; }
.game__icon svg { width: 24px; height: 24px; fill: none; stroke: #19d39a; stroke-width: 2.4; stroke-linecap: round; }
.game__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game__text small { color: var(--muted); font-size: 0.8125rem; }

.game-back {
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 6px -6px; padding: 4px 6px;
  border: 0; border-radius: 8px; background: none;
  color: #a77dff; font: inherit; font-weight: 600; cursor: pointer;
}
.game-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#view-jeux.is-playing .view__head { display: none; }

/* Piratage ATM */
.atm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Cadran en couches : seul le curseur bouge, sur sa propre couche (rotation sans redessiner le cadran) */
.atm__dial { position: relative; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55); }
.atm__face, .atm__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atm__layer { pointer-events: none; will-change: transform, opacity; }
.atm__hand { transform-origin: 50% 50%; }
.atm__disc { fill: #121315; stroke: #050506; stroke-width: 6; }
.atm__ring { fill: none; stroke: #ececee; stroke-width: 10; }
.atm__zone { fill: none; stroke: #19d39a; stroke-width: 10.5; }
.atm__stem { fill: #6f7178; }
.atm__pin { fill: #8d9097; transition: fill 0.2s, filter 0.2s; }
.atm__pin.is-on { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)); }
.atm__scan { stroke: #2fe0c8; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px #2fe0c8); }
.atm__glow { animation: atm-scan 1.4s ease-in-out infinite alternate; }
@keyframes atm-scan { from { opacity: 0.35; } to { opacity: 1; } }
.atm__hand path { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.atm__hand .atm__hand-shade { stroke: rgba(0, 0, 0, 0.75); stroke-width: 9; }
.atm__dial.is-fail .atm__ring { stroke: #ff453a; }
.atm__dial.is-fail { animation: atm-shake 0.35s; }
.atm__dial.is-win .atm__ring { stroke: #19d39a; }
@keyframes atm-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.atm__msg { min-height: 1.4em; margin: 0; font-weight: 700; }
.atm__dial.is-win ~ .atm__msg { color: #19d39a; }
.atm__dial.is-fail ~ .atm__msg { color: #ff6b62; }
.atm__key { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; background: #1b1c1f; color: #ececee; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; }
.atm__again { padding: 11px 22px; border: 0; border-radius: 999px; background: #19d39a; color: #06140f; font: inherit; font-weight: 800; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .atm__glow, .atm__dial.is-fail { animation: none; } }

/* barre d'outils toujours en bas de l'écran du téléphone */

/* Classement du Piratage ATM */
.board-box { margin-top: 18px; }
.board-title { margin: 22px 2px 10px; font-size: 1.125rem; font-weight: 800; }
.board-box .board-title { margin-top: 16px; }
.board-form { display: flex; gap: 8px; }
.board-form__input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 0; border-radius: 12px; outline: 0;
  background: var(--panel-2); color: var(--text); font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.board-form__input:focus { box-shadow: inset 0 0 0 1.5px #19d39a; }
.board-form__btn { flex: none; padding: 0 16px; border: 0; border-radius: 12px; background: #19d39a; color: #06140f; font: inherit; font-weight: 800; cursor: pointer; }
.board-form__btn:disabled { opacity: 0.6; cursor: default; }
.board { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--panel); overflow: hidden; }
.board__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.board__row + .board__row { border-top: 1px solid var(--line); }
.board__row.is-me { background: rgba(25, 211, 154, 0.1); }
.board__rank { width: 24px; text-align: center; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.board__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__time { color: #19d39a; font-weight: 800; font-variant-numeric: tabular-nums; }
.board__empty { margin: 0; padding: 14px; border-radius: 14px; background: var(--panel); color: var(--muted); font-size: 0.875rem; text-align: center; }

/* Admin : texte d'explication sous le titre */
.view__intro { max-width: 760px; margin: 10px 0 18px; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.void--chroniques .void__icon { background: rgba(168, 213, 245, 0.12); box-shadow: inset 0 0 0 1px rgba(168, 213, 245, 0.3); }
.void--chroniques .void__icon svg { stroke: #a8d5f5; }
.book-admin { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.book-admin__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--panel); }
.book-admin__main { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.book-admin__main small { color: var(--muted); font-weight: 500; font-size: 0.8125rem; }

/* App Chroniques : bibliothèque */
.lib { padding: 0 0 20px; }
.lib__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lib__title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.01em; }
.lib__search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1.5px solid #8b9099; border-radius: 999px; }
.lib__search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #c9ccd1; stroke-width: 2; stroke-linecap: round; }
.lib__input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 0.9375rem; }
.lib__input::placeholder { color: #a3a7ae; }
.lib__search:focus-within { border-color: #fff; }
.lib__filters { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; }
.lib__filter-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid #8b9099; border-radius: 8px; background: none; cursor: pointer; }
.lib__filter-icon:hover { border-color: #fff; }
.lib__filter-icon[aria-expanded="true"] { border-color: #fff; background: #fff; }
.lib__filter-icon[aria-expanded="true"] svg { fill: #fff; stroke: #0f1012; }
.lib__filter-icon svg { width: 20px; height: 20px; fill: var(--bg); stroke: #e6e6e8; stroke-width: 1.8; stroke-linecap: round; }
.lib__sep { width: 1.5px; height: 26px; background: #55585e; }
.lib__chip { height: 40px; padding: 0 16px; border: 1.5px solid #8b9099; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.lib__chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0f1012; font-weight: 700; }
.lib__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.lib-cover {
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 0.65; padding: 0; overflow: hidden;
  border: 0; border-radius: 1px; cursor: pointer; text-align: center;
  background: linear-gradient(160deg, #f7f7f8 0%, #e6e7ea 55%, #d9dade 100%); color: #1b1b1d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s;
}
.lib-cover:hover { transform: translateY(-2px); }
.lib-cover:active { transform: scale(0.97); }
.lib-cover__tag { align-self: flex-start; margin-top: 9%; padding: 2px 6px; background: #f2a43a; color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.lib-cover__date { margin: 14% 8% 0; font-size: 0.8125rem; line-height: 1.3; }
.lib-cover__mark { position: absolute; left: 10%; bottom: 2%; color: #8e9096; font-size: 2.6rem; font-weight: 200; line-height: 1; font-family: "Helvetica Neue", Arial, sans-serif; }
.lib-cover__read { position: absolute; top: 0; right: 0; width: 50%; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.lib-cover__read b {
  position: absolute; top: 14%; right: -40%; width: 140%; padding: 3px 0;
  background: #1b1b1d; color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-align: center;
  transform: rotate(45deg);
}
.lib__none { margin: 10px 0 0; color: var(--muted); font-size: 0.875rem; text-align: center; }

/* App Chroniques : lecture */
#view-chroniques { --book: #e9e3d6; }
.book { max-width: 640px; margin: 0 auto; padding: 4px 6px 24px; }
.book__back { display: flex; align-items: center; gap: 2px; margin: 0 0 14px -6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: #f2a43a; font: inherit; font-weight: 600; cursor: pointer; }
.book__back:hover { background: rgba(255, 255, 255, 0.05); }
.book__back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.book__meta { margin: 0 0 6px; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.book__title { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 1.625rem; line-height: 1.2; }
.book__text { font-family: Georgia, "Times New Roman", serif; font-size: 1.0625rem; line-height: 1.75; color: var(--book); }
.book__text p { margin: 0 0 1.1em; white-space: pre-line; text-indent: 1.2em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.book__text h3 { margin: 1.6em 0 0.6em; font-size: 1.1875rem; text-align: center; }
.book__empty { color: var(--muted); font-style: italic; text-indent: 0 !important; }
.book__end { margin: 28px 0 0; color: var(--muted); font-family: Georgia, serif; font-style: italic; text-align: center; }
.book__end::before, .book__end::after { content: " ~ "; }

/* App Chroniques : nouveautés, progression, reprise */
.lib-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-cover__tag, .lib-cover:not(.has-img) .lib-cover__date { position: relative; }
.lib-cover.has-img .lib-cover__date {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 6px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #fff; font-size: 0.75rem; font-weight: 600;
}
.lib-cover__new { position: absolute; top: 6px; right: 6px; padding: 2px 5px; border-radius: 4px; background: #19a974; color: #fff; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.05em; }
.lib-cover__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, 0.18); }
.lib-cover__bar i { display: block; height: 100%; background: #f2a43a; }
.lib__count { margin-left: auto; color: #a3a7ae; font-size: 0.8125rem; }
.lib__resume {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 10px;
  border: 0; border-radius: 12px; background: #1c1d20; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.lib__resume:hover { background: #24262a; }
.lib__resume-cover { flex: none; display: grid; place-items: end start; width: 44px; height: 66px; padding: 2px 6px; overflow: hidden; background: linear-gradient(160deg, #f7f7f8, #d9dade); color: #8e9096; font-size: 1.5rem; font-weight: 200; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.lib__resume-cover img { width: 44px; height: 66px; margin: -2px -6px; object-fit: cover; }
.lib__resume-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lib__resume-text small { color: #a3a7ae; font-size: 0.75rem; }
.lib__resume-text b { font-family: Georgia, serif; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib__resume-bar { height: 3px; border-radius: 2px; background: #3a3c41; overflow: hidden; }
.lib__resume-bar i { display: block; height: 100%; background: #f2a43a; }

/* App Chroniques : lecture (thèmes, réglages, suite) */
.book { --paper: transparent; --ink: #e9e3d6; --soft: #8b9099; padding: 4px 16px 0; border-radius: 16px; background: var(--paper); color: var(--ink); }
.book[data-theme="sepia"] { --paper: #f4ecd8; --ink: #4a3b2a; --soft: #8a7760; }
.book[data-theme="clair"] { --paper: #fbfbfa; --ink: #1d1d1f; --soft: #7a7d84; }
.book .book__text { color: var(--ink); font-size: var(--book-size, 1.0625rem); }
.book .book__meta, .book .book__end { color: var(--soft); }
.book__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 10px; padding: 8px 10px 6px; border-radius: 16px 16px 0 0; background: var(--paper); }
.book[data-theme="sombre"] .book__top { background: color-mix(in srgb, var(--panel) 92%, transparent); }
.book__top .book__back { margin: 0; }
.book__aa { padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: #f2a43a; font-family: Georgia, serif; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.book__aa[aria-expanded="true"] { background: rgba(242, 164, 58, 0.15); }
.book__prefs { display: grid; gap: 10px; margin: 0 0 18px; padding: 12px; border-radius: 12px; background: rgba(127, 127, 127, 0.14); }
.book__sizes { display: flex; align-items: center; justify-content: space-between; }
.book__sizes button { width: 44px; height: 36px; border: 0; border-radius: 8px; background: rgba(127, 127, 127, 0.18); color: var(--ink); font-family: Georgia, serif; cursor: pointer; }
.book__sizes button:first-child { font-size: 0.875rem; }
.book__sizes button:last-child { font-size: 1.375rem; }
.book__sizes button:disabled { opacity: 0.35; cursor: default; }
.book__sizes span { color: var(--soft); font-size: 0.8125rem; font-weight: 700; }
.book__themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.book__theme { height: 36px; border: 2px solid transparent; border-radius: 8px; font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.book__theme--sombre { background: #1c1d20; color: #e9e3d6; }
.book__theme--sepia { background: #f4ecd8; color: #4a3b2a; }
.book__theme--clair { background: #fbfbfa; color: #1d1d1f; }
.book__theme[aria-pressed="true"] { border-color: #f2a43a; }
.book__next {
  display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 22px 0 0; padding: 14px 16px;
  border: 0; border-radius: 12px; background: rgba(127, 127, 127, 0.14); color: var(--ink); font-family: Georgia, serif; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer;
}
.book__next small { color: #f2a43a; font-family: var(--body); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.book__next span { color: var(--soft); font-family: var(--body); font-size: 0.75rem; font-weight: 500; }
.book__next:hover { background: rgba(127, 127, 127, 0.22); }
.book__foot { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 6px; margin: 18px -16px 0; padding: 10px 16px 12px; border-radius: 0 0 16px 16px; background: var(--paper); color: var(--soft); font-size: 0.6875rem; font-weight: 700; text-align: center; }
.book[data-theme="sombre"] .book__foot { background: color-mix(in srgb, var(--panel) 92%, transparent); }
.book__bar { height: 3px; border-radius: 2px; background: rgba(127, 127, 127, 0.3); overflow: hidden; }
.book__bar i { display: block; width: 0; height: 100%; background: #f2a43a; transition: width 0.15s; }

/* App Chroniques : couvertures générées (sans image) */
.lib-cover.is-gen, .lib__resume-cover.is-gen { color: #fff; background-color: hsl(var(--h) 40% 22%); }
.lib-cover.is-gen .lib-cover__mark, .lib__resume-cover.is-gen { color: rgba(255, 255, 255, 0.55); }
.lib-cover.is-gen .lib-cover__date { font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
/* rayures */
.is-gen.gen-0 { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 14px), linear-gradient(160deg, hsl(var(--h) 50% 34%), hsl(calc(var(--h) + 30) 45% 16%)); }
/* pois */
.is-gen.gen-1 { background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.8px), linear-gradient(170deg, hsl(var(--h) 45% 36%), hsl(calc(var(--h) - 25) 50% 18%)); background-size: 11px 11px, 100% 100%; }
/* cercles */
.is-gen.gen-2 { background-image: repeating-radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 11px), linear-gradient(150deg, hsl(var(--h) 55% 32%), hsl(calc(var(--h) + 40) 40% 15%)); }
/* quadrillage */
.is-gen.gen-3 { background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(165deg, hsl(var(--h) 42% 33%), hsl(calc(var(--h) + 20) 48% 14%)); background-size: 13px 13px, 13px 13px, 100% 100%; }
/* bandes */
.is-gen.gen-4 { background-image: linear-gradient(180deg, transparent 0 58%, rgba(0, 0, 0, 0.22) 58% 62%, transparent 62% 66%, rgba(0, 0, 0, 0.22) 66% 70%, transparent 70%), linear-gradient(155deg, hsl(var(--h) 52% 38%), hsl(calc(var(--h) - 35) 45% 17%)); }

/* App Chroniques : menu d'affichage */
.lib-menu { margin: -6px 0 18px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.lib-menu__title { margin: 0 0 8px; color: #a3a7ae; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.lib-menu__title:not(:first-child) { margin-top: 14px; }
.lib-menu__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-menu__opt { padding: 7px 12px; border: 1.5px solid #55585e; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.lib-menu__opt:hover { border-color: #8b9099; }
.lib-menu__opt[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0f1012; font-weight: 700; }

/* App Chroniques : affichage en liste */
.lib__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lib-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lib-row:hover { background: rgba(255, 255, 255, 0.03); }
.lib-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-row__text b { font-family: Georgia, serif; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row__text small { color: #a3a7ae; font-size: 0.75rem; }
.lib-row__lu { flex: none; padding: 2px 7px; border-radius: 4px; background: #e6e6e8; color: #0f1012; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; }
.lib-row__new { flex: none; padding: 2px 6px; border-radius: 4px; background: #19a974; color: #fff; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.05em; }
.lib-row__pct { flex: none; color: #f2a43a; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Piratage ATM : curseur de la souris caché près du cadran */
body[data-mode="public"].cursor-hidden, body[data-mode="public"].cursor-hidden * { cursor: none !important; }

/* Mini-jeux : onglets Jeux / Classement */
.games-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--panel); }
.games-tabs__tab { padding: 8px 0; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.games-tabs__tab[aria-selected="true"] { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.board-game + .board-game { margin-top: 22px; }
.board-game__head { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; }
.board-game__head .game__icon { width: 40px; height: 40px; border-radius: 10px; }
.board-game__head .game__icon svg { width: 20px; height: 20px; }
.board-game__head > span:not(.game__icon) { display: flex; flex-direction: column; }
.board-game__head b { font-size: 1rem; }
.board-game__head small { color: var(--muted); font-size: 0.75rem; }

/* Mini-jeux : jeux annoncés */
.game--soon { cursor: default; opacity: 0.55; }
.game--soon:hover { background: var(--panel); }
.game--soon:active { transform: none; }
.game--soon .game__icon { box-shadow: inset 0 0 0 2px #55585e; }
.game--soon .game__icon svg { stroke: var(--muted); }
.game__soon { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }

/* Classement : période, record, ligne du visiteur */
.board-period { display: flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 9px; background: var(--panel); }
.board-period button { padding: 5px 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.board-period button[aria-selected="true"] { background: var(--panel-2); color: var(--text); }
.board-game__head { flex-wrap: wrap; }
.board-box__head { display: flex; align-items: center; gap: 10px; margin: 16px 2px 10px; }
.board-box__head .board-title { margin: 0; }
.board__name { display: flex; flex-direction: column; }
.board__name small { color: var(--muted); font-size: 0.6875rem; font-weight: 500; }
.board__gap { padding: 2px 0; color: var(--muted); text-align: center; letter-spacing: 0.2em; }
.atm__record { margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(242, 164, 58, 0.15); color: #f2a43a; font-size: 0.8125rem; font-weight: 800; }
.board-rank { margin: 12px 0 0; color: var(--text); font-weight: 700; text-align: center; }
.board-rank--top { color: #f5c400; }
.board-rank sup { font-size: 0.7em; }

.board-form__name { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 0.875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-form__name b { margin-left: 4px; color: var(--text); }

/* App Chroniques : auteur */
.lib__title small { display: block; margin-top: 4px; color: #a3a7ae; font-family: var(--body); font-size: 0.8125rem; font-weight: 600; }
.book__author { margin: -10px 0 20px; color: var(--soft); font-family: Georgia, "Times New Roman", serif; font-size: 0.9375rem; font-style: italic; }
.author-form { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 16px; padding: 14px 16px; }
.author-form__field { flex: 1; display: grid; gap: 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }

/* Piratage ATM : connexion à l'arbitre, messages du classement */
.atm__wait { margin: 60px 0; color: var(--muted); font-weight: 700; text-align: center; letter-spacing: 0.04em; animation: atm-scan 1s ease-in-out infinite alternate; }
.board-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 0.8125rem; }
.board-note--error { margin-top: 8px; background: var(--red-soft); color: #ff6b62; }

/* Crochetage : plaque, barillet qui tourne, crochet orientable */
.lock { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.lock__steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lock__steps li { width: 26px; height: 6px; border-radius: 3px; background: #2a2c31; transition: background-color 0.25s, box-shadow 0.25s; }
.lock__steps li.is-now { background: #6f7178; }
.lock__steps li.is-done { background: #19d39a; box-shadow: 0 0 8px rgba(25, 211, 154, 0.6); }
.lock__dial { position: relative; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55); cursor: crosshair; }
.lock__face, .lock__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lock__layer { pointer-events: none; transform-origin: 50% 50%; }
.lock__plate { fill: #17181b; stroke: #050506; stroke-width: 6; }
.lock__ring { fill: #0b0b0d; stroke: #b48a3c; stroke-width: 7; }
.lock__rivet { fill: #3a3c42; }
.lock__cyl { fill: #c9a24e; stroke: #8a6a2a; stroke-width: 3; }
.lock__hole { fill: #0b0b0d; }
.lock__wrench { fill: none; stroke: #9da1a8; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lock__shaft { fill: none; stroke: #e6e7ea; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.lock__grip { fill: #c0392b; }
.lock.is-stuck .lock__core, .lock.is-stuck .lock__pick { animation: lock-strain 0.16s linear infinite; }
.lock.is-stuck .lock__ring { stroke: #e0a03a; }
.lock.is-snap .lock__pick { animation: lock-snap 0.8s ease-out forwards; }
.lock.is-snap .lock__ring { stroke: #ff453a; }
.lock.is-win .lock__ring { stroke: #19d39a; }
@keyframes lock-strain { 50% { translate: 1px -1px; } }
@keyframes lock-snap { 0% { opacity: 1; translate: 0 0; } 20% { translate: -3px 2px; } 100% { opacity: 0; translate: 0 40px; } }
.lock__info { display: flex; align-items: center; gap: 12px; min-height: 18px; }
.lock__wear { display: inline-flex; gap: 4px; }
.lock__wear i { width: 18px; height: 6px; border-radius: 3px; background: #2a2c31; }
.lock__wear i.on { background: #e6e7ea; }
.lock__broken { color: #ff8a80; font-size: 0.8125rem; font-weight: 700; }
.lock .atm__msg { text-align: center; }
.lock.is-win .atm__msg { color: #19d39a; }
.lock.is-snap .atm__msg { color: #ff6b62; }
.lock.is-stuck .atm__msg { color: #e0a03a; }
.lock__force { width: min(100%, 260px); padding: 16px; border: 0; border-radius: 16px; background: #b48a3c; color: #140f05; font: inherit; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; touch-action: none; }
.lock__force:active { background: #d9a94a; transform: scale(0.98); }
.lock__hint { max-width: 280px; color: var(--muted); font-size: 0.75rem; text-align: center; line-height: 1.4; }
.game__icon--crochet svg { stroke: #e0b04e; }
@media (prefers-reduced-motion: reduce) { .lock.is-stuck .lock__core, .lock.is-stuck .lock__pick, .lock.is-snap .lock__pick { animation: none; } }

/* Crochetage : repères des essais */
.lock__mark { stroke: color-mix(in srgb, #f2c14e var(--heat), #4a4c52); stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
.lock__mark.is-last { stroke-width: 3.6; opacity: 1; }
.lock__grip { fill: #c0392b; stroke: #7d1f16; stroke-width: 1.2; }

/* Câblage : rail des fils à gauche, connecteurs à droite */
.wires { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.wires__board { width: min(100%, 340px); padding: 10px; border-radius: 22px; background: #1b1c1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 30px rgba(0, 0, 0, 0.5); }
.wires__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wires__rail { fill: #2b3038; }
.wires__slot { fill: #3a4452; }
.wires__hit { fill: transparent; }
.wires__wire { cursor: grab; }
.wires__wire.is-linked { cursor: default; }
.wires__base { fill: #4a4d54; }
.wires__tip { fill: var(--w); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--w) 60%, transparent)); transition: transform 0.15s; transform-box: fill-box; transform-origin: left center; }
.wires__wire:not(.is-linked):hover .wires__tip, .wires__wire.is-sel .wires__tip { transform: scaleX(1.15); }
.wires__wire.is-sel .wires__tip { stroke: #fff; stroke-width: 2; }
.wires__line { fill: none; stroke: var(--w); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.wires__line.is-pending { opacity: 0.7; }
.wires__plug { cursor: pointer; }
.wires__socket { fill: #4a4d54; }
.wires__lamp { fill: #6b6f77; transition: fill 0.2s, filter 0.2s; }
.wires__plug.is-on .wires__lamp { fill: #ffd60a; filter: drop-shadow(0 0 6px #ffd60a); }
.wires__plug.is-bad .wires__lamp { fill: #ff453a; filter: drop-shadow(0 0 6px #ff453a); }
.wires__plug.is-bad { animation: atm-shake 0.3s; }
.wires__plug.is-pending .wires__lamp { fill: #8d9097; }
.wires.is-between .wires__board { box-shadow: inset 0 0 0 2px #ffd60a, 0 18px 30px rgba(0, 0, 0, 0.5); }
.wires.is-win .atm__msg, .wires.is-between .atm__msg { color: #19d39a; }
.game__icon--fils svg { stroke: #ffd60a; }
@media (prefers-reduced-motion: reduce) { .wires__plug.is-bad { animation: none; } }

/* Classement : liste des jeux, chevron d'ouverture */
.game__chev { flex: none; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }