/* The Celestial Rift's levels: the corruption meter and the Cursed Angel's interference (corruption.js) */

.rift-watch {
    --v: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(760px, calc(100% - 8px));
    margin: 0 auto 12px;
    padding: 8px 16px 8px 8px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(26, 10, 58, .92), rgba(52, 20, 96, .9));
    border: 2px solid #e8c66a;
    box-shadow: 0 0 0 4px rgba(26, 10, 58, .5), 0 10px 30px rgba(20, 6, 46, .45), inset 0 0 22px rgba(155, 107, 255, calc(.15 + var(--v) * .5));
    color: #f6eeff;
    font-family: "Nunito", system-ui, sans-serif;
}
.rift-watch::before { content: ""; position: absolute; inset: 3px; border-radius: 14px; border: 1px solid rgba(232, 198, 106, .35); pointer-events: none; }
.rift-watch.warn { border-color: #f2a8ff; }
.rift-watch.danger { animation: rw-danger 1.1s ease-in-out infinite; }
@keyframes rw-danger { 50% { box-shadow: 0 0 0 4px rgba(122, 60, 255, .55), 0 0 40px rgba(155, 60, 255, .8), inset 0 0 30px rgba(255, 80, 200, .45); } }

.rw-eye { flex: 0 0 auto; width: 104px; height: 62px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 0 calc(6px + var(--v) * 14px) rgba(155, 107, 255, .9)); }
.rw-tear { width: 100%; height: 100%; overflow: visible; transform: scale(calc(.82 + var(--v) * .22)); transition: transform .6s ease; }
.rw-tear-glow { fill: none; stroke: rgba(255, 210, 120, .55); stroke-width: 7; stroke-linejoin: round; filter: blur(3px); animation: rw-tear-pulse 2.4s ease-in-out infinite; }
.rw-tear-edge { fill: none; stroke: #ffe7a3; stroke-width: 2.2; stroke-linejoin: round; }
.rw-angel * { animation: none !important; }
.rw-shut { fill: #14062e; opacity: 0; transition: opacity .25s; }
.rw-eye.shut .rw-shut { animation: rw-shut .9s ease; }
@keyframes rw-shut { 20%, 70% { opacity: 1; } }
.rw-eye.cast .rw-tear { animation: rw-cast .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rw-cast { 40% { transform: scale(1.18) rotate(-3deg); filter: brightness(1.8); } }
@keyframes rw-tear-pulse { 50% { stroke: rgba(196, 155, 255, .8); } }

.rw-main { flex: 1; min-width: 0; }
.rw-top { display: flex; align-items: baseline; gap: 10px; min-height: 22px; }
.rw-top small { color: #e8c66a; font: 700 .78rem "Cinzel", serif; letter-spacing: .12em; }
.rw-pct { font: 700 1.05rem "Cinzel", serif; color: #fff6d8; text-shadow: 0 0 10px rgba(232, 198, 106, .6); }
.rift-watch.danger .rw-pct { color: #ff9ad6; text-shadow: 0 0 12px rgba(255, 80, 200, .9); }
.rw-say { flex: 1; min-width: 0; overflow: hidden; color: #d9c4ff; font-size: .82rem; font-style: italic; font-weight: 700; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.rw-say.in { animation: rw-in .4s ease-out; }
.rw-meter { position: relative; height: 16px; margin: 4px 14px 2px; border-radius: 9px; background: linear-gradient(#0c0420, #24104a); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 2px rgba(232, 198, 106, .7); overflow: visible; }
.rw-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 9px; overflow: hidden; background: linear-gradient(90deg, #6b3fd6, #9b6bff 50%, #e86bd6); box-shadow: 0 0 14px rgba(155, 107, 255, .8); transition: width .45s cubic-bezier(.3, .9, .3, 1); }
.rw-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%); background-size: 220% 100%; animation: rw-shine 3s linear infinite; }
@keyframes rw-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.rw-veins { position: absolute; inset: 0; width: calc(var(--v) * 100%); background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255, 220, 255, .35) 10px 11px, transparent 11px 19px); border-radius: 9px; pointer-events: none; transition: width .45s; }
.rw-mark { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; background: rgba(232, 198, 106, .8); }
.rw-mark.hot { background: #ff9ad6; box-shadow: 0 0 8px #ff6ad6; }
.rw-chain { position: absolute; top: 50%; width: 16px; height: 8px; margin-top: -4px; border: 2.5px solid #e8c66a; border-radius: 6px; }
.rw-chain.l { left: -16px; }
.rw-chain.r { right: -16px; }
.rw-meter.hit { animation: rw-hit .4s ease; }
@keyframes rw-hit { 30% { transform: translateX(-3px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 2px #ff6ad6, 0 0 18px #ff6ad6; } 60% { transform: translateX(3px); } }
.rw-meter.heal { animation: rw-heal .6s ease; }
@keyframes rw-heal { 40% { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 2px #fff6d8, 0 0 20px rgba(255, 230, 160, .9); } }
.rw-note { min-height: 18px; color: #e3c8ff; font-size: .78rem; font-weight: 800; }
.rw-note[data-tone="bad"] { color: #ffb3e6; }
.rw-note[data-tone="good"] { color: #ffe7a3; }
.rw-note.in { animation: rw-in .35s ease-out; }
@keyframes rw-in { from { opacity: 0; transform: translateY(4px); } }
.rift-watch.sealed .rw-tear { animation: rw-close 2.4s ease forwards; }
.rift-watch.sealed .rw-fill, .rift-watch.sealed .rw-veins { width: 0 !important; transition: width 2s ease; }
@keyframes rw-close { 30% { transform: scale(1.1); filter: brightness(2.2); } 100% { transform: scale(.05, .3); opacity: 0; } }

/* the screen's edges darken violet as the corruption rises */
.rift-vignette { --v: 0; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .6s;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(60, 10, 120, calc(var(--v) * .55)) 78%, rgba(20, 0, 50, calc(var(--v) * .8)) 100%); }
.in-rift .rift-vignette { opacity: 1; }
.rift-danger .rift-vignette { animation: rw-vig 1.1s ease-in-out infinite; }
@keyframes rw-vig { 50% { filter: brightness(1.5) hue-rotate(20deg); } }
html.rift-flash::after { content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; background: radial-gradient(circle, rgba(196, 155, 255, .4), rgba(60, 10, 120, .25)); animation: rw-flash .5s ease-out forwards; }
@keyframes rw-flash { to { opacity: 0; } }

/* the tricks */
.board-wrap { position: relative; }
.rw-piece { padding: 0; border: 0; background: none; cursor: pointer; }
.rw-feather { position: absolute; top: -22%; z-index: 30; width: 26%; aspect-ratio: 1 / 2.6; animation: rw-fall var(--dur, 9s) linear forwards; filter: drop-shadow(0 6px 10px rgba(20, 6, 46, .6)) drop-shadow(0 0 6px rgba(155, 107, 255, .6)); }
.rw-feather svg { width: 100%; height: 100%; animation: rw-sway 2.2s ease-in-out infinite alternate; transform-origin: 50% 10%; }
@keyframes rw-fall { to { top: 105%; } }
@keyframes rw-sway { from { transform: rotate(-24deg) translateX(-12%); } to { transform: rotate(20deg) translateX(14%); } }
.rw-whisper { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; color: #b48cff; font: italic 700 1em var(--font-cell, serif); text-shadow: 0 0 10px rgba(155, 107, 255, .9); animation: rw-whisper 1.6s ease-in-out infinite; }
@keyframes rw-whisper { 50% { opacity: .45; transform: scale(.94); } }
.clues.rw-glare { position: relative; }
.clues.rw-glare::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 250, 230, .96) 30%, rgba(255, 246, 216, .98) 50%, rgba(255, 250, 230, .96) 70%, transparent 100%);
    background-size: 240% 100%; animation: rw-glare 2.4s ease-in-out infinite; }
@keyframes rw-glare { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.clues li.rw-chained { position: relative; }
.clues li.rw-chained .clue-text { filter: blur(5px); }
.clues li.rw-chained::after { content: ""; position: absolute; inset: 2px 0; border-radius: 8px; pointer-events: none;
    background: repeating-linear-gradient(28deg, transparent 0 7px, rgba(232, 198, 106, .95) 7px 10px, transparent 10px 15px), repeating-linear-gradient(-28deg, transparent 0 7px, rgba(201, 144, 47, .9) 7px 10px, transparent 10px 15px);
    box-shadow: 0 0 10px rgba(232, 198, 106, .6); }
.clues li.rw-shake, .rw-seal.rw-shake { animation: shake .35s; }
.rw-seal { position: absolute; inset: 6%; z-index: 7; display: grid; place-items: center; animation: rw-seal-in .5s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 0 8px rgba(232, 198, 106, .9)); }
.rw-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rw-seal-spin 9s linear infinite; }
.rw-seal b { position: relative; color: #2a1d3f; font: 800 .8em "Nunito", sans-serif; }
@keyframes rw-seal-in { from { transform: scale(0) rotate(-120deg); } }
@keyframes rw-seal-spin { to { transform: rotate(360deg); } }
.board-area.rw-dim #board { filter: brightness(calc(1 - var(--dim, 0) * .82)) saturate(calc(1 - var(--dim, 0) * .7)); transition: filter .3s; }

@media (max-width: 600px) {
    .rift-watch { gap: 8px; padding: 6px 10px 6px 6px; }
    .rw-eye { width: 72px; height: 44px; }
    .rw-say { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rw-feather { animation-duration: calc(var(--dur, 9s) * 1.5); }
    .rw-shine, .rw-whisper, .rw-seal svg, .rift-danger .rift-vignette, .rift-watch.danger { animation: none; }
}

/* ---- harder: the corruption seeps into your letters, and the angel casts spells ---- */
/* a letter the corruption just touched: a violet pulse */
#board .cell.rw-seeped { animation: rw-seeped .9s ease-out; }
@keyframes rw-seeped { 0% { box-shadow: inset 0 0 0 3px #b48cff, 0 0 22px rgba(155, 107, 255, .95); background-color: rgba(107, 63, 214, .45); } 100% { box-shadow: none; } }
/* the squares a spell is aimed at glow while it winds up */
#board .cell.rw-aim { box-shadow: inset 0 0 0 2px #ffd06b, 0 0 14px rgba(255, 214, 120, .85); animation: rw-aim .4s ease-in-out infinite alternate; }
@keyframes rw-aim { to { box-shadow: inset 0 0 0 3px #fff6d8, 0 0 24px rgba(255, 236, 170, 1); background-color: rgba(255, 236, 170, .3); } }
/* the omen: click it before its ring runs out */
.rw-omen { position: absolute; z-index: 9; width: 68px; height: 68px; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle, rgba(42, 15, 90, .92) 0 55%, rgba(42, 15, 90, 0) 72%); filter: drop-shadow(0 0 12px rgba(255, 214, 120, .9));
    animation: rw-omen-in .35s cubic-bezier(.2, 1.6, .4, 1), rw-omen-bob 1s ease-in-out .35s infinite alternate; transition: left .25s, top .25s; }
.rw-omen svg { position: absolute; inset: 12px; width: 44px; height: 44px; }
.rw-omen-ring { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#ffd06b var(--left, 100%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: rw-omen-ring var(--dur, 3s) linear forwards; }
@property --left { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes rw-omen-ring { to { --left: 0%; } }
.rw-omen b { position: absolute; right: -6px; bottom: -6px; min-width: 22px; padding: 1px 5px; border-radius: 10px; background: #2a0f5a; color: #ffe7a3; font: 800 .75rem system-ui, sans-serif; box-shadow: 0 0 0 2px #e8c66a; }
.rw-omen b:empty { display: none; }
.rw-omen.rw-shake { animation: shake .3s; }
.rw-omen-corrupt { filter: drop-shadow(0 0 12px rgba(155, 107, 255, .95)); }
@keyframes rw-omen-in { from { transform: scale(0) rotate(-90deg); } }
@keyframes rw-omen-bob { to { transform: translateY(-5px) scale(1.04); } }
/* the eye burns gold while it casts */
.rift-watch.casting .rw-eye { animation: rw-cast .5s ease-in-out infinite; filter: drop-shadow(0 0 10px #ffd06b); }