/* === PORTAL — Phase 2: Energy bridge dashboard === */
.phase-portal{display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(160deg,#08080F 0%,#0D0D1A 40%,#0A0F1A 100%);position:relative}
.phase-portal.active{display:flex}
.phase-portal::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}

/* Top bar */
.dash-top{flex-shrink:0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.04);z-index:2;position:relative;background:rgba(0,0,0,.2)}
.dash-status{display:flex;align-items:center;gap:8px}
.dash-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(22,163,74,.5);animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 4px rgba(22,163,74,.3)}50%{box-shadow:0 0 14px rgba(22,163,74,.6)}}
.dash-label{font-size:.78rem;font-weight:700;color:var(--green)}
.dash-code{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.25)}
.dash-timer-compact{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.5);min-width:32px;text-align:right}
.dash-timer-compact.warn{color:var(--warn)}
.dash-timer-compact.danger{color:var(--send);animation:tPulse .5s infinite}
@keyframes tPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Bridge area */
.bridge-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;min-height:0;padding:20px}
.bridge-layout{width:100%;max-width:820px;display:flex;align-items:stretch;gap:0;position:relative}

/* Nodes */
.node{flex:0 0 clamp(120px,20vw,180px);border-radius:20px;padding:clamp(16px,3vw,28px) clamp(12px,2vw,20px);display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:3;backdrop-filter:blur(8px)}
.node-you{background:linear-gradient(160deg,rgba(232,87,58,.12),rgba(232,87,58,.04));border:1.5px solid rgba(232,87,58,.2)}
.node-them{background:linear-gradient(160deg,rgba(37,99,235,.12),rgba(37,99,235,.04));border:1.5px solid rgba(37,99,235,.2)}
.node-label{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.3)}
.node-icon{font-size:clamp(2rem,5vw,3rem)}
.node-name{font-size:clamp(.75rem,1.8vw,.9rem);font-weight:800;color:rgba(255,255,255,.7)}
.node-dz{width:100%;padding:clamp(10px,2vw,16px) 8px;background:rgba(232,87,58,.06);border:2px dashed rgba(232,87,58,.2);border-radius:14px;text-align:center;cursor:pointer;transition:all .2s;margin-top:4px}
.node-dz:hover,.node-dz.over{background:rgba(232,87,58,.14);border-color:var(--send);transform:scale(1.03)}
.node-dz-icon{font-size:1.2rem;margin-bottom:2px}
.node-dz-text{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.4)}
.node-recv{padding:10px;background:rgba(22,163,74,.06);border:1.5px solid rgba(22,163,74,.15);border-radius:12px;text-align:center;opacity:0;transform:scale(.85);transition:all .5s cubic-bezier(.34,1.56,.64,1);width:100%;margin-top:4px}
.node-recv.show{opacity:1;transform:scale(1)}
.node-recv-icon{font-size:1.3rem}
.node-recv-text{font-size:.6rem;font-weight:700;color:rgba(22,163,74,.8);margin-top:2px}
.node-recv-name{font-size:.55rem;font-weight:600;color:rgba(255,255,255,.3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Stream */
.stream{flex:1;position:relative;min-width:60px;display:flex;align-items:center;z-index:2}
.stream-track{width:100%;height:6px;background:rgba(255,255,255,.03);border-radius:3px;position:relative;overflow:visible}
.stream-particle{position:absolute;top:50%;height:3px;border-radius:2px;transform:translateY(-50%);opacity:0}
.stream-particle.flowing{animation:particleFlow var(--speed,3s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes particleFlow{0%{left:-10%;opacity:0}10%{opacity:.7}50%{opacity:1}90%{opacity:.7}100%{left:110%;opacity:0}}
.stream-particle.p-send{background:linear-gradient(90deg,transparent,var(--send),transparent);width:clamp(20px,4vw,40px);height:2px}
.stream-particle.p-lock{background:linear-gradient(90deg,transparent,var(--portal),transparent);width:clamp(24px,5vw,48px)}
.stream-particle.p-recv{background:linear-gradient(90deg,transparent,var(--recv),transparent);width:clamp(20px,4vw,40px);height:2px}

/* Seal */
.stream-seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4}
.seal-ring{width:clamp(44px,8vw,60px);height:clamp(44px,8vw,60px);border-radius:50%;background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.05));border:2px solid rgba(124,58,237,.2);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);position:relative}
.seal-ring::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(124,58,237,.08);animation:sealSpin 20s linear infinite}
.seal-ring::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(124,58,237,.05);animation:sealSpin 30s linear infinite reverse}
@keyframes sealSpin{to{transform:rotate(360deg)}}
.seal-icon{font-size:1.1rem}
.seal-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:.5rem;font-weight:700;color:rgba(124,58,237,.4);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}

