/* ==========================================================================
   Tekniikkakirjasto (11/2026): vyökoevaatimukset ja tekniikkavideot vyöasteittain.
   Käyttää styles/otava.css:n tokeneita (.ot-page). Luokat alkavat tk-.
   ========================================================================== */

.tk-head { padding-block: clamp(110px, 12vw, 140px) 24px; display: flex; flex-direction: column; gap: 18px; }
.tk-head h1 { margin: 0; font: 900 clamp(34px, 4.6vw, 60px)/1 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.tk-head h1 span { color: var(--ot-red); }

/* Ryhmävalitsin: Aikuiset / Junnut */
.tk-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; max-width: 560px; }
.tk-progs button { min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 10px 16px; border-radius: 4px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink); text-align: left; cursor: pointer; transition: transform 0.2s; }
/* styles.css värittää kaikki b- ja strong-elementit !important-säännöllä, joten väri pitää ohittaa samoin */
.tk-progs button b { display: block; font: 900 18px/1 Roboto, sans-serif; text-transform: uppercase; color: inherit !important; }
.tk-progs button span { font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-3); }
.tk-progs button[aria-pressed="true"] { background: var(--ot-ink); border-color: var(--ot-ink); color: var(--ot-bg); }
.tk-progs button[aria-pressed="true"] span { color: color-mix(in srgb, var(--ot-bg) 75%, var(--ot-ink)); }
.tk-progs button:active { transform: scale(0.98); }

/* Vyövalitsin: matot, reunanauha vyön värillä (aikuisilla 5, junnuilla 5 + temppukortti) */
.tk-belts { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tk-belt { position: relative; overflow: hidden; width: 100%; min-height: 96px; border: 0; border-radius: 4px; cursor: pointer; text-align: left; padding: 14px 14px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; color: var(--ot-ink); background: var(--ot-mat); box-shadow: inset 0 6px 0 var(--bc), inset 0 -6px 0 var(--bc); font-family: Roboto, sans-serif; transition: transform 0.2s; }
.tk-belt::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ot-ink) 7%, transparent); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.tk-belt:hover::after { opacity: 1; }
.tk-belt:active { transform: scale(0.98); }
.tk-belt[aria-selected="true"] { background: var(--ot-mat-sel); box-shadow: inset 0 6px 0 var(--bc), inset 0 -6px 0 var(--bc), 0 0 0 2px var(--ot-ink); }
.tk-belt b { font: 900 clamp(18px, 5vw, 22px)/1.05 Roboto, sans-serif; }
.tk-belt span { font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-3); }
.tk-belt .tk-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ot-ink) 12%, transparent); overflow: hidden; }
.tk-belt .tk-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--bc); }
/* Vyökuvat (data: img). Kuvakortti on tumma myös vaaleassa teemassa, joten tekstin värit ovat kiinteät
   ja liukuväri pitää tekstin taustan tummana (AA). Vyön väri näkyy alareunan raidassa. */
