.content {
    padding: clamp(30px, 3.5vw, 40px) clamp(15px, 2.5vw, 30px);
}

.lead {
    font-size: clamp(0.85rem, 2.5vw, 1.125rem);
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.7;
    margin: 0.5rem auto 1rem;
    text-wrap: balance;
}

.clickable-feature {
    position: relative;
    cursor: pointer;
}

.clickable-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--clickable-badge-color);
    color: var(--clickable-badge-text-color);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: clamp(0.6em, 2.5vw, 0.8em);
    font-weight: 400;
}

.clickable-feature:hover .clickable-badge {
    font-weight: bold;
    background: var(--clickable-badge-hover-bg);
    color: var(--clickable-badge-hover-text-color);
}

.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 3.5vw, 20px);
    margin: 20px 0;
}

.feature {
    background: var(--card-bg);
    padding: clamp(10px, 2.5vw, 25px);
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
}

.feature:hover {
    transform: translateY(-8px);
    box-shadow: var(--feature-hover-shadow);
    border-color: var(--section-title-border);
}

.feature:hover::before {
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.feature.selected {
    border-color: var(--section-title-border);
    background: linear-gradient(135deg, #4bb7b533, rgba(249, 127, 127, 0.2));
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.feature-icon {
    font-size: clamp(2em, 4vw, 3em);
    margin-bottom: 15px;
}

.feature h3 {
    font-size: clamp(0.8em, 2.5vw, 1.2em);
    letter-spacing: -0.3px;
    color: var(--text-color);
    margin-bottom: 10px;
    text-wrap: balance;
}
:lang(zh-hans) .feature h3 {
    font-size: clamp(0.87em, 2.5vw, 1.2em); 
}
:lang(zh-hant) .feature h3 {
    font-size: clamp(0.85em, 2.5vw, 1.2em);
}
:lang(ja) .feature h3 {
    font-size: clamp(0.87em, 2.5vw, 1.1em);
}


.feature p {
    font-size: clamp(0.65em, 2.5vw, 1em);
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.7;
    text-wrap: balance;
}
:lang(zh-hans) .feature p {
    font-size: clamp(0.67em, 2.5vw, 0.94em);
}
:lang(zh-hant) .feature p {
    font-size: clamp(0.61em, 2.5vw, 0.91em);
}
:lang(ja) .feature p {
    font-size: clamp(0.65em, 2.5vw, 0.96em);
}


.start-screen {
    text-align: center;
}

.start-screen h2 {
    color: var(--text-color);
    margin-bottom: clamp(30px, 2.5vw, 40px);
    font-size: clamp(1.3em, 3vw, 2em);
}
:lang(ko) .start-screen h2 {
    font-size: clamp(1.1em, 3vw, 2em);
    letter-spacing: -0.3px;
}
:lang(en) .start-screen h2 {
    font-size: clamp(1.02em, 3vw, 2em);
}

.start-btn {
    background: linear-gradient(135deg, var(--button-primary-start), var(--button-primary-end));
    color: white;
    border: none;
    padding: clamp(15px, 3.5vw, 20px) clamp(30px, 3vw, 50px);
    font-size: clamp(1em, 2vw, 1.3em);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    margin-top: 30px;
    animation: buttonPulse 2s ease-in-out infinite;
}
:lang(en) .start-btn {
    font-size: clamp(0.95em, 2.2vw, 1.3em);
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}


.disclaimer p {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
    color: var(--disclaimer-color);
    font-size: clamp(0.7em, 2.5vw, 0.9em);
    font-weight: 600;
    text-wrap: balance;
}

:lang(en) .disclaimer p {
    font-size: clamp(0.74em, 2.5vw, 1em);
}
:lang(zh-hans) .disclaimer p, 
:lang(zh-hant) .disclaimer p {
    font-weight: 400;
    font-size: clamp(0.7em, 2.5vw, 1em);
}
:lang(ja) .disclaimer p {
    font-size: clamp(0.72em, 2.5vw, 0.9em);
}


.navigation {
    display: flex;
    justify-content: space-between;
    gap: clamp(60px, 5vw, 100px);
    margin-top: 30px;
    padding: 0px clamp(5px, 1.5vw, 30px);
}

.nav-btn {
    background: #6c5ce7;
    color: white;
    border: none;
    padding: clamp(12px, 3.5vw, 15px) clamp(10px, 8vw, 30px); 
    border-radius: 25px;
    cursor: pointer;
    font-size: clamp(0.8em, 2.5vw, 1em);
    font-weight: 600;
    flex: 1;
    max-width: 150px; 
    min-width: 80px; 
}

.nav-btn:hover {
    background: #5f3dc4;
    transform: translateY(-1px);
}

.nav-btn:disabled {
    background: #878686;
    cursor: not-allowed;
    transform: none;
}

.progress-container {
    background: var(--progress-bg);
    padding: 20px 30px;
    border-bottom: 1px solid #e9ecef;
}

.progress-bar {
    background: #e9ecef;
    height: 8px;
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #ff6b6b, #ee5a24);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 20px;
}

.progress-text {
    margin-top: 10px;
    text-align: center;
    color: var(--progress-text);
    font-weight: 600;
    font-size: clamp(0.8em, 2.5vw, 1em);
}

.question-container {
    display: none;
    width: 100%;
}

.question {
    background: var(--card-bg);
    padding: clamp(5px, 1.5vw, 30px);
    border-radius: 15px;
    margin-bottom: 30px;
}

.question h3 {
    color: var(--text-color);
    font-size: clamp(1.04em, 2.5vw, 1.3em);
    margin-bottom: 25px;
    line-height: 1.6;
}
:lang(en) .question h3 {
    font-size: clamp(0.95em, 2.5vw, 1.3em);
}
:lang(zh-hans) .question h3,
:lang(ja) .question h3 {
    font-size: clamp(1.1em, 2.5vw, 1.4em);
}
:lang(zh-hant) .question h3 {
    font-size: clamp(1em, 2.5vw, 1.4em);
}

.options {
    display: grid;
    gap: clamp(10px, 3.5vw, 15px);
}

.option {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    padding: clamp(12px, 3vw, 20px);
    font-size: clamp(0.85em, 2.5vw, 1.1em);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.option:hover {
    border-color: var(--option-hover-border);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.option.selected {
    border-color: var(--option-selected-border);
    background: var(--selected-bg);
    color: var(--selected-text);
}

.unlock-result-overlay {
    text-align: center;
    padding: 40px clamp(15px, 2.5vw, 40px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(-3deg);
    margin: 20px 0;
}
:lang(zh-hans) .unlock-result-overlay,
:lang(zh-hant) .unlock-result-overlay {
    padding: clamp(30px, 3.5vw, 40px) clamp(25px, 2.5vw, 40px);
}
:lang(ja) .unlock-result-overlay {
    padding: 40px clamp(15px, 2.5vw, 40px);
}


#idealType .unlock-result-message {
    margin-bottom: clamp(25px, 3.5vw, 30px);
    font-size: clamp(1.5em, 3.5vw, 2em);
    font-weight: bold;
    line-height: 1.5;
    text-wrap: balance;
}
:lang(ko) #idealType .unlock-result-message {
    font-size: clamp(1.5em, 3.5vw, 1.6em);
}
:lang(zh-hans) #idealType .unlock-result-message {
    font-size: clamp(1.6em, 3.5vw, 2em);
}
:lang(zh-hant) #idealType .unlock-result-message {
    font-size: clamp(1.6em, 3.5vw, 1.8em);
}
:lang(ja) #idealType .unlock-result-message {
    font-size: clamp(1.6em, 3.5vw, 1.7em);
}


.unlock-result-btn {
    padding: clamp(12px, 2.5vw, 15px) clamp(25px, 3vw, 30px);
    background: white;
    color: #667eea;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(1em, 2.5vw, 1.2em);
    transition: transform 0.2s;
    animation: buttonPulse 2s ease-in-out infinite;
}
:lang(ko) .unlock-result-btn {
    padding: clamp(12px, 2.5vw, 15px) clamp(10px, 4.5vw, 30px);
}
:lang(en) .unlock-result-btn {
    padding: clamp(12px, 2.5vw, 15px) clamp(20px, 3vw, 30px);
}


.unlock-result-btn:hover {
    animation: buttonPulse 1s ease-in-out infinite;
}

.result-container {
    display: none;
}

.result-header {
    text-align: center;
    margin-bottom: clamp(30px, 3.5vw, 40px);
}

.result-header h2 {
    color: var(--result-title-color);
    font-size: clamp(1.1em, 2.5vw, 1.7em);
    margin-bottom: 10px;
    opacity: 0.88;
    line-height: 1.5;
    text-wrap: balance;
}
:lang(zh-hans) .result-header h2 {
    font-size: clamp(1.1em, 2.5vw, 1.7em);
}
:lang(zh-hant) .result-header h2 {
    font-size: clamp(1.07em, 2.5vw, 1.7em);
}
:lang(ja) .result-header h2 {
    font-size: clamp(1.1em, 2.5vw, 1.7em);
}
:lang(en) .result-header h2,
:lang(ja) .result-header h2 {
    padding: 0 20px;
}

.personality-type {
    background: linear-gradient(135deg, var(--personality-start), var(--personality-end));
    color: var(--personality-text);
    padding: clamp(30px, 3vw, 45px) clamp(15px, 2.5vw, 30px);
    border-radius: 15px;
    text-align: center;
    margin-bottom: clamp(30px, 3vw, 50px);
}

.personality-type h3 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    margin-bottom: clamp(20px, 3.5vw, 35px);
    color: white;
    line-height: 1.6;
    max-width: 100%;
    text-wrap: balance;
}
:lang(zh-hans) .personality-type h3,
:lang(zh-hant) .personality-type h3,
:lang(ja) .personality-type h3 {
    font-size: clamp(1.36rem, 5vw, 2.4rem);
}

