:root{
    /* ===== Theme ===== */
    --bg:#0b1224;
    --bg2:#070c18;
    --txt:rgba(255,255,255,.92);
    --shadow:0 12px 30px rgba(0,0,0,.28);

    --red:#f2a7b5;
    --teal: rgba(170, 221, 227, .92);

    /* ===== Real visible height (set in JS via visualViewport) ===== */
    --appH: 100vh;

    /* ===== Safe padding / spacing ===== */
    --pad: clamp(8px, 1.2vw, 12px);
    --gapX: clamp(8px, 1.2vw, 12px);     /* gap between creature cards in landscape */
    --gapY: clamp(12px, 1.6vw, 16px);    /* gap inside button grids */
    --blockGap: clamp(12px, 2.0vw, 18px);/* gap between buttons block and creatures block */

    --topbarH: 64px; /* measured in JS */
    --zoneTopOffset: clamp(6px, 1.2vh, 12px);
    --bottomComfort: calc(env(safe-area-inset-bottom, 0px) + 6px);

    /* ===== Top bar sizes ===== */
    --btnSize: clamp(38px, 7.5vmin, 56px);
    --btnRadius: clamp(12px, 2.4vmin, 16px);
    --iconSize: clamp(14px, 3vmin, 20px);
    --dotSize: clamp(12px, 3vmin, 20px);

    /* ===== Landscape sizing (default) ===== */
    --oppBtnW: clamp(72px, 10.5vw, 110px);
    --oppBtnH: clamp(32px, 5.5vh, 48px);
    --oppBtnR: clamp(12px, 1.8vmin, 16px);
    --oppBtnF: clamp(10px, 1.3vw, 14px);

    --meBtnW: clamp(86px, 12.5vw, 135px);
    --meBtnH: clamp(38px, 6.5vh, 58px);
    --meBtnR: clamp(14px, 2.1vmin, 18px);
    --meBtnF: clamp(11px, 1.55vw, 16px);

    /* Creature "cubes" */
    --cardSize: clamp(46px, 6.2vw, 70px);

    /* Square buttons (Banc / points de Passe) */
    --sqBtnSize: clamp(44px, 6.0vw, 66px);
  }

  *{ box-sizing:border-box; }
  html, body{ height:100%; }

  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 28% 12%, #3b6fb6 0%, #1b2f5a 28%, var(--bg) 60%, var(--bg2) 100%);
    color: var(--txt);
    overflow:hidden;               /* 1 écran */
    -webkit-tap-highlight-color: transparent;
    height: var(--appH);           /* follow real visible height */
  }

  /* ===== Top bar ===== */
  .topBar{
    position:fixed; top:0; left:0; right:0;
    z-index:10070;  /* Au-dessus de tout sauf les toasts */
    padding: calc(env(safe-area-inset-top,0px) + 4px) 0 4px 0;
    backdrop-filter: blur(10px);
    background: rgba(12,18,40,.16);
    pointer-events: auto;  /* S'assurer que les clics sont captés */
  }
  .topBarInner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 8px;
    background: rgba(12,18,40,.34);
    box-shadow: var(--shadow);
    pointer-events: auto;  /* S'assurer que les clics sont captés */
  }
  .menuBtn{
    width:var(--btnSize);
    height:var(--btnSize);
    border-radius:var(--btnRadius);
    background: rgba(255,255,255,.07);
    color:#fff;
    font-size:var(--iconSize);
    font-weight:900;
    border:none;
    cursor:pointer;
    user-select:none;
    touch-action: manipulation;
    pointer-events: auto;  /* S'assurer que les clics sont captés */
  }
  .menuBtn:active{ transform: translateY(1px); }
  .turnDot{
    width:var(--dotSize);
    height:var(--dotSize);
    border-radius:999px;
    background: 
      radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 65%),
      #22c55e;
    box-shadow: 
      0 6px 18px rgba(0,0,0,.3), 
      0 0 16px rgba(34,197,94,.7),
      inset 0 1px 2px rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,.25);
    transition: all 250ms ease;
    animation: pulse-green 2s ease-in-out infinite;
  }
  .turnDot.red{ 
    background: 
      radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), transparent 65%),
      #ef4444;
    box-shadow: 
      0 6px 18px rgba(0,0,0,.3), 
      0 0 16px rgba(239,68,68,.6),
      inset 0 1px 2px rgba(255,255,255,0.3);
    animation: pulse-red 2s ease-in-out infinite;
  }
  /* Timer chip (remplace dotB) */
  .timerChip{
    min-width: 62px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 850;
    font-size: 14px;
    letter-spacing: .5px;
    text-align: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.95);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.12);
    user-select: none;
  }
  .timerChip.running{
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 16px rgba(34,197,94,.35), inset 0 1px 2px rgba(255,255,255,.14);
    border-color: rgba(34,197,94,.35);
  }
  .timerChip.paused{
    opacity: .7;
  }
  
  /* Couleurs selon à qui appartient le timer affiché */
  .timerChip.mine{
    border-color: rgba(34,197,94,.45);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 14px rgba(34,197,94,.22), inset 0 1px 2px rgba(255,255,255,.14);
  }
  .timerChip.opponent{
    border-color: rgba(239,68,68,.45);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 14px rgba(239,68,68,.18), inset 0 1px 2px rgba(255,255,255,.14);
  }
  .timerChip.mine.running{
    border-color: rgba(34,197,94,.55);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 18px rgba(34,197,94,.35), inset 0 1px 2px rgba(255,255,255,.14);
  }
  .timerChip.opponent.running{
    border-color: rgba(239,68,68,.60);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 18px rgba(239,68,68,.30), inset 0 1px 2px rgba(255,255,255,.14);
  }
.timerChip.zero{
    color: rgba(255,220,220,.98);
    border-color: rgba(239,68,68,.45);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 16px rgba(239,68,68,.28), inset 0 1px 2px rgba(255,255,255,.12);
  }

  
  @keyframes pulse-green {
    0%, 100% { 
      box-shadow: 
        0 6px 18px rgba(0,0,0,.3), 
        0 0 16px rgba(34,197,94,.7),
        inset 0 1px 2px rgba(255,255,255,0.4);
    }
    50% { 
      box-shadow: 
        0 6px 18px rgba(0,0,0,.3), 
        0 0 24px rgba(34,197,94,.9),
        inset 0 1px 2px rgba(255,255,255,0.4);
    }
  }
  
  @keyframes pulse-red {
    0%, 100% { 
      box-shadow: 
        0 6px 18px rgba(0,0,0,.3), 
        0 0 16px rgba(239,68,68,.6),
        inset 0 1px 2px rgba(255,255,255,0.3);
    }
    50% { 
      box-shadow: 
        0 6px 18px rgba(0,0,0,.3), 
        0 0 24px rgba(239,68,68,.8),
        inset 0 1px 2px rgba(255,255,255,0.3);
    }
  }

  /* ===== Phase banner + micro feedback ===== */
  .phaseBanner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
  }
  .phaseBanner .title{
    font-weight:900;
    letter-spacing:.2px;
  }
  .phaseBanner .sub{
    opacity:.85;
    font-size:.95em;
    white-space:nowrap;
  }
  .phaseBanner .chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12);
  }

  .flash{
    animation: flashPop 220ms ease-out;
  }
  @keyframes flashPop{
    from{ transform: scale(1.02); filter: brightness(1.15); }
    to{ transform: scale(1.0); filter: brightness(1.0); }
  }

  .toastWrap{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + var(--handDockH, 0px) + 12px);
    z-index: 9999;
    display:flex;
    justify-content:center;
    pointer-events:none;
  }
  .toast{
    pointer-events:none;
    max-width: 680px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease;
    font-weight: 650;
    text-align:center;
  }
  .toast.show{
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== Focus mode (playtest) ===== */
  body.focusMode .debugOnly{ display:none !important; }
  body.focusMode #undoBtn{ display:none !important; }
  body.focusMode #rollBtn{ display:none !important; }
  body.focusMode #passStatusRow{ display:none !important; }
  body.focusMode #deckValidationErrors{ display:none !important; }

  /* ===== Main layout ===== */
  .main{
    height: var(--appH);
    padding-top: calc(var(--topbarH) + var(--pad) + var(--zoneTopOffset));
    padding-left: var(--pad);
    padding-right: var(--pad);
    padding-bottom: var(--bottomComfort);
    display:flex;
    flex-direction:column;
    gap: var(--pad);
  }

  .zone{
    display:flex;
    align-items:center;
    gap: var(--blockGap);
    width:100%;
    flex: 0 0 auto;
  }

  /* central separator kept in HTML, hidden on purpose */
  .field{ display:none; }

  /* ===== Blocks ===== */
  .buttons{
    display:grid;
    grid-template-columns: repeat(3, var(--w));
    grid-auto-rows: var(--h);
    gap: var(--gapY);
    flex: 0 0 auto;
  }

  .btn{
    border:0;
    border-radius: var(--r);
    /* Soft 3D "gel" surface */
    background:
      linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%),
      var(--red);
    color: rgba(0,0,0,.92);
    font-weight: 850;
    font-size: var(--f);
    line-height: 1.05;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 6px 8px;
    user-select:none;
    touch-action: manipulation;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 12px 22px rgba(0,0,0,.20),
      0 2px 0 rgba(255,255,255,.10) inset,
      0 -10px 18px rgba(0,0,0,.10) inset;
    position: relative;
    transform-origin: center center;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    overflow: hidden;
  }

