/* css/style.css */
.game-card {
    transition: all 0.3s ease;
    border: 3px solid transparent;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}
.game-card:hover {
    transform: translateY(-5px);
    border-color: #FFD700;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.game-card.development {
    background: linear-gradient(135deg, #666 0%, #999 100%);
    opacity: 0.7;
}
.game-card.development::before {
    content: " IN DEVELOPMENT";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(255, 165, 0, 0.9);
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.game-card.development::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.code-editor {
    background: #1a1a1a;
    border: 2px solid #EA5B6F;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Courier New', monospace;
    color: #00ff00;
}
.hacker-terminal {
    background: #000;
    border: 2px solid #00ff00;
    color: #00ff00;
    font-family: 'Courier New', monospace;
}
.lesson-card {
    background: linear-gradient(135deg, #2D3047 0%, #932F67 100%);
    border: 2px solid #EA5B6F;
    transition: all 0.3s ease;
    cursor: pointer;
}
.lesson-card:hover {
    transform: scale(1.02);
    border-color: #FFD700;
}
.completed {
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
}
.locked {
    background: linear-gradient(135deg, #666 0%, #999 100%);
    opacity: 0.7;
    cursor: not-allowed;
}
.active-lesson {
    border: 3px solid #FFD700;
    animation: pulse 2s infinite;
}
.input-error {
    border: 2px solid #ff4444 !important;
    background: rgba(255, 68, 68, 0.1) !important;
}
.disabled-input {
    background: #4a5568 !important;
    color: #a0aec0 !important;
    cursor: not-allowed;
}
.theory-read {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}
.interactive-exercise {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    border: 2px solid #FFD700;
}
.track-category {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border: 2px solid #4a5568;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
}
.track-category-title {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    border: 2px solid #9f7aea;
}
.available-tracks {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border: 2px solid #68d391;
}
.development-tracks {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border: 2px solid #ecc94b;
}
.footer {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-top: 3px solid #FFD700;
    margin-top: auto;
}
.css-demo-box {
    border: 2px dashed #FFD700;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(255, 215, 0, 0.1);
}
.color-preview {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 8px;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
}
.js-demo-box {
    border: 2px dashed #4ade80;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(74, 222, 128, 0.1);
    transition: all 0.3s ease;
}
.js-button {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: 2px solid #86efac;
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.js-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}
.html-advanced-box {
    border: 2px dashed #8b5cf6;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.1);
}
.advanced-css-demo {
    border: 2px dashed #f59e0b;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
}
.flex-demo-container {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #374151;
    border-radius: 8px;
    margin: 10px 0;
}
.flex-demo-item {
    background: #8b5cf6;
    padding: 20px;
    border-radius: 5px;
    color: white;
    text-align: center;
    flex: 1;
}
.animation-demo-box {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    margin: 10px auto;
}
.grid-demo-container {
    display: grid;
    gap: 10px;
    padding: 15px;
    background: #374151;
    border-radius: 8px;
    margin: 10px 0;
}
.grid-demo-item {
    background: #10b981;
    padding: 20px;
    border-radius: 5px;
    color: white;
    text-align: center;
}
.advanced-js-demo {
    border: 2px dashed #ec4899;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(236, 72, 153, 0.1);
}
.js-interactive-demo {
    background: #1a1a1a;
    border: 2px solid #ec4899;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
}
.variable-box {
    background: #374151;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #3b82f6;
}
.condition-demo {
    background: #1e293b;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #10b981;
}
.loop-demo {
    background: #1e293b;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #f59e0b;
}
.semantic-demo {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border: 2px solid #8b5cf6;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}
.semantic-header {
    background: #4c1d95;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.semantic-nav {
    background: #5b21b6;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.semantic-main {
    background: #6d28d9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.semantic-footer {
    background: #7c3aed;
    padding: 10px;
    border-radius: 5px;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes gentleSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes gentleSlideOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}
@keyframes rainbow {
    0% { color: #ff6b6b; }
    25% { color: #4ecdc4; }
    50% { color: #45b7d1; }
    75% { color: #96ceb4; }
    100% { color: #feca57; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px #8b5cf6; }
    50% { box-shadow: 0 0 20px #8b5cf6, 0 0 30px #8b5cf6; }
}
.shake {
    animation: shake 0.5s ease-in-out;
}
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.no-context-menu {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.back-button-container {
    position: relative;
    z-index: 10;
}
.back-button {
    position: relative;
    z-index: 20;
}
.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.save-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #10B981;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.save-indicator.show {
    opacity: 1;
}
.animated-text {
    animation: rainbow 3s infinite;
}
.bouncing-element {
    animation: bounce 2s infinite;
}
.glowing-element {
    animation: glow 2s infinite;
}
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}
.interactive-app {
    background: #1f2937;
    border: 2px solid #ec4899;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
}
.demo-input {
    background: #374151;
    border: 2px solid #6b7280;
    border-radius: 8px;
    padding: 10px;
    color: white;
    width: 100%;
    margin: 10px 0;
}
.demo-button {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.demo-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}
.output-box {
    background: #111827;
    border: 2px solid #10b981;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    min-height: 60px;
}
.react-demo {
    border: 2px dashed #61dafb;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(97, 218, 251, 0.1);
}
.react-component {
    background: #20232a;
    border: 1px solid #61dafb;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
}
#dev-notice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffa500;
    color: #000;
    text-align: center;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hidden {
    display: none !important;
}
.input-correct {
    border: 2px solid #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}
.input-error {
    border: 2px solid #EF4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}
.input-hint {
    animation: gentleSlideIn 0.3s ease;
}
@keyframes gentleSlideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.html-block, .css-selector, .code-block, .semantic-block, .css-property, .logic-block, .react-part {
    background: #4a5568;
    border: 2px solid #718096;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    cursor: move;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Courier New', monospace;
}
.html-block:hover, .css-selector:hover, .code-block:hover, .semantic-block:hover, .css-property:hover, .logic-block:hover, .react-part:hover {
    background: #2d3748;
    border-color: #4299e1;
    transform: translateY(-2px);
}
.html-element, .layout-preview, .component-slot {
    background: #2d3748;
    border: 2px solid #4a5568;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    transition: all 0.3s ease;
}
.html-element.connected, .layout-preview.connected, .component-slot.filled {
    border-color: #48bb78;
    background: rgba(72, 187, 120, 0.1);
}
.connection-line {
    position: absolute;
    background: #4299e1;
    height: 3px;
    transform-origin: 0 0;
    z-index: 5;
}
.flex-demo-preview, .grid-demo-preview {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #374151;
    border-radius: 6px;
    margin: 8px 0;
}
.grid-demo-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.preview-item {
    background: #8b5cf6;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    color: white;
    font-weight: bold;
}
.preview-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #e2e8f0;
}
@media (max-width: 768px) {
    .game-card, .lesson-card {
        margin: 8px 0;
        padding: 16px;
    }
    .track-category {
        padding: 12px;
        margin-bottom: 20px;
    }
    .code-editor {
        padding: 12px;
        font-size: 12px;
    }
    .interactive-exercise {
        padding: 12px;
        margin: 10px 0;
    }
    .grid-demo-container, .flex-demo-container {
        padding: 8px;
        gap: 6px;
    }
    .flex-demo-item, .grid-demo-item {
        padding: 12px;
        font-size: 12px;
    }
    .html-block, .css-selector, .code-block, .semantic-block, .css-property, .logic-block, .react-part {
        padding: 10px;
        font-size: 12px;
        margin: 6px 0;
    }
    .back-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    #activeLesson .grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 480px) {
    .header .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .game-card .flex {
        flex-direction: column;
        gap: 8px;
    }
    .interactive-exercise .grid {
        grid-template-columns: 1fr !important;
    }
    .color-preview {
        width: 40px;
        height: 40px;
    }
    .js-button, .demo-button {
        padding: 8px 16px;
        font-size: 14px;
    }
}
.cyber-demo {
    border: 2px dashed #60a5fa;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.1);
}
.castle-visualization {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}
.castle-tower, .castle-wall, .castle-gate, .castle-treasure {
    background: #374151;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #60a5fa;
    font-weight: bold;
}
.cyber-knight-game {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    border: 2px solid #60a5fa;
    border-radius: 15px;
    padding: 20px;
    margin: 10px 0;
}
.mission-container {
    background: rgba(30, 58, 138, 0.3);
    border: 2px solid #4f46e5;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
}
.security-elements {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.security-element {
    background: #4f46e5;
    border: 2px solid #6366f1;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: move;
    transition: all 0.3s ease;
    font-weight: bold;
}
.security-element:hover {
    background: #6366f1;
    transform: translateY(-2px);
}
.castle-layout {
    min-height: 120px;
    transition: all 0.3s ease;
}
.castle-layout.protected {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.email-analysis {
    background: #1f2937;
    border-radius: 8px;
    padding: 15px;
}
.email-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #374151;
    padding: 10px;
    border-radius: 6px;
    margin: 8px 0;
}
.email-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}
.email-btn.safe {
    background: #10b981;
    color: white;
}
.email-btn.dangerous {
    background: #ef4444;
    color: white;
}
.email-btn:hover {
    transform: scale(1.05);
}
.email-btn.selected {
    transform: scale(1.1);
    box-shadow: 0 0 10px currentColor;
}
.comic-creator textarea {
    resize: vertical;
    min-height: 100px;
}
@media (max-width: 768px) {
    .castle-visualization {
        grid-template-columns: 1fr;
    }
    .email-item {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .security-elements {
        justify-content: center;
    }
    .cyber-knight-game .grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 480px) {
    .mission-container {
        padding: 10px;
    }
    .security-element {
        padding: 8px 12px;
        font-size: 12px;
    }
    .email-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
}