/* =========================================================
   FINAL SUBMISSION RESULT LAYOUT
   Completely isolated from the legacy result CSS.
   One 1600 x 900 artboard is scaled as a single unit.
========================================================= */
:root{
    --submission-bg:#58a6d8;
    --submission-dark:#075aaa;
    --submission-border:#123b73;
    --submission-body:#64addb;
    --submission-yellow:#ffb729;
}

html, body{
    width:100%;
    min-height:100%;
    margin:0;
}

body:has(#result.screen.active){
    overflow:hidden !important;
    background:var(--submission-bg) !important;
}

#result.screen{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:var(--submission-bg) !important;
}

#result.screen.active{
    display:block !important;
}

#result .submission-result-stage{
    --result-scale:1;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:1600px !important;
    height:900px !important;
    min-width:1600px !important;
    min-height:900px !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    transform:translate(-50%, -50%) scale(var(--result-scale)) !important;
    transform-origin:center center !important;
    background:var(--submission-bg) !important;
    color:#fff !important;
    font-family:"Be Vietnam Pro", "Segoe UI", Arial, sans-serif !important;
    isolation:isolate !important;
    container-type:size;
}

/* Remove the two faint decorative rectangles from the Figma background. */
#result .submission-result-stage::before,
#result .submission-result-stage::after{
    content:none !important;
    display:none !important;
}

/* ---------- Heading ---------- */
#result .submission-result-heading{
    position:absolute !important;
    left:58px !important;
    top:48px !important;
    width:790px !important;
    height:160px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:30 !important;
    overflow:visible !important;
}

#result .submission-result-label{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:250px !important;
    height:66px !important;
    box-sizing:border-box !important;
    border:3px solid var(--submission-border) !important;
    background:rgba(255,255,255,.06) !important;
    color:var(--submission-border) !important;
    font-size:38px !important;
    font-weight:500 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    z-index:2 !important;
}

#result .submission-result-heading #resultTitle{
    position:absolute !important;
    left:44px !important;
    top:62px !important;
    display:flex !important;
    align-items:center !important;
    width:max-content !important;
    max-width:740px !important;
    height:92px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:7px 25px 11px !important;
    border:3px solid var(--submission-border) !important;
    background:var(--submission-dark) !important;
    color:var(--submission-yellow) !important;
    font-family:"Roboto Condensed", "Arial Narrow", sans-serif !important;
    font-size:64px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    z-index:1 !important;
}
#result .result-b #resultTitle{font-size:55px !important;}
#result .result-c #resultTitle{font-size:56px !important;}
#result .result-d #resultTitle{font-size:61px !important;}

/* ---------- Quote ---------- */
#result .submission-result-quote{
    position:absolute !important;
    right:145px !important;
    top:58px !important;
    width:600px !important;
    min-height:132px !important;
    height:auto !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:23px 72px 24px 50px !important;
    border:0 !important;
    border-radius:17px 17px 0 17px !important;
    background:var(--submission-dark) !important;
    color:#fff !important;
    overflow:visible !important;
    z-index:30 !important;
}
#result .submission-result-quote::after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    bottom:-50px !important;
    width:0 !important;
    height:0 !important;
    border-top:51px solid var(--submission-dark) !important;
    border-left:76px solid transparent !important;
}
#result .submission-result-quote p{
    width:100% !important;
    max-height:86px !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-size:25px !important;
    font-weight:600 !important;
    line-height:1.38 !important;
    text-align:left !important;
    overflow:hidden !important;
}
#result .result-c .submission-result-quote p{font-size:23px !important;}
#result .submission-quote-open,
#result .submission-quote-close{
    position:absolute !important;
    color:var(--submission-yellow) !important;
    font-family:Georgia, "Times New Roman", serif !important;
    font-size:92px !important;
    font-weight:900 !important;
    line-height:.7 !important;
    pointer-events:none !important;
    z-index:3 !important;
}
#result .submission-quote-open{
    left:-45px !important;
    top:0 !important;
}
#result .submission-quote-close{
    right:17px !important;
    bottom:-46px !important;
}

/* ---------- Yellow orbit component ---------- */
#result .submission-result-orbit{
    position:absolute !important;
    left:760px !important;
    top:184px !important;
    display:block !important;
    width:420px !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    clip-path:none !important;
    filter:none !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:none !important;
    /* Always above every character image, but below text cards and the quote. */
    z-index:15 !important;
}

/* ---------- Cards ---------- */
#result .submission-result-card{
    position:absolute !important;
    display:grid !important;
    grid-template-rows:64px minmax(0, 1fr) !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    border:3px solid var(--submission-border) !important;
    border-radius:0 !important;
    background:var(--submission-body) !important;
    color:#fff !important;
    overflow:hidden !important;
    z-index:20 !important;
}

