/* =========================================================
   PAGE 20 · STAGE 02 · STRUCTURE
========================================================= */

#page20Structure{

    --purple:#A86DFF;
    --purple-light:#D1B4FF;
    --purple-deep:#6336CF;

    --cyan:#55E6F4;

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;

    overflow:hidden;

    color:#F8F5FF;

    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;

    background:

        linear-gradient(
            115deg,
            rgba(6,11,30,.92),
            rgba(25,20,67,.77) 48%,
            rgba(5,14,36,.88)
        ),

        url("../assets/images/cover-bg.jpg");

    background-size:cover;
    background-position:center;

}


#page20Structure::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 61% 43%,
            transparent 18%,
            rgba(14,7,42,.13) 60%,
            rgba(2,5,18,.40) 100%
        );

}


/* =========================================================
   STAGE
========================================================= */

#page20Structure .p20-stage{

    position:absolute;

    inset:0;

    z-index:10;

    box-sizing:border-box;

    padding:
        22px
        46px
        24px;

    display:grid;

    grid-template-rows:
        90px
        minmax(0,1fr);

    gap:14px;

}


/* =========================================================
   HEADER
========================================================= */

#page20Structure .p20-header{

    display:grid;

    grid-template-columns:
        1fr
        auto
        215px;

    gap:24px;

    align-items:center;

    border-bottom:
        1px solid
        rgba(181,124,255,.38);

}


#page20Structure .p20-header-left{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


#page20Structure .p20-header-left span{

    color:#C697FF;

    font-size:18px;

    font-weight:900;

    letter-spacing:1.8px;

}


#page20Structure .p20-header-left strong{

    margin-top:3px;

    color:#FFF;

    font-size:33px;

    line-height:1;

    font-weight:950;

}


#page20Structure .p20-header-left small{

    margin-top:5px;

    color:#C9A8EE;

    font-size:18px;

    font-weight:800;

}


/* =========================================================
   STAGE PATH
========================================================= */

#page20Structure .p20-stage-path{

    display:flex;

    align-items:center;

    gap:6px;

}


#page20Structure .p20-stage-path span{

    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#786A8C;

    border:
        1px solid
        rgba(126,103,155,.28);

    background:
        rgba(19,18,44,.54);

    font-size:13px;

    font-weight:950;

}


#page20Structure .p20-stage-path .is-current{

    color:#FFF;

    border-color:#C492FF;

    background:#7946D5;

    box-shadow:

        0 0 12px
        rgba(181,111,255,.48);

}


#page20Structure .p20-stage-path .is-complete{

    color:#9BFAFF;

    border-color:#53DEE8;

    background:
        rgba(28,130,150,.47);

}


#page20Structure .p20-stage-path i{

    color:#75628C;

    font-size:13px;

    font-style:normal;

}


/* =========================================================
   SCORE
========================================================= */

#page20Structure .p20-score{

    justify-self:end;

    min-width:190px;

    box-sizing:border-box;

    padding:
        8px
        12px;

    text-align:center;

    border:
        1px solid
        rgba(186,128,255,.58);

    border-radius:13px;

    background:
        rgba(17,15,50,.58);

}


#page20Structure .p20-score strong{

    display:block;

    color:#FFF;

    font-size:25px;

    font-weight:950;

}


#page20Structure .p20-score span{

    display:block;

    margin-top:2px;

    color:#C397FF;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.3px;

}


/* =========================================================
   MAIN
========================================================= */

#page20Structure .p20-main{

    min-height:0;

    display:grid;

    grid-template-columns:
        300px
        minmax(0,1fr);

    gap:22px;

}


/* =========================================================
   NOVA
========================================================= */

#page20Structure .p20-nova-panel{

    min-height:0;

    box-sizing:border-box;

    padding:
        15px
        20px
        18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    border:
        1px solid
        rgba(174,119,255,.34);

    border-radius:18px;

    background:

        linear-gradient(
            160deg,
            rgba(17,17,53,.74),
            rgba(5,22,50,.68)
        );

}