/* ===== Zone buttons: label centered, counter below (validated UX) ===== */
.btn.game-zone-btn{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Counter badge under the label (override default inline spacing) */
.btn.game-zone-btn .zone-counter{
  margin-left: 0 !important;
  margin-top: 2px !important;
}
  .btn::before{
    content:"";
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:42%;
    border-radius:999px;
    background: radial-gradient(closest-side, rgba(255,255,255,.42), rgba(255,255,255,0));
    opacity:.65;
    pointer-events:none;
    transform: translateY(-6%);
  }
  .btn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
    opacity:.9;
  }
  .btn:active{
    transform: translateY(1px) scale(.99);
    filter: brightness(.98);
    box-shadow:
      0 9px 16px rgba(0,0,0,.18),
      0 2px 0 rgba(255,255,255,.08) inset,
      0 -10px 18px rgba(0,0,0,.12) inset;
  }


  .btn.square{
    width: var(--sqBtnSize);
    height: var(--sqBtnSize);
    min-height: unset;
    padding: 6px;
    border-radius: 16px;
  margin: 0 auto;
    margin-left:auto;
    margin-right:auto;
    justify-self:center;
    align-self:center;
  }

  .cards{
    display:flex;
    gap: var(--gapX);
    overflow:hidden;
    flex: 1 1 auto;
    min-width:0;
    align-items:center;
    justify-content:flex-start;
  }

  .card{
    width: var(--cardSize);
    height: var(--cardSize);
    border-radius: 14px;
    background: var(--teal);
    color: rgba(255,255,255,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: clamp(10px, 1.15vw, 14px);
    font-weight: 650;
    white-space:nowrap;
    box-shadow: 0 10px 18px rgba(0,0,0,.14);
    position: relative;
    transform-origin: center center;
    transition: transform 160ms ease, box-shadow 160ms ease;
    cursor: pointer;
    touch-action: manipulation;
    text-align:center;
    line-height:1.05;
  }

  /* ===== Zone themes (sizes) ===== */
  .opp{
    --w: var(--oppBtnW);
    --h: var(--oppBtnH);
    --r: var(--oppBtnR);
    --f: var(--oppBtnF);
  }
  .me{
    --w: var(--meBtnW);
    --h: var(--meBtnH);
    --r: var(--meBtnR);
    --f: var(--meBtnF);
  }

  /* ===== Interaction: rotate creature cards ===== */
  .card.is-vertical{
    transform: rotate(90deg) scale(0.92);
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
    z-index: 5;
  }

  

  /* Rotation des carrés (ex: points d'Action / points de Passe) */
  .btn.square{
    transition: transform .16s ease, box-shadow .16s ease;
    will-change: transform;
  }
  .btn.square.is-vertical{
    transform: rotate(90deg) scale(0.92);
    z-index: 5;
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
  }
/* ===== PORTRAIT ===== */
  @media (orientation: portrait){
    :root{
      /* a little tighter so everything fits */
      --pad: clamp(8px, 1.0vw, 12px);
      --gapY: clamp(10px, 1.4vh, 14px);
      --blockGap: clamp(10px, 1.4vh, 14px);
      --cardSize: clamp(64px, 11.0vw, 84px);
      --sqBtnSize: clamp(58px, 10.0vw, 78px);
    }

    .main{ gap: clamp(6px, 0.9vh, 10px); }

    .zone{
      flex-direction:column;
      align-items:stretch;
      gap: clamp(6px, 0.9vh, 10px);
    }

    .buttons{
      width:100%;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.4vh, 14px);
      /* critical: ensure lines are at least as tall as square buttons */
      grid-auto-rows: max(var(--h), var(--sqBtnSize));
    }

    .btn{
      min-height: 40px;
      font-size: clamp(12px, 3.0vw, 15px);
    }
    .btn.square{
      font-size: clamp(12px, 2.8vw, 15px);
    }

    .cards{
      width:100%;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.4vh, 14px);
      overflow: visible;
      justify-items:center;
    }
    .card{
      width:100%;
      max-width: var(--cardSize);
      height: var(--cardSize);
      font-size: clamp(12px, 3.2vw, 16px);
      white-space: normal;
      padding: 0 6px;
    }

    /* zone joueur: creatures above, buttons below */
    .me .cards{ order: 1; }
    .me .buttons{ order: 2; }
  }

  /* ===== LANDSCAPE: give more air (without touching portrait) ===== */
  @media (orientation: landscape){
    :root{
      --gapY: clamp(14px, 2.4vh, 24px);
      --blockGap: clamp(18px, 2.6vw, 32px);
      --pad: clamp(10px, 1.6vw, 16px);
    }

    .main{
      gap: clamp(18px, 3.2vh, 44px);
      padding-bottom: clamp(10px, 2vh, 24px);
    }

    /* slightly smaller red buttons in landscape */
    .opp{
      --w: clamp(70px, 10.2vw, 104px);
      --h: clamp(30px, 5.2vh, 44px);
      --f: clamp(10px, 1.25vw, 13px);
    }
    .me{
      --w: clamp(82px, 12.0vw, 124px);
      --h: clamp(34px, 5.9vh, 52px);
      --f: clamp(11px, 1.45vw, 15px);
    }
  }


  /* ===== Setup Drawer (menu droite / ≡) ===== */
  .setupOverlay{
    position: fixed;
    inset: 0;
    z-index: 180;
    display: none;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
  }
  .setupOverlay.open{ display:block; }

  .setupDrawer{
    position: fixed;
    top: 0;
    right: 0;
    height: var(--appH);
    width: min(520px, 92vw);
    z-index: 190;
    background: rgba(7, 16, 29, .94);
    border-left: 1px solid rgba(255,255,255,.12);
    box-shadow: -18px 0 60px rgba(0,0,0,.45);
    transform: translateX(102%);
    transition: transform .18s ease-out;
    display:flex;
    flex-direction:column;
    overflow: hidden;
    padding-top: env(safe-area-inset-top,0px);
  }
  .setupDrawer.open{ transform: translateX(0); }

  .setupHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
  .setupHeader .title{
    font-weight: 900;
    letter-spacing: .3px;
  }
  .setupClose{
    width: 44px;
    height: 44px;
    border-radius: 16px;
  margin: 0 auto;
    border: 0;
    background: rgba(255,255,255,.10);
    color:#fff;
    font-weight: 900;
    cursor:pointer;
    touch-action: manipulation;
  }
  .setupClose:active{ transform: translateY(1px); }

  .setupBody{
    padding: 14px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    display:flex;
    flex:1 1 auto;
    min-height:0;
    flex-direction:column;
    gap: 14px;
    /* ensures last buttons remain reachable on mobile (browser bars / safe-area) */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 84px);
    scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  }

  .setupNote{
    opacity: .92;
    font-weight: 650;
    line-height: 1.25;
  }

  .fieldRow{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    align-items:center;
  }
  .fieldRow label{
    font-size: 13px;
    opacity: .85;
    font-weight: 750;
  }
  .inp, .sel, .txt{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 11px 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.95);
    font-size: 14px;
    outline: none;
  }
  .txt{ width:100%; min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

  .setupActions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  .setupBtn{
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 10px 18px; /* 🔧 Réduit pour éviter le scroll */
    font-weight: 800;
    font-size: 13px; /* 🔧 Réduit de 15px */
    cursor:pointer;
    color: rgba(0,0,0,.95);
    background: 
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 70%),
      linear-gradient(135deg, #a9dfe3 0%, #8ecfd5 100%);
    box-shadow: 
      0 4px 12px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,0.3);
    user-select:none;
    touch-action: manipulation;
    transition: all .2s ease;
  }
  .setupBtn:hover{
    transform: translateY(-2px);
    box-shadow: 
      0 8px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .setupBtn:active{
    transform: scale(0.96);
  }
  .setupBtn[disabled]{ opacity:.55; filter: grayscale(.25); }
  .inp[disabled], textarea.inp[disabled]{ opacity:.55; }

  .setupBtn.secondary{
    background: 
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 70%),
      rgba(255,255,255,.08);
    color: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 
      0 4px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .setupBtn.danger{
    background: 
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 70%),
      rgba(239, 68, 68, 0.25);
    color: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: 
      0 4px 14px rgba(239, 68, 68, .25),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .setupBtn:active{ transform: translateY(1px); }

  /* ===== Setup UI tweaks (icon button + drawers) ===== */
  .setupBtn.iconOnly{
    padding: 10px 12px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  details.drawer{
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    overflow: hidden;
  }
  details.drawer + details.drawer{ margin-top: 12px; }
  .drawerSummary{
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 12px 14px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  /* hide default marker */
  .drawerSummary::-webkit-details-marker{ display:none; }
  .drawerSummary::after{
    content: "▾";
    opacity: .9;
    font-weight: 900;
    transform: translateY(-1px);
    transition: transform .18s ease;
  }
  details.drawer[open] .drawerSummary::after{ transform: rotate(180deg); }
  .drawerBody{ padding: 12px 14px 14px; }

  .fieldRow.pills{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pillInfo{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 10px 16px; /* 🔧 Légèrement plus large */
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: 
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 70%),
      rgba(255,255,255,.08); /* 🔧 Gradient moderne */
    box-shadow: 0 3px 10px rgba(0,0,0,0.15); /* 🔧 Ombre légère */
    font-size: 13px;
    font-weight: 850;
    transition: all .2s ease;
  }
  .pillInfo:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  }
  .pillInfo small{ opacity:.85; font-weight: 750; }

  /* ===== Action Modal (menu fenêtre) ===== */
  .actionModal{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .actionModal.open{ display:flex; }

  .modalBackdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
  }

  .modalPanel{
    position: relative;
    width: min(560px, 92vw);
    max-height: min(720px, 84vh);
    border-radius: 26px;
    background: rgba(7, 40, 102, .92);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    overflow: hidden;
    display:flex;
    flex-direction:column;
  }

  .modalHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 16px 10px 16px;
    background: rgba(0,0,0,.10);
  }

  .modalTag{
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.18);
    font-weight: 700;
    letter-spacing: .2px;
  }

  .modalClose{
    width: 44px;
    height: 44px;
    border-radius: 16px;
  margin: 0 auto;
    border: 0;
    background: rgba(0,0,0,.18);
    color: #fff;
    font-weight: 900;
    cursor:pointer;
    touch-action: manipulation;
  }
  .modalClose:active{ transform: translateY(1px); }

  .modalContext{
    padding: 0 16px 10px 16px;
    opacity: .9;
    font-weight: 700;
  }

  .modalList{
    padding: 12px 14px 16px 14px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }

  .modalItem{
    width:100%;
    border:0;
    border-radius: 999px;
    padding: 16px 18px;
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.95);
    font-size: clamp(14px, 2.2vw, 22px);
    font-weight: 800;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    touch-action: manipulation;
  }
  .modalItem small{
    font-size: .78em;
    opacity: .85;
    font-weight: 750;
  }
  .modalItem:active{ transform: translateY(1px); }




    /* Prevent text selection / callout on long-press (mobile) */
    body, .btn, .card, .topBtn, .tile, .slot {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    /* Prevent selection highlight in some browsers */
    * { -webkit-tap-highlight-color: transparent; }

  /* ===== Floating Hand Button ===== */
  .handFloatingBtn{
    position: fixed;
    /* Positions gérées par JavaScript pour éviter les sursauts */
    /* right et top sont définis dynamiquement en JS */
    width: clamp(56px, 12vmin, 70px);
    height: clamp(56px, 12vmin, 70px);
    border-radius: 50%;
    background: linear-gradient(135deg, #4a9eff 0%, #2563eb 100%);
    border: 3px solid rgba(255,255,255,.3);
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 4px rgba(74,158,255,.2);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 110;  /* Légèrement au-dessus de la piste de points */
    touch-action: none;
    transition: box-shadow 200ms ease;
    user-select: none;
  }
  
  /* Landscape mode: pas de override de position, tout géré en JS */
  @media (orientation: landscape) {
    .handFloatingBtn{
      /* Positions gérées en JS */
    }
  }
  
  .handFloatingBtn.visible{ display: flex; }
  .handFloatingBtn.dragging{
    transition: none;
    opacity: 0.9;
  }
  
  .handFloatingBtn:hover{
    box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 6px rgba(74,158,255,.3);
  }
  .handFloatingBtn .count{
    font-size: clamp(22px, 5.5vmin, 32px);
    font-weight: 900;
    opacity: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
  }

  /* ===== Hand Modal ===== */
.handCards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
  padding-bottom: 16px;
  /* IMPORTANT: pas de scroll ici (nested scroll = buggy sur mobile).
     Le scroll se fait sur .panelBody */
  overflow: visible;
  max-height: none;
  -webkit-overflow-scrolling: auto;
}

/* 🔧 Deck panel: garder une grille.
   IMPORTANT: en mode enfant (art-only), la carte contient une illustration en position absolute.
   En flex sans largeur explicite, les items peuvent se "collapser" (invisibles).
   La grille garantit une taille stable et un rendu identique à la main. */
#panelDeck .handCards,
#deckCardsContainer{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  align-items: stretch;
  align-content: start;
}
.handCard{
    aspect-ratio: 2.5/3.5;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--teal) 0%, rgba(120,200,210,.85) 100%);
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 12px;
    cursor: pointer;
    /* ✅ Mobile: empêche le menu long-press (copier/télécharger) + sélection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: transform 160ms ease, opacity 200ms ease;
    position: relative;
    overflow: hidden;
    /* 🔧 CORRECTION: Empêcher tout déplacement accidentel */
    will-change: auto;
  }
  .handCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .handCard:active{
    transform: scale(0.97);
  }
  
  /* 🔧 CORRECTION: Sur mobile, désactiver le scale :active qui cause des bugs visuels */
  @media (max-width: 720px) {
    .handCard:active {
      transform: none;
    }
    .handCard:hover {
      transform: none;
    }
  }
  
  .handCard.unaffordable{
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
  }
  .handCard.unaffordable:hover{
    transform: none;
  }
  .handCard .card-cost{
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.7);
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: #ffd700;
  }
  .handCard .cardName{
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: rgba(0,0,0,.9);
    margin-top: 36px;
    margin-bottom: 6px;
    width: 100%;
  }
  .handCard .cardType{
    font-size: 10px;
    font-weight: 600;
    color: rgba(0,0,0,.75);
    margin-bottom: 4px;
  }
  .handCard .cardSubtypes{
    font-size: 9px;
    font-weight: 600;
    font-style: italic;
    color: rgba(0,0,0,.65);
    margin-bottom: 6px;
  }
  .handCard .cardText{
    font-size: 9px;
    line-height: 1.3;
    color: rgba(0,0,0,.8);
    overflow-y: auto;
    flex: 1;
    width: 100%;
  }


/* ===== Unified Panel (modal + drawer) ===== */
.panelOverlay{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.45);
  z-index: 10075;  /* Au-dessus de la topBar */
  /* Évite de bloquer l'app si l'overlay est présent sans être "open" */
  pointer-events: none;
}
.panelOverlay.open{
  /* Overlay shown */
  display:flex;
  pointer-events: auto;

  align-items:flex-start;
  justify-content:center;

  /* Define padding as CSS variables so modal max-height can account for it */
  --overlayPadTop: calc(env(safe-area-inset-top,0px) + clamp(56px, var(--topbarH, 64px), 96px) + 12px);
  --overlayPadBottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: var(--overlayPadTop) 0 var(--overlayPadBottom);

  /* IMPORTANT: internal scroll is handled by the panel body; overlay shouldn't need to scroll */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}


.panelOverlay.isDrawer{
  padding: 0 !important;
  align-items: stretch;
  justify-content: flex-end;
}


/* Panel principal : refonte complète pour scroll fiable */

.panel{
  /* IMPORTANT: éviter les bugs iOS de scroll dans un élément transformé */
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(520px, 92vw);
  /* Hauteur: laisser auto; le scroll se fait sur l'overlay (desktop + mobile) */
  height: auto;
  max-height: none;
  background: rgba(11,18,36,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  margin: 0 auto;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Variante modal: le contenu peut dépasser, on scrolle sur l'overlay */
.panel--modal .panelBody{
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  flex: none;
  min-height: auto;
  max-height: none;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Sur mobile, prendre encore plus de place */
@media (max-width: 768px) {
  /* Sur mobile, garder le panneau SOUS la topBar (safe-area + hauteur topBar).
     Les overrides "padding:10px" masquaient le header (croix) derrière la topBar. */
  .panelOverlay.open{
    /* Same as desktop, but slightly tighter spacing */
    --overlayPadTop: calc(env(safe-area-inset-top,0px) + clamp(56px, var(--topbarH, 64px), 96px) + 10px);
    --overlayPadBottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding: var(--overlayPadTop) 0 var(--overlayPadBottom);
    overflow: hidden;
  }

  .panel {
    height: auto;
    max-height: none;
    width: 95vw;
  }
  .panelBody{
    overflow: visible; /* pas de scroll interne mobile */
    -webkit-overflow-scrolling: auto;
    flex: none;
    min-height: auto;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}

/* (portrait) : ne pas écraser le padding-top calculé (sinon la croix devient inaccessible) */

.panel--drawer{
  left: auto;
  right: 0;
  top: 0;
  transform: none;
  height: var(--appH, 100vh);
  max-height: var(--appH, 100vh);
  width: min(520px, 92vw);
  border-radius: 0;
  border-left: 1px solid rgba(255,255,255,.12);
}

.panelHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex-shrink: 0; /* Ne jamais réduire le header */
  position: sticky;
  top: 0;
  z-index: 12;
  background: rgba(11,18,36,.98);
  backdrop-filter: blur(10px);
}
.panelTitle{
  font-weight: 900;
  letter-spacing: .3px;
}
.panelClose{
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 🔧 CORRECTION: S'assurer que le bouton est toujours cliquable */
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 🔧 CORRECTION: Forcer le z-index pour Firefox mobile */
  position: relative;
  z-index: 1;
}
.panelContext{
  padding: 0 12px 8px 12px;
  opacity: .86;
  font-size: 12px;
  flex-shrink: 0;
}

/* PanelBody : la clé du scroll qui fonctionne */
.panelBody{
  padding: 12px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); /* évite que la barre PA + safe-area cache le contenu */
  overflow-y: auto; /* Force le scroll visible */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0; /* Flex basis 0 pour forcer le calcul correct */
  min-height: 0; /* Critique pour que flex fonctionne */
  max-height: none; /* hauteur gérée par le conteneur */
  overscroll-behavior: contain;
  touch-action: pan-y;
  position: relative;
}

.panelView{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Style de scrollbar plus visible pour indiquer qu'on peut scroller */
.panelBody::-webkit-scrollbar {
  width: 8px;
}

.panelBody::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.panelBody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.panelBody::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Sticky action rows inside panels (keeps critical buttons reachable on small screens) */
.stickyRow{
  position: sticky;
  bottom: -1px;
  z-index: 5;
  padding: 10px 0 6px 0;
  margin-top: 10px;
  background: linear-gradient(to top, rgba(11,18,36,.96) 70%, rgba(11,18,36,0));
  backdrop-filter: blur(6px);
}

.setupDetails summary{
  cursor:pointer;
  user-select:none;
  margin: 6px 0 10px 0;
  font-weight: 700;
  opacity: .92;
}

.logBox{
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  max-height: 52vh;
  overflow:auto;
}

/* Hide legacy modals if still present in CSS expectations (defensive) */

/* ===== Animations cartes ===== */
@keyframes card-tap {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

@keyframes card-untap {
  0% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

.card-tapping {
  animation: card-tap 0.3s ease forwards;
}

.card-untapping {
  animation: card-untap 0.3s ease forwards;
}

@keyframes slide-from-deck {
  0% { 
    transform: translateY(50px) scale(0.8);
    opacity: 0;
  }
  100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.card-drawing {
  animation: slide-from-deck 0.5s ease;
}

/* ===== Preview cartes (hover zoom) ===== */
.card-preview-container {
  position: relative;
}

.card-preview-zoom {
  position: absolute;
  z-index: 10000;
  pointer-events: none;
  transition: opacity 0.2s ease;
  opacity: 0;
}

.card-preview-zoom.visible {
  opacity: 1;
}

.card-preview-zoom img {
  width: 280px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ===== Historique & Undo ===== */
.history-panel {
  position: fixed;
  right: 16px;
  top: 80px;
  width: 280px;
  max-height: 400px;
  background: rgba(11, 18, 36, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 12px;
  overflow-y: auto;
  z-index: 10050;
  display: none;
}

.history-panel.open {
  display: block;
}

.history-entry {
  padding: 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  border-left: 3px solid rgba(170, 221, 227, 0.5);
}

.history-entry.undoable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-entry.undoable:hover {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(170, 221, 227, 1);
}

/* ===== Mode Spectateur ===== */
.spectator-mode {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(255, 165, 0, 0.9);
  color: #000;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  z-index: 9500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.spectator-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 80px;
}

.spectator-hand {
  background: rgba(11, 18, 36, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px;
}

.spectator-hand-title {
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Reconnexion automatique ===== */
.reconnecting-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: rgba(255, 193, 7, 0.95);
  color: #000;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  z-index: 9500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
}

.reconnecting-banner.visible {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}
#setupOverlay,#setupDrawer,#logModal,#actionModal{ display:none !important; }


button:disabled{opacity:0.5;filter:grayscale(0.2);}

/* ===== Game Zones Improvements ===== */

/* Compteurs de zones */
.zone-counter {
  /* Smaller + better spacing so the badge never eats the label text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-top: 0;
  margin-left: 8px;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.4);
  font-size: 0.62em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Keep label readable even on narrow buttons */
.btn .zone-counter{ flex: 0 0 auto; }

/* Boutons de zone cliquables */
.game-zone-btn {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.game-zone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(0,0,0,.22);
}

.game-zone-btn:active {
  transform: translateY(0);
}

/* Zone terrain (remplace les 6 cartes fixes) */
.terrain-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 14px;
  cursor: pointer;
  transition: all 200ms ease;
  min-height: var(--cardSize);
  position: relative;
}

.terrain-zone:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  transform: scale(1.02);
}

.terrain-zone:active {
  transform: scale(0.98);
}

/* 🎯 Zone cible quand un effet attend un pick — pulse vert */
.terrain-zone.pendingTarget {
  border-color: rgba(80, 220, 120, 0.70) !important;
  box-shadow: 0 0 12px rgba(80, 220, 120, 0.45), inset 0 0 8px rgba(80, 220, 120, 0.12) !important;
  animation: pendingPulse 1.4s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(80,220,120,0.45), inset 0 0 8px rgba(80,220,120,0.12); }
  50%      { box-shadow: 0 0 22px rgba(80,220,120,0.70), inset 0 0 14px rgba(80,220,120,0.22); }
}

.terrain-placeholder {
  text-align: center;
  padding: 8px;
}

.terrain-counter {
  font-size: clamp(20px, 4vmin, 32px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.terrain-label {
  font-size: clamp(10px, 1.5vmin, 14px);
  font-weight: 700;
  opacity: 0.8;
}

/* Actions rapides terrain (toujours visibles) */
.terrain-quick-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.tqa-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: transform 120ms ease, background 120ms ease;
}

.tqa-btn:hover { transform: translateY(-1px); background: rgba(0,0,0,.28); }
.tqa-btn:active { transform: translateY(0); }

/* ===== Zone Modals ===== */
.zone-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;  /* Au-dessus de la piste de points */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  padding: max(16px, env(safe-area-inset-top, 0px)) 
           max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px)) 
           max(16px, env(safe-area-inset-left, 0px));
}

.zone-modal.open {
  display: flex;
}

.zone-modal-content {
  background: linear-gradient(135deg, #0f1b3a 0%, #08111f 100%);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 20px;
  width: min(480px, 90vw);
  max-height: min(680px, 80vh);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zone-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.zone-modal-title {
  font-size: clamp(16px, 2.5vmin, 20px);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-modal-count {
  background: rgba(255,255,255,.1);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 700;
}

.zone-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all 150ms ease;
}

.zone-modal-close:hover {
  background: rgba(255,255,255,.15);
  transform: scale(1.05);
}

.zone-modal-close:active {
  transform: scale(0.95);
}

.zone-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.zone-empty {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.6;
}

.zone-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.zone-empty-text {
  font-size: 14px;
  font-weight: 600;
}

/* ===== Game Cards Display ===== */
.game-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

/* Mobile enfant : 5 créatures par rangée dans le terrain / vestiaire */
@media (max-width: 720px) {
  .game-card-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  /* Cartes plus compactes */
  .game-card {
    border-radius: 6px;
    border-width: 1px;
  }
  /* Bouton tap/coucher : plus petit pour ne pas couvrir l'art */
  .terrain-tap-btn {
    width: 24px;
    height: 24px;
    top: 2px;
    right: 2px;
    border-radius: 5px;
    font-size: 13px;
  }
}

.game-card {
  aspect-ratio: 2.5/3.5;
  border-radius: 10px;
  background: linear-gradient(135deg, #2a5a8a 0%, #1a3a5a 100%);
  border: 2px solid rgba(255,255,255,.2);
  padding: 10px;
  position: relative;
  cursor: pointer;
  transition: all 180ms ease;
  overflow: hidden;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.4);
}

.game-card:active {
  transform: translateY(-2px);
}

.game-card.tapped {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.game-card.tapped::after {
  content: '↷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 900;
  color: rgba(255,255,255,.3);
  pointer-events: none;
}

.card-cost {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.7);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #ffd700;
}

.terrain-tap-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transition: all 150ms ease;
  z-index: 10;
}

.terrain-tap-btn:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.5);
  transform: scale(1.1);
}

.terrain-tap-btn:active {
  transform: scale(0.95);
}

.card-name {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 36px;
  margin-bottom: 6px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}

.card-type {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 8px;
  color: #aaddff;
}

.card-subtypes {
  font-size: 9px;
  opacity: 0.7;
  font-style: italic;
}

.card-text {
  font-size: 9px;
  line-height: 1.3;
  opacity: 0.9;
  margin-top: 8px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card actions (context menu) */
.card-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.game-card:hover .card-actions {
  opacity: 1;
}

.card-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}

.card-action-btn:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.1);
}

.card-action-btn:active {
  transform: scale(0.95);
}

/* Chief card special styling */
.chief-card {
  background: linear-gradient(135deg, #8b5a3c 0%, #5a3a2c 100%);
  border: 3px solid #ffd700;
}

/* Token card styling */
.token-card {
  background: linear-gradient(135deg, #4a4a6a 0%, #2a2a4a 100%);
  border-style: dashed;
}

/* ===== Action Dice Display ===== */
.action-die-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: rgba(0,0,0,.2);
  border-radius: 12px;
  margin: 16px 0;
}

.die-value {
  font-size: 64px;
  font-weight: 900;
  color: #4a9eff;
  text-shadow: 0 4px 8px rgba(0,0,0,.5);
  line-height: 1;
}

.die-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.die-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  transition: all 150ms ease;
}

.die-btn:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.05);
}

