/* =====================================================================================
   DOVION — ACCUEIL GHIBLI CLAIR (2026-07-11)
   -------------------------------------------------------------------------------------
   Dernière pièce du passage au thème CLAIR & DOUX « Ghibli » : l'ÉCRAN D'ACCUEIL.
   Les popups (css/popups-ghibli.css), la boutique (css/shop-ghibli.css) et l'écran de
   mort sont déjà en parchemin clair ; il restait l'accueil en « verre marine sombre »
   (menu-refonte.css / glass-ui.css) — dernier îlot foncé. On le repeint en parchemin
   chaud, encre lisible, or miel + sauge, EXACTEMENT la même palette que la boutique et
   les popups → l'ensemble du jeu (hors partie en mer) forme un seul univers clair.

   Portée : SURFACES + COULEURS uniquement (aucun changement de layout / dimension) →
   la mise en page mobile finement réglée dans menu-refonte.css reste intacte.

   Chargé APRÈS shop-ghibli.css (dernière feuille) → à spécificité égale, la déclaration
   la plus tardive gagne ; `!important` repris là où menu-refonte.css / glass-ui.css /
   style.css en posent. AUCUN id/classe modifié (rendus JS intacts).

   On étend aussi ici les deux petites bulles de chrome encore sombres (invite « Activer
   le son ? » et bandeau de confidentialité) pour tenir la promesse « plus de sombre ».

   Sommaire :
     0. Jetons (repris de la boutique/popups)
     1. Fond map : voile clair et chaud
     2. Grands panneaux (colonnes gauche/droite) — parchemin translucide
     3. Cartes internes + textes (titres, notes, tags) — encre
     4. Réserve d'XP / Records — sauge & or
     5. Champs & sélecteurs (pseudo, équipe, serveur, modes) — crème
     6. Boutons du coin (Login / Shop / icônes) — clairs
     7. CTA « Prendre la mer » + coffre gratuit — corail doux
     8. Offre du jour / Coffre du jour / « Voir tout »
     9. Pied de page légal — pastille claire
    10. Invite son + bandeau confidentialité — parchemin
   ===================================================================================== */

/* ============================ 0. JETONS ============================ */
#menu {
  --ag-paper:        #f6ecd6;                     /* parchemin (panneaux) */
  --ag-paper-2:      #efe2c6;
  --ag-card:         #fffaf0;                     /* crème (cartes/champs) */
  --ag-card-warm:    #fdf3da;
  --ag-border:       rgba(146, 114, 66, 0.42);
  --ag-border-strong:rgba(122, 92, 48, 0.62);
  --ag-ink:          #392e1c;                     /* texte principal (≈10:1) */
  --ag-ink-soft:     #55462e;                     /* secondaire (≈7:1) */
  --ag-muted:        #6d5c40;                     /* discret (≈5:1) */
  --ag-gold-deep:    #8a5c10;                     /* or profond lisible */
  --ag-gold:         #e9b949;
  --ag-sage-deep:    #3f5c30;
  --ag-sage:         #7ea75f;
  --ag-danger:       #a3402c;
  --ag-shadow-panel: 0 20px 52px rgba(60, 44, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ag-shadow-card:  0 6px 18px rgba(96, 72, 34, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ============================ 1. FOND MAP — VOILE CLAIR ============================ */
/* La carte animée (mer + îles) doit rester LUMINEUSE derrière le parchemin : voile très
   léger, chaud, juste ce qu'il faut de tenue aux bords. */
#menu-map-veil {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(198, 226, 232, 0.24), rgba(232, 238, 216, 0.06) 44%, rgba(246, 236, 214, 0.30)) !important;
}

/* ============================ 2. GRANDS PANNEAUX ============================ */
/* Dalles de parchemin translucide : la mer respire au travers (flou doux) mais l'encre
   reste parfaitement lisible (fond crème assez opaque). */
#menu-main,
#menu-side {
  background:
    radial-gradient(130% 60% at 50% -8%, rgba(255, 232, 184, 0.42), rgba(255, 232, 184, 0) 58%),
    linear-gradient(180deg, rgba(252, 246, 233, 0.86), rgba(244, 232, 206, 0.90)) !important;
  border: 1px solid var(--ag-border-strong) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(14px) saturate(1.12) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) brightness(1.03) !important;
  box-shadow: var(--ag-shadow-panel) !important;
  color: var(--ag-ink);
}
/* Toute étiquette texte par défaut des panneaux passe en encre. */
#menu-main, #menu-side { color: var(--ag-ink); }
#menu-main .menu-teaser {
  color: var(--ag-ink-soft) !important;
  background: rgba(255, 250, 238, 0.72) !important;
  border: 1px solid var(--ag-border) !important;
}

