:root {
  --text:#e9ecf3;
  --muted:#a6b0c4;
  --amber:#ff8a3d;
  --amber-strong:#ff6a00;
  --font-ui:"Pericles W01 Regular","Pericles",serif;
}

html,body {
  height:100%;
  margin:0;
  padding:0;
}

*,*::before,*::after,::placeholder {
  box-sizing:border-box;
  font-family:var(--font-ui)!important;
}

body {
  color:var(--text);
  background:url('./images/background.png') right bottom/cover no-repeat;
  height:100vh;
}

.center {
  min-height:100dvh;
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
}

.menu-cta {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}

.menu-btn {
  width:min(600px,85vw);
  height:90px;
  border:0;
  padding-bottom:6px;
  background:url('./images/button.png') no-repeat center/contain;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font:800 16px/1 var(--font-ui);
  letter-spacing:.6px;
  text-transform:uppercase;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  cursor:not-allowed;
  text-align:center;
  transition:transform .08s,filter .2s;
}
.menu-btn:hover {filter:brightness(1.06);transform:scale(1.01)}
.menu-btn:active {transform:scale(.985)}

.menu-logout {
  margin-top:10px;
  font-size:12px;
  color:rgba(233,236,243,.78);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  letter-spacing:.5px;
}

.modal {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:100;
}
.modal::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(5,8,16,.55);
  backdrop-filter:blur(4px);
}

.modal__card {
  position:relative;
  width:min(520px,92vw);
  background:rgba(14,18,32,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:24px;
  color:var(--text);
  box-shadow:0 12px 48px rgba(0,0,0,.65),0 0 36px rgba(255,138,61,.15);
}
.modal__card h1 {margin:0 0 6px;font-size:24px}

.muted {color:var(--muted);margin:0 0 18px}

.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:12px 0;
}
.field span {font-size:14px;color:var(--muted)}
.field input {
  background:#0f1330;
  border:1px solid rgba(255,255,255,.1);
  color:var(--text);
  border-radius:10px;
  padding:12px 14px;
  outline:none;
  transition:box-shadow .2s,border-color .2s;
}
.field input:focus {
  border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(255,138,61,.25);
}

.buttons {
  display:flex;
  gap:10px;
  margin-top:16px;
}

.btn {
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
}
.btn--primary {
  background:linear-gradient(180deg,var(--amber),var(--amber-strong));
  color:#180b05;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:0 10px 20px rgba(255,138,61,.25),0 0 0 1px rgba(255,255,255,.08) inset;
}
.btn--primary:hover {
  filter:brightness(1.05);
  box-shadow:0 12px 26px rgba(255,138,61,.35),0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn--ghost {
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
}
.btn--ghost:hover {background:rgba(255,255,255,.06)}

body.modal-open main {
  filter:blur(2.5px) saturate(.95);
  transition:filter .2s;
}

@media(max-width:1200px){
  .menu-btn{width:80vw;height:80px;font-size:14px}
}
@media(max-width:800px){
  .menu-btn{width:90vw;height:70px;font-size:13px}
}
@media(max-width:520px){
  .menu-btn{width:92vw;height:60px;font-size:12px;padding-bottom:5px}
}
@media(min-width:1600px){
  .menu-btn{width:700px;height:100px;font-size:18px}
}