/* Site-wide responsive layout — room, sections, uploaded illustration art */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --page-pad-x: clamp(12px, 3vw, 28px);
  --site-logo-top: calc(12px + var(--safe-top));
  --site-logo-left: calc(12px + var(--safe-left));
  --site-logo-w: 140px;
  --site-logo-h: 56px;
  --site-logo-gap: 18px;
  --page-title-top: calc(var(--site-logo-top) + var(--site-logo-h) + var(--site-logo-gap));
  --content-top: 184px;
  --content-bottom: clamp(56px, 10vh, 84px);
  --mini-player-top: calc(6px + var(--safe-top));
  --mini-player-right: calc(10px + var(--safe-right));
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Scroll: only lock on full-screen interactive pages */
body.room-home,
body.gallery-body,
body.hobby-body,
body.archive-body,
body:has(.sky-page) {
  overflow: hidden;
  height: 100%;
}

body:has(.about-page) {
  overflow-x: hidden;
}

/* Site chrome — mirror corners, respect notches */
.site-logo {
  top: var(--site-logo-top);
  left: var(--site-logo-left);
  z-index: 110;
}

.mini-player {
  top: var(--mini-player-top);
  right: var(--mini-player-right);
  z-index: 110;
}

.page-title--sky {
  top: var(--page-title-top);
  left: calc(var(--page-pad-x) + var(--safe-left));
  right: auto;
}

.overlay-back,
.sky-back,
.room-back {
  bottom: calc(16px + var(--safe-bottom));
}

/* Illustration gallery — dynamic top clears measured title */
.gallery-wrap {
  inset: var(--content-top) 0 var(--content-bottom) 0;
}

.gallery-prompt,
.hobby-prompt,
.shelf-prompt,
.sky-prompt,
.music-prompt {
  bottom: calc(18px + var(--safe-bottom));
}

/* Section pages — room art / uploads scale inside their frames */
.compartment__art img,
.pol__img img,
.card img,
.about-character,
.project-star {
  max-width: 100%;
}

/* Room dialogue */
@media (max-width: 640px) {
  .vn-box {
    width: min(94vw, 100%);
    padding: 22px 18px;
    border-radius: 12px;
  }

  .vn-box .vn-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hit__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  .site-credit {
    font-size: var(--type-site-credit-size, 9px);
    letter-spacing: var(--type-site-credit-letter-spacing, 0.12em);
    max-width: calc(100vw - 180px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.site-credit-focus .site-credit {
    max-width: calc(100vw - 48px);
    overflow: visible;
    text-overflow: clip;
  }
}

/* Hobby drawer — detailed rules in multimedia.css */
@media (max-width: 900px) {
  .hobby-body .page-title--sky {
    max-width: calc(100vw - 100px);
  }
}

/* Archive shelves */
@media (max-width: 760px) {
  .shelf-page {
    padding-top: var(--content-top);
    padding-bottom: calc(72px + var(--safe-bottom));
  }

  .shelf__year {
    margin-left: var(--page-pad-x);
  }

  .shelf__books {
    padding: 0 var(--page-pad-x);
  }
}

/* Illustration tooltip + lightbox */
@media (max-width: 760px) {
  .art-tip {
    --art-tip-w: min(280px, calc(100vw - 32px));
    --art-tip-h: min(220px, 42vh);
    left: 50% !important;
    right: auto;
    top: auto !important;
    bottom: calc(72px + var(--safe-bottom));
    transform: translateX(-50%) !important;
  }

  .art-tip.open {
    transform: translateX(-50%) !important;
  }
}

/* Project page */
@media (max-width: 900px) {
  .project-header {
    top: calc(var(--page-title-top) + var(--safe-top));
    left: var(--page-pad-x);
    right: var(--page-pad-x);
    flex-wrap: wrap;
  }

  .project-grid {
    inset: calc(var(--content-top) + 12px) var(--page-pad-x)
      calc(24px + var(--safe-bottom)) var(--page-pad-x);
  }

  .card-stack {
    width: min(85%, 320px);
  }
}

/* About */
@media (max-width: 860px) {
  .about-grid {
    padding: calc(var(--content-top) - 20px) var(--page-pad-x) calc(28px + var(--safe-bottom));
  }

  .about-left {
    height: clamp(320px, 52vh, 460px);
  }

  .about-photos {
    width: min(52%, 220px);
    height: 180px;
  }

  .polaroid {
    width: 96px;
  }
}

@media (max-width: 480px) {
  .about-left {
    height: clamp(260px, 44vh, 360px);
  }

  .about-photos {
    position: relative;
    left: 0;
    bottom: auto;
    width: 100%;
    height: 160px;
    margin-top: 12px;
  }
}

/* Music overlay */
@media (max-width: 760px) {
  .music-overlay {
    padding: calc(40px + var(--safe-top)) 0 calc(20px + var(--safe-bottom));
  }

  .music-gallery {
    padding: 0;
  }

  .cd-ring {
    height: min(62vh, 520px);
    padding: 0 40px 4px;
  }

  .cd-ring__stage {
    width: 100%;
    height: clamp(240px, 46vh, 380px);
  }

  .cd-disc {
    --size: clamp(52px, 14vw, 84px);
  }

  .music-deck-center {
    top: 56%;
    padding: 10px 12px;
    max-width: calc(100vw - 24px);
  }

  .music-deck-center .music-controls__btn {
    min-width: 44px;
    min-height: 40px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .cd-ring__nudge {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .mini-player {
    --mini-player-top: calc(5px + var(--safe-top));
    --mini-player-right: calc(8px + var(--safe-right));
    max-width: min(360px, calc(100vw - 72px));
  }

  .mini-player__panel {
    width: 0;
    max-width: min(300px, calc(100vw - 72px));
  }

  .mini-player:hover .mini-player__panel,
  .mini-player:focus-within .mini-player__panel {
    width: min(300px, calc(100vw - 72px));
    max-width: min(300px, calc(100vw - 72px));
  }
}

/* Short viewports (landscape phones, small laptops) */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --site-logo-gap: 10px;
  }

  .page-title--sky {
    top: var(--page-title-top);
  }

  .page-title__main {
    font-size: 1.25rem;
  }

  .page-title__accent {
    font-size: 1rem;
  }

  .gallery-wrap {
    --content-bottom: 48px;
  }

  .music-overlay {
    padding-top: 32px;
  }

  .cd-ring {
    height: 72vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layer,
  .room::after {
    animation: none;
  }
}