/* NEEDS IT BY FIVE - screens.css : HUD, title, day card, voicemail, summary, endings, overlays */

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; height: 68px; z-index: 40; display: flex; align-items: center; gap: 22px; padding: 0 26px;
  background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,0)); pointer-events: none; }
.hud-day { display: flex; flex-direction: column; line-height: 1; min-width: 172px; }
.hud-day b { font: 900 27px var(--font-display); letter-spacing: .07em; color: #eaf7f3; text-shadow: 0 2px 8px #000; }
.hud-day small { font: 700 11px var(--font-mono); letter-spacing: .22em; color: var(--w-dim); margin-top: 4px; }
.hud-clock { font: 800 25px var(--font-mono); color: #ffc857; min-width: 128px; text-shadow: 0 0 12px #ffc85766; font-variant-numeric: tabular-nums; }
.hud-prog { flex: 1; height: 9px; border-radius: 6px; background: rgba(255,255,255,.1); position: relative; overflow: visible; }
.hud-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #4fb3a0, #ffc857); }
.hud-prog u { white-space: nowrap; position: absolute; top: -17px; transform: translateX(-50%); font: 700 10px var(--font-mono); color: var(--w-dim); text-decoration: none; letter-spacing: .06em; }
.hud-prog u::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 8px; background: var(--w-dim); }
.hud-stress { display: flex; align-items: center; gap: 12px; width: 372px; position: relative; }
.hud-face { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px #000); transition: transform .2s; }
.hud-face.bump { animation: nbf-pop .3s; }
.hud-smain { flex: 1; }
.hud-stop { display: flex; align-items: baseline; gap: 8px; font: 800 11px var(--font-mono); letter-spacing: .16em; color: var(--w-dim); margin-bottom: 4px; }
.hud-stop b { font-size: 18px; color: #fff; letter-spacing: 0; min-width: 48px; font-variant-numeric: tabular-nums; }
.hud-stop em { font-style: normal; margin-left: auto; padding: 1px 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.hud-bar { position: relative; height: 20px; border-radius: 7px; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.22); overflow: hidden; }
.hud-fill, .hud-ghost { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.hud-fill { background: linear-gradient(90deg, #34d399 0%, #a3e635 28%, #fbbf24 55%, #f97316 75%, #ef4444 100%); background-size: 100% 100%; }
.hud-ghost { background: rgba(255,255,255,.55); transition: clip-path .9s ease .25s; }
.hud-bar .t { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.6); }
.hud-bar .t1 { left: 30%; } .hud-bar .t2 { left: 55%; } .hud-bar .t3 { left: 80%; }
.hud-stress.high .hud-bar { animation: hud-throb .55s infinite; }
@keyframes hud-throb { 50% { box-shadow: 0 0 14px 2px rgba(255,60,60,.7); border-color: #ff6b6b; } }
.hud-pop { position: absolute; right: 8px; top: 52px; font: 900 22px var(--font-ui); text-shadow: 0 2px 8px #000; animation: hud-pop 1.1s ease-out forwards; white-space: nowrap; }
.hud-pop.up { color: #ff6b6b; } .hud-pop.down { color: #7bf0b4; }
@keyframes hud-pop { 0% { transform: translateY(0) scale(.7); opacity: 0; } 15% { transform: translateY(6px) scale(1.15); opacity: 1; } 100% { transform: translateY(26px) scale(1); opacity: 0; } }
#hud.home .hud-clock { color: #ffb86b; text-shadow: 0 0 12px #ffb86b66; }
#hud.home .hud-prog i { background: linear-gradient(90deg, #8a6ad0, #ffb86b); }

/* ---------- title ---------- */
#screen-title { background: #05090b; overflow: hidden; }
.tt-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 60% at 72% 40%, rgba(120,220,205,.20), transparent 70%),
  linear-gradient(180deg, #0b1519 0%, #060b0d 70%); }
.tt-glass { position: absolute; right: 90px; top: 120px; width: 380px; height: 470px; border-radius: 10px; border: 8px solid #17262c; overflow: hidden;
  background: linear-gradient(160deg, rgba(160,230,220,.32), rgba(60,110,120,.35)); box-shadow: inset 0 0 60px #000b, 0 0 90px rgba(130,230,215,.14); }
.tt-glass .voss-sil { position: absolute; left: 50%; bottom: -8px; width: 230px; transform: translateX(-50%); animation: tt-pace 16s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes tt-pace { 0% { transform: translateX(-130%) scale(.72); } 50% { transform: translateX(-40%) scale(.9); } 100% { transform: translateX(30%) scale(1.04); } }
.tt-glass::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(3.5px); background: rgba(200,240,235,.2); }
.tt-glass .glint { animation: tt-glint 5s infinite; }
@keyframes tt-glint { 0%,70%,100% { opacity: .15; } 74%, 94% { opacity: 1; } }
.tt-lamp { position: absolute; left: 0; top: 0; width: 100%; height: 14px; background: #d7fff6; box-shadow: 0 0 80px 40px rgba(159,232,220,.35); animation: nbf-flicker 7s infinite; }
.tt-title { position: absolute; left: 70px; top: 120px; }
.tt-title h1 { margin: 0; font: 400 118px/0.9 var(--font-display); letter-spacing: .02em; color: #eef8f5; text-transform: uppercase; position: relative; text-shadow: 0 6px 0 #0007; }
.tt-title h1 span { display: block; }
.tt-title h1 .five { color: #ffc857; text-shadow: 0 0 40px rgba(255,200,87,.45), 0 6px 0 #0007; }
.tt-title h1::before, .tt-title h1::after { content: attr(data-t); position: absolute; left: 0; top: 0; width: 100%; white-space: pre-line; mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.tt-title h1::before { color: #ff2d55; transform: translate(-3px, 0); animation: tt-gl1 5.5s steps(1) infinite; }
.tt-title h1::after { color: #19e0ff; transform: translate(3px, 0); animation: tt-gl2 5.5s steps(1) infinite; }
@keyframes tt-gl1 { 0%,92%,100% { clip-path: inset(0 0 100% 0); } 93% { clip-path: inset(10% 0 60% 0); transform: translate(-8px,0); } 95% { clip-path: inset(55% 0 20% 0); transform: translate(5px,0); } 97% { clip-path: inset(80% 0 4% 0); transform: translate(-3px,0); } }
@keyframes tt-gl2 { 0%,91%,100% { clip-path: inset(0 0 100% 0); } 92% { clip-path: inset(40% 0 40% 0); transform: translate(9px,0); } 96% { clip-path: inset(5% 0 80% 0); transform: translate(-6px,0); } }
.reduce-flash .tt-title h1::before, .reduce-flash .tt-title h1::after { display: none; }
.tt-sub { margin: 26px 0 0 6px; font: 700 18px var(--font-mono); letter-spacing: .24em; color: var(--w-dim); text-transform: uppercase; }
.tt-menu { position: absolute; left: 76px; top: 420px; display: flex; flex-direction: column; gap: 8px; width: 340px; }
.tt-menu button { text-align: left; font: 400 34px/1 var(--font-display); letter-spacing: .08em; color: #cfe3de; background: none; border: 0; padding: 6px 0 6px 18px; cursor: pointer; position: relative; text-transform: uppercase; opacity: .9; transition: color .12s, transform .12s, opacity .12s; }
.tt-menu button small { font: 600 13px var(--font-mono); letter-spacing: .1em; color: var(--w-dim); margin-left: 12px; }
.tt-menu button:hover, .tt-menu button:focus-visible { color: #ffc857; transform: translateX(8px); opacity: 1; outline: none; }
.tt-menu button:hover::before, .tt-menu button:focus-visible::before { content: '▶'; position: absolute; left: -10px; top: 12px; font-size: 18px; }
.tt-menu button[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.tt-foot { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 600 12px var(--font-mono); letter-spacing: .12em; color: #5d7a78; }
.tt-warn { position: absolute; left: 76px; bottom: 56px; max-width: 520px; font: 600 13px/1.5 var(--font-mono); color: #7f9d99; }
.tt-stars { position: absolute; right: 90px; top: 612px; width: 380px; text-align: center; font: 400 38px var(--font-display); letter-spacing: .3em; color: #3a4a4d; }
.tt-stars .on { color: #ffc857; text-shadow: 0 0 18px #ffc85799; }
.tt-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #030607; cursor: pointer; text-align: center; }
.tt-gate h2 { margin: 0; font: 400 54px var(--font-display); letter-spacing: .1em; color: #eaf7f3; }
.tt-gate p { margin: 0; font: 600 15px/1.6 var(--font-mono); color: #7f9d99; max-width: 640px; }
.tt-gate .go { font: 800 18px var(--font-mono); letter-spacing: .3em; color: #ffc857; animation: nbf-blink 1.4s infinite; }

/* ---------- day card (FNAF "12 AM / Night 1") ---------- */
#screen-card { background: #000; }
.cd-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.cd-time { font: 400 150px/1 var(--font-display); color: #f4f7f6; letter-spacing: .04em; }
.cd-day { font: 400 64px/1 var(--font-display); color: #cfd8d6; letter-spacing: .12em; margin-top: 8px; }
.cd-blurb { margin-top: 30px; font: 600 20px var(--font-mono); letter-spacing: .12em; color: #8aa8a2; max-width: 760px; }
.cd-stress { margin-top: 22px; font: 800 17px var(--font-mono); letter-spacing: .26em; padding: 6px 16px; border: 2px solid currentColor; border-radius: 6px; }
.cd-fade { animation: cd-in 1.2s ease both; }
@keyframes cd-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- voicemail (Gary) ---------- */
#screen-voicemail { background: radial-gradient(ellipse at 50% 38%, #16262c, #05090b 75%); }
.vm-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.vm-machine { width: 520px; height: 150px; border-radius: 14px; background: linear-gradient(#2a2f31, #151819); border: 2px solid #3c4548; position: relative; box-shadow: 0 20px 50px #000c; }
.vm-machine::before { content: 'ANSWERING MACHINE'; position: absolute; left: 22px; top: 16px; font: 800 12px var(--font-mono); letter-spacing: .3em; color: #6f8083; }
.vm-led { position: absolute; right: 26px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: #ff3a3a; box-shadow: 0 0 16px 4px #ff3a3a99; animation: nbf-blink .9s infinite; }
.vm-disp { position: absolute; left: 22px; right: 22px; top: 46px; height: 54px; border-radius: 6px; background: #1c2a1a; border: 2px solid #0a120a; color: #7dff8c; font: 800 17px/54px var(--font-mono); letter-spacing: .06em; padding: 0 14px; text-shadow: 0 0 8px #7dff8c88; white-space: nowrap; overflow: hidden; }
.vm-tape { position: absolute; left: 22px; bottom: 14px; display: flex; gap: 12px; }
.vm-tape i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #55605f; position: relative; animation: vm-spin 1.2s linear infinite; }
.vm-tape i::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 10px; background: #55605f; transform: translateX(-50%); }
@keyframes vm-spin { to { transform: rotate(360deg); } }
.vm-caption { width: 900px; min-height: 130px; text-align: center; font: 600 31px/1.34 var(--font-ui); color: #eaf7f3; text-shadow: 0 2px 10px #000; }
.vm-caption .who { display: block; font: 800 14px var(--font-mono); letter-spacing: .3em; color: #ffc857; margin-bottom: 12px; }
.vm-actions { display: flex; gap: 14px; align-items: center; }
.vm-hint { font: 600 13px var(--font-mono); letter-spacing: .16em; color: #5d7a78; }

/* ---------- summary / end ---------- */
#screen-summary, #screen-end { background: radial-gradient(ellipse at 50% 30%, #14232a, #04080a 80%); }
.sm-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 60px 120px; }
.sm-wrap h2 { margin: 0; font: 400 82px/1 var(--font-display); letter-spacing: .06em; color: #f1f7f5; }
.sm-wrap h3 { margin: 0; font: 700 15px var(--font-mono); letter-spacing: .3em; color: var(--w-dim); text-transform: uppercase; }
.sm-rows { display: grid; grid-template-columns: auto auto; gap: 8px 38px; text-align: left; font: 700 20px var(--font-mono); margin: 12px 0; }
.sm-rows .k { color: var(--w-dim); } .sm-rows .v { color: #fff; text-align: right; } .sm-rows .v.bad { color: #ff7b7b; } .sm-rows .v.good { color: #7bf0b4; }
.sm-text { max-width: 880px; font: 500 24px/1.5 var(--font-ui); color: #dbe9e5; }
.sm-text p { margin: 0 0 14px; }
.sm-quote { font: 800 36px var(--font-display); letter-spacing: .08em; color: #ff6b6b; }
.sm-stars { font: 400 56px var(--font-display); letter-spacing: .3em; color: #3a4a4d; } .sm-stars .on { color: #ffc857; text-shadow: 0 0 24px #ffc85799; }
.sm-btns { display: flex; gap: 16px; margin-top: 10px; }
.sm-btns .btn { font-size: 20px; padding: 14px 28px; }
.sm-ledger { width: 760px; text-align: left; font: 600 19px/1.9 var(--font-mono); }
.sm-ledger div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,.12); }
.sm-ledger b.down { color: #7bf0b4; } .sm-ledger b.up { color: #ff7b7b; }
.sm-forecast { font: 800 22px var(--font-mono); letter-spacing: .08em; padding: 10px 22px; border: 2px solid currentColor; border-radius: 8px; }
#screen-end.dawn { background: linear-gradient(180deg, #2a2142, #e98a5c 70%, #ffd08a); }
#screen-end.dawn .sm-text, #screen-end.dawn .sm-wrap h2 { color: #fff7ea; text-shadow: 0 2px 14px #3a1b1a88; }
.fadeup { animation: sm-up .7s ease both; }
@keyframes sm-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- overlays (pause / settings / jumpscare / toasts) ---------- */
#overlay { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.ov { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center; background: rgba(2,6,8,.82); }
.ov-card { min-width: 460px; padding: 28px 32px; border-radius: 16px; background: #0f1b20; border: 1px solid #2c4750; box-shadow: 0 20px 60px #000c; display: flex; flex-direction: column; gap: 14px; }
.ov-card h2 { margin: 0 0 6px; font: 400 44px var(--font-display); letter-spacing: .1em; color: #eaf7f3; }
.ov-card .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 16px var(--font-ui); color: #cfe3de; }
.ov-card .row small { display: block; color: var(--w-dim); font-weight: 500; font-size: 12px; margin-top: 2px; }
.ov-card input[type=range] { width: 200px; accent-color: #ffc857; }
.ov-card input[type=checkbox] { width: 22px; height: 22px; accent-color: #ffc857; }
.ov-card .btns { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

.js-wrap { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #5c0000 0%, #120000 70%, #000 100%); pointer-events: auto; overflow: hidden; }
.js-wrap .voss-face { position: absolute; left: 50%; top: 50%; height: 118%; transform: translate(-50%, -48%) scale(.7); animation: js-lunge .22s cubic-bezier(.2,.9,.2,1) forwards, js-rattle .09s linear .22s infinite; }
.js-wrap .jaw { animation: js-jaw .1s linear .2s infinite alternate; transform-origin: 300px 440px; }
@keyframes js-lunge { to { transform: translate(-50%, -48%) scale(1.12); } }
@keyframes js-rattle { 0% { transform: translate(-50%, -48%) scale(1.12); } 25% { transform: translate(-51%, -47%) scale(1.14); } 50% { transform: translate(-49%, -49%) scale(1.11); } 75% { transform: translate(-50.6%, -48.6%) scale(1.15); } 100% { transform: translate(-49.4%, -47.6%) scale(1.12); } }
@keyframes js-jaw { from { transform: translateY(0); } to { transform: translateY(26px); } }
.reduce-shake .js-wrap .voss-face { animation: js-lunge .22s ease forwards; } .reduce-shake .js-wrap .jaw { animation: none; transform: translateY(14px); }
.js-line { position: absolute; left: 0; right: 0; bottom: 38px; text-align: center; font: 400 78px var(--font-display); letter-spacing: .06em; color: #fff; text-shadow: 0 0 0 #000, 4px 4px 0 #b00000, -2px -2px 0 #000; padding: 0 40px; animation: nbf-pop .25s .12s both; }
.js-burn { background: radial-gradient(ellipse at center, #fff 0%, #cfd8d6 25%, #05090b 90%); }
.toast { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px; background: rgba(8,16,19,.92); border: 1px solid #2c4750; font: 700 16px var(--font-ui); color: #eaf7f3; z-index: 60; animation: toast-in .35s both; pointer-events: none; max-width: 760px; text-align: center; }
.toast.bad { border-color: #c24655; color: #ffd0d4; } .toast.good { border-color: #46c19c; color: #d6ffee; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.out { animation: toast-out .4s both; } @keyframes toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }