*{box-sizing:border-box}
html{background:#10131a;overflow-y:scroll}
body{margin:0;background:#10131a;color:#e9edf5;font:14px/1.45 Arial,Helvetica,sans-serif}
.wrap{width:min(1480px,100%);margin:0 auto;padding:18px}
.top{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.titleblock{min-width:0}h1{margin:0;font-size:28px;line-height:1.15}h2{margin:0 0 10px;font-size:19px}.muted{color:#99a3b5}.small{font-size:12px;font-weight:normal}
.badge{flex:0 0 auto;min-width:82px;text-align:center;padding:8px 12px;border-radius:999px;background:#333;color:#fff;font-weight:bold}.badge.online{background:#147d3f}.badge.offline{background:#8b2430}
.card{background:#181d28;border:1px solid #2a3142;border-radius:14px;padding:14px;box-shadow:0 6px 22px rgba(0,0,0,.18)}
.timeline-card{margin-bottom:14px}.timeline-head{min-height:52px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.chartcontrols{display:flex;gap:8px;flex:0 0 auto}.chartcontrols button{min-width:92px;background:#263044;color:#e9edf5;border:1px solid #3a455c;border-radius:8px;padding:7px 10px;cursor:pointer;font-weight:bold}.chartcontrols button:hover,.chartcontrols button.active{background:#36506e}.chartinfo{height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:1px 0 7px}
.timeline-shell{display:grid;grid-template-columns:190px minmax(0,1fr);border:1px solid #2a3142;border-radius:10px;overflow:hidden;background:#0d1016}
.slot-labels{background:#121722;border-right:1px solid #30394d;display:grid;overflow:hidden}.slot-label{min-width:0;padding:0 8px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(54,64,82,.55)}.slot-label:last-child{border-bottom:0}.slot-num{flex:0 0 22px;color:#667085;font:11px/1 Consolas,monospace;text-align:right}.slot-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.slot-label.human .slot-name{color:#58d68d}.slot-label.botrow .slot-name{color:#aab0ba}.slot-label.empty .slot-name{color:#4f596b;font-weight:400}.slot-kind{margin-left:auto;flex:0 0 auto;font-size:9px;color:#788397;text-transform:uppercase}
.chartbox{position:relative;overflow:hidden;background:#0d1016}.chartbox canvas{display:block;width:100%;cursor:crosshair;touch-action:none}.chartbox.dragging canvas{cursor:grabbing}
.charttip{position:absolute;display:none;z-index:5;width:max-content;max-width:calc(100% - 8px);overflow:hidden;background:rgba(13,16,22,.97);border:1px solid #445066;border-radius:9px;padding:6px 8px;color:#e9edf5;font-size:14px;line-height:1.2;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}.charttip .mapline{color:#9fb0c8;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #273246;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.dot.human{background:#2ecc71}.dot.bot{background:#9ca3af}.chatmark{color:#facc15;font-weight:bold}
.stacked-panels{display:flex;flex-direction:column;gap:14px;min-width:0}.chat-card,.rank-card{height:520px;min-height:520px;overflow:hidden;min-width:0}.chat{height:462px;overflow-y:auto;overflow-x:hidden;background:#0d1016;border:1px solid #2a3142;border-radius:10px;padding:9px;scrollbar-gutter:stable}.msg{padding:7px 8px;border-bottom:1px solid #202737;min-width:0}.msg:last-child{border-bottom:0}.msg .meta{color:#95a0b4;font-size:12px;margin-bottom:2px;overflow-wrap:anywhere}.msg .text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.steam{font-family:Consolas,monospace;color:#cad3e6}.tablewrap{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;max-width:100%}.rankwrap{height:462px;overflow-y:auto;overflow-x:hidden;background:#0d1016;border:1px solid #2a3142;border-radius:10px;padding:0 8px;scrollbar-gutter:stable}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse}th,td{border-bottom:1px solid #293142;padding:8px 5px;text-align:left;white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}th{position:sticky;top:0;background:#181d28;z-index:1;color:#b8c3d8;font-size:10px;text-transform:uppercase;letter-spacing:.02em}td{font-size:12px}td.name{font-weight:bold}.rankscore{font-weight:bold}.flag{font-size:18px;line-height:1;display:inline-block;min-width:20px;text-align:center}.noflag{color:#667085}#rank th:nth-child(1),#rank td:nth-child(1){width:4%}#rank th:nth-child(2),#rank td:nth-child(2){width:7%}#rank th:nth-child(3),#rank td:nth-child(3){width:20%}#rank th:nth-child(4),#rank td:nth-child(4){width:24%}#rank th:nth-child(5),#rank td:nth-child(5),#rank th:nth-child(6),#rank td:nth-child(6),#rank th:nth-child(7),#rank td:nth-child(7),#rank th:nth-child(8),#rank td:nth-child(8){width:7%}#rank th:nth-child(9),#rank td:nth-child(9){width:10%}
@media(max-width:900px){.wrap{padding:10px}.top{min-height:62px;align-items:flex-start}.top h1{font-size:23px}.timeline-card{padding:10px}.timeline-head{min-height:66px;display:block}.chartcontrols{margin-top:7px}.timeline-shell{grid-template-columns:132px minmax(0,1fr)}.slot-label{padding:0 5px;gap:4px}.slot-num{flex-basis:18px}.slot-kind{display:none}.chat-card,.rank-card{height:480px;min-height:480px}.chat,.rankwrap{height:422px}}
@media(max-width:520px){body{font-size:13px}.wrap{padding:7px}.card{border-radius:10px}.timeline-shell{grid-template-columns:112px minmax(0,1fr)}.slot-label{font-size:11px}.slot-num{font-size:9px;flex-basis:15px}.chartcontrols button{min-width:76px;padding:6px 8px}.timeline-head .muted{font-size:10px}.charttip{width:max-content;max-width:calc(100% - 8px);font-size:13px}.charttip .tiprow.compact{height:36px;gap:6px}.tipname{max-width:150px;font-size:13px}.tipkd{font-size:12px}.chat-card,.rank-card{height:450px;min-height:450px}.chat,.rankwrap{height:392px}}

.charttip .tiprow.compact{height:36px;display:grid;grid-template-columns:max-content 18px max-content;align-items:center;gap:8px;border-bottom:1px solid #202838;white-space:nowrap}.charttip .tiprow.compact:last-child{border-bottom:0}.tipname{max-width:230px;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700}.chatdot{color:#facc15;text-align:center;font-size:15px}.tipkd{color:#c7d2e3;text-align:right;font:13px/1 Consolas,monospace}

/* v1.0.25: never create horizontal page/table scrolling. */
html,body,.wrap,.card,.timeline-card,.stacked-panels{max-width:100%;overflow-x:hidden}.timeline-shell{min-width:0;max-width:100%}.chartbox{min-width:0}.slot-labels{min-width:0}
@media(max-width:700px){#rank th:nth-child(2),#rank td:nth-child(2),#rank th:nth-child(4),#rank td:nth-child(4),#rank th:nth-child(9),#rank td:nth-child(9){display:none}#rank th:nth-child(1),#rank td:nth-child(1){width:8%}#rank th:nth-child(3),#rank td:nth-child(3){width:32%}#rank th:nth-child(5),#rank td:nth-child(5),#rank th:nth-child(6),#rank td:nth-child(6),#rank th:nth-child(7),#rank td:nth-child(7),#rank th:nth-child(8),#rank td:nth-child(8){width:15%}th,td{padding:7px 3px;font-size:11px}.rankwrap,.tablewrap{overflow-x:hidden}}
@media(max-width:420px){#rank th:nth-child(7),#rank td:nth-child(7){display:none}#rank th:nth-child(3),#rank td:nth-child(3){width:38%}#rank th:nth-child(5),#rank td:nth-child(5),#rank th:nth-child(6),#rank td:nth-child(6),#rank th:nth-child(8),#rank td:nth-child(8){width:18%}}

/* v1.0.30 mobile timeline touch + compact tooltip */
.charttip{
    width:max-content;
    max-width:min(96%,360px);
    padding:5px 6px;
}
.charttip .mapline{
    max-width:340px;
    margin-bottom:3px;
    padding-bottom:3px;
}
.charttip .tiprow.compact{
    height:36px;
    display:flex;
    align-items:center;
    gap:3px;
    width:max-content;
    max-width:100%;
}
.tipname{
    display:block;
    flex:0 1 auto;
    min-width:0;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:700;
}
.chatdot{
    flex:0 0 auto;
    width:12px;
    margin:0;
    font-size:15px;
    line-height:1;
    text-align:center;
}
.tipkd{
    flex:0 0 auto;
    margin:0;
    padding:0;
    color:#c7d2e3;
    white-space:nowrap;
    font:700 13px/1 Consolas,monospace;
}
@media(max-width:520px){
    .charttip{
        max-width:calc(100% - 6px);
        padding:4px 5px;
        font-size:13px;
    }
    .charttip .mapline{max-width:260px}
    .charttip .tiprow.compact{height:36px;gap:2px}
    .tipname{max-width:145px;font-size:13px}
    .chatdot{width:10px;font-size:14px}
    .tipkd{font-size:12px}
}

/* v1.0.31 - MOTD return button */
.motd-back{
    position:fixed;
    left:8px;
    top:8px;
    z-index:5000;
    display:inline-block;
    padding:6px 9px;
    border:1px solid #40536b;
    border-radius:7px;
    background:#172231;
    color:#d9e6f5;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.motd-back:hover{background:#213149}
@media(max-width:700px){
    .motd-back{left:4px;top:4px;padding:5px 7px;font-size:10px}
    .wrap{padding-top:28px}
}

/* 1.0.33 timeline legend; editor keeps these synchronized with timeline colors */
:root{--legend-elite:#ffffff;--legend-active:#2ecc71;--legend-afk:#ef4444;--legend-bot:#9ca3af;--legend-chat:#facc15}
.timeline-legend{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px}
.legend-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.legend-swatch{display:inline-block;width:18px;height:3px;border-radius:2px;background:currentColor;flex:0 0 auto}
.legend-swatch.elite{color:var(--legend-elite)}.legend-swatch.active{color:var(--legend-active)}.legend-swatch.afk{color:var(--legend-afk)}.legend-swatch.bot{color:var(--legend-bot)}
.legend-swatch.chatmark{width:7px;height:7px;border-radius:50%;color:var(--legend-chat)}
@media(max-width:520px){.timeline-legend{gap:3px 7px;font-size:9px;line-height:1.2}.legend-swatch{width:13px}}