
:root{--ring:0 0 0 3px rgba(99,102,241,.4)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.75rem;background:#6366f1;color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.btn-primary:hover{background:#818cf8}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.75rem;background:#0f172a;color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.btn-secondary:hover{background:#1f2937}
.btn-muted{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.75rem;background:#e5e7eb;color:#111827;font-weight:600}
.input{width:100%;border-radius:.75rem;background:#0b1220;border:1px solid #1f2937;padding:.5rem .75rem;color:#e5e7eb}
.card{background:rgba(2,6,23,.5);border:1px solid #1f2937;border-radius:1rem;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.card-img{width:100%;height:10rem;object-fit:cover}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:.75rem}
.game-shell{max-width:64rem;margin:1.5rem auto;padding:1rem;background:rgba(2,6,23,.5);border:1px solid #1f2937;border-radius:1rem}
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;align-items:start}
.reel{position:relative;height:360px;overflow:hidden;background:rgba(15,23,42,.6);border:1px solid rgba(30,41,59,.8);border-radius:.75rem}
.strip{position:absolute;width:100%;will-change:transform}
.symbol{display:grid;place-items:center;height:120px;font-weight:700;font-size:1.15rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.win{animation:pop .3s ease-out}
@keyframes pop{from{transform:scale(.9)}to{transform:scale(1)}}
.controls{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.payline{outline:2px dashed rgba(234,88,12,.6);outline-offset:-4px;border-radius:.5rem}

/* Image symbol visuals */
.symbol{position:relative}
.symbol img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.symbol::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.06),transparent 35%);border-radius:.75rem;pointer-events:none}
