/* Full-screen gear collection. Kept under #menu.gear so the garage and perks UI stay untouched. */
#menu.gear { align-items: stretch; justify-content: stretch; padding: 0; background: #0d3542; }
#menu.gear #menu-card {
  width: 100%; height: 100%; max-height: 100%; border-radius: 0;
  background: linear-gradient(155deg, #19717a 0%, #115565 52%, #103f54 100%);
  color: #f8f5e8; box-shadow: none;
}
#menu.gear .menu-heading {
  flex: 0 0 auto; padding: 10px 14px 8px; background: #103f50;
  border-bottom: 1px solid #ffffff20; color: #fffdf1;
}
#menu.gear .menu-heading h2 { font-size: 18px; letter-spacing: .01em; }
#menu.gear #panel {
  flex: 1; padding: 12px 12px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #82bdc2 #155462;
}
#menu.gear #panel::-webkit-scrollbar { width: 7px; }
#menu.gear #panel::-webkit-scrollbar-thumb { background: #82bdc2; border-radius: 8px; }
.gear-page { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; }
.gear-page h3, .gear-page h4, .gear-page p { margin: 0; }
.gear-topline { display: flex; flex-direction: column; gap: 8px; }
.gear-eyebrow { display: block; color: #c5e4df; font-size: 9px; line-height: 1.2; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.gear-topline h3 { margin-top: 2px; font-size: 21px; line-height: 1.05; color: #fffdf1; }
.gear-collections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.gear-collection { min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; padding: 5px 7px; border: 1px solid #ffffff24; border-radius: 9px; background: #ffffff12; }
.gear-collection b { overflow: hidden; font-size: 15px; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.gear-collection span { margin-top: 2px; color: #c5e4df; font-size: 9px; line-height: 1; }

.gear-showcase {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(108px, 1.15fr) minmax(0, 1fr);
  align-items: center; gap: 5px; min-height: 208px; overflow: hidden; padding: 10px 8px 27px;
  border: 3px solid #ffffffb5; border-radius: 17px;
  background: radial-gradient(ellipse at 51% 37%, #b5e9e5 0%, #73c9cb 45%, #55aeb5 100%);
  box-shadow: 0 5px 0 #0a3d4b;
}
.gear-showcase::before { content: ''; position: absolute; width: 180px; height: 180px; left: 50%; top: 50%; transform: translate(-50%, -48%); border-radius: 50%; background: #ffffff36; }
.gear-slot-rail { z-index: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gear-slot-rail-right { justify-content: center; }
.gear-equipped-slot { min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 5px; padding: 5px 5px; border: 2px solid var(--rarity); border-radius: 10px; background: #fffdf2ed; color: #253b44; box-shadow: 0 3px 0 #124d5b55; }
.gear-equipped-slot.is-empty { border-style: dashed; background: #fffdf29c; }
.gear-equipped-art { flex: 0 0 33px; width: 33px; height: 33px; display: grid; place-items: center; }
.gear-equipped-art svg { display: block; width: 100%; height: 100%; }
.gear-equipped-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.gear-slot-name { color: #53717a; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gear-equipped-copy b { margin-top: 2px; overflow: hidden; font-size: 9px; line-height: 1.15; word-break: break-word; }
.gear-equipped-copy small { margin-top: 3px; color: #58717a; font-size: 8px; line-height: 1.05; }
.gear-player-art { z-index: 1; align-self: center; display: flex; justify-content: center; align-items: center; min-width: 0; height: 174px; }
.gear-player-art svg { display: block; width: min(100%, 145px); height: 100%; overflow: visible; filter: drop-shadow(0 7px 2px #124d5b44); }
.gear-showcase-label { position: absolute; inset: auto 8px 7px; display: flex; justify-content: center; align-items: baseline; gap: 6px; color: #194653; text-align: center; }
.gear-showcase-label b { font-size: 11px; }
.gear-showcase-label span { font-size: 9px; }

.gear-drop-banner { display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 7px 10px; border: 2px solid var(--rarity); border-radius: 12px; background: #fff9e7; color: #283943; box-shadow: 0 3px 0 #0b3e4b66; }
.gear-drop-art { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; }
.gear-drop-art svg { width: 100%; height: 100%; }
.gear-drop-banner > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.gear-drop-banner .gear-eyebrow { color: #a06a23; }
.gear-drop-banner b { font-size: 13px; }
.gear-drop-banner small { color: #5b7077; font-size: 10px; }

.gear-bonus-panel, .gear-toolbox-panel, .gear-inventory-section { padding: 11px; border-radius: 14px; background: #f8f4e7; color: #263c45; box-shadow: 0 4px 0 #0a3c4a88; }
.gear-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.gear-section-heading .gear-eyebrow { color: #47717a; }
.gear-section-heading h4 { margin-top: 1px; color: #1c3943; font-size: 16px; line-height: 1.05; }
.gear-bonus-count, .gear-toolbox-count, .gear-inventory-count { flex: 0 0 auto; padding: 5px 8px; border-radius: 20px; background: #d8ece5; color: #1c5963; font-size: 10px; font-weight: 900; }
.gear-bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.gear-bonus-stat { min-width: 0; display: flex; align-items: center; min-height: 32px; padding: 5px 7px; border-radius: 8px; background: #fffdf7; color: #2d4650; font-size: 10px; line-height: 1.15; font-weight: 700; }
.gear-bonus-stat .fam { flex: 0 0 8px; width: 8px; height: 8px; margin-right: 5px; }
.gear-empty-bonus { padding: 9px; border-radius: 8px; background: #fffdf7; color: #63777d; font-size: 11px; }
.gear-family-legend { display: flex; gap: 12px; margin-top: 8px; color: #536e75; font-size: 9px; font-weight: 700; }
.gear-family-legend span { display: inline-flex; align-items: center; gap: 4px; }
.gear-family-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--family); }

.gear-toolbox-panel { background: #fff8e9; order: 4; }
.gear-toolbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.gear-page .buy { min-width: 0; border: 2px solid #75d6f6; border-radius: 10px; background: var(--blue); color: white; box-shadow: 0 4px 0 var(--blue-dark); font-weight: 900; text-align: center; }
.gear-page .buy small { margin-top: 2px; font-size: 9px; line-height: 1.1; }
.gear-page .buy.no { background: #a3afb5; color: #eff2ed; box-shadow: 0 4px 0 #768991; }
.gear-page .gear-primary-action, .gear-page .gear-secondary-action { min-height: 48px; padding: 8px 5px; }
.gear-primary-action span, .gear-secondary-action span { display: block; font-size: 12px; }
.gear-page .gear-secondary-action { background: #559ab5; border-color: #9acbd9; box-shadow: 0 4px 0 #34768e; }
.gear-odds-heading { display: flex; justify-content: space-between; margin: 11px 1px 5px; color: #465d65; font-size: 10px; }
.gear-odds-heading span { color: #718187; }
.gear-rarity-odds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.gear-odds { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 5px 4px; border: 1px solid color-mix(in srgb, var(--rarity) 50%, white); border-radius: 7px; background: #fffdf8; }
.gear-odds i { display: block; height: 3px; margin-bottom: 2px; border-radius: 4px; background: var(--rarity); }
.gear-odds span { overflow: hidden; color: #536870; font-size: 8px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.gear-odds b { color: var(--rarity); font-size: 11px; line-height: 1; }

.gear-inventory-section { padding-bottom: 13px; order: 3; }
.gear-inventory-heading { margin-bottom: 7px; }
.gear-tabs { display: flex; gap: 5px; margin: 0 0 8px; padding: 3px; border-radius: 10px; background: #dce7e1; }
.gear-tabs button { flex: 1; min-width: 0; padding: 7px 3px; border: 0; border-radius: 7px; background: transparent; color: #4a6269; font-size: 10px; font-weight: 900; line-height: 1.1; }
.gear-tabs button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-dark); }
.inventory.gear-inventory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gear-card { min-width: 0; display: flex; flex-direction: column; padding: 8px; border: 2px solid var(--rarity); border-radius: 12px; background: #fffdf7; color: #273e48; box-shadow: 0 3px 0 color-mix(in srgb, var(--rarity) 40%, #315560); }
.gear-card-top { display: flex; justify-content: space-between; align-items: center; gap: 3px; min-height: 15px; }
.gear-rarity-label { overflow: hidden; color: var(--rarity); font-size: 9px; line-height: 1; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gear-card-slot, .gear-card .equipped-label { font-size: 8px; line-height: 1; font-weight: 900; text-transform: uppercase; }
.gear-card-slot { color: #667a80; }
.gear-card .equipped-label { color: #21784e; }
.gear-card-art { display: grid; place-items: center; height: 66px; margin: 3px 0; border-radius: 8px; background: color-mix(in srgb, var(--rarity) 12%, #f2f4eb); }
.gear-card-art svg { display: block; width: 59px; height: 59px; }
.gear-card-title { display: flex; flex-direction: column; gap: 2px; min-height: 34px; }
.gear-card-title b { color: #243c45; font-size: 11px; line-height: 1.13; }
.gear-card-title span { color: #60747a; font-size: 9px; line-height: 1; }
.gear-card-bonuses { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; color: #3f5860; font-size: 9px; line-height: 1.13; }
.gear-card-bonuses .fam { width: 7px; height: 7px; margin-right: 3px; vertical-align: middle; }
.gear-xp-row { display: flex; justify-content: space-between; gap: 3px; margin-top: auto; color: #62777d; font-size: 8px; line-height: 1; font-weight: 800; }
.gear-xp-track { height: 5px; margin: 4px 0 7px; overflow: hidden; border-radius: 5px; background: #dce5df; }
.gear-xp-track i { display: block; height: 100%; border-radius: inherit; background: var(--rarity); }
.gear-card-equipped-note { padding: 7px 3px 1px; color: #23754d; font-size: 9px; font-weight: 900; text-align: center; }
.gear-card-actions { display: flex; flex-direction: row; gap: 5px; margin-top: auto; }
.gear-page .gear-card-actions .buy { flex: 1; padding: 7px 3px; font-size: 10px; }
.gear-page .gear-card-actions .buy.alt { background: #4d8295; box-shadow: 0 3px 0 #335c70; }
.gear-page .gear-card-actions .buy:disabled { background: #b5c0bf; color: #edf0e7; box-shadow: 0 3px 0 #8c9d9e; cursor: not-allowed; }
.gear-empty-inventory { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 17px 10px; border: 2px dashed #aac0bc; border-radius: 11px; background: #fffdf7; color: #405a61; text-align: center; }
.gear-empty-mark { width: 42px; height: 42px; opacity: .75; }
.gear-empty-mark svg { width: 100%; height: 100%; }
.gear-empty-inventory b { font-size: 12px; }
.gear-empty-inventory p { color: #6b7d80; font-size: 10px; }
.gear-help { margin: 9px 1px 7px !important; color: #63777b; font-size: 10px; line-height: 1.35; }
.gear-page .gear-reset-action { padding: 7px 10px; border: 1px solid #d3a49c; background: #fff1e9; color: #a34c40; box-shadow: 0 3px 0 #dcbbb1; font-size: 10px; }

@media (min-width: 600px) {
  .gear-page { gap: 12px; }
  .gear-showcase { min-height: 246px; grid-template-columns: minmax(0, 1fr) minmax(150px, 1.15fr) minmax(0, 1fr); padding-left: 18px; padding-right: 18px; }
  .gear-player-art { height: 205px; }
  .gear-equipped-slot { min-height: 68px; gap: 8px; padding: 7px; }
  .gear-equipped-art { flex-basis: 42px; width: 42px; height: 42px; }
  .gear-equipped-copy b { font-size: 11px; }
  .gear-equipped-copy small { font-size: 9px; }
  .gear-card { padding: 11px; }
  .gear-card-art { height: 86px; }
  .gear-card-art svg { width: 76px; height: 76px; }
  .gear-card-title b { font-size: 13px; }
}

@media (max-width: 350px) {
  #menu.gear #panel { padding-right: 8px; padding-left: 8px; }
  .gear-collections { gap: 3px; }
  .gear-collection { padding-right: 4px; padding-left: 4px; }
  .gear-collection span { font-size: 8px; }
  .gear-showcase { grid-template-columns: minmax(0, 1fr) 1fr minmax(0, 1fr); gap: 3px; padding-right: 5px; padding-left: 5px; }
  .gear-equipped-slot { gap: 3px; padding: 4px 3px; }
  .gear-equipped-art { flex-basis: 27px; width: 27px; height: 27px; }
  .gear-equipped-copy b { font-size: 8px; }
  .gear-showcase-label span { display: none; }
  .gear-odds { padding-right: 2px; padding-left: 2px; }
  .gear-odds span { font-size: 7px; }
}