/* ============================================================
   LIGHT — the only file that owns how a lamp looks.
   The red room is painted: a filament, the cone under it, the sheet
   returning light, the walls, the timer, the hand. Ultraviolet is a
   white core, a brightener ring, and a short violet falloff.
   Type keeps the materials lettering. On a dark field the face is a
   rake toward the nearest source, with a lip and a die, and a phosphor
   that stays close to the letter.
   ============================================================ */

/* ---------- red: the paint is the light; the ground only vignettes ---------- */
.pj-stage.is-safe .dk-red,
.dk-red{
  opacity:var(--warm, 0);
  mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 14% 11% at var(--bx, 58%) var(--by, 9%),
      rgba(255,214,196,.9) 0%, rgba(196,48,32,.45) 36%, rgba(0,0,0,0) 72%),
    radial-gradient(ellipse 46% 40% at var(--sx, 50%) var(--sy, 50%),
      rgba(176,48,36,.82) 0%, rgba(72,12,10,.88) 46%, #000 80%);
}
.dk-field{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
  mix-blend-mode:screen;
}
.pj-stage.is-safe .dk-glow,
.dk-glow, .dk-bloom, .dk-ember, .dk-shafts, .dk-lip, .dk-src, .dk-torch{
  opacity:0 !important; background:none !important;
}
.dk-bulb{
  box-shadow:
    0 0 calc(3px * var(--warm, 0)) 0 rgba(255,252,246, calc(.98 * var(--warm, 0))),
    0 0 calc(12px * var(--warm, 0)) calc(2px * var(--warm, 0)) rgba(255,150,80, calc(.7 * var(--warm, 0))),
    0 0 calc(28px * var(--warm, 0)) calc(4px * var(--warm, 0)) rgba(160,18,10, calc(.22 * var(--warm, 0)));
}

/* ---------- ultraviolet: a core, a brightener, a short falloff ---------- */
.uv-core, .uv-pen, .uv-air, .uv-wall{
  position:fixed; inset:0; pointer-events:none; opacity:0;
  transition:opacity .45s var(--ease, ease);
}
body.uv-on .uv-core, body.uv-on .uv-pen, body.uv-on .uv-air{ opacity:1; }
.uv-core{
  mix-blend-mode:screen;
  background:
    radial-gradient(circle calc(var(--ur, 150px) * .1) at var(--ux, 50%) var(--uy, 50%),
      rgba(255,255,255,.92) 0%, rgba(236,244,255,.4) 42%, rgba(180,160,255,0) 100%),
    radial-gradient(circle calc(var(--ur, 150px) * .42) at var(--ux, 50%) var(--uy, 50%),
      rgba(210,255,255,.28) 0%, rgba(170,150,255,.1) 48%, rgba(80,40,180,0) 100%);
}
.uv-pen{
  mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--ur, 150px) * .95) at var(--ux, 50%) var(--uy, 50%),
    rgba(186,140,255,.28) 0%, rgba(110,60,220,.1) 46%, rgba(40,10,120,0) 78%);
}
.uv-air{
  mix-blend-mode:screen;
  background:radial-gradient(circle calc(var(--ur, 150px) * 2.1) at var(--ux, 50%) var(--uy, 50%),
    rgba(70,30,160,.1) 0%, rgba(20,6,60,0) 70%);
}
.uv-veil{
  background:radial-gradient(circle calc(var(--ur, 150px) * 1.2) at var(--ux, 50%) var(--uy, 50%),
    rgba(8,2,24,0) 0%, rgba(8,2,22,.12) 38%, rgba(4,1,14,.62) 100%);
}

