/* ============================================================
   Sprawa Specjalna nr 7 - motyw Art Deco Noir
   Wygenerowany w Claude Design, wyciagniety 1:1 z prototypu.
   ============================================================ */

:root { --ink: #0A0E1A; --ink-2: #0D1322; --ink-3: #121A2E; --ink-line: #1B2540; --gold: #D4AF37; --gold-2: #C9A227; --gold-deep: #9C7A1E; --gold-pale: #F4E2A8; --ruby: #7C1F2B; --ruby-glow: #B33547; --emerald: #1F6B4D; --paper: #EDE6D4; --paper-dim: #B9B19C; --paper-faint: #7E7864; --display: "Cinzel", "Times New Roman", serif; --serif: "Cormorant Garamond", Georgia, serif; --mono: "Space Mono", "Courier New", monospace; --vignette: radial-gradient(120% 100% at 50% 30%,
                rgba(20,28,48,0.55) 0%,
                rgba(10,14,26,0.65) 45%,
                rgba(4,6,12,0.96) 100%); --ease: cubic-bezier(0.22, 1, 0.36, 1); }
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; min-height: 100%; background-color: var(--ink); color: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }
body { background-image: var(--vignette); background-attachment: fixed; overflow-x: hidden; }
#root { position: relative; z-index: 1; }
.grain, .velvet { position: fixed; inset: 0px; pointer-events: none; z-index: 0; }
.grain { opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: 6s steps(6) 0s infinite normal none running grainShift; }
.velvet { opacity: 0.5; background: radial-gradient(60% 40% at 50% 0%, rgba(124, 31, 43, 0.1), transparent 70%), radial-gradient(50% 50% at 50% 110%, rgba(31, 107, 77, 0.05), transparent 70%); }
@keyframes grainShift { 
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(-4%, 2%); }
  40% { transform: translate(3%, -3%); }
  60% { transform: translate(-2%, 4%); }
  80% { transform: translate(4%, -1%); }
  100% { transform: translate(0px, 0px); }
}
.stage { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 56px); }
.screen { width: 100%; max-width: 600px; }
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: screenIn 0.9s var(--ease) both; }
}
@keyframes screenIn { 
  0% { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0px); }
}
.gold-text { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; }
.eyebrow { font-family: var(--mono); font-size: clamp(10px, 2.6vw, 12px); letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-2); margin: 0px; }
.kicker { font-family: var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-faint); font-size: 11px; }
.sunburst { position: relative; width: var(--sb, 220px); height: var(--sb, 220px); border-radius: 50%; background: repeating-conic-gradient(rgba(212, 175, 55, 0) 0deg, rgba(212, 175, 55, 0) 4deg, rgba(212, 175, 55, 0.16) 4deg, rgba(212, 175, 55, 0.16) 4.5deg, rgba(212, 175, 55, 0) 4.5deg, rgba(212, 175, 55, 0) 9deg); mask: radial-gradient(circle, transparent 22%, rgb(0, 0, 0) 23%, rgb(0, 0, 0) 78%, transparent 79%); }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-2); margin: 18px 0px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1 1 0%; max-width: 120px; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
.divider .diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: rgba(212, 175, 55, 0.6) 0px 0px 8px; }
.deco-frame { position: relative; border: 1px solid rgba(212, 175, 55, 0.28); padding: clamp(26px, 6vw, 46px) clamp(20px, 5vw, 40px); background: linear-gradient(rgba(18, 26, 46, 0.66), rgba(10, 14, 26, 0.72)); box-shadow: rgba(10, 14, 26, 0.6) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 0px 60px inset, rgba(0, 0, 0, 0.55) 0px 30px 80px; backdrop-filter: blur(2px); }
.deco-frame::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(212, 175, 55, 0.14); pointer-events: none; }
.corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--gold); opacity: 0.85; }
.corner.tl { top: -1px; left: -1px; border-right: 0px; border-bottom: 0px; }
.corner.tr { top: -1px; right: -1px; border-left: 0px; border-bottom: 0px; }
.corner.bl { bottom: -1px; left: -1px; border-right: 0px; border-top: 0px; }
.corner.br { bottom: -1px; right: -1px; border-left: 0px; border-top: 0px; }
.seal { position: relative; width: var(--seal, 132px); height: var(--seal, 132px); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, var(--ruby-glow) 0%, var(--ruby) 38%, #5A141E 78%, #3E0D15 100%); box-shadow: rgba(255, 255, 255, 0.18) 0px 4px 10px inset, rgba(0, 0, 0, 0.55) 0px -10px 22px inset, rgba(124, 31, 43, 0.45) 0px 14px 34px, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px; filter: saturate(1.05); }
.seal::before { content: ""; position: absolute; inset: -7px; border-radius: 47% 53% 50% 50% / 52% 48%; background: radial-gradient(circle at 40% 35%, rgba(179, 53, 71, 0.35), transparent 60%); filter: blur(3px); z-index: -1; }
.seal .seal-ring { position: absolute; inset: 12px; border-radius: 50%; border: 1.5px dashed rgba(255, 225, 225, 0.35); }
.seal .seal-mark { font-family: var(--display); font-weight: 700; color: rgb(246, 218, 218); text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px, rgba(255, 200, 200, 0.3) 0px 0px 12px; font-size: calc(var(--seal, 132px) * 0.34); line-height: 1; }
.btn-gold { font-family: var(--mono); letter-spacing: 0.28em; text-transform: uppercase; font-size: 13px; color: var(--ink); background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-deep)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 16px 30px; cursor: pointer; position: relative; border-radius: 2px; box-shadow: rgba(212, 175, 55, 0.28) 0px 8px 24px, rgba(255, 255, 255, 0.5) 0px 1px 0px inset; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.3s; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: rgba(212, 175, 55, 0.42) 0px 14px 34px, rgba(255, 255, 255, 0.6) 0px 1px 0px inset; filter: brightness(1.05); }
.btn-gold:active { transform: translateY(0px); }
.btn-gold:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); }
.btn-ghost { font-family: var(--mono); letter-spacing: 0.22em; text-transform: uppercase; font-size: 11px; color: var(--paper-dim); background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 8px 4px; transition: color 0.3s, letter-spacing 0.3s; }
.btn-ghost:hover { color: var(--gold); letter-spacing: 0.26em; }
.intro { text-align: center; }
.intro .sunwrap { position: relative; display: grid; place-items: center; margin: 0px auto 6px; }
.intro .sunwrap .sunburst { position: absolute; animation: 80s linear 0s infinite normal none running spinSlow; }
@keyframes spinSlow { 
  100% { transform: rotate(360deg); }
}
.intro .casebar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; color: var(--gold-2); }
.intro .casebar .line { height: 1px; width: 34px; background: var(--gold-deep); }
.title { font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; line-height: 1.04; margin: 6px 0px 4px; font-size: clamp(30px, 8.5vw, 58px); }
.title .nr { display: block; font-size: clamp(14px, 4vw, 22px); letter-spacing: 0.5em; color: var(--gold); -webkit-text-fill-color: var(--gold); margin-top: 10px; text-shadow: rgba(212, 175, 55, 0.35) 0px 0px 18px; }
.subtitle { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 4.4vw, 23px); color: var(--paper-dim); max-width: 30ch; margin: 16px auto 30px; line-height: 1.45; text-wrap: balance; }
.case-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.case-head .stamp { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--ruby-glow); border: 1px solid rgba(179, 53, 71, 0.45); padding: 4px 9px; text-transform: uppercase; transform: rotate(-3deg); border-radius: 2px; opacity: 0.85; }
.trop-label { font-family: var(--mono); letter-spacing: 0.34em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.progress { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 16px); margin: 20px 0px 6px; }
.pip { --d: 30px; width: var(--d); height: var(--d); display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.3); font-family: var(--display); font-size: 11px; color: var(--paper-faint); position: relative; transition: all 0.5s var(--ease); background: rgba(10, 14, 26, 0.5); }
.pip.solved { color: rgb(246, 218, 218); border-color: transparent; background: radial-gradient(circle at 38% 32%, var(--ruby-glow), var(--ruby) 60%, #4A1019); box-shadow: rgba(124, 31, 43, 0.6) 0px 0px 12px, rgba(255, 255, 255, 0.25) 0px 1px 2px inset; }
.pip.current { border-color: var(--gold); color: var(--gold); box-shadow: rgba(212, 175, 55, 0.4) 0px 0px 14px; animation: 2.4s ease-in-out 0s infinite normal none running pulseGold; }
@keyframes pulseGold { 
  0%, 100% { box-shadow: rgba(212, 175, 55, 0.25) 0px 0px 10px; }
  50% { box-shadow: rgba(212, 175, 55, 0.55) 0px 0px 20px; }
}
.riddle-title { font-family: var(--display); font-weight: 600; font-size: clamp(23px, 6.2vw, 34px); letter-spacing: 0.02em; line-height: 1.15; margin: 14px 0px 4px; text-wrap: balance; }
.riddle-body { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.55; color: var(--paper); margin: 14px 0px; text-wrap: pretty; }
/* tryb "trzymaj linie" - dla akrostychow i szyfrow, gdzie uklad linii ma znaczenie:
   kazda linijka (rozdzielona <br>) zostaje w jednej wizualnej linii, bez zawijania */
.riddle-body.keep-lines { white-space: nowrap; overflow-x: auto; font-size: clamp(11px, 3.1vw, 16px); line-height: 1.75; text-wrap: nowrap; padding-bottom: 8px; }
.cipher { font-family: var(--mono); font-size: clamp(14px, 4vw, 17px); letter-spacing: 0.18em; color: var(--gold-pale); background: repeating-linear-gradient(rgba(255, 255, 255, 0.016) 0px, rgba(255, 255, 255, 0.016) 27px, transparent 27px, transparent 28px), rgba(8, 11, 20, 0.6); border: 1px solid rgba(212, 175, 55, 0.22); padding: 18px 20px; margin: 18px 0px; position: relative; text-align: center; white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.cipher::before, .cipher::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--gold-2); }
.cipher::before { top: 5px; left: 5px; border-right: 0px; border-bottom: 0px; }
.cipher::after { bottom: 5px; right: 5px; border-left: 0px; border-top: 0px; }
.evidence { position: relative; margin: 18px 0px; border: 1px solid rgba(212, 175, 55, 0.22); aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0px, rgba(212, 175, 55, 0.05) 10px, rgba(212, 175, 55, 0) 10px, rgba(212, 175, 55, 0) 20px), rgba(8, 11, 20, 0.7); display: grid; place-items: center; }
.evidence span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--paper-faint); }
.hints { margin: 10px 0px 4px; }
.hint { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 4vw, 18px); color: var(--gold-pale); border-left: 2px solid rgba(212, 175, 55, 0.4); padding: 6px 0px 6px 14px; margin: 10px 0px; }
@media (prefers-reduced-motion: no-preference) {
  .hint { animation: hintIn 0.55s var(--ease) both; }
}
@keyframes hintIn { 
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: none; }
}
.answer-row { display: flex; gap: 12px; align-items: stretch; margin-top: 22px; flex-wrap: wrap; }
.answer-field { flex: 1 1 200px; position: relative; }
.answer-field input { width: 100%; background: transparent; border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(212, 175, 55, 0.4); border-image: initial; color: var(--paper); font-family: var(--serif); font-size: clamp(18px, 5vw, 22px); padding: 12px 4px 10px; letter-spacing: 0.02em; outline: none; transition: border-color 0.4s; }
.answer-field input::placeholder { color: var(--paper-faint); font-style: italic; }
.answer-field input:focus { border-bottom-color: var(--gold); }
.answer-field .underglow { position: absolute; left: 0px; bottom: 0px; height: 1px; width: 0px; background: var(--gold); box-shadow: 0 0 10px var(--gold); transition: width 0.5s var(--ease); }
.answer-field input:focus ~ .underglow { width: 100%; }
.feedback { min-height: 22px; margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ruby-glow); opacity: 0; transition: opacity 0.3s; }
.feedback.show { opacity: 1; }
.shake { animation: shake 0.5s var(--ease); }
@keyframes shake { 
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.footer-actions { display: flex; justify-content: center; margin-top: 24px; }
.transition-overlay { position: fixed; inset: 0px; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle, rgba(10, 14, 26, 0.4), rgba(4, 6, 12, 0.96)); animation: 0.4s ease 0s 1 normal both running ovIn; }
@keyframes ovIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.shatter-seal { position: relative; width: 150px; height: 150px; }
.shatter-seal .half { position: absolute; inset: 0px; background: inherit; }
.shimmer-ring { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ringOut 1.1s var(--ease) forwards; }
@keyframes ringOut { 
  0% { width: 10px; height: 10px; opacity: 1; }
  100% { width: 130vmax; height: 130vmax; opacity: 0; border-width: 1px; }
}
.spark { position: absolute; width: 4px; height: 4px; background: var(--gold-pale); border-radius: 50%; left: 50%; top: 50%; box-shadow: 0 0 8px var(--gold); animation: 1s ease-out 0s 1 normal forwards running sparkFly; }
@keyframes sparkFly { 
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.unlock-text { position: absolute; bottom: 20%; width: 100%; text-align: center; font-family: var(--mono); letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .unlock-text { animation: 0.6s ease 0.3s 1 normal both running hintIn; }
}
.finale { text-align: center; }
.finale-veil { position: fixed; inset: 0px; z-index: 40; background: rgb(4, 6, 12); animation: 2.6s ease 0s 1 normal forwards running veilOut; pointer-events: none; }
@keyframes veilOut { 
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
.jewel-stage { position: relative; height: clamp(220px, 46vw, 320px); display: grid; place-items: center; margin-bottom: 10px; }
.jewel-glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, 0.35), rgba(124, 31, 43, 0.12) 45%, transparent 70%); filter: blur(6px); animation: 4s ease-in-out 0s infinite normal none running glowPulse; }
@keyframes glowPulse { 
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.06); opacity: 1; }
}
.jewel-rays { position: absolute; width: 360px; height: 360px; animation: 60s linear 0s infinite normal none running spinSlow; }
.gem { position: relative; width: 120px; height: 150px; filter: drop-shadow(rgba(212, 175, 55, 0.55) 0px 0px 22px); }
@media (prefers-reduced-motion: no-preference) {
  .gem { animation: gemRise 1.6s var(--ease) both, gemFloat 5s ease-in-out 1.6s infinite; }
}
@keyframes gemRise { 
  0% { transform: translateY(30px) scale(0.4) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes gemFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.gem .facet { position: absolute; inset: 0px; }
.gem .crown { top: 0px; height: 42%; background: linear-gradient(rgb(251, 239, 192), rgb(231, 199, 90) 60%, rgb(201, 162, 39)); clip-path: polygon(0px 100%, 18% 0px, 82% 0px, 100% 100%); }
.gem .crown::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, 0.6) 50%, transparent 66%); clip-path: polygon(0px 100%, 18% 0px, 82% 0px, 100% 100%); opacity: 0.5; }
.gem .pavilion { top: 42%; height: 58%; background: linear-gradient(rgb(231, 199, 90), rgb(179, 53, 71) 70%, rgb(124, 31, 43)); clip-path: polygon(0px 0px, 100% 0px, 50% 100%); }
.gem .pavilion::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%); clip-path: polygon(0px 0px, 100% 0px, 50% 100%); }
.gem .sheen { position: absolute; inset: 0px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.7) 48%, transparent 56%) 0% 0% / 250% 250%; animation: 3.4s ease-in-out 0s infinite normal none running sheenMove; mask: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)); }
@keyframes sheenMove { 
  0% { background-position: 120% 0px; }
  100% { background-position: -40% 0px; }
}
.finale-title { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 8.5vw, 54px); letter-spacing: 0.05em; margin: 6px 0px 2px; }
.finale-msg { font-family: var(--serif); font-size: clamp(18px, 4.8vw, 23px); line-height: 1.6; color: var(--paper); max-width: 34ch; margin: 18px auto 8px; text-wrap: pretty; }
.finale-sign { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: clamp(16px, 4.2vw, 20px); margin-top: 22px; }
.finale-restart { margin-top: 30px; }
.reveal-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-word { opacity: 0; filter: blur(6px); transform: translateY(8px); animation: wordIn 0.8s var(--ease) both; }
}
@keyframes wordIn { 
  100% { opacity: 1; filter: blur(0px); transform: none; }
}
.center { text-align: center; }
.mt-s { margin-top: 10px; }
.muted { color: var(--paper-dim); }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   WOW layer - kinowa atmosfera noir (12.06.2026)
   Wszystko na transform/opacity, szanuje prefers-reduced-motion
   (globalny kill wyzej) + JS pomija efekty przy reduce.
   ============================================================ */

