/* Mode Mobile parallèle. Toutes les règles sont confinées à .mobile-ui. */
:root { --mobile-top: 62px; --mobile-nav: 70px; }
html:has(.mobile-ui) { min-width: 0; overflow-x: hidden; background: #071014; }
body.mobile-ui {
  min-width: 0; min-height: 100dvh; margin: 0; overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(47, 112, 116, .28), transparent 34rem),
    linear-gradient(180deg, #0a1519 0, #080c0f 48%, #0e0b09 100%);
  color: #f1eadc; padding-top: calc(var(--mobile-top) + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom); font-size: 16px;
}
.mobile-ui::before { opacity: .1; }
.mobile-ui * { box-sizing: border-box; }
.mobile-ui button, .mobile-ui a, .mobile-ui input, .mobile-ui select, .mobile-ui summary,
.mobile-ui [role="button"] { min-height: 44px; }
.mobile-ui .button { border-radius: 13px; }
.mobile-ui .panel {
  border-color: rgba(142, 190, 184, .18); border-radius: 16px;
  background: linear-gradient(150deg, rgba(24, 38, 41, .97), rgba(17, 19, 20, .98));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
}
.mobile-ui .eyebrow { color: #8fcac3; }
.mobile-ui .button-primary { border-color: #e7c66d; background: linear-gradient(135deg, #f1d17c, #b88738); color: #171006; }
.mobile-ui .button-secondary { border-color: rgba(143, 202, 195, .28); background: rgba(47, 106, 108, .22); }
.mobile-ui input, .mobile-ui select { min-height: 48px; border-radius: 12px; border-color: rgba(143, 202, 195, .28); background: #0c1518; }
/* WebKit n'applique pas « min-height » à un select natif : sans hauteur
   explicite, la cible tactile retombe à 23 px sur Safari et sur iOS. */
.mobile-ui select { height: 48px; }

/* Barre supérieure et navigation au pouce. */
.mobile-topbar {
  position: fixed; inset: env(safe-area-inset-top) 0 auto; z-index: 180;
  display: flex; height: var(--mobile-top); align-items: center; justify-content: space-between;
  padding: 7px max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(143, 202, 195, .2); background: rgba(7, 15, 18, .92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .34); backdrop-filter: blur(18px);
}
.mobile-brand { display: flex; min-height: 48px; align-items: center; gap: 9px; color: #f6ead3; text-decoration: none; }
.mobile-brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 5px 8px #000); }
.mobile-brand span { display: grid; line-height: 1.05; }
.mobile-brand strong { font-family: var(--serif); font-size: 1rem; letter-spacing: .03em; }
.mobile-brand small { margin-top: 4px; color: #8fcac3; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mobile-table-meta { display: grid; justify-items: end; gap: 2px; }
.mobile-table-meta > span { color: #91aaa8; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.mobile-table-meta .game-code { min-height: 30px; padding: 3px 8px; border-color: rgba(231, 198, 109, .45); }
.mobile-tabbar {
  position: fixed; inset: auto 0 0; z-index: 175; display: grid; height: calc(var(--mobile-nav) + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px max(5px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(5px, env(safe-area-inset-left));
  border-top: 1px solid rgba(143, 202, 195, .2); background: rgba(7, 14, 17, .96); box-shadow: 0 -10px 35px rgba(0,0,0,.48); backdrop-filter: blur(20px);
}
.mobile-tabbar button { display: grid; min-width: 0; place-items: center; align-content: center; gap: 2px; padding: 4px; border: 0; border-radius: 13px; background: transparent; color: #8ba09f; }
.mobile-tabbar button > span { font-size: 1.2rem; line-height: 1; }
.mobile-tabbar button > small { font-size: .61rem; font-weight: 750; }
.mobile-tabbar button[aria-current="page"] { background: rgba(93, 164, 158, .17); color: #b9ebe4; }
.mobile-tabbar .mobile-action-tab { width: 58px; min-height: 58px; align-self: end; justify-self: center; margin-top: -15px; border: 1px solid rgba(231, 198, 109, .6); border-radius: 50%; background: linear-gradient(145deg, #d9b65e, #8f6227); color: #171006; box-shadow: 0 7px 24px rgba(184, 135, 56, .35); }
.mobile-tabbar .mobile-action-tab[aria-current="page"] { background: linear-gradient(145deg, #f3db92, #ba8537); color: #171006; }
/* Un onglet sans contenu à offrir est désactivé par mobile.js. Sans marque
   visible, le bouton doré des Actions restait la cible la plus attirante de
   la barre tout en n'ouvrant rien. */
.mobile-tabbar button:disabled { opacity: .34; pointer-events: none; }
.mobile-tabbar .mobile-action-tab:disabled { border-color: rgba(231, 198, 109, .28); background: linear-gradient(145deg, #6f6244, #4a3a22); box-shadow: none; }
.mobile-footer { display: flex; justify-content: center; gap: 1rem; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); color: #879895; font-size: .75rem; }
.mobile-ui.game-page .mobile-footer, .mobile-ui.combat-page .mobile-footer { display: none; }

/* Accueil et entrée à une table. */
.mobile-home-page #contenu, .mobile-join-page #contenu { width: min(100%, 680px); margin-inline: auto; }
.mobile-welcome { position: relative; min-height: min(660px, calc(100dvh - var(--mobile-top))); overflow: hidden; }
.mobile-welcome-art { position: absolute; inset: 0 0 auto; height: 48%; background: linear-gradient(180deg, transparent 50%, #091215), linear-gradient(90deg, rgba(8,16,19,.2), rgba(8,16,19,.68)), url("../assets/brand/shop-background-1600.jpg") center / cover; filter: saturate(.65) contrast(1.08); }
.mobile-welcome-copy { position: relative; z-index: 1; display: grid; align-content: end; min-height: min(660px, calc(100dvh - var(--mobile-top))); padding: 45dvh 20px 32px; }
.mobile-welcome-copy h1 { max-width: 12ch; margin-bottom: 14px; font-size: clamp(2.5rem, 12vw, 4.4rem); }
.mobile-welcome-copy > p:not(.eyebrow) { max-width: 34rem; color: #b8c5c1; line-height: 1.55; }
.mobile-code-form { display: grid; gap: 7px; margin-top: 10px; }
.mobile-code-form > label { color: #8fcac3; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mobile-code-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mobile-code-form input { font-family: ui-monospace, monospace; font-size: 1.1rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mobile-home-actions { display: grid; margin-top: 8px; }
.mobile-home-actions .button { width: 100%; }
.mobile-recent, .mobile-mode-note { margin: 0 14px 16px; padding: 18px; border: 1px solid rgba(143, 202, 195, .16); border-radius: 18px; background: rgba(15, 25, 27, .78); }
.mobile-recent h2 { margin-bottom: 0; font-size: 1.45rem; }
.mobile-recent ul { display: grid; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.mobile-recent a { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035); color: #f1eadc; text-decoration: none; }
.mobile-recent a span { display: grid; gap: 3px; }
.mobile-recent a small { color: #91aaa8; text-transform: capitalize; }
.mobile-recent a i { color: #e7c66d; font-size: 1.3rem; font-style: normal; }
.mobile-mode-note p { margin: 6px 0 0; color: #9eb0ad; line-height: 1.45; }
.mobile-join-card { width: calc(100% - 28px); margin: clamp(38px, 10dvh, 90px) auto; padding: 24px 20px; border: 1px solid rgba(143,202,195,.2); border-radius: 22px; background: linear-gradient(145deg, rgba(28,43,45,.96), rgba(13,19,21,.98)); box-shadow: 0 24px 60px rgba(0,0,0,.42); text-align: center; }
.mobile-join-card h1 { margin-bottom: 10px; font-size: clamp(2rem, 10vw, 3.4rem); }
.mobile-large-code { display: inline-flex; padding: 8px 12px; border: 1px solid rgba(231,198,109,.38); border-radius: 12px; color: #f3d98d; font-family: ui-monospace, monospace; font-size: 1.3rem; font-weight: 850; letter-spacing: .16em; }
.mobile-join-card > p:not(.eyebrow) { margin: 18px auto; color: #a8b8b4; }
.mobile-join-card form { display: grid; gap: 14px; text-align: left; }

/* Création d'une campagne dans le Mode Mobile. */
.mobile-ui.form-page #contenu { width: min(100%, 680px); margin-inline: auto; padding: 10px 10px 24px; }
.mobile-ui.form-page .shell-narrow { width: 100%; }
.mobile-ui.form-page .setup-panel { padding: 16px 13px; }
.mobile-ui.form-page .panel-heading { align-items: center; gap: 10px; }
.mobile-ui.form-page .panel-heading h1 { font-size: clamp(1.7rem, 8vw, 2.5rem); }
.mobile-ui.form-page .character-row-with-level,
.mobile-ui.form-page .character-customization,
.mobile-ui.form-page .magic-school-picker,
.mobile-ui.form-page .initial-spell-picker,
.mobile-ui.form-page .veteran-advancement { grid-template-columns: minmax(0, 1fr); }
.mobile-ui.form-page .character-customization,
.mobile-ui.form-page .magic-school-picker,
.mobile-ui.form-page .initial-spell-picker { grid-column: 1; }
.mobile-ui.form-page .magic-school-picker small,
.mobile-ui.form-page .initial-spell-picker > span { grid-column: 1; }
.mobile-ui.form-page .field-row { align-items: stretch; flex-direction: column; }
.mobile-ui.form-page .compact-row select { width: 100%; }

/* Structure de la table. */
.mobile-ui.game-page, .mobile-ui.combat-page { padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); }
.mobile-ui .game-shell, .mobile-ui .combat-shell { width: 100%; min-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav)); margin: 0; padding: 8px 10px 16px; }
.mobile-ui .game-banner { min-height: 0; align-items: center; padding: 9px 11px; border-radius: 14px 14px 0 0; background: linear-gradient(110deg, rgba(58,115,113,.23), rgba(17,24,26,.98)); }
.mobile-ui .game-banner .eyebrow { margin-bottom: 2px; font-size: .58rem; }
.mobile-ui .game-banner h1 { max-width: 64vw; overflow: hidden; margin: 0; font-size: 1.22rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-ui .game-banner-actions .table-code-meta { display: none; }
.mobile-ui .live-indicator { font-size: .65rem; }
.mobile-ui .status-strip { display: flex; overflow-x: auto; border-color: rgba(143,202,195,.15); border-radius: 0 0 14px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.mobile-ui .status-strip::-webkit-scrollbar { display: none; }
.mobile-ui .status-strip div { min-width: 132px; flex: 0 0 auto; padding: 8px 10px; border-right-color: rgba(143,202,195,.13); border-bottom: 0; scroll-snap-align: start; }
.mobile-ui .status-strip span { font-size: .55rem; }
.mobile-ui .status-strip strong { overflow: visible; font-size: .77rem; white-space: normal; }
.mobile-ui .status-strip .status-xp { min-width: 210px; }
.mobile-ui .game-layout { display: block; height: auto; min-height: 0; margin-top: 8px; }
.mobile-ui .board-column { display: contents; }
.mobile-ui .board-panel, .mobile-ui .left-sidebar, .mobile-ui .sidebar-column, .mobile-ui .board-journal { width: 100%; min-width: 0; }
.mobile-ui .board-panel { display: flex; height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 148px); min-height: 430px; flex-direction: column; padding: 10px; overflow: hidden; }
.mobile-ui .board-panel > .section-heading { margin-bottom: 7px; }
.mobile-ui .board-panel > .section-heading h2 { font-size: 1.15rem; }
.mobile-ui .board-heading-meta { max-width: 42%; text-align: right; }
.mobile-ui .board-heading-meta small { display: block; margin-top: 2px; font-size: .56rem; }
.mobile-ui .map-viewport { min-height: 300px; flex: 1 1 auto; border-radius: 13px; overflow: hidden; background: #080d0f; }
.mobile-ui .nature-map-wrap, .mobile-ui .dungeon-map-wrap { overscroll-behavior: contain; touch-action: pan-x pan-y; }
.mobile-ui .map-zoom-controls { top: 8px; right: 8px; border-radius: 12px; background: rgba(6,13,15,.9); }
.mobile-ui .map-zoom-controls button { min-width: 44px; min-height: 44px; font-size: 1rem; }
.mobile-ui .dungeon-scout-control { top: 8px; left: 8px; max-width: calc(100% - 210px); padding: 5px 7px; border-radius: 10px; background: rgba(6,13,15,.9); font-size: .6rem; }
.mobile-ui .dungeon-scout-control select { min-height: 36px; padding: 4px 7px; font-size: .65rem; }
.mobile-ui .encounter-zone { max-height: 38dvh; overflow-y: auto; border-radius: 12px; }
.mobile-ui .board-panel-with-decision > .encounter-zone:not(.catacombs-zone) { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; }
.mobile-ui .encounter-copy { max-width: 34rem; text-align: center; }
.mobile-ui .monster-line { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mobile-ui .monster-card { width: min(100%, 340px); min-width: 0; grid-template-columns: minmax(86px, 31%) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; }
.mobile-ui .monster-card img { width: 100%; height: auto; max-height: 118px; grid-row: 1 / 3; aspect-ratio: 1; object-fit: contain; }
.mobile-ui .catacombs-zone { display: grid; justify-items: center; padding: 18px 14px; text-align: center; }
.mobile-ui .catacombs-zone p:last-child { max-width: 34rem; }
.mobile-ui .village-zone { position: absolute; inset: 0; z-index: 20; display: block; padding: 10px; overflow-y: auto; border-radius: 15px; background: #10191b; }
.mobile-ui .village-heading { position: sticky; top: -10px; margin: -10px -10px 10px; padding: 12px; background: rgba(12,22,24,.97); }
.mobile-ui .village-heading .button { min-height: 46px; }
.mobile-ui .village-offer, .mobile-ui .village-sale, .mobile-ui .village-services form, .mobile-ui .village-progress form { grid-template-columns: 1fr; gap: 8px; }

/* Les cinq vues mobiles n'affichent qu'une surface principale à la fois. */
.mobile-ui .left-sidebar, .mobile-ui .sidebar-column, .mobile-ui .board-journal { display: none; }
.mobile-ui.mobile-panel-group .board-panel, .mobile-ui.mobile-panel-group .sidebar-column, .mobile-ui.mobile-panel-group .board-journal { display: none !important; }
.mobile-ui.mobile-panel-group .left-sidebar { display: block; }
.mobile-ui.mobile-panel-journal .board-panel, .mobile-ui.mobile-panel-journal .left-sidebar, .mobile-ui.mobile-panel-journal .sidebar-column { display: none !important; }
.mobile-ui.mobile-panel-journal .board-journal { display: block; height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 20px); }
.mobile-ui.mobile-panel-more .board-panel, .mobile-ui.mobile-panel-more .left-sidebar, .mobile-ui.mobile-panel-more .board-journal { display: none !important; }
.mobile-ui.mobile-panel-more .sidebar-column { display: grid; max-height: none; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; }
.mobile-ui.mobile-panel-more .sidebar-column > * { width: 100%; min-width: 0; grid-column: 1; }
.mobile-ui.mobile-panel-board .board-panel { display: flex; }

.mobile-ui .left-sidebar { max-height: none; overflow: visible; }
.mobile-ui .party-panel { display: block; max-height: none; padding: 10px; overflow: visible; }
.mobile-ui .party-panel > summary { position: static; min-height: 52px; }
.mobile-ui .party-panel .party-grid { position: static; display: grid; height: auto; max-height: none; gap: 9px; overflow: visible; }
.mobile-ui .party-quick-actions { position: sticky; top: 0; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 8px 0; background: rgba(18,29,31,.96); }
.mobile-ui .hero-card { min-height: 92px; grid-template-columns: 72px minmax(0,1fr); padding: 8px; border-radius: 14px; background: rgba(255,255,255,.035); }
.mobile-ui .hero-card > img { width: 72px; height: 72px; object-fit: contain; }
.mobile-ui .hero-card .mini-stats { font-size: .65rem; }
.mobile-ui .sidebar-column details { max-height: none; overflow: visible; }
.mobile-ui .sidebar-column details > summary { min-height: 58px; padding: 10px 12px; }
.mobile-ui .sidebar-column .collapsible-content { max-height: none; overflow: visible; }
.mobile-ui .magic-item-list li, .mobile-ui .item-owner-form { grid-template-columns: 1fr; }
.mobile-ui .board-journal { padding: 10px; overflow: hidden; border: 1px solid rgba(143,202,195,.18); border-radius: 16px; background: #101719; }
.mobile-ui .board-journal > summary { min-height: 58px; }
.mobile-ui .board-journal .event-list { height: calc(100% - 62px); max-height: none; overflow-y: auto; }
.mobile-ui .mobile-more-extras { display: grid; gap: 12px; padding: 15px; }
.mobile-ui .mobile-more-extras h2 { margin: 0; font-size: 1.25rem; }
.mobile-ui .mobile-more-extras .settings-toggle { min-height: 58px; }
.mobile-ui .mobile-more-extras .settings-display-mode { min-height: 64px; padding: 10px 0; border-color: rgba(143,202,195,.14); }
.mobile-ui .mobile-more-extras .audio-setting { display: grid; grid-template-columns: 1fr auto 44px; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(143,202,195,.14); }
.mobile-ui .mobile-more-extras .audio-setting input { grid-column: 1 / -1; min-height: 34px; }
.mobile-ui .mobile-more-extras .audio-mute-button { min-width: 44px; min-height: 44px; border-radius: 12px; }
.mobile-ui .mobile-mode-links { display: grid; gap: 8px; }

/* Barre d'action transformée en tiroir. */
.mobile-ui .board-panel > .action-dock {
  position: fixed; right: 8px; bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 7px); left: 8px; z-index: 165;
  display: flex; width: auto; max-height: 64px; align-items: center; flex-wrap: nowrap; justify-content: center; gap: 7px;
  margin: 0; padding: 8px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(231,198,109,.25); border-radius: 16px;
  background: rgba(12,20,22,.96); box-shadow: 0 12px 38px rgba(0,0,0,.55); transition: max-height .2s ease;
}
.mobile-ui .board-panel > .action-dock:empty { display: none; }
.mobile-ui .board-panel > .action-dock form, .mobile-ui .board-panel > .action-dock .special-action-form { min-width: max-content; flex: 0 0 auto; }
.mobile-ui .board-panel > .action-dock .button { width: auto; min-height: 46px; }
/* Un seuil ou une rencontre ne propose que deux ou trois décisions : les
   empiler pleine largeur les rend toutes atteignables et centrées sans ouvrir
   le tiroir, là où la bande horizontale les coupait des deux côtés. */
.mobile-ui .board-panel-with-decision > .action-dock {
  max-height: min(44dvh, 300px); align-items: stretch; flex-direction: column; justify-content: center;
  overflow-x: hidden; overflow-y: auto;
}
.mobile-ui .board-panel-with-decision > .action-dock form,
.mobile-ui .board-panel-with-decision > .action-dock .special-action-form { width: 100%; min-width: 0; }
.mobile-ui .board-panel-with-decision > .action-dock .button { width: 100%; }
.mobile-ui.mobile-actions-open .board-panel > .action-dock { max-height: min(72dvh, 620px); align-items: stretch; flex-direction: column; overflow: auto; padding: 14px; }
.mobile-ui.mobile-actions-open .board-panel > .action-dock form, .mobile-ui.mobile-actions-open .board-panel > .action-dock .special-action-form { display: grid; width: 100%; min-width: 0; }
.mobile-ui.mobile-actions-open .board-panel > .action-dock .button { width: 100%; }

/* Dialogues et panneaux secondaires adaptés à Safari iOS. */
/* app.css laisse ces dialogues en « position: relative » : les « inset »
   ci-dessous ne s'appliquaient donc pas et la fiche pouvait s'ouvrir décalée
   hors de l'écran. En plein écran mobile, elle doit être ancrée au viewport. */
.mobile-ui dialog.hero-sheet-dialog, .mobile-ui dialog.utility-popup, .mobile-ui dialog.item-detail-popup, .mobile-ui dialog.model-3d-popup {
  position: fixed;
  inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); width: 100%; max-width: none; height: auto; max-height: none; margin: 0;
  border: 0; border-radius: 0; background: #101719;
}
.mobile-ui .hero-sheet-header { grid-template-columns: 84px minmax(0,1fr); padding: 14px; }
.mobile-ui .hero-sheet-header .hero-sheet-hp { grid-column: 2; }
.mobile-ui .hero-sheet-body { grid-template-columns: 1fr; padding: 14px; }
.mobile-ui .hero-sheet-tabs { overflow-x: auto; }
.mobile-ui .hero-sheet-arrow { top: auto; bottom: 16px; width: 48px; height: 48px; }
.mobile-ui .hero-sheet-close { min-width: 44px; min-height: 44px; }
.mobile-ui .utility-popup-content form { grid-template-columns: 1fr; }
.mobile-ui .action-modal-overlay { z-index: 230; align-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.mobile-ui .action-modal { width: min(100%, 520px); max-width: none; max-height: calc(100dvh - 24px); padding: 22px 18px; overflow-y: auto; border-radius: 20px; }
.mobile-ui .action-modal-buttons { display: grid; grid-template-columns: 1fr 1fr; }
.mobile-ui .action-modal-buttons .button { width: 100%; }
.mobile-ui.mobile-event-visible::after { position: fixed; inset: 0; z-index: 194; background: rgba(2, 6, 8, .72); content: ""; backdrop-filter: blur(3px); }
.mobile-ui .event-stage,
.mobile-ui .event-stage.journal-event-stage,
.mobile-ui .combat-event-stage { position: fixed; inset: calc(var(--mobile-top) + env(safe-area-inset-top) + 12px) 10px auto; z-index: 205; width: auto; max-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 34px); padding: 18px 42px 18px 18px; overflow-y: auto; border-radius: 16px; transform: none; animation: mobile-event-in .24s ease both; }
.mobile-ui .event-stage > strong { font-size: clamp(1.15rem, 5.4vw, 1.55rem); line-height: 1.25; }
.mobile-ui .event-stage > small { margin-top: 5px; line-height: 1.4; }
.mobile-ui .board-dice-layer,
.mobile-ui .combat-dice-layer { position: fixed; inset: calc(var(--mobile-top) + env(safe-area-inset-top)) 0 calc(var(--mobile-nav) + env(safe-area-inset-bottom)); z-index: 200; border-radius: 0; background: radial-gradient(circle at 50% 42%, rgba(64, 47, 31, .98), rgba(5, 10, 12, .995) 70%); box-shadow: inset 0 0 80px rgba(0,0,0,.75); animation: mobile-dice-reveal .24s ease both; }
.mobile-ui .board-dice-layer::after { position: absolute; inset: 12%; border: 1px solid rgba(231,198,109,.13); border-radius: 50%; box-shadow: 0 0 60px rgba(231,198,109,.12), inset 0 0 50px rgba(231,198,109,.08); content: ""; animation: mobile-dice-aura 1.2s ease-in-out infinite alternate; pointer-events: none; }
.mobile-ui .board-dice-layer .dice-caption { top: 16px; z-index: 2; width: calc(100% - 24px); }
.mobile-ui .board-dice-layer .dice-caption strong { color: #fff3c9; text-shadow: 0 0 24px rgba(231,198,109,.55), 0 3px 12px #000; }
@keyframes mobile-event-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mobile-dice-reveal { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mobile-dice-aura { from { opacity: .35; transform: scale(.96); } to { opacity: .8; transform: scale(1.04); } }

/* Lobby. */
.mobile-ui .multiplayer-lobby { margin-top: 9px; padding: 14px; }
.mobile-ui .lobby-grid { grid-template-columns: 1fr; }
.mobile-ui .lobby-members li, .mobile-ui .lobby-characters li { align-items: stretch; flex-direction: column; }
.mobile-ui .lobby-characters li form { grid-template-columns: 1fr; }
.mobile-ui .lobby-footer { align-items: stretch; flex-direction: column; }
.mobile-ui .lobby-footer .button { width: 100%; }
.mobile-ui.mobile-has-lobby .game-layout { display: none; }
.mobile-ui.mobile-has-lobby .mobile-tabbar { display: none; }
.mobile-ui.mobile-has-lobby { padding-bottom: env(safe-area-inset-bottom); }
.mobile-ui.mobile-has-lobby .mobile-more-extras { display: none; }

.mobile-ui .village-modal-backdrop { inset: calc(var(--mobile-top) + env(safe-area-inset-top)) 0 calc(var(--mobile-nav) + env(safe-area-inset-bottom)); padding: 0; }
.mobile-ui .village-building-modal { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.mobile-ui .castle-continuity-zone { inset: calc(var(--mobile-top) + env(safe-area-inset-top)) 0 0; grid-template-columns: 1fr; padding: 58px 12px calc(18px + env(safe-area-inset-bottom)); }
.mobile-ui .castle-preparation-close { top: calc(var(--mobile-top) + env(safe-area-inset-top) + 8px); right: 10px; width: 44px; height: 44px; }
.mobile-ui .board-panel.is-map-modal { inset: calc(var(--mobile-top) + env(safe-area-inset-top) + 5px) 5px calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 5px); border-radius: 16px; }
.mobile-ui .journal-panel.is-modal, .mobile-ui .combat-journal.is-modal { inset: calc(var(--mobile-top) + env(safe-area-inset-top) + 5px) 5px calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 5px); grid-template-columns: 1fr; border-radius: 16px; }
.mobile-ui .flash-stack { top: calc(var(--mobile-top) + env(safe-area-inset-top) + 8px); right: 8px; width: calc(100vw - 16px); }

/* Combat: deux formations lisibles, jamais deux mini-grilles côte à côte. */
.mobile-ui .combat-shell { display: block; height: auto; min-height: 0; overflow: visible; }
.mobile-ui .combat-header { min-height: 62px; padding: 9px 11px; border-radius: 15px; background: linear-gradient(110deg, rgba(118,44,43,.28), rgba(16,24,25,.98)); }
.mobile-ui .combat-header h1 { max-width: 55vw; overflow: hidden; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-ui .combat-header-meta > span { display: none; }
.mobile-ui .combat-table { display: block; width: 100%; height: auto; min-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 86px); margin-top: 8px; padding: 10px; overflow: visible; border-radius: 16px; background: linear-gradient(160deg, #142022, #0c1113); }
.mobile-ui .combat-table::before { display: none; }
.mobile-ui .combat-center { display: block; min-width: 0; min-height: 0; }
.mobile-ui .combat-formation-zone { position: static; display: grid; width: 100%; height: auto; grid-template-columns: 1fr; gap: 10px; }
.mobile-ui .formation-versus { display: none; }
.mobile-ui .combat-side { display: grid; height: auto; grid-template-rows: auto auto; }
.mobile-ui .combat-side h2 { margin: 0 0 5px; font-size: .78rem; }
.mobile-ui .combat-grid { width: min(76vw, 330px); height: auto; aspect-ratio: 1; justify-self: center; }
.mobile-ui .combat-cell { aspect-ratio: 1; }
.mobile-ui .combat-grid.is-mobile-facing .combat-cell { border-color: rgba(143,202,195,.24); }
.mobile-ui .hero-formation.is-mobile-facing .combat-cell:nth-child(3n) { border-bottom-color: rgba(240,207,130,.88); box-shadow: inset 0 -2px rgba(240,207,130,.35); }
.mobile-ui .monster-formation.is-mobile-facing .combat-cell:nth-child(3n + 1) { border-top-color: rgba(221,113,98,.9); box-shadow: inset 0 2px rgba(221,113,98,.35); }
.mobile-ui .monster-formation.is-mobile-facing .combat-cell:first-child { position: relative; }
.mobile-ui .monster-formation.is-mobile-facing .combat-cell:first-child::before { position: absolute; top: 2px; left: 3px; z-index: 2; color: rgba(255,166,139,.78); content: "R1 · avant"; font-size: clamp(6px, 2vw, 9px); font-weight: 850; letter-spacing: .04em; pointer-events: none; }
.mobile-ui .combat-token { width: 86%; height: 86%; }
.mobile-ui .combat-token span { font-size: clamp(7px, 2.2vw, 10px); }
.mobile-ui .combat-vitals, .mobile-ui .combat-journal { display: none; min-width: 0; }
.mobile-ui.mobile-panel-group .combat-center, .mobile-ui.mobile-panel-group .monster-vitals, .mobile-ui.mobile-panel-group .combat-journal { display: none; }
.mobile-ui.mobile-panel-group .hero-vitals { display: block; min-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 100px); }
.mobile-ui.mobile-panel-more .combat-center, .mobile-ui.mobile-panel-more .hero-vitals, .mobile-ui.mobile-panel-more .combat-journal { display: none; }
.mobile-ui.mobile-panel-more .monster-vitals { display: block; min-height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 100px); }
.mobile-ui.mobile-panel-journal .combat-vitals { display: none; }
.mobile-ui.mobile-panel-journal .combat-formation-zone { display: none; }
.mobile-ui.mobile-panel-journal .combat-journal { display: grid; height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 100px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
.mobile-ui .combat-journal header { border-right: 0; border-bottom: 1px solid var(--line); }
.mobile-ui .combat-journal ol { font-size: .8rem; }
.mobile-ui .combat-vitals ul { height: auto; max-height: none; grid-template-columns: 1fr; overflow: visible; }
.mobile-ui .combat-controls {
  position: fixed; right: 8px; bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 7px); left: 8px; z-index: 165;
  display: none; max-height: min(72dvh, 620px); padding: 12px; overflow-y: auto; border-radius: 16px; background: rgba(12,20,22,.98);
}
.mobile-ui.mobile-actions-open .combat-controls { display: flex; align-items: stretch; flex-direction: column; }
.mobile-ui .combat-action-card { display: grid; align-items: stretch; }
.mobile-ui .combat-action-card > header { min-width: 0; }
.mobile-ui .combat-action-section, .mobile-ui .combat-action-card form { display: grid; align-items: stretch; border-left: 0; }
.mobile-ui .combat-spell-actions { display: grid; max-width: none; overflow: visible; }
.mobile-ui .combat-action-card select, .mobile-ui .combat-action-card .button, .mobile-ui .combat-auto-form .button { width: 100%; min-height: 46px; }
.mobile-ui .combat-auto-form { display: grid; width: 100%; margin: 0; padding-top: 8px; border-top: 1px solid rgba(231,198,109,.16); }
.mobile-ui .combat-action-deck + .combat-auto-form { margin-top: 10px; }

/* Formation tactile. Le JS existant permet la sélection puis le choix d'une case. */
.mobile-ui.formation-page .mobile-tabbar { display: none; }
.mobile-ui.formation-page { padding-bottom: env(safe-area-inset-bottom); }
.mobile-ui.formation-page .mobile-more-extras { display: none; }
.mobile-ui .formation-shell { padding-bottom: 105px; }
.mobile-ui .formation-workspace { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mobile-ui .formation-guide, .mobile-ui .formation-reserve { padding: 13px; }
.mobile-ui .formation-guide { order: 2; }
.mobile-ui .formation-board { order: 1; }
.mobile-ui .formation-reserve { order: 3; }
.mobile-ui .formation-board h2 { font-size: 1.1rem; text-align: center; }
.mobile-ui .formation-drag-grid { width: min(calc(100vw - 36px), 430px); max-height: none; margin-inline: auto; }
.mobile-ui .formation-drop-zone { min-width: 0; min-height: 0; aspect-ratio: 1; }
.mobile-ui .formation-token { width: 88%; height: 88%; touch-action: manipulation; }
.mobile-ui .formation-controls { position: fixed; right: 0; bottom: 0; left: 0; z-index: 170; display: grid; min-height: 92px; padding: 10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-radius: 0; }
.mobile-ui .formation-controls > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-ui .formation-controls .button { min-height: 46px; }

@media (orientation: landscape) and (max-height: 520px) {
  :root { --mobile-top: 52px; --mobile-nav: 58px; }
  .mobile-brand img { width: 40px; height: 40px; }
  .mobile-brand small { display: none; }
  .mobile-tabbar button > span { font-size: 1rem; }
  .mobile-ui .game-banner, .mobile-ui .status-strip { display: none; }
  .mobile-ui .board-panel { height: calc(100dvh - var(--mobile-top) - var(--mobile-nav) - 14px); }
  .mobile-ui .combat-formation-zone { grid-template-columns: 1fr 1fr; }
  .mobile-ui .combat-grid { width: min(34vw, calc(100dvh - 145px)); }
  /* Côte à côte, l'ordre calculé par mobile.js doit se lire en colonnes : la
     rangée 1 des héros devient le bord droit et la ligne de front des monstres
     le bord gauche, donc face à face comme en portrait. */
  .mobile-ui .combat-grid.is-mobile-facing { grid-auto-flow: column; }
  /* L'accueil réserve 45 dvh à son illustration : en paysage, cela repoussait
     le code de table et le bouton d'entrée sous la ligne de flottaison. */
  .mobile-welcome, .mobile-welcome-copy { min-height: 0; }
  .mobile-welcome-copy { padding-top: 16dvh; }
  .mobile-welcome-art { height: 100%; }
}
@media (min-width: 700px) {
  .mobile-ui #contenu { width: min(680px, 100%); margin-inline: auto; }
  .mobile-topbar, .mobile-tabbar { right: max(0px, calc((100vw - 680px) / 2)); left: max(0px, calc((100vw - 680px) / 2)); border-right: 1px solid rgba(143,202,195,.15); border-left: 1px solid rgba(143,202,195,.15); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-ui *, .mobile-ui *::before, .mobile-ui *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) {
  .mobile-tabbar, .mobile-topbar { border: 1px solid CanvasText; background: Canvas; }
  .mobile-tabbar button[aria-current="page"] { outline: 2px solid Highlight; }
}