html.rotation-invite-open{overflow:hidden!important}
.rotation-invite{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(360px,calc(100vw - 40px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);overflow:auto;padding:40px 28px 28px;border:1px solid rgba(255,249,233,.23);border-radius:26px;color:#f4f0e8;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(231,224,210,.035) 55%,rgba(235,205,158,.055));backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%);box-shadow:0 16px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,238,209,.04);text-align:center;font-family:inherit;opacity:0;transform:translateY(7px);transition:opacity 180ms ease,transform 180ms ease}
.rotation-invite.is-visible{opacity:1;transform:translateY(0)}
.rotation-invite::backdrop{background:rgba(0,0,0,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.rotation-invite button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rotation-close{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;border-radius:50%;opacity:.7;transition:opacity 160ms ease,background 160ms ease}
.rotation-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25}
.rotation-close:hover{opacity:1;background:rgba(255,255,255,.04)}
.rotation-icon{display:block;width:96px;height:96px;margin:0 auto 22px;overflow:visible;fill:none;stroke:rgba(255,249,237,.76);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.rotation-device{transform-origin:48px 48px;animation:rotation-gesture 6s cubic-bezier(.45,0,.25,1) infinite;filter:drop-shadow(0 0 5px rgba(255,229,183,.12))}
.rotation-device rect{fill:rgba(255,255,255,.035)}
.rotation-arrows{opacity:.45}
.rotation-invite h2{font-size:19px;font-weight:400;line-height:1.4;letter-spacing:.01em;margin:0 0 12px}
.rotation-invite p{font-size:14px;font-weight:400;line-height:1.65;color:rgba(247,242,232,.85);margin:0 auto 28px;max-width:270px}
.rotation-continue{min-height:48px;width:100%;padding:12px 14px;border:1px solid rgba(255,249,235,.19);border-radius:12px;background:rgba(255,255,255,.055);font-size:13px!important;transition:background 160ms ease,border-color 160ms ease}
.rotation-continue:hover,.rotation-continue:active{background:rgba(255,255,255,.1);border-color:rgba(255,249,235,.29)}
.rotation-invite button:focus-visible{outline:1px solid rgba(255,243,219,.85);outline-offset:3px}
@keyframes rotation-gesture{0%,18%,100%{transform:rotate(0deg)}45%,68%{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.rotation-device{animation:none}.rotation-invite,.rotation-invite button{transition:none}}

/* Compact, non-blocking hint shown above the footer on phones in portrait. */
.rotation-invite{inset:auto 0 calc(20px + env(safe-area-inset-bottom)) 0;margin:0 auto;width:min(420px,calc(100vw - 32px));max-height:none;padding:14px 52px 14px 14px;display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;text-align:left;border-radius:18px;background:linear-gradient(145deg,rgba(52,46,38,.82),rgba(32,31,29,.86));z-index:60}
.rotation-invite:not([open]){display:none}
.rotation-invite .rotation-icon{grid-row:1/3;width:44px;height:44px;margin:0}
.rotation-invite h2{font-size:14px;margin:0 0 2px;line-height:1.35}
.rotation-invite p{font-size:12.5px;line-height:1.45;margin:0;max-width:none}
.rotation-invite .rotation-continue{display:none}
.rotation-invite .rotation-close{top:50%;right:4px;transform:translateY(-50%)}