/* Styles propres au module game (compléments de app.css, thème clair). Mobile d'abord. */

/* Les composants en display:flex/grid ne doivent pas annuler l'attribut hidden (filtres et fiche de la carte). */
.map-page [hidden], .quest-detail [hidden] { display: none !important; }

/* --- Étiquettes, XP, difficulté --- */
.quest-tags { gap: 6px; }
.quest-xp { color: var(--primary-text); font-weight: 800; }
.difficulty-easy { background: var(--success-soft); color: var(--success); }
.difficulty-medium { background: var(--warning-soft); color: var(--warning); }
.difficulty-hard { background: var(--danger-soft); color: var(--danger); }
.difficulty-expert { background: var(--purple-soft); color: var(--purple); }

/* --- Catalogue --- */
.mission-card { display: flex; flex-direction: column; gap: 6px; }
.mission-card .card-cover { margin-bottom: 8px; }
.mission-card-title { font-size: 1.1rem; margin: 0; }
.mission-card-excerpt { flex: 1; margin: 0; }
.quest-list { list-style: none; margin: 0; padding: 0; }
.quest-list, .map-list, .quest-group .media-list { list-style: none; margin: 0; padding: 0; }
.quest-list > li, .map-list > li { min-width: 0; }
.quest-list .media-item, .map-list .media-item { height: 100%; }
.media-body .meta { margin: 2px 0 0; gap: 4px 12px; }
.quest-page-header { flex-wrap: nowrap; align-items: flex-start; }
.quest-filters { padding: 0; margin-bottom: 16px; }
.quest-filters > summary { padding: 14px 18px; min-height: 48px; }
.quest-filters .filters { padding: 0 18px 18px; margin: 0; }
.pagination-info { align-self: center; padding: 0 4px; }

/* --- Carte --- */
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.map-city { margin: 0; font-size: 1.2rem; }
.map-city-form { margin-left: auto; display: flex; gap: 6px; }
.map-city-form select { max-width: 12rem; padding: 6px 10px; border-radius: 999px; font-weight: 600; }
.map-search { margin-bottom: 12px; }
/* input[type=search] (app.css) redéfinit le padding après .search-field input : on rétablit la place de la loupe. */
.map-search input[type=search] { padding-left: 42px; }
/* Cibles tactiles de 44 px pour les puces des écrans du jeu (carte, quêtes, classement). */
.quest-chips .chip { min-height: 44px; cursor: pointer; font-family: inherit; }
.quest-chips button.chip { -webkit-appearance: none; appearance: none; }
.map-frame, .map-canvas { position: relative; }
.map-locate { position: absolute; right: 12px; bottom: 40px; z-index: 500; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.map-locate:hover { color: var(--primary-text); border-color: var(--primary); }
.map-locate span { display: inline-block; transform: rotate(-45deg); }
.map-status { min-height: 1.2em; margin: 6px 0 0; }
.map-status:empty { display: none; }
/* Conteneurs d'icônes Leaflet : pas de fond ni de bordure par défaut. */
.map-pin-icon, .map-me-icon { background: transparent; border: 0; }
.map-pin-icon { display: flex; align-items: center; justify-content: center; }
.map-me-icon .map-me { display: block; }
.map-pin-icon:focus-visible .map-pin, .map-pin-icon.is-selected .map-pin { outline: 3px solid var(--text); outline-offset: 2px; }
.map-pin-icon.is-selected .map-pin { transform: rotate(-45deg) scale(1.15); }
.map-pin span { color: #fff; font-weight: 900; }
.map-pin-answer span { color: #3a2a00; }
/* Quête sans coordonnées : position indicative autour du centre (contour pointillé, halo). */
.map-pin-approx { border-style: dashed; box-shadow: 0 0 0 6px rgba(255, 122, 0, .25), 0 4px 10px rgba(0, 0, 0, .25); }
.map-sheet-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--text); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow); }
.map-sheet-cover { margin: -18px -18px 12px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-2); }
.map-sheet-cover img { width: 100%; height: 100%; object-fit: cover; }
.map-sheet-title { margin: 4px 0; font-size: 1.3rem; }
.map-sheet-title:focus { outline: none; }
.map-sheet-title:focus-visible { outline: 3px solid var(--text); }
.map-list-section { margin-top: 16px; }
.map-list-section > summary { list-style: none; cursor: pointer; }
.map-list-section > summary::-webkit-details-marker { display: none; }
.map-list-section[open] > summary { margin-bottom: 12px; }
/* Bureau : la fiche flotte sur la carte, à gauche. */
@media (min-width: 900px) {
    .map-sheet { position: absolute; top: 16px; left: 16px; width: 360px; max-height: calc(100% - 32px); overflow: auto; margin: 0; z-index: 600; }
}

