*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0b28;--bg2:#111132;--card:#161645;--card2:#1c1c52;
  --gold:#ffd700;--gold2:#e6a800;--gold3:rgba(255,215,0,.12);
  --text:#eeeeff;--text2:#8888bb;--border:rgba(255,215,0,.18);
  --radius:12px;
}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh;overflow-x:hidden}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 40%,rgba(100,60,220,.12) 0%,transparent 100%),
    radial-gradient(ellipse 50% 30% at 85% 20%,rgba(255,215,0,.06) 0%,transparent 100%),
    radial-gradient(ellipse 40% 50% at 50% 80%,rgba(60,0,120,.1) 0%,transparent 100%);
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) var(--delay,0s) infinite alternate}
@keyframes twinkle{0%{opacity:.15}100%{opacity:.7}}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:rgba(255,215,0,.25);border-radius:3px}

/* ── LOGIN ── */
#login-screen{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#18185a 0%,#0b0b28 70%);
}
.login-box{
  background:rgba(22,22,69,.97);border:1px solid rgba(255,215,0,.35);border-radius:24px;
  padding:36px 40px;width:560px;max-width:95vw;
  box-shadow:0 0 80px rgba(255,215,0,.15),0 24px 80px rgba(0,0,0,.6);
  text-align:center;position:relative;z-index:1;
}
.login-logo{font-size:2.8rem;margin-bottom:10px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.login-title{font-family:'Cinzel Decorative',cursive;font-size:1.6rem;color:var(--gold);text-shadow:0 0 30px rgba(255,215,0,.5);margin-bottom:6px}
.login-sub{color:var(--text2);font-size:.9rem;margin-bottom:24px}

/* profile grid */
.profiles-section{margin-bottom:0}
.profiles-label{font-size:.8rem;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-bottom:20px}
.profile-card{
  background:var(--card2);border:2px solid var(--border);border-radius:16px;
  padding:18px 10px 14px;cursor:pointer;transition:all .2s;color:var(--text);
  font-family:'Nunito',sans-serif;position:relative;
}
.profile-card:hover{border-color:var(--gold);background:var(--gold3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.profile-card .avatar{font-size:2.4rem;display:block;margin-bottom:8px}
.profile-card .pname{font-size:.85rem;font-weight:800}
.profile-card .pmovies{font-size:.7rem;color:var(--text2);margin-top:3px}
.profile-del{
  position:absolute;top:6px;right:8px;background:rgba(239,68,68,.15);border:none;
  color:#f87171;font-size:.75rem;width:20px;height:20px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .15s;font-weight:900;
}
.profile-card:hover .profile-del{opacity:1}
.profile-del:hover{background:rgba(239,68,68,.35)!important}

.divider{color:var(--text2);font-size:.83rem;margin:20px 0;display:flex;align-items:center;gap:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* new profile toggle */
.new-profile-toggle{
  background:transparent;border:1px solid var(--border);color:var(--text2);
  border-radius:10px;padding:10px 20px;cursor:pointer;font-family:'Nunito',sans-serif;
  font-size:.88rem;font-weight:700;transition:all .2s;width:100%;
}
.new-profile-toggle:hover{border-color:var(--gold);color:var(--gold)}

.new-user-form{display:none;flex-direction:column;gap:12px;text-align:left;margin-top:16px}
.new-user-form.open{display:flex}
.form-label{font-size:.82rem;font-weight:700;color:var(--text2);margin-bottom:4px}
.avatar-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.avatar-opt{
  font-size:1.6rem;cursor:pointer;padding:6px 8px;border-radius:10px;
  border:2px solid transparent;transition:all .15s;background:var(--card2);
}
.avatar-opt:hover,.avatar-opt.sel{border-color:var(--gold);background:var(--gold3)}
.text-input{
  background:var(--card2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:10px 14px;font-size:.9rem;font-family:'Nunito',sans-serif;width:100%;
}
.text-input:focus{outline:none;border-color:var(--gold)}
.btn{
  background:linear-gradient(135deg,#e6a800,#ffd700);color:#1a1000;
  border:none;border-radius:10px;padding:12px 24px;font-size:.95rem;
  font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,215,0,.3)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text2);
  border-radius:8px;padding:8px 16px;cursor:pointer;font-family:'Nunito',sans-serif;
  font-size:.85rem;transition:all .2s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── MAIN APP ── */
#app{display:none;min-height:100vh;position:relative;z-index:1}
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,40,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 20px;display:flex;align-items:center;gap:16px;height:62px;
}
.header-logo{font-size:1.4rem}
.header-title{font-family:'Cinzel Decorative',cursive;font-size:.95rem;color:var(--gold);white-space:nowrap}
.nav-tabs{display:flex;gap:2px;flex:1}
.nav-tab{
  background:transparent;border:none;color:var(--text2);
  padding:8px 14px;border-radius:8px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:700;transition:all .2s;
}
.nav-tab:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-tab.active{color:var(--gold);background:var(--gold3)}
.header-right{display:flex;align-items:center;gap:8px}
.user-badge{
  display:flex;align-items:center;gap:7px;background:var(--card2);
  border:1px solid var(--border);border-radius:20px;padding:5px 12px 5px 8px;
  cursor:pointer;transition:all .2s;font-size:.83rem;font-weight:700;white-space:nowrap;
}
.user-badge:hover{border-color:var(--gold)}
.settings-btn{
  background:var(--card2);border:1px solid var(--border);border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:all .2s;
}
.settings-btn:hover{border-color:var(--gold)}

/* ── TABS ── */
.tab-content{display:none;padding:24px;max-width:1440px;margin:0 auto}
.tab-content.active{display:block}

/* ── MOVIES TAB ── */
.filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.filter-search{
  flex:1;min-width:180px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;color:var(--text);padding:9px 14px;font-family:'Nunito',sans-serif;font-size:.88rem;
}
.filter-search:focus{outline:none;border-color:var(--gold)}
.era-chips{display:flex;gap:5px;flex-wrap:wrap}
.era-chip{
  padding:5px 11px;border-radius:20px;font-size:.75rem;font-weight:800;
  cursor:pointer;border:2px solid transparent;transition:all .18s;color:#fff;opacity:.65;
}
.era-chip:hover{opacity:.9;transform:translateY(-1px)}
.era-chip.active{opacity:1;border-color:rgba(255,255,255,.6);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.sort-sel{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:8px 12px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:.83rem;cursor:pointer;
}
.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}

/* ── MOVIE CARD ── */
.movie-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;transition:all .22s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.movie-card:hover{border-color:var(--ec,rgba(255,215,0,.5));transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.55)}
.movie-card.is-watched{border-color:rgba(52,211,153,.3)}

.movie-poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.movie-poster-placeholder{
  width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;color:rgba(255,255,255,.18);
  font-family:'Cinzel Decorative',cursive;position:relative;overflow:hidden;
}
.movie-poster-placeholder::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.5) 100%);
}
.watched-badge{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(52,211,153,.25);color:#34d399;
  font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:10px;
  backdrop-filter:blur(4px);
}
.movie-rank-overlay{
  position:absolute;bottom:6px;left:8px;z-index:2;
  font-size:.68rem;font-weight:900;color:var(--gold);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  letter-spacing:.02em;
}
.movie-body{
  padding:9px 11px 10px;
  display:flex;flex-direction:column;
  flex:1;
  border-top:2px solid var(--ec,var(--gold));
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ec,#c9952c) 14%,transparent),color-mix(in srgb,var(--ec,#c9952c) 22%,transparent));
}
.movie-title-text{font-size:.84rem;font-weight:800;line-height:1.25;margin-bottom:2px}
.movie-year-text{font-size:.72rem;color:rgba(255,255,255,.5)}
.card-score-row{display:flex;align-items:center;gap:6px;margin-top:5px}
.card-tier{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.78rem;flex-shrink:0}
.card-overall{font-size:1.1rem;font-weight:900;color:var(--gold)}
.card-rate-btn{
  margin-top:auto;
  padding:7px 8px;border-radius:6px;
  background:var(--ec,#c9952c);
  font-size:.72rem;font-weight:900;letter-spacing:.05em;text-align:center;
  color:#0b0b28;
  text-transform:uppercase;
  transition:filter .15s;
}
.movie-card:hover .card-rate-btn{filter:brightness(1.18)}

/* ── LANDING PROFILE WIDGET ── */
.lp-profile-btn{
  position:absolute;top:16px;right:16px;z-index:30;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:30px;padding:5px 12px 5px 5px;
  transition:background .2s;user-select:none;
}
.lp-profile-btn:hover{background:rgba(255,255,255,.1)}
.lp-av{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,215,0,.12);border:1.5px solid rgba(255,215,0,.35);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.lp-pname{font-size:.75rem;font-weight:800;color:#fff}
.lp-chev{font-size:.6rem;color:rgba(255,255,255,.4)}
.lp-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(8,8,35,.97);border:1px solid rgba(255,215,0,.2);
  border-radius:12px;min-width:160px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  display:none;
}
.lp-dropdown.open{display:block}
.lp-dd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;
  font-size:.8rem;font-weight:700;color:#fff;
  transition:background .15s;
}
.lp-dd-item:hover{background:rgba(255,215,0,.08)}
.lp-dd-sep{border-top:1px solid rgba(255,255,255,.08);color:var(--gold);font-size:.75rem}

