/* SCP-004 */
.keys004 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 12px; }
.keys004 .btn { padding: 8px 0; font-family: var(--mono); }
.keys004 .btn:disabled { opacity: .35; }
.void004 { position: fixed; inset: 0; z-index: 940; display: flex; align-items: center; justify-content: center; background: #000; animation: appIn 1s ease; transition: opacity 1s; }
.void004.soft { background: rgba(0,0,0,.82); }
.void004 p { max-width: 560px; padding: 0 20px; font-family: var(--head); font-size: clamp(18px, 3vw, 28px); letter-spacing: .12em; color: #b8bec6; text-align: center; }
.void004.out { opacity: 0; }
body.cata004 #app { filter: grayscale(1) brightness(.6); pointer-events: none; transition: filter 1.5s; }

/* SCP-008 */
.burn008 { position: fixed; inset: 0; z-index: 930; pointer-events: none; background: radial-gradient(ellipse at 50% 110%, rgba(255,120,20,.75), rgba(160,30,0,.45) 45%, rgba(0,0,0,.6) 80%); animation: appIn 1.2s ease; transition: opacity 1.5s; }
.burn008.out { opacity: 0; }

/* SCP-016 */
.dish016 { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 8px auto 14px; border-radius: 50%; border: 3px solid #5a6a66; background: radial-gradient(circle, #1c2a24, #0a100e 70%); box-shadow: inset 0 0 30px rgba(160,220,190,.12); overflow: hidden; }
.dish016 span { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, #d8e8a0, #6a8a40 70%); animation: docIn .5s ease; transition: background .6s, border-radius .6s, transform .6s; }
.dish016 span.mut { border-radius: 20% 70% 30% 60%; background: radial-gradient(circle, #ff8a7a, #7a1810 70%); transform: scale(1.6) rotate(40deg); }
.dish016.hand { box-shadow: inset 0 0 60px rgba(200,40,30,.5); }

/* SCP-076 */
.tele076 { display: grid; gap: 6px; font-family: var(--mono); font-size: 13px; }
.tele076 b { color: #e0c89a; }
.tele076 b.red { color: #ff4a3a; animation: pulse 1s infinite; }

/* SCP-093 */
.disc093 { --c: #b0121a; width: 110px; aspect-ratio: 1; margin: 8px auto 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.25), transparent 40%), repeating-radial-gradient(circle, var(--c) 0 6px, rgba(0,0,0,.35) 7px 8px); box-shadow: 0 0 30px var(--c); transition: background 1.2s, box-shadow 1.2s; }
.doc.mir093 { transform: scaleX(-1); filter: grayscale(.5) brightness(.8); }

/* SCP-280 */
.dark280 { position: fixed; inset: 0; z-index: 900; pointer-events: none; background: radial-gradient(circle 170px at var(--x, 50%) var(--y, 50%), rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.97) 100%); animation: appIn 1.4s ease; transition: opacity 1.2s; }
.dark280.out { opacity: 0; }
.eyes280 { position: fixed; z-index: 905; display: flex; gap: 14px; transform: translate(-50%, -50%); pointer-events: none; transition: left .9s ease, top .9s ease; }
.eyes280 i { width: 9px; height: 5px; border-radius: 50%; background: #f4f6ff; box-shadow: 0 0 10px #fff; }

/* SCP-409 */
.cry409 { position: fixed; z-index: 880; width: 38vmin; height: 38vmin; pointer-events: none; transform-origin: 0 0; transition: transform 1s linear, opacity .4s; }
.cry409 svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 8px rgba(160,220,255,.5)); }
.cry409.tl { top: 0; left: 0; transform: scale(var(--k, 0)); }
.cry409.tr { top: 0; right: 0; transform-origin: 100% 0; transform: scale(calc(-1 * var(--k, 0)), var(--k, 0)); }
.cry409.bl { bottom: 0; left: 0; transform-origin: 0 100%; transform: scale(var(--k, 0), calc(-1 * var(--k, 0))); }
.cry409.br { bottom: 0; right: 0; transform-origin: 100% 100%; transform: scale(calc(-1 * var(--k, 0))); }
.cry409.shatter { opacity: 0; }

/* wspólne paski i listy */
.bar2317 { height: 10px; margin: 10px 0; border: 1px solid var(--line-2); background: #0a0c0d; }
.bar2317 i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7a1810, #ff4a3a); transition: width .9s linear; }
.route1440 { margin: 8px 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12.5px; }
.route1440 li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); color: var(--text-dim); }
.route1440 li.here { color: #ff4a3a; }
.route1440 li.past b { color: #e0c89a; font-weight: 400; }

/* SCP-895 */
.cam895 { position: relative; aspect-ratio: 4 / 3; max-width: 420px; margin: 8px auto; overflow: hidden; border: 1px solid var(--line-2); background: #050606; }
.cam895 .c-room { position: absolute; inset: 0; background: linear-gradient(#141816 0 55%, #0a0c0b 55%), radial-gradient(ellipse at 50% 70%, rgba(200,200,180,.08), transparent 60%); }
.cam895 .c-room::after { content: ""; position: absolute; left: 40%; top: 58%; width: 20%; height: 12%; background: #2a2016; border: 1px solid #3a3024; }
.cam895 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.4) contrast(1.2); }
.cam895 .c-rec, .cam895 .c-d { position: absolute; top: 8px; font-family: var(--mono); font-size: 11px; color: #e8e8e8; text-shadow: 0 0 4px #000; }
.cam895 .c-rec { left: 10px; }
.cam895 .c-d { right: 10px; }
.cam895.red { border-color: #c21d24; box-shadow: 0 0 18px rgba(194,29,36,.4); }
.cam895.noise::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); animation: pulse .3s infinite; }
.cam895 + .row2 input[type=range] { width: 100%; accent-color: #c21d24; }

/* SCP-966 */
body.ir966 #app { filter: grayscale(1) sepia(.5) hue-rotate(60deg) brightness(.9) contrast(1.3); }
.figs966 { --k: 1; position: fixed; inset: 0; z-index: 560; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.ir966 .figs966 { opacity: .85; }
.figs966 i { position: absolute; bottom: 0; width: 8vh; transform-origin: 50% 100%; transform: scale(var(--k)); transition: transform 1s; filter: drop-shadow(0 0 10px rgba(255,255,255,.6)); }
.figs966 i svg { display: block; width: 100%; height: auto; }
.figs966 .a { left: 3%; }
.figs966 .b { right: 4%; }
.figs966 .c { left: 48%; opacity: .5; }

/* SCP-993 */
.tv993 { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; max-width: 320px; margin: 8px auto; border: 10px solid #1a1612; border-radius: 16px; background: #0c0c0c; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: #8a8a8a; }
.tv993.on { background: linear-gradient(90deg, #d8d8d8 0 14%, #d8d800 14% 28%, #00d8d8 28% 42%, #00d800 42% 57%, #d800d8 57% 71%, #d80000 71% 85%, #0000d8 85%); color: transparent; }
.ko993 { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); transition: background 1.5s, opacity 1s; }
.ko993.black { background: #000; }
.ko993.out { opacity: 0; }
.ko993 p { font-family: var(--head); font-size: clamp(18px, 3vw, 28px); letter-spacing: .14em; color: #9aa0a8; text-align: center; padding: 0 20px; }

/* SCP-1000 */
.peek1000 { position: fixed; right: 0; bottom: 0; z-index: 560; width: 18vh; pointer-events: none; animation: peek1000 5.2s ease-in-out forwards; }
.peek1000 svg { display: block; width: 100%; height: auto; }
@keyframes peek1000 { 0% { transform: translateX(100%); } 30%, 60% { transform: translateX(35%); } 100% { transform: translateX(100%); } }

/* SCP-1128 */
.water1128 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 570; height: 0; pointer-events: none; background: linear-gradient(rgba(20,60,80,.5), rgba(2,10,18,.92)); border-top: 2px solid rgba(160,210,230,.35); transition: height 40s linear; overflow: hidden; }
.water1128.up { height: 42vh; }
.water1128.down { height: 0; transition: height 3s ease-in; }
.water1128 .w-shadow { position: absolute; left: -30%; bottom: 10%; width: 50vh; height: 16vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 70%); animation: swim1128 14s ease-in-out infinite; }
@keyframes swim1128 { 50% { transform: translateX(150vw) scale(1.4); } }
.sub1128 { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(10,40,60,.9), #01060a 80%); transition: opacity 1.2s; }
.sub1128 p { font-family: var(--head); font-size: clamp(22px, 4vw, 38px); letter-spacing: .3em; color: #8ab8d0; }
.sub1128.out { opacity: 0; }

/* SCP-1983 */
.door1983 { position: relative; width: 120px; height: 200px; margin: 8px auto 12px; border: 6px solid #2a2016; background: repeating-linear-gradient(90deg, #3a2a1a 0 18px, #2a1e12 18px 20px); }
.door1983 i { position: absolute; left: -10px; right: -10px; top: 45%; height: 8px; background: repeating-linear-gradient(90deg, #6a6a6a 0 10px, #3a3a3a 10px 14px); }
.door1983.hit { animation: shake .4s; }
.void1983 { position: fixed; inset: 0; z-index: 945; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%, #1a1410, #000 70%); animation: appIn 1s ease; }
.void1983 p { max-width: 560px; padding: 0 20px; font-family: var(--head); font-size: clamp(18px, 3vw, 28px); letter-spacing: .1em; color: #c8b8a0; text-align: center; }

/* SCP-2317 */
.chains2317 { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.chains2317 span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid #8a8e94; border-radius: 50%; font-family: var(--mono); font-size: 12px; color: #e8e8e8; }
.chains2317 span.br { border-style: dashed; border-color: #5a1a14; color: #7a3a30; text-decoration: line-through; }

/* SCP-2845 */
.deer2845 { position: fixed; inset: 0; z-index: 945; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: radial-gradient(ellipse at 50% 40%, #0c1a1a, #000 70%); animation: appIn 1.4s ease; }
.ring2845 { position: relative; width: 40vmin; aspect-ratio: 1; border-radius: 50%; border: 2px dotted rgba(200,230,240,.5); animation: spin04 12s linear infinite; }
.ring2845 i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8a9aa8); }
.ring2845 i:nth-child(1) { transform: rotate(0deg) translateY(-20vmin); }
.ring2845 i:nth-child(2) { transform: rotate(51deg) translateY(-20vmin); }
.ring2845 i:nth-child(3) { transform: rotate(103deg) translateY(-20vmin); }
.ring2845 i:nth-child(4) { transform: rotate(154deg) translateY(-20vmin); }
.ring2845 i:nth-child(5) { transform: rotate(206deg) translateY(-20vmin); }
.ring2845 i:nth-child(6) { transform: rotate(257deg) translateY(-20vmin); }
.ring2845 i:nth-child(7) { transform: rotate(309deg) translateY(-20vmin); }
.ant2845 { position: absolute; top: calc(50% - 30vmin); width: 50vmin; }
.ant2845 svg { display: block; width: 100%; height: auto; }
.deer2845 p { position: absolute; bottom: 12%; padding: 0 20px; font-family: var(--head); font-size: clamp(16px, 2.6vw, 24px); letter-spacing: .18em; color: #cfe0e0; text-align: center; }
.white2845 { position: fixed; inset: 0; z-index: 960; background: #f4f6f8; pointer-events: none; animation: appIn 1.5s ease; transition: opacity 2s; }
.white2845.out { opacity: 0; }

/* SCP-3125 */
.gone3125 { position: relative; color: transparent !important; }
.gone3125 * { visibility: hidden; }
.gone3125::after { content: "[ta treść została zapomniana]"; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

/* SCP-3812 */
.doc.layer3812 { transform: scale(calc(1 - var(--l3812, 0) * .035)); filter: brightness(calc(1 - var(--l3812, 0) * .08)); transition: transform 2s ease, filter 2s ease; }

/* SCP-4000 */
.rabbit4000 { position: absolute; left: 58%; bottom: 18%; z-index: 2; width: 9%; opacity: 0; transition: opacity 5s; pointer-events: none; }
.rabbit4000 svg { display: block; width: 100%; height: auto; }
.rabbit4000.on { opacity: .9; }

/* SCP-5000 */
.motto.why5000 span { color: #ff4a3a; text-shadow: 0 0 10px rgba(255,40,30,.5); }

@media (max-width: 560px) {
  .keys004 { grid-template-columns: repeat(4, 1fr); }
  .chains2317 span { width: 28px; height: 28px; }
}

body.calm .dish016 span, body.calm .tele076 b.red, body.calm .cam895.noise::after, body.calm .ring2845, body.calm .water1128 .w-shadow, body.calm .door1983.hit { animation: none; }
body.calm .doc.mir093 { transform: none; }