/* File packet */
.file-pkt{position:absolute;top:50%;width:38px;height:38px;border-radius:10px;background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,.35),0 0 20px rgba(124,58,237,.15);display:flex;align-items:center;justify-content:center;font-size:1rem;z-index:10;pointer-events:none;transform:translateY(-50%)}
.file-pkt.fly{animation:pktFly 2.8s cubic-bezier(.25,.1,.25,1) forwards}
@keyframes pktFly{0%{left:0%;opacity:0;transform:translateY(-50%) scale(.6)}8%{opacity:1;transform:translateY(-50%) scale(1)}42%{left:44%;transform:translateY(-50%) scale(.6)}50%{left:50%;transform:translateY(-50%) scale(.45);filter:brightness(1.5) saturate(1.5) drop-shadow(0 0 16px rgba(124,58,237,.7))}58%{left:56%;transform:translateY(-50%) scale(.6)}92%{opacity:1;transform:translateY(-50%) scale(1)}100%{left:100%;opacity:0;transform:translateY(-50%) scale(.8)}}

/* Bottom */
.dash-bottom{flex-shrink:0;padding:10px 20px;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.04);z-index:2;background:rgba(0,0,0,.15)}
.timer-bar{flex:1;height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.timer-fill{height:100%;border-radius:2px;transition:width 1s linear;background:var(--green)}
.timer-fill.warn{background:var(--warn)}.timer-fill.danger{background:var(--send)}
.dash-trust{font-size:.58rem;font-weight:600;color:rgba(255,255,255,.15);max-width:320px;line-height:1.35}
.quitters-wrap{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);z-index:6;width:90%;max-width:380px;display:none}
.q-btn{width:100%;padding:10px 14px;border:2px dashed rgba(255,255,255,.08);border-radius:var(--r);background:rgba(255,255,255,.02);font-family:inherit;font-size:.8rem;font-weight:800;color:rgba(255,255,255,.25);cursor:pointer;transition:all .2s;backdrop-filter:blur(4px)}
.q-btn:hover{border-color:var(--send);color:var(--send);border-style:solid;background:rgba(232,87,58,.04)}
.q-btn .sub{display:block;font-size:.62rem;font-weight:600;color:rgba(255,255,255,.15);margin-top:2px}

@media(max-width:540px){
    .bridge-layout{flex-direction:column;align-items:center}
    .node{flex:none;width:clamp(140px,60vw,200px)}
    .stream{width:6px;height:80px;min-width:auto;flex:none}
    .stream-track{width:6px;height:100%}
    .stream-particle{width:3px!important;height:clamp(16px,4vw,30px)!important;left:50%!important;top:auto;transform:translateX(-50%)}
    .stream-particle.flowing{animation:particleFlowV var(--speed,3s) linear infinite;animation-delay:var(--delay,0s)}
    @keyframes particleFlowV{0%{top:-10%;opacity:0}10%{opacity:.7}50%{opacity:1}90%{opacity:.7}100%{top:110%;opacity:0}}
    .file-pkt.fly{animation:pktFlyV 2.8s cubic-bezier(.25,.1,.25,1) forwards}
    @keyframes pktFlyV{0%{top:0%;left:50%;opacity:0;transform:translate(-50%,-50%) scale(.6)}8%{opacity:1;transform:translate(-50%,-50%) scale(1)}42%{top:44%;transform:translate(-50%,-50%) scale(.6)}50%{top:50%;transform:translate(-50%,-50%) scale(.45);filter:brightness(1.5) drop-shadow(0 0 16px rgba(124,58,237,.7))}58%{top:56%;transform:translate(-50%,-50%) scale(.6)}92%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{top:100%;opacity:0;transform:translate(-50%,-50%) scale(.8)}}
}
@media(max-height:560px){.dash-trust{display:none}.node-name{display:none}}