/* ── LANDING SIDE STAT PANELS ── */
.lp-side{
  position:absolute;top:50%;transform:translateY(-52%);
  width:195px;z-index:10;text-align:center;pointer-events:none;
  display:flex;flex-direction:column;gap:36px;
}
.lp-side.left{left:16px}
.lp-side.right{right:16px}
@media(max-width:820px){.lp-side{display:none}}
.lp-slot{transition:opacity .7s ease;min-height:70px}
.lp-slot.fading{opacity:0}
.ls-num{
  font-family:'Cinzel Decorative',cursive;
  font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;
  color:#fff;line-height:1;
  text-shadow:0 0 40px rgba(255,215,0,.2);
}
.ls-label{
  font-size:clamp(.72rem,1.1vw,.88rem);font-weight:800;
  color:rgba(255,255,255,.52);text-transform:uppercase;letter-spacing:.1em;line-height:1.4;
}
.ls-divider{width:28px;height:1px;background:rgba(255,215,0,.38);margin:7px auto}
.ls-movie{
  font-size:clamp(.9rem,1.4vw,1.1rem);font-weight:800;
  color:#fff;line-height:1.3;
}
.ls-score{
  font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;
  color:#fff;line-height:1;margin:5px 0 2px;
}
.ls-micro{
  font-size:clamp(.65rem,.9vw,.78rem);font-weight:700;
  color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.07em;
}
.ls-quote{
  font-size:clamp(.72rem,1vw,.85rem);
  color:rgba(255,255,255,.68);font-style:italic;line-height:1.55;margin-top:5px;
}

