@font-face {
  font-family: "LilitaOne";
  src: url("/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global link color → brand red, in line with btn-danger.
   Overrides Bootstrap's default blue site-wide. Components that need a
   neutral link explicitly set .text-body or another class. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-link-color: var(--bs-danger);
  --bs-link-hover-color: var(--bs-danger);
  --bs-link-color-rgb: var(--bs-danger-rgb);
  --bs-link-hover-color-rgb: var(--bs-danger-rgb);
}

/* ------------------------------------------------------------------------
   Native-element shim. We dropped Bootstrap's JS (Modal/Collapse/Dropdown)
   for native <dialog>/<details> + tiny Stimulus controllers, but kept
   Bootstrap CSS. These rules bridge the two: Bootstrap styles .modal /
   .dropdown-menu for a JS-driven <div> overlay, so we override only the
   bits that differ for the native elements. ~20 lines, the rest of the
   modal/dropdown look still comes from Bootstrap (.modal-content,
   .modal-header, .dropdown-item, …).
   ------------------------------------------------------------------------ */

/* confirm modal is a native <dialog class="modal"> opened via showModal() */
dialog.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: auto;
  max-width: 500px;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
dialog.modal[open] {
  display: block;
}
dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* header dropdowns are native <details class="dropdown"> */
details.dropdown {
  position: relative;
}
details.dropdown > summary {
  list-style: none;
  cursor: pointer;
}
details.dropdown > summary::-webkit-details-marker {
  display: none;
}
details.dropdown[open] > .dropdown-menu {
  display: block;
}

body {
  padding-top: 55px;
}

#info-game {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

#main,
#loader,
#game,
#end {
  animation: 1s fadeIn ease-in;
  animation-fill-mode: forwards;
}

.card-title {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.thumbnail-game {
  width: 379px;
  height: 575px;
}

.thumbnail-game-mini {
  height: 150px;
}

.thumbnail-avatar {
  width: 30px;
  height: 30px;
}

.logo,
.card-flag {
  width: 40px;
  height: 30px;
}

/* Force white nav links only inside the dark site header. The previous
   unscoped rule painted every .nav-link white — invisible on light-themed
   sub-navigations like the user profile menu (which uses bg-body-tertiary). */
.navbar-dark .nav-link {
  color: #fff !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.form-control:focus {
  border: 3px solid #ccc !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(143, 141, 141, 0.6) !important;
}

.inputFromBottom:hover {
  background-color: pink;
  cursor: pointer;
}

.bg-secondary-dark {
  background-color: #333333;
}

.bg-danger-light {
  background-color: lightpink;
}

.text-danger-light {
  color: lightpink;
}

.letterFromBottom,
.inputFromBottom {
  animation: 1s fadeFromBottom ease;
  animation-fill-mode: forwards;
}

@keyframes fadeFromBottom {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Memory Game */
#game-images {
  height: 0;
  overflow: hidden;
}

.memory-case {
  opacity: 0.8;
}

.memory-case:hover {
  opacity: 0.6;
  cursor: pointer;
}

.tr-height {
  height: 45px;
}

@media (max-width: 576px) {
  .tr-height {
    height: 55px;
  }
  img {
    max-width: 100%;
  }

  .logo {
    display: none;
  }
}

@media (max-width: 768px) {
  .tr-height {
    height: 60px;
  }
}

@media (max-width: 992px) {
  .tr-height {
    height: 65px;
  }
}

@media (max-width: 1200px) {
  .tr-height {
    height: 80px;
  }
}

#unity-container {
  position: relative;
}
/* #unity-container.unity-desktop {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} */
#unity-container.unity-mobile {
  position: fixed;
  width: 100%;
  height: 100%;
}
#unity-canvas {
  background: #231f20;
}
/* .unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
} */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
#unity-logo {
  width: 154px;
  height: 130px;
  background: url("/img/unity/unity-logo-dark.png") no-repeat center;
}
#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  margin-top: 10px;
  margin-left: 6.5px;
  background: url("/img/unity/progress-bar-empty-dark.png") no-repeat center;
}
#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin-top: 10px;
  background: url("/img/unity/progress-bar-full-dark.png") no-repeat center;
}
#unity-footer {
  position: relative;
}
.unity-mobile #unity-footer {
  display: none;
}
#unity-webgl-logo {
  float: left;
  width: 204px;
  height: 38px;
  background: url("/img/unity/webgl-logo.png") no-repeat center;
}
#unity-build-title {
  float: right;
  margin-right: 10px;
  line-height: 38px;
  font-family: arial;
  font-size: 18px;
}
#unity-fullscreen-button {
  cursor: pointer;
  float: right;
  width: 38px;
  height: 38px;
  background: url("/img/unity/fullscreen-button.png") no-repeat center;
}
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}

#player-badge {
  height: 30px;
  font-size: 0.8em;
  white-space: nowrap;
}

/* Player progression badge — sticky bottom (mobile + desktop).
   The badge is rendered inside <header> for HTML simplicity but visually
   pinned to the bottom of the viewport via position: fixed. */
header.fixed-top > .bg-secondary-dark {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom); /* iOS home bar */
}

/* Free vertical space at the bottom so the sticky badge doesn't cover content. */
body.has-player-badge {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

/* In focus mode (mobile game pages) the whole header is hidden so we don't
   need the bottom padding either — recover the screen space. */
@media (max-width: 767.98px) {
    body.game-page.has-player-badge {
        padding-bottom: 0;
    }
}

/* Game card tiles (used on home + games list).
   Uses tertiary-bg (not body-bg) so cards remain visible in dark mode. */
.game-card {
    background: var(--bs-tertiary-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.game-card-wrapper {
    display: flex;
    width: 100%;
}

.game-card:hover,
.game-card:focus-visible {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    outline: none;
}

.game-card-thumb {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.game-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-card-body {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.game-card-body h3 {
    font-weight: 600;
    line-height: 1.2;
}

/* Truncate description AND reserve 3 lines of space so the play count
   below stays at a consistent vertical position across all sibling cards. */
.game-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.4em);
}

/* Pin the play count at the bottom of the card body — aligns across siblings */
.game-card-plays {
    margin-top: auto;
}

/* Favorite star overlay on game cards (logged-in users only). */
.game-card-favorite {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.game-card-favorite:hover,
.game-card-favorite:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.game-card-favorite.is-favorited {
    background: var(--bs-danger);
    color: #fff;
}

/* "See all" links — discrete navigation CTA */
.see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bs-danger);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    transition: gap 0.2s ease;
}

.see-all-link:hover,
.see-all-link:focus-visible {
    color: var(--bs-danger);
    text-decoration: underline;
    gap: 0.65rem;
    outline: none;
}

/* Post (article) cards — thumbnail on top, or side-by-side when featured */
.post-card {
    background: var(--bs-body-bg);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.post-card:hover,
.post-card:focus-visible {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
    color: inherit;
    outline: none;
}

.post-card:focus-visible {
    outline: 3px solid var(--bs-danger);
    outline-offset: 2px;
}

.post-card-thumb {
    aspect-ratio: 40 / 21;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card:hover .post-card-thumb img {
    transform: scale(1.04);
}

.post-card-thumb-fallback {
    font-size: 3rem;
    opacity: 0.6;
}

.post-card-body {
    padding: 1.1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-danger-text-emphasis);
    margin-bottom: 0.5rem;
}

.post-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--bs-emphasis-color);
}

.post-card-description {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bs-border-color);
}

.post-card-read {
    color: var(--bs-danger-text-emphasis);
    font-weight: 600;
    white-space: nowrap;
}

