/* frontend/public/style.css - vignette + stat borders + coin pop + moved stats into center column */

/* theme tokens */
:root{
  --bg:#040303;
  --panel:#080808;
  --accent:#FFD54A;
  --muted:rgba(255,213,74,0.12);
  --text:#FFF5D6;
  --sub:#D2B56E;
  --glass: rgba(255,255,255,0.02);
  --gold-deep:#b3841a;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#030202,#050404);color:var(--text);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;}
.app-root{max-width:1320px;margin:18px auto;padding:18px;position:relative;overflow:visible}

/* subtle vignette across the whole app */
.app-root::before{
  content: "";
  position: absolute;
  inset: -30px;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23b48b2f' stop-opacity='0.18'/><stop offset='1' stop-color='%23e6cc76' stop-opacity='0.05'/></linearGradient><pattern id='grain' width='120' height='120' patternUnits='userSpaceOnUse' patternTransform='rotate(18)'><rect width='120' height='120' fill='rgba(0,0,0,0)' /><path d='M0 60 L120 0' stroke='%23b48b2f' stroke-opacity='0.06' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(%23grain)'/><rect width='100%' height='100%' fill='url(%23g)' opacity='0.22'/></svg>");
  mix-blend-mode: overlay;
  box-shadow: inset 0 80px 140px rgba(0,0,0,0.6);
}

/* header */
.header-row{display:flex;align-items:center;gap:18px;justify-content:space-between}
.title-block{display:flex;flex-direction:column;gap:6px}
.title{font-family:'Orbitron',sans-serif;color:var(--accent);letter-spacing:6px;margin:0;font-size:28px}
.subline{color:var(--sub);font-size:13px}

/* STATS: now positioned inside center column above the machine
   center-column will control alignment; keep cards compact */
.stats-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;         /* centered above machine */
  width:100%;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.stat-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.22));
  border-radius:12px;
  padding:10px 14px;
  border:2px solid rgba(255,213,74,0.06);
  min-width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 14px 40px rgba(0,0,0,0.6);
}
.stat-card .label{font-size:12px;color:var(--sub);margin-bottom:6px}
.stat-card .value{font-weight:800;color:var(--text);font-size:18px;display:flex;gap:6px;align-items:baseline;white-space:nowrap}

/* jackpot card special */
.jackpot-card{border-color:rgba(255,213,74,0.18);box-shadow:0 18px 48px rgba(166,120,20,0.06)}
.jackpot-card .value{color:var(--accent)}
.jackpot-card .value.glow{box-shadow:0 0 44px rgba(255,200,60,0.55), 0 0 120px rgba(255,200,60,0.12); animation:pulse 2.6s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* wallet */
.wallet-block{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.wallet-input{padding:10px 12px;border-radius:10px;width:320px;background:transparent;border:1px solid rgba(255,213,74,0.06);color:var(--text)}
.registered-line{font-size:12px;color:var(--sub)}

/* layout */
.main-grid{display:grid;grid-template-columns:320px 1fr;gap:20px;margin-top:8px;align-items:start}
.left-col{display:flex;flex-direction:column;gap:16px}
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.22));border-radius:12px;padding:14px;border:1px solid rgba(255,213,74,0.04);box-shadow:0 18px 50px rgba(0,0,0,0.6)}

/* paytable */
.paytable ul{margin:0;padding-left:18px;color:var(--text)}

/* leaderboard */
.leaderboard-list{margin:0;padding-left:6px;color:var(--text);list-style:none}
.leaderboard-list li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed rgba(255,200,0,0.03);font-size:14px}

