:root { --hero-image: url("./images/arkaplan/hero-bg-booster-1440.723ed859fdbb.webp?v=1"); }
@media (max-width: 800px) {
  :root { --hero-image: url("./images/arkaplan/hero-bg-site-800.fcc6ae6ad8bf.webp?v=1"); }
}
.booster-application-page .lol-footer { content-visibility: auto; contain-intrinsic-size: auto 720px; }

.booster-join {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.5fr);
  gap: clamp(36px, 5vw, 76px);
  width: min(1280px, calc(100% - 48px));
  margin: 28px auto 64px;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid #39304f;
  border-radius: 26px;
  background: linear-gradient(120deg, rgba(25, 18, 47, 0.97), rgba(12, 12, 28, 0.98) 48%);
  box-shadow: 0 24px 64px #03031259;
  font-family: "Exo 2", sans-serif;
}

.booster-join-intro { min-width: 0; padding-top: 8px; }
.booster-join-kicker { color: #bca5ed; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; }
.booster-join-intro h1 { margin: 20px 0 18px; color: #fff; font-size: clamp(2.4rem, 3.4vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; }
.booster-join-intro > p { margin: 0; max-width: 340px; color: #bab7cf; font-size: 1rem; line-height: 1.75; }
.booster-join-emblem { display: block; width: 174px; height: 174px; object-fit: contain; margin: 28px auto; filter: drop-shadow(0 12px 24px #0006); transform-origin: 50% 55%; will-change: opacity, transform, filter; transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; }
.booster-join-emblem.is-leaving { opacity: 0; transform: translateY(8px) scale(0.78) rotate(-5deg); filter: drop-shadow(0 6px 12px #0004) blur(3px); }
.booster-join-emblem.is-entering { animation: booster-emblem-enter 440ms cubic-bezier(0.2, 0.85, 0.28, 1); }
@keyframes booster-emblem-enter {
  0% { opacity: 0; transform: translateY(10px) scale(0.76) rotate(5deg); filter: drop-shadow(0 6px 12px #0004) blur(3px); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.07) rotate(-1deg); filter: drop-shadow(0 0 30px #9670ff7a) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: drop-shadow(0 12px 24px #0006); }
}
.booster-join-steps { display: grid; gap: 22px; padding: 24px 0 0; margin: 0; list-style: none; border-top: 1px solid #ffffff12; }
.booster-join-steps li { display: flex; gap: 14px; align-items: flex-start; }
.booster-join-steps li > span { padding-top: 2px; color: #9580be; font-size: 0.8rem; font-weight: 700; }
.booster-join-steps strong { color: #eeecf6; font-size: 0.94rem; font-weight: 600; }
.booster-join-steps p { margin: 5px 0 0; color: #a19db8; font-size: 0.85rem; line-height: 1.5; }

.booster-join-form { display: grid; align-content: start; gap: 19px; min-width: 0; }
.booster-join-fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.booster-join-fieldset[hidden] { display: none; }
.booster-join-fieldset legend { width: 100%; margin-bottom: 10px; padding: 0; color: #eceaf5; font-size: 0.92rem; font-weight: 600; }
.booster-join-fieldset legend small, .booster-join-field > span small { float: right; color: #9590aa; font-size: 0.74rem; font-weight: 400; }
.booster-join-games, .booster-join-ranks { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; }
.booster-choice { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; border: 1px solid #353047; border-radius: 10px; background: #111121; color: #b5b1c7; cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms; }
.booster-choice input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booster-choice:hover { border-color: #71608f; color: #fff; background: #1a162b; }
.booster-choice:has(input:checked) { border-color: #9973e1; color: #fff; background: #261d3f; box-shadow: inset 0 0 0 1px #9973e12b; }
.booster-choice:has(input:focus-visible) { outline: 2px solid #c6a1ff; outline-offset: 3px; }
.booster-game-choice { min-height: 70px; padding: 12px 10px; font-size: 0.86rem; font-weight: 600; }
.booster-game-choice img { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; }
.booster-game-choice span { max-width: 105px; line-height: 1.35; }
.booster-rank-choice { flex-direction: column; gap: 2px; min-height: 98px; padding: 8px 4px 10px; font-size: 0.82rem; font-weight: 600; }
.booster-rank-choice img { display: block; width: 58px; height: 58px; object-fit: contain; }
.booster-rank-choice:has(input:checked) { border-color: #b99b5d; background: #27231f; box-shadow: inset 0 0 0 1px #b99b5d20; }
.booster-join-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.booster-chip-choice { min-height: 35px; padding: 7px 16px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; }
.booster-join-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 20px; border-top: 1px solid #ffffff12; }
.booster-join-field { display: grid; gap: 8px; min-width: 0; }
.booster-join-field > span { color: #d8d5e6; font-size: 0.84rem; font-weight: 600; }
.booster-join-field input, .booster-join-field textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 11px 13px; border: 1px solid #353047; border-radius: 9px; outline: none; background: #0d0d1b; color: #f4f2fa; font: inherit; font-size: 0.88rem; transition: border-color 150ms, box-shadow 150ms; }
.booster-join-field textarea { min-height: 82px; line-height: 1.5; resize: vertical; }
.booster-join-field input::placeholder, .booster-join-field textarea::placeholder { color: #858096; opacity: 1; }
.booster-join-field input:focus, .booster-join-field textarea:focus { border-color: #9973e1; box-shadow: 0 0 0 3px #9973e118; }
.booster-join-submit { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 48px; padding: 12px 18px; border: 1px solid #9460ef; border-radius: 10px; background: #783dd5; color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background 150ms; }
.booster-join-submit:hover { background: #8b4be9; }
.booster-join-submit:focus-visible { outline: 2px solid #d3b5ff; outline-offset: 3px; }
.booster-join-submit > span { font-size: 1.3rem; line-height: 1; }
.booster-join-footnote { margin: -8px 0 0; color: #9691a8; text-align: center; font-size: 0.76rem; line-height: 1.5; }
.booster-join-notices { display: grid; gap: 8px; }
.booster-join-notice { padding: 14px 16px; border: 1px solid #796292; border-radius: 10px; color: #eee9f6; background: #2a203a; font-size: 0.9rem; line-height: 1.5; }
.booster-join-notice.success { border-color: #3b836d; background: #152b27; }
.booster-join-notice.error { border-color: #a65b73; background: #321b2a; }
.booster-join-notice ul { margin: 8px 0 0; padding-left: 20px; }

@media (max-width: 1050px) {
  .booster-join { grid-template-columns: minmax(200px, 0.65fr) minmax(0, 1.5fr); gap: 28px; padding: 28px; }
  .booster-game-choice { flex-direction: column; gap: 6px; text-align: center; }
  .booster-game-choice span { max-width: none; }
}
@media (max-width: 800px) {
  /* Contact links remain in the footer; keep floating shortcuts off the form. */
  .booster-application-page .floating-support-links { display: none; }
  .booster-join { grid-template-columns: minmax(0, 1fr); gap: 28px; width: calc(100% - 28px); }
  .booster-join-intro { padding-top: 0; }
  .booster-join-intro h1 { margin: 12px 0; font-size: 2.5rem; }
  .booster-join-intro h1 br { display: none; }
  .booster-join-intro > p { max-width: 580px; font-size: 0.94rem; }
  .booster-join-emblem, .booster-join-steps { display: none; }
  .booster-game-choice { flex-direction: row; }
}
@media (max-width: 480px) {
  .booster-join { margin-top: 18px; padding: 22px 16px; border-radius: 18px; }
  .booster-join-intro h1 { font-size: 2.1rem; }
  .booster-join-form { gap: 18px; }
  .booster-join-games, .booster-join-ranks { gap: 6px; }
  .booster-game-choice { flex-direction: column; min-height: 86px; padding: 10px 4px; font-size: 0.73rem; }
  .booster-game-choice img { width: 30px; height: 30px; }
  .booster-rank-choice { font-size: 0.66rem; min-height: 86px; }
  .booster-rank-choice img { width: 46px; height: 46px; }
  .booster-join-contact { grid-template-columns: minmax(0, 1fr); }
  .booster-join-field input, .booster-join-field textarea { font-size: 1rem; }
  .booster-chip-choice { padding: 8px 12px; font-size: 0.8rem; }
  .booster-join-fieldset legend { font-size: 0.85rem; }
  .booster-join-fieldset legend small { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .booster-join .booster-choice, .booster-join input, .booster-join textarea, .booster-join-submit { transition: none; }
  .booster-join-emblem { transition: none; }
  .booster-join-emblem.is-entering { animation: none; }
}