/* Player screen styles. */

/* Shared portrait rig. Hat fit values are applied to this stable inner stage. */
.player-portrait-rig {
  position: absolute;
  left: 50%;
  bottom: 0;
  aspect-ratio: .76;
  transform: translateX(-50%);
  overflow: visible;
}

.player-rig-avatar,
.player-rig-hat {
  display: block;
  pointer-events: none;
  user-select: none;
}

.player-rig-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.player-rig-hat {
  position: absolute;
  z-index: 2;
  left: var(--hat-left, 50%);
  top: var(--hat-top, -10%);
  width: var(--hat-width, 103%);
  height: auto;
  transform: translateX(-50%);
  transform-origin: 50% 80%;
}

/* One continuous backdrop sits behind both transparent layers. */
.avatar-stack-small,
.starter-hat-preview,
.profile-portrait-frame {
  background: radial-gradient(circle at 50% 27%, #f9ebcf 0%, #f1d9ac 48%, #e6c58f 100%);
}

.avatar-stack-small {
  overflow: visible;
  isolation: isolate;
}

.avatar-stack-small .avatar-image {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70%;
  height: 92%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}

.avatar-stack-small .hat-image {
  left: var(--hat-left, 50%);
  top: calc(8% + var(--hat-top, -10%));
  width: var(--hat-width, 103%);
  transform: translateX(-50%) scale(.70);
  transform-origin: 50% 0;
}

/* Compact in-game profile portraits need extra headroom. Large profile previews keep the authored fit. */
#profile-button .avatar-stack-small .hat-image {
  top: calc(-2% + var(--hat-top, -10%));
  transform: translateX(-50%) scale(.62);
}

@media (max-width: 700px) {
  #profile-button .avatar-stack-small .hat-image {
    top: calc(-5% + var(--hat-top, -10%));
    transform: translateX(-50%) scale(.59);
  }
}

.avatar-stack-small::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}

/* Character creation */
.player-modal .modal-close {
  width: 40px;
  height: 40px;
}

.starter-hat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}

.starter-hat-choice {
  grid-template-rows: 118px auto;
  min-width: 0;
}

.starter-hat-preview {
  position: relative;
  display: block;
  width: min(100%, 126px);
  height: 118px;
  aspect-ratio: auto;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(120,75,39,.08);
}

.starter-hat-rig {
  width: 60px;
  bottom: 4px;
}

.starter-hat-text {
  align-content: start;
}

.starter-hat-text .hat-rarity {
  justify-self: center;
}

.hat-rarity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 19px;
  padding: 2px 7px;
  border: 1px solid rgba(94,67,45,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  font-size: .59rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .015em;
}

