/* Science Weise HUD: 1920 x 1080 reference canvas.
   Every position below is in DESIGN pixels so artwork and overlays scale together. */
:root{--cyan:#8fefff;--gold:#e8c16a;--white:#f4fbff;--green:#8fffd2}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#020814;overflow:hidden;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}
#viewport{position:fixed;inset:0;background:#020814;overflow:hidden}
#hud{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;background:#020814 url("../assets/hud-background.webp") center center / 100% 100% no-repeat;color:var(--white);isolation:isolate;overflow:hidden}
/* Effects stay behind the data overlays; reduced-motion users get a still HUD. */
#hud::before,#hud::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen}
#hud::before{background:radial-gradient(circle at 11% 18%,rgba(143,239,255,.12),transparent 22%),radial-gradient(circle at 79% 12%,rgba(143,239,255,.10),transparent 25%),radial-gradient(circle at 50% 87%,rgba(143,239,255,.07),transparent 28%);animation:cyanPulse 8s ease-in-out infinite alternate}
#hud::after{opacity:.18;background:linear-gradient(to bottom,transparent 0%,rgba(143,239,255,.2) 49%,transparent 53%),repeating-linear-gradient(to bottom,rgba(143,239,255,.035) 0px,rgba(143,239,255,.035) 1px,transparent 2px,transparent 6px);background-size:100% 260px,100% 100%;background-repeat:no-repeat;animation:scanSweep 9s linear infinite}
@keyframes cyanPulse{from{opacity:.7}to{opacity:1}}
@keyframes scanSweep{from{background-position:0 -260px,0 0}to{background-position:0 1080px,0 0}}
@media(prefers-reduced-motion:reduce){#hud::before,#hud::after{animation:none}#hud::after{opacity:.1}}
.zone{position:absolute;overflow:hidden;pointer-events:none;z-index:2}
/* Header */
#clockZone{left:1230px;top:74px;width:555px;height:70px}
.clock{font-family:Orbitron,"Share Tech Mono",Consolas,monospace;font-size:58px;font-weight:800;line-height:1.12;letter-spacing:2px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:#c0f9ff;text-shadow:0 0 12px rgba(143,239,255,.15)}
#dateTopZone{left:670px;top:103px;width:530px;height:41px;text-align:center}
.date{font-size:25px;line-height:1.2;white-space:nowrap;letter-spacing:.2px;color:var(--cyan);text-align:center;text-shadow:0 0 10px rgba(143,239,255,.12)}
/* Left calendar. Header is an independent overlay above the existing image's calendar line. */
#calendarHeader{left:84px;top:198px;width:315px;height:38px;text-align:center;color:var(--cyan);font-family:Orbitron,"Segoe UI",sans-serif;font-size:26px;font-weight:800;letter-spacing:2px;text-shadow:0 0 12px rgba(143,239,255,.22)}
#calendarZone{left:86px;top:265px;width:300px;height:200px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:30px;gap:4px;width:100%}
.day{display:grid;place-items:center;min-width:0;font-family:Consolas,"Courier New",monospace;font-size:21px;line-height:1;color:#deefff;border:1px solid rgba(143,239,255,.11);background:rgba(7,17,34,.12)}
.day.blank{border-color:transparent;background:transparent}
.day.today{color:#03111d;background:rgba(143,239,255,.94);box-shadow:0 0 15px rgba(143,239,255,.22);font-weight:900}
#schoolBadge{left:165px;top:491px;width:126px;height:157px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(234,45,65,.2))}
/* Class mode */
#modeZone{left:108px;top:781px;width:263px;height:86px}
.mode-main{font-size:41px;line-height:1.05;font-weight:850;white-space:nowrap;text-transform:uppercase;color:var(--white);text-shadow:0 0 10px rgba(143,239,255,.06)}
.mode-sub{margin-top:0;font-size:19px;line-height:1.05;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--green)}
/* Middle content */
#titleZone{left:487px;top:249px;width:840px;height:83px}
.title-text{font-size:49px;line-height:1.05;font-weight:850;letter-spacing:.3px;white-space:normal;text-transform:uppercase;color:var(--gold);text-shadow:0 0 10px rgba(232,193,106,.10)}
#objectiveZone{left:494px;top:404px;width:846px;height:232px}
.objective-text{font-family:Consolas,"Courier New",monospace;font-size:46px;line-height:1.14;color:#edfaff;white-space:pre-wrap;overflow-wrap:break-word;text-shadow:0 0 10px rgba(143,239,255,.05)}
.objective-text::before{content:"> ";color:var(--cyan)}
/* Counts are static demo values until Sheets are connected. Keep all digits inside their panel frames. */
.count-num{font-size:72px;font-weight:900;line-height:1;color:var(--gold);text-align:right;text-shadow:0 0 14px rgba(232,193,106,.12)}
#fullDaysZone{left:1575px;top:305px;width:260px;height:85px}
#markingPeriodZone{left:1575px;top:466px;width:260px;height:85px}
#seniorsZone{left:1575px;top:616px;width:260px;height:85px}
/* Both logos stay: the red school badge in the calendar and Science Weise owl in the log hex. */
#commLogoZone{left:453px;top:740px;width:100px;height:90px;display:grid;place-items:center}
.comm-logo{width:74px;height:74px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 0 6px rgba(143,239,255,.2))}
#commTextZone{left:583px;top:798px;width:1215px;height:52px}
.comm-text{font-size:29px;line-height:1.02;font-style:italic;color:#fff0d8;overflow-wrap:break-word}
/* Status rail calibration: all text and fill are INSIDE the artwork track. */
#statusMinZone{left:410px;top:887px;width:145px;height:29px}
.status-min{font-size:24px;line-height:1.05;font-weight:900;white-space:nowrap;color:var(--gold)}
.progress-wrap{left:550px;top:885px;width:765px;height:23px;z-index:2}
.progress-fill{height:100%;width:37%;background:linear-gradient(90deg,#ffd05c,#dca92f);box-shadow:0 0 15px rgba(255,208,92,.2);transition:width .8s linear}
#progressPercent{position:absolute;left:1256px;top:884px;width:68px;text-align:right;color:#fff8e6;font-size:22px;font-weight:850;z-index:2}
#previewNote{left:80px;top:1020px;width:850px;height:28px;color:#a0c7d1;font-size:16px;letter-spacing:1.4px;text-transform:uppercase;opacity:.75}

/* Smartphone/tablet and projector share the same 1920×1080 design coordinates;
   JS scales the whole stage without changing internal element positions. */