/* phones (js/mobile.js) */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  html.touch:not(.portrait-ok) #rotate {
    display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #3b2550, #150c22 75%); color: #fff; text-align: center; padding: 32px;
  }
}
.rotate-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 320px; }
.rotate-phone { width: 64px; height: 104px; border: 4px solid #ffd9a8; border-radius: 14px; position: relative; margin-bottom: 18px;
  animation: turnMe 2.6s ease-in-out infinite; box-shadow: 0 0 30px rgba(255, 150, 120, .35); }
.rotate-phone::after { content: "🍁"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; animation: keepUp 2.6s ease-in-out infinite; }
@keyframes turnMe { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes keepUp { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.rotate-title { margin: 0; font: italic 700 30px/1.15 'Playfair Display', Georgia, serif; }
.rotate-text { margin: 0; font: 500 15px/1.5 'Fredoka', sans-serif; color: rgba(255, 255, 255, .78); }
.rotate-small { margin: 0; font: 500 12px/1.5 'Fredoka', sans-serif; color: rgba(255, 255, 255, .5); }
#rotate-auto { margin-top: 8px; padding: 13px 26px; border: 0; border-radius: 999px; background: #ff7aa8; color: #fff;
  font: 600 16px/1 'Fredoka', sans-serif; box-shadow: 0 8px 24px rgba(255, 90, 140, .4); }
#rotate-skip { margin-top: 6px; border: 0; background: none; color: rgba(255, 255, 255, .55); font: 500 13px/1 'Fredoka', sans-serif; text-decoration: underline; padding: 10px; }

/* lighter on phones: the full-screen film grain is expensive to blend every frame */
html.touch #grain { display: none; }
html.touch body { overscroll-behavior-y: none; }

/* start screen fits a short landscape phone */
@media (max-height: 500px) {
  .start-name { font-size: clamp(44px, 16vh, 90px); margin: 6px 0 2px; }
  .start-sub { margin-bottom: 14px; font-size: 22px; }
  .start-tip { margin-top: 12px; }
  #begin { padding-top: 10px; padding-bottom: 10px; }
}

/* keep the picture one steady size while the address bar slides in and out (it would otherwise
   re-crop and shift every scene a little on each scroll). lvh = the full screen height. */
@supports (height: 100lvh) {
  html.touch #stage { bottom: auto; height: 100lvh; }
}

/* sideways phones: the picture is small, so the words should be too */
@media (max-height: 500px) {
  #year-pill { top: 6px; padding: 4px 14px; min-width: 0; gap: 0; }
  #year-main { font-size: 13px; }
  #year-sub { font-size: 9px; }
  #caption { top: 44px; width: min(70vw, 560px); }
  #cap-title { font-size: 17px; }
  #caption.big #cap-title { font-size: 22px; }
  #cap-text { font-size: 11px; line-height: 1.35; margin-top: 2px; }
  #caption::before { inset: -10px -24px; }
  #card-num { font-size: 10px; }
  #card-title { font-size: 26px; }
  #hint { font-size: 11px; }
  #sound { width: 36px; height: 36px; font-size: 15px; }
  .tap-hint { font-size: 9px; padding: 3px 8px 3px 5px; gap: 4px; }
  .tap-dot { width: 7px; height: 7px; }
}

/* smoother scrolling on phones: every twinkling star makes the whole painted scene redraw each frame,
   and some scenes have 300-550 of them. Keep one in five twinkling, the rest shine steadily. */
/* (stars are calmed in js/mobile.js: steady, and never smaller than a pixel) */
html.touch .bd-twinkle, html.touch .star, html.touch .fstar { animation: none; }
html.touch .fstar { min-width: 2px; min-height: 2px; }
/* a very slow, gentle shimmer on a few stars so the sky still feels alive (no blinking) */
html.touch .star-soft { animation: starSoft 6s ease-in-out infinite; }
@keyframes starSoft { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
/* frosted-glass blur behind the time pill and the music button is costly to redo as the scene moves */
html.touch #year-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .8); }
html.touch #sound { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.touch #caption.show { animation-name: riseLite; }
@keyframes riseLite { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* iPhones held sideways: keep the buttons clear of the Dynamic Island and the home bar */
#sound { right: max(calc(var(--u) * 2.4), env(safe-area-inset-right)); bottom: max(calc(var(--u) * 2.6), env(safe-area-inset-bottom)); }
@media (max-height: 500px) {
  #sound { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
#rotate { padding: max(32px, env(safe-area-inset-top)) 32px max(32px, env(safe-area-inset-bottom)); }

/* sideways phones are wider than the painted scenes, so their top is cropped and the centre-top is busy
   (school sign, moon). Tuck the time pill into the top-left corner, clear of the Dynamic Island. */
@media (max-height: 500px) {
  #year-pill { left: max(12px, env(safe-area-inset-left)); transform: none; align-items: flex-start; }
  #caption { top: 10px; }
  #caption::before { inset: -8px -30px; background: radial-gradient(closest-side, rgba(30, 14, 46, .62), rgba(30, 14, 46, 0)); }
}
@media (max-height: 500px) {
  /* the school's name sign sits at the very top on a sideways phone: put school captions on the track */
  body[data-chapter="school"] #caption { top: auto; bottom: 14px; }
}
@media (max-height: 500px) {
  #chapter-card { top: 64px; padding: 14px 60px; gap: 6px; background: radial-gradient(closest-side, rgba(20, 10, 34, .78), rgba(20, 10, 34, 0)); }
}