/* BangaWin micro 08 - slot machine cabinet with three static reels */
:root {
  --void: #121010;
  --body: #1e1b1a;
  --body-hi: #2c2725;
  --steel: #403936;
  --cream: #fbf3e3;
  --dim: #a59d96;
  --flame: #e23b22;
  --flame-top: #ff5c3c;
  --flame-deep: #93210f;
  --coin: #f2bd2c;
  --coin-deep: #c48812;
  --go: #3ddc71;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 26px 16px; overflow-x: hidden;
  background:
    conic-gradient(from 200deg at 50% -10%, transparent 0 8deg, rgba(226,59,34,.22) 10deg, transparent 13deg 34deg, rgba(226,59,34,.18) 36deg, transparent 39deg),
    radial-gradient(60% 50% at 50% 0%, #2c1612, transparent 80%),
    var(--void);
  color: var(--cream); font: 400 15px/1.5 Rubik, Arial, sans-serif;
}
a { color: inherit; }

.cab {
  position: relative; width: 100%; max-width: 410px; padding: 0 18px 16px; border-radius: 28px 28px 14px 14px;
  background: linear-gradient(180deg, var(--body-hi), var(--body) 30%);
  border: 2px solid var(--steel);
  box-shadow: 0 0 0 6px #0b0a0a, 0 0 50px rgba(226,59,34,.22), 0 30px 60px rgba(0,0,0,.6);
}

.cab-crown {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 -18px; padding: 14px 10px;
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #2a1411, #1a1110); border-bottom: 2px solid var(--steel);
}
.lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 8px var(--coin); flex: none; }
.lamp:nth-child(even) { background: var(--flame-top); box-shadow: 0 0 8px var(--flame-top); }
.logo-x { display: inline-flex; align-items: center; margin: 0 6px; text-decoration: none; font: italic 800 22px/1 Rubik, sans-serif; transform: skewX(-8deg); }
.logo-x em { font-style: inherit; color: #fff; text-shadow: 0 2px 0 #000; }
.logo-x strong { font-weight: inherit; color: var(--flame); -webkit-text-stroke: 1.2px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.logo-x svg { width: 30px; height: 24px; margin: 0 2px; }

.cab-head { margin: 18px 0 14px; text-align: center; font: 400 13px/1.2 "Russo One", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cab-head span { display: block; margin-top: 8px; font-size: 25px; letter-spacing: .01em; line-height: 1.15; color: #fff; text-transform: none; text-shadow: 0 3px 0 #000, 0 0 22px rgba(226,59,34,.55); }

.window {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 14px;
  background: #0a0909; border: 3px solid var(--coin-deep); box-shadow: inset 0 0 0 2px #000, 0 0 18px rgba(242,189,44,.25);
}
.reel {
  aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(180deg, #b9b1a6 0%, #fffaf0 22%, #fffaf0 78%, #b9b1a6 100%);
}
.reel svg { width: 78%; height: auto; }
.payline { position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; transform: translateY(-50%); background: var(--flame); box-shadow: 0 0 10px var(--flame-top); border-radius: 2px; opacity: .85; }

.meter { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--steel); }
.meter div { padding: 8px 4px; text-align: center; background: #151312; }
.meter div + div { border-left: 1px solid var(--steel); }
.meter b { display: block; font: 400 16px/1.2 "Russo One", sans-serif; color: var(--coin); }
.meter small { font-size: 11px; color: var(--dim); }

.cab-copy { margin-top: 14px; font-size: 14px; color: #ddd5cc; text-align: center; }

.deck { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 16px; }
.spin-key, .join-key { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px; border-radius: 12px; text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.spin-key { color: #fff; background: radial-gradient(120% 90% at 50% 0%, var(--flame-top), var(--flame) 60%); box-shadow: 0 6px 0 var(--flame-deep), 0 12px 24px rgba(226,59,34,.4); transition: transform .1s, box-shadow .1s; }
.spin-key .spin-in span { font: 400 18px/1 "Russo One", sans-serif; margin-right: 5px; }
.spin-key:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--flame-deep), 0 8px 16px rgba(226,59,34,.4); }
.join-key { color: var(--coin); border: 2px solid var(--coin-deep); background: #191615; }
.join-key:hover { background: #241e14; }
.cab-tc { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--dim); }

.plinth { margin: 14px -18px -16px; padding: 12px 18px; border-top: 2px solid var(--steel); border-radius: 0 0 12px 12px; background: #0f0d0d; text-align: center; font-size: 11px; color: var(--dim); }
.plinth p + p { margin-top: 3px; }
.plinth a { color: var(--go); }

@media (max-width: 360px) {
  .deck { grid-template-columns: 1fr; }
  .cab-head span { font-size: 22px; }
  .lamp:nth-child(3), .lamp:nth-last-child(3) { display: none; }
}