.post-card:hover .post-card-read,
.post-card:focus-visible .post-card-read {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .post-card--featured {
        flex-direction: row;
    }

    .post-card--featured .post-card-thumb {
        flex: 0 0 58%;
        aspect-ratio: auto;
        min-height: 320px;
    }

    .post-card--featured .post-card-body {
        padding: 2rem;
        justify-content: center;
    }

    .post-card--featured .post-card-title {
        font-size: 1.75rem;
    }

    .post-card--featured .post-card-description {
        font-size: 1.05rem;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

.category-header {
    margin: 0.5rem 0 2rem;
    max-width: 52rem;
}

/* Latest scores feed (home) */
.latest-scores {
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.latest-scores li + li {
    border-top: 1px solid var(--bs-border-color);
}

.latest-score-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.latest-score-item:hover,
.latest-score-item:focus-visible {
    background-color: var(--bs-tertiary-bg);
    color: inherit;
    outline: none;
}

.latest-score-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.latest-score-content {
    flex-grow: 1;
    min-width: 0;
}

.latest-score-line {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.2;
}

.latest-score-user {
    color: var(--bs-emphasis-color);
}

.latest-score-sep {
    color: var(--bs-secondary-color);
}

.latest-score-game {
    color: var(--bs-body-color);
    font-weight: 500;
}

.latest-score-time {
    font-size: 0.78rem;
    display: block;
    margin-top: 0.15rem;
}

.latest-score-points {
    flex-shrink: 0;
    background: var(--bs-danger);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    line-height: 1;
}

/* Accessibility: skip-to-content link, only visible on keyboard focus */
.skip-link {
    position: absolute;
    top: 0;
    transform: translateY(-120%); /* fully hidden: top:-40px left ~3px peeking */
    left: 0;
    background: var(--bs-danger);
    color: #fff;
    padding: 0.6rem 1rem;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-bottom-right-radius: 6px;
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Remove default focus outline jump on main when skip link is used */
main:focus {
    outline: none;
}

/* Theme toggle button — show sun on dark theme, moon on light theme */
.theme-toggle {
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #fff;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: #fff;
    opacity: 0.85;
    outline: none;
}

[data-bs-theme="light"] .theme-icon-sun { display: none; }
[data-bs-theme="light"] .theme-icon-moon { display: inline-block; }
[data-bs-theme="dark"]  .theme-icon-sun  { display: inline-block; }
[data-bs-theme="dark"]  .theme-icon-moon { display: none; }

/* btn-outline-danger — dark mode readability: keep red border (brand), white text */
[data-bs-theme="dark"] .btn-outline-danger {
    color: #fff;
}

/* Form controls — explicit dark mode (defensive override) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: #6c757d !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.7;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Article raw content (post.content from DB) may contain legacy Bootstrap fixed-color
   classes (text-dark, bg-light, etc.). Override them inside <article> so the content
   reads properly in both light and dark themes. */
[data-bs-theme="dark"] article .text-dark,
[data-bs-theme="dark"] article a.text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] article .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] article .badge.bg-light.text-dark,
[data-bs-theme="dark"] article .badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* SEO body block — collapsible on mobile, auto-expanded on desktop.
   Pattern: short hook below breadcrumb + long SEO body after content. */
.seo-body {
    margin-top: 2.5rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1.5rem;
}

.seo-body-summary {
    cursor: pointer;
    color: var(--bs-danger);
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.seo-body-summary::-webkit-details-marker {
    display: none;
}

.seo-body-summary::after {
    content: '▾';
    transition: transform 0.2s ease;
    display: inline-block;
}

.seo-body[open] .seo-body-summary::after {
    transform: rotate(180deg);
}

.seo-body-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Desktop: auto-expand the SEO body and hide the toggle */
@media (min-width: 768px) {
    .seo-body-summary {
        display: none;
    }
    .seo-body > :not(summary) {
        display: block !important;
    }
}

/* Headings — scale down on mobile (display-* utilities are too big on phones).
   Applies site-wide so every page using Bootstrap display utilities benefits. */
@media (max-width: 767.98px) {
    .display-1 { font-size: 2rem; }
    .display-2 { font-size: 1.75rem; }
    .display-3 { font-size: 1.5rem; }
    .display-4 { font-size: 1.5rem; }
    .display-5 { font-size: 1.35rem; }
    .display-6 { font-size: 1.25rem; }

    .lead { font-size: 1rem; }
}

/* Game focus mode — mobile only.
   On phones, hide site chrome (header, footer, breadcrumb, game menu, description)
   and replace it with a slim brand bar (logo · game name · exit) at the top.
   The game card fills the viewport below. */
.game-focus-bar {
    display: none;
}

@media (max-width: 767.98px) {
    body.game-page {
        padding-top: 0;
    }

    body.game-page header.fixed-top,
    body.game-page footer,
    body.game-page .skip-link,
    body.game-page .game-chrome {
        display: none !important;
    }

    body.game-page .game-board {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Game card fills the viewport on mobile in focus mode.
       Page remains scrollable if content overflows. Padding-top matches the
       brand bar height (55px = same as the regular site navbar) — content
       elements provide their own internal breathing via mt-3 etc. */
    body.game-page .game-board > .card {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 55px !important;
        background-color: var(--bs-body-bg) !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Tighten the .stats spacing — keep the timer's visual identity (bg/border/rounded)
       but remove its m-1 outer margin so it sits flush against the bar. */
    body.game-page .game-board .stats {
        margin: 0 0 0.5rem 0 !important;
    }

    /* During PLAY (status='playing' → .game-screen exists): hide the brand bar
       and float just the X exit icon at top-right. Frees ~36px for the game. */
    body.game-page:has(.game-screen) .game-focus-brand,
    body.game-page:has(.game-screen) .game-focus-title {
        display: none;
    }
    body.game-page:has(.game-screen) .game-focus-bar {
        position: fixed;
        top: 0.4rem;
        right: 0.4rem;
        left: auto;
        bottom: auto;
        height: auto;
        padding: 0;
        background: transparent;
        border-bottom: none;
        z-index: 1050;
    }
    body.game-page:has(.game-screen) .game-focus-exit {
        width: 32px;
        height: 32px;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    body.game-page:has(.game-screen) .game-board > .card {
        padding-top: 55px !important;
    }

    /* Brand bar fixed at top, replaces the hidden site header.
       Height matches the regular site navbar (~55px) so the visual transition
       between "browsing" and "playing" feels seamless. */
    body.game-page .game-focus-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.75rem;
        z-index: 1050;
        background: var(--bs-body-bg);
        border-bottom: 1px solid var(--bs-border-color);
    }

    .game-focus-brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .game-focus-brand img {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .game-focus-title {
        flex: 1;
        text-align: center;
        font-weight: 600;
        font-size: 1rem;
        color: var(--bs-body-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0.5rem;
    }

    .game-focus-exit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        color: var(--bs-body-color);
        text-decoration: none;
    }

    .game-focus-exit:hover,
    .game-focus-exit:focus-visible {
        color: var(--bs-danger);
        outline: none;
    }
}

/* Image upload modal — merged from former image.css to save one HTTP request */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    margin: 20% auto;
    padding: 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    width: 80%;
}

.close {
    background: transparent;
    border: none;
    color: var(--bs-secondary-color);
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.close:hover,
.close:focus-visible {
    color: var(--bs-body-color);
    outline: 2px solid var(--bs-danger);
    outline-offset: 2px;
}

/* Accessibility: respect users who set prefers-reduced-motion in their OS.
   Forces animations and transitions off — gives stable rendering for
   vestibular-disorder users without removing the styles themselves. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* About page — peak markers on section titles, snow-toned stat cards. */

.about-article {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.about-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.about-section:last-child {
    border-bottom: none;
}

.about-section-title {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.about-section-title::before {
    content: '▲';
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--bs-danger);
    font-size: 0.85em;
}

/* Stats cards — snow-capped feel */
.about-stat {
    text-align: center;
    padding: 1.25rem 0.75rem;
    background: linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.about-stat-value {
    font-family: "LilitaOne", "Luckiest Guy", cursive;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--bs-danger);
    margin-bottom: 0.25rem;
}

.about-stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

/* Feature list with mountain peak bullets */
.about-features {
    margin-top: 1rem;
}

.about-features li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    border-bottom: 1px dashed var(--bs-border-color);
}

.about-features li:last-child {
    border-bottom: none;
}

.about-features li::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.85rem;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid var(--bs-danger);
}

.about-features li::after {
    content: '';
    position: absolute;
    left: 0.65rem;
    top: 0.85rem;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #fff;
    opacity: 0.85;
}

[data-bs-theme="dark"] .about-features li::after {
    border-bottom-color: var(--bs-body-color);
    opacity: 0.5;
}

/* Homepage challenge hero — featured Quiz Savoie banner above the games
   grid. Bold red gradient bg, tilted cover with shadow, stats line, pulsing
   CTA. Whole banner is the click target for one big tap zone. */
.challenge-hero {
    position: relative;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #c92030 0%, #8b0d18 100%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.challenge-hero:hover,
.challenge-hero:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    color: #fff;
    outline: none;
}

/* Savoyard cross filigree in the background, very faint */
.challenge-hero-bg {
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%) rotate(-12deg);
    width: 420px;
    height: 280px;
    background: url('/img/flag/savoie.png') no-repeat center / contain;
    opacity: 0.08;
    pointer-events: none;
}

.challenge-hero-cover-wrap {
    flex-shrink: 0;
    transform: rotate(-4deg);
    transition: transform 0.3s ease;
}

.challenge-hero:hover .challenge-hero-cover-wrap {
    transform: rotate(-1deg) scale(1.03);
}

.challenge-hero-cover {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    border: 4px solid #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    display: block;
}

.challenge-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-grow: 1;
}

.challenge-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.challenge-hero-title {
    font-family: "LilitaOne", "Luckiest Guy", sans-serif;
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    color: #fff;
    letter-spacing: 0.05em;
}

.challenge-hero-description {
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
}

.challenge-hero-stats {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.challenge-hero-stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.challenge-hero-stats .stat-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.challenge-hero-cta {
    align-self: flex-start;
    background: #fff;
    color: #c92030;
    font-weight: 800;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    margin-top: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    animation: challengeCtaPulse 2.4s ease-in-out infinite;
}

@keyframes challengeCtaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-hero-cta { animation: none; }
}

@media (max-width: 767.98px) {
    .challenge-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        gap: 1.25rem;
    }
    .challenge-hero-cover-wrap {
        align-self: center;
        transform: rotate(-3deg);
    }
    .challenge-hero-cover {
        width: 160px;
        height: 240px;
    }
    .challenge-hero-title {
        font-size: 2rem;
    }
    .challenge-hero-bg {
        right: -100px;
        opacity: 0.06;
    }
}

/* User profile pill-style nav — replaces the cramped Bootstrap navbar.
   Horizontal pills with icons, scrolls on overflow rather than hamburger. */
.account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0;
}

.account-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.account-nav-link:hover,
.account-nav-link:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    outline: none;
    transform: translateY(-1px);
}

