#hnrp-view-toggle {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #3976a7;
  border-radius: 10px;
  background: #102d4c;
  color: #edf8ff;
  font: inherit;
  font-weight: 700;
}
#hnrp-view-toggle:hover { background: #19446b; }
#hnrp-view-toggle:focus-visible { outline: 2px solid #9ddeff; outline-offset: 3px; }
#hnrp-view-toggle[hidden] { display: none !important; }
html:not([data-hnrp-mobile]) #main-nav.main-nav .hnrp-mobile-nav-only { display: none !important; }

html[data-hnrp-preview] { background: #050f20 !important; }
html[data-hnrp-preview] body {
  width: min(100%, 430px);
  min-height: 100vh;
  margin-inline: auto;
  box-shadow: 0 0 80px #000b, 0 0 0 1px #2c4f76;
}
html[data-hnrp-preview] :is(#hnrp-cookie-panel, .toast) {
  left: auto;
  right: max(12px, calc(50% - 203px));
  max-width: min(406px, calc(100vw - 24px));
}
html[data-hnrp-preview] #hnrp-cookie-panel { width: 406px; padding-inline: 14px; }

/* These rules also apply when the desktop preview is narrowed without changing the browser viewport. */
html[data-hnrp-mobile] {
  --hnrp-mobile-width: min(100vw, 748px);
  --hnrp-menu-offset: 74px;
  scroll-padding-top: 84px;
}
html[data-hnrp-preview] { --hnrp-mobile-width: min(100vw, 430px); }

html[data-hnrp-mobile] :is(.site-header, #content, .site-footer) {
  min-width: 0;
  max-width: 100%;
}
html[data-hnrp-mobile] #content { overflow-x: clip; }
html[data-hnrp-mobile] :is(.site-header, #content, .site-footer) .container {
  width: calc(100% - 28px) !important;
  max-width: 720px !important;
}
html[data-hnrp-mobile] .site-header .nav-shell {
  position: relative;
  min-width: 0;
  min-height: 66px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}
html[data-hnrp-mobile] .nav-shell > .brand { max-width: 25%; min-width: 0; }
html[data-hnrp-mobile] .nav-shell .brand :is(.hnrp-brand-v2-link, .hnrp-brand-update, img) {
  max-width: 100% !important;
}
html[data-hnrp-mobile] .nav-shell .brand .hnrp-brand-update > img {
  width: clamp(63px, calc(var(--hnrp-mobile-width) * .23), 106px) !important;
}
html[data-hnrp-mobile] .nav-shell .nav-actions { min-width: 0; gap: 6px !important; }
html[data-hnrp-mobile] .nav-shell :is(#community-menu-toggle, #mobile-toggle) {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 44px;
  min-width: 44px;
  width: 44px;
  height: 44px;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
html[data-hnrp-mobile] #login-btn {
  min-width: 0;
  min-height: 44px !important;
  gap: 6px;
  padding: 0 9px !important;
}
html[data-hnrp-mobile] #login-btn #login-label {
  min-width: 0;
  max-width: clamp(65px, calc(var(--hnrp-mobile-width) * .25), 160px) !important;
}
html[data-hnrp-mobile] #main-nav.main-nav {
  display: none !important;
  position: absolute;
  inset: calc(100% + 5px) 12px auto;
  z-index: 100;
  max-height: calc(100dvh - var(--hnrp-menu-offset));
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid #355e87;
  border-radius: 14px;
  background: #091e38 !important;
  box-shadow: 0 12px 32px #020b1bd9;
}
html[data-hnrp-mobile] #main-nav.main-nav.open {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 3px !important;
}
html[data-hnrp-mobile] #main-nav.main-nav a {
  min-height: 46px;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}
