/* Tactile (téléphone, tablette) : manette virtuelle (ui/touch.js) et mise en page
   resserrée pour les petits écrans. Tout est sous body.touch ou une requête média :
   l'ordinateur ne change pas. */

/* --------------------------------------------------- le jeu ne bouge pas sous le doigt */
body.touch, body.touch #stage { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.touch #game-host, body.touch #game-host canvas, .touchpad .tc-zone, .touchpad .tc-btn { touch-action: none; }
body.touch input, body.touch textarea { -webkit-user-select: text; user-select: text; }

/* ------------------------------------------------------------ manette */
.touchpad { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.touchpad .tc-zone {
  position: absolute; left: 0; bottom: 0; width: 45%; top: 30%;
  pointer-events: auto;
}
.tc-base {
  position: absolute; left: calc(70px + env(safe-area-inset-left)); bottom: auto; top: calc(100% - 80px - env(safe-area-inset-bottom));
  width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 244, 226, 0.28) 0 52%, rgba(251, 244, 226, 0.16) 53% 100%);
  box-shadow: inset 0 0 0 3px rgba(106, 62, 34, 0.55), 0 0 0 2px rgba(251, 244, 226, 0.25);
  opacity: 0.5; transition: opacity 0.15s;
  pointer-events: none;
}
.tc-base.on { opacity: 1; background: radial-gradient(circle, rgba(251, 244, 226, 0.42) 0 52%, rgba(251, 244, 226, 0.24) 53% 100%); }
.tc-base.run { box-shadow: inset 0 0 0 3px #e8a72c, 0 0 0 2px rgba(255, 224, 124, 0.6), 0 0 18px rgba(255, 200, 80, 0.45); }
.tc-knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: linear-gradient(180deg, #fbf4e2, #e9d6ad);
  box-shadow: 0 0 0 3px #6a3e22, 0 4px 0 3px #3e2112, inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.tc-base.run .tc-knob { background: linear-gradient(180deg, #ffe07c, #f0b84a); }

.touchpad .tc-btns {
  position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 14px;
}
.tc-btn {
  pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--pixel); word-spacing: 0.3em; user-select: none; -webkit-user-select: none;
}
.tc-btn b {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  font-weight: normal; font-size: 30px; color: #2e1f14;
  background: linear-gradient(180deg, #fffaf0, #fbf4e2 45%, #e9d6ad);
  box-shadow: 0 0 0 4px #6a3e22, 0 6px 0 4px #3e2112, 0 10px 18px rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.06s;
}
.tc-a b { background: linear-gradient(180deg, #ffe998, #ffd84a 45%, #e8a72c); }
.tc-scan b { width: 58px; height: 58px; font-size: 26px; color: #8fffd0; text-shadow: 0 0 8px rgba(127, 255, 200, 0.8);
  background: linear-gradient(160deg, #3b4a5c, #263240 60%, #1c2430); box-shadow: 0 0 0 4px #121820, 0 6px 0 4px #0c1016, 0 10px 18px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.15); }
.tc-btn.down b { transform: translateY(5px); box-shadow: 0 0 0 4px #6a3e22, 0 1px 0 4px #3e2112, inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.tc-scan.down b { box-shadow: 0 0 0 4px #121820, 0 1px 0 4px #0c1016, 0 0 0 7px rgba(127, 255, 200, 0.5); }
.tc-lbl {
  padding: 1px 7px 2px; border-radius: 5px; font-size: 11px; color: #2e1f14;
  background: rgba(251, 244, 226, 0.9); box-shadow: 0 0 0 2px #6a3e22;
}
.tc-scan.off { display: none; }
/* dialogue : seul A reste (il fait avancer) */
.touchpad.dlg .tc-zone, .touchpad.dlg .tc-scan { display: none; }
.touchpad.dlg .tc-btns { bottom: calc(10px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------- HUD au doigt */
/* la roue et les raccourcis montent en haut à gauche, loin du pouce */
body.touch .hud-esc { top: calc(10px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); padding: 6px 10px; }
body.touch .hud-esc kbd, body.touch .keyrow kbd, body.touch .trad-key, body.touch .unlock-key, body.touch .title-foot .keys { display: none; }
body.touch .hud-esc .gear { font-size: 1.3em; }
body.touch .hud-keys {
  display: flex; right: auto; left: calc(62px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); bottom: auto;
  flex-direction: row; align-items: center; gap: 6px;
}
body.touch .keyrow { padding: 6px 10px; min-height: 30px; }
body.touch .place-banner { position: absolute; top: calc(52px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: auto; width: max-content; max-width: 60vw; }
body.touch .hud-chrono { left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: auto; top: calc(10px + env(safe-area-inset-top)); }
body.touch .hud-right { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
/* l'invite « Parler à… » au-dessus du bouton A, la boîte de dialogue lui laisse la place */
body.touch .prompt { bottom: calc(14px + env(safe-area-inset-bottom)); }
body.touch .dialogue { left: calc(12px + env(safe-area-inset-left)); right: calc(118px + env(safe-area-inset-right)); width: auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); }
/* l'étiquette « Parler · ESPACE » montre le bouton A */
body.touch .wl-key { font-size: 0; padding: 0 0.5em; }
body.touch .wl-key::after { content: "A"; font-size: 10px; }
body.touch .qt-key kbd { display: none; }
body.touch .menu-tab kbd, body.touch .book-close kbd, body.touch .btn kbd { display: none; }

/* ================================================ petits écrans (téléphone) */
@media (max-height: 520px), (max-width: 760px) {
  /* HUD resserré */
  body.touch .hud-right { scale: 0.74; transform-origin: top right; }
  body.touch .quest-track { width: 250px; }
  body.touch .trad { scale: 0.78; transform-origin: top center; top: calc(6px + env(safe-area-inset-top)); }
  body.touch .toasts { top: 72px; scale: 0.82; transform-origin: top center; }
  body.touch .keyrow { padding: 4px 8px; min-height: 26px; font-size: 0.72em; }
  body.touch .hud-esc { padding: 4px 8px; }
  .place-banner { scale: 0.8; transform-origin: top left; }
  .dialogue { font-size: 0.86em; }
  .dlg-inner { padding: 0.6em 0.9em 0.5em; }
  .dlg-face { width: 60px; height: 60px; }
  .dlg-face img { width: 54px; height: 54px; }
  .dlg-text { min-height: 2.4em; line-height: 1.35; }

  /* carnet : tient dans l'écran, une page défile d'un seul bloc */
  .panel-wrap .menu-tabs { padding: 0 10px; margin-bottom: -6px; transform: translateX(-70px); animation: none; }
  .menu-tab { height: 32px; padding: 0 10px 6px; font-size: 0.78em; gap: 5px; }
  .menu-tab.on { height: 38px; }
  .menu-tab.close { width: 34px; margin-left: 6px; }
  .panel-wrap .panel.book-panel {
    width: calc(100vw - 200px - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform: translateX(-70px); font-size: 0.88em;
  }
  .book { padding: 8px 10px 10px; }
  .book-cover::after { inset: 5px; }
  .page { padding: 10px 14px 12px; overflow-y: auto; overscroll-behavior: contain; }
  .page .page-scroll { flex: none; overflow: visible; }
  .page-left::before { left: 8px; }
  .spread { grid-template-columns: 1fr 14px 1fr; }
  .chapter { margin: 0 0 6px 2px; }
  .chapter-title { font-size: 1.3em; }
  .folio { display: none; }
  .turn { width: 28px; height: 46px; }
  .ribbons.compact.many { top: 8px; bottom: 8px; }
  .ribbon { padding-top: 4px; padding-bottom: 4px; }
  .coach { top: 44px; padding: 6px 10px; gap: 8px; }
  .coach-ico { font-size: 1.3em; }
  .coach p { font-size: 0.82em; }
  .book-hint { display: none; }

  /* écran-titre : compact, la carte défile si besoin */
  .title-screen { padding: calc(6px + env(safe-area-inset-top)) 10px calc(6px + env(safe-area-inset-bottom)); grid-template-rows: auto auto auto; align-content: start; overflow-y: auto; }
  .title-logo h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); flex-direction: row; justify-content: center; gap: 0.5em; line-height: 1.1; }
  .tagline { display: none; }
  .tl2 .tl-card-main { gap: 6px; padding: 8px 12px; margin-top: 12px; font-size: 0.92em; }
  .tl-top { min-height: 0; margin-bottom: -24px; position: relative; z-index: 1; pointer-events: none; }
  .tl-top > * { pointer-events: auto; }
  .tl-top .tl-acc { font-size: 0.72em; padding: 2px 4px 2px 8px; }
  .lang-block h3 { min-height: 20px; }
  .tl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tl-card { padding: 4px 6px; column-gap: 6px; }
  .tl-card canvas { width: 27px; height: 18px; }
  .lang-block h3 { margin-bottom: 3px; }
  .title-foot { margin-top: 4px; font-size: 0.65em; }
}
/* portrait étroit : le titre et le carnet sur une colonne */
@media (max-width: 760px) {
  .tl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-top { margin-bottom: 0; }
  .panel-wrap .menu-tabs, .panel-wrap .panel.book-panel { transform: none; }
  .panel-wrap .panel.book-panel { width: calc(100vw - 16px); height: calc(100dvh - 60px); }
  .spread { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .page { overflow: visible; }
  body.touch .hud-keys { top: calc(50px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); flex-direction: column; align-items: flex-start; }
  body.touch .trad { left: auto; right: calc(6px + env(safe-area-inset-right)); transform: none; transform-origin: top right; }
  body.touch .hud-right { top: calc(76px + env(safe-area-inset-top)); scale: 0.66; }
  body.touch .toasts { top: auto; bottom: 120px; }
  body.touch .dialogue { right: calc(12px + env(safe-area-inset-right)); bottom: calc(110px + env(safe-area-inset-bottom)); }
  body.touch .place-banner { top: calc(150px + env(safe-area-inset-top)); }
  .touchpad .tc-zone { width: 55%; top: 45%; }
}
body.touch .qt-key kbd { display: none; }
@media (max-height: 520px), (max-width: 760px) {
  .coach { bottom: 6px; width: min(92%, 520px); padding: 6px 10px; gap: 8px; }
  .coach p { font-size: 0.78em; }
  .coach-ico { font-size: 1.2em; }
}
body.touch .wl-key[data-k="F"]::after { content: "◉"; }
@media (max-height: 520px), (max-width: 760px) { .scan-log { top: 120px; width: 200px; transform: scale(0.85); transform-origin: top right; } }

/* arme-jouet en main : bouton ⚔ (frapper / tirer) */
.tc-hit b { width: 54px; height: 54px; font-size: 24px; background: linear-gradient(180deg, #ffd0e0, #ff8ab0 45%, #d8508a); color: #4a1a30; }
.tc-hit.off { display: none; }
.touchpad.dlg .tc-hit { display: none; }
/* poser le jouet : petit bouton ⤓ */
.tc-drop b { width: 40px; height: 40px; font-size: 18px; background: linear-gradient(180deg, #fbf4e2, #e9d6ad); color: #4a2f3c; }
.tc-drop.off { display: none; }
.touchpad.dlg .tc-drop { display: none; }
/* pouvoirs : ruée, vélo */
.tc-pow b { width: 42px; height: 42px; font-size: 19px; background: linear-gradient(180deg, #fff6d8, #f0c860); color: #4a2f3c; }
.tc-pow.off { display: none; }
.touchpad.dlg .tc-pow { display: none; }