:root{
  --gold:#DCBB87;
  --gold-strong:#f1d8a4;
  --brown:#66481A;
  --brown-dark:#3c280d;
  --brown-deep:#221507;
  --ivory:#fbf7ef;
  --panel:rgba(255,255,255,0.08);
  --panel-border:rgba(255,255,255,0.16);
  --shadow:0 18px 50px rgba(0,0,0,.42);
  --tile-w:74px;
  --tile-h:98px;
  --scale:1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Raleway',sans-serif;
  color:#fff;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,223,156,.14), transparent 24%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(180deg, #8c6830 0%, #66481A 28%, #2f1d08 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(circle at center, black, transparent 95%);
  opacity:.25;
}
.ambient{
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  opacity:.4;
}
.ambient-1{ width:320px;height:320px; left:-80px; top:-80px; background:rgba(220,187,135,.24); }
.ambient-2{ width:260px;height:260px; right:-60px; top:120px; background:rgba(255,255,255,.12); }
.ambient-3{ width:260px;height:260px; left:20%; bottom:-120px; background:rgba(220,187,135,.14); }

.app-shell{
  min-height:100dvh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.hero-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(102,72,26,.85), rgba(50,31,10,.88));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.hero-left{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand-crest{
  width:72px;height:72px;
  border-radius:24px;
  display:grid;place-items:center;
  font-size:34px;
  color:var(--brown-dark);
  background:
    radial-gradient(circle at 30% 30%, #fff4d6, #e4c384 60%, #b78940 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    inset 0 -10px 20px rgba(0,0,0,.12),
    0 10px 24px rgba(0,0,0,.35);
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:800;
  font-size:12px;
  color:var(--gold-strong);
}
.brand-copy h1{
  margin:4px 0 6px;
  font-size:clamp(30px,4.2vw,48px);
  line-height:1;
  color:#fff9ea;
  text-shadow:0 1px 0 rgba(255,255,255,.15), 0 10px 24px rgba(0,0,0,.25);
}
.brand-copy p{
  margin:0;
  max-width:760px;
  color:rgba(255,255,255,.84);
}
.hero-right{
  display:flex;
  align-items:center;
}
.jackpot-card{
  min-width:180px;
  padding:16px 18px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,245,214,.2), rgba(255,255,255,.05)),
    linear-gradient(180deg, rgba(220,187,135,.24), rgba(0,0,0,.14));
  border:1px solid rgba(255,255,255,.18);
  text-align:right;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.25);
}
.jackpot-label{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:4px;
}
.jackpot-card strong{
  font-size:34px;
  color:#fff6de;
}
.dashboard{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:10px;
  flex:0 0 auto;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(90px,1fr));
  gap:8px;
}
.stat-card{
  padding:10px 12px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
    rgba(255,255,255,.05);
  border:1px solid var(--panel-border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.stat-card .label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.68);
}
.stat-card strong{
  display:block;
  margin-top:4px;
  font-size:22px;
  color:#fff;
}
.controls{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px;
}
.btn{
  border:none;
  border-radius:14px;
  padding:10px 12px;
  font:700 14px 'Raleway',sans-serif;
  cursor:pointer;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s ease, filter .18s ease, background .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  color:var(--brown-dark);
  background:
    linear-gradient(180deg, #fff2cf 0%, #f4d598 38%, var(--gold) 100%);
  border-color:rgba(255,255,255,.36);
}
.table-shell{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  border-radius:26px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(59,40,13,.92), rgba(32,20,7,.96));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
}
.table-shell::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(220,187,135,.18);
  pointer-events:none;
}
.table-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.table-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}
.live-dot{
  width:10px;height:10px;border-radius:50%;
  background:#69e07a;
  box-shadow:0 0 0 5px rgba(105,224,122,.12), 0 0 16px rgba(105,224,122,.5);
}
.legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
  color:rgba(255,255,255,.74);
}
.dot{
  width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;
}
.dot.free{ background:#69e07a; box-shadow:0 0 0 4px rgba(105,224,122,.14); }
.dot.blocked{ background:#d86c6c; box-shadow:0 0 0 4px rgba(216,108,108,.14); }
.dot.hint{ background:var(--gold); box-shadow:0 0 0 4px rgba(220,187,135,.18); }

.board-frame{
  position:relative;
  height:100%;
  padding:10px;
  border-radius:26px;
  background:
    radial-gradient(circle at center, rgba(220,187,135,.12), transparent 58%),
    linear-gradient(180deg, rgba(34,21,7,.9), rgba(20,12,4,.96));
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.corner{
  position:absolute;
  width:28px;height:28px;
  border:2px solid rgba(220,187,135,.5);
  opacity:.7;
  pointer-events:none;
}
.corner-tl{ top:12px; left:12px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; }
.corner-tr{ top:12px; right:12px; border-left:none; border-bottom:none; border-radius:0 10px 0 0; }
.corner-bl{ bottom:12px; left:12px; border-right:none; border-top:none; border-radius:0 0 0 10px; }
.corner-br{ bottom:12px; right:12px; border-left:none; border-top:none; border-radius:0 0 10px 0; }

.board-viewport{
  width:100%;
  overflow:hidden;
  min-height:0;
  flex:1 1 auto;
  border-radius:18px;
  padding:8px;
  background:
    radial-gradient(circle at center, rgba(220,187,135,.1), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 60px rgba(0,0,0,.22);
}
.board-scale{
  transform:scale(var(--scale));
  transform-origin:top left;
}
.board{
  position:relative;
  user-select:none;
}
.tile{
  position:absolute;
  width:var(--tile-w);
  height:var(--tile-h);
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:transform .16s ease, filter .18s ease, opacity .18s ease;
}
.tile::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.15), transparent 60%);
  opacity:0;
  transition:opacity .18s ease;
}
.tile img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.28))
    drop-shadow(0 0 16px rgba(255,255,255,.03));
}
.tile:hover{ transform:translateY(-6px); }
.tile:hover::before{ opacity:1; }
.tile.blocked{
  filter:saturate(.72) brightness(.87);
}
.tile.blocked img{
  filter:grayscale(.1) brightness(.9) drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.tile.selected{
  transform:translateY(-6px);
}
.tile.selected img{
  filter:
    drop-shadow(0 0 24px rgba(220,187,135,.95))
    drop-shadow(0 14px 20px rgba(0,0,0,.28));
}
.tile.hint img{
  animation:pulse 1s ease-in-out 3;
}
.tile.removing{
  animation:popOut .34s ease forwards;
}
.footer-note{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  color:rgba(255,255,255,.72);
  font-size:14px;
}
.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(11,8,4,.72);
  backdrop-filter:blur(8px);
  z-index:999;
  padding:24px;
}
.overlay.hidden{ display:none; }
.overlay-card{
  position:relative;
  overflow:hidden;
  width:min(480px,100%);
  border-radius:30px;
  padding:34px 26px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(180deg, #7d5921, #4d3411 60%, #2c1c08 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.overlay-glow{
  position:absolute;
  inset:auto 50% -60px auto;
  width:280px;height:280px;
  transform:translateX(50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,187,135,.32), transparent 65%);
  filter:blur(24px);
}
.overlay-emoji{
  position:relative;
  font-size:50px;
  margin-bottom:8px;
}
.overlay-card h2{
  margin:6px 0 10px;
  color:#fff3d5;
  font-size:36px;
}
.overlay-card p{
  position:relative;
  margin:0 0 12px;
  color:rgba(255,255,255,.88);
}
.overlay-meta{
  margin-bottom:18px !important;
}
.confetti-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1000;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
@keyframes popOut{
  0%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-18px); }
}
  100%{ opacity:0; transform:translateY(-18px) scale(.82); }
}

