/* =========================================================================
   mobile.css — TÉLÉPHONE UNIQUEMENT
   Chargé via <link media="(max-width: 860px)"> : ce fichier n'est jamais
   appliqué sur ordinateur. La version PC vit entièrement dans app.css et
   n'est pas modifiée d'une ligne par ce qui suit.
   Cible : Android / Samsung Internet (One UI).
   ========================================================================= */

/* ------------------------------------------------------------ généralités */
html, body { overscroll-behavior-y: contain; }   /* pas de tiré-pour-rafraîchir */
body { -webkit-tap-highlight-color: transparent; }

.btn { min-height: 42px; touch-action: manipulation; }
.btn--sm { min-height: 36px; padding: .4rem .65rem; font-size: .78rem; }
.card, input, select, .toggle input { touch-action: manipulation; }
.hand .card:hover { transform: none; box-shadow: 0 5px 14px rgba(0, 0, 0, .5); }
.hand .card:active { transform: translateY(-10px); }

/* ------------------------------------------------------ barre de navigation */
.topbar { padding: .4rem .55rem; gap: .45rem; flex-wrap: nowrap; }
.wordmark { font-size: 1.05rem; flex: 0 0 auto; }
.wordmark small { display: none; }
.nav {
  flex: 1 1 auto; min-width: 0; gap: .4rem; justify-content: flex-end;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none; padding-bottom: 2px;
}
.nav::-webkit-scrollbar { display: none; }
.nav > * { flex: 0 0 auto; }
.nav > span.small { display: none; }
.sound-ctl input[type=range] { display: none; }

/* ------------------------------------------------- pages classiques (flux) */
.wrap { max-width: none; padding: .8rem .7rem 1.6rem; }
h1 { font-size: 1.75rem; }
.panel { padding: .9rem 1rem; }
.panel-head { flex-wrap: wrap; gap: .5rem; }
.grid-2, .grid-3, .home-cols { grid-template-columns: 1fr !important; }
.hero { grid-template-columns: 1fr !important; padding: .5rem 0 1.2rem; gap: 1rem; }
.hero .fan { display: none; }
.hero p.lead { font-size: .95rem; }
.rules-body h2 { margin-top: 1.6rem; }
table.data { font-size: .8rem; }
.modal { padding: 1rem; max-height: 86dvh; }

/* =========================================================================
   TABLE DE JEU — une seule colonne, tout tient dans un écran, rien ne défile
   Toujours visible : score compact · tapis · journal · main · actions
   Sur demande (tiroir) : score détaillé · chat · señas · règles
   ========================================================================= */
body.playing .wrap--game {
  height: 100dvh; max-width: none; overflow: hidden;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: .35rem;
  padding: .35rem .45rem calc(.35rem + env(safe-area-inset-bottom));
}
body.playing .game-layout { display: contents; }
body.playing .col-center { display: contents; }
body.playing .col-left { display: none; }

body.playing .table-head { order: 1; margin: 0; }
body.playing .mobile-bar { order: 2; }
body.playing .felt { order: 3; }
body.playing .col-right { order: 4; }
body.playing #handPanel { order: 5; }

body.playing .table-head h1 { font-size: 1rem; margin: 0; }
body.playing .table-head .eyebrow { font-size: .55rem; margin: 0; }
body.playing .table-head #joinCode { display: none; }

/* ------------------------------------------------------ bandeau de score */
.mobile-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  background: linear-gradient(180deg, var(--madera-2), var(--madera));
  border: var(--line); border-radius: var(--r); padding: .3rem .4rem;
}
.mobile-bar-actions { display: flex; gap: .25rem; }
.mobile-bar-actions .btn { min-height: 34px; padding: .3rem .5rem; font-size: .72rem; }
.mini-score { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .76rem; }
.mini-score .t { display: flex; align-items: baseline; gap: .25rem; min-width: 0; }
.mini-score .n { max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hueso-dim); }
.mini-score .p { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--fileteado); }
.mini-score .sep { color: var(--hueso-dim); }

/* ------------------------------------------------------------- le tapis */
body.playing .felt {
  height: 100%; min-height: 0; padding: .4rem;
  border-width: 4px; border-radius: 12px;
}
body.playing .felt::after { inset: 4px; border-radius: 9px; }

