/* Shared ergonomics and safe areas, loaded after each page's own design. */
.mobile-site-nav {
  display: none;
}
img {
  max-width: 100%;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
.site-nav nav [aria-current="page"] {
  color: var(--accent);
}
@media (max-width: 800px) {
  html {
    scroll-padding-bottom: 95px;
  }
  .has-mobile-nav {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .mobile-site-nav {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 7px max(12px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px #00000008;
  }
  .mobile-site-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    color: var(--muted);
    font-size: 10px;
    text-decoration: none;
    border-radius: 10px;
  }
  .mobile-site-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--panel);
  }
  .mobile-site-nav svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .site-nav {
    padding: 14px 20px;
    gap: 12px;
    min-height: 72px;
  }
  .site-nav nav {
    display: none;
  }
  .site-nav .style-control {
    margin-left: auto;
  }
  .site-nav .style-control select {
    font-size: 14px;
    min-height: 44px;
    max-width: none;
    padding: 10px 30px 10px 14px;
  }
  .site-nav .style-control > span {
    display: none;
  }
  .wordmark {
    min-width: 48px;
    font-size: 40px;
  }
  .site-nav .wordmark span {
    font-size: 9px;
  }
  .header-shell {
    flex-wrap: wrap;
  }
  .display-controls {
    margin-left: auto;
  }
  .theme-select {
    min-height: 44px;
    font-size: 13px;
  }
  .lang-toggle button {
    min-height: 40px;
    min-width: 34px;
  }
  .world-button {
    min-height: 40px;
  }
  .intro h1 {
    font-size: 20vw;
  }
  .intro-bottom > .text-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .intro-bottom > div {
    max-width: 75%;
  }
  .game-image {
    aspect-ratio: 1.5;
  }
  .game-description h3 {
    font-size: 21px;
  }
  .game-entry p {
    font-size: 14px;
    line-height: 1.7;
  }
  .desk > a {
    min-height: 88px;
  }
  .sample-card a {
    min-height: 44px;
  }
  .sample-card p {
    font-size: 14px !important;
  }
  .sample-note {
    font-size: 11px !important;
    line-height: 1.7;
  }
  .game-top {
    padding: 8px 16px;
    min-height: 52px;
    height: auto;
    gap: 10px;
  }
  .game-top a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .game-brand {
    font-size: 10px !important;
  }
  .game-back {
    font-size: 12px !important;
  }
  .heart-layout {
    padding-inline: 12px;
  }
  .heart-hud {
    padding-bottom: 12px;
  }
  .heart-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .heart-buttons button {
    padding: 9px 4px;
    min-height: 44px;
    font-size: 12px;
  }
  .heart-story {
    min-height: 100px;
  }
  .heart-story p {
    font-size: 13px;
    line-height: 1.8;
  }
  .heart-status {
    font-size: 11px;
    line-height: 1.6;
  }
  #heart-demo-mobile {
    min-height: 40px;
  }
  .heart-piece small {
    font-size: 9px;
  }
  .game-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
    margin-top: 12px;
  }
  .game-controls button,
  .game-controls select {
    width: 100%;
    min-height: 44px;
    font-size: 12px;
    padding: 8px 6px;
    max-width: none;
  }
  .game-controls label {
    min-width: 0;
  }
  .play-column {
    align-self: center;
    width: min(100%, calc((100svh - 300px) * 420 / 760));
    min-width: min(260px, 100%);
  }
  .run-stage {
    align-self: center;
    width: min(100%, calc((100svh - 290px) * 0.6));
    min-width: min(260px, 100%);
  }
  .run-touch-controls button {
    min-height: 44px;
    min-width: 44px;
  }
  .game-layout {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body:not(.has-mobile-nav) {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-bar button,
  .bottom-bar select {
    min-height: 44px;
    font-size: 12px;
  }
  .tools button {
    min-height: 44px;
  }
  .underbar button {
    min-height: 44px;
  }
  .underbar div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .underbar button {
    padding-inline: 4px;
  }
  .readouts button {
    min-height: 44px;
    min-width: 44px;
  }
  #number-pad button {
    min-height: 50px;
  }
  .mission details summary {
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  body > header:not(.game-top):not(.site-nav):not(.folio-header) {
    min-height: 56px;
  }
  body > header:not(.game-top):not(.site-nav):not(.folio-header) > a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .preview-head {
    padding-top: 30px !important;
  }
  .preview-head h1 {
    font-size: 42px !important;
  }
  .preview-head p {
    font-size: 14px !important;
  }
}
@media (max-width: 380px) {
  .stamp-copy {
    display: none;
  }
  .header-shell {
    padding-inline: 16px;
  }
  .heart-piece strong {
    font-size: 21px;
  }
  .heart-piece small {
    font-size: 8px;
  }
  .heart-buttons button {
    font-size: 11px;
  }
  .game-top {
    padding-inline: 12px;
  }
  .game-brand {
    font-size: 9px !important;
  }
  .game-controls button,
  .game-controls select {
    font-size: 11px;
  }
  .site-nav {
    padding-inline: 16px;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  .arcade .hud button {
    min-height: 36px;
  }
  .mobile-site-nav {
    position: static;
  }
  .has-mobile-nav {
    padding-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body {
    transition: none;
  }
}
@media(min-width:761px) and (max-width:950px){.heart-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;padding-inline:24px}.heart-play{min-width:0;width:100%}.heart-aside h1{font-size:65px}.game-top>span{display:none}}