/* ============================ 3. CARTES INTERNES + TEXTES ============================ */
#menu-side .menu-card,
#menu-main .menu-card {
  background: linear-gradient(180deg, var(--ag-card), #f6ecd4) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: var(--ag-shadow-card) !important;
  color: var(--ag-ink);
}
#menu-side .menu-card:hover,
#menu-main .menu-card:hover {
  border-color: var(--ag-border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 24px rgba(96, 72, 34, 0.18) !important;
}
#menu .menu-card h3 { color: var(--ag-ink) !important; }
#menu .menu-prog-sub { color: var(--ag-sage-deep) !important; }
#menu .reserve-note,
#menu .menu-note,
#menu .menu-reward-note { color: var(--ag-muted) !important; }
#menu .menu-reward-note b { color: var(--ag-ink-soft) !important; }
#menu .menu-chests-hint { color: var(--ag-gold-deep) !important; }
#menu .mission-tag { color: var(--ag-muted) !important; }
#menu #mp-status, #menu .mp-status { color: var(--ag-muted) !important; }

/* ============================ 4. RÉSERVE D'XP / RECORDS ============================ */
#menu .reserve-bal { color: var(--ag-sage-deep) !important; text-shadow: none !important; }
#menu .reserve-rank { color: var(--ag-gold-deep) !important; }
#menu .reserve-bar {
  background: rgba(122, 92, 48, 0.16) !important;
  border: 1px solid var(--ag-border) !important;
  box-shadow: inset 0 1px 2px rgba(96, 72, 34, 0.25) !important;
}
#menu .reserve-fill {
  background: linear-gradient(90deg, var(--ag-sage), var(--ag-gold)) !important;
  box-shadow: 0 0 10px rgba(233, 185, 73, 0.4) !important;
}
#menu .menu-records-row .menu-rec {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--ag-border) !important;
}
#menu .menu-records-row .menu-rec-v { color: var(--ag-gold-deep) !important; }
#menu .menu-records-row .menu-rec-l { color: var(--ag-muted) !important; }
#menu .reserve-rank.is-vip { color: var(--ag-gold-deep) !important; text-shadow: none !important; }

/* ============================ 5. CHAMPS & SÉLECTEURS ============================ */
/* Carte ÉQUIPE (conteneur du drapeau + pseudo + « Mon équipe ») : elle portait un fond
   marine-violet foncé (style.css #team-card) → parchemin doux. */
#menu #team-card {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.72), rgba(246, 236, 214, 0.78)) !important;
  border: 1px solid var(--ag-border) !important;
}

/* Pseudo, équipe, serveur, modes → champs crème, encre, trait brun (le verre marine de
   glass-ui.css devenait illisible sur fond clair). */
#menu .pseudo-flag-row #pseudo-edit,
#menu .flag-open,
#menu .srv-toggle,
#menu .mode-btn {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--ag-border-strong) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(96, 72, 34, 0.12) !important;
  color: var(--ag-ink) !important;
}
#menu .flag-open:hover,
#menu .srv-toggle:hover,
#menu .mode-btn:hover:not(.is-locked) {
  border-color: rgba(94, 128, 66, 0.7) !important;
}
/* Pseudo : texte encre, indices discrets. */
#menu #name-input { color: var(--ag-ink) !important; }
#menu #name-input::placeholder { color: var(--ag-muted) !important; opacity: 0.85; }
#menu #name-input:hover { background: rgba(233, 185, 73, 0.10) !important; }
#menu .pseudo-hint { color: var(--ag-muted) !important; }
#menu #name-input:focus + .pseudo-hint { color: var(--ag-ink-soft) !important; }
/* Équipe. */
#menu .flag-open-txt b { color: var(--ag-muted) !important; }
#menu #flag-open-name { color: var(--ag-ink) !important; }
#menu .flag-open-chev { color: var(--ag-muted) !important; }
/* Serveur. */
#menu .srv-lbl { color: var(--ag-muted) !important; }
#menu .srv-val { color: var(--ag-gold-deep) !important; }
#menu .srv-chev { color: var(--ag-muted) !important; }
#menu .srv-toggle.is-loading .srv-val { color: var(--ag-muted) !important; }
#menu .srv-menu {
  background: linear-gradient(180deg, #fdf6e6, #f3e6c8) !important;
  border: 1px solid var(--ag-border-strong) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 18px 44px rgba(30, 20, 8, 0.32) !important;
}
#menu .srv-opt { color: var(--ag-ink-soft) !important; }
#menu .srv-opt:hover:not([disabled]) { background: rgba(126, 167, 95, 0.16) !important; border-color: var(--ag-border) !important; }
#menu .srv-opt.is-selected { color: var(--ag-gold-deep) !important; border-color: rgba(201, 148, 44, 0.7) !important; }
#menu .srv-opt-tag { color: var(--ag-muted) !important; }
#menu .srv-opt.is-selected .srv-opt-tag { color: var(--ag-gold-deep) !important; }
#menu .srv-opt-name { color: var(--ag-ink) !important; }
#menu .srv-ping { color: var(--ag-muted) !important; }
#menu .srv-ping.is-good, #menu .srv-opt-tag.is-on { color: var(--ag-sage-deep) !important; }
#menu .srv-ping.is-mid { color: var(--ag-gold-deep) !important; }
#menu .srv-ping.is-bad, #menu .srv-opt-tag.is-full { color: var(--ag-danger) !important; }
#menu .srv-pop { color: var(--ag-ink-soft) !important; }
#menu .srv-opt.is-full .srv-opt-name { color: var(--ag-muted) !important; }
#menu .srv-opt.is-full .srv-pop { color: var(--ag-danger) !important; }
/* Modes de jeu (rangée masquée aujourd'hui, mais on la garde cohérente). */
#menu .mode-btn { color: var(--ag-ink) !important; }
#menu .mode-btn.selected {
  color: var(--ag-gold-deep) !important;
  background: linear-gradient(180deg, #fdf0c8, #f7e3a6) !important;
  border-color: rgba(201, 148, 44, 0.75) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 12px rgba(200, 148, 44, 0.22) !important;
}