body.playing .seat { width: 42%; max-width: 170px; }
body.playing .seat--n { top: 3px; }
body.playing .seat--s { bottom: 3px; }
body.playing .seat--e { right: 2px; top: 46%; }
body.playing .seat--w { left: 2px; top: 46%; }
body.playing .seat--ne { top: 3px; right: 2px; }
body.playing .seat--nw { top: 3px; left: 2px; }
body.playing .seat .who { font-size: .72rem; padding: .1rem .45rem; }
body.playing .seat .meta { font-size: .52rem; letter-spacing: .04em; }
body.playing .seat .backs { gap: .1rem; margin-top: .15rem; }
body.playing .seat .backs .card { --cw: 17px; }
body.playing .reveal-label { font-size: .5rem; }
body.playing .reveal-hand .card { --cw: 22px; }

body.playing .trick-area { inset: 54px 0 54px; }
body.playing .trick-slots { gap: .3rem; }
body.playing .trick-slots .played .card { --cw: clamp(50px, 20vw, 96px); }
body.playing .trick-slots .played .owner { font-size: .52rem; margin-top: .1rem; }
body.playing .tricks-done {
  left: 3px; bottom: 3px; font-size: .5rem; padding: .2rem .3rem;
  max-width: 44%; gap: .1rem;
}
body.playing .trick-banner { bottom: 6%; font-size: .58rem; padding: .15rem .45rem; }
body.playing .callout { font-size: 1.4rem; }

/* ----------------------------------------------------------- le journal */
body.playing .col-right { display: block; min-height: 0; }
body.playing .col-right #chatBox { display: none; }
body.playing #logBox { padding: .35rem .5rem; }
body.playing #logBox .panel-head { display: none; }
body.playing .log { height: 54px; font-size: .72rem; }
body.playing .log p { margin-bottom: .14rem; padding-left: .5rem; }

/* -------------------------------------------------- la main et les actions */
body.playing #handPanel { padding: .45rem .55rem !important; }
body.playing #handPanel .panel-head { margin-bottom: .3rem; }
body.playing #handPanel .panel-head h2 { font-size: .8rem; }
body.playing #handPanel #turnInfo { font-size: .66rem; }
body.playing .hand { gap: .35rem; min-height: 0 !important; }
body.playing .hand .card { --cw: clamp(68px, 25vw, 112px); }
body.playing .actions { gap: .3rem; margin-top: .45rem !important; }
body.playing .actions .btn { flex: 1 1 30%; min-width: 0; font-size: .76rem; padding: .4rem .3rem; }
body.playing .actions .btn .small { font-size: .58rem; }

/* ------------------------------------------------- tiroir (bottom sheet) */
.drawer-bg { position: fixed; inset: 0; background: rgba(8, 5, 4, .65); z-index: 70; }
.drawer {
  display: flex; flex-direction: column; position: fixed; z-index: 71;
  left: 0; right: 0; bottom: 0; max-height: 80dvh;
  background: linear-gradient(180deg, var(--madera-2), var(--madera));
  border-top: 1px solid rgba(224, 165, 46, .4); border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .6);
  padding: .5rem .8rem calc(.8rem + env(safe-area-inset-bottom));
  animation: sheet .18s ease-out;
}
@keyframes sheet { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer::before {
  content: ''; width: 42px; height: 4px; border-radius: 99px;
  background: rgba(239, 227, 204, .3); margin: 0 auto .5rem;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.drawer-title { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fileteado); }
.drawer-body { overflow-y: auto; min-height: 0; }
.drawer-body > .panel { box-shadow: none; border: 0; padding: 0; background: none; }
.drawer-body .chat { height: 40dvh; }
.drawer-body .log { height: 40dvh; }
.drawer-body #senasBtns { display: flex; flex-wrap: wrap; gap: .35rem; }

/* --------------------------------------------------- téléphone en paysage */
@media (orientation: landscape) {
  body.playing .wrap--game { grid-template-rows: auto minmax(0, 1fr) auto; gap: .3rem; }
  body.playing .table-head, body.playing .col-right { display: none; }
  body.playing .trick-area { inset: 40px 0 40px; }
  body.playing .hand .card { --cw: clamp(52px, 13vh, 86px); }
  body.playing .trick-slots .played .card { --cw: clamp(44px, 13vh, 88px); }
  .mobile-bar { padding: .2rem .35rem; }
}

/* ------------------------------------------------------ très petits écrans */
@media (max-width: 380px) {
  body.playing .seat .who { font-size: .66rem; }
  body.playing .actions .btn { flex: 1 1 46%; font-size: .72rem; }
  .mini-score .n { max-width: 5ch; }
}