/* ================= FIND MATCH: halaman duel live (js/duel-mm.js) ================= */
.fm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px; align-items: stretch; }

/* Cara bermain */
.fm-how, .fm-play { border: 3px solid #1E1A24; border-radius: 20px; padding: 12px 14px; box-shadow: 0 6px 0 rgba(0,0,0,.45); }
.fm-how { background: rgba(8,12,28,.72); backdrop-filter: blur(3px); }
.fm-how h3 { margin: 0 0 8px; font: 400 14px Bungee, Impact, sans-serif; letter-spacing: 1px; color: #A5B4FC; }
.fm-how ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fm-how li { display: grid; grid-template-columns: 26px 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.fm-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #1E1A24; background: linear-gradient(180deg, #818CF8, #4338CA); font: 400 14px Bungee, Impact, sans-serif; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.fm-hi { font-size: 24px; text-align: center; }
.fm-ht b { display: block; font: 400 14px Bungee, Impact, sans-serif; color: #FEF3C7; }
.fm-ht small { display: block; font: 700 11.5px/1.3 Nunito, system-ui, sans-serif; color: #CBD5E1; }

/* Kartu main: profil, liga, tombol utama */
.fm-play { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(55,48,163,.78), rgba(15,23,42,.84)); backdrop-filter: blur(3px); }
.fm-me { display: flex; align-items: center; gap: 8px; }
.fm-me .ox-av { width: 34px; height: 34px; }
.fm-me-t { display: flex; flex-direction: column; min-width: 0; }
.fm-me-t b { font: 400 15px Bungee, Impact, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-me-t small { font: 800 12px Nunito, system-ui, sans-serif; color: #FDE68A; }
.fm-me-t i { font-style: normal; }
.fm-lgl { font: 800 11px Nunito, system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #A5B4FC; }
.fm-lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fm-lg button { display: flex; flex-direction: column; align-items: center; padding: 5px 4px 4px; cursor: pointer; color: #CBD5E1; border: 2.5px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(8,12,28,.75); transition: transform .12s; }
.fm-lg button:hover { transform: translateY(-2px); }
.fm-lg .ox-lg { width: 28px; height: 28px; }
.fm-lg b { font: 400 11.5px Bungee, Impact, sans-serif; }
.fm-lg small { font: 800 10.5px Nunito, system-ui, sans-serif; color: #94A3B8; }
.fm-lg button.on { color: #3A2A00; border-color: #1E1A24; background: linear-gradient(180deg, #FEF08A, #EAB308); box-shadow: 0 4px 0 #854D0E; }
.fm-lg button.on small { color: #78350F; }

/* Tombol FIND MATCH: kuning besar, satu-satunya yang berdenyut */
.fm-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 10px 18px; cursor: pointer; color: #3A2A00;
  border: 4px solid #1E1A24; border-radius: 20px; background: linear-gradient(180deg, #FEF9C3 0%, #FDE047 38%, #EAB308 100%);
  box-shadow: 0 8px 0 #854D0E, 0 0 0 3px rgba(250,204,21,.5), 0 0 28px rgba(250,204,21,.45); animation: fmPulse 1.9s ease-in-out infinite; transition: transform .1s, box-shadow .1s; }
.fm-cta::before { content: ""; position: absolute; top: -30%; bottom: -30%; width: 24%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); animation: oxShine 3.4s ease-in-out infinite; pointer-events: none; }
.fm-cta:hover { filter: brightness(1.05); }
.fm-cta:active { animation: none; transform: translateY(6px); box-shadow: 0 2px 0 #854D0E, 0 0 0 3px rgba(250,204,21,.5); }
.fm-cta-ic { flex: 0 0 auto; width: 46px; height: 46px; }
.fm-cta-ic svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.fm-cta-tx { display: flex; flex-direction: column; align-items: flex-start; }
.fm-cta-tx b { font: 400 clamp(24px, 4.4vw, 34px)/1 Bungee, Impact, sans-serif; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.fm-cta-tx small { font: 800 12.5px Nunito, system-ui, sans-serif; color: #78350F; }
.fm-note { margin: 0; text-align: center; font: 700 11.5px Nunito, system-ui, sans-serif; color: #A5B4FC; }

/* Aksi tingkat kedua */
.fm-sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fm-tile { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 8px; cursor: pointer; color: #E2E8F0; border: 3px solid #1E1A24; border-radius: 14px;
  background: linear-gradient(180deg, rgba(51,65,85,.95), rgba(15,23,42,.95)); box-shadow: 0 4px 0 #020617; font: 800 13px Nunito, system-ui, sans-serif; transition: transform .12s; }
.fm-tile i { font-style: normal; font-size: 20px; }
.fm-tile:hover { transform: translateY(-2px); color: #fff; }
.fm-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #020617; }

@keyframes fmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

@media (max-width: 700px) {
  .fm-grid { grid-template-columns: 1fr; }
  .fm-sec { grid-template-columns: repeat(2, 1fr); }
}

/* HP mendatar / layar pendek: padatkan supaya semuanya muat tanpa menggulir jauh */
@media (max-height: 520px) {
  .fm-grid { gap: 10px; }
  .fm-how, .fm-play { padding: 8px 12px; border-radius: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.45); }
  .fm-how h3 { margin-bottom: 5px; font-size: 12.5px; }
  .fm-how ol { gap: 6px; }
  .fm-n { width: 22px; height: 22px; font-size: 12px; }
  .fm-how li { grid-template-columns: 22px 26px minmax(0, 1fr); gap: 6px; }
  .fm-hi { font-size: 20px; }
  .fm-ht b { font-size: 12.5px; }
  .fm-ht small { font-size: 10.5px; }
  .fm-play { gap: 6px; }
  .fm-me .ox-av { width: 28px; height: 28px; }
  .fm-me-t b { font-size: 13px; }
  .fm-me-t small { font-size: 11px; }
  .fm-lgl, .fm-note { display: none; }
  .fm-lg { gap: 5px; }
  .fm-lg button { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 4px; padding: 3px 4px; border-radius: 12px; }
  .fm-lg .ox-lg { width: 22px; height: 22px; }
  .fm-lg b { font-size: 10.5px; }
  .fm-lg small { flex-basis: 100%; text-align: center; font-size: 10px; }
  .fm-cta { padding: 6px 14px; border-radius: 16px; border-width: 3px; box-shadow: 0 6px 0 #854D0E, 0 0 0 2px rgba(250,204,21,.5), 0 0 22px rgba(250,204,21,.4); }
  .fm-cta-ic { width: 38px; height: 38px; }
  .fm-cta-tx b { font-size: 24px; }
  .fm-cta-tx small { font-size: 11px; }
  .fm-sec { gap: 6px; }
  .fm-tile { padding: 6px 6px; font-size: 12px; border-radius: 12px; }
  .fm-tile i { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fm-cta, .fm-cta::before { animation: none !important; } }