/* ============================================================
   Data Dungeon — mobile polish: tap targets, safe areas,
   scrolling behavior. Keep separate from base so this file
   can be tweaked without touching design tokens.
   ============================================================ */

/* Tap-target minimums. .bubble intentionally omitted — it carries its
   own explicit sizing in base.css. Including it here forced 12 px
   circles to a 12×36 oval on mobile. */
button, a, .tappable, .btn, .search-result, .skill-row, .data-row, .choice, .filter-chip, .condition-badge, .hp-btn { min-height: 36px; }

/* Smooth scroll everywhere */
.scrollable, .modal-body, .search-results, .roll-log {
  -webkit-overflow-scrolling: touch;
}

/* Horizontal scroll strips hide scrollbar */
.h-scroll, .resource-bar, .spell-slots, .wizard-steps, .chip-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar,
.resource-bar::-webkit-scrollbar,
.spell-slots::-webkit-scrollbar,
.wizard-steps::-webkit-scrollbar,
.chip-strip::-webkit-scrollbar { display: none; }

/* Safe area handled in base.css — nothing to override here now. */

/* Prevent iOS input zoom (keep font-size >= 16px for inputs) */
@media (max-width: 600px) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Wider screens: keep the background plain. The previous rules
   painted a faint red-tinted radial gradient on the body and a
   40px drop-shadow halo around .page-wrap — both of which were
   user-flagged as unwanted glow on desktop. Left the block in
   place (no rules) as a reminder for future tweaks. */
@media (min-width: 600px) {
}

/* Modal content responsive */
@media (min-width: 600px) {
  .my-turn-modal {
    padding: 20px;
  }
  .modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Scrollbar styling for desktop users */
@media (min-width: 600px) {
  .search-results::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar,
  .roll-log::-webkit-scrollbar {
    width: 6px;
  }
  .search-results::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb,
  .roll-log::-webkit-scrollbar-thumb {
    background: var(--grey-dark);
    border-radius: 3px;
  }
}