:root {
  color-scheme: dark;
  --void: #080b0c;
  --base: #0d1112;
  --panel: rgb(17 22 23 / 94%);
  --panel-2: #151b1c;
  --steel: #263032;
  --line: #313c3e;
  --text: #e6e4db;
  --muted: #899396;
  --signal: #d6a43b;
  --signal-soft: rgb(214 164 59 / 13%);
  --danger: #c74e3c;
  --cyan: #6faaa8;
  --good: #85a969;
  --shadow: 0 18px 45px rgb(0 0 0 / 42%);
}

/* Rubinco portal and game sites */
.portal-body, .luminite-body { background: #090b12; }
.portal-topbar { display:flex; justify-content:space-between; align-items:center; padding:18px clamp(18px, 5vw, 72px); border-bottom:1px solid #292c3b; background:rgb(12 14 23 / 94%); }
.portal-logo { display:flex; align-items:center; gap:12px; text-decoration:none; letter-spacing:.16em; }
.portal-logo span { display:grid; place-items:center; width:40px; height:40px; border:1px solid #8ee4dc; color:#8ee4dc; font-size:11px; font-weight:900; }
.portal-logo b { font-size:14px; }
.portal-login-shell { width:min(620px, 100%); padding:clamp(36px, 8vw, 72px); border:1px solid #34384c; background:rgb(16 19 31 / 85%); box-shadow:0 28px 80px rgb(0 0 0 / 60%); }
.portal-login-logo { margin-bottom:48px; }.portal-login-shell h1 { margin:12px 0; font-size:clamp(38px, 8vw, 64px); }.portal-login-shell > p:not(.eyebrow) { color:#a2a6b6; line-height:1.8; }.portal-login-button { display:inline-grid; place-items:center; min-height:48px; margin-top:28px; padding:0 24px; border:1px solid #8ee4dc; color:#071111; background:#8ee4dc; font-size:13px; font-weight:900; text-decoration:none; }.portal-login-button:hover { background:#a5f7ef; }.portal-login-shell > small { display:block; margin-top:15px; color:#7f8599; }
.auth-provider-note { margin:14px 0 0; color:var(--muted); font-size:11px; }
.portal-shell { width:min(1180px, calc(100% - 36px)); margin:0 auto; padding:clamp(28px, 4vw, 56px) 0; }
.portal-intro { max-width:720px; margin-bottom:46px; }
.portal-intro h1 { margin:12px 0 18px; font-size:clamp(28px, 4vw, 48px); line-height:1.4; letter-spacing:-.04em; }
.portal-intro h1 em { color:#8ee4dc; font-style:normal; }
.portal-intro p:not(.eyebrow) { color:#a2a6b6; line-height:1.8; }
.game-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
.game-card { overflow:hidden; border:1px solid #34384c; background:#121522; box-shadow:0 18px 44px #0005; }
.status-chip { display:inline-block; padding:5px 9px; border:1px solid #697084; color:#d9dcea; font:10px monospace; text-transform:uppercase; }.status-offline { color:#a8afc0; }.status-starting { color:#f3c969; border-color:#f3c969; }.status-online { color:#9de28d; border-color:#7fc66e; }.status-maintenance { color:#f0bb72; border-color:#c88a39; }.status-error { color:#ff8c91; border-color:#de5b64; }
.luminite-topbar::after { background:#b893ff; }.luminite-topbar .brand-mark { border-color:#b893ff; color:#cfb6ff; }.luminite-topbar .nav-button:hover { border-color:#b893ff; color:#cfb6ff; }
.luminite-shell { width:min(1080px, calc(100% - 36px)); margin:0 auto; padding:clamp(28px, 4vw, 56px) 0; }.luminite-hero { padding:45px; border:1px solid #3d315d; background:radial-gradient(circle at 80% 20%, #b893ff2c, transparent 28%), #151329; }.luminite-hero h1 { margin:8px 0; color:#cfb6ff; font-size:clamp(34px, 7vw, 72px); overflow-wrap:anywhere; letter-spacing:.08em; }.luminite-hero p:not(.eyebrow) { color:#c1bad5; }.luminite-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 60px; }.luminite-overview article { padding:22px; border:1px solid #302844; background:#121020; }.luminite-overview strong { display:block; margin:16px 0 7px; color:#cfb6ff; font-size:28px; }.luminite-overview .status-chip { width:fit-content; font-size:11px; }.luminite-overview p { margin:0; color:#a4a0b6; font-size:12px; line-height:1.6; }.luminite-overview p + p { margin-top:4px; }.luminite-feed { padding:26px; border:1px solid #302844; background:#10101b; }.luminite-feed .section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:20px; }.luminite-feed .section-heading h2 { margin:6px 0 0; }.luminite-feed .section-heading a { color:#cfb6ff; font-size:12px; }.luminite-feed .feed { display:grid; gap:10px; margin:0; padding:0; background:transparent; list-style:none; }.luminite-feed .feed-item { position:static; display:block; min-height:0; margin:0; padding:16px; border:1px solid #29253c; background:#171526; box-shadow:none; transition:none; }.luminite-feed .feed-item:hover { border-color:#3d315d; background:#171526; transform:none; }.luminite-feed .feed-meta { display:flex; justify-content:space-between; gap:12px; color:#cfb6ff; font:11px monospace; }.luminite-feed .feed-item h3 { margin:12px 0 0; font-size:15px; }.luminite-feed .feed-item p { margin:8px 0 0; line-height:1.6; white-space:pre-line; }
@media (max-width:720px) { .game-grid, .luminite-overview { grid-template-columns:1fr; }.portal-topbar { align-items:flex-start; gap:15px; }.portal-topbar .auth-nav { flex-direction:column; align-items:flex-end; }.game-actions { grid-template-columns:1fr; }.copy-button { grid-column:auto; }.luminite-hero { padding:28px; }.luminite-feed .section-heading { align-items:flex-start; flex-direction:column; } }

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(90deg, rgb(8 11 12 / 97%), rgb(8 11 12 / 82%)),
    url("/img/wasteland-dashboard.png") center / cover fixed,
    var(--void);
  font-family: Inter, "Segoe UI", "Noto Sans JP", system-ui, sans-serif;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .36;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgb(255 255 255 / 2%) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgb(111 170 168 / 4%) 79px 80px);
}

a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid #8ee4dc;
  outline-offset: 3px;
}

.landing-body { display: grid; place-items: center; padding: 32px; }
.landing-shell { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); width: min(100%, 1120px); min-height: 620px; border: 1px solid var(--line); background: rgb(9 13 14 / 88%); box-shadow: var(--shadow); }
.landing-hero { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 90px); border-right: 1px solid var(--steel); }
.landing-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 64px; font-size: 18px; font-weight: 900; letter-spacing: .2em; }
.landing-hero h1 { margin: 15px 0 20px; font-size: clamp(38px, 5vw, 68px); line-height: 1.15; letter-spacing: .04em; }
.landing-copy { max-width: 650px; margin: 0; color: #a9b0b0; font-size: 14px; line-height: 1.9; }
.landing-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 36px; }
.landing-actions form { margin: 0; }
.landing-primary, .landing-secondary { display: inline-grid; place-items: center; min-height: 46px; padding: 0 18px; font: inherit; font-size: 11px; font-weight: 900; text-decoration: none; cursor: pointer; }
.landing-primary { border: 1px solid var(--signal); color: #0a0d0e; background: var(--signal); }
.landing-secondary { border: 1px solid var(--line); color: var(--text); background: transparent; }
.landing-hero > small { margin-top: 14px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.landing-terminal { display: flex; flex-direction: column; justify-content: center; padding: 48px; background: linear-gradient(150deg, rgb(199 78 60 / 10%), transparent 48%); }
.landing-terminal > p { color: var(--muted); font-family: monospace; font-size: 9px; letter-spacing: .13em; }
.landing-terminal > p span { color: var(--good); }
.landing-terminal > strong { margin: 26px 0 50px; color: var(--signal); font-family: monospace; font-size: clamp(34px, 5vw, 58px); line-height: .95; }
.landing-terminal dl { display: grid; gap: 14px; margin: 0; }
.landing-terminal dl div { padding-top: 12px; border-top: 1px solid var(--steel); }
.landing-terminal dt { color: var(--muted); font-family: monospace; font-size: 8px; }
.landing-terminal dd { margin: 5px 0 0; font-family: monospace; font-size: 10px; }
.privacy-badge { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--cyan); color: var(--cyan); background: rgb(8 11 12 / 94%); box-shadow: var(--shadow); font-family: monospace; }
.privacy-badge b { font-size: 9px; letter-spacing: .12em; }
.privacy-badge span { color: var(--muted); font-size: 8px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--steel);
  background: rgb(9 13 14 / 94%);
  backdrop-filter: blur(12px);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 28%;
  height: 1px;
  content: "";
  background: var(--signal);
}

.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  clip-path: polygon(10% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 10%);
}
.brand b { display: block; font-size: 18px; letter-spacing: .18em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.live-pulse, .status-dot { display: inline-block; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px rgb(133 169 105 / 70%); }
.live-pulse { width: 7px; height: 7px; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(460px, 760px) minmax(270px, 350px);
  justify-content: center;
  min-height: calc(100vh - 70px);
}

.detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1180px);
  justify-content: center;
  min-height: calc(100vh - 70px);
}
.detail-shell > .layout { width: min(100% - 32px, 1180px); margin: 0 auto; }

.rail {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  min-width: 0;
  height: auto;
  padding: 7px 18px;
  border-bottom: 1px solid var(--steel);
  background: rgb(8 12 13 / 96%);
  backdrop-filter: blur(10px);
}
.rail-top { display: flex; min-width: 0; flex: 1; }
.server-nav { margin: 0 0 0 auto !important; border-left: 1px solid var(--steel); }
.server-health { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: 14px; margin-bottom: 14px; }
.health-summary { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 20px; border-left: 3px solid var(--muted); }
.health-stable .health-summary { border-left-color: var(--good); }
.health-watch .health-summary { border-left-color: var(--signal); }
.health-unstable .health-summary { border-left-color: var(--danger); }
.health-summary h2 { margin: 8px 0 16px; font-size: 18px; }
.health-summary strong { display: block; color: var(--good); font-family: monospace; font-size: 34px; }
.health-summary small { color: var(--muted); font-size: 8px; }
.health-summary dl { display: grid; gap: 10px; margin: 0; }
.server-chart { padding: 16px; }
.server-chart svg { display: block; width: 100%; height: 180px; background: repeating-linear-gradient(0deg, transparent 0 24px, rgb(255 255 255 / 4%) 24px 25px); }
.server-chart line { stroke: var(--line); }
.server-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.server-chart polyline.server-fps, .server-chart-legend .server-fps { stroke: var(--good); background: var(--good); }
.server-chart polyline.server-rss, .server-chart-legend .server-rss { stroke: var(--cyan); background: var(--cyan); }
.server-chart-axis, .server-chart-legend { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-family: monospace; font-size: 8px; }
.server-chart-legend { justify-content: flex-start; margin-top: 12px; }
.server-chart-legend span { display: flex; align-items: center; gap: 6px; }
.server-chart-legend i { width: 16px; height: 3px; }
.incident-panel { margin-bottom: 14px; }
.incident-panel ol { margin: 0; padding: 0; list-style: none; }
.incident-panel li:not(.empty) { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--steel); font-size: 10px; }
.incident-panel time { color: var(--muted); font-family: monospace; }
.incident-panel span { color: var(--danger); }
.rail-label, .module-code, .eyebrow { margin: 0; color: var(--signal); font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.rail .rail-label, .rail-copy { display: none; }
.rail a { display: flex; gap: 7px; margin: 0; padding: 10px 12px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.rail a span { color: #596264; font-size: 9px; }
.rail a:hover, .rail a.active { color: var(--text); background: linear-gradient(0deg, var(--signal-soft), transparent); }
.rail a.active { box-shadow: inset 0 -2px var(--signal); }

.feed-column { border-right: 1px solid var(--steel); }
.feed-header, .panel-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 24px; border-bottom: 1px solid var(--steel); }
.feed-header .breadcrumbs { margin-bottom: 12px; }
.feed-header h1, .page-title h1 { margin: 7px 0 0; font-size: 24px; letter-spacing: .04em; }
.feed-header > span, .panel-head small { color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.feed-refresh { padding: 9px 13px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-2); font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .06em; cursor: pointer; }
.feed-refresh:hover, .feed-refresh.has-update { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }

.timeline-loader { display: grid; width: calc(100% - 36px); grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 14px 18px 28px; padding: 14px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); font: inherit; text-align: left; cursor: pointer; }
.timeline-loader:hover { border-color: var(--signal); color: var(--signal); }
.timeline-loader b { font-size: 10px; }
.timeline-loader small { font: 9px monospace; }
.timeline-loader[hidden] { display: none; }

.feed { margin: 0; padding: 10px 12px 28px; background: rgb(5 8 9 / 48%); list-style: none; }
.feed-item { position: relative; display: flex; gap: 17px; min-height: 112px; margin-bottom: 10px; padding: 20px 22px; border: 1px solid var(--steel); background: rgb(11 15 16 / 78%); box-shadow: 0 8px 22px rgb(0 0 0 / 13%); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.feed-item:hover { border-color: var(--line); background: rgb(25 31 32 / 82%); transform: translateY(-1px); }
.tone-movement .feed-avatar, .tone-movement .tag { color: #75afe6; border-color: rgb(81 143 203 / 52%); }
.tone-login .feed-avatar, .tone-login .tag { color: var(--good); border-color: rgb(133 169 105 / 52%); }
.tone-logout .feed-avatar, .tone-logout .tag { color: #7d878a; border-color: rgb(98 108 111 / 52%); }
.tone-combat .feed-avatar, .tone-combat .tag { color: #dc6a59; border-color: rgb(199 78 60 / 55%); }
.tone-exploration .feed-avatar, .tone-exploration .tag { color: #ba8dd4; border-color: rgb(166 120 194 / 50%); }
.tone-warning .feed-avatar, .tone-warning .tag { color: var(--signal); border-color: rgb(214 164 59 / 55%); }
.tone-community .feed-avatar, .tone-community .tag { color: var(--cyan); border-color: rgb(111 170 168 / 55%); }
.tone-supply .feed-avatar, .tone-supply .tag { color: #78c982; border-color: rgb(120 201 130 / 65%); }
.tone-karen .feed-avatar, .tone-karen .tag { color: #e98aaa; border-color: rgb(233 138 170 / 68%); box-shadow: 0 0 16px rgb(233 138 170 / 14%); }
.tone-mark .feed-avatar, .tone-mark .tag { color: #a7ae70; border-color: rgb(167 174 112 / 68%); box-shadow: 0 0 16px rgb(167 174 112 / 14%); }
.tone-blood-moon .feed-avatar { color: #ff6655; border-color: rgb(239 73 56 / 75%); box-shadow: 0 0 16px rgb(239 73 56 / 18%); }
.feed-avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border: 1px solid #596365; color: var(--cyan); font-weight: 900; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%); }
.system-avatar { width: 64px; height: 64px; border: 2px solid rgb(214 164 59 / 72%); border-radius: 50%; background: #080a0b; box-shadow: 0 0 18px rgb(214 164 59 / 18%); clip-path: none; object-fit: cover; }
.tone-blood-moon .system-avatar, .tone-warning .system-avatar { border-color: var(--signal); box-shadow: 0 0 18px rgb(214 164 59 / 26%); }
.tone-supply .system-avatar { border-color: #78c982; box-shadow: 0 0 18px rgb(120 201 130 / 24%); }
.tone-community .system-avatar { border-color: var(--cyan); box-shadow: 0 0 18px rgb(111 170 168 / 22%); }
.tone-exploration .system-avatar { border-color: #ba8dd4; box-shadow: 0 0 18px rgb(166 120 194 / 22%); }
.tone-karen .system-avatar { border-color: #e98aaa; box-shadow: 0 0 20px rgb(233 138 170 / 24%); }
.tone-mark .system-avatar { border-color: #a7ae70; box-shadow: 0 0 20px rgb(167 174 112 / 24%); }
.feed-body { min-width: 0; flex: 1; }
.feed-body header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feed-body header strong { font-size: 14px; }
.feed-actor { color: var(--cyan); font-size: 14px; font-weight: 900; text-decoration: none; }
.feed-actor:hover { color: var(--text); }
.feed-body time { margin-left: auto; color: var(--muted); font-family: monospace; font-size: 10px; }
.feed-body p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; }
.feed-body p.event-message { white-space: pre-line; }
.feed-media { display: block; overflow: hidden; width: 100%; margin-top: 14px; border: 1px solid var(--steel); background: #080b0c; }
.feed-media:hover { border-color: #e98aaa; }
.feed-media img { display: block; width: 100%; max-height: 680px; object-fit: cover; }
.feed-body footer { display: flex; gap: 8px; margin-top: 10px; color: var(--muted); font-family: monospace; font-size: 10px; }
.feed-body footer span { color: var(--cyan); }
.tag { padding: 2px 6px; border: 1px solid rgb(111 170 168 / 34%); color: var(--cyan); font-family: monospace; font-size: 9px; }

.timeline-notices { display: grid; gap: 8px; margin: 0 18px 12px; }
.timeline-compose { margin: 0 18px 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.timeline-compose form { display: grid; gap: 10px; padding: 15px; }
.timeline-compose label { display: flex; gap: 12px; align-items: flex-start; }
.timeline-compose textarea { min-width: 0; min-height: 70px; flex: 1; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; outline: 0; color: var(--text); background: #0b0f10; font: inherit; line-height: 1.55; resize: vertical; }
.timeline-compose textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgb(111 170 168 / 12%); }
.timeline-compose-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.timeline-compose-actions small { color: var(--muted); font-size: 9px; }
.timeline-compose-actions button { padding: 8px 14px; border: 1px solid var(--cyan); color: #081011; background: var(--cyan); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.timeline-compose-actions button:hover { filter: brightness(1.12); }
.timeline-login-prompt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 18px 18px; padding: 11px 13px; border: 1px dashed var(--line); color: var(--muted); font-size: 10px; }
.timeline-login-prompt a { color: var(--signal); font-weight: 900; white-space: nowrap; }
.social-actions .like-button span, .social-actions .like-count span { color: inherit; }
.reaction-form { margin: 0; }
.social-actions { display: flex; align-items: center; gap: 8px; }
.reaction-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.reaction-count { padding: 4px 8px; border: 1px solid var(--line); color: var(--text) !important; background: rgb(8 12 13 / 72%); font-size: 10px; }
.karen-popularity { padding: 4px 8px; border: 1px solid rgb(233 138 170 / 48%); color: #f0a1bc !important; background: rgb(233 138 170 / 8%); font-weight: 900; }
.mark-popularity { padding: 4px 8px; border: 1px solid rgb(167 174 112 / 48%); color: #c3c98b !important; background: rgb(167 174 112 / 8%); font-weight: 900; }
.social-actions form { margin: 0; }
.reaction-menu { position: relative; }
.reaction-menu summary { display: inline-flex; gap: 5px; align-items: center; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); background: rgb(8 12 13 / 72%); cursor: pointer; list-style: none; }
.reaction-menu summary::-webkit-details-marker { display: none; }
.reaction-menu summary:hover, .reaction-menu[open] summary { border-color: var(--cyan); color: var(--cyan); }
.reaction-menu summary b { font-size: 9px; }
.reaction-options { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 12; display: flex; gap: 6px; padding: 7px; border: 1px solid var(--line); background: #0b1011; box-shadow: var(--shadow); }

.status-sidebar { position: sticky; top: 124px; align-self: start; max-height: calc(100vh - 124px); padding: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--steel) transparent; scrollbar-width: thin; }
.timeline-card-link { display: inline-flex; margin-top: 11px; padding: 7px 10px; border: 1px solid var(--signal); color: var(--signal); font-size: 10px; font-weight: 900; text-decoration: none; }
.timeline-card-link:hover { color: #101313; background: var(--signal); }
.side-module, .panel, .player-card, .metric-card, .leader-card, .vehicle-card { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.side-module { display: block; margin-bottom: 15px; padding: 15px; text-decoration: none; }
.side-module h2 { margin: 5px 0 0; font-size: 15px; }
.diary-side-card { border-color: rgb(214 164 59 / 34%); background: linear-gradient(145deg, rgb(214 164 59 / 10%), var(--panel)); }
.diary-side-card > small { display: block; margin-top: 10px; color: var(--muted); font: 8px monospace; }
.diary-side-card > p:not(.module-code) { display: -webkit-box; overflow: hidden; margin: 12px 0; color: #bdc1bc; font-size: 10px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.diary-side-card > span { color: var(--signal); font-size: 9px; font-weight: 900; }
.blood-alert { position: relative; overflow: hidden; border-color: rgb(199 78 60 / 54%); }
.blood-alert::after { position: absolute; top: -35px; right: -22px; width: 90px; height: 90px; border: 1px solid rgb(199 78 60 / 36%); border-radius: 50%; content: ""; }
.blood-alert .module-code { color: var(--danger); }
.world-clock { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0; padding-bottom: 10px; border-bottom: 1px solid rgb(199 78 60 / 28%); font-family: monospace; }
.world-clock span { color: var(--signal); font-size: 12px; letter-spacing: .1em; }
.world-clock b { color: var(--text); font-size: 23px; }
.blood-alert > strong { display: block; margin-top: 15px; font-size: 13px; }
.blood-countdown { display: inline-block; margin-top: 10px; padding: 5px 9px; border: 1px solid var(--danger); color: var(--danger); font-family: monospace; font-size: 15px; letter-spacing: .08em; }
.blood-alert-tomorrow .blood-countdown { border-color: var(--signal); color: var(--signal); }
.blood-alert-today { border-color: var(--danger); background: linear-gradient(135deg, rgb(199 78 60 / 22%), var(--panel) 68%); animation: blood-alert-pulse 2.2s ease-in-out infinite; }
.blood-alert-today .blood-countdown { background: var(--danger); color: #fff; }
@keyframes blood-alert-pulse { 50% { box-shadow: 0 0 24px rgb(199 78 60 / 28%); } }
.blood-alert > small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.module-head { display: flex; justify-content: space-between; align-items: center; }
.module-head > b { color: var(--signal); font-size: 22px; }
.module-head > .module-online { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: monospace; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
.pilot-list { margin: 12px -15px -15px; }
.pilot { display: flex; gap: 10px; align-items: center; padding: 11px 15px; border-top: 1px solid var(--steel); text-decoration: none; }
.pilot:hover { background: var(--signal-soft); }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; }
.status-dot.offline { background: #596164; box-shadow: none; }
.pilot-info { min-width: 0; flex: 1; }
.pilot-info strong, .pilot-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilot-info strong { font-size: 12px; }
.pilot-info small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pilot-info .pilot-vitals { color: #bfc3bd; font-family: monospace; }
.pilot > b { color: var(--muted); font-family: monospace; font-size: 10px; }
.server-summary div { display: flex; justify-content: space-between; margin-top: 12px; }
.server-summary div span { color: var(--muted); font-size: 9px; }
.server-summary div b { font-family: monospace; font-size: 11px; }
.server-summary > small { display: block; margin-top: 15px; color: var(--signal); font-size: 10px; }

.layout { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 60px; }
.detail-page { display: grid; gap: 20px; }
.page-title { padding: 28px 0 18px; border-bottom: 1px solid var(--steel); }
.breadcrumbs { display: flex; gap: 9px; align-items: center; margin-bottom: 22px; color: var(--muted); font-size: 10px; }
.breadcrumbs a { color: var(--signal); text-decoration: none; }
.breadcrumbs b { color: var(--text); font-weight: 600; }
.breadcrumbs span[aria-hidden="true"] { color: var(--signal); font-size: 13px; }
.breadcrumbs.compact { font-size: 8px; letter-spacing: .08em; }
.page-title h1 { font-size: clamp(27px, 4vw, 42px); }
.page-title > p:last-child { max-width: 700px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.nav-button { padding: 9px 13px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.nav-button:hover { border-color: var(--signal); color: var(--signal); }
.auth-nav { display: flex; align-items: center; gap: 8px; }
.auth-nav form { margin: 0; }
.auth-nav > span { color: var(--muted); font-family: monospace; font-size: 10px; }
.auth-nav .nav-button { font: inherit; cursor: pointer; }
.auth-shell { min-height: calc(100vh - 70px); padding: 0 24px 60px; }
.auth-shell .auth-page { width: min(100%, 760px); max-width: none; margin: 0 auto; }
.auth-panel { width: 100%; max-width: none; margin: 0 auto; }
.guest-login-block { margin: 0 20px 20px; padding: 17px; border-top: 1px solid var(--steel); background: rgb(111 170 168 / 6%); }
.guest-login-block > p:not(.eyebrow) { margin: 8px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guest-login-block form { margin: 0; }
.guest-button { padding: 9px 13px; border: 1px solid var(--cyan); color: var(--cyan); background: transparent; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.guest-button:hover { color: var(--text); background: rgb(111 170 168 / 13%); }
.primary-link { display: inline-block; padding: 10px 14px; border: 1px solid var(--signal); color: var(--signal); font-size: 11px; font-weight: 900; text-decoration: none; }
.like-button, .like-count { padding: 5px 9px; border: 1px solid var(--line); color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.like-button:hover, .like-button.liked { border-color: var(--danger); color: #df7767; background: rgb(199 78 60 / 9%); }
.like-count { cursor: default; }
.like-button[disabled] { cursor: wait; opacity: .65; }
.delete-post-form { margin-left: auto !important; }
.delete-post-button { padding: 5px 8px; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 9px; cursor: pointer; }
.delete-post-button:hover { color: var(--danger); }
.account-list { padding: 0 18px; }
.account-row { display: grid; grid-template-columns: minmax(130px, .7fr) 80px minmax(130px, 1fr) 50px; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--steel); font-size: 11px; }
.account-row span, .account-row small { color: var(--muted); }
.ai-comment-form select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: #0b0f10; font: inherit; appearance: none; }

.form-notice { margin: 0; padding: 12px 15px; border: 1px solid var(--line); font-size: 12px; }
.form-notice.success { border-color: var(--good); color: var(--good); background: rgb(133 169 105 / 9%); }
.form-notice.error { border-color: var(--danger); color: #df7767; background: rgb(199 78 60 / 9%); }
.ai-editor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr); gap: 18px; }
.ai-comment-form { display: grid; gap: 16px; padding: 20px; }
.ai-comment-form label { display: grid; gap: 7px; color: var(--signal); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.ai-comment-form input, .ai-comment-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 0; outline: 0; color: var(--text); background: #0b0f10; font: inherit; line-height: 1.6; }
.ai-comment-form input:focus, .ai-comment-form textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-soft); }
.ai-comment-form textarea { resize: vertical; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.form-actions small { color: var(--muted); font-size: 9px; }
.form-actions button { padding: 10px 16px; border: 1px solid var(--signal); color: #111; background: var(--signal); font-weight: 900; cursor: pointer; }
.form-actions button:hover { filter: brightness(1.12); }
.editor-disabled { margin: 20px; padding: 16px; border: 1px dashed var(--danger); color: var(--muted); font-size: 12px; line-height: 1.7; }
.editor-disabled code { color: var(--signal); }
.diary-archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.diary-public-card { display: flex; flex-direction: column; min-height: 250px; padding: 20px; }
.diary-public-card > header, .diary-public-detail > header { display: flex; justify-content: space-between; color: var(--signal); font-family: monospace; font-size: 9px; letter-spacing: .08em; }
.diary-public-card h2 { margin: 20px 0 12px; font-size: 19px; }
.diary-public-card > p { flex: 1; margin: 0; color: #c9cbc5; font-size: 13px; line-height: 1.8; }
.diary-public-card > footer { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--steel); }
.diary-public-card footer small, .diary-public-detail footer small { color: var(--muted); font-family: monospace; font-size: 8px; }
.diary-public-card footer a { color: var(--signal); font-size: 11px; font-weight: 900; }
.diary-public-detail { max-width: 880px; margin: 0 auto; padding: clamp(22px, 5vw, 54px); background: linear-gradient(145deg, rgb(214 164 59 / 7%), rgb(12 16 17 / 98%) 38%); }
.diary-public-detail > p { margin: 34px 0; color: #d8dad4; font-size: 15px; line-height: 2.15; white-space: pre-line; }
.diary-public-detail > footer { padding-top: 16px; border-top: 1px solid var(--steel); }
.diary-day-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.diary-day-card { padding: 17px; }
.diary-day-card > header { display: flex; justify-content: space-between; color: var(--muted); font-family: monospace; font-size: 9px; }
.diary-day-card > header span { color: var(--signal); }
.diary-day-card h2 { margin: 18px 0; font-family: monospace; font-size: 20px; }
.diary-day-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diary-day-card footer { display: flex; gap: 8px; margin: 18px -17px -17px; border-top: 1px solid var(--steel); }
.diary-day-card footer a { flex: 1; padding: 11px 8px; color: var(--muted); font-size: 9px; text-align: center; text-decoration: none; }
.diary-day-card footer a:hover { color: var(--signal); background: var(--signal-soft); }
.diary-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.diary-metrics article { padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.diary-metrics span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.diary-metrics strong { display: block; margin-top: 9px; color: var(--signal); font-family: monospace; font-size: 20px; }
.generation-packet .panel-head button { padding: 7px 12px; border: 1px solid var(--signal); color: var(--signal); background: transparent; cursor: pointer; }
.generation-packet textarea { display: block; width: 100%; min-height: 340px; padding: 18px; border: 0; outline: 0; color: #c9cbc5; background: #090d0e; font: 11px/1.8 monospace; resize: vertical; }
.diary-data-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.diary-player-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 13px 16px; border-bottom: 1px solid var(--steel); }
.diary-player-row strong { font-size: 12px; }
.diary-player-row span, .diary-player-row small { color: var(--muted); font-size: 9px; }
.diary-player-row small { grid-column: 1 / -1; }
.diary-tag-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px; }
.diary-tag-list span { padding: 5px 8px; border: 1px solid var(--line); color: var(--cyan); font-size: 9px; }
.registered-diary h3 { margin: 20px 20px 8px; }
.registered-diary > p { margin: 0; padding: 0 20px 20px; line-height: 1.8; white-space: pre-line; }
.registered-diary .panel-head a { color: var(--signal); font-size: 10px; }
.primary-link { justify-self: end; padding: 11px 16px; border: 1px solid var(--signal); color: #111; background: var(--signal); font-size: 11px; font-weight: 900; text-decoration: none; }
.ai-test-action > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; }
.ai-test-action p { margin: 0; color: var(--muted); font-size: 11px; }
.ai-test-action button { padding: 11px 16px; border: 1px solid var(--signal); color: #111; background: var(--signal); font-weight: 900; cursor: pointer; }
.ai-test-action button:disabled { border-color: var(--steel); color: var(--muted); background: transparent; cursor: not-allowed; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { position: relative; padding: 18px; overflow: hidden; }
.metric-card::before { position: absolute; top: 0; left: 0; width: 35%; height: 2px; content: ""; background: var(--signal); }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.metric-card strong { display: block; margin: 12px 0 8px; font-family: monospace; font-size: 28px; }
.detail-grid, .main-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 18px; }
.panel { overflow: hidden; }
.panel-head { padding: 14px 16px; background: var(--panel-2); }
.panel-head h2 { margin: 0; font-size: 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--steel); text-align: left; font-size: 11px; }
th { color: var(--signal); font-size: 9px; letter-spacing: .08em; }
.num { text-align: right; font-family: monospace; }
.empty { padding: 28px 14px; color: var(--muted); text-align: center; }

.leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.leader-card { display: flex; gap: 12px; align-items: center; padding: 14px; }
.leader-card > span { color: var(--signal); font-family: monospace; }
.leader-card div { min-width: 0; flex: 1; }
.leader-card small, .leader-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-card small { color: var(--muted); font-size: 8px; }
.leader-card strong { margin-top: 4px; font-size: 12px; }
.leader-card > b { font-family: monospace; font-size: 20px; }
.combat-log { margin: 0; padding: 0; list-style: none; }
.combat-log li { display: grid; grid-template-columns: 160px 1fr; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--steel); }
.combat-log time { color: var(--muted); font-family: monospace; font-size: 10px; }
.combat-log div { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.combat-log div b { color: var(--danger); }
.combat-log div small { margin-left: auto; color: var(--cyan); font-family: monospace; font-size: 9px; }

.ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ranking-card { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(220px, 1.5fr); gap: 15px; align-items: center; padding: 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.ranking-card .rank { color: var(--signal); font-family: monospace; font-size: 22px; font-weight: 900; }
.rank-name small, .rank-name a { display: block; }
.rank-name small { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.rank-name a { margin-top: 5px; font-size: 14px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.rank-name a:hover { color: var(--signal); }
.ranking-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 0; }
.ranking-card dd { font-family: monospace; }
.activity-chart { display: flex; gap: 14px; align-items: end; min-height: 230px; padding: 24px; }
.activity-day { display: grid; grid-template-rows: 18px 140px 18px; gap: 7px; min-width: 42px; flex: 1; text-align: center; }
.activity-day > span { color: var(--text); font-family: monospace; font-size: 10px; }
.activity-day > div { position: relative; display: flex; align-items: end; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 27px, rgb(255 255 255 / 4%) 27px 28px); }
.activity-day i { display: block; width: 100%; min-height: 4px; background: linear-gradient(var(--signal), #73551d); box-shadow: 0 0 18px rgb(214 164 59 / 18%); }
.activity-day small { color: var(--muted); font-family: monospace; font-size: 8px; white-space: nowrap; }
.activity-day i.danger-bar { background: linear-gradient(var(--danger), #62271f); box-shadow: 0 0 18px rgb(199 78 60 / 23%); }
.activity-day i.vehicle-bar { background: linear-gradient(var(--cyan), #315f62); box-shadow: 0 0 18px rgb(95 166 169 / 24%); }
.activity-day i.personal-bar { background: linear-gradient(var(--good), #3e5935); box-shadow: 0 0 18px rgb(133 169 105 / 24%); }
.personal-activity-panel { margin-bottom: 18px; }

.insight-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; }
.compact-chart { min-height: 210px; }
.enemy-ranking { margin: 0; padding: 0; list-style: none; }
.enemy-ranking li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--steel); }
.enemy-ranking li > b { color: var(--danger); font-family: monospace; font-size: 11px; }
.enemy-ranking li span strong, .enemy-ranking li span small { display: block; }
.enemy-ranking li span strong { font-size: 12px; }
.enemy-ranking li span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.enemy-ranking li em { color: var(--danger); font-family: monospace; font-size: 20px; font-style: normal; font-weight: 900; }
.growth-chart { margin-top: 16px; }
.growth-chart svg { display: block; width: 100%; height: 100px; overflow: visible; background: repeating-linear-gradient(0deg, transparent 0 24px, rgb(255 255 255 / 4%) 24px 25px); }
.growth-chart line { stroke: var(--line); stroke-width: 1; }
.growth-chart polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.growth-chart polyline.xp-total, .growth-legend .xp-total i { stroke: var(--signal); background: var(--signal); filter: drop-shadow(0 0 5px rgb(214 164 59 / 40%)); }
.growth-chart > small { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-family: monospace; font-size: 8px; }
.global-growth { padding: 20px; }
.global-growth .growth-chart svg { height: 220px; }
.growth-legend { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 18px; }
.growth-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.growth-legend i { width: 18px; height: 3px; }
.growth-legend b { color: var(--text); font-family: monospace; }
.score-trend-panel { margin-top: 18px; }
.score-chart { padding: 20px; }
.score-chart svg { display: block; width: 100%; height: 240px; background: repeating-linear-gradient(0deg, transparent 0 24px, rgb(255 255 255 / 4%) 24px 25px); }
.score-chart line { stroke: var(--line); }
.score-chart polyline { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.score-chart > small { display: flex; justify-content: space-between; color: var(--muted); font-family: monospace; font-size: 8px; }
.score-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 16px; }
.score-legend span { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.score-legend i { width: 16px; height: 3px; }
.score-legend em { color: var(--muted); font-family: monospace; font-style: normal; }
.score-0, .score-legend .score-0 i { stroke: var(--signal); background: var(--signal); }
.score-1, .score-legend .score-1 i { stroke: var(--cyan); background: var(--cyan); }
.score-2, .score-legend .score-2 i { stroke: var(--good); background: var(--good); }
.score-3, .score-legend .score-3 i { stroke: var(--danger); background: var(--danger); }
.score-4, .score-legend .score-4 i { stroke: #a88fd4; background: #a88fd4; }
.score-5, .score-legend .score-5 i { stroke: #d49a70; background: #d49a70; }

.exploration-progress { height: 4px; background: #1a2021; }
.exploration-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--good), var(--signal)); box-shadow: 0 0 16px rgb(133 169 105 / 45%); }
.poi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.poi-cards > article { min-height: 165px; padding: 16px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); background: rgb(13 17 18 / 86%); }
.poi-cards > article.uncharted { opacity: .57; filter: saturate(.4); }
.poi-cards > article.discovered { background: linear-gradient(145deg, rgb(133 169 105 / 9%), var(--panel)); }
.poi-state { color: var(--muted); font-family: monospace; font-size: 9px; font-weight: 800; }
.discovered .poi-state { color: var(--good); }
.poi-cards h2 { margin: 12px 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.poi-cards article > p { margin: 0 0 16px; color: var(--muted); font-size: 9px; }
.poi-cards dl { display: grid; gap: 9px; margin: 0; }

.vehicle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vehicle-card { padding: 17px; }
.vehicle-card.inactive { opacity: .62; }
.vehicle-card > header { display: flex; justify-content: space-between; color: var(--good); font-family: monospace; font-size: 9px; }
.vehicle-card.inactive > header { color: var(--danger); }
.vehicle-rank { margin-right: 7px; color: var(--signal); font-size: 14px; }
.vehicle-card h2 { margin: 16px 0; font-size: 17px; overflow-wrap: anywhere; }
.vehicle-card dl, .player-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
dt { color: var(--signal); font-size: 8px; letter-spacing: .11em; }
dd { margin: 4px 0 0; color: #c4c7c1; font-size: 11px; overflow-wrap: anywhere; }
.vehicle-card > small { display: block; margin-top: 15px; color: var(--cyan); font-family: monospace; font-size: 8px; }
.vehicle-insights { margin-bottom: 18px; }
.vehicle-type-ranking { margin: 0; padding: 0; list-style: none; }
.vehicle-type-ranking li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--steel); }
.vehicle-type-ranking li > b { color: var(--cyan); font-family: monospace; font-size: 11px; }
.vehicle-type-ranking strong, .vehicle-type-ranking small { display: block; }
.vehicle-type-ranking small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.vehicle-type-ranking em { color: var(--cyan); font-family: monospace; font-size: 14px; font-style: normal; }

.players-now { display: grid; grid-template-columns: 1fr; }
.player-card { padding: 20px; }
.player-main { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.player-main .status-dot { margin-top: 7px; }
.player-main h2 { margin: 0; font-size: 20px; }
.player-main p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 160px 1fr; gap: 15px; padding: 15px 16px; border-bottom: 1px solid var(--steel); }
.timeline time { color: var(--muted); font-family: monospace; font-size: 10px; }
.timeline p { margin: 7px 0; white-space: pre-line; }
.timeline small { color: var(--muted); font-size: 10px; }
.poi-list { display: grid; }
.poi-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--steel); }
.poi-row strong { display: block; font-size: 12px; }
.poi-row span, .poi-row p, .poi-row small { color: var(--muted); font-size: 9px; }

@media (max-width: 1060px) {
  .app-shell { grid-template-columns: minmax(420px, 1fr) 280px; }
  .detail-shell { grid-template-columns: minmax(0, 1fr); }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .vehicle-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .detail-shell { display: block; }
  .rail { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--steel); }
  .rail { position: static; flex-direction: row; height: auto; }
  .rail-top { display: flex; }
  .rail-label, .rail-copy { display: none; }
  .server-nav { margin-left: 0 !important; border-left: 0; }
  .rail a { flex: 0 0 auto; margin: 0; }
  .feed-column { border-right: 0; }
  .status-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .status-sidebar { position: static; max-height: none; overflow: visible; }
  .side-module { margin: 0; }
  .status-sidebar .side-module:nth-child(2) { grid-row: span 2; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .main-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .server-health { grid-template-columns: 1fr; }
  .ai-editor-grid { grid-template-columns: 1fr; }
  .diary-day-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diary-archive { grid-template-columns: 1fr; }
  .diary-data-grid { grid-template-columns: 1fr; }
  .ranking-grid { grid-template-columns: 1fr; }
  .poi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .landing-body { padding: 11px; }
  .landing-shell { grid-template-columns: 1fr; min-height: 0; }
  .landing-hero { padding: 38px 24px; border-right: 0; }
  .landing-brand { margin-bottom: 42px; }
  .landing-actions { align-items: stretch; flex-direction: column; }
  .landing-actions form, .landing-secondary { width: 100%; }
  .landing-terminal { padding: 32px 24px; border-top: 1px solid var(--steel); }
  .topbar { padding: 10px 14px; }
  .auth-nav > span { display: none; }
  .brand small { display: none; }
  .feed-header { padding: 18px 15px; }
  .feed-header > span { display: none; }
  .feed-item { padding: 16px 14px; }
  .feed-body time { width: 100%; margin: 2px 0 0; }
  .timeline-compose, .timeline-login-prompt { margin-right: 11px; margin-left: 11px; }
  .timeline-login-prompt { align-items: flex-start; flex-direction: column; }
  .auth-shell { padding-right: 11px; padding-left: 11px; }
  .status-sidebar { grid-template-columns: 1fr; }
  .status-sidebar .side-module:nth-child(2) { grid-row: auto; }
  .layout { width: min(100% - 22px, 1180px); padding-top: 16px; }
  .metric-grid, .leader-grid, .vehicle-grid { grid-template-columns: 1fr; }
  .ranking-card { grid-template-columns: auto 1fr; }
  .ranking-card dl { grid-column: 1 / -1; }
  .activity-chart { gap: 6px; padding: 15px 8px; }
  .combat-log li, .timeline li { grid-template-columns: 1fr; gap: 7px; }
  .combat-log div small { width: 100%; margin: 5px 0 0; }
  .player-card dl { grid-template-columns: 1fr; }
  .poi-cards { grid-template-columns: 1fr; }
  .diary-day-list, .diary-metrics { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-row span:nth-of-type(2), .account-row small { text-align: right; }
}

.portal-feed { min-width:0; padding:24px; border:1px solid #34384c; background:#10131e; }
.portal-feed > p, .portal-event time { color:#a2a6b6; }
.portal-event { padding:24px 0; border-bottom:1px solid #34384c; overflow-wrap:anywhere; }
.portal-event header, .portal-feed-pages { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.portal-event time { font-size:12px; }
.portal-event-body { white-space:pre-wrap; line-height:1.8; }
.portal-feed-pages { margin-top:24px; justify-content:space-between; }

.portal-layout { display:grid; grid-template-columns:240px minmax(0, 1fr); max-width:1440px; margin:auto; }
.portal-site-rail { position:sticky; top:20px; align-self:start; padding:32px 16px; }
.portal-site-rail h2 { margin:0 0 10px; font-size:14px; }
.server-status-note { color:var(--muted); font-size:11px; line-height:1.7; margin:0 0 18px; }
.portal-site-rail nav { display:grid; gap:12px; }
.portal-site-rail a { display:flex; align-items:center; gap:12px; padding:14px 10px; border:1px solid #555b72; border-radius:12px; background:#171b2b; color:#8ee4dc; text-decoration:none; }
.portal-site-rail a:hover, .portal-site-rail a:focus-visible { background:#29384b; outline:2px solid #8ee4dc; outline-offset:3px; }
.server-icon { display:grid; justify-items:center; gap:5px; min-width:52px; font-size:28px; }
.server-site { display:grid; justify-items:start; gap:8px; min-width:0; }
.server-site b { color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.server-site .status-chip { font-family:inherit; font-size:11px; }
.status-unknown { color:var(--muted); }
.game-topbar .brand { min-width:0; }
.game-topbar .auth-nav { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.portal-welcome { line-height:1.8; color:#b4b9cb; }
.public-game-card { padding:28px; }
.public-game-card h2 { color:#f1f4ff; }
.portal-login-modal { color:#f1f4ff; max-height:calc(100dvh - 40px); overflow:auto; margin:auto; }
.portal-login-modal::backdrop { background:rgb(0 0 0 / 72%); backdrop-filter:blur(6px); }
.portal-login-modal h1 { font-size:clamp(28px, 5vw, 42px); }
.modal-close-form { display:flex; justify-content:flex-end; }
.portal-header-return { white-space:nowrap; }
@media (max-width:600px) {
  .portal-layout { grid-template-columns:minmax(0, 1fr); }
  .portal-site-rail { position:static; padding:20px 18px 0; }
  .portal-site-rail nav { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .portal-site-rail a { flex-direction:column; align-items:center; padding:12px 8px; }
  .server-site { justify-items:center; text-align:center; }
  .game-topbar .brand small { display:none; }
  .portal-topbar { padding:16px; }
  .portal-logo { gap:8px; letter-spacing:.04em; }
  .portal-login-modal { width:calc(100% - 24px); padding:24px; }
}

.portal-site-rail .game-violet { color:#cfb6ff; border-color:#695580; }
.portal-site-rail .game-amber { color:#f3c969; border-color:#806e46; }
.portal-login-modal .modal-close-button { display:none; }
.portal-login-modal.modal-ready .modal-close-button { display:block; }
.portal-login-modal.modal-ready .modal-close-fallback { display:none; }
.portal-login-modal .portal-login-button { width:100%; }
.portal-body :focus-visible { outline:2px solid #8ee4dc; outline-offset:4px; }
@media (max-width:600px) {
  .portal-feed { padding:18px; }
  .portal-header-return { padding:8px; font-size:11px; }
}

.portal-site-rail a small { font-size:11px; line-height:1.3; font-weight:600; color:var(--text); }

/* Keep long names and records readable on narrow screens. */
.luminite-overview article, .luminite-feed .feed-item { min-width:0; overflow-wrap:anywhere; }
.luminite-feed .feed-meta { flex-wrap:wrap; }
.portal-feed-pages a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline:2px solid var(--cyan); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.user-avatar { width:36px; height:36px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.profile-avatar { width:80px; height:80px; border-radius:24px; margin-bottom:12px; }
.account-profile-link { display:inline-flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; font-size:12px; }
.account-profile-link > span { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.luminite-feed .user-avatar { float:left; margin:0 12px 10px 0; }
.luminite-feed .feed-item h3 { clear:both; }

.ranking-avatar { float:left; margin:0 12px 8px 0; }

/* Shared header (fragments/header.html): the portal and game icons, and the account menu. */
body .topbar.app-header { flex-wrap:nowrap; gap:12px; min-height:64px; padding:10px clamp(16px, 3vw, 32px); }
.app-header .site-links { display:flex; gap:10px; align-items:center; min-width:0; overflow-x:auto; padding:2px; scrollbar-width:none; }
.app-header .site-links::-webkit-scrollbar { display:none; }
.app-header .site-links a { --site:#8ee4dc; display:block; flex:none; padding:2px; border:2px solid transparent; border-radius:13px; opacity:.7; transition:opacity .15s ease, transform .15s ease, border-color .15s ease; }
.app-header .site-links a.site-portal { --site:#f1eee9; }
.app-header .site-links a.site-amber { --site:#f3c969; }
.app-header .site-links a.site-violet { --site:#cfb6ff; }
.app-header .site-links a.site-magenta { --site:#f29bd8; }
.app-header .site-links a:hover, .app-header .site-links a:focus-visible { opacity:1; transform:translateY(-1px); }
.app-header .site-links a.active { opacity:1; border-color:var(--site); box-shadow:0 0 14px color-mix(in srgb, var(--site) 35%, transparent); }
.site-icon { display:block; width:36px; height:36px; }
.app-header .account-area { flex:none; display:flex; align-items:center; gap:8px; margin-left:auto; }
.account-menu { position:relative; }
.account-menu summary { display:block; list-style:none; border-radius:12px; cursor:pointer; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary:focus-visible { outline:2px solid #8ee4dc; outline-offset:2px; }
.account-menu summary .user-avatar { display:block; width:40px; height:40px; }
.account-menu[open] summary .user-avatar { box-shadow:0 0 0 2px #f1eee9; }
.account-menu-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:50; display:grid; min-width:190px; padding:6px; border:1px solid #ffffff1f; border-radius:12px; background:#17181f; box-shadow:0 14px 32px #000a; }
.account-menu-name { margin:0 0 4px; padding:8px 10px; overflow:hidden; border-bottom:1px solid #ffffff14; color:#a6a5b1; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-panel a, .account-menu-panel button { display:block; width:100%; padding:9px 10px; border:0; border-radius:8px; background:none; color:#f1eee9; font:inherit; font-size:13px; text-align:left; text-decoration:none; cursor:pointer; }
.account-menu-panel a:hover, .account-menu-panel button:hover, .account-menu-panel a:focus-visible, .account-menu-panel button:focus-visible { background:#ffffff12; }
.account-menu-panel form { margin:0; }
.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:600px) {
  body .topbar.app-header { gap:8px; padding:8px 12px; }
  .app-header .site-links { gap:6px; }
  .site-icon { width:32px; height:32px; }
  .account-menu summary .user-avatar { width:36px; height:36px; }
}

/* Rubinco design layer: modern surfaces with pixel details, shared by every site. */
:root {
  --rb-bg:#121318;
  --rb-surface:#1b1c23;
  --rb-surface-2:#24252e;
  --rb-line:#ffffff14;
  --rb-text:#f1eee9;
  --rb-muted:#9c9ba8;
  --rb-ruby:#ff4f74;
  --rb-radius:14px;
  /* Square corners cut one pixel step in: buttons and badges read as game UI. */
  --rb-notch:polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
body .topbar.app-header { border-bottom:1px solid var(--rb-line); background:color-mix(in srgb, var(--rb-bg) 84%, transparent); backdrop-filter:blur(14px) saturate(140%); }
.topbar.app-header::after { display:none; }
.app-header .site-links { gap:14px; padding:4px 2px 8px; margin-bottom:-6px; }
.app-header .site-links a { position:relative; padding:0; border:0; border-radius:0; opacity:.6; transition:opacity .12s ease, transform .12s steps(2); }
.app-header .site-links a:hover, .app-header .site-links a:focus-visible { transform:translateY(-2px); }
.app-header .site-links a.active { box-shadow:none; }
/* The current site: a short pixel bar under its icon. */
.app-header .site-links a::after { content:""; position:absolute; left:50%; bottom:-8px; width:16px; height:4px; background:var(--site); transform:translateX(-50%) scaleX(0); transition:transform .12s steps(3); }
.app-header .site-links a.site-portal { --site:var(--rb-ruby); }
.app-header .site-links a.active::after { transform:translateX(-50%) scaleX(1); }
.app-header .site-links a:focus-visible { outline:2px solid var(--site); outline-offset:3px; }
.site-icon { image-rendering:pixelated; }
.account-menu summary { border-radius:10px; }
.account-menu summary .user-avatar { border-radius:10px; }
.account-menu[open] summary .user-avatar { box-shadow:0 0 0 2px var(--rb-ruby); }
.account-menu-panel { border-color:var(--rb-line); border-radius:var(--rb-radius); background:var(--rb-surface); }
/* Status shown as a pixel square and a word, used by the portal servers. */
.pixel-status { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--rb-muted); font-family:inherit; font-size:12px; font-weight:600; line-height:1.2; letter-spacing:0; text-transform:none; }
.pixel-status::before { content:""; width:8px; height:8px; flex:none; background:currentColor; box-shadow:0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); }
.pixel-status.status-online { color:#7fe0a8; }
.pixel-status.status-starting, .pixel-status.status-stopping { color:#f3c969; }
.pixel-status.status-error { color:#ff8c91; }
.pixel-status.status-offline, .pixel-status.status-unknown { color:#8d8c98; }
/* The 7DTD watchtower is drawn art, not a 16px sprite: smooth scaling on a dark tile like the others. */
img.site-icon { object-fit:contain; background:#2a1c20; image-rendering:auto; }
/* The guild entrance on the right of the header: a tankard and sword, underlined like a site when current. */
.app-header .guild-link { position:relative; display:block; flex:none; margin-right:6px; opacity:.75; transition:opacity .12s ease, transform .12s steps(2); }
.app-header .guild-link:hover, .app-header .guild-link:focus-visible { opacity:1; transform:translateY(-2px); }
.app-header .guild-link:focus-visible { outline:2px solid #e3b448; outline-offset:3px; }
.app-header .guild-link::after { content:""; position:absolute; left:50%; bottom:-8px; width:16px; height:4px; background:#e3b448; transform:translateX(-50%) scaleX(0); transition:transform .12s steps(3); }
.app-header .guild-link.active { opacity:1; }
.app-header .guild-link.active::after { transform:translateX(-50%) scaleX(1); }