#page21Claims{--p:#a86dff;--pl:#d5baff;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden;color:#fff;font-family:Inter,"Segoe UI",Arial,sans-serif;background:linear-gradient(115deg,rgba(12,12,48,.9),rgba(25,15,70,.76)),url('../assets/images/cover-bg.jpg') center/cover no-repeat}
#page21Claims:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 38%,rgba(167,93,255,.18),transparent 34%),linear-gradient(rgba(80,40,150,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(80,40,150,.08) 1px,transparent 1px);background-size:auto,70px 70px,70px 70px;pointer-events:none}
.p21-stage{position:relative;z-index:2;height:100%;box-sizing:border-box;padding:20px 42px 18px;display:grid;grid-template-rows:88px 1fr 94px;gap:12px}
.p21-header{display:grid;grid-template-columns:1fr auto 210px;align-items:center;border-bottom:1px solid rgba(185,126,255,.35)}
.p21-header-left span,.p21-title-row span,.p21-tool span,.p21-nova-copy>span,.p21-counter span,.p21-feedback>span,.p21-complete span{display:block;color:#c58cff;font-weight:800;letter-spacing:1.5px;font-size:18px}.p21-header-left strong{display:block;font-size:32px;line-height:1.05}.p21-header-left small{font-size:19px;color:#cbb8e8}.p21-stage-path{display:flex;align-items:center;gap:8px}.p21-stage-path span{width:32px;height:32px;border:1px solid rgba(183,130,255,.28);border-radius:50%;display:grid;place-items:center;font-weight:800;color:#766d8c}.p21-stage-path .done{color:#79e9ef;border-color:#4fdde6}.p21-stage-path .current{color:#fff;background:#8d49e9;box-shadow:0 0 20px #8d49e9}.p21-stage-path i{font-style:normal;color:#725a91}.p21-score{justify-self:end;width:190px;padding:10px 8px;border:1px solid rgba(183,116,255,.5);border-radius:15px;text-align:center;background:rgba(28,13,61,.52)}.p21-score strong{display:block;font-size:25px}.p21-score span{font-size:15px;color:#c792ff;font-weight:800;letter-spacing:1px}
.p21-main{display:grid;grid-template-columns:300px 1fr;gap:18px;min-height:0}.p21-nova-panel,.p21-workspace{border:1px solid rgba(177,111,255,.42);border-radius:18px;background:rgba(13,18,55,.58);box-shadow:inset 0 0 35px rgba(104,59,185,.08)}.p21-nova-panel{padding:12px 18px 16px;display:flex;flex-direction:column}.p21-nova{height:185px;position:relative;display:grid;place-items:center}.p21-nova img{width:172px;position:relative;z-index:2;filter:drop-shadow(0 0 15px #527cff);animation:p21float 4s ease-in-out infinite}.p21-aura{position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid rgba(178,100,255,.55);box-shadow:0 0 32px rgba(148,70,255,.42);animation:p21pulse 3s ease-in-out infinite}.p21-nova-copy{padding:4px 5px}.p21-nova-copy>span{font-size:19px;margin-bottom:17px}.p21-nova-copy>strong{display:block;font-size:25px;line-height:1.28;margin-bottom:14px}.p21-nova-copy p{font-size:20px;line-height:1.38;margin:0 0 14px;font-weight:650}.p21-nova-copy small{display:block;font-size:18px;line-height:1.45;color:#d9cee8}.p21-tool{margin-top:auto;border-top:1px solid rgba(183,119,255,.34);padding:14px 4px 0}.p21-tool strong{display:block;font-size:22px;color:#d6a8ff;margin:4px 0}.p21-tool small{font-size:18px;color:#cbb8df}
.p21-workspace{padding:16px 24px;display:grid;grid-template-rows:auto 70px 1fr 88px 76px;gap:10px;min-height:0}.p21-title-row{display:flex;justify-content:space-between;align-items:flex-start}.p21-title-row strong{display:block;font-size:31px;line-height:1.05}.p21-title-row small{font-size:19px;color:#cdbce5}.p21-counter{min-width:180px;text-align:center;border:1px solid rgba(181,114,255,.4);border-radius:13px;padding:8px}.p21-counter strong{font-size:22px}.p21-guide{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr;align-items:center;gap:6px}.p21-guide div{height:58px;border:1px solid rgba(176,117,255,.35);border-radius:12px;padding:7px 13px;box-sizing:border-box;background:rgba(68,35,116,.25)}.p21-guide b{font-size:18px;color:#d5aaff}.p21-guide span{display:block;font-size:16px;color:#cfc4dc}.p21-guide i{text-align:center;font-style:normal;color:#b779ff;font-size:22px}
.p21-card{border:1px solid rgba(177,116,255,.5);border-radius:15px;padding:18px 22px;background:linear-gradient(120deg,rgba(74,34,130,.34),rgba(17,21,61,.7));display:flex;flex-direction:column;justify-content:center;min-height:0}.p21-card>span{color:#c995ff;font-size:18px;font-weight:800;letter-spacing:1px}.p21-card blockquote{margin:12px 0;font-size:27px;line-height:1.35;font-weight:760}.p21-card small{font-size:18px;color:#cfc2df}.p21-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.p21-options button{border:1px solid rgba(179,112,255,.42);border-radius:13px;background:rgba(24,24,66,.72);color:#fff;cursor:pointer}.p21-options b{display:block;font-size:21px;color:#d7b0ff}.p21-options span{font-size:18px;color:#c8b8dc}.p21-options button:hover{background:rgba(111,54,184,.45);box-shadow:0 0 18px rgba(157,79,255,.25)}.p21-options button.correct{background:rgba(94,50,170,.75);border-color:#c88dff;box-shadow:0 0 22px rgba(171,88,255,.5)}.p21-options button.wrong{animation:p21shake .25s linear 2;border-color:#f285b9}.p21-feedback{padding:8px 14px;border-top:1px solid rgba(174,111,255,.25)}.p21-feedback strong{display:block;font-size:19px}.p21-feedback small{font-size:16px;color:#cfc1dc}
.p21-complete{border:1px solid rgba(186,119,255,.62);border-radius:15px;background:linear-gradient(90deg,rgba(73,35,128,.88),rgba(47,28,102,.9));padding:11px 18px;display:flex;align-items:center;justify-content:space-between;opacity:.22;pointer-events:none;transition:.35s}.p21-complete.visible{opacity:1;pointer-events:auto;box-shadow:0 0 25px rgba(151,77,255,.3)}.p21-complete strong{display:block;font-size:23px}.p21-complete small{font-size:16px}.p21-complete>div:last-child{display:flex;align-items:center;gap:18px}.p21-complete b{font-size:22px}.p21-complete button{border:1px solid #c993ff;border-radius:11px;padding:14px 20px;background:#8244df;color:#fff;font-weight:800;font-size:17px;cursor:pointer}
@keyframes p21float{50%{transform:translateY(-9px)}}@keyframes p21pulse{50%{transform:scale(1.08);opacity:.6}}@keyframes p21shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}


/* =========================================================
   PAGE 21 · VISUAL REFINEMENT v2
   Projection readability + balanced spacing
========================================================= */

/* 1. Lift NOVA upward while preserving its float animation on the image. */
#page21Claims .p21-nova{
    height:185px;
    transform:translateY(-28px);
}
#page21Claims .p21-nova-copy{
    padding:0 5px 4px;
    margin-top:-14px;
}

/* 2. Match Page 20 stage index scale exactly. */
#page21Claims .p21-stage-path{
    gap:6px;
}
#page21Claims .p21-stage-path span{
    width:31px;
    height:31px;
    font-size:13px;
    line-height:1;
    font-weight:950;
}
#page21Claims .p21-stage-path i{
    font-size:13px;
    line-height:1;
}