#result .submission-result-main-card{
    left:58px !important;
    top:270px !important;
    width:620px !important;
    height:250px !important;
}
#result .submission-result-warning-card{
    left:58px !important;
    top:545px !important;
    width:475px !important;
    height:205px !important;
}
#result .submission-result-tip-card{
    left:660px !important;
    top:470px !important;
    width:390px !important;
    height:215px !important;
}

#result .submission-result-card h3{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 25px !important;
    background:var(--submission-dark) !important;
    color:#fff !important;
    font-family:"Roboto Condensed", "Arial Narrow", sans-serif !important;
    font-size:28px !important;
    font-weight:800 !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
}
#result .submission-result-card p{
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    padding:18px 24px 16px !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:500 !important;
    line-height:1.36 !important;
    text-align:left !important;
    overflow:hidden !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
}
#result .result-b .submission-result-main-card p{font-size:16.7px !important; line-height:1.34 !important;}
#result .result-b .submission-result-tip-card p{font-size:15.8px !important; line-height:1.34 !important;}
#result .result-c .submission-result-main-card p{font-size:16.7px !important; line-height:1.34 !important;}
#result .result-d .submission-result-main-card p{font-size:16.8px !important; line-height:1.34 !important;}
#result .result-d .submission-result-tip-card p{font-size:16.5px !important; line-height:1.35 !important;}

/* ---------- Figma figure components ---------- */
#result .submission-result-visual{
    position:absolute !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    pointer-events:none !important;
    z-index:8 !important;
}
#result .submission-result-visual #resultImage{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:none !important;
    opacity:1 !important;
    transform:none !important;
    image-rendering:auto !important;
}
/* Keep the second information card completely separate from every character. */
#result .result-a .submission-result-visual{
    right:40px !important;
    top:245px !important;
    width:480px !important;
    height:585px !important;
}
#result .result-b .submission-result-visual{
    right:0 !important;
    top:188px !important;
    width:530px !important;
    height:650px !important;
}
#result .result-c .submission-result-visual{
    right:50px !important;
    top:250px !important;
    width:490px !important;
    height:525px !important;
}
#result .result-d .submission-result-visual{
    right:-20px !important;
    top:190px !important;
    width:520px !important;
    height:590px !important;
}

/* ---------- Buttons: always below every card ---------- */
#result .submission-result-actions{
    position:absolute !important;
    left:58px !important;
    top:792px !important;
    width:1000px !important;
    height:60px !important;
    display:grid !important;
    grid-template-columns:200px 350px 414px !important;
    gap:18px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:40 !important;
}
#result .submission-result-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:60px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 14px !important;
    border:0 !important;
    border-radius:10px !important;
    background:linear-gradient(90deg, #0870b9, #075aaa) !important;
    color:var(--submission-yellow) !important;
    font-family:"Roboto Condensed", "Arial Narrow", sans-serif !important;
    font-size:24px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-shadow:none !important;
}
#result .submission-result-button:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 9px 18px rgba(0,67,130,.22) !important;
}
#result .submission-result-button:active{
    transform:scale(.985) !important;
}
#result .submission-restart-button{
    gap:10px !important;
    background:linear-gradient(90deg, #0b5e9f, #064b86) !important;
}
#result .submission-restart-icon{
    font-size:31px !important;
    line-height:1 !important;
}

/* Kill every legacy result layout rule that could re-enter through style.css. */
#result .result-heading,
#result .result-label,
#result .result-quote,
#result .quote-mark,
#result .result-orbit,
#result .result-grid,
#result .result-card,
#result .result-visual,
#result .result-actions,
#result .result-action-btn{
    all:unset !important;
    display:none !important;
}

@media (prefers-reduced-motion:reduce){
    #result .submission-result-button{transition:none !important;}
}

/* =========================================================
   FINAL CHARACTER NORMALIZATION — RESULTS B & D
   B and D now use tightly cropped high-resolution exports and
   the same right-side visual slot system as results A and C.
========================================================= */
#result .result-b .submission-result-visual{
    right:40px !important;
    top:245px !important;
    width:480px !important;
    height:585px !important;
}

#result .result-d .submission-result-visual{
    right:40px !important;
    top:235px !important;
    width:480px !important;
    height:500px !important;
}

#result .result-b .submission-result-visual #resultImage,
#result .result-d .submission-result-visual #resultImage{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
}


/* =========================================================
   FINAL B/D CHARACTER SCALE MATCH
   B and D use the original Figma SVG components and are
   enlarged to match the perceived character scale of A/C.
========================================================= */
#result .result-b .submission-result-visual{
    right:0 !important;
    top:150px !important;
    width:620px !important;
    height:703px !important;
}
#result .result-d .submission-result-visual{
    right:0 !important;
    top:180px !important;
    width:650px !important;
    height:624px !important;
}
#result .result-b .submission-result-visual #resultImage,
#result .result-d .submission-result-visual #resultImage{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
}