#page20Structure .p20-nova{

    position:relative;

    width:160px;
    height:160px;

    display:grid;

    place-items:center;

}


#page20Structure .p20-nova img{

    position:relative;

    z-index:2;

    width:150px;

    object-fit:contain;

    filter:

        drop-shadow(
            0 0 10px
            rgba(96,225,255,.63)
        )

        drop-shadow(
            0 0 25px
            rgba(78,126,255,.30)
        );

    animation:
        p20NovaFloat
        4.5s
        ease-in-out
        infinite;

}


#page20Structure .p20-nova-aura{

    position:absolute;

    width:175px;
    height:175px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(65,213,255,.14),
            rgba(100,82,255,.06) 43%,
            transparent 72%
        );

}


#page20Structure .p20-nova-copy{

    width:100%;

}


#page20Structure .p20-nova-copy > span{

    color:#BC89FF;

    font-size:16px;

    font-weight:950;

    letter-spacing:1.4px;

}


#page20Structure .p20-nova-copy > strong{

    display:block;

    margin-top:8px;

    color:#FFF;

    font-size:21px;

    line-height:1.3;

    font-weight:900;

}


#page20Structure .p20-nova-copy p{

    margin:
        10px
        0
        8px;

    color:#DEE7F3;

    font-size:17px;

    line-height:1.42;

    font-weight:650;

}


#page20Structure .p20-nova-copy small{

    color:#C2D0E2;

    font-size:16px;

    line-height:1.42;

    font-weight:700;

}


/* Mission Tool */

#page20Structure .p20-tool{

    width:100%;

    margin-top:auto;

    box-sizing:border-box;

    padding-top:14px;

    display:flex;

    flex-direction:column;

    border-top:
        1px solid
        rgba(179,123,255,.22);

}


#page20Structure .p20-tool span{

    color:#8F70B4;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.3px;

}


#page20Structure .p20-tool strong{

    margin-top:3px;

    color:#CFAEFF;

    font-size:18px;

    font-weight:950;

}


#page20Structure .p20-tool small{

    margin-top:3px;

    color:#AF99CB;

    font-size:15px;

    font-weight:750;

}


/* =========================================================
   WORKSPACE
========================================================= */

#page20Structure .p20-workspace{

    min-height:0;

    box-sizing:border-box;

    padding:
        20px
        22px;

    display:grid;

    grid-template-rows:
        78px
        235px
        minmax(0,1fr);

    gap:12px;

    border:
        1px solid
        rgba(179,124,255,.30);

    border-radius:18px;

    background:

        linear-gradient(
            160deg,
            rgba(14,16,50,.73),
            rgba(4,19,46,.67)
        );

}


/* =========================================================
   WORKSPACE HEADER
========================================================= */

#page20Structure .p20-workspace-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


#page20Structure .p20-workspace-head > div:first-child{

    display:flex;

    flex-direction:column;

}


#page20Structure .p20-workspace-head span{

    color:#B77EFF;

    font-size:14px;

    font-weight:950;

    letter-spacing:1.6px;

}


#page20Structure .p20-workspace-head h1{

    margin:
        4px
        0
        0;

    color:#FFF;

    font-size:31px;

    line-height:1;

    font-weight:950;

}


#page20Structure .p20-workspace-head h1 b{

    color:#CCA7FF;

}


#page20Structure .p20-workspace-head small{

    margin-top:5px;

    color:#BFA2E6;

    font-size:17px;

    font-weight:800;

}


/* progress */

#page20Structure .p20-progress-box{

    min-width:135px;

    box-sizing:border-box;

    padding:
        8px
        11px;

    display:flex;

    flex-direction:column;

    align-items:center;

    border:
        1px solid
        rgba(183,128,255,.34);

    border-radius:11px;

    background:
        rgba(18,17,50,.50);

}


#page20Structure .p20-progress-box span{

    color:#9576BA;

    font-size:10px;

}