/* ============================ 6. BOUTONS DU COIN ============================ */
/* Login / Shop / icônes (roue, son) : pastilles claires. Login = appel à l'action doux
   (ciel), Shop = or miel, icônes = crème. */
#menu-corner .menu-corner-btn {
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--ag-border-strong) !important;
  color: var(--ag-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(96, 72, 34, 0.16) !important;
}
#menu-corner .menu-corner-btn:hover { border-color: rgba(94, 128, 66, 0.7) !important; }
/* Login (invité) : ciel doux, texte encre foncée lisible. */
#menu-corner .menu-corner-btn.btn-login:not(.is-connected) {
  background: linear-gradient(180deg, #bfe1f5, #93c4e6) !important;
  border-color: rgba(90, 150, 190, 0.75) !important;
  color: #133449 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(110, 170, 210, 0.4) !important;
}
#menu-corner .menu-corner-btn.btn-login:not(.is-connected) .btn-login-ic { color: #133449 !important; }
#menu-corner .btn-login.is-connected { border-color: rgba(94, 128, 66, 0.7) !important; }
/* Shop : or miel. */
#menu-corner .menu-corner-btn.btn-shop {
  background: linear-gradient(180deg, #fbe6ae, #f0c76a) !important;
  border-color: rgba(170, 128, 48, 0.7) !important;
}
#menu-corner .menu-corner-btn.btn-shop .btn-shop-txt { color: var(--ag-cta-gold-ink, #3a2504) !important; }
#menu-corner .menu-corner-btn.btn-shop .btn-shop-ic {
  background: linear-gradient(180deg, #fff4d2, #f3d179) !important; color: #3a2504 !important;
}
/* Icônes (roue Options / son). */
#menu-corner .corner-icon { color: var(--ag-ink) !important; }
#menu-corner .corner-icon.muted { border-color: rgba(163, 64, 44, 0.6) !important; color: var(--ag-danger) !important; }
/* Puce « Nouveautés » à côté du Shop : déjà dorée dans menu-refonte → on la laisse. */

/* ============================ 7. CTA « PRENDRE LA MER » + COFFRE ============================ */
/* On garde un corail chaud (appel à l'action fort) mais ADOUCI, cohérent avec un rendu
   Ghibli pastel — plus de rouge dur. Le balayage de lumière (shine) de menu-refonte reste. */
#menu #btn-play {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 44%, transparent 60%),
    linear-gradient(150deg, #ffa678 0%, #f2764c 52%, #e06038 100%) !important;
  color: #fff6ee !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(170, 70, 30, 0.35),
    0 12px 28px rgba(226, 108, 64, 0.42),
    0 0 0 1px rgba(255, 190, 150, 0.5) !important;
}
/* Coffre gratuit à côté du CTA : cadre crème doré. */
#menu .menu-chest-badge {
  background: linear-gradient(180deg, #fffcf4, #f6e6bf) !important;
  border: 1px solid rgba(170, 128, 48, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(96, 72, 34, 0.18) !important;
}

/* Bouton « Installer le jeu » (mobile) : parchemin sobre. */
#menu #btn-install.btn-secondary {
  background: linear-gradient(180deg, #fffaf0, #efe3c6) !important;
  border: 1px solid var(--ag-border-strong) !important;
  color: var(--ag-ink) !important;
}

/* ============================ 8. OFFRE / COFFRE DU JOUR / « VOIR TOUT » ============================ */
/* Offre du jour : dorure claire (le scrim vert sombre de menu-refonte est éclairci). */
#menu #menu-offer-card.menu-offer {
  background: linear-gradient(135deg, rgba(240, 199, 106, 0.42), rgba(255, 250, 238, 0.94)) !important;
  border: 1px solid rgba(170, 128, 48, 0.55) !important;
  box-shadow: var(--ag-shadow-card) !important;
}
#menu .menu-offer-name { color: var(--ag-gold-deep) !important; }
#menu .menu-offer-sub { color: var(--ag-ink-soft) !important; }
/* Coffre du jour (dans Missions) : b lisible sur la dorure claire. */
#menu #menu-daily { color: var(--ag-ink) !important; }
#menu #menu-daily .menu-daily-txt b { color: var(--ag-gold-deep) !important; }
#menu #menu-daily .menu-daily-txt i { color: var(--ag-muted) !important; opacity: 1; }
/* En-têtes de sous-section Missions. */
#menu .menu-mq-h { color: var(--ag-ink) !important; }
/* Bouton « Voir tout ». */
#menu .quest-see-all {
  background: linear-gradient(180deg, #fffaf0, #f0e3c6) !important;
  border: 1px solid var(--ag-border-strong) !important;
  color: var(--ag-ink-soft) !important;
}
#menu .quest-see-all:hover { border-color: rgba(201, 148, 44, 0.75) !important; color: var(--ag-gold-deep) !important; }

