
/* PAGE 23 · STAGE 05 · CHALLENGE */
#page23Challenge{
 --p:#A86DFF;--pl:#D3B6FF;--c:#5DE6F1;
 position:absolute;inset:0;width:100%;height:100%;overflow:hidden;color:#F8F5FF;
 font-family:Inter,"SF Pro Display","Segoe UI",Arial,sans-serif;
 background:linear-gradient(115deg,rgba(6,11,30,.91),rgba(31,18,68,.75) 50%,rgba(5,14,36,.87)),
 url("../assets/images/cover-bg.jpg") center/cover no-repeat;
}
#page23Challenge:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 62% 45%,transparent 18%,rgba(21,8,52,.13) 62%,rgba(2,5,18,.4));}
#page23Challenge .p23-stage{position:absolute;inset:0;z-index:2;padding:20px 44px 22px;box-sizing:border-box;display:grid;grid-template-rows:88px minmax(0,1fr);gap:12px}
#page23Challenge .p23-header{display:grid;grid-template-columns:1fr auto 205px;gap:22px;align-items:center;border-bottom:1px solid rgba(181,124,255,.38)}
#page23Challenge .p23-title{display:flex;flex-direction:column;align-items:flex-start}
#page23Challenge .p23-title span{font-size:20px;font-weight:900;letter-spacing:1.8px;color:#C697FF}
#page23Challenge .p23-title strong{margin-top:2px;font-size:35px;line-height:1;font-weight:950;color:#fff}
#page23Challenge .p23-title small{margin-top:5px;font-size:20px;font-weight:800;color:#C9A8EE}
#page23Challenge .p23-path{display:flex;align-items:center;gap:6px}
#page23Challenge .p23-path span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:950;color:#786A8C;border:1px solid rgba(126,103,155,.28);background:rgba(19,18,44,.54)}
#page23Challenge .p23-path .done{color:#9BFAFF;border-color:#53DEE8;background:rgba(28,130,150,.47)}
#page23Challenge .p23-path .current{color:#fff;border-color:#C492FF;background:#7946D5;box-shadow:0 0 12px rgba(181,111,255,.48)}
#page23Challenge .p23-path i{font-size:13px;font-style:normal;color:#75628C}
#page23Challenge .p23-score{justify-self:end;min-width:185px;padding:7px 11px;box-sizing:border-box;text-align:center;border:1px solid rgba(186,128,255,.58);border-radius:13px;background:rgba(17,15,50,.58)}
#page23Challenge .p23-score strong{display:block;font-size:24px;font-weight:950}
#page23Challenge .p23-score span{display:block;margin-top:2px;font-size:12px;font-weight:900;letter-spacing:1.3px;color:#C397FF}
#page23Challenge .p23-main{min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}
#page23Challenge .p23-nova-panel{min-height:0;padding:14px 18px 18px;box-sizing:border-box;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))}
#page23Challenge .p23-nova{position:relative;width:148px;height:148px;display:grid;place-items:center;transform:translateY(-24px);margin-bottom:-6px}
#page23Challenge .p23-nova img{position:relative;z-index:2;width:138px;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:p23Float 4.5s ease-in-out infinite}
#page23Challenge .p23-aura{position:absolute;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,rgba(65,213,255,.14),rgba(100,82,255,.06) 43%,transparent 72%)}
#page23Challenge .p23-nova-copy{width:100%;margin-top:6px}
#page23Challenge .p23-nova-copy>span{font-size:20px;line-height:1.15;font-weight:950;letter-spacing:1.3px;color:#BC89FF}
#page23Challenge .p23-nova-copy>strong{display:block;margin-top:12px;font-size:24px;line-height:1.28;font-weight:900}
#page23Challenge .p23-nova-copy p{margin:12px 0 9px;font-size:20px;line-height:1.38;font-weight:700;color:#E2E9F4}
#page23Challenge .p23-nova-copy p b{color:#D0B1FF}
#page23Challenge .p23-nova-copy small{font-size:18px;line-height:1.42;font-weight:700;color:#C5D2E3}
#page23Challenge .p23-tool{width:100%;margin-top:auto;padding-top:14px;display:flex;flex-direction:column;border-top:1px solid rgba(179,123,255,.22)}
#page23Challenge .p23-tool span{font-size:15px;font-weight:900;letter-spacing:1.2px;color:#A681C7}
#page23Challenge .p23-tool strong{margin-top:4px;font-size:22px;font-weight:950;color:#CFAEFF}
#page23Challenge .p23-tool small{margin-top:3px;font-size:18px;font-weight:750;color:#B9A2D3}
#page23Challenge .p23-workspace{min-height:0;padding:18px 20px;box-sizing:border-box;display:grid;grid-template-rows:76px 154px minmax(0,1fr);gap:11px;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))}
#page23Challenge .p23-work-head{display:flex;align-items:center;justify-content:space-between}
#page23Challenge .p23-work-head>div:first-child{display:flex;flex-direction:column}
#page23Challenge .p23-work-head span{font-size:15px;font-weight:950;letter-spacing:1.5px;color:#B77EFF}
#page23Challenge .p23-work-head h1{margin:4px 0 0;font-size:32px;line-height:1;font-weight:950}
#page23Challenge .p23-work-head h1 b{color:#CCA7FF}
#page23Challenge .p23-work-head small{margin-top:5px;font-size:19px;font-weight:800;color:#BFA2E6}
#page23Challenge .p23-progress{min-width:150px;padding:8px 11px;box-sizing:border-box;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)}
#page23Challenge .p23-progress span{font-size:11px;color:#9576BA}
#page23Challenge .p23-progress strong{margin-top:2px;font-size:19px;color:#D0B4F4}
#page23Challenge .p23-lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#page23Challenge .p23-lens{padding:13px 14px;box-sizing:border-box;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr auto;gap:0 10px;border:1px solid rgba(132,107,166,.30);border-radius:14px;background:linear-gradient(145deg,rgba(17,18,48,.82),rgba(8,20,46,.72))}
#page23Challenge .p23-lens>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:15px;font-weight:950;color:#A993BF;border:1px solid rgba(145,113,181,.30)}
#page23Challenge .p23-lens div{display:flex;flex-direction:column}
#page23Challenge .p23-lens strong{font-size:20px;line-height:1;font-weight:950}
#page23Challenge .p23-lens small{margin-top:3px;font-size:17px;font-weight:800;color:#B49BCB}
#page23Challenge .p23-lens p{margin:7px 0 0;font-size:16px;line-height:1.25;font-weight:650;color:#D9E1EC}
#page23Challenge .p23-lens>b{grid-column:2;margin-top:5px;font-size:12px;letter-spacing:.8px;color:#726A81}
#page23Challenge .p23-lens.active{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)}
#page23Challenge .p23-lens.active>span{color:#fff;border-color:#C99AFF;background:#7444CE;box-shadow:0 0 11px rgba(183,108,255,.45)}
#page23Challenge .p23-lens.active>b{color:#DBBEFF}
#page23Challenge .p23-case{min-height:0;padding:10px 12px 11px;box-sizing:border-box;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:46px minmax(0,1fr) 62px;gap:9px 12px;border-top:1px solid rgba(179,123,255,.20)}
#page23Challenge .p23-case-head{grid-column:1/3;display:flex;align-items:center;justify-content:space-between}
#page23Challenge .p23-case-head div{display:flex;flex-direction:column}
#page23Challenge .p23-case-head span{font-size:12px;font-weight:950;letter-spacing:1.2px;color:#A87BD8}
#page23Challenge .p23-case-head strong{margin-top:2px;font-size:17px;color:#D6BBF8}
#page23Challenge .p23-case-head>small{font-size:16px;font-weight:700;color:#B7A1D0}
#page23Challenge .p23-source{padding:14px 16px;box-sizing:border-box;border:1px solid rgba(183,126,255,.35);border-radius:12px;background:rgba(23,21,62,.66)}
#page23Challenge .p23-source span{font-size:13px;font-weight:950;letter-spacing:1.1px;color:#B57FFF}
#page23Challenge .p23-source p{margin:10px 0 0;font-size:23px;line-height:1.34;font-weight:720;color:#F4F6FF}
#page23Challenge .p23-choices{display:grid;grid-template-columns:1fr;gap:8px}
#page23Challenge .p23-choices button{appearance:none;padding:9px 11px;box-sizing:border-box;text-align:left;border:1px solid rgba(128,103,160,.28);border-radius:10px;color:#E9E3F2;background:rgba(8,18,43,.64);font:750 16px/1.25 inherit;cursor:pointer}
#page23Challenge .p23-choices button:hover{border-color:rgba(188,135,255,.66)}
#page23Challenge .p23-choices button.correct{border-color:#BA82FF;background:rgba(102,55,189,.62);box-shadow:0 0 12px rgba(174,101,255,.22)}
#page23Challenge .p23-choices button.wrong{border-color:rgba(255,115,152,.55);background:rgba(103,32,65,.43)}
#page23Challenge .p23-feedback{grid-column:1/3;padding:8px 12px;box-sizing:border-box;display:flex;align-items:center;gap:12px;border:1px solid rgba(128,105,160,.23);border-radius:10px;background:rgba(7,17,41,.57)}
#page23Challenge .p23-feedback span{font-size:12px;font-weight:950;letter-spacing:1.2px;color:#A783CA}
#page23Challenge .p23-feedback strong{font-size:17px;font-weight:850;color:#D5CBE3}
#page23Challenge .p23-feedback small{margin-left:auto;font-size:15px;font-weight:700;color:#A191B3}
#page23Challenge .p23-feedback.success{border-color:rgba(184,130,255,.55);background:rgba(67,43,120,.44)}
#page23Challenge .p23-complete{position:absolute;z-index:50;left:44px;right:44px;bottom:22px;padding:13px 17px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;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}
#page23Challenge .p23-complete.show{opacity:1;visibility:visible;transform:translateY(0)}
#page23Challenge .p23-complete>div:first-child{display:flex;flex-direction:column;min-width:0}
#page23Challenge .p23-complete span{font-size:13px;font-weight:950;letter-spacing:1.2px;color:#CCA8FF}
#page23Challenge .p23-complete strong{margin-top:4px;font-size:22px;line-height:1.15;font-weight:950}
#page23Challenge .p23-complete strong i{margin:0 7px;font-style:normal;color:#C08FFF}
#page23Challenge .p23-complete small{margin-top:4px;font-size:15px;line-height:1.25;font-weight:700;color:#CCBDE1}
#page23Challenge .p23-complete-right{display:flex;align-items:center;gap:16px}
#page23Challenge .p23-complete-right>b{font-size:19px;color:#E1C8FF}
#page23Challenge .p23-complete button{appearance:none;padding:11px 16px;border:1px solid #C190FF;border-radius:10px;color:#fff;background:#8050D8;font:950 15px inherit;cursor:pointer}
#page23Challenge .p23-complete button i{margin-left:8px;font-style:normal}
@keyframes p23Float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){#page23Challenge *{animation:none!important;transition:none!important}}


/* =========================================================
   PAGE 23 · v2
   Interaction fix + vertical evidence/choice layout
========================================================= */

/* Give the challenge case more usable vertical space. */
#page23Challenge .p23-workspace{
    grid-template-rows:76px 142px minmax(0,1fr);
}