#page20Structure .p20-progress-box strong{

    margin-top:2px;

    color:#D0B4F4;

    font-size:18px;

}


/* =========================================================
   STRUCTURE MAP
========================================================= */

#page20Structure .p20-structure-map{

    position:relative;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:13px;

}


/* nodes */

#page20Structure .p20-node{

    position:relative;

    z-index:3;

    appearance:none;

    box-sizing:border-box;

    padding:
        15px
        15px;

    display:grid;

    grid-template-columns:
        43px
        1fr;

    grid-template-rows:
        1fr
        22px;

    gap:
        5px
        10px;

    text-align:left;

    border:
        1px solid
        rgba(126,102,160,.26);

    border-radius:14px;

    color:#FFF;

    background:

        linear-gradient(
            145deg,
            rgba(17,18,48,.82),
            rgba(8,20,46,.72)
        );

    font-family:inherit;

    cursor:default;

    transition:
        .32s ease;

}


#page20Structure .p20-node-number{

    grid-row:
        1 / 3;

    align-self:center;

    width:41px;
    height:41px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#A590BD;

    border:
        1px solid
        rgba(145,113,181,.30);

    font-size:16px;

    font-weight:950;

}


#page20Structure .p20-node > div{

    display:flex;

    flex-direction:column;

}


#page20Structure .p20-node strong{

    color:#D6CBE7;

    font-size:19px;

    font-weight:950;

}


#page20Structure .p20-node small{

    margin-top:3px;

    color:#A994C0;

    font-size:16px;

    font-weight:800;

}


#page20Structure .p20-node em{

    margin-top:6px;

    color:#8395AA;

    font-size:14px;

    line-height:1.18;

    font-style:normal;

    font-weight:650;

}


#page20Structure .p20-node > b{

    align-self:end;

    color:#736B82;

    font-size:12px;

    font-weight:950;

    letter-spacing:.7px;

}


/* identified */

#page20Structure .p20-node.is-identified{

    border-color:#BD86FF;

    background:

        linear-gradient(
            145deg,
            rgba(94,49,179,.70),
            rgba(37,36,94,.82)
        );

    box-shadow:

        0 0 17px
        rgba(176,101,255,.25),

        inset
        0 0 20px
        rgba(191,137,255,.07);

}


#page20Structure
.p20-node.is-identified
.p20-node-number{

    color:#FFF;

    border-color:#C99AFF;

    background:#7444CE;

    box-shadow:

        0 0 11px
        rgba(183,108,255,.45);

}


#page20Structure
.p20-node.is-identified
strong{

    color:#FFF;

}


#page20Structure
.p20-node.is-identified
small{

    color:#D1B0FF;

}


#page20Structure
.p20-node.is-identified
> b{

    color:#DBBEFF;

}


/* connecting lines */

#page20Structure .p20-map-line{

    position:absolute;

    z-index:1;

    top:50%;

    height:2px;

    width:13%;

    background:

        linear-gradient(
            90deg,
            rgba(177,109,255,.12),
            rgba(177,109,255,.38)
        );

}


#page20Structure .p20-line-1{

    left:23%;

}


#page20Structure .p20-line-2{

    left:48%;

}


#page20Structure .p20-line-3{

    left:73%;

}


#page20Structure .p20-structure-map.is-complete .p20-map-line{

    background:

        linear-gradient(
            90deg,
            #A66DFF,
            #D0A7FF
        );

    box-shadow:
        0 0 11px
        rgba(177,105,255,.50);

}


/* =========================================================
   SCANNER
========================================================= */

#page20Structure .p20-scanner{

    min-height:0;

    box-sizing:border-box;

    padding:
        12px
        14px;

    display:grid;

    grid-template-columns:
        1.45fr
        1fr;

    grid-template-rows:
        50px
        1fr
        58px;

    gap:
        9px
        13px;

    border-top:
        1px solid
        rgba(179,123,255,.20);

}


#page20Structure .p20-scanner-header{

    grid-column:
        1 / 3;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


