html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #fff;
}

.wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.poster {
  position: relative;
  width: 100%;
  max-width: 1600px;
}

.poster picture,
.poster img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* bottom-right transparent hotspot */
.hotspot {
  position: absolute;
  display: block;
  left: var(--hs-left, auto);
  right: var(--hs-right, 2%);
  top: var(--hs-top, auto);
  bottom: var(--hs-bottom, 1%);
  width: var(--hs-width, 16%);
  height: var(--hs-height, 9%);
  text-decoration: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
  border-radius: 6px;
  z-index: 2;
}

.hotspot:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 2px;
}

/* Defaults: A4 portrait */
:root {
  --hs-right: 5%;
  --hs-bottom: 1%;
  --hs-width: 21%;
  --hs-height: 10%;

  /* Center button (portrait) */
  --btn-top: 74%;
  --btn-left: 56%;
  --btn-padding:0.2em 0.2em;
}

/* Landscape overrides (positions only) */
@media (orientation: landscape) {
  :root {
    --hs-right: 4%;
    --hs-bottom: 0%;
    --hs-width: 76%;
    --hs-height: 13%;

    /* Center button (landscape) */
    --btn-top: 56%;
    --btn-left: 56%;
    --btn-padding:0.5em 1em;

  }
}

/* ===================== */
/* Centered "Ia Bilete" button */
/* ===================== */

.center-btn {
  position: absolute;
  top: var(--btn-top);
  left: var(--btn-left);
  transform: translate(-50%, -50%);
  background: #fff;
  color: #000;
  font-weight: 700;               /* bold text */
  font-size: 1rem;
  text-decoration: none;
  padding:var(--btn-padding);
  border-radius: 20px;
  border: 2px solid #000;         /* visible black border */
  z-index: 3;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: pointer;
  animation: fadeInPop 0.8s ease-out 0.4s both, pulseGlow 2.5s ease-in-out infinite;
}

/* Hover – red background, white text, white border */
.center-btn:hover {
  background: #d32f2f;            /* rich red */
  color: #fff;
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 0 25px rgba(255,255,255,0.6);
}

/* Active – click feedback */
.center-btn:active {
  transform: translate(-50%, -50%) scale(0.98);
}

/* Page load fade-in pop */
@keyframes fadeInPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Gentle glowing pulse */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 25px rgba(255, 255, 255, 0.55); }
}