@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

* {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}


*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Inter,Roboto,Segoe UI,Arial,sans-serif;background:#0f1320;color:#e8ecf1}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #1d2440}
h1{margin:0;font-size:20px}.balance{font-weight:600;background:#141a2e;padding:8px 12px;border-radius:10px}

main{padding-bottom:72px} /* под таббар */

.wheel-card{width:100%;max-width:720px;margin:16px auto;background:linear-gradient(180deg,#151b31 0%,#0f1320 100%);border:1px solid #1d2440;border-radius:14px;padding:16px}
.wheel-title{font-weight:700;margin-bottom:12px}
.wheel-items{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.item{background:#141a2e;border:1px solid #253057;border-radius:12px;padding:10px;text-align:center}
.item .img{height:56px;display:flex;align-items:center;justify-content:center}
.item .img img{max-height:56px;max-width:100%}
.item .name{font-size:12px;opacity:.9;margin-top:6px}
.item .value{margin-top:2px;font-weight:700}
.controls{display:flex;gap:10px;margin-top:14px}
button{appearance:none;border:0;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer;color:#0f1320;background:#ffd23f}
button.secondary{background:#253057;color:#e8ecf1}
button[disabled]{opacity:.6;cursor:not-allowed}
.fairness{margin-top:14px;font-size:12px;color:#a6b2d0;display:grid;gap:4px}

.animation-area{margin:20px auto;width:100%;max-width:720px;overflow:hidden;border:1px solid #1d2440;border-radius:14px;background:#0b0f1a;padding:16px}
.reel{display:flex;gap:8px;will-change:transform}
.card{min-width:140px;background:#141a2e;border:1px solid #253057;border-radius:12px;padding:10px;text-align:center}
.card .big{height:72px;display:flex;align-items:center;justify-content:center}
.card .big img{max-height:72px;max-width:100%}

.result{display:flex;justify-content:center;margin:12px 0 30px}
.hidden{display:none}
.result-box{background:#141a2e;border:1px solid #253057;border-radius:14px;padding:16px;width:100%;max-width:720px;display:grid;gap:10px}
.result-pic img{max-height:96px;max-width:100%}
.result-actions{display:flex;gap:10px}

.screen{padding:0 16px}
.profile-grid{display:grid;gap:12px;margin:12px 0}
.card{background:#141a2e;border:1px solid #253057;border-radius:12px;padding:12px}

.inventory{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0 40px}
.inv-card{background:#141a2e;border:1px solid #253057;border-radius:12px;padding:10px;display:grid;gap:6px}
.inv-card .pic{height:72px;display:flex;align-items:center;justify-content:center}
.inv-card .pic img{max-height:72px;max-width:100%}
.inv-card .row{display:flex;justify-content:space-between;align-items:center}
.inv-card .tag{font-size:12px;opacity:.85}

.tabbar{position:fixed;bottom:0;left:0;right:0;background:#0b0f1a;border-top:1px solid #1d2440;display:flex}
.tabbar button{flex:1;background:transparent;color:#e8ecf1;padding:12px;border-radius:0}
.tabbar button.active{background:#141a2e}

.reel-viewport{position:relative; overflow:hidden; height:140px}
.marker{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg,#ffd23f66,transparent 40%,transparent 60%,#ffd23f66);
  pointer-events:none;
}
.reel{display:flex; gap:8px; will-change:transform}
.card{min-width:140px; background:#141a2e; border:1px solid #253057; border-radius:12px; padding:10px; text-align:center}
.card .big{height:72px; display:flex; align-items:center; justify-content:center}
.card .big img{max-height:72px; max-width:100%}