diff --git a/app/static/css/style.css b/app/static/css/style.css index 7e69db5..ba8ad65 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1,1924 +1,1905 @@ -:root { - --bg-dark: #0b0b16; - --bg-card: rgba(20, 22, 40, 0.9); - --bg-card-hover: rgba(28, 31, 56, 0.95); - --gold: #c9a86a; - --gold-bright: #ffd700; - --gold-soft: #e6c98f; - --text-main: #f5f5f7; - --text-muted: #b8b8cc; - --parchment: #f6eedb; - --wax-red: #8b0000; - --success: #2ecc71; - --danger: #e74c3c; - --warning: #f39c12; - --border-gold: rgba(201, 168, 106, 0.35); - --header-height: 56px; -} - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - -webkit-tap-highlight-color: transparent; -} - -body { - background-color: var(--bg-dark); - background-image: - radial-gradient(circle at 15% 15%, rgba(201, 168, 106, 0.08) 0%, transparent 45%), - radial-gradient(circle at 85% 85%, rgba(116, 0, 1, 0.08) 0%, transparent 50%); - color: var(--text-main); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Georgia", "Times New Roman", serif; - min-height: 100vh; - display: flex; - flex-direction: column; - overflow-x: hidden; - line-height: 1.5; -} - -/* ========================================= - HEADER & NAVIGATION (Mobile-First) - ========================================= */ -.site-header { - background: rgba(11, 11, 22, 0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--border-gold); - position: sticky; - top: 0; - z-index: 200; - width: 100%; -} - -.header-inner { - max-width: 900px; - margin: 0 auto; - padding: 0 16px; - height: var(--header-height); - display: flex; - justify-content: space-between; - align-items: center; - position: relative; -} - -.brand-link { - display: flex; - align-items: center; - gap: 8px; - text-decoration: none; - color: var(--gold); - font-weight: bold; - font-size: 1.15rem; - letter-spacing: 0.5px; -} - -.brand-sparkle { - font-size: 1.25rem; -} - -.header-right { - display: flex; - align-items: center; - gap: 10px; -} - -.lang-switch-group { - display: inline-flex; - background: rgba(20, 22, 40, 0.85); - border: 1px solid var(--border-gold); - border-radius: 20px; - padding: 2px; - overflow: hidden; -} - -.lang-btn { - background: transparent; - border: none; - color: var(--text-muted); - font-size: 0.8rem; - font-weight: 600; - padding: 4px 9px; - border-radius: 16px; - cursor: pointer; - transition: all 0.2s ease; - min-height: 28px; - display: flex; - align-items: center; - gap: 4px; -} - -.lang-btn:hover { - color: var(--gold); -} - -.lang-btn.active { - background: var(--gold); - color: #0b0b16; - box-shadow: 0 0 8px rgba(201, 168, 106, 0.4); -} - -.audio-btn { - background: rgba(201, 168, 106, 0.15); - border: 1px solid var(--gold); - color: var(--gold-soft); - padding: 6px 12px; - border-radius: 20px; - cursor: pointer; - font-size: 0.85rem; - display: inline-flex; - align-items: center; - gap: 6px; - transition: all 0.2s ease; - min-height: 36px; -} - -.audio-btn:hover { - background: var(--gold); - color: #000; -} - -.menu-toggle-btn { - display: none; - background: transparent; - border: 1px solid var(--border-gold); - color: var(--gold); - font-size: 1.3rem; - width: 38px; - height: 38px; - border-radius: 8px; - cursor: pointer; - align-items: center; - justify-content: center; -} - -.nav-links { - display: flex; - gap: 18px; - align-items: center; -} - -.nav-link { - color: var(--text-muted); - text-decoration: none; - font-size: 0.9rem; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.2s ease; - white-space: nowrap; -} - -.nav-link:hover { - color: var(--gold-bright); - background: rgba(201, 168, 106, 0.1); -} - -/* ========================================= - CONTAINER & LAYOUT - ========================================= */ -.container { - flex: 1; - max-width: 760px; - width: 100%; - margin: 20px auto; - padding: 0 16px; -} - -.admin-wrapper { - max-width: 900px; - width: 100%; - margin: 20px auto; - padding: 0 16px; -} - -.quiz-wrapper { - width: 100%; -} - -.quiz-header { - text-align: center; - margin-bottom: 20px; -} - -.glow-title { - color: var(--gold); - font-size: clamp(1.35rem, 5vw, 2.1rem); - letter-spacing: 0.5px; - text-shadow: 0 0 14px rgba(201, 168, 106, 0.4); - margin-bottom: 6px; - word-break: break-word; -} - -.subtitle { - color: var(--text-muted); - font-size: clamp(0.85rem, 3vw, 1rem); - font-style: italic; - margin-bottom: 15px; -} - -/* ========================================= - CARD COMPONENT - ========================================= */ -.card { - background: var(--bg-card); - border: 1px solid var(--border-gold); - border-radius: 14px; - padding: clamp(16px, 4vw, 28px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - margin-bottom: 20px; - width: 100%; -} - -/* ========================================= - ANTIQUE HOGWARTS CLOSED ENVELOPE & LETTER REVEAL - ========================================= */ -.intro-parchment-wrapper { - background: transparent !important; - border: none !important; - box-shadow: none !important; - padding: 0 !important; - max-width: 600px; - margin: 0 auto; -} - -.antique-envelope-scene { - position: relative; - width: min(480px, 94vw); - height: min(280px, 60vw); - margin: 25px auto 35px; - 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); - transition: transform 0.6s ease; -} - -/* Interior of envelope (visible when flap opens and letter rises) */ -.envelope-interior { - position: absolute; - inset: 0; - border-radius: 6px; - background-color: #d1be9b; - background-image: - radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - border: 2px solid #7a5c36; - z-index: 1; -} - -/* The Letter inside the envelope (slides up when opened) */ -.letter-sheet { - position: absolute; - top: 15px; - left: 4%; - width: 92%; - height: 440px; - max-height: 75vh; - background-color: #f7f0df; - background-image: - radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - background-position: center; - 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; - /* In closed state: 100% completely hidden, invisible, non-rendered */ - 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, - box-shadow 0.8s ease; - overflow-y: auto; - text-align: center; - outline: 1px dashed rgba(130, 95, 55, 0.45); - outline-offset: -5px; - scrollbar-width: thin; - scrollbar-color: #8c6838 transparent; -} - -.letter-sheet::-webkit-scrollbar { - width: 6px; -} - -.letter-sheet::-webkit-scrollbar-thumb { - background-color: #8c6838; - border-radius: 4px; -} - -/* ========================================= - FOUR-FLAP REALISTIC CLOSED ENVELOPE SYSTEM - Flaps: Left, Right, Bottom, and Top Flap - ========================================= */ -.envelope-flap { - position: absolute; - inset: 0; - pointer-events: none; -} - -/* Left Triangular Flap */ -.envelope-flap.flap-left { - background-color: #ebdcb9; - background-image: - radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - clip-path: polygon(0 0, 50% 50%, 0 100%); - z-index: 3; - filter: drop-shadow(2px 0 4px rgba(60, 40, 15, 0.25)); -} - -/* Right Triangular Flap */ -.envelope-flap.flap-right { - background-color: #ebdcb9; - background-image: - radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - clip-path: polygon(100% 0, 50% 50%, 100% 100%); - z-index: 3; - filter: drop-shadow(-2px 0 4px rgba(60, 40, 15, 0.25)); -} - -/* Bottom Flap (Folds up from bottom, overlaps left/right flaps, holds the address) */ -.envelope-flap.flap-bottom { - background-color: #dfcd9f; - background-image: - radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.28) 0%, rgba(130, 95, 45, 0.25) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - clip-path: polygon(0 100%, 50% 48%, 100% 100%); - z-index: 4; - filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.35)); - display: flex; - align-items: flex-end; - justify-content: center; - padding-bottom: 20px; -} - -.envelope-sketch-border { - position: absolute; - bottom: 8px; - left: 8px; - right: 8px; - height: 48%; - border: 1px dashed rgba(120, 85, 45, 0.4); - border-radius: 3px; - pointer-events: none; -} - -/* Handwritten Address in Emerald Ink on Envelope Bottom Flap */ -.envelope-address-block { - position: relative; - z-index: 5; - text-align: center; - font-family: 'Marck Script', 'Caveat', cursive; - color: #0d3820; /* Authentic Hogwarts Emerald Ink */ - padding: 0 15px; - text-shadow: 0 0 1px rgba(13, 56, 32, 0.35); - margin-bottom: 2px; -} - -.addr-school { - font-size: clamp(0.85rem, 2.9vw, 1.08rem); - font-weight: 700; - color: #082816; - margin-bottom: 1px; -} - -.addr-recipient { - font-size: clamp(1.05rem, 3.4vw, 1.28rem); - font-weight: 700; - color: #0b3a20; - margin-bottom: 1px; -} - -.addr-location { - font-size: clamp(0.8rem, 2.5vw, 0.96rem); - font-style: italic; - color: #1e4530; -} - -/* Top Closing Flap (Folds down from top, overlaps all flaps, sealed by wax seal) */ -.envelope-closing-flap.flap-top { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #e5d4a6; - background-image: - radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(130, 95, 45, 0.25) 100%), - url('/static/img/parchment_texture.jpg'); - background-size: cover; - clip-path: polygon(0 0, 100% 0, 50% 54%); - 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 #8e6c43; - filter: drop-shadow(0 6px 9px rgba(45, 30, 10, 0.55)); -} - -.flap-sketch-line { - position: absolute; - inset: 4px; - clip-path: polygon(2% 2%, 98% 2%, 50% 52%); - border-top: 1px dashed rgba(120, 85, 45, 0.4); - pointer-events: none; -} - -/* Sketched Wax Seal placed right over the flap intersection in the center */ -.sketched-wax-seal { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-3deg); - width: 74px; - height: 74px; - border-radius: 50%; - cursor: pointer; - z-index: 7; - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease; - box-shadow: - 0 8px 22px rgba(0, 0, 0, 0.75), - 0 2px 6px rgba(0, 0, 0, 0.45); -} - -.sketched-wax-seal:hover { - transform: translate(-50%, -50%) rotate(0deg) scale(1.1); - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.8), - 0 0 16px rgba(218, 165, 32, 0.45); -} - -.seal-crest-img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; - display: block; - border: 3px solid #4a0d0d; - box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7); -} - -.seal-emboss-ring { - position: absolute; - inset: 2px; - border-radius: 50%; - border: 1.5px solid rgba(255, 215, 0, 0.25); - box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.6); - pointer-events: none; -} - -.seal-glow { - position: absolute; - inset: -6px; - border-radius: 50%; - background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.sketched-wax-seal:hover .seal-glow { - opacity: 1; -} - -/* Open state: Flap opens, seal dissolves, letter slides out */ -.envelope-opened .sketched-wax-seal { - animation: breakSealAnim 0.7s forwards; - pointer-events: none; -} - -.envelope-opened .envelope-closing-flap.flap-top { - transform: rotateX(180deg); - z-index: 1; - filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4)); -} - -.envelope-opened .letter-sheet { - visibility: visible; - opacity: 1; - pointer-events: auto; - transform: translateY(-145px) 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); -} - -@keyframes breakSealAnim { - 0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; } - 50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); } - 100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); } -} - -/* Letter Content Styles */ -.letter-header { - margin-bottom: 8px; -} - -.letter-crest-box { - width: 48px; - height: 48px; - margin: 0 auto 4px; - border-radius: 50%; - overflow: hidden; - box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25); - 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: clamp(0.95rem, 2.8vw, 1.25rem); - color: #2c1a0c; - text-transform: uppercase; - letter-spacing: 1.2px; - font-weight: 700; - margin-bottom: 2px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); -} - -.letter-headmaster { - font-family: 'Caveat', 'Georgia', cursive; - font-size: 0.95rem; - color: #4a331c; - font-style: italic; - line-height: 1.25; - margin-bottom: 6px; -} - -.letter-headmaster span { - font-size: 0.82rem; - color: #6a4c28; -} - -.letter-ornament-line { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - color: #8c6838; - margin: 4px auto 8px; - max-width: 260px; -} - -.ornament-rule { - flex: 1; - height: 1px; - background: linear-gradient(to right, transparent, #8c6838, transparent); -} - -.ornament-leaf, .ornament-shield { - font-size: 0.85rem; -} - -/* Handwritten Body in Emerald Ink */ -.letter-body-handwritten { - font-family: 'Marck Script', 'Caveat', cursive; - color: #0f3d24; /* Authentic Hogwarts Emerald Ink */ - text-align: left; - padding: 0 4px; - line-height: 1.5; - text-shadow: 0 0 1px rgba(15, 61, 36, 0.25); -} - -.letter-salutation { - font-size: clamp(1.15rem, 3.5vw, 1.4rem); - font-weight: 700; - margin-bottom: 6px; - color: #0a301c; -} - -.letter-paragraph { - font-size: clamp(1.0rem, 2.9vw, 1.16rem); - margin-bottom: 8px; - text-indent: 1.2em; - line-height: 1.48; -} - -.letter-paragraph strong { - color: #052414; - font-weight: 700; -} - -/* Signature Block */ -.letter-signature-block { - margin-top: 10px; - text-align: right; - padding-right: 8px; - font-family: 'Marck Script', 'Caveat', cursive; - color: #0f3d24; -} - -.letter-closing { - font-size: 1.1rem; - font-style: italic; - color: #2b4533; - margin-bottom: 2px; -} - -.letter-signature-ink { - font-size: clamp(1.4rem, 4.2vw, 1.8rem); - font-weight: 700; - color: #082816; - letter-spacing: 0.5px; - transform: rotate(-2deg); - display: inline-block; - margin-bottom: 1px; - text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); -} - -.letter-sign-title { - font-size: 0.88rem; - color: #4a6352; - font-style: italic; -} - -/* Controls Below Parchment */ -.intro-controls-panel { - margin-top: 20px; - text-align: center; -} - -.intro-subnote { - font-size: 0.95rem; - color: var(--text-muted); - line-height: 1.5; - margin-bottom: 14px; - transition: all 0.3s ease; -} - -.intro-action-container { - margin-top: 14px; - display: flex; - justify-content: center; -} - -.letter-actions { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - width: 100%; -} - -.fade-in-action { - animation: fadeInActionAnim 0.5s ease forwards; -} - -@keyframes fadeInActionAnim { - 0% { opacity: 0; transform: translateY(12px); } - 100% { opacity: 1; transform: translateY(0); } -} - -.btn-break-seal { - font-size: 1.12rem; - padding: 14px 28px; - box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4); - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.btn-break-seal:hover { - transform: translateY(-2px) scale(1.02); - box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6); -} - -.btn-launch-quiz { - font-size: clamp(1.05rem, 3.4vw, 1.22rem); - padding: 14px 28px; - font-weight: 700; - letter-spacing: 0.5px; - border-radius: 10px; - cursor: pointer; - background: linear-gradient(135deg, #e6c564 0%, #c9a86a 50%, #8c6838 100%); - color: #1a0f05; - border: 1px solid #ffd700; - box-shadow: 0 6px 25px rgba(201, 168, 106, 0.5), 0 0 15px rgba(255, 215, 0, 0.35); - transition: all 0.3s ease; -} - -.btn-launch-quiz:hover { - transform: translateY(-2px) scale(1.02); - box-shadow: 0 10px 32px rgba(201, 168, 106, 0.75), 0 0 25px rgba(255, 215, 0, 0.6); -} - -.glow-pulse { - animation: glowPulseAnim 2.6s infinite alternate ease-in-out; -} - -@keyframes glowPulseAnim { - 0% { box-shadow: 0 6px 20px rgba(201, 168, 106, 0.45); } - 100% { box-shadow: 0 10px 32px rgba(201, 168, 106, 0.8), 0 0 25px rgba(255, 215, 0, 0.6); } -} - -.btn-close-letter { - font-size: 0.92rem; - color: var(--text-muted); - background: transparent; - border: 1px solid rgba(201, 168, 106, 0.25); - padding: 8px 18px; - border-radius: 6px; - cursor: pointer; - transition: all 0.2s ease; -} - -.btn-close-letter:hover { - color: var(--gold-bright); - border-color: var(--gold); - background: rgba(201, 168, 106, 0.1); -} - -@media (max-width: 480px) { - .antique-envelope-scene { - width: min(340px, 94vw); - height: min(215px, 60vw); - margin: 15px auto 25px; - } - .antique-envelope-scene.envelope-opened { - margin-top: 135px; - margin-bottom: 20px; - } - .sketched-wax-seal { - width: 62px; - height: 62px; - top: 50%; - } - .letter-sheet { - top: 10px; - left: 2%; - width: 96%; - height: 400px; - max-height: 72vh; - padding: 12px 14px; - } - .envelope-opened .letter-sheet { - transform: translateY(-120px) scale(1.01); - } - .letter-paragraph { - font-size: 0.96rem; - line-height: 1.42; - margin-bottom: 6px; - } - .envelope-flap.flap-bottom { - padding-bottom: 12px; - } - .btn-launch-quiz { - padding: 12px 20px; - font-size: 1.0rem; - } -} - -.difficulty-selection { - margin: 18px 0 22px; - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; -} - -.difficulty-label { - font-size: 0.95rem; - color: var(--gold-soft); - font-weight: 600; -} - -.difficulty-chips { - display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: center; -} - -.diff-chip { - background: rgba(255, 255, 255, 0.05); - border: 1px solid var(--border-gold); - color: var(--text-muted); - border-radius: 20px; - padding: 8px 16px; - font-size: 0.88rem; - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 6px; - transition: all 0.2s ease; - font-family: inherit; -} - -.diff-chip:hover { - border-color: var(--gold); - color: var(--text-main); - transform: translateY(-1px); - background: rgba(201, 168, 106, 0.12); -} - -.diff-chip.active { - background: rgba(201, 168, 106, 0.25); - border-color: var(--gold); - color: var(--gold-bright); - box-shadow: 0 0 10px rgba(201, 168, 106, 0.35); - font-weight: bold; -} - -/* ========================================= - BUTTONS - ========================================= */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 12px 22px; - border-radius: 8px; - font-size: 0.95rem; - font-weight: bold; - cursor: pointer; - text-decoration: none; - transition: all 0.2s ease; - border: none; - font-family: inherit; - min-height: 46px; - touch-action: manipulation; -} - -.btn-primary { - background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%); - color: #0c0d14; - box-shadow: 0 4px 15px rgba(201, 168, 106, 0.3); -} - -.btn-primary:hover:not(:disabled) { - background: linear-gradient(135deg, #ffd700 0%, var(--gold) 100%); - box-shadow: 0 6px 20px rgba(201, 168, 106, 0.5); - transform: translateY(-2px); -} - -.btn-secondary { - background: rgba(255, 255, 255, 0.08); - color: var(--gold-soft); - border: 1px solid var(--gold); -} - -.btn-secondary:hover:not(:disabled) { - background: rgba(201, 168, 106, 0.2); -} - -.btn-danger { - background: rgba(231, 76, 60, 0.2); - color: #ff7675; - border: 1px solid var(--danger); -} - -.btn-danger:hover:not(:disabled) { - background: var(--danger); - color: #fff; -} - -.btn-success { - background: rgba(46, 204, 113, 0.2); - color: #55efc4; - border: 1px solid var(--success); -} - -.btn-success:hover:not(:disabled) { - background: var(--success); - color: #000; -} - -.btn-large { - font-size: 1.05rem; - padding: 14px 28px; - min-height: 50px; -} - -.btn-sm { - font-size: 0.85rem; - padding: 8px 14px; - min-height: 38px; -} - -.btn-group { - display: flex; - gap: 10px; - justify-content: center; - margin-top: 18px; - width: 100%; -} - -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -/* ========================================= - STATUS & PROGRESS - ========================================= */ -.status-panel { - margin-bottom: 16px; - width: 100%; -} - -.progress-info { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; - font-size: clamp(0.8rem, 3vw, 0.95rem); -} - -.points-badge { - color: var(--gold-bright); - font-weight: bold; - text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); -} - -.progress-container { - width: 100%; - height: 10px; - background: rgba(255, 255, 255, 0.08); - border: 1px solid var(--border-gold); - border-radius: 8px; - overflow: hidden; -} - -.progress-bar { - height: 100%; - width: 0%; - background: linear-gradient(90deg, var(--gold) 0%, #ffd700 100%); - box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); - transition: width 0.35s ease; -} - -/* ========================================= - QUESTION CARD & ANSWERS - ========================================= */ -.question-card { - text-align: center; -} - -.question-meta { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 14px; - gap: 8px; -} - -.meta-left { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; -} - -.badge { - padding: 4px 10px; - border-radius: 12px; - font-size: 0.75rem; - font-weight: bold; - background: rgba(201, 168, 106, 0.15); - border: 1px solid var(--gold); - color: var(--gold-soft); - white-space: nowrap; -} - -.badge-diff { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.2); - color: var(--text-main); -} - -.badge-diff-easy { - background: rgba(46, 204, 113, 0.15); - border-color: #2ecc71; - color: #2ecc71; -} - -.badge-diff-medium { - background: rgba(243, 156, 18, 0.15); - border-color: #f39c12; - color: #f39c12; -} - -.badge-diff-hard { - background: rgba(231, 76, 60, 0.15); - border-color: #e74c3c; - color: #e74c3c; -} - -.badge-warning { - background: rgba(243, 156, 18, 0.2); - border-color: var(--warning); - color: #f39c12; -} - -.badge-success { - background: rgba(46, 204, 113, 0.2); - border-color: var(--success); - color: #2ecc71; -} - -.badge-danger { - background: rgba(231, 76, 60, 0.2); - border-color: var(--danger); - color: #e74c3c; -} - -.badge-muted { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); - color: var(--text-muted); -} - -.attempt-badge { - font-size: 0.8rem; - color: var(--text-muted); - white-space: nowrap; -} - -.timer-badge { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - background: rgba(243, 156, 18, 0.15); - border: 1px solid #f39c12; - color: #ffd700; - font-weight: 700; - letter-spacing: 0.5px; -} - -.question-text { - font-size: clamp(1.15rem, 4.5vw, 1.45rem); - line-height: 1.4; - text-align: center; - margin: 15px 0 20px; - color: var(--text-main); - word-break: break-word; -} - -/* Freitext Input */ -.answer-form { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; -} - -.input-answer { - width: 100%; - max-width: 450px; - padding: 14px; - font-size: 16px; /* Prevents iOS auto-zoom */ - text-align: center; - border-radius: 8px; - border: 2px solid var(--border-gold); - background: rgba(0, 0, 0, 0.35); - color: var(--text-main); - outline: none; - transition: all 0.2s ease; - font-family: inherit; - min-height: 48px; -} - -.input-answer:focus { - border-color: var(--gold); - box-shadow: 0 0 12px rgba(201, 168, 106, 0.4); -} - -/* Multiple Choice Grid */ -.choice-group { - width: 100%; - margin-top: 5px; -} - -.choice-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 12px; - width: 100%; -} - -.choice-btn { - background: rgba(255, 255, 255, 0.05); - border: 2px solid var(--border-gold); - border-radius: 10px; - padding: 12px 14px; - color: var(--text-main); - font-size: clamp(0.9rem, 3.5vw, 1.05rem); - font-family: inherit; - cursor: pointer; - text-align: left; - display: flex; - align-items: center; - gap: 10px; - transition: all 0.2s ease; - min-height: 52px; - width: 100%; - word-break: break-word; - touch-action: manipulation; -} - -.choice-btn:hover:not(:disabled) { - background: rgba(201, 168, 106, 0.2); - border-color: var(--gold); - transform: translateY(-2px); -} - -.choice-btn:active:not(:disabled) { - transform: scale(0.98); -} - -.choice-letter { - display: inline-flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - background: rgba(201, 168, 106, 0.2); - border: 1px solid var(--gold); - border-radius: 50%; - color: var(--gold-bright); - font-weight: bold; - font-size: 0.85rem; - flex-shrink: 0; -} - -.choice-text { - flex: 1; -} - -.choice-selected { - border-color: var(--gold-bright); - background: rgba(201, 168, 106, 0.3); -} - -.choice-correct { - background: rgba(46, 204, 113, 0.25) !important; - border-color: #2ecc71 !important; - color: #55efc4 !important; - box-shadow: 0 0 12px rgba(46, 204, 113, 0.6) !important; -} - -.choice-wrong { - background: rgba(231, 76, 60, 0.25) !important; - border-color: #e74c3c !important; - color: #ff7675 !important; - box-shadow: 0 0 12px rgba(231, 76, 60, 0.5) !important; -} - -.hint-box { - margin-top: 15px; - padding: 12px 14px; - border-radius: 8px; - background: rgba(201, 168, 106, 0.1); - border-left: 4px solid var(--gold); - font-size: 0.9rem; - color: var(--gold-soft); - text-align: left; - word-break: break-word; -} - -.feedback-box { - margin-top: 15px; - font-size: clamp(0.95rem, 3.5vw, 1.1rem); - text-align: center; - min-height: 28px; - font-weight: bold; - word-break: break-word; -} - -.feedback-correct { - color: var(--success); - text-shadow: 0 0 8px rgba(46, 204, 113, 0.4); -} - -.feedback-wrong { - color: var(--danger); -} - -.feedback-revealed { - color: var(--warning); - font-size: 0.9rem; - margin-top: 4px; -} - -/* ========================================= - ANIMATIONS - ========================================= */ -.sparkle-effect { - animation: sparkle-glow 0.8s ease forwards; -} - -@keyframes sparkle-glow { - 0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); } - 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(255, 215, 0, 0.4); border-color: #ffd700; } - 100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); } -} - -.shake-effect { - animation: shake 0.4s ease; -} - -@keyframes shake { - 0%, 100% { transform: translateX(0); } - 20%, 60% { transform: translateX(-6px); } - 40%, 80% { transform: translateX(6px); } -} - -/* ========================================= - FINALE PAGE - ========================================= */ -.finale-card { - text-align: center; -} - -.finale-header { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - margin-bottom: 15px; -} - -.sparkle-icon { - font-size: 1.5rem; -} - -.score-banner { - background: rgba(201, 168, 106, 0.1); - border: 1px dashed var(--gold); - border-radius: 8px; - padding: 14px; - margin-bottom: 20px; -} - -.score-highlight { - font-size: clamp(1rem, 4vw, 1.25rem); -} - -.gold-text { - color: var(--gold-bright); - font-weight: bold; - font-size: 1.35rem; -} - -.reward-box { - background: rgba(0, 0, 0, 0.3); - border-radius: 10px; - padding: 18px 14px; - margin-bottom: 20px; - border-left: 4px solid var(--gold); - text-align: left; -} - -.reward-box h2 { - color: var(--gold-soft); - font-size: clamp(1.1rem, 4vw, 1.35rem); - margin-bottom: 12px; -} - -.reward-description { - font-size: clamp(0.95rem, 3.5vw, 1.05rem); - line-height: 1.6; - margin-bottom: 12px; - color: var(--text-main); -} - -.love-note { - font-style: italic; - color: var(--gold); - font-size: 1rem; -} - -.time-highlight { - margin-top: 8px; - font-size: clamp(0.9rem, 3.2vw, 1.05rem); - color: var(--text-muted); -} - -/* Tiered evaluation styling */ -.tier-box { - position: relative; - border-radius: 14px; - padding: 24px 18px; - margin: 20px 0; - border: 2px solid var(--border-gold); - background: radial-gradient(circle at top, rgba(201, 168, 106, 0.12) 0%, rgba(15, 17, 30, 0.85) 100%); - text-align: center; -} - -.tier-badge-container { - display: flex; - justify-content: center; - margin-bottom: 14px; -} - -.tier-grade-badge { - display: inline-flex; - align-items: center; - justify-content: center; - width: 64px; - height: 64px; - border-radius: 50%; - font-size: 2rem; - font-weight: 900; - text-shadow: 0 2px 4px rgba(0,0,0,0.6); - box-shadow: 0 4px 15px rgba(0,0,0,0.5); - border: 3px solid; -} - -.tier-outstanding { - background: radial-gradient(circle, #ffd700, #b8860b); - color: #0b0b16; - border-color: #fff275; - box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); -} - -.tier-exceeds { - background: radial-gradient(circle, #2ecc71, #27ae60); - color: #0b0b16; - border-color: #a8f5cc; - box-shadow: 0 0 20px rgba(46, 204, 113, 0.5); -} - -.tier-acceptable { - background: radial-gradient(circle, #3498db, #2980b9); - color: #ffffff; - border-color: #a0d3f8; - box-shadow: 0 0 20px rgba(52, 152, 219, 0.5); -} - -.tier-poor { - background: radial-gradient(circle, #e67e22, #d35400); - color: #ffffff; - border-color: #f7b278; - box-shadow: 0 0 20px rgba(230, 126, 34, 0.5); -} - -.tier-troll { - background: radial-gradient(circle, #7f8c8d, #34495e); - color: #ff7675; - border-color: #e74c3c; - box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); -} - -.tier-subtitle { - font-style: italic; - color: var(--gold-soft); - margin-bottom: 12px; - font-size: 1rem; -} - -/* Leaderboard entry card & form on finale */ -.leaderboard-entry-card { - background: rgba(14, 16, 32, 0.85); - border: 1px dashed var(--gold); - padding: 20px; - margin-top: 20px; - text-align: center; -} - -.input-with-btn { - display: flex; - gap: 10px; - max-width: 480px; - margin: 0 auto; - width: 100%; -} - -.input-with-btn .input-text { - flex: 1; - text-align: left; -} - -.btn-dice { - background: rgba(201, 168, 106, 0.18); - border: 1px solid var(--gold); - color: var(--gold-bright); - padding: 0 14px; - border-radius: 8px; - cursor: pointer; - font-size: 0.95rem; - font-family: inherit; - font-weight: bold; - display: inline-flex; - align-items: center; - gap: 6px; - justify-content: center; - transition: all 0.2s ease; - min-height: 46px; - white-space: nowrap; -} - -.btn-dice:hover { - background: var(--gold); - color: #0b0b16; - box-shadow: 0 0 12px rgba(201, 168, 106, 0.5); - transform: translateY(-1px); -} - -/* Leaderboard tables & filters */ -.diff-filter-tabs { - display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: center; - margin: 15px 0; -} - -.diff-filter-tabs .tab-btn { - border-radius: 20px; - padding: 8px 16px; - font-size: 0.88rem; - background: rgba(255, 255, 255, 0.05); - border: 1px solid var(--border-gold); - color: var(--text-muted); -} - -.diff-filter-tabs .tab-btn.active { - background: rgba(201, 168, 106, 0.25); - border-color: var(--gold); - color: var(--gold-bright); - box-shadow: 0 0 10px rgba(201, 168, 106, 0.35); -} - -.table-responsive { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} - -.lb-table { - width: 100%; - border-collapse: collapse; - text-align: left; - font-size: 0.9rem; -} - -.lb-table th { - background: rgba(201, 168, 106, 0.12); - color: var(--gold-soft); - padding: 10px 12px; - border-bottom: 2px solid var(--border-gold); - white-space: nowrap; -} - -.lb-table td { - padding: 10px 12px; - border-bottom: 1px solid rgba(201, 168, 106, 0.15); - color: var(--text-main); -} - -.lb-table tr:hover td { - background: rgba(201, 168, 106, 0.05); -} - -.lb-rank { - font-weight: bold; - color: var(--gold); -} - -.lb-rank-1 { color: #ffd700; font-size: 1.1rem; } -.lb-rank-2 { color: #c0c0c0; font-size: 1.05rem; } -.lb-rank-3 { color: #cd7f32; font-size: 1.05rem; } - -/* ========================================= - FORMS & INPUTS - ========================================= */ -.magic-form { - display: flex; - flex-direction: column; - gap: 16px; - text-align: left; - width: 100%; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 6px; - width: 100%; -} - -.form-group label { - font-size: 0.9rem; - font-weight: bold; - color: var(--gold-soft); -} - -.input-text, .textarea, select.input-text { - padding: 12px 14px; - border-radius: 8px; - border: 1px solid var(--border-gold); - background: rgba(0, 0, 0, 0.4); - color: var(--text-main); - font-size: 16px; /* Prevents auto zoom */ - font-family: inherit; - outline: none; - width: 100%; - min-height: 46px; -} - -.input-text:focus, .textarea:focus { - border-color: var(--gold); - box-shadow: 0 0 8px rgba(201, 168, 106, 0.3); -} - -.input-text-sm { - padding: 8px 10px; - border-radius: 6px; - border: 1px solid var(--border-gold); - background: rgba(0,0,0,0.3); - color: var(--text-main); - font-size: 15px; - min-height: 38px; - width: 100%; -} - -.field-help { - font-size: 0.8rem; - color: var(--text-muted); -} - -.info-alert { - background: rgba(41, 128, 185, 0.15); - border-left: 4px solid #3498db; - padding: 14px; - border-radius: 8px; - margin-bottom: 20px; - font-size: 0.9rem; - line-height: 1.5; -} - -.alert-danger { - background: rgba(231, 76, 60, 0.2); - border: 1px solid var(--danger); - color: #ff7675; - padding: 12px; - border-radius: 6px; - margin-bottom: 16px; - text-align: center; - font-size: 0.9rem; -} - -/* ========================================= - ADMIN COCKPIT (Mobile Responsive) - ========================================= */ -.admin-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - flex-wrap: wrap; - gap: 12px; -} - -.admin-top-actions { - display: flex; - gap: 8px; -} - -/* Horizontal Scrollable Tabs on Mobile */ -.tabs-nav { - display: flex; - gap: 6px; - border-bottom: 1px solid var(--border-gold); - margin-bottom: 20px; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; /* Firefox */ - padding-bottom: 2px; -} - -.tabs-nav::-webkit-scrollbar { - display: none; /* Chrome/Safari */ -} - -.tab-btn { - background: rgba(255, 255, 255, 0.05); - border: none; - color: var(--text-muted); - padding: 10px 14px; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - cursor: pointer; - font-size: 0.85rem; - font-family: inherit; - font-weight: bold; - display: inline-flex; - align-items: center; - gap: 6px; - white-space: nowrap; - flex-shrink: 0; - min-height: 42px; - touch-action: manipulation; -} - -.tab-btn.active { - background: var(--bg-card); - color: var(--gold); - border: 1px solid var(--border-gold); - border-bottom: 1px solid transparent; -} - -.tab-content { - display: none; -} - -.tab-content.active { - display: block; -} - -.question-admin-card { - margin-bottom: 14px; - padding: 16px; -} - -.q-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 10px; - font-size: 0.8rem; - flex-wrap: wrap; - gap: 8px; -} - -.highlight-answer { - color: var(--gold-bright); - font-weight: bold; - background: rgba(255, 215, 0, 0.1); - padding: 2px 6px; - border-radius: 4px; - word-break: break-word; -} - -.test-matcher-box { - margin-top: 12px; - padding: 10px; - background: rgba(0, 0, 0, 0.25); - border-radius: 6px; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.test-input-group { - display: flex; - gap: 6px; - margin-top: 6px; -} - -.test-result-feedback { - margin-top: 8px; - font-size: 0.85rem; - word-break: break-word; -} - -.q-actions { - display: flex; - gap: 8px; - margin-top: 14px; - flex-wrap: wrap; -} - -.inline-edit-form { - margin-top: 14px; - padding-top: 14px; - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -.empty-state { - text-align: center; - padding: 30px 10px; - color: var(--text-muted); -} - -/* ========================================= - FOOTER - ========================================= */ -.footer { - text-align: center; - padding: 16px; - color: var(--text-muted); - font-size: 0.75rem; - border-top: 1px solid rgba(255, 255, 255, 0.05); - margin-top: auto; -} - -.footer-links { - margin-top: 12px; - display: flex; - justify-content: center; - align-items: center; - gap: 12px; - flex-wrap: wrap; -} - -.footer-link { - color: var(--gold-soft); - text-decoration: none; - font-size: 0.82rem; - font-weight: 600; - padding: 4px 12px; - border-radius: 16px; - background: rgba(201, 168, 106, 0.12); - border: 1px solid rgba(201, 168, 106, 0.35); - transition: all 0.2s ease; - display: inline-flex; - align-items: center; - gap: 5px; -} - -.footer-link:hover { - color: #0b0b16; - background: var(--gold); - border-color: var(--gold-bright); - box-shadow: 0 0 12px rgba(201, 168, 106, 0.5); - text-decoration: none; - transform: translateY(-1px); -} - -.footer-sep { - display: none; -} - -.legal-card { - text-align: left; - max-width: 760px; - margin: 0 auto; -} - -.legal-content { - margin-top: 20px; - line-height: 1.65; - color: var(--text-main); -} - -.legal-content h3 { - color: var(--gold-soft); - margin-top: 22px; - margin-bottom: 8px; - font-size: 1.15rem; - border-bottom: 1px solid rgba(201, 168, 106, 0.2); - padding-bottom: 4px; -} - -.legal-content p, .legal-content ul { - margin-bottom: 14px; - color: var(--text-muted); - font-size: 0.95rem; -} - -.legal-content ul { - padding-left: 20px; -} - -.legal-content code { - background: rgba(0, 0, 0, 0.35); - padding: 2px 6px; - border-radius: 4px; - color: var(--gold-bright); - font-size: 0.88em; -} - -.hidden { - display: none !important; -} - -/* ========================================= - MOBILE RESPONSIVENESS (max-width: 640px) - ========================================= */ -@media (max-width: 640px) { - .container { - margin: 10px auto 25px; - padding: 0 10px; - } - - .admin-wrapper { - margin: 10px auto 25px; - padding: 0 10px; - } - - .card { - padding: 16px 12px; - border-radius: 12px; - } - - /* Mobile Hamburger Menu */ - .menu-toggle-btn { - display: inline-flex; - } - - .nav-links { - display: none; - position: absolute; - top: var(--header-height); - left: 0; - right: 0; - background: rgba(11, 11, 22, 0.98); - border-bottom: 2px solid var(--gold); - flex-direction: column; - padding: 14px 16px; - gap: 8px; - box-shadow: 0 15px 30px rgba(0,0,0,0.8); - } - - .nav-links.nav-open { - display: flex; - } - - .nav-link { - width: 100%; - padding: 12px 14px; - font-size: 1rem; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(201, 168, 106, 0.2); - } - - .audio-label { - display: none; /* Show only 🔇/🔊 on small phones */ - } - - .audio-btn { - padding: 6px 10px; - } - - /* Quiz Question layout */ - .choice-grid { - grid-template-columns: 1fr; /* Single column on mobile */ - gap: 10px; - } - - .choice-btn { - min-height: 48px; - padding: 10px 12px; - font-size: 0.95rem; - } - - .btn-group { - flex-direction: column; - } - - .btn-group .btn { - width: 100%; - } - - .test-input-group { - flex-direction: column; - } - - .test-input-group .btn { - width: 100%; - } - - .q-actions .btn { - flex: 1 1 100%; - } - - .admin-header { - flex-direction: column; - align-items: stretch; - text-align: center; - } - - .admin-top-actions { - justify-content: center; - } - - .lang-btn { - padding: 4px 6px; - font-size: 0.75rem; - } - - .diff-chip { - padding: 6px 10px; - font-size: 0.8rem; - } -} +:root { + --bg-dark: #0b0b16; + --bg-card: rgba(20, 22, 40, 0.9); + --bg-card-hover: rgba(28, 31, 56, 0.95); + --gold: #c9a86a; + --gold-bright: #ffd700; + --gold-soft: #e6c98f; + --text-main: #f5f5f7; + --text-muted: #b8b8cc; + --parchment: #f6eedb; + --wax-red: #8b0000; + --success: #2ecc71; + --danger: #e74c3c; + --warning: #f39c12; + --border-gold: rgba(201, 168, 106, 0.35); + --header-height: 56px; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + -webkit-tap-highlight-color: transparent; +} + +body { + background-color: var(--bg-dark); + background-image: + radial-gradient(circle at 15% 15%, rgba(201, 168, 106, 0.08) 0%, transparent 45%), + radial-gradient(circle at 85% 85%, rgba(116, 0, 1, 0.08) 0%, transparent 50%); + color: var(--text-main); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Georgia", "Times New Roman", serif; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; + line-height: 1.5; +} + +/* ========================================= + HEADER & NAVIGATION (Mobile-First) + ========================================= */ +.site-header { + background: rgba(11, 11, 22, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border-gold); + position: sticky; + top: 0; + z-index: 200; + width: 100%; +} + +.header-inner { + max-width: 900px; + margin: 0 auto; + padding: 0 16px; + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; + position: relative; +} + +.brand-link { + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; + color: var(--gold); + font-weight: bold; + font-size: 1.15rem; + letter-spacing: 0.5px; +} + +.brand-sparkle { + font-size: 1.25rem; +} + +.header-right { + display: flex; + align-items: center; + gap: 10px; +} + +.lang-switch-group { + display: inline-flex; + background: rgba(20, 22, 40, 0.85); + border: 1px solid var(--border-gold); + border-radius: 20px; + padding: 2px; + overflow: hidden; +} + +.lang-btn { + background: transparent; + border: none; + color: var(--text-muted); + font-size: 0.8rem; + font-weight: 600; + padding: 4px 9px; + border-radius: 16px; + cursor: pointer; + transition: all 0.2s ease; + min-height: 28px; + display: flex; + align-items: center; + gap: 4px; +} + +.lang-btn:hover { + color: var(--gold); +} + +.lang-btn.active { + background: var(--gold); + color: #0b0b16; + box-shadow: 0 0 8px rgba(201, 168, 106, 0.4); +} + +.audio-btn { + background: rgba(201, 168, 106, 0.15); + border: 1px solid var(--gold); + color: var(--gold-soft); + padding: 6px 12px; + border-radius: 20px; + cursor: pointer; + font-size: 0.85rem; + display: inline-flex; + align-items: center; + gap: 6px; + transition: all 0.2s ease; + min-height: 36px; +} + +.audio-btn:hover { + background: var(--gold); + color: #000; +} + +.menu-toggle-btn { + display: none; + background: transparent; + border: 1px solid var(--border-gold); + color: var(--gold); + font-size: 1.3rem; + width: 38px; + height: 38px; + border-radius: 8px; + cursor: pointer; + align-items: center; + justify-content: center; +} + +.nav-links { + display: flex; + gap: 18px; + align-items: center; +} + +.nav-link { + color: var(--text-muted); + text-decoration: none; + font-size: 0.9rem; + padding: 8px 12px; + border-radius: 6px; + transition: all 0.2s ease; + white-space: nowrap; +} + +.nav-link:hover { + color: var(--gold-bright); + background: rgba(201, 168, 106, 0.1); +} + +/* ========================================= + CONTAINER & LAYOUT + ========================================= */ +.container { + flex: 1; + max-width: 760px; + width: 100%; + margin: 20px auto; + padding: 0 16px; +} + +.admin-wrapper { + max-width: 900px; + width: 100%; + margin: 20px auto; + padding: 0 16px; +} + +.quiz-wrapper { + width: 100%; +} + +.quiz-header { + text-align: center; + margin-bottom: 20px; +} + +.glow-title { + color: var(--gold); + font-size: clamp(1.35rem, 5vw, 2.1rem); + letter-spacing: 0.5px; + text-shadow: 0 0 14px rgba(201, 168, 106, 0.4); + margin-bottom: 6px; + word-break: break-word; +} + +.subtitle { + color: var(--text-muted); + font-size: clamp(0.85rem, 3vw, 1rem); + font-style: italic; + margin-bottom: 15px; +} + +/* ========================================= + CARD COMPONENT + ========================================= */ +.card { + background: var(--bg-card); + border: 1px solid var(--border-gold); + border-radius: 14px; + padding: clamp(16px, 4vw, 28px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + margin-bottom: 20px; + width: 100%; +} + +/* ========================================= + ANTIQUE HOGWARTS CLOSED ENVELOPE & LETTER REVEAL + ========================================= */ +.intro-parchment-wrapper { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + max-width: 600px; + margin: 0 auto; +} + +.antique-envelope-scene { + position: relative; + width: min(480px, 94vw); + height: min(280px, 60vw); + margin: 25px auto 35px; + 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); + transition: transform 0.6s ease; +} + +/* Interior of envelope (visible when flap opens and letter rises) */ +.envelope-interior { + position: absolute; + inset: 0; + border-radius: 6px; + background-color: #d1be9b; + background-image: + radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + border: 2px solid #7a5c36; + z-index: 1; +} + +/* The Letter inside the envelope (slides up when opened) */ +.letter-sheet { + position: absolute; + top: 15px; + left: 4%; + width: 92%; + height: 440px; + max-height: 75vh; + background-color: #f7f0df; + background-image: + radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + background-position: center; + 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; + /* In closed state: 100% completely hidden, invisible, non-rendered */ + 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, + box-shadow 0.8s ease; + overflow-y: auto; + text-align: center; + outline: 1px dashed rgba(130, 95, 55, 0.45); + outline-offset: -5px; + scrollbar-width: thin; + scrollbar-color: #8c6838 transparent; +} + +.letter-sheet::-webkit-scrollbar { + width: 6px; +} + +.letter-sheet::-webkit-scrollbar-thumb { + background-color: #8c6838; + border-radius: 4px; +} + +/* ========================================= + ENVELOPE BACK WITH V-FLAP CLOSURE + - Solid back body + - Sender address in top-left + - Prominent triangular V-flap + - Sketched wax seal at apex + ========================================= */ + +/* Solid Envelope Back Body */ +.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%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + border: 1.5px solid #8e6c43; + z-index: 3; + overflow: hidden; +} + +/* Absender oben links auf der Rückseite (sonst kein Text) */ +.envelope-sender-block { + position: absolute; + top: 14px; + left: 16px; + z-index: 8; + text-align: left; + font-family: 'Marck Script', 'Caveat', cursive; + color: #0d3820; /* Authentic Hogwarts Emerald Ink */ + max-width: 48%; + line-height: 1.25; + pointer-events: none; + transition: opacity 0.4s ease; +} + +.envelope-opened .envelope-sender-block { + opacity: 0; +} + +.sender-label { + display: block; + font-size: clamp(0.72rem, 2.2vw, 0.85rem); + font-family: 'MedievalSharp', serif; + color: #4a6352; + text-transform: uppercase; + letter-spacing: 0.8px; + margin-bottom: 2px; +} + +.sender-name { + font-size: clamp(0.92rem, 2.9vw, 1.15rem); + font-weight: 700; + color: #082816; + margin-bottom: 1px; + text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); +} + +.sender-location { + font-size: clamp(0.78rem, 2.4vw, 0.95rem); + font-style: italic; + color: #1e4530; +} + +/* Distinct Triangular V-Closure Flap */ +.envelope-closing-flap.envelope-v-flap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #dfcd9b; + background-image: + radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(125, 90, 40, 0.28) 100%), + url('/static/img/parchment_texture.jpg'); + background-size: cover; + 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; + filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4)); +} + +.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 placed right at the tip of the V-flap */ +.sketched-wax-seal { + position: absolute; + top: 56%; + left: 50%; + transform: translate(-50%, -50%) rotate(-3deg); + width: 74px; + height: 74px; + border-radius: 50%; + cursor: pointer; + z-index: 7; + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease; + box-shadow: + 0 8px 22px rgba(0, 0, 0, 0.75), + 0 2px 6px rgba(0, 0, 0, 0.45); +} + +.sketched-wax-seal:hover { + transform: translate(-50%, -50%) rotate(0deg) scale(1.1); + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.8), + 0 0 16px rgba(218, 165, 32, 0.45); +} + +.seal-crest-img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + display: block; + border: 3px solid #4a0d0d; + box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7); +} + +.seal-emboss-ring { + position: absolute; + inset: 2px; + border-radius: 50%; + border: 1.5px solid rgba(255, 215, 0, 0.25); + box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.6); + pointer-events: none; +} + +.seal-glow { + position: absolute; + inset: -6px; + border-radius: 50%; + background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.sketched-wax-seal:hover .seal-glow { + opacity: 1; +} + +/* Open state: Flap opens, seal dissolves, letter slides out */ +.envelope-opened .sketched-wax-seal { + animation: breakSealAnim 0.7s forwards; + pointer-events: none; +} + +.envelope-opened .envelope-closing-flap.flap-top { + transform: rotateX(180deg); + z-index: 1; + filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4)); +} + +.envelope-opened .letter-sheet { + visibility: visible; + opacity: 1; + pointer-events: auto; + transform: translateY(-145px) 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); +} + +@keyframes breakSealAnim { + 0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; } + 50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); } + 100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); } +} + +/* Letter Content Styles */ +.letter-header { + margin-bottom: 8px; +} + +.letter-crest-box { + width: 48px; + height: 48px; + margin: 0 auto 4px; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25); + 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: clamp(0.95rem, 2.8vw, 1.25rem); + color: #2c1a0c; + text-transform: uppercase; + letter-spacing: 1.2px; + font-weight: 700; + margin-bottom: 2px; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); +} + +.letter-headmaster { + font-family: 'Caveat', 'Georgia', cursive; + font-size: 0.95rem; + color: #4a331c; + font-style: italic; + line-height: 1.25; + margin-bottom: 6px; +} + +.letter-headmaster span { + font-size: 0.82rem; + color: #6a4c28; +} + +.letter-ornament-line { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + color: #8c6838; + margin: 4px auto 8px; + max-width: 260px; +} + +.ornament-rule { + flex: 1; + height: 1px; + background: linear-gradient(to right, transparent, #8c6838, transparent); +} + +.ornament-leaf, .ornament-shield { + font-size: 0.85rem; +} + +/* Handwritten Body in Emerald Ink */ +.letter-body-handwritten { + font-family: 'Marck Script', 'Caveat', cursive; + color: #0f3d24; /* Authentic Hogwarts Emerald Ink */ + text-align: left; + padding: 0 4px; + line-height: 1.5; + text-shadow: 0 0 1px rgba(15, 61, 36, 0.25); +} + +.letter-salutation { + font-size: clamp(1.15rem, 3.5vw, 1.4rem); + font-weight: 700; + margin-bottom: 6px; + color: #0a301c; +} + +.letter-paragraph { + font-size: clamp(1.0rem, 2.9vw, 1.16rem); + margin-bottom: 8px; + text-indent: 1.2em; + line-height: 1.48; +} + +.letter-paragraph strong { + color: #052414; + font-weight: 700; +} + +/* Signature Block */ +.letter-signature-block { + margin-top: 10px; + text-align: right; + padding-right: 8px; + font-family: 'Marck Script', 'Caveat', cursive; + color: #0f3d24; +} + +.letter-closing { + font-size: 1.1rem; + font-style: italic; + color: #2b4533; + margin-bottom: 2px; +} + +.letter-signature-ink { + font-size: clamp(1.4rem, 4.2vw, 1.8rem); + font-weight: 700; + color: #082816; + letter-spacing: 0.5px; + transform: rotate(-2deg); + display: inline-block; + margin-bottom: 1px; + text-shadow: 0 0 1px rgba(8, 40, 22, 0.35); +} + +.letter-sign-title { + font-size: 0.88rem; + color: #4a6352; + font-style: italic; +} + +/* Controls Below Parchment */ +.intro-controls-panel { + margin-top: 20px; + text-align: center; +} + +.intro-subnote { + font-size: 0.95rem; + color: var(--text-muted); + line-height: 1.5; + margin-bottom: 14px; + transition: all 0.3s ease; +} + +.intro-action-container { + margin-top: 14px; + display: flex; + justify-content: center; +} + +.letter-actions { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + width: 100%; +} + +.fade-in-action { + animation: fadeInActionAnim 0.5s ease forwards; +} + +@keyframes fadeInActionAnim { + 0% { opacity: 0; transform: translateY(12px); } + 100% { opacity: 1; transform: translateY(0); } +} + +.btn-break-seal { + font-size: 1.12rem; + padding: 14px 28px; + box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4); + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.btn-break-seal:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6); +} + +.btn-launch-quiz { + font-size: clamp(1.05rem, 3.4vw, 1.22rem); + padding: 14px 28px; + font-weight: 700; + letter-spacing: 0.5px; + border-radius: 10px; + cursor: pointer; + background: linear-gradient(135deg, #e6c564 0%, #c9a86a 50%, #8c6838 100%); + color: #1a0f05; + border: 1px solid #ffd700; + box-shadow: 0 6px 25px rgba(201, 168, 106, 0.5), 0 0 15px rgba(255, 215, 0, 0.35); + transition: all 0.3s ease; +} + +.btn-launch-quiz:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: 0 10px 32px rgba(201, 168, 106, 0.75), 0 0 25px rgba(255, 215, 0, 0.6); +} + +.glow-pulse { + animation: glowPulseAnim 2.6s infinite alternate ease-in-out; +} + +@keyframes glowPulseAnim { + 0% { box-shadow: 0 6px 20px rgba(201, 168, 106, 0.45); } + 100% { box-shadow: 0 10px 32px rgba(201, 168, 106, 0.8), 0 0 25px rgba(255, 215, 0, 0.6); } +} + +.btn-close-letter { + font-size: 0.92rem; + color: var(--text-muted); + background: transparent; + border: 1px solid rgba(201, 168, 106, 0.25); + padding: 8px 18px; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn-close-letter:hover { + color: var(--gold-bright); + border-color: var(--gold); + background: rgba(201, 168, 106, 0.1); +} + +@media (max-width: 480px) { + .antique-envelope-scene { + width: min(340px, 94vw); + height: min(215px, 60vw); + margin: 15px auto 25px; + } + .antique-envelope-scene.envelope-opened { + margin-top: 135px; + margin-bottom: 20px; + } + .sketched-wax-seal { + width: 62px; + height: 62px; + top: 56%; + } + .envelope-sender-block { + top: 10px; + left: 12px; + max-width: 55%; + } + .letter-sheet { + top: 10px; + left: 2%; + width: 96%; + height: 400px; + max-height: 72vh; + padding: 12px 14px; + } + .envelope-opened .letter-sheet { + transform: translateY(-120px) scale(1.01); + } + .letter-paragraph { + font-size: 0.96rem; + line-height: 1.42; + margin-bottom: 6px; + } + .btn-launch-quiz { + padding: 12px 20px; + font-size: 1.0rem; + } +} + +.difficulty-selection { + margin: 18px 0 22px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.difficulty-label { + font-size: 0.95rem; + color: var(--gold-soft); + font-weight: 600; +} + +.difficulty-chips { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.diff-chip { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-gold); + color: var(--text-muted); + border-radius: 20px; + padding: 8px 16px; + font-size: 0.88rem; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + transition: all 0.2s ease; + font-family: inherit; +} + +.diff-chip:hover { + border-color: var(--gold); + color: var(--text-main); + transform: translateY(-1px); + background: rgba(201, 168, 106, 0.12); +} + +.diff-chip.active { + background: rgba(201, 168, 106, 0.25); + border-color: var(--gold); + color: var(--gold-bright); + box-shadow: 0 0 10px rgba(201, 168, 106, 0.35); + font-weight: bold; +} + +/* ========================================= + BUTTONS + ========================================= */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 22px; + border-radius: 8px; + font-size: 0.95rem; + font-weight: bold; + cursor: pointer; + text-decoration: none; + transition: all 0.2s ease; + border: none; + font-family: inherit; + min-height: 46px; + touch-action: manipulation; +} + +.btn-primary { + background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%); + color: #0c0d14; + box-shadow: 0 4px 15px rgba(201, 168, 106, 0.3); +} + +.btn-primary:hover:not(:disabled) { + background: linear-gradient(135deg, #ffd700 0%, var(--gold) 100%); + box-shadow: 0 6px 20px rgba(201, 168, 106, 0.5); + transform: translateY(-2px); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.08); + color: var(--gold-soft); + border: 1px solid var(--gold); +} + +.btn-secondary:hover:not(:disabled) { + background: rgba(201, 168, 106, 0.2); +} + +.btn-danger { + background: rgba(231, 76, 60, 0.2); + color: #ff7675; + border: 1px solid var(--danger); +} + +.btn-danger:hover:not(:disabled) { + background: var(--danger); + color: #fff; +} + +.btn-success { + background: rgba(46, 204, 113, 0.2); + color: #55efc4; + border: 1px solid var(--success); +} + +.btn-success:hover:not(:disabled) { + background: var(--success); + color: #000; +} + +.btn-large { + font-size: 1.05rem; + padding: 14px 28px; + min-height: 50px; +} + +.btn-sm { + font-size: 0.85rem; + padding: 8px 14px; + min-height: 38px; +} + +.btn-group { + display: flex; + gap: 10px; + justify-content: center; + margin-top: 18px; + width: 100%; +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} + +/* ========================================= + STATUS & PROGRESS + ========================================= */ +.status-panel { + margin-bottom: 16px; + width: 100%; +} + +.progress-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + font-size: clamp(0.8rem, 3vw, 0.95rem); +} + +.points-badge { + color: var(--gold-bright); + font-weight: bold; + text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); +} + +.progress-container { + width: 100%; + height: 10px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid var(--border-gold); + border-radius: 8px; + overflow: hidden; +} + +.progress-bar { + height: 100%; + width: 0%; + background: linear-gradient(90deg, var(--gold) 0%, #ffd700 100%); + box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); + transition: width 0.35s ease; +} + +/* ========================================= + QUESTION CARD & ANSWERS + ========================================= */ +.question-card { + text-align: center; +} + +.question-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 14px; + gap: 8px; +} + +.meta-left { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.badge { + padding: 4px 10px; + border-radius: 12px; + font-size: 0.75rem; + font-weight: bold; + background: rgba(201, 168, 106, 0.15); + border: 1px solid var(--gold); + color: var(--gold-soft); + white-space: nowrap; +} + +.badge-diff { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--text-main); +} + +.badge-diff-easy { + background: rgba(46, 204, 113, 0.15); + border-color: #2ecc71; + color: #2ecc71; +} + +.badge-diff-medium { + background: rgba(243, 156, 18, 0.15); + border-color: #f39c12; + color: #f39c12; +} + +.badge-diff-hard { + background: rgba(231, 76, 60, 0.15); + border-color: #e74c3c; + color: #e74c3c; +} + +.badge-warning { + background: rgba(243, 156, 18, 0.2); + border-color: var(--warning); + color: #f39c12; +} + +.badge-success { + background: rgba(46, 204, 113, 0.2); + border-color: var(--success); + color: #2ecc71; +} + +.badge-danger { + background: rgba(231, 76, 60, 0.2); + border-color: var(--danger); + color: #e74c3c; +} + +.badge-muted { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + color: var(--text-muted); +} + +.attempt-badge { + font-size: 0.8rem; + color: var(--text-muted); + white-space: nowrap; +} + +.timer-badge { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + background: rgba(243, 156, 18, 0.15); + border: 1px solid #f39c12; + color: #ffd700; + font-weight: 700; + letter-spacing: 0.5px; +} + +.question-text { + font-size: clamp(1.15rem, 4.5vw, 1.45rem); + line-height: 1.4; + text-align: center; + margin: 15px 0 20px; + color: var(--text-main); + word-break: break-word; +} + +/* Freitext Input */ +.answer-form { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.input-answer { + width: 100%; + max-width: 450px; + padding: 14px; + font-size: 16px; /* Prevents iOS auto-zoom */ + text-align: center; + border-radius: 8px; + border: 2px solid var(--border-gold); + background: rgba(0, 0, 0, 0.35); + color: var(--text-main); + outline: none; + transition: all 0.2s ease; + font-family: inherit; + min-height: 48px; +} + +.input-answer:focus { + border-color: var(--gold); + box-shadow: 0 0 12px rgba(201, 168, 106, 0.4); +} + +/* Multiple Choice Grid */ +.choice-group { + width: 100%; + margin-top: 5px; +} + +.choice-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + width: 100%; +} + +.choice-btn { + background: rgba(255, 255, 255, 0.05); + border: 2px solid var(--border-gold); + border-radius: 10px; + padding: 12px 14px; + color: var(--text-main); + font-size: clamp(0.9rem, 3.5vw, 1.05rem); + font-family: inherit; + cursor: pointer; + text-align: left; + display: flex; + align-items: center; + gap: 10px; + transition: all 0.2s ease; + min-height: 52px; + width: 100%; + word-break: break-word; + touch-action: manipulation; +} + +.choice-btn:hover:not(:disabled) { + background: rgba(201, 168, 106, 0.2); + border-color: var(--gold); + transform: translateY(-2px); +} + +.choice-btn:active:not(:disabled) { + transform: scale(0.98); +} + +.choice-letter { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: rgba(201, 168, 106, 0.2); + border: 1px solid var(--gold); + border-radius: 50%; + color: var(--gold-bright); + font-weight: bold; + font-size: 0.85rem; + flex-shrink: 0; +} + +.choice-text { + flex: 1; +} + +.choice-selected { + border-color: var(--gold-bright); + background: rgba(201, 168, 106, 0.3); +} + +.choice-correct { + background: rgba(46, 204, 113, 0.25) !important; + border-color: #2ecc71 !important; + color: #55efc4 !important; + box-shadow: 0 0 12px rgba(46, 204, 113, 0.6) !important; +} + +.choice-wrong { + background: rgba(231, 76, 60, 0.25) !important; + border-color: #e74c3c !important; + color: #ff7675 !important; + box-shadow: 0 0 12px rgba(231, 76, 60, 0.5) !important; +} + +.hint-box { + margin-top: 15px; + padding: 12px 14px; + border-radius: 8px; + background: rgba(201, 168, 106, 0.1); + border-left: 4px solid var(--gold); + font-size: 0.9rem; + color: var(--gold-soft); + text-align: left; + word-break: break-word; +} + +.feedback-box { + margin-top: 15px; + font-size: clamp(0.95rem, 3.5vw, 1.1rem); + text-align: center; + min-height: 28px; + font-weight: bold; + word-break: break-word; +} + +.feedback-correct { + color: var(--success); + text-shadow: 0 0 8px rgba(46, 204, 113, 0.4); +} + +.feedback-wrong { + color: var(--danger); +} + +.feedback-revealed { + color: var(--warning); + font-size: 0.9rem; + margin-top: 4px; +} + +/* ========================================= + ANIMATIONS + ========================================= */ +.sparkle-effect { + animation: sparkle-glow 0.8s ease forwards; +} + +@keyframes sparkle-glow { + 0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); } + 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(255, 215, 0, 0.4); border-color: #ffd700; } + 100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); } +} + +.shake-effect { + animation: shake 0.4s ease; +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 20%, 60% { transform: translateX(-6px); } + 40%, 80% { transform: translateX(6px); } +} + +/* ========================================= + FINALE PAGE + ========================================= */ +.finale-card { + text-align: center; +} + +.finale-header { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + margin-bottom: 15px; +} + +.sparkle-icon { + font-size: 1.5rem; +} + +.score-banner { + background: rgba(201, 168, 106, 0.1); + border: 1px dashed var(--gold); + border-radius: 8px; + padding: 14px; + margin-bottom: 20px; +} + +.score-highlight { + font-size: clamp(1rem, 4vw, 1.25rem); +} + +.gold-text { + color: var(--gold-bright); + font-weight: bold; + font-size: 1.35rem; +} + +.reward-box { + background: rgba(0, 0, 0, 0.3); + border-radius: 10px; + padding: 18px 14px; + margin-bottom: 20px; + border-left: 4px solid var(--gold); + text-align: left; +} + +.reward-box h2 { + color: var(--gold-soft); + font-size: clamp(1.1rem, 4vw, 1.35rem); + margin-bottom: 12px; +} + +.reward-description { + font-size: clamp(0.95rem, 3.5vw, 1.05rem); + line-height: 1.6; + margin-bottom: 12px; + color: var(--text-main); +} + +.love-note { + font-style: italic; + color: var(--gold); + font-size: 1rem; +} + +.time-highlight { + margin-top: 8px; + font-size: clamp(0.9rem, 3.2vw, 1.05rem); + color: var(--text-muted); +} + +/* Tiered evaluation styling */ +.tier-box { + position: relative; + border-radius: 14px; + padding: 24px 18px; + margin: 20px 0; + border: 2px solid var(--border-gold); + background: radial-gradient(circle at top, rgba(201, 168, 106, 0.12) 0%, rgba(15, 17, 30, 0.85) 100%); + text-align: center; +} + +.tier-badge-container { + display: flex; + justify-content: center; + margin-bottom: 14px; +} + +.tier-grade-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 50%; + font-size: 2rem; + font-weight: 900; + text-shadow: 0 2px 4px rgba(0,0,0,0.6); + box-shadow: 0 4px 15px rgba(0,0,0,0.5); + border: 3px solid; +} + +.tier-outstanding { + background: radial-gradient(circle, #ffd700, #b8860b); + color: #0b0b16; + border-color: #fff275; + box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); +} + +.tier-exceeds { + background: radial-gradient(circle, #2ecc71, #27ae60); + color: #0b0b16; + border-color: #a8f5cc; + box-shadow: 0 0 20px rgba(46, 204, 113, 0.5); +} + +.tier-acceptable { + background: radial-gradient(circle, #3498db, #2980b9); + color: #ffffff; + border-color: #a0d3f8; + box-shadow: 0 0 20px rgba(52, 152, 219, 0.5); +} + +.tier-poor { + background: radial-gradient(circle, #e67e22, #d35400); + color: #ffffff; + border-color: #f7b278; + box-shadow: 0 0 20px rgba(230, 126, 34, 0.5); +} + +.tier-troll { + background: radial-gradient(circle, #7f8c8d, #34495e); + color: #ff7675; + border-color: #e74c3c; + box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); +} + +.tier-subtitle { + font-style: italic; + color: var(--gold-soft); + margin-bottom: 12px; + font-size: 1rem; +} + +/* Leaderboard entry card & form on finale */ +.leaderboard-entry-card { + background: rgba(14, 16, 32, 0.85); + border: 1px dashed var(--gold); + padding: 20px; + margin-top: 20px; + text-align: center; +} + +.input-with-btn { + display: flex; + gap: 10px; + max-width: 480px; + margin: 0 auto; + width: 100%; +} + +.input-with-btn .input-text { + flex: 1; + text-align: left; +} + +.btn-dice { + background: rgba(201, 168, 106, 0.18); + border: 1px solid var(--gold); + color: var(--gold-bright); + padding: 0 14px; + border-radius: 8px; + cursor: pointer; + font-size: 0.95rem; + font-family: inherit; + font-weight: bold; + display: inline-flex; + align-items: center; + gap: 6px; + justify-content: center; + transition: all 0.2s ease; + min-height: 46px; + white-space: nowrap; +} + +.btn-dice:hover { + background: var(--gold); + color: #0b0b16; + box-shadow: 0 0 12px rgba(201, 168, 106, 0.5); + transform: translateY(-1px); +} + +/* Leaderboard tables & filters */ +.diff-filter-tabs { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + margin: 15px 0; +} + +.diff-filter-tabs .tab-btn { + border-radius: 20px; + padding: 8px 16px; + font-size: 0.88rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-gold); + color: var(--text-muted); +} + +.diff-filter-tabs .tab-btn.active { + background: rgba(201, 168, 106, 0.25); + border-color: var(--gold); + color: var(--gold-bright); + box-shadow: 0 0 10px rgba(201, 168, 106, 0.35); +} + +.table-responsive { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.lb-table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 0.9rem; +} + +.lb-table th { + background: rgba(201, 168, 106, 0.12); + color: var(--gold-soft); + padding: 10px 12px; + border-bottom: 2px solid var(--border-gold); + white-space: nowrap; +} + +.lb-table td { + padding: 10px 12px; + border-bottom: 1px solid rgba(201, 168, 106, 0.15); + color: var(--text-main); +} + +.lb-table tr:hover td { + background: rgba(201, 168, 106, 0.05); +} + +.lb-rank { + font-weight: bold; + color: var(--gold); +} + +.lb-rank-1 { color: #ffd700; font-size: 1.1rem; } +.lb-rank-2 { color: #c0c0c0; font-size: 1.05rem; } +.lb-rank-3 { color: #cd7f32; font-size: 1.05rem; } + +/* ========================================= + FORMS & INPUTS + ========================================= */ +.magic-form { + display: flex; + flex-direction: column; + gap: 16px; + text-align: left; + width: 100%; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; +} + +.form-group label { + font-size: 0.9rem; + font-weight: bold; + color: var(--gold-soft); +} + +.input-text, .textarea, select.input-text { + padding: 12px 14px; + border-radius: 8px; + border: 1px solid var(--border-gold); + background: rgba(0, 0, 0, 0.4); + color: var(--text-main); + font-size: 16px; /* Prevents auto zoom */ + font-family: inherit; + outline: none; + width: 100%; + min-height: 46px; +} + +.input-text:focus, .textarea:focus { + border-color: var(--gold); + box-shadow: 0 0 8px rgba(201, 168, 106, 0.3); +} + +.input-text-sm { + padding: 8px 10px; + border-radius: 6px; + border: 1px solid var(--border-gold); + background: rgba(0,0,0,0.3); + color: var(--text-main); + font-size: 15px; + min-height: 38px; + width: 100%; +} + +.field-help { + font-size: 0.8rem; + color: var(--text-muted); +} + +.info-alert { + background: rgba(41, 128, 185, 0.15); + border-left: 4px solid #3498db; + padding: 14px; + border-radius: 8px; + margin-bottom: 20px; + font-size: 0.9rem; + line-height: 1.5; +} + +.alert-danger { + background: rgba(231, 76, 60, 0.2); + border: 1px solid var(--danger); + color: #ff7675; + padding: 12px; + border-radius: 6px; + margin-bottom: 16px; + text-align: center; + font-size: 0.9rem; +} + +/* ========================================= + ADMIN COCKPIT (Mobile Responsive) + ========================================= */ +.admin-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + flex-wrap: wrap; + gap: 12px; +} + +.admin-top-actions { + display: flex; + gap: 8px; +} + +/* Horizontal Scrollable Tabs on Mobile */ +.tabs-nav { + display: flex; + gap: 6px; + border-bottom: 1px solid var(--border-gold); + margin-bottom: 20px; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; /* Firefox */ + padding-bottom: 2px; +} + +.tabs-nav::-webkit-scrollbar { + display: none; /* Chrome/Safari */ +} + +.tab-btn { + background: rgba(255, 255, 255, 0.05); + border: none; + color: var(--text-muted); + padding: 10px 14px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + cursor: pointer; + font-size: 0.85rem; + font-family: inherit; + font-weight: bold; + display: inline-flex; + align-items: center; + gap: 6px; + white-space: nowrap; + flex-shrink: 0; + min-height: 42px; + touch-action: manipulation; +} + +.tab-btn.active { + background: var(--bg-card); + color: var(--gold); + border: 1px solid var(--border-gold); + border-bottom: 1px solid transparent; +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.question-admin-card { + margin-bottom: 14px; + padding: 16px; +} + +.q-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 10px; + font-size: 0.8rem; + flex-wrap: wrap; + gap: 8px; +} + +.highlight-answer { + color: var(--gold-bright); + font-weight: bold; + background: rgba(255, 215, 0, 0.1); + padding: 2px 6px; + border-radius: 4px; + word-break: break-word; +} + +.test-matcher-box { + margin-top: 12px; + padding: 10px; + background: rgba(0, 0, 0, 0.25); + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.test-input-group { + display: flex; + gap: 6px; + margin-top: 6px; +} + +.test-result-feedback { + margin-top: 8px; + font-size: 0.85rem; + word-break: break-word; +} + +.q-actions { + display: flex; + gap: 8px; + margin-top: 14px; + flex-wrap: wrap; +} + +.inline-edit-form { + margin-top: 14px; + padding-top: 14px; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.empty-state { + text-align: center; + padding: 30px 10px; + color: var(--text-muted); +} + +/* ========================================= + FOOTER + ========================================= */ +.footer { + text-align: center; + padding: 16px; + color: var(--text-muted); + font-size: 0.75rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); + margin-top: auto; +} + +.footer-links { + margin-top: 12px; + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} + +.footer-link { + color: var(--gold-soft); + text-decoration: none; + font-size: 0.82rem; + font-weight: 600; + padding: 4px 12px; + border-radius: 16px; + background: rgba(201, 168, 106, 0.12); + border: 1px solid rgba(201, 168, 106, 0.35); + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + gap: 5px; +} + +.footer-link:hover { + color: #0b0b16; + background: var(--gold); + border-color: var(--gold-bright); + box-shadow: 0 0 12px rgba(201, 168, 106, 0.5); + text-decoration: none; + transform: translateY(-1px); +} + +.footer-sep { + display: none; +} + +.legal-card { + text-align: left; + max-width: 760px; + margin: 0 auto; +} + +.legal-content { + margin-top: 20px; + line-height: 1.65; + color: var(--text-main); +} + +.legal-content h3 { + color: var(--gold-soft); + margin-top: 22px; + margin-bottom: 8px; + font-size: 1.15rem; + border-bottom: 1px solid rgba(201, 168, 106, 0.2); + padding-bottom: 4px; +} + +.legal-content p, .legal-content ul { + margin-bottom: 14px; + color: var(--text-muted); + font-size: 0.95rem; +} + +.legal-content ul { + padding-left: 20px; +} + +.legal-content code { + background: rgba(0, 0, 0, 0.35); + padding: 2px 6px; + border-radius: 4px; + color: var(--gold-bright); + font-size: 0.88em; +} + +.hidden { + display: none !important; +} + +/* ========================================= + MOBILE RESPONSIVENESS (max-width: 640px) + ========================================= */ +@media (max-width: 640px) { + .container { + margin: 10px auto 25px; + padding: 0 10px; + } + + .admin-wrapper { + margin: 10px auto 25px; + padding: 0 10px; + } + + .card { + padding: 16px 12px; + border-radius: 12px; + } + + /* Mobile Hamburger Menu */ + .menu-toggle-btn { + display: inline-flex; + } + + .nav-links { + display: none; + position: absolute; + top: var(--header-height); + left: 0; + right: 0; + background: rgba(11, 11, 22, 0.98); + border-bottom: 2px solid var(--gold); + flex-direction: column; + padding: 14px 16px; + gap: 8px; + box-shadow: 0 15px 30px rgba(0,0,0,0.8); + } + + .nav-links.nav-open { + display: flex; + } + + .nav-link { + width: 100%; + padding: 12px 14px; + font-size: 1rem; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(201, 168, 106, 0.2); + } + + .audio-label { + display: none; /* Show only 🔇/🔊 on small phones */ + } + + .audio-btn { + padding: 6px 10px; + } + + /* Quiz Question layout */ + .choice-grid { + grid-template-columns: 1fr; /* Single column on mobile */ + gap: 10px; + } + + .choice-btn { + min-height: 48px; + padding: 10px 12px; + font-size: 0.95rem; + } + + .btn-group { + flex-direction: column; + } + + .btn-group .btn { + width: 100%; + } + + .test-input-group { + flex-direction: column; + } + + .test-input-group .btn { + width: 100%; + } + + .q-actions .btn { + flex: 1 1 100%; + } + + .admin-header { + flex-direction: column; + align-items: stretch; + text-align: center; + } + + .admin-top-actions { + justify-content: center; + } + + .lang-btn { + padding: 4px 6px; + font-size: 0.75rem; + } + + .diff-chip { + padding: 6px 10px; + font-size: 0.8rem; + } +} diff --git a/app/static/js/quiz.js b/app/static/js/quiz.js index 5ea0c46..83aa3eb 100755 --- a/app/static/js/quiz.js +++ b/app/static/js/quiz.js @@ -14,9 +14,9 @@ const UI_TEXT = { de: { pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨", pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich", - envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei", - envelopeRecipient: "An den ehrenwerten Zauberschüler", - envelopeLocation: "Auf dem Prüfungspfad • Schloss Hogwarts", + senderLabel: "Absender:", + envelopeSender: "Hogwarts-Schule für Hexerei und Zauberei", + envelopeSenderLocation: "Schulleitung • Schloss Hogwarts", letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei", letterHeadmaster: "Schulleiter: Albus Dumbledore
(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)", letterSalutation: "Liebe Hexe, lieber Zauberer,", @@ -59,9 +59,9 @@ const UI_TEXT = { en: { pageTitle: "✨ Magical Hogwarts Escape Quiz ✨", pageSubtitle: "10 tricky wizarding world puzzles await you", - envelopeLetter: "Hogwarts School of Witchcraft and Wizardry", - envelopeRecipient: "To the Esteemed Wizarding Student", - envelopeLocation: "On the Path of Trials • Hogwarts Castle", + senderLabel: "Sender:", + envelopeSender: "Hogwarts School of Witchcraft and Wizardry", + envelopeSenderLocation: "Headmaster's Office • Hogwarts Castle", letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry", letterHeadmaster: "Headmaster: Albus Dumbledore
(Order of Merlin, First Class, Grand Sorc.)", letterSalutation: "Dear Witch or Wizard,", @@ -180,17 +180,18 @@ function applyQuizTranslations(lang) { const letterSignature = document.getElementById("letterSignature"); const letterSignTitle = document.getElementById("letterSignTitle"); - const envelopeRecipient = document.getElementById("envelopeRecipient"); - const envelopeLocation = document.getElementById("envelopeLocation"); + const senderLabel = document.getElementById("senderLabel"); + const envelopeSender = document.getElementById("envelopeSender"); + const envelopeSenderLocation = document.getElementById("envelopeSenderLocation"); const breakSealBtn = document.getElementById("breakSealBtn"); const startQuizBtn = document.getElementById("startQuizBtn"); const closeLetterBtn = document.getElementById("closeLetterBtn"); if (pageTitle) pageTitle.innerText = t.pageTitle; if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle; - if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter; - if (envelopeRecipient && t.envelopeRecipient) envelopeRecipient.innerText = t.envelopeRecipient; - if (envelopeLocation && t.envelopeLocation) envelopeLocation.innerText = t.envelopeLocation; + if (senderLabel && t.senderLabel) senderLabel.innerText = t.senderLabel; + if (envelopeSender && t.envelopeSender) envelopeSender.innerText = t.envelopeSender; + if (envelopeSenderLocation && t.envelopeSenderLocation) envelopeSenderLocation.innerText = t.envelopeSenderLocation; if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle; if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster; if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation; diff --git a/app/templates/base.html b/app/templates/base.html index c1f0629..b065469 100755 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -1,165 +1,165 @@ - - - - - - {% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %} - - - - - - {% block head %}{% endblock %} - - - - -
-
- - ⚡ - Hogwarts Quiz - - -
-
- - -
- - - - -
- - -
-
- -
- {% block content %}{% endblock %} -
- - - - - {% block scripts %}{% endblock %} - - + + + + + + {% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %} + + + + + + {% block head %}{% endblock %} + + + + +
+
+ + ⚡ + Hogwarts Quiz + + +
+
+ + +
+ + + + +
+ + +
+
+ +
+ {% block content %}{% endblock %} +
+ + + + + {% block scripts %}{% endblock %} + + diff --git a/app/templates/index.html b/app/templates/index.html index 31bb7d1..f959ace 100755 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,193 +1,187 @@ -{% extends "base.html" %} - -{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %} - -{% block content %} -
-
-

✨ Magisches Hogwarts-Escape-Quiz ✨

-

10 knifflige Rätsel aus der Zauberwelt warten auf dich

-
- - -
- -
-
- -
- - -
-
-
-
- Hogwarts Crest -
-

Hogwarts-Schule für Hexerei und Zauberei

-

Schulleiter: Albus Dumbledore
(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)

-
- ❦ - - ✦ - - ❧ -
-
- -
-

Liebe Hexe, lieber Zauberer,

-

- die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt. -

-

- Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu 1.000 Hauspunkte für sein Haus davon! -

-

- Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms. -

-
- -
-

Mit vorzüglicher Hochachtung,

-

Minerva McGonagall

-

Stellvertretende Schulleiterin

-
-
- - -
- - -
- - -
-
-
-

Hogwarts-Schule für Hexerei und Zauberei

-

An den ehrenwerten Zauberschüler

-

Auf dem Prüfungspfad • Schloss Hogwarts

-
-
- - -
-
-
- - -
- Hogwarts-Wappen Siegel -
-
-
-
-
- - -
-

- Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
- Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel: -

- - -
- Schwierigkeitsgrad wählen: -
- - - - -
-
- -
- - -
-
-
- - - -
-{% endblock %} - -{% block scripts %} - -{% endblock %} +{% extends "base.html" %} + +{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %} + +{% block content %} +
+
+

✨ Magisches Hogwarts-Escape-Quiz ✨

+

10 knifflige Rätsel aus der Zauberwelt warten auf dich

+
+ + +
+ +
+
+ +
+ + +
+
+
+
+ Hogwarts Crest +
+

Hogwarts-Schule für Hexerei und Zauberei

+

Schulleiter: Albus Dumbledore
(Großhexenmeister, Träger des Merlin-Ordens 1. Klasse)

+
+ ❦ + + ✦ + + ❧ +
+
+ +
+

Liebe Hexe, lieber Zauberer,

+

+ die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt. +

+

+ Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu 1.000 Hauspunkte für sein Haus davon! +

+

+ Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms. +

+
+ +
+

Mit vorzüglicher Hochachtung,

+

Minerva McGonagall

+

Stellvertretende Schulleiterin

+
+
+ + +
+ +
+ Absender: +

Hogwarts-Schule für Hexerei und Zauberei

+

Schulleitung • Schloss Hogwarts

+
+
+ + +
+
+
+ + +
+ Hogwarts-Wappen Siegel +
+
+
+
+
+ + +
+

+ Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.
+ Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel: +

+ + +
+ Schwierigkeitsgrad wählen: +
+ + + + +
+
+ +
+ + +
+
+
+ + + +
+{% endblock %} + +{% block scripts %} + +{% endblock %}