/* ── LANDING CAROUSEL ── */
.lc-wrap{
  position:relative;z-index:10;
  width:100%;height:clamp(220px,32vh,320px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin:18px 0 14px;
}
.lc-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.lc-card{
  position:absolute;
  width:clamp(130px,16vw,175px);
  height:clamp(195px,24vw,263px);
  border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.8);
  will-change:transform,opacity;
}
.lc-card img{width:100%;height:100%;object-fit:cover;display:block}
.lc-bottom{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 7px 7px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.88));
  text-align:center;
}
.lc-movie-title{font-size:.6rem;font-weight:800;color:#fff;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.lc-movie-year{font-size:.55rem;color:rgba(255,255,255,.55);margin-top:1px}
.lc-grade{
  position:absolute;top:6px;right:6px;
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:900;
  backdrop-filter:blur(6px);border:1.5px solid currentColor;
  opacity:0;transition:opacity .3s .4s;
}
.lc-card.lc-center .lc-grade{opacity:1}
.lc-card.lc-center{
  box-shadow:0 12px 48px rgba(0,0,0,.85),0 0 0 1.5px rgba(255,215,0,.3);
}
.lc-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:900;color:rgba(255,255,255,.15);
  font-family:'Cinzel Decorative',cursive;
}

/* ── ERA LEGEND ── */
.era-legend{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 14px;padding:6px 2px 10px;
}
.era-legend-item{
  display:flex;align-items:center;gap:5px;
  font-size:.68rem;font-weight:700;color:var(--text2);
  letter-spacing:.02em;white-space:nowrap;
}
.era-legend-swatch{
  width:10px;height:10px;border-radius:2px;flex-shrink:0;
}
/* ── RATING MODAL ── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.8);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border);border-radius:20px;
  padding:28px;width:580px;max-width:100%;max-height:92vh;overflow-y:auto;
  position:relative;box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.modal-close-btn{
  position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);
  border:none;color:var(--text);font-size:1.1rem;width:30px;height:30px;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.modal-close-btn:hover{background:rgba(255,255,255,.18)}
.modal-movie-title{font-size:1.2rem;font-weight:900;margin-bottom:3px}
.modal-movie-meta{font-size:.82rem;color:var(--text2);margin-bottom:20px}
.score-box{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,215,0,.06);border:1px solid var(--border);
  border-radius:14px;padding:16px;margin-bottom:22px;
}
.score-num-big{font-size:2.8rem;font-weight:900;color:var(--gold);line-height:1;min-width:80px}
.score-info{flex:1}
.score-info-label{font-size:.72rem;color:var(--text2);margin-bottom:3px}
.tier-badge-big{font-size:1.4rem;font-weight:900;padding:4px 14px;border-radius:8px;display:inline-block}
.wvs-line{font-size:.78rem;color:var(--text2);margin-top:5px}
.ratings-section{display:flex;flex-direction:column;gap:14px}
.section-sep{height:1px;background:var(--border);margin:6px 0}
.rating-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.rating-label-name{font-size:.85rem;font-weight:700;margin-bottom:1px}
.rating-label-desc{font-size:.72rem;color:var(--text2)}
.rating-weight{font-size:.68rem;color:var(--gold);font-weight:800}
.slider-group{display:flex;align-items:center;gap:8px}
input[type=range]{
  -webkit-appearance:none;width:140px;height:4px;border-radius:2px;
  background:var(--card2);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--gold);cursor:pointer;box-shadow:0 0 6px rgba(255,215,0,.4);
}
.rating-val-display{
  background:var(--card2);border:1px solid var(--border);border-radius:6px;
  padding:3px 8px;font-weight:800;font-size:.88rem;min-width:42px;
  text-align:center;color:var(--gold);
}
.extra-fields{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.extra-label{font-size:.8rem;font-weight:700;color:var(--text2);margin-bottom:4px}
.watched-row{display:flex;align-items:center;gap:12px;margin:6px 0}
.toggle-wrap{position:relative;width:42px;height:22px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:var(--card2);border-radius:22px;cursor:pointer;transition:.2s}
.toggle-track::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--text2);border-radius:50%;transition:.2s}
.toggle-wrap input:checked+.toggle-track{background:rgba(52,211,153,.35)}
.toggle-wrap input:checked+.toggle-track::before{transform:translateX(20px);background:#34d399}
.toggle-label{font-size:.88rem;font-weight:700}
.modal-actions{display:flex;gap:10px;margin-top:22px;justify-content:flex-end}
.btn-danger{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#f87171;border-radius:8px;padding:8px 14px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.82rem;transition:all .2s}
.btn-danger:hover{background:rgba(239,68,68,.25)}

/* ── WHEEL ── */
.wheel-page{display:flex;flex-direction:column;align-items:center;gap:28px;padding:20px 0}
.wheel-wrap{position:relative;display:inline-block}
.wheel-pointer-el{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:28px solid var(--gold);filter:drop-shadow(0 2px 6px rgba(255,215,0,.6));z-index:10;
}
#wheel-canvas{display:block;border-radius:50%;box-shadow:0 0 40px rgba(255,215,0,.12)}
.wheel-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.wheel-result-box{
  text-align:center;background:var(--card);border:1px solid var(--gold);
  border-radius:18px;padding:20px 36px;min-width:280px;
  box-shadow:0 0 30px rgba(255,215,0,.15);
}
.wheel-result-label{font-size:.78rem;color:var(--text2);margin-bottom:8px}
.wheel-result-name{font-size:1.3rem;font-weight:900;color:var(--gold);line-height:1.3}
.wheel-result-sub{font-size:.83rem;color:var(--text2);margin-top:5px}
.wheel-empty{text-align:center;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px}

