/* =====================================================================
   L'ONGLET TOMBOLA du hub (hub/tombola.js). Le classement est une page du carnet : hub/classement.css.
   Chargé après hub/onglets.css. Tout est de taille fixe : un nombre, un nom de lot ou
   un message qui change ne fait rien bouger (noms longs coupés, listes à places fixes).
   ===================================================================== */

/* ---- les cadres de papier communs ---- */
.tbTete,.tbColl,.tbJournalB{background:rgba(255,248,226,.38);border:2px solid var(--ink);border-radius:12px 15px 11px 16px/15px 11px 16px 12px;box-shadow:2px 3px 0 rgba(30,18,8,.4);min-width:0}
.tbColl h2,.tbJournalB h2{font-size:20px;height:26px;line-height:26px}
.tbEmo,.tbQ{font-family:system-ui,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}

/* =========================== LA TOMBOLA =========================== */
.tbTete{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px 22px;padding:14px 18px 16px;align-items:start}
.tbInfo{display:grid;gap:8px;min-width:0}
.tbInfo h2{height:30px;line-height:30px}
.tbCompteurs{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;gap:10px}
.tbC{position:relative;display:flex;flex-direction:column;justify-content:center;height:66px;padding:0 12px;line-height:1.15;min-width:0;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2px solid var(--c-ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:2px 3px 0 var(--ink-dk)}
.tbC small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);white-space:nowrap}
.tbC b{font-family:var(--font-display);font-weight:400;font-size:30px;color:var(--c-vert);font-variant-numeric:tabular-nums;height:34px;line-height:34px}
.tbProchain span{font-weight:700;font-size:15px;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tbJauge{display:block;height:8px;margin-top:5px;border:1.5px solid var(--c-ink);border-radius:5px;background:rgba(73,53,38,.12);overflow:hidden}
.tbJauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4C8C5C,#2F6B3F);transition:width .4s}
.tbEclats{display:flex;gap:7px;height:30px;align-items:center}
.tbEclats i{width:20px;height:20px;transform:rotate(45deg);border:2px solid var(--c-ink);border-radius:3px;background:rgba(73,53,38,.1)}
.tbEclats i.on{background:linear-gradient(135deg,#bfe8ff,#4b8fd6);box-shadow:0 0 6px rgba(75,143,214,.7)}
.tbAide{margin:0;font-size:13.5px;line-height:1.4;color:#5a4128;height:3.9em;overflow:hidden}
.tbChances{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;min-height:52px;align-content:start;padding-top:4px;border-top:1.5px dashed rgba(73,53,38,.3)}
.tbChK{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-right:4px}

.tbScene{display:grid;grid-template-rows:200px 46px;gap:12px;min-width:0}
.tbStage{position:relative;height:200px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,236,170,.9),rgba(246,184,74,.25) 70%),var(--paper-lt);border:2px solid var(--c-ink);border-radius:12px 14px 11px 15px/14px 11px 15px 12px;box-shadow:inset 0 0 18px rgba(120,80,30,.25)}
.tbStage.repos,.tbStage.secoue{grid-template-rows:140px 30px;align-content:center;gap:4px}
.tbBoiteW{width:140px;height:128px;display:grid;place-items:center}
.tbBoite{width:132px;height:121px;overflow:visible}
.tbBoite .tbCouvercle{transform-origin:60px 40px;transform-box:view-box}
.tbStage.secoue .tbBoite{animation:tbSecoue .23s ease-in-out infinite}
.tbStage.ouvre .tbBoite{animation:none}
.tbStage.ouvre .tbCouvercle{transform:translateY(-34px) rotate(-18deg);transition:transform .25s ease-out}
@keyframes tbSecoue{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) translateY(-2px)}75%{transform:rotate(7deg) translateY(-2px)}}
.tbStageTxt{font-weight:700;font-size:14px;color:#5a4128;height:30px;line-height:30px;max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.tbTirer{width:100%;min-width:0}
.tbTirer:disabled{filter:grayscale(.8) brightness(.95);opacity:.65;cursor:default;transform:none}

/* la carte du lot gagné (dans la scène, même taille) */
.tbGain{width:100%;height:100%;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-left:10px solid var(--rc);animation:tbSort .3s ease-out}
.tbGain.dore{background:linear-gradient(135deg,rgba(255,226,120,.7),rgba(255,248,226,.2) 55%,rgba(232,196,74,.6));box-shadow:inset 0 0 0 3px #e8c44a}
@keyframes tbSort{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.tbGain .tbAp{width:96px;height:96px}
.tbGainTx{display:grid;grid-template-rows:44px 24px 34px 18px 34px;gap:2px;min-width:0}
.tbGainNom{font-family:var(--font-display);font-size:20px;line-height:22px;color:var(--c-ink);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:end}
.tbGainRar{display:flex;gap:6px;align-items:center}
.tbPuce{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;border:1.5px solid var(--c-ink);background:var(--rc);color:#1e1208;font-size:12px;font-weight:700;white-space:nowrap}
.tbPuce.or{background:linear-gradient(180deg,#ffe58a,#e8c44a)}
.tbGainDit{font-size:13px;font-weight:700;color:#5a4128;overflow:hidden;line-height:17px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:center}
.tbGainPlus{font-size:12.5px;color:var(--c-vert);font-weight:700;white-space:nowrap;overflow:hidden;line-height:18px}
.tbPorter{justify-self:start;width:120px}

/* l'aperçu d'un lot (rond de la couleur de sa rareté) */
.tbAp{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,252,240,.9);border:3px solid var(--rc,#9aa3ad);box-shadow:0 2px 0 rgba(30,18,8,.35)}
.tbAp svg{width:72%;height:72%;display:block}
.tbAp .tbImg{width:86%;height:86%;display:block;object-fit:contain}
.tbEmo{font-size:30px;line-height:1}
.tbGain .tbEmo{font-size:46px}
.tbQ{font-family:var(--font-display);font-size:28px;color:#a59a86}

/* ---- la collection ---- */
.tbColl{display:grid;gap:10px;padding:12px 16px 12px}
.tbCollTete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tbTotal{flex:none;width:130px;height:30px;line-height:26px;text-align:center;font-weight:700;font-size:14px;border:2px solid var(--ink);border-radius:var(--r,10px);background:rgba(255,248,226,.6);font-variant-numeric:tabular-nums}
.tbFam{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.tbF{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:20px 18px;column-gap:5px;align-items:center;height:48px;padding:0 6px;min-width:0;text-align:left;
  background:rgba(255,248,226,.6);border:2px solid var(--c-ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:2px 3px 0 rgba(30,18,8,.45)}
.tbF:hover{background:rgba(255,236,170,.85)}
.tbF[aria-selected="true"]{background:#ffe3a0;box-shadow:3px 4px 0 var(--c-ink)}
.tbFIc{grid-row:1/3;font-size:18px;line-height:1;font-family:system-ui,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.tbFNom{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbFN{font-size:12px;color:var(--t2);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbGrille{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));grid-auto-rows:146px;gap:10px;height:478px;overflow-y:auto;padding:4px 8px 6px 2px;align-content:start;
  scrollbar-color:rgba(73,53,38,.45) transparent}
.tbLot{position:relative;display:grid;grid-template-rows:72px 36px 18px;justify-items:center;align-content:center;gap:2px;padding:6px 8px;min-width:0;text-align:center;
  background:var(--grain),var(--paper-lt);background-blend-mode:multiply,normal;border:2px solid var(--c-ink);border-radius:10px 12px 9px 13px/12px 9px 13px 10px;box-shadow:2px 3px 0 rgba(30,18,8,.4)}
.tbLot .tbAp{align-self:center}
.tbNom{font-weight:700;font-size:13px;line-height:17px;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:center}
.tbRar{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--rc);filter:brightness(.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:18px}
.tbLot.manque{background:rgba(200,185,154,.35);box-shadow:none;border-style:dashed;border-color:rgba(73,53,38,.55)}
.tbLot.manque .tbAp{background:rgba(255,252,240,.4);border-color:rgba(73,53,38,.25);box-shadow:none}
.tbLot.manque .tbNom{color:#8a7a62;letter-spacing:.1em}
.tbLot.manque .tbRar{filter:grayscale(.6) brightness(.8);opacity:.75}
.tbLot.verrou .tbRar{color:#6a5a44;filter:none;opacity:1;letter-spacing:0}
.tbLot.dore{background:linear-gradient(135deg,#fff3c0,#f6d77a 60%,#e8c44a);box-shadow:0 0 0 2px #e8c44a,2px 3px 0 rgba(30,18,8,.4)}
.tbOr{position:absolute;top:4px;right:6px;font-size:16px;color:#b8860b;text-shadow:0 1px 0 #fff4d6}
.tbNote{margin:0;font-size:12.5px;color:var(--t2);line-height:1.35;height:2.7em;overflow:hidden}

/* ---- le journal ---- */
.tbJournalB{display:grid;gap:8px;padding:12px 16px 12px}
.tbJournal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,30px);grid-auto-flow:column;column-gap:24px}
.tbJournal li{display:grid;grid-template-columns:96px minmax(0,1fr) 86px;gap:8px;align-items:center;height:30px;border-bottom:1.5px dashed rgba(73,53,38,.3);font-size:13.5px;min-width:0}
.tbJQ{color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:visible}
.tbJNom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:5px solid var(--rc);padding-left:7px}
.tbJTag{justify-self:end;height:20px;line-height:17px;padding:0 8px;border-radius:10px;border:1.5px solid var(--c-ink);background:var(--rc);font-size:11.5px;font-weight:700;color:#1e1208;white-space:nowrap}
.tbJTag.dup{background:rgba(255,248,226,.8);color:var(--t2);border-style:dashed}
.tbJournal li.vide{border-bottom-color:rgba(73,53,38,.15)}

/* =========================== téléphones =========================== */
@media (max-width:960px){
  .tbTete{grid-template-columns:minmax(0,1fr) 290px}
  .tbFam{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
  .tbTete{grid-template-columns:minmax(0,1fr);padding:12px 12px 14px}
  .tbCompteurs{grid-template-columns:78px minmax(0,1fr) 92px;gap:8px}
  .tbC{padding:0 9px;height:62px}
  .tbC b{font-size:26px}
  .tbC small{font-size:9.5px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis}
  .tbProchain span{font-size:13.5px}
  .tbEclats{gap:6px}.tbEclats i{width:16px;height:16px}
  .tbAide{font-size:13px;height:5.6em}
  .tbColl,.tbJournalB{padding:10px 10px 10px}
  .tbFam{gap:6px}
  .tbF{grid-template-columns:minmax(0,1fr);grid-template-rows:18px 16px 14px;justify-items:center;text-align:center;height:58px;padding:2px 3px;row-gap:0}
  .tbFIc{grid-row:auto;font-size:16px}
  .tbFNom{font-size:11.5px;max-width:100%}
  .tbFN{font-size:11px}
  .tbGrille{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:138px;gap:8px;height:446px;padding:2px 4px 4px 0}
  .tbLot{grid-template-rows:64px 36px 18px;padding:5px 5px}
  .tbLot .tbAp{width:58px;height:58px}
  .tbNom{font-size:12px;line-height:16px}
  .tbRar{font-size:10.5px}
  .tbNote{height:4em}
  .tbJournal{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(10,30px);column-gap:0}
  .tbJournal li{grid-template-columns:82px minmax(0,1fr) 72px;gap:6px;font-size:12.5px}
  .tbJTag{padding:0 6px;font-size:10.5px}
  .tbGain{grid-template-columns:84px minmax(0,1fr);padding:10px 10px;gap:10px}
  .tbGain .tbAp{width:84px;height:84px}
  .tbGainNom{font-size:18px;line-height:20px}
}