/* Migrated ownership from 17-minigame-arenas-a.css — family consolidation */
#trainer-container {position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #0b1c2c, #122b45);}
#obstacle-garden-container {position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;}
#tag-container {position: relative;
  width: 100%;
  height: 100%;
  background: url("../assets/bgs/bg_tagarena.png") center bottom no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
  outline: none;}
#treasure-container {position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1a2b3a, #0a1620);
  overflow: hidden;}
#race-canvas {border: 2px solid #415a77;
  background: #1b263b;
  display: block;
  margin: 10px 0;}
#karate-canvas {border: 2px solid #415a77;
  background: #1b263b;
  display: block;
  margin: 10px 0;}
#karate-arena-panel {background: transparent !important;
  border: none !important;
  padding: 0 !important;}
#karate2-arena-panel {background: transparent !important;
  border: none !important;
  padding: 0 !important;}
#karate2-canvas {position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;}
#class-arena-panel {background: transparent !important;
  border: none !important;
  padding: 0 !important;}
.karate-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 120px);  /* header + info */
  margin-top: 12px;

  overflow: hidden;            /* 🔴 CRITICAL: keep Chao visible */
  box-sizing: border-box;}
#tag-mp-panel {position: fixed;
  width: 780px;
  height: 540px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(12, 22, 32, 0.96);
  border: 3px solid #3a4f69;
  border-radius: 12px;
  padding: 6px;
  z-index: 9300;
  display: none;}
.tmp-header {display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  margin-bottom: 6px;}
.tmp-title {font-size: 22px;
  font-weight: bold;}
#tag-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 94px);
  background: #1a1a1a;
  border: 1px solid #2f4560;
  border-radius: 6px;}
#ringgrab-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 94px);
  background: #1a1a1a;
  border: 1px solid #2f4560;
  border-radius: 6px;}
#hotrope-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 94px);
  background: #1a1a1a;
  border: 1px solid #2f4560;
  border-radius: 6px;
  overflow: hidden;}
.panel.mp2x {overflow: hidden;}
.panel.mp2x {width: 780px;
  height: 540px;
  transform: scale(2);
  transform-origin: top left;}
#tron-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 94px);
  border: 1px solid #2f4560;
  border-radius: 6px;
  overflow: hidden;
  background: #06111a;}
#bumperballs-mp-arena {position: relative;
  width: 100%;
  height: calc(100% - 94px);
  background: #1a1a1a;
  border: 1px solid #2f4560;
  border-radius: 6px;
  overflow: hidden;}
#bumperballs-mp-ball {position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.35) inset,
    0 12px 28px rgba(0,0,0,0.55);
  background-image: url("../assets/minigames/bumperballs/arena_440.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;}
#ringgrab-mp-chao-container {position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;}
.sh-arena {position: relative;
  width: 100%;
  height: calc(100% - 86px);
  overflow: hidden;}
.sh-rink {position: absolute;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 340px;
  transform: translate(-50%, -50%);
  border-radius: 26px;
  border: 6px solid rgba(210, 235, 255, 0.22);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.35) inset,
    0 12px 28px rgba(0,0,0,0.55);
  background:
    linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02) 42%, rgba(0,0,0,0.02) 58%, rgba(0,0,0,0.08)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 58%, rgba(0,0,0,0.14) 100%);
  pointer-events: none;}
.sh-goal {position: absolute;
  top: 50%;
  width: 18px;
  height: 90px;
  transform: translateY(-50%);
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.22) inset;
  pointer-events: none;}
.md-arena {position: relative;
  width: 100%;
  height: calc(100% - 86px);
  overflow: hidden;}
.sd-arena {position: relative;
  width: 700px;
  height: 420px;
  margin: 10px auto 0;
  overflow: hidden;
  border: 1px solid #2f4560;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0.18) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.18));}
.bs-track {position: relative;
  width: 100%;
  height: calc(100% - 86px);
  overflow: hidden;}
.bs-lane {position: absolute;
  left: 50%;
  top: 52%;
  width: 640px;
  height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 44px;
  border: 6px solid rgba(210, 235, 255, 0.18);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.35) inset,
    0 12px 28px rgba(0,0,0,0.55);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(0,0,0,0.10) 70%),
    linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.02) 60%, rgba(0,0,0,0.10));
  pointer-events: none;}
