/* Mesin Buah — kabinet mesin dingdong buah 90-an pada kanvas tegak 720×1280: papan nama berlampu,
   strip LED berjalan, layar angka merah, papan 24 kotak berbingkai emas dengan bohlam, panel taruhan,
   tombol arcade menonjol, dan pintu koin. Semua digambar dengan CSS/SVG (orisinal). */

html[data-screen='buah'] body, html[data-screen='buahRooms'] body {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 120, 40, 0.28), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 calc(6px * var(--s, 1)), transparent calc(6px * var(--s, 1)) calc(18px * var(--s, 1))),
    radial-gradient(ellipse at 50% 60%, #2a0a3a, #0b0212 70%) fixed;
}
.led { font-family: 'Press Start 2P', monospace; }

/* ================================ Kabinet ================================ */
.cab {
  position: absolute; left: 14px; right: 14px; top: 8px; bottom: 6px; border-radius: 46px 46px 20px 20px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 7%, transparent 93%, rgba(0, 0, 0, 0.45)),
    linear-gradient(180deg, #d6252f, #b3131f 40%, #8e0a16);
  box-shadow: inset 0 0 0 4px #f2d48a, inset 0 0 0 9px #6a0710, inset 0 0 0 12px #c9a227, 0 24px 50px rgba(0, 0, 0, 0.85);
}
/* Kisi speaker di sisi papan nama */
.cab::before, .cab::after {
  content: ''; position: absolute; top: 30px; width: 18px; height: 70px; border-radius: 9px;
  background: repeating-linear-gradient(180deg, #1a0306 0 4px, #5e0810 4px 8px);
}
.cab::before { left: 22px; }
.cab::after { right: 22px; }

/* Papan nama berlampu */
.cab-marquee {
  position: absolute; left: 48px; right: 48px; top: 16px; height: 92px; border-radius: 30px 30px 10px 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #fffbe0, #ffd23a 40%, #ff8a00 75%, #c24400);
  box-shadow: 0 0 0 4px #fff0b0, 0 0 0 7px #7a3a00, 0 0 30px rgba(255, 190, 40, 0.6);
}
.cab-marquee b {
  position: relative; z-index: 1; font: 400 52px/1 'Lobster', cursive; color: #d6101e; letter-spacing: 1px;
  -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(90, 20, 0, 0.6);
}
.cab-marquee small { position: relative; z-index: 1; margin-top: 4px; font: 800 13px var(--ui); color: #5a1a00; letter-spacing: 1px; }
.cab-marquee .bulbs, .cab-marquee .bulbs::after {
  position: absolute; inset: 3px; border-radius: 27px 27px 8px 8px; border: 7px dotted #fffdf0; pointer-events: none;
}
.cab-marquee .bulbs { animation: chase 0.6s steps(1) infinite; }
.cab-marquee .bulbs::after { content: ''; inset: -7px; border-color: #ff3b1a; border-style: dotted; animation: chase 0.6s steps(1) infinite reverse; }
@keyframes chase { 50% { opacity: 0.15; } }

/* Strip LED berjalan (running text pemenang) */
.cab .cab-led.ticker {
  left: 34px; right: 34px; top: 116px; bottom: auto; height: 32px; border-radius: 4px; font-size: 17px;
  background: #0a0000; border: 3px solid #2a2a2a; box-shadow: inset 0 0 10px #000; color: #ff4a2a;
  text-shadow: 0 0 6px rgba(255, 60, 30, 0.9);
}
.cab .cab-led.ticker::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}
.cab .cab-led.ticker:empty { display: flex; }
.cab .cab-led.ticker:empty::before { content: '★ SELAMAT BERMAIN ★ MESIN BUAH ★'; font: 400 13px 'Press Start 2P', monospace; letter-spacing: 1px; animation: blink 1.4s steps(1) infinite; }
.cab .cab-led.ticker b { color: #fff36a; }
.cab .cab-led.ticker .who, .cab .cab-led.ticker .bot { color: #ffb0a0; }

/* Layar angka: MENANG · No. · KREDIT */
.cab-displays { position: absolute; left: 30px; right: 30px; top: 154px; height: 62px; display: flex; gap: 10px; align-items: stretch; }
.disp {
  flex: 1; position: relative; border-radius: 6px; background: #050000; border: 3px solid #3a3a3a;
  box-shadow: inset 0 0 12px #000, 0 0 0 2px #c9a227; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 10px 7px;
}
.disp span { position: absolute; left: 8px; top: 4px; font: 800 12px var(--ui); color: #ffd84d; letter-spacing: 1px; }
.disp b { font: 400 26px/1 'Press Start 2P', monospace; color: #ff2a1a; text-shadow: 0 0 8px rgba(255, 40, 20, 0.85); letter-spacing: 2px; }
.disp-mid { width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; text-align: center; }
.disp-mid b { font: 900 22px var(--ui); color: #ffe27a; text-shadow: 0 2px 2px #000; }
.disp-mid small { font: 600 13px var(--ui); color: #f4ead2; }
.cab.has-win .disp:first-child { animation: winbox 0.5s steps(1) infinite; }
@keyframes winbox { 50% { box-shadow: inset 0 0 12px #000, 0 0 0 2px #fff36a, 0 0 16px #ffd21a; } }

/* Papan 24 kotak */
.cab-board {
  position: absolute; left: 26px; top: 224px; width: 640px; height: 640px; padding: 16px; border-radius: 14px;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 4px;
  background: linear-gradient(135deg, #8a5a00, #ffe58a 25%, #c98a00 50%, #ffe58a 75%, #8a5a00);
  box-shadow: inset 0 0 0 3px #5a3a00, 0 6px 14px rgba(0, 0, 0, 0.6);
}
.board-bulbs { position: absolute; inset: 0; pointer-events: none; }
.board-bulbs i {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffd21a 50%, #b36b00); box-shadow: 0 0 6px #ffcc33;
  animation: chase 0.7s steps(1) infinite;
}
.board-bulbs i:nth-child(odd) { animation-delay: 0.35s; }
.cell {
  position: relative; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #fffdf4, #f1e2bd); box-shadow: inset 0 -4px 0 rgba(120, 80, 0, 0.18), 0 0 0 2px #6b4a08;
  transition: box-shadow 0.06s, filter 0.06s;
}
.cell .ico { width: 78%; height: 78%; display: block; }
.cell .ico svg { width: 100%; height: 100%; display: block; }
.cell.small .ico { width: 54%; height: 54%; margin: -10px 0 0 -10px; }
.cell em {
  position: absolute; right: 4px; bottom: 4px; font: 900 15px/1 var(--ui); font-style: normal; color: #fff; background: #c40d22;
  padding: 3px 5px; border-radius: 5px; box-shadow: 0 1px 0 #6b0410;
}
.cell.hoki { background: linear-gradient(180deg, #1fa83a, #0b5a1a); }
.cell.hoki .ico { width: 66%; height: 66%; margin-top: -12px; }
.cell.hoki .htag { left: 0; right: 0; bottom: 5px; background: none; box-shadow: none; text-align: center; font: 400 12px 'Press Start 2P', monospace; color: #fff36a; text-shadow: 0 0 4px #000; }
.cell .lamp {
  position: absolute; left: 5px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a7a, #7a0a0a); box-shadow: inset 0 0 0 1px #3a0000;
}
.cell.t2 { box-shadow: 0 0 0 3px rgba(255, 243, 106, 0.35), 0 0 8px rgba(255, 210, 26, 0.35); }
.cell.t1 { box-shadow: 0 0 0 3px rgba(255, 243, 106, 0.7), 0 0 14px rgba(255, 210, 26, 0.6); filter: brightness(1.05); }
.cell.on, .cell.flash, .cell.win {
  z-index: 2; filter: brightness(1.12) saturate(1.15);
  box-shadow: 0 0 0 4px #fff36a, 0 0 0 7px #ff8a00, 0 0 26px 8px rgba(255, 210, 26, 0.9);
}
.cell.on .lamp, .cell.flash .lamp, .cell.win .lamp { background: radial-gradient(circle at 35% 35%, #fff, #ffef5a 45%, #ff9a00); box-shadow: 0 0 10px 3px #ffe14a; }
.cell.win { animation: winpulse 0.45s steps(1) infinite; }
@keyframes winpulse { 50% { box-shadow: 0 0 0 4px #ff2a2a, 0 0 0 7px #fff36a, 0 0 26px 8px rgba(255, 60, 30, 0.9); } }

/* Layar tengah */
.cab-screen {
  grid-area: 2 / 2 / 7 / 7; position: relative; border-radius: 10px; overflow: hidden; margin: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: radial-gradient(ellipse at 50% 25%, #4a0d6a, #170025 60%, #07000d);
  box-shadow: 0 0 0 5px #111, 0 0 0 8px #9a9a9a, inset 0 0 40px rgba(0, 0, 0, 0.8);
}
.cab-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px), linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 40%);
}
.scr-title {
  font: 400 56px/0.95 'Lobster', cursive; color: #ffd84d; -webkit-text-stroke: 5px #7a1a00; paint-order: stroke fill;
  text-shadow: 0 0 18px rgba(255, 200, 40, 0.6), 0 5px 0 #3a0a00; transform: rotate(-4deg);
}
.scr-led {
  min-width: 150px; padding: 12px 18px; border-radius: 8px; background: #050000; border: 3px solid #333;
  font: 400 54px/1 'Press Start 2P', monospace; color: #ff2a1a; text-shadow: 0 0 12px rgba(255, 40, 20, 0.95); letter-spacing: 6px;
}
.scr-msg { text-transform: uppercase; min-height: 44px; padding: 0 16px; font: 400 16px/1.4 'Press Start 2P', monospace; color: #fff; text-shadow: 0 0 6px #000; letter-spacing: 1px; }
.scr-msg.good { color: #6dff5a; }
.scr-msg.bad { color: #ff8a8a; }
.scr-msg.info { color: #8fd8ff; }
.scr-msg.hoki { color: #fff36a; font-size: 20px; animation: blink 0.5s steps(1) 6; }
.scr-msg.blink { color: #fff6c8; opacity: 0.9; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.scr-info { font: 700 17px var(--ui); color: #e8d8ff; }

/* Panel taruhan 8 simbol */
.cab-bets { position: absolute; left: 28px; right: 28px; top: 872px; height: 186px; display: flex; gap: 4px; justify-content: center; }
.bcol { width: 76px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.bmult { height: 26px; border-radius: 8px 8px 2px 2px; text-align: center; font: 900 18px/26px var(--ui); color: #fff; text-shadow: 0 1px 1px #000; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); }
.bbtn {
  height: 92px; padding: 8px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #fffdf4, #ead6a4); box-shadow: 0 0 0 3px #c9a227, 0 6px 0 #6b4a08, 0 8px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.06s, box-shadow 0.06s;
}
.bbtn svg { width: 100%; height: 100%; display: block; }
.bbtn:active:not(:disabled), .bbtn.press { transform: translateY(5px); box-shadow: 0 0 0 3px #fff36a, 0 1px 0 #6b4a08, 0 2px 4px rgba(0, 0, 0, 0.5); }
.bbtn:disabled { filter: grayscale(0.4) brightness(0.8); cursor: not-allowed; }
.bled {
  height: 50px; border-radius: 4px; background: #050000; border: 2px solid #333; display: grid; place-items: center;
  font: 400 22px/1 'Press Start 2P', monospace; color: #ff2a1a; text-shadow: 0 0 8px rgba(255, 40, 20, 0.85);
}

/* Panel tombol arcade */
.cab-ctrl {
  position: absolute; left: 22px; right: 22px; top: 1066px; height: 102px; padding: 10px 14px; border-radius: 12px;
  display: flex; gap: 12px; align-items: center;
  background: linear-gradient(180deg, #4a4a4a, #1e1e1e 60%, #2e2e2e); box-shadow: inset 0 2px 0 #777, inset 0 -3px 0 #000, 0 4px 10px rgba(0, 0, 0, 0.6);
}
.abtn {
  flex: 1; height: 76px; border: 0; border-radius: 16px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 0 var(--d), 0 10px 12px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  background: radial-gradient(ellipse at 50% 25%, var(--l), var(--c) 60%); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.06s, box-shadow 0.06s;
}
.abtn b { font: 900 22px/1 var(--ui); letter-spacing: 1px; }
.abtn small { font: 800 14px var(--ui); opacity: 0.95; }
.abtn.big { flex: 1.35; }
.abtn.big b { font-size: 28px; }
.abtn.blue { --l: #7fc0ff; --c: #1662c4; --d: #0a3270; }
.abtn.red { --l: #ff8a8a; --c: #c41818; --d: #6b0808; }
.abtn.yellow { --l: #fff3a0; --c: #e0a800; --d: #7a5a00; color: #2b1a00; text-shadow: none; }
.abtn.green { --l: #a6ff8a; --c: #2f9e1a; --d: #145a08; }
.abtn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 var(--d), 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.abtn:disabled { filter: grayscale(0.75) brightness(0.6); cursor: not-allowed; }
.cab.has-win .abtn.blue:not(:disabled), .cab.has-win .abtn.red:not(:disabled), .cab.has-win .abtn.yellow:not(:disabled) { animation: btnglow 0.8s ease-in-out infinite; }
@keyframes btnglow { 50% { filter: brightness(1.35); } }

/* Baris bawah: menu, colokan, pintu koin, batal */
.cab-low { position: absolute; left: 22px; right: 22px; top: 1180px; height: 80px; display: flex; gap: 10px; align-items: center; }
.sbtn {
  height: 58px; padding: 0 14px; border: 0; border-radius: 10px; color: #f2f2f2; font: 900 17px var(--ui); letter-spacing: 1px;
  background: linear-gradient(180deg, #9a9a9a, #5a5a5a 55%, #3a3a3a); box-shadow: 0 5px 0 #1e1e1e, inset 0 1px 0 #ccc;
}
.sbtn.arrow { width: 54px; padding: 0; font-size: 22px; }
.sbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #1e1e1e; }
.sbtn:disabled { opacity: 0.5; }
.coin-door {
  flex: 1; height: 74px; border-radius: 10px; display: flex; gap: 8px; padding: 7px;
  background: linear-gradient(180deg, #2a2a2a, #0e0e0e); box-shadow: inset 0 0 0 2px #c9a227, inset 0 0 0 5px #111, 0 3px 6px rgba(0, 0, 0, 0.6);
}
.slot {
  flex: 1; border: 0; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 900 15px var(--ui); letter-spacing: 1px; background: linear-gradient(180deg, #444, #222); box-shadow: inset 0 1px 0 #666;
}
.slot i { width: 8px; height: 26px; border-radius: 4px; background: #000; box-shadow: 0 0 0 3px #c9a227, inset 0 0 4px #ffcf5a; }
.slot.in { color: #7dff5a; }
.slot.out { color: #ff7a7a; }
.slot.out i { width: 26px; height: 10px; }
.slot:active:not(:disabled) { filter: brightness(1.3); }
.slot:disabled { opacity: 0.5; }

/* ================================ Pilih room & colokan ================================ */
.br-top { position: absolute; left: 16px; right: 16px; top: 12px; height: 84px; display: flex; align-items: center; gap: 12px; }
.br-marquee {
  flex: 1; height: 76px; border-radius: 22px 22px 8px 8px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, #fffbe0, #ffd23a 40%, #ff8a00 75%, #c24400); box-shadow: 0 0 0 4px #fff0b0, 0 0 0 7px #7a3a00, 0 0 24px rgba(255, 190, 40, 0.5);
}
.br-marquee b { font: 400 44px/1 'Lobster', cursive; color: #d6101e; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; }
.br-wallet { width: 150px; height: 70px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); border: 2px solid #e0a51b; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.br-wallet span { font: 700 14px var(--ui); color: #ffe9a8; }
.br-wallet b { font: 900 24px var(--ui); color: var(--green); }
.br-ticker { top: 104px; bottom: auto; height: 34px; font-size: 16px; background: rgba(0, 0, 0, 0.8); }
.br-rooms { position: absolute; left: 16px; right: 16px; top: 146px; height: 68px; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.br-rooms button {
  border: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffe9a8;
  background: linear-gradient(180deg, #5a0a14, #2a0308); box-shadow: inset 0 0 0 2px #7a5a10;
}
.br-rooms button b { font: 900 22px var(--ui); color: #fff; }
.br-rooms button small { font: 600 13px var(--ui); }
.br-rooms button[aria-selected='true'] { background: linear-gradient(180deg, #fbe98a, #d9b440 55%, #9c7a17); box-shadow: 0 0 0 3px #fff36a; }
.br-rooms button[aria-selected='true'] b, .br-rooms button[aria-selected='true'] small { color: #1b1405; }
.br-grid {
  position: absolute; left: 16px; right: 16px; top: 224px; bottom: 214px; overflow-y: auto; padding: 8px 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 8px; align-content: start;
  background: rgba(0, 0, 0, 0.45); border-radius: 12px; border: 2px solid #5a3a18;
}
.btile { padding: 2px 0 0; border: 0; background: none; border-radius: 10px; }
.btile svg { width: 100%; height: auto; display: block; }
.btile.sel { background: rgba(255, 216, 77, 0.22); box-shadow: 0 0 0 3px #ffd84d; }
.btile.pemain { opacity: 0.75; }
.br-info {
  position: absolute; left: 16px; right: 16px; bottom: 98px; height: 106px; padding: 10px 16px; border-radius: 12px; display: flex; gap: 16px; align-items: center;
  background: linear-gradient(180deg, #ffe7b8, #e9b96e); color: #3a1a05; box-shadow: 0 0 0 3px #8e1b14;
}
.bi-no { text-align: center; }
.bi-no small { display: block; font: 800 13px var(--ui); color: #6b3d0a; }
.bi-no b { font: 900 52px/1 var(--ui); }
.bi-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bi-st { font: 800 20px var(--ui); }
.bi-st.kosong { color: #146b10; } .bi-st.pemain { color: #a10a1d; } .bi-st.kamu { color: #7a5a00; }
.bi-hist { display: flex; align-items: center; gap: 4px; font: 700 15px var(--ui); color: #5a4320; flex-wrap: wrap; }
.bi-hist i { width: 30px; height: 30px; padding: 2px; border-radius: 6px; background: #fffdf4; box-shadow: 0 0 0 1px #8a5a1e; }
.bi-hist i.k { width: 24px; height: 24px; }
.bi-hist svg { width: 100%; height: 100%; display: block; }
.br-play { position: absolute; left: 140px; right: 140px; bottom: 18px; height: 68px; font-size: 30px; font-weight: 900; }

/* Help: tabel simbol kecil */
.pay-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pay-mini span { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px; border-radius: 6px; background: #1a1408; }
.pay-mini svg { grid-row: 1 / 3; width: 40px; height: 40px; }
.pay-mini b { color: #ffe27a; font-size: 0.95em; }
.pay-mini small { color: #ddd; font-size: 0.8em; }
@media (max-width: 520px) { .pay-mini { grid-template-columns: repeat(2, 1fr); } }