/* Páky tela: interaktívny model (prenos z návrhu 2026-10-19). Ohraničené na .paky, farby len z tokenov, bez tmavého režimu. */
.paky {
  --bg: var(--paper); --surface: var(--white); --stage: var(--white); --fig-fill: var(--white); --shoe: var(--white);
  --sunk: color-mix(in srgb, var(--sand) 55%, var(--paper));
  --ink: color-mix(in srgb, var(--cocoa-deep) 70%, var(--void));
  --muted: color-mix(in srgb, var(--cocoa) 72%, var(--white));
  --line: color-mix(in srgb, var(--cocoa) 14%, var(--paper));
  --brand: var(--burgundy); --accent: var(--ember); --hot: var(--ember);
  --body: color-mix(in srgb, var(--sand) 80%, var(--cocoa));
  --bone: color-mix(in srgb, var(--sand) 40%, var(--paper));
  --floor: color-mix(in srgb, var(--sand) 70%, var(--paper));
  --calm: color-mix(in srgb, var(--canopy) 45%, var(--mist));
  --work: color-mix(in srgb, var(--canopy) 70%, var(--mist));
  --over: color-mix(in srgb, var(--burgundy) 60%, var(--ember));
  --grav: var(--canopy);
  --skin: color-mix(in srgb, var(--sand) 85%, var(--ember));
  --shirt: var(--burgundy); --shorts: var(--cocoa-deep); --hair: var(--cocoa);
  color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-tap-highlight-color: transparent;
}
.paky .wrap { max-width: 1320px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 56px; display: grid; gap: 16px; }
.paky header.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.paky .eyebrow { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.paky h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; color: var(--brand); }
.paky .lede { margin: 0; color: var(--muted); font-size: 15px; max-width: 70ch; flex-basis: 100%; }
.paky h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.paky h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.paky button:focus-visible, .paky input:focus-visible, .paky summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.paky .layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.paky .viewer { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--app-space-4) + 8px); z-index: 5; background: var(--bg); padding-block: 6px; display: grid; gap: 8px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.paky .viewer * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.paky .canvaswrap { position: relative; background: var(--stage); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; touch-action: none; }
.paky #fig { display: block; width: 100%; touch-action: none; cursor: grab; }
.paky #fig:active { cursor: grabbing; }
.paky #fig .fig { fill: var(--fig-fill); stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; }
.paky #fig .farside .fig { stroke-opacity: .45; }
.paky #fig .floor { stroke: var(--line); stroke-width: 2; }
.paky #fig .sep { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.paky #fig .prop { fill: var(--sunk); stroke: var(--muted); stroke-width: 1.5; }
.paky #fig .load { fill: var(--brand); }
.paky #fig .spine { stroke-width: 3.2; stroke-linecap: round; }
.paky #fig .joint { fill: var(--fig-fill); stroke: var(--brand); stroke-width: 2; }
.paky #fig .plumb { stroke: var(--accent); stroke-width: 1.5; }
.paky #fig .lm { fill: var(--accent); }
.paky #fig .grav { stroke: var(--grav); stroke-width: 1.5; stroke-dasharray: 5 5; }
.paky #fig .com { fill: var(--grav); stroke: var(--fig-fill); stroke-width: 2; }
.paky #fig .gaze { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.paky #fig .glow { fill: url(#gl); }
.paky #fig .arch { fill: none; stroke: var(--brand); stroke-width: 1.6; } #fig .arch.bad { stroke: var(--over); }
.paky #fig .pat { fill: var(--fig-fill); stroke: var(--brand); stroke-width: 1.6; }
.paky #fig .patdir { stroke: var(--over); stroke-width: 2.4; stroke-linecap: round; }
.paky .labels { position: absolute; inset: 0; pointer-events: none; font-size: 11px; }
.paky .lbl { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); background: color-mix(in srgb, var(--white) 82%, transparent); border-radius: 5px; padding: 0 4px; line-height: 16px; }
.paky .lbl.acc { color: var(--brand); font-weight: 500; }
.paky .lbl.grav { color: var(--grav); }
.paky .lbl.warn { color: var(--over); font-weight: 500; }
.paky .lbl.right { transform: translate(6px, -50%); }
.paky .lbl.left { transform: translate(calc(-100% - 6px), -50%); }
.paky .lbl.lev { font-size: 10px; line-height: 14px; color: var(--muted); }
.paky .hdl { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.paky .hdl.on { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.paky .hdl b { position: absolute; left: 24px; top: 1px; font: 600 11px var(--font-sans); color: var(--brand); white-space: nowrap; background: color-mix(in srgb, var(--white) 90%, transparent); border-radius: 5px; padding: 0 4px; }
.paky .hint { pointer-events: none; position: absolute; right: 10px; bottom: 10px; font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--white) 85%, transparent); border-radius: 8px; padding: 3px 8px; max-width: 46%; text-align: right; }
.paky .levs { display: grid; gap: 6px; }
.paky .levrow { display: grid; grid-template-columns: 84px 76px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; }
.paky .levrow .n { font-weight: 600; }
.paky .levrow .c { font-variant-numeric: tabular-nums; font-size: 12px; }
.paky .levrow .h { color: var(--muted); font-size: 12px; }
.paky .levrow .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.paky .levrow .bar i { display: block; height: 100%; border-radius: 3px; }
.paky .spinestrip { display: grid; gap: 4px; }
.paky .spinestrip .strip { height: 14px; border-radius: 7px; }
.paky .spinestrip .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.paky .small { font-size: 13px; color: var(--muted); margin: 0; }
.paky .vtitle { position: absolute; top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.paky .score { pointer-events: none; position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px 5px 6px; }
.paky .score svg { display: block; }
.paky .score .st { font-size: 12px; color: var(--muted); line-height: 1.2; }
.paky .score .st b { display: block; font-size: 13px; color: var(--ink); }
.paky .vbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; font-size: 13px; }
.paky .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 22px; }
.paky .chain .ch { background: var(--sunk); border-radius: 6px; padding: 1px 7px; }
.paky .chain .ar { color: var(--accent); font-weight: 700; }
.paky .chain .none { color: var(--muted); }
.paky .labels.nohdl .hdl { display: none; }
.paky .comp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.paky .weight { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); }
.paky .weight b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }

.paky .side { display: grid; gap: 14px; min-width: 0; }
.paky .modes { display: flex; flex-wrap: wrap; gap: 6px; }
.paky .mode { font: inherit; font-size: 14px; font-weight: 600; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 11px; padding: 7px 13px; cursor: pointer; }
.paky .mode[aria-pressed="true"] { background: var(--brand); color: var(--bg); border-color: var(--brand); }
.paky .variants { display: flex; flex-wrap: wrap; gap: 6px; }
.paky .var { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.paky .var[aria-pressed="true"] { border-color: var(--ink); background: var(--sunk); font-weight: 600; }
.paky .var .good { color: var(--work); font-weight: 700; margin-left: 5px; font-size: 11px; }
.paky .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.paky .quest { border: 1.5px dashed var(--brand); }
.paky .quest .q { font-size: 15px; font-weight: 600; }
.paky .quest .state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.paky .quest.done { border-style: solid; border-color: var(--work); }
.paky .quest.done .state { color: var(--work); }
.paky .group { display: grid; gap: 10px; }
.paky .group + .group { border-top: 1px solid var(--line); padding-top: 12px; }
.paky .gname { font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .04em; text-transform: uppercase; }
.paky .ctrl { display: grid; gap: 2px; }
.paky .ctrl .row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.paky .ctrl .row span { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); font-weight: 400; }
.paky .ctrl .ends { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); }
.paky .ctrl .ends span:last-child { text-align: right; }
.paky input[type=range] { width: 100%; accent-color: var(--brand); height: 26px; margin: 0; }
.paky .zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.paky .zone { font: inherit; text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px; padding: 8px 10px; cursor: pointer; display: grid; gap: 1px; }
.paky .zone[aria-pressed="true"] { border-color: var(--ink); }
.paky .zone .zn { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.paky .zone .zs { font-size: 12px; color: var(--muted); padding-left: 20px; }
.paky .zone .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.paky .why { background: var(--sunk); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; font-size: 14px; }
.paky .why .src, .paky .note .src { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.paky .carry .track { display: flex; height: 28px; border-radius: 9px; overflow: hidden; font-size: 12px; font-weight: 600; }
.paky .carry .track span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: var(--white); }
.paky .c-k { background: var(--work); } .c-s { background: var(--accent); } .c-p { background: var(--over); }
.paky .carry .keys { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.paky .carry .keys i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.paky .notes { display: grid; gap: 12px; }
.paky .note { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; border-left: 4px solid var(--accent); }
.paky .note.ok { border-left-color: var(--work); } .note.bad { border-left-color: var(--over); }
.paky .note h4 { margin: 0; font-size: 15px; } .note p { margin: 0; font-size: 14px; }
.paky .note .tip { font-weight: 500; } .note .tip::before { content: "Čo s tým: "; color: var(--brand); font-weight: 700; }
.paky details.nerd { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.paky details.nerd summary { cursor: pointer; font-weight: 600; }
.paky .nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.paky .num { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; }
.paky .num .k { font-size: 11px; color: var(--muted); } .num .v { font-variant-numeric: tabular-nums; font-size: 15px; }
.paky .nerd p { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.paky .disc { border-left: 3px solid var(--brand); padding: 6px 0 6px 14px; margin: 0; font-size: 13px; }
.paky .result { gap: 8px; }
.paky .result h2 { font-size: 20px; }
.paky .result.ok h2 { color: var(--work); } .result.warn h2 { color: var(--hot); } .result.bad h2 { color: var(--over); }
.paky .result p { margin: 0; }
.paky .result .tip { font-weight: 500; } .result .tip::before { content: "Čo s tým: "; color: var(--brand); font-weight: 700; }
.paky .qline { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.paky .qline .state { font-weight: 600; }
.paky .result.done .qline .state { color: var(--work); }
.paky details.more summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.paky details.more[open] summary { margin-bottom: 4px; }
.paky details.more > h3 { margin-top: 6px; }
.paky .err { padding: 24px; color: var(--muted); }
@media (max-width: 980px) {
  .paky .layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .paky .labels { font-size: 10px; }
  .paky .lbl { line-height: 14px; padding: 0 3px; }
  .paky .lbl.lev, .paky .hint { display: none; }
  .paky .hdl { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 1.5px; }
  .paky .hdl.on { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .paky .score { left: 6px; bottom: 6px; padding: 3px 8px 3px 4px; }
}

/* ===== UI štýl LEARN v2/v3 (Erik 2026-10-19): teplé plochy, veľká hlavička, scéna ako mapa tela, pilulky, karty v3. ===== */
.paky { --pk-ease: cubic-bezier(.2, .7, .2, 1); --pk-shadow: 0 1px 2px color-mix(in srgb, var(--cocoa) 8%, transparent), 0 24px 50px -28px color-mix(in srgb, var(--cocoa) 35%, transparent); font-size: 16px; }
.paky-main { background: radial-gradient(45% 40% at 90% 8%, color-mix(in srgb, var(--ember) 10%, transparent), transparent 70%), radial-gradient(40% 35% at 0% 55%, color-mix(in srgb, var(--burgundy) 5%, transparent), transparent 70%); }
.paky .wrap { max-width: 1280px; padding-inline: var(--gutter); padding-block: 40px 96px; gap: 28px; }
.paky header.top { display: grid; gap: 14px; max-width: 820px; }
.paky .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: color-mix(in srgb, var(--burgundy) 78%, transparent); }
.paky h1 { font-size: clamp(44px, 7vw, 88px); line-height: .98; font-weight: 600; letter-spacing: -0.045em; }
.paky .lede { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 46ch; }
.paky .layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
.paky .viewer { background: transparent; padding-block: 0; gap: 12px; }
.paky .canvaswrap { border: 0; border-radius: var(--radius-lg);
  background: radial-gradient(55% 50% at 50% 45%, var(--white) 0%, transparent 72%), radial-gradient(90% 70% at 50% 100%, var(--sand), var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--burgundy) 8%, transparent), 0 30px 70px color-mix(in srgb, var(--cocoa-deep) 10%, transparent); }
.paky #fig .floor { stroke: color-mix(in srgb, var(--cocoa) 22%, transparent); }
.paky .vtitle { top: 18px; font-size: 12px; letter-spacing: .12em; color: color-mix(in srgb, var(--burgundy) 60%, transparent); }
.paky .score { left: 16px; bottom: 16px; border: 0; border-radius: 18px; padding: 8px 16px 8px 8px; background: color-mix(in srgb, var(--white) 88%, transparent); box-shadow: var(--pk-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.paky .score .st b { font-size: 15px; color: var(--burgundy); }
.paky .hint { right: 16px; bottom: 16px; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; background: color-mix(in srgb, var(--white) 80%, transparent); }
.paky .hdl { border-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 12%, transparent); transition: width .25s var(--pk-ease), height .25s var(--pk-ease), margin .25s var(--pk-ease), background-color .25s; }
.paky .vbar { padding-inline: 4px; font-size: 14px; }
.paky .chain .ch { background: var(--white); border-radius: var(--radius-pill); padding: 3px 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--cocoa) 10%, transparent); }
.paky .comp { font-weight: 500; }
.paky .comp input, .paky input[type=checkbox] { accent-color: var(--burgundy); width: 18px; height: 18px; }

/* Situácie: pilulky v2 */
.paky .side { gap: 18px; }
.paky .modes { gap: 8px; }
.paky .mode { font-size: 15px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--cocoa) 14%, transparent); border-radius: var(--radius-pill); padding: 11px 18px; background: var(--white); color: var(--burgundy); box-shadow: 0 1px 2px color-mix(in srgb, var(--cocoa) 8%, transparent); transition: background-color .3s var(--pk-ease), color .3s, box-shadow .3s, transform .15s var(--pk-ease); }
.paky .mode:hover { border-color: var(--burgundy); }
.paky .mode:active, .paky .var:active { transform: scale(.97); }
.paky .mode[aria-pressed="true"] { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); box-shadow: 0 10px 26px color-mix(in srgb, var(--burgundy) 30%, transparent); }
.paky .variants { gap: 8px; }
.paky .var { font-size: 14px; padding: 8px 14px; border-color: color-mix(in srgb, var(--cocoa) 14%, transparent); transition: border-color .3s, background-color .3s; }
.paky .var:hover { border-color: var(--burgundy); }
.paky .var[aria-pressed="true"] { border-color: var(--burgundy); background: color-mix(in srgb, var(--burgundy) 7%, var(--white)); color: var(--burgundy); }