#ringgrab-mp-rings {position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;}
.bbg-arena {position: relative;
  width: 100%;
  height: calc(100% - 86px);
  overflow: hidden;}
.bbg-grid {position: absolute;
  left: 50%;
  top: 50%;
  width: 680px;
  height: 300px;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  padding: 14px;}

/* ========================================================================== */
/* PROFILE PANEL — JOURNAL STYLE */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* BODY */
/* -------------------------------------------------------------------------- */

/* Rows */

/* Values — JOURNAL INSET STYLE */

/* Buttons — subdued, journal-appropriate */

/* -------------------------------------------------------------------------- */
/* FAVORITE CHAO — JOURNAL PREVIEW */
/* -------------------------------------------------------------------------- */

/* This intentionally matches #journal-chao-preview */

/* ========================================================================== */
/* FAVORITE CHAO PICKER — JOURNAL ADJACENT */
/* ========================================================================== */

/* Picker entries = journal-style preview tiles */

/* ========================================================================== */
/* CHOOSE NAME MODAL (INTENTIONALLY DISTINCT, STILL CONSISTENT) */
/* ========================================================================== */

.choose-name-backdrop {
  position: fixed;
  inset: 0;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.choose-name-panel {
  width: 300px;
  padding: 16px;

  background: #111;
  border: 2px solid #fff;
  color: #fff;

  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.cn-title {
  font-size: 16px;
  font-weight: bold;
}

.cn-input {
  width: 100%;
  padding: 8px;
  background: #000;
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
}

.cn-confirm {
  padding: 8px;
  background: #000;
  border: 2px solid #fff;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.cn-confirm:hover {
  background: #333;
}

/* moved from 03-panel-contract.css in pass26: trainer/obstacle/tag/treasure compat */
:is(#chao-trainer-panel,
#obstacle-garden-panel,
#tag-arena-panel,
#treasure-hunt-panel) {
  display: none;
  flex-direction: column;
}

:is(#chao-trainer-panel,
#obstacle-garden-panel,
#tag-arena-panel,
#treasure-hunt-panel) .panel-header {
  position: relative;
}

:is(#chao-trainer-panel,
#obstacle-garden-panel,
#tag-arena-panel,
#treasure-hunt-panel) .panel-title {
  flex: 1 1 auto;
  min-width: 0;
}

.trainer-panel-body,
.obstacle-panel-body,
.tag-panel-body,
.treasure-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
}

#trainer-container,
#obstacle-garden-container,
#tag-container,
#treasure-container {
  width: 100%;
  height: 100%;
}

#tag-container,
#treasure-container,
#obstacle-garden-container,
#trainer-container {
  min-height: 0;
}

/* extracted from styles/03-panel-contract.css — pass28 */
/* ============================
   FLAPPY CHAO MP
============================ */
.flappy-arena{
  position: relative;
  width: 780px;
  height: 446px;
  overflow: hidden;
  background: transparent;
}
#flappy-mp-canvas{
  position:absolute;
  left:0; top:0;
  image-rendering: pixelated;
}
.flappy-chao{
  position:absolute;
  left:0; top:0;
  width:780px;
  height:446px;
  pointer-events:none;
}
/* Slight lift so chao feels centered in flight */
.flappy-chao .chao{
  transform: translate(-50%, -58%);
}

/* ============================================================
   MP MINIGAMES — Standardize to ChaoKartMP sizing (1720×1120 panel, 1700×1000 playfield)
   Applies to: SkyDiveMP, TagArenaMP, BigBlast, RingGrab, Bobsled, Meteor Dodge, Hockey, Hot Rope, BumperBalls
============================================================ */

/* Ensure mp2x-authored panels use full CK sizing (disable 2× scaling for these panels) */
#skydive-mp-panel.mp2x,
#bigblast-mp-panel.mp2x,
#ringgrab-mp-panel.mp2x,
#bobsled-mp-panel.mp2x,
#meteordodge-mp-panel.mp2x,
#speedhockey-mp-panel.mp2x,
#hotrope-mp-panel.mp2x,
#bumperballs-mp-panel.mp2x {
  width: 1720px;
  height: 1120px;
  transform: none;
  transform-origin: top left;
  box-sizing: border-box;
}