.account-nav-link.is-active {
    background: var(--bs-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.35);
}

.account-nav-link.is-active:hover,
.account-nav-link.is-active:focus-visible {
    background: var(--bs-danger);
    color: #fff;
}

/* User account page — replaces the bootstrap-table dependency with a
   richer card-grid layout. The profile header shows avatar + identity
   + score; each played game becomes a clickable stat card. */
.account-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1rem;
    background: var(--bs-body-bg);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.account-avatar-link {
    flex-shrink: 0;
    display: block;
    transition: transform 0.15s ease;
}

.account-avatar-link:hover,
.account-avatar-link:focus-visible {
    transform: scale(1.05);
}

.account-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-danger);
}

.account-identity {
    flex-grow: 1;
    min-width: 0;
}

.account-username {
    color: var(--bs-danger);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    word-break: break-word;
}

.account-email {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.account-tiles {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.account-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    background: var(--bs-tertiary-bg);
    border-radius: 10px;
    border-left: 3px solid var(--bs-danger);
    min-width: 100px;
}

.account-tile-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.account-tile-value {
    font-family: "LilitaOne", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--bs-danger);
}

.account-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
}

.account-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Inner panel used inside the profile pages (edit, favorites empty,
   avatar) — sits on top of the page's bg-body-tertiary wrapper and
   reads as a contained "card". */
.account-panel {
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.account-avatar-large {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bs-danger);
}

.account-games-count {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    font-weight: 400;
}

/* "Resume your last game" block — sits above the records list as a
   prominent CTA back into play. Border-left in brand color to read as
   "your shortcut", whole block is the click target. */
.account-resume {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--bs-body-bg);
    border-left: 4px solid var(--bs-danger);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.account-resume:hover,
.account-resume:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    outline: none;
}

.account-resume-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.account-resume-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex-grow: 1;
    min-width: 0;
}

.account-resume-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-danger);
    font-weight: 700;
}

.account-resume-game {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bs-body-color);
    line-height: 1.2;
}

.account-resume-record {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.account-resume-cta {
    background: var(--bs-danger);
    color: #fff;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .account-resume {
        flex-wrap: wrap;
    }
    .account-resume-cta {
        width: 100%;
        text-align: center;
    }
}

.account-games {
    margin-bottom: 2rem;
}

/* Records list — compact leaderboard-style rows. Small thumbnail on the
   left for visual identity, name and 3 stats inline. Way less repetitive
   than a grid of full-size covers when the user has many played games. */
.account-records-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-record-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.85rem 0.5rem 0.5rem;
    /* Row tint: best record on top = strongest red, weakest at bottom = body bg.
       --intensity comes inline from Twig (1 → 0). Capped at 70% mix so dark
       text stays readable on every row. */
    background: color-mix(in srgb, var(--bs-danger) calc(var(--intensity, 0) * 70%), var(--bs-body-bg));
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.account-record-row:hover,
.account-record-row:focus-visible {
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.account-record-thumb {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.account-record-name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--bs-body-color);
}

.account-record-stats {
    display: flex;
    gap: 0.6rem;
}

.account-record-stat {
    min-width: 56px;
    text-align: center;
    background: var(--bs-tertiary-bg);
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.account-record-stat--record {
    background: var(--bs-danger);
    color: #fff;
}

.account-record-stat-value {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
}

.account-record-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

@media (max-width: 575.98px) {
    .account-record-row {
        grid-template-columns: 50px 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem 0.75rem;
        padding: 0.5rem;
    }
    .account-record-thumb {
        width: 50px;
        height: 75px;
        grid-row: 1 / 3;
    }
    .account-record-stats {
        grid-column: 2 / 3;
        gap: 0.4rem;
    }
    .account-record-stat {
        min-width: 0;
        flex: 1;
        padding: 0.25rem 0.3rem;
    }
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .account-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .account-score {
        justify-content: center;
    }
}

/* Global TOP 100 ranking page — podium for top 3, clean list for 4-100.
   Replaces the bootstrap-table data table with a more visual layout. */
.ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: end;
    max-width: 720px;
    margin: 2rem auto 3rem;
}

.ranking-podium-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem 1.25rem;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    position: relative;
    color: #fff;
}

