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

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

#MainLayout {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    padding-top: 4vh;
}

#LeftPanel {
    width: 100%;
    padding: 4vh 3vw 1vh 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

#WordContainer {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vh 8vw;
    border-radius: 3vw;
    background: var(--card-bg);
    border: 0.3vw solid var(--card-border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: 0.3s ease;
    user-select: none;
    margin-top: 2vh;
    width: 90vw;
    max-width: 100%;
}

#WordContainer:hover {
    background: var(--btn-secondary-hover);
    transform: translateY(-0.5vh);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--card-border-hover);
}

#WordContainer:active {
    transform: translateY(0.2vh);
    box-shadow: 0 0.5vh 1.5vh rgba(46, 139, 192, 0.2);
}

#Word {
    font-size: 8vw;
    line-height: 1.2;
}

#Pinyin {
    font-size: 5vw;
    color: var(--text-secondary);
    margin-top: 1vh;
}

#LevelContainer, 
#MeaningContainer {
    display: flex;
    align-items: baseline;
    gap: 2vw;
    font-size: 5vw;
    margin-top: 1vh;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

#RightPanel {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0vh 2vw;
}

#ExamplesTitle {
    flex-shrink: 0;
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 1.5vh 0 1.5vh 0;
    border-bottom: 0.3vh solid var(--card-border);
    background: transparent;
    position: sticky;
    z-index: 10;
    background: var(--bg-main);
}

#ExamplesContainer {
    flex: 1;
    overflow-y: auto;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.example {
    background: var(--card-bg);
    border: 0.3vw solid var(--card-border);
    border-radius: 3vw;
    padding: 2vh 2vw;
    text-align: center;
    transition: 0.25s ease;
    margin-bottom: 1.5vh;
    cursor: pointer;
    user-select: none;
}

.example:hover {
    background: var(--btn-secondary-hover);
    transform: translateY(-0.5vh);
    border-color: var(--card-border-hover);
    box-shadow: 0 1vh 2vh rgba(0, 217, 232, 0.25);
}

.example:active {
    transform: translateY(0.2vh);
    box-shadow: 0 0.5vh 1vh rgba(46, 139, 192, 0.2);
}

.Chinese {
    font-size: 5vw;
    color: var(--text-primary);
    line-height: 1.15;
}

.Pinyin {
    font-size: 4vw;
    color: var(--text-secondary);
    margin-top: 0.8vh;
}

.Meaning {
    font-size: 4vw;
    color: var(--text-muted);
    margin-top: 0.5vh;
}

#ExamplesLockedMessage {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 1vh auto;
    background: var(--card-bg);
    border: 0.3vw solid var(--card-border);
    border-radius: 4vw;
    color: var(--text-primary);
    font-size: 5vw;
    font-weight: 600;
    line-height: 1.4;
    backdrop-filter: blur(2vw);
    -webkit-backdrop-filter: blur(2vw);
    box-shadow: var(--card-shadow);
    padding: 6vh 6vw;
    animation: fadeIn 0.6s ease-out, glowPulse 3s ease-in-out infinite;
}

#DisclaimerContainer {
    margin-top: 4vw;
    padding: 0;
    border-top: 0.3vw solid var(--card-border);
    width: 100%;
}

#DisclaimerText {
    font-size: 1.9vw;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
    opacity: 0.7;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.97); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes glowPulse {
    0% { 
        box-shadow: 0 0 4vh rgba(0, 217, 232, 0.10); 
    }
    50% { 
        box-shadow: 0 0 6vh rgba(0, 217, 232, 0.20); 
    }
    100% { 
        box-shadow: 0 0 4vh rgba(0, 217, 232, 0.10); 
    }
}

