/* =========================================
   TrackMaker2 / TM2
   Extracted from style.css during CSS split pass 13
   ========================================= */

/* ============================
   ChaoKart Track Maker 2 (TM2)
   ============================ */
.tm2-body{
  display:flex;
  gap:10px;
  /* The panel includes a header; don't let the body claim 100% or it will
     push content down / overflow and waste vertical space. */
  height: calc(100% - 44px);
}
.tm2-left{
  width:380px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:6px;
}
.tm2-right{
  flex:1;
  display:flex;
}
.tm2-right canvas{
  width:100%;
  height:100%;
  image-rendering: pixelated;
  background: rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.2);
}

/* ============================
   TM2 definitive 4-column layout
   Options | Dead space | Catalogue | Canvas
   (prevents vertical stacking / missing columns)
   ============================ */
#trackmaker2-panel{ display:flex; flex-direction:column; }
#trackmaker2-panel .panel-header{ flex:0 0 auto; }
#trackmaker2-panel .tm2-body{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
}
#trackmaker2-panel .tm2-left{
  flex:0 0 380px !important;
  max-width:380px !important;
  min-width:380px !important;
  overflow:auto;
}
#trackmaker2-panel .tm2-spacer{ flex:1 1 auto !important; min-width:24px !important; }
#trackmaker2-panel .tm2-catalogue{
  flex:0 0 320px !important;
  max-width:320px !important;
  min-width:320px !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#trackmaker2-panel .tm2-cat-body{ flex:1 1 auto; min-height:0; overflow:auto; }
#trackmaker2-panel .tm2-right{ flex:1 1 auto !important; min-width:0 !important; display:flex; overflow:hidden; }
.tm2-row{display:flex; align-items:center; gap:8px;}
.tm2-row-2{justify-content:space-between;}
.tm2-sub{flex:1; display:flex; align-items:center; gap:6px;}
.tm2-label{min-width:72px; font-size:13px; color: rgba(255,255,255,0.85);}
.tm2-input, .tm2-select{
  flex:1;
  height:34px;
  padding:0 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(10,20,30,0.7);
  color:#fff;
}
.tm2-check{font-size:13px; color: rgba(255,255,255,0.85); user-select:none;}
.tm2-btn{
  height:34px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(30,60,90,0.55);
  color:#fff;
  cursor:pointer;
}
.tm2-btn.primary{background: rgba(60,120,220,0.65);}
.tm2-hint{font-size:12px; color: rgba(255,255,255,0.7); line-height:1.25;}

/* TrackMaker2 header actions */
.tm2-header-actions{
  display:flex;
  gap:8px;
  margin-left:auto;
  margin-right:8px;
  align-items:center;
}

.tm2-header-btn{
  height:28px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
  font-size:12px;
}

.tm2-header-btn:hover{
  background: rgba(255,255,255,0.14);
}

/* TM2: tighten panel padding so the left options sit flush (no giant dead space) */
#trackmaker2-panel{
  padding: 6px;
}

/* Ensure the TM2 body starts right under the header */
#trackmaker2-panel .tm2-body{
  margin-top: 0;
}

.tm2-stamp-preview{
  width:64px;
  height:28px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;
  background: rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.tm2-stamp-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering: pixelated;
}

.tm2-prefab-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:6px;
  padding:6px 0;
  max-height:210px;
  overflow:auto;
  border-top:1px solid rgba(255,255,255,0.12);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.tm2-prefab-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(10,20,30,0.55);
  cursor:pointer;
  color:#fff;
}
.tm2-prefab-item:hover{
  border-color: rgba(120,200,255,0.55);
}
.tm2-prefab-thumb{
  width:34px;
  height:22px;
  object-fit:contain;
  image-rendering: pixelated;
  background: rgba(0,0,0,0.25);
  border-radius:4px;
}
.tm2-prefab-name{
  font-size:11px;
  color: rgba(255,255,255,0.85);
  line-height:1.1;
}

.tm2-overlays{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#tm2-minimap{
  width:100%;
  max-width:240px;
  height:160px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  border-radius:6px;
  image-rendering: pixelated;
}

.tm2-small{
  font-size:12px;
  opacity:0.92;
  line-height:1.2;
}

#shop-ring-display .currency-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#shop-ring-display .currency-divider {
  margin: 0 6px;
  color: #ffd60a;
  font-family: monospace;
}

#shop-ring-display .specialrings {
  color: #e0e0ff;
}

/* ============================
   TrackMaker2 layout tightening (fix unused left strip under header buttons)
   ============================ */


/* Let the body naturally fill remaining space (no hard-coded header height assumptions) */
#trackmaker2-panel .tm2-body{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  padding:0;
}

/* Pull the left options flush-left */
#trackmaker2-panel .tm2-left{
  margin-left:0 !important;
  padding-left:0 !important;
}