html[data-hnrp-mobile] #main-nav.main-nav a.active {
  background: #153a60 !important;
  color: #f6fbff !important;
}
html[data-hnrp-mobile] #community-menu { position: static; }
html[data-hnrp-mobile] #community-dropdown {
  top: calc(100% + 5px);
  right: 12px;
  left: 12px;
  min-width: 0;
  width: auto;
  z-index: 101;
}
html[data-hnrp-mobile] #community-dropdown a { min-height: 46px; display: flex; align-items: center; }
html[data-hnrp-mobile] .account-menu {
  top: var(--hnrp-menu-offset);
  right: 12px;
  width: min(280px, calc(100% - 24px));
  min-width: 0;
  padding: 12px;
  border-color: #355e87;
  border-radius: 12px;
  background: #102944;
  color: #e7f5ff;
  overflow-wrap: anywhere;
}
html[data-hnrp-preview] .account-menu { right: max(12px, calc(50% - 203px)); }
html[data-hnrp-mobile] .account-menu :is(a, button) { min-height: 44px; }
html[data-hnrp-mobile] .account-menu :is(a, button, .account-menu-user) { color: #e7f5ff; }
html[data-hnrp-mobile] .account-menu-user strong { color: #fff; }
html[data-hnrp-mobile] .account-menu button { background: #1c456a; border-radius: 8px; }

html[data-hnrp-mobile] :is(.v22-hero, .v2-hero, .v22-hero-content, .v2-hero-content) { min-height: 0 !important; }
html[data-hnrp-mobile] #page-home .v22-hero-content {
  padding: clamp(92px, calc(var(--hnrp-mobile-width) * .26), 220px) 0 22px !important;
  width: calc(100% - 28px) !important;
}
html[data-hnrp-mobile] #page-home .v2-live-board {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 112px) !important;
  column-gap: 10px !important;
  row-gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}
html[data-hnrp-mobile] #page-home .v2-live-left { gap: 7px !important; }
html[data-hnrp-mobile] #page-home .v2-board-label { letter-spacing: .07em !important; font-size: 10px !important; gap: 8px !important; }
html[data-hnrp-mobile] #page-home .v2-live-left h2 {
  font-size: clamp(23px, calc(var(--hnrp-mobile-width) * .067), 42px) !important;
  line-height: 1.06 !important;
  overflow-wrap: anywhere;
}
html[data-hnrp-mobile] #page-home .v2-live-left p { font-size: 13px !important; overflow-wrap: anywhere; }
html[data-hnrp-mobile] #page-home .v2-player-tile { min-width: 0; padding: 10px !important; gap: 7px !important; }
html[data-hnrp-mobile] #page-home .v2-player-tile small { font-size: 9px !important; letter-spacing: .04em !important; }
html[data-hnrp-mobile] #page-home .v2-player-line { gap: 4px !important; flex-wrap: wrap; }
html[data-hnrp-mobile] #page-home .v2-player-line strong { font-size: 21px !important; }
html[data-hnrp-mobile] #page-home .v2-join-actions { grid-column: 1 / -1; gap: 7px !important; }
html[data-hnrp-mobile] #page-home .v2-join-actions .v2-button { min-height: 46px !important; padding-inline: 12px !important; }
html[data-hnrp-mobile] #page-home .v22-hero-image .hnrp-banner-scene { width: 100%; left: 0; }
html[data-hnrp-mobile] .v2-section { padding-block: 36px !important; }
html[data-hnrp-mobile] .v2-section-heading { gap: 8px; margin-bottom: 15px !important; }
html[data-hnrp-mobile] .v2-section-heading h2 { font-size: clamp(25px, calc(var(--hnrp-mobile-width) * .074), 43px) !important; }
html[data-hnrp-mobile] .v2-rules-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
html[data-hnrp-mobile] .v2-rule-card { min-width: 0; min-height: 134px !important; padding: 12px !important; }
html[data-hnrp-mobile] .v2-rule-card h3 { font-size: 14px !important; overflow-wrap: anywhere; }
html[data-hnrp-mobile] .v2-rule-cta { font-size: 10px !important; flex-wrap: wrap; }
html[data-hnrp-mobile] #hnrp-factions-showcase .v22-carousel-viewport {
  height: 388px !important;
  touch-action: pan-y pinch-zoom;
}
html[data-hnrp-mobile] #hnrp-factions-showcase .v22-slide {
  width: min(440px, calc(var(--hnrp-mobile-width) - 66px)) !important;
  height: 338px !important;
}
html[data-hnrp-mobile] #hnrp-factions-showcase :is(.v22-prev, .v22-next, .v22-slide-join) { min-height: 44px; }
html[data-hnrp-mobile] .v22-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
html[data-hnrp-mobile] .v22-member { min-width: 0; padding: 14px 9px !important; }
html[data-hnrp-mobile] .v22-member-avatar { width: 78px; height: 78px; }
html[data-hnrp-mobile] .v22-member[data-username] .v22-member-name,
html[data-hnrp-mobile] .v22-member[data-username] .v22-member-username {
  position: static;
  opacity: 1;
  transform: none;
}
html[data-hnrp-mobile] .v22-member[data-username] .v22-member-username { font-size: 12px; }

