/* Laiteopas – sama värimaailma ja fontit kuin pelissä. Asettelu: lukupalsta + pikatiedot sivussa. */
:root {
  --paper: #f4f7fa; --panel: #ffffff; --grid: #e3e9f0; --line: #c4cfdb; --ink: #18222f; --muted: #586679;
  --live: #a8521f; --live-soft: #f6e6db;
  --main: #a8521f; --coil: #2766c9; --aux: #1f7d45; --sig: #7a4cc2; --strip: #e6ecf2;
  --start: #2c8a4d; --stop: #c9302c; --yellow: #f0c419; --white: #f4f4f4; --blue: #2766c9;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --shadow: 0 1px 2px rgba(24,34,47,.06), 0 8px 24px rgba(24,34,47,.06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0f151d; --panel: #161f2a; --grid: #1f2a37; --line: #2b3948; --ink: #dce5ef; --muted: #8d9cb0;
  --live: #e08447; --live-soft: #3a2616; --main: #e08447; --coil: #5e9cff; --aux: #4fc47f; --sig: #b48cff; --strip: #1f2a37;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0f151d; --panel: #161f2a; --grid: #1f2a37; --line: #2b3948; --ink: #dce5ef; --muted: #8d9cb0;
  --live: #e08447; --live-soft: #3a2616; --main: #e08447; --coil: #5e9cff; --aux: #4fc47f; --sig: #b48cff; --strip: #1f2a37;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--f-body); }
a { color: var(--live); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

/* Yläpalkki */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand b { font: 700 24px/1 var(--f-display); letter-spacing: .02em; }
.brand span { font: 600 14px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.bar .play { margin-left: auto; font: 600 16px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: #fff; background: var(--live); padding: 10px 16px; border-radius: 8px; }
.bar .play:hover { filter: brightness(1.08); }

/* Etusivu */
.hero { padding-block: 48px 24px; }
.eyebrow { font: 600 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--live); margin: 0 0 12px; }
h1 { font: 700 clamp(36px, 6vw, 56px)/1.02 var(--f-display); letter-spacing: .01em; margin: 0 0 14px; text-wrap: balance; }
.lede { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0; }
.group { padding-block: 28px 8px; }
.group h2 { font: 700 26px/1.1 var(--f-display); margin: 0 0 4px; }
.group > p { color: var(--muted); margin: 0 0 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--live); }
.card .pic { background: var(--grid); display: flex; align-items: center; justify-content: center; height: 170px; padding: 12px; }
.card .pic svg { height: 100%; width: auto; max-width: 100%; }
.card .txt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.card b { font: 700 21px/1.15 var(--f-display); }
.card small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.code { display: inline-block; font: 500 12px/1 var(--f-mono); color: var(--live); background: var(--live-soft); padding: 4px 7px; border-radius: 5px; align-self: flex-start; }

/* Laitesivu */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 22px; }
.crumbs a { color: var(--muted); }
.dhead { padding-block: 10px 8px; }
.dhead h1 { margin-bottom: 10px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 40px; }
@media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; } .aside { position: sticky; top: 84px; align-self: start; } }
.content { max-width: 720px; min-width: 0; }
.content h2 { font: 700 26px/1.15 var(--f-display); margin: 34px 0 8px; }
.content p, .content li { max-width: 68ch; }
.content li { margin: 5px 0; }
.content ol, .content ul { padding-left: 22px; }
.content b { font-weight: 600; }
.aside .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.aside h3 { font: 600 14px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.aside dl { margin: 0; display: grid; gap: 10px; }
.aside dt { font-size: 13px; color: var(--muted); }
.aside dd { margin: 0; font: 500 14px/1.4 var(--f-mono); }
.aside .try { margin-top: 18px; }
.aside .try a { display: block; padding: 8px 10px; border-radius: 8px; background: var(--live-soft); margin-top: 6px; text-decoration: none; font-weight: 600; font-size: 15px; }
.aside .try a:hover { text-decoration: underline; }
.sources { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.content .sources h2 { font: 600 14px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.sources ol { padding-left: 20px; } .sources a { color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.pager a { flex: 1 1 200px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: var(--panel); }
.pager a small { display: block; color: var(--muted); font-size: 13px; } .pager a b { font: 700 19px/1.2 var(--f-display); color: var(--ink); }
.pager a.next { text-align: right; }
footer { border-top: 1px solid var(--line); padding-block: 20px 28px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }

/* Kuvat */
figure.kuva { margin: 18px 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px 14px; }
figure.kuva .pari { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 28px; }
figure.kuva svg { flex: 1 1 220px; display: block; height: auto; }
figure.kuva .laite { max-width: 250px; } figure.kuva .merkki { max-width: 310px; } figure.kuva .wide { max-width: 420px; } figure.kuva .pieni { max-width: 190px; }
figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 10px; }
.k line, .k rect, .k circle, .k path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k .body { fill: var(--panel); } .k .strip { fill: var(--strip); stroke: none; } .k .plate { fill: var(--paper); stroke-width: 1.5; }
.k .case { fill: color-mix(in srgb, var(--coil) 8%, var(--panel)); }
.k .ind { fill: var(--muted); stroke: none; } .k .screw { fill: var(--paper); } .k .slot { stroke-width: 1.5; }
.k .needle { stroke: var(--live); stroke-width: 2.5; } .k .handle { fill: var(--ink); stroke: none; } .k .handle.red { fill: var(--stop); }
.k .fin { stroke: var(--line); stroke-width: 1.5; } .k .arm { stroke-width: 4; }
.k .bridge { fill: color-mix(in srgb, var(--live) 30%, transparent); stroke: var(--live); }
.k .led { fill: var(--aux); stroke: none; } .k .ledoff { fill: var(--line); stroke: none; }
.k .lcd { fill: var(--ink); stroke: none; } .k .lcdt { fill: var(--paper); font: 500 15px var(--f-mono); }
.k .btn.start { fill: var(--start); stroke: none; } .k .btn.stop { fill: var(--stop); stroke: none; } .k .btnt { fill: #fff; font: 700 22px var(--f-display); }
.k .yellow { fill: var(--yellow); stroke: none; } .k .arrowc { stroke: #fff; stroke-width: 2.5; }
.k .lamp { stroke: var(--ink); stroke-width: 1.5; } .k .lamp.green { fill: var(--start); } .k .lamp.yellow { fill: var(--yellow); stroke: var(--ink); } .k .lamp.red { fill: var(--stop); } .k .lamp.white { fill: var(--white); } .k .lamp.blue { fill: var(--blue); }
.k .dash { stroke-dasharray: 3 3; stroke-width: 1.5; } .k .fillg { fill: none; stroke-width: 1.5; } .k .fillg.solid { fill: var(--coil); }
.k .po { stroke-width: 1.5; } .k .lead { stroke: var(--muted); stroke-width: 1.5; }
.k .g-main, .k .g-main line, .k .g-main rect, .k .g-main path, .k .g-main circle { stroke: var(--main); }
.k .g-coil, .k .g-coil line, .k .g-coil rect, .k .g-coil path { stroke: var(--coil); }
.k .g-aux, .k .g-aux line, .k .g-aux path, .k .g-aux circle { stroke: var(--aux); }
.k .g-sig, .k .g-sig line, .k .g-sig path { stroke: var(--sig); }
.k .w-bn line { stroke: #8a5a2b; stroke-width: 3; } .k .w-bu line { stroke: #2f6fd6; stroke-width: 3; } .k .w-bk line { stroke: var(--ink); stroke-width: 3; }
.k text { fill: var(--ink); stroke: none; font: 600 14px var(--f-body); }
.k .tl { font: 600 11px var(--f-mono); } .k .t-main { fill: var(--main); } .k .t-coil { fill: var(--coil); } .k .t-aux { fill: var(--aux); } .k .t-sig { fill: var(--sig); }
.k .pin { fill: var(--muted); font: 500 11px var(--f-mono); } .k .cs { fill: var(--muted); font: 500 12px var(--f-body); }
.k .plt { font: 700 16px var(--f-display); } .k .lg { font: 500 13px var(--f-body); }
.k .hd { fill: var(--muted); font: 600 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
/* Ulkoasu C (Roope 2026-10-11): tumma kytkentäpöytä, pelin pisteruudukko taustalla */
body { background: var(--paper) radial-gradient(circle, var(--grid) 1.2px, transparent 1.4px) 0 0 / 22px 22px; }
.dhead2 { display: flex; gap: 18px; align-items: center; margin: 6px 0 22px; }
.dhead2 h1 { margin: 0 0 6px; }
.tag { flex: none; min-width: 72px; height: 72px; padding: 0 10px; border-radius: 14px; border: 2px solid var(--live); color: var(--live); display: grid; place-items: center; font: 700 34px/1 var(--f-mono); }
.board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.board figure.kuva { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 24px; }
.term { border-left: 1px solid var(--line); padding: 18px 20px; background: color-mix(in srgb, var(--paper) 60%, var(--panel)); }
.term h3 { font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; }
.term h3.t2 { margin-top: 22px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.row span { color: var(--muted); } .row code { font: 500 13px var(--f-mono); color: var(--live); text-align: right; }
.term a { display: block; color: var(--ink); text-decoration: none; font: 600 16px/1.2 var(--f-display); padding: 9px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; }
.term a:hover { border-color: var(--live); color: var(--live); }
.cols2 { max-width: none; columns: 2 380px; column-gap: 48px; margin-top: 28px; }
.cols2 h2 { break-after: avoid; margin-top: 22px; } .cols2 > p:first-child { font-size: 19px; margin-top: 0; }
.cols2 li, .cols2 p { break-inside: avoid; }
.cols2 .sources { break-inside: avoid; }
.dpage { padding-bottom: 44px; }
.idx .grp { margin-top: 30px; } .idx .grp h2 { font: 700 24px/1 var(--f-display); margin: 0 0 12px; display: flex; gap: 12px; align-items: baseline; }
.idx .grp h2 span { font: 500 14px var(--f-mono); color: var(--live); }
.list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); display: grid; grid-template-columns: 1fr 1fr; }
.r { display: flex; gap: 14px; align-items: center; padding: 12px 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.r:nth-child(odd) { border-right: 1px solid var(--line); } .r:hover { background: var(--live-soft); }
.tg { flex: none; width: 40px; height: 40px; border: 1.5px solid var(--live); color: var(--live); border-radius: 8px; display: grid; place-items: center; font: 700 15px var(--f-mono); }
.r .pic { flex: none; width: 64px; height: 64px; } .r .pic svg { width: 64px; height: 64px; }
.tx { flex: 1; min-width: 0; } .tx b { display: block; font: 700 19px/1.1 var(--f-display); } .tx small { color: var(--muted); font-size: 13.5px; line-height: 1.4; display: block; margin-top: 3px; }
.go { color: var(--live); font-size: 20px; }
@media (max-width: 860px) { .board { grid-template-columns: 1fr; } .term { border-left: 0; border-top: 1px solid var(--line); } .list { grid-template-columns: 1fr; } .r:nth-child(odd) { border-right: 0; } }
@media (max-width: 560px) { .tag { min-width: 52px; height: 52px; font-size: 24px; border-radius: 10px; } .r .pic { display: none; } .board figure.kuva { padding: 16px 10px; } }
/* Välilehdet ja kytkentäsivut */
.tabs { display: flex; gap: 4px; margin: 22px 0 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { padding: 10px 16px; text-decoration: none; color: var(--muted); font: 600 17px/1 var(--f-display); letter-spacing: .03em; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--live); border-color: var(--live); }
.tabs a small { font: 500 12px var(--f-mono); color: var(--muted); margin-left: 6px; }
.k .on line, .k .on path, .k .on rect, .k .on circle { stroke: var(--live); stroke-width: 3.5; }
.k .off line, .k .off path, .k .off rect, .k .off circle { stroke: var(--line); }
.k .on .dash, .k .off .dash { stroke-width: 1.5; }
.k .nm { fill: var(--ink); font: 700 14px var(--f-mono); } .k .dot { fill: var(--ink); stroke: none; } .k .dot.lit { fill: var(--live); }
.k rect.solid { fill: currentColor; } .k .off rect.solid { fill: var(--line); } .k .on rect.solid { fill: var(--live); }
.vaiheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0 6px; }
.vaihe { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 14px; }
.vaihe svg { width: 100%; height: auto; display: block; }
.vaihe b { display: flex; gap: 8px; align-items: center; font: 700 18px/1.15 var(--f-display); margin-top: 6px; }
.vaihe b span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--live-soft); color: var(--live); display: grid; place-items: center; font: 700 14px var(--f-mono); }
.vaihe p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.full h2 { font: 700 26px/1.15 var(--f-display); margin: 34px 0 4px; }
.term a .tg { width: 28px; height: 28px; font-size: 12px; display: inline-grid; margin-right: 8px; vertical-align: middle; }
.term a.dev { display: flex; align-items: center; }
.idx { padding-bottom: 44px; }
.sanasto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sana { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; scroll-margin-top: 80px; }
.sana dt { font: 700 20px/1.15 var(--f-display); } .sana dd { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; } .sana dd a { font-size: 14px; }
@media (max-width: 980px) { .vaiheet { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .sanasto { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vaiheet { gap: 8px; } .vaihe { padding: 8px 8px 10px; } .vaihe b { font-size: 16px; } .vaihe p { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }