/* --- RESET & ROOT CONFIG --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
user-select: none;
touch-action: manipulation;
}
/* Load Custom JSL Blackletter Font */
@font-face {
font-family: 'JSLBlackletter';
src: url('assets/fonts/jsl.TTF') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Load the custom runic font */
@font-face {
font-family: 'Anglorunic';
src: url('../assets/fonts/Anglorunic.ttf') format('truetype');
}
/* Create a utility class specifically for runic words */
.runic-text {
font-family: 'Anglorunic', sans-serif;
font-size: 1.4rem; /* Sometimes custom fonts render smaller, adjust this as needed! */
color: #ff3333; /* Optional: Make the runic words glow red to stand out */
display: inline-block;
margin: 0 0.25em;
}
:root {
--bg-color: #000000;
--text-color: #ffffff;
--gothic-font: 'JSLBlackletter', 'UnifrakturMaguntia', cursive, serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--gothic-font);
/* CRITICAL FIX: Pins the app to the absolute visual viewport, ignoring Safari UI bars */
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 100svh; /* FIXED: Prevents toolbar clipping on iOS */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
filter: brightness(0.85);
transition: filter 1s ease;
}
/* --- THEME PALETTES --- */
body.forest #dungeon-viewport,
body.forest #minimap-canvas,
body.forest .sword-overlay,
body.forest .lantern-hand-overlay,
body.forest .spell-hand-overlay {
filter: sepia(100%) hue-rotate(65deg) saturate(4.5) contrast(1.1) brightness(0.9);
}
body.ritual #dungeon-viewport,
body.ritual .sword-overlay,
body.ritual .lantern-hand-overlay,
body.ritual .spell-hand-overlay {
filter: contrast(1.1) brightness(0.9);
}
/* CHANGED: Explicitly set opacity to 1 !important to override mushroom trip defaults */
body.ritual #dungeon-viewport::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 200;
mix-blend-mode: multiply;
animation: ritualColorShift 8s infinite alternate ease-in-out;
opacity: 1 !important;
}
@keyframes ritualColorShift {
0% { background-color: #1aa3ff; }
100% { background-color: #9900ff; }
}
.gothic-text, .gothic-btn, .gothic-link {
font-family: var(--gothic-font);
color: #ffffff;
text-shadow: 0 0 4px #000000;
text-transform: lowercase;
}
/* --- PLAYER INFO HEADER --- */
#player-info-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center; /* CHANGED: Added to ensure the image and level text vertically center */
padding: 10px 10px 0 10px;
font-size: clamp(1.1rem, 4vw, 1.3rem);
color: #aaaaaa;
text-shadow: 1px 1px 0 #000000;
text-transform: lowercase;
}
/* NEW: HUD Avatar EM-scaling */
.hud-name-wrapper {
display: flex;
align-items: center;
gap: 0.4em; /* Scales the gap based on font size */
}
#hud-player-avatar {
width: 1.3em; /* Perfectly ties the image size to the text size */
height: 1.3em;
object-fit: cover;
image-rendering: pixelated;
border: 1px solid #555;
border-radius: 2px;
flex-shrink: 0; /* Prevents flexbox from squishing the square */
}
#game-header, #audio-controls {
text-transform: lowercase;
}
/* --- UTILITY CLASSES --- */
.screen-hidden { display: none !important; }
.screen-active { display: flex !important; }
/* --- LANDING, GATE, SUCCESS & CHARACTER CREATION SCREENS --- */
#landing-screen, #success-screen, #gate-screen, #character-creation-screen {
width: 100%;
max-width: none;
height: 100%;
flex-direction: column;
align-items: center;
padding: 20px;
text-align: center;
box-sizing: border-box;
/* ENABLES SCROLLING AT FAR RIGHT EDGE OF VIEWPORT */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.landing-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 480px;
/* RESTORES PERFECT VERTICAL AND HORIZONTAL CENTERING DYNAMICALLY */
margin: auto;
padding: 20px 0;
box-sizing: border-box;
}
.landing-menu {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* --- SPLASH / GATE SCREEN BANDCAMP FLOPPY DISK --- */
.splash-bandcamp-link {
display: inline-block;
margin: 15px 0 20px 0;
text-decoration: none;
}
.splash-floppy-img {
width: clamp(350px, 70vw, 750px);
height: auto;
image-rendering: pixelated;
cursor: pointer;
transition: filter 0.3s ease, transform 0.2s ease;
}
.splash-floppy-img:hover {
transform: scale(1.08);
filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.85)) brightness(1.25);
}
/* =========================================
AVATAR SELECTOR SYSTEM
========================================= */
.avatar-scroll-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
padding: 5px;
padding-bottom: 15px; /* Room for scrollbar */
width: 100%;
/* Smooth mobile scrolling */
-webkit-overflow-scrolling: touch;
}
/* Custom scrollbar to match the gothic theme */
.avatar-scroll-container::-webkit-scrollbar { height: 6px; }
.avatar-scroll-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); border-radius: 4px; }
.avatar-scroll-container::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.avatar-scroll-container::-webkit-scrollbar-thumb:hover { background: #888; }
.avatar-option {
width: 80px;
height: 80px;
object-fit: cover;
image-rendering: pixelated;
border: 2px solid #333333;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0; /* Prevents squishing */
}
.avatar-option:hover {
border-color: #888888;
}
/* Reusing your choice-selected style for consistency */
.avatar-option.choice-selected {
border-color: #ffffff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}
/* =========================================
CHARACTER CREATION / PROFILE OVERLAY
========================================= */
#character-creation-screen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 15000; /* Forces it completely over the game screen and settings menu */
}
/* Ensure it completely vanishes when the class is toggled */
#character-creation-screen.screen-hidden {
display: none !important;
}
.logo-img {
max-width: 280px;
width: 80%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
animation: logoPulse 4.5s ease-in-out infinite;
}
#game-over-screen {
width: 100%;
max-width: 100%;
height: 100%;
background-color: #110000;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
}
.success-title { font-size: 3rem; margin-bottom: 20px; }
.success-sub { font-size: 1.4rem; margin-bottom: 40px; }
/* --- NEW GAME OVER STYLES --- */
/* Fluid sizing: Enormous on desktop, scales gracefully on mobile */
.death-title {
color: #ff3333;
font-size: clamp(3rem, 12vw, 5.5rem);
margin-bottom: 10px;
text-transform: lowercase;
}
/* --- STAGE 1: The One-Time Glitch Entrance (2.5 seconds) --- */
@keyframes perishGlitch {
0% { transform: translate(0, 0) scale(1) skew(0deg); filter: drop-shadow(0 0 10px red); letter-spacing: normal; opacity: 1; }
/* The violent buildup */
10% { transform: translate(-15px, 10px) scale(1.3) skew(-30deg); filter: drop-shadow(0 0 50px red) invert(1) hue-rotate(180deg); letter-spacing: 15px; }
20% { transform: translate(20px, -15px) scale(0.7) skew(45deg); filter: drop-shadow(10px -10px 0 rgb(255, 166, 0)) drop-shadow(-10px 10px 0 red) blur(3px); letter-spacing: -5px; }
30% { transform: translate(-5px, 5px) scale(1.1) skew(0deg) rotate(-5deg); filter: drop-shadow(0 15px 5px darkred) contrast(3); letter-spacing: 20px; }
40% { transform: translate(10px, 0) scale(1.5) skew(15deg); filter: drop-shadow(0 0 0 transparent) blur(12px); }
/* Sudden snap back, followed by aftershocks */
50% { transform: translate(0, 0) scale(1) skew(0deg); filter: drop-shadow(0 0 15px red) invert(0); letter-spacing: normal; }
55% { transform: translate(-8px, 4px) skewX(20deg); }
60% { transform: translate(8px, -4px) skewX(-20deg); filter: blur(6px); }
65% { transform: translate(0, 0) skewX(0deg); filter: drop-shadow(0 0 10px red); }
/* Final deep breath and glitch out */
75% { transform: scale(1.2); filter: drop-shadow(0 0 40px red); }
85% { transform: translate(-4px, 4px) skew(15deg); filter: drop-shadow(0 0 10px red); }
95% { transform: translate(4px, -4px) skew(-15deg); filter: blur(3px); }
/* Settles perfectly back into the neutral state */
100% { transform: translate(0, 0) scale(4) skew(0deg); filter: drop-shadow(0 0 10px red); letter-spacing: normal; opacity: 1; }
}
/* --- STAGE 2: The Eerie, Infinite Pulse ---*/
@keyframes perishPulseEerie {
0% { filter: drop-shadow(0 0 10px #ff0000) brightness(0.8); transform: scale(1); }
50% { filter: drop-shadow(0 0 0px #ff0000) drop-shadow(0 0 10px #ff3333) brightness(0.8); transform: scale(1.16); }
100% { filter: drop-shadow(0 0 10px #ff0000) brightness(0.8); transform: scale(1); }
}
/* --- THE CHAINED ANIMATION CLASS --- */
.anim-perish {
/*
1st animation: perishGlitch plays for 2.5s, linearly, exactly 1 time.
2nd animation: perishPulseEerie waits exactly 2.5s to start, runs for 6s smoothly, and loops infinitely.
*/
animation:
perishGlitch 2.5s linear 1,
perishPulseEerie 6s ease-in-out 2.5s infinite;
}
/* Replaces the
tags with a clean, precise 25px gap */
#btn-retry {
margin-bottom: 25px;
}
/* --- LOGO ANIMATION --- */
@keyframes logoPulse {
0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) brightness(0.9); transform: scale(1); }
50% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4)) brightness(1.2); transform: scale(1.03); }
100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) brightness(0.9); transform: scale(1); }
}
.logo-img {
max-width: 420px; /* Bumps the max size up significantly for desktop */
width: 50%; /* Allows it to fill more of the screen on mobile */
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
animation: logoPulse 4.5s ease-in-out infinite;
}
.password-input {
background: rgba(0, 0, 0, 0.5);
border: 1px solid #555;
color: #fff;
font-family: var(--gothic-font);
font-size: 1.2rem;
padding: 10px 15px;
text-align: center;
outline: none;
text-transform: lowercase;
width: 100%;
margin-bottom: -10px;
transition: border 0.3s ease;
}
.password-input:focus { border-color: #ffffff; }
.gothic-btn {
background: #000000;
border: 2px solid #ffffff;
padding: 14px 20px;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s ease;
}
.gothic-link {
font-size: 1.6rem;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border 0.2s ease;
}
.gothic-link:hover { border-bottom: 1px solid #ffffff; }
/* --- GAME SCREEN LAYOUT --- */
#game-screen {
width: 100%;
max-width: 650px;
height: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 25px 10px;
position: relative;
}
/* --- BATTLE STATS HUD (NOW AN OVERLAY) --- */
#stats-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-width: 100% !important;
display: flex;
justify-content: space-between;
align-items: flex-end;
/* Reduced the bottom padding from 10px to 2px to push it down */
padding: 20px 12px 2px 12px;
font-size: clamp(1.1rem, 4vw, 1.3rem);
/* Pushed the transparency down so the gradient doesn't cover the enemy's body */
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 30%, transparent 60%);
z-index: 60;
pointer-events: none;
}
/* Elevates stats HUD above cinematic letterbox pseudo-elements (z-index: 250) during Totem mode */
#game-screen.in-totem #stats-container,
#viewport-wrapper.totem-mode #stats-container,
#game-screen:has(#viewport-wrapper.totem-mode) #stats-container {
display: flex !important;
z-index: 300 !important;
}
/* --- 3D PERSPECTIVE COMPASS HUD --- */
#compass-container {
position: absolute;
bottom: -115px;
left: 50%;
transform: translateX(-50%) translateY(0);
opacity: 1;
width: clamp(180px, 35vw, 250px);
height: 80px;
z-index: 50;
pointer-events: none;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: visible;
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-in-out;
}
#compass-base {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: auto;
image-rendering: pixelated;
}
#compass-needle {
position: absolute;
bottom: 120px;
left: 50%;
width: 36px;
height: auto;
transform-origin: bottom center;
transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(0deg);
image-rendering: pixelated;
}
/* Smooth Slide-Out Hiding Rules */
#compass-container.compass-off,
#game-screen.game-busy #compass-container,
#game-screen.in-battle #compass-container,
#game-screen.in-dialogue #compass-container,
#game-screen.in-totem #compass-container,
#game-screen.in-inventory #compass-container,
#game-screen.in-loot #compass-container,
#game-screen.in-puzzle #compass-container,
#game-screen.in-gambling #compass-container,
#game-screen.layout-shrink #compass-container {
transform: translateX(-50%) translateY(140px) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.compass-toggle-btn.active-btn {
border-color: #00ff00 !important;
box-shadow: 0 0 8px rgba(0, 255, 0, 0.5) !important;
}
.stat-hp { color: #ff3333; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 3px 5px rgba(0,0,0,0.8); }
.stat-mp { color: #3366ff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 3px 5px rgba(0,0,0,0.8); }
/* CHANGED: Shrunk from 45% down to 35%, and added a 140px cap for desktop monitors */
.player-stat-block { display: flex; flex-direction: column; width: 35%; max-width: 140px; gap: 4px; }
.player-bar-track { width: 100%; height: 10px; border: 1px solid #ffffff; background-color: transparent; }
.player-bar-fill { height: 100%; transition: width 0.3s ease-out; }
.hp-fill-color { background-color: #ff3333; width: 100%; }
.mp-fill-color { background-color: #3366ff; width: 0%; }
#enemy-hp-container { width: 100%; max-width: 400px; margin-bottom: 15px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#enemy-name-display { color: #ffffff; font-family: var(--gothic-font); font-size: 1.3rem; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; text-transform: lowercase; }
#enemy-hp-track { width: 100%; height: 12px; background-color: #333333; border: 1px solid #ffffff; }
#enemy-hp-fill { width: 100%; height: 100%; background-color: #990000; transition: width 0.3s ease-out; }
#game-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5px 10px;
border-bottom: 1px solid #333;
font-size: clamp(1rem, 4vw, 1.35rem);
flex-shrink: 0;
gap: 15px;
height: 3.5rem;
overflow: hidden;
}
#objective-display { flex: 1 1 auto; }
#inventory-display {
flex: 0 0 auto;
text-align: right;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
max-width: 45%;
}
.white-icon { color: transparent; text-shadow: 0 0 0 #ffffff; }
/* --- COMPOSITED VIEWPORT --- */
#viewport-wrapper {
width: 100%;
max-width: min(100%, 50vh);
aspect-ratio: 1 / 1;
flex-shrink: 0;
position: relative;
background-color: #000000;
border: 2px solid #ffffff;
overflow: hidden;
transition: max-width 0.4s ease-in-out; /* NEW: Smooth dynamic resizing */
/* --- CRITICAL FIX: GPU ISOLATION --- */
/* Sandboxes the mix-blend-mode math so scaling the camera never crashes WebKit */
isolation: isolate;
}
#dungeon-viewport {
position: absolute;
overflow: hidden;
inset: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.render-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
image-rendering: pixelated;
object-fit: contain;
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* --- D-PAD CONTROLS --- */
/* CHANGED: Compressed margins and added flex-shrink so it plays nicely with the 3D viewport */
#dpad-container {
margin-top: 5px;
margin-bottom: 5px;
flex-shrink: 0;
}
.dpad-grid { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dpad-middle-row { display: flex; gap: 10px; }
.dpad-btn {
background: #000000;
color: #ffffff;
border: 2px solid #ffffff;
width: 60px;
height: 60px;
font-size: 1.4rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
touch-action: manipulation;
flex-shrink: 0; /* NEW: Forces buttons to stay perfectly square */
}
/* --- DPAD ARROW IMAGES --- */
.dpad-arrow {
width: 32px;
height: 32px;
image-rendering: pixelated;
object-fit: contain;
/* Smooth rotation transition in case you ever animate them! */
transition: transform 0.1s ease;
}
/* Rotate the same image based on direction */
.up-arrow { transform: rotate(0deg); }
.right-arrow { transform: rotate(90deg); }
.down-arrow { transform: rotate(180deg); }
.left-arrow { transform: rotate(-90deg); }
.dpad-btn:active { background: #ffffff; color: #000000; }
/* --- AUDIO FOOTER --- */
#audio-controls {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
padding: 5px 10px;
position: relative;
z-index: 5;
/* NEW: This completely prevents the footer from being pushed off-screen */
flex-shrink: 0;
/* NEW: Ensures it anchors firmly to the bottom of the UI stack */
margin-top: auto;
}
.small-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 1.2rem; }
#message-bar {
width: 100%;
min-height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: clamp(1rem, 3vh, 1.5rem);
line-height: 1.1;
color: #ffffff;
margin-top: 5px;
margin-bottom: 5px;
text-transform: lowercase;
padding: 0 10px;
flex-shrink: 0;
z-index: 10;
}
#desktop-btn-container {
display: none !important; /* Hide globally by default */
}
#minimap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 140; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#minimap-bg { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.90); z-index: 1; }
#minimap-canvas {
position: relative;
z-index: 2;
background-color: transparent;
image-rendering: pixelated;
max-width: 80%;
max-height: 80%;
width: 100%;
height: auto;
object-fit: contain;
}
/* --- NEW ITEM ANIMATIONS --- */
@keyframes flaskSway {
0% { transform: rotate(-1.5deg); filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3)); }
50% { transform: rotate(1.5deg); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
100% { transform: rotate(-1.5deg); filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3)); }
}
.flask-sway { animation: flaskSway 4s ease-in-out infinite; }
@keyframes fairyHover {
0% { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff) contrast(0.2) brightness(3); transform: translateY(0); }
50% { filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 50px #fff) contrast(0.05) brightness(5); transform: translateY(-12px); }
100% { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff) contrast(0.2) brightness(3); transform: translateY(0); }
}
.fairy-hover { animation: fairyHover 2.5s ease-in-out infinite; }
/* --- ENEMY IDLE ANIMATIONS --- */
@keyframes angelFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.enemy-angel { transform-style: preserve-3d; animation: angelFloat 4s ease-in-out infinite; transform-origin: bottom center; }
.angel-body {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: translateZ(0px);
backface-visibility: visible !important;
/* NEW: Baseline math and transition for smooth fading */
filter: brightness(1);
transition: filter 1.5s ease-in-out;
}
.angel-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center 50%;
backface-visibility: visible !important;
/* NEW: Baseline math and transition for smooth fading */
filter: brightness(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
transition: filter 1.5s ease-in-out;
}
.ring-1 { animation: orbitRingOne 5s linear infinite; }
.ring-2 { animation: orbitRingTwo 7s linear infinite; }
/* --- ANGEL ATTACK SPEEDUP --- */
/* Forces the rings into a violent, high-speed spin when the parent lunges! */
.anim-enemy-attack .ring-1,
.anim-enemy-power-attack .ring-1 {
animation-duration: 0.5s !important;
}
.anim-enemy-attack .ring-2,
.anim-enemy-power-attack .ring-2 {
animation-duration: 0.7s !important;
}
@keyframes orbitRingOne { 0% { transform: rotateX(75deg) rotateY(15deg) rotateZ(0deg); } 100% { transform: rotateX(75deg) rotateY(15deg) rotateZ(360deg); } }
@keyframes orbitRingTwo { 0% { transform: rotateX(105deg) rotateY(-20deg) rotateZ(0deg); } 100% { transform: rotateX(105deg) rotateY(-20deg) rotateZ(-360deg); } }
@keyframes ratJitter {
/* Slow, creepy minor sway */
0% { transform: translate(0, 0) rotate(0deg); }
15% { transform: translate(-1px, 1px) rotate(-0.5deg); }
30% { transform: translate(1px, 0px) rotate(0.5deg); }
40% { transform: translate(0, 0) rotate(0deg); }
/* FAST SPASTIC BURST! (Tightly packed keyframes force high velocity) */
42% { transform: translate(-3px, 2px) rotate(-2deg); }
44% { transform: translate(2px, -1px) rotate(1.5deg); }
46% { transform: translate(-2px, 2px) rotate(-1deg); }
48% { transform: translate(3px, 0px) rotate(2deg); }
50% { transform: translate(-1px, -2px) rotate(-1.5deg); }
/* Return to slow, minor sway */
52% { transform: translate(0, 0) rotate(0deg); }
65% { transform: translate(1px, 1px) rotate(0.5deg); }
85% { transform: translate(-1px, 0px) rotate(-0.5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* CHANGED: Increased duration to 2.5s and set timing to linear for sharp twitches */
.enemy-rat { top: 5% !important; animation: ratJitter 2.5s linear infinite; transform-origin: bottom center; }
@keyframes teleporterPulse { 0% { filter: drop-shadow(0 0 2px #fff); opacity: 0.8; } 50% { filter: drop-shadow(0 0 15px #fff); opacity: 1; } 100% { filter: drop-shadow(0 0 2px #fff); opacity: 0.8; } }
.teleporter-pulse { animation: teleporterPulse 2s infinite; }
.blood-flask { color: transparent; text-shadow: 0 0 0 #ff0000; }
/* --- VOLUME SLIDER --- */
.volume-container { display: flex; align-items: center; gap: 8px; }
#volume-icon, #cc-volume-icon { font-size: 1.2rem; cursor: pointer; font-family: var(--gothic-font); }
#volume-slider, #cc-volume-slider { -webkit-appearance: none; appearance: none; width: 80px; background: transparent; outline: none; }
#volume-slider::-webkit-slider-runnable-track, #cc-volume-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #ffffff; }
#volume-slider::-webkit-slider-thumb, #cc-volume-slider::-webkit-slider-thumb { height: 14px; width: 8px; background: #000000; border: 1px solid #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -5px; }
#volume-slider::-moz-range-track, #cc-volume-slider::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background: #ffffff; }
#volume-slider::-moz-range-thumb, #cc-volume-slider::-moz-range-thumb { height: 14px; width: 8px; background: #000000; border: 1px solid #ffffff; cursor: pointer; border-radius: 0; }
.inventory-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-left: 6px; }
/* --- DIALOGUE UI --- */
#dialogue-container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; padding: 10px 20px; z-index: 20; flex: 1; }
#dialogue-text { font-size: clamp(1.1rem, 3vh, 1.4rem); text-align: center; line-height: 1.4; margin-bottom: 10px; color: #ffffff; }
/* CHANGED: Made the dialogue box scrollable globally across all devices */
#dialogue-choices {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 380px;
align-items: center;
max-height: 18svh; /* FIXED: Reverted back to 18svh so it clears the footer! */
overflow-y: auto;
padding: 10px;
border: 1px solid #333;
background: rgba(0, 0, 0, 0.6);
overscroll-behavior: contain;
justify-content: flex-start;
}
#dialogue-choices .dialogue-choice-btn {
width: 100%;
max-width: 350px;
background: #000000;
color: #ffffff;
border: 1px solid #ffffff;
padding: clamp(8px, 1.5vh, 12px);
font-family: var(--gothic-font);
font-size: clamp(1rem, 2.5vh, 1.2rem);
cursor: pointer;
text-transform: lowercase;
transition: all 0.2s ease;
flex-shrink: 0; /* Prevents buttons from squishing */
}
/* Custom Scrollbar for the global dialogue box */
#dialogue-choices::-webkit-scrollbar { width: 6px; }
#dialogue-choices::-webkit-scrollbar-track { background: transparent; }
#dialogue-choices::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
/* Unifies hover, active, and keyboard selection highlighting for ALL buttons! */
.gothic-btn:hover, .gothic-btn:active, .gothic-btn.choice-selected,
#dialogue-choices .dialogue-choice-btn:hover,
#dialogue-choices .dialogue-choice-btn:active,
#dialogue-choices .dialogue-choice-btn.choice-selected {
background: #ffffff;
color: #000000;
}
/* --- BATTLE MENU UI --- */
#battle-menu-container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 20px; z-index: 20; flex: 1; }
#dice-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; }
#dice-img { width: 80px; height: 80px; image-rendering: pixelated; object-fit: contain; transition: transform 0.1s ease; }
#dice-img:active { transform: scale(0.95); }
#dice-prompt { font-size: clamp(1.2rem, 3vh, 1.5rem); color: #aaaaaa; text-transform: lowercase; }
#battle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 400px; }
.battle-btn { padding: clamp(8px, 2vh, 15px) 10px; font-size: clamp(1.1rem, 3vh, 1.3rem); text-align: center; width: 100%; }
.disabled-btn { opacity: 0.3; cursor: not-allowed !important; text-decoration: line-through; }
.disabled-btn:hover, .disabled-btn:active { background: #000000 !important; color: #ffffff !important; }
/* --- FIRST-PERSON SWORD HUD --- */
.sword-overlay {
position: absolute;
top: auto !important;
left: auto !important;
width: 180% !important;
height: 180% !important;
bottom: -40% !important;
right: -20% !important;
object-fit: contain;
transform-origin: bottom right;
image-rendering: pixelated;
z-index: 50;
pointer-events: none;
animation: swordIdle 4s ease-in-out infinite; }
@keyframes swordIdle { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(5px) rotate(1deg); } 100% { transform: translateY(0) rotate(0deg); } }
/* --- PLAYER DEATH ANIMATION --- */
@keyframes playerDeathFade { 0% { filter: blur(0px) brightness(1) grayscale(0%); } 50% { filter: blur(4px) brightness(0.5) drop-shadow(0 0 20px red) grayscale(50%); } 100% { filter: blur(12px) brightness(0) grayscale(100%); } }
.anim-player-death { animation: playerDeathFade 2s ease-in forwards !important; }
/* ==========================================================================
3D SPATIAL ENGINE & SPRITE OVERRIDES
========================================================================== */
/* --- 1. BASELINE ENGINE DEPTH & PERIPHERAL VECTORS --- */
.depth-F2 { scale: 0.50; translate: 0 -25%; }
.depth-F3 { scale: 0.20; translate: 0 -40%; }
.enemy-pos-F1_L1 { left: -55% !important; opacity: 1.0; }
.enemy-pos-F1_R1 { left: 55% !important; opacity: 1.0; }
.enemy-pos-F2_L1 { left: -35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
.enemy-pos-F2_R1 { left: 35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
.enemy-pos-F3_L1 { left: -25% !important; opacity: 1.0; }
.enemy-pos-F3_R1 { left: 25% !important; opacity: 1.0; }
/* --- 2. SPECIFIC ENTITY / ENEMY BASELINE SCALING --- */
.enemy-angel.depth-F1 {
scale: 0.85;
translate: 0 -10%;
}
.enemy-angel.depth-F2 {
scale: 0.38;
translate: 0 -30%;
}
/* --- 3. TELEPORTER POSITIONING VECTORS --- */
.teleporter-pulse.depth-F3 {
display: none !important;
}
.teleporter-pulse.enemy-pos-F1_L1 {
left: -45% !important;
top: 25% !important;
scale: 1.0 !important;
}
.teleporter-pulse.enemy-pos-F1_R1 {
left: 37% !important;
top: 18% !important;
scale: 0.8 !important;
}
.teleporter-pulse.enemy-pos-F2_L1 {
left: -20% !important;
translate: 0 -15% !important;
scale: 0.25 !important;
}
.teleporter-pulse.enemy-pos-F2_R1 {
left: 20% !important;
translate: 0 -15% !important;
scale: 0.25 !important;
}
/* --- 4. FIRST-PERSON OVERLAY HAND POSITIONING --- */
/* Hand geometry is standardized using percentage scaling in the HUD section below */
/* --- 5. CUSTOM DECOR: LAMPPOST CONTROLS --- */
img[src*='lamppost'] {
left: 50% !important;
bottom: 0px !important;
margin-left: -400px !important;
width: 800px !important;
max-width: none !important;
}
img[src*='lamppost'].depth-F1 { transform: translate(0px, 5vh) scale(1.5) !important; }
img[src*='lamppost'].depth-F2 { transform: translate(0vw, 6vh) scale(1.5) !important; }
img[src*='lamppost'].depth-F3 { transform: translate(0vw, 15vh) scale(1.5) !important; }
img[src*='lamppost'].enemy-pos-F1_L1 { transform: translate(-70vw, 30vh) scale(2.5) !important; }
img[src*='lamppost'].enemy-pos-F1_R1 { transform: translate(60vw, 30vh) scale(2.5) !important; }
img[src*='lamppost'].enemy-pos-F2_L1 { transform: translate(-80vw, 15vh) scale(2.0) !important; }
img[src*='lamppost'].enemy-pos-F2_R1 { transform: translate(40vw, 6vh) scale(1.5) !important; }
img[src*='lamppost'].enemy-pos-F3_L1 { transform: translate(-50vw, 15vh) scale(1.5) !important; }
img[src*='lamppost'].enemy-pos-F3_R1 { transform: translate(50vw, 15vh) scale(1.5) !important; }
/* --- 6. CUSTOM DECOR: CANDELABRA CONTROLS --- */
img[src*='candelabra'] {
left: 50% !important;
bottom: 0px !important;
margin-left: -400px !important;
width: 800px !important;
max-width: none !important;
}
img[src*='candelabra'].depth-F1 { transform: translate(0vw, -10vh) scale(0.65) !important; }
img[src*='candelabra'].depth-F2 { transform: translate(0vw, -9vh) scale(0.6) !important; }
img[src*='candelabra'].depth-F3 { transform: translate(0vw, 0vh) scale(0.7) !important; }
img[src*='candelabra'].enemy-pos-F1_L1 { transform: translate(-60vw, 10vh) scale(1.1) !important; }
img[src*='candelabra'].enemy-pos-F1_R1 { transform: translate(60vw, 10vh) scale(1.1) !important; }
img[src*='candelabra'].enemy-pos-F2_L1 { transform: translate(-50vw, -8vh) scale(0.6) !important; }
img[src*='candelabra'].enemy-pos-F2_R1 { transform: translate(50vw, -8vh) scale(0.6) !important; }
img[src*='candelabra'].enemy-pos-F3_L1 { transform: translate(-70vw, 0vh) scale(0.7) !important; }
img[src*='candelabra'].enemy-pos-F3_R1 { transform: translate(70vw, 0vh) scale(0.7) !important; }
/* --- 7. CUSTOM DECOR: MAGE TABLE HYBRID CONTROLS --- */
img[src*='mage_table'].hybrid-sprite {
left: 50% !important;
bottom: 0px !important;
margin-left: -200px !important;
width: 400px !important;
max-width: none !important;
}
img[src*='mage_table'].hybrid-sprite.enemy-pos-F1_L1 { transform: translate(-350px, -20px) scale(0.85) !important; }
img[src*='mage_table'].hybrid-sprite.enemy-pos-F1_R1 { transform: translate(350px, -20px) scale(0.85) !important; }
img[src*='mage_table'].hybrid-sprite.enemy-pos-F2_L1 { transform: translate(-200px, -70px) scale(0.5) !important; }
img[src*='mage_table'].hybrid-sprite.enemy-pos-F2_R1 { transform: translate(200px, -70px) scale(0.5) !important; }
img[src*='mage_table'].hybrid-sprite.enemy-pos-F3_L1 { transform: translate(-100px, -110px) scale(0.25) !important; }
img[src*='mage_table'].hybrid-sprite.enemy-pos-F3_R1 { transform: translate(100px, -110px) scale(0.25) !important; }
/* --- 8. CUSTOM ENTITY: HV SPRITE FAMILY --- */
img[src*="hv"].depth-F1 { scale: 0.75 !important; translate: 0 -12% !important; }
img[src*="hv"].depth-F2 { scale: 0.50 !important; translate: 0 -23% !important; }
img[src*="hv"].depth-F3 { scale: 0.35 !important; translate: 0 -32% !important; }
img[src*="hv"].enemy-pos-F1_L1 { left: -55% !important; scale: 1.0 !important; translate: 0 0 !important; }
img[src*="hv"].enemy-pos-F1_R1 { left: 55% !important; scale: 0.9 !important; translate: 0 0 !important; }
img[src*="hv"].enemy-pos-F2_L1 { left: -35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
img[src*="hv"].enemy-pos-F2_R1 { left: 35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
img[src*="hv"].enemy-pos-F3_L1 { left: -25% !important; scale: 0.20 !important; translate: 0 -40% !important; }
img[src*="hv"].enemy-pos-F3_R1 { left: 25% !important; scale: 0.20 !important; translate: 0 -40% !important; }
/* --- 9. CUSTOM ENTITY: GAMBLER NPC --- */
img[src*="gambler"].depth-F1 { scale: 0.9 !important; translate: 0 -5% !important; }
img[src*="gambler"].depth-F2 { scale: 0.50 !important; translate: 0 -20% !important; }
img[src*="gambler"].depth-F3 { scale: 0.25 !important; translate: 0 -30% !important; }
img[src*="gambler"].enemy-pos-F1_L1 { left: -55% !important; scale: 1.0 !important; translate: 0 0 !important; }
img[src*="gambler"].enemy-pos-F1_R1 { left: 55% !important; scale: 1.0 !important; translate: 0 0 !important; }
img[src*="gambler"].enemy-pos-F2_L1 { left: -35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
img[src*="gambler"].enemy-pos-F2_R1 { left: 35% !important; scale: 0.35 !important; translate: 0 -32% !important; }
img[src*="gambler"].enemy-pos-F3_L1 { left: -25% !important; scale: 0.20 !important; translate: 0 -40% !important; }
img[src*="gambler"].enemy-pos-F3_R1 { left: 25% !important; scale: 0.20 !important; translate: 0 -40% !important; }
img[src*="gambler"].enemy-pos-L1 { left: -70% !important; scale: 1.0 !important; }
img[src*="gambler"].enemy-pos-R1 { left: 70% !important; scale: 1.0 !important; }
img[src*="gambler"].enemy-pos-L2 { left: -45% !important; scale: 0.50 !important; translate: 0 -20% !important; }
img[src*="gambler"].enemy-pos-R2 { left: 45% !important; scale: 0.50 !important; translate: 0 -20% !important; }
/* --- MAGIC MENU & VFX --- */
#magic-actions { display: none; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 400px; }
#magic-actions.screen-active { display: grid !important; }
@keyframes magicFlame { 0% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); } 20% { filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); } 80% { filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); } 100% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); } }
.anim-magic-flame { animation: magicFlame 0.8s ease-out forwards; }
@keyframes magicShield { 0% { box-shadow: inset 0 0 0px #330066; } 50% { box-shadow: inset 0 0 100px #330066; } 100% { box-shadow: inset 0 0 0px #330066; } }
.anim-magic-shield { animation: magicShield 1.5s ease-in-out forwards; }
@keyframes magicStare { 0% { filter: invert(0); transform: scale(1); } 20% { filter: invert(1); transform: scale(1.05); } 40% { filter: invert(0); transform: scale(1); } 60% { filter: invert(1); transform: scale(1.05); } 100% { filter: invert(0); transform: scale(1); } }
.anim-magic-stare { animation: magicStare 0.6s ease-in-out forwards; }
#battle-summary-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
/* --- SPELL CASTING HAND --- */
.spell-hand-overlay {
position: absolute !important;
top: auto !important;
height: auto !important;
bottom: -7% !important;
left: -17% !important;
right: auto !important;
width: 80% !important;
max-width: none !important;
object-fit: contain;
transform-origin: bottom left;
image-rendering: pixelated;
z-index: 50;
pointer-events: none;
will-change: transform, filter !important;
transition: bottom 0.4s ease-out !important;
animation: swordIdle 5s ease-in-out infinite alternate-reverse !important;
}
.spell-hand-overlay.hand-active { bottom: -2% !important; }
/* --- RIGHT IDLE HAND (SCALING & Z-INDEX FIX) --- */
.idle-r-hand-overlay {
position: absolute !important;
top: auto !important;
height: auto !important;
/* Adjusted coordinates now that we are using percentages */
bottom: -7% !important;
right: -17% !important;
left: auto !important;
/* CHANGED: Uses % instead of vw. This locks it to the game canvas! */
width: 80% !important;
max-width: none !important;
pointer-events: none !important;
will-change: transform, filter !important;
animation: rightHandSway 4s ease-in-out infinite alternate !important;
animation-delay: -2s !important;
}
/* Emissive lighting filters */
.idle-r-hand-overlay.ambient-dim { filter: brightness(0.6) !important; }
.idle-r-hand-overlay.combat-bright { filter: brightness(1) !important; }
/* CHANGED: Restored to 0.6 now that the emissive room lighting is physically covering it */
.idle-r-hand-overlay.ambient-dim {
filter: brightness(0.6) !important;
}
.idle-r-hand-overlay.combat-bright {
filter: brightness(1) !important;
}
@keyframes rightHandSway {
0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
100% { transform: translateY(12px) translateX(-8px) rotate(-2deg); }
}
/* --- LANTERN HAND --- */
.lantern-hand-overlay {
position: absolute;
top: auto !important;
left: -10%;
bottom: -5%;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: bottom left;
image-rendering: pixelated;
z-index: 49;
pointer-events: none;
scale: 0.85;
animation: swordIdle 4.5s ease-in-out infinite alternate-reverse;
/* CHANGED (Issue 3): Dims the hand to match the room, adds a warm halo */
filter: brightness(0.90);
}
/* Slide Animations for equipping/unequipping */
@keyframes lanternSlideUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
@keyframes lanternSlideDown {
0% { transform: translateY(0%); }
100% { transform: translateY(100%); }
}
.anim-lantern-up { animation: lanternSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
.anim-lantern-down { animation: lanternSlideDown 0.6s ease-in forwards !important; }
/* --- INNER SCENE WRAPPER & IDLE SWAY --- */
@keyframes idleHeadSway {
0% { transform: scale(1.03) translateY(0px) rotate(0deg); }
/* CHANGED: Increased the dip to 6px and the tilt to 0.8deg for slightly more presence */
50% { transform: scale(1.03) translateY(6px) rotate(0.6deg); }
100% { transform: scale(1.03) translateY(0px) rotate(0deg); }
}
.dungeon-scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform-origin: center center;
/* The infinite idle breathing motion */
animation: idleHeadSway 6s ease-in-out infinite;
}
/* --- FIX: DISABLE IDLE SWAY WHEN SETTING IS OFF --- */
body.disable-head-bob .dungeon-scene {
animation: none !important;
transform: none !important;
}
/* --- BOSS BATTLE VFX --- */
@keyframes viewportShake {
0%, 100% { transform: translate(0, 0) scale(1.05); }
25% { transform: translate(-10px, 8px) rotate(-1deg) scale(1.05); }
50% { transform: translate(10px, -8px) rotate(1deg) scale(1.05); }
75% { transform: translate(-8px, 10px) scale(1.05); }
}
.anim-viewport-shake { animation: viewportShake 0.4s ease-in-out forwards; }
@keyframes invertFlash {
0%, 100% { filter: invert(0) brightness(1); }
50% { filter: invert(1) brightness(3); }
}
.anim-invert-flash { animation: invertFlash 0.4s ease-out forwards; }
@keyframes battleWarp {
0% { transform: scale(1.03) translateZ(0); filter: contrast(1) hue-rotate(0deg); }
30% { transform: scale(1.15) translateZ(0) rotate(1deg); filter: contrast(1.5) hue-rotate(15deg); }
70% { transform: scale(1.05) translateZ(0) rotate(-1deg); filter: contrast(1.8) hue-rotate(-15deg); }
100% { transform: scale(1.03) translateZ(0) rotate(0deg); filter: contrast(1) hue-rotate(0deg); }
}
.anim-battle-warp { animation: battleWarp 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
@keyframes battleEndWarp {
0% { transform: scale(1.03) translateZ(0); filter: brightness(1) saturate(1); }
50% { transform: scale(1.05) translateZ(0); filter: brightness(1.2) saturate(1.1); }
100% { transform: scale(1.03) translateZ(0); filter: brightness(1) saturate(1); }
}
.anim-battle-end-warp { animation: battleEndWarp 1.5s ease-in-out forwards; }
/* --- TELEPORTER ASCENSION WARP --- */
@keyframes teleporterWarp {
0% {
transform: scale(1.03) translateY(0);
filter: hue-rotate(0deg) contrast(1) blur(0px) brightness(1);
opacity: 1;
}
/* The Windup: Camera dips slightly downward as the beam charges, colors run hot */
30% {
transform: scale(1.05) translateY(-5%);
filter: hue-rotate(-30deg) contrast(1.5) blur(2px) brightness(1.5);
opacity: 1;
}
/* The Launch: Player rockets UP, pushing the room violently DOWN and stretching it into a bright blur */
100% {
/* scale(X, Y) pinches the room horizontally while stretching it 4x vertically! */
transform: scale(0.7, 4) translateY(100%);
filter: hue-rotate(90deg) contrast(3) blur(12px) brightness(5);
opacity: 0;
}
}
.anim-teleporter-warp { animation: teleporterWarp 4s cubic-bezier(0.5, 0, 0.5, 1) forwards; }
/* --- DOOR ENTRY WARP --- */
@keyframes doorEntryWarp {
0% { transform: scale(1.03); filter: brightness(1); }
100% { transform: scale(2.5); filter: brightness(0); }
}
.anim-door-entry { animation: doorEntryWarp 5s ease-in forwards; }
/* --- COMBAT BACKGROUND DIMMING --- */
#dungeon-viewport.battle-mode-active .render-layer,
#dungeon-viewport.boss-arena-active .render-layer {
transition: filter 1.5s ease-in-out, opacity 1.5s ease-in-out;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
will-change: filter, opacity;
}
/* Darken everything EXCEPT the active enemy, hands/weapons, and the new boss backgrounds */
#dungeon-viewport.battle-blur-active .render-layer:not(.enemy-active):not(.sword-overlay):not(.spell-hand-overlay):not(.boss-bg-layer) {
filter: brightness(0.4) grayscale(20%);
}
/* --- COMBAT WEAPON BRIGHTNESS --- */
/* Forces hands and weapons to full brightness during battle, overriding the ambient lighting! */
#dungeon-viewport.battle-blur-active .sword-overlay,
#dungeon-viewport.battle-blur-active .lantern-hand-overlay,
#dungeon-viewport.battle-blur-active .spell-hand-overlay {
filter: brightness(1) !important;
}
/* Fix: Setting filter on a 3D parent destroys preserve-3d!
We remove the filter from the wrapper and apply it to the children. */
#dungeon-viewport.battle-blur-active .enemy-active {
z-index: 15;
filter: none !important;
}
/* --- 3D SPACE PROTECTION IN COMBAT --- */
/* Prevents .combat-bright from applying a filter to wrappers, which would flatten 3D children */
div.enemy-angel.combat-bright,
div.gatekeeper-wrapper.combat-bright {
filter: none !important;
}
/* Strips 'will-change' which creates stacking contexts that destroy preserve-3d on wrappers */
#dungeon-viewport.battle-mode-active div.enemy-angel,
#dungeon-viewport.battle-mode-active div.gatekeeper-wrapper {
will-change: auto !important;
transition: none !important;
}
/* --- SMOOTH COMBAT LIGHTING --- */
/* 1. Flat Enemies: Establish base math so the CSS transition doesn't snap */
.render-layer[src*="enemies"] {
filter: brightness(1) drop-shadow(0 0 0px transparent);
}
#dungeon-viewport.battle-blur-active img.enemy-active {
filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.15)) !important;
}
/* 2. Angel Body: Smooth fade to brightness */
#dungeon-viewport.battle-blur-active div.enemy-active .angel-body {
filter: brightness(1.2) !important;
}
/* 3. Angel Rings: Smooth fade to glowing white */
#dungeon-viewport.battle-blur-active div.enemy-active .angel-ring {
filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) !important;
}
/* --- NOTE READING OVERLAY --- */
#note-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* Cinematic dark background */
z-index: 200; /* Sits above the HUD, matching Victory/Inventory screens */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: auto; /* Re-enable clicks so the button works */
}
#note-wrapper {
position: relative;
/* Maximize footprint dynamically based on viewport */
width: 95vw;
height: 82vh;
/* Massive desktop limit so it fills the black space */
max-width: 900px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: center;
}
#note-bg-picture, #note-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain; /* Ensures the aspect ratio is perfectly preserved without stretching */
image-rendering: pixelated;
filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
}
#note-text-content {
position: relative;
z-index: 2;
/* STRICT CONSTRAINTS: Keeps text perfectly within the flat paper */
width: 48%;
height: 52%;
color: #111111;
/* 4-way diagonal white stroke for contrast */
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff !important;
text-align: left;
line-height: 1.25;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* Ensures left-aligned text stays flush to the left boundary */
}
/* --- ITEM PICKUP OVERLAY --- */
#item-pickup-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 300 !important; /* Elevated above cinematic letterbox bars (z-index 250) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#item-pickup-bg { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.85); z-index: 1; }
#item-pickup-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 4% 2%;
}
#item-entrance-wrapper {
height: 48%;
aspect-ratio: 1 / 1;
width: auto;
max-width: 80%;
margin: 0 auto;
}
#item-spin-wrapper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.item-spin-front, .item-spin-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
.item-spin-back { transform: rotateY(180deg); }
.spin-1-sided .item-spin-front { backface-visibility: visible; }
.spin-2-sided .item-spin-front, .spin-2-sided .item-spin-back { backface-visibility: hidden; }
@keyframes paperSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.item-spin-anim { animation: paperSpin 2.5s linear infinite; }
/* --- ADVANCED INVENTORY SYSTEM --- */
#inventory-overlay {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100svh !important;
z-index: 10000 !important;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 15px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.95);
}
#inventory-bg { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.95); z-index: 1; }
#inventory-overlay > *:not(#inventory-bg) { position: relative; z-index: 2; }
#inventory-content { pointer-events: none; }
#inventory-content > * { pointer-events: auto; }
/* --- CLEAN CLOSE BUTTONS --- */
#btn-inv-close {
position: absolute !important;
top: 48px !important;
transform: translateY(-50%) !important;
right: 25px !important;
z-index: 10001 !important;
font-family: sans-serif, Arial, Helvetica !important;
font-weight: bold !important;
font-size: 2.2rem !important;
color: #ffffff !important;
background: none !important;
border: none !important;
text-transform: none !important;
padding: 0 !important;
cursor: pointer !important;
line-height: 1 !important;
}
/* TOP HEADER STRIP */
#inv-header-strip {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 60px 8px 15px;
background: rgba(20, 20, 20, 0.85);
border: 1px solid #444;
border-radius: 4px;
margin-bottom: 12px;
flex-shrink: 0;
box-sizing: border-box;
}
.inv-header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#inv-header-avatar { width: 50px; height: 50px; image-rendering: pixelated; border: 1px solid #666; background: #111; object-fit: contain; }
.inv-header-player-info { display: flex; flex-direction: column; gap: 2px; }
#inv-header-name { font-size: 1.4rem; color: #ffffff; text-transform: lowercase; }
#inv-header-level { color: #aaaaaa; font-size: 1rem; }
/* DYNAMIC EXPANDING VITAL BARS WITH BUFFERS */
.inv-header-vitals { display: flex; gap: 20px; align-items: center; flex: 1; justify-content: center; margin: 0 15px; }
.inv-stat-block { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; max-width: 180px; }
.inv-stat-block .player-bar-track { width: 100%; height: 16px; background: #222; border: 1px solid #555; }
.inv-stat-block span { font-size: clamp(0.9rem, 1.2vw, 1.15rem); }
.inv-header-gold { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; text-align: right; }
#inv-gold-text { color: #ffd700; font-size: 1.4rem; }
/* MAIN LAYOUT SPLIT */
#inv-main-layout { display: flex; flex: 1; width: 100%; gap: 15px; min-height: 0; }
#inv-grid-section { flex: 1; display: flex; flex-direction: column; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 10px; border-radius: 4px; min-height: 0; overflow: hidden; }
/* CENTERED INVENTORY GRID LABEL */
#inv-grid-label {
text-align: center;
font-size: 1.3rem;
color: #ffffff;
margin-bottom: 8px;
letter-spacing: 1px;
text-transform: lowercase;
flex-shrink: 0;
}
/* FULL-WIDTH INVENTORY CATEGORY HEADERS */
.inv-category-header {
grid-column: 1 / -1;
font-size: 0.95rem;
color: #888888;
border-bottom: 1px solid #333;
padding-bottom: 2px;
margin: 8px 0 2px 0;
text-transform: lowercase;
letter-spacing: 1px;
flex-shrink: 0;
height: auto;
}
.inv-category-header:first-child {
margin-top: 2px;
}
#inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: max-content; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
#inventory-grid::-webkit-scrollbar, #combine-list-container::-webkit-scrollbar, #loot-grid::-webkit-scrollbar { width: 6px; height: 6px; }
#inventory-grid::-webkit-scrollbar-track, #combine-list-container::-webkit-scrollbar-track, #loot-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
#inventory-grid::-webkit-scrollbar-thumb, #combine-list-container::-webkit-scrollbar-thumb, #loot-grid::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 3px; }
.inv-slot { width: 100%; height: 64px; border: 2px solid transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; background: rgba(0,0,0,0.4); box-sizing: border-box; }
.inv-slot.active-slot { border-color: #ffffff; background: rgba(255, 255, 255, 0.15); }
.inv-slot img { width: 38px; height: 38px; image-rendering: pixelated; object-fit: contain; }
#inventory-content { flex: 1; display: flex; flex-direction: column; align-items: center; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 15px; border-radius: 4px; min-height: 0; box-sizing: border-box; }
#inv-item-name { font-size: 1.8rem; margin: 0 0 10px 0; min-height: 2.2rem; text-align: center; color: #ffffff; }
#inv-inspection-body { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100%; flex: 1; min-height: 0; }
/* DYNAMICALLY SCALED 3D SPINNING INSPECTION BOX */
.inv-spin-box {
display: block;
width: 100%;
max-width: min(340px, 45vh);
height: auto;
aspect-ratio: 1 / 1;
cursor: pointer;
transform-style: preserve-3d;
pointer-events: auto;
}
.inv-spin-box img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
image-rendering: pixelated !important;
}
#inv-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; pointer-events: auto; }
/* Greys out UI toggle buttons during combat, dialogue, or cutscenes */
#game-screen.game-busy .inventory-toggle-btn,
#game-screen.game-busy .compass-toggle-btn,
#game-screen.game-busy .map-toggle-btn,
#game-screen.game-busy .settings-toggle-btn {
opacity: 0.3 !important;
pointer-events: none !important;
}
/* --- LOOT OVERLAY SYSTEM --- */
#loot-overlay {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100svh !important;
z-index: 10000 !important;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 15px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.95);
}
#loot-overlay > *:not(#inventory-bg) { position: relative; z-index: 2; }
#loot-header-strip {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 15px;
background: rgba(20, 20, 20, 0.85);
border: 1px solid #444;
border-radius: 4px;
margin-bottom: 12px;
flex-shrink: 0;
box-sizing: border-box;
}
#loot-title {
font-size: 1.4rem;
color: #ffffff;
text-transform: lowercase;
text-align: center;
width: 100%;
display: block;
margin: 0;
}
#btn-loot-close {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 15px !important;
z-index: 10001 !important;
font-family: sans-serif, Arial, Helvetica !important;
font-weight: bold !important;
font-size: 1.8rem !important;
color: #ffffff !important;
background: none !important;
border: none !important;
text-transform: none !important;
padding: 0 !important;
cursor: pointer !important;
line-height: 1 !important;
}
/* HIDE TOUCH CONTROLS, DESKTOP BUTTONS, AND MESSAGE BAR DURING INVENTORY & LOOTING */
#game-screen.in-inventory #dpad-container,
#game-screen.in-inventory #desktop-btn-container,
#game-screen.in-inventory #message-bar,
#game-screen.in-loot #dpad-container,
#game-screen.in-loot #desktop-btn-container,
#game-screen.in-loot #message-bar,
#game-screen.in-shop #dpad-container,
#game-screen.in-shop #desktop-btn-container,
#game-screen.in-shop #message-bar {
display: none !important;
pointer-events: none !important;
}
/* DISABLE ALL ITEM SPRITE SPINNING ANIMATIONS */
#inv-spin-wrapper,
#loot-spin-wrapper,
.spin-1-sided,
.spin-2-sided,
.item-spin-anim {
animation: none !important;
transform: none !important;
}
#loot-main-layout { display: flex; flex: 1; width: 100%; gap: 15px; min-height: 0; }
#loot-grid-section { flex: 1; display: flex; flex-direction: column; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 10px; border-radius: 4px; min-height: 0; overflow: hidden; }
#loot-grid-label {
text-align: center;
font-size: 1.3rem;
color: #ffffff;
margin-bottom: 8px;
letter-spacing: 1px;
text-transform: lowercase;
flex-shrink: 0;
}
#loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: max-content; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
#loot-content { flex: 1; display: flex; flex-direction: column; align-items: center; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 15px; border-radius: 4px; min-height: 0; box-sizing: border-box; }
#loot-item-name { font-size: 1.8rem; margin: 0 0 10px 0; min-height: 2.2rem; text-align: center; color: #ffffff; }
#loot-inspection-body { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100%; flex: 1; min-height: 0; }
#loot-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; pointer-events: auto; }
/* --- SHOP OVERLAY SYSTEM (Matches Loot Layout) --- */
#shop-overlay {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100svh !important;
z-index: 10000 !important;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 15px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.95);
}
#shop-overlay > *:not(#inventory-bg) { position: relative; z-index: 2; }
#shop-header-strip {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 15px;
background: rgba(20, 20, 20, 0.85);
border: 1px solid #444;
border-radius: 4px;
margin-bottom: 12px;
flex-shrink: 0;
box-sizing: border-box;
}
#shop-title {
font-size: 1.4rem;
color: #ffffff;
text-transform: lowercase;
text-align: center;
width: 100%;
display: block;
margin: 0;
}
#btn-shop-close {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 15px !important;
z-index: 10001 !important;
font-family: sans-serif, Arial, Helvetica !important;
font-weight: bold !important;
font-size: 1.8rem !important;
color: #ffffff !important;
background: none !important;
border: none !important;
text-transform: none !important;
padding: 0 !important;
cursor: pointer !important;
line-height: 1 !important;
}
#shop-main-layout { display: flex; flex: 1; width: 100%; gap: 15px; min-height: 0; }
#shop-grid-section { flex: 1; display: flex; flex-direction: column; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 10px; border-radius: 4px; min-height: 0; overflow: hidden; }
#shop-grid-label { text-align: center; font-size: 1.3rem; color: #ffffff; margin-bottom: 8px; letter-spacing: 1px; text-transform: lowercase; flex-shrink: 0; }
#shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: max-content; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
#shop-content { flex: 1; display: flex; flex-direction: column; align-items: center; background: rgba(15, 15, 15, 0.7); border: 1px solid #333; padding: 15px; border-radius: 4px; min-height: 0; box-sizing: border-box; }
#shop-item-name { font-size: 1.8rem; margin: 0 0 10px 0; min-height: 2.2rem; text-align: center; color: #ffffff; }
#shop-inspection-body { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100%; flex: 1; min-height: 0; }
#shop-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; pointer-events: auto; }
/* --- FULL SCREEN VICTORY OVERLAY --- */
#victory-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.victory-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 90%;
max-width: 450px;
padding: 30px;
border: 2px solid #444;
background: #0a0a0a;
box-shadow: 0 0 40px rgba(0,0,0,0.9);
}
#victory-main-title {
font-size: clamp(3rem, 10vw, 4rem);
margin-bottom: 5px;
color: #ffffff;
text-shadow: 2px 2px 0px #000;
}
.victory-stat {
font-size: 1.5rem;
color: #cccccc;
}
.level-up-glow {
font-size: 2.2rem;
color: #ffff00;
text-shadow: 0 0 10px rgba(255, 255, 0, 0.4);
margin-bottom: 10px;
}
#victory-level-block {
border-top: 1px dashed #555;
border-bottom: 1px dashed #555;
padding: 15px 0;
width: 100%;
margin: 10px 0;
}
#victory-level-stats {
font-size: 1.3rem;
line-height: 1.6;
color: #ffffff;
}
/* --- COMBINE LIST VIEW --- */
.combine-row {
display: flex;
align-items: center;
gap: 15px;
padding: 8px 15px;
border: 2px solid transparent;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
transition: border 0.2s, background 0.2s;
flex-shrink: 0;
}
.combine-row:hover, .combine-row.active-slot {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.2);
}
.combine-row img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.combine-row span { font-size: clamp(1.2rem, 4vw, 1.5rem); color: #ffffff; }
#darkness-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* CHANGED: Bumped from 10 to 51 so it casts shadows OVER the weapons (z-index 50) */
z-index: 51;
transform-origin: center center;
mix-blend-mode: multiply;
transition: opacity 1.5s ease-in-out;
}
/* NEW: Dissolve the torch shadows during combat so the enemy spotlight pops! */
#dungeon-viewport.battle-blur-active #darkness-overlay {
opacity: 0.15;
}
/* --- DANCING FIRE FLICKER --- */
#darkness-overlay.is-lit {
animation: fire-warp 0.7s infinite alternate ease-in-out;
}
@keyframes fire-warp {
0% { transform: scale(1.02) translate(0px, 0px); }
33% { transform: scale(1.04) translate(1px, -1px); }
66% { transform: scale(1.03) translate(-1px, 2px); }
100% { transform: scale(1.05) translate(2px, -1px); }
}
/* --- CINEMATIC DIALOGUE OVERLAYS --- */
/* Widescreen Letterbox Bars (Attached to wrapper to avoid theme conflicts) */
#viewport-wrapper::before,
#viewport-wrapper::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 12%;
background: #000;
z-index: 250; /* Sits above all themes and viewports */
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
/* Hide bars off-screen by default */
#viewport-wrapper::before { top: 0; transform: translateY(-100%); }
#viewport-wrapper::after { bottom: 0; transform: translateY(100%); }
/* Slide bars in when active */
#viewport-wrapper.cinematic-mode::before,
#viewport-wrapper.cinematic-mode::after {
transform: translateY(0%);
}
/* Scene Zoom and Pan Transition */
#dungeon-scene {
transition: transform 0.6s ease-in-out;
}
/* Custom cinematic framing */
#viewport-wrapper.cinematic-mode #dungeon-scene {
animation: none !important; /* Temporarily suspends the idle sway */
transform: scale(1.75) translateY(10%) !important;
}
#viewport-wrapper.cinematic-mode.totem-mode #dungeon-scene {
animation: none !important; /* Temporarily suspends the idle sway */
transform: scale(1.15) translateY(14%) !important;
}
/* Blur all render layers smoothly... */
.render-layer {
transition: filter 0.6s ease-in-out;
}
/* Standard NPC Framing: Blurs everything except the NPC */
#viewport-wrapper.cinematic-mode:not(.gargoyle-mode) .render-layer:not([src*="npc"]) {
filter: blur(4px);
}
/* --- GARGOYLE SPECIFIC DIALOGUE MODE --- */
/* 1. Custom camera zoom and framing for the Gargoyle */
#viewport-wrapper.cinematic-mode.gargoyle-mode #dungeon-scene {
animation: none !important;
/* Tweak these values to get the exact zoom and panning you want! */
transform: scale(1.7) translateY(5%) !important;
}
/* 2. Apply a heavy blur to the deep background (Depth 2 and 3) */
#viewport-wrapper.cinematic-mode.gargoyle-mode .render-layer {
filter: blur(5px);
transition: filter 0.6s ease-in-out;
}
/* 3. Keep the Gargoyle AND the immediate front walls perfectly in focus! */
#viewport-wrapper.cinematic-mode.gargoyle-mode .render-layer[src*="gargoyle"],
#viewport-wrapper.cinematic-mode.gargoyle-mode .render-layer[src*="wall_F1"] {
filter: blur(0px) !important;
}
/* Custom framing specifically for the Healing Totem */
#viewport-wrapper.cinematic-mode.totem-mode #dungeon-scene {
/* Zooms slightly less, and aggressively pans DOWN to reveal the top of the totem */
transform: scale(1.15) translateY(14%) !important;
}
/* --- FAKE LOADING SCREEN --- */
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
z-index: 25000; /* CHANGED: Bumped up from 9999 to cover the Character Creator (15000) */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
background-color: #000000;
padding-bottom: 12vh;
opacity: 1;
transition: opacity 0.5s ease-out;
}
#loading-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover; /* Stretches the image to fill the entire window */
background-position: center center;
background-repeat: no-repeat;
filter: brightness(0.4) grayscale(20%); /* Dims the image slightly so the bar stands out */
z-index: 1;
}
#loading-content {
position: relative;
z-index: 2;
width: 80%;
max-width: 450px;
display: flex;
flex-direction: column;
align-items: center;
}
#loading-bar-track {
width: 100%;
height: 14px;
border: 2px solid #ffffff;
background: rgba(0, 0, 0, 0.85);
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
#loading-bar-fill {
width: 0%;
height: 100%;
background: #990000;
transition: width 0.08s ease-out;
}
/* --- WAKING UP SEQUENCE --- */
#eyelid-overlay {
position: absolute;
inset: 0;
z-index: 100; /* Sits above the dungeon but below dialogue/stats */
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
#eyelid-top, #eyelid-bottom {
width: 100%;
height: 50%;
background-color: #000000;
}
/* 1. The Blinking Eyelids */
.anim-wake-eyelids #eyelid-top { transform-origin: top; animation: flutterEyelid 4.5s ease-in-out forwards; }
.anim-wake-eyelids #eyelid-bottom { transform-origin: bottom; animation: flutterEyelid 4.5s ease-in-out forwards; }
@keyframes flutterEyelid {
0% { transform: scaleY(1); }
15% { transform: scaleY(0.85); } /* Crack open */
25% { transform: scaleY(1); } /* Blink shut */
50% { transform: scaleY(0.4); } /* Half open */
65% { transform: scaleY(0.6); } /* Heavy blink */
100% { transform: scaleY(0); } /* Fully open */
}
/* 2. The Vision & Head Movement */
.anim-wake-vision {
animation: wakeVision 4.5s ease-in-out forwards;
}
@keyframes wakeVision {
/* Head on floor, vision dark and blurry */
0% { filter: blur(12px) brightness(0.1); transform: translateY(15%) scale(1.1) rotate(3deg); }
/* Eyes adjust, light flares, head starts to lift */
50% { filter: blur(4px) brightness(1.5); transform: translateY(5%) scale(1.05) rotate(1deg); }
/* Fully upright, handing control back to the 1.03 idle sway! */
100% { filter: blur(0px) brightness(1); transform: translateY(0%) scale(1.03) rotate(0deg); }
}
/* --- LEVEL TITLE OVERLAY --- */
#level-title-overlay {
position: absolute;
inset: 0;
z-index: 120; /* Above darkness and shadows, but below UI */
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
#level-title-text {
font-size: clamp(2.5rem, 8vw, 4.5rem);
color: #ffffff;
/* CHANGED: Removed the red glow, keeping only a heavy black shadow for readability */
text-shadow: 0 0 15px #000000, 0 5px 10px rgba(0,0,0,0.8);
text-align: center;
opacity: 0;
}
.anim-title-fade {
animation: titleFadeInOut 3s ease-in-out forwards;
}
@keyframes titleFadeInOut {
0% { opacity: 0; filter: blur(10px) brightness(2); transform: scale(1.1); }
20% { opacity: 1; filter: blur(0px) brightness(1); transform: scale(1); }
80% { opacity: 1; filter: blur(0px) brightness(1); transform: scale(1); }
100% { opacity: 0; filter: blur(10px) brightness(0); transform: scale(0.9); }
}
/* --- CUTSCENE TEXT CRAWL --- */
#cutscene-text-overlay {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
/* CHANGED: Reverted to 130 so it sits BELOW the fade overlay */
z-index: 130 !important;
display: flex !important;
justify-content: center !important;
overflow: hidden !important;
pointer-events: none !important;
}
#cutscene-crawl-content {
position: absolute !important;
width: 85% !important;
text-align: center !important;
font-size: clamp(1.4rem, 4vw, 2rem) !important;
line-height: 1.6 !important;
color: #ffffff !important;
text-shadow: 0 0 10px #000000, 0 3px 5px rgba(0,0,0,0.8) !important;
top: 100% !important;
/* CHANGED: Reverted to 131 */
z-index: 131 !important;
}
#cutscene-crawl-content p {
margin-bottom: 30px !important;
}
.anim-text-crawl {
animation: cinematicCrawl 90s linear forwards !important;
}
@keyframes cinematicCrawl {
0% { transform: translateY(0); opacity: 0; }
2% { opacity: 1; } /* Fades in quickly as it breaches the bottom of the screen */
95% { opacity: 1; }
/* CHANGED: Moves up by the screen height (100vh) PLUS the text's own height (100%) so the last line perfectly clears the top */
100% { transform: translateY(calc(-100vh - 100%)); opacity: 0; }
}
/* Forcefully hide the sword during the cinematic walk */
body.forest_cutscene .sword-overlay {
display: none !important;
}
/* --- DYNAMIC WEAPON LIGHTING --- */
:root {
--ambient-brightness: 1;
}
.ambient-dim {
filter: brightness(var(--ambient-brightness)) !important;
transition: filter 0.5s ease;
}
.combat-bright {
filter: brightness(1) !important;
transition: filter 0.3s ease;
}
/* Graceful entrance for weapons */
@keyframes weaponSlideUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
.anim-weapon-up {
animation: weaponSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
/* NEW: Delayed entrance for swapping hands! */
.anim-weapon-up-delayed {
/* The '0.4s' is your wait time! Tweak this up or down (e.g., 0.3s or 0.6s) to perfect the timing. */
/* 'both' ensures the hand remains completely invisible while waiting. */
animation: weaponSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both !important;
}
/* --- WALL ART ZOOM SYSTEM --- */
#dungeon-viewport {
/* Adds a smooth cinematic push-in effect */
transition: transform 0.4s ease-in-out;
}
#dungeon-viewport.is-viewing-art {
/* TWEAK THESE VALUES LIVE! */
/* scale() is your zoom amount. translateY/X adjust the framing. */
transform: scale(1.9) translateY(4%);
/* Forces nearest-neighbor scaling so puzzle clues stay crisp */
image-rendering: pixelated;
}
/* --- WALL ART DEPTH OF FIELD --- */
/* Sword & Spell Hand: Blur + 0.6 Darkness Floor */
#dungeon-viewport.is-viewing-art .sword-overlay,
#dungeon-viewport.is-viewing-art .spell-hand-overlay {
filter: blur(6px) brightness(max(0.6, var(--ambient-brightness, 1))) !important;
opacity: 1.0;
transition: filter 1.0s ease, transform 0.5s ease;
}
/* Lantern: Blur + 1.0 Brightness Floor (Never darkens, only brightens!) */
#dungeon-viewport.is-viewing-art .lantern-hand-overlay {
filter: blur(6px) brightness(max(1, var(--ambient-brightness, 1))) !important;
opacity: 1.0;
transition: filter 1.0s ease, transform 0.5s ease;
}
/* --- AMBIENT WEAPON LIGHTING --- */
/* Sword & Spell Hand Base Lighting */
.sword-overlay, .spell-hand-overlay {
filter: brightness(max(0.6, var(--ambient-brightness, 1))) !important;
transition: filter 1.0s ease, transform 0.5s ease;
}
/* Lantern Base Lighting */
.lantern-hand-overlay {
filter: brightness(max(1, var(--ambient-brightness, 1))) !important;
transition: filter 1.0s ease, transform 0.5s ease;
}
/* --- WALL ART DESCRIPTION OVERLAY --- */
#art-description-overlay {
position: absolute;
top: 8%; /* Sits nicely near the top of the viewport frame */
left: 50%;
transform: translateX(-50%);
/* Strict boundaries so it never overflows the wrapper */
width: 90%;
max-width: 500px;
word-wrap: break-word; /* Forces long text to drop to the next line */
color: #fff;
font-size: 1.2rem;
text-align: center;
text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 0px 0px 4px #000;
z-index: 200;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
#art-description-overlay.is-visible {
opacity: 1;
}
/* --- OBJECT INSPECTION MODE --- */
/* 1. CAMERA CONTROLS (The Room & Table) */
#dungeon-viewport {
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}
#viewport-wrapper.inspect-mode #dungeon-viewport {
transform: scale(1.2) translateY(-5%);
transform-origin: center 70%;
filter: brightness(0.6) !important;
}
/* 2. DEPTH OF FIELD (The Foreground Weapons/Lantern) */
.sword-overlay,
.lantern-hand-overlay,
.spell-hand-overlay {
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}
#viewport-wrapper.inspect-mode .sword-overlay,
#viewport-wrapper.inspect-mode .lantern-hand-overlay,
#viewport-wrapper.inspect-mode .spell-hand-overlay {
/* Creates the out-of-focus foreground effect */
filter: blur(8px) brightness(0.5) !important;
/* Pushes the weapons down and away slightly while inspecting */
transform: translateY(10%) scale(1.05);
}
/* --- PUZZLE SYSTEM OVERLAY --- */
#puzzle-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.85); /* Darkens the dungeon behind the puzzle */
z-index: 500; /* Keeps it above everything */
display: flex;
justify-content: center;
align-items: center;
}
#puzzle-board {
position: relative;
/* --- FIXED: Locks the board to a perfect 1:1 square bounded by screen width & height --- */
width: min(90vw, 80dvh, 800px);
height: min(90vw, 80dvh, 800px);
aspect-ratio: 1 / 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#puzzle-instructions {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 90%;
margin: 0;
color: #ccc;
font-size: clamp(0.75rem, 2.2vw, 1.05rem);
text-align: center;
pointer-events: none;
text-shadow: 0 0 6px #000, 0 2px 4px #000;
letter-spacing: 1px;
user-select: none;
z-index: 4;
}
/* The invisible windows that clip the tumbling text */
.puzzle-slot {
position: absolute;
/* CHANGED: Converted your exact pixels to percentages! */
width: 5.625%; /* 45 / 800 */
height: 15.875%; /* 127 / 800 */
top: 43.625%; /* 349 / 800 */
overflow: hidden;
/* background: rgba(255, 0, 0, 0.4); */
}
/* Converted from 230px, 310px, and 390px */
#puzzle-slot-0 { left: 28.75%; }
#puzzle-slot-1 { left: 38.75%; }
#puzzle-slot-2 { left: 48.75%; }
/* The moving strip of text */
.tumbler-strip {
display: flex;
flex-direction: column;
height: 100%; /* Matches slot height exactly */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Individual letters */
.puzzle-letter {
height: 100%;
/* CRITICAL FIX: Forces each letter to be exactly 1 slot tall, preventing squishing! */
flex: 0 0 100%;
display: flex;
justify-content: center;
align-items: center;
color: #111;
font-size: clamp(1.2rem, 5vw, 2.2rem);
user-select: none;
text-shadow: none;
}
/* The invisible interactive button area */
#puzzle-lever {
position: absolute;
/* 1. TWEAK THIS: Set the width to match your drawn circle */
width: 16%;
/* Forces the height to perfectly match the width at all times */
aspect-ratio: 1 / 1;
/* 2. TWEAK THESE TO MOVE THE BUTTON AROUND */
top: 39%;
right: 27%;
/* CRITICAL FIX: This curves the edges into a perfect circle! */
border-radius: 50%;
}
/* Visual highlight for keyboard/D-pad navigation */
.puzzle-focused {
/* Creates a glowing box around whatever the player is selecting */
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5);
outline: 2px solid white;
}
/* --- PUZZLE & PORTAL SUCCESS GLOW --- */
.puzzle-letter.solved-glow {
color: #ff3333 !important;
text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000 !important;
transition: all 0.3s ease-in;
}
.portal-active-red {
/* CHANGED: Removed hue-rotate and saturate so your custom red sprite stays perfectly red! */
filter: drop-shadow(0 0 20px #ff0000) brightness(1.2) !important;
}
/* --- WEATHER SYSTEM --- */
#weather-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 5;
display: none;
}
#weather-overlay.is-raining {
display: block;
background-image: url('assets/sprites/ui/rain_overlay.gif');
background-size: cover;
opacity: 0.3;
}
/* --- NEW: PARALLAX FOREGROUND RAIN --- */
#weather-overlay-near {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 52; /* Puts it ABOVE the darkness overlay (51), but below the UI */
display: none;
}
#weather-overlay-near.is-raining {
display: block;
background-image: url('assets/sprites/ui/rain_overlay.gif');
background-size: 300%; /* Massively stretches the GIF so the drops look huge and close! */
filter: blur(3px); /* Throws it completely out of focus */
opacity: 0.10; /* Keeps it faint so it doesn't block the gameplay */
}
#lightning-overlay {
position: absolute; /* CHANGED: Locks it to the parent container */
top: 0; left: 0; width: 100%; height: 100%; /* CHANGED: Fills the container, not the screen */
background-color: white;
opacity: 0;
pointer-events: none;
z-index: 120; /* FIXED: Covers the 3D scene but sits behind black bars and text */
}
/* CHANGED: Renamed so it doesn't conflict with the Angel! */
.anim-weather-flash {
animation: flash-strobe 0.8s ease-out;
}
@keyframes flash-strobe {
0% { opacity: 0; }
10% { opacity: 0.8; }
20% { opacity: 0; }
30% { opacity: 0.5; }
100% { opacity: 0; }
}
/* --- GATEKEEPER BOSS ANIMATIONS --- */
.gatekeeper-wrapper {
/* Turns the 2D wrapper into a 3D box */
transform-style: preserve-3d !important;
perspective: 1000px;
filter: none !important;
will-change: auto !important;
transition: none !important;
}
/* STRIP COMBAT TRANSITIONS FROM 3D WRAPPERS TO PRESERVE Z-BUFFER DEPTH */
#dungeon-viewport.battle-mode-active div.gatekeeper-wrapper,
#dungeon-viewport.boss-arena-active div.gatekeeper-wrapper,
#dungeon-viewport.battle-blur-active div.gatekeeper-wrapper,
#dungeon-viewport.battle-mode-active div.enemy-angel,
#dungeon-viewport.boss-arena-active div.enemy-angel,
#dungeon-viewport.battle-blur-active div.enemy-angel {
will-change: auto !important;
transition: none !important;
filter: none !important;
}
.gatekeeper-body {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
/* Anchors the body to the absolute center of the 3D box */
transform: translateZ(0px);
animation: bossFloat 4s ease-in-out infinite;
/* CRITICAL: Must remain filter-free so browser keeps it in the 3D Z-buffer */
filter: none !important;
}
/* --- GATEKEEPER OMINOUS BREATHING SCALE --- */
@keyframes pulseRedAura {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-15px) scale(1.03); }
}
@keyframes pulseBlueAura {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-15px) scale(1.03); }
}
.gatekeeper-invulnerable {
animation: pulseRedAura 4s ease-in-out infinite !important;
}
.gatekeeper-vulnerable {
animation: pulseBlueAura 4s ease-in-out infinite !important;
}
/* --- GATEKEEPER BODY STATUS GLOW (SOFT OPACITY) --- */
.gatekeeper-wrapper:has(.gatekeeper-invulnerable) .gatekeeper-body,
.gatekeeper-wrapper.gatekeeper-invulnerable .gatekeeper-body,
.gatekeeper-body.gatekeeper-invulnerable {
filter: drop-shadow(0 0 14px rgba(255, 0, 0, 0.45)) brightness(1.08) !important;
}
.gatekeeper-wrapper:has(.gatekeeper-vulnerable) .gatekeeper-body,
.gatekeeper-wrapper.gatekeeper-vulnerable .gatekeeper-body,
.gatekeeper-body.gatekeeper-vulnerable {
filter: drop-shadow(0 0 14px rgba(51, 102, 255, 0.45)) brightness(1.08) !important;
}
/* COMBAT STATUS GLOW OVERRIDE */
#dungeon-viewport.battle-blur-active div.enemy-active .gatekeeper-body.gatekeeper-invulnerable {
filter: drop-shadow(0 0 18px rgba(255, 0, 0, 0.55)) brightness(1.15) !important;
}
#dungeon-viewport.battle-blur-active div.enemy-active .gatekeeper-body.gatekeeper-vulnerable {
filter: drop-shadow(0 0 18px rgba(51, 102, 255, 0.55)) brightness(1.15) !important;
}
@keyframes bossFloat {
0%, 100% { transform: translateY(0) translateZ(0px); }
50% { transform: translateY(-15px) translateZ(0px); }
}
.gatekeeper-orb {
position: absolute;
width: 25%; /* MUCH BIGGER! */
height: auto;
top: 38%; left: 38%; /* Re-centered for the larger size */
object-fit: contain;
backface-visibility: visible !important;
}
/* --- WIDER 3D ORBITS --- */
@keyframes orbit3D_1 {
0% { transform: rotateZ(15deg) rotateY(0deg) translateZ(260px) rotateY(0deg) rotateZ(-15deg); }
100% { transform: rotateZ(15deg) rotateY(360deg) translateZ(260px) rotateY(-360deg) rotateZ(-15deg); }
}
@keyframes orbit3D_2 {
0% { transform: rotateZ(-25deg) rotateY(120deg) translateZ(280px) rotateY(-120deg) rotateZ(25deg); }
100% { transform: rotateZ(-25deg) rotateY(480deg) translateZ(280px) rotateY(-480deg) rotateZ(25deg); }
}
@keyframes orbit3D_3 {
0% { transform: rotateZ(35deg) rotateY(240deg) translateZ(300px) rotateY(-240deg) rotateZ(-35deg); }
100% { transform: rotateZ(35deg) rotateY(600deg) translateZ(300px) rotateY(-600deg) rotateZ(-35deg); }
}
.anim-orbit-1 { animation: orbit3D_1 4s linear infinite; }
.anim-orbit-2 { animation: orbit3D_2 4.5s linear infinite; }
.anim-orbit-3 { animation: orbit3D_3 5s linear infinite; }
/* --- 3 DISTINCT ATTACK TRAJECTORIES (BULLETPROOF 3D) --- */
@keyframes orbAttack1 {
0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
/* Swerves left and flies forward */
50% { transform: translate3d(-100px, -20px, 400px) scale(3.5); filter: brightness(2.5); }
100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
}
@keyframes orbAttack2 {
0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
/* Swerves right and flies forward */
50% { transform: translate3d(100px, 30px, 400px) scale(3.5); filter: brightness(2.5); }
100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
}
@keyframes orbAttack3 {
0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
/* Arcs high over the top and flies forward */
50% { transform: translate3d(0px, -100px, 400px) scale(3.5); filter: brightness(2.5); }
100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); }
}
.anim-orb-attack-1 { animation: orbAttack1 0.8s ease-in-out forwards !important; }
.anim-orb-attack-2 { animation: orbAttack2 0.8s ease-in-out forwards !important; }
.anim-orb-attack-3 { animation: orbAttack3 0.8s ease-in-out forwards !important; }
/* --- EXTREME COMBAT VFX --- */
@keyframes viewportShake {
0%, 100% { transform: translate(0, 0) scale(1.02); }
25% { transform: translate(-15px, 12px) rotate(-2deg) scale(1.02); }
50% { transform: translate(15px, -12px) rotate(2deg) scale(1.02); }
75% { transform: translate(-12px, 15px) scale(1.02); }
}
.anim-viewport-shake { animation: viewportShake 0.4s ease-in-out forwards; }
@keyframes invertFlash {
0%, 100% { filter: invert(0) brightness(1); }
50% { filter: invert(1) brightness(3); }
}
.anim-invert-flash { animation: invertFlash 0.4s ease-out forwards; }
.low-health-blood #dungeon-viewport::before,
#dungeon-viewport.low-health-blood::before {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 150px 50px rgba(180, 0, 0, 0.8) !important;
z-index: 180;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
/* --- BOSS ARENA TRANSITIONS --- */
@keyframes wavyWarp {
0% { transform: scale(1) translateZ(0px); filter: contrast(1) hue-rotate(0deg); }
25% { transform: scale(1.05) translateZ(0px) skewY(2deg); filter: contrast(1.2) hue-rotate(15deg); }
75% { transform: scale(1.05) translateZ(0px) skewY(-2deg); filter: contrast(1.2) hue-rotate(-15deg); }
100% { transform: scale(1) translateZ(0px); filter: contrast(1) hue-rotate(0deg); }
}
.anim-wavy-warp {
animation: wavyWarp 2s ease-in-out;
}
/* Fade out the normal walls, decor, and base backgrounds */
/* We specifically exclude the active enemy, the newly injected boss backgrounds, and your weapons! */
#dungeon-viewport.boss-arena-active .render-layer:not(.enemy-active):not(.boss-bg-layer):not(.sword-overlay):not(.spell-hand-overlay):not(.lantern-hand-overlay) {
opacity: 0 !important;
transition: opacity 1.5s ease-in-out;
pointer-events: none;
}
/* Ensure the injected background layers stay fully opaque and fade in smoothly */
.boss-bg-layer {
opacity: 1 !important;
animation: fadeInBg 1.5s ease-in-out forwards;
}
@keyframes fadeInBg {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- NEW: LAVA HEAT RIPPLE (WITH DYNAMIC SCALE) --- */
@keyframes lavaHeatRipple {
0%, 100% {
transform: scale(calc(1.05 * var(--bg-scale)), calc(1.05 * var(--bg-scale))) translateY(0px);
filter: blur(0px) contrast(1) saturate(1);
}
33% {
transform: scale(calc(1.04 * var(--bg-scale)), calc(1.06 * var(--bg-scale))) translateY(-2px);
filter: blur(1.2px) contrast(1.15) saturate(1.1);
}
66% {
transform: scale(calc(1.06 * var(--bg-scale)), calc(1.04 * var(--bg-scale))) translateY(2px);
filter: blur(0.6px) contrast(1.1) saturate(1.05);
}
}
/* Target BOTH Gatekeeper background files */
img[src*="bg_gatekeeper_empty"],
img[src*="bg_gatekeeper_fog"] {
--bg-scale: 1; /* The default scale for the lava layer */
transform: scale(calc(1.05 * var(--bg-scale)));
animation: fadeInBg 1.5s ease-in-out forwards, lavaHeatRipple 7.3s ease-in-out infinite alternate !important;
}
/* Specific controls for the Fog layer */
img[src*="bg_gatekeeper_fog"] {
--bg-scale: 2.0; /* <-- CHANGE THIS NUMBER TO SCALE THE FOG (1.5 = 150%) */
animation-delay: 0s, -3.2s !important;
}
/* --- CUTSCENE 1 FADE OVERLAY --- */
#cutscene-fade {
position: absolute;
inset: 0;
background: #000000;
/* CHANGED: Bumped to 135 so it safely covers the text (131) and room, but stays under the cinematic bars (250) */
z-index: 135 !important;
pointer-events: none;
opacity: 1; /* Starts pitch black */
transition: opacity 6s ease-in-out;
}
/* --- NEW: HIDE MESSAGE BAR IN CUTSCENE --- */
body.forest_cutscene #message-bar {
display: none !important;
}
/* Force near-total pitch darkness and subtle candle flicker for the forest cutscene overlay */
body.forest_cutscene #darkness-overlay,
#game-screen.cutscene-mode #darkness-overlay {
opacity: 0.75 !important;
animation: cutsceneLanternFlicker 0.22s infinite alternate ease-in-out;
}
@keyframes cutsceneLanternFlicker {
0% {
opacity: 0.94;
filter: brightness(0.96);
}
50% {
opacity: 0.98;
filter: brightness(1.05);
}
100% {
opacity: 0.95;
filter: brightness(0.98);
}
}
/* --- CUTSCENE 1 CUSTOM CONTROLS --- */
body.forest_cutscene #viewport-wrapper.cinematic-mode #dungeon-scene {
/* Adjust translateY to frame the camera perfectly */
transform: scale(1.00) translateY(6%) !important;
}
/* CHANGED: Added :not(.lantern-hand-overlay) to protect the lantern from the blur */
body.forest_cutscene #viewport-wrapper.cinematic-mode .render-layer:not([src*="npc"]):not(.lantern-hand-overlay) {
/* Adjust the background blur specifically for this cutscene */
filter: blur(0.8px) !important;
}
body.forest_cutscene #darkness-overlay {
/* Adjust how dark the corridor is (0 = bright, 1 = pitch black) */
opacity: 0.8 !important;
}
/* --- CUTSCENE 1 FOG CONTROLS --- */
body.forest_cutscene .depth-3-fog {
/* 0.65 is the thickness. Adjust the RGB (50, 50, 50) to change the fog color! */
background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.65) 0%, rgba(50, 50, 50, 0.75) 55%, transparent 70%) !important;
}
body.forest_cutscene .depth-2-fog {
/* 0.3 is the thickness. Make this lower than depth-3 so it looks layered. */
background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.3) 0%, rgba(50, 50, 50, 0.4) 60%, transparent 75%) !important;
}
/* =========================================
THE DEVIL'S SUM (GAMBLING MINI-GAME)
========================================= */
#gambling-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
background-size: cover;
background-position: center;
z-index: 145;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/* CHANGED: Removed padding to give the flexbox maximum height to work with */
padding: 0;
}
.gambling-section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
/* CHANGED: Removed gap, we are relying purely on HTML margins now for exact control */
gap: 0;
}
.gambler-title { color: #ff3333; font-size: 1.5rem; text-shadow: 0 0 5px #ff0000; text-transform: lowercase; }
.player-title { color: #ffffff; font-size: 1.5rem; text-transform: lowercase; }
.dice-row {
display: flex;
/* CHANGED: Tighter gap for smaller screens */
gap: 15px;
justify-content: center;
}
/* --- 3D DICE ENGINE UPDATES --- */
:root {
--dice-size: 70px;
--dice-half: 35px;
}
.dice-scene {
width: var(--dice-size);
height: var(--dice-size);
perspective: 400px;
margin: 0 10px;
display: inline-block;
}
.dice-cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
}
/*
CRUCIAL: We apply the filter only to the inner images.
Applying this to the .dice-cube would flatten the preserve-3d context!
*/
.evil-dice .dice-face img {
filter: invert(1) sepia(1) saturate(5) hue-rotate(320deg) drop-shadow(0 0 10px #ff0000);
}
.dice-face {
position: absolute;
width: var(--dice-size);
height: var(--dice-size);
/* CHANGED: Removed background: #111 and added backface-visibility */
backface-visibility: hidden;
}
.dice-face img {
width: 100%;
height: 100%;
image-rendering: pixelated;
object-fit: contain;
}
/* Pushing faces outward to form the cube */
.dice-face-1 { transform: rotateY(0deg) translateZ(var(--dice-half)); }
.dice-face-2 { transform: rotateY(90deg) translateZ(var(--dice-half)); }
.dice-face-3 { transform: rotateY(180deg) translateZ(var(--dice-half)); }
.dice-face-4 { transform: rotateY(-90deg) translateZ(var(--dice-half)); }
.dice-face-5 { transform: rotateX(90deg) translateZ(var(--dice-half)); }
.dice-face-6 { transform: rotateX(-90deg) translateZ(var(--dice-half)); }
.dice-cube.anim-rolling {
animation: diceRollAnim 0.4s linear infinite;
}
@keyframes diceRollAnim {
0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { transform: rotateX(720deg) rotateY(1080deg) rotateZ(360deg); }
}
/* ========================================= */
/* --- GAMBLING MINIGAME UI OVERRIDES --- */
/* ========================================= */
/* 1. Hide the D-pad and associated buttons entirely */
#game-screen.gambling-mode #dpad-container {
display: none !important;
}
/* =========================================
--- THE MUSHROOM TRIP (SMOOTH RAINBOW) ---
========================================= */
/* 1. The Rainbow Color Wash Overlay */
/* Injects a cycling neon gradient over the entire 3D room, fading in over 5 seconds */
#dungeon-viewport::after {
content: "";
position: absolute;
inset: -20%; /* Bleed past the edges so it never clips during the sway */
pointer-events: none;
z-index: 50; /* Sits above darkness-overlay but below the UI layer */
mix-blend-mode: color; /* Forces grayscale pixels to absorb the neon hues */
background-color: #ff0000;
animation: architectRainbowCycle 4s linear infinite;
opacity: 0;
transition: opacity 5s ease-in-out;
}
.mushroom-trip-active #dungeon-viewport::after {
opacity: 1; /* Slowly fades in the crazy colors */
}
.mushroom-trip-fade-out #dungeon-viewport::after {
opacity: 0; /* Fades out smoothly when the trip ends */
}
/* 2. The Uncontrollable 3D Geometry Sway */
.mushroom-trip-active #dungeon-scene {
/* Slowed down from 3s to 10s for a heavy, sickening wave */
animation: architectSceneSway 10s infinite alternate ease-in-out !important;
transform-origin: center center;
}
.mushroom-trip-fade-out #dungeon-scene {
transition: transform 4s ease-out;
transform: scale(1) rotate(0deg) skewX(0deg) skewY(0deg) !important;
}
/* --- THE KEYFRAMES --- */
@keyframes architectRainbowCycle {
0% { background-color: #ff0000; }
17% { background-color: #ff00ff; }
33% { background-color: #0000ff; }
50% { background-color: #00ffff; }
67% { background-color: #00ff00; }
83% { background-color: #ffff00; }
100% { background-color: #ff0000; }
}
/* Starts neutral, rapidly scales up to hide edges, then begins the slow heave */
@keyframes architectSceneSway {
0% { transform: scale(1) rotate(0deg) skew(0deg, 0deg); }
5% { transform: scale(1.6) rotate(2deg) skew(2deg, -2deg); } /* Safety buffer */
15% { transform: scale(2.4) rotate(12deg) skew(15deg, -10deg); }
30% { transform: scale(1.8) rotate(-18deg) skew(-15deg, 10deg); }
45% { transform: scale(2.8) rotate(8deg) skew(20deg, 5deg); }
60% { transform: scale(1.9) rotate(-22deg) skew(-12deg, -15deg); }
75% { transform: scale(2.5) rotate(16deg) skew(10deg, 20deg); }
90% { transform: scale(1.8) rotate(-12deg) skew(-20deg, -10deg); }
95% { transform: scale(1.6) rotate(-2deg) skew(-2deg, 2deg); } /* Safety buffer */
100% { transform: scale(1) rotate(0deg) skew(0deg, 0deg); }
}
/* =========================================
--- SETTINGS & ACCESSIBILITY TOGGLES ---
========================================= */
#settings-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(10, 10, 10, 0.96);
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
/* --- PIN CLOSE BUTTON TO TOP-RIGHT CORNER --- */
#btn-settings-close {
position: fixed !important;
top: 20px !important;
right: 25px !important;
z-index: 10000 !important;
font-size: 2.5rem !important;
color: #ffffff !important;
background: none !important;
border: none !important;
cursor: pointer !important;
}
.settings-panel {
max-width: 500px;
width: 90%;
text-align: center;
position: relative;
padding: 20px;
}
.settings-btn {
background: rgba(0, 0, 0, 0.5);
border: 1px solid #555;
color: #fff;
padding: 15px 20px;
margin: 8px 0;
width: 100%;
cursor: pointer;
font-size: 1.4rem;
transition: background 0.2s, border-color 0.2s;
}
.settings-btn:hover {
background: #222;
border-color: #ff3333;
}
/* --- NEW: VIRTUAL DYSLEXIC FONT WITH SIZE-ADJUST --- */
@font-face {
font-family: 'HolyVestige-Dyslexic';
/* Pulls the system fonts but wraps them in our custom settings */
src: local('Verdana'), local('Segoe UI'), local('system-ui'), local('sans-serif');
size-adjust: 75%; /* Mathematically shrinks the glyphs before layout calculation */
}
/* 1. Dyslexic Font Override (Global Mode) */
body.dyslexic-mode * {
font-family: 'HolyVestige-Dyslexic', sans-serif !important;
letter-spacing: normal !important;
text-transform: none !important;
line-height: normal !important; /* Prevents tall glyphs from clipping vertically */
}
/* --- NEW: PERMANENTLY ACCESSIBLE TOGGLE BUTTON --- */
#toggle-font {
font-family: 'HolyVestige-Dyslexic', sans-serif !important;
letter-spacing: normal !important;
text-transform: none !important;
/* We keep this one specific override just to match your settings menu layout */
font-size: 1.2rem !important;
}
/* 2. CRT Scanline Filter - ENHANCED */
body.crt-filter-active::after {
content: "";
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
background:
/* CHANGED: Pulled scanlines back to 15% opacity */
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 2px,
transparent 2px,
transparent 4px
),
/* CHANGED: Pulled vignette shadow back to 25% opacity */
radial-gradient(
circle at center,
transparent 50%,
rgba(0, 0, 0, 0.25) 100%
);
mix-blend-mode: multiply;
animation: crt-flicker 0.12s infinite;
}
/* --- NEW: Global CRT Bloom (Makes images and the 3D room glow!) --- */Dyslex
body.crt-filter-active::before {
content: "";
position: fixed;
inset: 0;
z-index: 8999; /* Sits right beneath the scanlines */
pointer-events: none;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 90%);
mix-blend-mode: screen;
}
/* 4. Universal UI Text Glow (Phosphor Bleed) */
/* The wildcard (*) applies the glow to absolutely every text element */
body.crt-filter-active * {
text-shadow: 0 0 4px rgba(255, 255, 255, 0.5) !important;
}
/* --- CHANGED: A much more aggressive, erratic monitor flicker --- */
@keyframes crt-flicker {
0% { opacity: 0.85; }
25% { opacity: 1.0; }
50% { opacity: 0.75; }
75% { opacity: 0.95; }
100% { opacity: 0.85; }
}
/* ==========================================================================
VFX & KEYFRAME ANIMATION LIBRARY
========================================================================== */
/* --- 1. CORE UI, SCREEN & GLITCH EFFECTS --- */
@keyframes logoPulse {
0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) brightness(0.9); transform: scale(1); }
50% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4)) brightness(1.2); transform: scale(1.03); }
100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) brightness(0.9); transform: scale(1); }
}
@keyframes perishGlitch {
0% { transform: translate(0, 0) scale(1) skew(0deg); filter: drop-shadow(0 0 10px red); letter-spacing: normal; opacity: 1; }
10% { transform: translate(-15px, 10px) scale(1.3) skew(-30deg); filter: drop-shadow(0 0 50px red) invert(1) hue-rotate(180deg); letter-spacing: 15px; }
20% { transform: translate(20px, -15px) scale(0.7) skew(45deg); filter: drop-shadow(10px -10px 0 rgb(255, 166, 0)) drop-shadow(-10px 10px 0 red) blur(3px); letter-spacing: -5px; }
30% { transform: translate(-5px, 5px) scale(1.1) skew(0deg) rotate(-5deg); filter: drop-shadow(0 15px 5px darkred) contrast(3); letter-spacing: 20px; }
40% { transform: translate(10px, 0) scale(1.5) skew(15deg); filter: drop-shadow(0 0 0 transparent) blur(12px); }
50% { transform: translate(0, 0) scale(1) skew(0deg); filter: drop-shadow(0 0 15px red) invert(0); letter-spacing: normal; }
55% { transform: translate(-8px, 4px) skewX(20deg); }
60% { transform: translate(8px, -4px) skewX(-20deg); filter: blur(6px); }
65% { transform: translate(0, 0) skewX(0deg); filter: drop-shadow(0 0 10px red); }
75% { transform: scale(1.2); filter: drop-shadow(0 0 40px red); }
85% { transform: translate(-4px, 4px) skew(15deg); filter: drop-shadow(0 0 10px red); }
95% { transform: translate(4px, -4px) skew(-15deg); filter: blur(3px); }
100% { transform: translate(0, 0) scale(4) skew(0deg); filter: drop-shadow(0 0 10px red); letter-spacing: normal; opacity: 1; }
}
@keyframes perishPulseEerie {
0% { filter: drop-shadow(0 0 10px #ff0000) brightness(0.8); transform: scale(1); }
50% { filter: drop-shadow(0 0 0px #ff0000) drop-shadow(0 0 10px #ff3333) brightness(0.8); transform: scale(1.16); }
100% { filter: drop-shadow(0 0 10px #ff0000) brightness(0.8); transform: scale(1); }
}
.anim-perish {
animation: perishGlitch 2.5s linear 1, perishPulseEerie 6s ease-in-out 2.5s infinite;
}
@keyframes crt-flicker {
0% { opacity: 0.85; }
25% { opacity: 1.0; }
50% { opacity: 0.75; }
75% { opacity: 0.95; }
100% { opacity: 0.85; }
}
/* --- 2. PLAYER PERSPECTIVE & WEAPON MOTION --- */
@keyframes swordIdle {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(5px) rotate(1deg); }
100% { transform: translateY(0) rotate(0deg); }
}
@keyframes swordSwing3D {
0% { transform: perspective(800px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); filter: blur(0px); }
20% { transform: perspective(800px) translate3d(60px, -40px, 50px) rotateX(15deg) rotateY(20deg) rotateZ(30deg); filter: blur(0px); }
50% { transform: perspective(800px) translate3d(10px, -30px, -220px) rotateX(-60deg) rotateY(-10deg) rotateZ(-15deg); filter: blur(2px); }
70% { transform: perspective(800px) translate3d(0px, -20px, -220px) rotateX(-65deg) rotateY(-15deg) rotateZ(-20deg); filter: blur(0px); }
100% { transform: perspective(800px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); filter: blur(0px); }
}
.anim-sword-swing {
transform-origin: 75% 80% !important;
animation: swordSwing3D 0.75s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}
@keyframes weaponSlideUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
.anim-weapon-up { animation: weaponSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
.anim-weapon-up-delayed { animation: weaponSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both !important; }
@keyframes lanternSlideUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } }
@keyframes lanternSlideDown { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } }
.anim-lantern-up { animation: lanternSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
.anim-lantern-down { animation: lanternSlideDown 0.6s ease-in forwards !important; }
@keyframes rightHandSway {
0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
100% { transform: translateY(12px) translateX(-8px) rotate(-2deg); }
}
/* --- 3. COMBAT, SPELLS & IMPACT VFX --- */
@keyframes enemyAttackLunge {
0% { transform: scale(1) translateY(0); filter: brightness(1); }
40% { transform: scale(1.2) translateY(-5%); filter: brightness(1.3); }
100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
.anim-enemy-attack { animation: enemyAttackLunge 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
@keyframes enemyPowerLunge {
0% { transform: scale(1) translateY(0); filter: brightness(1); }
40% { transform: scale(1.3) translateY(-8%); filter: brightness(1.5); }
100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
.anim-enemy-power-attack { animation: enemyPowerLunge 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
@keyframes enemyHitFlinch {
0% { transform: scale(1) translateX(0); filter: brightness(1); }
20% { transform: scale(0.9) translateX(-10px); filter: brightness(2) drop-shadow(0 0 15px white); }
40% { transform: scale(0.9) translateX(10px); filter: brightness(2) drop-shadow(0 0 15px white); }
60% { transform: scale(0.9) translateX(-5px); filter: brightness(2); }
80% { transform: scale(0.9) translateX(5px); filter: brightness(2); }
100% { transform: scale(1) translateX(0); filter: brightness(1); }
}
.anim-enemy-hit { animation: enemyHitFlinch 0.4s ease-out forwards !important; }
@keyframes lightningFlash {
0% { filter: brightness(1) invert(0); }
15% { filter: brightness(5) invert(1) hue-rotate(180deg); }
30% { filter: brightness(1) invert(0); }
45% { filter: brightness(3) invert(0.8) hue-rotate(180deg); }
60% { filter: brightness(1) invert(0); }
100% { filter: brightness(1) invert(0); }
}
.anim-lightning-flash { animation: lightningFlash 0.6s ease-out forwards !important; }
@keyframes magicFlame { 0% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); } 20% { filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); } 80% { filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(5); } 100% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); } }
.anim-magic-flame { animation: magicFlame 0.8s ease-out forwards; }
@keyframes magicShield { 0% { box-shadow: inset 0 0 0px #330066; } 50% { box-shadow: inset 0 0 100px #330066; } 100% { box-shadow: inset 0 0 0px #330066; } }
.anim-magic-shield { animation: magicShield 1.5s ease-in-out forwards; }
@keyframes magicStare { 0% { filter: invert(0); transform: scale(1); } 20% { filter: invert(1); transform: scale(1.05); } 40% { filter: invert(0); transform: scale(1); } 60% { filter: invert(1); transform: scale(1.05); } 100% { filter: invert(0); transform: scale(1); } }
.anim-magic-stare { animation: magicStare 0.6s ease-in-out forwards; }
/* --- 4. ENEMY & BOSS ANIMATIONS --- */
@keyframes angelFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
@keyframes orbitRingOne { 0% { transform: rotateX(75deg) rotateY(15deg) rotateZ(0deg); } 100% { transform: rotateX(75deg) rotateY(15deg) rotateZ(360deg); } }
@keyframes orbitRingTwo { 0% { transform: rotateX(105deg) rotateY(-20deg) rotateZ(0deg); } 100% { transform: rotateX(105deg) rotateY(-20deg) rotateZ(-360deg); } }
@keyframes ratJitter {
0% { transform: translate(0, 0) rotate(0deg); }
15% { transform: translate(-1px, 1px) rotate(-0.5deg); }
30% { transform: translate(1px, 0px) rotate(0.5deg); }
40% { transform: translate(0, 0) rotate(0deg); }
42% { transform: translate(-3px, 2px) rotate(-2deg); }
44% { transform: translate(2px, -1px) rotate(1.5deg); }
46% { transform: translate(-2px, 2px) rotate(-1deg); }
48% { transform: translate(3px, 0px) rotate(2deg); }
50% { transform: translate(-1px, -2px) rotate(-1.5deg); }
52% { transform: translate(0, 0) rotate(0deg); }
65% { transform: translate(1px, 1px) rotate(0.5deg); }
85% { transform: translate(-1px, 0px) rotate(-0.5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes bossFloat { 0%, 100% { transform: translateY(0) translateZ(0px); } 50% { transform: translateY(-15px) translateZ(0px); } }
@keyframes pulseRedAura { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.03); } }
@keyframes pulseBlueAura { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.03); } }
@keyframes orbit3D_1 { 0% { transform: rotateZ(15deg) rotateY(0deg) translateZ(260px) rotateY(0deg) rotateZ(-15deg); } 100% { transform: rotateZ(15deg) rotateY(360deg) translateZ(260px) rotateY(-360deg) rotateZ(-15deg); } }
@keyframes orbit3D_2 { 0% { transform: rotateZ(-25deg) rotateY(120deg) translateZ(280px) rotateY(-120deg) rotateZ(25deg); } 100% { transform: rotateZ(-25deg) rotateY(480deg) translateZ(280px) rotateY(-480deg) rotateZ(25deg); } }
@keyframes orbit3D_3 { 0% { transform: rotateZ(35deg) rotateY(240deg) translateZ(300px) rotateY(-240deg) rotateZ(-35deg); } 100% { transform: rotateZ(35deg) rotateY(600deg) translateZ(300px) rotateY(-600deg) rotateZ(-35deg); } }
.anim-orbit-1 { animation: orbit3D_1 4s linear infinite; }
.anim-orbit-2 { animation: orbit3D_2 4.5s linear infinite; }
.anim-orbit-3 { animation: orbit3D_3 5s linear infinite; }
@keyframes orbAttack1 { 0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } 50% { transform: translate3d(-100px, -20px, 400px) scale(3.5); filter: brightness(2.5); } 100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } }
@keyframes orbAttack2 { 0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } 50% { transform: translate3d(100px, 30px, 400px) scale(3.5); filter: brightness(2.5); } 100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } }
@keyframes orbAttack3 { 0% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } 50% { transform: translate3d(0px, -100px, 400px) scale(3.5); filter: brightness(2.5); } 100% { transform: translate3d(0px, 0px, 0px) scale(1); filter: brightness(1); } }
.anim-orb-attack-1 { animation: orbAttack1 0.8s ease-in-out forwards !important; }
.anim-orb-attack-2 { animation: orbAttack2 0.8s ease-in-out forwards !important; }
.anim-orb-attack-3 { animation: orbAttack3 0.8s ease-in-out forwards !important; }
/* --- 5. DEATH & SHATTER SEQUENCES --- */
@keyframes spectralShatter {
0% { filter: brightness(1); transform: scale(1) translateY(0); opacity: 1; }
15% { filter: brightness(3) drop-shadow(0 0 20px white); transform: scale(1.1) translateY(0); opacity: 1; }
40% { filter: brightness(1.5) drop-shadow(-30px 10px 0px rgba(255,0,0,0.8)) drop-shadow(30px -10px 0px rgba(0,255,255,0.8)); transform: scaleX(1.6) scaleY(0.7) translateY(-5%); opacity: 0.8; }
100% { filter: brightness(0) blur(15px); transform: scaleX(2.5) scaleY(0.3) translateY(-20%); opacity: 0; }
}
.anim-enemy-death,
#dungeon-viewport .anim-enemy-death {
animation: spectralShatter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
/* Clean up child animations during death (spares the Angel's 3D orbiting rings) */
#dungeon-viewport .anim-enemy-death *:not([class*="angel"]) {
animation: none !important;
}
@keyframes angelWrapperShatter {
0% { transform: scale(1) translateY(0); }
15% { transform: scale(1.1) translateY(0); }
40% { transform: scaleX(1.6) scaleY(0.7) translateY(-5%); }
100% { transform: scaleX(2.5) scaleY(0.3) translateY(-20%); }
}
@keyframes angelFadeShatter {
0% { filter: brightness(1); opacity: 1; }
15% { filter: brightness(3) drop-shadow(0 0 20px white); opacity: 1; }
40% { filter: brightness(1.5) drop-shadow(-30px 10px 0px rgba(255,0,0,0.8)) drop-shadow(30px -10px 0px rgba(0,255,255,0.8)); opacity: 0.8; }
100% { filter: brightness(0) blur(15px); opacity: 0; }
}
/* ANGEL MULTI-PART 3D DEATH OVERRIDES */
#dungeon-viewport .enemy-angel.anim-enemy-death {
animation: angelWrapperShatter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
#dungeon-viewport .enemy-angel.anim-enemy-death .angel-body {
animation: angelFadeShatter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
#dungeon-viewport .enemy-angel.anim-enemy-death .ring-1 {
animation: orbitRingOne 0.5s linear infinite, angelFadeShatter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
#dungeon-viewport .enemy-angel.anim-enemy-death .ring-2 {
animation: orbitRingTwo 0.7s linear infinite, angelFadeShatter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
@keyframes playerDeathFade {
0% { filter: blur(0px) brightness(1) grayscale(0%); }
50% { filter: blur(4px) brightness(0.5) drop-shadow(0 0 20px red) grayscale(50%); }
100% { filter: blur(12px) brightness(0) grayscale(100%); }
}
.anim-player-death { animation: playerDeathFade 2s ease-in forwards !important; }
/* --- 6. ITEM & OBJECT MOTION --- */
@keyframes keyGlowPulse {
0% { filter: drop-shadow(0 0 2px #ffffff) brightness(1); transform: scale(1); }
50% { filter: drop-shadow(0 0 12px #ffffff) brightness(1.7); transform: scale(1.06); }
100% { filter: drop-shadow(0 0 2px #ffffff) brightness(1); transform: scale(1); }
}
.key-glow { animation: keyGlowPulse 1.2s infinite ease-in-out; }
@keyframes keyAcquiredBounce {
0% { transform: scale(1) translateY(0); opacity: 1; filter: drop-shadow(0 0 12px #ffffff) brightness(1.7); }
50% { transform: scale(1.3) translateY(-15%); opacity: 1; filter: drop-shadow(0 0 20px #ffffff) brightness(2); }
100% { transform: scale(0.5) translateY(-30%); opacity: 0; filter: drop-shadow(0 0 0px #ffffff) brightness(1); }
}
.key-acquired-anim { animation: keyAcquiredBounce 0.8s ease-out forwards; z-index: 100; }
@keyframes flaskSway {
0% { transform: rotate(-1.5deg); filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3)); }
50% { transform: rotate(1.5deg); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
100% { transform: rotate(-1.5deg); filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3)); }
}
.flask-sway { animation: flaskSway 4s ease-in-out infinite; }
@keyframes fairyHover {
0% { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff) contrast(0.2) brightness(3); transform: translateY(0); }
50% { filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 50px #fff) contrast(0.05) brightness(5); transform: translateY(-12px); }
100% { filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff) contrast(0.2) brightness(3); transform: translateY(0); }
}
.fairy-hover { animation: fairyHover 2.5s ease-in-out infinite; }
@keyframes paperSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.item-spin-anim { animation: paperSpin 2.5s linear infinite; }
@keyframes teleporterPulse { 0% { filter: drop-shadow(0 0 2px #fff); opacity: 0.8; } 50% { filter: drop-shadow(0 0 15px #fff); opacity: 1; } 100% { filter: drop-shadow(0 0 2px #fff); opacity: 0.8; } }
.teleporter-pulse { animation: teleporterPulse 2s infinite; }
/* --- 7. ENVIRONMENTAL & SCENE TRANSITIONS --- */
@keyframes idleHeadSway {
0% { transform: scale(1.03) translateY(0px) rotate(0deg); }
50% { transform: scale(1.03) translateY(6px) rotate(0.6deg); }
100% { transform: scale(1.03) translateY(0px) rotate(0deg); }
}
@keyframes bobStep { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(2.8px) scale(1.005); } 100% { transform: translateY(0) scale(1); } }
@keyframes bobTurnLeft { 0% { transform: rotate(0deg); } 50% { transform: rotate(-0.35deg); } 100% { transform: rotate(0deg); } }
@keyframes bobTurnRight { 0% { transform: rotate(0deg); } 50% { transform: rotate(0.35deg); } 100% { transform: rotate(0deg); } }
.bob-step .render-layer:not(.key-acquired-anim) { animation: bobStep 0.15s ease-in-out; }
.bob-turn-l .render-layer:not(.key-acquired-anim) { animation: bobTurnLeft 0.15s ease-in-out; }
.bob-turn-r .render-layer:not(.key-acquired-anim) { animation: bobTurnRight 0.15s ease-in-out; }
@keyframes heavyBobStep { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(10px) scale(1.01); } 100% { transform: translateY(0) scale(1); } }
.heavy-bob-step .render-layer:not(.key-acquired-anim) { animation: heavyBobStep 0.9s ease-in-out; }
@keyframes fire-warp {
0% { transform: scale(1.02) translate(0px, 0px); }
33% { transform: scale(1.04) translate(1px, -1px); }
66% { transform: scale(1.03) translate(-1px, 2px); }
100% { transform: scale(1.05) translate(2px, -1px); }
}
@keyframes viewportShake {
0%, 100% { transform: translate(0, 0) scale(1.02); }
25% { transform: translate(-15px, 12px) rotate(-2deg) scale(1.02); }
50% { transform: translate(15px, -12px) rotate(2deg) scale(1.02); }
75% { transform: translate(-12px, 15px) scale(1.02); }
}
.anim-viewport-shake { animation: viewportShake 0.4s ease-in-out forwards; }
@keyframes invertFlash {
0%, 100% { filter: invert(0) brightness(1); }
50% { filter: invert(1) brightness(3); }
}
.anim-invert-flash { animation: invertFlash 0.4s ease-out forwards; }
@keyframes battleWarp {
0% { transform: scale(1.03) translateZ(0); filter: contrast(1) hue-rotate(0deg); }
30% { transform: scale(1.15) translateZ(0) rotate(1deg); filter: contrast(1.5) hue-rotate(15deg); }
70% { transform: scale(1.05) translateZ(0) rotate(-1deg); filter: contrast(1.8) hue-rotate(-15deg); }
100% { transform: scale(1.03) translateZ(0) rotate(0deg); filter: contrast(1) hue-rotate(0deg); }
}
.anim-battle-warp { animation: battleWarp 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
@keyframes battleEndWarp {
0% { transform: scale(1.03) translateZ(0); filter: brightness(1) saturate(1); }
50% { transform: scale(1.05) translateZ(0); filter: brightness(1.2) saturate(1.1); }
100% { transform: scale(1.03) translateZ(0); filter: brightness(1) saturate(1); }
}
.anim-battle-end-warp { animation: battleEndWarp 1.5s ease-in-out forwards; }
@keyframes teleporterWarp {
0% { transform: scale(1.03) translateY(0); filter: hue-rotate(0deg) contrast(1) blur(0px) brightness(1); opacity: 1; }
30% { transform: scale(1.05) translateY(-5%); filter: hue-rotate(-30deg) contrast(1.5) blur(2px) brightness(1.5); opacity: 1; }
100% { transform: scale(0.7, 4) translateY(100%); filter: hue-rotate(90deg) contrast(3) blur(12px) brightness(5); opacity: 0; }
}
.anim-teleporter-warp { animation: teleporterWarp 4s cubic-bezier(0.5, 0, 0.5, 1) forwards; }
@keyframes doorEntryWarp {
0% { transform: scale(1.03); filter: brightness(1); }
100% { transform: scale(2.5); filter: brightness(0); }
}
.anim-door-entry { animation: doorEntryWarp 5s ease-in forwards; }
@keyframes wavyWarp {
0% { transform: scale(1) translateZ(0px); filter: contrast(1) hue-rotate(0deg); }
25% { transform: scale(1.05) translateZ(0px) skewY(2deg); filter: contrast(1.2) hue-rotate(15deg); }
75% { transform: scale(1.05) translateZ(0px) skewY(-2deg); filter: contrast(1.2) hue-rotate(-15deg); }
100% { transform: scale(1) translateZ(0px); filter: contrast(1) hue-rotate(0deg); }
}
.anim-wavy-warp { animation: wavyWarp 2s ease-in-out; }
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes lavaHeatRipple {
0%, 100% { transform: scale(calc(1.05 * var(--bg-scale)), calc(1.05 * var(--bg-scale))) translateY(0px); filter: blur(0px) contrast(1) saturate(1); }
33% { transform: scale(calc(1.04 * var(--bg-scale)), calc(1.06 * var(--bg-scale))) translateY(-2px); filter: blur(1.2px) contrast(1.15) saturate(1.1); }
66% { transform: scale(calc(1.06 * var(--bg-scale)), calc(1.04 * var(--bg-scale))) translateY(2px); filter: blur(0.6px) contrast(1.1) saturate(1.05); }
}
@keyframes flash-strobe { 0% { opacity: 0; } 10% { opacity: 0.8; } 20% { opacity: 0; } 30% { opacity: 0.5; } 100% { opacity: 0; } }
.anim-weather-flash { animation: flash-strobe 0.8s ease-out; }
/* --- 8. CUTSCENES, NARRATIVE & MINIGAMES --- */
@keyframes flutterEyelid {
0% { transform: scaleY(1); }
15% { transform: scaleY(0.85); }
25% { transform: scaleY(1); }
50% { transform: scaleY(0.4); }
65% { transform: scaleY(0.6); }
100% { transform: scaleY(0); }
}
.anim-wake-eyelids #eyelid-top { transform-origin: top; animation: flutterEyelid 4.5s ease-in-out forwards; }
.anim-wake-eyelids #eyelid-bottom { transform-origin: bottom; animation: flutterEyelid 4.5s ease-in-out forwards; }
@keyframes wakeVision {
0% { filter: blur(12px) brightness(0.1); transform: translateY(15%) scale(1.1) rotate(3deg); }
50% { filter: blur(4px) brightness(1.5); transform: translateY(5%) scale(1.05) rotate(1deg); }
100% { filter: blur(0px) brightness(1); transform: translateY(0%) scale(1.03) rotate(0deg); }
}
.anim-wake-vision { animation: wakeVision 4.5s ease-in-out forwards; }
@keyframes titleFadeInOut {
0% { opacity: 0; filter: blur(10px) brightness(2); transform: scale(1.1); }
20% { opacity: 1; filter: blur(0px) brightness(1); transform: scale(1); }
80% { opacity: 1; filter: blur(0px) brightness(1); transform: scale(1); }
100% { opacity: 0; filter: blur(10px) brightness(0); transform: scale(0.9); }
}
.anim-title-fade { animation: titleFadeInOut 3s ease-in-out forwards; }
@keyframes cinematicCrawl {
0% { transform: translateY(0); opacity: 0; }
2% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateY(calc(-100vh - 100%)); opacity: 0; }
}
.anim-text-crawl { animation: cinematicCrawl 90s linear forwards !important; }
@keyframes diceRollAnim {
0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
100% { transform: rotateX(720deg) rotateY(1080deg) rotateZ(360deg); }
}
.dice-cube.anim-rolling { animation: diceRollAnim 0.4s linear infinite; }
@keyframes architectRainbowCycle {
0% { background-color: #ff0000; }
17% { background-color: #ff00ff; }
33% { background-color: #0000ff; }
50% { background-color: #00ffff; }
67% { background-color: #00ff00; }
83% { background-color: #ffff00; }
100% { background-color: #ff0000; }
}
@keyframes architectSceneSway {
0% { transform: scale(1) rotate(0deg) skew(0deg, 0deg); }
5% { transform: scale(1.6) rotate(2deg) skew(2deg, -2deg); }
15% { transform: scale(2.4) rotate(12deg) skew(15deg, -10deg); }
30% { transform: scale(1.8) rotate(-18deg) skew(-15deg, 10deg); }
45% { transform: scale(2.8) rotate(8deg) skew(20deg, 5deg); }
60% { transform: scale(1.9) rotate(-22deg) skew(-12deg, -15deg); }
75% { transform: scale(2.5) rotate(16deg) skew(10deg, 20deg); }
90% { transform: scale(1.8) rotate(-12deg) skew(-20deg, -10deg); }
95% { transform: scale(1.6) rotate(-2deg) skew(-2deg, 2deg); }
100% { transform: scale(1) rotate(0deg) skew(0deg, 0deg); }
}
/* --- COMPASS NEEDLE INERTIA ANIMATIONS --- */
.anim-needle-left {
animation: needleTurnLeft 0.18s ease-out forwards;
}
.anim-needle-right {
animation: needleTurnRight 0.18s ease-out forwards;
}
@keyframes needleTurnLeft {
0% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(0deg); }
35% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(-35deg); }
100% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(0deg); }
}
@keyframes needleTurnRight {
0% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(0deg); }
35% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(35deg); }
100% { transform: translateX(-50%) perspective(200px) rotateX(55deg) rotateZ(0deg); }
}
/* --- WHITE ITEM PICKUP GLOW --- */
@keyframes whiteItemGlowPulse {
0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
50% { filter: drop-shadow(0 0 35px rgba(255, 255, 255, 1)); }
}
.item-pickup-glow,
#inv-item-img,
#loot-item-img {
animation: whiteItemGlowPulse 2s ease-in-out infinite;
}
/* --- ANIMATED RAINBOW TEXT UTILITY --- */
.rainbow-text-animated {
background: linear-gradient(
90deg,
#ff3366, #ff9900, #ffff00, #00ff66, #00ffff, #ff33ff, #ff3366
);
background-size: 200% auto;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
animation: rainbowShift 2.5s linear infinite;
display: inline-block;
/* Clean white border surrounding the animated text fill */
filter: drop-shadow(-1px -1px 0 #ffffff)
drop-shadow(1px -1px 0 #ffffff)
drop-shadow(-1px 1px 0 #ffffff)
drop-shadow(1px 1px 0 #ffffff);
}
@keyframes rainbowShift {
0% {
background-position: 0% center;
}
100% {
background-position: 200% center;
}
}
/* ==========================================================================
CONSOLIDATED MASTER MEDIA QUERIES
========================================================================== */
/* --- 1. DESKTOP & LARGE SCREENS --- */
@media (min-width: 769px) {
#dpad-container { display: none !important; }
#desktop-btn-container {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 15px !important;
margin-top: 10px;
}
#desktop-btn-container.screen-hidden {
display: none !important;
}
#game-screen { max-width: 850px; }
#viewport-wrapper, #stats-container { max-width: min(100%, 70vh); }
#game-screen.layout-shrink #viewport-wrapper,
#game-screen.layout-shrink #stats-container {
max-width: min(100%, 55vh);
}
}
/* --- 2. TOUCH & COARSE POINTERS --- */
@media (pointer: coarse) {
#volume-slider { display: none !important; }
}
/* --- 3. UNIFIED MOBILE BREAKPOINT (max-width: 600px) --- */
@media (max-width: 600px) {
/* Root Variables */
:root {
--dice-size: 46px;
--dice-half: 23px;
}
/* Environmental & Palette Filters */
body.forest .dungeon-scene,
body.forest #minimap-canvas,
body.forest .sword-overlay,
body.forest .lantern-hand-overlay,
body.forest .spell-hand-overlay {
filter: sepia(100%) hue-rotate(65deg) saturate(1.8) contrast(1.1) brightness(0.9) !important;
}
body.ritual #dungeon-viewport::after {
animation: ritualColorShiftMobile 8s infinite alternate ease-in-out !important;
}
@keyframes ritualColorShiftMobile {
0% { background-color: #80dfff; }
100% { background-color: #cc80ff; }
}
/* Item Pickup Overlay Scaling */
#item-pickup-content { height: 100% !important; justify-content: space-evenly !important; padding: 4% 2% !important; }
#item-pickup-content p { font-size: clamp(1rem, 4.5vw, 1.5rem) !important; margin: 0 !important; }
#item-pickup-name { font-size: clamp(1.4rem, 6.5vw, 2.2rem) !important; margin: 0 !important; }
#item-entrance-wrapper { height: 48% !important; width: auto !important; aspect-ratio: 1 / 1 !important; max-width: 80% !important; margin: 0 auto !important; }
#btn-item-continue { padding: 6px 16px !important; font-size: clamp(1rem, 4vw, 1.3rem) !important; }
/* Game Layout & HUD */
#game-screen { padding: 5px 10px !important; justify-content: flex-start !important; }
#player-info-header { padding: 0 10px !important; font-size: 1rem !important; }
#game-header { height: auto !important; min-height: unset !important; padding: 0px 10px !important; border-bottom: none !important; flex-direction: column; justify-content: center; align-items: center; }
#objective-display { text-align: center; width: 100%; font-size: 1.1rem; }
#inventory-display { justify-content: center; max-width: 100%; }
#inventory-display span, #inventory-display div, .white-icon, .inventory-item { font-size: 1.1rem !important; line-height: 1 !important; display: inline-block; }
#message-bar {
flex: 0 0 2.5rem !important;
min-height: 2.5rem !important;
max-height: 2.5rem !important;
height: 2.5rem !important;
font-size: 1rem !important;
margin-top: auto !important;
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
#battle-summary-text { font-size: 1.1rem !important; margin-bottom: 10px !important; }
#viewport-wrapper {
max-width: min(100%, 55svh) !important;
max-height: 55svh !important;
margin-top: 15px !important;
}
.dpad-btn { width: 50px !important; height: 50px !important; font-size: 1.2rem; }
/* Inventory & Loot Screen Adjustments (Full-Screen Layout) */
#btn-inv-close { top: 39px !important; transform: translateY(-50%) !important; right: 28px !important; font-size: 1.8rem !important; }
#btn-loot-close, #btn-shop-close { top: 50% !important; transform: translateY(-50%) !important; right: 12px !important; font-size: 1.5rem !important; }
#inv-header-strip { padding: 5px 40px 5px 8px !important; width: 100% !important; margin-bottom: 8px !important; }
#loot-header-strip, #shop-header-strip { padding: 5px 15px !important; width: 100% !important; margin-bottom: 8px !important; }
#inv-header-avatar { width: 38px !important; height: 38px !important; }
#inv-header-name, #loot-title, #shop-title { font-size: 1.1rem !important; text-align: center !important; margin: 0 !important; }
#inv-header-level { font-size: 0.8rem !important; }
.inv-header-vitals { gap: 8px !important; flex: 1 !important; justify-content: center !important; margin: 0 10px !important; }
.inv-stat-block { flex: 1 !important; max-width: 90px !important; min-width: 60px !important; }
.inv-stat-block .player-bar-track { height: 12px !important; }
.inv-stat-block span { font-size: clamp(0.7rem, 2.2vw, 0.85rem) !important; }
.inv-header-gold { margin-left: auto !important; flex-shrink: 0 !important; text-align: right !important; }
#inv-gold-text { font-size: 1.1rem !important; }
#shop-gold-display { right: 40px !important; font-size: 1.1rem !important; }
#inv-main-layout, #loot-main-layout, #shop-main-layout { flex-direction: column-reverse !important; gap: 8px !important; }
#inv-grid-section, #loot-grid-section, #shop-grid-section { flex: 1 1 50% !important; max-height: 50% !important; padding: 6px !important; }
#inventory-grid, #loot-grid, #shop-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; grid-auto-rows: max-content !important; gap: 6px !important; }
.inv-slot { width: 100% !important; height: 48px !important; }
.inv-slot img { width: 30px !important; height: 30px !important; }
#inventory-content, #loot-content, #shop-content { flex: 1 1 50% !important; max-height: 50% !important; padding: 8px !important; }
#inv-item-name, #loot-item-name, #shop-item-name { font-size: 1.2rem !important; margin-bottom: 4px !important; min-height: 1.3rem !important; }
#inv-grid-label, #loot-grid-label, #shop-grid-label { font-size: 1.05rem !important; margin-bottom: 4px !important; }
.inv-category-header { font-size: 0.85rem !important; margin: 6px 0 2px 0 !important; }
#inv-inspection-body, #loot-inspection-body, #shop-inspection-body { flex-direction: column !important; justify-content: space-around !important; align-items: center !important; height: calc(100% - 1.5rem) !important; width: 100% !important; }
.inv-spin-box:not(.screen-hidden) { height: clamp(100px, 22vh, 160px) !important; width: auto !important; aspect-ratio: 1 / 1 !important; flex: none !important; margin: 0 !important; }
#inv-actions, #loot-actions, #shop-actions { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 4px !important; margin-bottom: 0 !important; }
#inv-actions .battle-btn, #loot-actions .battle-btn, #shop-actions .battle-btn { padding: 4px 12px !important; font-size: 0.9rem !important; }
/* Dialogue Controls & Flex-Locks */
#game-screen.layout-shrink:not(.in-battle):not(.in-totem) #stats-container,
#game-screen.in-dialogue:not(.in-totem) #stats-container {
display: none !important;
}
#game-screen.in-battle #stats-container,
#game-screen.in-totem #stats-container,
#game-screen:has(#viewport-wrapper.totem-mode) #stats-container {
display: flex !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 300 !important;
padding: 10px 10px 2px 10px !important;
font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
}
/* Mobile 3D Compass Responsive Overrides */
#compass-container {
bottom: -55px !important;
width: clamp(110px, 32vw, 150px) !important;
height: 50px !important;
}
#compass-base {
bottom: -5px !important;
}
#compass-needle {
bottom: 58px !important;
width: 22px !important;
}
#dialogue-container {
gap: 6px !important;
padding: 2px 10px !important;
justify-content: flex-start !important;
margin-top: 4px !important;
flex: 1 1 0% !important;
min-height: 0 !important;
}
#dialogue-text {
font-size: clamp(1.15rem, 2.7vh, 1.35rem) !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important;
}
#dialogue-choices {
flex: 1 1 0% !important;
min-height: 0 !important;
max-height: none !important;
padding: 4px 6px !important;
gap: 6px !important;
}
#dialogue-choices .dialogue-choice-btn {
padding: 7px 10px !important;
font-size: clamp(1.05rem, 2.5vh, 1.25rem) !important;
}
/* Mobile Battle Menu & Dice Mechanics */
#battle-menu-container {
padding: 2px 10px !important;
justify-content: flex-start !important;
flex: 1 1 0% !important;
min-height: 0 !important;
overflow-y: auto !important;
}
#enemy-hp-container {
margin-bottom: clamp(2px, 1vh, 8px) !important;
flex-shrink: 0 !important;
}
#battle-actions, #magic-actions {
gap: clamp(4px, 1vh, 8px) !important;
}
#battle-actions .battle-btn, #magic-actions .battle-btn {
padding: clamp(4px, 1vh, 8px) 5px !important;
font-size: clamp(1rem, 2vh, 1.2rem) !important;
}
/* --- CUTSCENE MOBILE VIEWPORT EXPANSION & CONTROL SUPPRESSION --- */
#game-screen.cutscene-mode #dpad-container,
#game-screen.cutscene-mode #desktop-btn-container {
display: none !important;
}
#game-screen.cutscene-mode #viewport-wrapper {
width: min(92vw, 48svh) !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
margin: auto auto !important;
}
#dice-img {
width: clamp(55px, 10vh, 75px) !important;
height: clamp(55px, 10vh, 75px) !important;
}
#dice-prompt {
font-size: clamp(1rem, 2.5vh, 1.25rem) !important;
}
/* Gambling Mode Viewport Lock */
#game-screen.gambling-mode #viewport-wrapper {
max-width: min(100%, 75svh) !important;
max-height: 75svh !important;
}
/* Compact Settings Overlay */
.settings-panel {
padding: 10px 12px !important;
margin: auto 0 !important;
}
.settings-panel h1 {
font-size: 1.8rem !important;
margin-bottom: 6px !important;
}
.settings-btn {
padding: 6px 10px !important;
margin: 3px 0 !important;
font-size: clamp(0.85rem, 3.5vw, 1.05rem) !important;
}
.settings-panel hr {
margin: 8px 0 !important;
}
.settings-panel h2 {
font-size: 1.2rem !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
}
.settings-panel p {
font-size: 0.85rem !important;
margin: 2px 0 !important;
line-height: 1.25 !important;
}
#btn-delete-save {
margin-top: 8px !important;
}
/* --- MOBILE NOTE TEXT BOUNDARIES --- */
#note-text-content {
/* Tighter constraints for the vertical torn edges */
width: 62% !important;
height: 56% !important;
}
/* ========================================== */
/* --- IMMERSIVE MOBILE LAYOUT OVERRIDES --- */
/* ========================================== */
/* Unhide the setting on mobile */
#toggle-immersive {
display: block !important;
}
/* 1. Break the Viewport out of the UI and make it a fixed full-screen background */
body.immersive-mobile #viewport-wrapper {
position: fixed !important;
inset: 0 !important; /* Shorthand for top: 0, left: 0, bottom: 0, right: 0 */
width: 100vw !important;
height: 100dvh !important; /* Uses dynamic viewport height to fill the glass perfectly */
max-height: none !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 0 !important; /* Places it behind the UI */
display: block !important; /* CRITICAL: Removes flexbox to prevent left-align squishing */
overflow: hidden !important;
background: #000 !important;
border: none !important; /* Removes the 2px white frame on mobile glass edges */
box-shadow: none !important;
}
/* 2. Absolute Centering & Explicit Square Sizing */
body.immersive-mobile #dungeon-viewport {
position: absolute !important;
top: 37% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important; /* Perfect absolute centering */
height: 75dvh !important; /* CHANGED: Reduced to create top/bottom letterbox */
width: 75dvh !important; /* CHANGED: Matches height to maintain perfect 1:1 square */
max-width: none !important;
max-height: none !important;
margin: 0 !important;
}
/* --- FIXED: Cinematic Bottom Gradient to hide viewport cutoff --- */
body.immersive-mobile #viewport-wrapper::after {
content: "" !important;
position: absolute !important;
bottom: 40dvh !important; /* Untouched! */
left: 0 !important;
width: 100% !important;
height: 20dvh !important; /* Untouched! */
z-index: 5 !important;
pointer-events: none !important;
background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, transparent 100%) !important;
/* --- CRITICAL FIX: Projects solid black blocks downward to fill the gap, trapped safely inside the wrapper --- */
box-shadow: 0 20dvh 0 0 #000, 0 40dvh 0 0 #000 !important;
}
/* Disable Pillarboxing & Layout Shrink during Dialogue/Cutscenes in Immersive Mode */
body.immersive-mobile #game-screen.layout-shrink #viewport-wrapper,
body.immersive-mobile #game-screen.in-dialogue #viewport-wrapper,
body.immersive-mobile #game-screen.layout-shrink:not(.in-battle) #viewport-wrapper {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. Make UI Overlays Transparent & Cinematic */
body.immersive-mobile #game-screen {
background: transparent !important;
}
body.immersive-mobile #top-header-group {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 10 !important;
/* Cinematic gradient fading into the 3D scene */
background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, transparent 100%) !important;
padding-top: 8px !important;
padding-bottom: 25px !important;
}
body.immersive-mobile #player-info-header {
display: flex !important;
width: 100% !important;
justify-content: space-between !important;
align-items: center !important;
padding: 0 15px !important;
font-size: 0.95rem !important;
}
body.immersive-mobile #game-header {
position: relative !important;
background: transparent !important;
border-bottom: none !important;
padding: 0 10px !important;
}
/* 4. Float UI Elements */
body.immersive-mobile #dpad-container {
position: fixed !important;
bottom: 55px !important;
left: 0 !important;
width: 100% !important;
z-index: 100 !important;
background: transparent !important;
}
/* FIX: Remove the floating black box artifact */
body.immersive-mobile #message-bar {
position: fixed !important;
bottom: 240px !important; /* Hovers just above D-pad */
left: 5% !important;
width: 90% !important;
z-index: 100 !important;
background: transparent !important; /* Removes the black bar */
/* Adds strong outline so white text pops against bright 3D backgrounds */
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0px 3px 5px rgba(0,0,0,0.9) !important;
pointer-events: none !important;
}
/* Elevate Stats Container (Includes ultra-specific locks for combat & totem states) */
body.immersive-mobile #stats-container,
body.immersive-mobile #game-screen.in-battle #stats-container,
body.immersive-mobile #game-screen.in-totem #stats-container,
body.immersive-mobile #game-screen:has(#viewport-wrapper.totem-mode) #stats-container {
position: fixed !important;
bottom: 275px !important; /* Docks cleanly above the 240px message bar */
left: 0 !important;
width: 100% !important;
z-index: 300 !important;
background: transparent !important;
pointer-events: none !important; /* Ensures it doesn't block touch interactions */
opacity: 0.50 !important; /* Semi-transparent during exploration */
transition: opacity 0.3s ease !important; /* Smooth fade effect */
}
/* Force full opacity only when actively in combat or using a totem */
body.immersive-mobile #game-screen.in-battle #stats-container,
body.immersive-mobile #game-screen.in-totem #stats-container,
body.immersive-mobile #game-screen:has(#viewport-wrapper.totem-mode) #stats-container {
opacity: 1.0 !important;
}
body.immersive-mobile #battle-menu-container,
body.immersive-mobile #dialogue-container {
position: fixed !important;
bottom: 65px !important;
left: 2.5% !important;
width: 95% !important;
z-index: 150 !important;
background: rgba(0, 0, 0, 0.95) !important;
border: 1px solid #fff !important;
}
/* 5. Item Pickup UI Safe Zone (Prevents Dialogue Overlap) */
body.immersive-mobile #item-pickup-container {
justify-content: flex-start !important;
padding-top: 14dvh !important;
}
body.immersive-mobile #item-pickup-content {
height: auto !important;
justify-content: flex-start !important;
gap: 2dvh !important;
padding-top: 0 !important;
}
body.immersive-mobile #item-entrance-wrapper {
height: 22dvh !important;
max-height: 200px !important;
}
/* 6. Ghosted Interactive Controls */
body.immersive-mobile #dpad-container button {
opacity: 0.4 !important;
transition: opacity 0.3s ease !important; /* Smooth fade out */
}
/* Lights up instantly only when actively pressed */
body.immersive-mobile #dpad-container button:active {
opacity: 1.0 !important;
transition: none !important; /* Snappy, immediate response */
}
/* 7. Centered Hand Overlays (Compensating for aspect-ratio crop) */
body.immersive-mobile .idle-r-hand-overlay {
right: -15% !important;
}
body.immersive-mobile .spell-hand-overlay {
left: -15% !important;
}
body.immersive-mobile .lantern-hand-overlay {
left: 0% !important;
top: 15% !important;
}
body.immersive-mobile .sword-overlay {
right: -12% !important;
bottom: -50% !important;
}
/* 7. Centered Hand Overlays (Compensating for aspect-ratio crop) */
body.immersive-mobile .idle-r-hand-overlay {
right: -15% !important;
}
body.immersive-mobile .spell-hand-overlay {
left: -15% !important;
}
body.immersive-mobile .lantern-hand-overlay {
left: 0% !important;
top: 15% !important;
}
body.immersive-mobile .sword-overlay {
right: -12% !important;
bottom: -50% !important;
}
/* --- FIXED: 8. Art Viewing & Cinematic Inspect Mode --- */
/* 8a. Zoom the camera for both Object Inspection AND Wall Art */
body.immersive-mobile #viewport-wrapper.inspect-mode #dungeon-viewport,
body.immersive-mobile #dungeon-viewport.is-viewing-art {
/* Combines the absolute centering with the cinematic zoom! */
transform: translate(-50%, -50%) scale(1.8) !important;
}
/* 8b. Push the blurred hands off-screen for a clean view */
body.immersive-mobile #viewport-wrapper.inspect-mode .sword-overlay,
body.immersive-mobile #viewport-wrapper.inspect-mode .lantern-hand-overlay,
body.immersive-mobile #viewport-wrapper.inspect-mode .spell-hand-overlay,
body.immersive-mobile #dungeon-viewport.is-viewing-art .sword-overlay,
body.immersive-mobile #dungeon-viewport.is-viewing-art .lantern-hand-overlay,
body.immersive-mobile #dungeon-viewport.is-viewing-art .spell-hand-overlay {
transform: translateY(35%) scale(1.05) !important;
filter: blur(8px) brightness(0.5) !important;
}
/* 9. Immersive Mobile Puzzle Overlay Centering & Height-Driven Enlargement */
body.immersive-mobile #puzzle-overlay {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
z-index: 500 !important;
justify-content: center !important;
align-items: center !important;
overflow: hidden !important;
}
body.immersive-mobile #puzzle-overlay.screen-active {
display: flex !important;
}
body.immersive-mobile #puzzle-overlay.screen-hidden {
display: none !important;
}
/* Shift exit button down clear of the fixed header gradient */
body.immersive-mobile #btn-puzzle-close {
top: 75px !important;
right: 20px !important;
}
body.immersive-mobile #puzzle-board {
width: min(118vw, 52dvh) !important;
height: min(118vw, 52dvh) !important;
}
body.immersive-mobile #puzzle-instructions {
bottom: 20% !important;
}
/* Instantly hide the header during Loot, Inventory & Shop screens to free up the Exit buttons */
body.immersive-mobile #game-screen.in-loot #top-header-group,
body.immersive-mobile #game-screen.in-inventory #top-header-group,
body.immersive-mobile #game-screen.in-shop #top-header-group {
display: none !important;
}
/* Pull the "map" title text out from under the objective gradient */
body.immersive-mobile #minimap-overlay h1 {
position: absolute !important;
top: 70px !important;
margin: 0 !important;
z-index: 5 !important;
}
/* 11. Absolute & Height-Constrained Minimap Canvas Positioning */
body.immersive-mobile #minimap-canvas {
position: absolute !important;
top: 105px !important; /* Docks safely right below the 70px title */
left: 50% !important;
transform: translateX(-50%) !important; /* Perfect horizontal centering */
max-height: 38dvh !important; /* Strict dynamic height ceiling */
width: auto !important; /* Maintains square grid proportions */
aspect-ratio: 1 / 1 !important;
z-index: 10 !important;
margin: 0 !important; /* Clears any lingering flexbox interference */
}
/* 12. Cinematic Zoom & Pillarbox Suppression for Dialogue & Inspection */
body.immersive-mobile #viewport-wrapper.cinematic-mode #dungeon-scene,
body.immersive-mobile #viewport-wrapper.inspect-mode #dungeon-scene,
body.immersive-mobile #game-screen.in-dialogue #dungeon-scene {
width: 100% !important;
height: 100% !important;
transform: scale(1.4) !important;
transform-origin: center 40% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
transition: transform 0.4s ease-out !important;
}
/* Suppress base cinematic pseudo-element bars during dialogue */
body.immersive-mobile #viewport-wrapper.cinematic-mode::before,
body.immersive-mobile #viewport-wrapper.cinematic-mode::after,
body.immersive-mobile #game-screen.in-dialogue #viewport-wrapper::before,
body.immersive-mobile #game-screen.in-dialogue #viewport-wrapper::after {
display: none !important;
}
/* 13. Immersive Mobile Totem Interaction Framing & Sway Suspension */
body.immersive-mobile #viewport-wrapper.totem-mode #dungeon-scene,
body.immersive-mobile #viewport-wrapper.cinematic-mode.totem-mode #dungeon-scene {
animation: none !important; /* Suspends idle head sway during totem interaction */
transform: scale(1.25) translateY(14%) !important; /* Zooms & shifts scene down to frame fountain basin */
transform-origin: center center !important;
transition: transform 0.4s ease-out !important;
}
} /* <-- Closing bracket for @media (max-width: 600px) */
/* --- 4. SHORT VIEWPORTS & COMBINED CONSTRAINTS --- */
@media (max-height: 750px) {
.dpad-btn { width: 48px !important; height: 48px !important; }
#viewport-wrapper { max-width: min(100%, 65svh) !important; max-height: 65svh !important; }
}
@media (max-width: 600px) and (max-height: 750px) {
.dpad-btn { width: 48px !important; height: 48px !important; }
#viewport-wrapper {
max-width: min(100%, 50svh) !important;
max-height: 50svh !important;
margin-top: 15px !important;
}
#game-screen.gambling-mode #viewport-wrapper {
max-width: min(100%, 70svh) !important;
max-height: 70svh !important;
}
}