/* Shared mobile composition. Desktop artwork and geometry remain in the page styles. */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
@media (max-width:850px), (max-width:1024px) and (max-height:600px) and (pointer:coarse) {
  :root { --mobile-header:calc(108px + var(--safe-top)); --mobile-gutter:20px; --gallery-hero:clamp(310px,55vw,400px); }
  body { -webkit-text-size-adjust:100%; }
  .world { min-height:620px; height:100svh; }
  .world .sidebar { width:100%; min-width:0; height:var(--mobile-header); padding:calc(8px + var(--safe-top)) max(var(--mobile-gutter),var(--safe-right)) 8px max(var(--mobile-gutter),var(--safe-left)); flex-direction:column; justify-content:center; gap:4px; background:linear-gradient(180deg,#e8ded6f5 60%,#e8ded6d9); }
  .world .brand { flex-direction:row; justify-content:center; gap:10px; margin:0; font-size:18px; letter-spacing:.22em; min-height:40px; }
  .brand .fleur { font-size:29px; line-height:1; margin:0; }
  .world .brand-rule,.world .sidebar-note,.world .sidebar-bottom,.world .nav-number,.world .nav-star { display:none; }
  .sidebar nav { display:grid; grid-template-columns:.8fr 1fr 1.6fr; gap:4px; width:min(100%,520px); }
  .world .sidebar .nav-link { justify-content:center; width:100%; min-width:0; min-height:44px; gap:0; padding:8px 0; font-size:12px; letter-spacing:.07em; }
  .active .nav-label:after { bottom:-4px; }
  #home .hero-copy { top:auto; left:8%; right:8%; bottom:calc(154px + var(--safe-bottom)); width:auto; }
  #home .hero-copy h1 { font-size:clamp(70px,17vw,130px); }
  #home .signature { font-size:clamp(68px,17vw,118px); margin-top:9px; }
  #home .hero-caption { font-size:14px; letter-spacing:.1em; margin-top:26px; line-height:1.9; }
  #home .color-wash { background:linear-gradient(0deg,#e7d9ceca 0%,#e7d9ce60 28%,transparent 55%); }
  .motion-toggle { top:calc(var(--mobile-header) + 12px); right:max(16px,var(--safe-right)); min-height:44px; font-size:12px; padding:10px 13px; }
  #home .bottom-note { bottom:calc(32px + var(--safe-bottom)); left:max(20px,var(--safe-left)); right:126px; transform:none; font-size:12px; line-height:1.7; letter-spacing:0; }
  .world .music-dock { right:max(20px,var(--safe-right)); bottom:calc(24px + var(--safe-bottom)); }
  .record-button { width:64px; height:64px; }
  .record-caption { font-size:9px; gap:6px; }
  .autoplay-hint { white-space:normal; max-width:112px; text-align:center; font-size:11px; line-height:1.6; }
  .toast { position:fixed; bottom:calc(20px + var(--safe-bottom)); max-width:calc(100% - 32px); font-size:14px; padding:12px 16px; }
  input[type=range] { min-height:40px; margin:0; }
  /* Gallery: a portrait opening, two-column photographs, then a two-row player. */
  .gallery-world { height:auto; min-height:100svh; padding:calc(var(--mobile-header) + var(--gallery-hero)) var(--mobile-gutter) calc(24px + var(--safe-bottom)); background:#e8deda; }
  .gallery-backdrop { position:absolute; top:var(--mobile-header); bottom:auto; height:calc(var(--gallery-hero) + 100px); min-height:0; }
  .gallery-backdrop img { object-position:30% 28%; }
  .gallery-backdrop:after { background:linear-gradient(0deg,#e8deda 0%,transparent 50%); }
  .gallery-heading { top:calc(var(--mobile-header) + 135px); left:6%; right:6%; width:auto; height:auto; display:block; }
  .gallery-wordmark { width:100%; }
  .gallery-heading h1 { font-size:clamp(70px,16vw,110px); }
  .gallery-heading .signature { font-size:clamp(62px,16vw,105px); line-height:.7; margin:0 5% 0 0; }
  .gallery-heading p { margin:20px 0 0; max-width:none; font-size:10px; line-height:1.6; letter-spacing:.09em; text-align:right; white-space:normal; }
  .heading-ornament { display:none; }
  .gallery-panel { position:relative; inset:auto; width:100%; padding:16px; background:#f0e4dcf2; }
  .gallery-results { min-height:0; }
  .art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .art-card .artwork { aspect-ratio:4/3; }
  .art-caption { height:38px; font-size:11px; gap:7px; letter-spacing:.06em; }
  .art-number { font-size:10px; }
  .art-plus { font-size:23px; }
  .gallery-footer { display:grid; grid-template-columns:minmax(0,1fr) 56px; gap:12px; padding:16px 0 2px; margin-top:16px; min-height:0; }
  .gallery-track { grid-column:1/-1; width:100%; max-width:none; margin:0; gap:12px; }
  .album-cover { width:56px; height:56px; }
  .gallery-track-copy button { min-height:44px; font-size:14px; }
  .gallery-track-copy button span { font-size:14px; }
  .gallery-track-copy i { display:none; }
  .compact-seek { margin:0; }
  .compact-seek input { height:40px; }
  .compact-time { font-size:12px; margin-top:0; }
  .compact-controls { gap:16px; justify-content:center; }
  .compact-controls>button:not(.compact-play),.compact-play { min-width:48px; min-height:48px; width:48px; height:48px; }
  .compact-play { font-size:17px; }
  .gallery-footer .music-dock { position:static; }
  .gallery-footer .record-button { width:56px; height:56px; }
  .gallery-world .music-panel { position:fixed; top:auto; bottom:calc(12px + var(--safe-bottom)); right:max(12px,var(--safe-right)); width:calc(100% - max(12px,var(--safe-left)) - max(12px,var(--safe-right))); max-width:440px; max-height:calc(var(--visible-height,100dvh) - 24px - var(--safe-top) - var(--safe-bottom)); padding:20px; overflow:auto; }
  .panel-top { position:sticky; top:-20px; background:#e8ddd6; padding:8px 0; z-index:2; }
  .panel-top h2 { font-size:28px; }
  .icon-button,.play-button { min-width:44px; min-height:44px; }
  .playlist-actions { gap:12px; flex-wrap:wrap; font-size:14px; }
  .playlist-actions button { min-height:44px; }
  .music-playlist { max-height:200px; }
  .music-playlist button { min-height:48px; font-size:14px; }
  .volume-label { font-size:14px; }
  .music-note,.local-note { font-size:12px; }
  /* Letters use normal rows, leaving space between the portrait and the envelope. */
  .letters-world { height:auto; min-height:max(760px,100svh); display:grid; grid-template-columns:minmax(0,1fr) 100px; grid-template-rows:auto minmax(110px,1fr) auto auto; column-gap:16px; padding:calc(var(--mobile-header) + 30px) max(20px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(20px,var(--safe-left)); }
  .letters-heading { position:relative; inset:auto; grid-column:1/-1; grid-row:1; max-width:75%; }
  .letters-heading h1 { font-size:clamp(50px,12.5vw,90px); }
  .letters-heading h1 span { margin-left:20px; }
  .letters-heading .signature { font-size:clamp(60px,15vw,100px); margin-left:12px; }
  .letters-motto { margin-top:26px; font-size:11px; line-height:1.7; }
  .letters-invitation { font-size:14px; line-height:1.8; margin-top:12px; }
  .envelope-scene { position:relative; inset:auto; grid-column:1; grid-row:3; width:100%; max-width:350px; align-self:end; }
  .envelope-paper>span { font-size:22px; }
  .envelope-paper i { font-size:10px; }
  .write-caption { flex-wrap:wrap; justify-content:flex-start; gap:6px 12px; padding:22px 0 0; min-height:60px; }
  .write-caption>span:first-child { font-size:11px; }
  .write-caption>span:last-child { font-size:14px; }
  .letter-actions { position:static; grid-column:2; grid-row:3; align-self:center; }
  .letter-actions>button { width:100%; min-height:112px; padding:12px 5px; }
  .letter-actions span { font-size:11px; }
  .letter-actions small { font-size:12px; letter-spacing:0; }
  .letter-actions svg { width:30px; height:30px; }
  .letters-world .music-dock { position:static; grid-column:2; grid-row:4; align-self:end; margin-top:24px; }
  .letters-storage-note { position:static; grid-column:1; grid-row:4; align-self:end; max-width:none; margin:24px 0 0; font-size:12px; line-height:1.8; letter-spacing:0; }
  /* One vertical scroll surface in each modal, bounded by the visible keyboard viewport. */
  .letter-dialog,.art-lightbox { position:fixed; top:calc(var(--visible-top,0px) + max(12px,var(--safe-top))); bottom:auto; left:max(12px,var(--safe-left)); right:max(12px,var(--safe-right)); margin:0 auto; width:auto; max-width:680px; max-height:calc(var(--visible-height,100dvh) - max(12px,var(--safe-top)) - max(12px,var(--safe-bottom))); overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 24px; scroll-padding-block:64px 24px; }
  .letter-dialog-top,.lightbox-top { position:sticky; top:-16px; margin:0 0 12px; padding:4px 0; background:#eee2d5; z-index:8; font-size:10px; letter-spacing:.12em; }
  .letter-dialog-top>button,.lightbox-top button { min-width:44px; min-height:44px; margin:0; }
  .compose-dialog h2 { font-size:38px; }
  .paper-crest { margin:0 0 10px; font-size:28px; }
  .paper-subtitle { font-size:14px; line-height:1.8; }
  .compose-dialog textarea { min-height:180px; max-height:none; font-size:16px; line-height:32px; resize:vertical; background:repeating-linear-gradient(transparent 0 31px,#bba58c45 31px 32px); }
  .writing-meta { font-size:12px; margin:14px 0 20px; gap:10px; }
  .letter-signature { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; font-size:14px; }
  .letter-signature input { width:100%; font-size:16px; min-height:44px; }
  .letter-signature time { grid-column:1/-1; font-size:14px; }
  .letter-submit-row { flex-direction:column; align-items:stretch; gap:16px; }
  .letter-submit-row p { max-width:none; font-size:12px; line-height:1.8; }
  .seal-submit { justify-content:center; min-height:52px; padding:8px 12px; font-size:15px; border:1px solid #bba18b; gap:12px; }
  .seal-submit>span:first-child { width:36px; height:36px; }
  #letter-login,#collection-login { display:block; font-size:15px; line-height:1.7; padding:10px 0; min-height:44px; text-decoration:underline; }
  #cloud-status,.letter-error { font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
  .collection-heading { flex-wrap:wrap; gap:12px; }
  .collection-heading h2 { font-size:clamp(32px,8vw,44px); overflow-wrap:anywhere; }
  .collection-heading p { font-size:14px; }
  .collection-heading>button,.collection-empty>button { min-height:44px; font-size:14px; }
  .collection-content { display:flex; flex-direction:column; min-height:0; max-height:none; }
  .letter-list { display:flex; overflow-x:auto; overflow-y:hidden; max-height:none; padding:12px 0; border-right:0; border-bottom:1px solid #bca58f77; flex-shrink:0; scroll-snap-type:x proximity; }
  .letter-list>button { flex:0 0 170px; min-width:0; width:170px; padding:12px; scroll-snap-align:start; border-right:1px solid #baa38b44; border-bottom:0; }
  .letter-list strong { font-size:14px; }
  .letter-list p { font-size:12px; -webkit-line-clamp:1; }
  .letter-list time { font-size:12px; }
  .saved-letter { padding:22px 0; max-height:none; overflow:visible; }
  .saved-meta { flex-wrap:wrap; font-size:12px; }
  .saved-letter #saved-body { font-size:16px; line-height:1.9; }
  .saved-signature { font-size:14px; }
  .saved-footer { font-size:14px; }
  .saved-footer button { min-height:44px; }
  .collection-storage { font-size:12px; }
  .collection-empty h3 { font-size:18px; }
  .collection-empty p { font-size:14px; }
  .art-lightbox { padding:16px 16px 24px; }
  .lightbox-stage { position:relative; display:block; padding-bottom:60px; }
  .lightbox-art { width:100%; max-height:none; aspect-ratio:16/9; }
  .lightbox-arrow { position:absolute; bottom:0; width:48px; height:48px; min-height:48px; }
  .lightbox-arrow:first-child { left:calc(50% - 60px); }
  .lightbox-arrow:last-child { right:calc(50% - 60px); }
  .lightbox-caption { margin:12px 0 0; gap:12px; align-items:flex-start; }
  .lightbox-caption h2 { font-size:25px; letter-spacing:.05em; }
  .lightbox-caption p { font-size:14px; }
  .gallery-world .petals { position:absolute; height:100svh; }
}
@media (max-width:850px) { .portrait-stage img { object-position:43% 50%; } }
@media (max-width:360px) {
  :root { --mobile-gutter:12px; }
  .world .sidebar .nav-link { font-size:11px; letter-spacing:.02em; }
  .gallery-panel { padding:12px; }
  .art-grid { gap:12px 8px; }
  .art-caption { font-size:10px; gap:5px; }
  .letters-world { grid-template-columns:minmax(0,1fr) 86px; gap:0 12px; padding-inline:16px; }
  .letters-heading { max-width:86%; }
  .letters-heading h1 { font-size:47px; }
  .envelope-paper i { display:none; }
  .letter-actions small { font-size:11px; }
  .letter-dialog { padding-inline:16px; }
}
@media (max-width:850px) and (orientation:landscape), (max-width:1024px) and (max-height:600px) and (pointer:coarse) {
  :root { --mobile-header:calc(76px + var(--safe-top)); }
  .world .sidebar { flex-direction:row; gap:20px; }
  .world .brand { font-size:16px; gap:8px; }
  .sidebar nav { max-width:520px; }
  #home { min-height:560px; }
  #home .hero-copy { left:auto; width:46%; right:5%; bottom:130px; }
  #home .hero-copy h1 { font-size:clamp(64px,11vw,100px); }
  #home .signature { font-size:clamp(60px,11vw,94px); }
  .letters-world { min-height:700px; grid-template-columns:minmax(0,1fr) 120px; padding-inline:max(36px,var(--safe-left)); }
  .letters-heading h1 { font-size:64px; }
  .gallery-world { padding-top:calc(var(--mobile-header) + 280px); }
  .gallery-heading { top:calc(var(--mobile-header) + 100px); left:48%; }
  .gallery-heading h1 { font-size:80px; }
  .gallery-heading .signature { font-size:76px; }
}