/* ===== MAZLOTO ===== */
:root {
  --gold: #ffd700;
  --bg: #0a0018;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Rubik', 'Arial Hebrew', Arial, sans-serif;
  background: var(--bg); color: #fff;
  direction: rtl; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}

/* ===== SPLASH ===== */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); transition: opacity 0.9s;
}
#splash.fade-out { opacity: 0; pointer-events: none; }
#splashCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-content { position: relative; z-index: 2; text-align: center; animation: splashIn 1s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes splashIn { from { opacity:0; transform:scale(0.7) translateY(30px); } to { opacity:1; transform:none; } }
.splash-logo {
  font-size: clamp(60px,18vw,100px); font-weight: 900; letter-spacing: -3px;
  background: linear-gradient(135deg,#ffd700,#ff9d00,#ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: glow 3s ease-in-out infinite;
}
@keyframes glow { 0%,100%{filter:drop-shadow(0 0 20px rgba(255,215,0,0.4))} 50%{filter:drop-shadow(0 0 60px rgba(255,215,0,0.9))} }
.splash-sub { font-size: clamp(15px,4vw,21px); color: rgba(255,255,255,0.8); margin-top: 14px; }
.splash-loader { width: 220px; height: 4px; background: rgba(255,255,255,0.12); border-radius:999px; margin: 36px auto 0; overflow:hidden; }
.splash-bar { height:100%; background:linear-gradient(90deg,#ffd700,#ff9d00); border-radius:999px; animation:loadBar 2.2s ease-in-out forwards; }
@keyframes loadBar { 0%{width:0} 100%{width:100%} }

/* ===== APP ===== */
#app {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #2d0a5e 0%, #0a0018 65%);
}
#app.hidden { display: none; }

/* ===== FLOATING LUCK BALLS ===== */
#floatingBalls {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.fb {
  position: absolute; bottom: -80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: white;
  opacity: 0;
  animation: floatUp linear infinite;
}
/* Shine on each floating ball */
.fb::before {
  content: '';
  position: absolute; top: 10%; left: 14%;
  width: 32%; height: 22%;
  background: rgba(255,255,255,0.35);
  border-radius: 50%; transform: rotate(-30deg);
}
@keyframes floatUp {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.22; }
  92%  { opacity: 0.22; }
  100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

/* ===== SCREENS ===== */
.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  display: none; z-index: 1;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: block; }
.screen.slide-in { animation: slideIn 0.35s ease-out; }
@keyframes slideIn { from{transform:translateX(-40px);opacity:0} to{transform:none;opacity:1} }

/* ===== BACK BTN ===== */
.back-btn {
  position: sticky; top: 0; z-index: 10; display: block; width: 100%;
  background: rgba(10,0,24,0.8); backdrop-filter: blur(10px);
  border: none; border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75); font-family: inherit; font-size: 15px;
  padding: 15px 20px; text-align: right; cursor: pointer;
}
.back-btn:active { background: rgba(255,255,255,0.08); }

