.sup-presentation { position: absolute; pointer-events: none; overflow: hidden; }
.sup-presentation[data-scene-renderer] { background: transparent; contain: paint; }
.sup-scene-background { background: #000; contain: paint; }
.sup-scene-background[data-scene="catalogue"] { background: transparent; }
.sup-artwork { z-index: 0; }
#graphics-button { position: fixed; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: max(78px, calc(env(safe-area-inset-right) + 68px)); padding: 6px 10px; opacity: .85; font-size: 13px; }
@media(max-height:450px) { #graphics-button, #menu-button { top: 3px; font-size: 11px; padding: 4px 7px; } }

/* Reserve this row inside the existing help area, so arrivals never move play. */
.sup-guidance.sup-with-messages { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:44px minmax(0,1fr); gap:4px 12px; }
.sup-message-row { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; min-width:0; }
#more-messages { min-height:44px; max-width:100%; padding:6px 14px; border:1px solid #b49a56; background:#25231c; color:#f1d878; font:600 14px/1.2 system-ui,sans-serif; }
#more-messages:disabled { opacity:1; color:#c8bd91; }
#more-messages[hidden] { display:none; }
#more-messages:focus-visible { outline:2px solid #fff2bd; outline-offset:2px; }
.sup-guidance.sup-with-messages .sup-guidance-info { grid-column:1; grid-row:2; }
.sup-guidance.sup-with-messages .sup-guidance-controls { grid-column:2; grid-row:2; }
.sup-guidance.sup-with-messages #native-back { grid-column:2; grid-row:2; }

#message-notice { color:#f1d878; font:600 14px/1.3 system-ui,sans-serif; text-align:center; }
#message-notice[hidden] { display:none; }
.sup-message-row { min-height:44px; width:100%; }

/* Native ticks select emphasis. Keep words visible in the cleared phase and
   never interpolate or run a separate browser animation. */
#message-notice { padding:6px 14px; border:1px solid #b49a56; background:#25231c; }
.sup-message-row[data-message-phase="bright"] > :is(#more-messages,#message-notice) { border-color:#f1d878; box-shadow:inset 0 0 0 1px #f1d878; background:#4b4020; }
@media(prefers-reduced-motion:reduce) {
 .sup-message-row[data-message-phase] > :is(#more-messages,#message-notice) { border-color:#f1d878; box-shadow:inset 0 0 0 1px #f1d878; background:#4b4020; }
}