/* Kompetenčný tréning: doplnky k game.css (hlavná farba navy #0B1E4B, bez zelenej a teal ako značkovej farby). */
.comp-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .comp-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comp-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.comp-rating b { font-size: 2.25rem; font-weight: 900; color: var(--navy); line-height: 1.1; }
:root[data-theme="dark"] .comp-rating b { color: var(--navy-ink); }
.chip { display: inline-block; font-size: .8125rem; font-weight: 900; border-radius: 999px; padding: 2px 10px; border: 2px solid var(--line-2); color: var(--ink-2); background: var(--white); white-space: nowrap; }
.chip.is-mastered { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.chip.is-practising { border-color: var(--sky); color: var(--sky-ink); background: var(--sky-soft); }
.chip.is-review { border-color: var(--sun-edge); color: var(--sun-ink); background: var(--sun-soft); }
.chip.is-locked { border-style: dashed; }
.comp-step { display: grid; gap: 4px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-s); background: var(--white); min-width: 0; }
.comp-step h3 { font-size: 1.0625rem; font-weight: 900; }
.comp-step .row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.comp-consent { display: grid; gap: 6px; padding: 14px 16px; border: 2px solid var(--line-2); border-radius: var(--r-s); }
.comp-consent h3 { font-size: 1.0625rem; font-weight: 900; }
.comp-stakes { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 800; color: var(--ink-2); }
.comp-stakes span b { color: var(--ink); }
.comp-model { display: inline-block; font-size: .8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--sun-ink); background: var(--sun-soft); border: 2px solid var(--sun-edge); border-radius: 8px; padding: 0 8px; }
.comp-result { border-left: 6px solid var(--navy); padding-left: 14px; display: grid; gap: 8px; }
.comp-result.is-wrong { border-left-color: var(--berry); }
.comp-ans { display: grid; gap: 8px; max-width: 28rem; }
.comp-ans input[type="text"] { width: 100%; font-size: 1.125rem; font-weight: 800; color: var(--ink); background: var(--wash); border: 2px solid var(--edge); border-radius: var(--r-s); padding: 11px 14px; min-width: 0; }
.comp-table th, .comp-table td { text-align: left; padding: 6px 12px 6px 0; vertical-align: top; }
.comp-table td.num { text-align: right; font-weight: 900; white-space: nowrap; }
.comp-list { display: grid; gap: 6px; padding-left: 1.2rem; }