/* LuckySpin base styles (mobile-first) */
:root{
  --brand:#ddaa20;
  --header:#1a1a1a;
  --button:#d6a62b;
  --footer:#111;
  --ticker-bg:#222;
  --ticker-txt:#fffac9;
  --bg:#000;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#eee;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:12px}

.header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--header);position:sticky;top:0;z-index:9}
.header .logo{display:flex;align-items:center;gap:10px}
.header .logo img{height:38px;width:auto;display:block}
.header img{height:38px;width:auto}
.header .actions{display:flex;gap:8px}
.btn{padding:10px 14px;border-radius:999px;background:var(--button);color:#231900;font-weight:700;border:none;cursor:pointer}
.btn.secondary{background:#333;color:#eee}
.btn:active{transform:scale(.98)}

.ticker{background:var(--ticker-bg);color:var(--ticker-txt);overflow:hidden;white-space:nowrap;border-top:1px solid #0005;border-bottom:1px solid #0005}
.ticker .marquee{display:inline-block;padding:8px 0;animation:scroll 18s linear infinite}
@keyframes scroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

.main{min-height:70vh;background-size:cover;background-position:center;position:relative}
.main::before{content:'';position:absolute;inset:0;background:linear-gradient(#0006,#0008);}
.main-inner{position:relative;z-index:1;padding:20px;display:grid;gap:16px;justify-items:center}

.wheel-wrap{display:grid;gap:14px;justify-items:center}
#wheel{width:320px;height:320px;border-radius:50%;border:6px solid #fff3;position:relative;box-shadow:0 6px 40px #0008}
.segment{position:absolute;inset:0;clip-path:polygon(50% 50%, 0 0, 100% 0);display:flex;align-items:center;justify-content:center;transform-origin:center;border-radius:50%}
.segment span{font-size:12px;font-weight:700;text-shadow:0 1px 0 #000}
.pointer{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid #ffec99;margin-top:-4px}

.form{display:grid;gap:10px;width:100%;max-width:440px;background:#0009;border:1px solid #fff2;padding:12px;border-radius:12px}
.input{padding:12px;border-radius:10px;border:1px solid #fff3;background:#111;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.playrow{display:flex;gap:8px}
.playrow .btn{flex:1}

.footer{background:var(--footer);padding:20px}
.footer .content{color:#ccc;line-height:1.6;font-size:14px}
.footer .content h3{color:#ffdb70}

.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:16px;z-index:99}
.modal.show{display:flex}
.card{background:#1a1a1a;border:1px solid #fff3;padding:20px;border-radius:14px;max-width:520px;width:100%}
.card h2{margin:0 0 8px 0;color:#ffdb70}
.card .share{display:flex;gap:10px;margin-top:14px}
.card .share a{flex:1;text-align:center;border-radius:10px;padding:10px;background:#222}

.audio-toggle{position:fixed;right:12px;bottom:12px;background:#222;border:1px solid #fff3;border-radius:999px;padding:10px 14px;z-index:9}
small.muted{color:#aaa}

/* Desktop upscales */
@media (min-width: 768px){
  #wheel{width:420px;height:420px}
  .segment span{font-size:14px}
}

#wheel{width:320px;height:320px;border-radius:50%;position:relative;box-shadow:0 6px 40px #0008;border:6px solid #0000;background:#0000}
#wheel canvas{width:100%;height:100%;display:block;border-radius:50%}
.pointer{
  width:0;height:0;margin-top:-4px;
  border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid #ffd34f;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
@media (min-width: 768px){ #wheel{width:420px;height:420px} }