/* Source sentence first, choices directly below it.
   This uses the previously empty lower area and gives long
   questions enough horizontal width. */
#page23Challenge .p23-case{
    position:relative;
    z-index:20;
    min-height:0;
    padding:8px 12px 10px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:42px auto auto 58px;
    gap:8px;
    overflow:visible;
    pointer-events:auto !important;
}

#page23Challenge .p23-case-head{
    grid-column:1;
}

#page23Challenge .p23-case-head>small{
    font-size:18px;
    font-weight:800;
}

/* Sentence now extends across the whole workspace. */
#page23Challenge .p23-source{
    grid-column:1;
    width:100%;
    min-height:82px;
    padding:12px 16px;
}

#page23Challenge .p23-source span{
    font-size:14px;
}

#page23Challenge .p23-source p{
    margin-top:8px;
    font-size:25px;
    line-height:1.30;
}

/* Three answer options are now a full-width vertical stack. */
#page23Challenge .p23-choices{
    position:relative;
    z-index:40;
    grid-column:1;
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    pointer-events:auto !important;
}

#page23Challenge .p23-choices button{
    position:relative;
    z-index:41;
    width:100%;
    min-height:48px;
    padding:10px 15px;
    border-width:1px;
    font-size:20px !important;
    line-height:1.28 !important;
    font-weight:780;
    cursor:pointer !important;
    pointer-events:auto !important;
    user-select:none;
    touch-action:manipulation;
}

#page23Challenge .p23-choices button:hover{
    border-color:#C79AFF;
    background:rgba(67,45,116,.62);
    transform:translateX(2px);
}

#page23Challenge .p23-choices button:active{
    transform:translateX(2px) scale(.995);
}

#page23Challenge .p23-choices button:disabled{
    cursor:default !important;
    opacity:1;
}

/* Feedback also uses the full width below the options. */
#page23Challenge .p23-feedback{
    grid-column:1;
    min-height:58px;
    padding:8px 13px;
    position:relative;
    z-index:30;
}

#page23Challenge .p23-feedback span{
    font-size:13px;
}

#page23Challenge .p23-feedback strong{
    font-size:18px;
}

#page23Challenge .p23-feedback small{
    font-size:16px;
}

/* Ensure no decorative/global layer can intercept answer clicks. */
#page23Challenge,
#page23Challenge .p23-stage,
#page23Challenge .p23-main,
#page23Challenge .p23-workspace{
    pointer-events:auto !important;
}

#page23Challenge::before,
#page23Challenge::after{
    pointer-events:none !important;
}