.rarity-common { color: #5d665f; }
.rarity-uncommon { color: #417a4d; }
.rarity-rare { color: #346a98; }
.rarity-epic { color: #7553a7; }
.rarity-legendary { color: #9a681d; }
.rarity-event { color: #9a4d67; }

.rarity-frame-common { border-color: #b7a98f !important; }
.rarity-frame-uncommon { border-color: #7ca685 !important; }
.rarity-frame-rare { border-color: #6b98bd !important; }
.rarity-frame-epic { border-color: #9b7bc1 !important; }
.rarity-frame-legendary { border-color: #c49b4f !important; }
.rarity-frame-event { border-color: #bb7890 !important; }

/* Profile and hat preview */
.player-profile-preview {
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.profile-portrait-frame {
  position: relative;
  display: block;
  width: 154px;
  height: 198px;
  overflow: hidden;
  border: 3px solid #c49452;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 5px 12px rgba(74,47,28,.14);
}

.profile-portrait-rig {
  width: 104px;
  bottom: 7px;
}

.profile-summary-details {
  display: grid;
  gap: 5px;
  text-align: left;
}

.profile-level-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.profile-level-line strong { font-size: 1.08rem; }
.profile-level-line span { font-size: .72rem; font-weight: 800; opacity: .72; }
.profile-summary-details .xp-progress { margin: 0; }

.profile-next-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(91,139,75,.11);
  border: 1px solid rgba(74,124,60,.16);
  font-size: .68rem;
}

.profile-next-reward strong { font-size: .72rem; color: #3d6d34; }

.profile-level-separation {
  margin: 2px 0 0;
  font-size: .68rem;
  line-height: 1.25;
  opacity: .76;
}

.profile-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 7px 0 8px;
}

.profile-kpi-card {
  min-width: 0;
  min-height: 78px;
  padding: 8px 9px;
  border: 1px solid rgba(111,65,35,.18);
  border-radius: 12px;
  background: rgba(255,248,229,.72);
  color: var(--ink);
  display: grid;
  align-content: start;
  gap: 2px;
  text-align: left;
  font: inherit;
}

button.profile-kpi-card { cursor: pointer; }
button.profile-kpi-card:hover,
button.profile-kpi-card:focus-visible { border-color: #4f83a7; outline: 2px solid rgba(79,131,167,.22); }
.profile-kpi-card small { font-size: .59rem; opacity: .65; }
.profile-kpi-card strong { font-size: .78rem; line-height: 1.1; }
.profile-kpi-card span { font-size: .61rem; line-height: 1.16; opacity: .76; }

.profile-help {
  border: 1px solid rgba(111,65,35,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.42);
  overflow: hidden;
}

.profile-help summary {
  min-height: 42px;
  padding: 9px 11px;
  cursor: pointer;
  font-weight: 900;
  font-size: .74rem;
}

.profile-help-body {
  padding: 0 11px 10px;
  font-size: .69rem;
  line-height: 1.3;
}
.profile-help-body p { margin: 4px 0; }

/* Inventory information architecture */
.player-inventory-v2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.player-inventory-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 1px 2px 2px;
}

.inventory-subfilters {
  display: flex;
  gap: 5px;
  margin: 1px 0 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.inventory-subfilters::-webkit-scrollbar { display: none; }

.inventory-filter {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid rgba(91,67,44,.24);
  border-radius: 10px;
  background: rgba(255,255,255,.52);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.inventory-filter small {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(56,82,91,.12);
  display: grid;
  place-items: center;
  font-size: .54rem;
}

.inventory-filter.is-active {
  color: white;
  background: #476f88;
  border-color: #365b72;
}
.inventory-filter.is-active small { background: rgba(255,255,255,.18); }

.inventory-item-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.inventory-item-card {
  min-width: 0;
  min-height: 126px;
  padding: 6px;
  border: 1px solid rgba(111,65,35,.2);
  border-radius: 12px;
  background: rgba(255,250,235,.72);
  color: var(--ink);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 3px;
  text-align: center;
  font: inherit;
  cursor: pointer;
}

.inventory-item-card:hover,
.inventory-item-card:focus-visible {
  border-color: #4c82a3;
  box-shadow: inset 0 0 0 1px rgba(76,130,163,.2);
  outline: none;
}

.inventory-item-card.is-special {
  background: linear-gradient(155deg, rgba(255,251,237,.92), rgba(241,232,247,.82));
}

.inventory-item-card .inventory-slot-visual {
  width: min(100%, 92px);
  margin: 0;
}

.inventory-item-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}
.inventory-item-copy strong {
  min-width: 0;
  font-size: .66rem;
  line-height: 1.06;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-item-copy small { font-size: .55rem; opacity: .64; }

.inventory-fallback-icon {
  display: grid;
  place-items: center;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(78,94,97,.14);
  font-weight: 900;
  font-size: 1.1rem;
}

.inventory-zero-state {
  min-height: 150px;
  padding: 18px;
  border: 1px dashed rgba(111,65,35,.25);
  border-radius: 14px;
  background: rgba(255,255,255,.35);
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
}
.inventory-zero-state strong { font-size: .86rem; }
.inventory-zero-state span { max-width: 460px; font-size: .7rem; line-height: 1.3; opacity: .7; }

/* Item inspector */
.item-inspector-modal { overflow: auto !important; }
.item-inspector-hero {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 4px 0 10px;
}
.item-inspector-hero .inventory-slot-visual { width: 112px; }
.item-inspector-hero > div:last-child { display: grid; gap: 6px; justify-items: start; }
.item-inspector-hero > div:last-child strong { font-size: .9rem; }
.item-kind-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(70,112,136,.12);
  color: #3f6c85;
  font-size: .62rem;
  font-weight: 900;
}
.item-inspector-grid {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 8px;
}
.item-info-block {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(111,65,35,.17);
  border-radius: 12px;
  background: rgba(255,255,255,.42);
}
.item-info-block h3 { margin: 0 0 6px; font-size: .8rem; }
.item-info-block ul { margin: 0; padding-left: 17px; font-size: .68rem; line-height: 1.3; }
.item-info-block li + li { margin-top: 5px; }
.item-info-note { margin: 0; font-size: .68rem; line-height: 1.3; opacity: .72; }
.item-use-list { display: grid; gap: 5px; }
.item-use-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 7px;
  border-radius: 9px;
  background: rgba(92,74,51,.055);
}
.item-use-row > div { min-width: 0; display: grid; gap: 1px; }
.item-use-row strong { font-size: .69rem; }
.item-use-row small { font-size: .57rem; opacity: .66; }
.item-use-row > span { max-width: 150px; text-align: right; font-size: .57rem; font-weight: 900; opacity: .72; }
.item-use-row.is-ready { background: rgba(80,139,65,.1); }
.item-use-row.is-ready > span { color: #3f7937; opacity: 1; }
.current-order-uses {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(111,65,35,.12);
  font-size: .61rem;
}
.current-order-uses strong { font-size: .65rem; }

/* Booster inventory */
.booster-active-banner {
  min-height: 42px;
  margin: 1px 0 7px;
  padding: 7px 10px;
  border: 1px solid rgba(78,131,68,.22);
  border-radius: 11px;
  background: rgba(76,139,67,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .68rem;
}
.booster-active-banner strong { color: #3d7436; }
.booster-active-banner span { font-weight: 800; }

.booster-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.booster-detail-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(111,65,35,.19);
  border-radius: 12px;
  background: rgba(255,250,235,.76);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
}
.booster-detail-card.is-active { border-color: rgba(73,132,63,.52); box-shadow: inset 0 0 0 1px rgba(73,132,63,.12); }
.booster-detail-head { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 7px; align-items: center; }
.booster-detail-head .inventory-slot-visual { width: 66px; }
.booster-detail-head > div { min-width: 0; display: grid; gap: 2px; }
.booster-detail-head strong { font-size: .75rem; line-height: 1.08; }
.booster-detail-head span { font-size: .58rem; font-weight: 800; opacity: .68; }
.booster-detail-card p { margin: 0; font-size: .64rem; line-height: 1.25; }
.booster-detail-card > small { font-size: .55rem; line-height: 1.2; opacity: .62; }
.booster-detail-card .ef-button { width: 100%; min-height: 40px; }
.booster-detail-card .ef-button:disabled { opacity: .52; filter: saturate(.6); }

/* Hat collection */
.hat-collection-summary {
  min-height: 42px;
  margin: 1px 0 7px;
  padding: 5px 8px;
  border-radius: 11px;
  background: rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hat-collection-summary > div { display: flex; align-items: baseline; gap: 6px; }
.hat-collection-summary strong { font-size: .9rem; }
.hat-collection-summary span,
.hat-collection-summary small { font-size: .6rem; opacity: .68; }

.hat-collection-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.hat-collection-card {
  min-width: 0;
  min-height: 118px;
  padding: 5px;
  border: 2px solid rgba(111,65,35,.2);
  border-radius: 11px;
  background: rgba(255,249,232,.75);
  color: var(--ink);
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 2px;
  place-items: center;
  text-align: center;
  font: inherit;
  cursor: pointer;
}
.hat-collection-card:hover,
.hat-collection-card:focus-visible { outline: 2px solid rgba(70,119,151,.28); outline-offset: 1px; }
.hat-collection-card.is-locked { filter: saturate(.62); opacity: .7; }
.hat-collection-card.is-equipped { box-shadow: inset 0 0 0 2px rgba(230,182,52,.4); }
.hat-collection-card .inventory-slot-visual { width: min(100%, 70px); margin: 0; }
.hat-collection-copy { min-width: 0; width: 100%; display: grid; justify-items: center; gap: 1px; }
.hat-collection-copy strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .56rem;
}
.hat-collection-copy .hat-rarity { min-height: 16px; padding: 1px 5px; font-size: .46rem; }
.hat-collection-copy small { font-size: .48rem; opacity: .68; }

.hat-inspector-layout {
  display: grid;
  grid-template-columns: 154px minmax(0,1fr);
  gap: 15px;
  align-items: center;
}
.hat-inspector-frame { width: 154px; height: 198px; }
.hat-inspector-copy { min-width: 0; display: grid; gap: 7px; align-content: center; }
.hat-inspector-copy > strong { font-size: .82rem; }
.hat-inspector-copy > p { margin: 0; font-size: .76rem; line-height: 1.3; }
.hat-inspector-copy .ef-button { width: min(100%, 230px); min-height: 42px; }
.hat-compare-box {
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(64,95,115,.08);
  display: grid;
  gap: 2px;
}
.hat-compare-box small { font-size: .56rem; opacity: .62; }
.hat-compare-box strong { font-size: .7rem; }
.hat-compare-box span { font-size: .61rem; line-height: 1.2; opacity: .72; }
.hat-locked-note { font-size: .62rem; line-height: 1.25; opacity: .68; }

@media (max-width: 900px) {
  .inventory-item-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hat-collection-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .booster-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .player-modal .modal-close { width: 38px; height: 38px; }

  .starter-hat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(145px, 1fr);
    height: min(58dvh, 476px);
    overflow-y: auto;
  }
  .starter-hat-choice { grid-template-rows: minmax(0,1fr) auto; padding: 5px; }
  .starter-hat-preview { width: min(100%, 112px); height: 100%; min-height: 82px; }
  .starter-hat-rig { width: 50px; bottom: 3px; }
  .starter-hat-text strong { font-size: .72rem; }
  .starter-hat-text small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .57rem;
    line-height: 1.08;
  }
  .starter-hat-text .hat-rarity { min-height: 16px; padding: 1px 5px; font-size: .48rem; }

  .player-profile-preview {
    grid-template-columns: 126px minmax(0,1fr);
    gap: 10px;
    text-align: left;
  }
  .profile-portrait-frame { width: 126px; height: 164px; justify-self: center; }
  .profile-portrait-rig { width: 84px; bottom: 5px; }
  .profile-level-line { display: grid; gap: 1px; }
  .profile-level-line strong { font-size: .92rem; }
  .profile-level-line span { font-size: .62rem; }
  .profile-next-reward { display: grid; gap: 1px; padding: 6px 7px; }
  .profile-level-separation { font-size: .6rem; }
  .profile-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
  .profile-kpi-card { min-height: 72px; padding: 6px; }
  .profile-kpi-card small { font-size: .5rem; }
  .profile-kpi-card strong { font-size: .64rem; }
  .profile-kpi-card span { font-size: .5rem; }
  .profile-help summary { min-height: 40px; padding: 7px 9px; font-size: .65rem; }
  .profile-help-body { padding: 0 9px 8px; font-size: .6rem; }

  .player-inventory-v2 .inventory-tabs { gap: 4px; margin: 4px 0; }
  .player-inventory-v2 .inventory-tab { min-height: 40px; padding: 5px 3px; font-size: .65rem; }
  .player-inventory-v2 .inventory-tab small { min-width: 19px; width: 19px; height: 19px; font-size: .53rem; }
  .inventory-filter { min-height: 36px; padding: 4px 8px; font-size: .62rem; }
  .inventory-item-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .inventory-item-card { min-height: 105px; padding: 4px; border-radius: 9px; }
  .inventory-item-card .inventory-slot-visual { width: min(100%, 78px); }
  .inventory-item-copy strong { font-size: .58rem; }
  .inventory-item-copy small { font-size: .49rem; }
  .inventory-zero-state { min-height: 120px; padding: 12px; }
  .inventory-zero-state strong { font-size: .74rem; }
  .inventory-zero-state span { font-size: .61rem; }

  .booster-detail-grid { grid-template-columns: 1fr; gap: 5px; }
  .booster-detail-card { grid-template-columns: minmax(0,1fr) 104px; grid-template-rows: auto auto auto; gap: 4px 7px; padding: 6px; }
  .booster-detail-head { grid-column: 1; grid-row: 1; grid-template-columns: 54px minmax(0,1fr); }
  .booster-detail-head .inventory-slot-visual { width: 54px; }
  .booster-detail-card p { grid-column: 1; grid-row: 2; font-size: .57rem; }
  .booster-detail-card > small { grid-column: 1; grid-row: 3; font-size: .49rem; }
  .booster-detail-card .ef-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; min-height: 44px; padding-inline: 8px; font-size: .57rem; }
  .booster-active-banner { min-height: 38px; margin-bottom: 5px; padding: 5px 7px; font-size: .59rem; }

  .hat-collection-summary { min-height: 38px; margin-bottom: 5px; padding: 4px 6px; }
  .hat-collection-summary small { display: none; }
  .hat-collection-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
  .hat-collection-card { min-height: 94px; padding: 3px; border-radius: 8px; }
  .hat-collection-card .inventory-slot-visual { width: min(100%, 58px); }
  .hat-collection-copy strong { font-size: .48rem; }
  .hat-collection-copy .hat-rarity { font-size: .41rem; }
  .hat-collection-copy small { font-size: .42rem; }

  .item-inspector-hero { grid-template-columns: 88px minmax(0,1fr); gap: 9px; padding-bottom: 7px; }
  .item-inspector-hero .inventory-slot-visual { width: 88px; }
  .item-inspector-grid { grid-template-columns: 1fr; gap: 6px; }
  .item-info-block { padding: 7px 8px; }
  .item-info-block h3 { font-size: .72rem; }
  .item-info-block ul, .item-info-note { font-size: .61rem; }
  .item-use-row strong { font-size: .62rem; }
  .item-use-row small, .item-use-row > span { font-size: .52rem; }

  .hat-inspector-layout { grid-template-columns: 126px minmax(0,1fr); gap: 10px; }
  .hat-inspector-frame { width: 126px; height: 164px; }
  .hat-inspector-copy > p { font-size: .66rem; }
  .hat-compare-box span { font-size: .55rem; }
}

@media (max-width: 360px) {
  .player-profile-preview { grid-template-columns: 106px minmax(0,1fr); gap: 8px; }
  .profile-portrait-frame { width: 106px; height: 140px; }
  .profile-portrait-rig { width: 72px; bottom: 4px; }
  .profile-level-line strong { font-size: .82rem; }
  .profile-summary-details .xp-progress { width: min(100%, 205px); }
  .profile-next-reward { font-size: .58rem; }
  .profile-next-reward strong { font-size: .6rem; }
  .profile-level-separation { font-size: .54rem; }

  .player-inventory-v2 .inventory-tab { min-height: 38px; font-size: .59rem; }
  .inventory-subfilters { gap: 3px; margin-bottom: 4px; }
  .inventory-filter { min-height: 34px; padding: 3px 6px; font-size: .56rem; }
  .inventory-filter small { min-width: 16px; height: 16px; font-size: .47rem; }
  .inventory-item-card { min-height: 96px; }
  .inventory-item-card .inventory-slot-visual { width: min(100%, 70px); }
  .inventory-item-copy strong { font-size: .52rem; }
  .inventory-item-copy small { font-size: .44rem; }
  .hat-collection-card { min-height: 86px; }
  .hat-collection-card .inventory-slot-visual { width: min(100%, 52px); }
  .profile-kpi-card { padding: 4px; }
  .profile-kpi-card span { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .player-modal { overflow: auto !important; }
  .starter-hat-grid {
    grid-template-columns: repeat(auto-fit, minmax(116px,1fr));
    grid-template-rows: minmax(0,1fr);
    grid-auto-rows: minmax(0,1fr);
    height: min(55dvh, 205px);
  }
  .starter-hat-choice { grid-template-rows: minmax(0,1fr) auto; }
  .starter-hat-preview { min-height: 70px; }
  .starter-hat-rig { width: 44px; }
  .starter-hat-text small { -webkit-line-clamp: 1; }

  .player-profile-preview { grid-template-columns: 104px minmax(0,1fr); gap: 8px; }
  .profile-portrait-frame { width: 104px; height: 132px; }
  .profile-portrait-rig { width: 68px; bottom: 3px; }
  .profile-summary-details { gap: 2px; }
  .profile-level-line strong { font-size: .78rem; }
  .profile-level-line span { font-size: .53rem; }
  .profile-next-reward { padding: 4px 6px; }
  .profile-level-separation { display: none; }
  .profile-kpi-grid { margin: 4px 0; }
  .profile-kpi-card { min-height: 54px; padding: 4px 5px; }
  .profile-kpi-card span { display: none; }
  .profile-help summary { min-height: 32px; padding: 5px 7px; }

  .player-inventory-v2 .compact-screen-header { min-height: 24px; }
  .player-inventory-v2 .inventory-tabs { margin: 2px 0; }
  .player-inventory-v2 .inventory-tab { min-height: 32px; padding-block: 2px; }
  .inventory-subfilters { margin-bottom: 3px; }
  .inventory-filter { min-height: 30px; padding-block: 2px; }
  .inventory-item-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 3px; }
  .inventory-item-card { min-height: 0; height: 100%; padding: 2px; }
  .inventory-item-card .inventory-slot-visual { width: min(100%, 64px); }
  .inventory-item-copy strong { font-size: .46rem; }
  .inventory-item-copy small { display: none; }
  .booster-detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); height: 100%; }
  .booster-detail-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 4px; }
  .booster-detail-head { grid-column: 1; grid-row: 1; grid-template-columns: 42px minmax(0,1fr); }
  .booster-detail-head .inventory-slot-visual { width: 42px; }
  .booster-detail-card p { grid-column: 1; grid-row: 2; font-size: .49rem; }
  .booster-detail-card > small { display: none; }
  .booster-detail-card .ef-button { grid-column: 1; grid-row: 3; min-height: 31px; font-size: .49rem; }
  .booster-active-banner { min-height: 30px; margin-bottom: 3px; padding: 3px 6px; }
  .hat-collection-summary { min-height: 30px; margin-bottom: 3px; }
  .hat-collection-grid { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 3px; }
  .hat-collection-card { min-height: 0; height: 100%; padding: 2px; }
  .hat-collection-card .inventory-slot-visual { width: min(100%, 52px); }
  .hat-collection-copy strong { font-size: .42rem; }
  .hat-collection-copy .hat-rarity,
  .hat-collection-copy small { display: none; }

  .item-inspector-hero { grid-template-columns: 72px minmax(0,1fr); padding: 0 0 5px; }
  .item-inspector-hero .inventory-slot-visual { width: 72px; }
  .item-inspector-grid { grid-template-columns: .85fr 1.15fr; }
  .item-info-block { padding: 5px 6px; }

  .hat-inspector-layout { grid-template-columns: 100px minmax(0,1fr); gap: 8px; }
  .hat-inspector-frame { width: 100px; height: 128px; }
  .hat-inspector-frame .profile-portrait-rig { width: 66px; }
}

.item-content-description {
  display: block;
  margin-top: 4px;
  max-width: 44ch;
  font-size: .74rem;
  line-height: 1.25;
  opacity: .74;
}

/* Endgame coin sink: premium boosters purchased only with earned coins. */
.coin-booster-shop {
  margin-top: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(111,78,35,.18);
  background: rgba(255,247,222,.76);
}
.coin-booster-shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.coin-booster-shop-head h3 { margin: 0; }
.coin-booster-shop-head > span { flex: 0 0 auto; font-weight: 900; }
.coin-booster-shop > p { margin: 0 0 8px; font-size: .76rem; opacity: .76; }
.coin-booster-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}
.coin-booster-offer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "copy button" "grants button";
  gap: 3px 8px;
  align-items: center;
  padding: 8px;
  border-radius: 13px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(111,78,35,.12);
}
.coin-booster-offer > div { grid-area: copy; min-width: 0; }
.coin-booster-offer > div strong,
.coin-booster-offer > div small { display: block; }
.coin-booster-offer > span { grid-area: grants; min-width: 0; font-size: .68rem; opacity: .72; }
.coin-booster-offer .ef-button { grid-area: button; width: 138px; }

@media (max-width: 720px) {
  .coin-booster-shop { margin-top: 6px; padding: 6px; }
  .coin-booster-shop-head { align-items: center; }
  .coin-booster-shop-head h3 { font-size: .78rem; }
  .coin-booster-shop-head > span { font-size: .58rem; }
  .coin-booster-shop > p { font-size: .56rem; margin-bottom: 5px; }
  .coin-booster-offers { grid-template-columns: 1fr; gap: 4px; }
  .coin-booster-offer { padding: 5px 6px; }
  .coin-booster-offer > div strong { font-size: .62rem; }
  .coin-booster-offer > div small,
  .coin-booster-offer > span { font-size: .5rem; }
  .coin-booster-offer .ef-button { width: 112px; font-size: .54rem; }
}