:root { --ink:#251c35; --paper:#fffaf1; --accent:#ff526c; --accent-dark:#cf3552; --gold:#ffcb4b; --shadow:0 14px 35px #251c3520; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 10% 15%,#ffe19a 0 3%,transparent 20%),radial-gradient(circle at 90% 82%,#83ddda 0 3%,transparent 22%),#f4e9d8; }
button,input { font:inherit; } button { cursor:pointer; }
.app { width:min(720px,calc(100% - 28px)); margin:32px auto; text-align:center; }
header h1 { margin:2px 0; font-size:clamp(2.1rem,7vw,3.5rem); letter-spacing:-.06em; }
.eyebrow { margin:0; color:var(--accent-dark); font-weight:800; font-size:.74rem; letter-spacing:.12em; }.subtitle { margin:0 0 22px; color:#655a70; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }.stats div,.themes,.paytable { background:#fffdf9; border:1px solid #ffffff; border-radius:18px; box-shadow:var(--shadow); }
.stats div { padding:13px 6px; }.stats span,.stats small { display:block; font-size:.72rem; color:#766c7c; }.stats strong { display:inline-block; padding:1px 0; font-size:1.35rem; }
.themes,.paytable { padding:17px; margin:20px 0; }.themes h2,.paytable h2 { margin:0 0 12px; font-size:1rem; }.theme-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.theme { padding:9px 3px; color:var(--ink); background:#f6f0e7; border:2px solid transparent; border-radius:12px; font-size:.72rem; font-weight:700; }.theme i { display:block; font-style:normal; font-size:1.45rem; }.theme.active { border-color:var(--accent); background:#fff0f2; }
.machine { overflow:hidden; color:white; background:linear-gradient(145deg,#3f3058,#21172d); border:7px solid var(--gold); border-radius:27px; box-shadow:0 16px 0 #d49426,0 27px 38px #33214348; }.machine-top { display:flex; justify-content:center; align-items:center; gap:9px; padding:13px; font-weight:800; }.machine-top span:first-child { font-size:1.6rem; }.reels { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; background:#170f20; }.reel { display:grid; place-items:center; height:132px; color:#2c2139; background:linear-gradient(#fff,#e9dfd2); border:4px solid #b99e7e; border-radius:12px; box-shadow:inset 0 0 15px #bca98d; font-size:4.2rem; }.reel.spinning { animation:reelScroll .08s linear infinite; filter:blur(.7px); }.message { min-height:43px; margin:0; padding:12px 18px; font-weight:700; font-size:.92rem; }.message.win { color:#fff091; }
.controls { margin:27px auto 14px; }.controls label { display:block; margin-bottom:8px; font-weight:800; }.bet-control { display:flex; justify-content:center; gap:0; }.bet-control input { width:106px; text-align:center; border:2px solid #d7c9b9; border-left:0; border-right:0; background:#fffdf9; font-size:1.2rem; font-weight:800; }.step { width:44px; height:43px; color:white; background:#635070; border:0; font-size:1.5rem; }.step:first-child { border-radius:10px 0 0 10px; }.step:last-child { border-radius:0 10px 10px 0; }.hint { margin:7px; color:#766c7c; font-size:.76rem; }.spin { width:min(330px,100%); margin-top:9px; padding:14px 20px; color:white; background:var(--accent); border:0; border-radius:13px; box-shadow:0 5px 0 var(--accent-dark); font-weight:900; letter-spacing:.08em; font-size:1.1rem; }.spin:hover { background:#ff6680; }.spin:disabled { cursor:not-allowed; opacity:.55; }.spin span { font-size:1.4rem; }.reset { display:block; margin:17px auto; padding:5px; color:#766c7c; background:none; border:0; text-decoration:underline; font-size:.8rem; }.payouts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.payouts p { margin:0; padding:9px 4px; background:#f8f2e8; border-radius:10px; font-size:.75rem; }.payouts b,.payouts span { display:block; }.payouts span { margin-top:4px; color:var(--accent-dark); font-weight:900; }
@keyframes reelScroll { from { transform:translateY(15px); } to { transform:translateY(-15px); } }
.reel.spinning { animation-duration:.16s; }
.file-actions { display:flex; justify-content:center; gap:10px; margin-top:5px; }.file-button { padding:7px 10px; color:#635070; background:#fffdf9; border:1px solid #d7c9b9; border-radius:8px; font-size:.76rem; font-weight:700; cursor:pointer; }
.wallet { display:block; margin:14px auto 0; padding:8px 12px; color:#cf3552; background:#fff0f2; border:1px solid #ffb2c0; border-radius:9px; font-size:.82rem; font-weight:800; }.wallet-dialog { width:min(390px,calc(100% - 28px)); padding:0; border:0; border-radius:18px; box-shadow:0 20px 55px #251c3560; }.wallet-dialog::backdrop { background:#251c357a; }.wallet-dialog form { position:relative; padding:28px; text-align:center; }.wallet-dialog h2 { margin:4px 0 8px; }.wallet-dialog p:not(.eyebrow) { margin:0 0 20px; color:#655a70; font-size:.9rem; }.wallet-dialog label { display:block; margin-bottom:7px; text-align:left; font-size:.85rem; font-weight:800; }.wallet-dialog input { width:100%; margin-bottom:17px; padding:11px; border:2px solid #d7c9b9; border-radius:9px; text-align:center; font-size:1.15rem; font-weight:800; }.wallet-dialog .spin { margin:0; }.close-dialog { position:absolute; top:8px; right:11px; border:0; background:none; color:#766c7c; font-size:1.7rem; }
.wallet { text-decoration:none; width:max-content; }.wallet-card { max-width:420px; margin:25px auto; padding:27px; background:#fffdf9; border-radius:20px; box-shadow:var(--shadow); }.wallet-card > p:first-child { margin:0; color:#766c7c; font-size:.85rem; }.wallet-card > strong { display:inline-block; margin-top:4px; color:var(--accent-dark); font-size:2.35rem; }.wallet-card > small { color:#766c7c; }.wallet-card form { margin-top:25px; }.wallet-card label { display:block; margin-bottom:7px; text-align:left; font-size:.85rem; font-weight:800; }.wallet-card input { width:100%; margin-bottom:17px; padding:11px; border:2px solid #d7c9b9; border-radius:9px; text-align:center; font-size:1.15rem; font-weight:800; }.wallet-card .spin { margin:0; }.wallet-message { min-height:25px; margin:15px 0 3px; color:#635070; font-size:.85rem; font-weight:700; }.back-link { color:#635070; font-size:.86rem; font-weight:700; }
@media (max-width:460px) { .app { margin:18px auto; }.theme-grid { gap:4px; }.theme { font-size:.62rem; }.reel { height:105px; font-size:3.4rem; }.payouts { grid-template-columns:1fr; }.stats strong { font-size:1.12rem; } }