.tk-belt.has-img { min-height: 160px; justify-content: flex-end; color: #f1f3f5; background: linear-gradient(180deg, rgba(13, 13, 14, 0) 28%, rgba(13, 13, 14, 0.88) 70%, rgba(13, 13, 14, 0.95) 100%), var(--img) 50% 28% / cover no-repeat, #0d0d0e; box-shadow: inset 0 -5px 0 var(--bc); }
.tk-belt.has-img[aria-selected="true"] { background-color: #0d0d0e; box-shadow: inset 0 -5px 0 var(--bc), 0 0 0 2px var(--ot-ink); }
.tk-belt.has-img > * { position: relative; z-index: 1; }
.tk-belt.has-img b { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.tk-belt.has-img span { color: #c9cfd6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.tk-belt.has-img .tk-bar { background: rgba(255, 255, 255, 0.2); }
/* Junnujen kuvissa ei ole raitoja valmiina: Waza-appin punaisen raitakolmion yläosa CSS:llä yläreunaan,
   jottei se peitä kasvoja */
.tk-belt.has-stripes::before { content: ""; position: absolute; top: 10px; left: 50%; width: 58%; height: 25px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, #ff0915 0 5px, transparent 5px 10px); clip-path: polygon(0 0, 100% 0, 64% 100%, 36% 100%); pointer-events: none; }

/* Työkalurivi */
.tk-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 0; margin-top: 22px; border-bottom: 1px solid var(--ot-line); }
.tk-search { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-search label { font: 500 11px/1 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-4); }
.tk-search input { min-height: 48px; width: 100%; border-radius: 8px; border: 1px solid var(--ot-line); background: var(--ot-card); color: var(--ot-ink); font: 400 16px Roboto, sans-serif; padding: 0 14px; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-filters button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink-2); font: 700 13px/1 Roboto, sans-serif; cursor: pointer; transition: transform 0.2s; }
.tk-filters button[aria-pressed="true"] { background: var(--ot-ink); color: var(--ot-bg); border-color: var(--ot-ink); }
.tk-filters button:active { transform: scale(0.97); }

/* Valitun vyön yhteenveto */
.tk-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; padding: 26px 0 10px; }
.tk-summary h2 { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1.05 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.tk-summary h2 small { display: block; font: 500 12px/1.4 var(--ot-mono); letter-spacing: 0.14em; color: var(--ot-ink-3); margin-bottom: 6px; }
.tk-meter { flex: 1 1 280px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; font: 500 13px/1 var(--ot-mono); color: var(--ot-ink-3); font-variant-numeric: tabular-nums; }
.tk-meter .tk-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ot-ink) 10%, transparent); overflow: hidden; }
.tk-meter .tk-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--bc, var(--ot-red)); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tk-pdf { font: 500 13px/1 var(--ot-mono); color: var(--ot-red-text) !important; text-decoration: none; padding: 12px 0; display: inline-block; }