/* ---- Missions du jour + rail des quêtes : rendus par ui.js en clair-sur-sombre → encre.
   (contenu de la carte Missions ; sans ça les lignes disparaissent sur le crème.) ---- */
#menu .menu-mission .mm-label { color: var(--ag-ink) !important; }
#menu .menu-mission .mm-prog { color: var(--ag-gold-deep) !important; }
#menu .menu-mission .mm-reward { color: var(--ag-sage-deep) !important; }
#menu .menu-mission .mm-reward b { color: var(--ag-gold-deep) !important; }
#menu .menu-mission.done,
#menu .menu-mission.done .mm-prog,
#menu .menu-mission.done .mm-reward,
#menu .menu-mission .mm-reward--claimed { color: var(--ag-sage-deep) !important; }
#menu .menu-mission.empty { color: var(--ag-muted) !important; }
#menu .menu-mission .mm-claim-ic { color: var(--ag-gold-deep) !important; }
#menu .menu-mission .mm-bar {
  background: rgba(122, 92, 48, 0.16) !important;
  border: 1px solid var(--ag-border) !important;
}
#menu .menu-mission .mm-fill { background: linear-gradient(90deg, var(--ag-sage), var(--ag-gold)) !important; }
#menu .menu-mission.done .mm-fill { background: linear-gradient(90deg, #5e8f4a, var(--ag-sage)) !important; }
/* Puces de quêtes (rail défilant). */
#menu .ach-chip {
  background: linear-gradient(180deg, #fffcf4, #f4e9cf) !important;
  border: 1px solid var(--ag-border) !important;
}
#menu .ach-chip-txt b { color: var(--ag-ink) !important; }
#menu .ach-chip-txt i { color: var(--ag-muted) !important; }
#menu .ach-chip.locked { opacity: 0.7 !important; }
#menu .ach-chip.locked .ach-chip-txt b { color: var(--ag-muted) !important; }
#menu .ach-chip.done {
  border-color: rgba(201, 148, 44, 0.55) !important;
  background: linear-gradient(180deg, #fdf3da, #f6e6bf) !important;
}
#menu .ach-chip.done .ach-chip-txt b { color: var(--ag-gold-deep) !important; }
#menu .ach-chip.done .ach-chip-txt i { color: var(--ag-sage-deep) !important; }

/* ============================ 9. PIED DE PAGE LÉGAL ============================ */
#menu .menu-legal-footer {
  background: rgba(255, 250, 238, 0.78) !important;
  border: 1px solid var(--ag-border) !important;
  box-shadow: 0 4px 12px rgba(96, 72, 34, 0.12);
}
#menu .menu-legal-footer .legal-link { color: var(--ag-ink-soft) !important; }
#menu .menu-legal-footer .legal-link:hover { color: var(--ag-gold-deep) !important; }
#menu .menu-legal-footer .legal-sep { color: var(--ag-muted) !important; }

/* ============================ 10. INVITE SON + CONFIDENTIALITÉ ============================ */
/* Deux bulles de chrome encore sombres → parchemin, pour tenir « plus de sombre ».
   Le fond foncé vit sur `.sp-inner` (son) et sur `#privacy-notice` lui-même (bandeau). */