.personality-type p {
    font-size: clamp(0.93rem, 4vw, 1.2rem);
    line-height: 1.8;
    max-width: 500px;
    margin: 0 auto;
    text-wrap: balance;
}
:lang(en) .personality-type p {
    max-width: 550px;
}


.result-section {
    background: var(--result-section-bg);
    padding: clamp(15px, 3.5vw, 30px);
    border-radius: 15px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

.result-section h3 {
    color: var(--section-title-color);
    font-size: clamp(1.2em, 2.5vw, 1.7em);
    margin-bottom: clamp(15px, 2.5vw, 20px);
    display: flex;
    align-items: center;
    gap: 10px;
}


.result-section p {
    font-size: clamp(0.9em, 2.5vw, 1.2em);
    margin-bottom: 10px;
    text-wrap: wrap;
}


.traits-grid {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.trait {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.trait:last-child {
    border-bottom: none;
}

.trait-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 10px;
    margin: 0 15px;
    overflow: hidden;
}

.trait-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--trait-start), var(--trait-end));
    border-radius: 10px;
    transition: width 1s ease;
}

.trait-preview {
    display: flex;
    align-items: center;
    gap: clamp(5px, 2.5vw, 15px);
    padding: clamp(0px, 2.5vw, 15px) 0;
    border-bottom: 1px solid #e9ecef;
}

