/* ===========================
   EmberFall — Theme + HERO background + Right XL Callout
   =========================== */

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  color:#e9eef7;
  background: #0c0c12;
  font: 500 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Header */
.ef-header{ 
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 10px 20px; background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ef-brand{ display:flex; align-items:center; gap:10px; }
.ef-brand-mark{
  width:32px; height:32px; border-radius:8px;
  background: radial-gradient(circle at 50% 30%, #ffb24b, #7a2a00 75%);
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.ef-brand b{ font-family: "Cinzel","Noto Serif Display",ui-serif,Georgia,serif; letter-spacing: .04em; }
.ef-nav{ display:flex; gap:14px; align-items:center; }
.ef-nav a{ color:#f4f7ff; text-decoration:none; opacity:.9; font-weight:600 }
.ef-nav a:hover{ opacity:1 }
.ef-login{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:12px; text-decoration:none;
  color:#1a0e04;
  background: linear-gradient(180deg, #f2b356 0%, #de7d19 55%, #7c3203 100%);
  border: 1px solid rgba(255,180,60,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.45);
}
.ef-login:hover{ filter:brightness(1.06) }

/* HERO container */
.ef-hero{ position: relative; min-height: min(100vh, 980px); isolation:isolate; }
.ef-hero .ef-floor{ position:absolute; inset:auto 0 0 0; height:22vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(40% 30% at 50% 0%, rgba(112,230,255,.07), transparent 60%);
}

/* Background image (JPG fallback + WebP) */
:root{
  --ef-hero-pos: 22% center;
}

/* Fallback first (JPG) so it works everywhere */
.ef-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70) 60%, rgba(0,0,0,.85)),
    radial-gradient(50% 60% at 50% 20%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(60% 40% at 75% 35%, rgba(80,200,255,.05), transparent 70%),
    url("/assets/hero-sharp.jpg");
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat;
  background-position: center, center, center, var(--ef-hero-pos);
  filter: saturate(1.05);
}
/* Override with WebP where supported */
@supports (background: -webkit-image-set(url('x') 1x)) or (background: image-set(url('x') 1x)) {
  .ef-hero::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70) 60%, rgba(0,0,0,.85)),
      radial-gradient(50% 60% at 50% 20%, rgba(255,255,255,.05), transparent 55%),
      radial-gradient(60% 40% at 75% 35%, rgba(80,200,255,.05), transparent 70%),
      image-set(
        url("/assets/hero-sharp.webp") type("image/webp") 1x,
        url("/assets/hero-sharp.jpg")  type("image/jpeg") 1x
      );
    background-size: cover, cover, cover, cover;
    background-position: center, center, center, var(--ef-hero-pos);
    background-repeat: no-repeat;
  }
}

