/* Login Grimoire presentation: loaded only by the authentication surface. */
/* WOSU 0.15.3 — animated login grimoire. */
.auth-grimoire-page {
  min-height:100vh;
  overflow:hidden;
  color:#2d271f;
}
.auth-grimoire-page::after {
  content:'';
  position:fixed;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,rgba(220,191,132,.08),transparent 29%),
    linear-gradient(180deg,rgba(4,7,11,.04),rgba(4,6,9,.38));
}
.auth-grimoire-stage {
  position:relative;
  z-index:3;
  display:grid;
  min-height:100vh;
  place-items:center;
  padding:clamp(1rem,3vw,2.8rem);
}
.auth-grimoire {
  position:relative;
  width:min(1080px,94vw);
  perspective:1900px;
  perspective-origin:50% 48%;
}
.auth-grimoire-aura {
  position:absolute;
  z-index:-2;
  inset:8% 8% 5%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(202,168,96,.18),rgba(123,144,178,.09) 36%,transparent 72%);
  filter:blur(42px);
  opacity:.7;
  transform:scale(.92);
}
.auth-grimoire-shadow {
  position:absolute;
  z-index:-1;
  left:7%;
  right:7%;
  bottom:-2rem;
  height:4rem;
  border-radius:50%;
  background:rgba(0,0,0,.62);
  filter:blur(24px);
  transform:perspective(600px) rotateX(66deg);
}
.auth-grimoire-book {
  position:relative;
  min-height:min(650px,80vh);
  transform-style:preserve-3d;
}
.auth-grimoire-pages {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:inherit;
  transform-style:preserve-3d;
  filter:drop-shadow(0 1.8rem 2.6rem rgba(0,0,0,.34));
}
.auth-grimoire-pages::before {
  content:'';
  position:absolute;
  z-index:5;
  top:2.1%;
  bottom:2.1%;
  left:50%;
  width:2.2rem;
  pointer-events:none;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(64,45,28,.16) 24%,rgba(255,243,210,.11) 49%,rgba(62,43,26,.17) 76%,transparent);
  mix-blend-mode:multiply;
}
.auth-grimoire-sheet {
  position:relative;
  display:flex;
  min-width:0;
  min-height:inherit;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(2rem,4vw,3.25rem);
  background:
    linear-gradient(90deg,rgba(93,61,31,.08),transparent 10%,transparent 90%,rgba(93,61,31,.08)),
    radial-gradient(circle at 50% 15%,rgba(255,249,225,.68),transparent 46%),
    repeating-linear-gradient(0deg,rgba(94,69,43,.018) 0 1px,transparent 1px 4px),
    #d9c8a7;
  border:1px solid rgba(108,79,45,.48);
  box-shadow:inset 0 0 0 1px rgba(255,248,218,.25),inset 0 0 3rem rgba(86,54,28,.09);
}
.auth-grimoire-sheet::after {
  content:'';
  position:absolute;
  inset:.85rem;
  pointer-events:none;
  border:1px solid rgba(123,89,48,.18);
  border-radius:inherit;
}
.auth-grimoire-sheet-left {
  border-radius:1.15rem .22rem .45rem 1.15rem;
  transform-origin:right center;
}
.auth-grimoire-sheet-right {
  border-left-color:rgba(81,58,35,.22);
  border-radius:.22rem 1.15rem 1.15rem .45rem;
  transform-origin:left center;
}
.auth-grimoire-sheet-ornament {
  position:absolute;
  top:1.35rem;
  right:1.5rem;
  color:rgba(106,73,34,.44);
  font-size:1.1rem;
  text-shadow:0 0 14px rgba(197,160,89,.12);
}
.auth-grimoire-sheet-ornament-right { left:1.5rem; right:auto; }
.auth-grimoire-brand {
  position:relative;
  z-index:1;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(98,70,39,.18);
}
.auth-grimoire-brand .brand-mark {
  color:#7c5a2a;
  border-color:rgba(112,77,34,.28);
  background:rgba(255,249,224,.24);
}
.auth-grimoire-brand strong { color:#33291e; }
.auth-grimoire-brand small { color:#77644d; }
.auth-grimoire-copy {
  position:relative;
  z-index:1;
  margin-top:clamp(1.8rem,5vh,3.8rem);
}
.auth-grimoire-copy .section-kicker,
.auth-entry-panel .section-kicker,
.auth-local-panel .section-kicker {
  color:#8a662f;
}
.auth-grimoire-copy h1,
.auth-entry-panel h2,
.auth-local-panel h2 {
  margin:.4rem 0 .65rem;
  color:#2f261c;
  font-family:var(--font-title);
  font-weight:600;
  letter-spacing:.025em;
}
.auth-grimoire-copy h1 { font-size:clamp(1.75rem,4vw,2.65rem); }
.auth-entry-panel h2,
.auth-local-panel h2 { font-size:clamp(1.45rem,3vw,2rem); }
.auth-grimoire-copy p,
.auth-entry-panel p,
.auth-local-panel p,
.auth-alternative-note {
  color:#655746;
  font-family:var(--font-serif);
  font-size:clamp(1.02rem,1.8vw,1.18rem);
  line-height:1.48;
}
.auth-access-note {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:2.7rem minmax(0,1fr);
  gap:.9rem;
  margin-top:clamp(1.5rem,4vh,2.6rem);
  padding:1rem 1.05rem;
  border:1px solid rgba(117,80,37,.2);
  border-radius:.75rem;
  background:rgba(255,247,218,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.24);
}
.auth-access-note h2 {
  margin:.05rem 0 .35rem;
  color:#433424;
  font-family:var(--font-title);
  font-size:.88rem;
  letter-spacing:.04em;
}
.auth-access-note p {
  margin:0;
  color:#6a5b47;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.42;
}
.auth-access-icon {
  display:grid;
  width:2.55rem;
  height:2.55rem;
  place-items:center;
  color:#8a642d;
  border:1px solid rgba(119,82,38,.24);
  border-radius:50%;
  background:rgba(255,248,219,.28);
}
.auth-grimoire-seal {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:.7rem;
  align-items:center;
  margin-top:auto;
  padding-top:1.5rem;
  color:#9b7134;
}
.auth-grimoire-seal span { height:1px; background:linear-gradient(90deg,transparent,rgba(128,87,37,.42)); }
.auth-grimoire-seal span:last-child { transform:scaleX(-1); }
.auth-entry-panel,
.auth-local-panel {
  position:relative;
  z-index:2;
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(2.2rem,5vh,4.3rem);
}
.auth-entry-actions {
  display:grid;
  gap:.8rem;
  margin-top:1.55rem;
}
.auth-grimoire-oauth,
.auth-alternative-button,
.auth-local-submit {
  min-height:3.25rem;
  border-radius:.65rem;
}
.auth-grimoire-oauth {
  justify-content:flex-start;
  padding:.6rem .85rem;
  color:#fff8ec;
  background:linear-gradient(135deg,#d75486,#b93f74);
  border:1px solid rgba(255,226,238,.42);
  box-shadow:0 .7rem 1.7rem rgba(134,41,85,.19),inset 0 1px rgba(255,255,255,.22);
  font-family:var(--font-serif);
  font-size:1.12rem;
}
.auth-grimoire-oauth:hover,
.auth-grimoire-oauth:focus-visible {
  color:#fff;
  background:linear-gradient(135deg,#e05c91,#c3487c);
  border-color:rgba(255,239,245,.68);
  box-shadow:0 .8rem 2rem rgba(134,41,85,.27),0 0 0 .2rem rgba(199,73,123,.10);
}
.auth-grimoire-oauth > i { margin-left:auto; }
.auth-grimoire-oauth .auth-osu-mark {
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);
}
.auth-alternative-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  color:#5e4c37;
  border:1px solid rgba(113,78,39,.26);
  background:rgba(255,249,224,.20);
  font-family:var(--font-serif);
  font-size:1rem;
}
.auth-alternative-button:hover,
.auth-alternative-button:focus-visible {
  color:#3e3022;
  border-color:rgba(124,85,38,.48);
  background:rgba(255,249,224,.36);
}
.auth-alternative-note {
  margin:1rem .2rem 0;
  font-size:.9rem;
  text-align:center;
}
.auth-local-back {
  align-self:flex-start;
  margin-bottom:1.2rem;
  padding:.25rem 0;
  color:#745b3d;
  background:none;
  border:0;
  font-family:var(--font-serif);
  font-size:.95rem;
}
.auth-local-back:hover { color:#3d2e20; }
.auth-local-copy p { margin-bottom:.8rem; }
.auth-grimoire-form { margin-top:.7rem; }
.auth-grimoire-form label>span { color:#6c5a43; }
.auth-grimoire-form .form-control {
  min-height:2.85rem;
  color:#33291e;
  background:rgba(255,250,231,.42);
  border-color:rgba(105,75,42,.28);
  box-shadow:inset 0 1px 7px rgba(92,62,31,.05);
}
.auth-grimoire-form .form-control:focus {
  color:#2b2219;
  background:rgba(255,252,238,.62);
  border-color:rgba(132,91,40,.58);
  box-shadow:0 0 0 .2rem rgba(152,108,51,.09),inset 0 1px 6px rgba(92,62,31,.05);
}
.auth-local-submit {
  color:#f7ecd6;
  background:linear-gradient(135deg,#4d3b27,#32271c);
  border:1px solid rgba(121,85,43,.55);
}
.auth-local-submit:hover { color:#fff7e9; background:linear-gradient(135deg,#5a452e,#3a2d20); }
.auth-grimoire-alert {
  position:relative;
  z-index:4;
  margin:2.4rem 0 -1.45rem;
  color:#6e3329;
  border-color:rgba(137,64,49,.28);
  background:rgba(177,91,68,.09);
}
.auth-grimoire-languages {
  position:relative;
  z-index:3;
  margin-top:auto;
  padding-top:1.1rem;
}
.auth-grimoire-languages a { color:#806f58; }
.auth-grimoire-languages a.active,
.auth-grimoire-languages a:hover {
  color:#493824;
  border-color:rgba(110,76,37,.25);
  background:rgba(255,249,226,.25);
}
@media (max-width:820px) {
  .auth-grimoire-page { overflow-y:auto; }
  .auth-grimoire-stage { min-height:100vh; place-items:start center; padding:1.1rem .7rem 2.3rem; }
  .auth-grimoire { width:min(96vw,38rem); }
  .auth-grimoire-book { min-height:auto; }
  .auth-grimoire-pages { grid-template-columns:1fr; min-height:auto; }
  .auth-grimoire-pages::before {
    top:50%; bottom:auto; left:4%; right:4%; width:auto; height:1.7rem;
    transform:translateY(-50%);
    background:linear-gradient(180deg,transparent,rgba(64,45,28,.14) 28%,rgba(255,243,210,.10) 50%,rgba(62,43,26,.15) 74%,transparent);
  }
  .auth-grimoire-sheet { min-height:auto; padding:2rem 1.55rem; }
  .auth-grimoire-sheet-left { min-height:31rem; border-radius:1rem 1rem .2rem .2rem; }
  .auth-grimoire-sheet-right { min-height:32rem; border-radius:.2rem .2rem 1rem 1rem; }
  .auth-grimoire-copy { margin-top:1.7rem; }
  .auth-access-note { margin-top:1.35rem; }
  .auth-grimoire-alert { margin:1.8rem 0 -.9rem; }
  .auth-entry-panel,.auth-local-panel { padding-top:2.4rem; }
}
@media (max-width:480px) {
  .auth-grimoire-stage { padding:.55rem .35rem 1.5rem; }
  .auth-grimoire-sheet { padding:1.65rem 1.15rem; }
  .auth-grimoire-sheet::after { inset:.5rem; }
  .auth-grimoire-sheet-left { min-height:30rem; }
  .auth-grimoire-sheet-right { min-height:31rem; }
}
.auth-grimoire-page { margin:0; }

/* Auth state visibility must win over the flex layout declarations above. */
.auth-entry-panel[hidden],
.auth-local-panel[hidden] { display:none !important; }