@media (max-width: 980px){
  .dashboard{ grid-template-columns:1fr; }
  .controls{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .app-shell{ padding:8px; gap:8px; }
  .hero-bar{ padding:10px; border-radius:20px; }
  .brand-crest{ width:50px;height:50px; font-size:24px; border-radius:16px; }
  .brand-copy h1{ font-size:26px; }
  .brand-copy p{ font-size:13px; }
  .stats{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .controls{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .board-viewport{ padding:6px; }
  .table-shell{ padding:8px; border-radius:20px; }
}
@media (max-width: 480px){
  :root{
    --tile-w:58px;
    --tile-h:78px;
  }
  .brand-copy h1{ font-size:28px; }
  .brand-copy p{ font-size:14px; }
  .jackpot-card strong{ font-size:28px; }
  .stat-card strong{ font-size:22px; }
  .btn{ padding:12px 12px; font-size:14px; }
}


.hero-right, .jackpot-card { align-self:stretch; }
.table-top{ margin-bottom:8px; }
.footer-note{
  flex:0 0 auto;
  font-size:12px;
  gap:10px;
}
.brand-copy p{
  font-size:14px;
}
.board{
  margin:0 auto;
}

@media (max-height: 900px){
  :root{
    --tile-w:68px;
    --tile-h:90px;
  }
  .brand-copy h1{ font-size:32px; }
  .brand-copy p{ font-size:13px; }
  .hero-bar{ padding:10px 12px; }
  .stat-card{ padding:8px 10px; }
  .stat-card strong{ font-size:20px; }
  .btn{ padding:9px 10px; font-size:13px; }
  .table-shell{ padding:8px; }
  .board-frame{ padding:8px; }
}

@media (max-height: 760px){
  :root{
    --tile-w:60px;
    --tile-h:80px;
  }
  .brand-copy h1{ font-size:26px; }
  .brand-copy p{ display:none; }
  .footer-note{ display:none; }
}

/* Larger tiles but auto-scale keeps board visible */
:root{
  --tile-w:88px;
  --tile-h:118px;
}

/* 3D glow instead of movement */
.tile.selected{
  transform:none;
}
.tile.selected img{
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.4))
    drop-shadow(0 0 18px rgba(220,187,135,1))
    drop-shadow(0 12px 16px rgba(0,0,0,.28));
}

/* Match glow */
.tile.matched img{
  animation:matchGlow .35s ease forwards;
}

@keyframes matchGlow{
  0%{
    filter:drop-shadow(0 0 0 rgba(220,187,135,0));
  }
  50%{
    filter:
      drop-shadow(0 0 18px rgba(220,187,135,1))
      drop-shadow(0 0 28px rgba(255,255,255,.6));
  }
  100%{
    opacity:.2;
  }
}

/* Shuffle animation */
.board.shuffling .tile{
  animation:casinoShuffle .6s ease;
}

@keyframes casinoShuffle{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(8px); }
  75%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}


