Maxi
2689 lines
59 KiB
CSS
Executable File
2689 lines
59 KiB
CSS
Executable File
:root {
|
|
--bg-dark: #0d0c13;
|
|
--bg-card: rgba(26, 24, 38, 0.94);
|
|
--gold: #e5b948;
|
|
--gold-glow: rgba(229, 185, 72, 0.4);
|
|
--gold-hover: #f7d274;
|
|
--parchment-bg: #f8f1de;
|
|
--parchment-border: #8b6d3b;
|
|
--parchment-ink: #2b1f14;
|
|
--purple-fire: #aa26eb;
|
|
--purple-fire-glow: rgba(170, 38, 235, 0.6);
|
|
--black-fire: #120d1e;
|
|
--black-fire-glow: rgba(67, 18, 114, 0.8);
|
|
--poison-green: #2ecc71;
|
|
--wine-red: #9e2a2b;
|
|
--text-light: #ece8e1;
|
|
--text-dim: #a59fa8;
|
|
--house-accent: #d3a625;
|
|
--font-gothic: 'MedievalSharp', cursive, serif;
|
|
--font-script: 'Caveat', cursive, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
background-image:
|
|
radial-gradient(circle at 15% 20%, rgba(138, 43, 226, 0.12) 0%, transparent 40%),
|
|
radial-gradient(circle at 85% 80%, rgba(229, 185, 72, 0.08) 0%, transparent 40%),
|
|
url('/static/img/parchment_texture.jpg');
|
|
background-blend-mode: overlay;
|
|
color: var(--text-light);
|
|
font-family: var(--font-gothic);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Site Header (Sleek & Mobile First) */
|
|
.site-header {
|
|
background: rgba(13, 12, 19, 0.95);
|
|
border-bottom: 2px solid var(--gold);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0.6rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.brand-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
text-decoration: none;
|
|
color: var(--gold);
|
|
font-size: 1.3rem;
|
|
text-shadow: 0 0 10px var(--gold-glow);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brand-sparkle {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.brand-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
/* Player Bag Button */
|
|
.btn-bag {
|
|
background: linear-gradient(135deg, #2b1f14, #4a3520);
|
|
color: var(--gold);
|
|
border: 2px solid var(--gold);
|
|
padding: 0.4rem 0.85rem;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
user-select: none;
|
|
}
|
|
|
|
.btn-bag:hover {
|
|
background: linear-gradient(135deg, #4a3520, #6e4f30);
|
|
transform: translateY(-2px) scale(1.04);
|
|
box-shadow: 0 4px 15px var(--gold-glow);
|
|
color: #fff;
|
|
}
|
|
|
|
.bag-house-icon {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.bag-label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.bag-badge {
|
|
background: #e63946;
|
|
color: #fff;
|
|
font-size: 0.75rem;
|
|
padding: 0.15rem 0.45rem;
|
|
border-radius: 10px;
|
|
font-weight: bold;
|
|
border: 1px solid #ffd700;
|
|
}
|
|
|
|
.bag-badge.pulse {
|
|
animation: badgePulse 0.6s infinite alternate;
|
|
}
|
|
|
|
@keyframes badgePulse {
|
|
0% { transform: scale(1); filter: brightness(1); }
|
|
100% { transform: scale(1.3); filter: brightness(1.4) drop-shadow(0 0 8px #ff0055); }
|
|
}
|
|
|
|
/* Control Buttons */
|
|
.btn-control {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--gold);
|
|
border: 1px solid var(--gold);
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.btn-control.icon-only {
|
|
padding: 0.4rem 0.55rem;
|
|
font-size: 1.1rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.btn-control:hover {
|
|
background: var(--gold);
|
|
color: var(--bg-dark);
|
|
box-shadow: 0 0 12px var(--gold-glow);
|
|
}
|
|
|
|
/* Slide-Over Drawer & Backdrop */
|
|
.drawer-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 2000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.drawer-backdrop.open {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.player-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 400px;
|
|
max-width: 92vw;
|
|
height: 100vh;
|
|
background: var(--bg-dark);
|
|
background-image:
|
|
radial-gradient(circle at 10% 10%, rgba(229, 185, 72, 0.08) 0%, transparent 40%),
|
|
url('/static/img/parchment_texture.jpg');
|
|
background-blend-mode: overlay;
|
|
border-left: 3px solid var(--gold);
|
|
box-shadow: -5px 0 35px rgba(0, 0, 0, 0.85);
|
|
z-index: 2001;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
|
|
}
|
|
|
|
.player-drawer.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.1rem 1.25rem;
|
|
border-bottom: 2px solid rgba(229, 185, 72, 0.3);
|
|
background: rgba(17, 15, 25, 0.95);
|
|
}
|
|
|
|
.drawer-title {
|
|
font-size: 1.4rem;
|
|
color: var(--gold);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.drawer-close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.drawer-close-btn:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.drawer-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid rgba(229, 185, 72, 0.25);
|
|
background: rgba(22, 19, 32, 0.9);
|
|
}
|
|
|
|
.drawer-tab-btn {
|
|
flex: 1;
|
|
padding: 0.75rem 0.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.drawer-tab-btn:hover {
|
|
color: var(--text-light);
|
|
background: rgba(229, 185, 72, 0.05);
|
|
}
|
|
|
|
.drawer-tab-btn.active {
|
|
color: var(--gold);
|
|
border-bottom-color: var(--gold);
|
|
font-weight: bold;
|
|
background: rgba(229, 185, 72, 0.1);
|
|
}
|
|
|
|
.drawer-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.drawer-tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.drawer-tab-pane.active {
|
|
display: block;
|
|
animation: fadeIn 0.25s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.drawer-footer {
|
|
padding: 1rem 1.25rem;
|
|
border-top: 1px solid rgba(229, 185, 72, 0.25);
|
|
background: rgba(17, 15, 25, 0.95);
|
|
}
|
|
|
|
/* Inventory Grid (Tab 1) */
|
|
.inv-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.inv-item-slot {
|
|
background: rgba(26, 23, 38, 0.85);
|
|
border: 2px solid rgba(229, 185, 72, 0.35);
|
|
border-radius: 10px;
|
|
padding: 0.85rem 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.inv-item-slot:hover {
|
|
border-color: var(--gold);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 15px rgba(229, 185, 72, 0.25);
|
|
}
|
|
|
|
.inv-item-slot.selected {
|
|
border-color: var(--gold);
|
|
background: rgba(229, 185, 72, 0.15);
|
|
box-shadow: 0 0 15px var(--gold-glow);
|
|
}
|
|
|
|
.inv-item-icon {
|
|
font-size: 2.2rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.inv-item-name {
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
color: var(--text-light);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Item Detail Card */
|
|
.inv-detail-card {
|
|
background: rgba(18, 15, 26, 0.95);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 1.1rem;
|
|
text-align: center;
|
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.inv-detail-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.inv-detail-name {
|
|
font-size: 1.25rem;
|
|
color: var(--gold);
|
|
margin-bottom: 0.4rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.inv-detail-desc {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* House Picker (Tab 2) */
|
|
.house-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.6rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.house-select-btn {
|
|
background: rgba(22, 19, 32, 0.85);
|
|
border: 2px solid rgba(229, 185, 72, 0.3);
|
|
border-radius: 10px;
|
|
padding: 0.75rem 0.5rem;
|
|
color: var(--text-light);
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.house-select-btn:hover {
|
|
border-color: var(--gold);
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.house-select-btn.active {
|
|
border-color: var(--gold);
|
|
background: rgba(229, 185, 72, 0.2);
|
|
box-shadow: 0 0 12px var(--gold-glow);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.house-icon {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.profile-stats-card {
|
|
background: rgba(20, 18, 29, 0.9);
|
|
border: 1px solid rgba(229, 185, 72, 0.3);
|
|
border-radius: 10px;
|
|
padding: 0.9rem 1rem;
|
|
}
|
|
|
|
.stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.45rem 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stat-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Chambers Navigation (Tab 3) */
|
|
.rooms-nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.room-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(25, 22, 36, 0.85);
|
|
border: 1px solid rgba(229, 185, 72, 0.3);
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
color: var(--text-light);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.room-nav-item:hover, .room-nav-item.current {
|
|
border-color: var(--gold);
|
|
background: rgba(229, 185, 72, 0.15);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.room-nav-item.external {
|
|
border-color: #ffd700;
|
|
background: rgba(212, 175, 55, 0.1);
|
|
}
|
|
|
|
.room-icon {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.room-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.room-info strong {
|
|
font-size: 1rem;
|
|
color: var(--gold);
|
|
}
|
|
|
|
.room-info small {
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* Floating Toast */
|
|
.escape-toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(30px);
|
|
background: rgba(18, 14, 26, 0.96);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 0.8rem 1.4rem;
|
|
color: var(--text-light);
|
|
font-size: 1rem;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px var(--gold-glow);
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
text-align: center;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.escape-toast.show {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
/* Lumos Effect Overlay */
|
|
.lumos-light {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
pointer-events: none;
|
|
z-index: 500;
|
|
background: radial-gradient(circle at 50% 50%, rgba(255, 248, 220, 0.18) 0%, transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.lumos-light.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Container */
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 1.2rem auto 2.5rem auto;
|
|
padding: 0 1rem;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Parchment Box */
|
|
.parchment-scroll {
|
|
background: var(--parchment-bg);
|
|
color: var(--parchment-ink);
|
|
border: 4px double var(--parchment-border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem 1.25rem;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(139, 109, 59, 0.25);
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.parchment-title {
|
|
font-size: 1.8rem;
|
|
text-align: center;
|
|
color: #5c1818;
|
|
margin-bottom: 0.75rem;
|
|
text-shadow: 1px 1px 0px rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.riddle-poem {
|
|
font-family: var(--font-script);
|
|
font-size: 1.35rem;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
margin: 1rem 0;
|
|
white-space: pre-line;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Dungeon Card */
|
|
.dungeon-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid rgba(229, 185, 72, 0.4);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Chamber Overview Grid */
|
|
.chamber-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.25rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.chamber-card {
|
|
background: rgba(20, 18, 30, 0.9);
|
|
border: 2px solid rgba(229, 185, 72, 0.3);
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chamber-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--gold);
|
|
box-shadow: 0 10px 30px var(--gold-glow);
|
|
}
|
|
|
|
.chamber-badge {
|
|
position: absolute;
|
|
top: 0.8rem;
|
|
right: 0.8rem;
|
|
background: rgba(229, 185, 72, 0.2);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.chamber-badge.solved {
|
|
background: rgba(46, 204, 113, 0.25);
|
|
border-color: #2ecc71;
|
|
color: #2ecc71;
|
|
}
|
|
|
|
.chamber-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.chamber-title {
|
|
font-size: 1.35rem;
|
|
color: var(--gold);
|
|
margin-bottom: 0.6rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.chamber-desc {
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Magical Buttons */
|
|
.btn-magical {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #b8860b, #d4af37, #f7d274);
|
|
color: #1a1505;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-size: 1.05rem;
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
|
|
transition: all 0.2s;
|
|
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
|
|
}
|
|
|
|
.btn-magical:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 22px rgba(212, 175, 55, 0.7);
|
|
color: #000;
|
|
}
|
|
|
|
/* Flaming Gates */
|
|
.flame-chamber-arena {
|
|
position: relative;
|
|
background: radial-gradient(circle at center, #191629 0%, #0c0a14 100%);
|
|
border: 2px solid #4a3b63;
|
|
border-radius: 16px;
|
|
padding: 1.5rem 1rem;
|
|
box-shadow: inset 0 0 80px rgba(0,0,0,0.9), 0 10px 40px rgba(0,0,0,0.8);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flame-wall-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.flame-gate {
|
|
flex: 1;
|
|
padding: 1.2rem 0.75rem;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.flame-gate.purple {
|
|
background: rgba(75, 15, 110, 0.35);
|
|
border: 2px solid var(--purple-fire);
|
|
box-shadow: 0 0 25px var(--purple-fire-glow);
|
|
}
|
|
|
|
.flame-gate.black {
|
|
background: rgba(18, 12, 28, 0.8);
|
|
border: 2px solid #5a287a;
|
|
box-shadow: 0 0 25px var(--black-fire-glow);
|
|
}
|
|
|
|
.flame-icon-animated {
|
|
font-size: 2.5rem;
|
|
animation: flameFlicker 1.5s infinite alternate;
|
|
}
|
|
|
|
@keyframes flameFlicker {
|
|
0% { transform: scale(1) rotate(-2deg); opacity: 0.85; }
|
|
50% { transform: scale(1.1) rotate(3deg); opacity: 1; filter: drop-shadow(0 0 15px currentColor); }
|
|
100% { transform: scale(0.95) rotate(-1deg); opacity: 0.9; }
|
|
}
|
|
|
|
/* 7 Bottles Table */
|
|
.bottles-table-wrapper {
|
|
margin: 1.5rem 0;
|
|
padding: 1.25rem 0.75rem;
|
|
background: linear-gradient(180deg, #2a201b 0%, #17110e 100%);
|
|
border: 3px solid #6b5338;
|
|
border-radius: 14px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.9);
|
|
}
|
|
|
|
.bottles-table {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: flex-end;
|
|
gap: 0.5rem;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
padding: 0.5rem 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.bottle-slot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 85px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.bottle-slot:hover {
|
|
transform: translateY(-6px);
|
|
}
|
|
|
|
.bottle-slot.selected {
|
|
transform: translateY(-10px);
|
|
filter: drop-shadow(0 0 15px var(--gold));
|
|
}
|
|
|
|
.bottle-pedestal {
|
|
width: 75px;
|
|
height: 18px;
|
|
background: linear-gradient(180deg, #574635 0%, #2f251c 100%);
|
|
border: 2px solid #856a52;
|
|
border-radius: 6px;
|
|
margin-top: 0.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
color: var(--gold);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bottle-svg {
|
|
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6));
|
|
transition: filter 0.3s;
|
|
}
|
|
|
|
.bottle-tag-select {
|
|
margin-top: 0.35rem;
|
|
background: rgba(13, 12, 19, 0.9);
|
|
border: 1px solid var(--gold);
|
|
color: var(--text-light);
|
|
font-family: inherit;
|
|
font-size: 0.75rem;
|
|
padding: 0.15rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
width: 80px;
|
|
}
|
|
|
|
/* Canvas Broom Game */
|
|
.canvas-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
border: 3px solid var(--gold);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 20px var(--gold-glow);
|
|
background: #000;
|
|
}
|
|
|
|
#broomCanvas {
|
|
display: block;
|
|
width: 100%;
|
|
touch-action: none;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.game-hud {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem 1rem;
|
|
background: rgba(13, 12, 19, 0.9);
|
|
border-bottom: 2px solid var(--gold);
|
|
font-size: 1rem;
|
|
color: var(--gold);
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Mobile Flight Cockpit & D-Pad */
|
|
.mobile-flight-cockpit {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
gap: 1rem;
|
|
margin-top: 1.25rem;
|
|
padding: 1rem;
|
|
background: rgba(18, 15, 26, 0.9);
|
|
border: 2px solid rgba(229, 185, 72, 0.35);
|
|
border-radius: 14px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.dpad-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dpad-middle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dpad-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(145deg, #2a2238, #161220);
|
|
border: 2px solid var(--gold);
|
|
color: var(--gold);
|
|
border-radius: 8px;
|
|
font-size: 1.3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
|
transition: transform 0.1s, background 0.1s;
|
|
touch-action: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.dpad-btn:active {
|
|
transform: scale(0.92);
|
|
background: var(--gold);
|
|
color: #000;
|
|
}
|
|
|
|
.dpad-core {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
color: var(--gold);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mobile-flight-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.dpad-boost-btn {
|
|
width: 100%;
|
|
padding: 0.9rem 1.25rem;
|
|
background: linear-gradient(135deg, #d4af37, #f39c12);
|
|
color: #1a1100;
|
|
border: 2px solid #fff;
|
|
border-radius: 12px;
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 20px var(--gold-glow);
|
|
touch-action: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.dpad-boost-btn:active {
|
|
transform: scale(0.95);
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.touch-hint {
|
|
font-size: 0.78rem;
|
|
color: var(--text-dim);
|
|
text-align: center;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.flame-wall-container {
|
|
flex-direction: column;
|
|
}
|
|
.brand-title {
|
|
font-size: 1.15rem;
|
|
}
|
|
.bag-label {
|
|
display: none;
|
|
}
|
|
.btn-bag {
|
|
padding: 0.35rem 0.6rem;
|
|
}
|
|
}
|
|
|
|
.btn-bag {
|
|
padding: 0.35rem 0.6rem;
|
|
}
|
|
}
|
|
|
|
/* Modal Feedback */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.modal-backdrop.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--bg-card);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
padding: 1.75rem;
|
|
text-align: center;
|
|
box-shadow: 0 0 50px var(--gold-glow);
|
|
transform: scale(0.9);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.modal-backdrop.show .modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-icon {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.6rem;
|
|
color: var(--gold);
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.modal-text {
|
|
color: var(--text-light);
|
|
font-size: 1.05rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* Sliding Puzzle (Schieberätsel) */
|
|
.sliding-board-container {
|
|
max-width: 380px;
|
|
margin: 1.25rem auto;
|
|
background: #171421;
|
|
border: 3px solid var(--gold);
|
|
border-radius: 14px;
|
|
padding: 1rem;
|
|
box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.sliding-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 8px;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.sliding-tile {
|
|
background: linear-gradient(145deg, #2b253b, #1b1725);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: transform 0.15s, background 0.2s;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
.sliding-tile:hover {
|
|
transform: scale(1.03);
|
|
background: #39324e;
|
|
}
|
|
|
|
.sliding-tile.blank {
|
|
background: transparent;
|
|
border: 2px dashed rgba(229, 185, 72, 0.2);
|
|
box-shadow: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.tile-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tile-num {
|
|
font-size: 0.8rem;
|
|
color: var(--gold);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tile-name {
|
|
font-size: 0.7rem;
|
|
color: var(--text-dim);
|
|
text-align: center;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: rgba(10, 9, 15, 0.95);
|
|
border-top: 1px solid rgba(229, 185, 72, 0.3);
|
|
text-align: center;
|
|
padding: 1.25rem 1rem;
|
|
color: var(--text-dim);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* McGonagall's Wizard Chess (Zauberschach) */
|
|
.chess-board-wrapper {
|
|
max-width: 440px;
|
|
margin: 1.25rem auto;
|
|
background: #171322;
|
|
border: 3px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 0.75rem;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.chess-board {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
border: 2px solid #5a4b38;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.chess-sq {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.chess-sq.light {
|
|
background: #e8d8be;
|
|
}
|
|
|
|
.chess-sq.dark {
|
|
background: #5c4b37;
|
|
}
|
|
|
|
.chess-sq.selected {
|
|
background: #d4af37 !important;
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.chess-piece {
|
|
font-size: 2.2rem;
|
|
line-height: 1;
|
|
transition: transform 0.15s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.white-piece {
|
|
color: #ffffff;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
|
|
text-shadow: 0 0 2px #333;
|
|
}
|
|
|
|
.black-piece {
|
|
color: #1a1226;
|
|
filter: drop-shadow(0 2px 4px rgba(229, 185, 72, 0.4));
|
|
text-shadow: 0 0 3px #e5b948;
|
|
}
|
|
|
|
.chess-sq:hover .chess-piece {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.move-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: rgba(229, 185, 72, 0.75);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
box-shadow: 0 0 8px var(--gold);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.move-capture-ring {
|
|
width: 80%;
|
|
height: 80%;
|
|
border: 3px solid rgba(231, 76, 60, 0.85);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
box-shadow: 0 0 10px #e74c3c;
|
|
pointer-events: none;
|
|
animation: ringPulse 1s infinite alternate;
|
|
}
|
|
|
|
@keyframes ringPulse {
|
|
0% { transform: scale(0.9); opacity: 0.7; }
|
|
100% { transform: scale(1.05); opacity: 1; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.chess-piece {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
/* ========================================================
|
|
MINI-GAME: DIE ZAUBERTRANK-BRAUKÜCHE (/brew)
|
|
======================================================== */
|
|
.brew-container {
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.recipe-book {
|
|
background: linear-gradient(135deg, #2b1f14, #19120b);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
width: 100%;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
|
|
text-align: center;
|
|
}
|
|
|
|
.recipe-step-badge {
|
|
display: inline-block;
|
|
background: rgba(212, 175, 55, 0.2);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.cauldron-visual-container {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
margin: 0.5rem auto;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Ingredient Shelf */
|
|
.ingredients-shelf {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.ingredient-btn {
|
|
background: rgba(30, 24, 40, 0.85);
|
|
border: 2px solid #5a422d;
|
|
border-radius: 12px;
|
|
padding: 0.6rem 0.8rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
min-width: 90px;
|
|
}
|
|
|
|
.ingredient-btn:hover, .ingredient-btn:active {
|
|
border-color: var(--gold);
|
|
transform: translateY(-3px) scale(1.03);
|
|
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
|
|
}
|
|
|
|
.ingredient-btn.done {
|
|
opacity: 0.5;
|
|
border-color: #27ae60;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ing-icon {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.ing-name {
|
|
font-size: 0.85rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ing-count {
|
|
font-size: 0.75rem;
|
|
color: var(--gold);
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Heat Bellows Bar */
|
|
.heat-control-panel {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.heat-control-panel.active {
|
|
display: flex;
|
|
}
|
|
|
|
.temp-bar-container {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
height: 24px;
|
|
background: #111;
|
|
border: 2px solid #555;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.temp-ideal-zone {
|
|
position: absolute;
|
|
left: 60%;
|
|
width: 25%;
|
|
height: 100%;
|
|
background: rgba(46, 204, 113, 0.4);
|
|
border-left: 2px dashed #2ecc71;
|
|
border-right: 2px dashed #2ecc71;
|
|
}
|
|
|
|
.temp-indicator {
|
|
height: 100%;
|
|
width: 10%;
|
|
background: linear-gradient(90deg, #3498db, #f39c12, #e74c3c);
|
|
border-radius: 10px;
|
|
transition: width 0.15s ease-out;
|
|
}
|
|
|
|
.bellows-btn {
|
|
background: linear-gradient(180deg, #c0392b, #962d22);
|
|
border: 2px solid #e74c3c;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1.1rem;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.bellows-btn:active {
|
|
transform: scale(0.95);
|
|
background: #e74c3c;
|
|
}
|
|
|
|
|
|
/* ========================================================
|
|
MINI-GAME: DAS RUNEN-DREHSCHLOSS / CRYPTEX (/cryptex)
|
|
======================================================== */
|
|
.cryptex-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.cryptex-box {
|
|
background: linear-gradient(180deg, #3a2b1d 0%, #1f160e 50%, #120d08 100%);
|
|
border: 4px solid var(--gold);
|
|
border-radius: 16px;
|
|
padding: 1.25rem 1rem;
|
|
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), inset 0 0 25px rgba(212, 175, 55, 0.15);
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.cryptex-frame-line {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 4%;
|
|
right: 4%;
|
|
height: 4px;
|
|
background: rgba(212, 175, 55, 0.85);
|
|
box-shadow: 0 0 10px var(--gold);
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.cryptex-rings-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 0.5rem;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.cryptex-dial {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.dial-step-btn {
|
|
background: rgba(212, 175, 55, 0.15);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
border-radius: 8px;
|
|
width: 44px;
|
|
height: 38px;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.dial-step-btn:active {
|
|
background: var(--gold);
|
|
color: #120d08;
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.dial-cylinder {
|
|
width: 100%;
|
|
max-width: 90px;
|
|
height: 90px;
|
|
background: linear-gradient(180deg, #1b1712 0%, #4a3822 50%, #15110c 100%);
|
|
border: 3px solid #8c6e3b;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: inset 0 8px 12px rgba(0,0,0,0.8), inset 0 -8px 12px rgba(0,0,0,0.8);
|
|
position: relative;
|
|
user-select: none;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.dial-symbol {
|
|
font-size: clamp(1.6rem, 5vw, 2.3rem);
|
|
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
|
|
transition: transform 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.dial-label {
|
|
font-size: 0.72rem;
|
|
color: var(--gold-light);
|
|
margin-top: -2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* ========================================================
|
|
MINI-GAME: DIE BRAUKÜCHE / CAULDRON BREW (/brew)
|
|
======================================================== */
|
|
.brew-container {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.recipe-book {
|
|
width: 100%;
|
|
background: rgba(22, 17, 30, 0.9);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
padding: 1rem 1.2rem;
|
|
text-align: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.recipe-step-badge {
|
|
display: inline-block;
|
|
background: rgba(229, 185, 72, 0.2);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
padding: 0.2rem 0.75rem;
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.cauldron-visual-container {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
aspect-ratio: 320 / 280;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.8));
|
|
}
|
|
|
|
.cauldron-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.animated-flames {
|
|
animation: flameFlicker 0.6s infinite alternate ease-in-out;
|
|
transform-origin: 160px 260px;
|
|
}
|
|
|
|
@keyframes flameFlicker {
|
|
0% { transform: scaleY(0.92) scaleX(0.98); opacity: 0.85; }
|
|
100% { transform: scaleY(1.08) scaleX(1.02); opacity: 1; }
|
|
}
|
|
|
|
.bubble-anim {
|
|
animation: bubbleRise 1.6s infinite ease-in-out alternate;
|
|
}
|
|
.bubble-anim.b1 { animation-delay: 0.1s; }
|
|
.bubble-anim.b2 { animation-delay: 0.4s; }
|
|
.bubble-anim.b3 { animation-delay: 0.7s; }
|
|
.bubble-anim.b4 { animation-delay: 1.0s; }
|
|
.bubble-anim.b5 { animation-delay: 1.3s; }
|
|
|
|
@keyframes bubbleRise {
|
|
0% { transform: translateY(0); opacity: 0.4; }
|
|
50% { transform: translateY(-4px) scale(1.2); opacity: 0.8; }
|
|
100% { transform: translateY(2px) scale(0.9); opacity: 0.5; }
|
|
}
|
|
|
|
/* Ingredients Shelf */
|
|
.ingredients-shelf {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.65rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.ingredient-btn {
|
|
background: linear-gradient(135deg, rgba(30, 24, 42, 0.95), rgba(18, 14, 26, 0.95));
|
|
border: 2px solid rgba(229, 185, 72, 0.35);
|
|
border-radius: 12px;
|
|
padding: 0.85rem 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
touch-action: manipulation;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.ingredient-btn:active {
|
|
transform: scale(0.94);
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.ingredient-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
transform: none !important;
|
|
}
|
|
|
|
.ing-icon {
|
|
font-size: 2.2rem;
|
|
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
|
|
}
|
|
|
|
.ing-name {
|
|
color: var(--text-light);
|
|
font-size: 0.88rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ing-count {
|
|
color: var(--gold);
|
|
font-size: 0.78rem;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 0.1rem 0.45rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Heat Control Panel */
|
|
.heat-control-panel {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
width: 100%;
|
|
background: rgba(20, 16, 28, 0.9);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
padding: 1rem 1.2rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.heat-control-panel.active {
|
|
display: flex;
|
|
}
|
|
|
|
.temp-bar-container {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
height: 24px;
|
|
background: rgba(10, 8, 16, 0.9);
|
|
border: 2px solid #555;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.temp-ideal-zone {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(46, 204, 113, 0.35);
|
|
border-left: 2px solid #2ecc71;
|
|
border-right: 2px solid #2ecc71;
|
|
z-index: 1;
|
|
}
|
|
|
|
.temp-indicator {
|
|
height: 100%;
|
|
width: 20%;
|
|
background: linear-gradient(90deg, #3498db, #f39c12, #e74c3c);
|
|
border-radius: 10px;
|
|
transition: width 0.15s ease-out, background 0.2s ease;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.bellows-btn {
|
|
background: linear-gradient(135deg, #d35400, #c0392b);
|
|
border: 2px solid #f39c12;
|
|
border-radius: 12px;
|
|
color: #ffffff;
|
|
font-family: inherit;
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
padding: 0.85rem 2rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
|
|
touch-action: manipulation;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.bellows-btn:active {
|
|
transform: scale(0.94);
|
|
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.6);
|
|
}
|
|
|
|
/* ========================================================
|
|
MINI-GAME: WICHTEL-PANIK / CORNISH PIXIES (/pixies)
|
|
======================================================== */
|
|
.pixies-container {
|
|
max-width: 580px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.pixies-hud {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
background: rgba(20, 15, 30, 0.85);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 0.6rem 1rem;
|
|
font-size: 1.1rem;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.arena-start-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(16, 11, 23, 0.92);
|
|
border: 3px solid var(--gold);
|
|
border-radius: 16px;
|
|
z-index: 20;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
box-shadow: 0 0 35px rgba(0, 0, 0, 0.95);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.pixies-arena {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
background: linear-gradient(135deg, #1f1728, #100b17);
|
|
border: 3px solid #4a3461;
|
|
border-radius: 16px;
|
|
padding: 0.5rem;
|
|
box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
|
|
touch-action: manipulation;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.pixie-hole {
|
|
background: radial-gradient(circle, #2b1f3d 0%, #150f20 80%);
|
|
border: 2px solid #3c2a50;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
box-shadow: inset 0 6px 10px rgba(0,0,0,0.7);
|
|
}
|
|
|
|
.hole-decor {
|
|
font-size: 1.5rem;
|
|
opacity: 0.25;
|
|
position: absolute;
|
|
bottom: 6px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pixie-target {
|
|
display: none; /* Crucial bugfix: hidden until active! */
|
|
font-size: clamp(2.4rem, 8vw, 3.4rem);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
|
|
user-select: none;
|
|
}
|
|
|
|
.pixie-target.active {
|
|
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 {
|
|
display: block;
|
|
filter: drop-shadow(0 0 16px #3498db) hue-rotate(180deg) brightness(1.3);
|
|
animation: none;
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.pixie-target.neville {
|
|
display: block;
|
|
font-size: clamp(2.6rem, 9vw, 3.6rem);
|
|
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 {
|
|
0% { transform: translateY(-4px) rotate(-3deg); }
|
|
100% { transform: translateY(4px) rotate(3deg); }
|
|
}
|
|
|
|
@keyframes shakeNeville {
|
|
0% { transform: translateY(0) rotate(-6deg); }
|
|
100% { transform: translateY(0) rotate(6deg); }
|
|
}
|
|
|
|
/* Flight Canvas Wrapper & Start Overlay */
|
|
.canvas-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.flight-start-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(12, 10, 20, 0.93);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
z-index: 50;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 0 35px rgba(0, 0, 0, 0.95);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.flight-start-overlay.hidden {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Chamber Locked Screen */
|
|
.chamber-lock-banner {
|
|
background: linear-gradient(135deg, rgba(30, 20, 25, 0.95), rgba(18, 12, 18, 0.98));
|
|
border: 2px dashed #e74c3c;
|
|
border-radius: 16px;
|
|
padding: 2.2rem 1.5rem;
|
|
text-align: center;
|
|
margin: 1.5rem auto;
|
|
max-width: 600px;
|
|
box-shadow: 0 0 35px rgba(231, 76, 60, 0.25);
|
|
position: relative;
|
|
}
|
|
|
|
.chamber-lock-icon {
|
|
font-size: 3.6rem;
|
|
margin-bottom: 0.5rem;
|
|
animation: lockJiggle 2.5s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes lockJiggle {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
15% { transform: rotate(-9deg); }
|
|
30% { transform: rotate(9deg); }
|
|
45% { transform: rotate(-5deg); }
|
|
60% { transform: rotate(0deg); }
|
|
}
|
|
|
|
.chamber-lock-title {
|
|
color: #e74c3c;
|
|
font-size: 1.7rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.chamber-lock-desc {
|
|
color: var(--text-light);
|
|
font-size: 1.05rem;
|
|
line-height: 1.55;
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
|
|
.chamber-req-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 12px;
|
|
padding: 0.85rem 1.4rem;
|
|
margin-bottom: 1.5rem;
|
|
text-align: left;
|
|
box-shadow: 0 0 20px rgba(229, 185, 72, 0.2);
|
|
}
|
|
|
|
.chamber-req-icon {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
.chamber-req-info strong {
|
|
display: block;
|
|
color: var(--gold);
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.chamber-req-info span {
|
|
color: var(--text-dim);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.chamber-lock-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.alohomora-link {
|
|
color: var(--text-dim);
|
|
font-size: 0.85rem;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
background: none;
|
|
border: none;
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
|
|
.alohomora-link:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
/* ========================================================
|
|
VICTORY CELEBRATION MODAL & PARTICLES
|
|
======================================================== */
|
|
.victory-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(6, 4, 12, 0.94);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
transition: opacity 0.35s ease, visibility 0.35s ease;
|
|
}
|
|
|
|
.victory-modal-backdrop.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
|
|
.victory-confetti-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.victory-card {
|
|
position: relative;
|
|
z-index: 2;
|
|
background: linear-gradient(135deg, rgba(26, 18, 40, 0.98), rgba(14, 10, 22, 0.98));
|
|
border: 3px solid var(--gold);
|
|
border-radius: 20px;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
padding: 2rem 1.5rem;
|
|
text-align: center;
|
|
box-shadow: 0 0 50px rgba(229, 185, 72, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.8);
|
|
transform: scale(0.85);
|
|
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.victory-modal-backdrop.show .victory-card {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.victory-crest-wrap {
|
|
position: relative;
|
|
width: 85px;
|
|
height: 85px;
|
|
margin: 0 auto 0.75rem auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.victory-crest-icon {
|
|
font-size: 3.8rem;
|
|
filter: drop-shadow(0 0 20px #ffd700);
|
|
animation: victoryCrestBounce 1s infinite alternate ease-in-out;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
@keyframes victoryCrestBounce {
|
|
0% { transform: translateY(0) scale(1); }
|
|
100% { transform: translateY(-8px) scale(1.08); }
|
|
}
|
|
|
|
.victory-chamber-badge {
|
|
display: inline-block;
|
|
background: rgba(229, 185, 72, 0.2);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
font-weight: bold;
|
|
padding: 0.25rem 0.85rem;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.victory-title {
|
|
font-size: clamp(1.5rem, 5vw, 2.1rem);
|
|
color: #ffd700;
|
|
margin-bottom: 0.6rem;
|
|
text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
|
|
}
|
|
|
|
.victory-stats-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.2rem;
|
|
margin-bottom: 1.2rem;
|
|
font-size: 0.95rem;
|
|
color: var(--text-light);
|
|
background: rgba(0, 0, 0, 0.35);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.victory-reward-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
background: linear-gradient(135deg, rgba(229, 185, 72, 0.15), rgba(46, 204, 113, 0.1));
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
padding: 0.85rem 1rem;
|
|
margin-bottom: 1.25rem;
|
|
text-align: left;
|
|
box-shadow: 0 0 20px rgba(229, 185, 72, 0.25);
|
|
animation: rewardGlow 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes rewardGlow {
|
|
0% { box-shadow: 0 0 10px rgba(229, 185, 72, 0.2); }
|
|
100% { box-shadow: 0 0 25px rgba(229, 185, 72, 0.5); }
|
|
}
|
|
|
|
.reward-icon {
|
|
font-size: 2.8rem;
|
|
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
|
|
animation: rewardPop 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes rewardPop {
|
|
0% { transform: scale(0.4) rotate(-20deg); opacity: 0; }
|
|
70% { transform: scale(1.25) rotate(10deg); }
|
|
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
}
|
|
|
|
.reward-label {
|
|
display: block;
|
|
font-size: 0.78rem;
|
|
color: var(--gold-light);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.reward-name {
|
|
display: block;
|
|
font-size: 1.15rem;
|
|
color: #ffffff;
|
|
margin: 0.1rem 0;
|
|
}
|
|
|
|
.reward-desc {
|
|
font-size: 0.82rem;
|
|
color: var(--text-dim);
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.victory-story-box {
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 1.35rem;
|
|
color: #e0d0b8;
|
|
line-height: 1.5;
|
|
background: rgba(15, 10, 20, 0.6);
|
|
border-left: 3px solid var(--gold);
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
text-align: left;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.victory-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.victory-next-btn {
|
|
font-size: 1.25rem !important;
|
|
padding: 0.95rem 1.5rem !important;
|
|
box-shadow: 0 0 25px rgba(229, 185, 72, 0.6) !important;
|
|
animation: nextBtnPulse 1.8s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes nextBtnPulse {
|
|
0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(229, 185, 72, 0.5); }
|
|
50% { transform: scale(1.03); box-shadow: 0 0 32px rgba(229, 185, 72, 0.85); }
|
|
}
|
|
|
|
.victory-sub-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn-subtle {
|
|
background: transparent;
|
|
border: 1px solid rgba(229, 185, 72, 0.4);
|
|
color: var(--text-light);
|
|
border-radius: 8px;
|
|
padding: 0.5rem 0.9rem;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-subtle:hover {
|
|
background: rgba(229, 185, 72, 0.15);
|
|
border-color: var(--gold);
|
|
color: var(--gold);
|
|
}
|
|
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 600px) {
|
|
.container {
|
|
padding: 0.5rem;
|
|
}
|
|
.parchment-scroll {
|
|
padding: 0.75rem 0.9rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.parchment-title {
|
|
font-size: 1.35rem;
|
|
}
|
|
.riddle-poem {
|
|
font-size: 1rem !important;
|
|
line-height: 1.4 !important;
|
|
margin: 0.25rem 0 !important;
|
|
}
|
|
.cauldron-wrapper {
|
|
width: 220px;
|
|
height: 220px;
|
|
}
|
|
.cauldron-pot {
|
|
width: 200px;
|
|
height: 185px;
|
|
}
|
|
.dial-cylinder {
|
|
height: 70px;
|
|
}
|
|
.dial-step-btn {
|
|
height: 38px;
|
|
}
|
|
.cryptex-box {
|
|
padding: 0.75rem 0.4rem;
|
|
}
|
|
.cryptex-rings-row {
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* ========================================================
|
|
SCREEN SHAKE & OBSTACLES ANIMATION
|
|
======================================================== */
|
|
@keyframes screenShake {
|
|
0% { transform: translate(0, 0) rotate(0deg); }
|
|
15% { transform: translate(-7px, 5px) rotate(-1.5deg); }
|
|
30% { transform: translate(6px, -6px) rotate(1.5deg); }
|
|
45% { transform: translate(-5px, -4px) rotate(-1deg); }
|
|
60% { transform: translate(4px, 4px) rotate(1deg); }
|
|
75% { transform: translate(-2px, 2px) rotate(-0.5deg); }
|
|
100% { transform: translate(0, 0) rotate(0deg); }
|
|
}
|
|
|
|
.screen-shake {
|
|
animation: screenShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
}
|
|
|
|
/* ========================================================
|
|
ENHANCED CAULDRON: INGREDIENT DOSAGE & STIR METER (/brew)
|
|
======================================================== */
|
|
.dose-grid {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dose-card {
|
|
background: rgba(25, 20, 35, 0.95);
|
|
border: 2px solid rgba(229, 185, 72, 0.4);
|
|
border-radius: 14px;
|
|
padding: 0.75rem 0.6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
min-width: 95px;
|
|
flex: 1;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.dose-card:hover {
|
|
border-color: var(--gold);
|
|
}
|
|
|
|
.dose-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.dose-btn {
|
|
background: rgba(229, 185, 72, 0.18);
|
|
border: 1px solid var(--gold);
|
|
color: var(--gold);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.dose-btn:active {
|
|
background: var(--gold);
|
|
color: #120d08;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.dose-val {
|
|
font-size: 1.35rem;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
min-width: 22px;
|
|
text-align: center;
|
|
text-shadow: 0 0 6px var(--gold);
|
|
}
|
|
|
|
/* Two-Way Stirring & Gauge */
|
|
.stir-gauge-wrapper {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.65rem;
|
|
background: rgba(20, 16, 28, 0.92);
|
|
border: 2px solid var(--gold);
|
|
border-radius: 14px;
|
|
padding: 1rem 1.2rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.stir-track {
|
|
width: 100%;
|
|
height: 24px;
|
|
background: rgba(10, 8, 16, 0.95);
|
|
border: 2px solid #555;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.stir-target-zone {
|
|
position: absolute;
|
|
left: 40%;
|
|
width: 35%;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(46, 204, 113, 0.35);
|
|
border-left: 2px dashed #2ecc71;
|
|
border-right: 2px dashed #2ecc71;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stir-indicator-bar {
|
|
height: 100%;
|
|
width: 10%;
|
|
background: linear-gradient(90deg, #3498db 0%, #2ecc71 50%, #e74c3c 100%);
|
|
border-radius: 10px;
|
|
transition: width 0.08s ease-out;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.stir-buttons-row {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
max-width: 360px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stir-action-btn {
|
|
flex: 1;
|
|
padding: 0.85rem 0.6rem;
|
|
font-size: 1.05rem;
|
|
font-weight: bold;
|
|
font-family: inherit;
|
|
border-radius: 12px;
|
|
border: 2px solid rgba(229, 185, 72, 0.5);
|
|
background: linear-gradient(135deg, rgba(38, 28, 54, 0.95), rgba(18, 14, 26, 0.95));
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.stir-action-btn:active {
|
|
transform: scale(0.95);
|
|
background: var(--gold);
|
|
color: #120d08;
|
|
}
|
|
|
|
.stir-action-btn.active-target {
|
|
border-color: #2ecc71;
|
|
box-shadow: 0 0 16px rgba(46, 204, 113, 0.6);
|
|
color: #ffd700;
|
|
animation: targetPulse 1.2s infinite alternate;
|
|
}
|
|
|
|
@keyframes targetPulse {
|
|
0% { transform: scale(1); }
|
|
100% { transform: scale(1.03); }
|
|
}
|
|
|
|
/* ========================================================
|
|
SNAPE REPRIMAND MODAL (SARCASTIC QUOTES ON ERROR)
|
|
======================================================== */
|
|
.snape-reprimand-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(6, 4, 10, 0.94);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
|
|
.snape-reprimand-modal.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
|
|
.snape-card {
|
|
background: linear-gradient(135deg, #1d1526, #0e0a14);
|
|
border: 3px solid #8e44ad;
|
|
box-shadow: 0 0 45px rgba(142, 68, 173, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.85);
|
|
border-radius: 18px;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
padding: 1.8rem 1.4rem;
|
|
text-align: center;
|
|
transform: scale(0.9);
|
|
transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
}
|
|
|
|
.snape-reprimand-modal.show .snape-card {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.snape-avatar {
|
|
font-size: 3.8rem;
|
|
filter: drop-shadow(0 0 16px rgba(142, 68, 173, 0.9));
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.snape-quote-box {
|
|
background: rgba(0, 0, 0, 0.55);
|
|
border-left: 3px solid #8e44ad;
|
|
padding: 0.9rem 1.1rem;
|
|
margin: 1.1rem 0;
|
|
text-align: left;
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 1.45rem;
|
|
color: #e8d8be;
|
|
line-height: 1.5;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
|
|
/* =========================================
|
|
HOGWARTS ENVELOPE & WAX SEAL INTRO (Bootle Escape)
|
|
========================================= */
|
|
.escape-letter-intro {
|
|
max-width: 600px;
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
.antique-envelope-scene {
|
|
position: relative;
|
|
width: min(460px, 92vw);
|
|
height: min(265px, 58vw);
|
|
margin: 20px auto 25px;
|
|
perspective: 1200px;
|
|
perspective-origin: center top;
|
|
transition: margin-top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
.antique-envelope-scene.envelope-opened {
|
|
margin-top: 155px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.envelope-base {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.envelope-interior {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 6px;
|
|
background-color: #2b1d12;
|
|
background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
|
|
border: 2px solid #7a5c36;
|
|
z-index: 1;
|
|
}
|
|
.letter-sheet {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 4%;
|
|
width: 92%;
|
|
height: 390px;
|
|
max-height: 72vh;
|
|
background-color: #fcf8ee;
|
|
background-image: radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(210, 180, 130, 0.25) 100%);
|
|
border-radius: 4px;
|
|
border: 1.5px solid #8e6c43;
|
|
padding: 16px 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transform: translateY(50px) scale(0.92);
|
|
pointer-events: none;
|
|
transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s, opacity 0.6s ease 0.35s, visibility 0.6s ease 0.35s;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
outline: 1px dashed rgba(130, 95, 55, 0.45);
|
|
outline-offset: -5px;
|
|
}
|
|
.envelope-back-body {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 6px;
|
|
background-color: #ebd8ae;
|
|
background-image: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%);
|
|
border: 1.5px solid #8e6c43;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
}
|
|
.envelope-closing-flap.envelope-v-flap {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #dfcd9f;
|
|
background-image: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(125, 90, 40, 0.28) 100%);
|
|
clip-path: polygon(0 0, 100% 0, 50% 56%);
|
|
transform-origin: top center;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 6;
|
|
border-top: 2px solid #7c5830;
|
|
filter: drop-shadow(0 7px 14px rgba(35, 18, 5, 0.65));
|
|
}
|
|
.envelope-opened .envelope-closing-flap.envelope-v-flap {
|
|
transform: rotateX(180deg);
|
|
z-index: 1;
|
|
}
|
|
.v-flap-sketch-line {
|
|
position: absolute;
|
|
inset: 4px;
|
|
clip-path: polygon(2% 2%, 98% 2%, 50% 53.5%);
|
|
border-top: 1.5px dashed rgba(110, 75, 35, 0.45);
|
|
pointer-events: none;
|
|
}
|
|
.sketched-wax-seal {
|
|
position: absolute;
|
|
top: 56%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-3deg);
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
z-index: 7;
|
|
transition: transform 0.3s ease, opacity 0.4s ease;
|
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75);
|
|
}
|
|
.sketched-wax-seal:hover {
|
|
transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
|
|
}
|
|
.seal-crest-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
display: block;
|
|
border: 3px solid #4a0d0d;
|
|
}
|
|
.envelope-opened .sketched-wax-seal {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%) scale(0.3);
|
|
}
|
|
.envelope-opened .letter-sheet {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateY(-140px) scale(1.02);
|
|
z-index: 25;
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(201, 168, 106, 0.4);
|
|
}
|
|
.letter-crest-box {
|
|
width: 46px;
|
|
height: 46px;
|
|
margin: 0 auto 4px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(139, 105, 60, 0.3);
|
|
}
|
|
.letter-crest-sketch {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: sepia(0.65) contrast(1.15) brightness(0.92);
|
|
}
|
|
.letter-school-name {
|
|
font-family: 'MedievalSharp', Georgia, serif;
|
|
font-size: 1.05rem;
|
|
color: #2c1a0c;
|
|
text-transform: uppercase;
|
|
margin-bottom: 2px;
|
|
}
|
|
.letter-headmaster {
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 0.92rem;
|
|
color: #4a331c;
|
|
margin-bottom: 6px;
|
|
}
|
|
.letter-ornament-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
color: #8c6838;
|
|
margin: 4px auto 8px;
|
|
max-width: 240px;
|
|
}
|
|
.ornament-rule {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, #8c6838, transparent);
|
|
}
|
|
.letter-body-handwritten {
|
|
font-family: 'Marck Script', 'Caveat', cursive;
|
|
color: #0f3d24;
|
|
text-align: left;
|
|
line-height: 1.48;
|
|
}
|
|
.letter-salutation {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
.letter-paragraph {
|
|
font-size: 1.05rem;
|
|
margin-bottom: 8px;
|
|
text-indent: 1em;
|
|
}
|
|
.letter-signature-block {
|
|
margin-top: 8px;
|
|
text-align: right;
|
|
font-family: 'Marck Script', 'Caveat', cursive;
|
|
color: #0f3d24;
|
|
}
|
|
.letter-signature-ink {
|
|
font-size: 1.45rem;
|
|
font-weight: 700;
|
|
}
|
|
.letter-sign-title {
|
|
font-size: 0.85rem;
|
|
color: #4a6352;
|
|
}
|