/* Vstup do hry — samostatné UI bez závislosti na animovaných vrstvách. */
:root {
  --gold: #d4b26e;
  --gold-light: #ffe7a7;
  --ink: #101920;
  --muted: #bcb6a9;
}

/* CTA sdílí kotvení a šířku loga, zůstává mimo pohyb kamery. */
.play-entry {
  margin: clamp(16px, 2.6vh, 30px) auto 0;
  text-align: center;
  pointer-events: auto;
}
.play-entry p {
  margin: 13px 0 0;
  color: #f5e4c0;
  font-size: clamp(15px, 1.4vw, 22px);
  letter-spacing: .045em;
  text-shadow: 0 2px 6px #000;
}
.royal-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #f0cc7b;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 0, #8c213b80, transparent 70%),
    linear-gradient(#571023, #350918 55%, #510d20);
  box-shadow: inset 0 0 0 3px #291610, inset 0 0 0 4px #b48b45,
    inset 0 7px 14px #ffb67e19, 0 5px 18px #0009, 0 0 20px #e6a43b20;
  color: #ffedbe;
  text-shadow: 0 2px 3px #000;
  transition: transform .22s ease, box-shadow .25s ease, filter .25s ease;
}
.royal-button > span { position: relative; z-index: 1; }
.royal-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #fff0ce08 37%, #ffe7b366 50%, #fff0ce08 63%, transparent 75%);
  transform: translateX(-150%);
  pointer-events: none;
  animation: royal-shine 7s ease-in-out 2s infinite;
}
.royal-button:hover {
  background: radial-gradient(ellipse at 50% 0, #ac355580, transparent 70%), linear-gradient(#70182d, #480d20 55%, #62152b);
  border-color: #ffe7a7;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px #291610, inset 0 0 0 4px #edc777,
    inset 0 6px 16px #ffd69a2a, 0 7px 24px #0009, 0 0 26px #f3b64065;
}
.royal-button:active { transform: translateY(1px); }
.royal-button:disabled { cursor: wait; filter: saturate(.55); transform: none; }
.royal-button .button-ornament {
  position: absolute;
  inset: 7px;
  z-index: 2;
  pointer-events: none;
  border-left: 2px solid #e6bf70;
  border-right: 2px solid #e6bf70;
  border-radius: 12px;
}
.button-ornament::before, .button-ornament::after {
  content: "◆";
  position: absolute;
  top: 50%;
  color: #f3ce81;
  font-size: 10px;
  transform: translateY(-50%);
}
.button-ornament::before { left: -6px; }
.button-ornament::after { right: -6px; }
.play-button {
  min-width: clamp(200px, 19vw, 290px);
  padding: 12px 42px;
  font-size: clamp(25px, 2.5vw, 38px);
  letter-spacing: .09em;
}
.play-chevron { display: inline-block; margin-left: 17px; transition: transform .22s; }
.play-button:hover .play-chevron { transform: translateX(4px); }
@keyframes royal-shine {
  0%, 72% { transform: translateX(-150%); }
  94%, 100% { transform: translateX(150%); }
}

/* Nativní modal: vlastní posun a ztmavení, bez externích knihoven. */
#auth-dialog {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #e2bf75;
  border-radius: 15px;
  background: var(--ink);
  color: #f5e4c0;
  box-shadow: 0 25px 80px #000b, 0 0 0 3px #3b302480, inset 0 0 0 2px #c9a66425;
  opacity: 0;
  transform: translateY(42px) scale(.985);
  transition: opacity .68s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
#auth-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }
#auth-dialog::backdrop {
  background: #030b17;
  opacity: 0;
  transition: opacity .65s;
}
#auth-dialog.is-open::backdrop { opacity: .57; }
.auth-card {
  position: relative;
  padding: 28px 32px 22px;
  background: radial-gradient(ellipse at 50% 0, #28343d5c, transparent 65%), linear-gradient(135deg, #172129, #0c1318);
}
.auth-card::before, .auth-card::after {
  content: "❧";
  position: absolute;
  left: 10px;
  color: var(--gold);
  font-size: 24px;
  pointer-events: none;
}
.auth-card::before { top: 2px; transform: rotate(135deg); }
.auth-card::after { bottom: 8px; transform: rotate(45deg); }
.auth-card h1 {
  margin: 0 12px 22px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  text-align: center;
  text-shadow: 0 2px 4px #000;
}
.icon-button {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 32px/1 Arial, sans-serif;
}
.icon-button:hover, .password-toggle:hover { background: #d4b26e17; }
.auth-tabs {
  display: flex;
  margin-bottom: 25px;
  border-bottom: 1px solid #d4b26e30;
}
.auth-tabs button {
  position: relative;
  flex: 1;
  padding: 9px 4px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c2c4c6;
  font: 17px Arial, sans-serif;
}
.auth-tabs button[aria-selected="true"] { color: var(--gold-light); }
.auth-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: -1px;
  left: 22%;
  height: 2px;
  background: #f7ce7a;
  box-shadow: 0 0 9px #f3b64088;
}
.auth-form { font: 15px/1.4 Arial, sans-serif; }
.auth-form > label { display: block; margin: 19px 0 7px; }
.auth-form > label:first-child { margin-top: 0; }
.auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 46px;
  padding: 10px 13px;
  border: 1px solid #ac955e;
  border-radius: 7px;
  background: #060c12a6;
  box-shadow: inset 0 2px 5px #0005;
  color: #fff1d6;
  font: 16px Arial, sans-serif;
}
.auth-form input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.password-field { position: relative; }
.password-field input { padding-right: 48px !important; }
.password-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--gold-light);
}
.password-toggle svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.password-toggle[aria-pressed="true"] svg { opacity: .5; }
.login-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 26px; font-size: 12px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.checkbox-label input { width: 17px; height: 17px; margin: 0; accent-color: #c9a664; }
.text-button { padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: #f1ce83; text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.text-button:hover { background: transparent; color: #fff0be; }
.submit-button { display: block; width: 100%; margin-top: 26px; padding: 13px 20px; font: 26px Georgia, serif; }
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.reset-intro { margin: 0 0 20px; color: #d1cabe; }
.back-login { display: block; margin: 18px auto 0; }
.auth-message { text-align: center; margin: 0; color: #f4d6a1; font: 14px/1.5 Arial, sans-serif; }
.auth-message:not(:empty) { margin-top: 20px; }
.auth-message[data-tone="error"] { color: #ffc2b3; }
.auth-message[data-tone="success"] { color: #c8dfbd; }
[hidden] { display: none !important; }
body.animations-paused .royal-button::before { animation-play-state: paused; }
@media (max-width: 700px) {
  .play-entry { margin-top: 22px; }
  .play-button { min-width: 200px; padding: 12px 32px; font-size: 28px; }
  .play-entry p { font-size: 15px; }
  #auth-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .auth-card { padding: 30px 22px 24px; }
  .auth-card h1 { margin-bottom: 19px; }
  .submit-button { font-size: 24px; }
}
@media (max-height: 550px) {
  .play-entry { margin-top: 8px; }
  .play-button { padding: 8px 30px; font-size: 23px; }
  .play-entry p { margin-top: 6px; font-size: 13px; }
  .auth-card { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .royal-button::before { animation: none; }
  .royal-button, .play-chevron, #auth-dialog, #auth-dialog::backdrop { transition: none; }
  .royal-button:hover { transform: none; }
  #auth-dialog { transform: none; }
}

/* Zavření je svižnější než příjezd; JS čte dobu přímo z CSS. */
#auth-dialog.is-closing { transition-duration: .3s, .3s; }
#auth-dialog.is-closing::backdrop { transition-duration: .3s; }