/* Focimenedzser – Kuponkirály megjelenés (a style.css után töltendő be, a konténeren: <div id="fm" data-skin="kk">).
   Csak színek, betűk és formák változnak; a játék minden funkciója ugyanaz. */
#fm[data-skin="kk"] {
  --frame: #0b0f18;
  --bg: #0f1420;
  --panel: #131a27;
  --panel2: #19212f;
  --panel3: #212b3c;
  --line: #273145;
  --line2: #1d2535;
  --ink: #f5f7fb;
  --ink2: #c7cfdc;
  --muted: #8a94a6;
  --red: #ff5a36;
  --red2: #ff3d6e;
  --red-ink: #ffffff;
  --gold: #ffb020;
  --orange: #ff7a2f;
  --green: #22c55e;
  --blue: #4f8cff;
  --green-bg: rgba(34, 197, 94, .12);
  --red-bg: rgba(255, 90, 54, .12);
  --gold-bg: rgba(255, 176, 32, .12);
  --grad: linear-gradient(90deg, #ff5a36, #ff3d6e);
  --f-head: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-ui: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  border-radius: 18px;
}
#fm[data-skin="kk"][data-theme="light"] {
  --frame: #ffffff;
  --bg: #f4f6fa;
  --panel: #f7f8fb;
  --panel2: #eef1f6;
  --panel3: #e3e8f0;
  --line: #d7dde7;
  --line2: #e6eaf1;
  --ink: #111827;
  --ink2: #374151;
  --muted: #6b7280;
  --red: #f0441f;
  --red2: #e82c5e;
  --red-ink: #ffffff;
  --gold: #c98400;
  --orange: #e2611a;
  --green: #16a34a;
  --blue: #2563eb;
}
/* címsorok: vegyes kis- és nagybetű, tömör Montserrat (a Kuponkirály stílusa) */
#fm[data-skin="kk"] .title { font-weight: 800; text-transform: none; letter-spacing: -.02em; font-size: clamp(26px, 6.2vw, 38px); line-height: 1.05; }
#fm[data-skin="kk"] h2.sec { font-weight: 800; text-transform: none; letter-spacing: -.01em; font-size: 18px; }
#fm[data-skin="kk"] h2.sec::before { background: var(--grad); }
#fm[data-skin="kk"] h3 { font-weight: 800; text-transform: none; letter-spacing: -.01em; font-size: 15.5px; }
#fm[data-skin="kk"] .status .club { font-weight: 800; text-transform: none; letter-spacing: -.01em; font-size: 18px; }
#fm[data-skin="kk"] .steps b, #fm[data-skin="kk"] .choice b, #fm[data-skin="kk"] .tcard .tnm, #fm[data-skin="kk"] .score .tn, #fm[data-skin="kk"] .pcard .b .pn { text-transform: none; letter-spacing: -.01em; font-weight: 800; }
#fm[data-skin="kk"] .choice b { font-size: 16px; }
#fm[data-skin="kk"] .tcard .tnm { font-size: 16px; }
#fm[data-skin="kk"] .score .tn { font-size: 14.5px; }
#fm[data-skin="kk"] .score .sc { font-weight: 800; font-size: 32px; }
#fm[data-skin="kk"] .stat .v { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
#fm[data-skin="kk"] .nums b { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
#fm[data-skin="kk"] .ovr, #fm[data-skin="kk"] .attr .n, #fm[data-skin="kk"] .mstats td.v { font-weight: 800; font-size: 13.5px; }
#fm[data-skin="kk"] .pcard .f .q, #fm[data-skin="kk"] .pcard .b .r { font-weight: 800; font-size: 34px; letter-spacing: -.03em; }
/* gombok, fülek: narancs–pink átmenet, lekerekítve */
#fm[data-skin="kk"] .btn { text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 15px; border-radius: 12px; }
#fm[data-skin="kk"] .btn:not(.ol):not(.green) { background: var(--grad); border-color: transparent; box-shadow: 0 6px 18px rgba(255, 70, 70, .22); }
#fm[data-skin="kk"] .btn.big { font-size: 16.5px; }
#fm[data-skin="kk"] .tabs button, #fm[data-skin="kk"] .tabs a { text-transform: none; letter-spacing: 0; font-family: var(--f-head); font-weight: 700; font-size: 13.5px; border-radius: 10px; }
#fm[data-skin="kk"] .tabs button.on, #fm[data-skin="kk"] .tabs a.on { background: var(--grad); border-color: transparent; color: #fff; }
#fm[data-skin="kk"] .seg button { text-transform: none; font-weight: 700; font-size: 13px; }
#fm[data-skin="kk"] .chip { border-color: transparent; background: rgba(255, 90, 54, .14); color: var(--red); }
#fm[data-skin="kk"] .bdg { background: var(--grad); }
#fm[data-skin="kk"] .box, #fm[data-skin="kk"] .stat, #fm[data-skin="kk"] .choice, #fm[data-skin="kk"] .tcard { border-radius: 14px; }
#fm[data-skin="kk"] .wheel .ptr { border-top-color: #ff3d6e; }
/* a szélesebb betű miatt a meccsfejléc csapatnevei kisebbek, a címer a név mellett marad */
#fm[data-skin="kk"] .score .tn { font-size: 13.5px; overflow-wrap: normal; word-break: normal; }
@media (max-width: 520px) {
  #fm[data-skin="kk"] .score .tn { font-size: 12px; letter-spacing: -.02em; }
  #fm[data-skin="kk"] .title { font-size: 26px; }
}