@font-face {
    font-family: 'FBTI Desktop Source Han Regular';
    src: url('assets/fonts/fbti-source-han-regular-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FBTI Desktop Source Han Bold';
    src: url('assets/fonts/fbti-source-han-bold-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FBTI Desktop Source Han Heavy';
    src: url('assets/fonts/fbti-source-han-heavy-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@media (min-width: 901px) {
    :root {
        --desktop-font-regular: 'FBTI Desktop Source Han Regular', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
        --desktop-font-bold: 'FBTI Desktop Source Han Bold', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
        --desktop-font-heavy: 'FBTI Desktop Source Han Heavy', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
    }

    html,
    body,
    .app {
        min-height: 100%;
        background: #ffffff;
        font-family: var(--desktop-font-regular);
    }

    body {
        overflow-x: hidden;
    }

    #home-page,
    #home-page *,
    #quiz-page,
    #quiz-page *,
    #nickname-page,
    #nickname-page *,
    #result-page,
    #result-page * {
        font-weight: 400 !important;
    }

    .page.active {
        display: block;
    }

    #home-page,
    #quiz-page,
    #nickname-page {
        position: relative;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
        background:
            linear-gradient(to bottom, #ffffff 0 var(--desktop-header-bottom, 100px), transparent var(--desktop-header-bottom, 100px) var(--desktop-common-band-bottom, 250px), #ffffff var(--desktop-common-band-bottom, 250px) var(--desktop-footer-top, 1030px), #7653d8 var(--desktop-footer-top, 1030px) 100%),
            linear-gradient(105deg, #cfe6ff 0%, #f8d8e7 62%, #9a7add 100%);
    }

    #home-page {
        background:
            linear-gradient(to bottom, #ffffff 0 var(--desktop-header-bottom, 100px), transparent var(--desktop-header-bottom, 100px) var(--desktop-home-band-bottom, 675px), #ffffff var(--desktop-home-band-bottom, 675px) var(--desktop-footer-top, 1030px), #7653d8 var(--desktop-footer-top, 1030px) 100%),
            linear-gradient(105deg, #cfe6ff 0%, #f8d8e7 62%, #9a7add 100%);
    }

    .page::before,
    .page::after,
    #home-page .hero::before,
    #quiz-page::before {
        content: none;
        display: none;
    }

    #cover-image {
        display: none !important;
    }

    #home-page .hero {
        position: relative;
        display: block;
        width: 100%;
        height: 100svh;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
    }

    #home-page .desktop-stage,
    #quiz-page .quiz-container,
    #nickname-page .nickname-container {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1920px;
        max-width: none;
        height: 1080px;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        transform: translate(-50%, -50%) scale(var(--desktop-stage-scale, 1));
        transform-origin: center center;
        background: transparent;
    }

    .desktop-header {
        --header-top: 35px;
        --header-left: 475px;
        position: absolute;
        top: var(--header-top);
        left: var(--header-left);
        right: calc(50% - 745px);
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .desktop-header-title {
        margin-right: auto;
        padding-left: 52px;
        background: radial-gradient(circle at 17px 50%, #7653d8 0 15px, transparent 16px);
        color: #7653d8;
        font-size: 34px;
        font-family: var(--desktop-font-heavy);
        font-weight: 400 !important;
        line-height: 1;
        white-space: nowrap;
    }

    .desktop-header-logo {
        --logo-offset-right: 250px;
        --logo-width: 150px;
        --logo-height: 40px;
        display: block;
        width: var(--logo-width);
        height: var(--logo-height);
        margin-right: var(--logo-offset-right);
        background-image: url('assets/ui/logo_横_PC.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
    }

    #home-page .hero-content {
        position: absolute;
        top: 0;
        left: 477px;
        z-index: 12;
        display: block;
        width: 620px;
        max-width: none;
        text-align: left;
        transform: none;
    }

    #home-page .hero-content > * {
        text-align: left;
    }

    #home-page .brand {
        position: absolute;
        top: 252px;
        left: 0;
        margin: 0;
        color: #7653d8;
        font-size: 142px;
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: 0;
    }

    #home-page .tagline {
        position: absolute;
        top: 386px;
        left: 0;
        margin: 0;
        color: #666666;
        font-size: 50px;
        font-family: var(--desktop-font-bold);
        font-weight: 400 !important;
        font-synthesis: none;
        line-height: 1.08;
        text-align: left;
    }

    #home-page .credits {
        position: absolute;
        top: 450px;
        left: 0;
        margin: 0;
    }

    #home-page .credit-line {
        color: #7653d8;
        font-size: 36px;
        font-family: var(--fbti-font-home-credit);
        font-weight: 400 !important;
        font-synthesis: none;
        line-height: 1.1;
        text-align: left;
    }

    #home-page .description {
        position: absolute;
        top: 572px;
        left: 0;
        margin: 0;
        color: #000000;
        font-size: 28px;
        font-weight: 400 !important;
        line-height: 1.25;
    }

    #home-page .btn-primary {
        position: absolute;
        top: 720px;
        left: 0;
        width: 270px;
        height: 75px;
        min-height: 75px;
        padding: 0;
        border-radius: 999px;
        background: #00ffc2;
        box-shadow: none;
        color: #18143d;
        font-size: 31px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        word-break: keep-all;
    }

    #home-page .hero-visual {
        position: absolute;
        top: 252px;
        left: 1009px;
        z-index: 10;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 367px;
        height: 470px;
        margin: 0;
        clip-path: none;
        pointer-events: auto;
        touch-action: pan-y;
    }

    #home-page .hero-character {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    #home-page .hero-indicators {
        position: absolute;
        left: 1168px;
        top: 760px;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin: 0;
    }

    #home-page .hero-dot {
        width: 15px;
        height: 15px;
        min-width: 15px;
        min-height: 15px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #cfcfcf;
    }

    #home-page .hero-dot.is-active {
        background: #7653d8;
    }

    #home-page .hero-stats {
        position: absolute;
        left: 495px;
        bottom: 125px;
        z-index: 12;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 120px;
        width: 1075px;
        margin: 0;
        text-align: center;
    }

    #home-page .hero-stat strong {
        display: block;
        color: #7653d8;
        font-size: 41px;
        font-weight: 400 !important;
        line-height: 1;
    }

    #home-page .hero-stat span {
        display: block;
        margin-top: 14px;
        color: #666666;
        font-size: 22px;
        font-weight: 400 !important;
        line-height: 1.1;
        white-space: nowrap;
    }

    .powered-by,
    #home-page .powered-by,
    #quiz-page .powered-by,
    #nickname-page .powered-by,
    #result-page .result-powered-by {
        position: absolute;
        left: 50%;
        bottom: 18px;
        z-index: 30;
        transform: translateX(-50%);
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        font-family: var(--desktop-font-regular);
        font-weight: 400 !important;
        font-synthesis: none;
        line-height: 1;
        white-space: nowrap;
    }

    #quiz-page .quiz-container::after,
    #nickname-page .nickname-container::after {
        content: 'FBTI 足球观赛人格测试';
        position: absolute;
        display: block !important;
        top: 100px;
        left: 0;
        z-index: 20;
        width: 100%;
        height: 150px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        color: #7653d8;
        font-size: 30px;
        font-family: var(--desktop-font-heavy);
        font-weight: 400 !important;
        line-height: 150px;
        text-align: center;
        white-space: nowrap;
        letter-spacing: 0;
        word-spacing: 0;
        pointer-events: none;
    }

    #quiz-page .progress-bar {
        position: absolute;
        top: 294px;
        left: 475px;
        width: 970px;
        height: 12px;
        margin: 0;
        border-radius: 999px;
        background: #7653d8;
    }

    #quiz-page .progress-fill {
        height: 100%;
        border-radius: inherit;
        background: #08ebb0;
    }

    #quiz-page .progress-text {
        position: absolute;
        top: 322px;
        left: 475px;
        width: 970px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        color: transparent;
        font-size: 0;
    }

    #quiz-page .progress-text::before {
        content: 'Question ' attr(data-question);
        color: #7653d8;
        font-size: 20px;
        font-weight: 400 !important;
        line-height: 1;
    }

    #quiz-page .progress-text::after {
        content: attr(data-progress);
        color: #626262;
        font-size: 20px;
        font-weight: 400 !important;
        line-height: 1;
    }

    #quiz-page .question-card {
        position: absolute;
        top: 400px;
        left: 611px;
        width: 700px;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
    }

    #quiz-page .question-text {
        margin: 0 0 44px;
        color: #111111;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
    }

    #quiz-page .options-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #quiz-page .option-btn {
        display: flex;
        align-items: center;
        width: 700px;
        min-height: 52px;
        padding: 0 36px;
        border: 2px solid #cfcfd4;
        border-radius: 13px;
        background: #ffffff;
        color: #111111;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.25;
        text-align: left;
    }

    #quiz-page .option-marker {
        flex: 0 0 32px;
        width: 32px;
        color: #111111;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }

    #quiz-page .option-btn.is-selected {
        background: #eeecff;
        border-color: #7653d8;
    }

    #quiz-page .option-btn.is-selected .option-marker {
        color: #7653d8;
    }

    #quiz-page .quiz-actions {
        position: absolute;
        top: 820px;
        left: 611px;
        width: 700px;
        display: flex;
        justify-content: space-between;
        margin: 0;
    }

    #quiz-page .quiz-nav-button {
        width: 140px;
        height: 60px;
        border: 2px solid #cfcfd4;
        border-radius: 13px;
        background: #ffffff;
        color: #111111;
        font-size: 18px;
        font-weight: 500;
    }

    #quiz-page .quiz-nav-button:not(:disabled) {
        border-color: #7653d8;
    }

    #nickname-page .nickname-container::after {
        content: '请填写您的昵称';
        font-size: 40px;
    }

    #nickname-page .nickname-card {
        position: absolute;
        top: 310px;
        left: 50%;
        width: 330px;
        max-width: none;
        margin: 0;
        transform: translateX(-50%);
        text-align: center;
    }

    #nickname-page .nickname-title {
        display: none;
    }

    #nickname-page .nickname-input-wrapper {
        width: 330px;
        margin: 0 0 20px;
    }

    #nickname-page .nickname-input {
        width: 100%;
        height: 65px;
        padding: 0 24px;
        border: 2px solid #cfcfd4;
        border-radius: 999px;
        background: #ffffff;
        color: #333333;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
    }

    #nickname-page .nickname-card .btn-primary {
        width: 330px;
        height: 65px;
        min-height: 65px;
        padding: 0;
        border-radius: 999px;
        background: #08ebb0;
        color: #101936;
        font-size: 28px;
        font-weight: 500;
    }

    #nickname-page .nickname-card::after {
        content: '真实姓名测得更准哦！';
        display: block;
        margin-top: 24px;
        color: #888888;
        font-size: 15px;
        font-weight: 500;
    }

    #result-page {
        position: relative;
        min-height: var(--desktop-result-height, 1440px);
        height: var(--desktop-result-height, 1440px);
        overflow-x: hidden;
        overflow-y: auto;
        background:
            linear-gradient(to bottom, #ffffff 0 calc(100px * var(--desktop-result-scale, 1)), transparent calc(100px * var(--desktop-result-scale, 1)) calc(250px * var(--desktop-result-scale, 1)), #ffffff calc(250px * var(--desktop-result-scale, 1)) calc(var(--desktop-result-footer-top, 1390px) * var(--desktop-result-scale, 1)), #7653d8 calc(var(--desktop-result-footer-top, 1390px) * var(--desktop-result-scale, 1)) 100%),
            linear-gradient(105deg, #cfe6ff 0%, #f8d8e7 62%, #9a7add 100%);
    }

    #result-page .result-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1920px;
        max-width: none;
        height: var(--desktop-result-canvas-height, 1440px);
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        transform: translateX(-50%) scale(var(--desktop-result-scale, 1));
        transform-origin: top center;
        background: transparent;
    }

    #poster-display {
        position: absolute;
        inset: 0;
        width: 1920px;
        height: var(--desktop-result-canvas-height, 1440px);
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #111111;
    }

    #poster-display::before {
        content: attr(data-result-title);
        position: absolute;
        top: 137px;
        left: 475px;
        width: 475px;
        margin: 0;
        padding: 0;
        border: 0;
        color: #7653d8;
        font-size: 32px;
        font-weight: 900;
        line-height: 1.35;
        white-space: pre-line;
    }

    #poster-display .poster-greeting,
    #poster-display .poster-label,
    #poster-display .poster-stats,
    #poster-display .poster-dimensions,
    .save-hint-area {
        display: none !important;
    }

    #poster-display .poster-header {
        position: absolute;
        top: 285px;
        left: 475px;
        display: block;
        width: 475px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #poster-display .poster-type-name {
        margin: 0;
        color: #7653d8;
        font-size: 58px;
        font-weight: 900;
        line-height: 1;
    }

    #poster-display .poster-header::after {
        content: attr(data-result-type);
        display: block;
        margin-top: 10px;
        color: #666666;
        font-size: 50px;
        font-weight: 900;
        line-height: 1;
    }

    #poster-display .poster-subtitle {
        position: absolute;
        top: 145px;
        left: 0;
        width: 475px;
        margin: 0;
        padding: 12px 0 14px;
        border-top: 3px solid #7653d8;
        border-bottom: 3px solid #7653d8;
        color: #7653d8;
        font-size: 22px;
        font-weight: 900;
        line-height: 1.25;
    }

    #poster-display .poster-visual {
        position: absolute;
        top: 265px;
        left: 1030px;
        width: 374px;
        height: 500px;
        margin: 0;
        padding: 0;
        border: 0;
        z-index: 2;
    }

    #poster-display .poster-type-icon,
    #poster-display .poster-type-icon img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    #poster-display .poster-type-icon img {
        object-fit: contain;
        object-position: center center;
    }

    #poster-display .poster-description {
        position: absolute;
        top: 575px;
        left: 475px;
        width: 475px;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    #poster-display .poster-description p {
        margin: 0;
        color: #111111;
        font-family: var(--desktop-font-regular);
        font-size: 15px;
        font-weight: 400;
        font-synthesis: none;
        line-height: 1.75;
        white-space: pre-line;
    }

    #poster-display .poster-extra {
        position: absolute;
        top: 760px;
        left: 475px;
        display: block !important;
        width: 980px;
        margin: 0;
    }

    #poster-display .poster-interpretation-card {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    #poster-display .poster-interpretation-card::before,
    #poster-display .poster-interpretation-card::after {
        content: none;
    }

    #poster-display .poster-interpretation-card h3 {
        margin: 0 0 28px;
        padding: 0 0 18px;
        border-bottom: 3px solid #7653d8;
        color: #7653d8;
        font-size: 20px;
        font-weight: 900;
    }

    #poster-display .poster-interpretation-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
        align-items: start;
        padding-bottom: 28px;
        border-bottom: 3px solid #7653d8;
        text-align: left;
    }

    #poster-display .poster-interpretation-card p {
        margin: 0;
        padding-bottom: 0;
        border-bottom: 0;
        color: #111111;
        columns: auto;
        column-gap: normal;
        font-family: var(--desktop-font-regular);
        font-size: 14px;
        font-weight: 400;
        font-synthesis: none;
        line-height: 1.8;
        white-space: pre-line;
        text-align: left;
    }

    #poster-export .poster-interpretation-card {
        padding: 56px 55px 250px !important;
        background-color: #ffffff !important;
        background-image:
            url('assets/ui/interpretation-card-top.png?v=20260530-card-fix-v3'),
            url('assets/ui/interpretation-card-bottom.png?v=20260530-card-fix-v3'),
            url('assets/ui/interpretation-card-middle.png?v=20260530-card-fix-v3') !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
        background-position: top center, bottom center, top 180px center !important;
        background-size: 100% auto, 100% auto, 100% calc(100% - 426px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #poster-export .poster-interpretation-card::before,
    #poster-export .poster-interpretation-card::after {
        content: none !important;
    }

    #result-page .page-actions {
        position: absolute;
        top: var(--desktop-result-actions-top, 1198px);
        left: 475px;
        z-index: 6;
        display: flex;
        gap: 28px;
        width: auto;
        margin: 0;
    }

    #result-page .page-actions .btn-primary,
    #result-page .page-actions .btn-secondary {
        width: 136px;
        min-width: 136px;
        height: 60px;
        min-height: 60px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #08ebb0;
        color: #101936;
        font-size: 26px;
        font-weight: 500;
        line-height: 1;
    }

    #result-page .page-actions .btn-primary {
        background: #7653d8;
        color: #ffffff;
        font-size: 0;
    }

    #result-page .page-actions .btn-primary::after {
        content: '打印';
        font-size: 26px;
    }

    html:not([data-fbti-entry="print-pc"]) #result-page .page-actions .btn-primary {
        display: none;
    }

    #result-page .page-actions .btn-secondary:first-child {
        font-size: 0;
    }

    #result-page .page-actions .btn-secondary:first-child::after {
        content: '返回';
        font-size: 26px;
    }

    .desktop-result-qrcode {
        display: block;
        position: absolute;
        top: var(--desktop-result-qrcode-top, 1190px);
        left: 1310px;
        z-index: 7;
        width: 180px;
        text-align: center;
    }

    #desktop-result-qrcode {
        width: 132px;
        height: 132px;
        margin: 0 auto;
    }

    #desktop-result-qrcode canvas,
    #desktop-result-qrcode img {
        display: block;
        width: 132px !important;
        height: 132px !important;
    }

    .desktop-result-qrcode p {
        margin: 18px 0 0;
        color: #7653d8;
        font-family: var(--desktop-font-heavy);
        font-size: 20px;
        font-weight: 400 !important;
        font-synthesis: none;
        line-height: 1;
        letter-spacing: 0;
        text-decoration: none;
        white-space: nowrap;
    }

    #result-page .result-powered-by {
        top: calc(var(--desktop-result-footer-top, 1390px) + 17px);
        bottom: auto;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
    }

    .desktop-header-title,
    #quiz-page .quiz-container::after,
    #nickname-page .nickname-container::after,
    #home-page .brand,
    #home-page .hero-stat strong,
    #quiz-page .progress-text::before,
    #poster-display::before,
    #poster-display .poster-type-name,
    #poster-display .poster-interpretation-card h3 {
        font-family: var(--desktop-font-heavy);
        font-weight: 400 !important;
    }

    #home-page .description,
    #home-page .btn-primary,
    #home-page .hero-stat span,
    #quiz-page .progress-text::after,
    #quiz-page .question-text,
    #quiz-page .option-btn,
    #quiz-page .option-marker,
    #quiz-page .quiz-nav-button,
    #nickname-page .nickname-input,
    #nickname-page .nickname-card .btn-primary,
    #nickname-page .nickname-card::after,
    #poster-display .poster-header::after,
    #poster-display .poster-subtitle,
    #poster-display .poster-description p,
    #poster-display .poster-interpretation-card p,
    .desktop-result-qrcode p,
    .powered-by,
    #home-page .powered-by,
    #quiz-page .powered-by,
    #nickname-page .powered-by,
    #result-page .result-powered-by {
        font-family: var(--desktop-font-regular);
        font-weight: 400 !important;
        font-synthesis: none;
    }

    #home-page .powered-by,
    #quiz-page .powered-by,
    #nickname-page .powered-by {
        top: 1047px;
        bottom: auto;
        height: 16px;
        font-family: var(--desktop-font-heavy);
        font-weight: 400 !important;
        font-synthesis: none;
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 0;
        text-align: center;
    }

    #result-page .result-powered-by {
        font-family: var(--desktop-font-heavy);
        font-weight: 400 !important;
        letter-spacing: 0;
    }

    #poster-display .poster-header::after {
        font-family: var(--desktop-font-heavy);
        font-weight: 900 !important;
    }

    #result-page .desktop-result-qrcode p {
        color: #7653d8;
        font-family: var(--desktop-font-regular);
        font-size: 20px;
        font-weight: 400 !important;
        font-synthesis: none;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }
}