/* Tekniikkalista */
.tk-section { margin-top: 30px; }
.tk-section > h3 { margin: 0 0 6px; font: 900 15px/1.2 var(--ot-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ot-ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--ot-line); }
.tk-notes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-notes li { position: relative; padding-left: 16px; font: 400 15px/1.5 Roboto, sans-serif; color: var(--ot-ink-3); }
.tk-notes li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 2px; background: var(--bc, var(--ot-red)); }
.tk-group > .tk-notes { margin: 0 0 8px; }
.tk-req { padding: 18px 20px; border-radius: 4px; border: 1px dashed var(--ot-line); }
.tk-req > h3 { border-bottom: 0; padding-bottom: 0; }
.tk-group { margin-top: 18px; padding: 18px 20px; border-radius: 4px; background: var(--ot-card); border: 1px solid var(--ot-line); box-shadow: inset 4px 0 0 var(--bc, var(--ot-red)); }
.tk-group > h4 { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 900 18px/1.2 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.tk-group > h4 em { font: 500 13px/1 var(--ot-mono); font-style: normal; text-transform: none; color: var(--ot-ink-3); }
.tk-group > h4 i { font-style: normal; font: 700 13px/1 var(--ot-mono); color: var(--ot-ink-3); }
.tk-code { font: 700 12px/1 var(--ot-mono); color: var(--ot-ink-3) !important; font-variant-numeric: tabular-nums; margin-right: 2px; }
.tk-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tk-item { border-top: 1px solid var(--ot-line); }
.tk-item:first-child { border-top: 0; }
.tk-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; }
.tk-row label { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.tk-row input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--bc, var(--ot-red)); }
.tk-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 500 16px/1.4 Roboto, sans-serif; color: var(--ot-ink); overflow-wrap: anywhere; }
.tk-name small { font: 400 13px/1.4 var(--ot-mono); color: var(--ot-ink-3); }
.tk-item.is-done .tk-name > span:first-child { color: var(--ot-ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bc, var(--ot-red)) 70%, transparent); }
.tk-play { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink); font: 700 13px/1 Roboto, sans-serif; cursor: pointer; }
.tk-play svg { color: var(--ot-red); }
.tk-play[aria-expanded="true"] { background: var(--ot-red); color: #fff; border-color: var(--ot-red); }
.tk-play[aria-expanded="true"] svg { color: #fff; }
.tk-video { margin: 4px 0 14px; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.tk-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Kuvausohje: tekniikat ilman videota */
.tk-film { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--ot-ink) 35%, transparent); background: transparent; color: var(--ot-ink-2); font: 700 13px/1 Roboto, sans-serif; cursor: pointer; }
.tk-film svg { color: var(--ot-ink-3); }
.tk-film span, .tk-play span { color: inherit; display: inline; }
.tk-film[aria-expanded="true"] { background: var(--ot-ink); color: var(--ot-bg); border-style: solid; border-color: var(--ot-ink); }
.tk-film[aria-expanded="true"] svg { color: var(--ot-bg); }
.tk-filmbox { margin: 4px 0 14px; padding: 14px 16px; border-radius: 8px; border: 1px dashed var(--ot-line); background: var(--ot-bg); }
.tk-filmlabel { margin: 0 0 6px; font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-3); }
.tk-script { margin: 0 0 10px; font: 700 17px/1.45 Roboto, sans-serif; color: var(--ot-ink); overflow-wrap: anywhere; }
.tk-filmactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.tk-copy { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink); font: 700 13px/1 Roboto, sans-serif; cursor: pointer; }
.tk-copy:active, .tk-film:active, .tk-play:active { transform: scale(0.97); }
.tk-guidelink { display: inline-block; padding: 14px 0; font: 500 13px/1 var(--ot-mono); color: var(--ot-red-text) !important; }
.tk-then { margin: -4px 0 10px; font: 400 15px/1.5 Roboto, sans-serif; color: var(--ot-ink-2); }
.tk-send { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--ot-line); font: 700 15px/1.5 Roboto, sans-serif; color: var(--ot-ink); }

.tk-guide { margin-top: 22px; border: 1px solid var(--ot-line); border-radius: 8px; background: var(--ot-card); box-shadow: inset 4px 0 0 var(--ot-red); }
.tk-guide > summary { min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; cursor: pointer; list-style: none; font: 700 16px/1.3 Roboto, sans-serif; color: var(--ot-ink); }
.tk-guide > summary::-webkit-details-marker { display: none; }
.tk-guide > summary span { font: 500 11px/1 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-red-text); padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; }
.tk-guide > summary::after { content: "+"; margin-left: auto; font: 400 26px/1 Roboto, sans-serif; color: var(--ot-ink-3); }
.tk-guide[open] > summary::after { content: "\2212"; }
.tk-guide-body { padding: 0 20px 22px; }
.tk-guide-body p { margin: 0 0 14px; max-width: 70ch; font: 400 16px/1.6 Roboto, sans-serif; color: var(--ot-ink-2); }
.tk-guide-body ol { margin: 0; padding-left: 22px; max-width: 75ch; display: flex; flex-direction: column; gap: 10px; font: 400 16px/1.55 Roboto, sans-serif; color: var(--ot-ink-2); }
.tk-guide-body strong { color: var(--ot-ink); }
.tk-guide-body q { color: var(--ot-ink); font-weight: 700; }

.tk-empty { margin: 30px 0; padding: 26px; border-radius: 8px; border: 1px dashed var(--ot-line); font: 400 16px/1.6 Roboto, sans-serif; color: var(--ot-ink-3); text-align: center; }
.tk-foot { margin: 40px 0 80px; font: 400 14px/1.6 Roboto, sans-serif; color: var(--ot-ink-4); }