/* Reduce label column so rows don't look indented */
#trackmaker2-panel .tm2-label{
  min-width:54px;
}

/* Slightly tighter row spacing */
#trackmaker2-panel .tm2-row{
  gap:6px;
}

/* ============================
   TrackMaker2: force 4-column layout
   Options (left) | Spacer | Catalogue (right) | Canvas
   This guarantees the Catalogue is NOT in the same strip as Options.
   ============================ */
#trackmaker2-panel .tm2-body{
  display:grid !important;
  grid-template-columns: 320px 1fr 280px 420px;
  gap:12px;
  align-items:stretch;
}

#trackmaker2-panel .tm2-left{
  grid-column:1;
  width:auto !important;
  min-width:0;
  max-width:none;
  overflow:auto;
}

#trackmaker2-panel .tm2-spacer{
  grid-column:2;
  min-width:0;
}

#trackmaker2-panel .tm2-catalogue{
  grid-column:3;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  background: rgba(10,20,30,0.22);
}

#trackmaker2-panel .tm2-right{
  grid-column:4;
  min-width:0;
  overflow:hidden;
}

#trackmaker2-panel .tm2-right canvas{
  width:100% !important;
  height:100% !important;
}

/* Catalogue UI */
.tm2-cat-head{
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tm2-cat-title{
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0.9;
}
.tm2-cat-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tm2-cat-tab{
  height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#fff;
  font-size:12px;
  cursor:pointer;
}
.tm2-cat-tab.active{
  background: rgba(120,200,255,0.22);
  border-color: rgba(120,200,255,0.55);
}
.tm2-cat-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:8px;
}
.tm2-cat-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.tm2-cat-item{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  background: rgba(10,20,30,0.45);
  padding:6px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tm2-cat-item:hover{
  border-color: rgba(120,200,255,0.55);
}
.tm2-cat-item.active{
  border-color: rgba(255,220,80,0.75);
  box-shadow: 0 0 0 2px rgba(255,220,80,0.18) inset;
}
.tm2-cat-thumb{
  width:100%;
  height:72px;
  object-fit:contain;
  image-rendering: pixelated;
  background: rgba(0,0,0,0.22);
  border-radius:8px;
}
.tm2-cat-name{
  font-size:12px;
  opacity:0.9;
  line-height:1.1;
  word-break:break-word;
}

/* ============================
   TrackMaker2: FINAL layout lock
   Match intended UI: Options | Catalogue | Canvas
   Fixes Catalogue/Grid stacking under Options by ensuring the DOM
   stays within .tm2-body and enforcing a stable 3-column layout.
   ============================ */
#trackmaker2-panel{ display:flex !important; flex-direction:column !important; }
#trackmaker2-panel .panel-header{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#trackmaker2-panel .tm2-header-actions{ margin-left:auto !important; }
#trackmaker2-panel #trackmaker2-close.panel-close-x{
  margin-left:8px;
  width:32px;
  height:28px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
}
#trackmaker2-panel #trackmaker2-close.panel-close-x:hover{ background: rgba(255,255,255,0.14); }

#trackmaker2-panel .tm2-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns: 320px 340px 1fr !important;
  grid-template-rows: 1fr !important;
  gap:12px !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

/* Options column */
#trackmaker2-panel .tm2-left{
  grid-column:1 !important;
  overflow:auto !important;
  min-width:0 !important;
}

/* Remove the old spacer column entirely (it caused dead space + confusion) */
#trackmaker2-panel .tm2-spacer{
  display:none !important;
}

/* Catalogue column */
#trackmaker2-panel .tm2-catalogue{
  grid-column:2 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#trackmaker2-panel .tm2-cat-body{ flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; }

/* Canvas column */
#trackmaker2-panel .tm2-right{
  grid-column:3 !important;
  min-width:0 !important;
  overflow:hidden !important;
  display:flex !important;
}


/* =========================================================
   TrackMaker2: visibility + header controls reliability

   Bug symptoms:
   - TM2 panel appears on page load even though it has class="hidden"
   - TM2 close (X) appears to do nothing

   Root cause:
   - Earlier CSS blocks set #trackmaker2-panel { display:flex !important; }
     which can override both the base .panel display:none and the .hidden
     display:none.

   Fix:
   - Force hidden to win.
   - Only show the panel when it is NOT hidden.
   ========================================================= */

#trackmaker2-panel.hidden{ display:none !important; }
#trackmaker2-panel:not(.hidden){ display:flex !important; flex-direction:column !important; }

#trackmaker2-panel,
#chaoracemaker-panel {
  position: absolute;
}

