.lobby-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

.lobby-actions button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  height: 66px;
  padding: 10px 16px;
  border: 1px solid #465970;
  border-radius: 18px;
  color: white;
  background: #263447;
  text-align: left;
  font-weight: 1000;
}

.lobby-actions button > span:nth-child(2) { display: block; flex: 1; }
.lobby-actions button b,
.lobby-actions button small { display: block; }
.lobby-actions button small { margin-top: 3px; color: #9eafc4; font-size: .68rem; font-weight: 700; }
.lobby-actions button em { color: #9eafc4; font-size: .65rem; font-style: normal; }
.action-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: #35475d; font-size: 1.2rem; }
.lobby-actions .play-button { border-color: var(--lime); color: #14200c; background: var(--lime); box-shadow: 0 9px 25px #9fd23538; }
.play-button .action-icon { color: var(--lime); background: #17260f; }
.play-button small,
.play-button em { color: #344c22 !important; }
.weapon-icon { font-size: 1.45rem; }

.weapon-options { display: grid; gap: 8px; margin-top: 18px; }
.weapon-option { display: grid; grid-template-columns: 48px 1fr; gap: 3px 12px; width: 100%; padding: 12px; border: 3px solid #52657b; border-radius: 14px; color: white; background: #202c3d; text-align: left; }
.weapon-option > span { grid-row: 1 / 3; display: grid; place-items: center; font-size: 1.7rem; }
.weapon-option small { color: #aebaca; }
.weapon-option:disabled { opacity: .38; }
.modal-action { display: grid; place-items: center; width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 15px; color: #14200c; background: var(--lime); font-weight: 1000; text-decoration: none; }

.augment-card {
  color: #f2f4f7;
  background: #25282e;
  border-color: #8fa7bb;
}

.augment-card p { color: #adb3bc; }
.augment-card .augment-art { border-color: #8fa7bb; color: #b9dcf5; background: #25282e; }
.augment-card small { color: #b9dcf5; }
.augment-card.awakening { border-color: #ef334d; background: #321821; box-shadow: 0 0 24px #ef334d66; }
.augment-card.awakening .augment-art { border-color: #ef334d; color: #ff405b; background: #4a1823; }
.augment-card.awakening small, .augment-card.awakening strong { color: #ff5269; }

.pause-card {
  width: min(390px, 100%);
  padding: 34px 26px 26px;
  border: 1px solid #40516a;
  border-radius: 28px;
  background: #151e2c;
  box-shadow: 0 30px 80px #000b;
  text-align: center;
}

.pause-card > small { color: #9cadc2; font-weight: 900; letter-spacing: .18em; }
.pause-card h2 { margin: 8px 0 4px; font-size: 2rem; }
.pause-card p { margin: 0 0 24px; color: #96a5b8; }
.pause-card button { width: 100%; height: 56px; margin-top: 10px; border: 0; border-radius: 17px; font-weight: 1000; }
.pause-card .restart-button { color: #17200e; background: var(--lime); }
.pause-card .quit-button { color: white; background: #a23c49; }

.augment-inventory-wrap {
  position: absolute;
  top: calc(102px + env(safe-area-inset-top));
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateX(-50%);
  padding: 6px 8px;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  background: #101722b8;
}

.inventory-row { display: flex; align-items: center; gap: 7px; }
.inventory-row > div:first-child { min-width: 36px; color: #aebaca; text-align: center; }
.inventory-row small,
.inventory-row > div:first-child b { display: block; font-size: .55rem; }
.augment-inventory { display: flex; gap: 4px; }
.augment-slot { position: relative; display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid; border-radius: 9px; color: #cbd2d9; background: #25282e; font-size: 1rem; }
.augment-slot.owned { border-color: #8fa7bb; color: #b9dcf5; }
.augment-slot.empty { border-color: #586372; color: #687484; }
.augment-slot b { position: absolute; right: -3px; bottom: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: white; background: #111923; font-size: .55rem; }
.boss-bar { top: calc(198px + env(safe-area-inset-top)); }

.modal-card { max-width: 540px; max-height: calc(100dvh - 32px); padding: 30px 20px 22px; scrollbar-width: thin; }
.modal-card h2 { margin: 10px 0; }
.modal-card p { color: #aebaca; font-size: .82rem; line-height: 1.6; }
.panel-eyebrow { display: block; color: #9eafc4; letter-spacing: .14em; font-size: .65rem; }
.equipment-stage { display: grid; grid-template-columns: minmax(76px,1fr) minmax(86px,1.4fr); align-items: center; gap: 10px; margin: 24px 0; padding: 18px 10px; border-radius: 20px; background: radial-gradient(ellipse at center,#36516a,#101a28 75%); }
.equipment-slot { width: 100%; padding: 12px 4px; border: 3px solid #52657b; border-radius: 12px; color: #edf4ff; background: #1e2c3d; }
.equipment-slot span { display: block; font-size: 1.8rem; margin-bottom: 8px; }
.equipment-slot b,.equipment-slot small { display: block; }
.equipment-slot b { font-size: .75rem; }
.equipment-slot small { margin-top: 5px; font-size: .6rem; color: #aebaca; }
.character-preview { display: grid; justify-items: center; gap: 22px; }
.character-preview > small { color: #b7c8da; }
.player-identity { display: grid; justify-items: center; gap: 3px; max-width: 128px; }
.player-id { max-width: 100%; overflow: hidden; color: #edf4ff; font-size: .76rem; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.equipment-title { max-width: 100%; font-size: .62rem; font-weight: 1000; line-height: 1.25; }
.equipment-title.empty { color: #8392a5 !important; -webkit-text-stroke: 0 !important; }
.gear-art { display: block; width: 100%; height: 48px; overflow: visible; }
.equipment-slot .gear-art { height: 38px; }
.detail-icon .gear-art { height: 70px; }
.survivor-avatar { display: block; width: 100%; min-width: 100px; height: 124px; overflow: visible; filter: drop-shadow(0 10px 12px #050d1877); }
.weapon-art { display: block; width: 100%; height: 100%; min-height: 32px; overflow: visible; }
.weapon-tile > span { display: block; height: 48px; padding: 4px; }
.equipment-slot > span { height: 46px; }
.weapon-hud > span { display: block; width: 64px; height: 38px; }
.detail-icon .weapon-art { height: 60px; }
.shop-product .weapon-preview .weapon-art { width: 110px; height: 70px; margin: auto; }
.weapon-collection { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.collection-tabs { display: flex; gap: 8px; margin-top: 20px; }
.collection-tabs button { flex: 1; min-height: 44px; border: 1px solid #52657b; border-radius: 12px; background: #202c3d; color: #aebaca; font-weight: 900; }
.collection-tabs button[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); background: #2b3928; }
.weapon-tile { position: relative; display: grid; gap: 7px; padding: 12px 3px; border: 3px solid #9eafc4; border-radius: 12px; background: #202c3d; color: white; }
.weapon-tile span { font-size: 2rem; }
.weapon-tile b { font-size: .72rem; }
.weapon-tile small,.weapon-tile em { font-size: .57rem; font-style: normal; }
.weapon-tile em { color: var(--lime); }
.weapon-tile.unowned { opacity: .5; }
.silver { border-color: #adbdcf; color: #d5e1ed; }
.gold { border-color: #e7c14b; color: #e7c14b; }
.prism { border-color: #dbaaff; color: #dbaaff; }
.detail-icon { width: 116px; margin: 20px auto 8px; padding: 14px; border: 3px solid; border-radius: 22px; font-size: 2.6rem; background: #202c3d; }
.upgrade-stats { display: grid; gap: 8px; padding: 18px; border-radius: 16px; background: #202c3d; }
.upgrade-stats span { color: var(--lime); }
.upgrade-stats small { color: #aebaca; }
.equipment-note { font-size: .7rem !important; }
.equipment-message:empty { display: none; }
.equipment-message { color: var(--lime) !important; }
.text-button { display: block; margin-bottom: 18px; border: 0; background: none; color: #aebaca; cursor: pointer; }
.modal-action:disabled { opacity: .45; cursor: not-allowed; }
.secondary-action { background: #35475d; color: white; }
.shop-scroll { max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 8px; scrollbar-width: thin; }
.shop-product { padding: 16px; margin-bottom: 14px; border: 1px solid #52657b; border-radius: 20px; background: #202c3d; }
.shop-product h3 { margin: 8px 0; }
.shop-product .weapon-preview { font-size: 3rem; }
.rarity-rates { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .7rem; }
.coming-soon { opacity: .65; }
.weapon-hud { width: 116px; height: auto; min-height: 78px; padding: 10px 6px; border-radius: 18px; gap: 4px; }
.weapon-hud small { white-space: pre-line; text-align: center; line-height: 1.5; }
button:focus-visible,.shop-scroll:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* One logical 540 × 960 battlefield, uniformly scaled on every device. */
.game { background: #080d14; }
.game-frame { position: absolute; left: 50%; top: 50%; width: 540px; height: 960px; transform-origin: center; overflow: hidden; background: #18241d; touch-action: none; }
.game-frame .hud { top: 12px; }
.game-frame .augment-inventory-wrap { top: 80px; pointer-events: none; }
.game-frame .boss-bar { top: 176px; pointer-events: none; }
.game-frame .weapon-hud { right: 18px; bottom: 24px; pointer-events: none; }
.player-vitals { position: absolute; left: 50%; top: calc(50% + 37px); width: 104px; transform: translateX(-50%); pointer-events: none; }
.player-vitals .hp-wrap { position: relative; top: auto; left: auto; transform: none; width: 100%; gap: 0; }
.player-vitals .hp-wrap > span { display: none; }
.player-vitals .hp-wrap > i { width: 100%; height: 12px; border: 2px solid #080d14; background: #301d26; }
.player-vitals .hp-wrap > small { position: absolute; inset: 0; text-align: center; font-size: 8px; line-height: 12px; color: white; text-shadow: 0 1px 2px #000; }
.player-vitals .xp-track { position: relative; top: auto; left: auto; right: auto; height: 7px; margin-top: 3px; border: 2px solid #080d14; border-radius: 5px; overflow: hidden; background: #202d3e; }
.game-frame .joystick { display: block; left: 0; top: 0; bottom: auto; transform: translate(-50%,-50%); pointer-events: none; }

.augment-choices.boss-rewards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.boss-reward { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 190px; padding: 16px 10px; text-align: center; }
.boss-reward.face-down { color: #d9e3ee; background: repeating-linear-gradient(135deg,#25282e 0 12px,#2c3038 12px 24px); }
.boss-reward.selected { border-color: var(--lime); box-shadow: 0 0 0 2px #bbef5744; }
.boss-reward:disabled { cursor: default; opacity: 1; }
.boss-reward:hover { transform: none; }
.card-back-symbol { display: grid; place-items: center; width: 64px; height: 76px; margin-bottom: 12px; border: 2px solid #8fa7bb; border-radius: 16px; font-size: 2.5rem; }
.boss-reward .augment-art { margin: 0 auto 10px; flex-shrink: 0; }
.boss-reward p { margin-bottom: 8px; }
.reward-mark { margin-top: auto; padding-top: 8px; color: #9cadc2; font-size: .7rem; }
.boss-reward.selected .reward-mark { color: var(--lime); }
@media(max-width:680px) {
  .augment-choices.boss-rewards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .boss-reward { min-height: 165px; padding: 12px 8px; }
  .boss-reward strong { font-size: .9rem; }
  .boss-reward p { font-size: .68rem; }
}

.turret-art { display: block; width: 100%; height: 100%; }
.augment-slot .turret-art { width: 26px; height: 26px; }

.stage-sky.warrior-base{background:linear-gradient(#131d20 0 45%,#243b29 46%,#101e16)}.stage-sky.warrior-base i{background:#4f5b46;box-shadow:35px 6px 0 #303f32,-30px 12px 0 #384532}

.collection-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; color: #d4deeb; font-size: .9rem; }
.collection-heading::before,.collection-heading::after { content: ''; flex: 1; height: 1px; background: #52657b; }
.collection-heading:first-child { margin-top: 0; }
.collection-empty { grid-column: 1 / -1; margin: 0; padding: 12px 0; color: #aebaca; font-size: .8rem; text-align: center; }

.collection-viewport { width: 100%; min-width: 0; }