/* --- Fiche de quête --- */
.quest-detail { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.quest-detail > * { margin: 0; min-width: 0; }
.quest-head h1 { margin: 0 0 8px; }
.quest-cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; max-height: 360px; width: 100%; background: var(--surface-2); box-shadow: var(--shadow); }
.quest-cover img { width: 100%; height: 100%; object-fit: cover; }
.quest-facts { margin: 0; gap: 8px 16px; }
.quest-facts .meta-item { font-size: .95rem; color: var(--text); }
.quest-facts .quest-xp { color: var(--primary-text); }
.quest-description { color: var(--text-muted); }
.quest-section-title { font-size: 1.1rem; margin-bottom: 10px; }
.quest-blocks { align-items: start; }
.icon-list-text { display: grid; gap: 2px; min-width: 0; }
.icon-list li.is-done .ico { background: var(--success-soft); color: var(--success); }
.reward-box strong { display: block; }
.hint-box .ico { font-size: 1.3rem; line-height: 1; }
.hint-box .prose { margin-top: 2px; }
.quest-safety { margin: 0; }
.mission-cta { justify-content: center; }
.mission-status.card, .mission-status .card { border-color: var(--primary); }
/* Bouton « Commencer » toujours à portée de pouce sur mobile, au-dessus de la barre de navigation. */
.quest-cta { position: sticky; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 20; }
@media (min-width: 900px) { .quest-cta { position: static; } }

/* Mission en cours */
.quest-play .stepper { flex-wrap: wrap; row-gap: 8px; margin: 0; }
.quest-play .stepper li + li::before { width: clamp(14px, 8vw, 40px); }
.quest-step { display: grid; gap: 10px; }
.quest-step h2 { margin: 0; font-size: 1.35rem; }
.quest-step .prose { color: var(--text-muted); }
.quest-step-cover { box-shadow: none; }
.quest-onsite h2 { font-size: 1.05rem; }
ul.action-tiles { list-style: none; margin: 0 0 12px; padding: 0; }
.action-tile { min-height: 96px; justify-content: center; }
.step-form { margin-top: 0; }

/* --- Mes XP / Mes quêtes --- */
.quest-counters { margin-bottom: 12px; }
.counters-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quest-group { margin-top: 20px; }
.quest-group h2 { display: flex; align-items: center; gap: 8px; }
.ledger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ledger-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.ledger-body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.ledger-text { overflow-wrap: anywhere; }
.ledger-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.points-plus { color: var(--success); font-weight: 800; }
.points-minus { color: var(--danger); font-weight: 800; }

