/* =========================================================================
   NUAGE (connexion Google) — commun
   ========================================================================= */
.cloud-box { text-align: center; min-height: 20px; max-width: 420px; }
.cloud-box p { color: #e8dcc0; text-shadow: 0 1px 3px #000; }
.slots-cloud { font-size: 14px; color: #e8dcc0; text-shadow: 0 1px 3px #000; text-align: center; max-width: 90vw; }
#cloud-ind { font-size: 11px; margin-left: 4px; }
#touch { display: none; }

/* =========================================================================
   INTERFACE TACTILE — tout est limité à body.touch (la version ordinateur
   n'est jamais affectée)
   ========================================================================= */
body.touch { -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body.touch canvas#world { touch-action: none; }
body.touch button, body.touch .slotbtn, body.touch .pcard, body.touch .qopt { touch-action: manipulation; }
body.touch #touch { display: block; position: absolute; inset: 0; pointer-events: none !important; }
body.touch #touch > * { pointer-events: auto; }
body.touch #tooltip, body.touch #bottom .bar-row { display: none !important; }

/* ---------- Barre d'XP : fine, tout en bas ---------- */
body.touch #bottom { left: 0; right: 0; transform: none; bottom: 0; padding: 0 max(10px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
body.touch #xpbar { width: 100%; height: 9px; box-shadow: 0 0 0 1px var(--gold3); }
body.touch #xpbar span { font-size: 8px; line-height: 9px; }
body.touch #xpbar::after { display: none; }

/* ---------- Cadre du joueur (haut gauche) ---------- */
body.touch .uframe { top: max(6px, env(safe-area-inset-top)); padding: 3px 8px 3px 3px; gap: 5px; border-width: 1px; }
body.touch #pframe { left: max(8px, env(safe-area-inset-left)); width: 196px; }
body.touch .portrait { width: 42px; height: 42px; border-width: 2px; }
body.touch .portrait canvas { width: 38px; height: 38px; }
body.touch .portrait .lvl { width: 18px; height: 18px; font-size: 9px; bottom: -4px; left: -4px; border-width: 1px; }
body.touch .uname { font-size: 11px; }
body.touch .bar { height: 11px; } body.touch .bar span { font-size: 8px; line-height: 11px; }
body.touch .bar.mitote { height: 8px; } body.touch .bar.mitote span { font-size: 7px; line-height: 8px; }

/* ---------- Cadre de la cible : centré en haut (paysage) ---------- */
body.touch #tframe { left: calc(max(8px, env(safe-area-inset-left)) + 204px); transform: none; width: min(240px, calc(100vw - 470px)); min-width: 150px; padding: 3px 3px 3px 8px; }
body.touch #tframe .portrait.small { width: 32px; height: 32px; }
body.touch .ticon { font-size: 16px; }
body.touch .tinfo { font-size: 9px; gap: 5px; }

/* ---------- Effets actifs : sous le cadre du joueur ---------- */
body.touch #buffs { top: calc(max(6px, env(safe-area-inset-top)) + 56px); left: max(10px, env(safe-area-inset-left)); max-width: 196px; gap: 4px; }
body.touch .buff { width: 24px; height: 24px; font-size: 14px; }
body.touch .buff .bt { font-size: 7px; bottom: -10px; }

/* ---------- Minicarte compacte (haut droite) ---------- */
body.touch #minimap { top: max(4px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 96px; }
body.touch #mm-zone { font-size: 9px; margin-bottom: 2px; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch .mm-ring { width: 90px; height: 90px; padding: 3px; border-width: 2px; box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0,0,0,.6); }
body.touch #mm { width: 80px; height: 80px; }
body.touch #mm-clock { font-size: 9px; padding: 0 6px; margin-top: 3px; }

/* ---------- Boutons du haut : quêtes, grimoire, menu ---------- */
body.touch .ttop { position: absolute; top: max(10px, env(safe-area-inset-top)); right: calc(max(8px, env(safe-area-inset-right)) + 106px); display: flex; gap: 6px; }
body.touch .tact { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold3); background: radial-gradient(circle at 40% 35%, #3a2a18, #120c06); font-size: 19px; color: var(--gold); box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 0; }
body.touch .tact:active { filter: brightness(1.4); }
body.touch .tact b { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: #ffd200; color: #2a1a00; font-size: 10px; line-height: 16px; font-family: var(--title); }
body.touch .tact b:empty { display: none; }

/* ---------- Suivi des quêtes : menu déroulant (📜) ---------- */
body.touch #tracker { display: none; top: calc(max(10px, env(safe-area-inset-top)) + 48px); right: calc(max(8px, env(safe-area-inset-right)) + 106px); width: min(260px, 60vw); max-height: 45vh; overflow-y: auto; padding: 10px 12px; background: linear-gradient(180deg, rgba(34,26,18,.97), rgba(14,10,7,.97)); border: 1px solid var(--gold3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.8); z-index: 25; }
body.touch #tracker.open { display: block; }
body.touch #tracker .th { font-size: 12px; } body.touch .tq .tt { font-size: 12px; } body.touch .tq .to { font-size: 12px; } body.touch .tdaily { font-size: 12px; }

/* ---------- Discussion : 3 dernières lignes, discrètes ---------- */
body.touch #chat { left: 50%; transform: translateX(-50%); top: calc(max(6px, env(safe-area-inset-top)) + 64px); bottom: auto; width: min(44vw, 380px); height: auto; max-height: 64px; padding: 0; background: none; pointer-events: none !important; text-align: center; overflow: hidden; }
body.touch #chat-log div { font-size: 11px; line-height: 1.25; }
body.touch #chat-log div:not(:nth-last-child(-n+3)) { display: none; }
body.touch #chat-log div:nth-last-child(3) { opacity: .55; }
body.touch #chat-log div:nth-last-child(2) { opacity: .8; }

/* ---------- Joystick ---------- */
body.touch #tstick { position: fixed; border-radius: 50%; border: 2px solid rgba(255,220,140,.28); background: radial-gradient(rgba(40,30,20,.28), rgba(10,8,6,.08)); pointer-events: none !important; opacity: .55; transition: opacity .2s; z-index: 11; }
body.touch #tstick.active { opacity: 1; border-color: rgba(255,220,140,.55); transition: none; }
body.touch #tknob { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe9a0, #c89a30 60%, #6a4a10); box-shadow: 0 0 14px rgba(255,210,120,.5); }

/* ---------- Grappe de sorts (bas droite) ---------- */
body.touch #tcl { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: calc(max(4px, env(safe-area-inset-bottom)) + 16px); pointer-events: none !important; }
body.touch #tcl > * { position: absolute; pointer-events: auto; }
body.touch .tbtn { border-radius: 50%; border-width: 2px; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,.6), inset 0 0 10px rgba(0,0,0,.8); }
body.touch .tbtn .cd { border-radius: 50%; }
body.touch .tbtn .ic { line-height: 1; filter: drop-shadow(0 2px 2px #000); }
body.touch .tbtn.tmain { border-width: 3px; border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255,210,120,.35), inset 0 0 14px rgba(0,0,0,.8); }
body.touch .tbtn .cdt { font-size: 15px; }
body.touch .tbtn .lk { left: 0; right: 0; bottom: 18%; text-align: center; font-size: 9px; }
body.touch .tbtn.locked .ic { opacity: .4; }
body.touch .tbtn.flash { animation: sflash .25s; }

/* ---------- Bouton contextuel (parler / autel) ---------- */
body.touch #t-ctx { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(4px, env(safe-area-inset-bottom)) + 24px); padding: 10px 20px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--title); font-weight: 700; font-size: 14px; color: #fff6d0; background: linear-gradient(180deg, #c89a30, #6a4a10); border: 2px solid #ffe08a; border-radius: 24px; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255,210,120,.5); animation: mpulse .9s infinite alternate; }

/* ---------- Menu ☰ ---------- */
body.touch #tsheet { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 48px); right: calc(max(8px, env(safe-area-inset-right)) + 106px); z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; background: linear-gradient(180deg, rgba(34,26,18,.98), rgba(14,10,7,.98)); border: 2px solid var(--gold3); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.8); }
body.touch #tsheet.hidden { display: none !important; }
body.touch #tsheet button { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-width: 140px; font-size: 13px; color: var(--gold); background: #1a120a; border: 1px solid var(--gold3); border-radius: 6px; font-family: var(--title); }
body.touch #tsheet button span { font-size: 20px; }
body.touch #tsheet button b { color: #ffd200; }

/* ---------- Bannières et barre d'incantation ---------- */
body.touch #castbar { bottom: auto; top: 58%; width: min(260px, 60vw); height: 16px; }
body.touch #castbar span { font-size: 10px; line-height: 13px; }
body.touch .zb-name { font-size: 26px; } body.touch .zb-sub { font-size: 13px; }
body.touch #zonebanner { top: 22%; }
body.touch .eb-title { font-size: 20px; } body.touch .eb-sub { font-size: 13px; padding: 0 16px; }
body.touch #eventbanner { top: 30%; }
body.touch .toast .tt1 { font-size: 24px; } body.touch .toast .tt2 { font-size: 13px; }
body.touch #errmsg { font-size: 13px; top: 30%; }

/* ---------- PORTRAIT ---------- */
body.touch.portrait #tframe { left: max(8px, env(safe-area-inset-left)); transform: none; top: calc(max(6px, env(safe-area-inset-top)) + 54px); width: 196px; }
body.touch.portrait #tframe:not(.hidden) ~ #buffs { top: calc(max(6px, env(safe-area-inset-top)) + 106px); }
body.touch.portrait .ttop { top: calc(max(4px, env(safe-area-inset-top)) + 130px); right: max(8px, env(safe-area-inset-right)); flex-direction: row-reverse; }
body.touch.portrait #tracker, body.touch.portrait #tsheet { top: calc(max(4px, env(safe-area-inset-top)) + 178px); right: max(8px, env(safe-area-inset-right)); }
body.touch.portrait #chat { left: max(10px, env(safe-area-inset-left)); transform: none; top: auto; bottom: calc(var(--tcl, 220px) + 86px); width: 70vw; text-align: left; }
body.touch.portrait #t-ctx { bottom: calc(var(--tcl, 220px) + 20px + max(4px, env(safe-area-inset-bottom))); max-width: 80vw; }
body.touch.portrait #castbar { top: 52%; }

/* =========================================================================
   FENÊTRES SUR TÉLÉPHONE (tactile + petit écran)
   ========================================================================= */
@media (max-width: 900px), (max-height: 540px) {
  body.touch #panels .wpanel { left: 0 !important; top: 0 !important; transform: none !important; width: 100vw !important; height: 100dvh !important; max-height: none !important; border-radius: 0; display: flex; flex-direction: column; }
  body.touch #panels .wpanel > .pb { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  body.touch #panels .wpanel > .ph { padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  body.touch .xbtn { width: 38px; height: 38px; font-size: 18px; }
  body.touch .ql-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  body.touch .ql-list { max-height: 30dvh; }
  body.touch .prac-grid, body.touch .codex-grid { grid-template-columns: 1fr; }
  body.touch .grim-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  body.touch .gh-box { min-width: 0; padding: 6px 8px; } body.touch .gh-box .big { font-size: 16px; } body.touch .gh-box .lbl { font-size: 9px; }
  body.touch .stats { grid-template-columns: 1fr; }
  body.touch #worldmap { width: min(94vw, 80dvh); height: auto; margin: 0 auto; }

  body.touch #modal { align-items: flex-start; overflow-y: auto; }
  body.touch .mbox { width: 100vw !important; max-width: 100vw; max-height: none; min-height: 100dvh; border-radius: 0; }
  body.touch .mbox .pb { padding: 16px max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  body.touch .mbox .mh .mi { font-size: 36px; } body.touch .mbox .mh h2 { font-size: 20px; }
  body.touch .mbox .intro { font-size: 15px; }
  body.touch .field input, body.touch .field textarea { font-size: 16px; }
  body.touch .choices { grid-template-columns: 1fr; }
  body.touch .breath-orb { width: 200px; height: 200px; } body.touch .breath-orb .ringg { width: 190px; height: 190px; } body.touch .breath-orb .orb { width: 80px; height: 80px; }
  body.touch .timer-ring { width: 190px; height: 190px; } body.touch .timer-ring .tt { font-size: 34px; }
  body.touch .rewards .rw-big { min-width: 100px; }
  body.touch .death h2 { font-size: 24px; padding: 0 12px; } body.touch .death p { font-size: 16px; padding: 0 12px; }
  body.touch #ending .eh { font-size: 44px; } body.touch #ending p.l { font-size: 18px; }

  body.touch .screen { justify-content: flex-start; padding: max(16px, env(safe-area-inset-top)) 12px 20px; overflow-y: auto; gap: 14px; }
  body.touch #screen-title { justify-content: center; }
  body.touch .screen-title { font-size: 22px; text-align: center; }
  body.touch .logo-wrap { margin-top: 0; }
  body.touch .wbtn.big { min-width: 220px; font-size: 15px; padding: 10px 20px; }
  body.touch .title-menu { gap: 8px; }
  body.touch .quote { font-size: 15px; padding: 0 10px; }
  body.touch .create-wrap { grid-template-columns: 1fr; width: 100%; max-width: 560px; gap: 10px; }
  body.touch .class-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  body.touch .ccard { flex-direction: column; min-width: 96px; text-align: center; padding: 8px 6px; gap: 2px; }
  body.touch .ccard .cn { font-size: 11px; } body.touch .ccard .cr { display: none; }
  body.touch .create-preview { padding: 0; }
  body.touch #create-canvas { width: 200px; height: 225px; }
  body.touch .class-info { max-height: none; }
  body.touch .slot { width: min(88vw, 300px); }
  body.touch #intro-lines p { font-size: 18px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  body.touch .logo { font-size: 64px; }
  body.touch .logo-sub { font-size: 13px; }
  body.touch #screen-title { justify-content: flex-start; }
}