@media (max-width: 760px) {
  .tk-belts { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 3px 3px 8px; margin-inline: -3px; scroll-padding-inline: 3px; }
  .tk-belts > li { flex: 0 0 44%; scroll-snap-align: start; }
  .tk-belt.has-img { min-height: 184px; }
  .tk-progs { max-width: none; }
  .tk-group { padding: 14px 14px; }
  /* Kapealla näytöllä napeissa vain kuvake; teksti jää ruudunlukijalle */
  .tk-play span, .tk-film span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tk-play, .tk-film { position: relative; padding: 0 14px; min-width: 44px; justify-content: center; }
  .tk-guide > summary { padding: 12px 16px; }
  .tk-guide-body { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-belt, .tk-meter .tk-bar i, .tk-filters button, .tk-progs button { transition: none !important; }
}

/* ==========================================================================
   Näkymät ja Treenaa sanastoa -peli (js/sanastopeli.js). Pelin luokat alkavat sq-.
   ========================================================================== */
.tk-views { display: flex; gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--ot-line); }
.tk-views button { position: relative; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 0; background: transparent; color: var(--ot-ink-3); font: 900 15px/1.15 Roboto, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tk-views button:hover, .tk-views button[aria-selected="true"] { color: var(--ot-ink); }
.tk-views button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ot-red); }
.tk-views button[aria-selected="true"] svg { color: var(--ot-red-text); }
.tk-views svg { flex: 0 0 auto; }