/* === Right Callout XL (moved to the circled area) === */
:root{
  --ef-callout-w: clamp(360px, 34vw, 560px);
  --ef-callout-right: clamp(18px, 2.6vw, 36px);
  --ef-callout-top: 60%;
  --ef-callout-translate: -50%;
  --ef-glass: rgba(10,14,20,.72);
  --ef-border1: rgba(248,180,80,.75);
  --ef-border2: rgba(112,230,255,.65);
  --ef-shadow: 0 18px 40px rgba(0,0,0,.55);
  --ef-text: #e9eef7;
}
.ef-callout{
  position:absolute;
  right: var(--ef-callout-right);
  top: var(--ef-callout-top);
  transform: translateY(var(--ef-callout-translate));
  width: var(--ef-callout-w);
  padding: 22px 22px 92px;
  border-radius: 20px;
  color: var(--ef-text);
  background: var(--ef-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--ef-shadow);
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.ef-callout::before{
  content:"";
  position:absolute; inset:-1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--ef-border1), var(--ef-border2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.ef-callout-title{
  margin: 6px 6px 12px;
  font: 700 clamp(22px, 1.7vw, 28px)/1.2 "Cinzel","Noto Serif Display",ui-serif,Georgia,serif;
  letter-spacing: .05em; text-transform: uppercase; color: #ffd9ac;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.ef-callout-points{ 
  margin: 0 6px; padding: 0 0 8px 18px; 
  font: 600 clamp(14px, 1.05vw, 16px)/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; 
  opacity:.95; 
}
.ef-callout-points li{ margin: 4px 0; }

/* PLAY NOW button (bigger) */
.ef-playnow{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; padding: 14px 26px;
  border-radius: 16px; text-decoration:none; white-space:nowrap;
  font-family: "Cinzel","Noto Serif Display",ui-serif,Georgia,serif;
  font-weight: 700; letter-spacing:.06em; text-transform: uppercase;
  font-size: clamp(14px, 1.05vw, 16px);
  color:#1a0e04;
  background: linear-gradient(180deg, #f2b356 0%, #de7d19 55%, #7c3203 100%);
  border: 1px solid rgba(255,180,60,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px rgba(0,0,0,.50);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ef-playnow:hover{ filter: brightness(1.06); transform: translateX(-50%) translateY(-1px); box-shadow: 0 0 14px rgba(248,180,80,.35), 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28); }
.ef-playnow:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(248,180,80,.22), 0 0 0 6px rgba(248,180,80,.12), inset 0 1px 0 rgba(255,255,255,.28); }
.ef-play-ico{ display:block; }

/* Footer */
footer{ text-align:center; opacity:.7; padding: 24px 16px; font-size:14px; }

/* Responsive: bottom overlay on mobile */
@media (max-width: 860px){
  .ef-callout{ right: 12px; left: 12px; width: auto; top: auto; bottom: 16px; transform:none; padding-bottom: 86px; }
}


/* === Logo mark image === */
.ef-brand-mark{ width:32px; height:32px; border-radius:8px; overflow:hidden; display:inline-block; background:none; }
.ef-brand-mark > img{ width:100%; height:100%; display:block; object-fit:cover; }


/* === Header wordmark image === */
.ef-brand{ gap:10px; }
.ef-brand-wordmark{ height:28px; width:auto; display:block; margin-left:4px; image-rendering:-webkit-optimize-contrast; }
@media (min-width: 1280px){ .ef-brand-wordmark{ height:32px; } }


/* === Centered nav in header (brand left, nav center, login right) === */
.ef-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.ef-brand{ justify-self:start; display:flex; align-items:center; gap:10px; }
.ef-nav{ justify-self:center; display:flex; gap:18px; align-items:center; }
.ef-login{ justify-self:end; }

/* Keep spacing tight on small screens */
@media (max-width: 860px){
  .ef-header{ grid-template-columns: 1fr auto auto; gap:8px; padding: 8px 12px; }
  .ef-nav{ gap:12px; }
}


/* === Brand -> Home link === */
.ef-brand-link{ text-decoration:none; color:inherit; cursor:pointer; }
.ef-brand-link:hover{ opacity:.95; }
.ef-brand-link:focus-visible{ outline:2px solid rgba(242,179,86,.9); outline-offset:2px; border-radius:10px; }


/* ===========================
   Modal + Form (Login/Register)
   =========================== */
body.modal-open{ overflow:hidden; }

.ef-modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 40;
}
.ef-modal{
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px));
  z-index: 50; border-radius: 18px; padding: 18px 18px 20px;
  background: rgba(10,14,20,.86);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  color: #e9eef7;
}
.ef-modal[hidden], .ef-modal-backdrop[hidden]{ display: none !important; }

