:root { color-scheme: dark light; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #0b0c10; color: #e6e6e6; }
.container { max-width: 1080px; margin: 0 auto; padding: 16px; }
.header { display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1; }
.badge { background: #1f2937; padding: 6px 10px; border-radius: 999px; }
.btn { border: 0; background: #2563eb; color: #fff; padding: 10px 16px; border-radius: 14px; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.card { background: #0f172a; border: 1px solid #223; border-radius: 16px; padding: 14px; }
.card h3 { margin: 0 0 6px 0; }
.prize { border: 1px solid #223; border-radius: 10px; padding: 8px; font-size: 12px; }
.prizes { display:flex; gap:8px; flex-wrap: wrap; margin-top: 6px; }

.roulette { position: relative; overflow: hidden; border: 1px solid #223; border-radius: 12px; margin-top: 10px; }
.roulette .needle { position: absolute; inset: 0; margin: auto; width: 2px; background: #34d399; height: 100%; left: 50%; }
.strip { display: flex; gap: 8px; padding: 8px; }
.slide { animation: slide var(--dur, 2.2s) cubic-bezier(.18,.89,.32,1.28) 1; }
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-66%); } }

.inv-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.inv-item { background:#0f172a; border:1px solid #223; border-radius:14px; overflow:hidden; }
.inv-item img { width:100%; height:180px; object-fit:cover; display:block; }
.small { opacity:.75; font-size:12px; }

/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-card { background:#0f172a; border:1px solid #223; border-radius:16px; padding:16px; width:min(560px, 100%); }
.input, .num { width:100%; padding:10px 12px; background:#111827; color:#fff; border:1px solid #223; border-radius:12px; }
.row { display:flex; gap:8px; align-items:center; }
.col { flex:1; }
.dashed { border:2px dashed #334155; border-radius:16px; padding:16px; text-align:center; }
.admin-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }

a.link { color: #60a5fa; text-decoration: none; }
a.link:hover { text-decoration: underline; }