/*
 * System design game styles: the approved NOC dashboard look (prototypes/system-design-looks.html,
 * look 2), mounted at #as-sd (page-system-design.hbs and paste-ready/demos/system-design.html).
 * Everything is scoped under #as-sd so theme styles never leak in or out.
 * Layout: the play screen fills one laptop viewport (≥1100×680); smaller screens stack and scroll.
 */
/* Ghost page: the fixed site nav floats over the dark game as glass; footer hidden. */
body.page-system-design .site-footer { display: none; }
body.page-system-design .site-nav { background: rgba(10, 12, 17, 0.5); border-bottom-color: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body.page-system-design .nav-logo, body.page-system-design .nav-search-toggle { color: #fff; }
body.page-system-design .nav-hamburger span { background: #fff; }
@media (min-width: 769px) {
  body.page-system-design .nav-links a { color: rgba(255, 255, 255, 0.72); }
  body.page-system-design .nav-links a:hover, body.page-system-design .nav-links a.active { color: #fff; }
}
.sd-page { background: #0a0c11; }
.sd-page #as-sd { padding-top: var(--nav-h, 0px); }
.sd-page-notes { max-width: 720px; margin: 0 auto; padding: 40px 24px; color: rgba(230, 233, 242, 0.74); }

#as-sd, #as-sd * { box-sizing: border-box; }
#as-sd {
  --bg: #0a0c11; --pn: #11141b; --pn2: #0d1016; --ln: #1f2431; --tx: #e6e9f2; --tx2: #8a93a8; --cy: #3ee0d0; --pu: #8b7bff;
  --ok: #3ddc97; --warn: #ffb547; --bad: #ff5c7a; --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sys: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--tx); font: 13px/1.4 var(--sys); -webkit-font-smoothing: antialiased;
}
#as-sd h1, #as-sd h2, #as-sd h3, #as-sd p, #as-sd ol, #as-sd ul { margin: 0; padding: 0; max-width: none; }
#as-sd button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
#as-sd button:disabled { cursor: not-allowed; }
#as-sd [hidden] { display: none !important; }
#as-sd .num { font-variant-numeric: tabular-nums; }
#as-sd :focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
@keyframes sd-pulse { 50% { opacity: 0.35; } }
@keyframes sd-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* ── Buttons ── */
#as-sd .sd-btn { font-weight: 600; border-radius: 9px; padding: 10px 16px; border: 1px solid var(--ln); background: var(--pn); transition: border-color 0.15s, transform 0.1s var(--ease); }
#as-sd .sd-btn:hover:not(:disabled) { border-color: var(--cy); }
#as-sd .sd-btn:active:not(:disabled) { transform: scale(0.97); }
#as-sd .sd-btn:disabled { opacity: 0.45; }
#as-sd .sd-pri { background: var(--cy); color: #04110f; border-color: var(--cy); }
#as-sd .sd-ghost { background: transparent; }
#as-sd .sd-big { padding: 14px 22px; font-size: 15px; }
#as-sd .sd-btn.right { border-color: var(--ok); color: var(--ok); }
#as-sd .sd-btn.wrong { border-color: var(--bad); color: var(--bad); }
#as-sd .sd-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cy); display: flex; align-items: center; gap: 8px; }
#as-sd .sd-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: sd-pulse 1.6s infinite; }
#as-sd .sd-small { font-size: 12px; color: var(--tx2); }
#as-sd .sd-stars { font-size: 20px; letter-spacing: 3px; color: var(--warn); }
#as-sd .sd-stars s { color: #2a3142; text-decoration: none; }

/* ── Home ── */
#as-sd .sd-home { max-width: 1180px; margin: 0 auto; padding: 48px 24px 64px; min-height: calc(100vh - var(--nav-h, 0px)); }
#as-sd .sd-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 12px; }
#as-sd .sd-hero > p { font-size: 17px; color: #c5cbda; max-width: 640px; line-height: 1.55; }
#as-sd .sd-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#as-sd .sd-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
#as-sd .sd-meter > div { background: var(--pn); border: 1px solid var(--ln); border-radius: 12px; padding: 14px 18px; }
#as-sd .sd-meter .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx2); }
#as-sd .sd-meter .v { font-size: 30px; font-weight: 700; margin: 4px 0 2px; }
#as-sd .sd-meter small { color: var(--tx2); font-size: 12px; }
#as-sd .sd-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
#as-sd .sd-rankcol, #as-sd .sd-board { background: var(--pn); border: 1px solid var(--ln); border-radius: 14px; padding: 16px; }
#as-sd .sd-rankcol h3, #as-sd .sd-board h3 { font-size: 15px; margin-bottom: 4px; }
#as-sd .sd-rankcol > p { color: var(--tx2); font-size: 12px; margin-bottom: 12px; }
#as-sd .sd-rankcol ol, #as-sd .sd-board ol { list-style: none; display: grid; gap: 6px; }
#as-sd .sd-skill { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--ln); background: var(--pn2); transition: border-color 0.15s; }
#as-sd .sd-skill:hover:not(:disabled) { border-color: var(--cy); }
#as-sd .sd-skill em { font-style: normal; font-size: 11px; color: var(--tx2); text-transform: uppercase; letter-spacing: 0.08em; }
#as-sd .sd-skill.is-mastered em { color: var(--ok); }
#as-sd .sd-skill.is-locked { opacity: 0.45; }
#as-sd .sd-skill.is-boss { border-color: rgba(255, 92, 122, 0.4); }
#as-sd .sd-skill .sd-stars { font-size: 13px; letter-spacing: 1px; }
#as-sd .sd-board li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--ln); }

/* ── Play screen ── */
#as-sd .sd-play { height: calc(100vh - var(--nav-h, 0px)); min-height: 680px; display: grid; gap: 12px; padding: 0 16px 16px;
  grid-template: 52px auto 1fr 56px / 290px 1fr clamp(250px, 23vw, 330px); }
#as-sd .sd-panel { background: var(--pn); border: 1px solid var(--ln); border-radius: 12px; min-height: 0; }
#as-sd .sd-h { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx2); display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#as-sd .sd-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ln); margin: 0 -16px; padding: 0 16px; }
#as-sd .sd-brand { font-weight: 800; letter-spacing: 0.08em; display: flex; align-items: center; gap: 10px; }
#as-sd .sd-brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: sd-pulse 1.6s infinite; }
#as-sd .sd-brand span { color: var(--cy); }
#as-sd .sd-case { color: var(--tx2); }
#as-sd .sd-case b { color: var(--tx); }
#as-sd .sd-grow { flex: 1; }
#as-sd .sd-rank { color: var(--tx2); }
#as-sd .sd-rank b { color: var(--tx); }
#as-sd .sd-app.boss .sd-brand i { background: var(--bad); box-shadow: 0 0 12px var(--bad); }

#as-sd .sd-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: 12px; }
#as-sd .sd-tile { padding: 12px 16px; text-align: left; }
#as-sd .sd-tile .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx2); }
#as-sd .sd-tile .v { font: 700 26px/1.2 var(--sys); margin-top: 4px; font-variant-numeric: tabular-nums; }
#as-sd .sd-tile .t { font-size: 12px; color: var(--tx2); }
#as-sd .sd-tile.pass .t { color: var(--ok); }
#as-sd .sd-tile.pass .t::before { content: "✓ "; }
#as-sd .sd-tile.fail { border-color: rgba(255, 92, 122, 0.5); box-shadow: inset 0 0 30px rgba(255, 92, 122, 0.12); }
#as-sd .sd-tile.fail .v, #as-sd .sd-tile.fail .t { color: var(--bad); }
#as-sd .sd-tile.fail .t::before { content: "✗ "; }
#as-sd .sd-brief .k { color: var(--cy); }
#as-sd .sd-brief .v { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
#as-sd .sd-app.boss .sd-brief { border-color: var(--bad); background: linear-gradient(135deg, #2a0d14, var(--pn)); }

/* Design panel */
#as-sd .sd-design { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
#as-sd .sd-grp { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx2); margin: 10px 0 2px; }
#as-sd .sd-ctl { border: 1px solid var(--ln); border-radius: 10px; background: var(--pn2); padding: 9px 10px; animation: sd-in 0.2s var(--ease); }
#as-sd .sd-ctl.child { margin-left: 12px; }
#as-sd .sd-ctl .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#as-sd .sd-ctl .lbl { font-weight: 600; }
#as-sd .sd-ctl .note { font-size: 11px; color: var(--tx2); margin-top: 3px; }
#as-sd .sd-ctl.locked { opacity: 0.45; }
#as-sd .sd-ctl.new { border-color: var(--cy); box-shadow: 0 0 0 1px rgba(62, 224, 208, 0.25); }
#as-sd .sd-seg { display: inline-flex; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; }
#as-sd .sd-seg button { padding: 5px 10px; font: 600 12px var(--mono); color: var(--tx2); }
#as-sd .sd-seg button.on { background: var(--cy); color: #04110f; }
#as-sd .sd-step { display: inline-flex; align-items: center; gap: 2px; }
#as-sd .sd-step button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--ln); font-weight: 700; }
#as-sd .sd-step span { min-width: 26px; text-align: center; font: 700 14px var(--mono); }
#as-sd .sd-tog { width: 38px; height: 22px; border-radius: 999px; background: #2a3142; position: relative; flex: none; }
#as-sd .sd-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s var(--ease); }
#as-sd .sd-tog.on { background: var(--cy); }
#as-sd .sd-tog.on::after { transform: translateX(16px); }
#as-sd .sd-ctl input[type=range] { width: 100%; margin-top: 6px; accent-color: var(--cy); }
#as-sd .sd-budget { margin-top: auto; padding-top: 10px; text-align: left; width: 100%; display: block; }
#as-sd .sd-budget .row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx2); }
#as-sd .sd-budget .bar { display: block; height: 6px; border-radius: 3px; background: #222938; overflow: hidden; margin-top: 6px; }
#as-sd .sd-budget .bar i { display: block; height: 100%; background: var(--ok); }
#as-sd .sd-budget.over .bar i { background: var(--bad); }
#as-sd .sd-budget.over .num { color: var(--bad); }
#as-sd .sd-app.running .sd-design .sd-ctl { pointer-events: none; opacity: 0.7; }

/* Topology */
#as-sd .sd-map { position: relative; padding: 14px; display: flex; flex-direction: column; overflow: hidden; }
#as-sd .sd-map svg { flex: 1; width: 100%; min-height: 0; }
#as-sd .sd-legend { display: flex; gap: 12px; }
#as-sd .sd-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
#as-sd .sd-legend i.ok { background: var(--ok); } #as-sd .sd-legend i.warn { background: var(--warn); } #as-sd .sd-legend i.bad { background: var(--bad); }
#as-sd .sd-edge { fill: none; stroke: #2a3142; stroke-width: 2; }
#as-sd .sd-edge.dead { stroke-dasharray: 6 6; opacity: 0.5; }
#as-sd .sd-dot { r: 3.2; }
#as-sd .sd-dot.s-ok { fill: var(--ok); } #as-sd .sd-dot.s-warn { fill: var(--warn); } #as-sd .sd-dot.s-hot { fill: var(--bad); }
#as-sd .sd-node { cursor: pointer; }
#as-sd .sd-node rect.box { fill: #151a24; stroke: #2a3142; stroke-width: 1.5; transition: stroke 0.2s; }
#as-sd .sd-node:hover rect.box { stroke: #4a5570; }
#as-sd .sd-node text { fill: var(--tx); font: 600 12.5px var(--sys); }
#as-sd .sd-node .sub { fill: var(--tx2); font: 500 9.5px var(--sys); letter-spacing: 0.05em; text-transform: uppercase; }
#as-sd .sd-node .zone { fill: #f59fff; font: 700 9px var(--sys); letter-spacing: 0.1em; }
#as-sd .sd-node.zone-b rect.box { stroke-dasharray: 5 3; }
#as-sd .sd-node .val { fill: var(--tx); font: 600 11.5px var(--mono); }
#as-sd .sd-node .track { fill: #222938; }
#as-sd .sd-node .bar { fill: var(--ok); }
#as-sd .sd-node[data-state="warn"] rect.box { stroke: var(--warn); }
#as-sd .sd-node[data-state="warn"] .bar { fill: var(--warn); }
#as-sd .sd-node[data-state="hot"] rect.box { stroke: var(--bad); filter: drop-shadow(0 0 10px rgba(255, 92, 122, 0.8)); animation: sd-pulse 0.9s infinite; }
#as-sd .sd-node[data-state="hot"] .bar { fill: var(--bad); }
#as-sd .sd-node[data-state="dead"] { opacity: 0.45; }
#as-sd .sd-node[data-state="dead"] .val { fill: var(--bad); }
#as-sd .sd-node.promoted rect.box { stroke: var(--cy); }
#as-sd .sd-arrowhead { fill: #3a4358; }

/* Canvas builder (Senior+): ports, selectable arrows, palette, drawer, live checks */
#as-sd svg.sd-edit { touch-action: none; }
#as-sd svg.sd-edit .sd-edge { pointer-events: none; }
#as-sd svg.sd-edit .sd-node { cursor: grab; }
#as-sd svg.sd-edit .sd-node:active { cursor: grabbing; }
#as-sd .sd-node.sel rect.box { stroke: var(--cy); stroke-width: 2.5; }
#as-sd .sd-port { fill: #0d1016; stroke: var(--cy); stroke-width: 2; cursor: crosshair; transition: r 0.15s var(--ease); }
#as-sd .sd-port:hover { r: 10; fill: var(--cy); }
#as-sd .sd-edge-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
#as-sd .sd-edge-hit:hover + .sd-edge, #as-sd .sd-edge.sel { stroke: var(--cy); stroke-width: 3; }
#as-sd .sd-wire { fill: none; stroke: var(--cy); stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; }
#as-sd .sd-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#as-sd .sd-pal { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn2); font-size: 12px; font-weight: 600; touch-action: none; cursor: grab; transition: border-color 0.15s, transform 0.1s var(--ease); }
#as-sd .sd-pal:hover { border-color: var(--cy); }
#as-sd .sd-pal:active { transform: scale(0.96); }
#as-sd .sd-pal i { width: 8px; height: 8px; border-radius: 2px; }
#as-sd .sd-pal.new { border-color: var(--cy); box-shadow: 0 0 0 1px rgba(62, 224, 208, 0.25); }
#as-sd .sd-drag-ghost { position: fixed; z-index: 80; transform: translate(-50%, -50%); pointer-events: none; padding: 10px 14px; border-radius: 10px; border: 1.5px dashed var(--tx2); background: rgba(21, 26, 36, 0.92); font-weight: 600; }
#as-sd .sd-drag-ghost.ok { border-color: var(--cy); color: var(--cy); }
#as-sd .sd-tip { font-size: 12px; color: var(--tx2); line-height: 1.5; padding: 8px 2px; }
#as-sd .sd-tip b { color: var(--cy); }
#as-sd .sd-grp .sd-x { float: right; font-size: 16px; line-height: 1; color: var(--tx2); padding: 0 4px; }
#as-sd .sd-small-btn { padding: 6px 10px; font-size: 12px; margin-top: 6px; }
#as-sd .sd-link { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--tx2); margin-top: 6px; }
#as-sd .sd-link select { background: var(--pn2); color: var(--tx); border: 1px solid var(--ln); border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 12.5px; }
#as-sd .sd-check { font-size: 12px; line-height: 1.45; padding: 6px 8px; border-radius: 8px; background: var(--pn2); border-left: 3px solid var(--ln); }
#as-sd .sd-check.ok { border-left-color: var(--ok); color: var(--ok); }
#as-sd .sd-check.warn { border-left-color: var(--warn); }
#as-sd .sd-check.block { border-left-color: var(--bad); }
#as-sd .sd-app.running .sd-design .sd-pal, #as-sd .sd-app.running .sd-design .sd-small-btn, #as-sd .sd-app.running .sd-design select { pointer-events: none; opacity: 0.6; }

/* Right column */
#as-sd .sd-side { display: grid; grid-template-rows: 1fr 1fr 1.4fr; gap: 12px; min-height: 0; }
#as-sd .sd-side .sd-panel { padding: 12px 14px; display: flex; flex-direction: column; }
#as-sd .sd-side canvas { flex: 1; width: 100%; min-height: 0; }
#as-sd .sd-feed { list-style: none; overflow: hidden; font: 12px/1.45 var(--mono); }
#as-sd .sd-feed li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--ln); color: var(--tx2); }
#as-sd .sd-feed li b { font-weight: 600; color: var(--tx); }
#as-sd .sd-feed .lvl-bad b { color: var(--bad); } #as-sd .sd-feed .lvl-ok b { color: var(--ok); } #as-sd .sd-feed .lvl-hint b { color: var(--warn); } #as-sd .sd-feed .lvl-info b { color: var(--cy); }

/* Footer */
#as-sd .sd-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: var(--tx2); }
#as-sd .sd-reqs { display: flex; gap: 8px; flex-wrap: wrap; }
#as-sd .sd-req { border: 1px solid var(--ln); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--tx); }
#as-sd .sd-slider { display: flex; align-items: center; gap: 10px; color: var(--tx); }
#as-sd .sd-slider input { width: 260px; accent-color: var(--cy); }
#as-sd .sd-slider b { min-width: 90px; }

/* Overlays, report card, coach, banner, popover */
#as-sd .sd-overlay { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(5, 7, 10, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; overflow: auto; }
#as-sd .sd-overlay.on { display: grid; }
#as-sd .sd-card { width: min(600px, 94vw); background: var(--pn); border: 1px solid var(--ln); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: sd-in 0.25s var(--ease); position: relative; }
#as-sd .sd-card h2 { font-size: 24px; margin: 6px 0 10px; }
#as-sd .sd-card h3 { font-size: 14px; margin: 16px 0 6px; }
#as-sd .sd-card p { color: #c5cbda; font-size: 14px; line-height: 1.55; }
#as-sd .sd-card.boss .sd-eyebrow { color: var(--bad); }
#as-sd .sd-concept { display: grid; gap: 8px; margin: 12px 0; }
#as-sd .sd-concept p { background: var(--pn2); border: 1px solid var(--ln); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
#as-sd .sd-concept b { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cy); margin-bottom: 3px; }
#as-sd .sd-task { color: var(--tx) !important; font-weight: 500; }
#as-sd .sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
#as-sd .sd-chip { font: 600 12px var(--sys); border-radius: 999px; padding: 5px 10px; background: rgba(62, 224, 208, 0.12); color: var(--cy); }
#as-sd .sd-card .sd-reqs { margin: 8px 0 4px; }
#as-sd .sd-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
#as-sd .sd-scripted { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--bad); background: rgba(255, 92, 122, 0.08); border-radius: 4px; color: #ffd4dc !important; }
#as-sd .sd-report { position: absolute; right: 16px; top: 40px; width: min(420px, 92%); z-index: 5; display: none; max-height: calc(100% - 56px); overflow: auto; }
#as-sd .sd-report.on { display: block; }
#as-sd .sd-report .sd-card { width: 100%; padding: 18px; }
#as-sd .sd-report.pass .sd-eyebrow { color: var(--ok); }
#as-sd .sd-report.fail .sd-eyebrow { color: var(--bad); }
#as-sd .sd-checks { list-style: none; margin: 10px 0; }
#as-sd .sd-checks li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--ln); }
#as-sd .sd-checks small { color: var(--tx2); }
#as-sd .sd-checks li span:last-child { font-family: var(--mono); }
#as-sd .sd-checks .ok span:last-child { color: var(--ok); }
#as-sd .sd-checks .no span:last-child { color: var(--bad); }
#as-sd .sd-review { margin: 12px 0; overflow-x: auto; }
#as-sd .sd-review table { width: 100%; border-collapse: collapse; font-size: 13px; }
#as-sd .sd-review th, #as-sd .sd-review td { padding: 8px 6px; border-bottom: 1px dashed var(--ln); text-align: left; vertical-align: top; }
#as-sd .sd-review td { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
#as-sd .sd-review tbody th small { display: block; font-weight: 400; color: var(--tx2); margin-top: 2px; }
#as-sd .sd-review tr.you th { color: var(--ok); }
#as-sd .sd-tips { margin-top: 10px; display: grid; gap: 6px; }
#as-sd .sd-tips p { font-size: 13px; background: rgba(255, 181, 71, 0.08); border-left: 3px solid var(--warn); padding: 7px 10px; border-radius: 4px; }
#as-sd .sd-tips p.lesson { background: rgba(61, 220, 151, 0.08); border-color: var(--ok); }
#as-sd .sd-what { margin-top: 10px; font-size: 12.5px; }
#as-sd .sd-what summary { cursor: pointer; color: var(--cy); }
#as-sd .sd-what ol { margin: 6px 0 0 18px; color: #c5cbda; line-height: 1.6; font: 12px/1.6 var(--mono); }
/* Docked along the bottom of the map: the topology sits mid-height, so the diagram stays visible. */
#as-sd .sd-coach { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; background: rgba(17, 20, 27, 0.96); border: 1px solid var(--cy); border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); animation: sd-in 0.25s var(--ease); max-height: 44%; overflow: auto; }
#as-sd .sd-coach h2 { font-size: 19px; margin: 6px 0 8px; }
#as-sd .sd-coach p { color: #c5cbda; line-height: 1.5; margin-bottom: 8px; }
#as-sd .sd-coach .sd-rest { font-size: 12.5px; }
#as-sd .sd-coach .sd-acts { margin-top: 10px; justify-content: flex-start; }
#as-sd .sd-done { color: var(--ok) !important; font-weight: 600; }
#as-sd .sd-q { color: var(--tx) !important; font-weight: 600; margin: 8px 0; }
#as-sd .sd-options { display: grid; gap: 8px; margin-bottom: 8px; }
#as-sd .sd-options .sd-btn { text-align: left; }
#as-sd .sd-banner { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 6; display: none; padding: 9px 16px; border-radius: 9px; background: #3a0f18; border: 1px solid var(--bad); color: #ffd4dc; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: sd-pulse 1.2s 2; }
#as-sd .sd-banner.on { display: block; }
#as-sd .sd-clickable { cursor: pointer; }
#as-sd .sd-pop { position: fixed; z-index: 50; width: 320px; display: none; padding: 14px; background: #161a23; border: 1px solid var(--ln); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); font-size: 13px; }
#as-sd .sd-pop.on { display: block; animation: sd-in 0.15s var(--ease); }
#as-sd .sd-pop b { display: block; margin-bottom: 6px; }
#as-sd .sd-pop ul { list-style: none; margin: 6px 0; }
#as-sd .sd-pop li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--ln); font-variant-numeric: tabular-nums; }
#as-sd .sd-pop li.top { color: var(--warn); font-weight: 600; }
#as-sd .sd-pop p { color: #c5cbda; line-height: 1.5; margin-top: 6px; }
#as-sd .sd-pop p.bad { color: var(--bad); }
#as-sd .sd-modal { max-height: 86vh; overflow: auto; }
#as-sd .sd-x { position: absolute; top: 12px; right: 14px; font-size: 22px; color: var(--tx2); }
#as-sd .sd-howto { margin-left: 18px; display: grid; gap: 10px; }
#as-sd .sd-howto b { display: block; margin-bottom: 2px; }
#as-sd .sd-gloss { list-style: none; display: grid; gap: 8px; }
#as-sd .sd-gloss li { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--ln); }
#as-sd .sd-gloss span { color: #c5cbda; }

/* Smaller screens: stack everything and scroll */
@media (max-width: 1099px), (max-height: 679px) {
  #as-sd .sd-play { height: auto; grid-template: auto / 1fr; }
  #as-sd .sd-tiles { grid-template-columns: repeat(2, 1fr); }
  #as-sd .sd-brief { grid-column: 1 / -1; }
  #as-sd .sd-map { min-height: 460px; }
  #as-sd .sd-side { grid-template-rows: 160px 160px 220px; }
  #as-sd .sd-foot { flex-wrap: wrap; padding-bottom: 12px; }
  #as-sd .sd-meter { grid-template-columns: 1fr; }
  #as-sd .sd-coach { position: static; width: auto; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #as-sd *, #as-sd *::before, #as-sd *::after { animation: none !important; transition: none !important; }
}