/* ── DASHBOARD ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:30px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center}
.stat-val{font-size:2rem;font-weight:900;color:var(--gold)}
.stat-lbl{font-size:.78rem;color:var(--text2);margin-top:4px}
.section-hdr{font-size:1.05rem;font-weight:800;color:var(--gold);margin:28px 0 14px;display:flex;align-items:center;gap:8px}
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{text-align:left;padding:9px 12px;font-size:.78rem;color:var(--text2);border-bottom:1px solid var(--border)}
.rank-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-size:.88rem;vertical-align:middle}
.rank-table tr:hover td{background:rgba(255,255,255,.025)}
.rank-num{font-weight:900;color:var(--gold);font-size:.9rem}
.era-bars{display:flex;flex-direction:column;gap:10px}
.era-bar-row{display:grid;grid-template-columns:140px 1fr 60px 60px;gap:10px;align-items:center}
.era-bar-lbl{font-size:.82rem;font-weight:700}
.era-bar-track{background:var(--card2);border-radius:4px;height:8px;overflow:hidden}
.era-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.era-bar-num{font-size:.78rem;color:var(--text2);text-align:right}
.tier-row{display:flex;gap:10px;flex-wrap:wrap}
.tier-stat-card{background:var(--card);border-radius:12px;padding:14px 18px;text-align:center;flex:1;min-width:75px}
.tier-ltr{font-size:1.8rem;font-weight:900;margin-bottom:2px}
.tier-cnt{font-size:.78rem;color:var(--text2)}

/* ── LANDING PAGE: CINEMATIC ART MODE ── */
#landing{
  position:fixed;
  inset:0;
  z-index:900;
  overflow:hidden;
  background:#030208;
  transition:opacity .6s ease;
}

