* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #0c1410; }
  body { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
  #game { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

  /* --- HUD CASINO PRO --- */
  .topbar { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between;
    align-items: flex-start; padding: 0 16px; z-index: 5; pointer-events: none; }
  .hud-pill {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
    background: linear-gradient(160deg, rgba(40,28,60,.92), rgba(16,10,26,.92));
    border: 2px solid rgba(245,197,66,.7); border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(245,197,66,.22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .hud-pill .ic { font-size: 23px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
  .hud-pill .lbl { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #b9a9d6; text-transform: uppercase; }
  .hud-pill .amt, .hud-pill b { font-size: 20px; font-weight: 900; color: #ffd24a; line-height: 1.05; text-shadow: 0 0 10px rgba(245,197,66,.6); }
  .hud-pill.combo b { color: #ff9d4d; text-shadow: 0 0 10px rgba(255,120,40,.6); }

  #message {
    position: absolute; left: 50%; transform: translateX(-50%); top: 86px; z-index: 5; pointer-events: none;
    width: max-content; max-width: 88vw; text-align: center;
    font-size: 22px; font-weight: 900; color: #fff; letter-spacing: .3px;
    padding: 8px 18px; border-radius: 14px;
    background: rgba(10,7,16,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 20px rgba(0,0,0,.4);
    text-shadow: 0 2px 5px rgba(0,0,0,.8);
  }
  #message .small { display: block; font-size: 15px; font-weight: 700; opacity: .92; margin-top: 4px; }
  #message.win { color: #ffe14d; text-shadow: 0 0 22px #ffd24a, 0 3px 0 #6b4a00; }
  #message.lose { color: #ff7a7a; text-shadow: 0 0 18px #ff2d2d, 0 3px 0 #5a0000; }

  .betbar { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 10px; pointer-events: none; }
  .deck {
    pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 12px 16px; max-width: 96vw; width: min(420px, 96vw);
    background: linear-gradient(180deg, rgba(28,20,44,.95), rgba(12,8,22,.97));
    border: 2px solid rgba(245,197,66,.5); border-top-color: rgba(245,197,66,.85); border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(245,197,66,.16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .bet-box { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 20px; border-radius: 16px; min-width: 96px;
    background: linear-gradient(180deg, rgba(58,42,18,.65), rgba(20,14,6,.78));
    border: 2px solid #f5c542; animation: czBetGlow 3s ease-in-out infinite; }
  @keyframes czBetGlow {
    0%, 100% { box-shadow: inset 0 0 12px rgba(245,197,66,.22), 0 0 12px rgba(245,197,66,.18); }
    50% { box-shadow: inset 0 0 16px rgba(245,197,66,.32), 0 0 20px rgba(245,197,66,.38); } }
  .bet-box .lbl { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #e8c870; text-transform: uppercase; }
  .bet-input {
    width: 116px; margin-top: 3px; text-align: center; border-radius: 12px; border: 2px solid #f5c542;
    background: rgba(10,7,18,.6); color: #fff; font-family: inherit; font-weight: 900; font-size: 26px;
    line-height: 1.05; padding: 3px 6px; outline: none; -moz-appearance: textfield;
    text-shadow: 0 0 10px rgba(245,197,66,.7); box-shadow: inset 0 0 10px rgba(245,197,66,.2);
  }
  .bet-input::-webkit-outer-spin-button, .bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .bet-input:focus { border-color: #ffe879; box-shadow: 0 0 0 3px rgba(245,197,66,.35), inset 0 0 10px rgba(245,197,66,.25); }
  .bet-input.bump { animation: betBump .28s ease; }
  @keyframes betBump { 0% { transform: scale(1); } 45% { transform: scale(1.12); color: #ffe14d; } 100% { transform: scale(1); } }

  .chips { display: flex; gap: 8px; }
  .chipbtn {                         /* vrai jeton de casino : spots de tranche + anneau + relief */
    --c1: #c0203a; --c2: #ff7a8c;
    width: 56px; height: 56px; border-radius: 50%; cursor: pointer; position: relative; border: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 900; font-size: 13.5px; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background:
      radial-gradient(circle at 50% 30%, rgba(255,255,255,.30), transparent 50%),
      radial-gradient(circle at 50% 50%, transparent 0 55%, rgba(255,255,255,.70) 56% 60%, transparent 61%),
      radial-gradient(circle at 50% 42%, var(--c2) 0 28%, var(--c1) 56%, transparent 61%),
      repeating-conic-gradient(from 0deg, var(--c1) 0 39deg, #fff7ea 39deg 45deg);
    box-shadow: 0 5px 9px rgba(0,0,0,.5), inset 0 -5px 9px rgba(0,0,0,.3), inset 0 5px 7px rgba(255,255,255,.18);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s;
  }
  .chipbtn[data-bet="50"]  { --c1: #1d6fb0; --c2: #7fd4ff; }
  .chipbtn[data-bet="100"] { --c1: #1f8d45; --c2: #86f0a0; }
  .chipbtn[data-bet="500"] { --c1: #7d2fb0; --c2: #d9a8ff; }
  .chipbtn.clear { --c1: #3a3f47; --c2: #9aa1ab; font-size: 17px; }
  .chipbtn:hover { transform: translateY(-3px); filter: brightness(1.08);
    box-shadow: 0 9px 15px rgba(0,0,0,.5), 0 0 16px rgba(245,197,66,.28), inset 0 -5px 9px rgba(0,0,0,.3), inset 0 5px 7px rgba(255,255,255,.18); }
  .chipbtn:active { transform: translateY(2px) scale(.95); }
  @media (max-width: 560px) {
    .betbar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 0 6px; }
    .deck { gap: 7px 10px; padding: 8px 12px; border-radius: 18px; }
    .bet-box { padding: 5px 18px; min-width: 96px; border-radius: 14px; }
    .bet-box .lbl { font-size: 9px; letter-spacing: 1.4px; }
    .bet-input { width: 100px; font-size: 25px; margin-top: 2px; padding: 2px 4px; }
    .bet-win { font-size: 11px; margin-top: 2px; }
    .chips { gap: 8px; }
    .chipbtn { width: 60px; height: 60px; font-size: 14px; }
    .chipbtn.clear { font-size: 19px; }
    .actions { gap: 8px; }
    #allInBtn, #playBtn { font-size: 15px; padding: 12px 8px; border-radius: 13px; }
  }

  .bet-win { margin-top: 4px; font-size: 11px; font-weight: 800; color: #8fe0a0; letter-spacing: .3px; white-space: nowrap; }
  .bet-win b { color: #b8f5c6; text-shadow: 0 0 8px rgba(120,240,150,.45); }

  /* ligne d'actions : ALL IN + JOUER côte à côte */
  .actions { display: flex; gap: 10px; width: 100%; }
  .actions > button { flex: 1; }
  #allInBtn {
    pointer-events: auto; cursor: pointer; border: none; position: relative;
    font-weight: 900; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; color: #fff;
    padding: 14px 12px; border-radius: 16px;
    background: linear-gradient(180deg, #ff6a6a 0%, #e22a2f 58%, #b00f15 100%);
    box-shadow: 0 5px 0 #7d0b10, 0 9px 20px rgba(0,0,0,.5), 0 0 18px rgba(255,60,60,.5), inset 0 2px 0 rgba(255,255,255,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .1s; }
  #allInBtn::before { content: '🔥 '; }
  #allInBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #7d0b10, 0 4px 12px rgba(0,0,0,.5); }
  #allInBtn:disabled { filter: grayscale(.5) brightness(.8); box-shadow: 0 5px 0 #555; cursor: default; }

  #playBtn {
    pointer-events: auto; cursor: pointer; border: none; position: relative;
    font-weight: 900; font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; color: #3a2200;
    padding: 14px 12px; border-radius: 16px;
    background: linear-gradient(180deg, #ffe879 0%, #f7bb1e 55%, #e89a0c 100%);
    box-shadow: 0 6px 0 #9a6400, 0 10px 22px rgba(0,0,0,.5), 0 0 24px rgba(245,197,66,.6), inset 0 2px 0 rgba(255,255,255,.6);
    animation: playPulse 1.8s ease-in-out infinite;
  }
  #playBtn::before { content: '▶'; margin-right: 8px; }
  #playBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a6400, 0 4px 12px rgba(0,0,0,.5); }
  #playBtn:disabled { filter: grayscale(.55) brightness(.82); box-shadow: 0 6px 0 #444; animation: none; cursor: default; }
  @keyframes playPulse {
    0%,100% { box-shadow: 0 6px 0 #9a6400, 0 10px 22px rgba(0,0,0,.5), 0 0 18px rgba(245,197,66,.5), inset 0 2px 0 rgba(255,255,255,.6); }
    50% { box-shadow: 0 6px 0 #9a6400, 0 10px 22px rgba(0,0,0,.5), 0 0 36px rgba(245,197,66,.95), inset 0 2px 0 rgba(255,255,255,.6); }
  }

  /* --- gros pop-up de résultat (dopamine) --- */
  #bigpop { position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .3s ease; text-align: center; }
  #bigpop.show { animation: bpIn .55s cubic-bezier(.2,1.5,.4,1) forwards; }
  #bigpop .bp-title { font-size: clamp(42px, 11vw, 96px); font-weight: 900; letter-spacing: 2px; line-height: 1; }
  #bigpop .bp-amt { font-size: clamp(36px, 9vw, 82px); font-weight: 900; line-height: 1; }
  #bigpop .bp-sub { font-size: clamp(16px, 4vw, 24px); font-weight: 800; color: #fff; opacity: .92; margin-top: 6px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5); }
  #bigpop.win .bp-title { color: #ffe14d; text-shadow: 0 0 34px #ffd24a, 0 5px 0 #6b4a00; }
  #bigpop.win .bp-amt, #bigpop.jackpot .bp-amt { color: #fff; text-shadow: 0 0 30px #ffd24a, 0 5px 0 #6b4a00; }
  #bigpop.jackpot .bp-title { background: linear-gradient(90deg,#ffd24a,#ff4d6d,#5cd6ff,#76e08a,#ffd24a);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 26px #ffd24a); animation: bpRainbow 1.1s linear infinite; }
  #bigpop.lose .bp-title { color: #ff6b6b; text-shadow: 0 0 26px #ff2d2d, 0 5px 0 #5a0000; }
  #bigpop.lose .bp-amt { color: #ff9a9a; text-shadow: 0 0 18px #ff2d2d, 0 4px 0 #5a0000; }
  @keyframes bpIn { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.14); }
    78% { transform: scale(.95); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes bpRainbow { to { background-position: 200% center; } }

  /* ===== splash de chargement (effet app native) ===== */
  #splash { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background: radial-gradient(circle at 50% 38%, #15324d 0%, #08131f 65%, #050c14 100%);
    animation: splashOut .5s ease 2.3s forwards; }   /* reste ~2,8 s puis part seul (CSS pur, ne peut PAS rester bloqué) */
  #splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
  @keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
  #splash .sp-logo { font-size: 78px; filter: drop-shadow(0 0 18px rgba(245,197,66,.5)); animation: spPulse 1.1s ease-in-out infinite; }
  #splash .sp-name { font-weight: 900; font-size: 30px; letter-spacing: 2.5px; color: #ffe9a8; text-shadow: 0 0 18px rgba(245,197,66,.6); }
  #splash .sp-name span { background: linear-gradient(90deg, #ff4d6d, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
  #splash .sp-dots { display: flex; gap: 8px; margin-top: 6px; }
  #splash .sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f5c542; animation: spDot 1s ease-in-out infinite; }
  #splash .sp-dots i:nth-child(2) { animation-delay: .15s; }
  #splash .sp-dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes spPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
  @keyframes spDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }