/* Tapp The Button - The Undercroft: the cinematic layer (see js/aaa.js).
 * Loaded after crawl.css and tuskbar.css. Only adds; the game's own styles stay. */

/* the post-processed picture sits on the 2D canvas, which keeps the pointer */
#cr-gl { position: fixed; inset: 0; display: block; pointer-events: none; z-index: 1; }
#cr-gl[hidden] { display: none; }
html.cr-post #cr-canvas { opacity: 0; }
#cr-gl.punch { animation: punch .22s ease-out; }
@keyframes punch { 0% { transform: scale(1.028); } 100% { transform: none; } }

/* ---------------------------------------------------------------- splash */
.cr-splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #050408; animation: cs-in .5s ease both; }
.cr-splash.out { animation: cs-out .8s ease both; pointer-events: none; }
.cr-splash .cs-in { text-align: center; animation: cs-rise 1.6s cubic-bezier(.2,.7,.2,1) both; }
.cr-splash p { margin: 0 0 10px; font: 400 11px 'Silkscreen', monospace; letter-spacing: .3em; text-transform: uppercase; color: #c9a227; }
.cr-splash h1 { margin: 0; font: 400 clamp(38px, 8vw, 96px)/.9 'Silkscreen', var(--serif, serif); text-transform: uppercase; letter-spacing: .04em; color: #f6e7c1;
  background: linear-gradient(180deg, #fff3cf 0%, #f2c66a 45%, #9a5d14 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,160,50,.4)) drop-shadow(0 4px 0 #2a1a08); }
.cr-splash h1 span { display: block; }
.cr-splash .cs-bar { display: block; width: min(320px, 60vw); height: 4px; margin: 26px auto 0; background: #1b1620; box-shadow: 0 0 0 2px #0a0604; overflow: hidden; }
.cr-splash .cs-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a227, #ffe49a, #c9a227); animation: cs-fill 1.5s ease-in-out .2s both; }
@keyframes cs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-out { to { opacity: 0; } }
@keyframes cs-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cs-fill { to { width: 100%; } }

/* ------------------------------------------------------------- cinematics */
.cr-cine { position: fixed; inset: 0; z-index: 31; pointer-events: none; overflow: hidden; }
.cr-cine .cx-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: translateY(var(--dir, -100%)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cr-cine .cx-bar.top { top: 0; --dir: -100%; }
.cr-cine .cx-bar.bot { bottom: 0; --dir: 100%; }
.cr-cine.floorcard .cx-bar, .cr-cine.bossin .cx-bar { transform: none; transition-duration: .35s; }
.cr-cine.floorcard .cx-bar { animation: cx-bars 2.6s ease both; }
.cr-cine.bossin .cx-bar { animation: cx-bars 3.4s ease both; }
@keyframes cx-bars { 0%, 72% { transform: none; } 100% { transform: translateY(var(--dir)); } }

.cr-cine .cx-card { position: absolute; left: 0; right: 0; top: 38%; text-align: center; opacity: 0; }
.cr-cine.floorcard .cx-card { animation: cx-card 2.6s ease both; }
.cr-cine .cx-card em { display: block; font: 400 12px 'Silkscreen', monospace; letter-spacing: .32em; text-transform: uppercase; color: #c9a227; font-style: normal; }
.cr-cine .cx-card b { display: block; margin-top: 6px; font: 400 clamp(30px, 6vw, 72px)/1 'Silkscreen', var(--serif, serif); text-transform: uppercase; letter-spacing: .06em;
  background: linear-gradient(180deg, #fff3cf 0%, #f2c66a 50%, #9a5d14 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,160,50,.45)) drop-shadow(0 3px 0 #2a1a08); }
.cr-cine .cx-card span { display: block; margin-top: 10px; font: italic 400 15px var(--serif, serif); color: #d8cfe8; text-shadow: 0 2px 4px #000; letter-spacing: .04em; }
@keyframes cx-card { 0% { opacity: 0; transform: translateY(12px) scale(.98); letter-spacing: .2em; } 14% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* the game's own floor banner steps aside while the card plays */
body.cx-floorcard .cr-banner { opacity: 0 !important; animation: none !important; }

/* kill combo: top centre, grows and heats with the count */
.cr-cine .cx-combo { position: absolute; left: 50%; top: 64px; transform: translateX(-50%) scale(.6); opacity: 0; text-align: center; transition: opacity .25s, transform .25s; }
.cr-cine .cx-combo.on { opacity: 1; transform: translateX(-50%) scale(1); }
.cr-cine .cx-combo b { display: block; font: 400 clamp(28px, 4vw, 44px)/1 'Silkscreen', monospace; color: #fff1c4; text-shadow: 0 0 14px rgba(255,200,80,.6), 0 3px 0 #2a1a08, 0 0 2px #000; }
.cr-cine .cx-combo span { display: block; font: 400 10px 'Silkscreen', monospace; letter-spacing: .3em; text-transform: uppercase; color: #c9a227; }
.cr-cine .cx-combo.warm b { color: #ffd27a; text-shadow: 0 0 18px rgba(255,150,40,.8), 0 3px 0 #2a1a08; }
.cr-cine .cx-combo.hot b { color: #ff8a3d; text-shadow: 0 0 26px rgba(255,90,20,.95), 0 3px 0 #2a1a08; }
.cr-cine .cx-combo.pop b { animation: cx-pop .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes cx-pop { 0% { transform: scale(1.5) rotate(-3deg); } 100% { transform: none; } }

/* level up: a ribbon that drops in, holds, lifts */
.cr-cine .cx-lvl { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); text-align: center; opacity: 0; }
.cr-cine .cx-lvl.on { animation: cx-lvl 2.4s ease both; }
.cr-cine .cx-lvl b { display: block; padding: 10px 28px; font: 400 clamp(22px, 3.6vw, 40px)/1 'Silkscreen', monospace; text-transform: uppercase; letter-spacing: .1em; color: #2a1a08;
  background: linear-gradient(180deg, #ffe9a8, #e6b43a 60%, #b8831a); box-shadow: 0 0 0 2px #0a0604, 0 0 0 4px #c9a227, 0 12px 30px rgba(0,0,0,.6), 0 0 40px rgba(255,180,60,.45); }
.cr-cine .cx-lvl span { display: block; margin-top: 8px; font: 400 11px 'Silkscreen', monospace; letter-spacing: .2em; text-transform: uppercase; color: #ffe9a8; text-shadow: 0 2px 4px #000; }
@keyframes cx-lvl { 0% { opacity: 0; transform: translate(-50%, -30px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }

/* hurt: a sharp red edge on top of the shader's slow one */
.cr-cine .cx-hurt { position: absolute; inset: -2px; opacity: 0; background: radial-gradient(60% 60% at 50% 50%, transparent 55%, rgba(170,0,20,.75) 100%); }
.cr-cine .cx-hurt.hit { animation: cx-hit .5s ease-out; }
@keyframes cx-hit { 0% { opacity: .9; } 100% { opacity: 0; } }

/* the title's fog, drifting, and only when the title shows */
.cr-cine .cx-fog { position: absolute; inset: -10%; opacity: 0; transition: opacity .6s; }
body:has(.cr-title:not([hidden])) .cx-fog { opacity: 1; }
.cr-cine .cx-fog i { position: absolute; width: 70%; height: 60%; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .5; }
.cr-cine .cx-fog i:nth-child(1) { left: -10%; top: 30%; background: radial-gradient(circle, rgba(120,60,160,.45), transparent 70%); animation: fogA 26s ease-in-out infinite alternate; }
.cr-cine .cx-fog i:nth-child(2) { right: -20%; top: 10%; background: radial-gradient(circle, rgba(255,140,50,.28), transparent 70%); animation: fogB 31s ease-in-out infinite alternate; }
.cr-cine .cx-fog i:nth-child(3) { left: 20%; bottom: -20%; width: 90%; background: radial-gradient(circle, rgba(60,30,80,.6), transparent 70%); animation: fogA 38s ease-in-out infinite alternate-reverse; }
@keyframes fogA { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, -8%) scale(1.15); } }
@keyframes fogB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12%, 10%) scale(.95); } }

/* ------------------------------------------------------------- the title */
.cr-title { background: radial-gradient(50% 45% at 50% 62%, rgba(255,150,50,.18), transparent 70%), radial-gradient(80% 70% at 50% 40%, rgba(40,20,60,.5), rgba(5,4,9,.97)); }
/* light shafts from above, slowly swinging */
.cr-title::after { content: ''; position: absolute; inset: -20% -10%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 178deg at 50% -10%, transparent 0deg, rgba(255,190,110,.09) 3deg, transparent 6deg, transparent 10deg, rgba(255,190,110,.07) 12deg, transparent 15deg, transparent 20deg, rgba(255,190,110,.1) 22deg, transparent 26deg, transparent 180deg, rgba(255,190,110,.08) 183deg, transparent 186deg);
  animation: shafts 14s ease-in-out infinite alternate; }
@keyframes shafts { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.cr-title-in { transition: transform .25s ease-out; will-change: transform; }
.cr-title h1 { position: relative; }
/* the gold breathes: a slow glow under the pixel outline */
.cr-title-in h1 { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255,160,50,.25)); } 50% { filter: drop-shadow(0 0 30px rgba(255,180,70,.55)); } }
.cr-embers i { width: 4px; height: 4px; box-shadow: 0 0 10px 3px rgba(255,150,40,.75); }
.cr-title .cr-btn.primary { box-shadow: 0 0 0 2px var(--px-line, #0a0604), 0 0 24px rgba(255,180,60,.35), 0 6px 0 #4a2a08; animation: beckon 2.6s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* ---------------------------------------------------------------- camp */
.cr-camp { background: radial-gradient(60% 50% at 50% 100%, rgba(255,140,50,.22), transparent 70%), radial-gradient(80% 70% at 50% 30%, rgba(40,20,60,.5), rgba(5,4,9,.97)); }
.cr-camp::before { content: ''; position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: conic-gradient(from 180deg at 50% -10%, transparent 0deg, rgba(255,190,110,.08) 2deg, transparent 5deg, transparent 12deg, rgba(255,190,110,.06) 14deg, transparent 17deg, transparent 180deg, rgba(255,190,110,.07) 182deg, transparent 185deg);
  animation: shafts 18s ease-in-out infinite alternate; }
.cc-hero { position: relative; transition: transform .25s ease-out; will-change: transform; }
.cc-portrait { filter: drop-shadow(0 0 18px rgba(255,170,60,.35)) drop-shadow(0 10px 10px rgba(0,0,0,.6)); }
.cr-camp-sky .fire { filter: blur(5px); }

/* ----------------------------------------------------------------- HUD */
.cr-orb { box-shadow: 0 0 0 3px var(--px-line, #0a0604), 0 0 0 6px #5b3b22, 0 0 30px var(--orb-glow, rgba(0,0,0,0)), 0 12px 30px rgba(0,0,0,.7); }
.cr-orb.life { --orb-glow: rgba(220,30,60,.45); }
.cr-orb.mana { --orb-glow: rgba(60,100,255,.45); }
/* the liquid's surface: a soft moving crest on the fill */
.cr-orb i::before { content: ''; position: absolute; left: -20%; right: -20%; top: -6px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.22); filter: blur(2px); animation: slosh 3.2s ease-in-out infinite; }
.cr-orb.mana i::before { animation-duration: 4.1s; }
@keyframes slosh { 0%, 100% { transform: translateX(-4%) rotate(-2deg); } 50% { transform: translateX(4%) rotate(2deg); } }
/* glass: a brighter highlight and a rim */
.cr-orb::after { background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.45), transparent 32%), radial-gradient(circle at 50% 50%, transparent 70%, rgba(0,0,0,.45) 100%); }
.cr-orb span { font-size: 13px; }
.cr-skill { transition: transform .12s ease, filter .12s ease; }
.cr-skill:hover { transform: translateY(-2px); filter: brightness(1.15); }
.cr-skill:active { transform: translateY(1px); }
.cr-xp i { box-shadow: 0 0 10px rgba(255,200,80,.5); }
.cr-top .cr-purse { text-shadow: 0 0 10px rgba(255,200,80,.4); }

/* banners: bigger, lit, with a sweep */
.cr-banner b { filter: drop-shadow(0 0 20px rgba(255,170,60,.5)); }
.cr-banner::before { content: ''; position: absolute; left: -20%; right: -20%; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(255,210,120,.6), transparent); opacity: 0; }
.cr-banner.show::before { animation: sweep 1.2s ease-out .1s both; }
@keyframes sweep { 0% { opacity: 0; transform: translateY(-50%) scaleX(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scaleX(1); } }

/* pause: the dungeon freezes behind a cold glass */
.cr-pause { backdrop-filter: blur(10px) saturate(.5) brightness(.7); -webkit-backdrop-filter: blur(10px) saturate(.5) brightness(.7); }
.cr-pause nav #cr-gfx span { display: block; font-size: 11px; color: var(--dim, #9a90b0); }

/* death: slow red bleed */
.cr-death { background: radial-gradient(60% 60% at 50% 40%, rgba(120,10,30,.55), rgba(5,4,9,.96)); animation: bleed 1.2s ease both; }
@keyframes bleed { from { background-color: rgba(120,0,10,.6); } to { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .cr-title::after, .cr-camp::before, .cr-title-in h1, .cr-orb i::before, .cr-title .cr-btn.primary, .cr-cine .cx-fog i { animation: none; }
}
@media (max-width: 720px) {
  .cr-cine .cx-combo { top: 54px; }
  .cr-cine .cx-bar { height: 7vh; }
}

/* the art credit on the title */
.cr-credit { margin: 14px 0 0; font-size: 11px; color: var(--dim, #9a90b0); }
.cr-credit a { color: #c9a227; }

/* ------------------------------------------------- the three ways down */
.cr-modehelp { position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; padding: 20px; background: rgba(5,4,9,.82); backdrop-filter: blur(6px); overflow: auto; }
.cr-modehelp[hidden] { display: none; }
.cr-modehelp-in { width: min(980px, 100%); text-align: center; }
.cr-modehelp h2 { margin: 4px 0 18px; }
.mh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.mh-card { --mc: #ffd35d; display: grid; gap: 8px; align-content: start; padding: 18px 16px 16px; text-align: left; cursor: pointer; color: var(--ink, #ece4f6);
  background: color-mix(in srgb, var(--mc) 10%, #14101c); border: 2px solid color-mix(in srgb, var(--mc) 55%, transparent); box-shadow: 0 0 0 2px #0a0604, 0 20px 50px rgba(0,0,0,.6); font: inherit; }
.mh-card:hover { background: color-mix(in srgb, var(--mc) 18%, #14101c); border-color: var(--mc); transform: translateY(-2px); }
.mh-card b { font: 400 20px/1 'Silkscreen', var(--serif, serif); color: var(--mc); text-transform: uppercase; letter-spacing: .04em; }
.mh-card em { font-style: normal; font-size: 12px; color: var(--dim, #9a90b0); }
.mh-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #d8cfe8; }
.mh-card span { margin-top: 4px; font: 400 10px 'Silkscreen', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--mc); }
.mh-foot { margin: 0 0 14px; color: var(--dim, #9a90b0); font-size: 13px; }
/* the chosen mode explained on the camp card */
.cc-mode-why { --mc: #ffd35d; margin: 0 0 12px; padding: 12px 14px; background: color-mix(in srgb, var(--mc) 8%, #14101c); border-left: 3px solid var(--mc); text-align: left; }
.cc-mode-why b { font: 400 14px 'Silkscreen', monospace; color: var(--mc); text-transform: uppercase; letter-spacing: .06em; }
.cc-mode-why p { margin: 6px 0; font-size: 13px; line-height: 1.45; color: #d8cfe8; }
.cc-mode-why ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--dim, #9a90b0); }
.cc-mode-why li::marker { color: var(--mc); }
@media (max-width: 760px) { .mh-cards { grid-template-columns: 1fr; } }