:root {
  --ink: #173743;
  --cream: #fffaf0;
  --gold: #f3b63f;
  --orange: #e96f35;
  --teal: #157b7d;
  --shadow: 0 22px 70px rgba(12, 37, 44, .25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: "DM Sans", sans-serif; color: var(--ink); background: #102e3a; }
button, input { font: inherit; }
button { cursor: pointer; }
.screen { position: fixed; inset: 0; visibility: hidden; opacity: 0; transition: opacity .55s ease, visibility .55s; }
.screen.active { visibility: visible; opacity: 1; }

.login-screen { background: #050708; }
.login-visual { position: absolute; inset: 0; background: #050708 url("../Asset/Scenes/Images/Scenes/Scene4_entreeduVillage.png") center/contain no-repeat; }
.login-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,35,43,.78) 0%, rgba(10,35,43,.44) 45%, rgba(10,35,43,.06) 75%), linear-gradient(0deg, rgba(8,29,36,.32), transparent 40%); }
.brand { position: absolute; top: 34px; left: 4.5vw; display: flex; align-items: center; gap: 12px; color: white; font-weight: 700; letter-spacing: .18em; font-size: 13px; }
.portal-header{position:absolute;z-index:3;top:27px;right:4.5vw;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;max-width:min(760px,70vw)}.portal-header button{display:grid;gap:2px;padding:10px 15px;border:1px solid rgba(255,255,255,.5);border-radius:12px;color:white;background:rgba(8,28,35,.55);backdrop-filter:blur(10px);text-align:left}.portal-header small{color:rgba(255,255,255,.7);font-size:10px}.welcome-card{width:min(560px,calc(100vw - 48px))}.welcome-video{position:relative;width:min(440px,100%);aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:18px;background:rgba(5,16,20,.62);box-shadow:var(--shadow)}.welcome-video video{width:100%;height:100%;object-fit:cover}.welcome-video p{position:absolute;inset:auto 18px 12px;margin:0;color:rgba(255,255,255,.75);font-size:12px;pointer-events:none}.portal-dialog{width:min(480px,calc(100% - 30px))}.portal-dialog select{width:100%;padding:15px;border:1px solid #d7d0c4;border-radius:13px;background:white;color:var(--ink);font:inherit}.secondary-portal-btn{width:100%;margin-top:12px;padding:14px;border:1px solid #b8cec8;border-radius:13px;color:#176b6c;background:#e8f2ef;font-weight:700}.privacy-note{color:#747973;font-size:12px;line-height:1.5}.teacher-header-actions{display:flex;gap:9px;flex-wrap:wrap}
.portal-header .phase-test-access{border-color:rgba(243,182,63,.8);color:#49350c;background:var(--gold)}.portal-header .phase-test-access small{color:rgba(73,53,12,.72)}
.brand-mark, .round-btn { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15); font-family: Fraunces, serif; font-size: 23px; }
.login-card { position: absolute; z-index: 2; left: clamp(24px, 8vw, 130px); top: 50%; translate: 0 -45%; width: min(500px, calc(100vw - 48px)); color: white; }
.eyebrow { margin: 0 0 14px; color: var(--gold); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .18em; }
h1, h2 { font-family: Fraunces, serif; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(42px, 5.1vw, 74px); text-wrap: balance; }
.lead { max-width: 450px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); }
label { display: block; font-weight: 700; font-size: 13px; margin: 28px 0 9px; }
input { width: 100%; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; padding: 17px 18px; background: rgba(255,255,255,.94); color: var(--ink); outline: none; font-size: 17px; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(243,182,63,.22); }
.primary-btn { width: 100%; border: 0; border-radius: 14px; background: var(--gold); color: #43300b; padding: 17px 20px; margin-top: 12px; font-weight: 700; transition: transform .2s, filter .2s; }
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.primary-btn span { float: right; font-size: 20px; line-height: 18px; }
.privacy { font-size: 12px; color: rgba(255,255,255,.55); text-align: center; }

.intro-screen { background: #07191f; display: grid; place-items: center; }
.intro-screen video, .video-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-fallback { z-index: -1; background: #050708 url("../Asset/Scenes/Images/Scenes/Scene4_entreeduVillage.png") center/contain no-repeat; opacity: .3; }
.ghost-btn { border: 1px solid rgba(255,255,255,.5); color: white; background: rgba(8,28,35,.48); backdrop-filter: blur(10px); border-radius: 99px; padding: 11px 18px; }
.skip-btn { position: absolute; right: 28px; top: 26px; z-index: 4; }
.play-btn { position: relative; z-index: 3; display: grid; place-items: center; gap: 10px; border: 0; background: transparent; color: white; }
.play-btn span { display: grid; place-items: center; padding-left: 4px; width: 76px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: #49350c; box-shadow: 0 0 0 12px rgba(255,255,255,.12); font-size: 25px; }
.play-btn small { font-weight: 700; }