/* ------------------------------
   General
------------------------------ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f6f8;
    color: #222222;
}


/* ------------------------------
   Header
------------------------------ */

.site-header {
    background-color: #1f2937;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 8%;
}

.logo h1 {
    margin: 0;
}

.navigation {
    display: flex;

    /* Wraps rather than crowding the logo once there are several links */
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 12px 20px;
}

.navigation a {
    color: white;
    text-decoration: none;
    font-size: 15px;
}

.navigation a:hover {
    text-decoration: underline;
}


/* ------------------------------
   Hero Section
------------------------------ */

.hero {
    text-align: center;
    padding: 80px 20px 60px;
    background-color: white;
}

.hero h2 {
    font-size: 40px;
    margin-bottom: 15px;
}

.hero p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: #555555;
}


/* ------------------------------
   Activities
------------------------------ */

.activities {
    padding: 60px 8%;
    text-align: center;
}

.activities h2 {
    font-size: 30px;
    margin-bottom: 40px;
}

.activity-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


/* Individual activity card */

.activity-card {
    background-color: white;

    width: 300px;
    min-height: 330px;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.activity-card:hover {
    transform: translateY(-5px);
    transition: 0.2s;
}

.activity-icon {
    font-size: 45px;
    margin-bottom: 15px;
}

.activity-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.activity-card p {
    color: #555555;
    line-height: 1.5;

    flex-grow: 1;
}


/* Buttons */

.activity-button {
    display: inline-block;

    margin-top: 20px;

    padding: 12px 22px;

    background-color: #2563eb;
    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;
}

.activity-button:hover {
    background-color: #1d4ed8;
}


/* ------------------------------
   Footer
------------------------------ */

footer {
    background-color: #1f2937;
    color: white;

    text-align: center;

    padding: 20px;

    margin-top: 40px;
}


/* ------------------------------
   Mobile Layout
------------------------------ */

@media (max-width: 800px) {

    .site-header {
        flex-direction: column;
        gap: 20px;
    }

    .navigation {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .hero h2 {
        font-size: 30px;
    }

}

/* ------------------------------
   Cyber Safety Quiz
------------------------------ */

.quiz-main {
    min-height: 75vh;
    padding: 60px 20px;
}

.quiz-section {
    max-width: 700px;
    margin: 0 auto;

    background-color: white;

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    text-align: center;
}

.quiz-section h2 {
    font-size: 30px;
    margin-top: 0;
}

.quiz-introduction {
    color: #555555;
    line-height: 1.6;
    margin-bottom: 30px;
}


/* Demographic Form */

.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    font-weight: bold;
}

.form-group select {
    width: 100%;

    padding: 12px;

    border: 1px solid #cccccc;

    border-radius: 6px;

    font-size: 16px;
}

.error-message {
    color: #b91c1c;
    min-height: 20px;
}


/* Quiz Buttons */

.quiz-button {
    display: inline-block;

    padding: 12px 24px;

    border: none;
    border-radius: 6px;

    background-color: #2563eb;
    color: white;

    font-size: 16px;
    font-weight: bold;

    text-decoration: none;

    cursor: pointer;
}

.quiz-button:hover {
    background-color: #1d4ed8;
}


/* Scenario */

.question-counter {
    color: #666666;
    font-weight: bold;
}

.scenario-card {
    max-width: 500px;

    margin: 30px auto;

    text-align: left;

    border: 1px solid #dddddd;
    border-radius: 10px;

    overflow: hidden;
}

.scenario-header {
    background-color: #eeeeee;

    padding: 12px 20px;

    font-weight: bold;
}

.message-box {
    padding: 25px;
}

.message-box p {
    line-height: 1.5;
}

.fake-link {
    color: #2563eb;
    text-decoration: underline;
}

.scenario-question {
    font-size: 18px;
    font-weight: bold;
}


/* Answer Buttons */

.answer-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 25px;
}

.answer-button {
    padding: 12px 24px;

    border: 2px solid #2563eb;

    border-radius: 6px;

    background-color: white;
    color: #2563eb;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.answer-button:hover {
    background-color: #2563eb;
    color: white;
}


/* Feedback */