.ranking-podium-spot--gold {
    background: linear-gradient(160deg, #ffd966 0%, #b8902a 100%);
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
    transform: translateY(-12px);
    box-shadow: 0 12px 28px rgba(184, 144, 42, 0.4);
}

.ranking-podium-spot--silver {
    background: linear-gradient(160deg, #d8dee5 0%, #8a939c 100%);
}

.ranking-podium-spot--bronze {
    background: linear-gradient(160deg, #df9059 0%, #8b4d22 100%);
}

.ranking-podium-medal {
    font-size: 2.5rem;
    line-height: 1;
}

.ranking-podium-spot--gold .ranking-podium-medal {
    font-size: 3rem;
}

.ranking-podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ranking-podium-position {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.ranking-podium-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    word-break: break-word;
    color: #fff;
}

.ranking-podium-score {
    font-family: "LilitaOne", sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
}

.ranking-podium-spot--gold .ranking-podium-score {
    font-size: 2rem;
}

/* Secondary stat on per-game podium (e.g. "Total 1234"). */
.ranking-podium-sub {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    color: #fff;
}

/* Positions 4-100 — clean rows */
.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    counter-reset: ranking 3;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ranking-row {
    display: grid;
    grid-template-columns: 3rem 36px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: var(--bs-body-bg);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ranking-row.is-self {
    background: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-body-bg));
    border-left: 4px solid var(--bs-danger);
    padding-left: calc(0.5rem - 4px);
}

.ranking-row-position {
    font-weight: 700;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    text-align: center;
}

.ranking-row.is-self .ranking-row-position {
    color: var(--bs-danger);
}

.ranking-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ranking-row-name {
    font-weight: 600;
    color: var(--bs-body-color);
}

.ranking-row-score {
    font-weight: 700;
    color: var(--bs-danger);
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.ranking-row-sub {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .ranking-podium {
        gap: 0.5rem;
    }
    .ranking-podium-spot {
        padding: 0.75rem 0.4rem 1rem;
    }
    .ranking-podium-spot--gold {
        padding-top: 1rem;
        transform: translateY(-6px);
    }
    .ranking-podium-medal { font-size: 1.75rem; }
    .ranking-podium-spot--gold .ranking-podium-medal { font-size: 2.25rem; }
    .ranking-podium-avatar { width: 56px; height: 56px; }
    .ranking-podium-name { font-size: 0.85rem; }
    .ranking-podium-score { font-size: 1.2rem; }
    .ranking-podium-spot--gold .ranking-podium-score { font-size: 1.5rem; }

    .ranking-row {
        grid-template-columns: 2rem 32px 1fr auto;
        gap: 0.5rem;
        padding: 0.45rem 0.75rem 0.45rem 0.4rem;
    }
}

/* Per-game ranking hub on /games/ranking — internal-linking section. */
.ranking-by-game {
    max-width: 720px;
    margin: 3rem auto 0;
}

.ranking-by-game-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.ranking-by-game-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ranking-by-game-link:hover,
.ranking-by-game-link:focus-visible {
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.ranking-by-game-link img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ranking-by-game-link > span:nth-of-type(1) {
    flex-grow: 1;
    font-weight: 500;
}

.ranking-by-game-arrow {
    color: var(--bs-danger);
    font-weight: 700;
}

/* Rolling-window tabs on the ranking pages (30 days / 12 months / all-time). */
.ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.25rem;
}

.ranking-tab {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    color: var(--bs-body-color);
    background: #f1f3f5;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

.ranking-tab:hover,
.ranking-tab:focus-visible {
    background: #e2e6ea;
    color: var(--bs-body-color);
}

.ranking-tab.is-active {
    background: var(--bs-danger);
    color: #fff;
}

[data-bs-theme="dark"] .ranking-tab {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ranking-tab:hover,
[data-bs-theme="dark"] .ranking-tab:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

[data-bs-theme="dark"] .ranking-tab.is-active {
    background: var(--bs-danger);
    color: #fff;
}

/* "About this game" block on per-game ranking — adds unique content + CTA. */
.ranking-about-game {
    max-width: 720px;
    margin: 3rem auto 0;
}

.ranking-about-game-card {
    display: flex;
    gap: 1.25rem;
    background: var(--bs-body-bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    align-items: center;
}

.ranking-about-game-thumb {
    width: 100px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .ranking-about-game-card {
        flex-direction: column;
        text-align: center;
    }
    .ranking-about-game-thumb {
        width: 120px;
        height: 180px;
    }
}

/* DataTable controller (replaces bootstrap-table). Toolbar above the table,
   sortable column headers, pagination strip below. */
.data-table-toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.data-table-toolbar .form-control,
.data-table-toolbar .form-select {
    max-width: 280px;
}

[data-controller~="data-table"] th[data-action*="sort"] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.25rem;
}

[data-controller~="data-table"] th[data-action*="sort"]::after {
    content: "↕";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    font-size: 0.85em;
}

[data-controller~="data-table"] th[data-sort-active="asc"]::after {
    content: "↑";
    opacity: 1;
}

[data-controller~="data-table"] th[data-sort-active="desc"]::after {
    content: "↓";
    opacity: 1;
}

.data-table-pagination {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Error pages (404 / 403) shown to public visitors via TwigBundle. The 500
   and generic fallback templates inline their own minimal CSS so they keep
   working even if this file fails to load. */
.error-page {
    max-width: 560px;
    padding: 1rem;
}

.error-page .error-code {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 0.5rem;
    color: var(--bs-secondary-color);
    letter-spacing: -0.03em;
    opacity: 0.4;
}

/* ---- Post inline images ----------------------------------------------------
   StringHelper wraps every <image> tag in <figure class="post-image">.
   Goal: keep the image fully crawlable (still a real <img> with src/alt/lazy)
   while taming the slab-of-pixels look that 100%-width gave.
*/
.post-image {
    margin: 1.75rem auto;
    max-width: 720px;
    text-align: center;
}

.post-image-img {
    display: block;
    /* Every article image spans the reading column, for a consistent rhythm. */
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Portrait visuals (box art, flyers) would otherwise fill a whole screen:
       cap the height and letterbox them inside the column. */
    max-height: 560px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    background: var(--bs-tertiary-bg);
}

/* Retro pixel art (file name ends in "-pixel.png"): scaled up to the column
   width without smoothing, so the pixels stay crisp instead of blurring. */
.post-image-img[src*="-pixel."] {
    image-rendering: pixelated;
}

[data-bs-theme="dark"] .post-image-img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.post-image-caption {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    line-height: 1.4;
}

/* Embedded video (official YouTube trailers in gaming articles). Raw HTML in
   the Markdown: <figure class="post-video"><iframe src="https://www.youtube-nocookie.com/embed/ID" …>
   + <figcaption>. youtube-nocookie = no tracking cookie until the visitor presses play. */
.post-video {
    margin: 1.75rem auto;
    max-width: 720px;
    text-align: center;
}

.post-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
}

.post-video figcaption {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    line-height: 1.4;
}

/* ---- Article page ----------------------------------------------------------
   Reading column capped at ~70 characters; the hero image is wider. The body
   is plain Markdown-generated HTML, styled here (no classes injected). */
.post-narrow {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.post-header {
    margin: 1rem 0 1.75rem;
}

.post-header-category {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-danger-text-emphasis);
    text-decoration: none;
    margin-bottom: 0.6rem;
}

.post-header-category:hover {
    text-decoration: underline;
}

.post-title {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.post-lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

.post-hero {
    max-width: 68rem;
    margin: 0 auto 2.5rem;
}

.post-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 40 / 21;
    object-fit: cover;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
}

.post-toc {
    background: var(--bs-tertiary-bg);
    border-left: 4px solid var(--bs-danger);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.post-toc-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.post-toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.post-toc li + li {
    margin-top: 0.3rem;
}

.post-toc a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.post-toc a:hover {
    color: var(--bs-danger-text-emphasis);
    text-decoration: underline;
}

.post-body {
    font-size: 1.125rem;
    line-height: 1.75;
}

.post-body > * + * {
    margin-top: 1.25rem;
}

.post-body p,
.post-body ul,
.post-body ol {
    margin-bottom: 0;
}

.post-body h2 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 2.75rem;
    margin-bottom: 0;
    scroll-margin-top: 4.5rem;
}

.post-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0;
}

.post-body ul,
.post-body ol {
    padding-left: 1.4rem;
}

.post-body li + li {
    margin-top: 0.4rem;
}

.post-body li::marker {
    color: var(--bs-danger);
}

.post-body a {
    color: var(--bs-danger-text-emphasis);
    text-underline-offset: 0.2em;
}

.post-body blockquote {
    border-left: 4px solid var(--bs-danger);
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-style: italic;
    color: var(--bs-secondary-color);
}

.post-body .table-responsive {
    font-size: 0.95rem;
}

.post-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 3rem 0 2rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
}

.post-cta-img {
    width: 96px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.6rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.post-cta-emoji {
    font-size: 3rem;
    flex-shrink: 0;
}

.post-cta-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.post-cta-text {
    color: var(--bs-secondary-color);
    margin-bottom: 0.9rem;
}

@media (max-width: 575.98px) {
    .post-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.post-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* ---- Comments thread + form -----------------------------------------------
   Used on /post/<slug>, /games/<path>/info (inline first-10 section), the
   dedicated paginated /comments page, /user/comments, and /user/notifications. */

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comment {
    padding: 1rem 1.15rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.65rem;
}

.comment.is-reply {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color-translucent);
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.comment-author {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.comment-author-anon {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.3rem;
}

.comment-date {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.comment-body {
    line-height: 1.55;
    word-wrap: break-word;
}

.comment.is-deleted .comment-body em {
    color: var(--bs-secondary-color);
}

.comment-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    align-items: center;
}

.comment-vote-btn {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--bs-body-color);
}

.comment-vote-btn:hover:not(:disabled) {
    background: var(--bs-secondary-bg);
}

.comment-vote-btn.is-active {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.4);
    color: #0a58ca;
}

.comment-vote-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.comment-reply-toggle,
.comment-action-link {
    background: transparent;
    border: 0;
    color: var(--bs-link-color);
    font-size: 0.9rem;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}

.comment-reply-toggle:hover,
.comment-action-link:hover {
    text-decoration: underline;
}

.comment-action-danger {
    color: #dc3545;
}

.comment-replies {
    margin-top: 0.85rem;
    margin-left: 1.5rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--bs-border-color-translucent);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.comment-reply-form-wrap {
    margin-top: 0.85rem;
    padding: 0.85rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
}

.comment-form .form-control {
    border-radius: 0.5rem;
}

.comment-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.comment-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.6rem;
}

.user-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-comment-row {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.5rem;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-row {
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.5rem;
}

.notification-row.is-unread {
    background: rgba(13, 110, 253, 0.06);
    border-left: 3px solid var(--bs-primary);
}

/* Header bell badge — small red counter on top-right of the bell icon. */
.header-bell-badge {
    position: absolute;
    top: 0.2rem;
    right: 0;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
    pointer-events: none;
}

/* ------------------------------------------------------------------------
   Seasonal banner (partials/_season_banner.html.twig, SeasonService).
   "Arcade moderne" style: flat season colour, chunky CTA with a hard offset
   shadow, 7×7 pixel-art icon. Colours per season via --sb-bg / --sb-fg
   (all pairs ≥ 4.5:1), one banner all year. Hidden after dismissal via html[data-season-dismissed].
   ------------------------------------------------------------------------ */
.season-banner {
  --sb-bg: #c8102e;
  --sb-fg: #ffffff;
  --sb-icon: var(--sb-fg);
  position: relative;
  overflow: hidden;
  background: var(--sb-bg);
  color: var(--sb-fg);
  border-bottom: 3px solid #14111f;
}
.season-banner--noel { --sb-bg: #1f5f3a; --sb-fg: #ffffff; --sb-icon: #f2c230; }
.season-banner--nouvel_an { --sb-bg: #14111f; --sb-fg: #f2c230; }
.season-banner--chandeleur { --sb-bg: #f2c230; --sb-fg: #14111f; --sb-icon: #8b4d22; }
.season-banner--carnaval { --sb-bg: #231d33; --sb-fg: #ffffff; --sb-icon: #ff8a9a; }
.season-banner--paques { --sb-bg: #9fd3f0; --sb-fg: #14111f; --sb-icon: #c8102e; }
.season-banner--halloween { --sb-bg: #e8701a; --sb-fg: #14111f; }
.season-banner--ete { --sb-bg: #2e7d4f; --sb-fg: #ffffff; --sb-icon: #f2c230; }
.season-banner--hiver { --sb-bg: #1e4e8c; --sb-fg: #ffffff; }
.season-banner--printemps { --sb-bg: #8bd17c; --sb-fg: #14111f; --sb-icon: #c8102e; }
.season-banner--automne { --sb-bg: #8b4d22; --sb-fg: #ffffff; --sb-icon: #f2c230; }

.season-banner__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.season-banner__icon {
  flex-shrink: 0;
  fill: var(--sb-icon);
}
.season-banner__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  font-variant-ligatures: none;
}
.season-banner__text strong {
  font-weight: 700;
  margin-right: 0.35rem;
}
.season-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border: 2px solid #14111f;
  border-radius: 8px;
  background: var(--sb-fg);
  color: var(--sb-bg);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 3px 3px 0 #14111f;
  transition: transform 0.08s, box-shadow 0.08s;
}
.season-banner__cta:hover,
.season-banner__cta:focus-visible {
  color: var(--sb-bg);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #14111f;
}
.season-banner__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--sb-fg);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.season-banner__close:focus-visible,
.season-banner__cta:focus-visible {
  outline: 3px solid var(--sb-fg);
  outline-offset: 2px;
}

/* Pixel snow (Noël, Nouvel An, hiver). Decorative; the global
   prefers-reduced-motion block stops it. */
.season-banner__snow span {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  opacity: 0.35;
  animation: season-snow 7s linear infinite;
}
.season-banner--nouvel_an .season-banner__snow span { background: #f2c230; }
.season-banner__snow span:nth-child(1) { left: 3%; animation-delay: -1s; }
.season-banner__snow span:nth-child(2) { left: 10%; animation-delay: -4s; animation-duration: 9s; }
.season-banner__snow span:nth-child(3) { left: 17%; animation-delay: -2.5s; }
.season-banner__snow span:nth-child(4) { left: 25%; animation-delay: -6s; animation-duration: 8s; }
.season-banner__snow span:nth-child(5) { left: 33%; animation-delay: -3s; }
.season-banner__snow span:nth-child(6) { left: 41%; animation-delay: -5.5s; animation-duration: 10s; }
.season-banner__snow span:nth-child(7) { left: 49%; animation-delay: -0.5s; }
.season-banner__snow span:nth-child(8) { left: 57%; animation-delay: -4.5s; animation-duration: 9s; }
.season-banner__snow span:nth-child(9) { left: 64%; animation-delay: -2s; }
.season-banner__snow span:nth-child(10) { left: 71%; animation-delay: -6.5s; animation-duration: 8s; }
.season-banner__snow span:nth-child(11) { left: 78%; animation-delay: -1.5s; }
.season-banner__snow span:nth-child(12) { left: 85%; animation-delay: -3.5s; animation-duration: 10s; }
.season-banner__snow span:nth-child(13) { left: 91%; animation-delay: -5s; }
.season-banner__snow span:nth-child(14) { left: 97%; animation-delay: -0.2s; animation-duration: 9s; }
@keyframes season-snow {
  to { transform: translateY(120px); }
}

@media (max-width: 575.98px) {
  .season-banner__text { flex-basis: calc(100% - 3rem); }
}

/* ========================================================================
   ARCADE MODERNE — design foundations (redesign 2026-11, step 1).
   Chosen direction: cream content background, night-blue chrome, Savoie
   red + white, coin gold; Rubik for all text, the pixel font only for very
   large display titles (.font-pixel); chunky controls with a 2px edge and a
   hard offset shadow. Declared last so it wins over the legacy rules above.
   The admin keeps its own chrome: controls are scoped out with .admin-page.
   ======================================================================== */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Variable-latin-CH1Nfrq.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P-latin-l2C7s5x.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root,
[data-bs-theme="light"] {
  --arc-red: #c8102e;
  --arc-red-hover: #a30d25;
  --arc-red-active: #8b0d18;
  --arc-gold: #f2c230;
  --arc-gold-hover: #e3b11c;
  --arc-night: #14111f;
  --arc-night-2: #231d33;
  --arc-slate: #3a3350;
  --arc-cream: #f7f3ec;
  --arc-on-night: #f4efe6;
  --arc-edge: #14111f;           /* control borders + hard shadows */
  --arc-focus: #1e4e8c;
  --arc-radius: 12px;
  --arc-font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arc-font-pixel: "Press Start 2P", ui-monospace, monospace;

  --bs-body-font-family: var(--arc-font);
  --bs-body-bg: #f7f3ec;
  --bs-body-bg-rgb: 247, 243, 236;
  --bs-body-color: #14111f;
  --bs-body-color-rgb: 20, 17, 31;
  --bs-emphasis-color: #14111f;
  --bs-tertiary-bg: #ffffff;
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-secondary-bg: #efe8dc;
  --bs-secondary-bg-rgb: 239, 232, 220;
  --bs-border-color: #d9d0c2;
  --bs-danger: #c8102e;
  --bs-danger-rgb: 200, 16, 46;
  --bs-link-color: #b00e28;
  --bs-link-color-rgb: 176, 14, 40;
  --bs-link-hover-color: #14111f;
  --bs-link-hover-color-rgb: 20, 17, 31;
}

[data-bs-theme="dark"] {
  --arc-edge: #4a4166;           /* black would vanish on the night bg */
  --arc-focus: #9fd3f0;
  --bs-body-bg: #14111f;
  --bs-body-bg-rgb: 20, 17, 31;
  --bs-body-color: #f4efe6;
  --bs-body-color-rgb: 244, 239, 230;
  --bs-emphasis-color: #ffffff;
  --bs-tertiary-bg: #231d33;
  --bs-tertiary-bg-rgb: 35, 29, 51;
  --bs-secondary-bg: #2a2140;
  --bs-secondary-bg-rgb: 42, 33, 64;
  --bs-border-color: #3a3350;
  --bs-link-color: #ff8a9a;
  --bs-link-color-rgb: 255, 138, 154;
  --bs-link-hover-color: #ffffff;
  --bs-link-hover-color-rgb: 255, 255, 255;
}

/* ---- Typography ---- */
h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
h4, h5, h6, .h4, .h5, .h6 {
  font-weight: 700;
}
/* Pixel display font — big titles only (≥ 22px), never body copy. */
.font-pixel {
  font-family: var(--arc-font-pixel);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}
/* Legacy display font (LilitaOne) on stat numbers → Rubik heavy. Game pages
   still use LilitaOne through game.css until their own redesign step. */
.about-stat-value,
.challenge-hero-title,
.account-tile-value,
.ranking-podium-score {
  font-family: var(--arc-font) !important;
  font-weight: 800;
}

/* ---- Buttons: chunky edge + hard offset shadow ---- */
body:not(.admin-page) .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler) {
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 8px;
  --bs-btn-border-color: var(--arc-edge);
  --bs-btn-hover-border-color: var(--arc-edge);
  --bs-btn-active-border-color: var(--arc-edge);
  --bs-btn-disabled-border-color: var(--arc-edge);
  box-shadow: 3px 3px 0 var(--arc-edge);
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.15s, color 0.15s;
}
body:not(.admin-page) .btn-sm:not(.btn-link):not(.btn-close) {
  box-shadow: 2px 2px 0 var(--arc-edge);
}
body:not(.admin-page) .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler):hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--arc-edge);
}
body:not(.admin-page) .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler):active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
body:not(.admin-page) .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler):disabled,
body:not(.admin-page) .btn.disabled:not(.btn-link) {
  transform: none;
  box-shadow: none;
}
body:not(.admin-page) .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler):focus-visible {
  outline: 3px solid var(--arc-focus);
  outline-offset: 2px;
}

body:not(.admin-page) .btn-danger,
body:not(.admin-page) .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--arc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--arc-red-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--arc-red-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--arc-red);
}
body:not(.admin-page) .btn-warning {
  --bs-btn-color: var(--arc-night);
  --bs-btn-bg: var(--arc-gold);
  --bs-btn-hover-color: var(--arc-night);
  --bs-btn-hover-bg: var(--arc-gold-hover);
  --bs-btn-active-color: var(--arc-night);
  --bs-btn-active-bg: var(--arc-gold-hover);
}
body:not(.admin-page) .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--arc-night);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--arc-slate);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--arc-slate);
}
/* Outline variants become "paper" buttons: surface bg, ink edge. */
body:not(.admin-page) .btn-outline-secondary,
body:not(.admin-page) .btn-outline-danger,
body:not(.admin-page) .btn-outline-primary,
body:not(.admin-page) .btn-outline-success,
body:not(.admin-page) .btn-outline-warning {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: var(--bs-tertiary-bg);
}
body:not(.admin-page) .btn-outline-danger,
body:not(.admin-page) .btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-color);
  --bs-btn-active-color: var(--bs-link-color);
}
body:not(.admin-page) .btn-outline-warning {
  --bs-btn-hover-bg: var(--arc-gold);
  --bs-btn-hover-color: var(--arc-night);
}