/* Give the guide row enough height for large bilingual labels. */
#page21Claims .p21-workspace{
    grid-template-rows:auto 84px minmax(0,1fr) 94px 78px;
    gap:10px;
}
#page21Claims .p21-guide{
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);
    gap:7px;
}
#page21Claims .p21-guide div{
    height:74px;
    padding:10px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
}
#page21Claims .p21-guide b{
    display:block;
    font-size:20px;
    line-height:1.08;
    white-space:nowrap;
}
#page21Claims .p21-guide span{
    margin-top:4px;
    font-size:17px;
    line-height:1.18;
    white-space:normal;
}
#page21Claims .p21-guide i{
    font-size:20px;
}

/* 4. Text clue card must span exactly the same usable width as the guide. */
#page21Claims .p21-card{
    width:100%;
    max-width:none;
    min-width:0;
    box-sizing:border-box;
    padding:18px 22px;
    overflow:hidden;
}
#page21Claims .p21-card blockquote{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin:12px 0;
}
#page21Claims .p21-card small{
    display:block;
    width:100%;
}

/* Option row: maintain full workspace width and readable labels. */
#page21Claims .p21-options{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
#page21Claims .p21-options button{
    min-width:0;
    min-height:84px;
    padding:10px 12px;
    box-sizing:border-box;
}

/* 5. Completion rail: larger safe area, no text/button overflow. */
#page21Claims .p21-stage{
    grid-template-rows:88px minmax(0,1fr) 112px;
}
#page21Claims .p21-complete{
    min-width:0;
    min-height:104px;
    box-sizing:border-box;
    padding:12px 18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:24px;
    overflow:hidden;
}
#page21Claims .p21-complete>div:first-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
#page21Claims .p21-complete span{
    font-size:17px;
    line-height:1.1;
}
#page21Claims .p21-complete strong{
    margin-top:4px;
    font-size:21px;
    line-height:1.15;
    white-space:normal;
}
#page21Claims .p21-complete small{
    display:block;
    margin-top:5px;
    font-size:17px;
    line-height:1.22;
    white-space:normal;
}
#page21Claims .p21-complete>div:last-child{
    min-width:max-content;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
}
#page21Claims .p21-complete b{
    font-size:21px;
    white-space:nowrap;
}
#page21Claims .p21-complete button{
    padding:13px 18px;
    font-size:16px;
    line-height:1.1;
    white-space:nowrap;
}

/* Small overall polish: prevent long bilingual labels from escaping boxes. */
#page21Claims .p21-title-row,
#page21Claims .p21-title-row>div:first-child,
#page21Claims .p21-feedback{
    min-width:0;
}
#page21Claims .p21-title-row strong,
#page21Claims .p21-title-row small,
#page21Claims .p21-feedback strong,
#page21Claims .p21-feedback small{
    overflow-wrap:anywhere;
}

/* Page 21 v3: compact NOVA so the device never overlaps CLAIM SCAN copy. */
#page21Claims .p21-nova{
    height:158px !important;
    transform:translateY(-24px) !important;
    margin-bottom:14px !important;
}
#page21Claims .p21-nova img{
    width:138px !important;
    max-height:148px !important;
    object-fit:contain;
}
#page21Claims .p21-aura{
    width:132px !important;
    height:132px !important;
}
#page21Claims .p21-nova-copy{
    margin-top:-4px !important;
    padding-top:0 !important;
}
#page21Claims .p21-nova-copy>span{
    margin-top:0 !important;
    margin-bottom:17px !important;
}