:root {
    --bg-dark: #0e1017;
    --card-bg: #161922;
    --border-color: #2a2e3d;
    --text-primary: #e6e8ee;
    --text-secondary: #8b92a5;
    
    --blood-red: #e63946;
    --green-correct: #2a9d8f;
    --yellow-present: #e9c46a;
    --gray-absent: #383d4d;
    
    --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, sans-serif; }

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 15px;
}

header {
    width: 100%; max-width: 650px;
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 15px; border-bottom: 1px solid var(--border-color);
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--blood-red); }
.logo span { color: var(--text-primary); }
.icon-btn { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-primary); }

.tabs { display: flex; gap: 10px; margin: 20px 0; }
.tab-btn {
    background: var(--card-bg); color: var(--text-secondary);
    border: 1px solid var(--border-color); padding: 8px 20px;
    border-radius: var(--radius); cursor: pointer; font-weight: 600;
}
.tab-btn.active { background: var(--blood-red); color: white; border-color: var(--blood-red); }

.game-container { display: none; width: 100%; max-width: 650px; }
.game-container.active { display: flex; flex-direction: column; align-items: center; gap: 15px; }

.target-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 15px; width: 100%;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
}
.target-node { font-size: 14px; display: flex; align-items: center; }
.target-node i { font-size: 16px; vertical-align: middle; }
.meta-info { font-size: 12px; color: var(--text-secondary); display: flex; gap: 10px; width: 100%; margin-top: 5px;}

/* Path-le Uniform Grid */
.grid { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; width: 100%; }
.row { display: flex; gap: 8px; justify-content: center; width: 100%; }
.box {
    flex: 1; /* Forces all boxes to distribute space equally */
    width: 0; /* Prevents long text from stretching the box */
    height: 48px; 
    border: 2px solid var(--border-color); border-radius: 6px; 
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; /* Scaled down to fit long AD edges */
    font-weight: bold; background: var(--card-bg); transition: all 0.3s;
    padding: 2px; text-align: center;
    word-wrap: break-word; overflow-wrap: break-word; line-height: 1.2;
}
.box.correct { background-color: var(--green-correct); border-color: var(--green-correct); color: white; }
.box.present { background-color: var(--yellow-present); border-color: var(--yellow-present); color: #111; }
.box.absent { background-color: var(--gray-absent); border-color: var(--gray-absent); color: #888; }

/* Input Controls */
.input-section { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.search-bar, .action-bar { display: flex; gap: 8px; width: 100%; }
.edge-search { display: flex; gap: 8px; width: 100%; margin-bottom: 10px; }
input, select {
    flex: 1; background: var(--card-bg); border: 1px solid var(--border-color);
    color: white; padding: 10px; border-radius: var(--radius); outline: none;
}
.btn {
    padding: 10px 16px; border: none; border-radius: var(--radius);
    cursor: pointer; font-weight: bold; font-size: 13px; color: white;
}
.action-btn { background: #3a86ff; }
.submit-btn { background: var(--green-correct); flex: 1; }
.delete-btn { background: var(--gray-absent); }

/* Edge-le Uniform Table */
.table-wrapper { width: 100%; overflow-x: auto; }
table { 
    width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; 
    table-layout: fixed; /* Forces equal column widths */
}
th, td { 
    border: 1px solid var(--border-color); padding: 8px 4px; text-align: center; 
    word-wrap: break-word; overflow-wrap: break-word;
}
th { background: var(--card-bg); color: var(--text-secondary); }
.match-yes { background: var(--green-correct) !important; color: white; }
.match-no { background: var(--blood-red) !important; color: white; }
.match-partial { background: var(--yellow-present) !important; color: #111; font-weight: bold; }

/* Color Guide */
.color-guide {
    width: 100%; max-width: 650px;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 15px; margin-top: 20px;
}
.color-guide h4 {
    margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); text-align: center; text-transform: uppercase;
}
.guide-item {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px;
}
.guide-color {
    width: 20px; height: 20px; border-radius: 4px; border: 1px solid #000; flex-shrink: 0;
}
.bg-green { background: var(--green-correct); }
.bg-yellow { background: var(--yellow-present); }
.bg-gray { background: var(--gray-absent); }
.bg-red { background: var(--blood-red); } 

/* Game Messages */
.game-message {
    margin-top: 15px; font-weight: bold; text-align: center; font-size: 15px; padding: 10px; border-radius: 6px; width: 100%;
}
.msg-success { background: rgba(42, 157, 143, 0.2); color: var(--green-correct); border: 1px solid var(--green-correct); }
.msg-fail { background: rgba(230, 57, 70, 0.2); color: var(--blood-red); border: 1px solid var(--blood-red); }

/* Modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 100; }
.modal-content { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; width: 90%; max-width: 400px; position: relative; }
.close-btn { position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; color: var(--text-secondary); }
.global-counter { text-align: center; margin: 15px 0; background: #0e1017; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); }
.count-val { font-size: 28px; font-weight: 800; color: var(--green-correct); }
.count-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; }
.stats-grid { display: flex; justify-content: space-between; margin: 15px 0; text-align: center; }
.stat-box span { font-size: 20px; font-weight: bold; display: block; }
.stat-box label { font-size: 11px; color: var(--text-secondary); }
.chart-container { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.chart-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.chart-bar { background: var(--green-correct); height: 18px; border-radius: 3px; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; font-weight: bold; }

/* Footer Styling */
.site-footer {
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    max-width: 650px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.site-footer a {
    color: #3a86ff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

.site-footer a:hover {
    color: var(--green-correct);
    text-decoration: underline;
}