/* Compléments au thème « table de jeu » (perudo-theme.css) :
   accueil, conseil de l'ordi, probabilités, message d'erreur. */
.pp-main { padding-bottom: 24px; }
.pp-card.pp-home { max-width: 640px; margin: 32px auto 0; }
.pp-field { display: flex; flex-direction: column; gap: 8px; }
.pp-home input, .pp-join input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--pp-line);
  background: var(--pp-cream-2); color: var(--pp-ink); font: 600 16px/1 var(--pp-font-body);
}
.pp-join { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-join input { flex: 1 1 200px; width: auto; }
.pp-swatch:disabled { opacity: .25; cursor: not-allowed; }

/* Conseil de l'ordinateur */
.pp-advice { padding: 12px 16px; border-radius: 14px; background: #FFF6D6; border: 1.5px solid var(--pp-gold); font-size: 15px; }
.pp-advice .pp-chip { min-height: 34px; padding: 0 12px; margin-left: 6px; }

/* Probabilités */
.pp-probs { margin-top: 18px; padding: 8px 22px; }
.pp-probs h3 { margin: 16px 0 6px; font: 600 16px/1.2 var(--pp-font-display); color: var(--pp-orange-dark); }
.bar { height: 14px; border-radius: 999px; overflow: hidden; display: flex; background: var(--pp-line); margin: 6px 0; }
.bar .t { background: var(--pp-logo-green); } .bar .f { background: var(--pp-red); }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { flex: 1; min-width: 130px; background: var(--pp-peach); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--pp-ink-dim); }
.kpi b { display: block; font: 600 26px/1.2 var(--pp-font-display); }
table.grid { border-collapse: separate; border-spacing: 3px; width: 100%; text-align: center; font-size: 13px; margin-bottom: 8px; }
table.grid th { color: var(--pp-ink-dim); font-weight: 700; padding: 2px; }
table.grid td { border-radius: 6px; padding: 6px 0; color: #fff; }
table.grid td.ok { cursor: pointer; font-weight: 800; }
table.grid td.no { opacity: .22; }
table.grid td.cur { outline: 2px dashed var(--pp-ink); }
table.grid td.pick { outline: 3px solid var(--pp-orange); }

.toast { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--pp-red); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; z-index: 10; max-width: 90vw; }
@media (max-width: 640px) {
  .pp-card.pp-home { margin-top: 12px; }
  .pp-probs { padding: 8px 14px; }
  .kpi { min-width: 0; padding: 6px 8px; } .kpi b { font-size: 20px; }
  table.grid { border-spacing: 2px; font-size: 11px; } table.grid td { padding: 7px 0; }
}
#roomtag { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
#roomtag[hidden] { display: none; }

/* Téléphone : les plaques ne doivent jamais dépasser de l'écran (surtout à 5-6 joueurs) */
@media (max-width: 640px) {
  .pp-plate, .pp-plate--side { left: clamp(64px, var(--mx, var(--x)), calc(100% - 64px)); }
  .pp-plate__name { font-size: 9.5px; letter-spacing: .06em; gap: 5px; }
  .pp-plate__dot { width: 18px; height: 18px; }
  .pp-plate { gap: 5px; padding: 3px 9px 3px 4px; }
}

/* Téléphone : centre du tapis plus compact pour laisser la place aux gobelets et aux dés révélés */
@media (max-width: 640px) {
  .pp-center { top: 48%; gap: 3px; }
  .pp-center__line { display: none; }          /* déjà dit par « 3 × dé » juste au-dessus */
  .pp-center__big { font-size: 42px; }
  .pp-center__verdict { font-size: 14px; }
  .pp-center__out { font-size: 9px; letter-spacing: .12em; }
}

/* Mes dés, sous la table, disposés comme les points d'un dé */
.pp-mine {
  width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 14px 34px 20px; border-radius: 20px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, var(--pp-felt-hi), var(--pp-felt-lo));
  box-shadow: inset 0 4px 14px rgba(0,0,40,.45), 0 0 0 3px var(--pp-gold), 0 14px 26px -12px rgba(130,50,0,.45);
}
.pp-mine .pp-eyebrow { color: var(--pp-yellow-soft); margin-bottom: 10px; }
.pp-board { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto); gap: 12px; justify-content: center; --s: 64px; }
.pp-slot { display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .pp-mine { padding: 12px 22px 16px; } .pp-board { --s: 54px; gap: 10px; } }

