/* ======================================================
   mobile.css (Option A)
   Loads ONLY on screens <= 700px (via <link media>)
   Goal: make mobile layout independent from desktop changes.
   ====================================================== */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{ margin: 10px !important; }

/* Critical: prevents text from being squeezed into single-letter columns */
*{ min-width:0; }


/* Centers page info that's below the title*/
.wip-disclaimer {
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 20px auto; /* centers and adds spacing below */
    color: var(--hd-yellow); /* optional – matches your theme */
    font-size: 0.95rem;
}

/* ======================================================
   Sidebar/layout shell (injected by pages/_shared/sidebar.js)
   Ensure sidebar never steals width on mobile.
   ====================================================== */
.app-shell{
  display:block !important;     /* stop flex squeeze */
  width:100% !important;
}

.sidebar{
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 1050 !important;
  max-height: calc(100vh - 24px) !important;
  overflow: auto !important;
}

.sidebar-fab{
  display:block !important;     /* always show the button on mobile */
}

/* When collapsed, keep it fully off-canvas */
.sidebar.collapsed{
  transform: translateX(-120%) !important;
}

/* Content should always be full width */
#pageContent{
  width: 100% !important;
  max-width: 100% !important;
}

/* ======================================================
   Randomizer layout: keep 2 columns on mobile (matches the old look)
   ====================================================== */
.results.loadout-grid{
  display:flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  width:100% !important;
}

.loadout-left,
.loadout-right{
  flex: 1 1 0 !important;
  width:auto !important;
  min-width: 0 !important;
}

/* Panels spacing */
.loadout-group,
.loadout-right .slot-card{
  padding: 12px !important;
  gap: 12px !important;
}

    /* Mobile: make EQUIPMENT + STRATAGEMS headers identical */
    .loadout-left .group-title,
    .loadout-right .slot-card > strong {
        font-family: inherit;
        font-size: 1.05rem; /* adjust if you want slightly bigger/smaller */
        line-height: 1.15;
        font-weight: 600; /* not bold but still strong */
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }


/* If you want them NOT bold, use 600 or 500 instead:
   font-weight: 600 !important;  (or 500)
*/


/* Equipment & strat rows: icon above text */
.item-row,
.stratagem-list li{
  display:flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}

/* Slot cards: TOP-align content so headers don't "jump" when items load */
.loadout-group,
.loadout-right .slot-card{
  display:flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}



/* Text behavior (allow cards to grow instead of clipping) */
.item-name,
.stratagem-list span{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
  max-width: 100% !important;

  /* No clamping: let the card expand for long names */
  display: block !important;
  overflow: visible !important;

  /* Slightly responsive sizing to avoid overflow on tiny screens */
  font-size: clamp(12px, 3.4vw, 14px) !important;
}

/* Icon sizing */

.item-icon-large{
  width: 80px !important;
  height: 80px !important;
}

.stratagem-list .item-icon{
  width: 74px !important;
  height: 74px !important;
}

/* ======================================================
   Owned Items: keep cards readable on mobile
   ====================================================== */
.owned-columns{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.owned-grid{
  grid-template-columns: 1fr !important;
}

.owned-card,
.owned-item{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  height: auto !important;
}

.owned-icon,
.owned-item img,
.owned-item .item-icon{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.owned-name,
.owned-item .item-name,
.owned-item .label,
.owned-item .name{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.15 !important;
  font-size: 14px !important;
}

/* ======================================================
   Randomizer: ensure BOTH columns have the same large "panel" bubble.
   Equipment uses .loadout-group; Stratagems uses .loadout-right .slot-card.
   ====================================================== */
.loadout-group,
.loadout-right .slot-card{
  background: radial-gradient(circle at top left, #141b29, #0b0f17) !important;
  border: 1px solid rgba(180,200,235,0.18) !important;
  border-radius: 16px !important;
}


/* ======================================================
   Randomizer: make Equipment/Stratagem panels symmetrical
   and use available space for larger cards/icons
   ====================================================== */
.results.loadout-grid{
  align-items: stretch !important;
}

/* Left/right columns become flex containers */
.loadout-left,
.loadout-right{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* The big panel in each column should fill the column height */
.loadout-left .loadout-group{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.loadout-right .slot-card{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Stretch inner cards evenly */
.loadout-left .loadout-group .slot-card{
  flex: 1 1 0 !important;
}

.loadout-right .stratagem-list{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.loadout-right .stratagem-list li{
  flex: 1 1 0 !important;
  justify-content: center !important;
}

/* Slightly tighter vertical rhythm so everything fits without zoom */
.loadout-group,
.loadout-right .slot-card{
  padding: 12px !important;
}

.item-row,
.stratagem-list li{
  gap: 10px !important;
  color: var(--yellow);
}



/* Center Equipment / Stratagems headers on mobile */
.group-title{ text-align: center; 
    display: block;
    width: 100%;
}

/* ========================================================= */
/* FORCE STRATAGEMS HEADER CENTER (Mobile Only) */
/* ========================================================= */

.loadout-right .slot-card > strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Equipment only: make Primary / Secondary / Throwable white */
.loadout-left .slot-card > strong,
#equipmentColumn .slot-card > strong,
#equipment .slot-card > strong {
    color: #fff !important;
}