.die-btn:active {
  transform: scale(0.95);
}

.die-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ===== Card Modal (sous-modal) ===== */
.card-modal {
  position: fixed;
  inset: 0;
  /* Must be above the unified panel overlay (.panelOverlay is 10075) */
  z-index: 10100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(12px);
  /* ✅ PATCH 2b : manipulation au lieu de none → les taps sont bien propagués sur iOS Safari */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* 🔧 CORRECTION: Padding pour éviter les zones système sur mobile */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.card-modal.open {
  display: flex;
}

.card-modal-content {
  background: linear-gradient(135deg, #1a2a4a 0%, #0a141f 100%);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 16px;
  margin: 0 auto;
  width: min(420px, 88vw);
  max-height: min(720px, 85vh);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 🔧 CORRECTION: Position fixe relative pour éviter tout décalage */
  position: relative;
  /* 🔧 CORRECTION: Permettre le scroll vertical mais pas de gestes horizontaux */
  touch-action: pan-y;
}

/* 🔧 CORRECTION MOBILE: Modal plus compact et mieux centré */
@media (max-width: 720px) {
  .card-modal {
    /* 🔧 Padding supplémentaire pour éviter les bords sur mobile */
    padding: max(env(safe-area-inset-top, 0px), 20px) 12px max(env(safe-area-inset-bottom, 0px), 20px) 12px;
  }
  
  .card-modal-content {
    /* 🔧 Largeur légèrement réduite pour mieux voir */
    width: min(380px, 92vw);
    /* 🔧 Hauteur max réduite pour éviter les coupures */
    max-height: min(600px, 80vh);
    /* 🔧 Forcer le centrage parfait */
    margin: auto;
  }
  
  .card-modal-header {
    padding: 12px 14px;
  }
  
  .card-modal-header span {
    font-size: 15px;
  }
  
  .card-modal-body {
    padding: 12px;
  }
}

.card-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px; /* 🔧 Réduit de 14px à 10px */
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.card-modal-header span {
  font-size: 14px; /* 🔧 Réduit de 16px */
  font-weight: 800;
}

.card-modal-close {
  width: 30px; /* 🔧 Réduit de 36px */
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 16px; /* 🔧 Réduit de 18px */
  font-weight: 900;
  cursor: pointer;
  transition: all 150ms ease;
  /* ✅ PATCH 2c : garantir la réponse au tap sur iOS */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.card-modal-close:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.05);
}

.card-modal-close:active {
  transform: scale(0.95);
}

.card-modal-body {
  padding: 12px 14px; /* 🔧 Réduit pour mobile */
  overflow-y: auto;
  flex: 1;
}

/* Fiche carte */
.card-sheet {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.card-sheet-name {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #4ac3ff;
}

.card-sheet-type {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}

.card-sheet-subtypes {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
}

.card-sheet-cost {
  display: inline-block;
  background: rgba(255,215,0,.2);
  border: 2px solid rgba(255,215,0,.5);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #ffd700;
  margin-bottom: 10px;
}

.card-sheet-text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  white-space: pre-wrap;
}

/* Boutons d'actions zone */
.zone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.zone-action-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.zone-action-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-2px);
}

