/* Screens C: research, hq, intel. Shared layout kit (c-*) + screen specifics. */
.c-root{grid-template-columns:minmax(0,1fr) 410px;grid-template-rows:minmax(0,1fr);gap:10px;padding:10px;overflow:hidden}
.c-left,.c-right{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;position:relative;z-index:1}
.c-pane{min-height:0}.c-pane.fill{flex:1}.c-tabs{display:none}
.c-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.c-seg{display:flex;gap:4px;flex-wrap:wrap}.c-seg button,.c-tabs button{background:var(--ivory);border:3px solid var(--ink);min-height:44px;padding:4px 12px;font:italic 900 16px var(--disp);letter-spacing:.5px}
.c-seg button.on,.c-tabs button.on{background:var(--yellow)}
.c-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:14px;align-items:center}.c-kv b{font:italic 800 15px var(--disp)}
.c-bad{color:#b01810;font-weight:800}.c-ok{color:#1f7a2b;font-weight:800}
.c-why{font:italic 800 13px var(--body);color:#b01810;text-align:center}
.c-big{width:100%}
.c-plain{background:rgba(255,242,212,.94)}
/* research tree */
.c-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.c-branch h4{margin:0 0 6px;font:italic 900 17px var(--disp);background:var(--cyan);border:2px solid var(--ink);padding:2px 8px;text-align:center}
.c-bcanvas{position:relative}.c-bcanvas svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.c-bcanvas svg line{stroke:#111;stroke-width:3;vector-effect:non-scaling-stroke;opacity:.55}.c-bcanvas svg line.lit{stroke:var(--green);opacity:1}
.c-node{position:absolute;width:47%;height:78px;transform:translateX(-50%);border:3px solid var(--ink);background:#e7eef5;padding:3px 5px;text-align:left;font:800 12px/1.1 var(--body);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.c-node b{font:italic 900 14px/1 var(--disp)}.c-node small{font:700 11px var(--body)}
.c-node.available{background:#bfe6f7}.c-node.done{background:#a9e59a}.c-node.active{background:#fff1a6}.c-node.locked{background:#c9ccd1;color:#555}.c-node.sel{outline:4px solid var(--red);outline-offset:1px;z-index:2}
.c-node .bar{height:8px}
.c-slot{display:flex;gap:8px;align-items:center;border:2px solid var(--ink);padding:6px 8px;background:#fff;min-height:44px}.c-slot.empty{background:#e3e0d6;border-style:dashed;opacity:.8}.c-slot .bar{flex:1}
.c-branchtabs{display:none}
/* hq */
.c-tower{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:0;grid-auto-rows:minmax(110px,1fr)}
.c-roof{background:var(--ivory);border:4px solid var(--ink);text-align:center;font:italic 900 30px var(--disp);padding:4px;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.c-room{border:4px solid var(--ink);background:#d8dee6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;position:relative;font:italic 900 17px var(--disp);min-height:44px;overflow:hidden;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.c-room .nm{background:var(--yellow);border:2px solid var(--ink);padding:0 8px;transform:skewX(-8deg)}
.c-room.empty{background:repeating-linear-gradient(45deg,#c5ccd5,#c5ccd5 8px,#d7dde5 8px,#d7dde5 16px);border-style:dashed;color:#444}.c-room.empty .icon,.c-room.empty .ficon{filter:grayscale(1) brightness(.3);opacity:.5}
.c-room.sel{outline:5px solid var(--red);outline-offset:-1px;background:#fff3b0}.c-room .bar{width:80%;height:10px}
.c-pips{display:flex;gap:3px;padding:0 3px}.c-pips i{width:14px;height:14px;border:2px solid var(--ink);background:#fff;transform:rotate(45deg)}.c-pips i.on{background:var(--yellow)}.c-pips i.up{background:var(--cyan)}
.c-lv{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:13px}.c-lv>span{padding:3px 6px;border:2px solid transparent}.c-lv .cur{background:#a9e59a;border-color:var(--ink)}.c-lv .nxt{background:#fff1a6;border-color:var(--ink)}
.c-power{height:22px;border:3px solid var(--ink);background:#ddd;position:relative;display:flex;overflow:hidden}.c-power i{display:block;height:100%}.c-power .u{background:var(--cyan)}.c-power .d{background:var(--yellow)}.c-power .x{background:var(--red)}
.c-cat>div{min-height:48px}
/* intel */
.c-wallscroll{flex:1;min-height:0;display:flex}.c-wall{flex:1;position:relative;min-height:300px;border:4px solid var(--ink);background:#a8764a radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.5px) 0 0/5px 5px;box-shadow:5px 5px 0 rgba(0,0,0,.55)}
.c-wall svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.c-wall svg line{stroke:#c0281f;stroke-width:3;vector-effect:non-scaling-stroke}.c-wall svg line.dim{stroke:#5a3b22;stroke-dasharray:6 5}
.c-pin{position:absolute;transform:translate(-50%,-50%);background:#fffbe9;border:3px solid var(--ink);padding:3px;min-width:92px;max-width:130px;text-align:center;font:italic 800 12px/1.1 var(--body);display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.c-pin .portrait{width:56px;height:56px}.c-pin.unk{background:#cfc6b0;color:#555}.c-pin.unk .portrait,.c-pin.unk .q{filter:grayscale(1)}.c-pin.sel{outline:4px solid var(--yellow);z-index:2}.c-pin.lead{min-width:120px}
.c-pin .q{width:56px;height:56px;display:grid;place-items:center;background:#2a2a2a;color:#cfc6b0;font:900 34px var(--disp);border:3px solid var(--ink)}
.c-ev>div{align-items:flex-start;flex-direction:column;gap:2px}
@media (max-width:820px){
 .c-root{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px;padding:6px}
 .c-left,.c-right{display:contents}.c-left>.c-head{grid-row:1;grid-column:1;position:relative;z-index:2}.c-pane{grid-row:3;grid-column:1;display:none!important}.c-pane.on{display:flex!important}
 .c-tabs{display:flex;gap:4px;grid-row:2;grid-column:1;position:relative;z-index:2}.c-tabs button{flex:1;padding:4px 2px;font-size:14px}
 .c-tree{grid-template-columns:1fr}.c-branch{display:none}.c-branch.on{display:block}.c-branchtabs{display:flex;gap:4px;margin-bottom:6px}.c-branchtabs button{flex:1;min-height:44px;border:3px solid var(--ink);background:var(--ivory);font:italic 900 13px var(--disp)}.c-branchtabs button.on{background:var(--yellow)}
 .c-node{width:47%}.c-roof{font-size:22px}.c-room{font-size:14px;padding:3px}.c-tower{grid-auto-rows:minmax(92px,1fr);gap:5px}
 .c-pin{min-width:72px;max-width:96px;font-size:11px}.c-pin .portrait,.c-pin .q{width:44px;height:44px}.c-pin.lead{min-width:90px}
}
.c-pane.off{display:none}
@media (max-width:820px){.c-sub{display:none}.c-wallscroll{overflow:auto;display:block}.c-wall{width:860px;height:100%;min-height:560px}}
.c-root .btn.sm{min-height:44px}.p-detail .big{font-size:28px;line-height:1}

/* debrief */
.db-hero{display:flex;gap:8px;align-items:center;border-bottom:2px solid rgba(0,0,0,.25);padding:6px 4px}.db-hero .portrait{width:44px;height:44px}.db-hero.bench{opacity:.8}
.db-hero.lvup{background:#fff3a8;outline:3px solid var(--red);animation:dbpulse 1.1s ease-in-out 3}.db-gain{font:italic 900 18px var(--disp);white-space:nowrap}.db-up{font-size:13px;background:var(--yellow)}.db-xp{white-space:nowrap}
@keyframes dbpulse{50%{background:#ffe14a}}
.c-legend{flex:none;font-size:11px;line-height:1.2;opacity:1;background:#fff8e6;border:2px solid var(--ink);padding:2px 6px}

@media (max-height:500px),(max-width:1200px){.c-tree{grid-template-columns:1fr}.c-branch{display:none}.c-branch.on{display:block}.c-branchtabs{display:flex;gap:4px;margin-bottom:6px}.c-branchtabs button{flex:1;min-height:44px;border:3px solid var(--ink);background:var(--ivory);font:italic 900 13px var(--disp)}.c-branchtabs button.on{background:var(--yellow)}.c-node{width:min(47%,240px)}}
.c-mk{border:2px solid var(--ink);background:#fff8e6;padding:6px 8px;display:flex;flex-direction:column;gap:4px}.c-mkq{min-width:2ch;text-align:center;font:900 18px var(--disp)}
@media (min-width:821px){.c-root:not(.lm) .p-market{display:none}.c-root.lm .p-tower{display:none}}@media (max-width:820px){.c-lowseg{display:none}}
/* wave 2: landscape phones, text sizes */
@media (max-width:820px),(max-height:500px){.c-sub{display:none}.c-wallscroll{overflow:auto;display:block}.c-wall{width:900px;height:100%;min-height:340px}.c-pin{min-width:72px;max-width:96px;font-size:11px}.c-pin .portrait,.c-pin .q{width:44px;height:44px}.c-pin.lead{min-width:90px}}
@media (max-height:500px){.c-room{font-size:12px;padding:2px}.c-room .nm{padding:0 4px;white-space:normal;text-align:center;line-height:1}.c-room .icon,.c-room .ficon{width:28px;height:28px}.c-tower{grid-auto-rows:minmax(84px,1fr)}}
@media (min-width:821px){.c-why,.c-kv,.c-lv,.c-ev,.c-cat .hint{font-size:14px}}

/* playtest 3: market as its own section, wide-screen caps */
.c-mkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;align-content:start;overflow:auto;min-height:0}
.c-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (min-width:1900px){.c-tower,.c-roof,.c-legend{width:min(100%,860px);align-self:center}.c-tower{flex:0 1 auto;height:min(100%,760px)}.c-tree{max-width:1300px;margin-inline:auto}}