/* 1uglysaint — DZIENNIK / PRZESŁUCHANIE
   One screen. A mask at the table under a swinging lamp; you ask, it answers in subtitles. */
.pg-dz{
  --k-bone:#ece5dc;--k-bone-2:#bdb3aa;--k-dim:#7d746d;--k-faint:#4a4441;
  --k-line:rgba(236,229,220,.11);--k-line-2:rgba(236,229,220,.24);--k-red:#d12b35;
  --gut:clamp(16px,2.8vw,44px);
  background:#030202}
.pg-dz ::selection{background:var(--k-red)}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--k-red);box-shadow:0 0 10px rgba(209,43,53,.85);animation:recb 1.4s steps(1) infinite}
@keyframes recb{55%{opacity:.2}}
@media (max-width:820px){body.pg.pg-dz{padding-bottom:0}}

.room{position:relative;height:100svh;min-height:620px;overflow:hidden;overflow:clip;background:#000;user-select:none;-webkit-user-select:none}
.room-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.room-still{position:absolute;left:61%;top:47%;height:min(62svh,640px);translate:-50% -50%;filter:brightness(.85)}
.room-anchor{position:absolute;left:61%;top:47%;height:min(66svh,700px);aspect-ratio:1;translate:-50% -50%;pointer-events:none}

/* ---------------- lamp ---------------- */
.lampx{position:absolute;z-index:2;left:var(--lx,61%);top:0;width:0;height:var(--ll,200px);pointer-events:none;transform:rotate(var(--la,0rad));transform-origin:0 0;will-change:transform}
.lx-cord{position:absolute;left:-1px;top:0;width:2px;height:100%;background:linear-gradient(180deg,#000,#2a2522 40%,#3b3430)}
.lx-head{position:absolute;left:0;top:100%;width:0;height:0}
.lx-shade{position:absolute;left:-38px;top:-6px;width:76px;height:40px;background:linear-gradient(180deg,#2b2623,#120f0e 70%);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);pointer-events:auto;cursor:grab}
.lx-shade::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#3a322c,#6a5a4b 50%,#3a322c)}
.lx-bulb{position:absolute;left:-14px;top:24px;width:28px;height:18px;border-radius:0 0 14px 14px;background:radial-gradient(ellipse at 50% 20%,#fff8e6,#ffd58a 45%,#b8742a 80%);box-shadow:0 0 18px 6px rgba(255,214,140,.55),0 0 60px 20px rgba(255,190,110,.18);opacity:calc(.25 + .75 * var(--lamp,1))}
.lx-cone{position:absolute;left:-46vh;top:30px;width:92vh;height:96vh;background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(255,226,170,.13),rgba(255,210,150,.045) 55%,transparent 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:calc(.2 + .8 * var(--lamp,1));pointer-events:none}

/* ---------------- OSD ---------------- */
.osd{position:absolute;z-index:3;left:var(--gut);right:var(--gut);top:90px;display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.2em;color:var(--k-bone-2);pointer-events:none;text-shadow:0 1px 0 #000}
.osd p{margin:0;display:flex;align-items:center;gap:10px}
.osd-sep{color:var(--k-faint)}
.osd-r{gap:24px!important;font-variant-numeric:tabular-nums}
.osd-r span:first-child{color:var(--k-bone)}

/* ---------------- questions ---------------- */
.side{position:absolute;z-index:3;left:var(--gut);top:clamp(118px,15.5svh,150px);width:min(430px,34vw)}
.side-k{margin:0 0 16px;font-size:10px;letter-spacing:.3em;color:var(--k-red)}
.side-k span{color:var(--k-faint)}
.side-h{margin:0;font:400 clamp(44px,min(6vw,10svh),96px)/.86 var(--serif);color:var(--k-bone);letter-spacing:-.01em}
.side-s{margin:18px 0 0;max-width:340px;font:italic 400 18px/1.4 var(--serif);color:var(--k-bone-2)}
.qs{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--k-line)}
.qs li{border-bottom:1px solid var(--k-line)}
.q{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:50px;padding:8px 6px 8px 0;border:0;background:transparent;color:var(--k-bone-2);text-align:left;cursor:pointer;transition:color .2s,padding .35s cubic-bezier(.2,.75,.15,1)}
.q::before{content:'';position:absolute;left:-10px;top:0;bottom:0;width:2px;background:var(--k-red);box-shadow:0 0 12px var(--k-red);transform:scaleY(0);transition:transform .3s}
.q .qn{font:11px var(--mono);letter-spacing:.12em;color:var(--k-faint)}
.q .qt{font:400 clamp(19px,1.5vw,23px)/1.15 var(--serif)}
.q .qs-s{font:9px var(--mono);letter-spacing:.2em;color:var(--k-faint)}
.q:hover{color:var(--k-bone);padding-left:6px}
.q[aria-pressed=true]{color:#fff}
.q[aria-pressed=true]::before{transform:scaleY(1)}
.q[aria-pressed=true] .qn{color:var(--k-red)}
.q.done .qs-s{color:var(--k-dim)}

/* ---------------- subtitles ---------------- */
.subs{position:absolute;z-index:4;left:61%;bottom:92px;width:min(700px,52vw);translate:-50% 0;text-align:center;pointer-events:none}
.sub-who{min-height:14px;margin:0 0 10px;font-size:10px;letter-spacing:.24em;color:#ff6a73;text-shadow:0 1px 2px #000}
.sub-t{margin:0;font:400 clamp(21px,1.75vw,28px)/1.55 var(--serif);color:#fff}
.sub-t span{padding:.08em .42em;background:rgba(0,0,0,.78);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sub-t span:empty{padding:0;background:none}
.sub-t span.typing::after{content:'▍';color:var(--k-red);margin-left:2px;animation:recb .7s steps(1) infinite}
.sub-note{margin:14px auto 0;max-width:520px;font:10px/1.6 var(--mono);letter-spacing:.14em;color:#ff8a90;text-transform:uppercase}
.sub-note::before{content:'[ ';color:var(--k-dim)}.sub-note::after{content:' ]';color:var(--k-dim)}
.sub-cta{display:flex;justify-content:center;gap:10px;margin-top:16px;pointer-events:auto}
.sub-cta a{display:inline-flex;align-items:center;height:46px;padding:0 20px;border:1px solid var(--k-bone);background:var(--k-bone);color:#0b0908;font:600 11px var(--mono);letter-spacing:.22em;text-decoration:none;opacity:0;transform:translateY(6px);animation:ctaIn .5s .1s forwards}
.sub-cta a+a{background:transparent;color:var(--k-bone)}
.sub-cta a:hover{background:#fff;color:#0b0908}
@keyframes ctaIn{to{opacity:1;transform:none}}
.subs.glitch .sub-t{animation:sglitch .5s steps(2)}
@keyframes sglitch{0%{transform:translate(4px,0);filter:blur(.6px)}25%{transform:translate(-5px,1px)}50%{transform:translate(2px,-1px);opacity:.5}75%{transform:translate(-2px,0)}100%{transform:none}}

/* ---------------- suspect ---------------- */
.suspect{position:absolute;z-index:3;left:var(--gut);bottom:30px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.2em;color:var(--k-dim)}
.suspect b{font:400 22px/1 var(--serif);letter-spacing:0;color:var(--k-bone);font-weight:normal}
.suspect button,.suspect a{height:36px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--k-line-2);background:rgba(0,0,0,.4);color:var(--k-bone-2);font:10px var(--mono);letter-spacing:.2em;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s}
.suspect button:hover,.suspect a:hover{border-color:var(--k-bone-2);color:var(--k-bone)}

.room.static .room-gl{display:none}

/* ---------------- tablet ---------------- */
@media (min-width:821px) and (max-width:1180px){
  .room-anchor{left:64%;height:min(60svh,56vw)}
  .room-still{left:64%}
  .subs{left:64%;width:min(520px,50vw)}
  .side{width:min(360px,36vw)}
  .side-s{display:none}
  .q{min-height:44px}
}
/* ---------------- phone ---------------- */
@media (max-width:820px){
  .room{min-height:600px}
  .room-anchor{left:50%;top:31%;height:min(36svh,96vw)}
  .room-still{left:50%;top:31%;height:min(34svh,90vw)}
  .osd{top:58px;font-size:8px;letter-spacing:.14em}
  .osd-r span:last-child{display:none}
  .osd-l .osd-sep:last-of-type,.osd-l .osd-cam{display:none}
  .side{left:12px;right:12px;top:auto;bottom:62px;width:auto}
  .side-k,.side-h,.side-s{display:none}
  .qs{display:grid;grid-template-columns:1fr;gap:6px;margin:0;border:0}
  .qs li{border:0}
  .q{grid-template-columns:22px minmax(0,1fr);min-height:44px;padding:6px 8px;border:1px solid var(--k-line-2);background:rgba(5,4,4,.75)}
  .q .qs-s{display:none}
  .q .qt{font-size:15px}
  .q::before{left:0}
  .q:hover{padding-left:8px}
  .subs{left:12px;right:12px;width:auto;translate:none;bottom:calc(var(--qh,150px) + 74px);top:auto}
  .sub-who{margin-bottom:6px}
  .sub-t{font-size:17px;line-height:1.5}
  .sub-note{font-size:8px}
  .sub-cta a{height:40px;padding:0 14px;font-size:9px}
  .suspect{left:12px;right:12px;bottom:auto;top:76px;gap:8px;font-size:8px}
  .suspect .sus-k{display:none}
  .suspect b{font-size:16px}
  .suspect button,.suspect a{height:28px;padding:0 8px;font-size:8px}
  .suspect a{margin-left:auto}
  .lx-shade{left:-28px;width:56px;height:30px}
  .lx-bulb{left:-10px;top:18px;width:20px;height:13px}
}
@media (prefers-reduced-motion:reduce){.rec,.sub-t span.typing::after{animation:none}}

/* desktop: keep the questions clear of the suspect row on short screens */
@media (min-width:821px) and (max-height:900px){
  .side-s{display:none}
  .qs{margin-top:22px}
  .q{min-height:44px;padding-top:6px;padding-bottom:6px}
  .q .qt{font-size:clamp(18px,1.4vw,21px)}
}
@media (min-width:821px) and (max-height:760px){
  .side-k{margin-bottom:10px}
  .side-h{font-size:clamp(40px,8.5svh,64px)}
  .qs{margin-top:16px}
  .q{min-height:38px}
  .q .qt{font-size:18px}
  .suspect{bottom:20px}
  .osd{top:80px}
}
@media (min-width:821px) and (max-height:640px){
  .side-h{display:none}
}
@media (min-width:1181px) and (max-width:1440px){.subs{width:min(640px,46vw)}}