/* Annonces faites directement sur le tapis */
.pp-center .pp-composer--table { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0; }
.pp-center .pp-stepper { gap: 8px; }
.pp-center .pp-stepper__btn { width: 38px; height: 38px; font-size: 22px; }
.pp-center .pp-stepper__value { color: #fff; font-size: 40px; min-width: 1.2ch; text-shadow: 0 3px 0 rgba(0,0,40,.3); }
.pp-center .pp-times { color: var(--pp-yellow); font-size: 26px; }
.pp-center .pp-faces { --s: 24px; gap: 5px; justify-content: center; }
.pp-center .pp-face { min-width: 40px; min-height: 40px; padding: 4px; border-radius: 10px; }
.pp-center .pp-btn { min-height: 46px; padding: 0 20px; font-size: 17px; }
.pp-center .pp-btn--blue { min-width: min(100%, 300px); }
.pp-center .pp-duo { width: min(100%, 300px); }
.pp-center .pp-btn--perudo { min-height: 46px; font-size: 18px; }
.pp-center .pp-btn--ghost.pp-btn--small { min-height: 46px; }
/* Taille de la table fixe pendant toute la partie : rien ne bouge d'un tour à l'autre */
@media (max-width: 1000px) { .pp-table--tall { aspect-ratio: 1.5 / 1; } }
@media (max-width: 640px) {
  .pp-center .pp-stepper__value { font-size: 34px; }
  .pp-center .pp-faces { --s: 22px; }
  .pp-center .pp-face { min-width: 36px; min-height: 38px; }
  .pp-center .pp-btn { font-size: 16px; min-height: 44px; }
  .pp-center .pp-center__by { font-size: 12.5px; }
}

/* Annonces en grand : « 4 × dé » */
.pp-center__big { font-size: clamp(54px, calc(9.5 * var(--u)), 120px); --s: .85em; }
.pp-center .pp-btn--blue .pp-bid { font-size: 28px; --s: 30px; }
.pp-bubble { font-size: clamp(20px, calc(2.3 * var(--u)), 30px); --s: 1.25em; padding: 8px 20px 9px; }
.pp-center__by { font-size: clamp(15px, calc(1.9 * var(--u)), 22px); }
@media (max-width: 640px) {
  .pp-center__big { font-size: 56px; }
  .pp-bubble { font-size: 20px; }
  .pp-center .pp-btn--blue .pp-bid { font-size: 24px; --s: 26px; }
}

@media (max-width: 640px) {
  .pp-table--tall { aspect-ratio: 1.05 / 1; }
  .pp-table--tall[data-n="2"] { aspect-ratio: 1.3 / 1; }
}
.pp-table--compose .pp-center { z-index: 6; }

/* Face 1 (paco) : un Indien à coiffe de plumes à la place de l'étoile */
.pp-die[data-v="1"]::after {
  left: 9%; top: 9%; width: 82%; height: 82%; clip-path: none; background: var(--pip);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cg%20transform%3D%27translate%2850%2054%29%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-28%27%20rx%3D%276.5%27%20ry%3D%2721%27%20transform%3D%27rotate%28-64%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-30%27%20rx%3D%277%27%20ry%3D%2723%27%20transform%3D%27rotate%28-32%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-32%27%20rx%3D%277.5%27%20ry%3D%2725%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-30%27%20rx%3D%277%27%20ry%3D%2723%27%20transform%3D%27rotate%2832%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-28%27%20rx%3D%276.5%27%20ry%3D%2721%27%20transform%3D%27rotate%2864%29%27/%3E%3C/g%3E%3Cellipse%20cx%3D%2729%27%20cy%3D%2780%27%20rx%3D%273.4%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2771%27%20cy%3D%2780%27%20rx%3D%273.4%27%20ry%3D%2710%27/%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M50%2050a19%2019%200%201%200%20.01%200zM42%2067.5a3%203%200%201%200%20.01%200zM58%2067.5a3%203%200%201%200%20.01%200zM44%2077.5h12v2.6H44z%27/%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M31%2051h38v6H31z%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cg%20transform%3D%27translate%2850%2054%29%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-28%27%20rx%3D%276.5%27%20ry%3D%2721%27%20transform%3D%27rotate%28-64%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-30%27%20rx%3D%277%27%20ry%3D%2723%27%20transform%3D%27rotate%28-32%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-32%27%20rx%3D%277.5%27%20ry%3D%2725%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-30%27%20rx%3D%277%27%20ry%3D%2723%27%20transform%3D%27rotate%2832%29%27/%3E%3Cellipse%20cx%3D%270%27%20cy%3D%27-28%27%20rx%3D%276.5%27%20ry%3D%2721%27%20transform%3D%27rotate%2864%29%27/%3E%3C/g%3E%3Cellipse%20cx%3D%2729%27%20cy%3D%2780%27%20rx%3D%273.4%27%20ry%3D%2710%27/%3E%3Cellipse%20cx%3D%2771%27%20cy%3D%2780%27%20rx%3D%273.4%27%20ry%3D%2710%27/%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M50%2050a19%2019%200%201%200%20.01%200zM42%2067.5a3%203%200%201%200%20.01%200zM58%2067.5a3%203%200%201%200%20.01%200zM44%2077.5h12v2.6H44z%27/%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M31%2051h38v6H31z%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Compte à rebours avant le remélange automatique */
.pp-countdown { height: 6px; border-radius: 999px; background: var(--pp-peach); overflow: hidden; margin-top: 10px; max-width: 420px; }
.pp-countdown i { display: block; height: 100%; width: 100%; background: var(--pp-orange); transform-origin: left; animation: pp-count linear forwards; }
@keyframes pp-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── TÉLÉPHONE : en-tête fin, table basse, poste de jeu sous la table ───────────── */
@media (max-width: 640px) {
  .pp-header__inner { min-height: 54px; padding: 2px 0; flex-wrap: nowrap; }
  .pp-brand__logo { width: 62px; height: 62px; margin: -10px -6px -10px -12px; }
  .pp-brand__title { font-size: 16px; }
  .pp-brand__sub { font-size: 9px; letter-spacing: .22em; }
  #roomtag { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .pp-table-wrap { padding: 20px 8px 14px; }
  .pp-main { padding: 0 8px; }
  .pp-poste { margin-top: 2px; }
  .pp-poste .pp-card__body { padding: 12px; gap: 10px; }
  .pp-poste__grid { display: flex; gap: 12px; align-items: stretch; }
  .pp-poste__dice {
    flex: none; padding: 8px 10px 10px; border-radius: 14px; text-align: center;
    background: radial-gradient(ellipse at 50% 30%, var(--pp-felt-hi), var(--pp-felt-lo));
    box-shadow: inset 0 3px 10px rgba(0,0,40,.45), 0 0 0 2.5px var(--pp-gold);
  }
  .pp-poste__dice .pp-eyebrow { color: var(--pp-yellow-soft); font-size: 9.5px; margin-bottom: 6px; }
  .pp-poste__dice .pp-board { --s: 36px; gap: 5px; margin: 0; }
  .pp-poste__ctrl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
  .pp-poste__ctrl .pp-eyebrow { font-size: 10px; }
  .pp-poste .pp-stepper { justify-content: space-between; }
  .pp-poste .pp-stepper__btn { width: 40px; height: 40px; font-size: 22px; }
  .pp-poste .pp-stepper__value { font-size: 40px; }
  .pp-poste .pp-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; --s: 26px; }
  .pp-poste .pp-face { min-width: 0; min-height: 40px; padding: 4px; }
  .pp-poste .pp-btn--blue { width: 100%; min-height: 52px; }
  .pp-poste .pp-btn--blue .pp-bid { font-size: 24px; --s: 26px; }
  .pp-poste .pp-duo .pp-btn { min-height: 48px; }
  .pp-poste__wait { margin: 0; font: 600 20px/1.2 var(--pp-font-display); color: var(--pp-ink); }
  .pp-mine { padding: 10px 18px 14px; }
  .pp-mine .pp-board { --s: 46px; gap: 8px; }
  .pp-panel { padding: 12px 14px; }
  .pp-row { gap: 10px; margin-top: 10px; }
}

/* Téléphone : au résultat, le centre ne garde que le nombre trouvé, le verdict et qui perd un dé */
@media (max-width: 640px) {
  .pp-center--result .pp-center__label { display: none; }
  .pp-center--result .pp-center__big { font-size: 40px; }
  .pp-center--result .pp-center__verdict { font-size: 14px; }
}

/* Au résultat : contour rouge autour du nom du joueur qui perd la manche (pas autour des dés) */
.pp-plate.is-loser { border-color: var(--pp-red); animation: pp-loser 1.1s ease-in-out infinite alternate;
  box-shadow: 0 0 0 3px var(--pp-red), 0 0 26px rgba(232,52,14,.85), 0 6px 14px rgba(90,30,0,.35); }
@keyframes pp-loser { from { box-shadow: 0 0 0 3px var(--pp-red), 0 0 12px rgba(232,52,14,.5), 0 6px 14px rgba(90,30,0,.35); } to { box-shadow: 0 0 0 4px var(--pp-red), 0 0 30px rgba(232,52,14,.95), 0 6px 14px rgba(90,30,0,.35); } }