/* A living case file: native text and controls over the game's aged parchment. */
.has-result .crypto-tile[aria-pressed] { outline:none; }
.crypto-playfield:has(#crypto-completion:not([hidden])) { z-index:9; }

.crypto-completion {
 position:absolute; z-index:8; isolation:isolate; overflow:hidden;
 left:50%; top:50%; translate:-50% -50%; width:min(326px,calc(100% - 12px));
 margin:0; padding:14px 14px 36px; text-align:center; pointer-events:none;
 opacity:1;
 border:3px double #b78635; border-radius:13px 9px 15px 10px;
 color:#4d290b;
 background:radial-gradient(ellipse at 50% 25%,#fff4c991,transparent 65%),url('/assets/games/kryptogramm/parchment-v2.webp') center / 100% 100%;
 box-shadow:inset 0 0 0 2px #fce4a1,inset 0 0 0 4px #93601d66,inset 0 0 24px #a56c2340,0 4px 0 #704019,0 8px 14px #43230f40;
 animation:none;
}
.crypto-completion[hidden] { display:none; }
.crypto-completion::before, .crypto-completion::after {
 content:'❧'; position:absolute; top:6px; font:36px/1 Georgia,serif;
 color:#a66c1f; text-shadow:0 1px 0 #fff2ad,1px 2px 1px #5c321b80;
}
.crypto-completion::before { left:9px; }
.crypto-completion::after { right:9px; transform:scaleX(-1); }
.crypto-completion #crypto-result {
 position:relative; display:block; margin:0; overflow-wrap:anywhere;
 font:bold clamp(24px,3vw,30px)/1.14 Georgia,serif;
 color:#75400d; text-shadow:0 1px 0 #ffe5a2,0 2px 0 #c09143,0 3px 0 #5e310f,0 5px 5px #54301542;
}
.crypto-completion #crypto-award { display:block; margin:15px 0 0; font-size:14px; line-height:1.5; color:#4d290b; }
.crypto-completion .crypto-award-points { display:block; margin:0; font-size:24px; font-weight:700; line-height:1.25; }
.crypto-completion .crypto-victory-stamp {
 display:table; max-width:100%; margin:12px auto 0; padding:4px 10px;
 border:5px double currentColor; border-radius:4px; transform:rotate(-5deg);
 font:bold clamp(18px,2.5vw,23px)/1.12 Georgia,serif; text-transform:uppercase;
 color:#8a301c; letter-spacing:.035em; overflow-wrap:anywhere;
 text-shadow:1px 0 #f7dda580,-1px 1px #f7dda550;
 background:repeating-linear-gradient(172deg,transparent 0 5px,#fae0ac55 5px 6px,transparent 6px 11px);
 box-shadow:inset 0 0 0 1px #f8dda566;
}
.crypto-victory-art { position:relative; width:220px; max-width:100%; height:180px; margin:-5px auto -76px; transform:scale(.58); transform-origin:top center; perspective:700px; }
.crypto-victory-halo { position:absolute; inset:-10px -25px; background:radial-gradient(ellipse,#ffe689cc 0,#f4bf4b44 36%,transparent 68%); }
.crypto-victory-lock {
 position:absolute; left:50%; bottom:30px; width:140px; height:140px;
 transform:translateX(-50%) rotate(-8deg); transform-origin:50% 15%;
 filter:drop-shadow(3px 8px 4px #53300b66);
}
.crypto-victory-lock-body { position:absolute; width:160px; height:134px; max-width:none; left:-10px; bottom:-30px; object-fit:contain; }
.crypto-victory-shackle {
 position:absolute; left:41px; top:5px; width:66px; height:76px;
 border:12px solid #b8b3a7; border-bottom:0; border-radius:42px 42px 0 0;
 background:transparent;
 box-shadow:inset 2px 2px 2px #302c27,inset -3px 0 2px #fff9e1,2px -2px 0 #4a4036,-2px 1px 0 #f5edcf;
 transform-origin:90% 90%; transform:translate(5px,-13px) rotate(15deg);
 clip-path:polygon(0 0,100% 0,100% 100%,65% 100%,65% 66%,0 66%);
}
.crypto-victory-shackle::before {
 content:''; position:absolute; inset:-9px -9px 0; border:4px solid #fffae0;
 border-bottom:0; border-left-color:#6c6860; border-right-color:#dad4c8;
 border-radius:40px 40px 0 0; filter:blur(.3px);
}
.crypto-victory-spark { position:absolute; color:#fff5b1; font:normal 28px/1 Georgia,serif; text-shadow:0 0 5px #eabf35,0 0 12px #e8a320; }
.spark-one { left:17%; top:33%; }
.spark-two { right:12%; top:20%; font-size:36px; }
.spark-three { left:24%; bottom:8%; font-size:19px; }
.spark-four { right:20%; bottom:6%; font-size:22px; }

.crypto-completion[data-outcome="revealed"] { padding:18px 14px; }
.crypto-completion[data-outcome="revealed"] .crypto-victory-art,
.crypto-completion[data-outcome="revealed"] .crypto-victory-stamp { display:none; }
.crypto-completion[data-outcome="revealed"] #crypto-result { font-size:25px; text-shadow:0 1px #fff1cf; }

.crypto-completion.is-celebrating { animation:crypto-case-arrive 450ms ease-out both; }
.is-celebrating .crypto-victory-lock { animation:crypto-lock-swing 1500ms ease-out both; }
.is-celebrating .crypto-victory-shackle { animation:crypto-shackle-open 650ms 70ms cubic-bezier(.2,.8,.25,1) both; }
.is-celebrating .crypto-victory-halo { animation:crypto-halo-light 2400ms ease-out both; }
.is-celebrating .crypto-victory-spark { animation:crypto-spark-light 1800ms 250ms ease-out both; }
.is-celebrating .spark-two { animation-delay:490ms; }
.is-celebrating .spark-three { animation-delay:710ms; }
.is-celebrating .spark-four { animation-delay:970ms; }
.is-celebrating #crypto-result { animation:crypto-case-arrive 500ms 350ms ease-out both; }
.is-celebrating .crypto-victory-stamp { animation:crypto-stamp-land 500ms 1200ms cubic-bezier(.2,.75,.3,1) both; }
.is-celebrating #crypto-award { animation:crypto-case-arrive 500ms 1550ms ease-out both; }
.crypto-desk.is-celebrating .crypto-word { animation:crypto-word-light 1250ms 270ms ease-out both; }
.crypto-desk.is-celebrating .crypto-word:nth-child(4n+2) { animation-delay:490ms; }
.crypto-desk.is-celebrating .crypto-word:nth-child(4n+3) { animation-delay:710ms; }
.crypto-desk.is-celebrating .crypto-word:nth-child(4n) { animation-delay:970ms; }
.has-result:has([data-outcome="solved"]) .crypto-tile b { color:#69400c; text-shadow:0 0 8px #ffdd74,0 1px #fff2c1; }

@keyframes crypto-case-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes crypto-shackle-open { from { transform:translate(0,10px) rotate(0); clip-path:polygon(0 0,100% 0,100% 100%,65% 100%,65% 100%,0 100%); } 45% { transform:translate(0,-15px) rotate(0); } to { transform:translate(5px,-13px) rotate(15deg); clip-path:polygon(0 0,100% 0,100% 100%,65% 100%,65% 66%,0 66%); } }
@keyframes crypto-lock-swing { 0% { transform:translateX(-50%) rotate(0); } 30% { transform:translateX(-50%) rotate(-13deg); } 55% { transform:translateX(-50%) rotate(4deg); } 80% { transform:translateX(-50%) rotate(-10deg); } 100% { transform:translateX(-50%) rotate(-8deg); } }
@keyframes crypto-stamp-land { 0% { opacity:0; transform:scale(1.7) rotate(-12deg) translateY(-16px); } 60% { opacity:1; transform:scale(.96) rotate(-5deg); } 80% { transform:scale(1.03) rotate(-5deg); } 100% { opacity:1; transform:scale(1) rotate(-5deg); } }
@keyframes crypto-halo-light { 0% { opacity:.25; transform:scale(.65); } 40% { opacity:1; transform:scale(1.1); } 100% { opacity:.8; transform:scale(1); } }
@keyframes crypto-spark-light { 0% { opacity:0; transform:scale(.4); } 30% { opacity:1; transform:scale(1.15); } 100% { opacity:.45; transform:scale(.75); } }
@keyframes crypto-word-light { 0%,100% { filter:none; } 40% { filter:drop-shadow(0 0 7px #ffce42) brightness(1.15); } }

.crypto-completion.is-fading, .crypto-completion.is-celebrating.is-fading { animation:crypto-overlay-fade 1400ms ease both; }
@keyframes crypto-overlay-fade { from { opacity:1; } to { opacity:0; } }

@media(prefers-reduced-motion:reduce) {
 .crypto-completion.is-celebrating, .crypto-completion.is-celebrating *,
 .crypto-completion.is-celebrating #crypto-result, .crypto-completion.is-celebrating #crypto-award,
 .crypto-desk.is-celebrating .crypto-word { animation:none; }
 .crypto-victory-spark { opacity:.65; }
}