/* extracted from 17-minigame-arenas-b.css during pass182; load immediately after 17-minigame-arenas-b.css to preserve cascade order */

/* extracted from styles/03-panel-contract.css — MiniMaze MP family */
/* ===================================================================== */
/* MiniMaze MP                                                           */
/* ===================================================================== */

.mm-topbar {
  display:flex;
  justify-content:space-between;
  padding:4px 8px;
  font-size:12px;
}

.mm-body {
  display:flex;
  gap:10px;
  padding:8px;
}

.mm-opponent-tiles {
  width:240px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mm-opponent-tile {
  background:#111;
  border:1px solid #333;
  padding:6px;
  font-size:11px;
}

.mm-left .mm-names {
  margin-bottom:4px;
}

.mm-player {
  font-weight:bold;
}

.mm-progress-bar {
  display:flex;
  gap:2px;
}

.mm-progress-bar span {
  width:10px;
  height:6px;
  background:#333;
}

.mm-progress-bar span.filled {
  background:#0f0;
}

.mm-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.mm-countdown {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  background:rgba(0,0,0,0.6);
}

/* extracted from styles/03-panel-contract.css — Mode banner helpers */
/* ============================
   Mode Banner (Arena Panels)
   ============================ */
.mode-banner {
  display: none !important;
}

/* Migrated from 99-legacy-overrides-b.css — retire old in-body arena mode banners. */
.panel .mode-banner {
  display: none !important;
}

.mode-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-banner-name { opacity: 0.95; }
.mode-banner-role { opacity: 0.8; font-weight: 700; }
.mode-banner-hint { opacity: 0.75; font-weight: 700; }

/* ===== moved from 03-panel-contract.css: MP gameplay panel/arena compat ===== */
/* duplicate panel contract compat block trimmed; authoritative shell block later covers panel/tmp/mp2x headers */
.panel.mp2x {
  display: flex;
  flex-direction: column;
}

.panel.mp2x > .panel-header,
.panel.mp2x > .panel-body {
  width: 100%;
}

/* ============================================================
   PANEL CONVERSION PHASE — MP gameplay panels
   ============================================================ */
#mini-maze-panel,
#karate-mp-panel,
#tag-mp-panel,
#ringgrab-mp-panel,
#hotrope-mp-panel,
#meteordodge-mp-panel,
#skydive-mp-panel,
#bumperballs-mp-panel,
#tron-mp-panel,
#flappy-mp-panel,
#beatemup-mp-panel,
#chaomirage-mp-panel,
#speedhockey-mp-panel,
#bobsled-mp-panel,
#bigblast-mp-panel {
  flex-direction: column;
}

.mm-panel-body,
.karate-mp-body,
.tmp-panel-body,
.mp2x-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#mini-maze-panel .panel-body {
  position: relative;
}

#mini-maze-panel .panel-header,
#karate-mp-panel .panel-header,
.tmp-header,
.mp2x-header {
  flex: 0 0 auto;
}

#mini-maze-panel .panel-title,
#karate-mp-panel .panel-title,
.tmp-title,
.mp2x-title {
  min-width: 0;
}

#mini-maze-panel .panel-header-controls,
#karate-mp-panel .panel-header-controls,
.tmp-header .panel-header-controls,
.mp2x-header .panel-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.karate-mp-body {
  padding: 8px;
}

.karate-mp-info {
  margin-top: 0;
  flex: 0 0 auto;
}

.karate-mp-arena,
.md-arena,
.sd-arena,
.sh-arena,
.bs-track,
.bbg-arena {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.mp2x-body,
.tmp-panel-body {
  width: 100%;
}

.mp2x-body > .mp2x-arena,
.mp2x-body > .tron-arena,
.mp2x-body > .flappy-arena,
.tmp-panel-body > #ringgrab-mp-arena,
.tmp-panel-body > #hotrope-mp-arena,
.tmp-panel-body > .md-arena,
.tmp-panel-body > .sd-arena,
.tmp-panel-body > #bumperballs-mp-arena,
.tmp-panel-body > .sh-arena,
.tmp-panel-body > .bs-track,
.tmp-panel-body > .bbg-arena {
  width: 100%;
}

.mp2x-body .tmp-info,
.tmp-panel-body .tmp-info {
  flex: 0 0 auto;
}

.mp2x-title-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.mp2x-subtitle {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 2px;
}

/* ============================================================
   Phase A bannerless arena normalization
   ============================================================ */
#karate-arena-panel,
#karate2-arena-panel,
#class-arena-panel {
  display: flex;
  flex-direction: column;
}


#race-mp-banner-panel {
  display: none !important;
}

/* ============================

/* =========================================
   Panel-contract breakup pass31 — minimaze/ringgrab spill
   ========================================= */

/* MiniMaze MP sizing + live chao overlay */
#mini-maze-panel {
  width: 1720px;
  height: 1120px;
}

#mini-maze-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

#mini-maze-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid #444;
  background: #000;
}

#mini-maze-chao-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#mini-maze-chao-container .chao {
  pointer-events: none;
}

/* Ring Grab ice floor + breakable grid */
#ringgrab-mp-arena {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 38%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(170,220,255,0.18), rgba(110,175,230,0.14) 45%, rgba(70,120,180,0.22));
}

#ringgrab-mp-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.rg-cell {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(210,240,255,0.035);
  overflow: hidden;
}