/* center */
.center-col{display:flex;flex-direction:column;gap:12px;align-items:center}
.machine-panel{width:760px;max-width:100%;padding:26px;border-radius:16px;border:6px solid rgba(255,210,80,0.06);background:linear-gradient(180deg,#070606,#030202);box-shadow:0 22px 60px rgba(0,0,0,0.75);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;overflow:visible}

/* machine panel overlay retained */
.machine-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  pointer-events:none;
  opacity:0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23b48b2f' stop-opacity='0.18'/><stop offset='1' stop-color='%23e6cc76' stop-opacity='0.05'/></linearGradient><pattern id='p' width='60' height='60' patternUnits='userSpaceOnUse' patternTransform='rotate(15)'><rect width='60' height='60' fill='rgba(0,0,0,0)' /><path d='M0 40 L60 0' stroke='%23b48b2f' stroke-opacity='0.12' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(%23p)' /><rect width='100%' height='100%' fill='url(%23g)' opacity='0.25'/></svg>");
  mix-blend-mode:overlay;
}

/* reels */
.reels-container{display:flex;gap:20px;justify-content:center;width:100%}
.reel-col{display:flex;flex-direction:column;gap:12px;align-items:center}
.reel-symbol{width:130px;height:110px;background:linear-gradient(180deg,#fff,#fff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:inset 0 -10px 34px rgba(0,0,0,0.06),0 12px 36px rgba(0,0,0,0.6);border:6px solid #fff;color:#191919}
.reel-symbol.seven{background:linear-gradient(180deg,#fff8e3,#fff0b1)}

/* controls */
.controls-panel{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.btn{background:linear-gradient(180deg,var(--accent), #f5c04a);border:0;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;color:#222;box-shadow:0 10px 28px rgba(0,0,0,0.45)}
.btn.small{padding:7px 10px;font-size:13px;border-radius:10px}
.btn.play{padding:18px 42px;border-radius:40px;font-size:20px}
.btn.play[disabled]{opacity:0.45;cursor:not-allowed;filter:grayscale(0.2);box-shadow:none}

/* result */
.result-text{font-size:20px;color:var(--accent)}

/* toast */
.toast-wrap{position:fixed;right:18px;top:18px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{min-width:220px;max-width:360px;background:rgba(10,9,8,0.9);border-left:4px solid var(--accent);padding:10px 12px;border-radius:8px;color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,0.6);font-size:13px}

/* coin pop */
.coin-pop{position:fixed;z-index:9999;pointer-events:none;font-weight:800;color:var(--gold-deep);text-shadow:0 6px 14px rgba(0,0,0,0.5);transform:translateY(0) scale(1);opacity:1;transition: transform 800ms cubic-bezier(.2,.9,.2,1), opacity 800ms}
.coin-pop.hide{transform: translateY(-36px) scale(1.06);opacity:0}

/* win flash */
.win-flash{animation:flashGlow 1.1s ease forwards}
@keyframes flashGlow{0%{box-shadow:0 0 0 rgba(255,200,80,0);transform:scale(1)}30%{box-shadow:0 0 40px rgba(255,200,80,0.35);transform:scale(1.01)}100%{box-shadow:0 0 0 rgba(255,200,80,0);transform:scale(1)}}

/* ===== quick fixes & UI restores (append) ===== */

/* Force reels visible (if something hid them) */
.reels-container{ display:flex !important; visibility:visible !important; align-items:center; justify-content:center; }

/* Render image for '7' symbol if .reel-symbol contains <img> */
.reel-symbol img { width:64px; height:64px; object-fit:contain; display:block; }

/* CA container center helper (place in header center) */
#ca-container { display:inline-block; margin-left:18px; margin-right:auto; font-weight:700; color:var(--sub); padding:6px 10px; border-radius:8px; background: linear-gradient(180deg, rgba(255,238,180,0.02), rgba(0,0,0,0.12)); border:1px solid rgba(255,200,60,0.06); }

/* Golden panel look for important boxes */
.gold-bg-weak { background: linear-gradient(180deg, rgba(255,240,190,0.03), rgba(0,0,0,0.12)); border:1px solid rgba(255,200,60,0.08); box-shadow: 0 10px 28px rgba(0,0,0,0.55); }

/* Make jackpot/distributed show SOL */
.jackpot-val::after, .distributed-val::after { content: " SOL"; font-weight:600; text-transform:uppercase; }

/* Hide the bits we want removed */
.recent-wins, .recent-wins-wrapper, .payout-percent, #recent-wins, #payout-percent { display:none !important; }

/* Leaderboard fixed rows */
.leaderboard-list li { min-height:28px; padding:8px 6px; color:var(--text); opacity:0.95; }
.leaderboard-list li.empty { color: rgba(255,255,255,0.18); }

/* Payout timer emphasis */
.payout-in, .payout-timer { font-weight:800; font-size: 1.05rem; letter-spacing:0.6px; }

/* small helper for "Try Again" note */
.try-note { margin-top:12px; color:var(--sub); text-align:center; font-size:0.95rem; }

/* ensure play button disabled state is obvious */
.btn.play[disabled], button.play[disabled] { opacity:0.45; cursor:not-allowed; filter:grayscale(0.25); }

/* responsive */
@media (max-width:980px){
  .main-grid{grid-template-columns:1fr}
  .wallet-input{width:220px}
  .reel-symbol{width:86px;height:72px;font-size:28px}
  .machine-panel{padding:12px}
  .stats-row{justify-content:flex-start;padding-left:14px}
}


/* Golden panel subtle background (30-40% saturation) */
.golden-panel {
  background: linear-gradient(180deg, rgba(255,213,74,0.10), rgba(0,0,0,0.08));
  border: 1px solid rgba(255,200,60,0.12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* Ensure text remains legible on gold background */
.golden-panel, .golden-panel * {
  color: var(--text);
}

/* Hide removed containers if any HTML remains */
.recent-history-panel { display:none !important; }
.payout-percent-panel { display:none !important; }
.demo-btn, #demo-btn { display:none !important; }


/* payouts copy formatting */
.payouts-copy p { margin: 6px 0; line-height: 1.35; }
.payouts-copy .paytable { margin: 8px 0; padding-left: 18px; }
.payouts-copy .paytable li { margin: 2px 0; }