/* TH-MX · La Matriz del Drama */
.drama-matrix{background:linear-gradient(180deg,#070F1E,#0A1830 50%,#070F1E)}
.dm-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px}
.dm-intro .section-body{max-width:560px}
.dm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,168,76,.12);margin-bottom:44px}
.dm-stats div{background:#081224;padding:24px 22px}
.dm-stats b{display:block;font:300 2.6rem/1 var(--font-display);color:var(--gold)}
.dm-stats span{display:block;margin-top:8px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,247,242,.45)}
.dm-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:start}
.dm-layout>*{min-width:0}
.dm-grid-wrap{overflow-x:auto;border:1px solid rgba(201,168,76,.1);background:rgba(3,8,17,.5);padding:14px}
.dm-grid{display:grid;grid-template-columns:132px repeat(var(--n),minmax(22px,1fr));gap:2px;min-width:560px}
.dm-corner{height:74px}
.dm-col{height:74px;display:flex;align-items:flex-end;justify-content:center}
.dm-col span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.52rem;letter-spacing:.08em;color:rgba(250,247,242,.55)}
.dm-row{font-size:.6rem;color:rgba(250,247,242,.62);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-cell{aspect-ratio:1;border:0;padding:0;position:relative;background:rgba(250,247,242,.035);font:inherit}
.dm-self{background:transparent}
.dm-scene{background:rgba(85,165,200,.16)}
.dm-hot{background:rgba(201,168,76,var(--lvl))}
.dm-cell i{position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:#B84D6F;box-shadow:0 0 0 1px #070F1E}
button.dm-cell:hover,.dm-cell.on{outline:1px solid var(--cream);outline-offset:1px;z-index:2}
.dm-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:.58rem;letter-spacing:.06em;color:rgba(250,247,242,.5)}
.dm-legend span{display:inline-flex;align-items:center;gap:7px}
.dm-legend i{width:12px;height:12px;display:inline-block}
.dm-rank{margin-top:26px;display:grid;gap:2px}
.dm-rank-row{display:grid;grid-template-columns:28px 1fr 30px;align-items:center;gap:10px;position:relative;padding:10px 12px;border:0;background:rgba(250,247,242,.025);color:var(--cream);text-align:left;font:inherit;overflow:hidden}
.dm-rank-row span{font:400 .58rem var(--font-mono);color:rgba(201,168,76,.6)}
.dm-rank-row b{font-weight:400;font-size:.78rem;position:relative;z-index:1}
.dm-rank-row i{position:absolute;left:0;top:0;bottom:0;background:rgba(201,168,76,.09)}
.dm-rank-row em{font-style:normal;font-size:.62rem;color:var(--gold);text-align:right;position:relative}
.dm-rank-row:hover,.dm-rank-row.on{background:rgba(201,168,76,.08)}
.dm-pair-panel{position:sticky;top:90px;border:1px solid rgba(201,168,76,.16);background:#081224;padding:28px;max-height:calc(100vh - 120px);overflow:auto}
.dm-pair-head h4{font:300 1.7rem/1.1 var(--font-display)}
.dm-pair-head h4 em{color:var(--gold);font-style:italic}
.dm-pair-head p{font-size:.62rem;letter-spacing:.1em;color:rgba(250,247,242,.5);margin-top:8px}
.dm-bar{height:2px;background:rgba(250,247,242,.07);margin:14px 0 18px}
.dm-bar i{display:block;height:100%;background:var(--gold)}
.dm-items{display:grid;gap:12px}
.dm-item{border-left:2px solid rgba(201,168,76,calc(.25 + var(--heat)*.75));background:rgba(250,247,242,.025);padding:16px 18px}
.dm-item header{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}
.dm-type{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.dm-int{font:400 .56rem var(--font-mono);color:rgba(250,247,242,.45)}
.dm-text{font-size:.86rem;line-height:1.75;color:rgba(250,247,242,.82)}
.dm-det,.dm-know,.dm-dark{font-size:.72rem;line-height:1.6;color:rgba(250,247,242,.5);margin-top:8px}
.dm-det b,.dm-know b,.dm-dark b{color:rgba(250,247,242,.72);font-weight:400}
.dm-locked{border-left-color:#B84D6F;background:repeating-linear-gradient(135deg,rgba(184,77,111,.05) 0 8px,transparent 8px 16px)}
.dm-lock-line{font-size:.84rem;color:rgba(250,247,242,.75);display:flex;align-items:flex-start;gap:9px}
.dm-lock{width:10px;height:8px;border:1.5px solid #D97C9A;border-radius:1px;position:relative;margin-top:4px;flex:none}
.dm-lock:before{content:'';position:absolute;left:1px;top:-7px;width:5px;height:6px;border:1.5px solid #D97C9A;border-bottom:0;border-radius:4px 4px 0 0}
.dm-member{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#D97C9A;margin-top:10px}
.dm-gap{font-size:.78rem;line-height:1.7;color:rgba(250,247,242,.45);border:1px dashed rgba(201,168,76,.22);padding:16px 18px;margin-top:6px}
.dm-open{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.dm-open button{border:1px solid rgba(201,168,76,.35);background:transparent;color:var(--gold);font:inherit;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;padding:10px 14px}
.dm-note{font-size:.62rem;line-height:1.7;color:rgba(250,247,242,.3);margin-top:30px;max-width:900px}
/* modal */
.dm-modal{margin:0 -42px;padding:34px 42px 40px;background:rgba(5,11,22,.72);border-bottom:1px solid rgba(201,168,76,.12)}
.dm-modal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:24px}
.dm-modal-head h3{font:300 2.1rem/1.1 var(--font-display)}
.dm-mini{display:grid;grid-template-columns:repeat(4,auto);gap:22px}
.dm-mini b{display:block;font:300 1.7rem/1 var(--font-display);color:var(--gold)}
.dm-mini span{display:block;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.42);margin-top:5px;max-width:9em}
.dm-pair{border-top:1px solid rgba(201,168,76,.1);padding-top:22px;margin-top:22px}
@media(max-width:900px){
 .dm-intro{flex-direction:column;align-items:flex-start;gap:12px}
 .dm-stats{grid-template-columns:1fr 1fr}
 .dm-layout{grid-template-columns:1fr}
 .dm-pair-panel{position:static;max-height:none;padding:22px}
 .dm-grid{grid-template-columns:96px repeat(var(--n),22px)}
 .dm-modal{margin:0 -22px;padding:28px 22px}
 .dm-modal-head{flex-direction:column;align-items:flex-start}
 .dm-mini{grid-template-columns:1fr 1fr}
}

/* Human Matrix v2 — all 26 dimensions visible as a connected drama system */
.hm-matrix-overview{border-top:1px solid rgba(201,168,76,.12);padding:30px 0 28px;margin-top:26px}
.hm-core-title,.hm-map-title{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);gap:26px;align-items:start;margin-bottom:16px}
.hm-core-title>span,.hm-map-title>span{font:400 .58rem var(--font-mono);letter-spacing:.25em;color:var(--gold)}
.hm-core-title p,.hm-map-title p{font-size:.73rem;line-height:1.65;color:rgba(250,247,242,.46);max-width:760px}
.hm-core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(201,168,76,.11);margin-bottom:34px}
.hm-core-cell{min-width:0;border:0;background:#091529;color:var(--cream);text-align:left;padding:18px 18px 20px;font:inherit;cursor:pointer;transition:background .18s ease,box-shadow .18s ease}
.hm-core-cell:hover,.hm-core-cell.active{background:rgba(201,168,76,.12);box-shadow:inset 0 2px 0 var(--gold)}
.hm-core-cell>span{display:block;font:400 .52rem var(--font-mono);letter-spacing:.2em;color:var(--gold);margin-bottom:7px}
.hm-core-cell>b{display:block;font:400 .72rem/1.25 var(--font-display);letter-spacing:.03em}
.hm-core-cell>p{margin-top:8px;font-size:.67rem;line-height:1.55;color:rgba(250,247,242,.55)}
.hm-map-groups{display:grid;gap:14px}
.hm-map-group{border:1px solid rgba(201,168,76,.10);background:rgba(3,8,17,.28)}
.hm-map-group>header{padding:9px 12px;border-bottom:1px solid rgba(201,168,76,.09);font:400 .5rem var(--font-mono);letter-spacing:.2em;color:rgba(201,168,76,.72)}
.hm-map-group>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.hm-map-cell{position:relative;min-height:128px;border:0;border-right:1px solid rgba(201,168,76,.07);border-bottom:1px solid rgba(201,168,76,.07);background:rgba(250,247,242,.018);color:var(--cream);text-align:left;padding:14px 14px 15px;font:inherit;cursor:pointer}
.hm-map-cell:hover,.hm-map-cell.active{background:rgba(201,168,76,.08)}
.hm-map-cell i{display:block;font:400 .52rem var(--font-mono);font-style:normal;color:rgba(201,168,76,.6);margin-bottom:8px}
.hm-map-cell b{display:block;font-size:.62rem;line-height:1.3;letter-spacing:.04em}
.hm-map-cell span{display:block;margin-top:7px;font-size:.61rem;line-height:1.5;color:rgba(250,247,242,.43)}
.hm-panel{scroll-margin-top:90px}

/* Character relationship matrix — 17 counterpart cells, not a prose list */
.dm-modal-sub{font-size:.72rem;line-height:1.65;color:rgba(250,247,242,.45);max-width:760px;margin-top:10px}
.dm-mini{grid-template-columns:repeat(5,auto)}
.dm-char-matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:18px 0 12px}
.dm-char-cell{position:relative;min-height:84px;border:1px solid rgba(250,247,242,.04);background:rgba(250,247,242,.025);color:var(--cream);text-align:left;padding:13px 14px;font:inherit;cursor:pointer;overflow:hidden}
.dm-char-cell:before{content:'';position:absolute;inset:0;opacity:.32;pointer-events:none}
.dm-char-canon:before{background:rgba(201,168,76,var(--cell-heat))}
.dm-char-scene:before{background:rgba(85,165,200,.26)}
.dm-char-gap:before{background:rgba(250,247,242,.018)}
.dm-char-cell:hover,.dm-char-cell.on{border-color:rgba(201,168,76,.65);outline:1px solid rgba(201,168,76,.25);outline-offset:-3px}
.dm-char-cell span,.dm-char-cell b{position:relative;z-index:1;display:block}
.dm-char-cell span{font:400 .78rem/1.2 var(--font-display)}
.dm-char-cell b{margin-top:7px;font:400 .49rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.dm-char-cell>i{position:absolute;z-index:2;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:#B84D6F}
.dm-char-legend{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0 24px;font-size:.55rem;color:rgba(250,247,242,.45)}
.dm-char-legend span{display:inline-flex;align-items:center;gap:6px}
.dm-char-legend i{width:11px;height:11px;display:inline-block;border:1px solid rgba(250,247,242,.08)}
.dm-char-legend i.canon{background:rgba(201,168,76,.65)}
.dm-char-legend i.scene{background:rgba(85,165,200,.4)}
.dm-char-legend i.gap{background:rgba(250,247,242,.04)}
.dm-char-detail{border-top:1px solid rgba(201,168,76,.16);padding-top:24px;scroll-margin-top:90px}

@media(max-width:1100px){
 .hm-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dm-char-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dm-mini{grid-template-columns:repeat(3,auto)}
}
@media(max-width:700px){
 .hm-core-title,.hm-map-title{grid-template-columns:1fr;gap:7px}
 .hm-core-grid{grid-template-columns:1fr 1fr}
 .hm-core-cell{padding:14px}
 .hm-map-group>div{grid-template-columns:1fr 1fr}
 .dm-char-matrix{grid-template-columns:1fr 1fr}
 .dm-mini{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
 .hm-core-grid,.hm-map-group>div,.dm-char-matrix{grid-template-columns:1fr}
}
.hm-open-drama{display:block;margin-top:18px;border:1px solid rgba(201,168,76,.38);background:rgba(201,168,76,.06);color:var(--gold);font:400 .54rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:11px 14px;cursor:pointer}.hm-open-drama:hover{background:rgba(201,168,76,.12)}