/* --- Classement --- */
.leaderboard-rule { margin: 0 0 12px; }
.podium { list-style: none; padding: 16px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 1er au centre, même avec moins de trois classés. */
.podium-place { grid-row: 1; }
.podium-place.first { grid-column: 2; }
.podium-place.second { grid-column: 1; }
.podium-place.third { grid-column: 3; }
.podium-place .name a { color: var(--text); }
.podium-place .score { font-size: .85rem; font-weight: 700; }
.podium-place.is-me .name { color: var(--primary-text); }
.podium-rank { font-size: .75rem; font-weight: 800; color: var(--text-muted); }
.rank-list .rank-name a { color: var(--text); }
.rank-list .rank-score { white-space: nowrap; }

/* --- Administration --- */
.status-published { background: var(--success-soft); color: var(--success); }
.status-scheduled { background: var(--info-soft); color: var(--info); }
.status-suspended { background: var(--warning-soft); color: var(--warning); }
.status-archived, .status-finished { color: var(--text-muted); }
.admin-thumb { display: block; max-width: 240px; border-radius: var(--radius-sm); margin-bottom: 8px; }
.admin-steps > li { flex-wrap: wrap; }
.review-proof { display: block; margin: -18px -18px 12px; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.review-proof img { display: block; width: 100%; max-height: 360px; object-fit: contain; }

/* QR imprimable */
.qr-print { max-width: 520px; margin: 0 auto; }
.qr-image { display: block; margin: 16px auto; width: 100%; max-width: 320px; height: auto; background: #fff; padding: 8px; border-radius: var(--radius-sm); }
.qr-url { word-break: break-all; }

@media print {
    .topbar, .admin-sidebar, .bottom-nav, .footer, .no-print, .alert, .skip-link { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .admin-layout { display: block; }
    .qr-print { border: 0; box-shadow: none; background: #fff; color: #000; }
    .qr-print .muted { color: #333; }
}

/* Bandeau d'accueil des visiteurs sur la carte (page d'ouverture) */
.map-welcome { margin: 0 0 12px; padding: 8px 14px; border-radius: 999px; background: var(--primary-soft); }
.map-welcome a { font-weight: 700; }

/* Bandeau de l'événement en cours ou à venir, en haut de la carte */
.event-banner { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: #15151a; color: #fff; box-shadow: var(--shadow); }
.event-banner:hover { text-decoration: none; color: #fff; }
.event-banner .ico { font-size: 1.6rem; }
.event-banner-body { flex: 1; min-width: 0; display: grid; }
.event-banner-body strong { overflow-wrap: anywhere; }
.event-banner-body .small { color: #d8d8e0; }
.event-banner-cta { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 800; }

/* Lot de la semaine (classement, carte, tableau de bord) */
.weekly-kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd166; }
.weekly-banner { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius);
    background: linear-gradient(120deg, #15151a 0%, #3a1c03 100%); color: #fff; box-shadow: var(--shadow); }
.weekly-banner:hover { text-decoration: none; color: #fff; }
.weekly-banner .ico { font-size: 1.7rem; }
.weekly-banner-body { flex: 1; min-width: 0; display: grid; }
.weekly-banner-body strong { overflow-wrap: anywhere; }
.weekly-banner-body .small { color: rgba(255, 255, 255, .8); }
.weekly-banner-cta { font-weight: 700; color: #ffd166; white-space: nowrap; }
.weekly-card { display: grid; overflow: hidden; margin-bottom: 16px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow-strong);
    background: radial-gradient(circle at 85% 0%, rgba(255, 209, 102, .35), transparent 55%), linear-gradient(140deg, #15151a 0%, #3a1c03 70%, #6b3200 100%); }
.weekly-card-media { aspect-ratio: 16 / 7; background: #2a2a33; }
.weekly-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.weekly-card-body { display: grid; gap: 6px; padding: 16px 18px; }
.weekly-card-body h2 { margin: 0; color: #fff; font-size: 1.35rem; }
.weekly-rule { color: rgba(255, 255, 255, .82); }
.weekly-last { padding: 10px 18px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .9); }
.weekly-last a { color: #ffd166; }
.weekly-prize-thumb { width: 160px; height: auto; border-radius: var(--radius-sm); display: block; margin-bottom: 6px; }

/* CITY QUEST+ côté jeu (ADR-037) : indice bonus, rejouer, événements réservés */
.premium-hint { background: rgba(255, 200, 61, .18); }
.premium-hint-locked { align-items: center; }
.premium-hint-locked a { font-weight: 700; }
.replay-done { border-color: var(--yellow); margin-bottom: 10px; }
.quest-replay .quest-head .badge { margin-bottom: 6px; }
.quest-won form, .quest-won > a { margin-top: 10px; display: block; }
.event-plus-lock { flex: 1 1 100%; justify-items: start; }
.premium-perks li { align-items: center; }