/* Scoped to the shared device decision; desktop selectors and geometry stay native. */
.phone-mode .story-desktop-tag { display:none !important; }
/* Phone invitation (phone-notice.js): a lantern-lit glass card that rises from the bottom. */
.phone-mode .phone-invitation { position:fixed; z-index:10070; left:12px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); display:flex; align-items:flex-start; gap:14px; padding:18px 18px 16px; border-radius:18px; color:#efe9de;
  background:linear-gradient(160deg,rgba(34,30,26,.86),rgba(16,16,20,.9)); border:1px solid rgba(228,199,158,.22); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,236,204,.08) inset,0 2px 6px rgba(20,12,4,.25),0 22px 48px -18px rgba(20,12,4,.7),0 0 60px -30px rgba(255,183,102,.55);
  opacity:0; transform:translate3d(0,24px,0) scale(.98); transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.34,1.4,.5,1); }
.phone-mode .phone-invitation.is-on { opacity:1; transform:none; }
.phone-invitation .pi-mark { flex:none; width:44px; height:30px; margin-top:2px; fill:none; stroke:#e4c79e; stroke-width:1.4; stroke-linecap:round; }
.phone-invitation .pi-glow { fill:rgba(255,183,102,.28); stroke:none; filter:drop-shadow(0 0 5px rgba(255,183,102,.7)); animation:pi-breathe 3.2s ease-in-out infinite; }
@keyframes pi-breathe { 50% { opacity:.55; } }
.phone-invitation .pi-copy { min-width:0; flex:1; }
.phone-invitation strong { display:block; width:100%; font:500 20px/1.25 var(--display); margin-bottom:8px; }
.phone-invitation p { font:400 13.5px/1.5 var(--sans); color:#e6e0d5; }
.phone-invitation .pi-note { margin-top:4px; color:#b9b3a8; font-size:12.5px; }
.phone-invitation .pi-actions { display:flex; gap:8px; margin-top:14px; }
.phone-invitation button { min-height:44px; padding:0 16px; border-radius:999px; font:500 11px/1 var(--mono); letter-spacing:.04em; transition:transform .18s cubic-bezier(.34,1.4,.5,1),background-color .18s ease,color .18s ease; }
.phone-invitation .pi-ok { margin-left:auto; color:#1a140c; background:#e4c79e; box-shadow:0 0 18px -6px rgba(255,183,102,.8); }
.phone-invitation .pi-copy-link { color:#e4c79e; background:transparent; border:1px solid rgba(228,199,158,.32); }
.phone-invitation .pi-ok:hover { background:#f0d6ae; }
.phone-invitation .pi-copy-link:hover { background:rgba(228,199,158,.12); }
.phone-invitation button:focus-visible { outline:2px solid #e4c79e; outline-offset:3px; }
.phone-invitation button:active { transform:scale(.95); }
@media (prefers-reduced-motion:reduce) { .phone-mode .phone-invitation { transform:none; transition:opacity .2s linear; } .phone-invitation .pi-glow { animation:none; } .phone-invitation button { transition:none; } }
@media (max-height:480px) { .phone-mode .phone-invitation { bottom:16px; left:auto; width:min(440px,calc(100% - 32px)); } }
/* The opening uses its initial visual height until a width/orientation change.
   Android's address bar may resize innerHeight during a swipe. */
.phone-mode.depth .depth-room { height:calc(var(--phone-opening-height,100svh) * 5 / var(--page-zoom, 1)); }
.phone-mode.depth .depth-line { top:calc((var(--phone-opening-height,100svh) * .5 + 34px) / var(--page-zoom, 1)); }
.phone-mode.depth .depth-pct { top:calc((var(--phone-opening-height,100svh) * .5 + 22px) / var(--page-zoom, 1)); }
/* Reserve the dock's space inside the dark footer, instead of a pale body tail. */
.phone-mode body:has(.site-footer.night) { padding-bottom:0; }
.phone-mode .site-footer.night { padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)); }

/* Horizontal strokes wipe the glass; vertical swipes keep native page scrolling. */
.phone-mode #darkRain { touch-action:pan-y; }
/* Phones: a still of Lilies at night replaces the 3D study model (Jun: the 3D breaks his phone). */
.dark-still { display:none; }
.phone-mode .dark-stage #darkGl, .phone-mode .dark-stage .dark-hint { display:none !important; }
.phone-mode .dark-stage { position:relative; overflow:hidden; }
.phone-mode .dark-still { display:block; position:absolute; inset:0; }
.phone-mode .dark-stage figcaption { z-index:1; }
.phone-mode .dark-still img { width:100%; height:100%; object-fit:cover; display:block; }