:root{
  --mario-red:#e52521;
  --mario-blue:#2a71e5;
  --mario-yellow:#ffd21f;
  --mario-green:#3cb043;
  --mario-sky:#9bd3ff;
  --item-h: 120px;
}


body{
  background: #000 url('/assets/img/mario.jpg');
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: #ca740c;
}

/* iOS/Safari scroll-jitter fix (optional) */
@media (max-width: 576px){
  body{ background-attachment: scroll; }
}

.table{
    color: #ca740c;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: #ffd183;
}



.navbar-brand{
  font-weight:800; letter-spacing:.5px;
}

.boxtop{
    background: linear-gradient(180deg, #e09010, #ca740c);
    color: #fff;
    border: 4px solid #000;
    box-shadow: 0 8px 0 #000;
 
}

.btn-spin{
 background: linear-gradient(180deg, var(--mario-yellow), #ffab00);
  color:#111;
  border:2px solid #000;
  box-shadow: 0 4px 0 #000;
  font-weight:700;
  margin-top: 5px;
}
.btn-spin:disabled{ filter: grayscale(.7); cursor:not-allowed; }
.slot-area{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding: 16px; border:4px solid #000; background:#fff; border-radius:16px;
  box-shadow: 0 8px 0 #000;
}
.reel{
  width: 160px;
  height: var(--item-h);
  overflow:hidden;
  border:3px solid var(--mario-yellow);
  border-radius:12px;
  background:#fafafa;
  position:relative;
}
.reel .inner{
  position:absolute; left:0; top:0; will-change: transform;
}
.item{
  height: var(--item-h);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-bottom:1px dashed #ddd; padding:8px 6px;
}
.item img{ max-height:68px; max-width: 90%; }
.item .nm{ margin-top:4px; font-weight:700; color:#333; font-size:14px; text-align:center; }

.result-banner{
  text-align:center; font-size:1.2rem; font-weight:700; margin-top:12px;
}
.win{ color: var(--mario-green); }
.lose{ color:#fff; }

/* Confetti */
.confetti{
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
}
.confetti i{
  position:absolute; top:-10px; width:10px; height:14px; background: var(--mario-yellow);
  animation: fall 3s linear forwards;
}
@keyframes fall{
  to{ transform: translateY(110vh) rotate(720deg); }
}

.navbar-mario{
  background-color:#e52521 !important;   /* Mario-Rot */
  border-bottom:4px solid #000;
}
.navbar-mario .navbar-brand,
.navbar-mario .nav-link,
.navbar-mario .offcanvas-title{
  color:#fff !important;
}
.navbar-mario .nav-link:hover,
.navbar-mario .nav-link:focus,
.navbar-mario .nav-link.active{
  color:#fff !important;
  opacity:.9;
  text-decoration:underline;
}