.cyber-tip {
    margin: 30px 0;

    padding: 20px;

    background-color: #f4f6f8;

    border-radius: 8px;

    text-align: left;
}

.cyber-tip h3 {
    margin-top: 0;
}


/* Hidden Elements */

.hidden {
    display: none;
}

/* ------------------------------
   Placeholder Pages
------------------------------ */

.placeholder-main {
    min-height: 75vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 60px 20px;
}

.placeholder-card {
    max-width: 650px;

    background-color: white;

    padding: 50px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    text-align: center;
}

.placeholder-icon {
    font-size: 55px;
    margin-bottom: 20px;
}

.placeholder-card h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.placeholder-card p {
    color: #555555;

    font-size: 17px;
    line-height: 1.6;
}

.development-message {
    margin: 30px 0;

    padding: 15px;

    background-color: #f4f6f8;

    border-radius: 6px;

    font-weight: bold;
}


/* ------------------------------
   Shared Game Styles
------------------------------ */

:root {
    --sapol-navy: #0b2545;
    --sapol-blue: #0b57a4;
    --sapol-light: #e8eef6;
}


/* Chequered band, used under the header on every game page */

.sapol-checker {
    height: 24px;

    background-image:
        repeating-conic-gradient(
            var(--sapol-navy) 0% 25%,
            #ffffff 0% 50%
        );

    background-size: 24px 24px;
}


/* Option buttons shared by the picker and the studio */

.small-button {
    padding: 10px 14px;

    border: 1px solid var(--sapol-blue);
    border-radius: 6px;

    background-color: white;
    color: var(--sapol-blue);

    font-family: inherit;
    font-size: 14px;
    font-weight: bold;

    white-space: nowrap;

    cursor: pointer;
}

.small-button:hover {
    background-color: var(--sapol-blue);
    color: white;
}


.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.checkbox-group label {
    font-size: 14px;
    color: #444444;
}


/* ------------------------------
   Start Screen
------------------------------ */

.start-screen {
    position: relative;

    min-height: calc(100vh - 90px);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    background-color: var(--sapol-navy);

    background-image:
        radial-gradient(
            circle at 50% 30%,
            #16406f 0%,
            var(--sapol-navy) 60%
        );
}

.start-card {
    max-width: 620px;

    text-align: center;

    color: white;
}

.start-badge {
    font-size: 80px;

    margin-bottom: 10px;
}

.start-card h1 {
    font-size: 62px;

    margin: 0 0 8px;

    letter-spacing: -1px;
}

.start-tagline {
    margin: 0 0 30px;

    color: #9fc2e8;

    font-size: 20px;
    font-weight: bold;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.start-introduction {
    margin: 0 auto 40px;

    max-width: 480px;

    color: #cbd9ea;

    font-size: 17px;
    line-height: 1.7;
}

.start-button {
    display: inline-block;

    padding: 20px 60px;

    background-color: white;
    color: var(--sapol-navy);

    border-radius: 999px;

    font-size: 22px;
    font-weight: bold;

    text-decoration: none;
}

.start-button:hover {
    background-color: #9fc2e8;
}

.start-duration {
    margin: 22px 0 0;

    color: #8ba7c7;

    font-size: 14px;
}


/* ------------------------------
   Passphrase Maker
------------------------------ */

.phrase-main {
    min-height: 75vh;

    padding: 50px 20px 60px;
}

.phrase-section {
    max-width: 860px;

    margin: 0 auto;

    background-color: white;

    padding: 45px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    text-align: center;
}

.phrase-icon {
    font-size: 55px;

    margin-bottom: 15px;
}

.phrase-section h2 {
    font-size: 32px;

    margin-top: 0;
    margin-bottom: 15px;

    color: var(--sapol-navy);
}

.phrase-lead {
    max-width: 620px;

    margin: 0 auto 35px;

    color: #555555;

    font-size: 17px;
    line-height: 1.6;
}


/* Password against passphrase */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-bottom: 35px;

    text-align: left;
}

.compare-card {
    padding: 22px;

    border-radius: 10px;
}

.compare-card h3 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 16px;
}

.compare-card code {
    display: block;

    margin-bottom: 12px;

    padding: 10px 12px;

    background-color: white;

    border-radius: 6px;

    font-size: 15px;

    word-break: break-all;
}