.trait-preview:last-child {
    border-bottom: none;
}

.trait-bar-preview {
    flex: 1;
    height: 10px;
    background: #e9ecef;
    border-radius: 10px;
    margin: 0 clamp(0px, 2.5vw, 10px);
    overflow: hidden;
}

.trait-fill-preview {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff8787);
    border-radius: 10px;
    font-size: clamp(0.8em, 2.5vw, 1em);
}
:lang(en) .trait-label-preview {
    font-size: clamp(0.7em, 2.5vw, 1em);
    min-width: clamp(0px, 20vw, 145px);
}
:lang(ja) .trait-label-preview {
    min-width: clamp(40px, 6vw, 80px);
}
:lang(zh-hans) .trait-label-preview,
:lang(zh-hant) .trait-label-preview {
    min-width: clamp(64px, 5.5vw, 70px);
}

.trait-label-preview {
    flex-shrink: 0;
}

.trait-dots-preview {
    font-size: clamp(0.8em, 2.5vw, 1em);
    flex-shrink: 0;
}
:lang(en) .trait-dots-preview {
    font-size: clamp(0.7em, 2.5vw, 1em);
}

.trait-preview .trait-fill-preview {
    width: 10%;
}

.traits-hover-container:hover .trait-preview .trait-fill-preview,
.traits-hover-container.mobile-active .trait-preview .trait-fill-preview {
    animation: barAnimation 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes barAnimation {
    0%, 100% { width: 10%; }
    12.5% { width: 30%; }
    25% { width: 50%; }
    37.5% { width: 70%; }
    50% { width: 90%; }
    62.5% { width: 70%; }
    75% { width: 50%; }
    87.5% { width: 30%; }
}

.share-section {
    text-align: center;
    margin-top: 40px;
    padding: clamp(20px, 3.5vw, 30px);
    background: none;
    border-radius: 15px;
    border: none;
}

.share-section h3 {
    color: var(--section-title-color);
    font-size: 1.5em;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.button-container {
    display: flex;
    flex-direction: row; 
    gap: clamp(20px, 3.5vw, 50px);
    align-items: center;
    margin-top: clamp(20px, 3.5vw, 70px);
    justify-content: center; 
}

.share-btn {
    background: #1dd1a1;
}
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(29, 209, 161, 0.3);
}

.capture-btn {
    background: linear-gradient(135deg, #ff6b9d, #ff8cc8);
}
.capture-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 161, 0.3);
}

