/* Option pages sit on the live look; this only sizes the supplied artwork and adds the picker bar. */
main { padding-bottom: 76px; }
.art { display: block; height: min(78vh, 700px); width: auto; max-width: 80vw; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.18)); }  /* same soft glow as the live logo's .halo */
main.door .art { height: min(46vh, 420px); margin-bottom: 1.2em; }
main.farm .doorbits { display: none; }
main.door .logo { width: 220px; }
main.farm .logo { width: auto; height: min(78vh, 700px); aspect-ratio: 787 / 1200; max-width: 68vw; }
.bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 14px/1 Arial, sans-serif; white-space: nowrap;
}
.bar a, .bar span { color: #e3c876; text-decoration: none; padding: 8px 10px; border-radius: 999px; min-width: 14px; text-align: center; }
.bar a:hover { background: rgba(227, 200, 118, 0.14); }
.bar a.on { background: rgba(227, 200, 118, 0.22); }
.bar span { color: #f2f2f2; min-width: 56px; }
.bar i { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.16); margin: 0 4px; }
/* Phones: the bar has to fit inside 390 px with the 16 px gutters. */
@media (max-width: 480px) {
  .bar { gap: 0; padding: 4px 6px; font-size: 13px; max-width: calc(100vw - 32px); box-sizing: border-box; }
  .bar a, .bar span { padding: 7px 6px; }
  .bar span { min-width: 22px; }
  .bar i { margin: 0 2px; }
}
.grid { justify-content: flex-start; padding-top: 40px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; width: min(980px, 100%); }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  height: 250px; padding: 12px; box-sizing: border-box; border-radius: 10px; text-decoration: none; color: #e3c876;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10);
}
.tile:hover { border-color: #d4af37; }
.tile img { max-width: 100%; min-height: 0; flex: 1; object-fit: contain; }
.tile .halo { flex: 1; min-height: 0; display: flex; }
.tile .logo.mini { width: auto; height: 100%; margin: 0; aspect-ratio: 787 / 1200; }
.tile span { font-size: 15px; letter-spacing: 0.15em; }
/* 3D mode (bg3d.js): the WebGL glossy black replaces the CSS gradients and the frosted pane. */
html.bg3d body { background: #000; }
html.bg3d body::before { display: none; }
canvas.bg3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
html.bg3d .tile { background: rgba(0, 0, 0, 0.25); }