#sound-prompt .sp-inner {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(244, 232, 204, 0.98)) !important;
  border: 1px solid rgba(170, 128, 48, 0.55) !important;
  color: #392e1c !important;
  box-shadow: 0 12px 30px rgba(60, 44, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#privacy-notice {
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(244, 232, 204, 0.98)) !important;
  border-top: 1px solid rgba(170, 128, 48, 0.55) !important;
  box-shadow: 0 -8px 24px rgba(60, 44, 20, 0.18) !important;
}
/* Invite « Activer le son ? ». */
#sound-prompt .sp-text b { color: #392e1c !important; }
#sound-prompt .sp-text span { color: #6d5c40 !important; }
#sound-prompt .sp-ic { color: #3a2504 !important; background: linear-gradient(180deg, #ffd764, #e8a92b) !important; }
#sound-prompt .sp-close { color: #6d5c40 !important; }
#sound-prompt .sp-close:hover {
  color: #392e1c !important; background: rgba(122, 92, 48, 0.12) !important; border-color: rgba(122, 92, 48, 0.5) !important;
}
#sound-prompt .sp-cta:hover .sp-text b { color: #8a5c10 !important; }
/* Bandeau confidentialité. */
#privacy-notice .pn-text { color: #55462e !important; }
#privacy-notice .pn-text b { color: #392e1c !important; }
#privacy-notice .pn-ic { color: #8a5c10 !important; }
#privacy-notice .pn-btn--ghost {
  color: #392e1c !important; background: linear-gradient(180deg, #fffaf0, #efe3c6) !important; border: 1px solid rgba(122, 92, 48, 0.62) !important;
}
#privacy-notice .pn-btn--ghost:hover { border-color: rgba(94, 128, 66, 0.75) !important; color: #392e1c !important; }
#privacy-notice .pn-btn--primary {
  color: #3a2504 !important; background: linear-gradient(180deg, #ffd764, #e8a92b) !important; border: 1px solid rgba(170, 128, 48, 0.7) !important;
}

/* ============================ ACCESSIBILITÉ MOUVEMENT ============================ */
@media (prefers-reduced-motion: reduce) {
  #menu #btn-play::before { animation: none !important; }
}

/* =====================================================================================
   TAPE À L'ŒIL — ACCUEIL « SCROLL-STOPPER » (2026-07-12)
   -------------------------------------------------------------------------------------
   Retour Simon : l'accueil parchemin (ci-dessus) est trop PLAT et délavé — « les couleurs
   ne vont pas », contraste faible, rien ne ressort, logo trop petit, espacement mort,
   menu serveur « horrible ». Objectif demandé : un visuel « tape à l'œil, style TikTok »
   qui accroche un nouveau joueur en une seconde.

   Principe (on GARDE la base claire cohérente avec le jeu Ghibli, mais on CRANTE l'énergie) :
     • HÉRO net : halo « coucher de soleil » chaud derrière le logo (fini le beige plat) ;
     • LOGO plus grand + lueur corail ;
     • hiérarchie DRAMATIQUE : le CTA « Prendre la mer » domine (plus grand, dégradé vif,
       halo qui pulse = « juice ») — tout le reste devient nettement secondaire ;
     • champs pseudo / équipe / serveur : contraste relevé, focus lumineux, lecture facile ;
     • MENU SERVEUR repensé : pastille nette + liste flottante crantée qui ne se noie plus
       dans le fond (élévation forte, z-index haut, lignes lisibles) ;
     • espacement resserré : on supprime le vide autour du porte-drapeau.

   Chargé en TOUTE FIN de la dernière feuille → gagne la cascade sur tout ce qui précède.
   Aucune structure JS touchée (mêmes id/classes). Tailles agressives cantonnées au
   desktop (min-width:941px) pour ne pas casser le « tout tient en un écran » mobile.
   ===================================================================================== */

/* ---- Jetons d'accent vifs (portée #menu) ---- */
#menu {
  --tk-coral:      #ff6a3d;
  --tk-coral-lite: #ff8f4a;
  --tk-coral-deep: #e03a17;
  --tk-gold:       #ffce54;
  --tk-gold-deep:  #e9a72b;
}

/* ---- 1. PANNEAU HÉRO : halo coucher de soleil (plus de beige plat) + relief net ---- */
#menu #menu-main {
  background:
    radial-gradient(115% 78% at 50% -12%, rgba(255, 196, 120, 0.62), rgba(255, 196, 120, 0) 60%),
    radial-gradient(90% 55% at 50% 2%, rgba(255, 132, 82, 0.26), rgba(255, 132, 82, 0) 58%),
    linear-gradient(180deg, #fff8ea 0%, #fbeecb 62%, #f6e4bf 100%) !important;
  border: 1.5px solid rgba(201, 148, 44, 0.62) !important;
  box-shadow:
    0 26px 64px rgba(60, 40, 16, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -40px 60px rgba(255, 176, 110, 0.10) !important;
}

/* ---- 2. LOGO plus grand + lueur corail (il « claque ») ---- */
/* Taille GATÉE par la hauteur d'écran : grand sur écran haut, contenu sur 720p (sinon le
   panneau déborde sous le bandeau cookies → boutons du bas coupés). */
@media (min-width: 941px) and (min-height: 861px) {
  #menu #menu-main .menu-logo-wrap { max-width: 500px; margin-bottom: 4px; }
  #menu #menu-main .menu-logo-img { max-width: 500px !important; }
}
@media (min-width: 941px) and (max-height: 860px) {
  #menu #menu-main .menu-logo-wrap { max-width: 400px; margin-bottom: 2px; }
  #menu #menu-main .menu-logo-img { max-width: 400px !important; }
}
#menu #menu-main .menu-logo-img {
  filter:
    drop-shadow(0 4px 10px rgba(226, 74, 31, 0.30))
    drop-shadow(0 1px 2px rgba(80, 30, 0, 0.25));
}

