/* Kytara – stupnice na hmatníku (kytara.php). Barvy jen z proměnných webu, takže sedí na tmavý, světlý i umělecký vzhled. */
.kytara{--blue:#79a8ff;--blue-ink:#0b1630}
:root[data-mode="light"] .kytara{--blue:#2457c5;--blue-ink:#ffffff}

.k-pick{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:28px;align-items:flex-end}
.k-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.k-field.k-wide{flex:1 1 240px}
.k-field select{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:9px 38px 9px 16px;min-width:9em;max-width:100%;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.k-field select:hover{border-color:var(--muted)}
.k-posrow{display:flex;gap:8px;align-items:center}
.k-posrow select{flex:1;min-width:0}
.k-posrow .btn{flex:none;padding:8px 0;width:40px;font-size:20px;line-height:1}

.k-board{margin-top:34px}
.k-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:14px}
.k-head h2{font-size:clamp(26px,4vw,36px)}
.k-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.k-seg{display:inline-flex;align-items:center;gap:0;border:0;margin:0;padding:0}
.k-seg legend{float:left;margin-right:10px}
.k-seg label{position:relative}
.k-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.k-seg span{display:inline-block;padding:6px 14px;border:1px solid var(--line);font-size:15px;cursor:pointer}
.k-seg label:first-of-type span{border-radius:999px 0 0 999px}
.k-seg label:last-of-type span{border-radius:0 999px 999px 0;margin-left:-1px}
.k-seg input:checked+span{background:var(--chord-soft);border-color:var(--chord);color:var(--chord);position:relative}
.k-seg input:focus-visible+span{outline:2px solid var(--ember);outline-offset:2px}
.k-check{display:inline-flex;align-items:center;gap:7px;font-size:15px;cursor:pointer}
.k-check input{width:17px;height:17px;accent-color:var(--ember);margin:0}

/* hmatník */
.k-fbwrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:var(--radius);
  background:var(--bg2);border:1px solid var(--line);padding:10px 6px 2px}
.k-fb{min-width:860px}
.k-fb:has(.is-cropped){min-width:0}
.fb{display:block;width:100%;height:auto;margin:0 auto;user-select:none;-webkit-user-select:none}
.fb-wood{fill:color-mix(in srgb,var(--surface) 82%,#7a4a22)}
:root[data-mode="light"] .fb-wood{fill:color-mix(in srgb,var(--surface) 78%,#c9935a)}
.fb-inlay{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.fb-fret{stroke:color-mix(in srgb,var(--ink) 38%,transparent);stroke-width:2}
.fb-nut{fill:var(--ink);opacity:.85}
.fb-string{stroke:color-mix(in srgb,var(--ink) 60%,transparent)}
.fb-sname{fill:var(--muted);font-family:var(--mono);font-size:14px;font-weight:700;text-anchor:middle}
.fb-num{fill:var(--muted);font-family:var(--mono);font-size:12px;text-anchor:middle;opacity:.7}
.fb-num.is-mark{opacity:1;font-weight:700}
.fb-n{cursor:pointer;outline:none}
.fb-n circle{fill:var(--ink);stroke:var(--bg2);stroke-width:2;transition:r .12s}
.fb-n text{fill:var(--bg);font-family:var(--body);font-size:13.5px;font-weight:700;text-anchor:middle;pointer-events:none}
.fb-n.is-root circle{fill:var(--ember)}
.fb-n.is-root text{fill:var(--ember-ink)}
.fb-n.is-blue circle{fill:var(--blue)}
.fb-n.is-blue text{fill:var(--blue-ink)}
.fb-n.is-ghost{opacity:.5}
.fb-n.is-ghost circle{fill:transparent;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 2}
.fb-n.is-ghost text{fill:var(--muted);font-size:11.5px;font-weight:500}
.fb-n.is-ghost.is-root circle{stroke:var(--ember)}
.fb-n.is-ghost.is-root text{fill:var(--ember)}
.fb-n.is-ghost.is-blue circle{stroke:var(--blue)}
.fb-n.is-ghost.is-blue text{fill:var(--blue)}
.fb-n:hover circle,.fb-n:focus-visible circle{stroke:var(--chord);stroke-width:3}
.fb-n.is-active circle{stroke:var(--chord);stroke-width:5;r:17px}
.fb-n.is-pluck circle{animation:k-pluck .45s ease-out}
@keyframes k-pluck{0%{stroke:var(--chord);stroke-width:9}100%{stroke-width:2}}
@media (prefers-reduced-motion:reduce){.fb-n.is-pluck circle{animation:none}.fb-n circle{transition:none}}

.k-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--muted)}
.k-legend span{display:inline-flex;align-items:center;gap:7px}
.k-legend i{display:inline-block;width:14px;height:14px;border-radius:50%}
.lg-root{background:var(--ember)} .lg-pos{background:var(--ink)} .lg-blue{background:var(--blue)}
.lg-ghost{border:1.5px dashed var(--muted);opacity:.7}
.kytara:not(.has-blue) .lg-bluewrap,.kytara.all-pos .lg-ghostwrap{display:none}

.k-info{display:grid;gap:8px;margin-top:20px}
.k-chips{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kc{display:inline-flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 10px 5px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.kc b{font-family:var(--display);font-size:20px;line-height:1.1}
.kc span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.kc.is-root{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 16%,var(--surface))}
.kc.is-root b{color:var(--ember)}
.kc.is-blue{border-color:var(--blue)}
.kc.is-blue b{color:var(--blue)}
.k-key,.k-pinfo{font-size:17px}
.k-about{max-width:70ch;font-size:17px}

.k-score{margin-top:46px}
.k-score .tab-head h2{font-size:clamp(24px,3.6vw,32px)}

@media (max-width:700px){
  .k-pick{gap:12px}
  .k-field{flex:1 1 100%}
  .k-field select{width:100%}
  .k-head{align-items:flex-start}
  .k-fbwrap{margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)) + 8px)}
}

/* záložky Stupnice / Akordy / Rytmy */
.k-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.k-tabs a{padding:7px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.k-tabs a:hover{border-color:var(--muted)}
.k-tabs a[aria-current="page"]{background:var(--chord-soft);border-color:var(--chord);color:var(--chord)}
.fb-mute{fill:var(--danger);font-family:var(--mono);font-size:20px;font-weight:700;text-anchor:middle}
.fb-string.is-muted{stroke-dasharray:4 5;opacity:.6}
.k-actions{display:flex;gap:8px;flex-wrap:wrap}
.k-actions .btn{padding:9px 18px}
.kc.is-opt{border-style:dashed}
.lg-x{color:var(--danger);font-family:var(--mono);width:14px;text-align:center}

/* hmaty akordu */
.k-shapes-sec{margin-top:40px}
.k-shapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.k-shape{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.k-shape:hover{border-color:var(--muted)}
.k-shape.is-on{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset;background:color-mix(in srgb,var(--ember) 9%,var(--surface))}
.k-shape-d svg{width:84px;height:auto;display:block}
.k-shape-n{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.1}
.k-shape-l{font-size:13px;color:var(--muted);text-align:center;line-height:1.25}

/* rytmy */
.k-full{flex:1 1 100%}
.k-input{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;width:100%}
.k-warn{margin-top:10px;color:var(--danger)}
.k-rhythm{margin-top:34px}
.r-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:18px}
.r-play{min-width:9.5em;position:relative}
.r-play[data-count]:not([data-count=""])::after{content:attr(data-count);position:absolute;right:-12px;top:-10px;width:26px;height:26px;border-radius:50%;
  background:var(--chord);color:var(--ember-ink);font-size:15px;display:grid;place-items:center}
.r-tempo{display:flex;align-items:center;gap:8px}
.r-tempo .btn{padding:6px 0;width:36px}
.r-tempo input{width:150px;accent-color:var(--ember)}
.r-tempo output{font-family:var(--mono);font-size:15px;min-width:6.5em}
.r-stage{display:flex;gap:18px;align-items:flex-start}
.r-now{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:120px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.r-now b{font-family:var(--display);font-size:34px;line-height:1;color:var(--ember)}
.r-nowd svg{width:84px;height:auto;display:block}
.r-gridwrap{flex:1;min-width:0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:10px 8px}
.rg{display:grid;grid-template-columns:5.6em repeat(var(--n),minmax(2.3em,1fr));row-gap:4px;min-width:min-content}
.rg.is-long{grid-template-columns:5.6em repeat(var(--n),minmax(1.9em,1fr))}
.rg-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center}
.rg-c{display:grid;place-items:center;min-height:2.1em;font-family:var(--mono);border-left:1px solid transparent}
.rg-c.is-beat{border-left-color:color-mix(in srgb,var(--line) 70%,transparent)}
.rg-c.is-bar{border-left:2px solid var(--muted)}
.rg-cnt{font-size:15px;color:var(--muted)}
.rg-cnt.is-beat{color:var(--ink);font-weight:700}
.rg-hand{font-size:17px;color:var(--muted);opacity:.75}
.rg-play{font-size:26px;font-weight:700;color:var(--ink);min-height:1.7em;border-radius:8px}
.rg-play.is-rest{color:var(--muted);opacity:.5}
.rg-play.t-UD,.rg-play.t-UU,.rg-play.t-d,.rg-play.t-UM,.rg-play.t-UK,.rg-play.t-k{color:var(--ember)}
.rg-play.t-d{font-size:20px}
.rg-play.t-UM::after{content:"PM";font-size:9px;font-weight:700;margin-top:-6px;color:var(--muted)}
.rg-play.t-UM{grid-template-rows:auto auto;line-height:1}
.rg-play.t-UB,.rg-play.t-UA,.rg-play.t-p,.rg-play.t-UQ,.rg-play.t-UW{color:var(--chord);font-size:21px}
.rg-play.t-UP{color:var(--danger)}
.rg-play.t-x{color:var(--muted);font-size:20px}
.rg-play.t-i,.rg-play.t-m,.rg-play.t-a{font-size:20px}
.rg-c.is-now{background:color-mix(in srgb,var(--ember) 22%,transparent)}
.rg-play.is-now{background:var(--ember);color:var(--ember-ink)!important;opacity:1}
.rg-play.is-now::after{color:var(--ember-ink)}
.r-chords{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rc{display:flex;flex-direction:column;align-items:center;padding:6px 8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:64px}
.rc-n{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.1}
.rc-d svg{width:56px;height:auto;display:block}
.rc.is-on{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset}
.rc.is-on .rc-n{color:var(--ember)}
.r-legend{margin-top:14px;font-size:15px}
.r-legend b{font-family:var(--mono);color:var(--ink)}
@media (max-width:700px){
  .r-stage{flex-direction:column;align-items:stretch}
  .r-gridwrap{width:100%;flex:none}
  .r-now{width:auto;flex-direction:row;gap:14px;justify-content:flex-start}
  .r-now b{font-size:30px}
  .r-nowd svg{width:64px}
  .r-tempo input{width:110px}
  .k-shapes{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .k-shape-d svg{width:72px}
}