/* the ledger lamp is the same red: a cone from the hand, and the lamp on the wall */
.uv.is-dark .uv-core, .uv.is-dark .uv-pen, .uv.is-dark .uv-air, .uv.is-dark .uv-wall{ mix-blend-mode:screen; }
body.dr-on .uv-core{
  opacity:1;
  background:radial-gradient(circle calc(var(--ur, 160px) * .16) at var(--ux, 50%) var(--uy, 42%),
    rgba(255,248,240,.9) 0%, rgba(255,120,70,.28) 40%, rgba(180,20,12,0) 100%);
}
body.dr-on .uv-pen{
  opacity:1;
  background:radial-gradient(ellipse calc(var(--ur, 160px) * 1.05) calc(var(--ur, 160px) * 1.7) at var(--ux, 50%) calc(var(--uy, 42%) + 6%),
    rgba(255,64,36,.4) 0%, rgba(140,18,12,.14) 42%, rgba(40,4,4,0) 76%);
}
body.dr-on .uv-air{
  opacity:.8;
  background:
    radial-gradient(ellipse 40% 55% at var(--ux, 50%) calc(var(--uy, 42%) + 10%),
      rgba(160,24,16,.16) 0%, rgba(30,4,4,0) 72%),
    radial-gradient(ellipse 18% 28% at 86% 6%,
      rgba(255,90,48,.32) 0%, rgba(120,16,10,.08) 48%, rgba(20,2,2,0) 78%);
}
body.dr-on .uv-wall{
  opacity:1;
  background:radial-gradient(ellipse 9% 12% at 86% 5%,
    rgba(255,236,220,.7) 0%, rgba(255,80,40,.2) 36%, rgba(80,8,6,0) 74%);
}
.uv.is-dark .uv-veil{
  background:
    radial-gradient(ellipse 70% 80% at var(--ux, 50%) var(--uy, 46%), rgba(20,4,4,.04) 0%, rgba(8,0,0,.7) 68%, rgba(0,0,0,.88) 100%),
    radial-gradient(circle 220px at 86% 6%, rgba(28,4,4,.1) 0%, rgba(0,0,0,.72) 80%);
}
.uv-glow, .uv.is-dark .uv-glow, body.dr-on .uv-glow{ opacity:0 !important; background:none !important; }

