/* Lobby screen (public/lobby.mjs). Scoped to .lobby-sim; colors come from Trace tokens (trace.css), light and dark.
   The page runs under a strict CSP, so every color a script needs is a class here (heat-N, ph-N), never an inline style. */
.lobby-sim {
  --heat-0: #e3e6ee; --heat-1: #cfe0f7; --heat-2: #8fb8ea; --heat-3: #4a8ad9; --heat-4: #1f5fb0; --heat-5: #0d376e;
  --up: #16794a; --down: #c0342a; --accent-soft: var(--navy-soft); --tile-w: 136px; --drawer-w: 420px;
  display: grid; gap: 16px; min-width: 0;
}
:root[data-theme=dark] .lobby-sim {
  --heat-0: #334052; --heat-1: #1d4a85; --heat-2: #2a66b3; --heat-3: #3f86dc; --heat-4: #79abeb; --heat-5: #bcd5f6;
  --up: var(--pos); --down: var(--neg);
}
.lobby-sim[hidden], .lobby-sim [hidden] { display: none !important; }
.lobby-sim .tabular, .lobby-sim .num { font-variant-numeric: tabular-nums; }
.lobby-sim .muted { color: var(--text-2); }
.lobby-sim .faint { color: var(--text-3); }
.lobby-sim .up { color: var(--up); font-weight: 650; }
.lobby-sim .down { color: var(--down); font-weight: 650; }
.lobby-sim .note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.lobby-sim .note.err:empty { display: none; }
.lobby-sim .note.err { color: var(--neg); }
.lobby-sim .empty { margin: 0; padding: 14px 0; color: var(--text-2); font-size: 13px; }
.lobby-sim .spacer { flex: 1; }
.lobby-sim code { font-size: 12px; }

/* Controls */
.lobby-sim .btn { min-width: 0; min-height: 34px; padding: 6px 14px; font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer; }
.lobby-sim .btn.primary { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.lobby-sim .btn.primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-text); }
.lobby-sim .btn.small { min-height: 28px; padding: 4px 11px; font-size: 12.5px; }
.lobby-sim .btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.lobby-sim .btn.ghost:hover:not(:disabled) { background: var(--row-hover); color: var(--text); border-color: transparent; }
.lobby-sim .btn.icon { padding: 4px 9px; font-size: 15px; line-height: 1; }
.lobby-sim .btn.danger { color: var(--neg); }
.lobby-sim .btn:disabled { opacity: .45; cursor: not-allowed; }
.lobby-sim .link { all: unset; cursor: pointer; font-weight: 600; color: var(--text); }
.lobby-sim .link:hover { text-decoration: underline; text-underline-offset: 2px; }
.lobby-sim .link:focus-visible, .lobby-sim .tile:focus-visible, .lobby-sim .gcard-art:focus-visible, .lobby-sim .cell-game:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lobby-sim select, .lobby-sim input[type="search"], .lobby-sim input[type="text"] { height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.lobby-sim .segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sub); border: 1px solid var(--line); }
.lobby-sim .segmented button { border: 0; background: transparent; color: var(--text-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap; }
.lobby-sim .segmented button:hover { color: var(--text); }
.lobby-sim .segmented button[aria-pressed="true"] { background: var(--action-bg); color: var(--action-text); }
.lobby-sim .segmented.small button { padding: 4px 11px; font-size: 12.5px; }
.lobby-sim .segmented.wrap { flex-wrap: wrap; border-radius: 14px; }
.lobby-sim .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--sub); border: 1px solid var(--line); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lobby-sim .chip.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.lobby-sim .chip.info { background: var(--navy-soft); border-color: transparent; color: var(--navy); }
.lobby-sim .chip.conf-high, .lobby-sim .chip.conf-medium { background: transparent; }
.lobby-sim .chip.conf-low { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.lobby-sim .chip.conf-none { background: transparent; border-style: dashed; }
.lobby-sim .chip-btn { all: unset; cursor: pointer; padding: 1px 8px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); font-weight: 600; font-size: 12px; }
.lobby-sim .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.lobby-sim .row-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lobby-sim .field { display: grid; gap: 4px; min-width: 0; }
.lobby-sim .field > span { font-size: 11.5px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }

