/* ============================================================
   CoinsBase — finitions : écran de chargement, transitions,
   animations de gain, tablette (barre d'icônes) et téléphone
   ============================================================ */

/* ---------- Écran de chargement ---------- */
#splash { background: radial-gradient(700px 420px at 50% 40%, color-mix(in srgb, var(--accent2) 22%, var(--bg)), var(--bg) 70%); gap: 22px; }
#splash .sp-logo { width: 96px; height: 96px; animation: spLogo 1.6s cubic-bezier(.5, 0, .5, 1) infinite; filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent)); }
#splash .sp-logo svg, #splash .sp-logo img { width: 100%; height: 100%; }
@keyframes spLogo { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(6deg); } }
#splash .sp-name { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.04em; color: var(--text); }
#splash .sp-name em { font-style: normal; color: var(--accent); }
#splash .sp-bar { width: 220px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
#splash .sp-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .35s ease; }
#splash .sp-tip { color: var(--muted); font-size: 13px; font-weight: 600; min-height: 18px; text-align: center; max-width: 300px; font-family: var(--ui); }
#splash.gone { opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .5s; }

/* ---------- Transitions générales ---------- */
.btn, .icon-btn, .tile, .seg button, .tabs button, .game-card, .shop-item, .duel-item, .friend { -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled), .icon-btn:active, .seg button:active, .tabs button:active { transform: scale(.96); }
.btn { transition: transform .12s, filter .15s, border-color .15s, background .15s, opacity .15s; }
.page { animation: pageIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.game-grid .game-card { animation: cardIn .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.game-grid .game-card:nth-child(2) { animation-delay: .03s } .game-grid .game-card:nth-child(3) { animation-delay: .06s } .game-grid .game-card:nth-child(4) { animation-delay: .09s }
.game-grid .game-card:nth-child(5) { animation-delay: .12s } .game-grid .game-card:nth-child(6) { animation-delay: .15s } .game-grid .game-card:nth-child(n+7) { animation-delay: .18s }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.card, .stat { transition: border-color .2s, transform .2s; }
.toast { animation: toastIn .3s cubic-bezier(.2, 1.4, .4, 1); }
.toast.out { opacity: 0; transform: translateY(10px) scale(.96); transition: .3s; }
.modal-back { animation: fade .2s; }
.modal { animation: modalIn .28s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.dropdown { animation: dropIn .18s ease-out; transform-origin: top right; }
@keyframes dropIn { from { opacity: 0; transform: scale(.95) translateY(-4px); } }
.result-pop.out { opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .35s, transform .35s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Solde : petite animation de compteur */
.wallet .bal span { display: inline-block; min-width: 60px; text-align: right; }
.bal-delta { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 13px; pointer-events: none; animation: deltaUp 1.2s ease-out forwards; white-space: nowrap; }
.wallet { position: relative; overflow: visible; }
@keyframes deltaUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 18px); } }

/* ---------- Animation de gain (plein écran, disparaît seule) ---------- */
.celebrate { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; pointer-events: auto; background: radial-gradient(circle at center, color-mix(in srgb, var(--bg) 35%, transparent), color-mix(in srgb, var(--bg) 75%, transparent)); backdrop-filter: blur(3px); animation: fade .25s; cursor: pointer; }
.celebrate.out { opacity: 0; transition: opacity .45s; }
.celebrate .cel-box { text-align: center; animation: celIn .55s cubic-bezier(.2, 1.6, .4, 1); position: relative; }
.celebrate .cel-ring { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent 30%, color-mix(in srgb, var(--accent2) 40%, transparent), transparent 60%, color-mix(in srgb, var(--accent) 45%, transparent), transparent); animation: spin 3s linear infinite; filter: blur(14px); z-index: -1; }
.celebrate .cel-tag { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .25em; color: var(--accent); text-transform: uppercase; }
.celebrate .cel-mult { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 14vw, 132px); line-height: 1; letter-spacing: -.05em; background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px color-mix(in srgb, var(--accent) 50%, transparent)); }
.celebrate .cel-amt { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 5vw, 34px); color: var(--win); margin-top: 6px; }
.celebrate .cel-hint { color: var(--muted); font-size: 12px; margin-top: 14px; font-weight: 600; }
.celebrate.mega .cel-tag { color: #f472b6; }
.coin-rain { position: fixed; inset: 0; pointer-events: none; z-index: 251; overflow: hidden; }
.coin-rain span { position: absolute; top: -50px; width: 30px; height: 30px; animation: coinFall linear forwards; }
@keyframes coinFall { to { transform: translateY(115vh) rotate(720deg); } }
@keyframes celIn { from { opacity: 0; transform: scale(.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Fond derrière les panneaux mobiles ---------- */
.backdrop { position: fixed; inset: 0; background: #0008; backdrop-filter: blur(2px); z-index: 66; opacity: 0; pointer-events: none; transition: opacity .25s; }
.backdrop.on { opacity: 1; pointer-events: auto; }

/* ---------- Tableaux défilants ---------- */
.card:has(> .table), #feedBox, #lbBox, #gfeed, #tW, #tM, #uList, #aBody .card { overflow-x: auto; }
.table { min-width: 460px; }

/* ---------- Tablette paysage / petits PC : barre d'icônes ---------- */
@media (min-width: 981px) and (max-width: 1280px) {
  .shell { grid-template-columns: 76px 1fr auto; }
  .sidebar { width: 76px; overflow-x: hidden; transition: width .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; position: relative; z-index: 70; }
  .sidebar:hover { width: 250px; box-shadow: 20px 0 50px #0008; }
  .sidebar .brand-name, .sidebar .nav a span, .sidebar .nav a .tag, .sidebar .nav-title { opacity: 0; transition: opacity .15s; white-space: nowrap; }
  .sidebar:hover .brand-name, .sidebar:hover .nav a span, .sidebar:hover .nav a .tag, .sidebar:hover .nav-title { opacity: 1; }
  .sidebar .nav-title { height: 18px; padding: 8px 10px 4px; }
  .sidebar .brand { padding: 16px 20px; }
  .nav a { padding: 10px 17px; }
  .game { grid-template-columns: 280px 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablette portrait & téléphone ---------- */
@media (max-width: 980px) {
  :root { --top: 58px; }
  .sidebar { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .chat { position: fixed; right: 0; top: 0; bottom: 0; z-index: 68; width: min(380px, 100%); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); display: flex !important; }
  .chat:not(.closed) { transform: none; box-shadow: -20px 0 50px #0009; }
  .game { min-height: 0; border-radius: 16px; }
  .game-stage { padding: 18px 14px; min-height: 340px; }
  .game-panel { padding: 14px; gap: 12px; }
  .game-panel .btn.big.primary, .game-panel .btn.big.green, .game-panel .btn.big.danger { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 10px 30px #0008; }
  .hero { padding: 22px; border-radius: 18px; }
  .hero h1 { font-size: 26px; }
  .modal-back { place-items: end center; padding: 0; }
  .modal { max-width: 100%; border-radius: 22px 22px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); animation: sheetIn .32s cubic-bezier(.2, .9, .3, 1); max-height: 88vh; }
  @keyframes sheetIn { from { transform: translateY(100%); } }
  .admin-nav { gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .admin-nav button { white-space: nowrap; flex: none; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
  .sticky-save { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .friends-layout { min-height: 0; }
  .dm-box { height: 60vh; }
  #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .toast { width: 100%; justify-content: center; text-align: center; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .game { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; }
  .wallet .bal { padding: 0 10px; font-size: 14px; }
  .wallet a { padding: 10px 11px; }
  #sndBtn { display: none; }
  .user-chip { padding: 3px; border: 0; background: none; }
  .game-head h1 { font-size: 19px; }
  .game-stage { min-height: 300px; padding: 14px 10px; gap: 12px; }
  .big-mult { font-size: 46px; }
  .mines-grid { gap: 7px; }
  .tower-row .tile { height: 34px; }
  .pcard { width: 64px; height: 92px; margin-left: -20px; }
  .pcard .c-tl { font-size: 14px; } .pcard .c-mid { font-size: 28px; }
  .pcard.big { width: 104px; height: 148px; }
  .felt { border-radius: 40px; padding: 18px 10px; border-width: 5px; }
  .poker-board { gap: 4px; } .poker-board .pcard { width: 52px; height: 76px; }
  .coin3d { width: 130px; height: 130px; }
  .wheel-wrap { width: min(320px, 100%); }
  .track .lane { height: 38px; } .horse { width: 38px; height: 32px; }
  .loot { width: 88px; height: 96px; } .loot svg { width: 32px; height: 32px; }
  .battle .spinner-wrap { height: 118px !important; }
  .c4 { gap: 5px; padding: 8px; }
  .ttt { max-width: 280px; } .ttt .cell { font-size: 44px; }
  .slots { gap: 8px; padding: 12px; }
  .section-title { font-size: 15px; margin: 22px 0 12px; }
  h1.title { font-size: 22px; }
  .table { min-width: 0; font-size: 13px; }
  .table th, .table td { padding: 9px 8px; }
  #feedBox .table th:nth-child(3), #feedBox .table td:nth-child(3), #gfeed .table th:nth-child(3), #gfeed .table td:nth-child(3) { display: none; }
  .rank-ladder div { min-width: 96px; }
  .challenge { gap: 10px; }
  .diff-cards { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 22px; border-radius: 18px; }
  .footer { padding-bottom: 20px; }
}
@media (max-width: 380px) { .wallet a { display: none; } .game-grid { gap: 10px; } }

/* Téléphone en paysage : on garde le jeu visible */
@media (max-height: 500px) and (orientation: landscape) {
  .bottom-nav { display: none !important; }
  #view { padding-bottom: 20px !important; }
  .game { grid-template-columns: 260px 1fr !important; }
  .game-panel { order: 0 !important; border-top: 0 !important; border-right: 1px solid var(--border); max-height: calc(100vh - 140px); overflow-y: auto; }
  .game-panel .btn.big { position: static !important; }
  .game-stage { min-height: 260px; }
}
.shell { z-index: auto; }
.modal .grid.g2 { grid-template-columns: 1fr 1fr; }

/* ---------- Tuto, règles, favoris, courbe ---------- */
.tuto-back { position: fixed; inset: 0; z-index: 260; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; animation: fade .25s; }
.tuto-back.out { opacity: 0; transition: opacity .3s; }
.tuto { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 28px 24px 20px; text-align: center; box-shadow: 0 30px 80px #000a; animation: modalIn .35s cubic-bezier(.2, 1.2, .4, 1); }
.tuto-ico { font-size: 54px; line-height: 1; margin-bottom: 10px; animation: celIn .45s cubic-bezier(.2, 1.6, .4, 1); }
.tuto h2 { font-family: var(--display); font-size: 21px; margin: 0 0 8px; letter-spacing: -.02em; }
.tuto p { color: color-mix(in srgb, var(--text) 75%, var(--muted)); margin: 0 0 18px; line-height: 1.55; }
.tuto-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.tuto-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--border); transition: .25s; }
.tuto-dots i.on { width: 24px; background: var(--accent); }
ol.rules { margin: 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.5; }
ol.rules li::marker { color: var(--accent); font-weight: 800; }
.gfav { position: absolute; top: 8px; right: 10px; color: #fde68a; font-size: 18px; text-shadow: 0 2px 8px #0008; }
.game-grid.recent .game-card { aspect-ratio: 3/2.6; }
.game-grid.recent .gico { width: 34%; top: 14%; }
.pchart { width: 100%; height: auto; display: block; }
html.reduce .celebrate .cel-ring { animation: none; }
html.reduce .game-grid .game-card, html.reduce .page { animation: none; }