/* Portrait phones only: flow-based spacing, safe areas and platform-neutral controls. */
@media (max-width:600px) and (orientation:portrait) {
  #universe-library {overflow-anchor:none}
  body.phone-returning-universe #project-switcher.has-mini-player,
  body.selecting:not(.at-entry) #project-switcher.has-mini-player {display:flex!important}
  body #project-switcher.has-mini-player {width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px);transition:none}
  body.phone-returning-universe #project-switcher .ps-toggle,
  body.phone-returning-universe #project-switcher .ps-neighbor {display:none!important}
  #universe-library .album-cover>img[src$="/vento.webp"] {object-position:50% 100%}
  #universe-library .release-play,#universe-library .track-name-play {
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  #universe-library .single-grid .release-player {
    grid-template-columns:44px minmax(0,1fr);column-gap:10px;min-width:0;
  }
  #universe-library .singles-catalog .compact-player {
    grid-template-columns:44px minmax(0,1fr) 36px;column-gap:10px;min-width:0;
  }
  #universe-library .release-wave {min-width:0;width:100%;overflow:hidden}
  #universe-library .single-grid .release-caption {padding-inline:10px}
  /* Reserve transport space before play: loading/playing never expands a row. */
  #universe-library .album-track-row .release-player .release-wave {
    display:block;grid-row:2;grid-column:1;height:28px;visibility:hidden;overflow:visible;
  }
  #universe-library .album-track-row .release-player .release-wave input {inset:0;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;outline-offset:2px}
  #universe-library .album-track-row .release-wave input::-webkit-slider-runnable-track {height:3px;border-radius:2px;background:linear-gradient(90deg,#ddc69b var(--played,0%),#77869c66 var(--played,0%))}
  #universe-library .album-track-row .release-wave input::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border:0;border-radius:50%;background:#ddc69b}
  #universe-library .album-track-row .release-player .release-time {
    display:block;grid-column:2;grid-row:2;height:17px;visibility:hidden;text-align:right;align-self:center;
  }
  #universe-library .album-track-row .release-player.loaded .release-wave,
  #universe-library .album-track-row .release-player.loaded .release-time {visibility:visible}
  #universe-library .album-track-row .release-message {
    position:absolute;bottom:0;right:0;max-width:80%;text-align:right;
  }
  #universe-library .album-track-row .release-source {display:none!important}
  #universe-library .album-track-number {align-self:start;line-height:44px}
  #universe-library .album-track-title {min-height:44px;display:flex;align-items:center}
  #universe-library .release-play:disabled {opacity:.48}
  #universe-library .release-play[aria-busy=true] {opacity:1}
}
@media (max-width:600px) and (orientation:portrait) {
  #universe-lobby {
    box-sizing:border-box;
    display:flex;flex-direction:column;gap:8px;
    padding:calc(var(--safe-top,0px) + 14px) 5vw calc(var(--safe-bottom,0px) + 98px);
  }
  #universe-lobby[hidden] {display:none}
  #universe-lobby .lobby-brand {
    position:static;order:0;flex:0 0 28px;font-size:24px;gap:18px;
  }
  #universe-lobby .lobby-heading {
    position:static;order:1;flex:0 0 auto;padding:0;
  }
  #universe-lobby .lobby-heading h1 {
    font-size:clamp(30px,8.5vw,38px);line-height:1.12;margin:6px 0 4px;
  }
  #universe-lobby .universe-categories {
    position:static;order:2;flex:0 0 44px;gap:26px;align-items:center;
  }
  #universe-lobby .universe-categories button {font-size:14px;min-height:44px;padding:8px 2px}
  #universe-lobby .world-selector {
    position:static;order:3;flex:0 0 auto;gap:4px;min-height:44px;
  }
  #universe-lobby .world-selector>button {flex:0 0 36px;min-height:44px;padding:6px}
  #universe-lobby .world-tabs {flex:1;max-width:none;min-width:0;gap:0 14px;align-items:center}
  #universe-lobby .world-tabs button {font-size:13px;min-height:38px;padding:7px 0}
  #universe-lobby .worlds {
    position:relative;order:4;flex:1 1 0;min-height:0;top:auto;left:auto;
    height:auto;width:100%;margin:0;padding:0;
    --card-width:min(82vw,400px);--card-step:92vw;
  }
  #universe-lobby .world {top:calc(50% - 32px)}
  #universe-lobby .world.is-selected,
  #universe-lobby .world.is-selected:hover,
  #universe-lobby .world.is-selected:focus-visible {transform:translate(-50%,-50%) scale(1)}
  #universe-lobby .world .world-meta {margin-top:12px;gap:12px}
  #universe-lobby .world .world-meta strong {font-size:28px;line-height:1.1}
  #universe-lobby .world .world-meta em {font-size:14px;line-height:1.35}
  #universe-lobby .world-meta>span:first-child {gap:5px}
  #universe-lobby .world-enter {padding-top:5px}
  #universe-lobby .lobby-footer {
    position:static;order:5;flex:0 0 18px;margin:0;line-height:1.5;font-size:8px;
  }
  .library-view #universe-lobby .world-selector,
  .library-view #universe-lobby .worlds,
  .library-view #universe-lobby .lobby-footer {display:none}
  #universe-lobby #universe-library {
    position:relative;order:3;flex:1 1 0;min-height:0;top:auto;bottom:auto;
    left:auto;right:auto;width:100%;padding:8px 0 20px;overflow:auto;
    scroll-padding-block:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  #universe-library .library-toolbar {margin-bottom:12px}
  #universe-library .track-album {gap:16px}
  #universe-library .album-cover>img {max-height:24svh;object-fit:cover}
  #universe-library .album-cover h2 {font-size:32px;margin:9px 0 4px}
  #universe-library .album-cover p {font-size:14px;line-height:1.45;margin:0}
  #universe-library .album-tracks li.album-track-row {padding:8px 10px;min-height:60px;gap:9px}
  #universe-library .album-tracks h3.album-track-title {font-size:16px;line-height:1.3}
  #universe-library .album-track-row .release-player {column-gap:9px;grid-template-columns:minmax(0,1fr) 44px}
  #universe-library .album-track-number {font-size:12px}
  /* Hide text glyphs visually; retain the existing accessible labels and click handlers. */
  #universe-library .release-play,
  #universe-library .release-play>span {
    font-size:0!important;line-height:0!important;text-shadow:none;
  }
  #universe-library .release-play {
    appearance:none;-webkit-appearance:none;position:relative;
    width:44px;height:44px;min-width:44px;padding:0;display:flex;align-items:center;justify-content:center;
  }
  #universe-library .release-play>span {display:none}
  #universe-library .release-play::before {
    content:"";display:block;width:0;height:0;margin-left:3px;
    border-top:7px solid transparent;border-bottom:7px solid transparent;
    border-left:11px solid currentColor;
  }
  #universe-library .playing .release-play::before {
    width:11px;height:14px;margin-left:0;border:0;
    background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px,currentColor 7px 11px);
  }
  #universe-library .release-play:focus-visible {outline:2px solid #e4cc9b;outline-offset:3px}
  #universe-library .compact-player input[type=range] {height:4px}
}
@media (max-width:600px) and (orientation:portrait) and (max-height:740px) {
  #universe-lobby {gap:5px}
  #universe-lobby .lobby-heading h1 {font-size:30px;margin:3px 0}
  #universe-lobby .world-tabs {flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  #universe-lobby .world-tabs::-webkit-scrollbar {display:none}
  #universe-lobby .world-tabs button {flex-shrink:0}
  #universe-lobby .lobby-footer {display:none}
  #universe-lobby .world .world-meta strong {font-size:25px}
}