/* Accroche (teaser) : petite pastille punchy dorée au lieu d'un bloc fade. */
#menu #menu-main .menu-teaser {
  color: #5a3410 !important;
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.95), rgba(255, 222, 150, 0.9)) !important;
  border: 1px solid rgba(201, 148, 44, 0.6) !important;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(200, 140, 40, 0.18);
}

/* ---- 3. Espacement resserré : on tue le vide autour du porte-drapeau ----
   Couleur (fond/bordure de la carte ÉQUIPE) : sûre partout. Les réglages qui touchent la
   HAUTEUR (gap, padding, taille du porte-drapeau) sont CANTONNÉS AU DESKTOP : sur mobile, le
   budget « tout tient en un écran » est finement réglé dans menu-refonte.css (paliers de
   hauteur + body.vtouch) — on n'y touche pas. */
#menu #team-card {
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.9), rgba(248, 238, 214, 0.92)) !important;
  border: 1.5px solid rgba(201, 148, 44, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
@media (min-width: 941px) {
  #menu #menu-main { gap: 10px; }
  #menu #team-card { gap: 12px !important; padding: 12px 14px !important; }
  #menu #team-preview { flex: 0 0 118px !important; }        /* colonne drapeau ajustée (moins de vide) */
  #menu .flag-stand { width: 112px !important; height: 108px !important; margin: 0 auto !important; }
  #menu .flag-stand .fs-pole { height: 96px !important; }
  #menu .flag-stand .fs-flag { width: 58px !important; height: 38px !important; }
}
@media (min-width: 941px) and (max-height: 800px) { #menu #menu-main { gap: 8px; } }

/* ---- 4. CHAMP PSEUDO : plus grand, invitant, focus lumineux ---- */
#menu .pseudo-flag-row #pseudo-edit {
  border: 1.5px solid rgba(201, 148, 44, 0.5) !important;
  background: linear-gradient(180deg, #fffdf7, #f7edd6) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#menu .pseudo-flag-row #pseudo-edit:focus-within {
  border-color: var(--tk-coral) !important;
  box-shadow: 0 0 0 3px rgba(255, 120, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
#menu #name-input { font-weight: 800 !important; }
@media (min-width: 941px) { #menu #name-input { font-size: 17px !important; } } /* mobile garde 15px (budget hauteur) */

/* Bouton « Mon équipe » : pastille nette, drapeau mis en valeur. */
#menu .flag-open {
  border: 1.5px solid rgba(201, 148, 44, 0.5) !important;
  background: linear-gradient(180deg, #fffdf7, #f7edd6) !important;
}
#menu .flag-open:hover { border-color: var(--tk-gold-deep) !important; }
#menu #flag-open-name { font-weight: 800 !important; }

/* ---- 5. CTA « PRENDRE LA MER » : la vedette. Plus grand, vif, halo qui pulse. ---- */
@media (min-width: 941px) {
  #menu .play-row #btn-play {
    padding: 20px 40px !important; font-size: 23px !important; letter-spacing: 3px !important;
    border-radius: 15px !important;
  }
}
#menu #btn-play {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 44%, transparent 60%),
    linear-gradient(150deg, #ff8f4a 0%, #f2542a 52%, #e03a17 100%) !important;
  color: #fff6ee !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(150, 40, 10, 0.4),
    0 14px 34px rgba(226, 74, 31, 0.52),
    0 0 0 0 rgba(255, 140, 80, 0.55) !important;
  animation: tkPlayPulse 2.1s ease-in-out infinite;
}
#menu #btn-play:hover { filter: brightness(1.07) saturate(1.06); transform: translateY(-2px); }
/* BATTLE ROYALE — 2e CTA de l'accueil (sous « Prendre la mer ») : dégradé cramoisi/violet « arène ». */
#menu #btn-royale {
  display: block; width: 100%; margin: 12px 0 0; cursor: pointer; text-align: center;
  padding: 13px 26px; font-size: 18px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.15;
  color: #fdeaf1; border: none; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05) 46%, transparent 62%),
    linear-gradient(150deg, #c23c72 0%, #7b2ea0 55%, #4a2a8a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -3px 6px rgba(60,20,80,0.45), 0 12px 28px rgba(90,40,130,0.5);
  transition: transform .12s ease, filter .12s ease;
}
#menu #btn-royale small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .3px; opacity: .82; }
#menu #btn-royale .br-ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
#menu #btn-royale:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }
/* BATTLE ROYALE réservée au MODE CHEAT (demande Evan 2026-07-15) : masquée pour le public. La règle
   [hidden] est plus spécifique que « #menu #btn-royale » ci-dessus → elle l'emporte sur display:block. */
#menu #btn-royale[hidden] { display: none !important; }
/* BLOQUÉ « Prochainement » (Simon 2026-07-15) : bouton VISIBLE mais désactivé — désaturé, non cliquable,
   badge cadenas. UI.refreshRoyaleEntry() retire .is-soon en mode cheat → le bouton redevient actif. */
#menu #btn-royale.is-soon {
  filter: grayscale(0.7) brightness(0.82) saturate(0.55);
  cursor: not-allowed; opacity: 0.9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px rgba(50,30,70,0.35);
}
#menu #btn-royale.is-soon:hover { transform: none; filter: grayscale(0.6) brightness(0.86) saturate(0.6); }
#menu #btn-royale .br-soon {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; vertical-align: middle;
  color: #ffe9c2; background: rgba(0,0,0,0.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
/* quand le mode est actif (cheat) : on cache le badge « Prochainement ». */
#menu #btn-royale:not(.is-soon) .br-soon { display: none; }
/* BEDWARS — 3e CTA d'accueil : même géométrie que Battle Royale, teinte sarcelle/azur « 4 équipes ».
   Même régime BLOQUÉ/ACTIF (.is-soon + badge) piloté par UI.refreshBedwarsEntry(). */
#menu #btn-bedwars {
  display: block; width: 100%; margin: 12px 0 0; cursor: pointer; text-align: center;
  padding: 13px 26px; font-size: 18px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.15;
  color: #e8fbff; border: none; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05) 46%, transparent 62%),
    linear-gradient(150deg, #1f9bb3 0%, #2f6ea0 55%, #274a8a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -3px 6px rgba(20,50,80,0.45), 0 12px 28px rgba(40,90,130,0.5);
  transition: transform .12s ease, filter .12s ease;
}
#menu #btn-bedwars small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .3px; opacity: .82; }
#menu #btn-bedwars .bw-ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
#menu #btn-bedwars:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }
#menu #btn-bedwars.is-soon {
  filter: grayscale(0.7) brightness(0.82) saturate(0.55);
  cursor: not-allowed; opacity: 0.9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 16px rgba(30,50,70,0.35);
}
#menu #btn-bedwars.is-soon:hover { transform: none; filter: grayscale(0.6) brightness(0.86) saturate(0.6); }
#menu #btn-bedwars .br-soon {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; vertical-align: middle;
  color: #ffe9c2; background: rgba(0,0,0,0.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
#menu #btn-bedwars:not(.is-soon) .br-soon { display: none; }
/* PLUS PETITS + non accessibles (Simon 2026-07-15) : les TEASERS de modes (état .is-soon) deviennent
   des boutons COMPACTS « Bientôt disponible ». SCOPÉ à .is-soon (2026-07-16) : un mode ACTIVÉ en mode
   dev/cheat reprend sa taille pleine de CTA ; les deux teasers publics restent compacts. */
#menu #btn-royale.is-soon, #menu #btn-bedwars.is-soon {
  width: auto; max-width: 260px; margin: 8px auto 0; padding: 6px 15px;
  font-size: 13px; font-weight: 700; letter-spacing: .6px; border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 5px 14px rgba(60,40,90,0.38);
}
#menu #btn-royale.is-soon small, #menu #btn-bedwars.is-soon small { display: none; }
/* bloqué = disabled (hors tabulation) : garde le look « is-soon » et le curseur bloqué. */
#menu #btn-royale:disabled, #menu #btn-bedwars:disabled { cursor: not-allowed; }
#menu #btn-royale.is-soon .br-ic, #menu #btn-bedwars.is-soon .bw-ic { font-size: 14px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
#menu #btn-royale.is-soon .br-soon, #menu #btn-bedwars.is-soon .br-soon { font-size: 10px; padding: 1px 7px; margin-left: 6px; }
/* SANDBOX — 3e CTA réservé au MODE TEST (banc d'essai des bateaux). Reprend la géométrie du bouton
   royale mais dans une teinte teal/émeraude « labo » pour le distinguer. Révélé par refreshSandboxEntry(). */
#menu #btn-sandbox {
  display: block; width: 100%; margin: 12px 0 0; cursor: pointer; text-align: center;
  padding: 13px 26px; font-size: 18px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.15;
  color: #eafff8; border: none; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05) 46%, transparent 62%),
    linear-gradient(150deg, #1f9f8c 0%, #1c7fa0 55%, #235f8a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -3px 6px rgba(20,70,80,0.45), 0 12px 28px rgba(30,120,120,0.5);
  transition: transform .12s ease, filter .12s ease;
}
#menu #btn-sandbox small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .3px; opacity: .82; }
#menu #btn-sandbox .br-ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
#menu #btn-sandbox:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }
#menu #btn-sandbox[hidden] { display: none !important; }
/* halo qui « respire » : anneau corail qui s'étend puis disparaît (effet TikTok/juice). */
@keyframes tkPlayPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(150, 40, 10, 0.4),
      0 14px 34px rgba(226, 74, 31, 0.52), 0 0 0 0 rgba(255, 140, 80, 0.5);
  }
  55% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(150, 40, 10, 0.4),
      0 16px 40px rgba(226, 74, 31, 0.6), 0 0 0 12px rgba(255, 140, 80, 0);
  }
}
/* Coffre gratuit à côté : accent doré plus vif. */
#menu .menu-chest-badge {
  border: 1.5px solid var(--tk-gold-deep) !important;
  background: linear-gradient(180deg, #fffdf5, #f7e4b4) !important;
}

