/* ==================================================
   Responsive Stylesheet
   Purpose: Adjusts layout and component sizing for desktop,
   tablet, and mobile breakpoints without structural breakage.
   Category: Responsive styling
================================================== */

/* ==================================================
   Tablet Adjustments (<= 1024px)
   Purpose: Scales hero, selector, and popup dimensions for
   medium-sized screens.
   Category: Responsive styling
================================================== */
@media (max-width: 1024px) {
  .page-one-content {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .continent-selector {
    grid-template-columns: repeat(4, 128px);
    gap: 0.92rem;
  }

  .continent-button {
    width: 128px;
    height: 128px;
  }

  .dashboard-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "top10-world top10-region"
      "landmarks world-stats"
      "chat chat";
  }

  .dashboard-panels > .info-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .dashboard-panels > .info-panel--landmarks {
    min-width: 0;
  }

  .info-panel {
    height: clamp(330px, calc(100dvh - 360px), 530px);
  }

  .hero-panel {
    width: min(620px, 94vw);
  }

  .country-grid {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  }

  .country-button {
    width: 116px;
    height: 116px;
  }

  .country-map {
    height: min(56vh, 540px);
  }

  .country-vatican-stage {
    --vatican-content-width: min(640px, calc(100% - (var(--vatican-shell-padding) * 2)));
    --vatican-graphic-width: min(940px, 92%);
    min-height: min(62vh, 560px);
  }

  .country-vatican-stage__content {
    width: var(--vatican-content-width);
  }

  .country-vatican-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .country-profile-stage {
    min-height: min(62vh, 560px);
  }

  .country-profile-stage__content {
    width: min(660px, calc(100% - 1.6rem));
  }

  .country-profile-stage__visual::before {
    width: min(860px, 86%);
    right: -12%;
  }

  .menu-drawer {
    width: min(400px, 100%);
  }
}