/* v235: larger artwork and a reserved reading area below the project navigation. */
@media (max-width:600px) and (orientation:portrait) {
  #universe-lobby {padding-inline:3vw;gap:5px}
  #universe-lobby .lobby-brand {padding-inline:2vw}
  #universe-lobby .lobby-heading h1 {margin:4px 0 2px}
  #universe-lobby .worlds {--card-width:94vw;--card-step:102vw}
  #universe-lobby .world {top:calc(50% - 48px)}
  #universe-lobby .world .world-meta {padding-inline:3px}
  #universe-lobby .lobby-footer {display:none}
  body {--project-top:calc(var(--safe-top,0px) + 110px);--project-bottom:calc(var(--safe-bottom,0px) + 116px)}
  .masthead {
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:36px 44px;gap:2px 12px;
    padding:calc(var(--safe-top,0px) + 8px) 5vw 8px;
    background:linear-gradient(#080b12 75%,#080b12ed);
  }
  .masthead .wordmark {grid-column:1;grid-row:1;margin:0;font-size:23px}
  .masthead .universe-back {grid-column:2;grid-row:1}
  .masthead .project-link {grid-column:1;grid-row:2;margin:0;justify-self:start;white-space:normal}
  .masthead .index-button {grid-column:2;grid-row:2;justify-self:end;gap:8px}
  .masthead .universe-back,.masthead .project-link,.masthead .index-button {
    border:0;border-radius:0;background:transparent;padding:6px 0;
    min-height:36px;font-size:12px;line-height:1.4;letter-spacing:0;
  }
  .masthead .project-link,.masthead .index-button {min-height:44px}
  #chapter-menu {top:var(--project-top);max-height:calc(var(--darr-view-height,100dvh) - var(--project-top) - var(--project-bottom));right:5vw;width:90vw}
  .hud {bottom:calc(var(--safe-bottom,0px) + 90px)!important;padding:8px 5vw;min-height:22px;background:#080b12e8}
  .hud .scroll-cue {display:none}
  .stage .intro,body[data-project] .stage .intro {top:calc(var(--project-top) + 18px);left:6%;width:88%}
  body[data-project] .stage .intro h1 {font-size:clamp(40px,11vw,60px);line-height:1.04}
  body[data-project] .stage .passage,body[data-project] .stage .collision {
    top:auto;bottom:calc(var(--project-bottom) + 14px);left:6%;width:88%;max-width:88%;
  }
  body[data-project] .stage .passage h2,body[data-project] .stage .collision h2 {font-size:clamp(36px,10.5vw,54px);line-height:1.02;margin:10px 0}
  body[data-project] .stage .passage>p:last-child,body[data-project] .stage .collision>p:last-child {font-size:13px;line-height:1.5}
  body[data-project="crossroads"] .stage-picture img {object-fit:cover;object-position:55% center}
  body[data-project="crossroads"] .picture-shade {background:linear-gradient(0deg,#080b12f5,transparent 62%)}
  body[data-project="crossroads"] .portal img {object-fit:cover;object-position:53% center}
  .stage .constellation {
    inset:var(--project-top) 6% var(--project-bottom);overflow-y:auto;overflow-x:hidden;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px;
    align-content:start;padding:12px 0 24px;overscroll-behavior-y:contain;scrollbar-width:thin;
  }
  .stage .constellation:has(>[aria-hidden="false"]) {pointer-events:auto}
  .stage .constellation>* {position:relative;inset:auto;width:100%;max-width:none;height:auto;min-width:0}
  .stage .constellation .story-panel {grid-column:1/-1;grid-row:1;display:block}
  .stage .story-panel h2 {font-size:36px;margin:10px 0 14px}
  .stage .story-panel>p:last-child {font-size:14px;line-height:1.6;max-width:none}
  .stage .constellation .memory-panel {grid-column:1;grid-row:2;aspect-ratio:auto}
  .stage .memory-panel img {height:190px;object-fit:cover}
  .stage .constellation .sound-panel {grid-column:2;grid-row:2;padding-top:12px}
  .stage .sound-panel h3 {font-size:28px}
  .stage .sound-panel>p:not(.eyebrow),.stage .sound-panel button {font-size:12px;line-height:1.5}
  .stage .sound-panel small {font-size:10px}
  .stage .constellation .live-panel {grid-column:1;grid-row:3;aspect-ratio:auto;display:block}
  .stage .constellation .film-panel {grid-column:2;grid-row:3;aspect-ratio:auto;align-self:start}
  .stage .live-panel img,.stage .film-panel img {height:auto;aspect-ratio:4/3;object-fit:cover}
  .stage .constellation figcaption,.stage .film-panel .photo-caption {font-size:10px;line-height:1.45}
  .stage .film-label {bottom:10px}
  .stage .film-label strong {font-size:18px}
  body[data-project="about"] .stage .memory-panel img {object-position:60% 40%}
  body[data-project="about"] .stage .about-continuation,.stage .eterno-history {
    inset:var(--project-top) 6% var(--project-bottom);padding:12px 2px 24px;
    overflow-y:auto;overscroll-behavior-y:contain;
  }
  .stage .about-life>figure {height:clamp(190px,30svh,300px);margin-bottom:20px}
  .stage .about-continuation-copy>p:not(.eyebrow) {font-size:16px;line-height:1.6}
  .stage .outro {top:calc(var(--project-top) + 32px)}
  .stage .outro h2 {font-size:clamp(44px,15vw,68px)}
  .stage .enter-scroll-hint {bottom:calc(var(--project-bottom) + 12px)}
  .listening .stage .constellation .sound-panel {grid-column:1/-1;grid-row:2}
}

@media (max-width:600px) and (orientation:portrait) {
  /* A loading status has its own slot above the dock, including iPhone safe area. */
  #world-loading {top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:min(82vw,330px);padding:20px 22px;border-radius:16px;background:rgba(18,24,36,.64);border:1px solid #dfcfad40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 40px #0003}
  #world-loading .world-loading-track {margin-top:7px}
  #world-loading-label {font-size:12px}
  .stage .constellation,.stage .about-continuation,.stage .eterno-history {-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}
  body[data-project="about"] .stage .collision {top:calc(var(--project-top) + min(30svh,58vw) + 22px);bottom:auto}
  body[data-project="about"] .stage .collision h2 {font-size:clamp(34px,10vw,48px)}
  .stage .about-studio-details {display:flex;flex-direction:column;gap:22px;margin-top:24px}
  .stage .about-studio-details>figure {height:auto;display:block;flex:none}
  .stage .about-studio-details img {height:auto;aspect-ratio:3/2;object-fit:contain}
  .stage .about-studio-details figcaption {margin-top:8px}
  .stage .studio-process-copy h3 {font-size:28px;line-height:1.1;margin:8px 0 12px}
  .stage .studio-process-copy p {font-size:16px;line-height:1.6}
  .stage .constellation {padding-bottom:48px}
}