/* ---------- szafka operatora ---------- */

/* górny pasek: sekrety, szafka i rejestr w jednej grupie na środku */
.tb-mid { display: flex; align-items: center; gap: 12px; margin: 0 auto; }
.tb-mid .sec-btn { margin: 0; }
.tb-inv .inv-slots { display: flex; gap: 5px; }
.tb-inv .inv-slot { width: 34px; height: 34px; aspect-ratio: 1; flex: none; }
.tb-inv .inv-slot svg { width: 18px; height: 18px; }
.inv-h { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 10px; letter-spacing: .16em; color: var(--text-mute); }
.inv-h b { font-weight: 400; color: var(--amber); }
.inv-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.inv-slot { position: relative; display: flex; align-items: center; justify-content: center; height: 46px; padding: 0; background: #060808; border: 1px solid var(--line-2); color: var(--accent); cursor: pointer; }
.inv-slot:hover { border-color: var(--amber); color: #f0d28a; }
.inv-slot.empty { border-style: dashed; opacity: .5; cursor: default; }
.inv-slot svg { width: 24px; height: 24px; }
.inv-slot:not(.empty) { overflow: hidden; }
.inv-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inv-slot.cursed { border-color: rgba(194,29,36,.6); color: #ff8a8f; box-shadow: inset 0 0 10px rgba(194,29,36,.25); }
.inv-slot.fresh { animation: invNew 1.1s ease 2; }
@keyframes invNew { 50% { border-color: var(--amber); box-shadow: 0 0 14px rgba(214,160,44,.6); } }

/* rejestr komunikatów: ikona w górnym pasku z plakietką nieprzeczytanych */
.tb-log { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; background: transparent; border: 1px solid var(--line-2); color: var(--text-dim); cursor: pointer; transition: border-color .2s, color .2s; }
.tb-log:hover { border-color: var(--amber); color: #f0d28a; }
.log-btn svg { width: 17px; height: 17px; }
.log-btn b, .bag-btn b { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; letter-spacing: 0; text-align: center; }
.log-btn.fresh, .bag-btn.fresh { animation: invNew 1.1s ease 2; }

/* torba w górnym pasku: tylko na telefonie, bo na komputerze szafka stoi w panelu bocznym */
.status .bag-btn { position: relative; display: none; }
@media (max-width: 860px) {
  .status .bag-btn:not([hidden]) { display: inline-flex; }
}
.inv-drawer { position: fixed; inset: 0; z-index: 690; display: flex; align-items: flex-end; background: rgba(0,0,0,.6); animation: lvupIn .25s ease; }
.inv-sheet { width: 100%; padding: 14px 16px 22px; border-top: 1px solid var(--amber); background: #07090a; box-shadow: 0 -10px 40px rgba(0,0,0,.7); }
.inv-sheet .inv-slot { height: 58px; }

/* okno przedmiotu */
.modal.inv-item { width: min(420px, 100%); }
.inv-big { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; overflow: hidden; margin: 0 auto 12px; border: 1px solid var(--amber); color: #f0d28a; background: rgba(214,160,44,.07); box-shadow: 0 0 18px rgba(214,160,44,.2); }
.inv-big svg { width: 60px; height: 60px; }
.inv-big img { display: block; width: 100%; height: 100%; }
.modal.inv-item.cursed { border-color: var(--red); box-shadow: 0 0 60px var(--red-glow); }
.modal.inv-item.cursed .inv-big { border-color: var(--red); color: #ff8a8f; background: rgba(194,29,36,.08); }
.inv-tag { margin-bottom: 6px; font-size: 10px; letter-spacing: .2em; color: var(--text-mute); }
.modal.inv-item h2 { font-size: 20px; color: var(--accent); }
.modal p.inv-curse { padding: 8px 10px; border: 1px solid rgba(194,29,36,.5); background: rgba(194,29,36,.07); color: #ff9a9a; }
.modal.inv-item .btn:disabled { opacity: .4; cursor: not-allowed; }

/* rejestr komunikatów */
.modal.notes-log { width: min(560px, 100%); text-align: left; }
.modal.notes-log h2 { font-size: 20px; color: var(--accent); }
.note-list { max-height: 55vh; margin: 10px 0 4px; overflow-y: auto; }
.note-row { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line-2); border-left: 3px solid var(--line-2); background: #080a0b; }
.note-row.unread { border-left-color: var(--amber); }
.note-meta { display: flex; gap: 10px; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute); }
.note-meta b { font-weight: 400; color: var(--amber); letter-spacing: .14em; }
.modal .note-row p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.note-empty { color: var(--text-mute); }
.modal.notes-log .row { justify-content: flex-end; }

/* ekran awansu: nowa funkcja terminala */
.lvup-perk { position: relative; display: inline-block; margin-top: 12px; padding: 4px 10px; border: 1px dashed var(--lv); font-size: 10.5px; letter-spacing: .16em; color: var(--lv); opacity: 0; transition: opacity .5s; }
.lvup.s5 .lvup-perk { opacity: 1; }

/* otwór w winiecie nad szafką; szafki nie da się podnieść nad winietę, bo przykrywałaby okna (700) */
.fx-vignette.hole {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: var(--iw) var(--ih), 100% 100%;
  -webkit-mask-position: var(--ix) var(--iy), 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: var(--iw) var(--ih), 100% 100%;
  mask-position: var(--ix) var(--iy), 0 0;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

/* na telefonie szafka otwiera się z górnego paska, w menu byłaby dubletem */
@media (max-width: 860px) {
  .inv { display: none; }
}

/* ---------- lampa UV ---------- */

/* światło za kursorem; pod oknami (700), żeby nie zasłaniało dialogów */
.uvlamp { position: fixed; inset: 0; z-index: 650; pointer-events: none;
  background: radial-gradient(circle 190px at var(--x, 50%) var(--y, 50%), rgba(170,110,255,.2) 0, rgba(120,60,240,.12) 40%, rgba(6,3,16,.66) 100%); }
.uvlamp::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(190,140,255,.22), transparent 100%); }

/* napisy widoczne tylko w świetle lampy */
.uvink { opacity: 0; color: #d9ff8a; text-shadow: 0 0 6px rgba(200,255,106,.8), 0 0 16px rgba(155,107,255,.7); pointer-events: none; user-select: none; }
body.uv-on .uvink { opacity: 1;
  -webkit-mask-image: radial-gradient(circle 160px at var(--ux, -999px) var(--uy, -999px), #000 0, rgba(0,0,0,.6) 55%, transparent 100%);
  mask-image: radial-gradient(circle 160px at var(--ux, -999px) var(--uy, -999px), #000 0, rgba(0,0,0,.6) 55%, transparent 100%); }

.inv-slot.on { border-color: #9b6bff; box-shadow: 0 0 12px rgba(155,107,255,.6), inset 0 0 10px rgba(155,107,255,.35); }

/* szafka sprzętowa śluzy w SCP-002 */
.lock002 { position: relative; width: 200px; max-width: 100%; aspect-ratio: 1; margin: 6px auto 12px; border: 1px solid var(--line-2); background: #07060a; overflow: hidden; }
.lock002 img { display: block; width: 100%; height: 100%; transition: opacity .6s, filter .6s; }
.lock002.empty img { opacity: .12; filter: grayscale(1); }
.lock002.empty::after { content: "HAK PUSTY"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: .24em; color: var(--text-mute); }
.lock002 .uvink { position: absolute; left: 8px; right: 8px; bottom: 14px; font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: 14px; text-align: center; transform: rotate(-4deg); }
.lock002.breathe002 { animation: breathe002 .8s ease-in-out 2; }
@keyframes breathe002 { 50% { transform: scale(1.04); border-color: #7a2a2a; box-shadow: 0 0 22px rgba(140,30,30,.5), inset 0 0 30px rgba(120,20,20,.6); } }
.w002 .row2 { justify-content: center; }

/* szybka szafka pod prawym przyciskiem myszy; nad lampą UV (650), pod oknami (700) */
.qinv { position: fixed; z-index: 695; width: 250px; padding: 10px 10px 8px; border: 1px solid var(--amber); background: rgba(7,9,10,.97); box-shadow: 0 12px 40px rgba(0,0,0,.8), 0 0 18px rgba(214,160,44,.15); animation: lvupIn .15s ease; }
.qinv .inv-slot { height: 54px; }
.qinv-f { margin-top: 7px; font-size: 9.5px; letter-spacing: .12em; color: var(--text-mute); text-align: center; }

/* ---------- sekrety archiwum ---------- */

/* licznik zastępuje motto; motto wraca tylko na czas efektów SCP-2000 i SCP-5000, które je podmieniają */
.motto.off:not(.lz2000m):not(.why5000) { display: none; }
.motto.lz2000m ~ .tb-mid .sec-btn, .motto.why5000 ~ .tb-mid .sec-btn { display: none; }
.sec-btn { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto; padding: 6px 14px; background: transparent; border: 1px solid var(--line-2); color: var(--text-dim); font-family: var(--head); font-size: 12px; letter-spacing: .28em; cursor: pointer; transition: border-color .2s, color .2s; }
.sec-btn:hover { border-color: var(--amber); color: #f0d28a; }
.sec-btn svg { width: 17px; height: 17px; color: var(--amber); }
.sec-btn .sec-n { color: var(--amber); letter-spacing: .12em; }
.sec-btn.got { animation: secGot 1s ease; }
@keyframes secGot { 30% { border-color: var(--amber); color: #fff3c8; box-shadow: 0 0 24px rgba(214,160,44,.7), inset 0 0 12px rgba(214,160,44,.3); transform: scale(1.08); } }
@media (max-width: 860px) {
  .tb-mid { gap: 6px; margin: 0 4px 0 auto; }
  .tb-log { width: 30px; height: 30px; }
  .sec-btn { flex: none; margin: 0; padding: 0 6px; height: 30px; gap: 4px; white-space: nowrap; letter-spacing: 0; word-spacing: -3px; font-size: 11px; }
  .sec-btn svg { width: 14px; height: 14px; }
  .sec-btn .sec-n { letter-spacing: 0; }
  .sec-btn .sec-l { display: none; }
}

/* karta odkrycia: wjeżdża u góry, po chwili odlatuje do licznika (animate() w secrets.js) */
.ach { position: fixed; top: 86px; left: 50%; z-index: 760; display: flex; align-items: center; gap: 14px; min-width: 300px; max-width: calc(100vw - 32px); padding: 10px 22px 10px 10px; border: 1px solid var(--amber); background: rgba(10,9,6,.96); box-shadow: 0 10px 40px rgba(0,0,0,.8), 0 0 30px rgba(214,160,44,.3); transform: translate(-50%, 0); animation: achIn .5s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.ach img { width: 64px; height: 64px; flex: none; animation: achSpin .9s ease-out; }
.ach-t { font-size: 10px; letter-spacing: .3em; color: var(--amber); }
.ach-n { margin-top: 3px; font-family: var(--head); font-size: 17px; letter-spacing: .06em; color: #f4efe0; }
.ach::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,230,160,.25) 50%, transparent 70%); background-size: 250% 100%; animation: achShine 1.2s .4s ease-out both; }
.ach.dark { border-color: var(--red); box-shadow: 0 10px 40px rgba(0,0,0,.8), 0 0 30px var(--red-glow); }
.ach.dark .ach-t { color: #ff6a6a; }
@keyframes achIn { from { transform: translate(-50%, -40px) scale(.8); opacity: 0; } }
@keyframes achSpin { from { transform: scale(.3) rotate(-160deg); opacity: 0; } }
@keyframes achShine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
@media (max-width: 860px) { .ach { top: 70px; min-width: 0; } }

/* lista sekretów */
.modal.sec-log { width: min(640px, 100%); text-align: left; }
.modal.sec-log h2 { font-size: 20px; color: var(--accent); }
.sec-prog { height: 4px; margin: 10px 0 6px; background: var(--line-2); }
.sec-prog span { display: block; height: 100%; background: var(--amber); box-shadow: 0 0 10px rgba(214,160,44,.6); }
.sec-cnt { font-size: 10.5px; letter-spacing: .2em; color: var(--text-mute); }
.sec-list { max-height: 58vh; margin: 12px 0 4px; overflow-y: auto; }
.sec-row { display: flex; gap: 12px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line-2); background: #080a0b; }
.sec-row.on { border-color: rgba(214,160,44,.45); }
.sec-row.on.dark { border-color: rgba(194,29,36,.5); }
.sec-img { flex: none; width: 56px; height: 56px; }
.sec-img img { width: 100%; height: 100%; }
.sec-row:not(.on) .sec-img img { filter: grayscale(1) brightness(.3) blur(1.5px); }
.sec-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.sec-h b { color: var(--accent); font-weight: 600; }
.sec-row:not(.on) .sec-h b { color: var(--text-mute); }
.sec-h span { flex: none; font-size: 10px; letter-spacing: .14em; color: var(--text-mute); }
.sec-row.on .sec-h span { color: var(--amber); }
.modal .sec-row p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.modal .sec-row:not(.on) p { font-style: italic; color: var(--text-mute); }
.modal.sec-log .row { justify-content: flex-end; }

/* ---------- zagadka 2 -> 3: „Fotel 3-117" (SCP-002) ---------- */

/* ślady w ultrafiolecie na rycinie; pozycje w % ryciny 400x500 */
.uv002fig { position: absolute; inset: 0; pointer-events: none; }
.uv002fig .uvink { position: absolute; }
.emb002 { left: 33.75%; top: 44%; transform: translate(-50%, -50%) rotate(-3deg); font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: clamp(14px, 3.4vw, 22px); letter-spacing: .08em; white-space: nowrap; }
.hand002 { width: 5%; transform: translate(-50%, -50%) rotate(var(--r)); color: #d9ff8a; }
.hand002 svg { display: block; width: 100%; }
.card002 { left: 37.5%; top: 50.5%; width: 12%; aspect-ratio: 1.6; padding: 0; border: 0; background: none; transform: translate(-50%, -50%) rotate(-14deg); }
.card002 i { display: block; width: 100%; height: 100%; border: 2px solid #d9ff8a; border-radius: 3px; background: linear-gradient(135deg, rgba(217,255,138,.35), rgba(155,107,255,.35)); box-shadow: 0 0 14px rgba(200,255,106,.8); }
body.uv-on .uv002fig .card002 { pointer-events: auto; cursor: pointer; }
body.uv-on .uv002fig .card002:hover i { background: rgba(217,255,138,.6); }

/* „JESTEŚ SAM?" */
.ask002 { position: fixed; inset: 0; z-index: 805; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(40,4,4,.8), rgba(0,0,0,.96)); animation: ask002In 1.2s ease; }
.ask-box { text-align: center; }
.ask-q { font-family: var(--head); font-size: clamp(34px, 8vw, 72px); letter-spacing: .14em; color: #e8d8c8; text-shadow: 0 0 24px rgba(194,29,36,.7); animation: ask002Q 3s ease-in-out infinite; }
.ask002 .row { justify-content: center; gap: 18px; margin-top: 28px; }
.ask002 .btn { min-width: 110px; }
@keyframes ask002In { from { opacity: 0; } }
@keyframes ask002Q { 50% { opacity: .75; letter-spacing: .18em; } }

/* ---------- zagadka 2 -> 3: „Paragon z jutra" (SCP-261) ---------- */

body.dark261 #app { filter: brightness(.22) saturate(.4); transition: filter .8s; }
.card261 { border-color: var(--red) !important; }
.card261 .btn { display: block; margin-top: 8px; }
.modal.inv-item code { display: block; margin-top: 4px; padding: 10px 12px; background: #efeadb; color: #2a2a2a; font-size: 11.5px; line-height: 1.6; text-align: left; white-space: pre-wrap; }

/* ---------- alarm incydentu 999-131 ---------- */

.alarm999 { position: fixed; inset: 0; z-index: 820; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40,0,0,.86); animation: al999Bg .9s steps(1) infinite; }
.al-strip { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; padding: 6px 0; background: var(--red); color: #fff; font-family: var(--head); font-size: 13px; letter-spacing: .5em; white-space: nowrap; animation: al999Strip 6s linear infinite; }
.al-box { position: relative; width: min(620px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; padding: 22px 24px; border: 2px solid var(--red); background: #0c0203; box-shadow: 0 0 80px rgba(194,29,36,.7); text-align: center; animation: al999Box .5s cubic-bezier(.2,1.5,.4,1); }
.al-tag { font-size: 10px; letter-spacing: .24em; color: #ff8a8a; }
.al-box h2 { margin: 10px 0 4px; font-family: var(--head); font-size: clamp(26px, 6vw, 44px); letter-spacing: .08em; color: #fff; text-shadow: 0 0 22px #ff1f2a; animation: al999Blink 1s steps(1) infinite; }
.al-sub { margin-bottom: 14px; font-size: 12px; letter-spacing: .3em; color: #ffd0d2; }
.al-box p { margin: 8px 0; font-size: 14px; line-height: 1.55; color: #e8d0d0; }
.al-box p.al-big { margin: 14px 0; padding: 10px; border: 1px solid var(--red); background: rgba(194,29,36,.18); font-family: var(--head); font-size: clamp(16px, 3.4vw, 22px); letter-spacing: .06em; color: #fff; }
.al-box p.al-who { font-size: 12px; color: #b08a8a; }
.al-box .btn { margin-top: 12px; }
@keyframes al999Bg { 50% { background: rgba(90,0,0,.9); } }
@keyframes al999Strip { from { text-indent: 0; } to { text-indent: -50%; } }
@keyframes al999Box { from { transform: scale(.7); opacity: 0; } }
@keyframes al999Blink { 50% { color: #ff4a4a; } }
body.calm .alarm999, body.calm .al-box h2 { animation: none; }

/* ---------- nowy komunikat: pełna treść na ekranie ---------- */

/* pod oknami (700), żeby dialogi otwierały się nad nią; nad lampą UV (650) */
.note-pop { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 92px); left: 50%; z-index: 690; width: min(470px, calc(100vw - 32px)); padding: 14px 16px 12px; border: 1px solid var(--amber); border-left-width: 3px; background: rgba(8,9,8,.97); box-shadow: 0 14px 44px rgba(0,0,0,.85), 0 0 24px rgba(214,160,44,.18); transform: translateX(-50%); animation: npIn .35s cubic-bezier(.2,1.3,.4,1); }
.note-pop.red { border-color: var(--red); box-shadow: 0 14px 44px rgba(0,0,0,.85), 0 0 26px var(--red-glow); }
.np-tag { font-size: 10px; letter-spacing: .22em; color: var(--text-mute); }
.np-meta { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 8px; font-size: 11px; letter-spacing: .12em; }
.np-meta b { font-weight: 400; color: var(--amber); letter-spacing: .16em; }
.note-pop.red .np-meta b { color: #ff7a7f; }
.np-meta span { flex: none; color: var(--text-mute); }
.note-pop p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.np-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.np-row .btn { margin-top: 0; padding: 7px 14px; font-size: 11px; }
.note-pop.out { opacity: 0; transform: translate(-50%, -12px); transition: opacity .25s, transform .25s; }
@keyframes npIn { from { opacity: 0; transform: translate(-50%, -24px); } }
@media (max-width: 860px) { .note-pop { top: calc(env(safe-area-inset-top, 0px) + 70px); } }

/* górny pasek z szafką jest szerszy: napis „ŁĄCZE SZYFROWANE" ustępuje miejsca, żeby podpis marki mieścił się w jednym wierszu */
.brand-sub { white-space: nowrap; }
@media (max-width: 1440px) { .status .st-line:first-child { display: none; } }
@media (max-width: 1180px) { .brand-sub { display: none; } }
/* wąski telefon: samo logo zamiast napisu, żeby sekrety, rejestr, torba, dźwięk i poziom zmieściły się w jednym wierszu */
@media (max-width: 480px) { .brand-txt { display: none; } }
/* wąski komputer i tablet poziomo: skróty jak na telefonie, żeby pasek nie wychodził poza ekran */
@media (max-width: 1000px) {
  .topbar { gap: 14px; }
  .sec-btn .sec-l { display: none; }
  .clearance .cl-l { display: none; }
  .clearance .cl-s { display: inline; }
}

/* ---------- zwijane filtry i wyszukiwarka w panelu bocznym (domyślnie zwinięte) ---------- */

.flt { border-bottom: 1px solid var(--line); }
.flt .filters { border-bottom: 0; }
.flt-box .search { display: block; box-sizing: border-box; width: calc(100% - 32px); margin-top: 0; }
.flt-tog { display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); margin: 12px 16px; padding: 9px 12px; background: #050606; border: 1px solid var(--line-2); color: var(--text-dim); font: inherit; font-size: 11px; letter-spacing: .16em; text-align: left; cursor: pointer; transition: border-color .2s, color .2s; }
.flt-tog:hover, .flt-tog.on { border-color: var(--amber); color: #f0d28a; }
.flt-tog span { flex: 1; }
.flt-tog b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #0a0c0d; font-size: 10.5px; font-weight: 700; line-height: 18px; letter-spacing: 0; text-align: center; }
.flt-ar { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.flt-tog.on .flt-ar { transform: translateY(2px) rotate(-135deg); }
.flt-box:not([hidden]) { animation: fltIn .2s ease; }
@keyframes fltIn { from { opacity: 0; transform: translateY(-6px); } }

/* twarz w pustym pasie na prawo od pliku (tylko szeroki ekran z myszą): widać ją wyłącznie w świetle lampy UV,
   pozycję i rozmiar ustawia items.js. Skrawek w świetle odpala jumpscare .uvscare: całe światło gaśnie
   (czerń nad wszystkim, także nad lampą i winietą), twarz na cały ekran przez sekundę */
.uvface { position: fixed; z-index: 640; pointer-events: none; background: url(../img/uvface.webp) center / contain no-repeat; }
.uvscare { position: fixed; inset: 0; z-index: 990; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: none; }
.uvscare-face { width: min(96vh, 96vw); height: min(96vh, 96vw); background: url(../img/uvface.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 40px rgba(155,107,255,.6)) brightness(1.15); animation: uvScare 1s linear both; }
@keyframes uvScare {
  0% { transform: scale(.55); opacity: 0; }
  4% { transform: scale(1.12); opacity: 1; }
  10% { transform: scale(1) translate(-6px, 3px); }
  16% { transform: scale(1.03) translate(5px, -4px); }
  22%, 88% { transform: scale(1.04); filter: drop-shadow(0 0 40px rgba(155,107,255,.6)) brightness(1.15); }
  90% { filter: drop-shadow(0 0 40px rgba(155,107,255,.6)) brightness(.4); }
  92%, 100% { transform: scale(1.08); filter: drop-shadow(0 0 40px rgba(155,107,255,.6)) brightness(1.2); }
}

/* ---------- samouczek przy pierwszym wejściu ---------- */

/* przyciemnienie robi cień otworu, więc podświetlony element widać bez podnoszenia go nad warstwę */
.tut { position: fixed; inset: 0; z-index: 980; }
.tut.out { opacity: 0; transition: opacity .3s; }
.tut-hole { position: fixed; border: 1px solid var(--amber); border-radius: 4px; box-shadow: 0 0 0 200vmax rgba(2,3,3,.78), 0 0 22px rgba(214,160,44,.45);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; pointer-events: none; }
.tut-hole.none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; border-color: transparent; box-shadow: 0 0 0 200vmax rgba(2,3,3,.82); }
.tut-tip { position: fixed; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 12px; border: 1px solid var(--amber); border-left-width: 3px;
  background: rgba(8,9,8,.98); box-shadow: 0 14px 44px rgba(0,0,0,.85); font-family: var(--mono); }
.tut-tip.in { animation: tutIn .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes tutIn { from { opacity: 0; transform: translateY(-10px); } }
.tut-n { font-size: 10.5px; letter-spacing: 2px; color: var(--text-mute); }
.tut-h { margin: 4px 0 6px; font-family: var(--head); font-size: 19px; letter-spacing: 1.5px; color: var(--amber); text-transform: uppercase; }
.tut-t { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text); }
.tut-row { display: flex; justify-content: space-between; gap: 10px; }
.tut-row .tut-go { border-color: var(--amber); color: var(--amber); margin-left: auto; }
.tut-chat { z-index: 970; background: transparent; }
.tut-chat .chat-in button { pointer-events: none; }

/* lusterko inspekcyjne pod ryciną SCP-173 */
.mir173 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line-2); font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.mir173 span { flex: 1 1 180px; }
.mir173 .btn { border-color: var(--green); color: var(--green); }

/* samouczek: krok z klasami obiektów */
.tut-tip.wide { width: min(520px, calc(100vw - 24px)); }
.tut-x:empty { display: none; }
.tut-cls { display: grid; gap: 7px; margin: -4px 0 12px; max-height: min(52vh, 420px); overflow-y: auto; }
.tut-cls > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; padding: 7px 8px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.tut-cls dt { margin: 0; }
.tut-cls dt .tag { display: inline-block; }
.tut-cls dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 480px) { .tut-cls > div { grid-template-columns: 1fr; gap: 4px; } }

/* okno „znaleziono przedmiot” (INV.found) */
.inv-found { text-align: center; border-color: var(--amber); box-shadow: 0 0 40px rgba(214,160,44,.25); }
.inv-found .inv-big { margin: 10px auto 6px; animation: invFoundIn .6s cubic-bezier(.2,1.4,.4,1); }
.inv-found-t { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--amber); }
.inv-found h2 { margin-top: 4px; }
.inv-found .inv-found-where { font-size: 12px; color: var(--text-dim); }
.inv-found .row { justify-content: center; }
.inv-found .row .btn { border-color: var(--amber); color: var(--amber); }
@keyframes invFoundIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }

/* SCP-105: Iris i karta 3-117 */
.iris3117 .iris-q { font-style: italic; color: #f0d28a; border-left: 2px solid var(--amber); padding-left: 10px; }
.iris3117 .row { justify-content: center; }

/* alarm Rady O5 po zamknięciu SCP-914 */
.o5-914 { max-width: 560px; }
.o5-914 .o5-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.5px; color: #ff8a8f; margin-bottom: 6px; }
.o5-914 h2 { color: #ff6a6a; }