/* Stage B: keep the project's existing responsive screen geometry.
   A fixed 1920x1080 canvas scaled to a 390px-high phone made normal text render
   at roughly 4-7px, so full screens must not receive the sprite/FHD scale. */
.qw-static-screen {
  box-sizing: border-box;
}

/* Moving objects: visual size only. Positions, velocities, spawn distances and
   collision radii remain in the existing gameplay coordinate system. */
.cursor-dot { width: var(--qw-sprite-27, 27px); height: var(--qw-sprite-27, 27px); }
.ship-sprite-cursor { width: var(--qw-sprite-54, 54px); height: var(--qw-sprite-54, 54px); }

.food-dot { width: var(--qw-sprite-15, 15px); height: var(--qw-sprite-15, 15px); }
.food-dot--red { width: var(--qw-sprite-30, 30px) !important; height: var(--qw-sprite-30, 30px) !important; }
.food-dot--ghost { width: var(--qw-sprite-22, 22px) !important; height: var(--qw-sprite-22, 22px) !important; }
.food-dot--cursed { width: var(--qw-sprite-18, 18px) !important; height: var(--qw-sprite-18, 18px) !important; }

.enemy-dot { width: var(--qw-sprite-11, 11px); height: var(--qw-sprite-11, 11px); }
.enemy-dot--asteroid { width: var(--qw-sprite-24, 24px); height: var(--qw-sprite-24, 24px); }
.enemy-dot--heavy { width: var(--qw-sprite-18, 18px); height: var(--qw-sprite-18, 18px); }
.enemy-dot--fast { width: var(--qw-sprite-7, 7px); height: var(--qw-sprite-7, 7px); }
.enemy-dot--duo { width: var(--qw-sprite-10, 10px); height: var(--qw-sprite-10, 10px); }
.enemy-dot--mimic { width: var(--qw-sprite-15, 15px); height: var(--qw-sprite-15, 15px); }
.enemy-dot--mimic-revealed { width: var(--qw-sprite-20, 20px); height: var(--qw-sprite-13, 13px); }
.heal-soul-dot { width: var(--qw-sprite-16, 16px); height: var(--qw-sprite-16, 16px); }

.boss1-weak-shard { width: var(--qw-sprite-14, 14px); height: var(--qw-sprite-14, 14px); }
.boss1-fragment > svg,
.boss1-weak-shard > svg { display: block; width: 100%; height: 100%; }

/* Standalone static anchors that are not full-screen containers. */
.qw-open-btn {
  left: calc(var(--qw-ui-offset-x, 0px) + var(--qw-sprite-14, 14px));
  top: calc(var(--qw-ui-offset-y, 0px) + var(--qw-sprite-14, 14px));
  transform: scale(var(--qw-ui-scale, 1));
  transform-origin: top left;
}

#boss-hp-bar {
  top: var(--qw-ui-boss-top, 208px);
  transform: translateX(-50%) scale(var(--qw-ui-scale, 1));
  transform-origin: center top;
}
@keyframes qw-boss-hp-shake-scaled {
  0%   { transform: translateX(-50%) translateY(0) scale(var(--qw-ui-scale, 1)); }
  15%  { transform: translateX(calc(-50% + 5px)) translateY(-2px) scale(var(--qw-ui-scale, 1)); }
  30%  { transform: translateX(calc(-50% - 5px)) translateY(2px) scale(var(--qw-ui-scale, 1)); }
  45%  { transform: translateX(calc(-50% + 3px)) translateY(-1px) scale(var(--qw-ui-scale, 1)); }
  60%  { transform: translateX(calc(-50% - 3px)) translateY(1px) scale(var(--qw-ui-scale, 1)); }
  75%  { transform: translateX(calc(-50% + 1px)) translateY(0) scale(var(--qw-ui-scale, 1)); }
  100% { transform: translateX(-50%) translateY(0) scale(var(--qw-ui-scale, 1)); }
}
#boss-hp-bar.boss-hp-bar--shake { animation-name: qw-boss-hp-shake-scaled; }

/* Readability floor for phone/tablet UI. These are the authored selectors that
   use 7-11px text; larger type keeps its original hierarchy and proportions. */
