/* Tablet & mobile overrides. Elements are targeted by their data-m="…" attribute.
   !important is required because desktop styles are inline. */
@media (max-width: 1080px) {
  [data-m="nav"] { display: none !important; }
  [data-m="burger"] { display: flex !important; }
  [data-m="mnav"] { display: flex !important; }
}
/* Shop title glow: keep its drifting/scaled box inside the viewport on tablet widths (mobile clips via html overflow-x). */
@media (min-width: 761px) {
  [data-m="shop-glow"] { width: min(760px, 118%, 100vw - 80px) !important; }
}
/* Staff carousel bleed (margin: 0 -6vw) must not pass the viewport edge.
   ≤1276px: the staff section is full-width, so the edge is exactly the 48px section padding.
   1277–1400px: section is centred; limit the bleed to the gap to the viewport (+8.5px allows for a classic scrollbar inside 100vw).
   Placed before the mobile block so its -16px rule still wins on short landscape screens. */
@media (min-width: 761px) and (max-width: 1276px) {
  [data-m="staff-track"] { margin: 0 -48px !important; }
}
@media (min-width: 1277px) and (max-width: 1400px) {
  [data-m="staff-track"] { margin: 0 max(-6vw, calc((100% - 100vw) / 2 + 8.5px)) !important; }
}
@media (max-width: 760px), (max-width: 950px) and (max-height: 520px) {
  html { overflow-x: hidden; }
  [data-m="nowrap"] { white-space: nowrap; }
  [data-m="header"] { padding: 10px 16px !important; gap: 12px; }
  [data-m="logo"] { width: 36px !important; height: 36px !important; }
  [data-m="brand"] { font-size: 19px !important; white-space: nowrap; }
  [data-m="hero"] { padding: 28px 16px 26px !important; min-height: 0 !important; flex-direction: column; align-items: center !important; gap: 20px; }
  [data-m="hero-logo"] { position: relative !important; top: auto !important; right: auto !important; width: 92px !important; height: 92px !important; order: 0; }
  [data-m="hero-content"] { order: 1; width: 100%; }
  [data-m="hero-title"] { font-size: clamp(40px, 12.5vw, 60px) !important; line-height: 1.05 !important; margin-bottom: 14px !important; }
  [data-m="hero-lead"] { font-size: 14.5px !important; line-height: 1.6 !important; text-wrap: pretty; }
  [data-m="hero-orn"] { margin-bottom: 24px !important; }
  [data-m="hero-btns"] { flex-direction: column; align-items: stretch; gap: 10px !important; max-width: 380px; margin: 0 auto; }
  [data-m="hero-btns"] > * { display: block; text-align: center; padding: 15px 18px !important; font-size: 14px !important; }
  [data-m="hero-stats"] { position: relative !important; left: auto !important; bottom: auto !important; order: 2; align-items: center; }
  [data-m="hero-stats"] span { white-space: nowrap; }
  [data-m="notice"] { flex-direction: column; }
  [data-m="biz-avail"] { white-space: normal !important; margin-left: 0 !important; flex-shrink: 1 !important; min-height: 44px; box-sizing: border-box; }
  [data-m="hero-discord"] { position: relative !important; right: auto !important; bottom: auto !important; order: 3; min-width: 220px; }
  [data-m="hero-discord"] a { padding: 11px 12px !important; font-size: 12px !important; }
  [data-m="hero-faq"] { position: relative !important; bottom: auto !important; order: 4; }
  [data-m="hero-faq"] > span { padding: 10px 18px !important; }
  [data-m="why"] { padding: 40px 16px 64px !important; }
  [data-m="why-card"] { width: 272px !important; padding: 18px !important; gap: 14px !important; }
  [data-m="town-grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m="town-card"] { flex-direction: column; }
  [data-m="town-img"] { width: 100% !important; }
  [data-m="town-head"] { flex-wrap: wrap; }
  [data-m="biz-row"] { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 10px 14px !important; padding: 14px 10px !important; }
  [data-m="biz-thumb"] { width: 52px !important; height: 38px !important; }
  [data-m="biz-name"] { font-size: 15.5px !important; overflow-wrap: anywhere; }
  [data-m="biz-meta"] { grid-column: 1 / -1; justify-content: space-between !important; flex-wrap: wrap; gap: 10px !important; }
  [data-m="modal-wrap"] { padding: 12px !important; }
  [data-m="modal-box"] { padding: 18px !important; max-height: 92vh !important; }
  [data-m="modal-hero"] { height: 200px !important; }
  [data-m="faq-box"] { max-height: 88vh !important; }
  [data-m="faq-head"] { padding: 26px 40px 14px !important; }
  [data-m="faq-head"] > div:nth-child(2) { font-size: 10.5px !important; letter-spacing: .14em !important; }
  [data-m="faq-close"] { right: 6px !important; top: 6px !important; padding: 10px 12px; }
  [data-m="faq-title"] { font-size: 22px !important; line-height: 1.25; }
  [data-m="faq-list"] { padding: 0 12px 20px !important; }
  [data-m="faq-q"] { padding: 14px 12px !important; gap: 12px !important; }
  [data-m="faq-a"] { padding: 0 14px 16px !important; font-size: 14.5px !important; overflow-wrap: anywhere; }
  [data-m="rules"] { height: auto !important; overflow: visible !important; display: block !important; padding: 22px 16px 8px !important; }
  [data-m="rules-head"] { margin-bottom: 18px !important; }
  [data-m="rules-eyebrow"] { font-size: 11px !important; letter-spacing: .18em !important; }
  [data-m="rules-eyebrow"]::before, [data-m="rules-eyebrow"]::after { width: 22px !important; }
  [data-m="rules-title"] { font-size: 28px !important; line-height: 1.15; }
  [data-m="rules-lead"] { font-size: 14px !important; }
  [data-m="rules-layout"] { flex-direction: column; gap: 12px !important; flex: none !important; }
  [data-m="rules-side"] { display: contents !important; }
  [data-m="rules-search"] { margin-right: 0 !important; height: 48px !important; padding: 0 12px !important; }
  [data-m="rules-input"] { font-size: 16px !important; }
  [data-m="rules-navwrap"] { position: sticky !important; top: 66px; z-index: 30 !important; flex: none !important; margin: 0 -16px; padding: 8px 0; background: rgba(23,17,12,0.96); border-bottom: 1px solid #3a2c1c; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  [data-m="rules-nav"] { flex-direction: row !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 8px !important; padding: 2px 16px !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%) !important; scroll-snap-type: x proximity; }
  [data-m="rules-nav"][data-searching="1"] { flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; max-height: 55vh; -webkit-mask-image: none !important; mask-image: none !important; }
  [data-m="rules-nav"][data-searching="1"] > div { padding: 12px 12px 12px 14px !important; min-height: 48px; box-sizing: border-box; }
  [data-m="rules-chip"] { white-space: nowrap; min-height: 42px; box-sizing: border-box; padding: 8px 14px 8px 12px !important; font-size: 13.5px !important; scroll-snap-align: start; }
  [data-m="rules-main"] { height: auto !important; }
  [data-m="rules-content"] { height: auto !important; overflow: visible !important; margin: 0 !important; padding: 4px 0 0 !important; box-sizing: border-box !important; gap: 14px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  [data-m="rules-cat"] { scroll-margin-top: 142px; }
  [data-m="rules-cathead"] { padding: 16px 14px !important; gap: 12px !important; min-height: 44px; }
  [data-m="rules-caticon"] { width: 38px !important; height: 38px !important; font-size: 17px !important; }
  [data-m="rules-cattitle"] { font-size: 16.5px !important; line-height: 1.3; overflow-wrap: anywhere; }
  [data-m="rules-items"] { padding: 0 14px 14px !important; }
  [data-m="rule"] { flex-wrap: wrap; align-items: center; gap: 10px 12px !important; padding: 16px 0 18px 12px !important; scroll-margin-top: 146px; }
  [data-m="rule-num"] { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  [data-m="rule-body"] { display: contents; }
  [data-m="rule-title"] { flex: 1 1 0; min-width: 0; margin: 0 !important; font-size: 13.5px !important; line-height: 1.4; letter-spacing: .03em !important; overflow-wrap: anywhere; }
  [data-m="rule-text"] { flex: 1 1 100%; font-size: 15px !important; line-height: 1.7 !important; overflow-wrap: anywhere; text-wrap: pretty; }
  [data-m="rules-chev"] { display: none !important; }
  [data-m="rules-copy"] { position: static !important; text-align: center !important; padding: 26px 16px 4px; font-size: 10.5px !important; line-height: 1.6 !important; }
  [data-m="shop-grid"] { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  [data-m="shop-div"] { gap: 10px !important; margin: 40px 0 18px !important; }
  [data-m="shop-div"] > div:first-child, [data-m="shop-div"] > div:last-child { min-width: 14px; }
  [data-m="shop-div"] > div:nth-child(2) { font-size: 10.5px !important; letter-spacing: .12em !important; text-align: center; flex-wrap: wrap; justify-content: center; }
  [data-m="gold-arrow"] { display: none !important; }
  [data-m="gold-track"] { gap: 16px !important; padding: 20px 16px 28px !important; margin: -8px -16px !important; scroll-padding-inline: 16px; }
  [data-m="rule-updated"] { margin-left: 6px !important; font-size: 9.5px !important; letter-spacing: .1em !important; }
  [data-m="gold-card"] { flex: 0 0 82% !important; }
  [data-m="warn-box"] { padding: 24px 20px !important; }
  [data-m="tos"] { right: 12px !important; bottom: 12px !important; left: 12px; }
  [data-m="tos-pill"] { flex-wrap: wrap; justify-content: center; }
  [data-m="tos-pill"] > * { padding: 10px 12px !important; }
  [data-m="page"] { padding: 44px 16px 64px !important; }
  [data-m="staff-title"] { font-size: 44px !important; }
  [data-m="staff-track"] { margin: 0 -16px !important; padding: 24px 16px 48px !important; gap: 18px !important; }
  [data-m="roster"] { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 12px !important; }
  [data-m="page-title"] { font-size: 34px !important; }
  [data-m="step"] { padding: 18px 16px !important; gap: 14px !important; }
  [data-m="step"] > div:last-child { min-width: 0; overflow-wrap: anywhere; }
  [data-m="play-box"] { padding: 28px 18px !important; }
  [data-m="play-btn"] { display: block !important; padding: 15px 18px !important; font-size: 15px !important; }
  [data-m="credit"] { position: static !important; display: block; text-align: center; padding: 14px 16px 20px; font-size: 11.5px !important; }
  [data-m="biz-map-head"] { gap: 10px !important; margin: 40px auto 14px !important; }
  [data-m="biz-map-head"] > span:nth-child(2) { white-space: normal !important; text-align: center; font-size: 13.5px !important; line-height: 1.4; flex: 0 1 auto; min-width: 0; }
  [data-m="biz-map-head"] > span:first-child, [data-m="biz-map-head"] > span:last-child { min-width: 14px; }
  [data-m="biz-cat"] { min-height: 44px; box-sizing: border-box; }
  [data-m="biz-sub"] { min-height: 44px; box-sizing: border-box; display: inline-flex !important; align-items: center; }
  [data-m="biz-apply"] { min-height: 44px; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (min-width: 540px) and (max-width: 760px), (min-width: 540px) and (max-width: 950px) and (max-height: 520px) {
  [data-m="shop-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m="gold-card"] { flex: 0 0 calc((100% - 16px) / 2) !important; }
  [data-m="hero-btns"] { flex-direction: row; flex-wrap: wrap; max-width: none; justify-content: center; }
}
@media (max-width: 360px) {
  [data-m="brand"] { font-size: 17px !important; }
  [data-m="rules-items"] { padding: 0 12px 12px !important; }
  [data-m="rule"] { padding-left: 10px !important; }
  [data-m="rules-cathead"] { padding: 14px 12px !important; }
}