/* -- latarka detektywa: plama swiatla podazajaca za kursorem (desktop) -- */
.spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1.6s ease; mix-blend-mode: screen; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 38%), rgba(244, 226, 168, 0.12), rgba(244, 226, 168, 0.045) 42%, transparent 72%); }
.spotlight.on { opacity: 1; }

/* -- drobinki kurzu dryfujace w swietle -- */
.dust { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.mote { position: absolute; bottom: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 226, 168, 0.95), rgba(212, 175, 55, 0) 70%); opacity: 0; will-change: transform, opacity; animation: moteRise var(--t, 18s) linear var(--dl, 0s) infinite; }
@keyframes moteRise {
  0% { transform: translate3d(0px, 0px, 0px); opacity: 0; }
  8% { opacity: var(--o, 0.4); }
  85% { opacity: var(--o, 0.4); }
  100% { transform: translate3d(var(--dx, 24px), -106vh, 0px); opacity: 0; }
}

/* -- staggered reveal: elementy wjezdzaja kolejno (delay przez --d) -- */
@media (prefers-reduced-motion: no-preference) {
  .rv { animation: revUp 0.8s var(--ease) both; animation-delay: var(--d, 0s); }
}
@keyframes revUp {
  0% { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: blur(0px); }
}

/* -- zloty przeblysk na numerze sprawy -- */
.title .nr { background: linear-gradient(100deg, var(--gold-deep) 18%, var(--gold) 38%, var(--gold-pale) 47%, #FFF8E1 50%, var(--gold-pale) 53%, var(--gold) 62%, var(--gold-deep) 82%); background-size: 230% 100%; background-position: 115% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.35)); animation: nrSheen 6.5s ease-in-out 1.4s infinite; }
@keyframes nrSheen {
  0%, 58% { background-position: 115% 0; }
  92%, 100% { background-position: -65% 0; }
}

/* -- pieczec lakowa: oddech zaru + okazjonalny blysk laku -- */
.seal { animation: sealBreath 5.5s ease-in-out infinite; }
@keyframes sealBreath {
  0%, 100% { box-shadow: rgba(255, 255, 255, 0.18) 0px 4px 10px inset, rgba(0, 0, 0, 0.55) 0px -10px 22px inset, rgba(124, 31, 43, 0.45) 0px 14px 34px, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px; }
  50% { box-shadow: rgba(255, 255, 255, 0.22) 0px 4px 12px inset, rgba(0, 0, 0, 0.5) 0px -10px 22px inset, rgba(124, 31, 43, 0.65) 0px 14px 46px, rgba(179, 53, 71, 0.32) 0px 0px 30px, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px; }
}
.seal::after { content: ""; position: absolute; inset: 0px; border-radius: 50%; pointer-events: none; background: linear-gradient(125deg, transparent 38%, rgba(255, 232, 214, 0.34) 49%, transparent 60%); background-size: 240% 240%; background-position: 135% 0; animation: sealGlint 7.5s ease-in-out 2.2s infinite; }
@keyframes sealGlint {
  0%, 70% { background-position: 135% 0; }
  94%, 100% { background-position: -55% 0; }
}

/* -- przycisk zloty: przebieg blasku (hover + zapraszajacy puls na intro) -- */
.btn-gold { overflow: hidden; }
.btn-gold::after { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.62) 50%, transparent 68%); background-size: 240% 100%; background-position: 140% 0; }
.btn-gold:hover::after { animation: btnSheen 0.8s ease both; }
.btn-gold.beckon::after { animation: btnBeckon 4.6s ease-in-out 1.8s infinite; }
@keyframes btnSheen {
  0% { background-position: 140% 0; }
  100% { background-position: -60% 0; }
}
@keyframes btnBeckon {
  0%, 68% { background-position: 140% 0; }
  88%, 100% { background-position: -60% 0; }
}

/* -- ramka akt: smuga swiatla przebiegajaca po gornej krawedzi -- */
.deco-frame::after { content: ""; position: absolute; top: -1px; left: 0px; right: 0px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(244, 226, 168, 0.85), transparent); background-size: 34% 100%; background-repeat: no-repeat; background-position: -34% 0; animation: edgeRun 8s ease-in-out 2.4s infinite; }
@keyframes edgeRun {
  0%, 58% { background-position: -34% 0; }
  84%, 100% { background-position: 134% 0; }
}

/* -- pipy postepu: pop aktualnego, blysk rozwiazanych przy wczytaniu akt -- */
@media (prefers-reduced-motion: no-preference) {
  .pip.current { animation: pulseGold 2.4s ease-in-out 0.8s infinite, pipPop 0.7s var(--ease) both; }
  .pip.solved { animation: pipSet 0.55s var(--ease) both; }
}
@keyframes pipPop {
  0% { transform: scale(0.55); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes pipSet {
  0% { filter: brightness(1.7); transform: scale(1.12); }
  100% { filter: none; transform: scale(1); }
}

/* -- dekodowanie szyfru: poswiata podczas "strojenia" -- */
.cipher.decoding { color: var(--gold); text-shadow: rgba(212, 175, 55, 0.5) 0px 0px 16px; }

/* -- blysk winiety: rubin (blad) / zloto (sukces) -- */
.flash-layer { position: fixed; inset: 0px; pointer-events: none; z-index: 60; opacity: 0; }
.flash-layer.ruby { background: radial-gradient(115% 100% at 50% 50%, transparent 52%, rgba(124, 31, 43, 0.55) 100%); animation: flashFade 0.65s ease both; }
.flash-layer.gold { background: radial-gradient(115% 100% at 50% 50%, transparent 40%, rgba(212, 175, 55, 0.38) 100%); animation: flashFade 1s ease both; }
@keyframes flashFade {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

/* -- przejscie: lakowa pieczec przybija sie i peka na pol -- */
.crack-wrap { position: absolute; width: 120px; height: 120px; display: grid; place-items: center; }
.crack-wrap .crack-mark { position: absolute; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 42px; color: rgb(246, 218, 218); text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px; animation: crackMark 0.5s ease 0.34s both; }
@keyframes crackMark {
  0% { opacity: 1; transform: scale(1); filter: blur(0px); }
  100% { opacity: 0; transform: scale(1.35); filter: blur(3px); }
}
.crack-wrap .half { position: absolute; inset: 0px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--ruby-glow) 0%, var(--ruby) 38%, #5A141E 78%, #3E0D15 100%); box-shadow: rgba(255, 255, 255, 0.18) 0px 4px 10px inset, rgba(0, 0, 0, 0.55) 0px -10px 22px inset; }
.crack-wrap .half.l { clip-path: polygon(0% 0%, 56% 0%, 44% 16%, 60% 34%, 42% 52%, 58% 72%, 46% 100%, 0% 100%); animation: crackStamp 0.28s var(--ease) both, crackL 0.95s cubic-bezier(0.5, 0, 0.8, 0.4) 0.36s both; }
.crack-wrap .half.r { clip-path: polygon(56% 0%, 100% 0%, 100% 100%, 46% 100%, 58% 72%, 42% 52%, 60% 34%, 44% 16%); animation: crackStamp 0.28s var(--ease) both, crackR 0.95s cubic-bezier(0.5, 0, 0.8, 0.4) 0.36s both; }
@keyframes crackStamp {
  0% { transform: scale(1.65); opacity: 0; }
  62% { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes crackL {
  100% { transform: translate(-56px, 48px) rotate(-18deg); opacity: 0; }
}
@keyframes crackR {
  100% { transform: translate(56px, 42px) rotate(15deg); opacity: 0; }
}
.spark { width: var(--s, 4px); height: var(--s, 4px); }
.spark.ruby { background: var(--ruby-glow); box-shadow: 0 0 8px var(--ruby-glow); }
@media (prefers-reduced-motion: no-preference) {
  .unlock-text { animation: 0.6s ease 0.3s 1 normal both running hintIn, unlockSpread 1.3s var(--ease) 0.3s both; }
}
@keyframes unlockSpread {
  0% { letter-spacing: 0.22em; }
  100% { letter-spacing: 0.5em; }
}

/* -- final: klejnot wschodzi po opadnieciu kurtyny + zlote iskry unosza sie -- */
@media (prefers-reduced-motion: no-preference) {
  .gem { animation: gemRise 1.6s var(--ease) 1.45s both, gemFloat 5s ease-in-out 3.05s infinite; }
}
.rise { position: absolute; bottom: 8%; border-radius: 50%; background: radial-gradient(circle, #FFF3C4, rgba(212, 175, 55, 0) 70%); opacity: 0; animation: riseUp var(--t, 5s) ease-in var(--dl, 0s) infinite; }
@keyframes riseUp {
  0% { transform: translate3d(0px, 0px, 0px) scale(0.6); opacity: 0; }
  12% { opacity: var(--o, 0.8); }
  100% { transform: translate3d(var(--dx, 0px), -270px, 0px) scale(1); opacity: 0; }
}
.finale .fw { display: inline-block; white-space: nowrap; }
.finale .fl { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .finale .fl { opacity: 0; animation: flIn 0.7s var(--ease) var(--d, 0s) both; }
}
@keyframes flIn {
  0% { opacity: 0; transform: translateY(16px) rotateX(45deg); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0px); }
}

/* ============================================================
   SEJF - zamek bebenkowy finalowego tropu (12.06.2026)
   ============================================================ */
.safe { text-align: center; }
.safe-row { display: flex; justify-content: center; gap: clamp(10px, 3vw, 18px); margin: 26px 0px 4px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wheel-btn { font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--gold-2); background: transparent; border: 1px solid rgba(212, 175, 55, 0.25); width: clamp(48px, 12vw, 58px); padding: 8px 0px; cursor: pointer; border-radius: 2px; transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.12s; }
.wheel-btn:hover { color: var(--gold-pale); border-color: var(--gold); background: rgba(212, 175, 55, 0.08); }
.wheel-btn:active { transform: scale(0.92); }
.wheel-window { width: clamp(48px, 12vw, 58px); height: clamp(64px, 16vw, 78px); display: grid; place-items: center; border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 3px; position: relative; overflow: hidden; background: linear-gradient(180deg, #060910 0%, #121A2E 45%, #121A2E 55%, #060910 100%); box-shadow: rgba(0, 0, 0, 0.7) 0px 7px 14px inset, rgba(0, 0, 0, 0.7) 0px -7px 14px inset, rgba(0, 0, 0, 0.4) 0px 0px 0px 1px, rgba(0, 0, 0, 0.45) 0px 5px 18px; transition: border-color 0.5s, box-shadow 0.5s; }
.wheel-window::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.04)); }
.digit { font-family: var(--mono); font-weight: 700; font-size: clamp(26px, 7vw, 34px); color: var(--gold-pale); text-shadow: rgba(212, 175, 55, 0.35) 0px 0px 12px; transition: color 0.5s, text-shadow 0.5s; }
.digit.roll-up { animation: rollUp 0.22s var(--ease); }
.digit.roll-down { animation: rollDown 0.22s var(--ease); }
@keyframes rollUp {
  0% { transform: translateY(115%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes rollDown {
  0% { transform: translateY(-115%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.safe-bar { position: relative; height: 9px; margin: 18px auto 6px; max-width: 300px; border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 5px; background: rgba(8, 11, 20, 0.7); overflow: hidden; }
.safe-bar .bolt { position: absolute; top: 1px; bottom: 1px; left: 1px; width: 46%; border-radius: 4px; background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-deep)); box-shadow: rgba(212, 175, 55, 0.5) 0px 0px 10px; transition: transform 0.7s var(--ease); }
.safe.open .bolt { transform: translateX(118%); }
.safe.open .wheel-window { border-color: var(--gold); box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 14px inset, rgba(0, 0, 0, 0.6) 0px -7px 14px inset, rgba(212, 175, 55, 0.45) 0px 0px 24px; }
.safe.open .digit { color: #FFF3C4; text-shadow: rgba(255, 243, 196, 0.8) 0px 0px 18px; }

/* ============================================================
   FINAL - akrostych ze zlotymi inicjalami (wskazowka KIESZEN)
   ============================================================ */
/* liscik z akrostychem wyrownany do lewej - inicjaly tworza pionowa kolumne;
   szerszy i odrobine mniejszy font, zeby linijki nie zawijaly (kolumna czysta) */
.finale-msg.letter { text-align: left; max-width: 46ch; font-size: clamp(15px, 4vw, 20px); line-height: 1.75; }
.acro { font-family: var(--display); font-weight: 700; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .acro { color: inherit; animation: acroLight 1.1s var(--ease) var(--d, 5s) both; }
}
@keyframes acroLight {
  0% { color: inherit; text-shadow: none; }
  45% { color: #FFF3C4; text-shadow: rgba(255, 243, 196, 0.9) 0px 0px 16px; }
  100% { color: var(--gold); text-shadow: rgba(212, 175, 55, 0.45) 0px 0px 10px; }
}