:root{
  --bg:#0c1017;
  --surface:#171e2a;
  --surface-2:#202a3a;
  --border:#354157;
  --text:#f6f7fa;
  --muted:#b7c0cf;
  --gold:#efbd58;
  --green:#71d0aa;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:#0c1017;
}
a{color:inherit;text-decoration:none}
.lobbyShell{width:min(1180px,100%);margin:0 auto;padding:24px}
.lobbyHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:8px 0 22px;border-bottom:1px solid var(--border)}
.eyebrow{margin:0 0 5px;color:var(--gold);font-size:13px;font-weight:800}
h1{margin:0;font-size:34px;line-height:1.1}
.labLink{border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:#dce3ef;font-size:13px;font-weight:800}
.labLink:hover{border-color:var(--gold);color:var(--gold)}
main{padding-top:28px}
.modeHeading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px}
.modeHeading h2{margin:0 0 5px;font-size:22px}
.modeHeading p{margin:0;color:var(--muted);font-size:13px}
.versionBadge{white-space:nowrap;color:#cad2df;font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 9px}
.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.modeCard{
  --accent:#7183a5;
  position:relative;
  min-height:150px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:8px;
  background:var(--surface);
}
.modeCard.playable{background:#1b2330;border-color:#4d5c75}
.modeArt{width:112px;height:120px;object-fit:cover;object-position:top;border-radius:6px;background:#111722;filter:saturate(.9)}
.modeCard.development .modeArt{filter:grayscale(.72) brightness(.62)}
.modeCopy{min-width:0}
.modeNameRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modeCopy h3{margin:0;font-size:19px}
.status{font-size:11px;font-weight:800;border-radius:999px;padding:4px 7px;background:#293349;color:#c6cfdd}
.playable .status{background:rgba(113,208,170,.14);color:var(--green)}
.modeCopy p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.modeSystems{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.modeSystems span{font-size:11px;color:#d3dae6;background:#111722;border:1px solid #303b4f;border-radius:5px;padding:4px 6px}
.modeAction{align-self:stretch;min-width:74px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--accent);color:#11151c;font-size:14px;font-weight:900;padding:10px}
.modeAction:hover{filter:brightness(1.12)}
.modeCard.development .modeAction{background:#2b3445;color:#8994a7;cursor:not-allowed}
.modeCard[data-mode="classic"]{--accent:#efbd58;grid-column:1/-1}
.modeCard[data-mode="crisis"]{--accent:#df6b67}
.modeCard[data-mode="intrigue"]{--accent:#8e78c9}
.modeCard[data-mode="dual"]{--accent:#4fa9cf}
.modeCard[data-mode="faction"]{--accent:#dadde4}
.modeCard[data-mode="ultimate"]{--accent:#dd934f}
.modeCard[data-mode="custom"]{--accent:#76b987}
@media(max-width:820px){
  .lobbyShell{padding:16px}
  .lobbyHeader{align-items:center}
  h1{font-size:28px}
  .modeGrid{grid-template-columns:1fr}
  .modeCard[data-mode="classic"]{grid-column:auto}
  .modeCard{grid-template-columns:82px minmax(0,1fr);min-height:130px;gap:12px;padding:11px}
  .modeArt{width:82px;height:104px}
  .modeAction{grid-column:1/-1;min-height:42px;align-self:auto}
}
@media(max-width:440px){
  .lobbyShell{padding:12px}
  .labLink{font-size:12px;padding:8px}
  .modeHeading{align-items:flex-start}
  .versionBadge{display:none}
  .modeCopy h3{font-size:17px}
}