/* components.panel-chrome.css
 * Unified panel chrome styling (borders, header typography, layered comic shadow) for left/right side rails.
 */
.k-panel { 
  position:relative; 
  background:linear-gradient(180deg,rgba(0,0,0,0.32),rgba(0,0,0,0.50)); 
  border:3px solid #000; 
  border-radius:0; /* Sharp 90 degree corners */
  padding:8px 10px 12px; 
  box-shadow:4px 4px 0 #000; /* Simple drop shadow, no inner border */
  font-family:'Bangers',cursive; 
  letter-spacing:1px;
  height: 90%; /* Set to 90% height */
}
.k-panel + .k-panel { margin-top:14px; }
.k-panel__header { margin:0 0 8px; font-size:22px; color:#ffd400; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000, 3px 3px 0 #000; display:flex; align-items:center; justify-content:space-between; }
.k-panel__body { font-family:system-ui,sans-serif; letter-spacing:0; }

/* Legacy card-shop selectors were removed in prior cleanup */
/* Arrow (no rotation; we use real directional glyphs) */
/* Old toggle-arrow selectors removed (arrow now .mp-arrow) */
/* Monsters panel arrow: add a bit more breathing room from the title; no trailing margin needed */
.cmp-monsters-panel .mp-header .mp-arrow { font-size:14px; line-height:1; margin:0; }

/* Horizontal slide + header pivot (LEFT PANEL) */
/* Generic side panel container */
.cmp-side-panel { transition: transform .35s ease; position:relative; }
/* Reserve header vertical space so panels do not overlay the main game header unless viewport is too short */
body:not([data-panels-force-overlay]) .cmp-side-panel { margin-top:72px; }
/* Compute internal scrolling height subtracting header + footer spacing (approx). We only apply when expanded. */
body:not([data-panels-force-overlay]) .cmp-side-panel:not([data-collapsed="true"]) { max-height: calc(100vh - 72px - 24px); overflow:auto; }
/* If viewport height becomes very small (<600px), drop the guard to allow overlap (add a body flag via JS later if needed) */
@media (max-height:600px) {
  body:not([data-panels-force-overlay]) .cmp-side-panel { margin-top:56px; }
  body:not([data-panels-force-overlay]) .cmp-side-panel:not([data-collapsed="true"]) { max-height: calc(100vh - 56px - 16px); }
}
.cmp-side-panel[data-side="left"][data-collapsed="true"] { transform: translateX(calc(-100% + 46px - 18px)); }
.cmp-side-panel[data-side="right"][data-collapsed="true"] { transform: translateX(calc(100% - 46px)); }

/* Mobile/overlay mode: when enabled, dock panels to screen edges and remove them from normal flow */
body[data-panels-force-overlay] .cmp-side-panel {
  position: fixed;
  top: calc(var(--gl-header-height, 72px) + 8px);
  bottom: 84px; /* leaves room for footer toolbar */
  z-index: 6200; /* layered below dice tray/action menu (~6500), above arena */
  max-height: none;
}
body[data-panels-force-overlay] .cmp-side-panel[data-side="left"] { left: 0; right: auto; }
body[data-panels-force-overlay] .cmp-side-panel[data-side="right"] { right: 0; left: auto; }
body[data-panels-force-overlay] .cmp-side-panel:not([data-collapsed="true"]) { overflow:auto; }
body[data-panels-force-overlay] .cmp-side-panel[data-collapsed="true"] { overflow:visible; }
/* Ensure collapsed state still shows a tab within the viewport */
body[data-panels-force-overlay] .cmp-side-panel[data-side="left"][data-collapsed="true"] { transform: translateX(calc(-100% + 46px)); }
body[data-panels-force-overlay] .cmp-side-panel[data-side="right"][data-collapsed="true"] { transform: translateX(calc(100% - 46px)); }

/* Ensure collapsed left panel actually reduces its own width so rotated title is not clipped */
/* Left collapsed: ensure tab width so header/title remain within the visible 46px slice */
.cmp-side-panel[data-side="left"][data-collapsed="true"] {
  width:var(--collapsed-tab-width);
  min-width:var(--collapsed-tab-width);
  overflow:hidden; /* keep consistent with generic collapsed style */
}

.cmp-side-panel[data-collapsed="true"] { cursor:pointer; padding:0; background:transparent; border:0; box-shadow:none; overflow:hidden; min-height: 180px; height: 100%; }
.cmp-side-panel .mp-header { position:relative; z-index:2; }
.cmp-side-panel .mp-title { transition: transform .35s ease; cursor:pointer; white-space:nowrap; }
/* Ensure arrow on left panel precedes text with consistent spacing */
[data-side="left"] .mp-title { flex-direction:row-reverse; }
[data-side="left"] .mp-title .mp-arrow { order:0; margin-right:8px; margin-left:0; }
[data-side="right"] .mp-title .mp-arrow { margin-left:6px; }
/* Pivot directions differ by side */
.cmp-side-panel { --collapsed-tab-width:46px; }
/* Offset for top-aligned collapsed titles (shared by both panels) */
.cmp-side-panel { --collapsed-title-top-offset:78px; }
/* Collapsed state: turn header into a vertical rail filling panel height so we can center the rotated title
 * Removes brittle pixel margins and uses flexbox centering instead. */
.cmp-side-panel[data-collapsed="true"] { display:flex; }
.cmp-side-panel[data-collapsed="true"] > .mp-header {
  position:relative;
  width:var(--collapsed-tab-width);
  /* Fill remaining height of panel for large click target */
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column; /* ensures vertical centering before rotation */
  margin:0; padding:4px 0; /* override earlier expanded header spacing */
}
.cmp-side-panel[data-collapsed="true"] > .mp-header .mp-title {
  margin:0;
  display:inline-block;
  white-space:nowrap;
  transform-origin:center; /* default; overridden per-side below */
}
/* Left panel (Power Cards): mirror Monsters panel but in reverse -> rotate +90deg when collapsed */
.cmp-side-panel[data-side="left"] > .mp-header .mp-title { transform-origin:left center; }
.cmp-side-panel[data-side="left"][data-collapsed="true"] > .mp-header .mp-title { transform:rotate(90deg) translateX(-76px) translateY(-20px); }
/* Right panel (Monsters): collapse rotates -90deg */
.cmp-side-panel[data-side="right"][data-collapsed="true"] > .mp-header .mp-title { transform:rotate(-90deg); }
/* Top alignment for both panels when collapsed (consistent vertical placement) */
.cmp-side-panel[data-side="right"][data-collapsed="true"] > .mp-header {
  justify-content:flex-start; padding-top:var(--collapsed-title-top-offset);
}
.cmp-side-panel[data-side="left"][data-collapsed="true"] > .mp-header { justify-content:flex-start; padding-top:var(--collapsed-title-top-offset); }
/* Adjust transform-origin so rotation does not clip when top-aligned */
.cmp-side-panel[data-side="right"][data-collapsed="true"] > .mp-header .mp-title { transform-origin:top center; }
/* Maintain reduced motion handling only for left panel animations */
@media (prefers-reduced-motion: reduce) { .cmp-side-panel[data-side="left"] > .mp-header .mp-title { transition:none; } }
/* Remove arrow counter-rotation scaling increase; keep size but center horizontally after rotation */
.cmp-side-panel[data-collapsed="true"] .mp-header { /* overrides moved above for collapsed rail */ box-shadow:none; background:transparent; border:0; width:var(--collapsed-tab-width); }

/* Horizontal slide + header pivot (RIGHT PANEL) */
/* (Removed panel-specific collapse block; now handled by .cmp-side-panel generic rules) */

/* Expand hit target for headers (unified) */
.cmp-side-panel .mp-header { padding:6px 8px; margin:-6px -8px 8px; cursor:pointer; }
.cmp-monsters-panel > .mp-header.mp-header { border-bottom:0; padding-bottom:4px; }
/* Remove bottom border for Power Cards side panel header as well */

/* Keep body hidden when collapsed (already handled above but ensure consistency) */
[data-collapsed="true"] > .k-panel__body { display:none; }

/* Monsters panel overrides */
/* Monsters panel now uses same visual treatment as power cards panel */
.cmp-monsters-panel.k-panel { background:linear-gradient(180deg,#30353a,#1d1f21); border-color:#222; box-shadow:2px 2px 0 #000,0 0 0 1px #222 inset; }
.cmp-monsters-panel .mp-title { font-size:24px; color:#ffd400; display:flex; flex-direction:row; align-items:center; gap:8px; }
.cmp-monsters-panel .mp-player-cards { font-family:system-ui,sans-serif; }

/* Power Cards panel overrides (restored after card-shop removal) */
.cmp-power-cards-panel > .mp-header.mp-header { border-bottom:0; padding-bottom:4px; justify-content:flex-end; }
.cmp-power-cards-panel .mp-title { font-size:24px; color:#ffd400; display:flex; flex-direction:row; align-items:center; gap:8px; }
/* Restore larger arrow glyph size for Power Cards (avoid generic 14px shrink) */
.cmp-power-cards-panel .mp-arrow { font-size:24px; }
/* Lighten background similar to monsters panel for parity */
.cmp-power-cards-panel.k-panel { background:linear-gradient(180deg,#30353a,#1d1f21); border-color:#222; box-shadow:2px 2px 0 #000,0 0 0 1px #222 inset; }

/* Full-height side panels with scrolling */
/* Monsters panel: no interior scroll; allow outer layout to handle overflow */
[data-gl-right] .cmp-monsters-panel { max-height:none; height:auto; overflow:visible; }

/* Generic collapse handling */
[data-collapsed="true"] > .k-panel__body { display:none; }
/* Collapsed panels always clickable */
.cmp-side-panel[data-collapsed="true"] { cursor:pointer; }

/* Arrow orientation logic (glyph swapping only; no rotation) */
.cmp-side-panel .mp-arrow { display:inline-block; font-size:14px; line-height:1; }

/* (Old arrow rotation block replaced above with subtle 12deg tilt) */

/* Rotation parity: both panels now share rotate(-90deg) collapsed behavior */

/* Collapsed panels now both use top alignment (overrides earlier center rule) */
.cmp-side-panel[data-side="left"][data-collapsed="true"] > .mp-header { align-items:flex-start; }
.cmp-side-panel[data-side="left"][data-collapsed="true"] > .mp-header .mp-title { display:inline-block; font-size:22px; opacity:1; }
.cmp-side-panel[data-side="left"] > .mp-header .mp-title { opacity:1; }

/* Legacy mode: disable new animation for Power Cards to preserve historical look */
/* (Removed legacy panels mode overrides) */

/* ------------------------------------------------------------
 * LEGACY MODE (testing): Reapply original fixed geometric rules
 * Activate by setting <body data-legacy-panels="true"> (toggled via Action Menu button)
 * Mirrors legacy/layout.css behavior:
 *  - Collapsed width: 60px
 *  - Power Cards (left): rotate(90deg) translateX(30px); margin-top:20px
 *  - Monsters (right): rotate(-90deg) translateX(-30px); margin-top:20px
 *  - transform-origin: center
 * NOTE: Overrides Approach A math & independent rotation when enabled.
 * ------------------------------------------------------------ */
/* (Legacy geometry definitions removed) */