:root{ --mbattle-bg:#0f172a; --mbattle-surface:#111827; --mbattle-card:#0b1220; --mbattle-text:#e5e7eb; --mbattle-accent:#22c55e; --mbattle-danger:#ef4444; --mbattle-info:#2563eb; --mbattle-muted:#9ca3af; }
.is-hidden{ display:none !important; }
.mbattle-viewport{ width:100%; display:flex; justify-content:center; }
.mbattle-frame{ width:min(1080px,100%); aspect-ratio:1080/1920; background:linear-gradient(180deg,#0b1220,#0f172a); color:var(--mbattle-text); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; position:relative; padding:24px; box-sizing:border-box; }
.mbattle-topbar{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; }
.mbattle-timer{ font-size:clamp(28px,4.2vw,56px); font-weight:800; padding:8px 16px; background:#111827; border-radius:12px; min-width:180px; text-align:center; }
.mbattle-lastscore{ opacity:.8; font-size:clamp(16px,2.2vw,22px); }
.mbattle-teambar{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:8px 0; }
.mbattle-team-wrap{ display:flex; flex-direction:column; gap:6px; }
.mbattle-team{ appearance:none; border:none; cursor:pointer; background:#dc2626; color:#fff; padding:10px 12px; border-radius:12px; font-weight:700; transition:transform .15s, filter .15s, background .15s; }
.mbattle-team:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.mbattle-team.is-active{ outline:2px solid #fff; }
.mbattle-team.is-live{ background:#2563eb; }
.mbattle-team-time{ text-align:center; color:var(--mbattle-muted); font-variant-numeric:tabular-nums; }
.mbattle-controls{ display:flex; gap:12px; justify-content:center; margin:8px 0 12px; }
.mbattle-btn{ appearance:none; border:none; cursor:pointer; border-radius:14px; padding:12px 18px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.mbattle-btn.mbattle-start{ background:var(--mbattle-accent); color:#062d14; }
.mbattle-btn.mbattle-restart{ background:#8b5e34; color:#fff; }
.mbattle-boardwrap{ flex:1; display:flex; justify-content:center; align-items:center; padding:10px 0; }
.mbattle-board{ width:100%; display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:10px; }
.mbattle-tile{ position:relative; aspect-ratio:1/1; border:none; cursor:pointer; perspective:1000px; border-radius:14px; overflow:hidden; background:var(--mbattle-card); }
.mbattle-face{ position:absolute; inset:0; backface-visibility:hidden; transition:transform .35s ease; background-size:cover; background-position:center; border-radius:14px; }
.mbattle-back{ background: radial-gradient(100% 100% at 0 0, #0ea5e9, #1e3a8a); }
.mbattle-front{ transform: rotateY(180deg); }
.mbattle-tile.is-flipped .mbattle-back{ transform: rotateY(180deg); }
.mbattle-tile.is-flipped .mbattle-front{ transform: rotateY(0deg); }
.mbattle-tile.is-matched{ opacity:.7; filter:saturate(.6); }
.mbattle-settings{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.mbattle-settings label{ display:flex; flex-direction:column; gap:6px; font-size:14px; opacity:.9;  color:#ffffff; }
.mbattle-settings select{ padding:8px 10px; border-radius:10px; background:#0b1220; color:var(--mbattle-text); border:1px solid #1f2937; }
.mbattle-winner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.mbattle-winner-text{ position:relative; z-index:2; padding:16px 22px; border-radius:14px; background:#111827; color:#fff; font-size:clamp(36px,6vw,80px); font-weight:900; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.mbattle-winner canvas{ position:absolute; inset:0; z-index:1; }
.mbattle-toolbar{ margin:10px 0 12px; display:flex; gap:8px; }
.mbattle-image-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.mbattle-image-item{ background:#0b1220; border:1px solid #1f2937; border-radius:10px; overflow:hidden; }
.mbattle-image-item img{ width:150px; height:150px; object-fit:cover; display:block; }
.mbattle-actions{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; font-size:12px; }
.mbattle-handle{ cursor:grab; font-weight:700; opacity:.6; }
.button-link-delete{ color:#dc2626; }
.mbattle-empty{ padding:18px; background:#0b1220; border:1px dashed #334155; color:#cbd5e1; border-radius:10px; text-align:center; }
#mbattle-back-preview img{ width:150px; height:150px; object-fit:cover; border:1px solid #1f2937; border-radius:10px; }
.mbattle-audio-preview{ margin:8px 0; }
@media (max-width:700px){ .mbattle-teambar{ grid-template-columns:repeat(2,1fr);} .mbattle-settings{ grid-template-columns:repeat(2,1fr);} } .mbattle-settings label{color:#ffffff !important; opacity:1 !important;}