.restart-btn {
    background: #6c5ce7;
}
.restart-btn:hover {
    background: #5f3dc4;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
}

.share-btn, .capture-btn, .restart-btn {
    font-size: 1.1em;
    color: white;
    font-weight: bold;
    height: 50px;
    white-space: nowrap;
    padding: 12px clamp(15px, 3vw, 30px);
    border-radius: 25px;
    min-width: clamp(120px, 30vw, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: buttonPulse 2.5s ease-in-out infinite;
}

#toast {
    display: none;
    position: fixed;
    top: clamp(30vh, 10vw, 50vh);
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    color: var(--text-color);
    padding: clamp(10px, 2.5vw, 12px) clamp(20px, 2.5vw, 30px);
    border-radius: clamp(10px, 2.5vw, 15px);
    font-size: clamp(0.9em, 2.5vw, 1.2em);
    z-index: 9999;
    min-width: clamp(300px, 40vw, 500px);
    max-width: clamp(500px, 60vw, 700px);
    text-align: left;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
    font-weight: 500;
    align-items: center;
    gap: 12px;
}

#toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (max-width: 645px) {

    html[lang="en"] .button-container {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 628px) {

    html[lang="ja"] .button-container {
        flex-direction: column;
        align-items: stretch;
    }
}


@media (max-width: 580px) {

    html[lang="ko"] .button-container {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 540px) {
    .feature-icon {
        margin-top: 40px;
    }
    .personality-type p {
        line-height: 1.6;
    }
    .result-section p {
        line-height: 1.7;
    }
}

@media (max-width: 486px) {

    html[lang="zh-hans"] .button-container,
    html[lang="zh-hant"] .button-container {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 344px) {
    :lang(ko) .feature p {
        letter-spacing: -0.3px;
    }
    :lang(en) .feature p {
        letter-spacing: -0.12px;
    }
}