/* Portrait composition and touch controls for the mobile edition. */
@media (max-width:700px), (pointer:coarse) and (max-width:1100px) {
  html,body{width:100%;height:100%;overscroll-behavior:none}
  body{-webkit-touch-callout:none}
  button{touch-action:manipulation}
  .topbar{padding:calc(env(safe-area-inset-top) + 12px) max(16px,env(safe-area-inset-right)) 0 16px}
  .tools{gap:8px}.icon-button{width:44px;height:44px;font-size:20px}
  .desktop-tool{display:none}
  #welcome{padding:24px;gap:22px}
  .gift-start{font-size:clamp(21px,5.8vw,27px);letter-spacing:2px;white-space:nowrap;padding:25px 24px;border-radius:18px;max-width:100%}
  .gift-start:hover{transform:none}
  .scene-heading{top:calc(env(safe-area-inset-top) + clamp(82px,12dvh,112px));left:22px;right:22px}
  .scene-heading .eyebrow{font-size:8px;letter-spacing:2.3px}
  .scene-heading h2{font-size:clamp(29px,8vw,36px);line-height:1.4;letter-spacing:7px;text-indent:7px;margin:10px 0}
  .scene-heading>p:last-child{font-size:11px;line-height:1.8;letter-spacing:1px;margin:10px 0;padding:0}
  .scene-footer{bottom:calc(env(safe-area-inset-bottom) + 12px);padding:0 14px}
  .scene-nav{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:7px;padding:6px;width:min(100%,430px);max-width:none;border-radius:28px;background:rgba(9,16,34,.83)}
  .nav-button{min-width:0;min-height:48px;padding:10px 3px;font-size:12px;white-space:nowrap;border-radius:23px}
  .replay{min-height:40px;padding:10px 14px;margin-top:5px;font-size:11px}
  .intro .eyebrow{bottom:calc(env(safe-area-inset-bottom) + 13dvh);padding:0 24px;font-size:10px;line-height:1.8;letter-spacing:2px}
  .letter-layer{backdrop-filter:none;background:linear-gradient(90deg,#060a1bdb,#080e22b8 50%,#060a1bdb)}
  .back-button{top:calc(env(safe-area-inset-top) + 12px);left:12px;min-height:44px;padding:12px;font-size:12px}
  .letter-scroll{padding:calc(env(safe-area-inset-top) + 100px) clamp(24px,7vw,36px) calc(env(safe-area-inset-bottom) + 48px);touch-action:pan-y;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .letter-content{max-width:560px;overflow-wrap:anywhere}
  .letter-content h2{font-size:26px;line-height:1.65;letter-spacing:2px}
  .letter-content>.eyebrow{font-size:8px;letter-spacing:1.8px}
  .little-rule{margin:26px auto 34px;width:146px;gap:22px}
  #letter-body p{font-size:17px;line-height:2.15;letter-spacing:.3px;color:#d2d8e9;margin-bottom:28px}
  .letter-glyph{transition:opacity .3s ease}
  .signature{font-size:15px;margin-top:32px}
  .letter-closing-rule{margin:42px auto 10px}
  .photo-dialog[open]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:calc(env(safe-area-inset-top) + 72px) 16px calc(env(safe-area-inset-bottom) + 96px);background:transparent;border:0;border-radius:0;overflow:hidden}
  .photo-dialog::backdrop{background:rgba(3,7,24,.4);backdrop-filter:blur(1px)}
  .photo-dialog figure{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;pointer-events:none}
  .photo-dialog img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border:0;border-radius:0;pointer-events:auto;box-shadow:0 14px 40px #0005}
  .photo-dialog .close-button{position:fixed;right:max(16px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 12px);width:44px;height:44px}
  .photo-dialog .photo-actions{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 20px);left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:5px 7px;margin:0;width:max-content;max-width:calc(100vw - 24px);border-radius:30px}
  .photo-dialog .photo-actions button{padding:10px 8px;min-width:40px;min-height:44px;font-size:17px}
  #photo-number{min-width:39px;text-align:center;font-size:11px;white-space:nowrap}
  #photo-zoom-reset{font-size:12px;min-width:48px}
  .photo-tool-divider{margin:0 3px}
  .photo-dialog .photo-actions,.photo-dialog .close-button{transition:opacity .25s}
  .photo-dialog.photo-entering .photo-actions,.photo-dialog.photo-entering .close-button{opacity:0}
  .editor{width:100%;max-width:100%;max-height:100dvh;height:100dvh;inset:0;margin:0;border:0;border-radius:0;padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 28px);overscroll-behavior:contain;touch-action:pan-y}
  .editor .close-button{width:44px;height:44px}
  .editor-header h2{font-size:23px}
  input:not([type=file]):not([type=range]),textarea,select{font-size:16px}
  textarea{min-height:210px}
  .editor-actions{display:grid;grid-template-columns:1fr;width:100%;gap:12px}
  .editor-actions button{min-height:48px;width:100%}
  .photo-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .photo-tile button{width:36px;height:36px;top:2px;right:2px}
  .upload-button,.backup-row .text-button,.music-row .text-button{min-height:44px}
  .toast{bottom:calc(env(safe-area-inset-bottom) + 136px);padding:11px 16px;font-size:12px}
}
@media (max-width:350px){.gift-start{font-size:20px;padding:24px 17px}.scene-nav{gap:3px}.nav-button{font-size:11px}.scene-footer{padding:0 10px}.photo-dialog .photo-actions{gap:0}.photo-tool-divider{margin:0}.letter-scroll{padding-left:22px;padding-right:22px}}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .scene-heading{top:18px;left:20px;right:auto;max-width:38%;text-align:left}
  .scene-heading h2{font-size:26px;letter-spacing:3px;text-indent:0;margin:4px 0}
  .scene-heading>p:last-child{font-size:10px;margin:5px 0}
  .scene-heading .eyebrow{font-size:7px}
  .scene-footer{bottom:calc(env(safe-area-inset-bottom) + 7px)}
  .scene-nav{width:360px;padding:4px;gap:8px}.nav-button{min-height:42px}.replay{display:none}
  .intro .eyebrow{bottom:7%}
  .letter-scroll{padding-top:75px}.letter-content{max-width:540px}
  .photo-dialog[open]{padding:14px 70px 70px}
  .photo-dialog img{max-height:calc(100dvh - 90px);max-width:calc(100vw - 150px)}
  .photo-dialog .photo-actions{bottom:8px;padding:1px 8px}
}