@font-face {
    font-family: 'DCH_Basisschrift';
    src: url('/static/font/DCH_Basisschrift.ttf') format('truetype');
    /* If you have other font formats, you can add them like this:
    src: url('/fonts/DCH_Basisschrift.woff2') format('woff2'),
         url('/fonts/DCH_Basisschrift.woff') format('woff'),
         url('/fonts/DCH_Basisschrift.ttf') format('truetype');
    */
}

/* Theme variables for easy customization */
:root {
    --bg: #f5f5f5;       /* page background */
    --surface: #ffffff;  /* surfaces like cards and nav */
    --border: #ddd;      /* subtle borders */
    --accent: #3740ff;   /* primary accent color */
}

html {
    overflow: hidden; /* Disables scrolling on the webpage */
    height: 100%;
    width: 100%;
}
  
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--bg); /* Lighter gray background */
    font-family: 'DCH_Basisschrift', sans-serif;
    overflow: hidden; /* Disables scrolling on the webpage */
    position: relative; /* Ensure positioning context for absolute elements */
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
}

/* Top Navigation Bar */
.top-nav-bar {
    width: 100%;
    height: 70px; /* Increased height to accommodate the lesson navigation */
    background-color: var(--surface); /* White background like paper */
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.app-title {
    margin: 0;
    font-size: 1.5rem; /* Slightly smaller to fit in the navigation container */
    color: #333;
    text-align: center;
    min-width: 200px; /* Ensure there's enough space for the title */
}

.left-buttons-container {
    display: flex;
    gap: 10px;
}

.right-buttons-container {
    display: flex;
    gap: 10px;
}

/* Integrated title navigation container in the top bar */
.title-navigation-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f0f0f0; /* Light gray background */
    padding: 5px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Remove the now-unused lesson navigation section */
/* .lesson-navigation-section {
    width: 100%;
    padding: 10px 0;
    background-color: #f0f0f0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
} */

.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
    padding: 5px;
    transition: color 0.2s;
}

.nav-arrow:hover {
    color: #000;
}

.nav-arrow-icon {
    font-size: 1.2rem;
}

.nav-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button:focus-visible {
    outline: 2px solid #3740ff;
    outline-offset: 2px;
}

.left-button img {
    width: 30px;
    height: 30px;
}

.home-icon {
    font-size: 24px;
}

.right-button .settings-icon {
    font-size: 24px;
}

.help-item-icon {
    font-size: 24px;
}

.nav-button:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

/* Title Section */
.title-section {
    width: 100%;
    padding: 20px 0 30px 0; /* Increased padding, especially at the bottom */
    text-align: center;
}

.title-section h1 {
    margin: 0;
    font-size: 2.5em; /* Increased from 2em to 2.5em */
}

/* Links Section */
.links-section {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    background-color: #f0f0f0; /* Match the canvas section background */
}

.letter-links {
    text-align: center;
    margin: 10px auto;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px;
    background-color: var(--surface); /* Restored white background */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    padding: 5px;
    max-width: 90%
}

.letter-links a {
    display: inline-block;
    padding: 5px 6px;
    margin: 1px;
    min-width: 35px;
    text-decoration: none;
    color: var(--accent);
    font-weight: bold;
    border-radius: 4px;
    background-color: #f8f9fa;
    transition: background-color 0.2s;
}

/* Letter progress status styles */
.letter-links a.not-attempted {
    color: rgb(0, 0, 255); /* Blue color */
    background-color: transparent;
}

.letter-links a.attempted {
    color: rgb(0, 0, 0); /* Black text for better contrast */
    background-color: rgb(255, 165, 0); /* Orange background */
}

.letter-links a.success {
    color: rgb(0, 0, 0); /* Black text for better contrast */
    background-color: rgb(144, 238, 144); /* Light green background */
}

.letter-links a:hover {
    opacity: 0.8;
}

/* Canvas Section */
.canvas-section {
    width: 100%;
    flex: 1;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 0 0 40px 0; /* Add bottom padding to make room for the score */
    background-color: #f0f0f0; /* Slightly darker than body to create contrast */
    min-height: 400px; /* Ensure minimum height for small screens */
    box-sizing: border-box; /* Include padding in the height calculation */
}

/* Right-handed layout (default) */
.right-handed #button-container {
    position: absolute;
    left: 20px;
    right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    height: 100%;
    z-index: 10;
}

.right-handed .feedback-container {
    position: absolute;
    left: auto;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
}

/* Left-handed layout */
.left-handed #button-container {
    position: absolute;
    left: auto;
    right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    height: 100%;
    z-index: 10;
}

.left-handed .feedback-container {
    position: absolute;
    left: 20px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
}

/* Common button styles */
#button-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    height: 100%;
    z-index: 10;
}