/* extracted from styles/03-panel-contract.css — Legacy TrackMaker controls family */
/* ============================================================
   ChaoKart — Track Maker
============================================================ */
.trackmaker-body{
  display:flex;
  gap:12px;
  height: calc(100% - 38px);
}
.trackmaker-left{
  width: 280px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

#tm-object-help .trackmaker-hint{
  font-size:12px;
  line-height:1.25;
}
.trackmaker-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#tm-canvas{
  width: 100%;
  height: 100%;
  background:#000;
  border:1px solid rgba(255,255,255,0.15);
  image-rendering: pixelated;
}
.trackmaker-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.trackmaker-row-2{
  display:flex;
  gap:10px;
}
.trackmaker-label{
  width:70px;
  font-size:12px;
  opacity:0.9;
}
.trackmaker-select{
  flex:1;
  background:#0f0f0f;
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  padding:6px 8px;
  border-radius:6px;
}
.trackmaker-range{
  flex:1;
}
.trackmaker-val{
  width:36px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:0.9;
}
.trackmaker-btn{
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
}
.trackmaker-btn:hover{ background: rgba(255,255,255,0.10); }
.trackmaker-btn.danger{ border-color: rgba(255,80,80,0.35); }
.trackmaker-hint{
  font-size:12px;
  line-height:1.3;
  opacity:0.85;
  padding:8px;
  border:1px dashed rgba(255,255,255,0.18);
  border-radius:8px;
}
.trackmaker-caption{
  font-size:12px;
  opacity:0.8;
}

/* TrackMaker button variants */
.trackmaker-btn.primary{border-color:#66ccff;}


/* ===== moved from 03-panel-contract.css: Legacy TrackMaker1 removal guard ===== */
/* Legacy TrackMaker1 fully removed */

/* =========================================
   Panel-contract breakup pass31 — trackmaker/chao-race-maker spill
   ========================================= */

/* TRACKMAKER2: keep header actions left of pin/x and avoid overlap */
#trackmaker2-panel > .panel-header{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: var(--panel-header-h, 44px);
}

/* ============================
   Chao Race Maker (CRM)
   ============================ */
#chaoracemaker-panel{ display:flex; flex-direction:column; }
#chaoracemaker-panel .panel-header{ flex:0 0 auto; }
#chaoracemaker-panel .crm-body{ flex:1 1 auto; min-height:0; display:flex; gap:14px; padding:12px; overflow:hidden; }
#chaoracemaker-panel .crm-left{ width:330px; min-width:330px; display:flex; flex-direction:column; gap:10px; overflow:auto; padding-right:6px; }
#chaoracemaker-panel .crm-catalogue{ width:330px; min-width:330px; display:flex; flex-direction:column; gap:8px; overflow:hidden; background:rgba(10,14,24,0.76); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:10px; }
#chaoracemaker-panel .crm-right{ flex:1 1 auto; min-width:0; display:flex; overflow:hidden; }
#chaoracemaker-panel .crm-right canvas{ width:100% !important; height:100% !important; display:block; background:#0b1220; border:1px solid rgba(255,255,255,0.16); border-radius:14px; image-rendering:pixelated; }
.crm-row{display:flex; align-items:center; gap:8px;}
.crm-row-2{justify-content:space-between;}
.crm-sub{flex:1; display:flex; align-items:center; gap:6px;}
.crm-label{min-width:78px; font-size:13px; color:rgba(255,255,255,0.86);}
.crm-input,.crm-select{flex:1; min-width:0; background:rgba(14,18,28,0.85); color:#fff; border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:8px 10px; font-size:13px;}
.crm-check{font-size:13px; color:rgba(255,255,255,0.86); user-select:none;}
.crm-btn{appearance:none; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.08); color:#fff; border-radius:10px; padding:9px 12px; font-size:13px; cursor:pointer;}
.crm-btn:hover{ background:rgba(255,255,255,0.12); }
.crm-small{font-size:12px; line-height:1.35; color:rgba(255,255,255,0.7);}
.crm-hint{font-size:12px; line-height:1.45; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 12px;}
.crm-cat-head{display:flex; flex-direction:column; gap:8px;}
.crm-cat-title{font-size:15px; font-weight:700; color:#fff;}
.crm-cat-tabs{display:flex; flex-wrap:wrap; gap:6px;}
.crm-cat-tab{appearance:none; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#fff; border-radius:999px; padding:7px 12px; font-size:12px; cursor:pointer;}
.crm-cat-tab.active{background:rgba(110,170,255,0.22); border-color:rgba(110,170,255,0.45);}
.crm-cat-body{flex:1 1 auto; min-height:0; overflow:auto;}
.crm-cat-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.crm-cat-item{display:flex; flex-direction:column; gap:8px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); border-radius:14px; padding:10px; cursor:pointer; min-height:110px;}
.crm-cat-item.active{outline:2px solid rgba(110,170,255,0.55); background:rgba(110,170,255,0.14);}
.crm-cat-preview{height:56px; border-radius:10px; border:1px solid rgba(255,255,255,0.10); background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); position:relative; overflow:hidden;}
.crm-cat-name{font-size:12px; line-height:1.3; color:#fff;}