/* Independent general-player entry. No camp styles or PWA registration. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
.title-screen {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* Same single full-bleed scenery approach as Skin001, with uniform cover
   scaling required by this master rather than the older home stretch rule. */
.title-screen__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.title-screen__composition {
  position: relative;
  top: 50%;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  height: min(100vh, 177.777778vw);
  height: min(100dvh, 177.777778vw);
  margin-inline: auto;
  transform: translateY(-50%);
}
/* Approved 720 x 1280 reference: visible logo starts at y=283.
   The PNG's original transparent canvas is retained: its artwork begins
   at y=219/1254, accounted for by translateY rather than editing the asset.
   Capping the composition width protects short phones and desktop layouts. */
.title-screen__logo {
  position: absolute;
  top: 22.109375%;
  left: 50%;
  width: 86.805556%;
  height: auto;
  transform: translate(-50%, -17.464115%);
  filter: drop-shadow(1px 2px 3px rgb(38 45 20 / 10%));
  pointer-events: none;
  user-select: none;
}
/* B3 artwork starts 25px below its canvas edge; reference visible top=856.
   The native button is the interaction layer; there is no extra visible UI. */
.title-screen__start-art {
  position: absolute;
  top: 66.875%;
  left: 50%;
  width: 65.277778%;
  transform: translate(-50%, -5.868545%);
}
.title-screen__start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(4% 30%, 10% 17%, 33% 0, 38% 12%, 67% 9%, 82% 5%, 90% 25%, 96% 27%, 96% 88%, 85% 99%, 20% 99%, 5% 88%);
}
.title-screen__start-art img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  filter: drop-shadow(1px 3px 3px rgb(45 32 12 / 20%));
  transition: transform 100ms ease-out;
}
.title-screen__start-art:has(.title-screen__start:active) img { transform: scale(.98); }
.title-screen__start:focus-visible { outline: 2px solid #fff5d9; outline-offset: -10px; }
@media (prefers-reduced-motion: reduce) {
  .title-screen__start-art img { transition: none; }
}