.preview-footer { justify-content: flex-end; }
#fullscreen, #mobile-ar-controls button {
  padding: 9px 18px;
  min-height: 44px;
  border: 0;
  border-radius: 3px;
  background: #ca2017;
  color: white;
  font: 700 14px/1.29 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}
#fullscreen:hover, #mobile-ar-controls button:hover { background: #e43a31; }
.preview:fullscreen, .preview.window-fill {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: black;
}
body.player-expanded { overflow: hidden; }
#mobile-ar-controls { position: absolute; inset: 0; z-index: 15; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px; pointer-events: none; overflow: hidden; }
#mobile-ar-controls:dom-overlay { background: transparent; }
#mobile-ar-controls button { margin: 4px; }
#mobile-ar-animations { display: flex; flex-direction: column; max-width: 360px; }
#mobile-ar-controls[hidden], #mobile-ar-animations[hidden], #fullscreen[hidden] { display: none; }
.preview-footer { right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
.screen-menu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#mobile-ar-controls #pearl-menu { display: flex; align-items: center; gap: 10px; position: relative; isolation: isolate; height: 48px; padding: 0 18px 0 0; background: transparent; border-radius: 0; color: #3b2310; font: italic 700 25px/1 var(--serif, Palatino, serif); text-transform: none; letter-spacing: 0; overflow: visible; }
.screen-pearl {
  position: relative; display: block; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  /* Match the wrist's antique bronze bezel around its smaller glossy teal sphere. */
  background: conic-gradient(from 135deg, #50300f, #a77635 18%, #f5dda0 36%, #a87834 49%, #624015 64%, #d7b46c 82%, #50300f);
  box-shadow: inset 0 1px 1px #fff0bb, inset 0 -1px 2px #39240e, 0 3px 5px #0007;
}
.screen-pearl::after {
  content: ''; position: absolute; inset: 3.5px; border-radius: 50%; pointer-events: none;
  /* Teal Pearl material: base RGB .035/.38/.30, smoothness .93, metallic .35. */
  background:
    radial-gradient(ellipse 11% 8% at 30% 23%, #fff 0%, #effff9 40%, #e2fff400 100%),
    radial-gradient(ellipse 32% 17% at 36% 25%, #c3fff2d9 0%, #8adcc57a 50%, #8adcc500 100%),
    radial-gradient(ellipse 45% 16% at 63% 88%, #83e4c299 0%, #36b89800 100%),
    radial-gradient(circle at 35% 28%, #369f87 0%, #09614d 43%, #034033 68%, #01271f 84%, #24785e 100%);
  box-shadow: inset 0 0 1px 1px #002c23aa, inset -2px -3px 5px #001d18a6, 0 0 2px #271a0bcc;
}
.screen-pearl::before { content: ''; position: absolute; inset: -25px; background: url('menu-pearl-glow.png') center/contain no-repeat; opacity: 0; transition: opacity .3s; pointer-events: none; }
.menu-open .screen-pearl::before { opacity: 1; }
.menu-open .screen-pearl { box-shadow: 0 0 18px 7px #ffc34b99, inset 0 1px 1px #fff0bb, inset 0 -1px 2px #39240e, 0 3px 5px #0007; }
#screen-scroll { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 78px); left: max(16px, env(safe-area-inset-left)); width: min(330px, calc(100% - 32px)); max-height: calc(100% - max(12px, env(safe-area-inset-top)) - 100px); box-sizing: border-box; padding: 24px 25px; background: transparent url('menu-parchment.png') center/100% 100%; border: 0; border-radius: 0; filter: drop-shadow(0 8px 12px #0005); overflow: auto; overscroll-behavior: contain; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-20px,-32px) scale(.15,.05); transform-origin: top left; transition: transform .35s ease, opacity .2s, visibility .35s; color: #362511; }
.menu-open #screen-scroll { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.scroll-page { display: flex; flex-direction: column; gap: 8px; opacity: 1; transition: opacity .13s; }
.changing .scroll-page { opacity: 0; pointer-events: none; }
#mobile-ar-controls .scroll-page button { background: #fffae65e; color: #382617; border: 1px solid #8c663d88; margin: 0; text-transform: none; letter-spacing: 0; font: 700 16px/1.3 var(--serif, Palatino, serif); }
#mobile-ar-controls .scroll-page button:hover:enabled { background: #fff3c9; }
#mobile-ar-controls .scroll-page button:disabled { opacity: .55; cursor: default; }
#mobile-ar-controls .scroll-page .paid { background: #f9dc8b; color: #4d3700; opacity: 1; }
#screen-scroll h2 { margin: 0; font: italic 700 24px/1.2 var(--serif, Palatino, serif); }
#screen-status { font-size: 15px; margin: 0 0 6px; }
#mobile-ar-controls [hidden] { display: none !important; }
#mobile-ar-controls button:focus-visible { outline: 3px solid #ad6400; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #screen-scroll, .scroll-page, .screen-pearl::before { transition: none; } }

#mobile-ar-controls #pearl-menu::after { content: ''; position: absolute; z-index: -1; left: 20px; right: 0; top: 6px; bottom: 6px; background: transparent url('menu-parchment.png') center/100% 100% no-repeat; }