:root{
  --bg:#0b0b0f; --panel:#141419; --gold:#d4af37; --accent:#c70039; --muted:#8b8b95; --text:#e9e9ee;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0; font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text);
  background:radial-gradient(1200px 900px at 50% -10%, #1a1a22 0%, var(--bg) 60%);
  display:grid; place-items:center;
}
.wrap{width:min(100%,1100px); padding:24px;}
.card{
  background:linear-gradient(180deg,#171720,#0f0f15 50%, #0b0b0f);
  border-radius:20px; padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.04);
}
.title{display:flex; align-items:center; justify-content:space-between; gap:16px;}
h1{font-family:'Playfair Display', Georgia, 'Times New Roman', serif; font-weight:700; margin:0; font-size:clamp(24px,4vw,38px); color:var(--gold); letter-spacing:.3px; text-shadow:0 1px 0 #000;}
.meta{color:var(--muted); font-size:14px}
.layout{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;}
@media (max-width:920px){.layout{grid-template-columns:1fr;}}
.canvas-wrap{position:relative; aspect-ratio:1/1; width:100%;}
canvas{width:100%; height:100%; display:block;}
.pin{
  position:absolute; inset:auto 50% calc(100% - 18px) auto; translate:-50% -50%; width:0; height:0;
  border-left:18px solid transparent; border-right:18px solid transparent; border-top:28px solid var(--gold);
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.6));
}
.pin:after{content:""; position:absolute; top:-36px; left:-4px; width:8px; height:8px; background:#222; border:2px solid #000; border-radius:50%; box-shadow:inset 0 0 4px rgba(255,255,255,.2);}    
.controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
button{appearance:none; border:none; cursor:pointer; border-radius:999px; padding:14px 20px; font-weight:700; letter-spacing:.3px; box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);}
.spin{background:linear-gradient(180deg,#ffe99a,#f5c34e 50%, #d4af37); color:#2a1c03; text-shadow:0 1px 0 rgba(255,255,255,.4);} 
.spin:disabled{opacity:.55; cursor:not-allowed}
.secondary{background:#1e1e27; color:var(--text)}
.legend{background:#121218; border-radius:14px; padding:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);} 
.legend h3{margin:0 0 8px; font-size:14px; color:var(--muted)}
.legend ul{margin:0; padding-left:18px; line-height:1.6}
.badge{display:inline-block; border:1px solid rgba(212,175,55,.6); color:var(--gold); padding:2px 8px; border-radius:999px; font-size:12px}
.result{margin-top:12px; font-size:16px}
.result strong{color:var(--gold)}
.toast{position:fixed; left:50%; bottom:26px; translate:-50% 120%; background:#121218; border:1px solid rgba(255,255,255,.06); padding:12px 16px; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.55); transition:translate .5s ease;}
.toast.show{translate:-50% 0}