.zone-action-btn:active {
  transform: translateY(0);
}

/* Actions carte */
.card-actions-section {
  margin-bottom: 14px;
}

.card-actions-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-action-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-action-item {
  padding: 13px 24px;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 70%),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.card-action-item:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  transform: translateX(4px);
}

.card-action-item:active {
  transform: translateX(0);
}

.card-action-item.disabled-action {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

.card-action-item.disabled-action:hover {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  transform: translateX(0);
}

/* Marqueurs (counters) */
.counters-section {
  margin-bottom: 14px;
}

.counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  margin-bottom: 6px;
}

.counter-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
}

.counter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.counter-value {
  min-width: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: #4ac3ff;
}

.counter-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: all 150ms ease;
}

.counter-btn:hover {
  background: rgba(255,255,255,.15);
  transform: scale(1.05);
}

.counter-btn:active {
  transform: scale(0.95);
}

/* Note section */
.note-section {
  margin-bottom: 14px;
}

.note-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.note-input:focus {
  outline: none;
  border-color: #4ac3ff;
  background: rgba(255,255,255,.12);
}

.note-input::placeholder {
  color: rgba(255,255,255,.4);
}


/* ===== FIX: UI overlays above the unified panel overlay ===== */
.history-panel{ z-index: 10080 !important; }
.toastWrap{ z-index: 10090 !important; }
.reconnecting-banner, .spectator-mode{ z-index: 10040 !important; }

/* Pixi overlay: does not block clicks */
.pixi-overlay{pointer-events:none;}

/* ===== 🎯 MODE ENFANT : Animations pour la piste de score ===== */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Effet de victoire */
.scoreBarFill.victory {
  animation: pulse 1s ease-in-out infinite;
  box-shadow: 0 0 30px currentColor !important;
}


/* --- MODE ENFANT: actions bar --- */
.fieldRow.stickyRow{
  justify-content: center;
}
#endTurnBtn{ display:none !important; }

/* --- ScoreTrack overlay (cute) --- */
.scoreTrackFloating{
  position: fixed;
  top: 80px;  /* En dessous de la topBar pour éviter tout chevauchement */
  left: 50%;
  transform: translateX(-50%);
  /* Permet les interactions pour le drag */
  pointer-events: auto;
  /* Z-index modéré : au-dessus du jeu, mais sous les menus et modales */
  z-index: 100;
  width: min(520px, calc(100vw - 20px));
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  cursor: move;
  transition: box-shadow 0.2s ease;
  user-select: none;
}

.scoreTrackFloating:hover{
  box-shadow: 0 16px 35px rgba(0,0,0,.28);
  background: rgba(255,255,255,0.14);
}

.scoreTrackFloating.dragging{
  cursor: grabbing;
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  transform: translateX(-50%) scale(1.02);
  z-index: 10065;  /* Plus haut pendant le drag pour passer au-dessus de tout */
}
.scoreTrackFloating .stfTitle{
  text-align:center;
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 8px;
  opacity: .9;
  pointer-events: none;
}
.scoreTrackFloating .stfRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0;
  pointer-events: none;
}
.scoreTrackFloating .stfLabel{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,.18);
}
.scoreTrackFloating .stfBar{
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.scoreTrackFloating .stfFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(169,223,227,.95);
}
.scoreTrackFloating .stfValue{
  width: 44px;
  text-align:right;
  font-weight: 900;
  opacity: .9;
}

/* --- Portrait mobile : placer la course aux points de manière centree --- */
@media (max-width: 520px) and (orientation: portrait){
  .scoreTrackFloating{
    top: auto;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 400px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  .scoreTrackFloating .stfTitle{ font-size: 14px; margin-bottom: 6px; }
  .scoreTrackFloating .stfBar{ height: 10px; }
  .scoreTrackFloating .stfValue{ width: 40px; font-size: 13px; }
}

/* --- Card art (images on cards) --- */
.cardArt{
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* cardArt can also contain an <img> (mode enfant) */
.cardArt img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* ✅ Mobile: empêche le menu long-press sur l'image */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ==============================
   MODE ENFANT : ART ONLY
   ============================== */

.handCard.enfantArtOnly,
.game-card.enfantArtOnly{
  padding: 0 !important;
}

.handCard.enfantArtOnly .card-cost,
.handCard.enfantArtOnly .cardName,
.handCard.enfantArtOnly .cardType,
.handCard.enfantArtOnly .cardSubtypes,
.handCard.enfantArtOnly .cardText,
.handCard.enfantArtOnly .card-name,
.handCard.enfantArtOnly .card-type,
.handCard.enfantArtOnly .card-subtypes,
.handCard.enfantArtOnly .card-text{
  display: none !important;
}

.game-card.enfantArtOnly .card-cost,
.game-card.enfantArtOnly .card-name,
.game-card.enfantArtOnly .card-type,
.game-card.enfantArtOnly .card-subtypes,
.game-card.enfantArtOnly .card-text{
  display: none !important;
}



/* Nom de carte : label transparent en bas de l'art (mode enfant, zone modal) */
.enfantCardName {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.72) 55%);
  padding: 18px 4px 3px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.2px;
}
/* Plus grand dans le zone-modal plein écran */
.zone-modal-body .enfantCardName {
  font-size: 10px;
  padding: 22px 4px 4px;
}

/* Fix Firefox: ensure art-only cards show full illustration */
.handCard.enfantArtOnly,
.game-card.enfantArtOnly{
  position: relative;
  overflow: hidden;
}.handCard.enfantArtOnly .cardArt,
.game-card.enfantArtOnly .cardArt{
  position: absolute;
  inset: 0;
  margin: 0 !important;
  border-radius: inherit;
  aspect-ratio: auto !important;
  height: 100%;
  /* 🔧 CORRECTION: Empêcher les événements sur le wrapper pour éviter les bugs */
  pointer-events: none;
}
.handCard.enfantArtOnly .cardArt img,
.game-card.enfantArtOnly .cardArt img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔧 CORRECTION: Empêcher les événements sur l'image */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.cardArtModal{
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
}

.enfantCounters{
  position: absolute;
  left: 10px;
  bottom: 10px;
}


