:root{
  --bg:#090d1a;--text:#e2e8f0;--dim:#64748b;
  --purple:#a855f7;--red:#ef4444;--green:#22c55e;--gold:#facc15;
  --font:"Inter","Cairo",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{
  min-height:100vh;font-family:var(--font);
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(34,197,94,.12),transparent),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(250,204,21,.1),transparent);
}

.home-btn{
  position:fixed;left:14px;top:14px;z-index:70;
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;text-decoration:none;
  background:rgba(0,0,0,.5);backdrop-filter:blur(16px);
  transition:transform .15s,background .2s;
}
.home-btn:hover{transform:scale(1.08);background:rgba(0,0,0,.65)}

.fullscreen{
  position:fixed;inset:0;z-index:30;
  display:none;align-items:center;justify-content:center;
}
.fullscreen.active{display:flex;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.game-wrap{
  width:min(520px,94vw);
  display:flex;flex-direction:column;align-items:center;gap:20px;
}

/* ── BALANCE CARD ── */
.balance-card{
  width:100%;text-align:center;
  padding:24px 20px;border-radius:20px;
  background:
    linear-gradient(145deg,rgba(0,0,0,.45),rgba(0,0,0,.35)),
    radial-gradient(circle at top,rgba(250,204,21,.08),transparent 60%);
  backdrop-filter:blur(20px);
  border:1px solid rgba(250,204,21,.2);
}
.balance-label{
  font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px;
}
.balance-amount{
  font-size:clamp(2.2rem,8vw,3.5rem);font-weight:900;
  background:linear-gradient(135deg,#fef3c7,#f59e0b,#fde68a);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:goldShimmer 3s ease infinite;
  transition:transform .2s;
}
.balance-amount.bump{animation:balanceBump .3s ease}
@keyframes goldShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes balanceBump{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

.balance-multi{
  font-size:.9rem;font-weight:700;color:var(--green);
  margin-top:4px;
}

/* ── GRID ── */
.grid{
  width:100%;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}

.mine-cell{
  aspect-ratio:1/1;border-radius:14px;position:relative;
  border:1px solid rgba(71,85,105,.3);
  background:rgba(26,34,52,.95);
  color:#475569;font-size:1rem;font-weight:800;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .15s,box-shadow .2s,border-color .2s;
}
.mine-cell:hover:not(.opened){
  transform:translateY(-3px) scale(1.04);
  border-color:rgba(250,204,21,.5);
  box-shadow:0 6px 22px rgba(250,204,21,.15);
}
.mine-cell.opened{cursor:default;transform:none}
.mine-cell.reveal-dim{opacity:.5}

.mine-cell.gem{
  color:#e0f2fe;font-size:1.35rem;
  border-color:rgba(34,197,94,.5);
  background:radial-gradient(circle at 30% 30%,rgba(34,197,94,.14),transparent 60%),#111827;
  box-shadow:0 0 18px rgba(34,197,94,.18);
  animation:flipGem .4s cubic-bezier(.34,1.56,.64,1);
}
.mine-cell.gem::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,rgba(34,197,94,.2),transparent 65%);
  animation:pulse 1.4s ease-in-out infinite;pointer-events:none;
}

.mine-cell.bomb{
  color:#fecaca;font-size:1.35rem;
  border-color:rgba(239,68,68,.55);
  background:radial-gradient(circle at 30% 30%,rgba(239,68,68,.16),transparent 60%),#111827;
  box-shadow:0 0 22px rgba(239,68,68,.25);
  animation:shake .4s cubic-bezier(.34,1.56,.64,1);
}
.mine-cell.bomb::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:radial-gradient(circle,rgba(239,68,68,.4),transparent 60%);
  animation:bombFade .5s ease-out forwards;pointer-events:none;
}

@keyframes flipGem{
  0%{transform:scale(.5) rotateY(180deg);opacity:0}
  60%{transform:scale(1.1) rotateY(0);opacity:1}
  100%{transform:scale(1)}
}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.65;transform:scale(1.03)}}
@keyframes shake{
  0%{transform:scale(.4);opacity:0;filter:brightness(2.5)}
  30%{transform:scale(1.15) rotate(5deg);opacity:1}
  60%{transform:scale(.95) rotate(-3deg)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
@keyframes bombFade{0%{opacity:1}100%{opacity:0}}

/* ── ACTIONS ── */
.actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}

.btn{
  border:none;border-radius:14px;padding:12px 28px;
  font-size:.95rem;font-weight:700;color:#fff;cursor:pointer;
  transition:transform .12s,box-shadow .2s,filter .2s;
}
.btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:not(:disabled):active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}

.btn--cashout{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 8px 24px rgba(34,197,94,.3);
  font-size:1.05rem;padding:14px 36px;
}
.btn--ghost{
  background:transparent;border:1px solid rgba(100,116,139,.4);
  color:#94a3b8;
}
.btn--primary{
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  box-shadow:0 6px 20px rgba(124,58,237,.3);
}

/* ── RESULT ── */
.result-banner{
  width:100%;padding:16px;border-radius:16px;
  text-align:center;font-size:1.2rem;font-weight:900;
}
.result-banner.win{
  color:#bbf7d0;background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.3);
  text-shadow:0 0 10px rgba(34,197,94,.3);
}
.result-banner.lose{
  color:#fecaca;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
  text-shadow:0 0 10px rgba(239,68,68,.3);
}