/* Tag panel: stop fixed-centering so draggable panels behave consistently */
#tag-mp-panel {
  position: absolute;
  left: auto;
  top: auto;
  transform: none;
}

/* Shared playfield sizing */
.sd-arena,
.md-arena,
.sh-arena,
.bs-track,
.bbg-arena,
#ringgrab-mp-arena,
#hotrope-mp-arena,
#bumperballs-mp-arena,
#tag-mp-arena {
  width: 1700px;
  height: 1000px;
  margin: 0 auto;
  border-radius: 10px;
}

/* SkyDive already has border/background; keep but expand */
.sd-arena {
  margin: 0 auto;
}

/* Meteor Dodge */
.md-arena {
  position: relative;
  overflow: hidden;
}

/* Speed Hockey rink expands to full playfield */
.sh-rink {
  width: 1700px;
  height: 1000px;
  border-radius: 44px;
}

/* Goals scale with rink */
.sh-goal {
  height: 220px;
  width: 32px;
}

/* Bobsled lane scales up */
.bs-lane {
  width: 1500px;
  height: 860px;
  border-radius: 60px;
}

/* BigBlast grid scales up */
.bbg-grid {
  width: 1500px;
  height: 700px;
  gap: 26px;
  padding: 26px;
}

/* BumperBalls main ball scales up */
#bumperballs-mp-ball {
  width: 1000px;
  height: 1000px;
}

/* extracted from styles/03-panel-contract.css — Karate MP + CheatMP arena family */
/* ============================================================
   MULTIPLAYER KARATE PANEL — FIXED
   Draggable-safe • Arena-safe • Sprite-visible
   ============================================================ */

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.karate-mp-header {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  padding: 10px 0;

  border-bottom: 2px solid #2e455f;
  color: #ffd60a;
  text-shadow: 2px 2px 0 #000;

  user-select: none;
}

.karate-mp-info {
  margin-top: 8px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}

/* ========================================================================== */
/* UTIL */
/* ========================================================================== */

.hidden {
  display: none !important;
}

/* ========================================================================== */
/*                        CHEAT! MULTIPLAYER ARENA (CSS)                      */
/* ========================================================================== */

#cheatmp-arena-panel {
  position: absolute !important;
  left: auto;
  top: auto;
  width: min(1630px, calc(var(--app-authored-width) - 280px));
  height: min(1030px, calc(var(--app-authored-height) - 48px));
  max-height: calc(var(--app-authored-height) - 48px);
  transform: none;
  background: #1b1f24;
  border: 3px solid #3a3f47;
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  z-index: 5000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

/* ========================================================================== */
/*                               TITLE BAR                                    */
/* ========================================================================== */

.cheatmp-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: #14181d;
  border-bottom: 2px solid #2c3138;
}

.cheatmp-title {
  font-size: 20px;
  font-weight: bold;
}

.cheatmp-exit-btn {
  background: #922;
  border: none;
  color: #fff;
  font-size: 24px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
}

/* ========================================================================== */
/*                           TURN STATUS BANNER                               */
/* ========================================================================== */

#cheatmp-turn-banner {
  text-align: center;
  padding: 2px 0;
  font-size: 22px;
  font-weight: bold;
  background: #111;
  border-bottom: 2px solid #2c3138;
  color: #ffd966;
  text-shadow: 0 0 4px #000;
}

/* ========================================================================== */
/*                            ARENA WRAPPER                                   */
/* ========================================================================== */

.cheatmp-arena-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 5px;
  box-sizing: border-box;
}

/* ========================================================================== */
/*                         LEFT SIDE — MP CHAT                                */
/* ========================================================================== */

#mp-chat-panel.embedded {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ========================================================================== */
/*                    CENTER — TABLE COLUMN (FIXED)                           */
/* ========================================================================== */

.cheatmp-table-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* ========================================================================== */
/*                           CENTER — TABLE                                   */
/* ========================================================================== */

.cheatmp-table {
  position: relative;
  top: -4%;
  width: min(520px, 45vw);
  height: min(520px, 45vw);
  min-width: 320px;
  min-height: 320px;
  background: radial-gradient(circle at center,
    #287d4b 0%, #1f5e3a 60%, #17472c 100%);
  border: 8px solid #d4b676;
  border-radius: 50%;
  pointer-events: auto;
}

/* ========================================================================== */
/*                               SEAT LAYOUT                                  */
/* ========================================================================== */

.cheatmp-seat {
  position: absolute;
  width: 420px;
  height: 420px;
  text-align: center;
  pointer-events: none;
  overflow: visible;
}

/* Seat positions */
#cheatmp-seat-1 { left: 50%; top: 92%; transform: translate(-50%, -50%); }
#cheatmp-seat-2 { left: 78%; top: 78%; transform: translate(-50%, -50%); }
#cheatmp-seat-3 { left: 92%; top: 50%; transform: translate(-50%, -50%); }
#cheatmp-seat-4 { left: 78%; top: 22%; transform: translate(-50%, -50%); }
#cheatmp-seat-5 { left: 50%; top: 8%;  transform: translate(-50%, -50%); }
#cheatmp-seat-6 { left: 22%; top: 22%; transform: translate(-50%, -50%); }
#cheatmp-seat-7 { left: 8%;  top: 50%; transform: translate(-50%, -50%); }
#cheatmp-seat-8 { left: 22%; top: 78%; transform: translate(-50%, -50%); }

/* ========================================================================== */
/*                            SEAT CONTENT                                    */
/* ========================================================================== */

.seat-chao {
  position: relative;
  width: 100%;
  height: 320px;
}

.seat-chao-scale {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(3);
  transform-origin: bottom center;
  pointer-events: none;
}

.seat-name {
  position: absolute;
  top: 110px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px #000;
}

.seat-cardcount {
  position: absolute;
  top: 165px;
  width: 100%;
  font-size: 24px;
  color: #ffd966;
}

/* ========================================================================== */
/*                               CENTER PILE                                  */
/* ========================================================================== */

#cheatmp-pile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 240px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#cheatmp-pile .pile-card {
  position: absolute;
  width: 55px;
  height: 80px;
  background: url("../assets/cards/card_back.png");
  background-size: cover;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.6);
}

#cheatmp-pile-count {
  position: absolute;
  bottom: -14px;
  right: -14px;
  background: #111;
  border: 2px solid #e4cf79;
  color: #e4cf79;
  font-weight: bold;
  font-size: 24px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* ========================================================================== */
/*                               RANK DIAL                                    */
/* ========================================================================== */

#cheatmp-rank-text {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 6px #000;
}

/* ========================================================================== */
/*                           ACTION BAR (NOW STABLE)                           */
/* ========================================================================== */

.cheatmp-actionbar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6000;
  pointer-events: auto;
}