/* ===== Deluxe visual upgrades ===== */
.particles-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.95;
}
.app-shell{
  position:relative;
  z-index:3;
}

:root{
  --tile-w: 92px;
  --tile-h: 122px;
}

.hero-bar{
  padding:6px 10px;
  border-radius:18px;
}
.brand-crest{
  width:44px;
  height:44px;
  border-radius:14px;
  font-size:21px;
}
.brand-copy h1{
  font-size:24px;
  margin:1px 0;
}
.brand-copy p{
  font-size:11px;
}
.jackpot-card{
  min-width:120px;
  padding:8px 10px;
  border-radius:14px;
}
.jackpot-card strong{
  font-size:22px;
}

.dashboard{
  gap:6px;
}
.stats{
  gap:5px;
}
.stat-card{
  padding:6px 8px;
  border-radius:12px;
}
.stat-card .label{
  font-size:9px;
}
.stat-card strong{
  font-size:16px;
}
.controls{
  gap:5px;
}
.btn{
  padding:7px 8px;
  font-size:11px;
  border-radius:10px;
}
.table-shell{
  padding:7px;
  border-radius:18px;
}
.table-top{
  margin-bottom:5px;
}
.table-title{
  font-size:12px;
}
.legend{
  font-size:11px;
  gap:8px;
}
.board-frame{
  padding:7px;
}
.board-viewport{
  padding:4px;
}

