/* Cadres « métal et néon » (Caisses et mini-jeux) — le fond du site ne change pas */
body.metal {
  --steel: linear-gradient(160deg, #E4E9F2 0%, #8D96AA 18%, #3C4252 38%, #9AA3B6 55%, #2B303C 72%, #B8C0D0 90%, #4A5163 100%);
  --cyan: #5EE7F5; --pink: #E879F9; --glass-in: linear-gradient(180deg, rgba(18, 26, 44, .86), rgba(9, 13, 26, .9)); --cut: 22px;
}
.metal .mf, .metal .panel, .metal .stage, .metal .roulette, .metal a.mini {
  position: relative; border: 0; border-radius: 0; background: var(--steel); box-shadow: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate;
}
/* Verre sombre à l'intérieur du cadre */
.metal .panel::before, .metal .stage::before, .metal .roulette::before, .metal a.mini::before {
  content: ''; position: absolute; inset: 4px; z-index: -1; background: var(--glass-in);
  clip-path: polygon(calc(var(--cut) - 2px) 0, calc(100% - var(--cut) + 2px) 0, 100% calc(var(--cut) - 2px), 100% calc(100% - var(--cut) + 2px), calc(100% - var(--cut) + 2px) 100%, calc(var(--cut) - 2px) 100%, 0 calc(100% - var(--cut) + 2px), 0 calc(var(--cut) - 2px));
  box-shadow: inset 0 0 30px rgba(94, 231, 245, .1);
}
/* Néons sur les côtés, barres lumineuses en haut et en bas, pattes d'accroche aux coins */
.metal .panel::after, .metal .stage::after, .metal .roulette::after, .metal a.mini::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left 1px center / 3px 46% no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right 1px center / 3px 46% no-repeat,
    linear-gradient(90deg, transparent, var(--cyan) 30%, var(--pink) 70%, transparent) top 1px center / 38% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--pink) 30%, var(--cyan) 70%, transparent) bottom 1px center / 38% 2px no-repeat,
    linear-gradient(#D7DDE8, #6E778A) top 0 left 18% / 9% 5px no-repeat,
    linear-gradient(#D7DDE8, #6E778A) top 0 right 18% / 9% 5px no-repeat,
    linear-gradient(#6E778A, #D7DDE8) bottom 0 left 18% / 9% 5px no-repeat,
    linear-gradient(#6E778A, #D7DDE8) bottom 0 right 18% / 9% 5px no-repeat;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.metal .panel { padding: 22px 24px; }
.metal .stage { padding: 28px; }
/* Titres des cadres avec les petits boutons décoratifs */
.metal .panel > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #E6F6FF; font-weight: 600; }
.metal .panel > h2::after { content: ''; flex: none; width: 88px; height: 24px; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 24'%3E%3Cg fill='%23121A2C' stroke='%2378859E' stroke-width='1.2'%3E%3Crect x='1' y='1' width='26' height='22' rx='4'/%3E%3Crect x='31' y='1' width='26' height='22' rx='4'/%3E%3Crect x='61' y='1' width='26' height='22' rx='4'/%3E%3C/g%3E%3Crect x='9' y='7' width='10' height='10' rx='2' fill='none' stroke='%235EE7F5' stroke-width='1.6'/%3E%3Cpath d='M44 6v12M38 12h12' stroke='%239AA6BC' stroke-width='1.6'/%3E%3Crect x='69' y='7' width='10' height='10' rx='2' fill='none' stroke='%239AA6BC' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.metal h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #A8F4FF; text-shadow: 0 0 18px rgba(94, 231, 245, .55), 0 2px 0 #0B2A3A; filter: none; letter-spacing: .02em; }

/* Barre du haut encadrée de la même façon */
.metal .topnav { position: relative; margin-top: 10px; padding: 12px 22px; background: var(--steel); isolation: isolate;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
.metal .topnav::before { content: ''; position: absolute; inset: 3px; z-index: -1; background: var(--glass-in);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px); }
.metal .topnav .brand { background: none; color: #A8F4FF; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: 0 0 12px rgba(94, 231, 245, .5); }

/* Cases intérieures : verre sombre, fin liseré bleu */
.metal .item, .metal .tier, .metal .recent li, .metal .kt, .metal .mt, .metal .paytable div, .metal .wallet, .metal .seg, .metal .bet-row button, .metal input, .metal select {
  border-radius: 9px; border: 1px solid rgba(110, 160, 220, .45); box-shadow: inset 0 0 14px rgba(94, 231, 245, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.metal .tier, .metal .recent li { background: rgba(14, 22, 40, .75); border-left-width: 1px; }
.metal .tier { box-shadow: inset 3px 0 0 var(--c), inset 0 0 14px rgba(94, 231, 245, .06); }
.metal .item { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 35%, transparent), rgba(12, 18, 34, .95) 72%); border-color: color-mix(in srgb, var(--c) 55%, rgba(110, 160, 220, .5)); box-shadow: inset 0 -3px 0 var(--c), inset 0 0 18px rgba(94, 231, 245, .08); }
.metal .wallet { padding: 8px 12px; background: rgba(10, 16, 30, .7); }
.metal input, .metal select { background: rgba(8, 13, 26, .85); }
.metal .kt, .metal .mt { background: linear-gradient(180deg, #232C4A, #171E36); }
.metal .kt:hover:not(:disabled), .metal .mt:hover:not(:disabled) { background: linear-gradient(180deg, #2E3A62, #1C2442); border-color: var(--cyan); }
.metal .kt.sel { background: linear-gradient(180deg, #A78BFA, #6E50DA); border-color: #D9CCFF; }
.metal .kt.hit { background: linear-gradient(180deg, #5BF0A4, #1FB46B); border-color: #C8FFE2; }
.metal .kt.drawn { background: #120F26; border-color: rgba(255, 92, 122, .6); }
.metal .mt.gem { background: radial-gradient(circle, rgba(62, 224, 143, .35), #10261C 70%); border-color: #3EE08F; }
.metal .mt.bomb { background: radial-gradient(circle, rgba(255, 92, 122, .5), #34101A 70%); border-color: #FF5C7A; }
.metal .marker { z-index: 4; }
.metal .roulette .strip { z-index: 1; }

/* Bouton principal : métal sombre avec une rampe de LED au-dessus */
.metal .btn.primary { position: relative; border-radius: 8px; color: #F2F6FF; font-weight: 700; padding-top: 16px;
  background: linear-gradient(180deg, #4A5266, #262B38 55%, #1A1E28); border: 1px solid #9AA4B8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .5); }
.metal .btn.primary::before { content: ''; position: absolute; top: 5px; left: 16%; right: 16%; height: 5px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #5EE7F5 0 9px, transparent 9px 12px) left / 55% 100% no-repeat,
              repeating-linear-gradient(90deg, #F5B83D 0 9px, transparent 9px 12px) 62% / 22% 100% no-repeat,
              repeating-linear-gradient(90deg, #3A4152 0 9px, transparent 9px 12px) right / 18% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(94, 231, 245, .7)); }
.metal .btn.primary:hover:not(:disabled) { border-color: var(--cyan); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 18px rgba(94, 231, 245, .35); }
.metal .btn.primary #price, .metal .btn.primary b { color: #F5C66B; }
.metal .btn.play.cash { background: linear-gradient(180deg, #3EE08F, #18A35E); color: #062a17; border-color: #C8FFE2; }
.metal .btn.play.cash::before { background: repeating-linear-gradient(90deg, #EFFFF6 0 9px, transparent 9px 12px); }
.metal .seg button.on { background: linear-gradient(180deg, #4A5266, #262B38); color: #A8F4FF; box-shadow: inset 0 0 0 1px var(--cyan), 0 0 10px rgba(94, 231, 245, .3); }
.metal .reveal-box { border-radius: 0; background: linear-gradient(180deg, rgba(20, 28, 48, .98), rgba(9, 13, 26, .98)); border: 3px solid #8D96AA;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); }
@media (max-width: 700px) {
  body.metal { --cut: 14px; }
  .metal .panel { padding: 18px 16px; }
  .metal .stage { padding: 18px 14px; }
  .metal .topnav { margin: 8px 8px 0; }
  .metal .panel > h2::after { width: 66px; height: 18px; }
}