/* ===== SCREEN CONTENT ===== */
.screen-content { position: relative; min-height: calc(100vh - 50px); padding-bottom: 50px; }
.screen-title {
  font-size: clamp(22px,6.5vw,34px); font-weight: 900; text-align: center; padding: 24px 20px 6px;
  background: linear-gradient(135deg,#ffd700,#ff9d00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.screen-subtitle { font-size: clamp(13px,3.5vw,16px); color: rgba(255,255,255,0.7); text-align: center; padding: 0 20px 20px; }

/* ===== LOBBY ===== */
.lobby-content {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; gap: 20px;
}
.lobby-header { text-align: center; }
.logo-text {
  font-size: clamp(54px,17vw,92px); font-weight: 900; letter-spacing: -3px; line-height: 1;
  background: linear-gradient(135deg,#ffd700,#ff9d00,#ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: glow 3s ease-in-out infinite;
}
.logo-tm { font-size: clamp(13px,3.5vw,18px); color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 4px; }
.tagline  { font-size: clamp(11px,3vw,14px); color: rgba(255,255,255,0.38); margin-top: 8px; }

.lobby-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 400px; }
.lobby-btn {
  width: 100%; border-radius: 20px; padding: 18px 20px;
  cursor: pointer; font-family: inherit; color: white;
  text-align: right; direction: rtl; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  transition: transform 0.13s;
}
.lobby-btn:active { transform: scale(0.97); }
.btn-spin     { background: linear-gradient(135deg,rgba(139,0,0,0.5),rgba(80,0,80,0.5));   border: 1px solid rgba(255,80,80,0.3);  }
.btn-daily    { background: linear-gradient(135deg,rgba(0,80,120,0.5),rgba(0,100,100,0.5)); border: 1px solid rgba(0,255,212,0.3);  }
.btn-personal { background: linear-gradient(135deg,rgba(80,0,120,0.5),rgba(40,0,80,0.5));  border: 1px solid rgba(180,100,255,0.3);}
.btn-icon  { font-size: 32px; flex-shrink: 0; }
.btn-label { font-size: clamp(17px,5vw,22px); font-weight: 900; display: block; }
.btn-sub   { font-size: clamp(11px,3vw,13px); color: rgba(255,255,255,0.55); display: block; margin-top: 3px; }

.sound-toggle {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
}
.legal-footer { font-size: 10px; color: rgba(255,255,255,0.28); text-align: center; padding: 0 20px; line-height: 1.5; }

/* ===== LOTTERY BALLS ===== */
.balls-container { padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.balls-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ball-slot {
  width: clamp(46px,12.5vw,60px); height: clamp(46px,12.5vw,60px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(15px,4.2vw,21px); color: white;
  position: relative; opacity: 0; flex-shrink: 0;
}
.ball-slot.pop { animation: ballPop 0.5s cubic-bezier(0.68,-0.55,0.27,1.55) forwards; }
@keyframes ballPop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}
/* Shine */
.ball-slot::after {
  content: ''; position: absolute; top: 8%; left: 14%;
  width: 34%; height: 22%; background: rgba(255,255,255,0.32);
  border-radius: 50%; transform: rotate(-30deg); pointer-events: none;
}
.color-red    { background: linear-gradient(135deg,#ff5555,#cc0000); box-shadow: 0 4px 20px rgba(255,50,50,0.6); }
.color-yellow { background: linear-gradient(135deg,#ffd700,#ff8c00); box-shadow: 0 4px 20px rgba(255,180,0,0.6); }
.color-green  { background: linear-gradient(135deg,#00e676,#00897b); box-shadow: 0 4px 20px rgba(0,200,100,0.6); }
.color-blue   { background: linear-gradient(135deg,#42a5f5,#1565c0); box-shadow: 0 4px 20px rgba(50,150,255,0.6); }
.color-purple { background: linear-gradient(135deg,#ce93d8,#7b1fa2); box-shadow: 0 4px 20px rgba(180,80,255,0.6); }
.color-extra  { background: linear-gradient(135deg,#fff9c4,#ffd700,#c8a415); box-shadow: 0 4px 26px rgba(255,215,0,0.8); color: #222; }

.extra-row { display: flex; align-items: center; gap: 12px; direction: rtl; }
.extra-label { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }
.extra-slot { width: clamp(50px,14vw,65px); height: clamp(50px,14vw,65px); font-size: clamp(17px,5vw,23px); }

/* ===== MESSAGES ===== */
.spin-message, .personal-message {
  font-size: clamp(14px,4vw,17px); color: rgba(255,255,255,0.85);
  text-align: center; padding: 0 24px 18px; line-height: 1.65; min-height: 56px; font-style: italic;
}

/* ===== BUTTONS ===== */
.action-btn {
  display: block; width: calc(100% - 40px); max-width: 340px;
  margin: 10px auto; padding: 17px; border: none; border-radius: 16px;
  font-family: inherit; font-size: clamp(16px,4.8vw,20px); font-weight: 900;
  cursor: pointer; transition: transform 0.13s;
}
.action-btn:active { transform: scale(0.97); }
.spin-btn {
  background: linear-gradient(135deg,#ff4444,#cc0000); color: white;
  box-shadow: 0 8px 30px rgba(255,50,50,0.45);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 8px 30px rgba(255,50,50,0.4)} 50%{box-shadow:0 8px 55px rgba(255,50,50,0.8)} }
.daily-btn    { background: linear-gradient(135deg,#0ff5d4,#00bcd4); color: #0a0018; }
.personal-btn { background: linear-gradient(135deg,#ce93d8,#7b1fa2); color: white; }
.share-result-btn { background: linear-gradient(135deg,#25d366,#128c5a); color: white; }
.secondary-btn { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); font-size: clamp(13px,3.8vw,16px); padding: 13px; }

/* ===== DAILY ===== */
.daily-orb { width:clamp(120px,36vw,185px); height:clamp(120px,36vw,185px); margin:20px auto; position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.orb-ring { position:absolute; border-radius:50%; border:1px solid rgba(0,255,212,0.35); animation:orbPulse 3s ease-in-out infinite; }
.orb-ring-1 { inset:-8px; }
.orb-ring-2 { inset:-18px; animation-delay:1.5s; border-color:rgba(0,255,212,0.18); }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.06);opacity:1} }
.orb-inner {
  width:clamp(120px,36vw,185px); height:clamp(120px,36vw,185px);
  background:radial-gradient(ellipse,rgba(0,255,212,0.25),rgba(0,100,200,0.08));
  border:1.5px solid rgba(0,255,212,0.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(42px,13vw,75px);
  box-shadow:0 0 55px rgba(0,255,212,0.22);
  animation:orbFloat 4s ease-in-out infinite; transition:transform 0.13s;
}
.daily-orb:active .orb-inner { transform:scale(0.92); }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.daily-label { text-align:center; font-size:clamp(13px,3.5vw,16px); color:rgba(255,255,255,0.7); margin-bottom:10px; }
.daily-message {
  font-size:clamp(15px,4.2vw,19px); font-weight:700; color:white; text-align:center;
  padding:16px 24px; line-height:1.7; min-height:80px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; margin:0 20px 20px; transition:opacity 0.3s,transform 0.3s;
}
.daily-message.fade { opacity:0; transform:scale(0.96); }

/* ===== PERSONAL ===== */
.choose-label { font-size:clamp(14px,4vw,17px); color:rgba(255,255,255,0.8); text-align:center; padding:14px 20px 10px; }
.method-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 20px 16px; }
.method-btn-wide { grid-column:1/-1; }
.method-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:16px 10px; color:white; font-family:inherit; font-size:clamp(12px,3.3vw,15px); font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
.method-btn:active { background:rgba(180,80,255,0.25); transform:scale(0.96); }
.method-icon { font-size:clamp(24px,7vw,36px); }
.personal-input-section { padding:0 20px 16px; }
.input-label { font-size:clamp(13px,3.5vw,16px); color:rgba(255,255,255,0.75); margin-bottom:10px; }
.mystical-input { width:100%; padding:14px 16px; background:rgba(255,255,255,0.06); border:1px solid rgba(180,80,255,0.4); border-radius:12px; color:white; font-family:inherit; font-size:clamp(15px,4vw,18px); text-align:right; direction:rtl; outline:none; margin-bottom:14px; -webkit-appearance:none; }
.mystical-input:focus { border-color:rgba(180,80,255,0.85); }
.mystical-input::placeholder { color:rgba(255,255,255,0.28); }
input[type="date"].mystical-input { color-scheme:dark; }
.astro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.astro-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:11px 4px; color:white; font-family:inherit; font-size:clamp(11px,2.8vw,14px); cursor:pointer; }
.astro-btn:active { background:rgba(180,80,255,0.3); transform:scale(0.96); }

/* ===== PARTICLES ===== */
.particle { position:fixed; pointer-events:none; z-index:9990; animation:pfx 1.3s ease-out forwards; }
@keyframes pfx { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-140px) scale(0.2);opacity:0} }
.win-flash { position:fixed; inset:0; z-index:9000; background:rgba(255,215,0,0.1); pointer-events:none; animation:wf 0.7s ease-out forwards; }
@keyframes wf { 0%{opacity:1} 100%{opacity:0} }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:4px; }

@supports (padding: env(safe-area-inset-bottom)) {
  .lobby-content { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .screen-content { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}