/* ==========================================================================
   Jeevan Dharma responsive stylesheet
   Loaded after main.css. Keep base styles in main.css and viewport,
   orientation, capability, and accessibility overrides in this file.

   Breakpoint order: shared phone/tablet -> narrow phones -> normal phones ->
   large phones -> tablets -> short screens -> laptops/desktops -> large
   monitors -> orientation/capability/accessibility overrides.
   ========================================================================== */

/* Shared phone and tablet layout */
@media (max-width: 1023px) {
  .landing-backdrop {
    background-position: center top;
  }

  .landing-content {
    /* padding: 20px 20px 12px 12px; */
    gap: 8px;
    overflow: hidden;
  }

  .landing-screen::before {
    border-width: 42px;
    border-image-width: 50px;
  }

  .landing-topbar {
    align-items: center;
  }

  .online-pill {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .online-pill span {
    width: 7px;
    height: 7px;
  }

  .landing-actions {
    gap: 7px;
  }

  .landing-icon-button {
    min-width: 43px;
  }

  .landing-icon-button:nth-child(-n + 2) {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .landing-icon-button strong {
    width: 36px;
    height: 36px;
    margin-bottom: 2px;
    font-size: 18px;
  }

  .landing-icon-button span {
    font-size: 16px;
  }

  .landing-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .landing-left {
    align-items: center;
    width: 100%;
  }

  .hero-copy,
  .landing-message {
    width: 100%;
    text-align: center;
  }

  .hero-logo {
    /* width: min(280px, 76vw); */
    margin: 0 auto;
  }

  .hero-subtitle {
    width: min(230px, 68vw);
    min-height: 28px;
    margin-top: -3px;
    font-size: clamp(18px, 6vw, 25px);
  }

  .landing-message {
    margin-top: 0;
  }

  .landing-message h1 {
    font-size: clamp(18px, 5.6vw, 27px);
  }

  body.is-firebase-signed-in .start-journey {
    min-height: 48px;
  }

  body.is-firebase-signed-in .start-journey span {
    font-size: clamp(16px, 5vw, 22px);
  }

  .landing-secondary-actions {
    display: none;
  }

  .landing-side {
    width: 100%;
    gap: 8px;
  }

  .player-card {
    display: none;
  }

  body.is-firebase-signed-in .player-card {
    display: grid;
  }

  .auth-card {
    width: min(300px, 88vw);
    margin: 0 auto;
    padding: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .auth-card h2,
  .auth-card p {
    display: none;
  }

  .google-signin,
  .guest-button {
    min-height: 36px;
    margin-top: 6px;
    font-size: 13px;
  }

  .google-mark {
    width: 24px;
    height: 24px;
  }

  .auth-divider {
    margin-top: 5px;
    font-size: 12px;
  }

  .mobile-action-deck {
    z-index: 2;
    display: grid;
    width: min(330px, 92vw);
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 auto;
  }

  .mobile-action-deck button {
    min-height: 46px;
    padding: 6px 4px;
    font-size: 11px;
  }

  .mobile-action-deck span {
    display: block;
    margin: 0 0 3px;
    font-size: 17px;
  }

  .landing-feature-strip {
    z-index: 2;
    width: min(330px, 92vw);
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0 auto;
  }

  .landing-feature-strip button {
    display: block;
    min-height: 44px;
    padding: 6px 4px;
    font-size: 11px;
  }

  .landing-feature-strip button span {
    display: block;
    margin: 0 0 3px;
    font-size: 16px;
  }

  .landing-feature-strip div {
    display: none;
  }

  .landing-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(420px, calc(100vw - 28px));
    max-height: calc(100% - 28px);
    padding: 14px;
    transform: translate(-50%, -46%) scale(0.98);
  }

  .landing-panel.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  .landing-panel header {
    grid-template-columns: 36px 1fr 36px;
    margin-bottom: 12px;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .badge-grid.badge-grid--compact {
    gap: 8px 6px;
  }
}

/* Extra-small phones */
@media (max-width: 360px) {
  .hero-subtitle {
    font-size: 25px;
  }

  .landing-message h1,
  .image-button span {
    font-size: 25px;
  }

  .chapter-title h2 {
    font-size: 19px;
  }

  .stat-item {
    font-size: 23px;
  }

  .question-card p,
  .quiz-option span {
    font-size: 18px;
  }

  .choose-wisely span {
    font-size: 20px;
  }
}

/* Ultra-small phones */
@media (max-width: 320px) {
  .landing-content,
  .account-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-logo {
    width: min(220px, 88vw);
  }

  .landing-message h1 {
    font-size: clamp(16px, 5vw, 18px);
  }

  .progress-save-dialog {
    padding: 12px 8px 12px;
  }

  .progress-save-title {
    font-size: clamp(20px, 6vw, 24px);
  }
}

/* Tall normal phones */
@media (min-width: 360px) and (max-width: 430px) and (min-height: 740px) {
  .landing-content {
    justify-content: center;
  }

  .landing-message {
    padding-bottom: 0;
  }
}

/* Large phones */
@media (min-width: 481px) and (max-width: 767px) {
  .device-frame {
    width: min(100vw, 420px);
    margin: 0 auto;
  }

  .landing-content {
    padding-left: var(--content-gutter);
    padding-right: var(--content-gutter);
  }
}

/* Small tablets and foldables */
@media (min-width: 640px) and (max-width: 1023px) {
  .page {
    display: grid;
    place-items: center;
    padding: 14px;
  }

  .device-frame {
    width: min(calc(100vw - 28px), 45.995vh);
    height: min(calc(var(--app-height) - 28px), 217.413vw);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }
}

/* Normal tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .landing-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .account-content,
  .podcast-content {
    max-width: 640px;
    margin: 0 auto;
  }

  .progress-save-dialog {
    width: min(480px, 92vw);
  }

  /* Secondary params (life badges) text, ~10% smaller on iPad. */
  .badge-item > span {
    font-size: clamp(9px, 2.88vw, 10.8px);
  }

  .badge-grid.badge-grid--compact .badge-item > span {
    font-size: clamp(9px, 2.88vw, 18px);
  }
}

/* Short-height devices */
@media (max-height: 760px) {
  .landing-content {
    /* padding-top: 11.5%; */
    padding-bottom: max(16px, var(--safe-bottom));
  }

  .landing-message {
    padding-bottom: 0;
  }

  .stats-strip {
    height: auto;
  }

  .scene-wrap {
    height: 35%;
  }

  .question-card {
    margin-bottom: 9px;
  }

  .question-card img {
    height: 100px;
  }

  .quiz-options {
    gap: 6px;
  }

  .quiz-option {
    min-height: 44px;
  }

  .quiz-option span {
    font-size: clamp(18px, 4.6vw, 23px);
    min-height: 44px;
    padding: 6px 58px 6px 24px;
  }

  .question-card p {
    font-size: clamp(18px, 4.8vw, 23px);
  }

  .choose-wisely span {
    font-size: clamp(19px, 5vw, 24px);
  }
}

/* Short phones and tablets */
@media (max-height: 760px) and (max-width: 1023px) {
  .hero-logo {
    width: min(300px, 68vw);
  }

  .hero-subtitle {
    min-height: 24px;
    font-size: clamp(16px, 5vw, 21px);
  }

  .landing-message h1 {
    font-size: clamp(17px, 5vw, 22px);
  }

  body.is-firebase-signed-in .start-journey {
    min-height: 42px;
  }

  .google-signin,
  .guest-button {
    min-height: 32px;
  }

  .mobile-action-deck button,
  .landing-feature-strip button {
    min-height: 38px;
  }
}

/* Large tablets, laptops, and desktops */
@media (min-width: 1024px) {
  .page {
    display: grid;
    place-items: center;
    padding: 14px;
    /* background: #080503; */
  }

  .quiz-body
  {
    /* margin-top: 50px; */
  }

  .device-frame {
    width: min(calc(100vw - 28px), var(--device-max-width));
    max-width: var(--device-max-width);
    height: min(calc(var(--app-height) - 28px), calc(var(--device-max-width) * var(--device-aspect)));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }

  .play-panel,
  .scene-wrap::before
  {
    border-width: 80px;
  }

  /* .scene-wrap::before {
    content: "";
  } */

  /* .app-shell {
    background:
      linear-gradient(90deg, rgba(12, 7, 5, 0.84), rgba(28, 18, 11, 0.52) 46%, rgba(10, 6, 5, 0.9)),
      url("../img/bg.jpg") center / cover repeat;
  } */

  .landing-backdrop {
    background:
      /* linear-gradient(90deg, rgba(9, 5, 3, 0.78) 0%, rgba(12, 6, 4, 0.3) 45%, rgba(8, 4, 3, 0.86) 100%), */
      url("../img/landing_bg.jpg") center 35% / cover no-repeat;
  }

  .landing-content {
    align-items: center;
    justify-content: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: max(14px, var(--safe-top)) 22px max(28px, var(--safe-bottom));
  }

  .hero-copy,
  .landing-message {
    width: 100%;
    text-align: center;
  }

  .hero-logo {
    width: min(335px, 84vw);
    margin: 0 auto;
  }

  .hero-subtitle {
    font-size: clamp(34px, 3vw, 52px);
  }

  .landing-message {
    margin-top: 0;
    padding-bottom: 0;
  }

  .landing-message h1 {
    font-size: clamp(32px, 3.4vw, 56px);
    line-height: 1.08;
  }

  .landing-meter {
    height: auto;
  }

  .quiz-content {
    --desktop-panel-top-gap: clamp(26px, 3vh, 36px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: 5px clamp(42px, 4.6vw, 88px) clamp(28px, 3.2vh, 50px);
    background:
      radial-gradient(circle at 26% 52%, rgba(172, 94, 29, 0.18), transparent 36%),
      linear-gradient(180deg, rgba(18, 19, 26, 0.96), rgba(18, 11, 7, 0.97)),
      url("../img/bg_new.webp") center / 760px repeat;
  }

  .quiz-content::before {
    inset: 0;
    z-index: 4;
    border: 12px solid transparent;
    border-image: linear-gradient(180deg, #6d3b14, #b77728 48%, #5b2c0d) 1;
    background: none;
    box-shadow:
      inset 0 0 0 2px rgba(245, 186, 89, 0.42),
      inset 0 0 22px rgba(0, 0, 0, 0.62);
  }

  .quiz-content::after {
    inset: 12px;
    height: auto;
    border: 1px solid rgba(214, 137, 48, 0.34);
    background: none;
    pointer-events: none;
  }

  /* .quiz-frame-corners {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    pointer-events: none;
  } */

  /* .quiz-frame-corner {
    position: absolute;
    width: clamp(88px, 7vw, 122px);
    aspect-ratio: 663 / 662;
    background: url("../img/cornor_frame.webp") center / contain no-repeat;
    transform-origin: center;
    filter: drop-shadow(0 2px 1px rgba(60, 26, 3, 0.5));
  } */

  .corner-top-left {
    top: 9px;
    left: 9px;
  }

  .corner-top-right {
    top: 9px;
    right: 9px;
    transform: rotate(90deg);
  }

  .corner-bottom-right {
    right: 9px;
    bottom: 9px;
    transform: rotate(180deg);
  }

  .corner-bottom-left {
    left: 9px;
    bottom: 9px;
    transform: rotate(270deg);
  }

  .quiz-header {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: 0;
    max-width: none;
    padding: 0 0 8px;
    position: relative;
    z-index: 1;
  }

  .quiz-body {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 3.2vh, 42px) clamp(42px, 4.6vw, 86px);
    align-items: stretch;
    min-height: 0;
  }

  .chapter-title {
    position: relative;
    z-index: 1;
    width: calc(100% + (2 * clamp(42px, 6vw, 88px)));
    margin: 0 calc(-1 * clamp(42px, 6vw, 88px));
    justify-self: stretch;
    min-height: 116px;
    aspect-ratio: auto;

    /* background: linear-gradient(180deg, #0F161C, #131e24); */
    
    /* background: linear-gradient(180deg, rgba(37, 59, 75, 0.98), rgba(35, 56, 72, 0.98)); */
    /* border-top: 1px solid rgba(172, 113, 38, 0.72); */
    /* border-style: double; */
    background:
        url("../img/bg_noise.jpg");
    border-bottom: 5px double #6f3a05;
    /* border-left: 0; */
    /* border-right: 0; */
    /* box-shadow:
      inset 0 1px 0 rgba(230, 174, 87, 0.15),
      inset 0 -12px 24px rgba(0, 0, 0, 0.12); */
    /* background-image: url('../img/bg_noise.webp'); */
    overflow: hidden;
  }


  .chapter-title::before,
  .chapter-title::after {
    content: "";
    position: absolute;
    inset: 12px 18px;
    pointer-events: none;
  }

  .chapter-title::before {
    inset: auto 0 0;
    height: 1px;
    border: 0;
    /* background: linear-gradient(90deg, transparent 3%, rgba(186, 132, 52, 0.3) 18%, rgba(186, 132, 52, 0.3) 82%, transparent 97%); */
  }

  .chapter-title::after {
    inset: auto 0 44px;
    height: 1px;
    /* background: linear-gradient(90deg, transparent 4%, rgba(196, 140, 59, 0.12) 18%, rgba(196, 140, 59, 0.12) 82%, transparent 96%); */
  }

  .chapter-title h2 {
    inset: 0 30px 50px;
    color: #F5CF94;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    font-size: clamp(19px, 3vw, 30px);
    font-family: "Souvenir", serif;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.24);
    white-space: nowrap;
    gap: 6px;
    text-transform: uppercase;
  }

  .chapter-title h2::before {
    content: "Chapter - ";
    flex: 0 0 auto;
  }

  .chapter-title img {
    display: none;
  }

  .stats-strip {
    position: relative;
    z-index: 1;
    width: min(580px, 50vw);
    justify-self: center;
    align-self: end;
    min-height: 52px;
    aspect-ratio: auto;
    margin: -29px auto 0;
    padding: 8px 18px 9px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* background:
      linear-gradient(180deg, rgba(92, 48, 17, 0.96), rgba(47, 24, 10, 0.98)),
      linear-gradient(90deg, rgba(213, 154, 65, 0.08), rgba(255, 255, 255, 0));
    border: 1px solid rgba(171, 112, 39, 0.72);
    box-shadow:
      inset 0 0 0 1px rgba(232, 175, 87, 0.18),
      0 8px 16px rgba(0, 0, 0, 0.16); */
    overflow: hidden;
  }

  .stats-strip::before,
  .stats-strip::after {
    display: none;
  }

  .stat-item {
    gap: 6px;
    font-size: clamp(20px, 1.25vw, 28px);
  }

  .stat-item:not(.stat-wealth)::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 1px;
    height: 64%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, rgba(217, 163, 76, 0.55), transparent);
  }

  .stat-item:nth-child(2) img,
  .stat-item:nth-child(4) img {
    width: 30px;
  }

  .stat-item:nth-child(3) img {
    width: 30px;
  }

  .stat-wealth img {
    width: 30px;
  }

  .scene-wrap {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.48);
    overflow: hidden;
    z-index: 1;
    /* border-width: 20px;
    border-image-slice: 121 121 126 126;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-source: url('../img/frame_question.webp'); */
  }

  /* .scene-wrap::after {
    content: none;
  } */

  .scene-image {
    position: absolute;
    z-index: 0;
    object-position: center;
  }


  .play-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(12px, 1.7vh, 20px);
    padding: var(--desktop-panel-top-gap) 0 0;
  }



  .question-area {
    display: block;
    padding: 0;
  }

  .question-area::after {
    display: none;
  }

  .question-card {
    width: 100%;
    margin: 0 0 clamp(14px, 1.8vh, 22px);
    min-height: clamp(118px, 12vh, 150px);
  }

  .question-card img {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .question-card p {
    position: relative;
    min-height: clamp(118px, 12vh, 150px);
    padding: clamp(18px, 2.1vh, 26px) 34px;
    font-size: clamp(21px, 1.45vw, 29px);
    line-height: 1.08;
  }

  .question-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0px;
    height: 2px;
    background: url("../img/question_border_bottom.webp") center top / 100% 100% no-repeat;
  }

  .question-card::after {
    z-index: 2;
    height: 2px;
  }

  .quiz-options {
    gap: clamp(10px, 1.15vh, 14px);
  }

  .quiz-option {
    min-height: clamp(56px, 5.4vh, 68px);
  }

  .quiz-option span {
    min-height: clamp(56px, 5.4vh, 68px);
    padding: 10px 64px 10px 24px;
    font-size: clamp(19px, 1.2vw, 25px);
    line-height: 1.05;
  }

  .quiz-option::after {
    right: 24px;
    width: 28px;
    height: 28px;
    font-size: 26px;
  }

  .choose-wisely {
    margin: clamp(4px, 0.8vh, 10px) auto 0;
  }

  .quiz-content > img[style] {
    display: none;
  }

  .impact-overlay {
    padding-inline: 24px;
    box-sizing: border-box;
  }

  .impact-card {
    width: min(420px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    /* padding: 34px 30px;
    border-radius: 10px; */
  }

  .impact-card h3 {
    font-size: 38px;
  }

  .impact-card p,
  .impact-stats div {
    font-size: 22px;
  }

  .result-content {
    padding: 18px;
  }

  .result-panel {
    width: min(430px, 88vw);
    max-width: 370px;
    max-height: calc(100% - 12px);
    padding: 30px 0px 28px;
  }

  .result-panel h2 {
    font-size: clamp(34px, 3vw, 44px);
  }

  .result-panel #resultSummary {
    min-height: 48px;
    font-size: clamp(20px, 1.65vw, 24px);
  }

  .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .result-stat {
    grid-template-columns: 42px 1fr;
    justify-items: stretch;
    text-align: left;
    min-height: 86px;
  }

  .result-stat img {
    grid-row: 1 / 3;
  }

  .result-stat span {
    font-size: 16px;
  }

  .result-stat strong,
  .result-meta strong {
    font-size: 32px;
  }

  .result-panel .continue-chapter,
  .result-panel .complete-journey,
  .result-panel .play-again,
  .result-panel .share-journey {
    margin: 20px auto 0;
    vertical-align: top;
  }

  body.force-desktop-portrait .page {
    display: grid;
    place-items: center;
    padding: 14px;
    /* background: #080503; */
  }

  body.force-desktop-portrait .device-frame {
    width: min(calc(100vw - 28px), 350px);
    max-width: var(--device-max-width);
    height: min(calc(var(--app-height) - 28px), calc(var(--device-max-width) * var(--device-aspect)));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }

  body.force-desktop-portrait .quiz-frame::before,
  body.force-desktop-portrait .result-screen::before {
    border-width: 42px;
    border-image-width: 28px;
  }

  body.force-desktop-portrait .landing-content {
    max-width: none;
    margin: 0;
    padding: max(14px, var(--safe-top)) 22px max(28px, var(--safe-bottom));
    overflow: hidden;
  }

  body.force-desktop-portrait .landing-main {
    display: flex;
    justify-content: center;
  }

  body.force-desktop-portrait .landing-left {
    align-items: center;
    width: 100%;
  }

  .landing-actions {
    gap: 6px;
  }

  .landing-icon-button {
    min-width: 52px;
  }

  .landing-icon-button strong {
    width: 44px;
    height: 44px;
  }

  .badge-progress-label,
  .badge-item > span,
  .badge-grid.badge-grid--compact .badge-item > span {
    font-size: 12px;
  }

  body.force-desktop-portrait .hero-copy,
  body.force-desktop-portrait .landing-message {
    width: 100%;
    text-align: center;
  }

  body.force-desktop-portrait .hero-logo {
    width: min(275px, 84vw);
    margin: 0 auto;
  }

  body.force-desktop-portrait .landing-message {
    margin-top: 0;
  }

  body.force-desktop-portrait .landing-message h1 {
    font-size: clamp(18px, 5.6vw, 27px);
  }

  body.force-desktop-portrait .landing-meter {
    margin-top: 0;
  }

  body.force-desktop-portrait .landing-side {
    width: 100%;
    gap: 8px;
  }

  body.force-desktop-portrait .auth-card {
    width: min(300px, 88vw);
    margin: 0 auto;
    padding: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.force-desktop-portrait .auth-card h2,
  body.force-desktop-portrait .auth-card p {
    display: none;
  }

  body.force-desktop-portrait .quiz-content {
    --desktop-panel-top-gap: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #15161c;
  }

  body.force-desktop-portrait .quiz-content::before,
  body.force-desktop-portrait .quiz-content::after {
    display: none;
  }

  body.force-desktop-portrait .quiz-header {
    display: block;
    flex-shrink: 0;
    max-width: none;
    padding: 0;
  }

  body.force-desktop-portrait .quiz-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  body.force-desktop-portrait .chapter-title {
    width: 100%;
    min-height: 0;
    aspect-ratio: 392 / 64;
    margin: 0;
    border-bottom: 0;
  }

  body.force-desktop-portrait .chapter-title h2 {
    inset: 0 8%;
    padding-top: clamp(2px, 0.5vw, 4px);
    font-size: clamp(20px, 5.4vw, 28px);
    white-space: nowrap;
  }

  body.force-desktop-portrait .chapter-title h2::before {
    content: none;
  }

  body.force-desktop-portrait .stats-strip {
    width: 100%;
    min-height: 0;
    aspect-ratio: 500 / 60;
    margin-top: 0;
    padding: 15px 4.2% 3.4% 4.2%;
  }

  body.force-desktop-portrait .stat-item {
    gap: 4px;
    font-size: clamp(22px, 5vw, 22px);
  }

  body.force-desktop-portrait .stat-item:not(.stat-wealth)::after {
    content: none;
  }

  body.force-desktop-portrait .scene-wrap {
    height: 30%;
    max-height: none;
    border-width: 0;
    box-shadow: none;
  }

  body.force-desktop-portrait .play-panel {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding-top: 0;
    border-width: 0px;
    border-image-width: 50px;
  }

  body.force-desktop-portrait .question-area {
    display: block;
    flex: initial;
    padding: 0 4.8%;
    overflow: visible;
  }

  body.force-desktop-portrait .question-card {
    width: calc(100% + 9.6%);
    margin: 0 -4.8% 13px;
    min-height: 0;
    max-height: none;
  }

  body.force-desktop-portrait .question-card p {
    min-height: 0;
    max-height: none;
    padding: 14px 18px 14px;
    font-size: clamp(20px, 5.55vw, 25px);
    line-height: 1;
  }

  body.force-desktop-portrait .quiz-options {
    width: 90%;
    min-height: 0;
    display: grid;
    gap: clamp(7px, 1.2vh, 10px);
    overflow: visible;
  }

  body.force-desktop-portrait .quiz-option {
    flex: initial;
    min-height: 52px;
    max-height: none;
  }

  body.force-desktop-portrait .quiz-option span {
    min-height: 52px;
    height: auto;
    padding: 8px 64px 8px 26px;
    font-size: clamp(20px, 5vw, 20px);
    line-height: 1.05;
  }

  body.force-desktop-portrait .choose-wisely {
    flex-shrink: initial;
    margin: auto auto 10px;
  }

  body.force-desktop-portrait .choose-wisely img {
    width: 100%;
  }

  .badge-progress-label,
  .badge-item > span,
  .badge-grid.badge-grid--compact .badge-item > span {
    font-size: 18px;
  }

  .badge-progress-meta strong {
    font-size: 18px;
  }
}

