/* ==========================================================
   "מועדון המזל של שמואל" – vibrant international-casino skin.
   Loaded after casino.css.
   ========================================================== */
:root { --neon1: #ff2d55; --neon2: #ff7a00; --gold-hi: #ffe27a; }
body:not([data-screen="game"]) .bg-glow {
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(255, 45, 85, .38), transparent 60%),
    radial-gradient(900px 600px at 0% 20%, rgba(124, 58, 237, .35), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(255, 122, 0, .2), transparent 60%),
    radial-gradient(rgba(255, 215, 120, .09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #1a0618, #0d0414);
}
.topbar { background: linear-gradient(180deg, rgba(26, 6, 24, .95), rgba(26, 6, 24, .82)); border-bottom: 0; box-shadow: 0 1px 0 rgba(255, 215, 120, .35), 0 8px 24px rgba(0, 0, 0, .4); }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; background: none; box-shadow: 0 0 16px rgba(255, 200, 80, .55); animation: coinspin 8s linear infinite; }
@keyframes coinspin { 0%, 80% { transform: rotateY(0); } 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.brand b { background: linear-gradient(180deg, var(--gold-hi), #e8a515); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn-neon {
  color: #fff; border-radius: 999px; text-decoration: none;
  background: linear-gradient(90deg, var(--neon2), var(--neon1));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .2) inset, 0 10px 30px rgba(255, 45, 85, .5), 0 0 40px rgba(255, 122, 0, .35);
}
.btn-neon:hover { filter: brightness(1.1); }
.btn-neon svg { fill: #fff; }

/* hero */
.hero2 { position: relative; margin: 0; border-radius: 28px; box-shadow: 0 0 0 2px rgba(255, 215, 120, .35), 0 30px 60px rgba(0, 0, 0, .55); min-height: clamp(440px, 46vw, 640px); display: flex; align-items: center; overflow: hidden; }
.hero2-bg { position: absolute; inset: 0; background-size: cover; background-position: left center; animation: kenburns 26s ease-in-out infinite alternate; }
.hero2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(18, 2, 16, .92) 0%, rgba(18, 2, 16, .6) 38%, transparent 62%), linear-gradient(to top, #0d0414 0%, transparent 22%); }
.hero2-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(255, 240, 200, .14) 50%, transparent 60%); background-size: 250% 100%; animation: shine 6s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.hero2-content { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; padding: 40px max(16px, 3vw); }
.hero2-content > * { max-width: 560px; }
.hero2 h1 { margin: 6px 0 12px; line-height: .95; font-weight: 900; text-shadow: 0 6px 30px rgba(0, 0, 0, .7); }
.h1-top { display: block; font-size: clamp(2rem, 5vw, 3.6rem); color: #fff; }
.h1-name {
  display: block; font-size: clamp(3rem, 8.5vw, 6.2rem); letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 40%, #e89a0c 70%, #ffe27a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 190, 40, .55)) drop-shadow(0 4px 0 #6b3a00);
}
.hero2 .hero-sub { font-size: 1.15rem; color: #ffe9f0; margin-bottom: 22px; }
.hero2 .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }

/* jackpot bar */
.jackpot-bar {
  position: relative; z-index: 3; margin: -46px auto 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: 22px; background: linear-gradient(180deg, #2a0b16, #120409);
  box-shadow: 0 0 0 2px #e8a515, 0 0 0 5px rgba(255, 215, 120, .18), 0 20px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 170, 30, .25);
}
.jackpot-bar img { width: 64px; height: 64px; animation: coinspin 5s linear infinite; filter: drop-shadow(0 0 14px rgba(255, 200, 60, .8)); }
.jp-text span { display: block; color: #ffd0dc; font-weight: 800; font-size: .95rem; letter-spacing: .05em; }
.jp-text b {
  display: block; font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05;
  background: linear-gradient(180deg, #fff6c8, #ffc21a 55%, #e88a0c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 190, 40, .6));
}
.jp-how { flex: 1 1 220px; margin: 0; color: #f5d7e0; font-size: .95rem; }

/* categories */
.cat-tabs { position: sticky; top: 62px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; margin: 0 0 14px; scrollbar-width: none; background: linear-gradient(180deg, rgba(13, 4, 20, .92), rgba(13, 4, 20, .6) 80%, transparent); scroll-margin-top: 70px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat { flex: none; min-height: 46px; padding: 8px 20px; border-radius: 999px; font-weight: 800; color: #f3e6ff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.cat:hover { background: rgba(255, 255, 255, .13); }
.cat.on { color: #3b1600; background: linear-gradient(180deg, var(--gold-hi), #f0a812); border-color: #fff3c4; box-shadow: 0 0 18px rgba(255, 190, 40, .45); }

/* game tiles */
.games-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tile2 {
  position: relative; display: block; aspect-ratio: 4 / 3.3; border-radius: 22px; overflow: hidden; text-align: right;
  background: #1a0a24; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .5);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; animation: rise .5s both; animation-delay: calc(var(--i) * 50ms);
}
.tile2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 2, 14, .95) 0%, rgba(10, 2, 14, .55) 34%, transparent 60%); }
.tile2:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 0 0 3px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent), 0 20px 40px rgba(0, 0, 0, .6); }
.tile2:hover > img { transform: scale(1.08); }
.tile2-body { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.tile2-body b { font-size: 1.45rem; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.tile2-body small { color: #f1dff5; font-size: .92rem; line-height: 1.35; }
.live-badge { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 900; color: #fff; background: linear-gradient(90deg, #ff2d55, #c3002f); box-shadow: 0 4px 14px rgba(255, 45, 85, .5); }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.tile2-play { position: absolute; z-index: 2; top: 12px; left: 12px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-hi), #f0a812); color: #3b1600; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.tile2-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }

/* host banner */
.host-banner {
  margin: 30px 0 8px; display: grid; grid-template-columns: minmax(200px, 330px) 1fr; overflow: hidden; border-radius: 26px;
  background: radial-gradient(ellipse at 80% 0%, rgba(255, 45, 85, .35), transparent 60%), linear-gradient(135deg, #3a0a1e, #160616);
  box-shadow: 0 0 0 2px rgba(255, 215, 120, .45), 0 24px 50px rgba(0, 0, 0, .55);
}
.host-banner > img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.host-text { padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.kicker { color: var(--gold-hi); font-weight: 900; letter-spacing: .08em; font-size: .9rem; }
.host-text h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; }
.host-text p { margin: 0 0 8px; color: #f5dde6; }

/* memorial */
.memorial {
  margin: 30px 0 10px; display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 26px; align-items: center;
  padding: 26px; border-radius: 26px; background: linear-gradient(135deg, rgba(60, 36, 10, .55), rgba(20, 8, 4, .7));
  box-shadow: 0 0 0 1px rgba(255, 215, 120, .4), inset 0 0 80px rgba(255, 190, 80, .08);
}
.mem-portrait { width: 100%; border-radius: 18px; border: 6px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #fff1b5, #c58b16, #ffe79a, #8a5a0a) border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 190, 80, .2); }
.mem-coin { width: 72px; height: 72px; filter: drop-shadow(0 0 12px rgba(255, 200, 60, .6)); }
.mem-text h2 { margin: 8px 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900; color: #ffe7a3; }
.mem-text p { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.7; color: #fbeedd; max-width: 620px; }
.mem-text .mem-sign { font-weight: 800; color: #ffd36b; }

/* Shmuel at the tables */
.dealer-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #f7c948, 0 4px 10px rgba(0, 0, 0, .5); }
.dealer-plate { position: absolute; top: 14px; right: 18px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fde68a; }
.bw-coin { position: absolute; width: 26%; left: 37%; top: 37%; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.pt-row.pt-jackpot { background: linear-gradient(90deg, rgba(255, 190, 40, .3), rgba(255, 190, 40, .08)); box-shadow: inset 0 0 0 1px #f7c948; }
.pt-jackpot b { color: #ffe27a; }
.jp-line b { color: #fff3b0; font-size: 1.05rem; }
.confetti b { position: absolute; top: -40px; left: var(--x); width: 34px; height: 34px; border-radius: 50%; background: url(../assets/shmuel/coin-sm.webp) center/cover; animation: fall var(--d) var(--delay) ease-in forwards; }
.welcome-emblem { border-radius: 50%; animation: float 4s ease-in-out infinite; }

@media (max-width: 680px) {
  .hero2 { min-height: 0; margin-top: -12px; flex-direction: column; align-items: stretch; }
  .hero2-bg { position: relative; inset: auto; height: 58vw; background-position: left top; }
  .hero2::after { background: linear-gradient(to top, #0d0414 34%, rgba(13, 4, 20, .4) 55%, transparent 75%); }
  .hero2-content { margin-top: -90px; padding: 0 16px 20px; }
  .h1-name { font-size: 3.2rem; }
  .hero2 .hero-actions .btn { flex: 1 1 100%; }
  .jackpot-bar { margin-top: 10px; padding: 12px 14px; }
  .jackpot-bar img { width: 52px; height: 52px; }
  .jackpot-bar .btn { width: 100%; }
  .cat-tabs { top: 56px; }
  .games-grid2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile2 { aspect-ratio: 3 / 3.6; border-radius: 16px; }
  .tile2-body b { font-size: 1.05rem; }
  .tile2-body small { display: none; }
  .tile2-play { width: 36px; height: 36px; }
  .live-badge { font-size: .65rem; padding: 3px 8px; top: 8px; right: 8px; }
  .host-banner, .memorial { grid-template-columns: 1fr; }
  .host-banner > img { max-height: 300px; object-position: top; }
  .memorial { padding: 16px; }
  .mem-portrait { max-width: 260px; margin: 0 auto; }
}