/* Exploits: the chip icon (ExploitIcon), the found reveal (ExploitReveal) and the inject overlay (ExploitInject).
   Hacker-terminal flavoured on purpose, so it reads differently from the clean MoveLearned reveal. */

/* ---- The chip ---- */
.sk-exploit {
    --xp-size: 48px;
    --rim-a: #8a6a48; --rim-b: #d6a46c; --rim-c: #6e4c2c;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--xp-size);
    height: var(--xp-size);
    flex-shrink: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 calc(var(--xp-size) * 0.12) color-mix(in srgb, var(--el) 45%, transparent));
}
.sk-exploit.tier-1 { --rim-a: #2f9e64; --rim-b: #7dffb8; --rim-c: #1d6b43; }
.sk-exploit.tier-2 { --rim-a: #2378c9; --rim-b: #8fd2ff; --rim-c: #164f8a; }
.sk-exploit.tier-3 { --rim-a: #7a3fd0; --rim-b: #d6b3ff; --rim-c: #4e2391; }
.sk-exploit.tier-4 { --rim-a: #ff5fd2; --rim-b: #ffe36a; --rim-c: #4fd8ff; }

.sk-exploit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sk-exploit .xp-rim-a { stop-color: var(--rim-a); }
.sk-exploit .xp-rim-b { stop-color: var(--rim-b); }
.sk-exploit .xp-rim-c { stop-color: var(--rim-c); }
.sk-exploit .xp-pins rect { fill: var(--rim-b); opacity: 0.85; }
.sk-exploit .xp-body { fill: #121a2b; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.sk-exploit .xp-traces { stroke: color-mix(in srgb, var(--el) 70%, #ffffff 0%); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; }
.sk-exploit .xp-traces circle { fill: var(--el); stroke: none; }
.sk-exploit .xp-screen { stroke: color-mix(in srgb, var(--el) 60%, transparent); stroke-width: 1.2; }
.sk-exploit .xp-brackets path { fill: none; stroke: #ffffff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.sk-exploit .xp-gloss { fill: #ffffff; opacity: 0.1; }
.sk-exploit .xp-glyph { position: relative; display: grid; place-items: center; color: var(--el); filter: drop-shadow(0 0 4px var(--el)); }
.sk-exploit .xp-count {
    position: absolute; right: -4px; bottom: -4px;
    min-width: 20px; padding: 1px 5px; border-radius: 999px;
    background: #0b1222; border: 1px solid var(--rim-b); color: #fff;
    font: 700 11px/1.4 var(--sc-font-display, inherit);
}

/* Legendary rims shimmer through their colours */
.sk-exploit.tier-4 .xp-rim { animation: xp-holo 4s linear infinite; }
@keyframes xp-holo { to { filter: hue-rotate(360deg); } }

/* Glitch: an RGB split that jitters now and then, and a scanline sweeping down the screen */
.sk-exploit.is-glitch svg { animation: xp-glitch 2.6s steps(1) infinite; }
.sk-exploit.is-glitch .xp-scan {
    position: absolute; left: 22%; right: 22%; top: 26%; height: 8%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--el) 70%, #fff 30%), transparent);
    opacity: 0.55; mix-blend-mode: screen; pointer-events: none;
    animation: xp-scan 1.8s linear infinite;
}
@keyframes xp-scan { from { transform: translateY(0); } to { transform: translateY(calc(var(--xp-size) * 0.42)); } }
@keyframes xp-glitch {
    0%, 86%, 100% { filter: none; transform: none; }
    88% { filter: drop-shadow(2px 0 0 #ff2a6d) drop-shadow(-2px 0 0 #2affea); transform: translateX(1px) skewX(-3deg); }
    91% { filter: drop-shadow(-3px 0 0 #ff2a6d) drop-shadow(3px 0 0 #2affea); transform: translateX(-2px); }
    94% { filter: drop-shadow(1px 0 0 #ff2a6d) drop-shadow(-1px 0 0 #2affea); transform: skewX(4deg); }
}

/* ---- The found reveal ---- */
.sk-xreveal {
    --term: #39ff8f;
    position: fixed; inset: 0; z-index: 1600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px 20px calc(24px + var(--sc-safe-bottom, 0px));
    overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 50% 42%, color-mix(in srgb, var(--el) 22%, #07101c) 0%, #04070d 72%);
    color: #e9fff3; text-align: center;
    animation: sk-loader-in 0.25s ease both;
}
.sk-xreveal-rain { position: absolute; inset: 0; pointer-events: none; opacity: 0.32; }
.sk-xreveal-rain span {
    position: absolute; top: -60%; left: var(--x);
    writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 2px;
    font: 600 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: var(--term); text-shadow: 0 0 6px var(--term);
    animation: xr-rain calc(var(--s) * 1s) linear calc(var(--d) * -0.4s) infinite;
}
@keyframes xr-rain { to { transform: translateY(190vh); } }
.sk-xreveal-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

.sk-xreveal-term {
    position: relative; width: min(340px, 100%); margin-bottom: 4px; text-align: left;
    font: 500 12.5px/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--term);
}
.sk-xreveal-term p {
    margin: 0; white-space: nowrap; overflow: hidden; width: 0;
    animation: xr-type 0.38s steps(28, end) calc(var(--i) * 0.3s) forwards;
}
.sk-xreveal-term b { color: #8affc1; }
.sk-xreveal-term em { font-style: normal; color: var(--el); text-shadow: 0 0 6px var(--el); }
.sk-xreveal-term i { font-style: normal; animation: xr-blink 0.5s steps(1) infinite; }
.sk-xreveal-ok { color: #c8ffe0; }
@keyframes xr-type { to { width: 100%; } }
@keyframes xr-blink { 50% { opacity: 0; } }

.sk-xreveal-chip { position: relative; display: grid; place-items: center; width: 180px; height: 170px; }
.sk-xreveal-chip .sk-exploit { opacity: 0; animation: xr-chip-in 0.7s cubic-bezier(.2, 1.4, .4, 1) 0.95s forwards; }
.sk-xreveal-burst {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--el) 70%, #fff 30%) 0%, transparent 62%);
    opacity: 0; transform: scale(0.3);
    animation: xr-burst 0.9s ease-out 0.95s forwards;
}
@keyframes xr-chip-in {
    0% { opacity: 0; transform: scale(0.2) rotate(-30deg); filter: drop-shadow(-8px 0 0 #ff2a6d) drop-shadow(8px 0 0 #2affea) blur(2px); }
    35% { opacity: 1; transform: scale(1.15) rotate(6deg) skewX(-8deg); filter: drop-shadow(5px 0 0 #ff2a6d) drop-shadow(-5px 0 0 #2affea); }
    55% { transform: scale(0.94) skewX(6deg); filter: drop-shadow(-3px 0 0 #ff2a6d) drop-shadow(3px 0 0 #2affea); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes xr-burst { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

.sk-xreveal-eyebrow {
    font: 700 13px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 4px; color: var(--term); text-shadow: 0 0 8px var(--term);
}
.sk-xreveal-eyebrow span { display: inline-block; white-space: nowrap; overflow: hidden; width: 0; vertical-align: bottom;
    animation: xr-type 0.5s steps(16, end) 1.45s forwards; }
.sk-xreveal-name {
    margin: 0; font-family: var(--sc-font-display); font-size: clamp(26px, 8vw, 38px); line-height: 1.05;
    color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--el) 60%, transparent);
    opacity: 0; animation: xr-rise 0.45s ease 1.9s forwards;
}
.sk-xreveal-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.sk-xreveal-chip-stat {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px; font-weight: 600;
    opacity: 0; animation: xr-rise 0.35s ease forwards;
}
.sk-xreveal-chip-stat:nth-child(1) { animation-delay: 2.1s; }
.sk-xreveal-chip-stat:nth-child(2) { animation-delay: 2.2s; }
.sk-xreveal-chip-stat:nth-child(3) { animation-delay: 2.3s; }
.sk-xreveal-chip-stat:nth-child(4) { animation-delay: 2.4s; }
.sk-xreveal-chip-stat.is-tier { text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; }
.sk-xreveal.tier-1 .is-tier { color: #7dffb8; border-color: #2f9e64; }
.sk-xreveal.tier-2 .is-tier { color: #8fd2ff; border-color: #2378c9; }
.sk-xreveal.tier-3 .is-tier { color: #d6b3ff; border-color: #7a3fd0; }
.sk-xreveal.tier-4 .is-tier { color: #ffe36a; border-color: #ff5fd2; box-shadow: 0 0 12px rgba(255, 95, 210, 0.45); }
.sk-xreveal-note { margin: 4px 0 0; max-width: 320px; font-size: 13.5px; color: #ffd27a; opacity: 0; animation: xr-rise 0.35s ease 2.5s forwards; }
.sk-xreveal-actions { display: flex; gap: 10px; margin-top: 10px; opacity: 0; animation: xr-rise 0.35s ease 2.6s forwards; }
@keyframes xr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Compact (a claimed gift): straight to the chip */
.sk-xreveal.is-compact .sk-xreveal-term { display: none; }
.sk-xreveal.is-compact .sk-xreveal-chip .sk-exploit,
.sk-xreveal.is-compact .sk-xreveal-burst { animation-delay: 0.1s; }
.sk-xreveal.is-compact .sk-xreveal-eyebrow span { animation-delay: 0.5s; }
.sk-xreveal.is-compact .sk-xreveal-name { animation-delay: 0.9s; }
.sk-xreveal.is-compact .sk-xreveal-chip-stat { animation-delay: 1.05s; }
.sk-xreveal.is-compact .sk-xreveal-note,
.sk-xreveal.is-compact .sk-xreveal-actions { animation-delay: 1.2s; }

/* Tap to skip: everything lands at once */
.sk-xreveal.is-skipped *,
.sk-xreveal.is-skipped *::before { animation-delay: 0s !important; animation-duration: 0.01s !important; }
.sk-xreveal.is-skipped .sk-xreveal-rain span { animation-duration: 6s !important; }

/* ---- Injecting ---- */
.sk-xinject {
    --term: #39ff8f;
    position: fixed; inset: 0; z-index: 1650;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 24px 20px calc(24px + var(--sc-safe-bottom, 0px));
    background: radial-gradient(ellipse 70% 55% at 50% 40%, color-mix(in srgb, var(--el) 18%, #07101c) 0%, #03060b 75%);
    color: #e9fff3; text-align: center; overflow: hidden;
    animation: sk-loader-in 0.25s ease both;
}
.sk-xinject-stage { position: relative; display: grid; justify-items: center; }
.sk-xinject-sprite { position: relative; width: 150px; height: 150px; }
.sk-xinject-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.sk-xinject-sprite .is-ghost-r, .sk-xinject-sprite .is-ghost-b { opacity: 0; mix-blend-mode: screen; }
.sk-xinject-sprite .is-ghost-r { filter: drop-shadow(0 0 0 #ff2a6d) sepia(1) saturate(6) hue-rotate(-50deg); }
.sk-xinject-sprite .is-ghost-b { filter: sepia(1) saturate(6) hue-rotate(140deg); }
.sk-xinject-sprite.is-glitching img:first-child { animation: xi-flicker 0.42s steps(2) infinite; }
.sk-xinject-sprite.is-glitching .is-ghost-r { animation: xi-ghost 0.36s steps(1) infinite; }
.sk-xinject-sprite.is-glitching .is-ghost-b { animation: xi-ghost 0.36s steps(1) 0.18s infinite reverse; }
@keyframes xi-flicker { 50% { opacity: 0.78; transform: translateX(-1px) skewX(2deg); } }
@keyframes xi-ghost { 0% { opacity: 0.5; transform: translateX(4px); } 50% { opacity: 0.35; transform: translateX(-5px); } 100% { opacity: 0; } }
.sk-xinject.is-compiled .sk-xinject-sprite { animation: xi-flash 0.7s ease; }
@keyframes xi-flash { 30% { filter: drop-shadow(0 0 22px var(--el)) brightness(1.5); } }

.sk-xinject-port { position: relative; width: 120px; height: 46px; margin-top: 4px; }
.sk-xinject-socket {
    position: absolute; left: 50%; bottom: 0; width: 70px; height: 16px; transform: translateX(-50%);
    border-radius: 6px; background: #0b1424; border: 1px solid color-mix(in srgb, var(--el) 60%, transparent);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 14px color-mix(in srgb, var(--el) 40%, transparent);
}
.sk-xinject-chip { position: absolute; left: 50%; top: -4px; transform: translate(-50%, 0); animation: xi-dock 0.7s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes xi-dock {
    0% { transform: translate(-50%, 90px) scale(0.6); opacity: 0; }
    60% { transform: translate(-50%, -8px) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, 0) scale(1); }
}
.sk-xinject.is-compiled .sk-xinject-chip { animation: xi-spent 0.5s ease forwards; }
@keyframes xi-spent { to { transform: translate(-50%, 6px) scale(0.7); opacity: 0; filter: brightness(2); } }

.sk-xinject-who { margin: 0; font-family: var(--sc-font-display); font-size: 20px; }
.sk-xinject-bar { position: relative; width: min(300px, 86vw); height: 26px; border-radius: 6px; overflow: hidden;
    background: #08111f; border: 1px solid rgba(57, 255, 143, 0.35); }
.sk-xinject-bar span { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 0.05s linear;
    background: repeating-linear-gradient(90deg, var(--term) 0 8px, color-mix(in srgb, var(--term) 60%, transparent) 8px 10px);
    box-shadow: 0 0 12px var(--term); }
.sk-xinject-bar small { position: relative; display: block; line-height: 26px; letter-spacing: 2px; mix-blend-mode: difference; color: #fff;
    font: 700 11.5px/26px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.sk-xinject-moves { display: grid; justify-items: center; gap: 6px; min-height: 96px;
    font: 700 19px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.sk-xinject-old, .sk-xinject-new { display: inline-flex; align-items: center; gap: 8px; }
.sk-xinject-old { color: var(--old); opacity: 0.85; transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease; }
.sk-xinject-old.is-gone { opacity: 0; filter: blur(4px); transform: translateY(6px) scale(0.96); }
.sk-xinject-arrow { color: rgba(255, 255, 255, 0.35); font-size: 18px; }
.sk-xinject-new { color: #fff; opacity: 0.25; font-size: 23px; }
.sk-xinject-new.is-on { opacity: 1; }
.sk-xinject.is-compiled .sk-xinject-new { color: var(--el); text-shadow: 0 0 14px var(--el); animation: xi-pop 0.5s ease; }
@keyframes xi-pop { 40% { transform: scale(1.12); } }
.sk-xinject-caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 2px; vertical-align: -0.12em;
    background: var(--term); animation: xr-blink 0.6s steps(1) infinite; }
.sk-xinject-caret.is-done { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sk-exploit *, .sk-exploit svg, .sk-xreveal *, .sk-xinject * {
        animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    }
    .sk-xreveal-rain { display: none; }
}

/* ---- In the Backpack's Pouch: gems and Exploits side by side, tap to use ---- */
.backpack-pouch .backpack-count.is-full { color: var(--sc-warning, #ffb43d); }
.backpack-pouch .backpack-sub-head { display: flex; align-items: center; gap: 6px; scroll-margin-top: 60px; }
.backpack-pouch .backpack-sub-head small { color: var(--sc-text-muted); font-weight: 700; }
.gem-pouch-hint.is-top { margin: 0 0 4px; }
.gem-pouch.is-empties { margin-top: 8px; }
.backpack-pouch-none { grid-column: 1 / -1; margin: 0; padding: 10px; color: var(--sc-text-faint); font-size: 13px; text-align: center; }
.gem-pouch-slot.is-tappable { cursor: pointer; font: inherit; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.gem-pouch-slot.is-tappable:hover { transform: translateY(-2px); }
.gem-pouch-slot.is-tappable:active { transform: scale(0.97); }
.gem-pouch-slot.is-picked { border-color: var(--sc-primary); box-shadow: 0 0 0 2px rgba(var(--sc-primary-rgb), 0.35); }
.gem-pouch-slot.is-exploit { background: linear-gradient(180deg, color-mix(in srgb, var(--el) 12%, transparent), transparent 70%); }
.gem-pouch-slot.is-exploit small { color: var(--el); }
.gem-pouch-slot.is-exploit.is-picked { border-color: var(--el); box-shadow: 0 0 0 2px color-mix(in srgb, var(--el) 40%, transparent); }
.gem-pouch-slot.is-just-done { animation: sk-pouch-slot-in 650ms ease both; }

.backpack-pouch-sheet {
    position: relative; margin-top: 10px; padding: 12px; border-radius: 16px;
    background: var(--sc-bg-elevated); border: 1px solid color-mix(in srgb, var(--el) 40%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.backpack-pouch-sheet-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; margin-bottom: 8px; text-align: left; }
.backpack-pouch-sheet-head span { display: grid; gap: 1px; min-width: 0; }
.backpack-pouch-sheet-head b { font-size: 16px; }
.backpack-pouch-sheet-head small { color: var(--el); font-weight: 700; font-size: 12px; }
.backpack-pouch-sheet-head em { color: var(--sc-text-muted); font-style: normal; font-size: 12.5px; }
.backpack-pouch-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--sc-text-muted); font-size: 18px; }
.backpack-pouch-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.backpack-drop { color: var(--sc-danger) !important; padding-left: 0; }
.backpack-send-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--sc-text-faint); font-size: 12px; }
.backpack-pouch-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.backpack-pouch-confirm span { flex: 1 1 100%; }

.backpack-replace { display: grid; gap: 6px; margin-top: 4px; }
.backpack-replace-move {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: inherit; font: inherit;
}
.backpack-replace-move span { display: grid; min-width: 0; }
.backpack-replace-move small { color: var(--sc-text-muted); font-size: 12px; }
.backpack-replace-move:disabled { opacity: 0.45; }
.backpack-replace-move.is-picked { border-color: var(--mv); background: color-mix(in srgb, var(--mv) 12%, transparent); }
.backpack-replace-delta { display: grid !important; justify-items: end; margin-left: auto; font-size: 11.5px; font-weight: 700; }
.backpack-replace-delta i { font-style: normal; }
.backpack-replace-delta .is-up { color: var(--sc-success); }
.backpack-replace-delta .is-down { color: var(--sc-danger); }

/* A gem dropping into its Skanimal's socket */
.backpack-socketed { position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin: 6px auto 0; }
.backpack-socketed-sprite img { width: 104px; height: 104px; object-fit: contain; }
.backpack-socketed-gem { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    animation: bp-gem-drop 0.7s cubic-bezier(.3, 1.4, .5, 1) both; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }
.backpack-socketed-flash { position: absolute; bottom: 4px; left: 50%; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.9), transparent 30%, rgba(160, 220, 255, 0.8), transparent 60%, rgba(255, 200, 255, 0.8), transparent);
    opacity: 0; animation: bp-gem-flash 0.6s ease 0.55s both; mix-blend-mode: screen; }
@keyframes bp-gem-drop { 0% { transform: translate(-50%, -110px) scale(1.4) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, 0) scale(1); } }
@keyframes bp-gem-flash { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(90deg); } }

/* The scan screen's Exploit card */
.scan-exploit-card { background: radial-gradient(ellipse 80% 60% at 50% 20%, color-mix(in srgb, var(--el, #39ff8f) 16%, transparent), transparent 70%), var(--sc-bg-elevated); }
.scan-exploit-tag { font: 700 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase; color: #39ff8f; }
.letter-loot.is-exploit small { color: #39ff8f; }

@media (prefers-reduced-motion: reduce) {
    .backpack-socketed-gem, .backpack-socketed-flash { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}