:root{
  /* Red & white sakura palette */
  --bg: #fff9f9;        /* soft white background */
  --bg-accent: #fff0f1; /* subtle rose wash */
  --card: #ffffff;      /* card white */
  --accent: #b71c1c;    /* deep crimson */
  --accent2: #ff6b6b;   /* lighter rose */
  --muted: #6b2b2b;     /* muted dark red for text */
  --text: #241111;      /* primary text */
  --gold: #ffd166;      /* accent gold */
}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;background: radial-gradient(circle at 20% 5%, rgba(183,28,28,0.06) 0 160px, transparent 200px), linear-gradient(180deg,var(--bg) 0%, var(--bg-accent) 100%);color:var(--text)}
.container{max-width:1100px;margin:18px auto;padding:18px;grid-template-columns:1fr 360px;gap:18px;justify-items:center;justify-content:center;position:relative}
.jp-theme{font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif}

.container::before{content:'';position:absolute;left:50%;top:30px;transform:translateX(-50%);width:92%;height:480px;background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.01), transparent 20%), repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 20px);border-radius:18px;z-index:0}
/* Make sure the decorative background doesn't block clicks */
.container::before{pointer-events:none}
.container::before{content:'';position:absolute;left:50%;top:30px;transform:translateX(-50%);width:92%;height:480px;background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.01), transparent 20%), repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 20px);border-radius:18px;z-index:0}