@media (min-width: 768px) {
    #MainLayout {
        padding-top: 7vh;
    }

    #LeftPanel {
        padding: 4vh 6vw 0.5vh 6vw;
    }

    #WordContainer {
        padding: 4vh 8vw;
        border-radius: 2.5vw;
        border-width: 0.2vw;
        width: 60vw;
    }

    #Word {
        font-size: 6vw;
    }

    #Pinyin {
        font-size: 4vw;
        margin-top: 1vh;
    }

    #LevelContainer,
    #MeaningContainer {
        font-size: 3vw;
        gap: 1.5vw;
        margin-top: 1vh;
    }

    #RightPanel {
        padding: 0vh 1vw;
    }

    #ExamplesTitle {
        font-size: 3.5vw;
        padding: 2.5vh 0 2vh 0;
        border-bottom-width: 0.2vh;
    }

    #ExamplesContainer::-webkit-scrollbar {
        width: 1vw;
    }

    .example {
        border-radius: 2vw;
        padding: 2vh 3vw;
        margin-bottom: 1.5vh;
        border-width: 0.2vw;
    }

    .Chinese {
        font-size: 4vw;
    }

    .Pinyin {
        font-size: 3vw;
        margin-top: 1.2vh;
    }

    .Meaning {
        font-size: 2.8vw;
        margin-top: 0.8vh;
    }

    #ExamplesLockedMessage {
        font-size: 3vw;
        padding: 3vh 3vw;
        border-radius: 3vw;
        border-width: 0.2vw;
    }

    #DisclaimerContainer {
        padding: 0vh 1vw;
        border-top-width: 0.2vw;
    }

    #DisclaimerText {
        font-size: 1.5vw;
    }    
}

@media (min-width: 1024px), (orientation: landscape) {
    body {
        overflow: hidden;
    }

    #MainLayout {
        flex-direction: row;
        height: calc(100vh - 10vh);
        padding-top: 10vh;
        overflow: hidden;
    }

    #LeftPanel {
        flex: 1;
        width: 35vw;
        padding: 1vh 2vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: visible;
        margin-top: 4vh;
    }

    #WordContainer {
        padding: 5vh 4vw;
        border-radius: 1.5vw;
        border-width: 0.15vw;
    }

    #Word {
        font-size: 3vw;
    }

    #Pinyin {
        font-size: 2vw;
        margin-top: 1vh;
    }

    #LevelContainer,
    #MeaningContainer {
        display: flex;
        align-items: baseline;
        gap: 1vw;
        font-size: 1.3vw;
        margin-top: 3vh;
        flex-wrap: nowrap;
    }

    #RightPanel {
        width: 65vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 0 2vh 2vw;
    }

    #ExamplesTitle {
        flex-shrink: 0;
        font-size: 2vw;
        font-weight: 600;
        text-align: center;
        margin: 0;
        padding: 2vh 0 1.5vh 0;
        border-bottom-width: 0.15vh;
        background: transparent;
        position: sticky;
        top: 0;
        z-index: 0;
    }

    #ExamplesContainer {
        flex: 1;
        overflow-y: auto;
        padding-top: 2vh;
    }

    #ExamplesContainer::-webkit-scrollbar {
        width: 0.6vw;
    }

    #ExamplesContainer::-webkit-scrollbar-thumb {
        border-radius: 0.4vw;
    }

    .example {
        background: var(--card-bg);
        border-width: 0.08vw;
        border-radius: 1vw;
        padding: 2vh 1.5vw;
        margin: 0 0.5vw 1vh 0;
    }

    .example:hover {
        transform: translateY(-0.3vh);
        box-shadow: 0 0.6vh 1.5vh rgba(0, 217, 232, 0.25);
    }

    .example:active {
        transform: translateY(0.15vh);
    }

    .Chinese {
        font-size: 1.5vw;
    }

    .Pinyin {
        font-size: 1.3vw;
        margin-top: 1vh;
    }

    .Meaning {
        font-size: 1.2vw;
        margin-top: 0.5vh;
    }

    #ExamplesLockedMessage {
        font-size: 1.2vw;
        padding: 3vw;
        border-radius: 2vw;
        border-width: 0.15vw;
        margin: 0 auto;
    }

    #DisclaimerContainer {
        padding: 0vh 0.5vw;
        border-top-width: 0.1vw;
        margin-top: auto;
    }

    #DisclaimerText {
        font-size: 0.6vw;
        line-height: 1.5;
    }    
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    html, body {
        overflow: auto;
    }
}