/* ---------- the name, raked by whichever source is nearest ---------- */
body[data-safelight="on"] .pj-open .pj-name:has(.push-ink){
  background:none !important;
  filter:none !important;
  text-shadow:none !important;
}
body[data-safelight="on"] .pj-name .push-haze{ opacity:0 !important; }
body[data-safelight="on"] .pj-name .push-w{
  filter:none !important;
  text-shadow:
    calc(var(--lxs, -.2) * 1.35px) calc(var(--lys, -.9) * 1.35px) 0 rgba(255,248,242, calc(.28 + var(--lit, .55) * .7)),
    calc(var(--lxs, -.2) * -.5px) calc(var(--lys, -.9) * -.38px) 0 rgba(16,2,0,.78),
    0 1px 0 rgba(8,0,0,.55),
    0 0 calc(2px + var(--lit, .55) * 7px) rgba(255,64,32, calc(var(--lit, .55) * .38)) !important;
}
body[data-safelight="on"] .pj-name .push-ink{
  background-image:linear-gradient(
    calc(var(--ldeg, 12) * 1deg),
    color-mix(in srgb, #E7B8A8 calc(var(--lit, .6) * 55%), #3A100C) 0%,
    color-mix(in srgb, #FFF6F0 calc(var(--lit, .6) * 100%), #6E2C22) 100%) !important;
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:none !important;
}
body[data-safelight="on"] .pj-numeral span{
  background-image:linear-gradient(
    calc(var(--ldeg, 12) * 1deg),
    color-mix(in srgb, #F3DDD2 calc((.5 + var(--lit, .5) * .5) * 100%), #5C2820) 0%,
    #FFF8F3 70%) !important;
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:none !important;
  -webkit-text-stroke:.5px rgba(40,8,6, calc(.35 - var(--lit, .5) * .1));
  text-shadow:
    calc(var(--lxs, -.15) * 1.4px) calc(var(--lys, -.8) * 1.4px) 0 rgba(255,236,220, calc(.35 + var(--lit, .5) * .55)),
    calc(var(--lxs, -.15) * -.6px) calc(var(--lys, -.8) * -.4px) 0 rgba(20,0,0,.75),
    0 1px 0 rgba(0,0,0,.55),
    0 0 calc(2px + var(--lit, .5) * 6px) rgba(255,60,30, calc(var(--lit, .5) * .35)) !important;
}

/* the sentence: ink that warms, a lip, a die. the phosphor stays on the letter */
body[data-safelight="on"] .pj-say-b .w,
body[data-safelight="on"] .pj-perk-chip,
body[data-safelight="on"] .pj-perk-k{
  color:color-mix(in srgb, #FFF1E8 calc(var(--lit, .45) * 100%), #4E1814) !important;
  -webkit-text-fill-color:color-mix(in srgb, #FFF1E8 calc(var(--lit, .45) * 100%), #4E1814) !important;
  background:none !important;
  filter:none !important;
  -webkit-text-stroke:.35px rgba(28,0,0, calc(.4 - var(--lit, .45) * .22));
  text-shadow:
    calc(var(--lxs, -.35) * 1.15px) calc(var(--lys, -.8) * 1.15px) 0 rgba(255,244,236, calc(.22 + var(--lit, .45) * .62)),
    calc(var(--lxs, -.35) * -.55px) calc(var(--lys, -.8) * -.4px) 0 rgba(18,0,0,.7),
    0 1px .2px rgba(8,0,0,.5),
    0 0 calc(1px + var(--lit, .45) * 6px) rgba(255,42,22, calc(var(--lit, .45) * .42)) !important;
}

/* ledger and library: the materials letterpress, the lip turned */
body.dr-on .lib-name,
body.dr-on .lib-t,
body.dr-on .lg-title,
body.dr-on .lg-title .w{
  color:color-mix(in srgb, #FFE4D6 calc(var(--lit, .55) * 100%), #5C1610) !important;
  -webkit-text-fill-color:color-mix(in srgb, #FFE4D6 calc(var(--lit, .55) * 100%), #5C1610) !important;
  background:none !important;
  filter:none !important;
  -webkit-text-stroke:.4px rgba(40,0,0, calc(.45 - var(--lit, .55) * .2));
  text-shadow:
    calc(var(--lxs, -.4) * 1.2px) calc(var(--lys, -.8) * 1.2px) 0 rgba(255,236,220, calc(.2 + var(--lit, .55) * .55)),
    calc(var(--lxs, -.4) * -.6px) calc(var(--lys, -.8) * -.45px) 0 rgba(24,0,0,.62),
    0 1px .25px rgba(8,0,0,.45),
    0 0 calc(2px + var(--lit, .55) * 8px) rgba(255,42,22, calc(var(--lit, .55) * .4)) !important;
}
body.dr-on .lr-sheet .lr-let,
body.dr-on .lr-sheet .lr-title .cp-ch,
body.dr-on .lr-sheet .display .cp-ch,
body[data-safelight="on"] .lr-sheet .lr-let{
  color:color-mix(in srgb, #8A2820 calc(var(--lit, .35) * 80%), #141210);
  -webkit-text-fill-color:color-mix(in srgb, #8A2820 calc(var(--lit, .35) * 80%), #141210);
  background:none;
  filter:none;
  -webkit-text-stroke:0;
  text-shadow:
    calc(var(--lxs, -.25) * 1.15px) calc(var(--lys, -.85) * 1.15px) 0 rgba(255,214,196, calc(.3 + var(--lit, .35) * .55)),
    0 .7px 0 rgba(36,6,4,.58),
    0 1.25px .22px rgba(0,0,0,.3),
    0 0 calc(2px + var(--lit, .35) * 10px) rgba(210,32,22, calc(var(--lit, .35) * .55));
}
body.dr-on .lr-play-k{
  color:color-mix(in srgb, #9A3028 calc(var(--lit, .4) * 100%), #1A1814);
  filter:none;
  text-shadow:
    calc(var(--lxs, -.3) * 1px) calc(var(--lys, -.8) * 1px) 0 rgba(255,220,200, calc(.35 + var(--lit, .4) * .4)),
    0 .6px 0 rgba(40,8,6,.4);
}

/* ---------- ultraviolet on the letters: brightener, not a violet pill ---------- */
body[data-uv="on"] .pj-open .pj-name:has(.push-ink),
body[data-plight="uv"] .pj-open .pj-name:has(.push-ink),
body.uv-on .pj-name:has(.push-ink){
  background:none !important;
  filter:none !important;
  text-shadow:none !important;
}
body[data-uv="on"] .pj-name .push-haze,
body[data-plight="uv"] .pj-name .push-haze,
body.uv-on .pj-name .push-haze{ opacity:0 !important; }
body[data-uv="on"] .pj-name .push-w,
body[data-plight="uv"] .pj-name .push-w,
body.uv-on .pj-name .push-w{
  filter:none !important;
  text-shadow:
    calc(var(--uxs, 0) * 1.2px) calc(var(--uys, -.7) * 1.2px) 0 rgba(236,255,255, calc(.16 + var(--uvl, .25) * .75)),
    calc(var(--uxs, 0) * -.4px) calc(var(--uys, -.7) * -.3px) 0 rgba(16,0,32,.6),
    0 1px 0 rgba(8,0,16,.4),
    0 0 calc(2px + var(--uvl, .25) * 8px) rgba(150,100,255, calc(var(--uvl, .25) * .45)) !important;
}
body[data-uv="on"] .pj-name .push-ink,
body[data-plight="uv"] .pj-name .push-ink,
body.uv-on .pj-name .push-ink{
  background-image:linear-gradient(
    calc(var(--udeg, 0) * 1deg),
    #1A1028 0%,
    #6A5A88 22%,
    color-mix(in srgb, #F6F4FF calc(var(--uvl, .3) * 100%), #C8B8E8) 48%,
    #F4FBFF 64%,
    #9A88C0 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:none !important;
}
body[data-uv="on"] .pj-numeral span,
body[data-plight="uv"] .pj-numeral span{
  background-image:linear-gradient(calc(var(--udeg, 0) * 1deg), #140C20 0%, #D8D0EE 55%, #2A1838 100%) !important;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  filter:none !important;
}
body[data-uv="on"] .pj-say-b .w,
body[data-plight="uv"] .pj-say-b .w,
body.uv-on .lib-name,
body.uv-on .lib-t,
body.uv-on .vd-k{
  color:color-mix(in srgb, #F4F0FF calc(var(--uvl, .2) * 100%), #C8B8DC) !important;
  -webkit-text-fill-color:color-mix(in srgb, #F6F2FF calc(var(--uvl, .2) * 100%), #D4C8E4) !important;
  background:none !important;
  filter:none !important;
  text-shadow:
    calc(var(--uxs, 0) * 1.05px) calc(var(--uys, -.6) * 1.05px) 0 rgba(230,255,255, calc(.12 + var(--uvl, .2) * .7)),
    0 .6px 0 rgba(16,0,32,.45),
    0 1px .2px rgba(0,0,12,.3),
    0 0 calc(2px + var(--uvl, .2) * 8px) rgba(140,90,255, calc(var(--uvl, .2) * .5)) !important;
  -webkit-text-stroke:.3px rgba(24,0,48, calc(.2 + var(--uvl, 0) * .15));
}
body.uv-on .lr-sheet .lr-let,
body[data-uv="on"] .lr-sheet .lr-let,
body.uv-on .lr-sheet .display .cp-ch{
  color:#141210;
  -webkit-text-fill-color:#141210;
  text-shadow:
    calc(var(--uxs, 0) * 1px) calc(var(--uys, -.7) * 1px) 0 rgba(220,255,255, calc(var(--uvl, 0) * .85)),
    0 .7px 0 rgba(0,0,0,.5),
    0 1.3px .22px rgba(0,0,0,.22),
    0 0 calc(var(--uvl, 0) * 12px) rgba(150,110,255, calc(var(--uvl, 0) * .7));
}