557 lines
29 KiB
CSS
557 lines
29 KiB
CSS
:root {
|
|
--parchment: #f8f5e6;
|
|
--ink: #2c2c2c;
|
|
--gold: #d4af37;
|
|
--burgundy: #740001;
|
|
--bg-dark: #121212;
|
|
--focus-glow: 0;
|
|
}
|
|
|
|
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
|
|
html, body { touch-action: manipulation; }
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
background-image:
|
|
radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
|
|
radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
|
|
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
|
|
font-family: 'MedievalSharp', cursive;
|
|
display: flex; justify-content: center; align-items: center;
|
|
min-height: 100vh; margin: 0; color: var(--ink); overflow: hidden;
|
|
transition: background 0.5s, background-image 0.5s;
|
|
}
|
|
|
|
.bg-default {
|
|
background-color: #0f0f14;
|
|
background-image:
|
|
radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
|
|
radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
|
|
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
|
|
}
|
|
|
|
/* ==================== SKINS ==================== */
|
|
|
|
/* 1. DEFAULT (PARCHMENT) */
|
|
.card-container.skin-default {
|
|
background:
|
|
linear-gradient(180deg, rgba(212,175,55,0.06), rgba(116,0,1,0.05)),
|
|
repeating-linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 32px, transparent 32px, transparent 64px),
|
|
var(--parchment);
|
|
}
|
|
|
|
/* 2. GRYFFINDOR */
|
|
.card-container.skin-gryffindor {
|
|
background:
|
|
linear-gradient(135deg, rgba(180, 30, 30, 0.7), rgba(90, 0, 0, 0.6)),
|
|
repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.25) 0 8px, transparent 8px 24px),
|
|
#2a0101;
|
|
color: #ffeccc; border-color: #d4af37; box-shadow: 0 0 38px rgba(180, 30, 30, 0.8);
|
|
}
|
|
.card-container.skin-gryffindor #equation-display,
|
|
.card-container.skin-gryffindor #answer-display { color: #ffeccc; border-color: #d4af37; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
|
|
.card-container.skin-gryffindor .header-info,
|
|
.card-container.skin-gryffindor .shop-btn,
|
|
.card-container.skin-gryffindor .help-btn { color: #ffeccc; border-color: #d4af37; }
|
|
.card-container.skin-gryffindor .key-btn {
|
|
background: rgba(180, 30, 30, 0.25); border-color: #d4af37; color: #ffeccc;
|
|
}
|
|
.card-container.skin-gryffindor .key-btn:active { background: #d4af37; color: #3b0505; }
|
|
|
|
/* 3. SLYTHERIN */
|
|
.card-container.skin-slytherin {
|
|
background:
|
|
linear-gradient(160deg, rgba(38, 84, 66, 0.8), rgba(14, 34, 26, 0.95)),
|
|
repeating-linear-gradient(135deg, rgba(192, 192, 192, 0.25) 0 10px, transparent 10px 28px),
|
|
radial-gradient(circle at 25% 20%, rgba(90, 160, 130, 0.32), transparent 38%),
|
|
#0a1712;
|
|
color: #d6ffea; border-color: #9ad5b9; box-shadow: 0 0 42px rgba(60, 150, 110, 0.95);
|
|
}
|
|
.card-container.skin-slytherin #equation-display,
|
|
.card-container.skin-slytherin #answer-display { color: #e5fff4; border-color: #9ad5b9; text-shadow: 0 0 10px rgba(0,0,0,0.7); }
|
|
.card-container.skin-slytherin .header-info,
|
|
.card-container.skin-slytherin .shop-btn,
|
|
.card-container.skin-slytherin .help-btn { color: #d6ffea; border-color: #9ad5b9; }
|
|
.card-container.skin-slytherin .key-btn {
|
|
background: rgba(0, 0, 0, 0.35); border-color: #9ad5b9; color: #e5fff4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
|
|
}
|
|
.card-container.skin-slytherin .key-btn:active { background: #9ad5b9; color: #072419; }
|
|
|
|
/* 4. RAVENCLAW */
|
|
.card-container.skin-ravenclaw {
|
|
background:
|
|
linear-gradient(150deg, rgba(20, 60, 120, 0.85), rgba(8, 18, 44, 0.95)),
|
|
repeating-linear-gradient(45deg, rgba(184, 115, 51, 0.3) 0 10px, transparent 10px 24px),
|
|
radial-gradient(circle at 30% 25%, rgba(70, 130, 200, 0.28), transparent 40%),
|
|
#0b1630;
|
|
color: #e9f2ff; border-color: #c98640; box-shadow: 0 0 42px rgba(70, 120, 200, 0.95);
|
|
}
|
|
.card-container.skin-ravenclaw #equation-display,
|
|
.card-container.skin-ravenclaw #answer-display { color: #f4f8ff; border-color: #c98640; text-shadow: 0 0 10px rgba(0,0,0,0.6); }
|
|
.card-container.skin-ravenclaw .header-info, .card-container.skin-ravenclaw .shop-btn { color: #dce9ff; border-color: #c98640; }
|
|
.card-container.skin-ravenclaw .key-btn { background: rgba(255,255,255,0.06); border-color: #c98640; color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
|
|
.card-container.skin-ravenclaw .key-btn:active { background: #c98640; color: #1a0d02; }
|
|
|
|
/* 5. HUFFLEPUFF */
|
|
.card-container.skin-hufflepuff {
|
|
background:
|
|
radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.3), transparent 35%),
|
|
radial-gradient(circle at 80% 70%, rgba(255, 180, 0, 0.26), transparent 38%),
|
|
repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 18px),
|
|
#1d1a14;
|
|
color: #fff4c2; border-color: #ffcd35; box-shadow: 0 0 40px rgba(255, 195, 0, 0.7);
|
|
}
|
|
.card-container.skin-hufflepuff #equation-display,
|
|
.card-container.skin-hufflepuff #answer-display { color: #fff4c2; border-color: #ffcd35; text-shadow: 0 0 10px rgba(0,0,0,0.4); }
|
|
.card-container.skin-hufflepuff .header-info, .card-container.skin-hufflepuff .shop-btn { color: #fff0b0; border-color: #ffcd35; }
|
|
.card-container.skin-hufflepuff .key-btn { border-color: #ffcd35; color: #1d1a14; background: rgba(255, 215, 0, 0.25); }
|
|
.card-container.skin-hufflepuff .key-btn:active { background: #ffcd35; color: #1d1a14; }
|
|
|
|
/* 6. MARAUDER'S MAP */
|
|
.card-container.skin-map {
|
|
background:
|
|
radial-gradient(circle at 22% 18%, rgba(120, 80, 40, 0.18), transparent 40%),
|
|
radial-gradient(circle at 78% 72%, rgba(100, 70, 35, 0.16), transparent 42%),
|
|
repeating-linear-gradient(45deg, rgba(80, 45, 15, 0.08) 0 3px, transparent 3px 9px),
|
|
linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.07)),
|
|
#f4e7d0;
|
|
color: #3a2814; border-color: #8b5a2b; box-shadow: 0 0 38px rgba(80, 45, 15, 0.6);
|
|
}
|
|
.card-container.skin-map::after {
|
|
content: "";
|
|
position: absolute; inset: 10px;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, rgba(58,40,20,0.08) 0 8%, transparent 12%),
|
|
radial-gradient(circle at 70% 60%, rgba(58,40,20,0.08) 0 8%, transparent 12%);
|
|
pointer-events: none;
|
|
}
|
|
.card-container.skin-map #equation-display,
|
|
.card-container.skin-map #answer-display { color: #3a2814; border-color: #8b5a2b; text-shadow: 0 0 8px rgba(255,255,255,0.4); }
|
|
.card-container.skin-map .header-info, .card-container.skin-map .shop-btn, .card-container.skin-map .help-btn { color: #3a2814; border-color: #8b5a2b; }
|
|
.card-container.skin-map .key-btn { background: rgba(139, 90, 43, 0.12); border-color: #8b5a2b; color: #3a2814; }
|
|
.card-container.skin-map .key-btn:active { background: #8b5a2b; color: #f4e7d0; }
|
|
|
|
/* 7. SPELLBOOK */
|
|
.card-container.skin-spellbook {
|
|
background:
|
|
radial-gradient(circle at 25% 20%, rgba(255, 215, 120, 0.18), transparent 45%),
|
|
linear-gradient(135deg, rgba(95, 65, 35, 0.6), rgba(40, 22, 12, 0.95)),
|
|
linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.12) 60%, rgba(0,0,0,0.25)),
|
|
#2a170e;
|
|
color: #f2e3c7; border-color: #d1a85b; box-shadow: 0 0 42px rgba(209, 168, 91, 0.7);
|
|
}
|
|
.card-container.skin-spellbook::before {
|
|
content: "";
|
|
position: absolute; inset: 12px;
|
|
border: 2px solid rgba(209,168,91,0.6);
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
|
|
pointer-events: none;
|
|
}
|
|
.card-container.skin-spellbook #equation-display,
|
|
.card-container.skin-spellbook #answer-display { color: #f6e7cb; border-color: #d1a85b; text-shadow: 0 0 10px rgba(0,0,0,0.7); }
|
|
.card-container.skin-spellbook .header-info, .card-container.skin-spellbook .shop-btn, .card-container.skin-spellbook .help-btn { color: #f6e7cb; border-color: #d1a85b; }
|
|
.card-container.skin-spellbook .key-btn { background: rgba(0, 0, 0, 0.2); border-color: #d1a85b; color: #f6e7cb; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
|
|
.card-container.skin-spellbook .key-btn:active { background: #d1a85b; color: #2a170e; }
|
|
|
|
/* ==================== END SKINS ==================== */
|
|
|
|
|
|
/* --- TOUCH TRAILS --- */
|
|
.particle { position: absolute; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; animation: fadeOut 0.8s forwards; z-index: 9999; }
|
|
@keyframes fadeOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
|
|
.trail-sparks { background: #ffd700; box-shadow: 0 0 8px #ffd700; }
|
|
.trail-ice { background: #e0ffff; box-shadow: 0 0 8px #00ffff; }
|
|
.trail-slime { background: #39ff14; box-shadow: 0 0 8px #39ff14; }
|
|
|
|
/* --- DEMENTOR --- */
|
|
#dementor-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
--circle-size: 12%;
|
|
--circle-strength: 0.42;
|
|
--circle-blur: 0px;
|
|
--vignette-strength: 0.18;
|
|
background: transparent;
|
|
opacity: 0;
|
|
filter: blur(var(--circle-blur));
|
|
mix-blend-mode: multiply;
|
|
transition: opacity 0.4s ease, filter 0.4s ease;
|
|
}
|
|
/* keep content above overlay inside card */
|
|
.card-container > *:not(#dementor-overlay) { position: relative; z-index: 1; }
|
|
.patronus-flash { background: radial-gradient(circle, white 0%, transparent 100%) !important; opacity: 0.8 !important; }
|
|
|
|
/* Snitch layer */
|
|
#snitch-layer {
|
|
position: fixed; inset: 0; pointer-events: none; z-index: 880;
|
|
overflow: hidden;
|
|
}
|
|
.flying-snitch {
|
|
position: absolute;
|
|
left: -60px;
|
|
width: 32px; height: 20px;
|
|
background: radial-gradient(circle at 30% 50%, #fff89a 0%, #ffd700 60%, #c19a00 100%);
|
|
border-radius: 50% 50% 50% 50%;
|
|
box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 0 24px rgba(255,215,0,0.4);
|
|
animation: snitchFlyRight 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
|
|
pointer-events: auto;
|
|
}
|
|
.flying-snitch.from-right {
|
|
left: auto;
|
|
right: -60px;
|
|
animation: snitchFlyLeft 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
|
|
}
|
|
.flying-snitch::before, .flying-snitch::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
width: 18px; height: 12px;
|
|
background: linear-gradient(120deg, rgba(255,255,255,0.9), rgba(255,215,0,0.6));
|
|
border-radius: 12px 12px 2px 2px;
|
|
box-shadow: 0 0 8px rgba(255,255,255,0.5);
|
|
}
|
|
.flying-snitch::before { left: -16px; transform: rotate(-12deg); }
|
|
.flying-snitch::after { right: -16px; transform: scaleX(-1) rotate(-12deg); }
|
|
@keyframes snitchFlyRight {
|
|
0% { transform: translateX(0) translateY(0) rotate(0deg); }
|
|
50% { transform: translateX(60vw) translateY(-6vh) rotate(8deg); }
|
|
100% { transform: translateX(120vw) translateY(4vh) rotate(-6deg); }
|
|
}
|
|
@keyframes snitchFlyLeft {
|
|
0% { transform: translateX(0) translateY(0) rotate(0deg); }
|
|
50% { transform: translateX(-60vw) translateY(6vh) rotate(-8deg); }
|
|
100% { transform: translateX(-120vw) translateY(-4vh) rotate(6deg); }
|
|
}
|
|
@keyframes snitchGlow {
|
|
from { box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3); }
|
|
to { box-shadow: 0 0 16px rgba(255,215,0,0.9), 0 0 28px rgba(255,215,0,0.6); }
|
|
}
|
|
|
|
/* --- UI --- */
|
|
.card-container {
|
|
width: 95%; max-width: 450px; padding: 15px; border-radius: 10px;
|
|
box-shadow: 0 0 40px var(--gold); text-align: center;
|
|
border: 4px double var(--gold); position: relative; z-index: 100;
|
|
display: flex; flex-direction: column; transition: background 0.3s, border-color 0.3s;
|
|
}
|
|
|
|
.header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Cinzel', serif; color: var(--burgundy); font-size: 0.9rem; font-weight: bold; }
|
|
#xp-text {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background: rgba(0,0,0,0.35);
|
|
color: #fcefd6;
|
|
border: 1px solid rgba(212,175,55,0.6);
|
|
border-radius: 12px;
|
|
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
|
|
box-shadow: 0 0 6px rgba(0,0,0,0.25), inset 0 0 8px rgba(255, 225, 140, 0.15);
|
|
}
|
|
|
|
.currency-badge {
|
|
background: var(--burgundy); color: var(--gold); padding: 5px 10px;
|
|
border-radius: 15px; display: flex; align-items: center; gap: 5px;
|
|
border: 1px solid var(--gold); font-size: 0.9rem;
|
|
}
|
|
|
|
.shop-btn, .help-btn {
|
|
background: var(--gold); border: 2px solid var(--burgundy); color: var(--burgundy);
|
|
width: 40px; height: 40px; border-radius: 50%; font-weight: bold; cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
}
|
|
.help-btn.active {
|
|
background: #1a472a;
|
|
color: #f7f7f7;
|
|
border-color: #d4af37;
|
|
}
|
|
|
|
.progress-container { width: 100%; height: 10px; background: rgba(0,0,0,0.1); border: 1px solid var(--burgundy); margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
|
|
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; }
|
|
|
|
.equation { font-size: 3.5rem; margin: 5px 0; min-height: 60px; }
|
|
#answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: #fffdf2; display: flex; align-items: center; justify-content: center; }
|
|
|
|
.equation, #answer-display {
|
|
color: #fffdf2;
|
|
text-shadow:
|
|
0 0 calc(6px + 16px * var(--focus-glow)) rgba(255, 250, 235, calc(0.45 + 0.45 * var(--focus-glow))),
|
|
0 0 calc(12px + 22px * var(--focus-glow)) rgba(255, 230, 140, calc(0.35 + 0.4 * var(--focus-glow)));
|
|
-webkit-text-stroke: 1px rgba(0,0,0,0.5);
|
|
position: relative;
|
|
z-index: 200;
|
|
}
|
|
|
|
#hint-grid {
|
|
display: grid; justify-content: center; gap: 6px; margin: 5px auto; max-width: 220px;
|
|
padding: 8px;
|
|
background: rgba(255, 253, 242, 0.12);
|
|
border: 1px solid rgba(255, 215, 0, 0.4);
|
|
border-radius: 8px;
|
|
position: relative;
|
|
z-index: 200;
|
|
}
|
|
.star-dot { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 18px rgba(255,215,0,0.4); animation: twinkle 1.6s infinite; }
|
|
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
|
|
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; }
|
|
.key-btn { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); color: #fffdf2; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer;
|
|
text-shadow: 0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 245, 225, calc(0.4 + 0.45 * var(--focus-glow)));
|
|
box-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 205, 90, calc(0.25 + 0.35 * var(--focus-glow)));
|
|
-webkit-text-stroke: 1px rgba(0,0,0,0.55);
|
|
}
|
|
.key-btn:active { background: var(--gold); }
|
|
.key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }
|
|
.card-container .key-btn.key-clear {
|
|
background: #ffd966;
|
|
color: #2c2c2c;
|
|
border-color: #b8860b;
|
|
font-weight: bold;
|
|
}
|
|
.card-container .key-btn.key-clear:active { background: #f1c232; }
|
|
|
|
.feedback {
|
|
height: 20px; margin: 5px 0; font-weight: bold; font-size: 1rem;
|
|
color: #fffdf2;
|
|
text-shadow:
|
|
0 0 calc(4px + 10px * var(--focus-glow)) rgba(255, 245, 230, calc(0.4 + 0.45 * var(--focus-glow))),
|
|
0 0 calc(8px + 16px * var(--focus-glow)) rgba(0, 0, 0, 0.55);
|
|
-webkit-text-stroke: 0.5px rgba(0,0,0,0.35);
|
|
}
|
|
.quick-consumables {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 6px;
|
|
margin: 8px 0;
|
|
}
|
|
.quick-consumables .consumable-card {
|
|
background: rgba(0,0,0,0.08);
|
|
border: 1px solid rgba(0,0,0,0.15);
|
|
border-radius: 6px;
|
|
padding: 6px;
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.quick-consumables .consumable-card h5 { margin: 0; font-size: 0.9rem; }
|
|
.quick-consumables .consumable-card .qty { color: #555; }
|
|
.quick-consumables .consumable-card button {
|
|
padding: 6px;
|
|
font-family: 'Cinzel', serif;
|
|
border: 1px solid var(--burgundy);
|
|
background: var(--gold);
|
|
color: #2c2c2c;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
}
|
|
.quick-consumables .consumable-card button:disabled {
|
|
opacity: 0.4; cursor: not-allowed;
|
|
}
|
|
#pet-perch {
|
|
height: 40px;
|
|
display: flex; justify-content: center; align-items: center;
|
|
margin-top: 6px;
|
|
}
|
|
.pet-icon {
|
|
font-size: 1.8rem;
|
|
filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
|
|
animation: petFloat 3s ease-in-out infinite;
|
|
}
|
|
.pet-icon.pet-owl { text-shadow: 0 0 6px rgba(255,255,255,0.5); }
|
|
.pet-icon.pet-cat { text-shadow: 0 0 6px rgba(255,182,193,0.5); }
|
|
.pet-icon.pet-rat { text-shadow: 0 0 6px rgba(200,200,200,0.4); }
|
|
.pet-icon.pet-toad { text-shadow: 0 0 6px rgba(144,238,144,0.6); }
|
|
.pet-icon.pet-ferret { text-shadow: 0 0 6px rgba(210,180,140,0.6); }
|
|
@keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
|
|
|
/* --- MODALS --- */
|
|
.modal-overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.9); z-index: 2000;
|
|
display: flex; justify-content: center; align-items: center;
|
|
visibility: hidden; opacity: 0; transition: 0.3s;
|
|
}
|
|
.modal-overlay.visible { visibility: visible; opacity: 1; }
|
|
|
|
.shop-panel, .letter {
|
|
background: var(--parchment); width: 95%; max-width: 500px; height: 85vh;
|
|
padding: 20px; border-radius: 5px; box-shadow: 0 0 50px #000;
|
|
border: 4px double var(--gold);
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.shop-scroll-area {
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* LETTER STYLING */
|
|
.letter { height: auto; max-height: 90vh; transform: rotate(-1deg); font-family: 'MedievalSharp', cursive; position: relative; }
|
|
.hogwarts-crest { text-align: center; margin-bottom: 15px; border-bottom: 2px solid #444; padding-bottom: 10px; }
|
|
.letter h2 { font-family: 'Cinzel', serif; margin: 0; color: var(--burgundy); font-size: 1.5rem; }
|
|
.letter p { font-size: 1rem; line-height: 1.5; margin-bottom: 12px; color: #222; }
|
|
.solemn-btn { width: 100%; padding: 15px; margin-top: 15px; background: var(--burgundy); color: var(--gold); border: 2px solid var(--gold); font-family: 'Cinzel'; font-size: 1.1rem; cursor: pointer; }
|
|
.checkbox-row { display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 0.8rem; gap: 8px; color: #555; }
|
|
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--burgundy); }
|
|
|
|
/* SHOP STYLING */
|
|
.shop-header { text-align: center; font-family: 'Cinzel'; color: var(--burgundy); border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 10px; }
|
|
.shop-category { font-weight: bold; margin-top: 15px; color: #555; text-transform: uppercase; font-size: 0.8rem; border-bottom: 1px solid #ccc; }
|
|
.shop-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.05); margin-bottom: 8px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
|
|
.item-details h4 { margin: 0; color: var(--burgundy); font-family: 'Cinzel'; font-size: 1rem; }
|
|
.item-details p { margin: 2px 0 0; font-size: 0.75rem; color: #444; }
|
|
|
|
.shop-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
|
|
|
|
.buy-btn {
|
|
background: var(--burgundy); color: var(--gold); border: none;
|
|
padding: 8px 12px; cursor: pointer; font-family: 'Cinzel';
|
|
font-size: 0.85rem; min-width: 70px; border-radius: 4px;
|
|
}
|
|
.buy-btn:disabled { background: #ccc; color: #666; }
|
|
|
|
.use-btn { background: #1a472a; color: #fff; }
|
|
.unequip-btn { background: #444; color: #fff; }
|
|
|
|
.qty-badge { font-size: 0.75rem; color: #555; margin-bottom: 2px; }
|
|
|
|
.close-btn { flex-shrink: 0; padding: 15px; background: #333; color: white; border: none; cursor: pointer; font-family: 'Cinzel'; font-size: 1.1rem; }
|
|
|
|
/* REPORT CARD */
|
|
.report-card {
|
|
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(116, 0, 1, 0.05)),
|
|
repeating-linear-gradient(#e8debf 0, #e8debf 32px, #f8f5e6 32px, #f8f5e6 34px);
|
|
border: 3px double var(--gold);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
|
|
color: #2b2111;
|
|
}
|
|
.report-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.report-title-block { display: flex; flex-direction: column; gap: 4px; }
|
|
.report-title-row { display: flex; align-items: center; gap: 8px; }
|
|
.report-icon { font-size: 1.3rem; }
|
|
.report-title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--burgundy); }
|
|
.report-subtitle { font-size: 0.9rem; color: #444; }
|
|
.report-actions { display: flex; align-items: center; gap: 8px; }
|
|
.grade-badge {
|
|
background: var(--burgundy); color: var(--gold); padding: 8px 12px;
|
|
border-radius: 20px; border: 2px solid var(--gold); font-weight: bold; font-family: 'Cinzel'; box-shadow: 0 0 12px rgba(0,0,0,0.3);
|
|
}
|
|
.report-btn {
|
|
background: #333; color: #fff; border: 1px solid var(--gold);
|
|
padding: 6px 10px; border-radius: 6px; cursor: pointer;
|
|
font-family: 'Cinzel', serif; font-size: 0.8rem;
|
|
}
|
|
.report-btn:hover { background: var(--burgundy); color: var(--gold); }
|
|
.grade-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
|
|
.grade-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: rgba(255,255,255,0.4);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
border-radius: 6px;
|
|
}
|
|
.grade-label { font-weight: bold; color: #2c2c2c; letter-spacing: 0.5px; }
|
|
.grade-value { font-family: 'Cinzel', serif; color: var(--burgundy); }
|
|
.grade-meter {
|
|
grid-column: 1 / span 2;
|
|
height: 8px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.grade-meter span {
|
|
display: block; height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold));
|
|
}
|
|
.metric-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.metric-card {
|
|
background: rgba(255,255,255,0.5);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
|
|
}
|
|
.metric-label { font-size: 0.8rem; color: #555; }
|
|
.metric-value { font-size: 1.2rem; font-weight: bold; color: var(--burgundy); font-family: 'Cinzel', serif; }
|
|
.report-footer { border-top: 1px dashed rgba(0,0,0,0.2); padding-top: 10px; }
|
|
.report-subsection-title { font-weight: bold; color: #2c2c2c; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px; font-size: 0.8rem; }
|
|
.trouble-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.trouble-chip {
|
|
background: rgba(116, 0, 1, 0.1);
|
|
color: var(--burgundy);
|
|
border: 1px solid rgba(116, 0, 1, 0.2);
|
|
padding: 6px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
.report-note { font-size: 0.9rem; color: #444; font-style: italic; }
|
|
|
|
/* BUFF INDICATOR */
|
|
#buff-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 5px; height: 20px; }
|
|
.buff-tag { background: #333; color: gold; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; animation: popIn 0.3s; border: 1px solid gold; }
|
|
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
|
|
|
|
@keyframes pop-out {
|
|
0% { transform: scale(0.8); opacity: 0; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; transform: translateY(-80px); }
|
|
}
|
|
|
|
.xp-gain-pop {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 20px;
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
color: var(--gold);
|
|
text-shadow: 0 0 10px black;
|
|
animation: pop-out 1s ease-out forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes level-up-flash {
|
|
0%, 100% { transform: scale(1); color: var(--gold); text-shadow: 0 0 10px var(--gold); }
|
|
50% { transform: scale(1.2); color: white; text-shadow: 0 0 20px white; }
|
|
}
|
|
|
|
.level-up-animation {
|
|
animation: level-up-flash 1s ease-in-out;
|
|
}
|
|
|
|
@keyframes shake { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
|
|
.apply-shake { animation: shake 0.5s; border-color: #740001 !important; box-shadow: 0 0 20px #740001 !important; }
|
|
|
|
/* --- SWEETALERT THEME --- */
|
|
.hogwarts-popup {
|
|
background: var(--parchment) !important;
|
|
border: 4px double var(--gold) !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
.hogwarts-title {
|
|
font-family: 'Cinzel', serif !important;
|
|
color: var(--burgundy) !important;
|
|
}
|
|
|
|
.hogwarts-button {
|
|
background-color: var(--burgundy) !important;
|
|
color: var(--gold) !important;
|
|
border: 2px solid var(--gold) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.hogwarts-button:focus {
|
|
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5) !important;
|
|
}
|
|
/* Ensure dialogs appear above modals */
|
|
.swal2-container {
|
|
z-index: 3000 !important;
|
|
}
|