/* Oikein- ja väärin-värit: teksti täyttää AA:n kortin ja sivun taustaa vasten molemmissa teemoissa */
.sq { --sq-ok: #3ddc84; --sq-ok-ink: #04210f; --sq-bad: #ff4650; --sq-bad-ink: #0b0f15; padding: 28px 0 110px; }
:root[data-theme="light"] .sq { --sq-ok: #0b6b39; --sq-ok-ink: #fff; --sq-bad: #c8000c; --sq-bad-ink: #fff; }
.sq-title { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1.05 Roboto, sans-serif; text-transform: uppercase; color: var(--ot-ink); }
.sq-title span { color: var(--ot-red); }
/* styles.css antaa p-elementeille !important-värin, joten se ohitetaan samoin */
.sq-lead { margin: 12px 0 0; max-width: 62ch; font: 400 16px/1.6 Roboto, sans-serif; color: var(--ot-ink-2) !important; }
.sq:not([data-state="setup"]) .sq-lead { display: none; }
.sq-body { margin-top: 22px; max-width: 760px; }

/* Asetukset: radionapit näkyvät painikkeina, fokus näkyy painikkeessa */
.sq-setup { display: flex; flex-direction: column; gap: 20px; }
.sq-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.sq-field legend { padding: 0; margin: 0 0 8px; font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-3); }
.sq-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.sq-belts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sq-pick { position: relative; display: block; min-width: 0; }
.sq-pick input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sq-pick > span { height: 100%; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink); transition: transform 0.2s; }
.sq-pick b { font: 700 15px/1.25 Roboto, sans-serif; color: inherit !important; overflow-wrap: anywhere; }
.sq-pick small { font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-3); }
.sq-pick input:checked + span { background: var(--ot-ink); border-color: var(--ot-ink); color: var(--ot-bg); }
.sq-pick input:checked + span small { color: color-mix(in srgb, var(--ot-bg) 75%, var(--ot-ink)); }
.sq-pick input:focus-visible + span { outline: 3px solid var(--ot-ink); outline-offset: 3px; }
.sq-pick:active > span { transform: scale(0.98); }
.sq-belts .sq-pick > span { min-height: 68px; padding: 12px; border: 0; background: var(--ot-mat); box-shadow: inset 0 5px 0 var(--bc), inset 0 -5px 0 var(--bc); }
.sq-belts .sq-pick b { font-size: 18px; }
.sq-belts .sq-pick input:checked + span { background: var(--ot-mat-sel); color: var(--ot-ink); box-shadow: inset 0 5px 0 var(--bc), inset 0 -5px 0 var(--bc), 0 0 0 2px var(--ot-ink); }
.sq-belts .sq-pick input:checked + span small { color: var(--ot-ink-3); }
.sq-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sq-meta { font: 500 13px/1.5 var(--ot-mono); color: var(--ot-ink-3); font-variant-numeric: tabular-nums; }
.sq .ot-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Kysymys */
.sq-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-ink-3); font-variant-numeric: tabular-nums; }
.sq-hud > span { color: var(--ot-ink-3); }
.sq-hud b { margin-left: 4px; font: 700 15px/1 var(--ot-mono); color: var(--ot-ink) !important; }
.sq-quit { margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ot-line); background: transparent; color: var(--ot-ink-2); font: 700 13px/1 Roboto, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.sq-quit:hover { color: var(--ot-ink); border-color: var(--ot-ink-3); }
.sq-track { margin-top: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ot-ink) 10%, transparent); overflow: hidden; }
.sq-track i { display: block; height: 100%; width: var(--p, 0%); background: var(--bc, var(--ot-red)); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.sq-card { position: relative; margin-top: 16px; padding: 24px 20px 20px; border-radius: 4px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 0 6px 0 var(--bc, var(--ot-red)); display: flex; flex-direction: column; gap: 10px; }
.sq-count { position: absolute; top: 22px; right: 20px; font: 700 13px/1.3 var(--ot-mono); color: var(--ot-ink-3); font-variant-numeric: tabular-nums; }
.sq-q { margin: 0; display: flex; flex-direction: column; gap: 8px; text-transform: none; }
.sq-ask { padding-right: 64px; font: 500 11px/1.3 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-3); }
/* Japanilaiset termit kirjoitetaan pienillä kuten kirjastossa */
.sq-term { font: 900 clamp(30px, 7vw, 46px)/1.08 Roboto, sans-serif; text-transform: none; color: var(--ot-ink); overflow-wrap: anywhere; }
.sq-term.is-name { font-size: clamp(22px, 4.6vw, 32px); line-height: 1.2; }
.sq-ctx { font: 400 13px/1.4 var(--ot-mono); color: var(--ot-ink-3); }
.sq-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sq-opt { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 6px; border: 1px solid var(--ot-line); background: var(--ot-card); color: var(--ot-ink); text-align: left; font: 500 17px/1.35 Roboto, sans-serif; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.sq-opt:hover { border-color: var(--ot-ink-3); }
.sq-opt:active { transform: scale(0.99); }
.sq-opt kbd { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 4px; border: 1px solid var(--ot-line); background: var(--ot-bg); box-shadow: none; color: var(--ot-ink-3); font: 700 14px/1 var(--ot-mono); }
.sq-txt { flex: 1 1 0; min-width: 0; color: inherit; overflow-wrap: anywhere; }
.sq-mark { flex: 0 0 auto; font: 700 12px/1.3 var(--ot-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.sq-mark:empty { display: none; }
.sq-opts.is-answered .sq-opt { cursor: default; transform: none; }
.sq-opts.is-answered .sq-opt:hover { border-color: var(--ot-line); }
.sq-opts.is-answered .sq-opt:not(.is-right):not(.is-wrong) { color: var(--ot-ink-3); }
.sq-opt.is-right, .sq-opts.is-answered .sq-opt.is-right:hover { border-color: var(--sq-ok); box-shadow: inset 0 0 0 1px var(--sq-ok); background: color-mix(in srgb, var(--sq-ok) 10%, var(--ot-card)); }
.sq-opt.is-right kbd { background: var(--sq-ok); border-color: var(--sq-ok); color: var(--sq-ok-ink); }
.sq-opt.is-right .sq-mark { color: var(--sq-ok); }
.sq-opt.is-wrong, .sq-opts.is-answered .sq-opt.is-wrong:hover { border-color: var(--sq-bad); box-shadow: inset 0 0 0 1px var(--sq-bad); background: color-mix(in srgb, var(--sq-bad) 10%, var(--ot-card)); }
.sq-opt.is-wrong kbd { background: var(--sq-bad); border-color: var(--sq-bad); color: var(--sq-bad-ink); }
.sq-opt.is-wrong .sq-mark { color: var(--sq-bad); }
.sq-feedback { margin-top: 14px; font: 500 16px/1.5 Roboto, sans-serif; color: var(--ot-ink); overflow-wrap: anywhere; }
.sq-feedback:empty { display: none; }
.sq-feedback b { margin-right: 6px; font-weight: 900 !important; }
.sq-feedback.is-right b { color: var(--sq-ok) !important; }
.sq-feedback.is-wrong b { color: var(--sq-bad) !important; }
.sq-next { margin-top: 14px; display: flex; }
.sq-next .ot-btn { scroll-margin-bottom: 24px; }
/* Kelluva Kysy koutsilta -nappi ei peitä vastauksia kierroksen aikana */
body:has(.sq[data-state="play"]:not([hidden])) #floating-koutsi-btn { display: none !important; }
.sq-hint { display: block; margin-top: 14px; font: 400 13px/1.5 var(--ot-mono); color: var(--ot-ink-3); }

/* Tulos */
.sq-result { padding: 26px 22px 24px; border-radius: 4px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 0 6px 0 var(--bc, var(--ot-red)), inset 0 -6px 0 var(--bc, var(--ot-red)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sq-result h3 { margin: 0; font: 500 12px/1.3 var(--ot-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-ink-3); }
.sq-big { font: 900 clamp(64px, 14vw, 96px)/0.95 Roboto, sans-serif; color: var(--ot-ink); font-variant-numeric: tabular-nums; }
.sq-big small { font-size: 0.42em; font-weight: 700; color: var(--ot-ink-3); }
.sq-verdict { max-width: 52ch; font: 700 18px/1.45 Roboto, sans-serif; color: var(--ot-ink); }
.sq-record { padding: 7px 12px; border-radius: 999px; background: #f5c400; color: #0b0f15; font: 700 12px/1 var(--ot-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.sq-bestline { font: 500 13px/1.4 var(--ot-mono); color: var(--ot-ink-3); font-variant-numeric: tabular-nums; }
.sq-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.sq-sub { margin: 32px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--ot-line); font: 900 15px/1.2 var(--ot-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ot-ink-3); }
.sq-review { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sq-review li { padding: 12px 16px; border-radius: 4px; border: 1px solid var(--ot-line); background: var(--ot-card); box-shadow: inset 4px 0 0 var(--bc, var(--ot-red)); display: flex; flex-direction: column; gap: 4px; }
.sq-rq { font: 700 17px/1.35 Roboto, sans-serif; color: var(--ot-ink); overflow-wrap: anywhere; }
.sq-ra { font: 500 15px/1.4 Roboto, sans-serif; color: var(--sq-ok); overflow-wrap: anywhere; }
.sq-ry { font: 400 13px/1.4 var(--ot-mono); color: var(--ot-ink-3); overflow-wrap: anywhere; }

@media (hover: none), (pointer: coarse) {
  .sq-hint { display: none; }
}
@media (max-width: 760px) {
  .tk-views button { flex: 1 1 0; padding: 0 8px; gap: 8px; font-size: 14px; }
}
@media (max-width: 560px) {
  .sq-belts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sq-start .ot-btn, .sq-next .ot-btn, .sq-actions .ot-btn { width: 100%; }
  .sq-card { padding: 20px 16px 16px; }
  .sq-opt { flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px 10px 10px; font-size: 16px; }
  .sq-opt .sq-mark { flex: 1 0 100%; padding-left: 44px; }
}
@media (max-width: 420px) {
  .tk-views svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-track i, .sq-pick > span, .sq-opt { transition: none !important; }
}

.sq-title { scroll-margin-top: 90px; }