body:has(#app[data-view="title"])::before {
  background: radial-gradient(ellipse at center, #512621, #1d1112 58%, #100b0d);
  filter: none;
}
#title-screen {
  display: grid;
  place-items: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background: radial-gradient(ellipse at center, #55212044, #180909ba),
    url("assets/juke-enamel.webp") center / 74px 88px, #361312;
}

/* Artwork and controls share one coordinate system, even when the screen is letterboxed. */
.title-cabinet {
  position: relative;
  width: min(100%, calc((100vh - var(--safe-t) - var(--safe-b)) * 941 / 1672));
  width: min(100%, calc((100dvh - var(--safe-t) - var(--safe-b)) * 941 / 1672));
  aspect-ratio: 941 / 1672;
  background: url("assets/title-art.webp") center / 100% 100% no-repeat;
}

.title-control {
  position: absolute;
  padding: 0;
  border: 0;
  color: #fff2c9;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.title-control::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.title-control:focus-visible { outline: none; }
.title-control:focus-visible::after {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}
.title-control:active::after { background: #fff0cd24; }
@media (hover: hover) {
  .title-control:hover::after { box-shadow: inset 0 0 14px #fff0c32e; }
}

/* One START control covers the illustration and its ticket. Feedback outlines only the printed ticket. */
.title-start {
  inset: 0 0 auto;
  width: 100%;
  height: 84.69%; /* through y=1416 of the original */
}
.title-start::after {
  inset: auto;
  left: 6.9%;
  bottom: 0;
  width: 86.1%;
  height: 15.25%; /* 216px ticket within the 1416px START region */
  border-radius: 6% / 15%;
}
.title-secondary {
  top: max(85.1%, calc(90.13% - max(2.7%, 22px)));
  width: 35%;
  height: max(5.4%, 44px);
  border-radius: 999px;
}
#title-settings { left: 12.5%; }
#title-help { left: 53%; }

#app[data-view="title"] #overlay .sheet {
  border-color: #b48259;
  background: linear-gradient(145deg,#351b1af2,#211517fa), url("assets/juke-enamel.webp") center / 74px 88px;
}
#app[data-view="title"] #overlay .sheet-mark { color: #ffb67e; }
#app[data-view="title"] #overlay .primary {
  color: #3b1c14;
  background: linear-gradient(110deg,#ffce99,#f3a17b);
}
#app[data-view="title"] .setting output { color: #ffca9b; }
#app[data-view="title"] .setting input { accent-color: #ffbd8c; }
#app[data-view="title"] .photo-setting button[aria-pressed=true] { background:#ffc195;color:#351d18; }
.title-help dl { margin: 16px 0 20px; }
.title-help dt { margin-top: 13px;color:#ffcf9f;font-size:15px;font-weight:730; }
.title-help dd { margin: 3px 0 0;font-size:14px;line-height:1.65; }