.compare-card p {
    margin: 0;

    color: #555555;

    font-size: 14px;
    line-height: 1.6;
}

.compare-weak {
    background-color: #fdeceb;
    border: 1px solid #f3c0bc;
}

.compare-weak h3 {
    color: #b91c1c;
}

.compare-strong {
    background-color: #e9f6ed;
    border: 1px solid #b6ddc3;
}

.compare-strong h3 {
    color: #14723a;
}


/* Three supporting points */

.phrase-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 35px;

    text-align: left;
}

.phrase-point {
    padding: 18px;

    background-color: #f4f6f8;

    border-radius: 8px;
}

.point-icon {
    display: block;

    font-size: 26px;

    margin-bottom: 8px;
}

.phrase-point p {
    margin: 0;

    color: #555555;

    font-size: 14px;
    line-height: 1.6;
}

.phrase-instruction {
    max-width: 560px;

    margin: 0 auto 30px;

    color: var(--sapol-navy);

    font-size: 16px;
    line-height: 1.6;
    font-weight: bold;
}


/* Progress through the four categories */

.phrase-progress {
    margin-bottom: 30px;
}

.progress-track {
    height: 8px;

    background-color: #e5e7eb;

    border-radius: 999px;

    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;

    background-color: var(--sapol-blue);

    transition: width 0.3s;
}

.progress-label {
    margin: 10px 0 0;

    color: #6b7280;

    font-size: 14px;
    font-weight: bold;
}


/* Words chosen so far */

.chosen-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 30px;
}

.chosen-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    width: 110px;

    padding: 12px 6px;

    border: 2px dashed #d1d5db;
    border-radius: 10px;

    color: #9ca3af;

    font-size: 12px;
    text-transform: capitalize;
}

.chosen-slot.filled {
    border-style: solid;
    border-color: var(--sapol-blue);

    background-color: var(--sapol-light);

    color: var(--sapol-navy);

    font-weight: bold;
}

.chosen-emoji {
    font-size: 28px;
    line-height: 1;
}


/* The twenty options */

.word-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

    margin-bottom: 30px;
}

.word-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 16px 6px;

    border: 2px solid #e5e7eb;
    border-radius: 10px;

    background-color: white;
    color: var(--sapol-navy);

    font-family: inherit;
    font-size: 13px;
    font-weight: bold;

    cursor: pointer;
}

.word-button:hover {
    border-color: var(--sapol-blue);
    background-color: var(--sapol-light);

    transform: translateY(-3px);
    transition: 0.15s;
}

.word-emoji {
    font-size: 34px;
    line-height: 1;
}

.word-label {
    word-break: break-word;
}

.picker-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.picker-actions button:disabled {
    border-color: #d1d5db;
    color: #9ca3af;

    cursor: not-allowed;
}

.picker-actions button:disabled:hover {
    background-color: white;
    color: #9ca3af;
}


/* Result */

.result-emoji {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-bottom: 28px;

    font-size: 64px;
    line-height: 1;
}

.passphrase-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    padding: 22px;

    background-color: var(--sapol-light);

    border: 2px solid var(--sapol-blue);
    border-radius: 10px;
}

.passphrase-box code {
    color: var(--sapol-navy);

    font-size: 22px;
    font-weight: bold;

    word-break: break-all;
}

.copy-status {
    min-height: 20px;

    margin: 10px 0 0;

    color: #14723a;

    font-size: 14px;
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 40px;

    margin: 30px 0;
}

.result-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    color: var(--sapol-blue);

    font-size: 30px;
    font-weight: bold;
}

.stat-label {
    color: #6b7280;

    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-note {
    max-width: 560px;

    margin: 0 auto 30px;

    padding: 15px;

    background-color: #f4f6f8;

    border-radius: 8px;

    color: #555555;

    font-size: 14px;
    line-height: 1.6;
}

.result-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    flex-wrap: wrap;
}


/* Note shown when a passphrase is handed to the Password Checker */

.handoff-note {
    margin: 0 0 20px;

    padding: 14px;

    background-color: var(--sapol-light);

    border-left: 4px solid var(--sapol-blue);
    border-radius: 4px;

    color: #374151;

    font-size: 14px;
    line-height: 1.6;
}