@media (pointer: coarse) {
  :root {
    --qw-safe-top: max(8px, env(safe-area-inset-top));
    --qw-safe-right: max(12px, env(safe-area-inset-right));
    --qw-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --qw-safe-left: max(12px, env(safe-area-inset-left));
  }

  /* Full-screen UI follows the logical landscape viewport, including the CSS
     rotation fallback used before native orientation lock succeeds. */
  .menu-panel,
  .settings-overlay,
  .save-slots-overlay,
  .ship-manifest-overlay,
  .crew-overlay,
  .nar-overlay,
  .game-over-overlay,
  .cyp-overlay,
  .qw-confirm-overlay,
  .toship-overlay,
  .shipcond-overlay,
  .socials-overlay {
    width: var(--qw-viewport-width, 100vw);
    height: var(--qw-viewport-height, 100vh);
    box-sizing: border-box;
  }

  /* Compact main-menu composition: it always fits between device borders but
     keeps readable type and 44px touch targets. */
  .menu-panel {
    padding:
      var(--qw-safe-top)
      var(--qw-safe-right)
      var(--qw-safe-bottom)
      var(--qw-safe-left);
    overflow: hidden;
  }
  .menu-panel__inner {
    width: min(100%, 22.5rem);
    max-height: 100% !important;
    overflow: visible !important;
    justify-content: center;
  }
  .menu-panel__eyebrow {
    margin-bottom: 0.25rem;
  }
  .menu-panel__title {
    max-width: 100%;
    margin-bottom: 0.4rem;
    font-size: clamp(1.75rem, 7.5vh, 2.25rem);
    line-height: 1;
  }
  .menu-panel__sep {
    height: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .menu-panel__nav {
    width: min(100%, 21rem);
    gap: 0.2rem;
    padding: 0.25rem 0;
  }
  .menu-panel-btn {
    min-height: 44px;
    padding: 0.35rem 1.125rem;
    line-height: 1.15;
  }
  .menu-panel__footer {
    margin-top: 0.45rem;
  }
  .qw-compact-height .menu-panel__title {
    font-size: 1.75rem;
  }
  .qw-compact-height .menu-panel__nav {
    gap: 0;
  }
  .qw-compact-height .menu-panel__footer {
    display: none;
  }

  /* Other menu screens inherit the same border-safe box. Their own internal
     layout remains intact, but the outer panel cannot extend beyond the phone. */
  .settings-overlay,
  .save-slots-overlay,
  .crew-overlay,
  .nar-overlay,
  .game-over-overlay,
  .cyp-overlay,
  .qw-confirm-overlay,
  .toship-overlay,
  .shipcond-overlay {
    padding:
      var(--qw-safe-top)
      var(--qw-safe-right)
      var(--qw-safe-bottom)
      var(--qw-safe-left);
  }
  .settings-panel,
  .save-slots-panel,
  .crew-panel,
  .nar-panel,
  .game-over-panel,
  .cyp-panel,
  .qw-confirm-panel,
  .toship-panel,
  .shipcond-panel {
    box-sizing: border-box;
    max-width: calc(var(--qw-viewport-width, 100vw) - var(--qw-safe-left) - var(--qw-safe-right));
    max-height: calc(var(--qw-viewport-height, 100vh) - var(--qw-safe-top) - var(--qw-safe-bottom));
  }

  /* Mobile HUD has three non-overlapping zones: ship state at left, SCORE in
     the centre, quest state at right. Desktop inline positions are overridden. */
  .game-shell {
    width: var(--qw-viewport-width, 100vw);
    height: var(--qw-viewport-height, 100vh);
  }
  .hud2-frame {
    inset:
      var(--qw-safe-top)
      var(--qw-safe-right)
      var(--qw-safe-bottom)
      var(--qw-safe-left) !important;
    perspective: none;
  }
  .hud2-gauge-svg {
    display: none;
  }
  .hud2-side-panel {
    top: 0;
    width: 8rem !important;
    height: auto;
    transform: none !important;
    translate: none !important;
  }
  .hud2-side-panel--left {
    left: 0;
  }
  .hud2-side-panel--right {
    right: 0;
  }
  #hud2-hull-block,
  #hud2-shield-block {
    left: 0 !important;
    translate: none !important;
  }
  #hud2-hull-block {
    top: 2.75rem !important;
  }
  #hud2-shield-block {
    top: 6.25rem !important;
  }
  .hud2-stat-info {
    gap: 0.4rem;
  }
  .hud2-stat-text,
  .hud2-stat-info--right .hud2-stat-text {
    width: 6.5rem;
  }
  .hud2-stat-label,
  #hud2-hull-label,
  #hud2-shield-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    margin-bottom: 0.2rem;
    translate: none !important;
  }
  .hud2-stat-value {
    font-size: 1.5rem;
  }
  .hud2-stat-value span {
    font-size: 0.875rem;
  }
  .hud2-icon-inline {
    width: 1.75rem;
    height: 1.75rem;
  }
  .hud2-xp-hud {
    top: -0.25rem;
    width: clamp(18rem, 45vw, 24rem);
  }
  #hud2-quest-block {
    top: 2.75rem !important;
    right: 0;
    width: 8rem;
    translate: none !important;
  }
  .hud2-quest-panel .hud2-quest-window {
    box-sizing: border-box;
    width: 100%;
    max-width: 8rem;
    padding: 0.35rem 0.5rem;
    font-size: 12px;
    line-height: 1.3;
  }
  .hud2-quest-secondary {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
  }

  /* Tutorial cards use a mobile canvas that fits the logical viewport. The
     artwork may stretch slightly vertically; text and CTA stay inside it. */
  body.qw-tut-active .qd-tut-panel {
    --qd-tut-scale: 1 !important;
    width: min(calc(var(--qw-viewport-width, 100vw) - 24px), 47.5rem) !important;
    height: min(13.125rem, calc(var(--qw-viewport-height, 100vh) - 24px)) !important;
    aspect-ratio: auto;
  }
  body.qw-tut-active .qd-tut-stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }
  body.qw-tut-active .qd-tut-portrait-wrap {
    left: 1%;
    bottom: 4%;
    width: 23%;
    height: 88%;
    display: flex;
    align-items: flex-end;
  }
  body.qw-tut-active .qd-tut-portrait-img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
  body.qw-tut-active .qd-tut-content {
    left: 25%;
    top: 9%;
    width: 72%;
    height: 84%;
  }
  body.qw-tut-active .qd-tut-speaker {
    top: 0;
    width: 100%;
    height: 20%;
    gap: 0.5rem;
  }
  body.qw-tut-active .qd-tut-role,
  body.qw-tut-active .qd-tut-name {
    font-size: 0.875rem;
    line-height: 1;
  }
  body.qw-tut-active .qd-tut-divider {
    width: 2px;
    height: 1.5rem;
  }
  body.qw-tut-active .qd-tut-message {
    top: 25%;
    width: 100%;
    max-height: 44%;
    font-size: clamp(0.875rem, 2.1vw, 1.125rem);
    line-height: 1.22;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  body.qw-tut-active .qd-tut-panel--long .qd-tut-message {
    font-size: 0.875rem;
  }
  body.qw-tut-active .qd-tut-panel--very-long .qd-tut-message {
    font-size: 0.75rem;
  }
  body.qw-tut-active .qd-tut-waveform {
    left: 0;
    top: 76%;
    width: 25%;
    height: 18%;
  }
  body.qw-tut-active .qd-tut-cta {
    left: 64%;
    top: 68%;
    width: 36%;
    height: 32%;
    min-width: 44px;
    min-height: 44px;
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  .menu-panel__eyebrow,
  .menu-panel-btn__sub,
  .menu-panel__footer,
  .settings-tab,
  .settings-toggle,
  .settings-note,
  .save-slots-subtitle,
  .save-slot-name,
  .save-slot-delete-btn,
  .ss-tab,
  .sm-title,
  .sm-branch-name,
  .sm-branch-section,
  .sm-node-name,
  .sm-node-cost,
  #smTooltip,
  #smTooltip .tt-flavor,
  #smTooltip .tt-voice,
  .sm-back-btn,
  .crew-subtitle,
  .crew-card__rank,
  .crew-card__role,
  .crew-note,
  .crew-dossier__note,
  .nar-topic--locked::after,
  .nar-subtitle,
  .cyp-card__tag,
  .toship-subtitle,
  .toship-card__sub,
  .shipcond-note,
  .qw-demo-badge,
  .shipcond-sector,
  .shipcond-legend,
  .de-eyebrow,
  .de-credits-mono,
  .de-link-note,
  .de-split-by,
  .de-split-roles,
  .de-split-ai,
  .de-split-copy,
  .de-split-next,
  .de-card__title,
  .de-card:not(.de-card--portrait) .de-card__title,
  .hud2-quest-secondary-label,
  .hud2-quest-secondary-item,
  .hud2-quest-sec-prog,
  .boss-telegraph,
  .qd-dyk-name,
  .cursor-hint {
    font-size: 12px !important;
  }
}