/* ---- Site header: night bar, red underline, gold active pill ---- */
.site-header {
  background: var(--arc-night);
  box-shadow: 0 4px 0 var(--arc-red);
}
.site-header .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.site-header .navbar-nav .nav-link {
  border-radius: 8px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible {
  color: var(--arc-gold) !important;
}
.site-header .navbar-nav .nav-link[aria-current="page"] {
  background: var(--arc-gold);
  color: var(--arc-night) !important;
}
.site-header .navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Dropdowns (header + elsewhere): same chunky card language. */
body:not(.admin-page) .dropdown-menu {
  border: 2px solid var(--arc-edge);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--arc-edge);
  padding: 0.35rem;
}
body:not(.admin-page) .dropdown-item {
  border-radius: 6px;
}
body:not(.admin-page) .dropdown-item:hover,
body:not(.admin-page) .dropdown-item:focus {
  background: var(--arc-gold);
  color: var(--arc-night);
}

/* Player progression bar (bottom sticky). */
.bg-secondary-dark {
  background-color: var(--arc-night-2);
  border-top: 2px solid var(--arc-edge);
}

/* ---- Site footer: night, red top line ---- */
.site-footer {
  --arc-edge: #4a4166;  /* slate edge: black borders/shadows vanish on night */
  background: var(--arc-night);
  color: var(--arc-on-night);
  border-top: 4px solid var(--arc-red);
}
.site-footer a {
  color: var(--arc-on-night);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--arc-gold);
}
.site-footer h2 {
  color: #ffffff;
  letter-spacing: 0.04em;
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: #ffffff;
}
.site-footer__tagline {
  color: #c9c1d9;
  max-width: 34ch;
}
@media (max-width: 991.98px) {
  .site-footer__tagline { margin-left: auto; margin-right: auto; }
}
.site-footer__cta {
  font-weight: 800;
}
.site-footer__social a {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--arc-edge);
  border-radius: 10px;
}
.site-footer__list li {
  margin-bottom: 0.5rem;
}
.site-footer__list a {
  text-decoration: none;
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__new {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: var(--arc-gold);
  color: var(--arc-night);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: 0.15em;
}
.site-footer__bottom {
  background: #0b0912;
  color: #c9c1d9;
  font-size: 0.9rem;
}
.site-footer__bottom a {
  color: #c9c1d9;
  text-decoration: none;
}
.site-footer__legal {
  display: inline-flex;
  gap: 0.5rem;
}

/* ---- Forms: visible, consistent focus ---- */
body:not(.admin-page) .form-control:focus,
body:not(.admin-page) .form-select:focus {
  border: 2px solid var(--arc-focus) !important;
  box-shadow: 0 0 0 3px rgba(30, 78, 140, 0.2) !important;
}

/* ---- Arcade moderne, step 2: home + shared cards ---- */

/* Home hero: night stage with pixel-art Alps. */
.home-hero {
  --arc-edge: #4a4166;
  position: relative;
  background: var(--arc-night);
  color: var(--arc-on-night);
  overflow: hidden;
}
.home-hero__inner {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 0.5rem;
}
.home-hero__title {
  color: #ffffff;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  max-width: 18ch;
  margin-bottom: 1rem;
}
.home-hero__subtitle {
  display: inline-block;
  background: var(--arc-gold);
  color: var(--arc-night);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.home-hero__text {
  font-size: 1.2rem;
  color: #ece6f5;
  max-width: 40rem;
}
.home-hero .alert {
  max-width: 40rem;
}
.home-hero__mountains,
.page-hero__mountains {
  /* Natural 8:1 ratio on wide screens (never crops the peaks); on narrow
     screens min-height kicks in and object-fit crops the SIDES only. */
  display: block;
  width: 100%;
  height: auto;
  min-height: 110px;
  object-fit: cover;
  object-position: 40% bottom;
  image-rendering: pixelated;
  margin-top: 1.5rem;
}

/* Section headings: small red pixel block before the title. */
h2.display-6 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
h2.display-6::before {
  content: "";
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  background: var(--arc-red);
  box-shadow: 3px 3px 0 var(--arc-edge);
}

/* Game cards: cartridge feel — ink edge, hard shadow, lift on hover. */
.game-card {
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.game-card:hover,
.game-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--arc-edge);
}
.game-card:focus-visible {
  outline: 3px solid var(--arc-focus);
  outline-offset: 3px;
}
.game-card-thumb {
  border-bottom: 3px solid var(--arc-edge);
}
.game-card-body h3 {
  font-weight: 800;
}
.game-card-favorite {
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--arc-edge);
}
.game-card-favorite.is-favorited {
  background: var(--arc-gold);
  color: var(--arc-night);
}

