:root {
    --gold: #d4af37;
    --dark-gold: #b8921f;
    --burgundy: #740001;
    --dark-burgundy: #4a0000;
    --parchment: #f4e8d0;
    --dark-bg: #0a0a0a;
    --magic-blue: #4a90e2;
    --success-green: #2ecc71;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Shantell Sans', 'Marck Script', 'Great Vibes', cursive;
    background: linear-gradient(to bottom, #0a0a1f, #1a1a3a);
    color: var(--parchment);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated stars background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 300px 150px white, 500px 300px white,
        700px 100px white, 200px 400px white, 600px 250px white,
        800px 350px white, 150px 50px white, 450px 450px white,
        550px 50px white, 250px 300px white, 750px 200px white,
        350px 100px white, 650px 400px white, 900px 150px white,
        50px 350px white, 400px 200px white, 850px 450px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, var(--burgundy), var(--dark-burgundy));
    border: 3px solid var(--gold);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
    position: relative;
}

.header::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--gold), var(--dark-gold));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.5;
}

.hogwarts-crest {
    margin-bottom: 20px;
}

.crest-text {
    font-family: 'Great Vibes', 'Marck Script', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 4px;
}

.main-title {
    font-family: 'Great Vibes', 'Marck Script', cursive;
    font-size: 48px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 20px;
    font-style: italic;
    color: var(--parchment);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.content {
    display: grid;
    gap: 30px;
}

.instruction-box,
.spell-info {
    background: rgba(244, 232, 208, 0.1);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
}

.instruction-box h2,
.spell-info h3 {
    font-family: 'Great Vibes', 'Marck Script', cursive;
    color: var(--gold);
    margin-bottom: 15px;
    font-size: 26px;
}

.instruction-box ul {
    list-style: none;
    padding-left: 0;
}

.instruction-box li {
    padding: 10px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.instruction-box li:last-child {
    border-bottom: none;
}

kbd {
    background: var(--gold);
    color: var(--dark-burgundy);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.game-container {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 26, 58, 0.9), rgba(10, 10, 31, 0.9));
    border: 3px solid var(--gold);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#spellCanvas {
    border: 2px solid var(--dark-gold);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    cursor: crosshair;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.game-status {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Shantell Sans', 'Great Vibes', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    padding: 15px 30px;
    background: rgba(116, 0, 1, 0.8);
    border: 2px solid var(--gold);
    border-radius: 10px;
    z-index: 10;
}

.spell-description {
    font-size: 18px;
    line-height: 1.8;
    color: var(--parchment);
    text-align: justify;
}

.footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    font-family: 'Marck Script', 'Great Vibes', cursive;
    color: var(--gold);
    font-size: 14px;
    border-top: 2px solid var(--gold);
}

/* Touch screen warning overlay */
.touch-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--burgundy), var(--dark-burgundy));
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.touch-warning.show {
    display: flex;
}

.warning-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    background: rgba(244, 232, 208, 0.1);
    border: 3px solid var(--gold);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.5);
}

.warning-content h2 {
    font-family: 'Great Vibes', 'Marck Script', cursive;
    font-size: 36px;
    color: var(--gold);
    margin-bottom: 30px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

.warning-content p {
    font-size: 22px;
    line-height: 1.6;
    color: var(--parchment);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .warning-content {
        padding: 30px 20px;
    }
    
    .warning-content h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .warning-content p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .warning-content {
        padding: 25px 15px;
    }
    
    .warning-content h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .warning-content p {
        font-size: 16px;
    }
}

/* Success animation */
@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.success-message {
    animation: successPulse 0.5s ease-in-out;
    background: linear-gradient(135deg, #2b1a0a, #4a2a10) !important;
    border: 2px solid var(--gold);
    color: var(--gold) !important;
    font-size: 28px !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
}

/* Responsive design */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 10px;
    }
    
    .header {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .crest-text {
        font-size: 18px;
        letter-spacing: 2px;
    }
    
    .main-title {
        font-size: 28px;
        letter-spacing: 1px;
    }
    
    .subtitle {
        font-size: 14px;
    }
    
    .instruction-box,
    .spell-info {
        padding: 15px;
    }
    
    .instruction-box h2,
    .spell-info h3 {
        font-size: 20px;
    }
    
    .instruction-box li {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .game-container {
        padding: 10px;
        min-height: auto;
    }
    
    #spellCanvas {
        max-width: 100%;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    
    .game-status {
        font-size: 18px;
        padding: 10px 20px;
        top: 15px;
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .success-message {
        font-size: 20px !important;
        white-space: normal;
    }
    
    .spell-description {
        font-size: 14px;
        line-height: 1.6;
    }
    
    kbd {
        font-size: 12px;
        padding: 3px 6px;
    }
    
    .footer {
        font-size: 12px;
        padding: 15px;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 24px;
    }
    
    .crest-text {
        font-size: 16px;
    }
    
    .subtitle {
        font-size: 12px;
    }
    
    .instruction-box h2,
    .spell-info h3 {
        font-size: 18px;
    }
    
    .instruction-box li {
        font-size: 13px;
    }
    
    .game-status {
        font-size: 16px;
        padding: 8px 15px;
    }
    
    .spell-description {
        font-size: 13px;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .header {
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .main-title {
        font-size: 24px;
        margin-bottom: 5px;
    }
    
    .subtitle {
        font-size: 12px;
    }
    
    .instruction-box,
    .spell-info {
        padding: 10px;
    }
    
    .game-container {
        min-height: auto;
        padding: 10px;
    }
    
    .game-status {
        font-size: 14px;
        padding: 6px 12px;
        top: 10px;
    }
}