#page20Structure .p20-scanner-header > div{

    display:flex;

    flex-direction:column;

}


#page20Structure .p20-scanner-header span{

    color:#A87BD8;

    font-size:11px;

    font-weight:950;

    letter-spacing:1.3px;

}


#page20Structure .p20-scanner-header strong{

    margin-top:2px;

    color:#D6BBF8;

    font-size:16px;

    font-weight:950;

}


#page20Structure .p20-scanner-header > small{

    color:#B7A1D0;

    font-size:15px;

    font-weight:700;

}


/* clue */

#page20Structure .p20-clue{

    box-sizing:border-box;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(183,126,255,.35);

    border-radius:12px;

    background:

        rgba(23,21,62,.66);

}


#page20Structure .p20-clue span{

    color:#B57FFF;

    font-size:12px;

    font-weight:950;

    letter-spacing:1.2px;

}


#page20Structure .p20-clue p{

    margin:
        7px
        0
        0;

    color:#F2F5FF;

    font-size:20px;

    line-height:1.37;

    font-weight:700;

}


/* options */

#page20Structure .p20-role-options{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:8px;

}


#page20Structure .p20-role-options button{

    appearance:none;

    box-sizing:border-box;

    padding:
        8px
        10px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border:
        1px solid
        rgba(128,103,160,.28);

    border-radius:10px;

    color:#FFF;

    background:
        rgba(8,18,43,.64);

    font-family:inherit;

    cursor:pointer;

    transition:
        .18s ease;

}


#page20Structure .p20-role-options strong{

    color:#E2D9EE;

    font-size:16px;

    font-weight:950;

}


#page20Structure .p20-role-options small{

    margin-top:2px;

    color:#A994C0;

    font-size:14px;

    font-weight:750;

}


#page20Structure .p20-role-options button:hover{

    border-color:
        rgba(188,135,255,.66);

    transform:
        translateY(-1px);

}


#page20Structure .p20-role-options button.is-correct{

    border-color:#BA82FF;

    background:
        rgba(102,55,189,.62);

    box-shadow:
        0 0 12px
        rgba(174,101,255,.22);

}


#page20Structure .p20-role-options button.is-wrong{

    border-color:
        rgba(255,115,152,.55);

    background:
        rgba(103,32,65,.43);

}


/* feedback */

#page20Structure .p20-feedback{

    grid-column:
        1 / 3;

    display:flex;

    align-items:center;

    gap:13px;

    box-sizing:border-box;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(128,105,160,.23);

    border-radius:10px;

    background:
        rgba(7,17,41,.57);

}


#page20Structure .p20-feedback span{

    color:#A783CA;

    font-size:11px;

    font-weight:950;

    letter-spacing:1.2px;

}


#page20Structure .p20-feedback strong{

    color:#D5CBE3;

    font-size:16px;

    font-weight:850;

}


#page20Structure .p20-feedback small{

    margin-left:auto;

    color:#988BA8;

    font-size:14px;

    font-weight:700;

}


#page20Structure .p20-feedback.is-success{

    border-color:
        rgba(184,130,255,.55);

    background:
        rgba(67,43,120,.44);

}


#page20Structure .p20-feedback.is-success strong{

    color:#E4D3FF;

}


/* =========================================================
   COMPLETE
========================================================= */

#page20Structure .p20-complete{

    position:absolute;

    z-index:50;

    left:46px;
    right:46px;
    bottom:24px;

    box-sizing:border-box;

    padding:
        14px
        18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:
        1px solid
        rgba(194,143,255,.83);

    border-radius:14px;

    background:

        linear-gradient(
            120deg,
            rgba(61,37,111,.97),
            rgba(28,33,88,.97)
        );

    box-shadow:
        0 0 24px
        rgba(170,100,255,.24);

    opacity:0;

    visibility:hidden;

    transform:
        translateY(14px);

    transition:
        .35s ease;

}


#page20Structure .p20-complete.is-visible{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