/* Post cards: same language. */
.post-card {
  background: var(--bs-tertiary-bg);
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.post-card:hover,
.post-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--arc-edge);
}
.post-card:focus-visible {
  outline: 3px solid var(--arc-focus);
}
.post-card-thumb {
  border-bottom: 3px solid var(--arc-edge);
}
.post-card-title {
  font-weight: 800;
}
.post-card-category,
.post-card-read {
  color: var(--bs-link-color);
}

/* "See all" links. */
.see-all-link,
.see-all-link:hover,
.see-all-link:focus-visible {
  color: var(--bs-link-color);
  font-weight: 700;
}

/* Featured challenge: flat red panel, chunky cover + CTA. */
.challenge-hero {
  background: var(--arc-red);
  border: 3px solid var(--arc-edge);
  border-radius: 16px;
  box-shadow: 7px 7px 0 var(--arc-edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.challenge-hero:hover,
.challenge-hero:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--arc-edge);
}
.challenge-hero:focus-visible {
  outline: 3px solid var(--arc-focus);
  outline-offset: 3px;
}
.challenge-hero-cover {
  border: 3px solid var(--arc-edge);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--arc-edge);
}
.challenge-hero-badge {
  background: var(--arc-gold);
  color: var(--arc-night);
  backdrop-filter: none;
}
.challenge-hero-title {
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.challenge-hero-cta {
  color: var(--arc-night);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--arc-edge);
  animation: none;
}