/* Karty v3 */
.paky .card { border: 0; border-radius: var(--radius-card); padding: 22px 24px; gap: 14px; box-shadow: var(--pk-shadow); }
.paky .result { position: relative; overflow: hidden; padding-left: 28px; }
.paky .result::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ember); }
.paky .result.ok::before { background: var(--work); } .paky .result.bad::before { background: var(--over); }
.paky .result h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.paky .result p { font-size: 17px; }
.paky .qline { font-size: 14px; padding-top: 12px; border-top-color: color-mix(in srgb, var(--cocoa) 10%, transparent); }
.paky details.more summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; color: var(--burgundy); }
.paky details.more summary::-webkit-details-marker { display: none; }
.paky details.more summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; transition: transform .3s var(--pk-ease); }
.paky details.more[open] summary::after { transform: rotate(45deg); }
.paky h3 { font-size: 12px; letter-spacing: .12em; color: color-mix(in srgb, var(--burgundy) 70%, transparent); margin-top: 8px; }
.paky .gname { letter-spacing: .12em; }
.paky input[type=range] { accent-color: var(--burgundy); }
.paky .zone { border-color: color-mix(in srgb, var(--cocoa) 12%, transparent); background: var(--white); border-radius: 14px; padding: 10px 12px; transition: border-color .3s; }
.paky .zone:hover, .paky .zone[aria-pressed="true"] { border-color: var(--burgundy); }
.paky .why { background: color-mix(in srgb, var(--sand) 35%, var(--white)); border-radius: 16px; padding: 14px 16px; }
.paky .note { border: 0; border-radius: 16px; box-shadow: inset 4px 0 0 var(--ember), 0 1px 2px color-mix(in srgb, var(--cocoa) 8%, transparent); }
.paky .note.ok { box-shadow: inset 4px 0 0 var(--work), 0 1px 2px color-mix(in srgb, var(--cocoa) 8%, transparent); }
.paky .note.bad { box-shadow: inset 4px 0 0 var(--over), 0 1px 2px color-mix(in srgb, var(--cocoa) 8%, transparent); }
.paky .num { background: color-mix(in srgb, var(--sand) 25%, var(--white)); border: 0; border-radius: 12px; padding: 8px 12px; }
.paky .carry .track { border-radius: var(--radius-pill); height: 32px; }
.paky .disc { border-left: 3px solid var(--ember); padding: 4px 0 4px 16px; font-size: 14px; color: var(--muted); }
.paky :is(button, input, summary):focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

