/* caller.css — updated: lighter glass, responsive cards, no overflow bugs */
:root{
    --primary: rgba(255,255,255,0.95);
    --secondary: rgba(255,255,255,0.75);
    --accent: rgba(255,255,255,0.5);
    --glass: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.06);
    --glass-highlight: rgba(255,255,255,0.08);
    --text: rgba(255,255,255,0.95);
    --text-muted: rgba(255,255,255,0.65);
    --blur-amount: 8px; /* reduced for lighter look */
}

/* base */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; width:100%; }
body {
    background: linear-gradient(135deg,#020204, #060608, #0b0b0b);
    font-family: 'Exo 2', sans-serif;
    color: var(--text);
    overflow: hidden;
    -webkit-font-smoothing:antialiased;
}

/* subtle animated gradient container kept in HTML */
.gradient-bg { position:absolute; inset:0; z-index:1; }

/* particle canvas */
#particleCanvas{ position:absolute; inset:0; z-index:2; display:block; }

/* container — lighter glass */
.glass-container{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:94%; max-width:1400px;
    height:88%;
    background: var(--glass);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
    z-index:10;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* header */
.glass-header{
    padding:16px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.02);
    background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent);
}
.logo { display:flex; align-items:center; gap:12px; }
.logo-icon{ width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.02); border:1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.logo-text{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:20px; letter-spacing:1px; color:var(--primary);}

/* status */
.status-indicators{ display:flex; gap:12px; }
.status-item{ display:flex; gap:8px; align-items:center; padding:6px 12px; border-radius:9px;
    background: rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.02); font-size:13px; font-weight:600;
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary); animation:pulse 2s infinite; }

/* main area */
.main-content{ display:flex; gap:20px; padding:20px; flex:1; align-items:stretch; z-index:5; }

/* Missions panel — responsive grid that prevents overflow */
.missions-panel{ flex:1; display:flex; flex-direction:column; padding:14px; min-width:0; }
.panel-title{ font-family:'Orbitron',sans-serif; font-size:18px; color:var(--primary); font-weight:700; margin-bottom:8px; }
.panel-subtitle{ font-size:13px; color:var(--text-muted); margin-bottom:14px; }

/* grid: automatically fits cards; avoids overflow by minmax */
.missions-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:18px;
    align-items:start;
    overflow-y:auto;
    padding-right:6px;
}

/* make sure grid children can shrink (fixes text escaping to the right) */
.missions-grid > * { min-width:0; }

/* mission card — lighter styling and overflow fixes */
.mission-card{
    background: rgba(255,255,255,0.02);
    border-radius:12px;
    padding:18px;
    border:1px solid var(--glass-border);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition: transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
    position:relative;
    min-width:0; /* critical for text wrapping inside a flex/grid */
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* subtle hover */
.mission-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.09);
}

/* icon */
.mission-icon{
    width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02);
    color:var(--primary);
    flex: 0 0 auto;
}

/* content text: ensure wrapping and shrinking */
.mission-name{
    font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; color:var(--primary);
    margin-bottom:6px;
    white-space:normal; word-break:break-word; hyphens:auto;
}
.mission-desc{
    font-size:13px; color:var(--text-muted); line-height:1.5; flex:1; min-width:0;
    overflow-wrap:break-word; word-break:break-word;
}

/* meta row */
.mission-meta{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); min-width:0; }
.mission-status{ display:flex; align-items:center; gap:6px; }

/* click indicator sits at bottom, centered */
.click-indicator{
    align-self:center;
    font-size:12px; font-weight:700; color:var(--primary);
    padding:8px 12px; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02);
    transition:opacity .2s ease, transform .2s ease;
    opacity:1; /* visible by default for clarity */
}

/* dashboard panel right column */
.dashboard-panel{ width:340px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.stats-card{ padding:18px; background:transparent; display:flex; flex-direction:column; gap:10px; }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-height:200px; overflow:auto; padding-right:6px; }
.stat-item{ padding:12px; border-radius:10px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); text-align:center; min-width:0; }
.stat-value{ font-family:'Orbitron',sans-serif; font-size:20px; font-weight:800; color:var(--primary); }

/* terminal */
.terminal{ padding:18px; flex:1; display:flex; flex-direction:column; min-width:0; }
.terminal-header{ display:flex; justify-content:space-between; color:var(--primary); font-family:'Orbitron',sans-serif; font-weight:700; margin-bottom:10px; }
.terminal-content{ background: rgba(0,0,0,0.28); border-radius:10px; padding:12px; font-family: 'Courier New',monospace; font-size:13px; overflow:auto; border:1px solid rgba(255,255,255,0.02); min-width:0; }

/* debug panel */
.debug-panel{ position: absolute; bottom:20px; right:20px; width:300px; background: rgba(0,0,0,0.66); border-radius:10px; padding:12px; border:1px solid var(--glass-border); transform:translateY(calc(100% - 40px)); transition:transform .28s ease; z-index:20; }
.debug-panel:hover{ transform:translateY(0); }

/* footer */
.glass-footer{ padding:12px 18px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.glass-btn{ padding:8px 14px; border-radius:9px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); font-family:'Orbitron',sans-serif; font-weight:700; cursor:pointer; transition:transform .18s; position:relative; overflow:hidden; }

/* small ripple */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:ripple-animation .6s linear; pointer-events:none; background:rgba(255,255,255,0.08); }

/* overlay (launch) */
.launch-overlay{ position:absolute; inset:0; background: rgba(2,2,2,0.95); backdrop-filter: blur(6px); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:100; pointer-events:none; opacity:0; transition:opacity .6s ease; }
.launch-overlay.active{ pointer-events:all; opacity:1; }
.countdown{ font-family:'Orbitron',sans-serif; font-weight:900; font-size:84px; color:var(--primary); text-shadow:0 0 30px rgba(255,255,255,0.08); }

/* small tweaks */
.mission-card .mission-icon svg{ width:26px; height:26px; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
@keyframes ripple-animation{ to{ transform:scale(4); opacity:0 } }

/* responsive */
@media (max-width:1000px){
    .dashboard-panel{ width:320px; }
}
@media (max-width:780px){
    .main-content{ flex-direction:column; padding:12px; }
    .dashboard-panel{ width:100%; flex-direction:row; gap:12px; }
    .missions-grid{ grid-template-columns: 1fr; }
}
/* Global ripple effect for any click */
.global-ripple {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) scale(0);
    animation: global-ripple-animation 0.6s ease-out;
    pointer-events: none;
    z-index: 9999;
}

@keyframes global-ripple-animation {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}