/* Home ranking → arcade "high scores" board. */
.score-board {
  --arc-edge: #000000;
  background: var(--arc-night);
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 6px 6px 0 var(--arc-red);
  padding: 0.75rem;
}
.score-board__table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--arc-on-night);
  --bs-table-border-color: var(--arc-slate);
  font-size: 1.05rem;
}
.score-board__table thead th {
  color: var(--arc-gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom-width: 2px;
}
.score-board__table td {
  vertical-align: middle;
}
.score-board__table tr.is-me td {
  background: rgba(242, 194, 48, 0.12);
}
.score-board__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: var(--arc-slate);
  color: #ffffff;
  font-weight: 800;
}
.score-board__rank--1 { background: var(--arc-gold); color: var(--arc-night); }
.score-board__rank--2 { background: #d9d9e0; color: var(--arc-night); }
.score-board__rank--3 { background: #e0a16a; color: var(--arc-night); }
.score-board__score {
  color: var(--arc-gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Latest scores feed + "resume" card. */
.latest-scores {
  background: var(--bs-tertiary-bg);
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-edge);
}
.latest-score-item:hover,
.latest-score-item:focus-visible {
  background-color: var(--bs-secondary-bg);
}
.latest-score-points {
  background: var(--arc-gold);
  color: var(--arc-night);
  border-radius: 6px;
}
.card.border-danger {
  border: 3px solid var(--arc-edge) !important;
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-red) !important;
}

/* ---- Arcade moderne, step 3: secondary pages + rankings ---- */

/* Secondary-page title band (macro headerWithBackground). */
.page-hero {
  background: var(--arc-night);
  overflow: hidden;
}
.page-hero__inner {
  padding-top: 2.25rem;
  padding-bottom: 0.25rem;
}
.page-hero__title {
  color: #ffffff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

/* Period tabs → paper buttons, gold when active. */
.ranking-tabs {
  border-bottom: 0;
  gap: 0.6rem;
}
.ranking-tab,
[data-bs-theme="dark"] .ranking-tab {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--arc-edge);
  font-weight: 700;
}
.ranking-tab:hover,
.ranking-tab:focus-visible,
[data-bs-theme="dark"] .ranking-tab:hover,
[data-bs-theme="dark"] .ranking-tab:focus-visible {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
.ranking-tab.is-active,
[data-bs-theme="dark"] .ranking-tab.is-active {
  background: var(--arc-gold);
  color: var(--arc-night);
}

/* Podium: flat medal colours, ink text (was white on gold — poor contrast). */
.ranking-podium-spot {
  color: var(--arc-night);
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-edge);
}
.ranking-podium-spot--gold {
  background: var(--arc-gold);
  box-shadow: 6px 6px 0 var(--arc-edge);
}
.ranking-podium-spot--silver { background: #d9d9e0; }
.ranking-podium-spot--bronze { background: #e0a16a; }
.ranking-podium-avatar {
  border: 3px solid var(--arc-edge);
  box-shadow: none;
}
.ranking-podium-name,
.ranking-podium-score,
.ranking-podium-sub {
  color: var(--arc-night);
}
.ranking-podium-position {
  font-weight: 800;
  opacity: 1;
}

/* Positions 4+. */
.ranking-row {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--arc-edge);
}
.ranking-row.is-self {
  background: color-mix(in srgb, var(--arc-gold) 30%, var(--bs-tertiary-bg));
  border-left: 2px solid var(--arc-edge);
  padding-left: 0.5rem;
}
.ranking-row-position {
  color: var(--bs-body-color);
  font-weight: 800;
}
.ranking-row.is-self .ranking-row-position {
  color: var(--bs-body-color);
}
.ranking-row-score {
  color: var(--bs-link-color);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Per-game ranking hub links. */
.ranking-by-game-link {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--arc-edge);
}
.ranking-by-game-link:hover,
.ranking-by-game-link:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--arc-edge);
}
.ranking-by-game-link:focus-visible {
  outline: 3px solid var(--arc-focus);
}
.ranking-by-game-link img {
  border: 2px solid var(--arc-edge);
}
.ranking-by-game-arrow {
  color: var(--bs-link-color);
}
/* Fixed podium columns, so a lone #1 stays centred. */
.ranking-podium-spot--silver { grid-column: 1; }
.ranking-podium-spot--gold { grid-column: 2; }
.ranking-podium-spot--bronze { grid-column: 3; }

/* ---- Arcade moderne, step 4: blog (the article body itself stays sober) ---- */
.page-hero__subtitle {
  color: #ece6f5;
  font-size: 1.15rem;
  max-width: 46rem;
  margin: 0.75rem 0 0;
}
.post-header-category,
.post-header-category:hover,
.post-toc a:hover,
.post-body a {
  color: var(--bs-link-color);
}
.post-hero img {
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 6px 6px 0 var(--arc-edge);
}
.post-toc {
  border: 2px solid var(--arc-edge);
  border-left: 6px solid var(--arc-red);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--arc-edge);
}
.post-body h2 {
  font-weight: 800;
}
/* "À vous de jouer" box: an arcade panel that invites to play. */
.post-cta {
  --arc-edge: #4a4166;
  background: var(--arc-night);
  color: var(--arc-on-night);
  border: 3px solid var(--arc-edge);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--arc-red);
}
.post-cta-title {
  color: #ffffff;
  font-weight: 800;
}
.post-cta-text {
  color: #c9c1d9;
}
.post-cta-img {
  border: 2px solid #000000;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #000000;
}