#page20Structure .p20-complete > div:first-child{

    display:flex;

    flex-direction:column;

}


#page20Structure .p20-complete span{

    color:#CCA8FF;

    font-size:12px;

    font-weight:950;

    letter-spacing:1.2px;

}


#page20Structure .p20-complete strong{

    margin-top:4px;

    color:#FFF;

    font-size:21px;

    font-weight:950;

}


#page20Structure .p20-complete strong i{

    margin:
        0
        7px;

    color:#C08FFF;

    font-style:normal;

}


#page20Structure .p20-complete small{

    margin-top:4px;

    color:#CCBDE1;

    font-size:14px;

    font-weight:700;

}


#page20Structure .p20-complete-right{

    display:flex;

    align-items:center;

    gap:17px;

}


#page20Structure .p20-complete-right > b{

    color:#E1C8FF;

    font-size:19px;

    font-weight:950;

}


#page20Structure .p20-complete button{

    appearance:none;

    border:
        1px solid
        #C190FF;

    border-radius:10px;

    padding:
        11px
        16px;

    color:#FFF;

    background:#8050D8;

    font-family:inherit;

    font-size:14px;

    font-weight:950;

    cursor:pointer;

}


#page20Structure .p20-complete button i{

    margin-left:8px;

    font-style:normal;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes p20NovaFloat{

    0%,100%{
        transform:
            translateY(3px);
    }

    50%{
        transform:
            translateY(-6px);
    }

}


@media (prefers-reduced-motion:reduce){

    #page20Structure *{

        animation:none!important;

        transition:none!important;

    }

}

/* =========================================================
   PAGE 20 · READABILITY & SPACING PASS
   Match Page 19 projection-readable typography
========================================================= */

/* Lift NOVA without changing the already-working float animation on the image */
#page20Structure .p20-nova{
    transform: translateY(-28px);
    margin-bottom:-22px;
}

/* Keep NOVA copy comfortably separated from the visual */
#page20Structure .p20-nova-copy{
    margin-top:6px;
}

/* Workspace: give the enlarged text more usable vertical room */
#page20Structure .p20-workspace{
    grid-template-rows: 88px 252px minmax(0,1fr);
    gap:10px;
    padding:18px 20px;
}

/* Main heading area */
#page20Structure .p20-workspace-head span{
    font-size:17px !important;
}
#page20Structure .p20-workspace-head h1{
    font-size:38px !important;
    line-height:1.04 !important;
}
#page20Structure .p20-workspace-head small{
    font-size:21px !important;
    line-height:1.2 !important;
}
#page20Structure .p20-progress-box span{
    font-size:13px !important;
}
#page20Structure .p20-progress-box strong{
    font-size:22px !important;
}

/* Structure nodes — bring labels/questions up to Page 19 scale */
#page20Structure .p20-node{
    padding:14px 13px;
    grid-template-columns:46px 1fr;
}
#page20Structure .p20-node-number{
    width:44px;
    height:44px;
    font-size:19px !important;
}
#page20Structure .p20-node strong{
    font-size:23px !important;
    line-height:1.05 !important;
}
#page20Structure .p20-node small{
    font-size:19px !important;
    line-height:1.15 !important;
}
#page20Structure .p20-node em{
    font-size:17px !important;
    line-height:1.22 !important;
}
#page20Structure .p20-node > b{
    font-size:14px !important;
}

/* Scanner header */
#page20Structure .p20-scanner{
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:58px minmax(0,1fr) 66px;
    gap:8px 12px;
    padding:10px 12px;
}
#page20Structure .p20-scanner-header span{
    font-size:14px !important;
}
#page20Structure .p20-scanner-header strong{
    font-size:20px !important;
}
#page20Structure .p20-scanner-header > small{
    font-size:18px !important;
    line-height:1.25 !important;
    max-width:58%;
    text-align:right;
}

