/*
 * Digital MechBook - Rookie Set phone presentation
 * 2026-08-18 v5
 * Loaded only by rookieset.php.
 * Desktop/tablet behavior is intentionally unchanged.
 */

.rookie-mobile-weapons,
.rookie-mobile-id-image-row,
.rookie-mobile-name {
  display: none;
}

.rookie-mobile-chassis-row {
  display: none;
}

.rookie-image-overlay {
  display: none;
}

/* Customer-facing Rookie Set: suppress old diagnostic/status text. */
.rookie-mobile-suppressed-status {
  display: none !important;
}

@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0 10px 18px;
  }

  /* Apply is not needed in the customer-facing phone control strip. */
  .rookie-mobile-apply-hidden,
  .rookie-mobile-apply-cell {
    display: none !important;
  }

  /* Navigation / record controls remain reachable while scrolling. */
  .rookie-mobile-sticky-controls {
    position: sticky;
    top: 52px;
    z-index: 900;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: #111;
    border-bottom: 1px solid #666;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  }

  .rookie-mobile-sticky-controls select,
  .rookie-mobile-sticky-controls button,
  .rookie-mobile-sticky-controls input,
  .rookie-mobile-sticky-controls label {
    box-sizing: border-box;
  }

  /* Four Rookie record controls must fit on one phone-width row. */
  .rookie-mobile-sticky-controls button,
  .rookie-mobile-sticky-controls input[type=button],
  .rookie-mobile-sticky-controls input[type=submit],
  .rookie-mobile-sticky-controls a {
    min-width: 0;
    min-height: 36px;
    padding: 4px 3px;
    font-size: clamp(0.68rem, 3.3vw, 0.82rem);
    line-height: 1.05;
    white-space: nowrap;
  }

  .rookie-mobile-record-controls {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .rookie-mobile-record-controls > *,
  .rookie-mobile-record-controls button,
  .rookie-mobile-record-controls input[type=button],
  .rookie-mobile-record-controls input[type=submit],
  .rookie-mobile-record-controls a {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Existing table controls may still be a table, but flatten them on phones. */
  .rookie-mobile-sticky-controls.control-table,
  .rookie-mobile-sticky-controls.control-table tbody,
  .rookie-mobile-sticky-controls.control-table tr,
  .rookie-mobile-sticky-controls.control-table td,
  .rookie-mobile-sticky-controls.control-table th {
    display: block;
    width: 100%;
  }

  .rookie-mobile-sticky-controls.control-table > tbody > tr:first-child {
    display: none;
  }

  .rookie-mobile-sticky-controls.control-table > tbody > tr:last-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .rookie-mobile-sticky-controls.control-table > tbody > tr:last-child > td {
    padding: 0;
  }

  .rookie-mobile-sticky-controls.control-table > tbody > tr:last-child > td:only-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .rookie-mobile-sticky-controls.control-table select,
  .rookie-mobile-sticky-controls.control-table button {
    width: 100%;
  }

  .rookie-mobile-sticky-controls .class-select-grid,
  .rookie-mobile-sticky-controls .class-select-grid tbody,
  .rookie-mobile-sticky-controls .class-select-grid tr {
    display: contents;
  }

  .rookie-mobile-sticky-controls .class-select-grid td {
    display: inline-block;
    width: auto;
    padding: 0 8px 0 0;
  }


  /* Chassis selector is the first sticky phone row, above record controls. */
  .rookie-mobile-chassis-row {
    position: sticky;
    top: 0;
    z-index: 901;
    display: block;
    width: calc(100% + 20px);
    max-width: none;
    height: 52px;
    margin: 0 -10px;
    padding: 6px 10px;
    box-sizing: border-box;
    background: #111;
  }

  .rookie-mobile-chassis-row select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 40px;
    height: 40px;
    margin: 0 !important;
    box-sizing: border-box;
    font-size: 1rem;
  }

  .rookie-mobile-chassis-label-hidden,
  .rookie-mobile-record-label-hidden {
    display: none !important;
  }

  /* Large, plain Mech name above the phone data. */
  .rookie-mobile-name {
    display: block;
    margin: 8px 0 10px;
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: 1;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  /* Image thumbnail and Mech ID share one line. */
  .rookie-mobile-id-image-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 10px;
  }

  .rookie-mobile-id-image-row .mech-id-card {
    width: 100%;
    max-width: none;
    min-height: 112px;
    aspect-ratio: auto;
  }

  .rookie-mobile-id-image-row .mech-id-card .mech-id-number {
    font-size: clamp(2.5rem, 15vw, 5.5rem) !important;
  }

  .rookie-mobile-image-button {
    display: block;
    width: 112px;
    min-height: 112px;
    padding: 0;
    border: 1px solid #666;
    background: #181818;
    cursor: zoom-in;
  }

  .rookie-mobile-image-button img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
  }

  /* Original image cell and original ID location are empty while moved. */
  .mech-meta .mech-image.rookie-mobile-source-empty {
    display: none;
  }

  /* General phone rule: data is stacked, not a compressed desktop table. */
  .mech-meta,
  .mech-meta > tbody,
  .mech-meta > tbody > tr,
  .mech-meta > tbody > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .mech-meta > tbody > tr > td {
    padding: 0;
    border: 0;
  }

  .mech-stats-container-cell {
    background: transparent !important;
  }

  .meta-row {
    display: block;
  }

  .mechdata,
  .mobility,
  .subsystems,
  .armordata {
    display: table;
    width: 100%;
    margin: 0 0 10px;
  }

  .mechdata th,
  .mobility th,
  .subsystems th {
    font-size: 1rem;
  }

  .mechdata td,
  .mobility td,
  .subsystems td,
  .armordata td {
    padding: 8px 7px;
  }

  /* Chassis is already called out in the large phone name. */
  .mechdata tr:has(#mech-chassis) {
    display: none;
  }

  /* Armor row becomes readable pairs instead of six squeezed cells. */
  .armordata tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .armordata td {
    display: block;
    min-width: 0;
  }

  /* Desktop three-column weapon table is replaced by the ordered phone list. */
  .mech-loadout {
    display: none !important;
  }

  .rookie-mobile-weapons {
    display: block;
    margin-top: 14px;
  }

  .rookie-mobile-weapons > h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
  }

  .rookie-mobile-weapon-group {
    margin: 0 0 10px;
    border: 1px solid #555;
    background: #181818;
  }

  .rookie-mobile-weapon-group[hidden] {
    display: none !important;
  }

  .rookie-mobile-weapon-group > h3 {
    margin: 0;
    padding: 7px 9px;
    background: #2a2a2a;
    border-bottom: 1px solid #555;
    font-size: 1rem;
  }

  .rookie-mobile-weapon-group ul {
    list-style: none;
    margin: 0;
    padding: 4px 8px;
  }

  .rookie-mobile-weapon-group .slot {
    display: block;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #333;
    background: transparent;
  }

  .rookie-mobile-weapon-group .slot:last-child {
    border-bottom: 0;
  }

  .rookie-mobile-weapon-group .slot-label {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
  }

  .rookie-mobile-weapon-group .slot-value {
    display: inline;
    padding: 0;
    text-align: left;
  }

  /* Full-screen image view. Second tap closes it. */
  .rookie-image-overlay.is-open {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.96);
    cursor: zoom-out;
  }

  .rookie-image-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  body.rookie-image-open {
    overflow: hidden;
  }

  .chassis-notes {
    margin-top: 10px;
  }
}

/* :has() fallback: the row remains visible on older browsers, without breaking layout. */