/* Short laptops */
@media (min-width: 1280px) and (max-width: 1440px) and (min-height: 560px) and (max-height: 680px) {
  .landing-screen::before {
    border-width: 34px;
    border-image-width: 22px;
  }

  .landing-content {
    padding: max(14px, var(--safe-top)) 22px max(28px, var(--safe-bottom));
  }

  .landing-main {
    gap: 0;
  }

  .hero-logo {
    width: min(335px, 84vw);
  }

  .hero-subtitle {
    width: 290px;
    min-height: 34px;
    font-size: 28px;
  }

  .landing-message {
    margin-top: 0;
  }

  .landing-message h1 {
    font-size: 32px;
  }

  .player-card,
  .auth-card {
    padding: 14px;
  }

  .landing-feature-strip div {
    min-height: 58px;
    padding: 9px 14px;
  }

  .quiz-frame::before {
    border-width: 34px;
    border-image-width: 22px;
  }

  .quiz-content {
    --desktop-panel-top-gap: 8px;
    height: 100%;
    padding: 2px 28px 10px;
    overflow: hidden;
  }

  .quiz-header {
    padding: 0 0 4px;
  }

  .chapter-title {
    min-height: 68px;
  }

  .chapter-title h2 {
    inset: 0 24px 34px;
    font-size: 22px;
  }

  .stats-strip {
    width: min(480px, 72vw);
    min-height: 42px;
    margin: -18px auto 0;
    padding: 5px 12px 6px;
  }

  .stat-item {
    font-size: 20px;
    gap: 4px;
  }

  .stat-item:nth-child(2) img,
  .stat-item:nth-child(3) img,
  .stat-item:nth-child(4) img,
  .stat-wealth img {
    width: 24px;
  }

  .quiz-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 28px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .scene-wrap {
    height: 100%;
    max-height: 100%;
    border-width: 12px;
    border-image-width: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  }

  .scene-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .play-panel {
    height: 100%;
    min-height: 0;
    gap: 6px;
    padding-top: var(--desktop-panel-top-gap);
    border-width: 34px;
    border-image-width: 22px;
    overflow: hidden;
  }

  .question-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .question-card {
    flex: 0 1 auto;
    margin: 0 0 6px;
    min-height: 0;
    max-height: 72px;
  }

  .question-card p {
    min-height: 0;
    max-height: 72px;
    padding: 8px 20px;
    font-size: 17px;
    line-height: 1.05;
  }

  .quiz-options {
    flex: 1 1 0;
    width: 80%;
    margin-inline: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 4px;
    overflow: hidden;
  }

  .quiz-option {
    flex: 1 1 0;
    min-height: 0;
    max-height: 38px;
  }

  .quiz-option span {
    min-height: 0;
    height: 100%;
    padding: 4px 48px 4px 18px;
    font-size: 15px;
    line-height: 1.02;
  }

  .quiz-option::after {
    right: 16px;
    width: 22px;
    height: 22px;
    font-size: 20px;
  }

  .choose-wisely {
    flex-shrink: 0;
    margin: 2px auto 0;
  }

  .choose-wisely img {
    width: 100%;
    margin: 0 auto;
  }

  .impact-overlay {
    align-items: center;
    padding: 0 12px;
  }

  .impact-card {
    width: min(400px, calc(100% - 12px));
    max-height: calc(100% - 12px);
    padding: 12px 0 16px;
    border-width: 24px;
    border-image-slice: 130 200 200 200 fill;
  }

  .impact-card h3 {
    margin-bottom: 8px;
    font-size: 26px;
    letter-spacing: 0.12em;
  }

  .impact-card p {
    margin-bottom: 12px;
    font-size: 12px;
  }



  .impact-stats {
    gap: 6px;
    margin-bottom: 12px;
    max-width: 300px;
  }

  .impact-stats div {
    padding: 8px 10px;
    font-size: 14px;
  }

  .impact-card .image-button {
    margin-top: 10px;
  }

  body.force-desktop-portrait .landing-message h1 {
    font-size: clamp(18px, 5.6vw, 20px);
  }

  .landing-icon-button strong {
    width: clamp(30px, 2vw, 45px);
    height: clamp(30px, 2vw, 45px);
  }

  .landing-icon-button {
    min-width: clamp(16px, 2vw, 20px);
  }

  .landing-icon-button span {
    font-size: clamp(8px, 0.5vw, 16px);
  }

  .landing-panel {
    width: min(250px, calc(100vw - 36px));
    max-height: min(680px, calc(100% - 84px));
  }

  .player-info h2,
  .auth-card h2,
  .landing-panel h2 {
    font-size: clamp(18px, 1vw, 30px);
  }

  body.force-desktop-portrait .chapter-title h2 {
    font-size: clamp(16px, 3.4vw, 16px);
  }

  body.force-desktop-portrait .stats-strip {
    padding: 5px 2.2% 1.4%;
  }

  body.force-desktop-portrait .stat-item {
    font-size: clamp(14px, 2vw, 10px);
  }

  body.force-desktop-portrait .question-card p {
    font-size: clamp(16px, 2.55vw, 18px);
  }

  body.force-desktop-portrait .quiz-option {
    min-height: 40px;
    margin: 2px;
  }

  body.force-desktop-portrait .quiz-option span {
    min-height: 40px;
    padding: 8px 68px 8px 26px;
    font-size: clamp(14px, 2vw, 14px);
  }

  body.force-desktop-portrait .quiz-options {
    width: 90%;
    display: inline;
  }

  .result-content {
    padding: 10px;
  }

  .result-panel {
    width: min(286px, 88vw);
    max-width: 286px;
    max-height: calc(100% - 8px);
    padding: 0;
    border-image-width: 50px 20px 30px 20px;
  }

  .result-panel #resultSummary {
    min-height: 20px;
    font-size: clamp(12px, 0.5vw, 12px);
  }

  .result-stat {
    grid-template-columns: 20px 1fr;
    min-height: 50px;
    column-gap: 5px;
    padding: 5px;
  }

  .result-stat span {
    font-size: 10px;
  }

  .result-stat strong,
  .result-meta strong {
    font-size: 14px;
  }

  .result-meta {
    font-size: clamp(12px, 1.2vw, 12px);
  }
}

