/* Bettcat mini 10-en: slot machine cabinet with three static reels */
:root {
  --void: #13161c;
  --steel: #232934;
  --steel-2: #2c3340;
  --steel-ln: #3a4252;
  --frost: #f0f2f7;
  --fog: #9ca5b5;
  --surf: #4ed6e6;
  --surf-dk: #1b9fb0;
  --honey: #f2c33d;
  --cherry: #e8434f;
  --plum: #8b3fd9;
  --orchid: #d94fc0;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; padding: 26px 16px; overflow-x: hidden;
  background: radial-gradient(600px 340px at 50% 0, #222e4a, transparent 70%), var(--void);
  color: var(--frost); font: 500 15px/1.5 "Figtree", system-ui, sans-serif;
}
a { color: inherit; }

.cab { max-width: 400px; margin: 0 auto; }

.cab-crown {
  position: relative; padding: 16px 12px 18px; text-align: center; border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, #2f5fc8, #1d3f8e); border: 3px solid #0f1520; border-bottom: 0;
}
.cab-name { text-decoration: none; font: 400 26px/1 "Bowlby One", sans-serif; color: #fff; text-shadow: 0 3px 0 #0b1a3d; letter-spacing: .01em; }
.cab-bulbs {
  display: block; height: 8px; margin: 10px 8px 0;
  background: radial-gradient(circle, var(--honey) 3px, transparent 3.5px) 0 0 / 16px 8px repeat-x;
}

.cab-body {
  position: relative; padding: 18px 16px 20px; text-align: center;
  background: linear-gradient(180deg, var(--steel-2), var(--steel)); border: 3px solid #0f1520; border-radius: 0 0 18px 18px;
}
.cab-h { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--fog); }
.cab-h b { display: block; margin-top: 4px; font: 400 25px/1.1 "Bowlby One", sans-serif; color: var(--honey); }

.reelbox {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px;
  background: #0b0d12; border-radius: 14px; box-shadow: inset 0 0 0 3px var(--honey), inset 0 6px 16px rgba(0,0,0,.8);
}
.reel { background: linear-gradient(180deg, #c9ced8, #fbfcfe 30%, #fbfcfe 70%, #c9ced8); border-radius: 8px; padding: 8px 4px; }
.reel svg { display: block; width: 100%; max-width: 86px; height: auto; margin: 0 auto; }
.payline { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--cherry); opacity: .6; }

.cab-win { margin: 10px 0 0; font-size: 12px; color: var(--fog); }
.cab-spin {
  display: block; margin-top: 14px; padding: 15px; border-radius: 40px; text-decoration: none;
  font: 400 20px/1 "Bowlby One", sans-serif; color: #052b31; letter-spacing: .02em;
  background: linear-gradient(180deg, #84eef8, var(--surf) 40%, var(--surf-dk)); box-shadow: 0 5px 0 #11717e, 0 12px 26px rgba(78,214,230,.28);
}
.cab-spin:hover { filter: brightness(1.07); }
.cab-lever { position: absolute; right: -16px; top: 70px; width: 10px; height: 90px; background: #5a6274; border-radius: 6px; }
.cab-lever i { position: absolute; top: -16px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a92, var(--cherry)); }

.cab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.cab-stats div { background: var(--steel); border: 1px solid var(--steel-ln); border-radius: 12px; padding: 8px; text-align: center; }
.cab-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fog); }
.cab-stats dd { margin: 2px 0 0; font-weight: 800; font-size: 15px; }
.cab-copy { margin: 14px 2px 0; font-size: 13.5px; color: #c9cfda; }
.cab-copy a { color: var(--surf); font-weight: 800; }

.trx {
  display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 11px 13px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(139,63,217,.25), rgba(217,79,192,.18)); border: 1px solid rgba(217,79,192,.45);
}
.trx-badge { flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 8px; border-radius: 8px; background: linear-gradient(135deg, var(--plum), var(--orchid)); color: #fff; }
.trx p { margin: 0; font-size: 13px; line-height: 1.4; }
.trx a { color: #f0a6ff; font-weight: 800; }
.trx b { color: #fff; }

.cab-foot { margin-top: 20px; text-align: center; font-size: 11.5px; color: #7b8495; line-height: 1.7; }
.cab-foot a { color: #bdc5d2; }

@media (max-width: 440px) {
  .cab-lever { display: none; }
}
@media (max-width: 380px) {
  .cab-name { font-size: 22px; }
  .cab-h b { font-size: 21px; }
}