/* Header */
.lobby-sim .lobby-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.lobby-sim .lobby-head .page-title { margin: 0; }
.lobby-sim .lobby-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.lobby-sim .lobby-controls { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.lobby-sim .lobby-goal { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); font-weight: 550; white-space: nowrap; }
.lobby-sim .lobby-goal select { font-weight: 650; color: var(--text); }
.lobby-sim .lobby-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.lobby-sim .lobby-tabs button { border: 0; background: none; padding: 10px 14px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.lobby-sim .lobby-tabs button:hover { color: var(--text); }
.lobby-sim .lobby-tabs button[aria-selected="true"] { color: var(--text); font-weight: 650; border-bottom-color: var(--navy); }
.lobby-sim .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--action-bg); color: var(--action-text); font-size: 11.5px; font-weight: 700; }
.lobby-sim .lobby-view { display: grid; gap: 20px; min-width: 0; }
.lobby-sim.has-drawer > :not(.lobby-drawer):not(.lobby-tooltip):not(.lobby-toast) { margin-right: calc(var(--drawer-w) + 16px); }

/* Blocks */
.lobby-sim .block { display: grid; gap: 10px; min-width: 0; }
.lobby-sim .block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lobby-sim .block-head h2 { margin: 0; font-size: 16px; font-weight: 650; display: inline-flex; gap: 8px; align-items: center; }
.lobby-sim .block-head p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.lobby-sim .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lobby-sim .more { justify-self: start; }