/* Button sizing stays unchanged */
.cheatmp-btn-sort,
.cheatmp-btn-declare,
.cheatmp-btn-cheatcall {
  width: clamp(70px, 6vw, 110px);
  height: clamp(60px, 8vw, 100px);
  font-size: clamp(12px, 2vw, 20px);
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.cheatmp-btn-sort {
  background: #248A3B;
  border: 2px solid #333;
  color: #fff;
}

.cheatmp-btn-declare {
  background: #3d7ae0;
  border: 2px solid #2a5cb3;
}

.cheatmp-btn-cheatcall {
  background: #d13838;
  border: 2px solid #9b2a2a;
}

.cheatmp-call-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cheatmp-call-timer {
  font-size: 40px;
  font-weight: bold;
  color: #ffd966;
}

/* ========================================================================== */
/*                           RIGHT SIDE — TURN LOG                             */
/* ========================================================================== */

.cheatmp-side.cheatmp-log {
  width: 18%;
  min-width: 200px;
  height: 100%;
  background: #14181d;
  border: 2px solid #2c3138;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.cheatmp-log-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}

#cheatmp-turn-log {
  flex: 1;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ========================================================================== */
/*                               HAND BAR                                     */
/* ========================================================================== */

.cheatmp-handbar {
  width: 100%;
  height: 210px;                /* HARD GUARANTEE FOR 2 ROWS */
  min-height: 210px;

  background: #23272d;
  border-top: 2px solid #3a3f47;

  display: flex;
  align-items: center;

  padding: 6px 12px;
  box-sizing: border-box;
}

.cheatmp-hand {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  grid-template-rows: repeat(2, 100px);

  gap: 4px 4px;

  width: 100%;
  height: 100%;

  align-content: center;
  justify-content: center;
  justify-items: center;

  overflow-x: auto;
  overflow-y: hidden;

  box-sizing: border-box;
}

/* ========================================================================== */
/*                               HAND CARDS                                   */
/* ========================================================================== */

.cheatmp-hand .card {
  width: 75px;
  height: 100px;

  background-size: cover;
  background-position: center;

  border-radius: 2px;
  border: 1px solid #111;

  cursor: pointer;
  transition: transform 0.12s;
}

.cheatmp-hand .card:hover {
  transform: translateY(-4px);
}

.cheatmp-hand .card.selected {
  border-color: #e4cf79;
  box-shadow: 0 0 8px rgba(255,240,150,0.6);
  transform: translateY(-6px);
}

/* Scrollbar tuning */
.cheatmp-hand::-webkit-scrollbar { height: 4px; }
.cheatmp-hand::-webkit-scrollbar-thumb { background: #3a3f47; border-radius: 4px; }
.cheatmp-hand::-webkit-scrollbar-track { background: #14181d; }

/* ========================================================================== */
/*                              TOAST MESSAGE                                 */
/* ========================================================================== */

#cheatmp-toast {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: bold;
  color: #e4cf79;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#cheatmp-toast.show {
  opacity: 1;
}

/* ========================================================================== */
/*                          FLYING CARD ANIMATION                              */
/* ========================================================================== */

.flying-card {
  position: fixed;
  width: 72px;
  height: 100px;
  background: url("../assets/cards/card_back.png");
  background-size: cover;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.5s ease-out, opacity 0.5s;
}
/* ========================================================================== */
/*                              UTILITY                                       */
/* ========================================================================== */

/* 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;
}

#mini-maze-canvas {
  border:1px solid #444;
  background:#000;
}

.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;
}

.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,
#tag-mp-arena,
#ringgrab-mp-arena,
#hotrope-mp-arena,
.md-arena,
.sd-arena,
#bumperballs-mp-arena,
.sh-arena,
.bs-track,
.bbg-arena,
#tron-mp-arena,
#flappy-mp-arena,
#beatemup-mp-arena,
#chaomirage-mp-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
   ============================================================ */
#chaokart-arena-panel,
#karate-arena-panel,
#karate2-arena-panel,
#class-arena-panel,
#chaorpg-arena-panel {
  display: flex;
  flex-direction: column;
}

#chaokart-arena-panel > .panel-body,
#karate-arena-panel > .panel-body,
#karate2-arena-panel > .panel-body,
#class-arena-panel > .panel-body,
#chaorpg-arena-panel > .panel-body {
  padding: 0;
  overflow: hidden;
}

#chaokart-arena-panel > .panel-body,
#karate-arena-panel > .panel-body,
#karate2-arena-panel > .panel-body,
#class-arena-panel > .panel-body,
#chaorpg-arena-panel > .panel-body {
  position: relative;
}

#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;
}

#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;
}

.rg-cell::before,
.rg-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 100ms linear;
  pointer-events: none;
}

.rg-cell::before {
  background:
    linear-gradient(135deg, transparent 47%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.45) 52%, transparent 53%),
    linear-gradient(45deg, transparent 44%, rgba(255,255,255,0.32) 45%, rgba(255,255,255,0.32) 49%, transparent 50%),
    linear-gradient(90deg, transparent 68%, rgba(255,255,255,0.22) 69%, rgba(255,255,255,0.22) 71%, transparent 72%);
}

.rg-cell::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(9,20,35,0.85), rgba(7,14,24,0.96) 58%, rgba(0,0,0,0.98) 100%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%);
  transform: scale(0.2);
  transform-origin: 50% 50%;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}

.rg-cell.crack-1::before { opacity: 0.28; }
.rg-cell.crack-2::before { opacity: 0.52; }
.rg-cell.crack-3::before { opacity: 0.78; }
.rg-cell.crack-4::before { opacity: 1; }
.rg-cell.broken::before { opacity: 0; }
.rg-cell.broken::after { opacity: 1; transform: scale(1); }

#ringgrab-mp-rings,
#ringgrab-mp-chao-container { z-index: 2; }