/* ------------------------------
   Next Step Button
------------------------------ */

.next-step {
    position: fixed;
    right: 25px;
    bottom: 25px;

    z-index: 10;

    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 14px 22px;

    background-color: var(--sapol-navy);
    color: white;

    border-radius: 10px;

    box-shadow: 0 6px 18px rgba(11, 37, 69, 0.3);

    text-decoration: none;
}

/* .hidden is declared earlier in the file, so it needs restating here */

.next-step.hidden {
    display: none;
}

.next-step:hover {
    background-color: var(--sapol-blue);
}


/* Sits on the dark start screen, so it needs the opposite treatment */

.next-step-light {
    position: absolute;

    background-color: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.35);

    box-shadow: none;
}

.next-step-light:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.next-step-label {
    color: #9fc2e8;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.next-step-name {
    font-size: 16px;
    font-weight: bold;
}


/* ------------------------------
   Sticker Studio
------------------------------ */

.sticker-main {
    min-height: 75vh;

    padding: 50px 8% 60px;
}

.sticker-intro {
    max-width: 750px;

    margin: 0 auto 35px;

    text-align: center;
}

.sticker-intro h2 {
    font-size: 32px;

    margin-top: 0;
    margin-bottom: 12px;

    color: var(--sapol-navy);
}

.sticker-intro p {
    margin: 0;

    color: #555555;

    font-size: 17px;
    line-height: 1.6;
}

.sticker-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);

    gap: 30px;

    max-width: 1150px;
    margin: 0 auto;

    align-items: start;
}