html[data-hnrp-mobile] :is(.page-masthead, #page-rules .page-masthead, #page-rules .page-masthead.dark-masthead) {
  padding-block: 32px !important;
}
html[data-hnrp-mobile] .page-masthead h1 {
  font-size: clamp(28px, calc(var(--hnrp-mobile-width) * .079), 47px) !important;
  line-height: 1.04 !important;
  overflow-wrap: anywhere;
}
html[data-hnrp-mobile] :is(.listing-content, .community-content) { padding-block: 20px 34px !important; }
html[data-hnrp-mobile] .legal-content { padding: 16px !important; overflow-wrap: anywhere; }
html[data-hnrp-mobile] #page-rules .rules-layout {
  display: block !important;
  width: calc(100% - 28px) !important;
  padding-block: 17px 34px !important;
}
html[data-hnrp-mobile] #page-rules .rule-sidebar { position: static !important; margin-bottom: 12px !important; padding: 14px !important; }
html[data-hnrp-mobile] #page-rules .rule-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html[data-hnrp-mobile] #page-rules .rule-content { min-width: 0; padding: 14px !important; }
html[data-hnrp-mobile] #page-rules .rule-content-heading { flex-wrap: wrap !important; }
html[data-hnrp-mobile] #page-rules .rule-content-heading .search-wrap { width: 100% !important; max-width: none !important; }
html[data-hnrp-mobile] #page-rules .paragraph-body { font-size: 15px !important; padding: 14px !important; overflow-wrap: anywhere; }
html[data-hnrp-mobile] :is(.card-grid, .event-list, .status-service-list, .status-lower, .admin-layout, #admin-form .form-grid) {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-hnrp-mobile] :is(.list-controls, .event-row, .status-summary, .service-header) { flex-wrap: wrap; }
html[data-hnrp-mobile] .event-row { grid-template-columns: auto minmax(0, 1fr) !important; }
html[data-hnrp-mobile] .event-book { grid-column: 1 / -1; }
html[data-hnrp-mobile] .event-book button { width: 100%; white-space: normal; }
html[data-hnrp-mobile] :is(.event-info, .v22-member-display, .community-idea, .status-summary-copy) { min-width: 0; overflow-wrap: anywhere; }

html[data-hnrp-mobile] .hnrp-map { min-width: 0; padding: 10px; margin-bottom: 16px; border-radius: 16px; }
html[data-hnrp-mobile] :is(.hnrp-map-header, .hnrp-map-toolbar) { width: 100%; }
html[data-hnrp-mobile] .hnrp-map-toolbar { justify-content: space-between; }
html[data-hnrp-mobile] .hnrp-map-toolbar select { flex: 1 1 150px; max-width: 100%; }
html[data-hnrp-mobile] .hnrp-map-toolbar button { min-width: 44px; }
html[data-hnrp-mobile] .hnrp-map-viewport {
  max-height: min(55dvh, 370px);
  min-height: 182px;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
}
html[data-hnrp-mobile] .hnrp-map-stage { min-width: 680px; }
html[data-hnrp-mobile] .hnrp-map-viewport:not([data-hnrp-map-zoomed]) .hnrp-map-stage { width: 100% !important; }
html[data-hnrp-mobile] .hnrp-map-point { width: 23px; height: 23px; }
html[data-hnrp-mobile] .hnrp-map-details {
  position: relative;
  inset: auto !important;
  width: 100%;
  margin-top: 9px;
  padding: 13px;
  box-shadow: none;
}
html[data-hnrp-mobile] .hnrp-map-details::before { display: none; }
html[data-hnrp-mobile] .hnrp-map-details h3 { padding-right: 40px; }
html[data-hnrp-mobile] .hnrp-map-details [data-map-body] { max-height: none; }
html[data-hnrp-mobile] .hnrp-map-close { width: 44px; height: 44px; }
html[data-hnrp-mobile] .hnrp-ticket-layout { grid-template-columns: minmax(0, 1fr); }
html[data-hnrp-mobile] .hnrp-tickets { padding: 12px; margin: 12px 0 20px; }
html[data-hnrp-mobile] .hnrp-ticket-list { max-height: 190px; }
html[data-hnrp-mobile] .hnrp-ticket-feed { height: clamp(192px, 38vh, 320px); }
html[data-hnrp-mobile] .hnrp-ticket-bubble { max-width: 92%; }
html[data-hnrp-mobile] :is(.hnrp-ticket-chat-head, .hnrp-ticket-actions, .hnrp-ticket-form) { flex-wrap: wrap; gap: 7px; }
html[data-hnrp-mobile] .hnrp-ticket-form textarea { flex-basis: 100%; }
html[data-hnrp-mobile] .hnrp-ticket-form button[type="submit"] { margin-inline-start: auto; }
html[data-hnrp-mobile] .hnrp-ticket-viewer { width: calc(var(--hnrp-mobile-width) - 24px); }
html[data-hnrp-mobile] .hnrp-ticket-viewer img { max-width: 100%; }

html[data-hnrp-mobile] #admin-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; margin-bottom: 12px; }
html[data-hnrp-mobile] :is(.admin-records, .admin-form-wrap, #hnrp-v75-slider-panel) { min-width: 0; padding: 12px !important; }
html[data-hnrp-mobile] #admin-record-list { max-height: 280px; overflow-y: auto; }
html[data-hnrp-mobile] .admin-record-actions .mini-btn { min-height: 44px; }
html[data-hnrp-mobile] :is(.admin-record, .admin-records-head, .form-actions) { flex-wrap: wrap; gap: 8px; }
html[data-hnrp-mobile] #hnrp-v75-slider-panel :is(.v75-entry, .v75-fields-grid) { grid-template-columns: minmax(0, 1fr); }
html[data-hnrp-mobile] #hnrp-v75-slider-panel :is(.v75-head, .v75-rowhead, .v75-file-label) { flex-wrap: wrap; }
html[data-hnrp-mobile] #hnrp-v75-slider-panel .v75-file-label input { max-width: 100%; }

html[data-hnrp-mobile] #content :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  max-width: 100%;
  min-height: 44px;
  font-size: 16px !important;
}
html[data-hnrp-mobile] #content :is(.btn, .hnrp-ticket-primary, .hnrp-ticket-secondary, .community-button, .rp-quiz-choice, .admin-tabs button) {
  min-height: 44px;
}
html[data-hnrp-mobile] :is(dialog, .toast, #hnrp-cookie-panel) { max-width: min(450px, calc(var(--hnrp-mobile-width) - 24px)); }
html[data-hnrp-mobile] #hnrp-cookie-panel { grid-template-columns: minmax(0, 1fr); }
html[data-hnrp-mobile] #hnrp-cookie-panel .hnrp-cookie-actions { grid-area: auto / 1; flex-wrap: wrap; }
html[data-hnrp-mobile] dialog { max-height: calc(100dvh - 24px); overflow: auto; }
html[data-hnrp-mobile] .site-footer .footer-top { align-items: flex-start; flex-direction: column; gap: 12px; padding-block: 20px !important; }
html[data-hnrp-mobile] .site-footer .footer-logo-image { width: 118px !important; }
html[data-hnrp-mobile] .site-footer :is(.v22-footer-links, .footer-bottom) { flex-wrap: wrap; gap: 4px 12px; }
html[data-hnrp-mobile] .v22-footer-links > :is(a, button) { min-height: 44px; align-content: center; }