/* ---- 6. MENU SERVEUR repensé : pastille nette + liste flottante crantée ---- */
/* Pastille : lecture claire, point « live » vif qui pulse (réseau vivant). */
#menu .srv-toggle {
  border: 1.5px solid rgba(201, 148, 44, 0.5) !important;
  background: linear-gradient(180deg, #fffdf7, #f5ead2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(96, 72, 34, 0.12) !important;
}
#menu .srv-toggle:hover { border-color: var(--tk-gold-deep) !important; }
#menu .srv-ic {
  background: #34c96a !important;
  box-shadow: 0 0 0 3px rgba(52, 201, 106, 0.18), 0 0 8px rgba(52, 201, 106, 0.7) !important;
  animation: tkLive 1.8s ease-in-out infinite;
}
@keyframes tkLive { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.82); opacity: 0.75; } }
#menu .srv-lbl { color: #6d5c40 !important; font-weight: 800 !important; }
#menu .srv-val { color: #8a5c10 !important; font-weight: 900 !important; }

/* Liste flottante : élévation FORTE + z-index haut → elle flotte NETTEMENT au-dessus du
   reste (fini l'impression de menu écrasé/noyé sur les boutons du bas).
   Elle s'ouvre VERS LE HAUT : la pastille serveur est au milieu du panneau, donc dérouler
   vers le BAS enterrait le CTA « Prendre la mer » et les boutons Login/Shop (le « horrible »
   signalé). Vers le haut, elle recouvre la carte ÉQUIPE (passive) et laisse l'action visible. */