/* ── EXPLOSION ── */
.explosion{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.explosion-bomb,.explosion-text{position:absolute;opacity:0}
.explosion-bomb{font-size:4rem}
.explosion-text{
  font-size:clamp(3rem,12vw,6rem);font-weight:900;
  color:#fef3c7;letter-spacing:.15em;
  text-shadow:0 0 40px rgba(239,68,68,.8),0 0 80px rgba(255,165,0,.5);
}
.explosion.phase-1{background:rgba(0,0,0,.65)}
.explosion.phase-1 .explosion-bomb{opacity:1;animation:p1Grow 1.5s cubic-bezier(.15,1,.25,1) forwards}
@keyframes p1Grow{
  0%{transform:scale(1)}
  40%{transform:scale(6)}
  55%{transform:scale(5.5)}
  65%{transform:scale(7)}
  75%{transform:scale(6.5)}
  85%{transform:scale(8)}
  100%{transform:scale(10)}
}
.explosion.phase-2{background:rgba(127,29,29,.75);animation:p2Bg .5s ease}
.explosion.phase-2 .explosion-bomb{opacity:1;animation:p2Shake .04s linear infinite}
@keyframes p2Bg{0%{background:rgba(255,255,255,1)}100%{background:rgba(127,29,29,.75)}}
@keyframes p2Shake{
  0%{transform:scale(10) translate(0,0)}
  25%{transform:scale(10) translate(12px,-10px)}
  50%{transform:scale(10) translate(-10px,12px)}
  75%{transform:scale(10) translate(10px,6px)}
  100%{transform:scale(10) translate(-6px,-8px)}
}
.explosion.phase-3{animation:p3Bg 1s ease forwards}
.explosion.phase-3 .explosion-bomb{opacity:1;animation:p3Out .4s ease forwards}
.explosion.phase-3 .explosion-text{animation:p3Text .8s cubic-bezier(.34,1.56,.64,1) .2s forwards}
@keyframes p3Bg{
  0%{background:rgba(239,68,68,.7)}
  20%{background:rgba(255,165,0,.5)}
  50%{background:rgba(220,38,38,.3)}
  100%{background:rgba(0,0,0,0)}
}
@keyframes p3Out{
  0%{transform:scale(10);opacity:1;filter:brightness(5)}
  100%{transform:scale(30);opacity:0}
}
@keyframes p3Text{
  0%{opacity:0;transform:scale(.2)}
  50%{opacity:1;transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.4)}
}

body.shaking{animation:screenShake .4s linear}
@keyframes screenShake{
  0%{transform:translate(0,0)}10%{transform:translate(-10px,6px)}
  20%{transform:translate(9px,-8px)}30%{transform:translate(-8px,5px)}
  40%{transform:translate(7px,-9px)}50%{transform:translate(-5px,8px)}
  60%{transform:translate(8px,-4px)}70%{transform:translate(-4px,6px)}
  80%{transform:translate(5px,-5px)}90%{transform:translate(-3px,4px)}
  100%{transform:translate(0,0)}
}

/* ── NAME SCREEN ── */
.name-wrap{width:min(420px,94vw)}
.name-hero{text-align:center;padding:20px}
.name-hero .hero-icon{font-size:3.5rem;animation:float 3s ease-in-out infinite}
.name-hero h1{
  margin:10px 0 4px;font-size:2rem;font-weight:900;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.name-hero p{color:var(--dim);font-size:.9rem}
.name-form{
  display:flex;flex-direction:column;gap:12px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(20px);
  border-radius:20px;padding:20px;
}
.name-form input{
  padding:12px 14px;font-size:1rem;
  border-radius:12px;border:1px solid rgba(71,85,105,.4);
  background:rgba(15,23,42,.8);color:var(--text);width:100%;
}
.name-form input:focus{outline:none;border-color:rgba(168,85,247,.5)}

/* ── LIVE LEADERBOARD ── */
.live-lb{
  position:fixed;right:14px;top:14px;width:250px;z-index:60;
  background:rgba(0,0,0,.5);backdrop-filter:blur(24px);
  border-radius:16px;padding:12px;
}
.live-lb h3{margin:0 0 8px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lb-list{list-style:none;padding:0;margin:0}
.lb-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 8px;margin-bottom:3px;border-radius:8px;
  background:rgba(255,255,255,.04);font-size:.82rem;
}
.lb-list li:first-child{background:rgba(250,204,21,.08)}
.lb-list li .rank{color:var(--dim);font-weight:700;min-width:28px}
.lb-list li .name{flex:1;font-weight:600}
.lb-list li .val{font-weight:800;color:var(--green)}

.streak-display{
  margin-top:6px;font-size:.9rem;color:var(--green);
}

.hidden{display:none!important}

/* LB TOGGLE */
.lb-toggle{
  position:fixed;right:14px;top:14px;z-index:65;
  background:rgba(0,0,0,.55);backdrop-filter:blur(14px);
  border:1px solid rgba(148,163,184,.3);
  border-radius:12px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;cursor:pointer;
  transition:transform .15s,background .2s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.lb-toggle:hover{transform:scale(1.08);background:rgba(0,0,0,.75);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.lb-toggle.active{background:rgba(168,85,247,.25);border-color:rgba(168,85,247,.45)}
.live-lb{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.live-lb.lb-hidden{
  transform:translateX(calc(100% + 30px));
  opacity:0;pointer-events:none;
}

@media(max-width:500px){
  .grid{gap:8px}
  .mine-cell{border-radius:10px}
}