*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#e8f0fe;--card:#fff;--border:#c7d9f8;--blue:#3b82f6;--blue-dark:#1d4ed8;--blue-dim:#eff6ff;
  --text:#1e293b;--text-dim:#64748b;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;
}
html,body{height:100%;font-family:'Inter',sans-serif;color:var(--text);background:linear-gradient(135deg,#dbeafe 0%,#eff6ff 50%,#e0ecff 100%);overflow:hidden}
body{padding:20px 22px 22px;display:flex;flex-direction:column;min-width:0}
header{text-align:center;margin-bottom:14px;flex-shrink:0;pointer-events:none}
.site-title{font-family:'Press Start 2P',monospace;font-size:clamp(1rem,2.2vw,1.55rem);color:var(--blue-dark);text-shadow:3px 3px 0 #bcd4f8;letter-spacing:-1px;margin-bottom:7px}
.site-title span{color:var(--blue)}.site-sub{color:var(--text-dim);font-size:.8rem;font-weight:500}
.corner-link{position:absolute;top:20px;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 14px;color:var(--blue-dark);box-shadow:0 4px 12px rgba(59,130,246,.1);font-weight:600;font-size:.82rem;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s;z-index:60}
.corner-link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(59,130,246,.16)}
.corner-link.left{left:22px}.corner-link.right{right:22px}.corner-link.disabled{opacity:.45;pointer-events:none}.corner-icon{font-size:1.15rem}
.dashboard{flex:1;min-height:0;width:100%;max-width:1840px;margin:0 auto;display:grid;grid-template-columns:minmax(290px,.82fr) minmax(540px,2.05fr) minmax(285px,.78fr);gap:16px}
.card{min-width:0;min-height:0;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 4px 24px rgba(59,130,246,.1);overflow:hidden;display:flex;flex-direction:column}
.card-head{min-height:52px;padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;flex-shrink:0}
.card-head-icon{font-size:1.05rem}.card-head-title{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-dark)}
.card-body{padding:16px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* Server status */
.ip-row{display:flex;align-items:center;gap:8px;background:var(--blue-dim);border:1px solid var(--border);border-radius:9px;padding:7px 10px;margin-bottom:9px;flex-shrink:0}.ip-text{font-family:monospace;font-size:.83rem;font-weight:700;color:var(--blue-dark);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.copy-btn{background:var(--blue);color:#fff;border:0;border-radius:6px;padding:5px 10px;font-size:.68rem;font-weight:700;cursor:pointer}.copy-btn:hover{background:var(--blue-dark)}.copy-btn.copied{background:#22c55e}
.status-uptime-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;flex-shrink:0}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:.73rem;font-weight:700}.status-badge.online{background:#dcfce7;color:#16a34a}.status-badge.offline{background:#fee2e2;color:#dc2626}.status-badge.checking{background:#f1f5f9;color:var(--text-dim)}.sdot{width:7px;height:7px;border-radius:50%;background:currentColor}#uptime-line{font-size:.75rem;color:#94a3b8;font-style:italic;text-align:right}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px;flex-shrink:0}.stat-box{background:var(--blue-dim);border:1px solid var(--border);border-radius:9px;padding:9px;text-align:center}.stat-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:3px}.stat-val{font-size:.88rem;font-weight:700;color:var(--blue-dark)}
.section-title{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:6px;flex-shrink:0}.divider{border:0;border-top:1px solid var(--border);margin:8px 0;flex-shrink:0}#player-list{flex-shrink:0}#recent-list{overflow-y:auto;flex:1;min-height:0;padding-right:3px;scrollbar-width:thin;scrollbar-color:#c7d9f8 transparent}
.server-card{container-type:inline-size}.player-row{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:8px;min-width:0;padding:5px 2px;border-bottom:1px solid #f1f5f9}.player-row:last-child{border-bottom:0}.player-head{width:24px;height:24px;border-radius:3px;image-rendering:pixelated;flex-shrink:0}.player-content{display:grid;align-items:center;min-width:0;column-gap:5px;row-gap:3px}.player-content>*{justify-self:start}.player-identity{display:flex;align-items:center;gap:5px;min-width:0;width:max-content;max-width:100%}.player-name-btn{min-width:0;border:0;background:none;color:var(--text);font:500 .85rem 'Inter',sans-serif;cursor:pointer;text-align:left;padding:2px 0;white-space:nowrap}.player-name-btn:hover{color:var(--blue-dark);text-decoration:underline}.you-badge{font-size:.52rem;line-height:1;padding:3px 4px;border-radius:4px;background:#e2e8f0;color:#64748b;font-weight:800;letter-spacing:.06em;flex-shrink:0}.view-map-mini{border:1px solid #bfd2f3;background:#eff6ff;color:#2563eb;border-radius:5px;padding:3px 6px;font-size:.6rem;font-weight:700;cursor:pointer;white-space:nowrap}.view-map-mini:hover{background:#dbeafe}.view-map-mini:disabled{opacity:.42;cursor:default}.afk-badge{font-size:.75rem;font-weight:700;color:#b77900;font-family:'Courier New',monospace;white-space:nowrap}.lastseen-time{font-size:.72rem;color:var(--text-dim);white-space:nowrap}.never-joined{color:#94a3b8;font-style:italic}.ping-wrap{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;white-space:nowrap;color:#16a34a}.ping-wrap[hidden]{display:none!important}.ping-wrap.ping-yellow{color:#d6a100}.ping-wrap.ping-red{color:#ef4444}.ping-wrap.ping-darkred{color:#991b1b}.ping-wrap.pinging{color:#d6a100}.signal-bars{display:flex;align-items:flex-end;gap:1px;height:12px;width:15px;flex-shrink:0}.signal-bar{display:block;width:2px;border-radius:1px 1px 0 0;background:#22c55e}.signal-bar:nth-child(1){height:3px}.signal-bar:nth-child(2){height:5px}.signal-bar:nth-child(3){height:7px}.signal-bar:nth-child(4){height:9px}.signal-bar:nth-child(5){height:12px}.signal-bars.ping-yellow .signal-bar{background:#facc15}.signal-bars.ping-red .signal-bar{background:#ef4444}.signal-bars.ping-darkred .signal-bar{background:#991b1b}.signal-bars.pinging .signal-bar{background:#facc15;animation:pingBars 1s ease-in-out infinite}.signal-bars.pinging .signal-bar:nth-child(2){animation-delay:.08s}.signal-bars.pinging .signal-bar:nth-child(3){animation-delay:.16s}.signal-bars.pinging .signal-bar:nth-child(4){animation-delay:.24s}.signal-bars.pinging .signal-bar:nth-child(5){animation-delay:.32s}@keyframes pingBars{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}
/* Content-aware player rows. Each row selects a layout after measuring its own contents. */
.online-row.layout-one .player-content{grid-template-columns:max-content max-content max-content 1fr max-content}.online-row.layout-one .player-identity{grid-column:1}.online-row.layout-one .afk-badge{grid-column:2}.online-row.layout-one .view-map-mini{grid-column:3}.online-row.layout-one .ping-wrap{grid-column:5}
.online-row.layout-view-down .player-content{grid-template-columns:max-content max-content 1fr max-content;grid-template-rows:auto auto}.online-row.layout-view-down .player-identity{grid-column:1;grid-row:1}.online-row.layout-view-down .afk-badge{grid-column:2;grid-row:1}.online-row.layout-view-down .ping-wrap{grid-column:4;grid-row:1}.online-row.layout-view-down .view-map-mini{grid-column:1;grid-row:2;justify-self:start}
.online-row.layout-afk-view-down .player-content{grid-template-columns:max-content 1fr max-content;grid-template-rows:auto auto}.online-row.layout-afk-view-down .player-identity{grid-column:1;grid-row:1}.online-row.layout-afk-view-down .ping-wrap{grid-column:3;grid-row:1}.online-row.layout-afk-view-down .afk-badge{grid-column:1;grid-row:2}.online-row.layout-afk-view-down .view-map-mini{grid-column:2;grid-row:2;justify-self:start}
.offline-row.layout-one .player-content{grid-template-columns:max-content 1fr max-content}.offline-row.layout-one .player-identity{grid-column:1}.offline-row.layout-one .lastseen-time{grid-column:3}.offline-row.layout-last-down .player-content{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}.offline-row.layout-last-down .player-identity{grid-row:1}.offline-row.layout-last-down .lastseen-time{grid-row:2}
@container (max-width:315px){.signal-bars{display:none}.view-map-mini{padding:3px 5px}}
/* Map card */
.map-card .card-head{justify-content:space-between;gap:12px}.map-title-wrap{display:flex;align-items:center;gap:9px;min-width:0}.map-header-controls{display:flex;align-items:center;gap:7px;min-width:0}.map-segment{display:flex;padding:2px;background:#eff6ff;border:1px solid var(--border);border-radius:8px;min-width:0}.map-switch{border:0;border-radius:6px;background:transparent;color:#64748b;padding:6px 8px;font-size:.61rem;font-weight:800;letter-spacing:.035em;cursor:pointer;white-space:nowrap}.map-switch:hover{background:#dbeafe;color:#1d4ed8}.map-switch:disabled{opacity:.45;cursor:default}.map-switch.active{background:var(--blue);color:#fff;box-shadow:0 2px 6px #3b82f633}.map-frame-wrap{position:relative;flex:1;min-height:0;background:#090d11}.map-frame{display:block;width:100%;height:100%;border:0;background:#090d11}.map-connection{position:absolute;top:8px;left:8px;z-index:3;pointer-events:none;border:1px solid #ffffff24;border-radius:999px;background:#090d11c9;color:#cbd5e1;padding:4px 7px;font-size:.55rem;font-weight:700;backdrop-filter:blur(6px)}.map-connection.live{color:#86efac}.map-connection.bad{color:#fca5a5}
/* Chat: keep existing chat page exactly as-is inside its own pane */
.chat-card{background:#080b0d;border-color:#b9cdf0;min-width:0}.chat-frame-wrap{position:relative;width:100%;height:100%;min-height:0}.chat-frame{display:block;width:100%;height:100%;border:0;background:#080b0d}
.service-overlay{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px;text-align:center;background:rgba(8,11,13,.94);backdrop-filter:blur(5px);color:#e2e8f0}.service-overlay[hidden]{display:none!important}.service-overlay-icon{font-size:1.65rem;filter:grayscale(.25)}.service-overlay-title{font-size:.84rem;font-weight:800;letter-spacing:.04em}.service-overlay-text{max-width:290px;color:#94a3b8;font-size:.7rem;line-height:1.5}.service-overlay.map-error .service-overlay-title{color:#fca5a5}.service-overlay.reconnecting .service-overlay-title{color:#bfdbfe}
/* Player details popover */
#player-popover{position:fixed;z-index:300;width:min(340px,calc(100vw - 20px));border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 16px 48px rgba(30,64,175,.2);padding:13px;opacity:0;transform:translateY(-4px) scale(.985);pointer-events:none;transition:opacity .13s,transform .13s}#player-popover.open{opacity:1;transform:none;pointer-events:auto}.detail-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #e9eff8}.detail-head-img{width:46px;height:46px;border-radius:5px;image-rendering:pixelated;box-shadow:0 2px 7px #0002}.detail-head-copy{min-width:0;flex:1}.detail-name-line{display:flex;align-items:center;gap:6px}.detail-name{font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-status{font-size:.64rem;color:var(--text-dim);margin-top:3px}.detail-map-btn{border:1px solid #a9c6f7;border-radius:7px;background:#eff6ff;color:#1d4ed8;padding:6px 8px;font-size:.62rem;font-weight:800;cursor:pointer;white-space:nowrap}.detail-map-btn:hover{background:#dbeafe}.detail-map-btn:disabled{opacity:.4;cursor:default}.detail-grid{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:8px;padding-top:11px}.detail-label{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;font-weight:800}.detail-value{font-size:.76rem;color:#334155;font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}.detail-value.mono{font-family:'Courier New',monospace;font-size:.72rem}.detail-value.online{color:#16a34a}.detail-value[title]{cursor:help;text-decoration:underline dotted #94a3b8;text-underline-offset:2px}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.4}}.checking-pulse{animation:pulse2 1.5s infinite}.fade-in{animation:fadeIn .25s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Responsive: never horizontal-scroll. Desktop remains one-screen; smaller widths stack vertically. */
@media(max-width:1220px){html,body{overflow-y:auto;overflow-x:hidden}body{min-height:100%;height:auto}.dashboard{grid-template-columns:minmax(260px,.82fr) minmax(0,1.7fr);grid-template-rows:minmax(510px,68vh) minmax(430px,58vh);flex:none}.chat-card{grid-column:1/-1}.corner-link{position:fixed}}
@media(max-width:760px){body{padding:70px 10px 12px}.corner-link{top:10px;padding:8px 10px}.corner-link.left{left:10px}.corner-link.right{right:10px}.corner-link .corner-text{display:none}header{margin-bottom:10px}.dashboard{display:flex;flex-direction:column;width:100%;gap:12px}.card{min-height:0}.server-card{height:auto}.map-card{height:62vh;min-height:430px}.chat-card{height:64vh;min-height:440px}.map-card .card-head{align-items:flex-start;flex-direction:column}.map-header-controls{width:100%;justify-content:space-between}.map-segment:first-child{flex:1}.map-switch{flex:1;padding:6px 5px}.player-meta{gap:4px}.ping-wrap{font-size:.66rem}.view-map-mini{padding:3px 4px}.detail-map-btn{padding:5px 6px}}
