.upgrade-preview {
  margin: 9px 0;
  border: 1px solid #65587b;
  border-radius: 7px;
  background: #221f34;
  text-align: left;
  overflow-wrap: anywhere;
}
.upgrade-preview > summary {
  min-height: 48px;
  padding: 12px 9px;
  color: #b8f2d4;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}
.upgrade-preview[open] > summary {
  border-bottom: 1px solid #65587b;
}
.modal .upgrade-preview > p {
  margin: 9px;
  font-size: 11px;
  color: #e1d6ef;
}
.modal .upgrade-preview > p:last-child {
  color: #b5a8c7;
  font-size: 10px;
}
.modal summary:focus-visible,
.modal input:focus-visible {
  outline: 3px solid #b8f2d4;
  outline-offset: 3px;
}
.shop-offers .banish {
  border-color: #856776;
  color: #f0b6c5;
}
.shop-offers .card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-offers .card > .buy {
  min-height: 56px;
}
.level-choice > button {
  width: 100%;
}
.level-choice .upgrade-preview {
  margin-top: 5px;
}
.level-choices small {
  color: #bcead5;
  font-size: 11px;
  line-height: 1.6;
}
.modal .settings label:has(#runSeed) {
  display: grid;
  gap: 7px;
  align-items: start;
}
#runSeed {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid #756489;
  border-radius: 6px;
  background: #221f34;
  color: #f4e9ff;
  font: 16px monospace;
}
.summary-weapon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  margin: 14px 0;
  font-size: 12px;
}
.summary-weapon > b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f5dc93;
}
.summary-weapon > span {
  color: #d8cfe5;
}
.summary-weapon progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  accent-color: #9de9c4;
}
.summary-weapon progress::-webkit-progress-bar { background: #40364f; }
.summary-weapon progress::-webkit-progress-value { background: #9de9c4; }
.summary-weapon progress::-moz-progress-bar { background: #9de9c4; }
@media (max-width: 360px) {
  .shop-offers { grid-template-columns: minmax(0, 1fr); }
  .shop-offers .card { padding: 13px; }
  .modal .stat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .level-choices { margin: 12px 0; }
  .modal .level-choice > button,
  .modal .level-choices > button { min-height: 76px; }
}

/* Keep shopping decisions and their cost visible while the offers scroll. */
.shop-context { position:sticky;top:-29px;z-index:3;background:#29243d;padding:8px 0;border-bottom:1px solid #756483;margin-bottom:12px; }
.shop-context .shop-title h1 { margin:7px 0;font-size:30px; }
.modal .shop-loadout { margin:4px 0;line-height:1.4;font-size:13px;color:#e6dcf3;overflow-wrap:anywhere; }
.shop-offers .upgrade-preview>summary { font-size:12px;min-height:48px; }
.shop-offers .card>.buy { margin-top:10px;min-height:56px;font-size:13px; }
.shop-offers .card>.row { margin-top:8px; }
.shop-offers :is(.lock,.banish) { min-height:48px; }
@media(max-width:1000px),(pointer:coarse) {
  .shop-context { top:-18px; }
  .shop-context .shop-title h1 { font-size:25px; }
  .shop-context .shop-title>strong { font-size:25px; }
  .shop-offers { gap:12px; }
  .shop-offers .card>strong { font-size:16px; }
}
@media(max-width:430px) { .shop-offers { grid-template-columns:minmax(0,1fr); } }

.workshop-start { padding: 8px 4px 12px; }
.workshop-start .shop-continue { margin: 0; }
.workshop-tabs { display: flex; gap: 10px; margin: 12px 4px 20px; }
.workshop-tabs button { flex: 1; min-width: 0; padding: 10px 6px; }
.workshop-tabs button[aria-pressed="true"] { outline: 3px solid #b8f2ff; outline-offset: 3px; }
@media(max-height:500px) and (orientation:landscape) {
  .modal:has(.workshop-tabs) .shop-context { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px; }
  .shop-context .shop-title { grid-column:1; }
  .shop-context .shop-title h1 { font-size:20px; }
  .shop-context .shop-loadout { grid-column:1;font-size:11px; }
  .shop-context .workshop-start { grid-column:2;grid-row:1 / 3;align-self:center; }
}