@font-face { font-family: 'Special Elite'; src: url('assets/fonts/special-elite.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Anton'; src: url('assets/fonts/anton.woff2') format('woff2'); font-display: block; }

:root {
  --idle: rgb(184, 173, 158);
  --hover: rgb(219, 20, 20);
  --dim: rgb(140, 140, 140);
  --type: 'Special Elite', 'American Typewriter', 'Courier New', monospace;
  --sys: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--idle); font-family: var(--type); user-select: none; -webkit-user-select: none; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
video#jumpscare { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; background: #000; visibility: hidden; z-index: 5; }
video#jumpscare.on { visibility: visible; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#hide-mask { position: absolute; inset: 0; }
#hide-mask.locker {
  /* Solid metal, except for the vents the player looks through. */
  background: linear-gradient(#000 0 32%, transparent 32% 37.2%, #000 37.2% 40.6%, transparent 40.6% 45.8%, #000 45.8% 49.2%,
    transparent 49.2% 54.4%, #000 54.4% 57.8%, transparent 57.8% 63%, #000 63% 66.4%, transparent 66.4% 71.6%, #000 71.6%);
}
#hide-mask.desk { background: linear-gradient(rgba(0,0,0,0.97), rgba(0,0,0,0) 42%, rgba(0,0,0,0) 95%, #000 95%); }
#ping { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; }
#dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 2px; background: rgba(255,255,255,0.35); }
#counter { position: absolute; top: 22px; right: 28px; font-size: 24px; opacity: 0.75; }
#tracker { position: absolute; top: 64px; right: 24px; padding: 14px 18px; background: rgba(0,0,0,0.72); font-size: 19px; line-height: 1.3; }
#tracker .head { color: var(--hover); font-size: 20px; text-align: center; margin-bottom: 4px; }
#tracker .row { color: var(--dim); }
#tracker .row.got { color: var(--hover); }
#tracker .duo { margin-top: 12px; }
#prompt { position: absolute; left: 0; right: 0; top: calc(50% + 36px); text-align: center; font-size: 20px; color: rgb(217,217,217); }
#banner { position: absolute; left: 0; right: 0; bottom: 90px; text-align: center; font-size: 36px; color: rgb(219, 209, 184); padding: 0 40px; }
#stamina { position: absolute; left: 50%; bottom: 30px; width: 180px; margin-left: -90px; height: 2px; background: rgba(255,255,255,0.05); }
#stamina div { height: 100%; background: rgba(153, 143, 128, 0.5); width: 100%; }
#powers { position: absolute; right: 28px; bottom: 24px; text-align: right; font-size: 17px; line-height: 1.25; }
#battery { font-size: 20px; }
#powers .off { color: rgb(102,102,102); }
#battery.low { color: var(--hover); }

/* The player's own phone, in the corner. Hold Q to raise it. */
#phone {
  position: absolute; left: 28px; bottom: 0; width: 212px; height: 400px; border-radius: 30px; border: 4px solid rgb(51,51,51);
  background: rgb(9,9,9); font-family: var(--sys); color: #fff; transform: translateY(366px); overflow: hidden;
}
#phone .status { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0 18px; font-size: 12px; font-weight: 600; height: 26px; position: relative; }
#phone .status .dim { color: rgb(140,140,140); font-size: 10px; font-weight: 400; }
#phone .island { position: absolute; left: 50%; margin-left: -28px; width: 40px; height: 14px; border-radius: 7px; background: #000; }
#phone .badge { position: absolute; left: 50%; margin-left: 16px; width: 16px; height: 16px; border-radius: 8px; background: var(--hover); font-size: 10px; text-align: center; line-height: 16px; }
#phone .avatar { display: block; width: 38px; height: 38px; border-radius: 19px; margin: 6px auto 0; object-fit: cover; background: #333; }
#phone .name { text-align: center; font-size: 12px; font-weight: 500; margin-top: 3px; }
#phone .divider { height: 1px; background: rgba(255,255,255,0.1); margin: 6px 4px 0; }
#phone .messages { position: absolute; left: 10px; right: 10px; top: 104px; bottom: 50px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
#phone .bubble { align-self: flex-start; max-width: 168px; background: rgb(43,43,43); border-radius: 12px; padding: 6px 10px; font-size: 13px; line-height: 1.25; }
#phone .field { position: absolute; left: 12px; right: 12px; bottom: 16px; height: 26px; border-radius: 13px; background: rgb(26,26,26); color: rgb(102,102,102); font-size: 12px; line-height: 26px; padding-left: 12px; }
#notice { position: absolute; left: 28px; bottom: 44px; width: 264px; padding: 10px 14px 11px; border-radius: 14px; background: rgba(26,26,26,0.92); font-family: var(--sys); color: #fff; opacity: 0; }
#notice .from { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
#notice .from span { color: rgb(140,140,140); font-size: 11px; }
#notice .text { font-size: 14px; line-height: 1.3; }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }
#panels { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#resume-hint { position: fixed; left: 0; right: 0; top: 46%; text-align: center; font-size: 28px; z-index: 7; color: var(--idle); pointer-events: none; }

.panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: auto; padding: 24px; text-align: center; }
.panel.menu { align-items: flex-start; padding-left: 60px; background: none; }
.panel.menu .stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.panel h1 { font-weight: 400; margin: 0; }
.panel p { margin: 0; }
.text { font-size: 21px; max-width: 680px; line-height: 1.35; white-space: pre-line; }
.dimtext { color: var(--dim); }
.hint { font-size: 20px; color: var(--dim); }
.hint.horror { color: rgb(217, 31, 26); }
.title { display: block; max-width: min(90vw, 760px); height: auto; }

.btn { width: 340px; font-family: var(--type); font-size: 26px; padding: 6px 0; color: var(--idle); background: none; border: 0; cursor: pointer; transition: transform 0.05s; }
.btn:hover, .btn:focus-visible { color: var(--hover); transform: scaleX(1.08); outline: none; animation: unsteady 0.35s infinite; }
@keyframes unsteady { 0% { opacity: 1; } 50% { opacity: 0.72; } 100% { opacity: 1; } }

.settings { display: grid; grid-template-columns: 220px 300px; gap: 12px 16px; align-items: center; margin: 8px 0; }
.settings label { font-size: 21px; text-align: right; }
.settings input[type=range] { width: 300px; accent-color: var(--hover); }
.check { font-size: 21px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--hover); }
.keys { font-size: 18px; color: var(--dim); line-height: 1.5; margin-top: 4px; }

/* Everything is sized for a 1280x720 window and scales with it (--ui is set from the window size). */
#hud > :not(#hide-mask), .panel > *, #resume-hint { zoom: var(--ui, 1); }