:root {
  color-scheme: dark;
  --page-background: #080607;
  --text: #eeeeee;
  --red: #ff3343;
  --green: #69e592;
  font-family: "Arial", "Helvetica Neue", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--page-background); }

body {
  margin: 0;
  color: var(--text);
  background: var(--page-background) url("enter-background.webp") center bottom / cover no-repeat;
  min-height: 100vh;
  min-height: 100svh;
}

.enter-page {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3.6vh, 2.75rem) 1.25rem;
}

.enter-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 70rem);
  text-align: center;
}

.clan-logo {
  display: block;
  width: min(58vh, 35rem, 86vw);
  width: min(58svh, 35rem, 86vw);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  mix-blend-mode: screen;
}

.clan-heading { margin-top: 1rem; max-width: 100%; }

.clan-heading h1 {
  margin: 0;
  color: #e7e7e7;
  font-size: clamp(1rem, 1.65vw, 1.625rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: clamp(0.14rem, 0.42vw, 0.45rem);
  overflow-wrap: break-word;
  text-shadow: 0 2px 5px #000;
}

.clan-heading p {
  margin: 0.35rem 0 0;
  font-size: clamp(0.875rem, 1.15vw, 1.125rem);
  line-height: 1.5;
  font-weight: 600;
  color: #a8a8ac;
  letter-spacing: clamp(0.09rem, 0.28vw, 0.3rem);
}

.entry-actions {
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.4rem;
}

.enter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.875rem 1.5rem;
  border: 2px solid var(--red);
  border-radius: 0.6rem;
  color: #fff;
  background: linear-gradient(120deg, #44060bcf, #220305dd 45%, #42060ccf);
  box-shadow: 0 0 12px #ff253747, inset 0 0 16px #b9091933;
  font-size: clamp(1.375rem, 2.3vw, 2.125rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: #69e59233;
}

@media (hover: hover) {
  .enter-button:hover {
    color: #effff3;
    border-color: var(--green);
    background: linear-gradient(120deg, #17572aeb, #103b1eeb 45%, #17572aeb);
    box-shadow: 0 0 18px #69e59266, inset 0 0 16px #36bf6533;
  }
}

.enter-button:focus-visible,
.enter-button:active {
  color: #effff3;
  border-color: var(--green);
  background: linear-gradient(120deg, #17572aeb, #103b1eeb 45%, #17572aeb);
  box-shadow: 0 0 18px #69e59266, inset 0 0 16px #36bf6533;
}

.enter-button:focus-visible {
  outline: 2px solid #b1ffc9;
  outline-offset: 5px;
}

.skip-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.65rem;
  padding: 0.625rem 0.25rem;
  min-height: 2.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #d4d4d6;
  cursor: pointer;
  text-shadow: 0 1px 4px #000;
}

.skip-choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #d32c3a;
  cursor: pointer;
}

.skip-choice input:focus-visible { outline: 2px solid #eee; outline-offset: 4px; }
.preference-message { margin: 0.6rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #ebc6c6; }
[hidden] { display: none !important; }

.home-page { display: grid; place-items: center; padding: 2rem 1.25rem; }
.home-content { max-width: 48rem; text-align: center; }
.home-logo { display: block; width: min(18rem, 64vw); height: auto; margin: 0 auto 1.5rem; mix-blend-mode: screen; }
.home-kicker { color: #cbb8b8; font-size: 0.875rem; letter-spacing: 0.16rem; line-height: 1.6; }
.home-content h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.25; margin: 1rem 0; }
.home-content > p:not(.home-kicker) { color: #bdbdc2; font-size: 1.125rem; line-height: 1.6; }
.return-link { display: inline-block; margin-top: 1rem; padding: 0.75rem 1rem; min-height: 2.75rem; color: #e8c9cb; text-underline-offset: 0.3rem; }
.return-link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.return-link:hover { color: #fff; }

@media (max-width: 600px) {
  .enter-page { padding: 1.5rem 1.25rem; }
  .clan-logo { width: min(84vw, 26rem); }
  .clan-heading { margin-top: 1rem; }
  .clan-heading h1 { max-width: 24rem; font-size: 1rem; letter-spacing: 0.17rem; }
  .clan-heading p { font-size: 0.875rem; letter-spacing: 0.12rem; }
  .entry-actions { margin-top: 1.4rem; width: min(100%, 24rem); }
  .enter-button { min-height: 4rem; font-size: 1.5rem; }
}

@media (max-height: 540px) and (min-width: 601px) {
  .enter-page { padding: 1rem; }
  .clan-logo { width: min(45vh, 17rem); }
  .clan-heading { margin-top: 0.35rem; }
  .entry-actions { margin-top: 0.75rem; }
  .enter-button { min-height: 3.4rem; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) { .enter-button { transition: none; } }

@media (forced-colors: active) {
  .clan-logo, .home-logo { mix-blend-mode: normal; }
  .enter-button { border-color: ButtonText; }
}