/* Telegram webviews can change their usable height after opening a sheet. */
.collection-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
.collection-choice { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #48503c; border-radius: 10px; color: #e5ecdb; background: #1b2117; text-align: left; min-width: 0; }
.collection-choice.selected { border-color: var(--lime); background: #28331c; }
.collection-choice.sealed { color: #818b75; background: repeating-linear-gradient(135deg,#ffffff02 0 2px,transparent 2px 12px),#171b14; cursor: default; }
.collection-symbol { font-weight: 900; font-size: 28px; color: var(--lime); min-width: 42px; }
.sealed .collection-symbol { color: #6a755e; }
.collection-choice b { font-size: 12px; display: block; overflow-wrap: anywhere; }
.collection-choice small { font-size: 10px; color: #a0ad91; display: block; margin-top: 8px; line-height: 1.5; }
.collection-state { margin-left: auto; font-size: 8px; }
.fallout-theme { --lime: #efdc78; }
.card-art:after { content: attr(data-series); }
.fallout-theme #pack .pack-logo, .fallout-theme .wrapper-inner .pack-logo { font-size: 32px; letter-spacing: -2px; }
.fallout-theme #pack { background: linear-gradient(125deg,#eece55,#9eaf59); }
@media(max-width:650px) { .collection-picker { grid-template-columns: minmax(0,1fr); gap: 10px; }.collection-choice { padding: 14px; } }
:root {
  --app-height: 100dvh;
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
  --app-safe-left: 0px;
  --app-safe-right: 0px;
  --dialog-top: max(12px, env(safe-area-inset-top, 0px), var(--app-safe-top));
  --dialog-bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--app-safe-bottom));
}
html { overflow-x: clip; }
body.modal-open { overflow: hidden; }
main, section, .card, .card-info, .reveal-slot { min-width: 0; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reveal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.material-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: block; width: 100%; }
.card-art, .reveal-grid .card-art, .material-grid .card-art {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
}
img.art-image {
  display: block; width: 100%; height: 100%; object-fit: contain;
  object-position: center; background: none; transform: none;
}
.card:hover img.art-image { transform: none; }
.card-info { overflow-wrap: anywhere; }
.reveal-slot { display: flex; flex-direction: column; gap: 10px; }
.reveal-slot > .material-button { width: 100%; min-height: 44px; margin: 0; white-space: normal; }
dialog {
  position: fixed;
  inset: var(--dialog-top) 0 auto;
  margin: 0 auto;
  width: min(850px, calc(100% - 24px - var(--app-safe-left) - var(--app-safe-right)));
  max-width: calc(100% - 24px);
  max-height: calc(var(--app-height) - var(--dialog-top) - var(--dialog-bottom));
  padding: 10px 20px 24px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#modal-body { min-width: 0; overflow-wrap: anywhere; }
.close {
  position: sticky; top: 0; right: auto; z-index: 30;
  display: block; width: 44px; height: 44px;
  margin: 0 0 4px auto; padding: 0;
  border-radius: 50%; background: #171c14f5;
}
.close[hidden] { display: none; }
.detail-actions { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 360px; margin: auto; }
.detail-actions > button { width: 100%; min-height: 48px; margin: 0; white-space: normal; }
.share-preview { width: 100%; max-width: 400px; }
.share-preview img { width: 100%; height: auto; max-height: calc(var(--app-height) * .48); object-fit: contain; }
.share-caption { overflow-wrap: anywhere; }
.choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices button, select { min-width: 0; max-width: 100%; }
.toast { max-width: calc(100% - 24px); white-space: normal; bottom: calc(var(--dialog-bottom) + 8px); }
@media (max-width: 650px) {
  header { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .label { font-size: 10px; letter-spacing: .3px; }
  .label small { font-size: 7px; }
  .demo { padding: 8px 5px; font-size: 7px; }
  main { padding: 0 14px; }
  .cards, .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-area { overflow: hidden; }
  dialog { padding: 8px 14px 20px; border-radius: 14px; }
  .pack-reveal { grid-template-columns: minmax(0, 1fr); max-width: 290px; margin: 20px auto; gap: 24px; }
  .pack-reveal .card { min-height: 0; }
  .pack-reveal .card.unrevealed { min-height: 340px; }
  .pack-reveal .card-info { padding: 14px; min-height: 105px; }
  .pack-reveal .card-info h3 { font-size: 15px; }
  .pack-reveal .card-info p { font-size: 12px; }
  .pack-reveal .card-info small { font-size: 10px; }
  .pack-reveal .unrevealed:before { font-size: 40px; }
  .pack-reveal .unrevealed:after { font-size: 9px; }
  .physical-opening { min-height: 0; }
  .unpack-scene { transform: scale(.8); transform-origin: center top; margin-bottom: -60px; }
  .puzzle { font-size: clamp(28px, 9vw, 44px); }
  nav { gap: 16px; }
  nav button { font-size: 10px; }
}
@media (hover: none) {
  .card, .card:hover { transform: none; }
}