#landing.fade-out{
  opacity:0;
  pointer-events:none;
}

.landing-bg-art{
  position:absolute;
  inset:0;
  background:
    url("assets/backgrounds/landing-home-theater-v1.png") center center / cover no-repeat;
  z-index:1;
}

.landing-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.08) 42%, rgba(0,0,0,.35));
}

.landing-enter-hotspot{
  position:absolute;
  left:39%;
  top:41%;
  width:23%;
  height:28%;
  z-index:5;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:
    transform .35s ease,
    background .35s ease,
    filter .35s ease;
}

.landing-enter-hotspot:hover{
  background:transparent;
}

.landing-enter-hotspot:active{
  transform:translateY(1px) scale(.99);
}

/* Text */
.landing-content{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}
.landing-main-title{
  font-family:'Cinzel Decorative',cursive;
  font-size:clamp(1.6rem,5vw,3rem);
  color:#fff;
  text-shadow:0 0 60px rgba(180,140,255,.6),0 2px 4px rgba(0,0,0,.8);
  line-height:1.2;margin-bottom:4px;
}
.landing-sub{
  font-size:clamp(.85rem,2vw,1.05rem);
  color:rgba(200,200,255,.65);
  letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.landing-stars-line{
  color:var(--gold);
  font-size:.9rem;
  letter-spacing:.3em;
  opacity:.7;
}

.landing-cta{
  position:absolute;
  left:51%;
  bottom:8vh;
  transform:translateX(-50%);
  z-index:20;
  pointer-events:auto;

  width:600px;
  height:157px;
  padding:0;
  border:0;
  color:transparent;

  min-width:260px;

  cursor:pointer;
  overflow:hidden;

  background:
    url("assets/icons/take a seat plaque_v2.png")
    center center / contain no-repeat;


  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.landing-cta:hover{
  transform:translateX(-50%) translateY(-3px);
   filter:brightness(1.08);
}

.landing-cta:active{
  transform:translateX(-50%) translateY(1px);
  filter:brightness(.96);
}

#foyer{
  display:none;
  position:fixed;
  inset:0;
  z-index:850;
  overflow:hidden;
  background:#080403;
}

.foyer-bg{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#080403;
}

.foyer-bg img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.foyer-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.72) 100%);
}

.foyer-content{
  display:none;
}

.foyer-kicker{
  color:#d7a84a;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:10px;
}

.foyer-content h1{
  font-family:'Cinzel Decorative',cursive;
  color:#f5d58a;
  font-size:clamp(2.4rem,7vw,5rem);
  text-shadow:0 0 35px rgba(218,164,74,.35);
}

.foyer-content p{
  color:rgba(255,240,200,.72);
  margin-top:10px;
  margin-bottom:34px;
}

.foyer-panel{
  border:1px solid rgba(218,164,74,.4);
  background:rgba(10,5,3,.72);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:24px;
  min-width:min(520px,90vw);
}

.foyer-panel-title{
  color:#f5d58a;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  margin-bottom:18px;
}

.foyer-choice{
  background:rgba(218,164,74,.14);
  border:1px solid rgba(245,213,138,.55);
  color:#fff2c2;
  padding:14px 28px;
  border-radius:8px;
  cursor:pointer;
  font-weight:900;
  font-family:'Nunito',sans-serif;
}

#foyer{
  display:none;
  position:fixed;
  inset:0;
  z-index:850;
  background:#050303;
  overflow:hidden;
}