/* ---- Arcade moderne, step 5: account / public profile / about / comments ---- */

/* Generic boxed page wrapper (account, settings, login, register, reset…). */
body:not(.admin-page) .bg-body-tertiary.rounded-3,
body:not(.admin-page) .container.bg-body-tertiary.shadow {
  border: 3px solid var(--arc-edge);
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--arc-edge) !important;
}

/* Checkboxes / radios / switches in brand red (was Bootstrap blue). */
body:not(.admin-page) .form-check-input:checked {
  background-color: var(--arc-red);
  border-color: var(--arc-red);
}
body:not(.admin-page) .form-check-input:focus {
  border-color: var(--arc-focus);
  box-shadow: 0 0 0 3px rgba(30, 78, 140, 0.25);
}

/* Account pill nav → paper buttons, gold when active (same as header). */
.account-nav-link {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--arc-edge);
  font-weight: 700;
}
.account-nav-link:hover,
.account-nav-link:focus-visible {
  background: var(--bs-secondary-bg);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--arc-edge);
}
.account-nav-link:focus-visible {
  outline: 3px solid var(--arc-focus);
  outline-offset: 2px;
}
.account-nav-link.is-active,
.account-nav-link.is-active:hover,
.account-nav-link.is-active:focus-visible {
  background: var(--arc-gold);
  color: var(--arc-night);
  box-shadow: 3px 3px 0 var(--arc-edge);
}

/* Player card. */
.account-header,
.account-panel {
  border: 2px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 4px 4px 0 var(--arc-edge);
}
.account-avatar,
.account-avatar-large {
  border-color: var(--arc-edge);
  box-shadow: 4px 4px 0 var(--arc-red);
}
.account-username {
  color: var(--bs-emphasis-color);
  font-weight: 800;
}
.account-tile {
  border: 2px solid var(--arc-edge);
  border-left: 6px solid var(--arc-red);
  border-radius: 8px;
}
.account-tile-value {
  color: var(--bs-link-color);
}
.account-section-title {
  font-weight: 800;
}

/* Resume block + records. */
.account-resume {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-left: 6px solid var(--arc-red);
  box-shadow: 4px 4px 0 var(--arc-edge);
}
.account-resume-label {
  color: var(--bs-link-color);
}
.account-resume-cta {
  background: var(--arc-red);
  border: 2px solid var(--arc-edge);
  box-shadow: 3px 3px 0 var(--arc-edge);
  font-weight: 700;
}
.account-record-row {
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--arc-edge);
}
.account-record-thumb,
.account-resume-thumb {
  border: 2px solid var(--arc-edge);
}
.account-record-stat--record {
  background: var(--arc-gold);
  color: var(--arc-night);
}

/* About page. */
.about-section-title::before {
  color: var(--arc-red);
}
.about-stat {
  background: var(--bs-tertiary-bg);
  border: 3px solid var(--arc-edge);
  border-radius: var(--arc-radius);
  box-shadow: 5px 5px 0 var(--arc-edge);
}
.about-stat:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--arc-edge);
}
.about-stat-value {
  color: var(--bs-link-color);
}

/* Comments. */
.comment {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--arc-edge);
}
.comment.is-reply {
  background: var(--bs-secondary-bg);
  box-shadow: none;
}
.comment-vote-btn {
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
  font-weight: 700;
}
.comment-vote-btn.is-active {
  background: var(--arc-gold);
  border-color: var(--arc-edge);
  color: var(--arc-night);
}
.comment-action-danger {
  color: var(--bs-link-color);
}
.comment-replies {
  border-left: 3px solid var(--arc-red);
}
.user-comment-row {
  background: var(--bs-tertiary-bg);
  border: 2px solid var(--arc-edge);
  border-radius: 8px;
}

/* ---- UX pass after the prod review (2026-11-07) ---- */

/* Featured challenge inside the home hero's right column: compact. */
.home-hero__challenge .challenge-hero {
  padding: 1.25rem;
  gap: 1.1rem;
  align-items: center;
}
.home-hero__challenge .challenge-hero-cover {
  width: 120px;
  height: 180px;
}
.home-hero__challenge .challenge-hero-title {
  font-size: 1.9rem;
}
.home-hero__challenge .challenge-hero-description {
  font-size: 0.95rem;
}
.home-hero__challenge .challenge-hero-stats {
  font-size: 0.85rem;
  gap: 0.35rem 0.9rem;
}
.home-hero__challenge .challenge-hero-cta {
  font-size: 1rem;
  padding: 0.6rem 1.1rem;
}
@media (max-width: 767.98px) {
  /* Mobile: no cover, so the games grid comes sooner. */
  .home-hero__challenge .challenge-hero-cover-wrap {
    display: none;
  }
  .home-hero__challenge .challenge-hero-title {
    font-size: 1.6rem;
  }
}

/* Login/register side by side on phones: drop the icons to fit. */
@media (max-width: 575.98px) {
  .home-hero__actions .col-6 .btn svg {
    display: none;
  }
  .home-hero__actions .col-6 .btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Seasonal banner on phones: title + CTA only (the sentence made it 4 lines). */
@media (max-width: 575.98px) {
  .season-banner__text span {
    display: none;
  }
}

/* Play counter under the home score board. */
.score-board-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.score-board-plays {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

/* SEO intro at the bottom of the home: regular readable text. */
.home-intro {
  color: var(--bs-body-color);
  font-size: 1rem;
  max-width: 60rem;
  margin: 0;
}