html,body{margin:0;height:100%;background:#050607;overflow:hidden;color:#e6e0d2;font-family:Georgia,"Times New Roman",serif}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:pointer}
#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
#ui.nohud .fl-tracker,#ui.nohud .fl-subs{opacity:0!important}
:root{--hand:"Bradley Hand","Noteworthy","Segoe Print","Comic Sans MS",cursive;--type:"American Typewriter","Courier New",monospace;--paper:#e9e0c9;--ink:#23201a}

/* the logbook tracker: a torn page corner in handwriting */
.fl-tracker{position:fixed;left:22px;top:20px;max-width:330px;padding:12px 16px 12px 18px;background:linear-gradient(175deg,rgba(236,228,206,.93),rgba(222,211,184,.9));
  color:var(--ink);font-family:var(--hand);font-size:16px;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.45);transform:rotate(-.6deg);transition:opacity .4s;border-left:3px solid rgba(160,40,30,.35)}
.fl-tracker .d{font-family:var(--type);font-size:11px;letter-spacing:.06em;opacity:.6;margin-bottom:4px}
.fl-tracker .c{font-size:18px}
.fl-tracker .c.u{color:#8e1c12}
.fl-tracker .h{font-size:13px;opacity:.72;margin-top:2px}
.fl-tracker .n{font-size:13px;opacity:.55;margin-top:6px}
.fl-tracker .x{font-size:13px;opacity:.4;text-decoration:line-through}
.fl-tracker .x.f{text-decoration:line-through wavy rgba(140,20,10,.6)}

.fl-subs{position:fixed;left:50%;bottom:max(9vh,150px);transform:translateX(-50%);max-width:min(900px,80vw);text-align:center;font-size:18px;line-height:1.45;color:#efe9da;
  text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.8);opacity:0;transition:opacity .35s}
.fl-subs .who{font-family:var(--type);font-size:12px;letter-spacing:.12em;color:#d8b36a;margin-right:6px}
.fl-subs .who.r::before{content:"◉ ";color:#c9582f}
.fl-subs .note{font-style:italic;color:#d9d3c3}
.fl-toast{position:fixed;left:50%;top:16vh;transform:translateX(-50%);font-style:italic;font-size:17px;max-width:min(760px,86vw);text-align:center;color:#e2dccd;text-shadow:0 1px 3px #000;opacity:0;transition:opacity .4s}

.fl-finder{display:none;position:fixed;inset:0;pointer-events:none}
.fl-finder::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(20,16,10,.8);box-shadow:0 0 1px rgba(255,240,210,.4)}
.fl-finder .ring{position:absolute;left:50%;bottom:12vh;transform:translateX(-50%);font-family:var(--type);font-size:34px;letter-spacing:.1em;color:#e9d6a4;text-shadow:0 2px 6px #000}
.fl-finder .hint{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);font-size:13px;opacity:.8;white-space:nowrap;text-shadow:0 1px 3px #000}

.fl-sl{display:none;position:fixed;right:28px;bottom:28px;width:260px;text-align:right}
.fl-sl .dial{position:relative;width:110px;height:62px;margin-left:auto;border-radius:110px 110px 0 0;background:radial-gradient(circle at 50% 100%,#2b271f,#141210);border:2px solid #6d614b;overflow:hidden}
.fl-sl .needle{position:absolute;left:50%;bottom:0;width:2px;height:52px;margin-left:-1px;background:#e0c890;transform-origin:50% 100%}
.fl-sl .lbl{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:var(--type);font-size:10px;color:#b7a67f}
.fl-sl .morse{margin-top:8px;font-family:var(--type);font-size:22px;letter-spacing:.2em;color:#f1dfae;min-height:26px;text-shadow:0 0 8px rgba(255,210,120,.5)}
.fl-sl .hint{font-size:12px;opacity:.75;text-shadow:0 1px 3px #000}

.fl-camframe{display:none;position:fixed;inset:0}
.fl-camframe .frame{position:absolute;left:50%;top:50%;width:min(62vh,62vw);height:min(62vh,62vw);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 200vmax rgba(0,0,0,.55)}
.fl-camframe .info{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);font-family:var(--type);font-size:13px;letter-spacing:.06em;color:#ddd6c6}
.fl-binoc{display:none;position:fixed;inset:0;pointer-events:none;z-index:4}
#ui.binoc-up .fl-tracker,#ui.binoc-up .fl-hot,#ui.binoc-up .fl-surv,#ui.binoc-up .fl-toast{opacity:0!important}

.fl-print{display:none;position:fixed;right:5vw;bottom:6vh;width:250px}
.fl-print .card{position:relative;width:250px;height:300px;background:#f2efe6;box-shadow:0 12px 30px rgba(0,0,0,.6);transform:rotate(2deg)}
.fl-print .card .img,.fl-print .card .tint{position:absolute;left:16px;top:16px;width:218px;height:218px;background-size:cover;background-position:center}
.fl-print .card .tint{background:linear-gradient(160deg,#5c6f7c,#3b4a57)}
.fl-print .card.down{background:#1d1c1b}
.fl-print .card .back{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-family:var(--type);color:#8d8676;font-size:12px}
.fl-print .hint{margin-top:10px;text-align:center;font-size:13px;text-shadow:0 1px 3px #000}
.fl-print .hint b{color:#ffb0a0;letter-spacing:.08em}

.fl-watch{position:fixed;right:30px;top:24px;font-family:var(--type);font-size:22px;color:#efe0b8;opacity:0;transition:opacity .25s;text-shadow:0 2px 6px #000}
.fl-fade{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .6s}

.fl-modal{display:none;position:fixed;inset:0;pointer-events:auto;background:rgba(3,4,5,.62);backdrop-filter:blur(2px);z-index:40;overflow:auto}
.fl-modal.center>*{margin:6vh auto}
.fl-modal.full{background:#050607}
.paper{position:relative;max-width:760px;padding:28px 34px 40px;background:linear-gradient(178deg,var(--paper),#d9ceb2);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.paper h2{margin:0 0 12px;font-weight:normal;letter-spacing:.04em}
.paper .close{position:absolute;right:18px;bottom:12px;font-family:var(--type);font-size:11px;opacity:.55}
.paper.note{max-width:540px;font-size:17px;line-height:1.55}
.logbook .tabs{display:flex;gap:6px;margin-bottom:16px}
.logbook .tabs button,.chooser button,.menu button,.settings button{font:inherit;cursor:pointer;background:transparent;border:1px solid rgba(40,30,20,.35);color:inherit;padding:6px 12px}
.logbook .tabs button.on{background:rgba(40,30,20,.12)}
.logbook .page{min-height:360px;font-size:16px;line-height:1.5}
.logbook h3{font-family:var(--type);font-weight:normal;font-size:13px;letter-spacing:.08em}
.logbook .task{font-family:var(--hand);font-size:19px;margin:6px 0}
.logbook .task small{display:block;font-family:Georgia;font-size:13px;opacity:.65}
.logbook .task.done{opacity:.4;text-decoration:line-through}
.logbook .task.urgent{color:#8e1c12}
.logbook .proof{margin-top:18px;font-family:var(--type);font-size:13px}
.logbook .card{background:#f4efe2;padding:16px 20px;font-family:var(--type);font-size:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.logbook .rule{margin:7px 0}
.logbook .rule.hand{font-family:var(--hand);font-size:17px;color:#2d2a6a}
.logbook .entry{margin:8px 0;font-family:var(--hand);font-size:17px}
.logbook .entry span{font-family:var(--type);font-size:11px;opacity:.6;margin-right:6px}
.logbook .entry.own{color:#1f2b62}
.logbook .entry.pressed{font-weight:bold;letter-spacing:.02em}
.logbook .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.logbook .thumb{background:#f3f0e6;padding:6px 6px 18px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);position:relative}
.logbook .thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.logbook .thumb.down{background:#222;color:#aaa;aspect-ratio:.83;display:flex;align-items:center;justify-content:center}
.logbook .thumb em{position:absolute;left:6px;bottom:2px;font-size:10px;font-family:var(--type)}
.mapsheet{max-width:min(1200px,94vw,calc((88vh - 70px) * 4 / 3));padding:14px}
.mapsheet canvas{width:100%;display:block}
.mapsheet .legend{font-family:var(--hand);text-align:center;margin-top:6px}
.chooser button{display:flex;align-items:center;gap:12px;width:100%;margin:6px 0;text-align:left}
.chooser img{width:64px;height:64px;object-fit:cover}
.settings label{display:block;margin:14px 0;font-size:15px}
.settings select,.settings input{margin-left:10px}

.title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d8d1c0;background:radial-gradient(ellipse at 50% 40%,#12151a,#030405 70%)}
.title h1{font-weight:normal;font-size:clamp(46px,8vw,96px);letter-spacing:.32em;margin:0 0 0 .32em;color:#e8dcc0;text-shadow:0 0 30px rgba(255,200,120,.12)}
.title .sub{font-family:var(--type);font-size:13px;letter-spacing:.14em;opacity:.7;margin:10px 0 34px}
.title .sub.big{font-family:Georgia;font-size:22px;letter-spacing:.02em;font-style:italic;opacity:.9;max-width:680px;text-align:center}
.title .detail{max-width:600px;text-align:center;opacity:.7;margin-bottom:26px;line-height:1.6}
.title .menu{display:flex;gap:14px}
.title .menu button{font:inherit;font-size:16px;letter-spacing:.1em;cursor:pointer;padding:10px 26px;background:transparent;color:#e8dcc0;border:1px solid rgba(232,220,192,.35)}
.title .menu button:hover{background:rgba(232,220,192,.08)}
.title .controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;max-width:720px;margin-top:36px;font-size:12px;opacity:.55}
.title .controls b{font-family:var(--type);margin-right:4px;color:#e9d6a4}
.title .warn{margin-top:26px;font-style:italic;opacity:.6}
.title .credit{position:absolute;bottom:14px;font-size:11px;opacity:.35}
.pause .menu{display:flex;flex-direction:column;gap:10px;max-width:300px}
/* ---------- loading: the boot poster in index.html (the title, before any script) + its bar, driven by ui.js U.loading.
   modes: boot (poster + title text) -> menu (the title menu is drawn over it: text hidden) -> scene (the live backdrop
   shows: poster fades) -> play (only the status line, and only while .on). Sits under #ui, over the canvas. */
#fl-boot{position:fixed;inset:0;z-index:5;pointer-events:none;color:#e9e1cf;transition:opacity 1.2s}
#fl-boot::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 72% 38%,#121820 0%,#070a0d 52%,#020304 100%);transition:opacity 1.6s ease}
#fl-boot>.t2-left{position:relative;transition:opacity .9s}
#fl-boot:not([data-mode=boot])>.t2-left{opacity:0}
#fl-boot[data-mode=scene]::before,#fl-boot[data-mode=play]::before{opacity:0}
#fl-boot.gone{opacity:0}
.fl-boot-status{position:absolute;right:4vw;top:4.5vh;width:min(360px,60vw);text-align:right;font-family:var(--type);font-size:11.5px;letter-spacing:.08em;color:#d6c7a3;opacity:.85;transition:opacity .6s;text-shadow:0 1px 3px #000}
.fl-boot-status .bar{height:2px;margin-top:7px;background:rgba(255,255,255,.12)}
.fl-boot-status .bar i{display:block;height:100%;width:0;background:#d9c28e;transition:width .3s}
.fl-boot-status .tip{margin-top:9px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:13px;letter-spacing:0;opacity:.6}
#fl-boot:not([data-mode=boot]) .tip{display:none}
#fl-boot[data-mode=play]:not(.on) .fl-boot-status,#fl-boot.idle .fl-boot-status{opacity:0}
#fl-boot.wait .fl-boot-status{opacity:1;color:#ffe3a8}

/* ---------- title v2: over the live scene ---------- */
.fl-modal.full.clear{background:transparent;backdrop-filter:none}
.t2{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;color:#e9e1cf;
  background:linear-gradient(90deg,rgba(3,4,6,.9) 0%,rgba(3,4,6,.72) 34%,rgba(3,4,6,.08) 62%,rgba(3,4,6,0) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 30%);
  animation:t2in 2.2s ease both}
@keyframes t2in{from{opacity:0}to{opacity:1}}
.t2-left{padding:11vh 0 0 7vw;max-width:560px}
.t2-kicker{font-family:var(--type);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#c9a86a;opacity:.85}
.t2-title{font-weight:400;font-size:clamp(64px,9.5vw,150px);line-height:.88;letter-spacing:.14em;margin:22px 0 0 -.06em;color:#f1e8d4;
  text-shadow:0 0 40px rgba(255,214,150,.12),0 2px 0 rgba(0,0,0,.4);animation:flick 9s infinite}
@keyframes flick{0%,86%,90%,100%{opacity:1}87%{opacity:.55}88.5%{opacity:.9}89%{opacity:.4}}
.t2-rule{width:84px;height:1px;background:#c9a86a;margin:28px 0 22px;opacity:.7}
.t2-tag{font-size:17px;line-height:1.6;color:#d8cfbd;opacity:.88;max-width:470px}
.t2-menu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:40px}
.t2-menu button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:9px 0 9px 22px;position:relative;color:#efe6d2}
.t2-menu button span{font-size:24px;letter-spacing:.04em}
.t2-menu button em{font-family:var(--type);font-style:normal;font-size:12px;letter-spacing:.08em;color:#b9ab8e;opacity:0;transform:translateX(-6px);transition:.25s}
.t2-menu button::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:#c9a86a;opacity:.4;transition:.25s}
.t2-menu button:hover span,.t2-menu button:focus-visible span{color:#ffe9b8;text-shadow:0 0 18px rgba(255,210,130,.35)}
.t2-menu button:hover em,.t2-menu button:focus-visible em{opacity:1;transform:none}
.t2-menu button:hover::before{width:16px;opacity:1;box-shadow:0 0 10px #ffcf7a}
.t2-foot{display:flex;gap:28px;align-items:center;padding:0 7vw 4vh;font-size:12.5px;color:#b3a891}
.t2-foot .t2-credit{margin-left:auto;opacity:.55}
.t2-sound{all:unset;cursor:pointer;font-family:var(--type);letter-spacing:.08em;color:#e8d8b0;border:1px solid rgba(232,216,176,.3);padding:6px 12px}
.t2-sound:hover{background:rgba(232,216,176,.08)}
.controls2{max-width:640px}
.controls2 .kgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:10px 0 18px}
.controls2 .kgrid div{display:flex;gap:12px;align-items:center;font-size:15px}
.controls2 kbd{min-width:62px;text-align:center;font-family:var(--type);font-size:12px;padding:4px 8px;border:1px solid rgba(40,30,20,.35);border-bottom-width:3px;background:#f4eee0}
.note2{font-size:14px;opacity:.8}
@media (max-width:760px){.t2-left{padding:8vh 6vw 0}.t2-foot{flex-wrap:wrap;gap:10px}}

#fl-clickres{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:rgba(3,4,6,.35);color:#efe6d2;font-size:24px;letter-spacing:.06em;text-shadow:0 2px 8px #000}
#fl-clickres.on{display:flex}
#fl-clickres small{font-size:13px;opacity:.65;letter-spacing:.02em}

.fl-binoc .brg { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); font: 600 15px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: rgba(235,240,230,.85); text-shadow: 0 1px 3px #000; }

/* hands (hotbar), body (temperature · water · food), the pack sheet */
#ui.nohud .fl-hot,#ui.nohud .fl-surv{opacity:0!important;pointer-events:none}
.fl-hot{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:5px;pointer-events:none;transition:opacity .3s}
.fl-hot .row{display:flex;gap:7px}
.fl-hot .slot{position:relative;width:64px;height:64px;border-radius:8px;background:rgba(12,12,10,.62);border:1px solid rgba(233,224,201,.34);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.fl-hot .slot.on{border-color:rgba(240,214,150,.9);background:rgba(40,34,24,.55);box-shadow:0 0 0 1px rgba(240,214,150,.35)}
.fl-hot .slot b{position:absolute;left:6px;top:4px;font:600 11px/1 var(--type);color:rgba(233,224,201,.8)}
.fl-hot .slot img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.fl-hot .slot span{font:11px/1.1 Georgia,serif;color:#e6e0d2;text-align:center;padding:0 4px}
.fl-hot .slot i{position:absolute;left:7px;right:7px;bottom:5px;height:3px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.fl-hot .slot i u{display:block;height:100%;background:#d8c38a}
.fl-hot .lbl{font:italic 16px/1.25 Georgia,serif;color:#ece5d4;text-shadow:0 1px 3px #000;min-height:17px}
.fl-hot .pk{font:11px/1 var(--type);letter-spacing:.08em;color:rgba(233,224,201,.75);text-shadow:0 1px 2px #000}
@keyframes fl-low{50%{opacity:.35}}
.paper.packsheet{width:min(640px,92vw)}
.packsheet h3{font:12px/1 var(--type);letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:16px 0 8px}
.packsheet .row{display:flex;flex-wrap:wrap;gap:10px}
.packsheet .cell{position:relative;width:104px;height:112px;border:1px solid rgba(35,32,26,.25);border-radius:6px;background:rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:12px/1.2 Georgia,serif;color:var(--ink);padding:6px}
.packsheet .cell:hover{background:rgba(255,255,255,.6);border-color:rgba(35,32,26,.5)}
.packsheet .cell.on{border-color:#8a2b1d;box-shadow:inset 0 0 0 1px rgba(138,43,29,.35)}
.packsheet .cell.empty{opacity:.45;cursor:default}
.packsheet .cell img{width:64px;height:64px;object-fit:contain}
.packsheet .cell b{position:absolute;left:7px;top:5px;font:600 10px/1 var(--type);opacity:.5}
.packsheet .off,.packsheet .tip{font-size:14px;opacity:.75;line-height:1.45}
@media (max-width:700px){.fl-hot .slot{width:48px;height:48px}.fl-hot .slot img{width:40px;height:40px}}

/* Settings → Keys */
.settings .keysbtn{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin:6px 0 10px;padding:8px 12px;font:inherit;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.18);border-radius:6px;cursor:pointer}
.settings .keysbtn em{font-size:12px;opacity:.65}
.paper.keys{max-width:560px;width:92vw}
.keys .kh{font-size:13px;opacity:.75;margin:0 0 8px}
.keys .klist{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;max-height:min(60vh,520px);overflow:auto;padding-right:4px}
.keys .klist button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px;font:14px/1.2 Georgia,serif;text-align:left;background:transparent;border:0;border-bottom:1px dashed rgba(0,0,0,.18);cursor:pointer;color:inherit}
.keys .klist button:hover{background:rgba(0,0,0,.05)}
.keys .klist kbd{font:600 12px/1 ui-monospace,Menlo,monospace;padding:4px 7px;border-radius:4px;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.2);white-space:nowrap}
.keys .klist button.wait kbd{background:#c9582f;color:#fff;border-color:#c9582f}
@media (max-width:560px){.keys .klist{grid-template-columns:1fr}}

.note.ask input{display:block;width:100%;margin:10px 0 12px;padding:9px 11px;font:22px/1.2 var(--hand,Georgia),serif;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.25);border-radius:6px;color:#2a2418}

/* the SOS guide on the searchlight: the code to send, your marks, the hold meter, on-target */
.fl-sl .sos{margin:10px 0 6px auto;width:260px;padding:10px 12px;border-radius:8px;background:rgba(10,10,8,.55);border:1px solid rgba(233,224,201,.2);text-align:center}
.fl-sl .sos .tgt{font:13px/1.2 var(--type);color:#d8cfb6;letter-spacing:.04em}.fl-sl .sos .tgt b{color:#f1dfae;letter-spacing:.15em}
.fl-sl .sos .slots{display:flex;justify-content:center;align-items:center;gap:6px;margin:9px 0}
.fl-sl .sos .slots i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.fl-sl .sos .slots i.dot{width:8px}.fl-sl .sos .slots i.dash{width:22px}
.fl-sl .sos .slots i.ok{background:#f1dfae;box-shadow:0 0 6px rgba(255,210,120,.7)}.fl-sl .sos .slots i.bad{background:#c9582f}
.fl-sl .sos .hold{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.fl-sl .sos .hold u{position:absolute;left:0;top:0;bottom:0;background:#d8c38a;transition:none}.fl-sl .sos .hold u.dash{background:#f0a45a}
.fl-sl .sos .hold b{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.6)}
.fl-sl .sos .hold em{position:absolute;inset:0;font:italic 11px/16px Georgia,serif;color:#1d1a14;mix-blend-mode:screen;color:#efe6cd}
.fl-sl .sos .aim{margin-top:7px;font:12px/1 var(--type);color:rgba(233,224,201,.6)}.fl-sl .sos .aim.on{color:#9fdc8c}

/* the body HUD: minimal. A temperature, four small rings; quiet (dimmed) when nothing needs you */
.fl-surv{position:fixed;left:22px;bottom:20px;display:none;pointer-events:none;color:#ece5d4;transition:opacity .8s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
.fl-surv.calm{opacity:.42}
.fl-surv svg{fill:currentColor}
.fl-surv .t{display:flex;align-items:baseline;gap:5px;margin:0 0 7px 2px;transition:color .6s}
.fl-surv .t .ti svg{width:14px;height:14px;transform:translateY(1px)}
.fl-surv .t b{font:600 19px/1 var(--type);letter-spacing:.02em}
.fl-surv .t small{font:11px/1 var(--type);opacity:.7;letter-spacing:.04em}
.fl-surv .t.cold{color:#a9cdea}.fl-surv .t.freeze{color:#cfe6ff;animation:fl-low 1.4s ease-in-out infinite}.fl-surv .t.warm{color:#f0c28a}.fl-surv .t.hot{color:#ff9a5a;animation:fl-low 1.4s ease-in-out infinite}
.fl-surv .t.snow svg,.fl-surv .t.cold .ti svg,.fl-surv .t.freeze .ti svg{fill:none;stroke:currentColor}
.fl-surv .rings{display:flex;gap:9px}
.fl-surv .ring{position:relative;width:30px;height:30px;transition:opacity .6s}
.fl-surv .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}
.fl-surv .ring .tr{stroke:rgba(236,229,212,.16);stroke-width:2.6}
.fl-surv .ring .ar{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;transition:stroke-dasharray .5s}
.fl-surv .ring .ic{position:absolute;inset:0;display:grid;place-items:center}
.fl-surv .ring .ic svg{width:13px;height:13px;position:static;transform:none;fill:currentColor}
.fl-surv .ring.w{color:#9cc8e0}.fl-surv .ring.f{color:#dcb680}.fl-surv .ring.h{color:#e0897a}.fl-surv .ring.s{color:#b9b1d8}
.fl-surv .ring.full .ar{opacity:.55}
.fl-surv .ring.low{color:#ff6a4d;animation:fl-low 1.1s ease-in-out infinite}
.fl-surv .ring.h .ic svg{animation:fl-beat 1s ease-out infinite;transform-origin:50% 60%}
.fl-surv .ring.h.racing{color:#ff7560}
.fl-surv .ring.h.racing .ic svg{width:15px;height:15px}
@keyframes fl-beat{0%{transform:scale(1)}8%{transform:scale(1.28)}18%{transform:scale(1.02)}30%{transform:scale(1.16)}48%,100%{transform:scale(1)}}
@media (max-width:700px){.fl-surv{left:14px;bottom:14px}.fl-surv .rings{gap:6px}}
/* what your body does to the screen (painted in overlays.js): under the HUD, over the world */
.fl-body{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fl-body>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:opacity,transform}

/* the epilogue: one paragraph at a time, then the last line on its own */
.title.end .epi{max-width:620px;margin:22px auto 0;text-align:left}
.title.end .epi p{font:17px/1.6 Georgia,serif;color:#d8d0bd;margin:0 0 14px;opacity:0;animation:fl-epi 1.6s ease-out both}
.title.end .epi p.last{margin-top:26px;font-style:italic;color:#f1e6c8;text-align:center}
@keyframes fl-epi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the heart rate, beside the heart ring */
.fl-surv .bpm{display:flex;flex-direction:column;justify-content:center;margin-left:-3px;color:#e0897a;line-height:1;min-width:30px}
.fl-surv .bpm b{font:600 15px/1 var(--type);letter-spacing:.02em}
.fl-surv .bpm small{font:9px/1 var(--type);opacity:.7;letter-spacing:.08em;margin-top:2px}
.fl-surv .bpm.racing{color:#ff7560}.fl-surv .bpm.pounding b{animation:fl-low .5s ease-in-out infinite}

.fl-sl .lampst{font:600 12px/1 var(--type);letter-spacing:.14em;margin:0 0 8px auto;width:max-content;padding:5px 9px;border-radius:5px;border:1px solid rgba(233,224,201,.25)}
.fl-sl .lampst.on{color:#f7e2a6;background:rgba(240,200,110,.14);box-shadow:0 0 12px rgba(255,215,130,.18)}.fl-sl .lampst.off{color:rgba(233,224,201,.55);background:rgba(10,10,8,.4)}

.fl-hot .slot em{position:absolute;right:4px;bottom:3px;font:600 12px/1 var(--type);font-style:normal;color:#f1e6c8;text-shadow:0 1px 2px #000}

.fl-surv .ring.w.sick{color:#8fcf5a}.fl-surv .ring.w.sick .ic svg{filter:drop-shadow(0 0 3px rgba(140,210,90,.6))}

.fl-charge{position:fixed;left:50%;top:calc(50% + 16px);width:54px;height:4px;margin-left:-27px;border-radius:2px;background:rgba(0,0,0,.45);opacity:0;transition:opacity .12s;pointer-events:none;z-index:21}
.fl-charge i{display:block;height:100%;width:0;border-radius:2px;background:#f1e6c8}

.fl-fade .card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#e9e0c9;font:italic 20px/1.4 Georgia,serif;text-align:center;animation:fl-epi 1.2s ease-out both}
.fl-fade .card b{font:600 13px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:#d8b36a}