/* MEEZ ROYALE - regles qui valent AUSSI sur PC (reste de l'ancien touch.css) : zones sures (variables), mode leger (body.lite), fenetres basses en paysage (menu / boutique / fenetres
   d'accueil compactes), lignes de reglages reservees au tactile (.only-touch). Tout ce qui est propre au telephone est dans public/mobile/ (charge seulement sur telephone). */
/* MEEZ ROYALE - telephone : commandes tactiles, HUD compact en paysage, avertissement « tourne ton telephone », mode leger, menu en paysage.
   Les commandes et le HUD compact ne s'appliquent qu'avec body.touch (jamais au clavier / souris) ; le menu paysage suit la taille de l'ecran. */
:root { --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

html, body { overscroll-behavior: none; }

/* ---------------------------------------------------------------- mode leger : moins d'effets, image allegee */
body.lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

body.lite #embers { display: none; }

body.lite .btn-play .shine, body.lite .logo-b, body.lite .pulse-dot, body.lite .char-stage::before, body.lite .char-stage::after, body.lite .perso-canvas-wrap::before,
body.lite .perso-canvas-wrap::after, body.lite .prime-card-in::before, body.lite .skin-aura, body.lite .crate-halo, body.lite .prime-fab, body.lite .crate-hero .crate-svg,
body.lite .crate-hero .crate-buy .btn, body.lite .buy-btn.big, body.lite .timer.urgent, body.lite .cs-bg::after { animation: none; }

body.lite .tilt, body.lite .tilt.tilting { transform: none; transition: none; }

body.lite .tilt::after { display: none; }

body.lite .modal-overlay, body.lite #result { animation: none; }

body.lite #result { background: rgba(6, 5, 4, .74); }

/* ---------------------------------------------------------------- menu en paysage sur telephone (ecran bas : ~375 px de haut) */
@media (orientation: landscape) and (max-height: 520px) {
  #topnav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; padding: calc(4px + var(--sat)) calc(10px + var(--sar)) 4px calc(10px + var(--sal)); }
  #navLeft { order: 0; gap: 6px; }
  #navLinks { order: 0; width: auto; flex: 0 1 auto; justify-content: center; overflow: visible; padding: 0; gap: 1px; }
  #navRight { order: 0; gap: 5px; }
  .lang-globe { display: none; }
  #langSwitch { padding-left: 6px; }
  #navAccount .account-info { display: none; }
  .avatar-dot { width: 32px; height: 32px; }
  .navlink { padding: 6px 9px; gap: 6px; font-size: 12px; }
  .navlink svg { width: 16px; height: 16px; }
  #navRight .icon-btn { width: 32px; height: 32px; }
  .curr { padding: 4px 8px 4px 6px; font-size: 12px; }
  #menuStage { padding: 8px calc(12px + var(--sar)) 22px calc(12px + var(--sal)); }
  /* accueil : scene resserree (titre, personnage, JOUER, barre, pied : une seule colonne) */
  .hero-stage { gap: 6px; padding: 2px 4px 6px; }
  #menuHero .hero-m { width: 28px; height: 28px; }
  #menuHero .logo { font-size: 28px; letter-spacing: 2px; }
  #menuHero .tagline { display: none; }
  #menuHero .prime-ribbon { margin: 2px 0 0; font-size: 10.5px; }
  .char-showcase { --cv-h: 84px; max-width: 380px; }
  .char-showcase .char-info { padding: 3px 12px 4px; }
  .char-showcase .char-ring { width: 30px; height: 30px; }
  .play-zone { margin-top: 2px; max-width: 360px; }
  #playGuest .field { height: 36px; font-size: 14px; border-radius: 11px; }
  #menuHero .play-wrap { margin-top: 6px; gap: 6px; }
  #menuHero .btn-play { height: 50px; border-radius: 15px; }
  #menuHero .btn-play-tuto { height: 54px; }
  .play-face { font-size: 20px; gap: 10px; }
  .status { margin-top: 2px; font-size: 11.5px; }
  .hb-seg { padding: 8px 8px; font-size: 12.5px; }
  .home-foot { padding-top: 4px; }
  .hf-btn { padding: 5px 11px; font-size: 12px; }
  .hf-ic { width: 30px; height: 30px; }
  /* panneaux : marges et titres reduits, pas de sous-titre */
  .extra-pane { margin-top: 0; padding: 10px 14px 14px; border-radius: 16px; max-width: none; min-height: 0; }
  .pane-head { margin-bottom: 8px; padding-bottom: 8px; }
  .pane-title { font-size: 19px; }
  .pane-sub { display: none; }
  .tabs { margin-bottom: 8px; padding: 3px; }
  .tab { padding: 7px 10px; font-size: 12px; min-width: 70px; }
  #extraBoutique .pane-head, #extraPrime .pane-head { display: none; }
  /* l'onglet actif dit deja ou on est : on gagne 40 px de hauteur */
  .shop-crates { gap: 8px; }
  .crate-banner { padding: 6px 12px; gap: 10px; }
  .crate-banner .crate-ico { font-size: 24px; }
  .crate-hero { grid-template-columns: 138px 1fr; gap: 6px 16px; padding: 10px 16px; border-radius: 18px; }
  .crate-hero-art { width: 122px; }
  .crate-hero .crate-name { font-size: 20px; }
  .crate-pitch { font-size: 11.5px; }
  .crate-holds, .ladder, .tag-pill, .crate-pitch { display: none; }
  .crate-banner .crate-info .muted { display: none; }
  .crate-banner { padding: 5px 12px; }
  .crate-hero .link-btn { position: absolute; top: 6px; right: 12px; margin: 0; }
  .crate-hero-body { gap: 6px; }
  .pity { gap: 4px; }
  .crate-hero .crate-buy .btn { min-width: 116px; padding: 8px 16px; font-size: 15px; }
  .shop-skins-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .shop-skin-card .swatch { width: 70px; height: 70px; }
  .shop-skin-card .cname { font-size: 12.5px; margin-bottom: 5px; }
  .shop-skin-card .buy-btn { padding: 6px 8px; font-size: 13px; }
  .shop-jump { padding: 3px; margin-bottom: 8px; border-radius: 12px; }
  .jump { padding: 6px 11px; gap: 5px; font-size: 12px; }
  .shop-sec { margin-bottom: 18px; }
  .sec-sub { display: none; }
  .sec-head { margin-bottom: 6px; }
  .offer-hero { grid-template-columns: 150px 1fr; gap: 6px 16px; padding: 10px 16px 10px 10px; border-radius: 18px; text-align: left; }
  .oh-art { height: 130px; }
  .oh-body { align-items: flex-start; gap: 6px; }
  .oh-list { justify-content: flex-start; }
  .oh-name { font-size: 20px; }
  .oh-price s { font-size: 14px; }
  .oh-save { font-size: 12px; }
  .offer-hero .of-off { top: 8px; padding: 4px 12px 4px 9px; font-size: 11px; }
  .offer-hero .buy-col, .crate-hero .buy-col { align-items: flex-start; }
  .buy-btn.big { min-width: 130px; padding: 9px 18px; font-size: 15px; }
  .shop-prime-in { grid-template-columns: 1fr auto; padding: 12px 16px; gap: 8px 18px; }
  .shop-prime-in .sp-side { min-width: 200px; }
  .shop-prime-in .prime-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 6px 0 2px; }
  .shop-prime-in .prime-title { font-size: 20px; }
  .shop-prime-in .prime-price b { font-size: 22px; }
  .shop-prime-in .prime-buy { padding: 9px 14px; font-size: 13px; }
  .pv-stage { height: 124px; margin: 0 0 4px; }
  .pv-price b { font-size: 22px; }
  .popup-panel.pv .popup-actions { margin-top: 10px; }
  .popup-panel.pv .popup-title { font-size: 18px; }
  .popup-panel.pv .popup-icon { font-size: 28px; margin-bottom: 2px; }
  .popup-actions .cta { min-width: 150px; padding: 10px 20px; font-size: 14px; }
  .prime-fab { right: calc(10px + var(--sar)); bottom: calc(8px + var(--sab)); padding: 6px 14px 6px 10px; left: auto; justify-content: flex-start; gap: 8px; }
  .prime-fab .pf-txt small { display: none; }
  .pf-txt b { font-size: 13px; }
  .pf-crown { width: 18px; height: 18px; }
  #extraPrime .prime-card-in { padding: 14px 16px; }
  #extraPrime .prime-perks { gap: 6px 20px; margin: 10px 0 6px; }
  #extraPrime .prime-perks li { font-size: 12.5px; }
  #extraPrime .prime-buy { padding: 10px 16px; font-size: 14px; }
  .perso-grid { grid-template-columns: 200px 1fr; gap: 12px; }
  .perso-canvas-wrap { height: 150px; }
  #persoChar { height: 150px; width: auto; }
  .perso-stage { padding: 8px 8px 10px; }
  .perso-skins { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .perso-skin { padding: 6px 4px 6px; gap: 2px; border-radius: 12px; }
  .perso-skin .swatch { width: 54px; height: 54px; }
  .perso-skin small { min-height: 0; }
  .perso-actions { margin-top: 8px; }
  .perso-soon { margin-top: 8px; padding: 6px 10px; }
  .modal-panel { max-height: calc(var(--h100) - 16px); overflow-y: auto; }
  .modal-overlay { padding: 8px; }
  /* ecran d'ouverture de la caisse : tout tient en 375 px */
  .crate-stage { padding: 6px 12px 8px; }
  .cs-shaker { gap: 4px; }
  .cs-later { top: 8px; right: calc(10px + var(--sar)); padding: 6px 12px; }
  .cs-sound { top: 8px; left: calc(10px + var(--sal)); }
  .cs-kind { font-size: 10px; letter-spacing: 2px; }
  .cs-levelname { font-size: 26px; }
  .cs-boost { margin-top: 2px; padding: 3px 12px; font-size: 10px; }
  .cs-ladder li span { display: none; }
  .cs-ladder li { width: clamp(38px, 8vw, 58px); }
  .cs-crate { width: min(26vw, 34vh, 190px); }
  .cs-info { min-height: 0; gap: 3px; }
  .cs-pips { height: 16px; gap: 8px; }
  .pip { width: 14px; height: 14px; }
  .cs-hint { font-size: 15px; }
  .cs-chance { font-size: 11px; }
  .cs-rewards { gap: 8px; margin: 6px 0; }
  .rw { width: 116px; padding: 8px 6px; gap: 3px; border-radius: 14px; }
  .rw-art { width: 66px; height: 66px; }
  .rw b { font-size: 12px; }
  .rw-cur .rw-ico { font-size: 30px; }
  .rw-cur b { font-size: 19px; }
  .cs-result-title { font-size: 15px; }
  .cs-done { padding: 8px 24px; font-size: 14px; margin-top: 2px; }
}

/* aide : commandes clavier sur PC, commandes tactiles sur telephone */
.only-touch { display: none; }

/* offres de la semaine sur telephone en paysage */
@media (orientation: landscape) and (max-height: 520px) {
  .sec-head h3 { font-size: 15px; }
  .offers-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .offer-card { padding: 26px 6px 8px; gap: 4px; border-radius: 14px; }
  .of-body { min-height: 0; }
  .of-art { width: 58px; height: 58px; }
  .of-mini { width: 44px; height: 44px; }
  .of-big { font-size: 34px; } .of-big b { font-size: 17px; }
  .buy-btn { padding: 6px 12px; font-size: 13px; min-width: 96px; }
  .of-kind { font-size: 10px; }
}

/* fenetres de l'accueil sur telephone en paysage : peu de hauteur, on garde le maximum de place pour le contenu */
@media (orientation: landscape) and (max-height: 520px) {
  .hm-panel { padding: 12px 14px 14px; max-height: calc(var(--h100) - 12px); }
  .hm-head { margin-bottom: 8px; }
  .hm-panel .dl-m { padding: 6px 10px; gap: 4px; }
  .hm-panel .dl-m-text { font-size: 13px; }
  .hm-panel #dailyBody { gap: 10px; }
}

/* ---------------------------------------------------------------- reglages tactiles (zoom, tir, aide, gaucher...) : seulement sur telephone */
.set-row.only-touch { display: none; }

/* les commandes tactiles (#touchUi) et l'avertissement « tourne ton telephone » (#rotateWarn) n'existent que sur telephone : leurs regles sont dans mobile/ ; ici seulement ce qui les
   garde CACHES sur PC (la feuille mobile n'y est pas chargee). */
#touchUi { display: none; }

#rotateWarn { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(34,27,20,.97), rgba(8,6,5,.99)); }

#rotateWarn.hidden { display: none; }

/* plein ecran (mobile/display.js) : le bouton ⛶ du HUD et les lignes des Reglages n'existent que sur telephone, et seulement si le navigateur sait faire le plein ecran */
#hudFs { display: none; }

.only-fs, .only-ios { display: none; }