:root {
  --page-width: 540px;
  --bg: #000;
  --button-bg: #2c2c2c;
  --button-border: #f0f0f0;
  --text: #f4f4f4;
  --muted: #bfc3c7;
  --install-bg: #a8dff2;
  --install-text: #111;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; min-height: 100%; }
body {
  background: #000;
  color: var(--text);
  font-family: Arial, Tahoma, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  --install-banner-space: 0px;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: #000;
  padding-bottom: 0;
  transition: padding-bottom .22s ease;
}

/* When the Add to Home bar is visible, reserve real document space below
   the landing card. This lets the page scroll far enough that Facebook and
   Share sit completely above the fixed install bar instead of being covered. */
body.install-banner-visible .page {
  padding-bottom: var(--install-banner-space);
}

/* The supplied PSD is 1080 × 1920. */
.landing-card {
  position: relative;
  width: min(100%, var(--page-width));
  aspect-ratio: 1080 / 1920;
  background: #000;
  overflow: hidden;
}

.hero-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 71.8%;
  display: block;
  cursor: pointer;
}

.hero-art {
  position: absolute;
  left: -0.28%;
  top: -1.10%;
  width: 100.56%;
  height: auto;
  display: block;
  border: 0;
}

.accent-line {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  height: max(2px, 0.31%);
  background: #a6a6a6;
}
.accent-line--short { top: 73.80%; width: 21.11%; }
.accent-line--long  { top: 75.31%; width: 35%; }

.enter-game {
  position: absolute;
  z-index: 3;
  left: 20.56%;
  top: 77.24%;
  width: 56.20%;
  height: 7.29%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: clamp(1px, 0.22vw, 2px) solid var(--button-border);
  border-radius: clamp(6px, 1.1vw, 12px);
  background: var(--button-bg);
  color: #eee;
  text-decoration: none;
  font-size: clamp(18px, 4.05vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.enter-game:hover,
.enter-game:focus-visible {
  background: #393939;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14);
  outline: none;
}
.enter-game:active { transform: scale(.985); }

.social-actions {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 91.15%;
  transform: translateX(-50%);
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 30px);
}

.facebook-link,
.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  color: #e8e8e8;
  text-decoration: none;
  white-space: nowrap;
}

.facebook-link img {
  width: clamp(28px, 5.1vw, 54px);
  height: clamp(28px, 5.1vw, 54px);
  object-fit: contain;
  display: block;
}

.facebook-link span,
.share-link span {
  color: #e8e8e8;
  font-size: clamp(14px, 2.75vw, 28px);
  font-weight: 700;
  line-height: 1;
}

.share-link {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.share-link svg {
  width: clamp(27px, 4.8vw, 50px);
  height: clamp(27px, 4.8vw, 50px);
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  fill: #111;
  display: block;
}

.facebook-link:hover span,
.facebook-link:focus-visible span,
.share-link:hover span,
.share-link:focus-visible span { text-decoration: underline; }

.facebook-link:focus-visible,
.share-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.share-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: calc(14px + var(--install-banner-space));
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #111;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  white-space: nowrap;
}
.share-toast[hidden] { display: none !important; }

/* ---------------------------------------------------------
   Add to Home: intentionally follows the simple ItemNext bar:
   light-blue strip + icon on the left + one line of wording.
   The complete strip is the button; there is no ADD/X clutter.
   --------------------------------------------------------- */
.install-banner {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--page-width));
  min-height: 88px;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding:
    10px
    max(16px, env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: var(--install-bg);
  color: var(--install-text);
  box-shadow: 0 -1px 0 rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform .22s ease, opacity .18s ease;
}
.install-banner[hidden] { display: none !important; }
.install-banner:hover { filter: brightness(.99); }
.install-banner:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.install-banner:active { filter: brightness(.96); }

.install-banner__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 13px;
  object-fit: cover;
  display: block;
}
.install-banner__text {
  display: block;
  min-width: 0;
  color: #111;
  font-size: clamp(15px, 3.2vw, 19px);
  font-weight: 400;
  line-height: 1.38;
}

/* Installation instructions */
.install-modal[hidden] { display: none !important; }
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}
.install-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.install-modal__panel {
  position: relative;
  width: min(100%, 390px);
  border: 1px solid #4d4d4d;
  border-radius: 18px;
  background: #171717;
  box-shadow: 0 22px 80px rgba(0,0,0,.7);
  padding: 26px 22px 20px;
  text-align: center;
}
.install-modal__close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 27px;
  cursor: pointer;
}
.install-modal__icon { width: 78px; height: 78px; border-radius: 16px; }
.install-modal h2 { margin: 14px 0 10px; font-size: 22px; }
.install-modal p { margin: 7px 0; color: #ddd; font-size: 14px; line-height: 1.55; }
.install-modal .step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #242424;
}
.install-modal .step b {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 13px;
}
.install-modal__ok {
  margin-top: 12px;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #303030;
  color: #fff;
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
}


@media (max-width: 380px) {
  .social-actions { width: 92%; gap: 12px; }
  .facebook-link span, .share-link span { font-size: 13px; }
}
@media (max-width: 380px) {
  .install-banner { min-height: 82px; gap: 10px; padding-top: 9px; }
  .install-banner__icon { width: 58px; height: 58px; border-radius: 12px; }
  .install-banner__text { font-size: 14px; }
}

@media (min-width: 700px) {
  :root { --page-width: 600px; }
  .landing-card { box-shadow: 0 0 60px rgba(255,255,255,.035); }
  .install-banner { min-height: 94px; }
  .install-banner__icon { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* =========================================================
   Enter The Game - blinking / glowing call-to-action
   ========================================================= */
.enter-game {
  animation: enterGameBlink 1.15s ease-in-out infinite;
}

@keyframes enterGameBlink {
  0%, 100% {
    background: var(--button-bg);
    border-color: var(--button-border);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }

  50% {
    background: #454545;
    border-color: #ffffff;
    box-shadow:
      0 0 12px rgba(255,255,255,.78),
      0 0 26px rgba(255,255,255,.30);
  }
}

/* Keep the button steady while the user is interacting with it. */
.enter-game:hover,
.enter-game:focus-visible,
.enter-game:active {
  animation-play-state: paused;
}

/* Accessibility: respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .enter-game {
    animation: none;
  }
}