.ef-modal h3{
  margin: 2px 4px 12px; font: 800 20px/1 "Cinzel","Noto Serif Display",ui-serif,Georgia,serif; letter-spacing:.04em;
}
.ef-modal-close{
  position: absolute; right: 8px; top: 6px; width: 36px; height: 36px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
}
.ef-modal-close:hover{ background: rgba(255,255,255,.10); }
.ef-form{ display: grid; gap: 12px; }
.ef-field{ display: grid; gap: 6px; }
.ef-field span{ font-size: 13px; opacity: .9; }
.ef-field input{
  width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #fff; outline: none;
}
.ef-field input:focus{ border-color: rgba(248,180,80,.7); box-shadow: 0 0 0 3px rgba(248,180,80,.18); }
.ef-checkbox{ display: inline-flex; gap: 8px; align-items: center; margin-top: 2px; font-size: 14px; opacity:.95; }
.ef-actions{
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ef-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 16px; border-radius: 14px; border:1px solid transparent; text-decoration:none;
  font-weight: 700; letter-spacing:.04em;
}
.ef-primary{
  color:#1a0e04;
  background: linear-gradient(180deg, #f2b356 0%, #de7d19 55%, #7c3203 100%);
  border-color: rgba(255,180,60,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.45);
}
.ef-secondary{
  color:#e9eef7;
  background: linear-gradient(180deg, #262a31 0%, #14181f 60%, #0b0f14 100%);
  border-color: rgba(255,255,255,.12);
}
.ef-btn:hover{ filter: brightness(1.06); }
.ef-link{ color:#e9eef7; opacity:.9; text-decoration: none; }
.ef-link:hover{ opacity:1; text-decoration: underline; }
.ef-divider{
  position: relative; text-align:center; margin: 12px 0 10px; opacity:.8;
}
.ef-divider::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(255,255,255,.08);
}
.ef-divider span{ background: rgba(10,14,20,.86); padding: 0 10px; position: relative; z-index: 1; font-size: 12px; }
.ef-alt-actions{
  display:flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items:center;
}


/* Captcha row */
.ef-captcha-row{
  display:flex; gap:10px; align-items:center; margin-bottom:8px;
}
#ef-captcha-img{ height:38px; width:auto; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:#111; }
.ef-captcha-refresh{ padding: 8px 10px; }


/* Auth tabs */
.ef-tabs{display:flex;gap:8px;margin:6px 0 12px}
.ef-tab-btn{padding:6px 10px;border:1px solid rgba(255,255,255,.2);background:transparent;border-radius:6px;cursor:pointer}
.ef-tab-btn.active{border-color:#fff;}


/* Ensure hidden actually hides */
[hidden]{display:none !important;}

/* Constrain modal size to viewport and allow internal scroll */
.ef-modal{
  max-height: 90vh;
  overflow: auto;
}

/* Smaller paddings on narrow screens */
@media (max-width: 600px){
  .ef-modal{ width: calc(100vw - 16px); padding:14px; border-radius:14px; }
}

/* Make captcha image responsive */
#ef-captcha-img{ max-width: 60%; height: 38px; }


/* Force high-contrast input text inside modal */
.ef-modal input,
.ef-modal textarea,
.ef-modal select { color:#fff !important; caret-color:#fff; }

.ef-modal input::placeholder { color: rgba(255,255,255,.7); }
.ef-modal input:-ms-input-placeholder { color: rgba(255,255,255,.7); }
.ef-modal input::-ms-input-placeholder { color: rgba(255,255,255,.7); }

/* Override Chrome autofill yellow */
.ef-modal input:-webkit-autofill,
.ef-modal input:-webkit-autofill:hover,
.ef-modal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.04) inset !important;
}


/* Fix tab buttons color/contrast */
.ef-tab-btn{
  color: #e9eef7 !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.ef-tab-btn:hover{ background: rgba(255,255,255,.10); }
.ef-tab-btn.active{
  color: #ffffff !important;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}
.ef-tab-btn:focus-visible{ outline:2px solid rgba(248,180,80,.8); outline-offset:2px; }


/* Hide lower 'or' + alt actions when on Create Account tab */
.ef-login-modal.tab-register .ef-divider,
.ef-login-modal.tab-register .ef-alt-actions{ display:none !important; }

/* Tighten vertical spacing inside modal */
.ef-login-modal .ef-actions{ margin-top: 8px; }
.ef-login-modal .ef-divider{ margin: 12px 0; }
.ef-tabs{ margin: 4px 0 8px; }


/* Tighter modal paddings and last-element spacing */
.ef-modal{ padding-bottom: 12px; }
.ef-login-modal .ef-form{ margin-bottom: 6px; }
.ef-login-modal .ef-form:last-of-type{ margin-bottom: 0; }
.ef-login-modal .ef-actions{ margin-bottom: 0; }
/* Reduce extra space at bottom on register tab */
.ef-login-modal.tab-register{ max-height: 88vh; }


/* Collapse any residual bottom space when on Create Account tab */
.ef-login-modal{ height:auto; overflow:auto; }
.ef-login-modal.tab-register .ef-divider,
.ef-login-modal.tab-register .ef-alt-actions{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
}
/* Trim section padding */
.ef-login-modal{ padding-bottom: 8px !important; }
.ef-login-modal .ef-form:last-of-type{ margin-bottom: 0 !important; }


/* Remove bottom whitespace within forms */
.ef-modal .ef-form > *:last-child{ margin-bottom: 0 !important; }
.ef-modal .ef-form{ padding-bottom: 0 !important; }


/* Inline Create Account button inside login actions */
.ef-actions{ gap: 10px; }
.ef-actions .ef-create-inline{ margin-left: auto; } /* pushes it to the right, before the link */
@media (max-width: 480px){
  .ef-actions{ flex-wrap: wrap; }
  .ef-actions .ef-create-inline{ order: 2; margin-left: 0; }
  .ef-actions .ef-link{ order: 3; width: 100%; text-align: right; }
}


/* === EF v12 tweaks: shrink bottom whitespace under Create Account modal === */
.ef-login-modal{ padding-bottom: 6px !important; }
.ef-login-modal .ef-form{ margin-bottom: 4px !important; }
.ef-login-modal .ef-form:last-of-type{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
.ef-login-modal .ef-actions{ margin-top: 6px !important; margin-bottom: 0 !important; }
.ef-login-modal .ef-alt-actions{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }

/* Modal titles */
.ef-modal-title{margin:0 0 12px;font-size:22px;font-weight:800;letter-spacing:.02em;}
.ef-modal-titles{margin-bottom:8px;}