.stack-button {
    margin-bottom: 5px;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 2em;
    border: none;
    background: none;
    cursor: pointer;
}

.stack-button:focus-visible {
    outline: 2px solid #3740ff;
    outline-offset: 2px;
}

#drawingCanvas {
    width: min(50vw, 50vh); /* Use the smaller of 50% viewport width or 50% viewport height */
    height: min(50vw, 50vh); /* Same as width to maintain square aspect ratio */
    border: 1px solid var(--border); /* Lighter border */
    margin: 0 auto;
    background-color: var(--surface); /* White background like paper */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Enhanced shadow for paper-like effect */
    border-radius: 3px; /* Slightly rounded corners */
    display: block; /* Ensure proper display */
}

#emoji-display {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#similarity-score {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 1.2em;
    background-color: rgba(255, 255, 255, 0.9); /* More opaque background */
    padding: 8px 12px;
    border-radius: 8px;
    z-index: 20; /* Ensure it's above other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
    border: 1px solid var(--border); /* Add border */
}

/* Modal Styles */
dialog.modal {
    width: 300px;
    max-height: 400px;
    background-color: var(--surface);
    padding: 20px;
    border: none;
    border-radius: 8px;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

/* Help Modal specific styles */
#helpModal {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
}

.help-modal-content {
    width: 100%;
}

.help-content {
    width: 100%;
    margin: 20px 0;
}

.help-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.help-item-icon {
    font-size: 2em;
    margin-right: 15px;
    min-width: 40px;
    text-align: center;
}

.help-text {
    flex: 1;
    font-size: 1.1em;
}

/* Statistics Modal specific overrides */
#statisticsModal {
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
}

.statistics-modal-content {
    width: 100%;
}

.statistics-content {
    width: 100%;
    margin: 20px 0;
}

.statistics-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.statistics-tile {
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'DCH_Basisschrift', sans-serif;
}

.tile-letter {
    font-size: 2em;
    font-weight: bold;
}

.tile-stats {
    font-size: 1em;
    margin-top: 5px;
}

/* Tile color classes based on success rate */
.statistics-tile.no-attempts {
    background-color: #f0f0f0; /* Gray */
}

.statistics-tile.high-success {
    background-color: #4CAF50; /* Green */
}

.statistics-tile.medium-success {
    background-color: #8BC34A; /* Light Green */
}

.statistics-tile.medium-low-success {
    background-color: #FFEB3B; /* Yellow */
}

.statistics-tile.low-success {
    background-color: #FF9800; /* Orange */
}

.statistics-tile.no-success {
    background-color: #F44336; /* Red */
}

.statistics-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Modal Content Styles */
.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
}

.modal-close:hover {
    color: #000;
}

#lessonList {
    width: 100%;
    margin: 20px 0;
}

.lesson-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.lesson-item:hover {
    background-color: #f0f0f0;
}

.lesson-item.active {
    background-color: #e0e0e0;
    border-color: #999;
}

.settings-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.settings-option-button {
    padding: 12px 15px;
    background-color: #f0f0f0;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: 'DCH_Basisschrift', sans-serif;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.settings-option-button:hover {
    background-color: #e0e0e0;
}

.hidden {
    display: none;
}

/* Index page styles */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
}

.header-container {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid var(--border);
}

.lesson-groups-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.lesson-group-card {
    background-color: var(--surface);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 250px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lesson-group-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.lesson-group-card h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5rem;
}

.lesson-group-card p {
    color: #666;
    margin-bottom: 0;
}

/* Lesson modal styles */
.lesson-group-header {
    width: 100%;
    text-align: center;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: #333;
}

/* Media queries for iPad and other tablets */
@media only screen and (max-width: 1024px) {
    #drawingCanvas {
        width: min(60vw, 40vh); /* Use the smaller of 60% viewport width or 40% viewport height */
        height: min(60vw, 40vh); /* Same as width to maintain square aspect ratio */
    }
    
    .stack-button {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
    }
    
    .feedback-container {
        width: 150px;
        height: 150px;
    }
    
    #similarity-score {
        bottom: 5px;
        right: 10px;
        font-size: 1em;
    }
}

/* Specific adjustments for smaller tablets and large phones */
@media only screen and (max-width: 768px) {
    #drawingCanvas {
        width: min(70vw, 35vh); /* Use the smaller of 70% viewport width or 35% viewport height */
        height: min(70vw, 35vh); /* Same as width to maintain square aspect ratio */
    }
    
    .stack-button {
        width: 35px;
        height: 35px;
        font-size: 1.2em;
        margin-bottom: 3px;
    }
    
    #button-container {
        gap: 10px;
    }
    
    .feedback-container {
        width: 120px;
        height: 120px;
    }
}