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

body {
  letter-spacing: 0.2em;
  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 */
.post-card {
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
    color: inherit;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

.post-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    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.45;
    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;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.post-card-read {
    color: var(--bs-danger);
    font-weight: 600;
    transition: gap 0.2s ease;
}

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

/* 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: -40px;
    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: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    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;
    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.01em;
}

.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;
    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;
    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;
}

/* "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;
    }
}