.foyer-stage{
  position:relative;
  width:min(100vw, calc(100vh * 1.6));
  aspect-ratio:16 / 10;
  margin:auto;
  top:50%;
  transform:translateY(-50%);
}

.foyer-art{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.foyer-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.foyer-marquee-text{
  position:absolute;
  left:50%;
  top:12.5%;
  transform:translateX(-50%);
  width:44%;
  text-align:center;
  color:#191008;
  font-family:'Nunito',sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.foyer-welcome{
  font-size:clamp(20px, 3.1vw, 36px);
  font-weight:875;
  line-height:1.05;
}

.foyer-now{
  margin-top:1.28vw;
  font-size:clamp(18px, 2.9vw, 34px);
  font-weight:875;
  color:#8f1f16;
}

.foyer-current{
  margin-top:.025vw;
  font-size:clamp(18px, 2.7vw, 32px);
  font-weight:875;
}
.foyer-hotspot{
  position:absolute;
  background:transparent;
  border:0;
  cursor:pointer;
  pointer-events:auto;
}
.foyer-hotspot:hover{
  outline:2px solid rgba(255,215,0,.55);
  background:rgba(255,215,0,.08);
}
/* =====================================================
   FOYER HOTSPOT COORDINATES - AUDITORIUM DOORS
   ===================================================== */

.foyer-door-1,
.foyer-door-2,
.foyer-door-3,
.foyer-door-4,
.foyer-door-5,
.foyer-door-6{
    top:44.65%;
    width:4.2%;
    height:17.5%;
}

.foyer-door-1{ left:28.2%; }   /* Disney Animation */
.foyer-door-2{ left:35.98%; }  /* Pixar */
.foyer-door-3{ left:43.5%; }   /* Star Wars */
.foyer-door-4{ left:51%; }     /* Marvel */
.foyer-door-5{ left:58.6%; }   /* DreamWorks */
.foyer-door-6{ left:66.3%; }   /* Harry Potter */


.foyer-ledger{
  left:13.5%;
  top:68%;
  width:5.5%;
  height:8%;
}

.foyer-review-1{
  left:8.1%;
  top:11%;
  width:14.2%;
  height:11.4%;
}

.foyer-review-2{
  left:8.1%;
  top:23.5%;
  width:14.2%;
  height:11.4%;
}

.foyer-review-3{
  left:8.1%;
  top:35.65%;
  width:14.2%;
  height:11.4%;
}

.foyer-review-4{
  left:8.1%;
  top:48.2%;
  width:14.2%;
  height:10.5%;
}

.foyer-feature{
  left:72%;
  top:64%;
  width:16%;
  height:25%;
}

/* =====================================================
   PROFILE REGION
   ===================================================== */

.foyer-profile-region{
    position:absolute;
    left:76.4%;
    top:4%;
    width:16.8%;
    height:14%;
}

.foyer-profile-avatar{
    position:absolute;
    left:0;
    top:19%;
    width:29%;
    height:60%;
}

.foyer-profile-info{
    position:absolute;
    left:31%;
    top:0;
    width:67%;
    height:68%;
}

.foyer-profile-button{
    position:absolute;
    left:36%;
    bottom:8%;
    width:58%;
    height:22%;

    border:none;
    background:transparent;
    cursor:pointer;
}

/* =====================================================
   Auditorium Overlay
   ===================================================== */

   /* Shell */
#auditorium{
  display:none;
  position:fixed;
  inset:0;
  z-index:800;
  background:#050303;
  overflow:hidden;
}

.auditorium-stage{
  position:relative;
  width:min(100vw, calc(100vh * 1.6));
  aspect-ratio:16 / 10;
  margin:auto;
  top:50%;
  transform:translateY(-50%);
}

.auditorium-art{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.auditorium-overlay{
  position:absolute;
  inset:0;
  z-index:5;
}

.auditorium-back{
  position:absolute;
  left:3%;
  top:4%;
  width:10%;
  height:8%;
  border:0;
  background:transparent;
  cursor:pointer;
}

#scene-transition{
  position:fixed;
  inset:0;
  z-index:2000;
  background:#020101;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}

#scene-transition.active{
  opacity:1;
}

/* Regions */

/* Screen Region */

/* =====================================================
   SCREEN REGION
   ===================================================== */

.screen-region{
    position:absolute;

    left:18%;
    top:16%;

    width:64%;
    height:43%;

    display:flex;
    flex-direction:column;
}

/* =====================================================
   PROJECTION SYSTEM
   ===================================================== */

.projection-header{
    position:absolute;

    left:50.1%;
    top:-20.6%;

    transform:translateX(-50%);

    width:20%;
    height:12%;

    display:flex;
    align-items:center;
    justify-content:center;

    /* outline:2px solid #00ff66; */   /* Temporary positioning guide */
}

#projection-title{
    font-family:'Cinzel Decorative', cursive;

    font-size:clamp(.9rem,1.2vw,1.9rem);

    color:#f5d58a;

    text-transform:uppercase;

    letter-spacing:.10em;

    text-align:center;
    
    text-shadow:
    0 0 8px rgba(235,195,95,.18);
}