/* ===== Panel "Partie" (menu milieu) meta ===== */
.phaseBannerTitle{ font-weight: 900; font-size: 18px; margin-bottom: 4px; }
.phaseBannerSub{ font-size: 13px; opacity: .85; }
.gameMeta{ margin-top: 12px; display:flex; flex-direction:column; gap:8px; }
.metaRow{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.metaLabel{ font-size: 12px; opacity:.8; letter-spacing:.2px; }
.metaValue{ font-size: 14px; font-weight: 800; }


/* FIX: ensure hidden panel views are truly hidden */
.panelView[hidden]{
  display: none !important;
}


/* ===== Mode enfant : fiche carte (modal) ===== */
.cardArtModal{
  aspect-ratio: 2.5 / 3.5; /* format carte portrait */
  max-height: 46vh;
  box-shadow: none !important;
  border: none !important;
}
.cardArtModal img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}
.enfantCardText{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 15px;
  line-height: 1.35;
}


/* ===== PATCH20: modal choix effet (sans confirm navigateur) ===== */
.choiceModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.choiceModalCard{
  width: min(420px, 92vw);
  background: rgba(30,30,36,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  padding: 14px 14px 12px;
}
.choiceModalTitle{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}
.choiceModalBody{
  white-space: pre-wrap;
  line-height: 1.25;
  font-size: 14px;
  opacity: .95;
  margin-bottom: 12px;
}
.choiceModalBtns{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.choiceModalBtn{
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.choiceModalBtn:hover{ background: rgba(255,255,255,.18); }

/* ===== Bouton STOP (rond, propre) ===== */
#endPhase2Btn, #endPhaseBtn{
  border-radius: 999px !important;
}
#endPhase2Btn .icon, #endPhaseBtn .icon{ display:none !important; }

/* ===== Course aux 9 points plus compacte ===== */
.scoreTrack{
  transform: scale(.88);
  transform-origin: top right;
}
@media (max-width: 600px){
  .scoreTrack{ transform: scale(.82); }
}


/* === PATCH UI BUBBLES + HAND DOCK === */

/* Background: aquatique + brume magique (mouvement lent) */
body{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(80,200,255,0.18), rgba(0,0,0,0) 60%),
              radial-gradient(900px 700px at 80% 30%, rgba(180,120,255,0.16), rgba(0,0,0,0) 55%),
              linear-gradient(180deg, #061829 0%, #05131f 45%, #040f19 100%);
  overflow:hidden;
}
body::before, body::after{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(400px 260px at 30% 30%, rgba(120,255,240,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(520px 360px at 70% 45%, rgba(255,255,255,0.06), rgba(0,0,0,0) 65%),
    radial-gradient(600px 420px at 55% 75%, rgba(120,160,255,0.08), rgba(0,0,0,0) 70%);
  filter: blur(18px);
  opacity:.9;
  transform: translate3d(0,0,0);
  animation: fogDrift 18s ease-in-out infinite alternate;
}
body::after{
  opacity:.55;
  filter: blur(26px);
  animation-duration: 26s;
}

@keyframes fogDrift{
  0%{ transform: translate3d(-2vw,-1vh,0) scale(1.02); }
  100%{ transform: translate3d(2vw,1.5vh,0) scale(1.05); }
}

/* Place app above background layers.
   IMPORTANT: ne pas inclure .zone-modal/.card-modal ici, sinon on casse leur position:fixed
   et les modals se retrouvent tout en bas de la page sur mobile. */
.main{
  position:relative;
  z-index:2;
}

/* Keep the top bar always clickable above the Pixi canvas and overlays.
   (A legacy stacking rule previously lowered .topBar's z-index, making
   the menu buttons non-interactive.) */
.topBar{
  position: relative;
  z-index: 10070 !important;
  pointer-events: auto;
}

/* Hide legacy topbar dots/buttons if desired (keep for debug, but smaller) */
.topBar{ background: rgba(10,18,28,0.35); backdrop-filter: blur(8px); }
.topBar .menuBtn{ border-radius:999px; }

/* Layout: terrain + bubbles + hand dock */
.main{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  padding-bottom: calc(160px + env(safe-area-inset-bottom)); /* Mobile: pas de padding extra */
}

/* Desktop uniquement: plus de padding pour la barre fixe */
@media (min-width: 721px) {
  .main{
    padding-bottom: calc(240px + env(safe-area-inset-bottom));
  }
  /* Desktop enfant : terrain plus haut pour que les cartes restent portrait */
  .mode-enfant .terrain-zone {
    min-height: 110px;
  }
}

/* Opponent bubbles at top */
.bubbleRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.bubbleRow--opp{ margin-top:2px; }
.bubbleRow--me{ margin-top:6px; justify-content:center; }

/* Bubble button */
.bubbleBtn{
  width:48px; /* 🔧 RÉDUIT de 54px à 48px pour éviter le chevauchement */
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    radial-gradient(42px 42px at 55% 70%, rgba(120,255,240,0.18), rgba(0,0,0,0) 65%),
    rgba(14,22,34,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  /* 🔧 CORRECTION: S'assurer que les boutons sont toujours cliquables */
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 5; /* 🔧 Au-dessus des autres éléments pour être toujours cliquable */
}
.bubbleBtn:active{ transform: scale(0.96); filter: brightness(1.05); box-shadow: 0 8px 18px rgba(0,0,0,0.22); }

/* Disabled bubble (used to keep counters visible without opening modals) */
.bubbleBtn--disabled{
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.15);
}

.bubbleBtn--stop{
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(255,255,255,0.30), rgba(255,255,255,0) 60%),
    radial-gradient(40px 40px at 55% 70%, rgba(255,120,140,0.28), rgba(0,0,0,0) 65%),
    rgba(130,20,40,0.32);
  border-color: rgba(255,180,190,0.35);
}
/* Undo — retour début de tour (amber/orange, plus petit) */
.bubbleBtn--undo{
  width:40px;
  height:40px;
  background:
    radial-gradient(16px 16px at 30% 25%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%),
    radial-gradient(32px 32px at 55% 70%, rgba(255,180,60,0.30), rgba(0,0,0,0) 65%),
    rgba(140,90,10,0.38);
  border-color: rgba(255,210,100,0.40);
  font-size:18px;
  font-weight:900;
  color:rgba(255,235,180,0.95);
}
.bubbleIcon{
  font-weight:900;
  font-size:17px; /* 🔧 RÉDUIT de 18px à 17px */
  line-height:1;
  opacity:0.95;
}
.bubbleCount{
  font-weight:900;
  font-size:15px; /* 🔧 RÉDUIT de 16px à 15px */
  line-height:1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Terrain stack */
.terrainStack{
  display:flex;
  flex-direction:column;
  gap:14px; /* 🔧 AUGMENTÉ de 10px à 14px pour desktop */
}

/* 🔧 CORRECTION MOBILE: Réduire le gap entre les zones */
@media (max-width: 720px) {
  .terrainStack {
    gap: 8px; /* 🔧 AUGMENTÉ de 6px à 8px pour mobile */
  }
}
.terrain-zone{
  min-height: 120px; /* 🔧 RÉDUIT de 170px à 120px pour desktop */
  border-radius: 18px;
  background: rgba(10,18,28,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
}

/* 🔧 CORRECTION MOBILE: Réduire la hauteur des terrains sur mobile */
@media (max-width: 720px) {
  .terrain-zone {
    min-height: 90px; /* 🔧 RÉDUIT de 100px à 90px pour mobile */
  }
  /* Mode enfant : plus haut pour accueillir 2 rangées de 5 créatures */
  .mode-enfant .terrain-zone {
    min-height: 120px;
  }
}

/* Hand dock always visible */
.handDock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8,14,22,0.55);
  border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  z-index:10; /* 🔧 CORRECTION: z-index plus élevé pour être au-dessus de bubbleRow--me */
}

/* Bubble row for player controls - DESKTOP: fixed, MOBILE: in flow */
.bubbleRow--me{ 
  display:flex !important; 
  justify-content:center;
  align-items:center;
  gap:16px;
  padding: 10px 8px;
  position: relative; /* Par défaut: dans le flux (mobile) */
  z-index: 2; /* 🔧 CORRECTION: z-index plus bas que handDock (z-index: 10) */
  flex-wrap: wrap;
  /* 🔧 Supprimé background et border-top pour enlever la barre */
  /* background: rgba(8,14,22,0.35); */
  /* border-top: 1px solid rgba(255,255,255,0.08); */
  /* backdrop-filter: blur(8px); */
}

/* Sur desktop uniquement: position fixed */
@media (min-width: 721px) {
  .bubbleRow--me{
    position: fixed;
    bottom: 200px; /* 🔧 REMONTÉ de 170px à 200px pour éviter de toucher la barre des cartes */
    left: 0;
    right: 0;
    z-index: 4; /* Desktop: z-index 4 car position fixed */
  }
}

/* Controls above the hand cards - NOT USED ANYMORE */
.handTopControls{
  display:none;
}
.handTopButtons{
  display:none;
}
.handPillBtn{
  display:none;
}
.handPillBtn--stop{
  display:none;
}

/* Inline score track (embedded with buttons) */
/* Score track between terrains (separator) */
.scoreTrackBetween{
  position: static;
  display: block;
  /* IMPORTANT: .scoreTrackBetween réutilise aussi la classe .scoreTrackFloating
     (pour le style). On neutralise ici tout ce qui vient de la version "floating"
     (position:fixed + left:50% + transform translateX(-50%)) sinon le composant
     est décalé et paraît "pas centré". */
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  cursor: default;
  /* Était en fit-content -> barres trop courtes en portrait.
     On garde la même "colonne" (centrée) mais on autorise le composant
     à prendre la largeur disponible (sans déborder) pour rallonger les barres. */
  width: calc(100% - 24px);
  max-width: 560px;
  margin: 6px auto; /* 🔧 RÉDUIT de 8px à 6px */
  /* Centrage robuste même si le parent est en flex */
  align-self: center;
  justify-self: center;
  padding: 3px 12px; /* 🔧 RÉDUIT de 4px à 3px */
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  user-select: none;
}
.scoreTrackBetween .stfTitle{ display:none; }
.scoreTrackBetween .stfRow{ 
  margin: 1px 0; /* 🔧 RÉDUIT de 2px à 1px */
  display: flex;
  align-items: center;
  gap: 8px;
}
.scoreTrackBetween .stfLabel{
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
}
.scoreTrackBetween .stfBar{
  flex: 1;
  height: 7px; /* 🔧 RÉDUIT de 8px à 7px */
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.scoreTrackBetween .stfFill{
  height: 100%;
  background: linear-gradient(90deg, rgba(34,197,94,0.8), rgba(34,197,94,1));
  transition: width 0.3s ease;
}
.scoreTrackBetween .stfValue{
  font-size: 11px;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
}

/* Sécurité: si une classe "dragging" est appliquée par erreur,
   ne jamais réintroduire un translateX qui décale le centrage. */
.scoreTrackBetween.dragging{ transform: none !important; }

/* 🔧 CORRECTION: Forcer le positionnement statique en mode inline pour éviter les sauts */
.scoreTrackBetween,
.scoreTrackFloating[data-inline="1"] {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* When a panel is open, push the hand UI behind the overlay visually */
body.panelOpen .handDock{ filter: blur(1px); opacity: .85; }
.handDock .handCards{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scroll-snap-type: x mandatory;
}
.handDock .handCard{
  flex: 0 0 auto;
  width: 92px;
  height: 128px;
  scroll-snap-align: start;
}

/* Make art-only cards fit */
.handCard.enfantArtOnly .cardArt{
  width:100%;
  height:100%;
}
.handCard.enfantArtOnly .cardArt img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
}

/* Hide legacy floating hand button + legacy stop btn */
#handFloatingBtn{ display:none !important; }
#endPhase2Btn{ display:none !important; }

/* Slightly reduce zone modal/title noise */
.zone-modal-title span, .zone-modal-title{ font-weight:800; }


/* ===== Hotfixes (2026-02-01) ===== */
/* Absolutely disable opponent deck button to avoid any click-through spam on mobile */
#oppDeckBtn{ pointer-events:none !important; }

/* Score track when placed between terrains (mobile) */
.scoreTrackBetween{
  margin: 6px auto;
  padding: 3px 10px;
}

/* On small screens, stack buttons and score track */
@media (max-width: 720px){
  .handDock{
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .handDock .handCard{ width: 86px; height: 120px; }
  
  /* Arrange bubbleRow elements horizontally on mobile */
  .bubbleRow--me{
    flex-direction: row; /* 🔧 CORRECTION: Horizontal au lieu de vertical */
    gap: 8px; /* Gap horizontal entre les boutons */
    padding: 6px 8px;
    /* Position relative (dans le flux) - pas de bottom fixe */
  }
  
  /* Compact score track on mobile */
  .scoreTrackBetween{
    margin: 3px auto; /* 🔧 RÉDUIT de 4px à 3px */
    padding: 2px 8px;
  }
  
  /* 🔧 CORRECTION: Réduire les marges des bubbleRow sur mobile */
  .bubbleRow--opp{ 
    margin-top: 0; 
    margin-bottom: 2px; 
  }
  .bubbleRow--me{ 
    margin-top: 2px; 
    margin-bottom: 0; 
  }
}
@media (max-width: 720px){
  /* Slimmer score track to free vertical space */
  .scoreTrackFloating, .scoreTrackBetween{
    padding: 2px 8px;
    border-radius: 10px;
  }
  .stfRow{ gap: 6px; margin: 1px 0; }
  .stfBar{ height: 6px; }
  .stfPips{ height: 6px; }
  .stfRight{ font-size: 11px; min-width: 40px; }
}

/* ========================================================================
   🔧 MODE PAYSAGE MOBILE (LANDSCAPE) - Layout compact
   ========================================================================
   Viewport typique : 600–900 × 320–400px.
   🔑 Bugs corrigés :
       • .handDock était position:fixed → sorti du flux → chevauchement
       • .bubbleRow--me était position:fixed sur >720px → même bug
       • .main ne remplissait pas la hauteur du viewport
       • .terrainStack ne flex-fillait pas l'espace restant
   ======================================================================== */

@media (max-height: 500px) and (orientation: landscape) {

  /* ── Topbar ultra compact (position:fixed toujours, mais petite) ── */
  .topBar { padding: 1px 0 !important; }
  .topBarInner { padding: 2px 6px !important; }
  .menuBtn { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .turnDot { width: 8px !important; height: 8px !important; }

  /* ── Main : remplit le viewport, flex-column strict ── */
  .main {
    display: flex !important;
    flex-direction: column !important;
    /* Topbar landscape ≈ 34px (padding 2×2 + bouton 30px) */
    height: calc(100vh - 34px) !important;
    min-height: 0 !important;
    margin-top: 34px !important;
    padding: 2px 4px !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
    gap: 2px !important;
    overflow: auto;
  /* overflow hidden removed for full panel reach */
    box-sizing: border-box !important;
  }

  /* ── BubbleRows : une seule ligne, flex-shrink 0 ── */
  .bubbleRow {
    gap: 6px !important;
    padding: 1px 6px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }
  .bubbleRow--opp { margin: 0 !important; }
  .bubbleRow--me {
    /* 🔑 CRITIQUE : override position:fixed du desktop (>720px) */
    position: relative !important;
    bottom: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border-top: none !important;
    backdrop-filter: none !important;
  }
  .bubbleBtn { width: 32px !important; height: 32px !important; }
  .bubbleBtn--stop { width: 32px !important; height: 32px !important; }
  .bubbleBtn--undo { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .bubbleCount { font-size: 11px !important; }

  /* ── TerrainStack : flex:1 pour remplir l'espace libre ── */
  .terrainStack {
    flex: 1 !important;
    min-height: 0 !important;  /* permet au flex item de shrink sous sa min-height naturelle */
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto;
  /* overflow hidden removed for full panel reach */
  }

  /* ── Terrain zones : flex:1 dans le terrainStack ── */
  .terrain-zone {
    flex: 1 !important;
    min-height: 36px !important;
    max-height: none !important;
    border-radius: 6px !important;
    overflow: auto;
  /* overflow hidden removed for full panel reach */
  }
  .mode-enfant .terrain-zone {
    flex: 1 !important;
    min-height: 36px !important;
    max-height: none !important;
  }

  /* ── Score track : flex-shrink 0, ultra compact ── */
  .scoreTrackBetween {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
  }
  .scoreTrackBetween .stfRow { margin: 0 !important; gap: 2px !important; }
  .scoreTrackBetween .stfLabel { font-size: 8px !important; min-width: 10px !important; }
  .scoreTrackBetween .stfBar { height: 4px !important; }
  .scoreTrackBetween .stfValue { font-size: 8px !important; min-width: 22px !important; }

  /* ── HandDock : 🔑 position relative (PAS fixed) + flex-shrink 0 ── */
  .handDock {
    position: relative !important;  /* 🔑 CRITIQUE : retire la position fixe */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
    padding: 3px 6px calc(3px + env(safe-area-inset-bottom)) !important;
  }
  .handDock .handCards {
    padding: 2px 0 !important;
    gap: 6px !important;
  }
  .handDock .handCard,
  .handDock .handCard.enfantArtOnly {
    width: 52px !important;
    height: 72px !important;
  }

  /* ── Toasts plus compacts ── */
  .toast { font-size: 12px !important; padding: 6px 12px !important; }

  /* ── Zone modal / card modal : plein écran compact ── */
  .zone-modal-content { max-height: 90vh !important; }
  .card-modal-content { max-height: 90vh !important; }
}

/* ========================================================================
   Fin des corrections paysage mobile
   ======================================================================== */



/* ===== Debug overlay (stabilisation) ===== */

.debugOverlay{
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 99999;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  max-width: 70vw;
  pointer-events: none; /* overlay is informational */
}
.debugOverlay__row{
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 2px 0;
}
.debugOverlay__k{
  opacity: 0.75;
  min-width: 58px;
}
.debugOverlay__v{
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debugOverlay__hint{
  margin-top: 6px;
  opacity: 0.6;
  font-size: 11px;
}
.debugToggleRow{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.debugToggleStatus{
  opacity: 0.75;
  font-size: 12px;
}


/* 🔧 MASQUER LE BOUTON UNDO (ne fonctionne pas encore) */
#myUndoBtn,
.bubbleBtn--undo {
  display: none !important;
}


/* 🔧 MOBILE : optimiser card modal pour voir image + texte + action sans scroll */
@media (max-width: 768px) {
  .card-modal-content {
    max-width: 96vw !important;
    max-height: 88vh !important;
  }
  
  .card-modal-header {
    padding: 8px 12px !important;
  }
  
  .card-modal-header span {
    font-size: 13px !important;
  }
  
  .card-modal-close {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  
  .card-modal-body {
    padding: 10px 12px !important;
  }
  
  /* Compacter les sections d'action */
  .card-actions-section {
    margin-bottom: 10px !important;
  }
  
  .card-actions-title {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  
  .card-action-item {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  /* Image de carte maximale dans son rectangle */
  .card-modal-body img {
    max-height: 340px !important; /* 🔧 Encore agrandi de 260px → 340px */
    object-fit: contain;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 15px; /* 🎨 Angles arrondis */
  }
}


/* 🔧 CHOICEMODAL : Boutons modernisés avec couleurs spécifiques */
.choiceModalBtn[data-key="cancel"],
.choiceModalBtn:nth-child(1) {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 70%),
    linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: rgba(0,0,0,.95) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.35) !important;
  font-weight: 800 !important;
  position: relative !important;
  overflow: auto;
  /* overflow hidden removed for full panel reach */
}

.choiceModalBtn[data-key="cancel"]::before,
.choiceModalBtn:nth-child(1)::before {
  content: "↩ ";
  font-size: 18px;
  margin-right: 4px;
}

.choiceModalBtn[data-key="cancel"]:hover,
.choiceModalBtn:nth-child(1):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(245,158,11,.45) !important;
}

.choiceModalBtn[data-key="no"],
.choiceModalBtn:nth-child(2) {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 70%),
    rgba(239, 68, 68, 0.3) !important;
  color: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .35) !important;
  font-weight: 800 !important;
}

.choiceModalBtn[data-key="no"]:hover,
.choiceModalBtn:nth-child(2):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, .45) !important;
}

.choiceModalBtn[data-key="yes"],
.choiceModalBtn:nth-child(3) {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%),
    linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: rgba(0,0,0,.95) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 4px 12px rgba(34,197,94,.35) !important;
  font-weight: 800 !important;
}

.choiceModalBtn[data-key="yes"]:hover,
.choiceModalBtn:nth-child(3):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(34,197,94,.45) !important;
}

/* Tous les boutons choiceModal : ronds et modernes */
.choiceModalBtn {
  border-radius: 999px !important;
  padding: 12px 24px !important;
  transition: all .2s ease !important;
}


/* 🔧 CACHER "DÉPLACER VERS..." en mode enfant (tout est automatique) */
.card-actions-section:has(.move-card-btn),
.card-actions-title:contains("📦 Déplacer vers") {
  display: none !important;
}

/* Alternative : cacher via le titre */
.card-actions-title {
  /* Pas de règle générale, on cache via JS */
}


/* 🔧 CACHER LES BOUTONS DE PLAYTEST (Resync, Recover UI) */
#resyncBtn,
#recoverBtn {
  display: none !important;
}


/* FIX #4: Bouton flip voir verso dans menu carte */
.card-modal-flip-btn {
    padding: 10px 20px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-modal-flip-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.6);
    transform: translateY(-1px);
}

.card-modal-flip-btn:active {
    transform: translateY(0);
}

/* Animation rotation carte SANS miroir - juste changement d'image */
.cardArtModal img {
    transition: opacity 0.2s ease;
}

/* FIX: Enlever encadrés décoratifs derrière carte dans modal */
.card-sheet.enfantArtOnly {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ================= Timer Chip (topBar) ================= */
.timerChip{
  min-width: 62px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 14px;
  letter-spacing: .5px;
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.08);
  user-select: none;
  -webkit-user-select: none;
}
.timerChip.running{
  border-color: rgba(0,255,128,.35);
  box-shadow: 0 0 12px rgba(0,255,128,.18), 0 6px 18px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.08);
}
.timerChip.paused{ opacity: .75; }
.timerChip.zero{
  color: rgba(255,230,230,.95);
  border-color: rgba(255,0,0,.35);
  box-shadow: 0 0 12px rgba(255,0,0,.18), 0 6px 18px rgba(0,0,0,.28), inset 0 1px 2px rgba(255,255,255,.08);
}