/* Overview summary */
.lobby-sim .summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lobby-sim .stat { display: grid; gap: 6px; align-content: start; padding: 16px 18px; }
.lobby-sim .stat .label { font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.lobby-sim .stat .big { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lobby-sim .stat .sub { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.lobby-sim .stat .btn { justify-self: start; margin-top: 4px; }
.lobby-sim .stat.accent { background: var(--navy-soft); border-color: transparent; }

/* Opportunity cards */
.lobby-sim .opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lobby-sim .opp { display: grid; gap: 8px; padding: 14px 16px; align-content: start; }
.lobby-sim .opp header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lobby-sim .opp-where { font-size: 12px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-sim .opp-delta { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-sim .opp-swap { display: flex; align-items: center; gap: 10px; }
.lobby-sim .opp-swap .art:first-child { opacity: .55; filter: grayscale(.6); }
.lobby-sim .opp-swap .arrow { font-size: 18px; color: var(--text-3); }
.lobby-sim .opp-strip { display: flex; gap: 6px; }
.lobby-sim .opp-what { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.lobby-sim .opp-what .out { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); font-weight: 500; }
.lobby-sim .opp-why { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.lobby-sim .opp-actions { display: flex; gap: 6px; margin-top: 2px; }

/* Game art */
.lobby-sim .art { position: relative; display: block; flex: none; overflow: hidden; border-radius: 8px; background: var(--sub); }
.lobby-sim .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lobby-sim .art .initials { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; letter-spacing: .02em; color: #ffffffd9; }
.lobby-sim .art-xs { width: 32px; height: 32px; border-radius: 6px; } .lobby-sim .art-xs .initials { font-size: 11px; }
.lobby-sim .art-sm { width: 64px; height: 64px; } .lobby-sim .art-sm .initials { font-size: 16px; }
.lobby-sim .art-md { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; } .lobby-sim .art-md .initials { font-size: 22px; }
.lobby-sim .art-lg { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; } .lobby-sim .art-lg .initials { font-size: 26px; }
.lobby-sim .art-xl { width: 104px; height: 104px; border-radius: 12px; } .lobby-sim .art-xl .initials { font-size: 28px; }
.lobby-sim .ph-0 { background: #4f5d8a; } .lobby-sim .ph-1 { background: #3d7a6e; } .lobby-sim .ph-2 { background: #8a5a3c; } .lobby-sim .ph-3 { background: #6a4f8a; }
.lobby-sim .ph-4 { background: #3f6f9a; } .lobby-sim .ph-5 { background: #8a4f62; } .lobby-sim .ph-6 { background: #5f7a3d; } .lobby-sim .ph-7 { background: #7a6a3d; }
.lobby-sim .heat-0 { background: var(--heat-0); } .lobby-sim .heat-1 { background: var(--heat-1); } .lobby-sim .heat-2 { background: var(--heat-2); }
.lobby-sim .heat-3 { background: var(--heat-3); } .lobby-sim .heat-4 { background: var(--heat-4); } .lobby-sim .heat-5 { background: var(--heat-5); }

/* Game cards (overview strips and the explorer grid) */
.lobby-sim .gstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.lobby-sim .ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.lobby-sim .gcard { display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; cursor: grab; }
.lobby-sim .gcard-art { all: unset; position: relative; display: block; cursor: pointer; }
.lobby-sim .gcard-art .heat { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.lobby-sim .gcard-body { display: grid; gap: 3px; padding: 9px 10px 10px; flex: 1; align-content: start; }
.lobby-sim .gcard .gname { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lobby-sim .gcard .gstudio { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-sim .gcard .gmeta { display: flex; gap: 5px; align-items: baseline; font-size: 12px; font-variant-numeric: tabular-nums; }
.lobby-sim .gcard .gmeta strong { font-size: 14px; }
.lobby-sim .gcard .gnote { font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.lobby-sim .gcard .btn { margin-top: 6px; justify-self: start; }

/* Worth a look */
.lobby-sim .attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.lobby-sim .attn-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.lobby-sim .attn-item:hover { border-color: var(--line-2); background: var(--row-hover); }
.lobby-sim .attn-item .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; color: var(--warn); }
.lobby-sim .attn-item.quiet .n { color: var(--text-3); }
.lobby-sim .attn-item strong { display: block; font-size: 13px; }
.lobby-sim .attn-item .sub { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }

/* Editor */
.lobby-sim .impact { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lobby-sim .impact-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.lobby-sim .impact-main .label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.lobby-sim .impact-main .from { font-size: 18px; font-weight: 600; color: var(--text-2); }
.lobby-sim .impact-main .to { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.lobby-sim .impact-main .delta { font-size: 16px; }
.lobby-sim .impact-main .range { font-size: 12px; color: var(--text-3); }
.lobby-sim .impact-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lobby-sim .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--text-2); margin-top: -8px; }
.lobby-sim .legend .scale { display: inline-flex; gap: 2px; }
.lobby-sim .legend .scale i { width: 18px; height: 8px; border-radius: 2px; }
.lobby-sim .placing { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r-card); background: var(--navy-soft); font-size: 13px; }
.lobby-sim .lrows { display: grid; gap: 12px; }
.lobby-sim .lrow { padding: 12px 14px 10px; min-width: 0; }
.lobby-sim .lrow-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.lobby-sim .lrow-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sub); color: var(--text-2); font-size: 12px; font-weight: 700; }
.lobby-sim .lrow-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.lobby-sim .lrow-stats { margin-left: auto; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lobby-sim .menu-wrap { position: relative; }
.lobby-sim .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--pop-shadow); }
.lobby-sim .menu button { all: unset; padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.lobby-sim .menu button:hover, .lobby-sim .menu button:focus-visible { background: var(--row-hover); }
.lobby-sim .menu button:disabled { opacity: .4; cursor: default; }
.lobby-sim .strip { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--tile-w)); grid-auto-columns: var(--tile-w); gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.lobby-sim .tile { position: relative; flex: 0 0 var(--tile-w); display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; scroll-snap-align: start; font: inherit; }
.lobby-sim .tile:hover { border-color: var(--line-2); box-shadow: var(--pop-shadow); }
.lobby-sim .tile .heat { height: 5px; flex: none; }
.lobby-sim .tile .pos { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #0b0f1fb3; color: #fff; font-size: 11px; font-weight: 700; }
.lobby-sim .tile .flag { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--neg); color: #fff; font-size: 12px; font-weight: 800; }
.lobby-sim .t-name { padding: 7px 9px 0; font-size: 12.5px; font-weight: 620; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lobby-sim .t-meta { display: flex; justify-content: space-between; gap: 4px; padding: 4px 9px 8px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lobby-sim .t-meta strong { color: var(--text); }
.lobby-sim .tile.selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.lobby-sim .tile.changed { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.lobby-sim .tile.changed::after { content: "Changed"; position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 700; }
.lobby-sim .tile.placing { cursor: copy; }
.lobby-sim .tile.placing:hover { box-shadow: 0 0 0 2px var(--navy); }
.lobby-sim .tile.drop-target { box-shadow: 0 0 0 2px var(--navy); border-style: dashed; }

/* Explorer */
.lobby-sim .explore-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; }
.lobby-sim .filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(6, minmax(120px, 1fr)); gap: 10px; padding: 12px 14px; }
.lobby-sim .result-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.lobby-sim .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.lobby-sim table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
.lobby-sim table.data th, .lobby-sim table.data td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; }
.lobby-sim table.data th { position: sticky; top: 0; z-index: 1; background: var(--sub); font-size: 11.5px; font-weight: 650; color: var(--text-2); }
.lobby-sim table.data td.num, .lobby-sim table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lobby-sim table.data tbody tr:hover { background: var(--row-hover); }
.lobby-sim table.data.compact th, .lobby-sim table.data.compact td { padding: 6px 8px; font-size: 12px; }
.lobby-sim .cell-game { all: unset; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; white-space: normal; min-width: 200px; }
.lobby-sim .cell-game:hover span { text-decoration: underline; }
.lobby-sim .flag-inline { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: var(--neg); color: #fff; font-size: 10px; font-weight: 800; }
.lobby-sim .pager { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); }
.lobby-sim .groups .bar-col { min-width: 220px; }
.lobby-sim .bar-val { display: block; font-variant-numeric: tabular-nums; font-weight: 600; margin-bottom: 3px; }
.lobby-sim .hbar { display: block; width: 100%; height: 8px; }
.lobby-sim .hbar.inline { display: inline-block; width: 90px; vertical-align: middle; margin-right: 6px; }
.lobby-sim .hbar + .hbar { margin-top: 2px; }
.lobby-sim .b-value { fill: var(--heat-3); }
.lobby-sim .b-visits { fill: var(--heat-4); }
.lobby-sim .b-slots { fill: var(--violet); }
.lobby-sim .b-track { fill: var(--sub); }
.lobby-sim .key { display: inline-block; width: 10px; height: 8px; border-radius: 2px; vertical-align: middle; }
.lobby-sim .key.k1 { background: var(--heat-4); } .lobby-sim .key.k2 { background: var(--violet); }

/* Plans */
.lobby-sim .draft { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--navy-soft); border-color: transparent; }
.lobby-sim .draft h2 { margin: 0 0 4px; font-size: 16px; }
.lobby-sim .draft p { margin: 0; font-size: 13px; color: var(--text-2); }
.lobby-sim .draft-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lobby-sim .draft-form input { width: 220px; }
.lobby-sim .plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.lobby-sim .plan { display: grid; gap: 8px; padding: 14px 16px; align-content: start; border-left: 4px solid var(--line-2); }
.lobby-sim .plan.status-approved { border-left-color: var(--navy); }
.lobby-sim .plan.status-implemented { border-left-color: var(--pos-dot); }
.lobby-sim .plan header { display: flex; gap: 8px; align-items: center; }
.lobby-sim .plan h3 { margin: 0; font-size: 15px; }
.lobby-sim .plan .meta, .lobby-sim .plan-note { margin: 0; font-size: 12.5px; color: var(--text-2); }
.lobby-sim .plan-note { color: var(--text); }
.lobby-sim .plan-delta { font-size: 15px; font-variant-numeric: tabular-nums; }
.lobby-sim .pill { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--sub); color: var(--text-2); }
.lobby-sim .pill.approved { background: var(--navy-soft); color: var(--navy); }
.lobby-sim .pill.implemented { background: color-mix(in srgb, var(--pos-dot) 18%, transparent); color: var(--pos); }
.lobby-sim .plan-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.lobby-sim .plan-changes li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lobby-sim .plan-changes li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lobby-sim .archived summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.lobby-sim .archived .plan-list { margin-top: 10px; }

/* Drawer */
.lobby-sim .lobby-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: var(--drawer-w); max-width: 100vw; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--pop-shadow); }
.lobby-sim .drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.lobby-sim .drawer-head h2 { margin: 0; font-size: 13px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.lobby-sim .drawer-body { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.lobby-sim .ghero { display: flex; gap: 14px; align-items: flex-start; }
.lobby-sim .ghero h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.lobby-sim .ghero .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.lobby-sim .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.lobby-sim .kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lobby-sim .kv { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--sub); }
.lobby-sim .kv .label { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.lobby-sim .kv .value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lobby-sim .kv .sub { font-size: 11.5px; color: var(--text-3); }
.lobby-sim .warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lobby-sim .warnings li { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; background: var(--sub); }
.lobby-sim .warnings li.warn { background: var(--warn-bg); color: var(--warn); }
.lobby-sim .warnings li.bad { background: var(--bad-bg); color: var(--neg); }
.lobby-sim .dsec { display: grid; gap: 8px; }
.lobby-sim .dsec h3, .lobby-sim .dsec > summary { margin: 0; font-size: 13.5px; font-weight: 650; }
.lobby-sim details.dsec > summary, .lobby-sim .dsec details > summary { cursor: pointer; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.lobby-sim .opt-list { display: grid; gap: 4px; }
.lobby-sim .opt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px; border-radius: 8px; }
.lobby-sim .opt:hover { background: var(--row-hover); }
.lobby-sim .opt[draggable="true"] { cursor: grab; }
.lobby-sim .opt > .link { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-sim .opt-text { display: grid; min-width: 0; font-size: 12px; }
.lobby-sim .opt-text .link { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-sim .opt-text .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-sim .opt-d { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-sim .tree { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lobby-sim .tree td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.lobby-sim .tree td.num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-sim .tree tr.total td { font-weight: 750; border-bottom: 0; }
.lobby-sim .tree .op { display: inline-block; width: 14px; color: var(--text-3); }
.lobby-sim .total-line { margin: 0; font-size: 14px; font-weight: 600; }
.lobby-sim .range { display: grid; gap: 4px; }
.lobby-sim .range-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.lobby-sim .range input { width: 100%; accent-color: var(--action-bg); }
.lobby-sim .steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.lobby-sim .plain { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.lobby-sim .chart { display: block; width: 100%; height: auto; }
.lobby-sim .chart text { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.lobby-sim .chart .spark { fill: none; stroke: var(--heat-3); stroke-width: 2; }
.lobby-sim .chart .spark-area { fill: var(--heat-3); opacity: .14; }

/* Floating bits */
.lobby-sim .lobby-tooltip { position: fixed; z-index: 60; pointer-events: none; max-width: 280px; padding: 9px 11px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--pop-shadow); font-size: 12px; line-height: 1.5; color: var(--text); }
.lobby-sim .lobby-tooltip strong:first-child { display: block; font-size: 13px; }
.lobby-sim .lobby-toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--action-bg); color: var(--action-text); font-size: 13px; font-weight: 600; box-shadow: var(--pop-shadow); }

@media (max-width: 1280px) {
  .lobby-sim .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lobby-sim .filters .grow { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .lobby-sim .summary, .lobby-sim .two { grid-template-columns: minmax(0, 1fr); }
  .lobby-sim.has-drawer > :not(.lobby-drawer):not(.lobby-tooltip):not(.lobby-toast) { margin-right: 0; }
}
@media (max-width: 640px) {
  .lobby-sim { --tile-w: 116px; }
  .lobby-sim .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-sim .plan-list { grid-template-columns: minmax(0, 1fr); }
  .lobby-sim .lobby-drawer { width: 100vw; }
  .lobby-sim .impact { position: static; }
}
@media (forced-colors: active) {
  .lobby-sim .heat-0, .lobby-sim .heat-1, .lobby-sim .heat-2, .lobby-sim .heat-3, .lobby-sim .heat-4, .lobby-sim .heat-5 { forced-color-adjust: none; }
}

/* Category workspace and placement preview */
.lobby-sim .category-workspace {display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start;}
.lobby-sim .category-list {position:sticky;top:18px;padding:16px;display:grid;gap:8px;}
.lobby-sim .category-list .block-head {flex-wrap:wrap;gap:10px;}
.lobby-sim .category-item {display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:10px;padding:12px;text-align:left;background:var(--sub);color:var(--text);cursor:pointer;width:100%;}
.lobby-sim .category-item:hover,.lobby-sim .category-item.selected {border-color:var(--line-2);background:var(--row-hover);}
.lobby-sim .category-item>span:last-child {display:grid;gap:4px;min-width:0;}
.lobby-sim .category-item strong {font-size:13px;overflow-wrap:anywhere;}
.lobby-sim .category-item .sub {font-size:11px;color:var(--text-3);}
.lobby-sim .category-form,.lobby-sim .category-empty {padding:24px;min-width:0;}
.lobby-sim .category-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0;}
.lobby-sim .category-fields .field {display:grid;gap:6px;min-width:0;font-size:12px;font-weight:600;}
.lobby-sim .category-fields select,.lobby-sim .category-fields input {width:100%;min-width:0;box-sizing:border-box;}
.lobby-sim .category-fields select[multiple] {height:120px;padding:6px;}
.lobby-sim .category-fields select[multiple] option {padding:4px 7px;border-radius:4px;}
.lobby-sim .category-fields .checkbox {display:flex;align-items:center;gap:10px;}
.lobby-sim .category-fields input[type=checkbox] {width:auto;}
.lobby-sim .category-recommendations {display:grid;gap:4px;margin:14px 0;max-height:520px;overflow:auto;}
.lobby-sim .category-recommendations .sub {color:var(--text-3);font-size:11px;}
.lobby-sim .refresh-notice {display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-top:8px;border:1px solid var(--warn);border-radius:8px;color:var(--warn);}
.lobby-sim .tile.hero { grid-column: span 2; grid-row: span 2;border-color:var(--action-bg);box-shadow:0 0 0 2px var(--action-bg);}
.lobby-sim .hero-badge {position:absolute;top:6px;left:34px;padding:3px 6px;background:var(--action-bg);color:var(--action-text);border-radius:6px;font-size:10px;}
.lobby-sim .tile-add {display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px;font-size:25px;background:var(--sub);min-height:0;}
.lobby-sim .tile-add span {font-size:12px;}
.lobby-sim .preview-comparison {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.lobby-sim .preview-comparison>section {min-width:0;}
.lobby-sim .preview-comparison h3 {font-size:13px;margin:12px 0;}
.lobby-sim .preview-viewport {height:650px;position:relative;overflow:auto;background:#20251f;color:#fff;border:1px solid #4a5248;border-radius:16px;scrollbar-gutter:stable;padding:20px;box-sizing:border-box;}
.lobby-sim .preview-site-head {font-size:18px;font-weight:700;border-bottom:1px solid #51574c;padding:12px 0 22px;margin-bottom:24px;}
.lobby-sim .preview-row {margin-bottom:26px;}
.lobby-sim .preview-row>header {display:flex;align-items:center;gap:10px;}
.lobby-sim .preview-row h3 {font-size:14px;text-transform:uppercase;}
.lobby-sim .preview-games {overflow-x:auto;scroll-snap-type:x proximity;}
.lobby-sim .preview-grid {display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc(100% / 6);gap:0;}
.lobby-sim .preview-tile {position:relative;min-width:0;aspect-ratio:1;scroll-snap-align:start;}
.lobby-sim .preview-tile.hero {grid-column:span 2;grid-row:span 2;}
.lobby-sim .preview-tile .art {width:100%;height:100%;border-radius:0;background:transparent;}
.lobby-sim .preview-tile .art img {object-fit:contain;}
.lobby-sim .preview-row>header {justify-content:space-between;}
.lobby-sim .preview-layout-label {font-size:10px;color:#b7bfb3;}
.lobby-sim .preview-navigation {display:flex;gap:8px;overflow-x:auto;margin-bottom:24px;padding:4px 0 8px;}
.lobby-sim .preview-navigation span {flex:none;padding:9px 14px;border:1px solid #646960;border-radius:999px;background:#292d26;font-size:11px;font-weight:600;}
.lobby-sim .strip .tile .art {background:#20251f;flex:1;aspect-ratio:auto;min-height:0;}
.lobby-sim .strip .t-name {position:absolute;left:0;right:0;bottom:24px;min-height:0;padding:4px 6px;background:#10180ed9;color:#fff;font-size:11px;white-space:nowrap;display:block;text-overflow:ellipsis;}
.lobby-sim .strip .t-meta {position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:#10180ed9;color:#dce5d8;font-size:10px;}
.lobby-sim .strip .t-meta strong {color:#fff;}
.lobby-sim .strip .heat {position:absolute;left:0;right:0;bottom:48px;height:3px;}
.lobby-sim .strip .tile .art img {object-fit:contain;}
.lobby-sim .strip .tile.hero .art {flex:1;aspect-ratio:auto;min-height:0;}
.lobby-sim .preview-fold {position:sticky;bottom:0;text-align:center;border-top:1px dashed #f4c456;color:#f4c456;background:#20251fed;padding:6px;font-size:11px;pointer-events:none;}
.lobby-sim .preview-comparison.mobile {grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;}
.lobby-sim .preview-comparison.mobile .preview-viewport {height:720px;padding:12px;}
.lobby-sim .preview-comparison.mobile .preview-grid {grid-auto-columns:calc(100% / 4.15);}

.lobby-sim .saved-forecast {font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;}
@media(max-width:1000px){.lobby-sim .category-workspace{grid-template-columns:220px minmax(0,1fr);}.lobby-sim .preview-comparison{grid-template-columns:minmax(0,1fr);}}
@media(max-width:700px){.lobby-sim .category-workspace{grid-template-columns:minmax(0,1fr);}.lobby-sim .category-list{position:static;}.lobby-sim .category-fields{grid-template-columns:minmax(0,1fr);}.lobby-sim .category-form{padding:16px;}.lobby-sim .preview-comparison.mobile{grid-template-columns:minmax(0,390px);}.lobby-sim .lobby-tabs{overflow-x:auto;}.lobby-sim .category-recommendations .opt{grid-template-columns:32px minmax(0,1fr) auto;}.lobby-sim .category-recommendations .conf-high,.lobby-sim .category-recommendations .conf-medium,.lobby-sim .category-recommendations .conf-low{grid-column:2;}}
.lobby-sim .category-advanced {margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:12px;}
.lobby-sim .category-advanced summary {cursor:pointer;font-size:13px;font-weight:650;margin-bottom:10px;}
.lobby-sim .category-advanced>.field {display:grid;gap:6px;font-size:12px;}
.lobby-sim .lobby-tabs {overflow-y:hidden;}