/* ============================================================
   Active minigame background ownership
   Keep core arena / track art out of dormant legacy shards.
   ============================================================ */
#race-canvas {
  background: url("../assets/bgs/bg_chaorace1.png") no-repeat center/cover !important;
}

#race3-canvas,
#race-multiplayer-canvas {
  background: url("../assets/bgs/bg_chaorace3.png") no-repeat center/cover !important;
}

#race4-canvas {
  background: url("../assets/bgs/bg_chaorace4.png") no-repeat center/cover !important;
}

#karate-canvas,
#karate2-canvas,
.karate-arena-canvas {
  background: url("../assets/bgs/bg_karate.png") no-repeat center/cover !important;
}

#class-arena-panel > .panel-body {
  background: url("../assets/bgs/bg_class.png") center/cover !important;
}


/* ============================================================
   Pass 9 — migrated arena fit ownership from 19-panel-fit-helpers.css
   Keep arena-specific shells, body fit, z-order, and special-case
   gameplay panel dimensions under minigame arena ownership.
   ============================================================ */

#karate-mp-panel {
  width: 1000px;
  height: 680px;
  left: auto;
  top: auto;
  transform: none;
  padding: 0;
  overflow: hidden;
  z-index: 9400;
}

#karate-mp-panel > .panel-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#class-arena-panel,
#karate-arena-panel,
#karate2-arena-panel {
  width: 760px;
  height: 560px;
  overflow: hidden;
}

#class-arena-panel > .panel-body,
#karate-arena-panel > .panel-body,
#karate2-arena-panel > .panel-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#chaorpg-arena-panel {
  width: 1120px;
  height: 840px;
  min-width: 0;
  min-height: 0;
  position: relative;
  padding: 10px;
  background-image: url('../js/chaorpg/dungeon/bg_dungeon1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#chaorpg-arena-panel > .panel-body {
  min-width: 0;
  min-height: 0;
}

#chaokart-arena-panel {
  z-index: 9900;
}

#mini-maze-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 {
  z-index: 9300;
}

#obstacle-garden-panel {
  position: absolute;
}

#cheatmp-arena-panel {
  max-width: min(1630px, calc(var(--app-authored-width) - 24px));
  display: flex;
  flex-direction: column;
}

#cheatmp-arena-panel > .panel-header {
  flex: 0 0 auto;
}

#cheatmp-arena-panel > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

#cheatmp-arena-panel .panel-header-controls {
  position: static;
  transform: none;
}

#cheatmp-arena-panel .cheatmp-exit-btn {
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
}


/* pass12: tag/treasure contract ownership migrated from 03-panel-contract.css */
#tag-arena-panel {
  overflow: hidden;
}

#tag-arena-panel > .panel-body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#tag-container,
#treasure-container {
  flex: 1 1 auto;
  min-height: 0;
}


/* pass18: migrated exact owner lanes from 11-chaorpg-b.css and 17-minigame-arenas-a.css */
#chaorpg-arena-panel {
  overflow: hidden;
  image-rendering: pixelated;
  background-image: none !important;
  background:
    linear-gradient(180deg, rgba(16, 26, 40, 0.96), rgba(8, 14, 24, 0.985)) !important;
  border: 2px solid rgba(95, 130, 170, 0.82) !important;
  border-radius: 24px !important;
  color: #eef6ff !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

#chaorpg-arena-panel > .panel-header {
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 14px 0 18px !important;
  background:
    linear-gradient(180deg, rgba(67, 102, 141, 0.92), rgba(26, 42, 64, 0.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.22);
}

#chaorpg-arena-panel > .panel-header .panel-title {
  color: #eef6ff !important;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

#chaorpg-arena-panel > .panel-body {
  background:
    radial-gradient(circle at top center, rgba(64, 104, 145, 0.10), transparent 48%),
    linear-gradient(180deg, rgba(11, 19, 30, 0.88), rgba(7, 12, 20, 0.92)) !important;
}

#obstacle-garden-panel {
  background: rgba(10, 15, 25, 0.9);
  border: 2px solid #415a77;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
}

#tag-arena-panel {
  background: rgba(15,25,35,0.95);
  border: 2px solid #415a77;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  user-select: none;
}