#menu #server-select { z-index: 40; }
#menu .srv-menu {
  z-index: 60 !important;
  top: auto !important; bottom: calc(100% + 6px) !important;
  padding: 7px !important; gap: 3px !important;
  background: linear-gradient(180deg, #fffaf0, #f4e7c8) !important;
  border: 1.5px solid rgba(122, 92, 48, 0.6) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 54px rgba(30, 20, 8, 0.42), 0 4px 12px rgba(30, 20, 8, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
#menu .srv-opt {
  padding: 9px 11px !important; border-radius: 10px !important;
  border: 1.5px solid transparent !important;
}
#menu .srv-opt:hover:not([disabled]) {
  background: rgba(126, 167, 95, 0.16) !important; border-color: rgba(126, 167, 95, 0.5) !important;
}
#menu .srv-opt.is-selected {
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.9), rgba(255, 224, 150, 0.85)) !important;
  border-color: rgba(201, 148, 44, 0.8) !important;
}
#menu .srv-opt-name { font-weight: 900 !important; }
#menu .srv-opt-tag { font-weight: 800 !important; }
#menu .srv-opt.is-full { opacity: 0.9 !important; }

/* ---- 7. « Comment jouer » : discret (aide, pas encombrant) — moins d'« info » perçue ---- */
#menu .menu-howto { gap: 8px !important; margin-top: 8px !important; opacity: 0.95; }
#menu .menu-howto-step {
  background: rgba(255, 250, 238, 0.6) !important;
  border: 1px solid rgba(122, 92, 48, 0.28) !important;
  color: #55462e !important; font-weight: 700 !important;
}

/* ---- 8. Boutons du coin : Login plus « appel à l'action » (ciel vif), Shop garde son or ---- */
#menu-corner .menu-corner-btn.btn-login:not(.is-connected) {
  background: linear-gradient(180deg, #7ec6f0, #4aa0dc) !important;
  border-color: rgba(60, 130, 180, 0.8) !important;
  color: #08283c !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 16px rgba(74, 160, 220, 0.5) !important;
}

/* ---- Accessibilité : coupe les animations « juice » si mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  #menu #btn-play { animation: none !important; }
  #menu .srv-ic { animation: none !important; }
}