header{display:flex;align-items:baseline;justify-content:space-between;position:relative;z-index:1}
header h1{margin:0;font-size:28px;display:flex;align-items:baseline;gap:10px;color:var(--accent)}
.jp{font-size:14px;color:var(--accent2);opacity:0.95}
.subtitle{margin:0;color:var(--muted)}
/* Header layout helpers and nav button */
.header-left{display:flex;flex-direction:column}
.header-actions{display:flex;align-items:center}
.nav-button{display:inline-block;padding:10px 14px;background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 8px 20px rgba(183,28,28,0.16);border:1px solid rgba(255,255,255,0.06)}
.nav-button:hover{transform:translateY(-2px);filter:brightness(.98)}
.nav-button:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}
.game{margin-top:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.panel{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));padding:12px;border-radius:12px;width:100%;max-width:680px;border:1px solid rgba(183,28,28,0.06)}
.credits{font-weight:600;display:inline-flex;align-items:center;gap:10px}
.credits #credits{font-weight:800;margin-left:4px}
.controls{display:flex;gap:12px;align-items:center;background:linear-gradient(180deg,#fff8f8,#fff3f3);padding:8px;border-radius:10px;border:1px solid rgba(183,28,28,0.08)}
/* small rebuy controls */
.rebuy-controls{display:flex;gap:8px;align-items:center;margin-left:8px}
.rebuy-controls select{padding:6px;border-radius:6px;border:1px solid rgba(183,28,28,0.08);background:#fff;color:var(--text)}
.rebuy-controls button{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#fff;cursor:pointer;font-weight:700}
.custom-bet input{width:90px;padding:8px;border-radius:8px;border:1px solid rgba(183,28,28,0.08);margin-left:6px;background:#fff;color:var(--text)}
.custom-bet{display:flex;align-items:center}

/* All-in button */
#allIn{padding:8px 10px;border-radius:8px;background:#fff;border:1px solid rgba(183,28,28,0.12);color:var(--accent);font-weight:800;cursor:pointer}
#allIn:hover{background:var(--bg-accent)}

/* Win animation: machine glow and scale */
.machine.big-win{animation:machineGlow 900ms ease both}
@keyframes machineGlow{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
  50%{transform:scale(1.03);box-shadow:0 20px 60px rgba(255,200,80,0.25)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
}
.gold-burst{position:fixed;pointer-events:none;width:6px;height:10px;border-radius:2px;background:var(--gold);opacity:0.95}
/* Make form controls higher contrast and more accessible */
select{padding:8px;border-radius:8px;border:1px solid rgba(36,17,17,0.12);background:linear-gradient(180deg,#ffffff,#fff7f6);color:var(--text);min-width:72px}
.controls input[type="number"]{padding:8px;border-radius:8px;border:1px solid rgba(36,17,17,0.12);background:#fff;color:var(--text)}

.controls select:focus, .controls input:focus, .controls button:focus{outline:3px solid rgba(255,209,102,0.18);outline-offset:2px}
button#spin{background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#fff;padding:10px 18px;border-radius:10px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(183,28,28,0.18)}
button#spin:hover{filter:brightness(.98);transform:translateY(-1px)}
button#spin:disabled{opacity:0.5;cursor:not-allowed}
.reels{display:flex;gap:12px;justify-content:center;margin-top:20px}
.machine{display:flex;flex-direction:column;align-items:center;gap:10px}
.reel{width:130px;height:130px;border-radius:10px;background:linear-gradient(180deg,#fff7f6,#fff1ee);display:flex;align-items:center;justify-content:center;font-size:60px;box-shadow:0 10px 30px rgba(0,0,0,0.08),inset 0 -8px 12px rgba(0,0,0,0.03);border:6px solid rgba(183,28,28,0.08)}
.reels{padding:18px;border-radius:14px;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 18px 50px rgba(0,0,0,0.08);border:6px solid rgba(183,28,28,0.09)}
.machine-base{width:260px;height:20px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.message{margin-top:14px;text-align:center;color:var(--muted);font-weight:600}
footer{margin-top:24px;text-align:center;color:var(--muted)}

/* confetti */
.confetti-root{position:fixed;pointer-events:none;left:0;top:0;width:100%;height:0;overflow:visible}
.confetti{position:fixed;will-change:transform;left:50%;top:20%;width:10px;height:14px;opacity:0.95;border-radius:2px}
@keyframes fall {
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--tx,0),110vh,0) rotate(360deg)}
}

.win{animation:pop 300ms ease both}
@keyframes pop{from{transform:scale(.9)}to{transform:scale(1)}}

/* small responsive tweak */
@media (max-width:520px){.reel{width:86px;height:86px;font-size:38px}}

.petal.small{width:12px;height:8px}
.petal.big{width:22px;height:14px}

/* Sakura petals */
.sakura-root{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.petal{position:fixed;width:18px;height:12px;pointer-events:none;opacity:0.95;border-radius:50% 50% 50% 50%;background:linear-gradient(180deg,#ffd0dc,#ff9fb8);transform-origin:center;will-change:transform}
@keyframes petalFall {
  0%{transform:translate3d(0,-10vh,0) rotate(0deg) scale(0.9);opacity:0}
  10%{opacity:1}
  100%{transform:translate3d(var(--tx,0),110vh,0) rotate(360deg) scale(1);opacity:0.95}
}

.reel svg{width:76%;height:76%;display:block}

/* Leaderboard styles */
.leaderboard{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);height:100%;z-index:2;position:relative}
.leaderboard h2{margin:6px 0 8px;color:var(--accent);font-size:18px}
.lb-controls{display:flex;gap:8px;margin-bottom:8px}
.lb-controls input{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(183,28,28,0.08);background:#fff;color:var(--text)}
.lb-controls button{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;color:#fff;cursor:pointer;font-weight:700;box-shadow:0 6px 14px rgba(183,28,28,0.08)}
.lb-list{padding-left:18px;margin:6px 0 8px;max-height:220px;overflow:auto}
.lb-list li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,0.03);font-size:14px}
.lb-actions{display:flex;gap:8px;margin-top:8px}
.lb-actions button{flex:1;padding:8px;border-radius:8px;background:#fff;border:1px solid rgba(183,28,28,0.12);color:var(--accent);font-weight:700}
.lb-actions button:hover{background:var(--bg-accent)}
.import-area{width:100%;height:72px;margin-top:8px;padding:8px;border-radius:8px;background:#fff;border:1px solid rgba(183,28,28,0.06);color:var(--text)}

/* Ensure interactive elements sit above decorative layers and accept pointer events */
.panel, .controls, .leaderboard, button, select, input {position:relative;z-index:3;pointer-events:auto}

/* Responsive: stack columns on small screens */
@media (max-width:920px){.container{grid-template-columns:1fr;}
  .leaderboard{order:2}
  .game{order:1}
}

@media (max-width:920px){
  header{flex-direction:column;align-items:flex-start}
  .header-actions{margin-top:8px}
}

@media (max-width:520px){
  .controls{flex-direction:column;align-items:stretch}
  .lb-controls{flex-direction:column}
}

/* Promotional anchor positioned near the top-center and responsive */
.promo-anchor{position:fixed;top:20px;right:18px;left:auto;transform:none;z-index:70;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;opacity:0.95;transition:transform .14s ease,opacity .14s ease}
.promo-anchor .promo-text{background:rgba(255,255,255,0.94);color:var(--accent);padding:6px 8px;border-radius:8px;font-weight:800;font-size:13px;box-shadow:0 8px 20px rgba(0,0,0,0.08);border:1px solid rgba(183,28,28,0.06)}
.promo-anchor img{width:140px;height:auto;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,0.16);border:1px solid rgba(255,255,255,0.6);display:block;opacity:0.98}
.promo-anchor:hover{opacity:1;transform:translateY(-6px)}

/* Slightly smaller on medium screens */
@media (max-width:1200px){
  .promo-anchor img{width:120px}
  .promo-anchor .promo-text{font-size:12px;padding:5px 7px}
}

@media (max-width:920px){
  .promo-anchor img{width:96px}
  .promo-anchor .promo-text{font-size:11px;padding:4px 6px}
}

/* Mobile: fixed bottom center so it stays out of the header and is easy to reach */
@media (max-width:480px){
  .promo-anchor{top:auto;right:auto;left:50%;bottom:12px;transform:translateX(-50%);z-index:80}
  .promo-anchor img{width:88px}
  .promo-anchor .promo-text{font-size:11px;padding:4px 6px}
}

/* Payment UI: toasts and confirmation banner */
.payment-toast{position:fixed;right:18px;bottom:18px;background:rgba(36,17,17,0.9);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.28);z-index:120;transition:opacity .28s ease}
.payment-toast#payment-wait{background:linear-gradient(90deg,var(--accent),var(--accent2));font-weight:700}
.payment-toast#payment-maybe{background:rgba(0,0,0,0.7)}

#payment-confirmation{position:fixed;left:50%;transform:translateX(-50%);top:22px;z-index:130}
#payment-confirmation .pc-inner{background:rgba(255,255,255,0.98);padding:10px 14px;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.12);display:flex;align-items:center;gap:12px}
#payment-confirmation button{background:var(--accent);color:#fff;border:none;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700}

@media (max-width:480px){
  .payment-toast{left:12px;right:12px}
  #payment-confirmation{top:auto;bottom:92px}
}

/* Temporary: hide the promotional "100% win rate" anchor while testing */
.promo-anchor{display:none !important}