.projection-body{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:1.5rem;

    background:rgba(0,0,0,.18);

    color:#f5d58a;

    overflow:hidden;
}

/* Stage Controls */

.theater-control{
  position:absolute;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}

.theater-control:hover{
  outline:2px solid rgba(255,215,0,.55);
  background:rgba(255,215,0,.08);
}

/* Rough starter positions — adjust later */
.control-search{
  left:23.3%;
  top:59.6%;
  width:7.2%;
  height:5%;
}

.control-dashboard{
  left:35.5%;
  top:59.6%;
  width:7.2%;
  height:5%;
}

.control-bucket{
  left:48.2%;
  top:59.6%;
  width:3.5%;
  height:5%;
}

.control-collection{
  left:54.2%;
  top:59.6%;
  width:7.2%;
  height:5%;
}

.control-ledger{
  left:66.8%;
  top:59.6%;
  width:7.2%;
  height:5%;
}

/* Private Boxes */

/* Back Button */

/* Developer Mode */

/* =====================================================
   DEVELOPER MODE
   (Remove or disable before production)
   ===================================================== */

.foyer-profile-avatar{
    outline:2px solid #2ecc71;
}

.foyer-profile-info{
    outline:2px solid #3498db;
}

.foyer-profile-button{
    outline:2px solid gold;
}

.foyer-hotspot::after{
    content:attr(aria-label);
    
}

.foyer-hotspot::after{
  content:attr(aria-label);
  position:absolute;
  top:4px;
  left:6px;
  font-size:10px;
  color:#ffd700;
  background:rgba(0,0,0,.65);
  padding:2px 4px;
  border-radius:3px;
  pointer-events:none;
}

/* ── SETTINGS PANEL ── */
.settings-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.7);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.settings-overlay.open{display:flex}
.settings-panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:20px;
  padding:28px;width:500px;max-width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.7);position:relative;
}
.settings-title{font-size:1.1rem;font-weight:900;margin-bottom:6px}
.settings-desc{font-size:.83rem;color:var(--text2);margin-bottom:24px;line-height:1.5}
.settings-field{margin-bottom:20px}
.settings-label{font-size:.83rem;font-weight:700;margin-bottom:8px;color:var(--text2)}
.settings-hint{font-size:.75rem;color:var(--text2);margin-top:6px;line-height:1.5}
.settings-hint a{color:var(--gold);text-decoration:none}
.settings-hint a:hover{text-decoration:underline}
.poster-status{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--card);border-radius:8px;padding:10px 14px;font-size:.83rem;
}
.poster-progress{flex:1;background:var(--card2);border-radius:4px;height:6px;overflow:hidden;margin-top:2px}
.poster-progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .3s ease}

/* ── EFFECTS ── */
.sparkle-el{position:fixed;pointer-events:none;z-index:999;font-size:1.3rem;animation:sparkleAnim .9s ease forwards}
@keyframes sparkleAnim{0%{opacity:1;transform:scale(0) rotate(0deg)}60%{opacity:1;transform:scale(1.2) rotate(20deg)}100%{opacity:0;transform:scale(.5) rotate(40deg) translateY(-30px)}}
.toast{
  position:fixed;bottom:24px;right:24px;z-index:500;
  background:var(--card2);border:1px solid var(--gold);border-radius:12px;
  padding:12px 20px;font-size:.88rem;font-weight:700;
  box-shadow:0 8px 30px rgba(0,0,0,.4);animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){
  .era-bar-row{grid-template-columns:100px 1fr 40px}
  .era-bar-num:last-child{display:none}
  .movies-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  header{height:auto;padding:10px 14px;gap:10px}
  .header-title{display:none}
  .tab-content{padding:14px}
  input[type=range]{width:110px}
}