/* Standard laptops */
@media (min-width: 1366px) {
    body.force-desktop-portrait .device-frame {
    width: min(calc(100vw - 28px), 300px);
    max-width: var(--device-max-width);
    height: min(calc(var(--app-height) - 28px), calc(var(--device-max-width) * var(--device-aspect)));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  }

  body.force-desktop-portrait .scene-wrap {
        height: 45%;
        /* max-height: none;
        border-width: 0;
        box-shadow: none; */
    }

    #impactTitle{
      max-width: 110px;
    }

    .account-stat-card img {
    width: 30px;
    height: 30px;
    
}

.account-stat-copy span {
    font-size: 14px;
}

.account-stat-copy strong {
    font-size: 20px;
}
.account-stat-card {
  padding:0px;
  border-width: 15px 8px;
}

.account-back {
      width: 24px;
    height: 24px;
}

.account-avatar {
    width: 64px;
    height: 70px;
}

.badge-progress-list {
  padding:0px;
}

.badge-progress-bar {
      height: clamp(16px, 5.4vw, 18px);
}

.badge-progress-label, .badge-item > span, .badge-grid.badge-grid--compact .badge-item > span {
        font-size: 14px;
    }

}

/* Desktops */
@media (min-width: 1441px) {
  .landing-content {
    max-width: var(--device-max-width);
  }

  .quiz-content {
    max-width: var(--device-max-width);
    margin: 0 auto;
  }

  .account-content {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Large monitors */
@media (min-width: 1920px) {
  body.force-desktop-portrait .device-frame {
    width: min(calc(100vw - 28px), var(--device-max-width));
    max-width: var(--device-max-width);
    height: min(calc(var(--app-height) - 28px), calc(var(--device-max-width) * var(--device-aspect)));
  }

  .landing-content {
    max-width: var(--device-max-width);
  }
    body.force-desktop-portrait .scene-wrap {
        height: 30%;
        /* max-height: none;
        border-width: 0;
        box-shadow: none; */
    }
}

/* Phone and tablet landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-content {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 4px;
  }

  .landing-message {
    margin-top: 4px;
    padding-bottom: 0;
  }

  .landing-message h1 {
    font-size: clamp(14px, 3.5vh, 18px);
    line-height: 1.1;
  }

  .hero-logo {
    width: min(220px, 48vh, 84vw);
  }

  .start-journey {
    margin-top: 4px;
  }

  .reputation-line {
    margin-top: 0;
  }

  .quiz-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 10px;
  }

  .question-card p {
    font-size: clamp(14px, 2.8vh, 17px);
  }

  .quiz-option span {
    font-size: clamp(13px, 2.5vh, 16px);
    min-height: 36px;
    padding: 4px 44px 4px 16px;
  }

  .account-brand-logo {
    width: min(290px, 64vw);
  }

  .account-stats-grid {
    gap: 8px;
  }
}

/* Touch devices */
@media (pointer: coarse) {
  .landing-icon-button,
  .age-accordion-trigger,
  .progress-save-option,
  .account-back,
  .quiz-option,
  .image-button {
    min-height: 44px;
  }
}

/* High-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .landing-screen::before,
  .quiz-frame::before,
  .result-screen::before,
  .account-screen::before {
    image-rendering: auto;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landing-screen,
  .quiz-screen,
  .account-screen,
  .image-button,
  .age-accordion-panel-inner,
  .age-accordion-body--expanded,
  .age-accordion-body--collapsed,
  .badge-progress-bar__fill,
  .age-accordion-icon {
    transition: none;
  }

  .quiz-option.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }
}