/* ---- v2.0.1 : pas de zoom, pastille de packs, récompenses animées, ouverture carte par carte, ×10, combat sur mobile ---- */

/* ===== pas de zoom (pincer / double-toucher) : on garde le défilement ===== */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:max(16px,1em)} /* iOS zoome sinon automatiquement quand on touche un champ */

/* ===== pastille « packs à ouvrir » (onglet Packs) ===== */
.bdp{background:#ffb020;color:#2a1500;box-shadow:0 0 12px #ffb020aa;animation:bdpp 1.9s ease-in-out infinite}
@keyframes bdpp{50%{transform:scale(1.14);box-shadow:0 0 18px #ffb020}}

/* ===== pastilles de récompense (fin de combat, cadeau du jour, codes) ===== */
.rwc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 4px}
.rwchip{--pc:#c6ff3d;--c:var(--pc);position:relative;overflow:hidden;display:grid;justify-items:center;gap:1px;min-width:86px;padding:10px 12px 8px;border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 24%,#0b2a19),#06180d);border:1px solid color-mix(in srgb,var(--c) 65%,transparent);box-shadow:0 0 22px -6px var(--c);
  animation:rwin .65s calc(.35s + var(--i)*.4s) cubic-bezier(.2,1.4,.4,1) both}
.rwchip::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#fff5,transparent);transform:skewX(-18deg);animation:rwsh 1.1s calc(.9s + var(--i)*.4s) ease-out both}
.rwchip i,.rwchip u{font-style:normal;text-decoration:none;font-size:1.9rem;line-height:1.15}
.rwchip b{font:800 1.15rem var(--disp);color:#fff;text-shadow:0 0 12px var(--c)}
.rwchip small{font-size:.66rem;color:var(--mu);max-width:100px;text-align:center;line-height:1.2}
.rwchip.lv{--c:#7dff6a}.rwchip.lv i{animation:rwlf 1.6s calc(1s + var(--i)*.4s) ease-in-out infinite}
.rwchip.pk u{display:grid;place-items:center;width:36px;height:52px;margin:2px 0;border-radius:6px;font-size:1.15rem;border:2px solid #fff7;background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc));box-shadow:0 0 16px var(--pc);animation:rwpk 2s calc(1s + var(--i)*.4s) ease-in-out infinite}
@keyframes rwin{from{opacity:0;transform:translateY(26px) scale(.35) rotate(-8deg)}60%{transform:scale(1.12) rotate(2deg)}}
@keyframes rwsh{to{left:130%}}
@keyframes rwlf{50%{transform:translateY(-4px) rotate(14deg) scale(1.12)}}
@keyframes rwpk{50%{transform:translateY(-4px) rotate(-5deg)}}
.rwm .wl{animation:rwg 1.4s ease-in-out infinite}
@keyframes rwg{50%{transform:scale(1.18) rotate(-6deg)}}
/* objets qui s'envolent vers le compteur / l'onglet Packs / la Collection */
.rwfly{position:fixed;left:0;top:0;z-index:950;pointer-events:none;display:grid;justify-items:center;gap:2px;will-change:transform,opacity}
.rwfly b{font:800 1rem var(--disp);color:#fff;text-shadow:0 2px 8px #000}
.mkp,.mkc{width:46px;height:72px;border-radius:8px;display:grid;place-items:center;font-size:1.5rem;border:2px solid #fff8}
.mkp{background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 65%,#fff),var(--pc));box-shadow:0 0 28px 3px var(--pc),inset 0 0 14px #fff6}
.mkc{background:linear-gradient(160deg,#145a32,#06180d);border-color:var(--pc);box-shadow:0 0 24px 2px var(--pc)}

/* ===== ouverture ×10 ===== */
.pk10{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 8px}
.pk10b{width:auto;background:linear-gradient(135deg,#ffd34d,#ff9a3c);color:#2a1500;font-size:1rem;padding:13px 32px;box-shadow:0 6px 24px -8px #ffb020}
.pk10b:disabled{opacity:.38;filter:grayscale(.6);cursor:not-allowed;box-shadow:none}
.pk10 small{color:var(--mu);font-size:.8rem}

/* ===== ouverture carte par carte (façon Pokémon TCG Pocket) ===== */
.pr{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));--cw:min(66vw,calc((100dvh - 250px)/1.4),300px);--c:#c6ff3d;animation:fi .3s both;user-select:none;-webkit-user-select:none}
.pr-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 60% at 50% 45%,color-mix(in srgb,var(--c) 22%,#0a3a22),#02100a 78%)}
.pr.lit .pr-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 50%,transparent),transparent 58%);animation:prl 1.3s ease-out both}
@keyframes prl{from{opacity:0;transform:scale(.6)}40%{opacity:1}to{opacity:.55;transform:scale(1.05)}}
.pr-hd{width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.06em;min-height:30px}
.pr-pk{color:var(--ac)}.pr-ct{margin-left:auto;padding:3px 12px;border-radius:99px;background:#0007;border:1px solid var(--ln);font-size:.85rem}
.pr-stage{position:relative;flex:1;display:grid;place-items:center;width:100%;min-height:0;cursor:pointer}
.pr-stage>*{grid-area:1/1}
.pr-pile{position:relative;width:var(--cw);height:calc(var(--cw)*1.4)}
.pr-pile i{position:absolute;inset:0;border-radius:calc(var(--cw)*.13);background:linear-gradient(160deg,#145a32,#06180d);border:2px solid #c6ff3d55;box-shadow:0 8px 24px -8px #000}
.pr-pile i:nth-child(1){transform:translate(9px,-7px) rotate(3deg)}
.pr-pile i:nth-child(2){transform:translate(-9px,-12px) rotate(-3.5deg);opacity:.8}
.pr-pile i:nth-child(3){transform:translate(14px,-16px) rotate(6deg);opacity:.6}
.pr-card{z-index:2;filter:drop-shadow(0 14px 22px #000a)}
.pr-card .card{box-shadow:0 0 4em -1em var(--c)}
.pr-hint{margin:0;color:var(--mu);font-size:.9rem;min-height:1.4em;text-align:center;animation:prh 1.6s ease-in-out infinite}
@keyframes prh{50%{opacity:.5}}
.pr-ft{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:40px;width:100%}
.pr-ft .btn{width:auto}
.pr.sum{justify-content:flex-start;gap:8px}
.pr-sh{text-align:center;flex:none}.pr-sh h2{margin:6px 0 0}
.pr-sg{flex:1;min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pr-sg .grid{gap:12px;margin:6px 0 12px}
.pr-si{position:relative;cursor:pointer}.pr-si .card{box-shadow:0 0 1.4em -.4em var(--c)}
.pr-q{position:absolute;right:-5px;bottom:-7px;z-index:6;padding:1px 8px;border-radius:99px;background:#000d;border:1px solid var(--c);color:#fff;font:800 .8rem/1.5 system-ui;font-style:normal}
.pr-sf{flex:none;width:100%;max-width:420px}.pr-sf .btn{width:100%}

/* ===== combat sur mobile ===== */
.bh .pill{white-space:nowrap}
.ab,.abs,.vat{min-width:0}
.vat .vfs,.vat .vfoot{max-width:100%}

/* téléphone en portrait (ou toute fenêtre étroite) : on resserre le bandeau d'attaques pour que rien ne déborde */
@media (max-width:520px){
  .bt{--cwb:min(27vw,calc((100dvh - 318px)/5.8),150px);--cw:var(--cwb);padding-left:6px;padding-right:6px}
  .bh{gap:5px;flex-wrap:nowrap}
  .bh .pill{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:.72rem;padding:5px 9px}
  .bh button.pill{flex:none}
  .mid{font-size:.8rem;letter-spacing:.01em;min-height:2.1em;padding:4px 6px}
  .ab{gap:4px}
  .ab .ds{font-size:.76rem;min-height:1.2em}
  .abs{gap:4px}
  .vat{padding:5px 3px 5px;gap:4px;border-radius:12px}
  .vat .vfs{gap:2px}
  .vat .vf{font-size:.64rem;padding:2px 5px}
  .vat .vtr{font-size:.85rem}
  .vat .vfoot{flex-wrap:wrap;gap:3px 5px;min-height:0}
  .vat .bd2{gap:2px;padding:3px 5px 3px 4px}.vat .bd2 i{width:6px;height:6px}.vat .bd2 .e,.vat .bd2 .a{gap:2px}
  .vat .pw s{width:4px}.vat .cdp{font-size:.62rem}.vat .cdp s{width:4px;height:4px}
  .vat .vn{font-size:.62rem;white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
  .abt.vfi{padding:5px 7px;font-size:.9rem}.abt.vfi small{font-size:.55rem}
  /* le bouton 💬 (emotes) occupe le coin bas-gauche : on lui réserve sa place à côté de « Valider » */
  .abg{min-height:44px;padding-left:54px}.abg .go{min-width:0;flex:1}
}
/* petits téléphones */
@media (max-width:360px){
  .vat .vf{font-size:.6rem;padding:2px 4px}
  .vat .bd2 i{width:5px;height:5px}
}

/* paysage sur téléphone (fenêtre basse) : adversaire et toi côte à côte, attaques dans un panneau à droite */
@media (orientation:landscape) and (max-height:560px){
  .bt.fg{--pw:clamp(230px,36vw,310px);--cwb:min(calc((100dvh - 116px)/3),calc((100vw - var(--pw) - 64px)/6),104px);--cw:var(--cwb);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--pw);grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:10px;row-gap:2px;justify-content:stretch;align-items:center;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:calc(4px + env(safe-area-inset-bottom));padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  .bt.fg>.bh{grid-column:1/-1;grid-row:1}
  .bt.fg>.mechb{grid-column:1/-1;grid-row:2;margin:0 0 2px;padding:3px 8px;font-size:.72rem}
  .bt.fg>.tl{grid-column:1/3;grid-row:3;height:28px}
  .bt.fg>.tl .tc{width:24px;height:24px;font-size:.85rem}.bt.fg>.tl .tc.cur{width:30px;height:30px;font-size:1.05rem}
  .bt.fg>.bfoe{grid-column:1;grid-row:4}
  .bt.fg>.bme{grid-column:2;grid-row:4}
  .bt.fg>.mid{grid-column:1/3;grid-row:5;min-height:0;padding:3px 6px;font-size:.78rem}
  .bt.fg>.ab{grid-column:3;grid-row:3/6;align-self:stretch;max-width:none;min-height:0;overflow-y:auto;justify-content:flex-start;gap:4px;padding:0 0 0 2px}
  .bt.fg .row{gap:6px;margin:2px 0}
  .bt.fg .bd{justify-self:center}
  .bt.fg .abs{flex-direction:column;gap:4px}
  .bt.fg .vat{flex:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2px 6px;padding:4px 8px;text-align:left}
  .bt.fg .vat .vn{order:-1;flex:1 0 100%;min-height:0;display:block;white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;color:var(--tx)}
  .bt.fg .vat .vfs{justify-content:flex-start}
  .bt.fg .abt.vfi{flex:none;display:flex;flex-direction:row;gap:6px;justify-content:center;align-items:center;padding:3px 10px;font-size:.85rem}
  .bt.fg .abt.vfi small{margin:0;font-size:.68rem}
  .bt.fg .abg{padding-left:0;min-height:0;justify-content:flex-end}
  .bt.fg .abg .go{min-width:0;flex:1}
  /* 💬 : en haut, au centre, pour ne pas masquer le plateau ni le panneau */
  #v2emo{left:50%;bottom:auto;top:calc(4px + env(safe-area-inset-top,0px));transform:translateX(-50%);align-items:center}
  .v2-eb{width:34px;height:34px;font-size:1.05rem}
  /* phase de pose : tout ne tient plus à l'écran, on laisse défiler */
  .bt.pl{justify-content:flex-start;overflow-y:auto;gap:6px}
}