.sticker-panel,
.sticker-output {
    background-color: white;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sticker-panel h3,
.sticker-output h3 {
    font-size: 16px;

    margin-top: 0;
    margin-bottom: 15px;

    color: var(--sapol-navy);

    text-transform: uppercase;
    letter-spacing: 1px;
}

.panel-step {
    padding-top: 22px;
    margin-top: 22px;

    border-top: 1px solid #e5e7eb;
}


/* The four chosen words */

.studio-words {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.studio-word {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;

    background-color: var(--sapol-light);

    border-radius: 8px;

    color: var(--sapol-navy);

    font-weight: bold;
}

.studio-emoji {
    font-size: 26px;
    line-height: 1;
}


/* Layout and background choices */

.option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-button {
    flex: 1;

    padding: 10px 12px;

    border: 2px solid #e5e7eb;
    border-radius: 8px;

    background-color: white;
    color: #374151;

    font-family: inherit;
    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}

.option-button:hover {
    border-color: var(--sapol-blue);
}

.option-button.selected {
    border-color: var(--sapol-blue);
    background-color: var(--sapol-light);
    color: var(--sapol-navy);
}

.key-notice {
    padding: 14px;

    background-color: var(--sapol-light);

    border-left: 4px solid var(--sapol-blue);
    border-radius: 4px;

    color: #374151;

    font-size: 13px;
    line-height: 1.6;
}

.generate-button {
    display: block;

    width: 100%;

    margin-top: 25px;

    padding: 16px;

    background-color: var(--sapol-navy);

    font-size: 17px;

    text-align: center;
}

.generate-button:hover {
    background-color: var(--sapol-blue);
}


/* Preview, chequered so transparent stickers read clearly */

.sticker-stage {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

    border: 2px dashed #d1d5db;
    border-radius: 10px;

    background-color: #fafbfc;

    background-image:
        linear-gradient(45deg, #eef1f5 25%, transparent 25%),
        linear-gradient(-45deg, #eef1f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef1f5 75%),
        linear-gradient(-45deg, transparent 75%, #eef1f5 75%);

    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.sticker-stage canvas {
    max-width: 100%;
    height: auto;
}

.stage-actions {
    display: flex;
    justify-content: center;
    gap: 15px;

    margin-top: 20px;
}

.stage-actions .answer-button {
    text-decoration: none;
}


/* ------------------------------
   Game Mobile Layout
------------------------------ */

@media (max-width: 950px) {

    .sticker-layout {
        grid-template-columns: 1fr;
    }

    .sticker-main {
        padding: 40px 20px;
    }

    .phrase-section {
        padding: 30px 20px;
    }

    .compare-grid,
    .phrase-points {
        grid-template-columns: 1fr;
    }

    .word-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .start-card h1 {
        font-size: 44px;
    }

    .result-stats {
        gap: 25px;
    }

    .next-step {
        right: 15px;
        bottom: 15px;

        padding: 12px 16px;
    }

}


@media (max-width: 560px) {

    .word-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .phrase-main {
        padding: 30px 12px 50px;
    }

    .chosen-slot {
        width: 64px;

        padding: 10px 4px;

        font-size: 11px;
    }

    .chosen-strip {
        gap: 6px;
    }

}

/* Password Checker language selector */
.language-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.language-control select{font:inherit;padding:8px;border:1px solid #aab7c4;border-radius:6px;background:white;color:#0b2545}.language-control select:focus-visible{outline:3px solid #80bfff;outline-offset:2px}.site-header:has(.language-control){flex-wrap:wrap;gap:16px}html[lang="zh-CN"] .checker-shell{font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif}html[lang="zh-CN"] .checker-shell h1{line-height:1.4}html[lang="zh-TW"] .checker-shell{font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif}html[lang="zh-TW"] .checker-shell h1{line-height:1.4}
@media(max-width:600px){.site-header:has(.language-control) .navigation{justify-content:flex-start}.checker-shell .input-row{flex-wrap:wrap}.checker-shell .input-row input{min-width:0;max-width:100%}.checker-shell .actions{flex-wrap:wrap}}

@media(max-width:600px){body:has(.checker-shell) > .next-step{position:static;display:flex;width:fit-content;max-width:calc(100% - 32px);margin:20px auto;transform:none}}


/* Shared header alignment: logo left, navigation and language on the right. */
.site-header:has(.language-control) { justify-content: flex-start; gap: 20px; }
.site-header:has(.language-control) .navigation { margin-left: auto; }
.site-header .language-control { flex-shrink: 0; }
.welcome-page .start-screen { padding-top: 110px; padding-bottom: 130px; }
.welcome-language { position: absolute; top: 24px; right: 8%; color: white; }
html[lang="zh-CN"] body { font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif; }
html[lang="zh-CN"] .start-tagline { letter-spacing: 1px; }
html[lang="zh-TW"] body { font-family: Arial, "Microsoft JhengHei", "PingFang TC", sans-serif; }
html[lang="zh-TW"] .start-tagline { letter-spacing: 1px; }
@media (max-width: 1100px) {
 .site-header:has(.language-control) { display: grid; grid-template-columns: minmax(0,1fr) auto; }
 .site-header:has(.language-control) .navigation { grid-column: 1 / -1; grid-row: 2; margin-left: 0; justify-content: flex-start; }
 .site-header:has(.language-control) .language-control { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
 .site-header:has(.language-control) { padding: 20px; gap: 16px 8px; }
 .site-header:has(.language-control) .logo h1 { font-size: 24px; }
 .site-header:has(.language-control) .language-control { gap: 4px; font-size: 14px; }
 .welcome-language { top: 20px; right: 20px; }
 .welcome-page .start-screen { flex-direction: column; gap: 32px; padding: 100px 20px 32px; }
 .welcome-page .start-card h1 { font-size: clamp(36px, 10vw, 62px); }
 .welcome-page .start-button { padding: 18px 32px; }
 .welcome-page .next-step, .menu-page > .next-step { position: static; transform: none; width: fit-content; max-width: 100%; }
 .menu-page > .next-step { margin: 24px auto; max-width: calc(100% - 40px); }
}

/* Bilingual passphrase labels */
.phrase-language-note{font-size:.9rem;line-height:1.6;color:#536477;background:#edf4fb;border-radius:10px;padding:12px 16px;margin:0 0 24px}.phrase-main .word-label,.phrase-main .chosen-word{overflow-wrap:anywhere;line-height:1.4}.phrase-main .word-button,.phrase-main .chosen-slot{min-width:0}.phrase-main .compare-card code,.phrase-main #passphrase-text{overflow-wrap:anywhere;white-space:normal}.phrase-main .result-actions{flex-wrap:wrap}

/* ------------------------------
   Language switcher (gradient pill)
------------------------------ */

.language-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    padding: 3px 3px 3px 14px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(120deg, #2563eb, #7c3aed, #db2777, #2563eb);
    background-size: 300% 100%;
    background-position: 0% 50%;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: background-position 0.6s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.language-control:hover,
.language-control:focus-within {
    background-position: 100% 50%;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
    transform: translateY(-1px);
}

.language-control:focus-within {
    outline: 3px solid #80bfff;
    outline-offset: 2px;
}

.language-control label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* Globe icon */
.language-control label::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.language-control select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 32px 7px 14px;
    border: 0;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat,
        rgba(255, 255, 255, 0.18);
    transition: background-color 0.3s ease;
}

.language-control select:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.language-control select:focus-visible {
    outline: none;
}

.language-control option {
    color: #0b2545;
    background: white;
}

/* Home page: sit above the start screen in the top right corner */
.welcome-language {
    z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
    .language-control { transition: none; }
    .language-control:hover, .language-control:focus-within { transform: none; }
}

@media (max-width: 600px) {
    .language-control { padding-left: 10px; }
    .language-control label { padding-right: 6px; }
    /* Keep the globe, hide the word, but leave it for screen readers */
    .language-control label {
        font-size: 0;
    }
}
.language-control.welcome-language {
    position: absolute;
}


/* ------------------------------
   Passphrase intro, product page style
------------------------------ */

.phrase-main:has(> #phrase-intro:not(.hidden)) {
    padding: 0;
}

.phrase-section.apple-intro {
    --ai-ink: #1d1d1f;
    --ai-muted: #6e6e73;
    --ai-blue: #0071e3;
    --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);

    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #fbfbfd;
    box-shadow: none;
    overflow: clip;
    color: var(--ai-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

html[lang="zh-TW"] .phrase-section.apple-intro {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
}


/* Hero */

.ai-hero {
    position: relative;
    min-height: calc(100vh - 130px);
    display: grid;
    place-items: center;
    padding: 72px 24px 96px;
    isolation: isolate;
}

.ai-glow {
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    animation: ai-drift 14s ease-in-out infinite alternate;
}

.ai-glow-one {
    top: 6%;
    left: 12%;
    background: radial-gradient(circle, #7dd3fc, transparent 70%);
}

.ai-glow-two {
    right: 10%;
    bottom: 4%;
    background: radial-gradient(circle, #c4b5fd, transparent 70%);
    animation-delay: -7s;
}

@keyframes ai-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(60px, -40px) scale(1.15); }
}

.ai-hero-inner {
    max-width: 980px;
    will-change: transform, opacity;
}

.ai-note {
    display: inline-block;
    max-width: 640px;
    margin: 0 0 40px;
    padding: 10px 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: var(--ai-muted);
    font-size: 13px;
    line-height: 1.5;
    animation: ai-rise 1s var(--ai-ease) both;
}

.ai-key {
    width: 128px;
    height: 128px;
    margin: 0 auto 28px;
    display: grid;
    place-items: center;
    border-radius: 36px;
    background: linear-gradient(145deg, #ffffff, #eef2f7);
    box-shadow:
        0 30px 60px -20px rgba(0, 113, 227, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 64px;
    animation: ai-rise 1s 0.1s var(--ai-ease) both;
}

.ai-key span {
    display: block;
    animation: ai-float 5s ease-in-out infinite;
}

@keyframes ai-float {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
}

.apple-intro .ai-title {
    margin: 0 0 24px;
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    background: linear-gradient(100deg, #1d1d1f 0%, #1d1d1f 30%, #0071e3 48%, #a855f7 58%, #1d1d1f 76%, #1d1d1f 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        ai-rise 1.1s 0.2s var(--ai-ease) both,
        ai-shimmer 7s 1.3s ease-in-out infinite;
}

@keyframes ai-shimmer {
    0% { background-position: 100% 0; }
    50%, 100% { background-position: 0% 0; }
}

.ai-lead {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ai-muted);
    font-size: clamp(19px, 2.4vw, 28px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    animation: ai-rise 1.1s 0.35s var(--ai-ease) both;
}

@keyframes ai-rise {
    from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

.ai-scroll-cue {
    width: 26px;
    height: 42px;
    margin: 56px auto 0;
    border: 2px solid rgba(29, 29, 31, 0.25);
    border-radius: 999px;
    animation: ai-rise 1s 0.8s var(--ai-ease) both;
}

.ai-scroll-cue span {
    display: block;
    width: 4px;
    height: 8px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(29, 29, 31, 0.45);
    animation: ai-cue 1.8s ease-in-out infinite;
}

@keyframes ai-cue {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(14px); }
}


/* Scroll reveals, only once the script has taken over */

.apple-intro.ai-ready [data-reveal] {
    opacity: 0;
    transform: translateY(60px) scale(0.97);
    transition: opacity 1s var(--ai-ease), transform 1s var(--ai-ease);
}

.apple-intro.ai-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.apple-intro .ai-points [data-reveal]:nth-child(2) { transition-delay: 0.12s; }
.apple-intro .ai-points [data-reveal]:nth-child(3) { transition-delay: 0.24s; }
.apple-intro .ai-compare-grid [data-reveal]:nth-child(2) { transition-delay: 0.15s; }


/* Comparison, on a dark stage */

.ai-compare {
    padding: 120px 24px;
    background: radial-gradient(120% 80% at 50% 0%, #1c2433 0%, #000000 60%);
    color: #f5f5f7;
}

.ai-compare-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
}

.ai-card {
    position: relative;
    padding: 44px 40px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.ai-card::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
}

.ai-card-weak::before { background: #ff453a; }
.ai-card-strong::before { background: #30d158; }

.ai-card h3 {
    position: relative;
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ai-card-weak h3 { color: #ff6961; }
.ai-card-strong h3 { color: #4ade80; }

.ai-code {
    position: relative;
    display: block;
    margin-bottom: 28px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}

.ai-code-weak {
    color: #f5f5f7;
}

.ai-card-weak.is-visible .ai-code-weak {
    animation: ai-glitch 0.5s 0.6s steps(2) 2;
}

@keyframes ai-glitch {
    0%, 100% { transform: none; text-shadow: none; }
    25% { transform: translateX(-3px); text-shadow: 3px 0 #ff453a, -3px 0 #0a84ff; }
    50% { transform: translateX(3px); text-shadow: -3px 0 #ff453a, 3px 0 #0a84ff; }
    75% { transform: translateX(-1px); }
}

.ai-code-strong .ai-word {
    display: inline-block;
    background: linear-gradient(90deg, #5ac8fa, #30d158);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Words and dashes alternate, so the words are the odd children */
.ai-code-strong .ai-word:nth-child(3) { background-image: linear-gradient(90deg, #30d158, #ffd60a); }
.ai-code-strong .ai-word:nth-child(5) { background-image: linear-gradient(90deg, #ff9f0a, #ff375f); }
.ai-code-strong .ai-word:nth-child(7) { background-image: linear-gradient(90deg, #bf5af2, #5e5ce6); }

html[lang^="zh"] .apple-intro .ai-title,
html[lang^="zh"] .ai-lead,
html[lang^="zh"] .ai-instruction {
    letter-spacing: 0;
}

.ai-code-strong .ai-dash {
    color: rgba(245, 245, 247, 0.4);
}

.apple-intro.ai-ready .ai-code-strong .ai-word,
.apple-intro.ai-ready .ai-code-strong .ai-dash {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ai-ease), transform 0.6s var(--ai-ease);
    transition-delay: calc(0.45s + var(--i) * 0.18s);
}

.apple-intro.ai-ready .ai-card-strong.is-visible .ai-word,
.apple-intro.ai-ready .ai-card-strong.is-visible .ai-dash {
    opacity: 1;
    transform: none;
}

.ai-meter {
    position: relative;
    height: 6px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.ai-meter span {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    transform-origin: left;
    transition: transform 1.4s 0.4s var(--ai-ease);
}

.ai-card-weak .ai-meter span { background: linear-gradient(90deg, #ff453a, #ff9f0a); }
.ai-card-strong .ai-meter span { background: linear-gradient(90deg, #0a84ff, #30d158); }

.apple-intro.ai-ready .ai-meter span { transform: scaleX(0); }
.apple-intro.ai-ready .is-visible .ai-meter span { transform: scaleX(1); }

.ai-count {
    position: relative;
    margin: 0 0 20px;
    color: rgba(245, 245, 247, 0.6);
    font-size: 15px;
}

.ai-count-number {
    color: #f5f5f7;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ai-card-body {
    position: relative;
    margin: 0;
    color: rgba(245, 245, 247, 0.72);
    font-size: 17px;
    line-height: 1.55;
}


/* Three points */

.ai-points {
    max-width: 1080px;
    margin: 0 auto;
    padding: 100px 24px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.ai-point {
    --x: 50%;
    --y: 0%;
    position: relative;
    padding: 36px 30px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 20px 40px -24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.apple-intro.ai-ready .ai-point.is-visible {
    transition: opacity 1s var(--ai-ease), transform 0.5s var(--ai-ease), box-shadow 0.5s var(--ai-ease);
}

.ai-point::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--x) var(--y), rgba(0, 113, 227, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.ai-point:hover::after {
    opacity: 1;
}

.apple-intro .ai-point.is-visible:hover,
.apple-intro:not(.ai-ready) .ai-point:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 36px 60px -28px rgba(0, 113, 227, 0.35);
}

.ai-point-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(145deg, #f5f5f7, #e8ecf2);
    font-size: 34px;
    transition: transform 0.5s var(--ai-ease);
}

.ai-point:hover .ai-point-icon {
    transform: scale(1.1) rotate(-6deg);
}

.ai-point p {
    margin: 0;
    color: var(--ai-muted);
    font-size: 17px;
    line-height: 1.5;
}

.ai-point strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ai-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}


/* Call to action */

.ai-cta {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px 140px;
}

.ai-cta-emoji {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 32px;
    font-size: 44px;
}

.ai-cta-emoji span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.3);
    animation: ai-bob 3.2s ease-in-out infinite;
}

.ai-cta-emoji span:nth-child(2) { animation-delay: -0.8s; }
.ai-cta-emoji span:nth-child(3) { animation-delay: -1.6s; }
.ai-cta-emoji span:nth-child(4) { animation-delay: -2.4s; }

@keyframes ai-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.ai-instruction {
    margin: 0 0 40px;
    color: var(--ai-ink);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.ai-button {
    position: relative;
    padding: 18px 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, #0071e3, #5e5ce6, #0071e3);
    background-size: 200% 100%;
    color: #ffffff;
    font: inherit;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(0, 113, 227, 0.6);
    transition: transform 0.4s var(--ai-ease), box-shadow 0.4s var(--ai-ease), background-position 0.8s ease;
}

.ai-button::after {
    content: "→";
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.4s var(--ai-ease);
}

.ai-button:hover {
    background-position: 100% 0;
    transform: scale(1.04);
    box-shadow: 0 20px 40px -12px rgba(94, 92, 230, 0.65);
}

.ai-button:hover::after {
    transform: translateX(5px);
}

.ai-button:active {
    transform: scale(0.98);
}

.ai-button:focus-visible {
    outline: 3px solid #80bfff;
    outline-offset: 4px;
}


/* Smaller screens */

@media (max-width: 800px) {
    .ai-compare-grid,
    .ai-points {
        grid-template-columns: 1fr;
    }

    .ai-compare { padding: 80px 16px; }
    .ai-points { padding: 80px 16px 24px; }
    .ai-card { padding: 34px 26px; }
    .ai-hero { padding: 48px 16px 72px; min-height: auto; }
    .ai-key { width: 104px; height: 104px; font-size: 52px; border-radius: 30px; }
    .ai-cta { padding: 56px 16px 96px; }
    .ai-cta-emoji { gap: 10px; }
    .ai-cta-emoji span { width: 60px; height: 60px; font-size: 34px; border-radius: 18px; }
}


/* Respect a request for less motion */

@media (prefers-reduced-motion: reduce) {
    .apple-intro *,
    .apple-intro *::before,
    .apple-intro *::after {
        animation: none !important;
        transition: none !important;
    }

    .apple-intro.ai-ready [data-reveal],
    .apple-intro.ai-ready .ai-code-strong .ai-word,
    .apple-intro.ai-ready .ai-code-strong .ai-dash {
        opacity: 1;
        transform: none;
    }

    .apple-intro.ai-ready .ai-meter span {
        transform: none;
    }
}