/* UI cleanup: hide redundant texts in role & deck modals */
.role-modal .premier-joueur-row{display:none !important;}
.deck-modal .deck-header,
.deck-modal .deck-help,
.deck-modal .deck-count{display:none !important;}


/* Claim win modal */
.claimBox{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.claimText{font-size:16px;line-height:1.3;color:rgba(255,255,255,.92);} 
.claimBtn{padding:12px 14px;border-radius:16px;border:1px solid rgba(255,80,80,.45);background:rgba(255,80,80,.14);color:rgba(255,230,230,.98);font-weight:800;}
.claimBtn:active{transform:scale(.99);} 


/* Deck modal: keep only search input */
#panelDeck .pillInfo{display:none !important;}



/* === PATCH: Mobile modal scroll + bigger setup panel (2026-02-10) === */
/* Make the panel itself scrollable (more reliable on mobile than scrolling the overlay) */
.panel{
  max-height: calc(var(--appH, 100vh) - (env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px) + 24px));
}
.panelBody{
  flex: 1 1 auto;
  min-height: 0;          /* critical for flex children to allow scrolling */
  overflow-y: auto;       /* enable scroll inside panel */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Ensure inner views can shrink inside the scroll container */
.panelView{ min-height: 0; }

/* Mobile: use more screen real-estate + easier scrolling */
@media (max-width: 600px){
  .panelOverlay.open{
    padding: calc(env(safe-area-inset-top,0px) + 10px) 0 calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  .panel{
    width: min(620px, 96vw);
    border-radius: 18px;
  }
  /* Give the textarea more room and avoid it trapping scroll */
  #panelSetup textarea#decklistInput{
    min-height: 180px;
    max-height: 45vh;
  }
}




/* ===== HOTFIX: Mobile modal scroll reliable (Android Chrome address bar) =====
   Goal: panel takes more space + panelBody scrolls (not the overlay)
*/
:root{
  --appH: 100vh;
  --modalMaxH: 82vh;
}

.panelOverlay.open{
  /* prevent overlay from being the scrolling element on mobile */
  overflow: hidden;
}

.panel{
  /* cap height to available viewport; body will scroll */
  max-height: var(--modalMaxH, 82vh);
}

.panelBody{
  flex: 1;
  min-height: 0;            /* critical for flex children to allow scrolling */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Make modal bigger on mobile */
@media (max-width: 768px){
  .panel{
    width: 96vw;
    border-radius: 18px;
  }
  .panelHeader{
    padding: 14px 14px 10px;
  }
  .panelBody{
    padding: 12px 14px 24px;
  }
  /* Decklist textarea (if present) should be taller */
  textarea#deckInput, textarea.deckInput, #deckInput{
    min-height: 220px;
  }
}


/* === FINAL FIX (2026-02-10): Mobile modal must scroll INSIDE the panel ===
   Some earlier rules forced `.panel--modal .panelBody` to `overflow: visible`
   and relied on scrolling the overlay. On Android Chrome (especially when the
   address bar is visible / not fullscreen), this can result in *no scroll at all*.
   We enforce internal scrolling for modal panels with stronger selectors.
*/
.panelOverlay.open{
  overflow: auto;
  /* overflow hidden removed for full panel reach */ /* overlay never scrolls */
}

.panel.panel--modal{
  /* Constrain height to the visible viewport so body can scroll */
  max-height: calc(var(--appH, 100vh) - (var(--overlayPadTop, 0px) + var(--overlayPadBottom, 0px))) !important;
}

.panel--modal .panelBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 768px){
  .panel.panel--modal{
    width: 96vw !important;
    border-radius: 18px !important;
  }
  /* Give more usable height inside the modal on small screens */
  .panel--modal .panelBody{
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}



/* === FIX SETUP DRAWER VIEWPORT === */
.setupDrawer{
  max-height: calc(100vh - var(--overlayPadTop, 0px) - var(--overlayPadBottom, 0px));
  height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}

.setupBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

.modalCenter{
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}


/* === PATCH: Setup modal viewport-safe (desktop 100% zoom) === */
.modalCenter{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.setupDrawer{
  width: 100% !important;
  max-width: 640px !important;
  height: min(900px, calc(100vh - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto;
  /* overflow hidden removed for full panel reach */
}

.setupBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 32px !important;
}




/* === FIX (2026-02-14): Setup drawer hidden under topBar at 100% zoom ===
   In drawer mode, the panel was anchored at top:0 and could end up *behind* the fixed topBar,
   which makes the top part of the Setup view appear "missing" (only visible when zooming out).
   We offset the drawer below the topBar and reduce its height accordingly.
*/
.panelOverlay.isDrawer{
  /* keep content below topBar + safe-area */
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(56px, var(--topbarH, 64px), 96px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
  overflow: auto;
  /* overflow hidden removed for full panel reach */ /* drawer should not scroll the overlay */
  align-items: flex-start !important;
}

.panel.panel--drawer{
  top: calc(env(safe-area-inset-top, 0px) + clamp(56px, var(--topbarH, 64px), 96px)) !important;
  height: calc(var(--appH, 100vh) - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + clamp(56px, var(--topbarH, 64px), 96px))) !important;
  max-height: calc(var(--appH, 100vh) - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + clamp(56px, var(--topbarH, 64px), 96px))) !important;
}

/* ensure drawer content can scroll inside */
.panel.panel--drawer .panelBody{
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}