.board{
  transform-style:preserve-3d;
}
.tile{
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.tile::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 62%, transparent 100%);
  opacity:.35;
  pointer-events:none;
}
.tile::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.22), rgba(0,0,0,0));
  filter:blur(6px);
  pointer-events:none;
  opacity:.75;
}
.tile img{
  filter:
    drop-shadow(0 10px 12px rgba(0,0,0,.28))
    drop-shadow(0 1px 0 rgba(255,255,255,.22));
}

.tile:hover{
  transform:none;
}
.tile.selected{
  transform:none;
}
.tile.selected::before{
  opacity:1;
}
.tile.selected img{
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.32))
    drop-shadow(0 0 18px rgba(220,187,135,.95))
    drop-shadow(0 0 26px rgba(220,187,135,.45))
    drop-shadow(0 12px 15px rgba(0,0,0,.26));
}
.tile.selected{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1px rgba(255,235,200,.65),
    0 0 14px rgba(220,187,135,.42);
  border-radius:14px;
}

.tile.matched{
  pointer-events:none;
}
.tile.matched img{
  animation:matchGlowDeluxe .36s ease forwards;
}
.tile.matched::before{
  animation:matchFrameDeluxe .36s ease forwards;
  opacity:1;
}
.tile.matched::after{
  animation:matchShadowDeluxe .36s ease forwards;
}

.board.shuffling .tile{
  animation:casinoShuffleDeluxe .65s ease;
}

@keyframes matchGlowDeluxe{
  0%{
    filter:
      drop-shadow(0 0 0 rgba(220,187,135,0))
      drop-shadow(0 10px 12px rgba(0,0,0,.28));
    opacity:1;
  }
  42%{
    filter:
      drop-shadow(0 0 18px rgba(255,255,255,.52))
      drop-shadow(0 0 28px rgba(220,187,135,1))
      drop-shadow(0 0 38px rgba(220,187,135,.95))
      drop-shadow(0 12px 14px rgba(0,0,0,.2));
    opacity:1;
  }
  100%{
    filter:
      drop-shadow(0 0 5px rgba(220,187,135,.18))
      drop-shadow(0 8px 10px rgba(0,0,0,.12));
    opacity:.2;
  }
}
@keyframes matchFrameDeluxe{
  0%{ transform:scale(.96); box-shadow:0 0 0 rgba(220,187,135,0); }
  40%{ transform:scale(1.03); box-shadow:0 0 24px rgba(220,187,135,.85), inset 0 1px 0 rgba(255,255,255,.65); }
  100%{ transform:scale(1.08); box-shadow:0 0 0 rgba(220,187,135,0); opacity:0; }
}
@keyframes matchShadowDeluxe{
  0%{ opacity:.7; transform:scale(1); }
  40%{ opacity:.95; transform:scale(1.1); }
  100%{ opacity:0; transform:scale(.75); }
}
@keyframes casinoShuffleDeluxe{
  0%{ transform:translateX(0) rotate(0deg); filter:brightness(1); }
  18%{ transform:translateX(-6px) rotate(-1.2deg); filter:brightness(1.05); }
  36%{ transform:translateX(8px) rotate(1.5deg); filter:brightness(1.1); }
  54%{ transform:translateX(-4px) rotate(-0.8deg); }
  72%{ transform:translateX(5px) rotate(0.9deg); }
  100%{ transform:translateX(0) rotate(0deg); filter:brightness(1); }
}

@media (max-height: 900px){
  :root{
    --tile-w: 84px;
    --tile-h: 112px;
  }
  .brand-copy p{ display:none; }
}
@media (max-width: 760px){
  :root{
    --tile-w: 76px;
    --tile-h: 102px;
  }
}
@media (max-width: 560px), (max-height: 760px){
  :root{
    --tile-w: 64px;
    --tile-h: 86px;
  }
  .footer-note{ display:none; }
}