/* The existing sky shows through the clear board and frosted panel surfaces.
   Only backgrounds use alpha; text, controls and pieces remain fully opaque. */
.page-backdrop { position:absolute; inset:0; z-index:1; pointer-events:none; visibility:hidden; }
.page-backdrop[data-ready] { visibility:visible; }
.page-backdrop picture { position:absolute; inset:0; display:block; }
.page-backdrop img { width:100%; height:100%; display:block; object-fit:cover; }
.celestial-surround { opacity:1; }
.page-backdrop .celestial-header { bottom:auto; height:var(--header-height); opacity:1; }
.celestial-header img { object-position:50% 18%; }
.celestial-header:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#e4efdfb8,#edf2e388 45%,#e4efdfb8); }
body[data-theme="sunset"] .celestial-header:after { background:linear-gradient(90deg,#f4e3d4b8,#e9dce188 45%,#f4e3d4b8); }
body[data-theme="night"] .celestial-header:after { background:linear-gradient(90deg,#263c59b8,#34456388 45%,#263c59b8); }
.board-shell,body[data-theme="night"] .board-shell,.board { background:transparent; }
.pixelstanza-link { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:2px 4px; border-radius:4px; color:#4e6674; font-size:9px; letter-spacing:.8px; text-decoration:underline; text-underline-offset:3px; }
.pixelstanza-link:hover { color:#29495e; background:#e4ebe5; }
.pixelstanza-link:focus-visible { outline:3px solid #9d5821; outline-offset:2px; }
.context-footer .pixelstanza-link span { font-size:12px; letter-spacing:0; }
.context-panel {
  --menu-ink:#213e52; --menu-muted:#2d4658; --menu-paper:rgba(248,245,233,.84);
  background:linear-gradient(145deg,#fff7e812,transparent 48%),var(--menu-paper);
  border-color:#ffffffa6;
}
.context-panel .eyebrow,.context-panel .chapter-label { color:#58452b; }
.context-panel .settings-row small,.context-panel .result-stat span,.context-panel .panel-tip { color:var(--menu-muted); }
.context-panel .context-footer,.context-panel .pixelstanza-link { color:var(--menu-muted); }
.context-panel .modal-top { background:rgba(248,245,233,.74); border-radius:8px; }
.board-top,.play-messages {
  --ink:#244755; --muted:#304c5d;
  color:var(--ink); background:rgba(247,246,235,.84);
  border-radius:14px; box-shadow:inset 0 0 0 1px #ffffff80;
}
.play-messages .coach { background:#fff9df38; border-color:#ffffff70; }
body[data-theme="night"] .board-top,body[data-theme="night"] .play-messages {
  --ink:#edf5f8; --muted:#dae7f2;
  background:rgba(17,38,64,.86); box-shadow:inset 0 0 0 1px #c8e1f04d;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .context-panel { --menu-paper:rgba(248,245,233,.74); }
  .board-top,.play-messages { background:rgba(247,246,235,.74); }
  body[data-theme="night"] .board-top,body[data-theme="night"] .play-messages { background:rgba(17,38,64,.76); }
  .context-panel,.board-top,.play-messages { backdrop-filter:blur(10px) saturate(.85); -webkit-backdrop-filter:blur(10px) saturate(.85); }
  .context-panel .modal-top { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
}
@media(max-width:700px) and (orientation:portrait) {
  .celestial-surround img { object-position:10% 50%; }
  body[data-theme="night"] .celestial-surround img { object-position:90% 50%; }
}