/* ==================================================
   Mobile Landscape/Tablet Portrait (<= 768px)
   Purpose: Keeps header controls, logos, and selector
   medallions usable on tighter widths.
   Category: Responsive styling
================================================== */
@media (max-width: 768px) {
  :root {
    --hero-panel-padding-inline: clamp(1.1rem, 4vw, 1.6rem);
    --hero-panel-padding-block: clamp(0.9rem, 3vw, 1.25rem);
    --section-modal-width: min(92vw, 720px);
  }

  .start-screen {
    gap: 0.9rem;
  }

  .hero-tech-row {
    gap: 0.52rem;
  }

  .partner-logo {
    max-height: 27px;
  }

  .game-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .page-one-content {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .continent-selector {
    grid-template-columns: repeat(4, 114px);
    gap: 0.78rem;
  }

  .continent-button {
    width: 114px;
    height: 114px;
  }

  .continent-button__label-text {
    font-size: 6.6px;
    letter-spacing: 0.18em;
  }

  .continent-button__difficulty-text {
    font-size: 7.2px;
    letter-spacing: 0.09em;
    stroke-width: 1.08px;
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top10-world"
      "top10-region"
      "landmarks"
      "world-stats"
      "chat";
    gap: 0.74rem;
  }

  .dashboard-panels > .info-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .dashboard-panels > .info-panel--landmarks {
    min-width: 0;
  }

  .info-panel {
    height: auto;
    min-height: 280px;
    padding: 0.82rem 0.86rem;
    gap: 0.66rem;
  }

  .panel-slider-controls {
    gap: 0.28rem;
  }

  .panel-slider-controls__button {
    font-size: 0.58rem;
    padding: 0.28rem 0.5rem;
  }

  .landmarks-panel__figure {
    min-height: clamp(180px, 32vh, 260px);
  }

  .landmarks-panel__description {
    font-size: 0.6rem;
    line-height: 1.4;
  }

  .landmarks-panel__control-button,
  .landmarks-panel__autoplay-button,
  .world-chat-input input {
    min-height: 2.35rem;
  }

  .world-stat-card__value {
    font-size: 0.88rem;
  }

  .info-panel--world-stats {
    height: auto;
    min-height: 0;
    padding: 0.72rem 0.76rem;
    gap: 0.52rem;
  }

  .info-panel--world-stats .info-panel__body {
    padding: 0.44rem;
  }

  .info-panel--world-stats .world-stats-grid {
    gap: 0.34rem;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .info-panel--world-stats .world-stat-card {
    gap: 0.14rem;
    padding: 0.38rem 0.44rem;
  }

  .info-panel--world-stats .world-stat-card__label {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  .info-panel--world-stats .world-stat-card__value {
    font-size: 0.84rem;
    line-height: 1.12;
  }

  .info-panel--world-stats .world-stat-card__meta {
    font-size: 0.56rem;
    line-height: 1.28;
  }

  .info-panel--world-stats .world-stat-card__split {
    gap: 0.24rem;
  }

  .info-panel--world-stats .world-stat-card__split-item {
    padding: 0.28rem 0.34rem;
    gap: 0.12rem;
  }

  .info-panel--world-stats .world-stat-card__split-value {
    font-size: 0.78rem;
  }

  .info-panel--world-stats .world-stat-card__split-meta {
    font-size: 0.54rem;
    line-height: 1.22;
  }


  .game-header--country {
    display: grid;
    grid-template-columns: max-content minmax(64px, 1fr) max-content minmax(64px, 1fr) max-content;
    grid-template-areas: "brand timer center coordinate actions";
    align-items: center;
  }

  .header-actions {
    margin-left: auto;
  }

  .button--primary {
    min-height: 40px;
    padding-inline: 0.85rem;
    font-size: 0.92rem;
  }

  .country-grid {
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  }

  .country-button {
    width: 108px;
    height: 108px;
  }

  .country-button__label-text {
    font-size: 7px;
    letter-spacing: 0.15em;
  }

  .country-map {
    height: max(360px, min(calc(100dvh - 170px), 860px));
  }

  .country-vatican-stage {
    --vatican-shell-padding: 0.85rem;
    --vatican-content-width: min(560px, calc(100% - (var(--vatican-shell-padding) * 2)));
    --vatican-graphic-width: min(860px, 96%);
    min-height: min(56vh, 500px);
  }

  .country-vatican-facts {
    grid-template-columns: 1fr;
  }

  .country-vatican-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .country-profile-stage {
    min-height: min(56vh, 500px);
  }

  .country-profile-stage__content {
    width: min(560px, calc(100% - 1.7rem));
  }

  .country-profile-stage__visual::before {
    width: min(760px, 94%);
    right: -18%;
    opacity: 0.76;
  }

  .country-profile-stats {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }

  .country-profile-stat__label {
    font-size: 0.58rem;
  }

  .country-profile-stat__value {
    font-size: 0.72rem;
  }

  .country-profile-fact h3 {
    font-size: 0.74rem;
  }

  .country-profile-fact p {
    font-size: 0.78rem;
  }

  .country-vatican-stat__label {
    font-size: 0.58rem;
  }

  .country-vatican-stat__value {
    font-size: 0.72rem;
  }

  .country-vatican-fact h3 {
    font-size: 0.76rem;
  }

  .country-vatican-fact p {
    font-size: 0.8rem;
  }

  .country-map-controls {
    top: 0.65rem;
    right: 0.65rem;
  }

  .country-map-options {
    top: calc(0.65rem + 34px + 0.4rem);
    right: 0.65rem;
    min-width: 156px;
    max-height: min(56vh, 320px);
    padding: 0.4rem;
  }

  .country-quiz-timer {
    width: 62px;
    height: 62px;
  }

  .country-quiz-timer__svg {
    width: 54px;
    height: 54px;
  }

  .country-quiz-timer__label {
    font-size: 0.9rem;
  }

  .country-quiz-card {
    top: 0.65rem;
    left: 0.65rem;
    width: min(320px, calc(100% - 7rem));
    padding: 0.5rem 0.54rem;
  }

  .country-map-options__item {
    font-size: 0.68rem;
    padding: 0.4rem 0.52rem;
  }

  .country-map-tooltip {
    font-size: 0.62rem;
    padding: 0.36rem 0.48rem;
  }

  .country-map-scale {
    left: 0.65rem;
    bottom: 0.65rem;
    padding: 0.36rem 0.42rem 0.4rem;
    gap: 0.2rem;
  }

  .country-map-scale__bar {
    height: 3px;
  }

  .country-map-scale__label {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
  }

  .menu-drawer {
    width: min(380px, 100%);
  }

  .section-modal {
    max-height: min(84vh, 740px);
  }
}

/* ==================================================
   Mobile Compact (<= 560px)
   Purpose: Prevents overlap on narrow phones while keeping
   menu and popup content readable and closable.
   Category: Responsive styling
================================================== */
@media (max-width: 560px) {
  :root {
    --section-modal-height: min(86vh, 680px);
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.68rem;
  }

  .loading-meta {
    align-items: baseline;
  }

  .loading-text {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
  }

  .loading-percent {
    font-size: 0.8rem;
  }

  .start-footer p {
    font-size: 0.7rem;
  }

  .partner-logo--stripe {
    width: min(170px, 56vw);
  }

  .partner-logo--visual-studio {
    width: min(108px, 38vw);
  }

  .continent-selector {
    grid-template-columns: repeat(2, 112px);
    gap: 0.74rem;
  }

  .continent-button {
    width: 112px;
    height: 112px;
  }

  .continent-button__label-text {
    font-size: 6px;
    letter-spacing: 0.14em;
  }

  .continent-button__difficulty-text {
    font-size: 6.7px;
    letter-spacing: 0.07em;
    stroke-width: 1px;
  }

  .info-panel {
    height: auto;
    min-height: 230px;
    border-radius: 16px;
    padding: 0.72rem 0.74rem;
    gap: 0.56rem;
  }


  .panel-slider-controls__button {
    font-size: 0.54rem;
    padding: 0.24rem 0.44rem;
  }

  .landmarks-panel__figure {
    min-height: clamp(160px, 30vh, 220px);
  }

  .landmarks-panel__description {
    font-size: 0.58rem;
    line-height: 1.38;
  }

  .landmarks-panel__control-button,
  .landmarks-panel__autoplay-button,
  .world-chat-input input {
    min-height: 2.5rem;
  }

  .world-stat-card {
    gap: 0.14rem;
  }

  .world-stat-card__label {
    font-size: 0.54rem;
  }

  .world-stat-card__value {
    font-size: 0.8rem;
  }

  .world-stat-card__meta {
    font-size: 0.58rem;
  }

  .info-panel--world-stats {
    padding: 0.64rem 0.66rem;
    gap: 0.46rem;
  }

  .info-panel--world-stats .info-panel__body {
    padding: 0.38rem;
  }

  .info-panel--world-stats .world-stats-grid {
    gap: 0.28rem;
  }

  .info-panel--world-stats .world-stat-card {
    border-radius: 8px;
    padding: 0.32rem 0.38rem;
  }

  .info-panel--world-stats .world-stat-card__label {
    font-size: 0.5rem;
  }

  .info-panel--world-stats .world-stat-card__value {
    font-size: 0.76rem;
  }

  .info-panel--world-stats .world-stat-card__meta {
    font-size: 0.53rem;
  }

  .info-panel--world-stats .world-stat-card__split {
    gap: 0.2rem;
  }

  .info-panel--world-stats .world-stat-card__split-item {
    padding: 0.24rem 0.3rem;
  }

  .info-panel--world-stats .world-stat-card__split-value {
    font-size: 0.72rem;
  }

  .info-panel--world-stats .world-stat-card__split-meta {
    font-size: 0.5rem;
  }

  .game-header {
    padding: 0.8rem;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .button--primary {
    flex: 1;
    min-width: 0;
  }

  .country-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  .country-button {
    width: 98px;
    height: 98px;
  }

  .country-button__inner-ring {
    inset: 13px;
  }

  .country-button__image-circle {
    inset: 17px;
  }

  .country-button__label-text {
    font-size: 6px;
    letter-spacing: 0.09em;
  }

  .country-button--long-label .country-button__label-text {
    font-size: 5.5px;
    letter-spacing: 0.06em;
  }

  .country-map {
    height: max(300px, min(calc(100dvh - 156px), 760px));
  }

  .country-vatican-stage {
    --vatican-shell-padding: 0.5rem;
    --vatican-content-width: calc(100% - (var(--vatican-shell-padding) * 2));
    --vatican-graphic-width: 96%;
    min-height: min(54vh, 440px);
    border-radius: 14px;
  }

  .country-vatican-stage__content {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    padding: 0.74rem;
    border-radius: 12px;
  }

  .country-profile-stage {
    min-height: min(54vh, 440px);
    border-radius: 14px;
  }

  .country-profile-stage__visual::before {
    width: 96%;
    right: -22%;
    opacity: 0.7;
  }

  .country-profile-stage__content {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    padding: 0.74rem;
    border-radius: 12px;
  }

  .country-profile-stage__title {
    font-size: 0.92rem;
    letter-spacing: 0.06em;
  }

  .country-profile-stage__lead {
    font-size: 0.78rem;
  }

  .country-profile-temperature {
    margin-top: 0.62rem;
    padding: 0.52rem 0.56rem;
  }

  .country-profile-temperature__title {
    font-size: 0.64rem;
  }

  .country-profile-temperature__value {
    font-size: 1.08rem;
  }

  .country-profile-temperature__meta {
    font-size: 0.69rem;
  }

  .country-profile-stats {
    margin-top: 0.62rem;
    gap: 0.36rem;
  }

  .country-profile-stat {
    padding: 0.44rem 0.46rem;
  }

  .country-profile-stat__label {
    font-size: 0.53rem;
    letter-spacing: 0.06em;
  }

  .country-profile-stat__value {
    font-size: 0.67rem;
    line-height: 1.3;
  }

  .country-profile-facts {
    margin-top: 0.58rem;
    gap: 0.36rem;
  }

  .country-profile-fact {
    padding: 0.52rem 0.56rem;
  }

  .country-profile-fact h3 {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  .country-profile-fact p {
    margin-top: 0.3rem;
    font-size: 0.71rem;
    line-height: 1.32;
  }

  .country-vatican-stage__title {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
  }

  .country-vatican-stage__lead {
    font-size: 0.78rem;
  }

  .country-vatican-facts {
    margin-top: 0.7rem;
    gap: 0.44rem;
  }

  .country-vatican-stats {
    margin-top: 0.6rem;
    gap: 0.36rem;
  }

  .country-vatican-stat {
    padding: 0.44rem 0.46rem;
  }

  .country-vatican-stat__label {
    font-size: 0.53rem;
    letter-spacing: 0.06em;
  }

  .country-vatican-stat__value {
    font-size: 0.67rem;
    line-height: 1.3;
  }

  .country-vatican-fact {
    padding: 0.52rem 0.56rem;
  }

  .country-vatican-fact h3 {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }

  .country-vatican-fact p {
    margin-top: 0.3rem;
    font-size: 0.73rem;
    line-height: 1.34;
  }

  .country-vatican-timeline,
  .country-vatican-extra {
    margin-top: 0.58rem;
    padding: 0.52rem 0.56rem;
  }

  .country-vatican-timeline__title,
  .country-vatican-extra__title {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  .country-vatican-timeline__list,
  .country-vatican-extra__list {
    margin-top: 0.36rem;
    gap: 0.22rem;
  }

  .country-vatican-timeline__list li,
  .country-vatican-extra__list li {
    font-size: 0.71rem;
    line-height: 1.32;
  }

  .game-header--country {
    grid-template-columns: minmax(108px, 1fr) auto minmax(86px, 1fr) auto;
    grid-template-areas:
      "brand timer center actions"
      "brand timer coordinate actions";
    gap: 0.45rem;
    align-items: center;
  }

  body.has-mobile-map-hud .game-header--country {
    grid-template-columns: minmax(108px, 1fr) minmax(86px, 1fr) auto;
    grid-template-areas: "brand center actions";
  }

  .country-quiz-card__question {
    font-size: 0.84rem;
    line-height: 1.32;
  }

  .country-header-title {
    font-size: 0.86rem;
    letter-spacing: 0.03em;
  }

  .country-header-actions {
    gap: 0.24rem;
  }

  .button--quiz-next,
  .button--quiz-start {
    min-height: 28px;
    padding: 0.24rem 0.5rem;
    font-size: 0.56rem;
  }

  .country-quiz-dms {
    font-size: 0.55rem;
    padding: 0.28rem 0.4rem;
  }

  .country-map-controls {
    top: 0.52rem;
    right: 0.52rem;
    gap: 0.28rem;
  }

  .country-map-scale {
    left: 0.52rem;
    bottom: 0.52rem;
    padding: 0.32rem 0.38rem 0.34rem;
  }

  .country-map-stage .country-header-timer.is-mobile-overlay {
    position: absolute;
    left: 0.52rem;
    bottom: calc(0.52rem + 2.95rem);
    z-index: 5;
    justify-self: start;
    pointer-events: none;
  }

  .country-map-scale.is-mobile-with-coordinate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "bar bar"
      "label coordinate";
    column-gap: 0.38rem;
    row-gap: 0.18rem;
    align-items: end;
  }

  .country-map-scale.is-mobile-with-coordinate .country-map-scale__bar {
    grid-area: bar;
  }

  .country-map-scale.is-mobile-with-coordinate .country-map-scale__label {
    grid-area: label;
  }

  .country-map-scale.is-mobile-with-coordinate .country-header-coordinate {
    grid-area: coordinate;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
  }

  .country-map-scale.is-mobile-with-coordinate .country-quiz-dms {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.32rem;
    border-radius: 6px;
  }

  .country-quiz-card .country-quiz-distance.is-mobile-overlay {
    margin-top: 0.14rem;
    justify-self: start;
    font-size: 0.56rem;
    letter-spacing: 0.03em;
    padding: 0.17rem 0.42rem;
  }

  .country-map-scale__label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .country-map-control {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.86rem;
  }

  .country-map-control--reset {
    min-width: 56px;
    font-size: 0.7rem;
  }

  .country-map-control--top10 {
    min-width: 58px;
    font-size: 0.66rem;
  }

  .country-map-control--options {
    min-width: 64px;
    font-size: 0.68rem;
  }

  .country-map-options {
    top: calc(0.52rem + 30px + 0.34rem);
    right: 0.52rem;
    min-width: 142px;
    max-height: min(46vh, 250px);
    padding: 0.34rem;
    border-radius: 10px;
  }

  .country-quiz-timer {
    width: 56px;
    height: 56px;
  }

  .country-quiz-timer__svg {
    width: 49px;
    height: 49px;
  }

  .country-quiz-timer__label {
    font-size: 0.78rem;
  }

  .country-quiz-card {
    top: 0.52rem;
    left: 0.52rem;
    width: min(244px, calc(100% - 6.2rem));
    border-radius: 10px;
    padding: 0.44rem 0.48rem;
    gap: 0.34rem;
  }

  .country-quiz-card__instruction {
    font-size: 0.62rem;
    line-height: 1.34;
  }

  .country-quiz-card__status {
    font-size: 0.57rem;
  }

  .country-map-options__item {
    border-radius: 8px;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    padding: 0.34rem 0.44rem;
  }

  .country-map-tooltip {
    max-width: min(240px, 88vw);
    font-size: 0.58rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
  }

  .menu-drawer__header,
  .menu-drawer__content,
  .section-modal__header,
  .section-modal__body {
    padding-inline: 0.78rem;
  }

  .section-modal.section-modal--profile {
    width: min(96vw, 430px);
    height: min(94dvh, 860px);
    max-height: min(94dvh, 860px);
  }

  .section-modal.section-modal--profile .section-modal__body {
    padding: 0.66rem;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .profile-modal-content {
    min-height: 0;
    gap: 0.5rem;
  }

  .profile-modal-datetime {
    display: none;
  }

  .profile-preview-card {
    --profile-avatar-slot-size: 116px;
    --profile-xp-slot-height: 31px;
    width: min(100%, 332px);
    padding: 0.64rem 0.68rem 0.52rem;
    border-radius: 16px;
  }

  .profile-preview-card__top-left {
    width: min(100%, 292px);
    column-gap: 0.56rem;
    row-gap: 0.4rem;
  }

  .profile-modal-controls {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-top: 0.34rem;
    background: linear-gradient(180deg, rgba(7, 15, 28, 0), rgba(7, 15, 28, 0.92) 46%);
  }

  .profile-modal-controls .button {
    min-height: 32px;
    padding: 0.26rem 0.5rem;
    font-size: 0.66rem;
  }

  .profile-badge-picker__grid,
  .medal-grid {
    gap: 0.58rem;
  }

  .profile-badge-picker__option,
  .medal-tile {
    min-height: 182px;
    padding: 0.52rem 0.48rem;
  }

  .profile-badge-picker__option-media,
  .medal-tile__image {
    max-width: 136px;
    height: 122px;
    min-height: 122px;
  }

  .menu-section-button {
    padding: 0.66rem 0.75rem;
  }

  .modal-section-content p,
  .modal-section-content li,
  .modal-section-content td,
  .modal-section-content th {
    font-size: 0.86rem;
  }

  .penalty-table {
    font-size: 0.82rem;
  }
}