/* TEXT CLUE — intentionally prominent for classroom projection */
#page20Structure .p20-clue{
    padding:14px 17px;
}
#page20Structure .p20-clue span{
    font-size:16px !important;
}
#page20Structure .p20-clue p{
    font-size:27px !important;
    line-height:1.28 !important;
    margin-top:8px !important;
}

/* Answer buttons */
#page20Structure .p20-role-options{
    gap:9px;
}
#page20Structure .p20-role-options button{
    padding:9px 10px;
}
#page20Structure .p20-role-options strong{
    font-size:21px !important;
    line-height:1.08 !important;
}
#page20Structure .p20-role-options small{
    font-size:18px !important;
    line-height:1.15 !important;
    margin-top:4px !important;
}

/* Feedback */
#page20Structure .p20-feedback span{
    font-size:14px !important;
}
#page20Structure .p20-feedback strong{
    font-size:20px !important;
}
#page20Structure .p20-feedback small{
    font-size:17px !important;
}

/* Left NOVA copy: keep consistent with Page 19 and avoid tiny secondary text */
#page20Structure .p20-nova-copy > span{
    font-size:17px !important;
}
#page20Structure .p20-nova-copy > strong{
    font-size:22px !important;
    line-height:1.28 !important;
}
#page20Structure .p20-nova-copy p{
    font-size:18px !important;
    line-height:1.4 !important;
}
#page20Structure .p20-nova-copy small{
    font-size:17px !important;
    line-height:1.4 !important;
}
#page20Structure .p20-tool span{
    font-size:13px !important;
}
#page20Structure .p20-tool strong{
    font-size:20px !important;
}
#page20Structure .p20-tool small{
    font-size:17px !important;
}

/* Completion strip */
#page20Structure .p20-complete span{
    font-size:14px !important;
}
#page20Structure .p20-complete strong{
    font-size:23px !important;
}
#page20Structure .p20-complete small{
    font-size:17px !important;
}
#page20Structure .p20-complete-right > b{
    font-size:22px !important;
}
#page20Structure .p20-complete button{
    font-size:17px !important;
}

/* =========================================================
   PAGE 20 · NOVA PANEL READABILITY REFINEMENT v3
   Enlarges the left-panel copy and restores breathing room
   between the NOVA device and the mission instructions.
========================================================= */
#page20Structure .p20-nova{
    margin-bottom:24px !important;
}

#page20Structure .p20-nova-copy > span{
    font-size:20px !important;
    line-height:1.25 !important;
    letter-spacing:1.5px !important;
}

#page20Structure .p20-nova-copy > strong{
    margin-top:14px !important;
    font-size:27px !important;
    line-height:1.38 !important;
}

#page20Structure .p20-nova-copy p{
    margin:16px 0 12px !important;
    font-size:22px !important;
    line-height:1.45 !important;
}

#page20Structure .p20-nova-copy small{
    display:block !important;
    font-size:20px !important;
    line-height:1.52 !important;
}

#page20Structure .p20-tool{
    padding-top:18px !important;
}

#page20Structure .p20-tool span{
    font-size:16px !important;
    line-height:1.25 !important;
}

#page20Structure .p20-tool strong{
    margin-top:6px !important;
    font-size:23px !important;
    line-height:1.25 !important;
}

#page20Structure .p20-tool small{
    margin-top:5px !important;
    font-size:19px !important;
    line-height:1.3 !important;
}


/* =========================================================
   PAGE 20 · TEXT A CLUES + LEFT TOOL BOUNDARY FIX v4
========================================================= */
#page20Structure .p20-nova-panel{
    padding-bottom:30px !important;
}
#page20Structure .p20-tool{
    width:100% !important;
    margin-top:auto !important;
    margin-bottom:8px !important;
    padding-top:14px !important;
    transform:translateY(-6px);
}
#page20Structure .p20-tool span{
    font-size:15px !important;
}
#page20Structure .p20-tool strong{
    font-size:22px !important;
    line-height:1.18 !important;
    white-space:normal !important;
}
#page20Structure .p20-tool small{
    font-size:18px !important;
    line-height:1.2 !important;
}