Polish: Fix pixie visibility bug, add flight ready countdown, SVG cauldron redesign, and upgrade riddles
This commit is contained in:
Maxi
+88
-114
@@ -1224,118 +1224,67 @@ body {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cauldron-wrapper {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.cauldron-pot {
|
||||
width: 250px;
|
||||
height: 230px;
|
||||
background: radial-gradient(circle at 35% 30%, #4a4a55 0%, #202025 50%, #0d0d12 100%);
|
||||
border-radius: 50% 50% 45% 45% / 30% 30% 60% 60%;
|
||||
border: 6px solid #1a1a20;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), inset 0 -10px 20px rgba(0, 0, 0, 0.8);
|
||||
.cauldron-visual-container {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 0.5rem auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.cauldron-pot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 210px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #111116;
|
||||
border: 4px solid #2d2d38;
|
||||
}
|
||||
|
||||
.cauldron-pot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
width: 120px;
|
||||
height: 18px;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.potion-surface {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 190px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse at center, #2ecc71 0%, #16a085 60%, #0e5042 100%);
|
||||
box-shadow: 0 0 20px #2ecc71;
|
||||
overflow: hidden;
|
||||
transition: background 1s ease, box-shadow 1s ease;
|
||||
}
|
||||
|
||||
.potion-surface.state-stir {
|
||||
background: radial-gradient(ellipse at center, #9b59b6 0%, #8e44ad 60%, #4a235a 100%);
|
||||
box-shadow: 0 0 25px #9b59b6;
|
||||
}
|
||||
|
||||
.potion-surface.state-heat {
|
||||
background: radial-gradient(ellipse at center, #e67e22 0%, #d35400 60%, #78281f 100%);
|
||||
box-shadow: 0 0 25px #e67e22;
|
||||
}
|
||||
|
||||
.potion-surface.state-gold {
|
||||
background: radial-gradient(ellipse at center, #fff6a5 0%, #f1c40f 50%, #b7950b 100%);
|
||||
box-shadow: 0 0 35px #f1c40f, 0 0 60px rgba(241, 196, 15, 0.6);
|
||||
animation: goldShimmer 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes goldShimmer {
|
||||
0% { filter: brightness(1) drop-shadow(0 0 10px #f1c40f); }
|
||||
100% { filter: brightness(1.3) drop-shadow(0 0 30px #fff); }
|
||||
}
|
||||
|
||||
.cauldron-fire {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 2.2rem;
|
||||
animation: flameFlicker 0.8s infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Stir Interactive Ring */
|
||||
.stir-circle {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
border: 3px dashed var(--gold);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
cursor: grab;
|
||||
animation: rotateDashed 6s linear infinite;
|
||||
}
|
||||
|
||||
.stir-circle.active {
|
||||
display: flex;
|
||||
.cauldron-svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 230px;
|
||||
filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.85));
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.stir-arrow-hint {
|
||||
font-size: 1.8rem;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 35px;
|
||||
.bubble-anim {
|
||||
animation: bubbleRise 1.6s infinite ease-in;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.b1 { animation-delay: 0.1s; }
|
||||
.b2 { animation-delay: 0.5s; }
|
||||
.b3 { animation-delay: 0.9s; }
|
||||
.b4 { animation-delay: 1.2s; }
|
||||
.b5 { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes bubbleRise {
|
||||
0% { transform: translateY(5px) scale(0.6); opacity: 0; }
|
||||
50% { opacity: 0.8; transform: translateY(-3px) scale(1.1); }
|
||||
100% { transform: translateY(-12px) scale(0.3); opacity: 0; }
|
||||
}
|
||||
|
||||
.animated-flames {
|
||||
animation: flamePulse 1.2s infinite alternate ease-in-out;
|
||||
transform-origin: center 260px;
|
||||
}
|
||||
|
||||
@keyframes flamePulse {
|
||||
0% { transform: scaleY(0.9) scaleX(0.95); opacity: 0.85; filter: drop-shadow(0 0 6px #e74c3c); }
|
||||
100% { transform: scaleY(1.1) scaleX(1.05); opacity: 1; filter: drop-shadow(0 0 16px #f39c12); }
|
||||
}
|
||||
|
||||
@keyframes stirSpoonAnim {
|
||||
0% { transform: rotate(-8deg) translateX(-10px); }
|
||||
50% { transform: rotate(8deg) translateX(10px); }
|
||||
100% { transform: rotate(-8deg) translateX(-10px); }
|
||||
}
|
||||
|
||||
.stirring-active {
|
||||
animation: stirSpoonAnim 0.6s infinite ease-in-out;
|
||||
transform-origin: 160px 40px;
|
||||
}
|
||||
|
||||
@keyframes ingredientDropAnim {
|
||||
0% { transform: translateY(-70px) scale(0.4); opacity: 0; }
|
||||
60% { transform: translateY(10px) scale(1.2); opacity: 1; }
|
||||
100% { transform: translateY(20px) scale(0.2); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes rotateDashed {
|
||||
@@ -1650,28 +1599,35 @@ body {
|
||||
}
|
||||
|
||||
.pixie-target {
|
||||
display: none; /* Crucial bugfix: hidden until active! */
|
||||
font-size: clamp(2.4rem, 8vw, 3.4rem);
|
||||
position: absolute;
|
||||
transform: translateY(120%);
|
||||
transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none; /* Let hole handle tap directly! */
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
|
||||
animation: pixieFloat 0.8s infinite alternate ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pixie-target.active {
|
||||
transform: translateY(0);
|
||||
display: block;
|
||||
animation: pixiePopIn 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), pixieFloat 0.8s infinite 0.2s alternate ease-in-out;
|
||||
}
|
||||
|
||||
.pixie-target.frozen {
|
||||
filter: drop-shadow(0 0 12px #3498db) hue-rotate(180deg) brightness(1.2);
|
||||
display: block;
|
||||
filter: drop-shadow(0 0 16px #3498db) hue-rotate(180deg) brightness(1.3);
|
||||
animation: none;
|
||||
transform: translateY(0) scale(1.08);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.pixie-target.neville {
|
||||
display: block;
|
||||
font-size: clamp(2.6rem, 9vw, 3.6rem);
|
||||
animation: shakeNeville 0.4s infinite alternate;
|
||||
animation: shakeNeville 0.35s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pixiePopIn {
|
||||
0% { transform: translateY(60px) scale(0.3); opacity: 0; }
|
||||
100% { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes pixieFloat {
|
||||
@@ -1680,8 +1636,26 @@ body {
|
||||
}
|
||||
|
||||
@keyframes shakeNeville {
|
||||
0% { transform: translateY(0) rotate(-5deg); }
|
||||
100% { transform: translateY(0) rotate(5deg); }
|
||||
0% { transform: translateY(0) rotate(-6deg); }
|
||||
100% { transform: translateY(0) rotate(6deg); }
|
||||
}
|
||||
|
||||
/* Flight Start Overlay */
|
||||
.flight-start-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(12, 10, 20, 0.9);
|
||||
border: 2px solid var(--gold);
|
||||
border-radius: 14px;
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
|
||||
Reference in New Issue
Block a user