@media (max-width: 980px) {
  .paky .layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .paky .viewer { background: var(--paper); padding-block: 6px; }
  .paky .vbar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .paky .wrap { padding-block: 24px 64px; gap: 20px; }
  .paky .lede { font-size: 17px; }
  .paky .canvaswrap { border-radius: var(--radius-card); }
  .paky .mode { padding: 9px 14px; font-size: 14px; }
  .paky .result h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .paky * { transition: none !important; } }

.paky .pk-toggles { display: flex; gap: 18px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--cocoa) 10%, transparent); }
.paky .vbar { grid-template-columns: minmax(0, 1fr); }
.paky details.more:not([open]) { gap: 0; padding-block: 18px; }

/* Rýchla kontrola a Čo teraz trpí (Erik 2026-10-19) */
.paky .quick { gap: 10px; }
.paky .quick-h { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--burgundy) 78%, transparent); }
.paky .qrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 6px; border-top: 1px solid color-mix(in srgb, var(--cocoa) 8%, transparent); }
.paky .qrow:first-of-type { border-top: 0; }
.paky .qt { font-weight: 600; font-size: 15px; color: var(--burgundy); }
.paky .seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--sand) 40%, var(--paper)); }
.paky .segb { flex: 1 1 0; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .3s var(--pk-ease), color .3s, box-shadow .3s; }
.paky .segb:hover { color: var(--burgundy); }
.paky .segb[aria-pressed="true"] { background: var(--white); color: var(--burgundy); box-shadow: 0 2px 8px color-mix(in srgb, var(--cocoa) 18%, transparent); }
.paky .pain-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; }
.paky .pn-t { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.paky .pn-t.ok { color: var(--work); text-transform: none; letter-spacing: 0; font-size: 15px; }
.paky .pn-z { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: var(--white); font-weight: 600; font-size: 14px; box-shadow: 0 1px 2px color-mix(in srgb, var(--cocoa) 10%, transparent); }
.paky .pn-z i { width: 12px; height: 12px; border-radius: 50%; }
.paky .pn-z.hi { color: var(--over); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--burgundy) 45%, transparent); }
.paky .pn-z.hi i { animation: pk-pulse 1.4s ease-in-out infinite; }
@keyframes pk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
/* bolesť na postave výraznejšie */
.paky #fig .glow { animation: pk-glow 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pk-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
.paky .chain { font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .paky .qrow { grid-template-columns: minmax(0, 1fr); gap: 6px; } .paky .segb { font-size: 13px; padding: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .paky .pn-z.hi i, .paky #fig .glow { animation: none; } }

/* Čistý režim (Príbeh tela): len silueta, línia tela a bolesť; bez popisov, krúžkov a mier */
.paky.pk-clean .labels, .paky.pk-clean .vtitle, .paky.pk-clean .hint { display: none !important; }
.paky.pk-clean #fig { pointer-events: none; }
.paky.pk-clean #fig .sep, .paky.pk-clean #fig .gaze, .paky.pk-clean #fig .grav { display: none; }
.paky.pk-clean #fig .fig { stroke-width: 2.6; }
.paky.pk-clean #fig .farside .fig { stroke-opacity: .3; }
.paky.pk-clean #fig .plumb { stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }

/* Brandová postava TP (Erik 2026-10-19): jedna tenká bordová linka, biela výplň, bez bodiek kĺbov a farebnej chrbtice.
   Chrbtica a kĺby sa ukážu len počas ťahania (vtedy pomáhajú pochopiť pohyb). */
.paky #fig .fig { fill: var(--white); stroke: var(--burgundy); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.paky #fig .farside .fig { stroke-opacity: .35; }
.paky #fig .spine, .paky #fig .joint { opacity: 0; transition: opacity .35s; }
.paky .canvaswrap:active #fig .spine, .paky .canvaswrap:active #fig .joint { opacity: 1; }
.paky #fig .plumb { stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.paky #fig .com { r: 5; }
.paky .hdl { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-width: 1.5px; background: color-mix(in srgb, var(--ember) 10%, transparent); box-shadow: none; }
.paky .hdl.on { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: color-mix(in srgb, var(--ember) 28%, transparent); }
.paky .hdl b { font-weight: 600; font-size: 11px; }

/* Naša brandová postava ohýbaná na kĺboch (paky-postava.js, WebGL): kreslená postava sa skryje, prekryvné vrstvy ostávajú */
.paky .canvaswrap { isolation: isolate; }
.paky .postava-gl { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.paky #fig { position: relative; z-index: 1; }
.paky.has-postava #fig .fig, .paky.has-postava #fig .farside, .paky.has-postava #fig image { display: none; }

/* Názvy kĺbov len pri prejdení myšou (postava ostáva čistá), krúžky ostávajú */
.paky .labels .hdl b { opacity: 0; transition: opacity .25s; }
.paky .canvaswrap:hover .labels .hdl b, .paky .labels .hdl.on b { opacity: 1; }
/* Na konci: rezervácia */
.paky .pk-cta { gap: 12px; background: radial-gradient(80% 60% at 20% 0%, color-mix(in srgb, var(--glow) 60%, var(--ember)), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--burgundy) 88%, var(--ember)), color-mix(in srgb, var(--burgundy) 80%, var(--void))); color: var(--white); }
.paky .pk-cta h2 { color: var(--white); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.paky .pk-cta p { margin: 0; color: color-mix(in srgb, var(--white) 82%, transparent); }
.paky .pk-cta-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.paky .pk-cta-btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--white); color: var(--burgundy); font-weight: 600; text-decoration: none; transition: background-color .3s, transform .15s; }
.paky .pk-cta-btn:hover { background: var(--sand); }
.paky .pk-cta-btn:active { transform: scale(.97); }
.paky .pk-cta h2 { color: var(--white) !important; }
@media (max-width: 600px) { .paky .score { transform: scale(.78); transform-origin: left bottom; opacity: .94; } }
/* Telefón: pripnutá scéna Pák s medzerou pod hlavičkou a od krajov */
@media (max-width: 980px) {
  /* telefón: pripnutá je len scéna s postavou (kompaktná), text pod ňou roluje normálne */
  .paky .viewer { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--app-space-4) + 10px); padding: 0 0 6px; background: var(--paper); border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .paky .canvaswrap { border-radius: var(--radius-card); }
  .paky .vbar { padding-inline: 6px; gap: 4px; }
  .paky .vbar .chain { display: none; }   /* reťaz reakcií je v Podrobnostiach; na telefóne len „Čo teraz trpí“ */
}

/* Bez profilu: náhľad postavy, výzva na profil pri pokuse pohnúť kĺbom */
/* Bez profilu: postava nie je na ťahanie, prst nad ňou scrolluje stránku (zámok až pri ťahaní, paky-zamok.js). */
.paky [data-pk-locked] .canvaswrap, .paky [data-pk-locked] #fig { touch-action: pan-y; }
.paky [data-pk-locked] #fig { cursor: default; }
.pk-lock-chip { position: absolute; left: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--burgundy); font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cocoa-deep) 40%, transparent); pointer-events: none; }
.pk-lock-chip .icon { width: 14px; height: 14px; }
.pk-lock { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; border-radius: inherit; background: color-mix(in srgb, var(--void) 76%, transparent); backdrop-filter: blur(4px); color: var(--white); }
.pk-lock[hidden] { display: none; }
.pk-lock-icon { display: grid; place-items: center; width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--white); color: var(--burgundy); }
.paky .pk-lock h2 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--white); }
.paky .pk-lock p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--white) 88%, transparent); }
.pk-lock-login a { color: var(--white) !important; font-weight: 600; text-decoration: underline; }
.pk-lock-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--white) 16%, transparent); color: var(--white); cursor: pointer; }