/* ============================================================
Kalandország 2.0 — alap komponens-készlet ("akta" skin)
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* A LAP maga nem görget — a tartalom a BODY-n belül görög.
=======================================================
iOS-en a lap görgetése összecsukja a böngésző címsorát, amitől a látható
terület megnő. Ha a tartalom épp csak magasabb volt a kis nézetnél (a
városligeti 12. feladat pont ilyen), akkor a címsor eltűnésével hirtelen
ELFÉR — ilyenkor nincs mit görgetni, a görgetés pedig kényszerűen nullára áll:
a képernyő aljára érve visszaugrik a tetejére. Nem elrontott magasság: a lap
és a nézet magassága UGYANABBÓL a mozgásból változik, tehát semmilyen
min-height (dvh/svh/lvh) nem tudja megelőzni.
Belső görgetésnél a lap nem mozdul, a címsor nem csukódik össze, a nézet
mérete állandó — a görgetés kiszámítható. A rögzített válaszsáv és a modálok
a nézethez képest állnak, azokat ez nem érinti.
A görgető a BODY, nem az #app: az állapotsáv negatív margóval a teljes nézet
szélességére lép ki (`50vw`), és ezt csak olyan görgető tűri el, ami maga is
ilyen széles. Az #app-ra téve a sáv 640px-nél elvágódna. */
html { height: 100%; overflow: hidden; }
body {
height: 100%;
overflow-y: auto;
overflow-x: clip;
overscroll-behavior-y: contain;
}
body {
background: var(--k2-paper);
background-image: var(--k2-texture);
color: var(--k2-ink);
font-family: var(--k2-font-body);
font-size: 17px;
line-height: 1.55;
-webkit-text-size-adjust: 100%;
}
#app {
max-width: var(--k2-maxw);
margin: 0 auto;
/* Legalább a nézet magassága, hogy a lap-háttér rövid tartalomnál is kitöltse
— ez váltja a korábbi `min-height: 100dvh`-t. A body most fix magasságú
görgető, tehát a százalék pontosan a nézetet jelenti, és nem mozog együtt a
böngésző címsorával. */
min-height: 100%;
/* Alul pontosan a rögzített válaszsáv magasságát hagyjuk ki — a látható levegőt
a .k2-sheet saját 16px-es margója adja, ugyanaz, mint a kártya fölött. (Ha ide
is hozzáadnánk 16px-et, dupla lenne.) A sáv magasságát a motor méri
(--k2-answerbar-h), mert az eszköz-gombok tördelődhetnek; a 96px csak tartalék. */
padding: 0 14px var(--k2-answerbar-h, 96px);
}
/* ---------- állapotsáv ---------- */
.k2-statusbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: 6px;
/* Teljes szélességű sáv: kilép az #app max-width/padding kereteiből, hogy a
háttérkép ne látsszon mellette. A negatív margót ugyanakkora padding
kompenzálja, így a TARTALOM pontosan ott marad, ahol eddig volt. */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 8px calc(50vw - 50% + 8px);
background: var(--k2-paper);
background-image: var(--k2-texture);
border-bottom: 1px solid var(--k2-line);
font-family: var(--k2-font-ui);
font-size: 13px;
color: var(--k2-ink-soft);
}
.k2-statusbar-top {
display: flex;
align-items: center;
gap: 10px;
}
.k2-statusbar-top .k2-sb-name {
flex: 1;
font-weight: 700;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k2-statusbar-top .k2-sb-team { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A haladásjelző önmagában is működjön: a feladatokban is használjuk (glassroof-cat
kategória-jelzője). Korábban a display:flex a fejlécre volt szűkítve, ezért azon
kívül a szegmensek szélesség nélkül maradtak — vagyis láthatatlanul. */
.k2-progress {
display: flex;
gap: 4px;
align-items: center;
}
.k2-statusbar .k2-progress { flex: 1; }
.k2-progress i {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--k2-line);
transition: background var(--k2-t-fast);
}
.k2-progress i.done { background: var(--k2-success); }
.k2-progress i.now { background: var(--k2-accent); }
/* útvonal-térkép haladásjelző: állomás-pöttyök összekötő vonallal (docs/06) */
.k2-route {
flex: 1;
display: flex;
align-items: center;
position: relative;
height: 16px;
}
.k2-route::before {
content: "";
position: absolute;
left: 4px; right: 4px; top: 50%;
height: 2px;
background: var(--k2-line);
transform: translateY(-50%);
}
.k2-route i {
flex: 1;
position: relative;
height: 100%;
}
.k2-route i::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--k2-paper);
border: 2px solid var(--k2-line);
transform: translate(-50%, -50%);
transition: all var(--k2-t-fast);
}
.k2-route i.done::after {
background: var(--k2-success);
border-color: var(--k2-success);
}
.k2-route i.now::after {
width: 10px; height: 10px;
background: var(--k2-accent);
border-color: var(--k2-accent);
animation: k2-pulse 1.6s ease-in-out infinite;
}
@keyframes k2-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(140, 47, 36, .4); }
50% { box-shadow: 0 0 0 6px rgba(140, 47, 36, 0); }
}
.k2-mute {
background: none;
border: 0;
font-size: 15px;
cursor: pointer;
padding: 2px;
}
/* "akta megnyitása…" betöltőképernyő */
.k2-loading {
min-height: 70dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
}
.k2-loading-stamp {
width: 84px; height: 84px;
display: flex; align-items: center; justify-content: center;
border: 5px solid var(--k2-accent);
border-radius: 12px;
color: var(--k2-accent);
font-family: var(--k2-font-display);
font-size: 52px; font-weight: 700;
transform: rotate(-8deg);
animation: k2-pulse 1.6s ease-in-out infinite;
}
.k2-offline {
display: none;
color: var(--k2-danger);
font-weight: 700;
}
body.is-offline .k2-offline { display: inline; }
/* ---------- akta-kártya ---------- */
/* Keret nélküli téma (settings.theme.framed = false): a lap-kártyák keret/árnyék nélkül. */
body.k2-frameless
.k2-sheet { border-color: transparent; box-shadow: none; }
/* Kapu: nyelvválasztó gombsor — egyenlő szélességű, levegős gombok. */
.k2-langrow { display: flex; gap: 10px; margin: 0 0 16px; }
.k2-langrow .k2-btn { flex: 1 1 0; min-width: 0; padding: 10px 16px; text-align: center; }
/* Üveghatás (settings.theme.glass = true): áttetsző, elmosott kártya a háttérkép fölött. */
body.k2-glass .k2-sheet {
background-color: color-mix(in srgb, var(--k2-surface) var(--k2-glass-opacity, 68%), transparent);
backdrop-filter: blur(var(--k2-glass-blur, 8px));
-webkit-backdrop-filter: blur(var(--k2-glass-blur, 8px));
}
.k2-sheet {
background: var(--k2-surface);
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
box-shadow: 0 2px 10px rgba(0,0,0,.08);
padding: 20px 18px;
margin: 16px 0;
animation: k2-page-in var(--k2-t-page) ease-out;
}
@keyframes k2-page-in {
from { opacity: 0; transform: translateY(10px) rotate(.2deg); }
to { opacity: 1; transform: none; }
}
.k2-sheet > h2 {
position: relative; /* a fejléc-gomb (felolvasás) viszonyítási pontja */
font-family: var(--k2-font-display);
font-size: 21px;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--k2-line);
}
/* A bevezető címe MINDKÉT oldalon helyet tart a felolvasó gombnak, hogy a
teljes szélességhez képest középen maradjon, és hamarabb törjön, mint hogy
a gomb alá csúszna — ugyanaz a megoldás, mint a .k2-modal h3-nál. A gomb
a h3-nál 18px-cel beljebb ül a modál paddingja miatt; a lapon nincs ilyen
padding, ezért itt a szélre kerül. */
.k2-sheet > h2.van-gomb { padding-left: 48px; padding-right: 48px; }
.k2-sheet > h2 .k2-tts { right: 0; }
.k2-story { font-size: 17px; }
.k2-story p { margin: 0 0 12px; }
.k2-kicker {
font-family: var(--k2-font-ui);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--k2-ink-soft);
margin-bottom: 6px;
}
/* ---------- gombok ---------- */
.k2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--k2-tap);
padding: 10px 18px;
border: 1px solid transparent;
border-radius: var(--k2-radius);
background: var(--k2-accent);
color: var(--k2-accent-ink);
font-family: var(--k2-font-ui);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: filter var(--k2-t-fast), transform var(--k2-t-fast);
touch-action: manipulation;
}
.k2-btn:active { transform: scale(.98); }
.k2-btn:disabled { opacity: .45; cursor: not-allowed; }
.k2-btn.block { display: flex; width: 100%; }
/* Másodlagos gomb: KÖRVONALAS, a kiemelés színével — ahogy az 1.0-ban is
(btn-outline-warning, 22 helyen). Korábban átlátszó volt, --k2-line kerettel
és sima szövegszínnel: a vonalszín túl közel van a papírhoz, háttérkép fölött
pedig szinte eltűnt. A halvány alátét azért kell, hogy fotó fölött is
olvasható maradjon a felirat. */
.k2-btn.ghost {
background: color-mix(in srgb, var(--k2-surface) 72%, transparent);
color: var(--k2-accent);
border-color: var(--k2-accent);
}
/* Halk gomb: a kitöltés önmagában kevés, mert alig tér el a beviteli mezőétől.
A keret teszi gombbá — ez az affordancia, nem a szín. */
.k2-btn.quiet {
background: var(--k2-paper-deep);
color: var(--k2-ink);
border-color: var(--k2-line);
}
.k2-btn:focus-visible,
input:focus-visible,
.k2-opt:focus-visible {
outline: 3px solid var(--k2-focus);
outline-offset: 2px;
}
/* ---------- űrlap ---------- */
.k2-input {
width: 100%;
min-height: var(--k2-tap);
padding: 10px 12px;
font-family: var(--k2-font-display);
font-size: 18px;
text-align: center;
color: var(--k2-ink);
background: var(--k2-paper);
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
}
.k2-field-error {
color: var(--k2-danger);
font-family: var(--k2-font-ui);
font-size: 14px;
margin-top: 6px;
display: none;
}
.k2-field-error.show { display: block; }
/* A feladat-képernyő hibaüzenete a háttérkép fölött alig volt olvasható (csak
színes szöveg, háttér nélkül). Ezért saját, feltűnő sávot kap KÖZVETLENÜL a
rögzített válaszsáv fölött — annak mért magasságát használva. */
.k2-answer-error.show {
position: fixed;
left: 0;
right: 0;
bottom: var(--k2-answerbar-h, 96px);
z-index: 29;
margin: 0;
padding: 10px 14px;
background: var(--k2-danger);
color: #fff;
font-weight: 700;
text-align: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
animation: k2-err-in var(--k2-t-fast) ease-out;
}
@keyframes k2-err-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- válaszsáv (alul rögzített) ---------- */
.k2-answerbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 30;
background: var(--k2-paper-deep);
border-top: 1px solid var(--k2-line);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.k2-answerbar .inner {
max-width: var(--k2-maxw);
margin: 0 auto;
display: flex;
gap: 8px;
}
.k2-answerbar .k2-input { flex: 1; text-align: center; }
.k2-answerbar .k2-btn { flex: none; }
.k2-toolrow {
max-width: var(--k2-maxw);
margin: 0 auto 8px;
display: flex;
/* A gombok TÖRDELŐDNEK, ha nem férnek egy sorba. A sáv rögzített, a body
alsó térközét pedig a motor a sáv MÉRT magasságából írja
(--k2-answerbar-h), tehát a második sor nem takar el semmit — a tartalék
96px is ezért van. Enélkül a hatodik gomb egyszerűen levágódott: a
`body { overflow-x: clip }` miatt még odagörgetni sem lehetett, tehát egy
működő funkció vált elérhetetlenné. Hat gomb + angol feliratok
(„Technical info") egy 390px-es telefonra nem fér ki. */
flex-wrap: wrap;
gap: 8px;
}
.k2-toolrow .k2-btn {
/* `1 1 auto`, nem `1 1 0`: a törési pontot a felirat hossza döntse el, és a
megmaradó hely arányosan oszoljon. A 88px-es alsó korlát tartja meg a
tapintható méretet — alatta a felirat amúgy is tördelődne. */
flex: 1 1 auto;
min-width: 88px;
min-height: 38px;
padding: 6px;
font-size: 13px;
}
/* ---------- modal ---------- */
.k2-modal-back {
position: fixed;
inset: 0;
z-index: 50;
/* Mélyebb sötétítés: a modal háttere (--k2-surface) és a lapé (--k2-paper)
sötét témában csak két árnyalat — a felugró alig vált el a képernyőtől.
A lap hátrébb lépése az, ami a rétegzést valóban elmondja. */
background: rgba(12, 8, 4, .72);
display: flex;
align-items: flex-end;
justify-content: center;
animation: k2-fade var(--k2-t-fast) ease-out;
}
@keyframes k2-fade { from { opacity: 0; } to { opacity: 1; } }
.k2-modal {
width: 100%;
max-width: var(--k2-maxw);
max-height: 88dvh;
overflow: auto;
background: var(--k2-surface);
/* Kiemelt lap: a felső él világosabb, alatta vetett árnyék — ez a kettő
teszi „ráemelt lappá" a felugrót mindkét témában, palettacsere nélkül. */
border: 1px solid var(--k2-line);
border-top: 2px solid color-mix(in srgb, var(--k2-line) 70%, var(--k2-ink));
border-radius: 12px 12px 0 0;
box-shadow: 0 -10px 34px rgba(0, 0, 0, .5);
padding: 13px 18px calc(20px + env(safe-area-inset-bottom));
animation: k2-sheet-up var(--k2-t-page) ease-out;
}
@keyframes k2-sheet-up {
from { transform: translateY(24px); opacity: .6; }
to { transform: none; opacity: 1; }
}
.k2-modal h3 {
position: relative; /* a fejléc-gomb (felolvasás) viszonyítási pontja */
font-family: var(--k2-font-display);
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
/* Elválasztó a cím és a tartalom között, a modál TELJES szélességében:
a negatív oldalmargó kilép a .k2-modal 18px-es paddingjéből, az ugyanakkora
oldalpadding pedig visszahozza a szöveget — így a vonal a két szélig ér. */
margin: 0 -18px 12px;
padding: 0 18px 8px;
border-bottom: 1px solid var(--k2-line);
}
/* Fejléc-gombbal: MINDKÉT oldalon helyet tartunk a gombnak. Így a cím a
modál teljes szélességéhez képest marad középen (a padding szimmetrikus),
és a hosszú cím TÖRDELŐDIK, mielőtt a gomb alá érne — eddig összeértek. */
.k2-modal h3.van-gomb { padding-left: 56px; padding-right: 56px; }
.k2-modal .k2-modal-actions { margin-top: 16px; display: grid; gap: 8px; }
/* siker/hiba pecsét */
.k2-stamp {
display: block;
width: fit-content;
margin: 6px auto 14px;
padding: 8px 22px;
border: 3px solid var(--k2-success);
border-radius: 8px;
color: var(--k2-success);
font-family: var(--k2-font-display);
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
transform: rotate(-6deg);
animation: k2-stamp-in 380ms cubic-bezier(.2, 1.6, .4, 1);
}
.k2-stamp.bad { border-color: var(--k2-danger); color: var(--k2-danger); transform: rotate(4deg); }
@keyframes k2-stamp-in {
from { transform: rotate(-6deg) scale(2.1); opacity: 0; }
to { transform: rotate(-6deg) scale(1); opacity: 1; }
}
.k2-stamp.bad { animation-name: k2-stamp-in-bad; }
@keyframes k2-stamp-in-bad {
from { transform: rotate(4deg) scale(2.1); opacity: 0; }
to { transform: rotate(4deg) scale(1); opacity: 1; }
}
.k2-stats { list-style: none; margin: 0; padding: 0; font-family: var(--k2-font-ui); font-size: 15px; }
.k2-stats li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--k2-line); }
/* ---------- egy sorban tartott elemsor (közös megoldás) ----------
Ugyanaz a gond jött elő a tárcsáknál, a betűcelláknál, a rejtjeltáblánál és a
fej-kártyáknál: egy logikailag ÖSSZETARTOZÓ sor széttörik, mert az elemek fix
szélességűek. Mindegyiket másképp foltoztuk — ez az osztály egységesíti.
Az elv: az elemek OSZTOZNAK a soron (zsugorodnak), de van egy olvashatósági
alsó határuk. Ha az alá kellene menniük, a sor inkább GÖRGETHETŐ lesz —
sortörés helyett, mert a törés szétszakítja azt, ami összetartozik.
Állítható elemenként:
--k2-fitrow-min meddig zsugorodhat egy elem (alapból 34px)
--k2-fitrow-max meddig nőhet széles kijelzőn (alapból nincs korlát)
--k2-fitrow-gap a rés (alapból 8px) */
.k2-fitrow {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: var(--k2-fitrow-gap, 8px);
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.k2-fitrow > * {
flex: 1 1 0;
min-width: var(--k2-fitrow-min, 34px);
max-width: var(--k2-fitrow-max, none);
}
/* ---------- feladat-vezérlők ---------- */
/* tárcsák (counter) */
/* A tárcsák EGY SORBAN maradnak: egy hatjegyű szám hat tárcsája összetartozik,
tördelve pedig azt sugallná, hogy két külön csoport. A közös .k2-fitrow adja. */
.k2-dials {
--k2-fitrow-min: 40px;
--k2-fitrow-gap: 6px;
/* Felső korlát a tárcsa-cellának (tulajdonosi észrevétel, 2026-08-20):
enélkül két tárcsa szétcsúszott a sor két felébe — pedig egy KÖZÖS
számot adnak (pl. "58"), tehát egymás mellett a helyük. */
--k2-fitrow-max: calc(var(--k2-drum-item, 36px) * 2);
margin: 14px 0;
align-items: start;
justify-content: center;
}
/* A tárcsa és a benne lévő vezérlő DEFINIÁLT szélességű oszlop, nem automatikus.
Ez azért kell, mert a dob szélessége százalékban van megadva (hogy a sorral
együtt zsugorodjon) — automatikus oszlopban viszont a százaléknak nincs mihez
igazodnia, és a dob nullára esik. Amíg voltak léptető gombok, ŐK feszítették
ki az oszlopot; gombok nélkül a tárcsa egyszerűen eltűnt. */
.k2-dial {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
min-width: 0;
text-align: center;
}
/* A dob követi a tárcsa szélességét, de nem nő túl a saját méretén. */
.k2-dial .k2-drum { width: 100%; max-width: calc(var(--k2-drum-item) * 1.25); margin: 0 auto; }
.k2-dial button {
width: 100%; max-width: var(--k2-tap); height: var(--k2-tap);
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
background: var(--k2-paper-deep);
color: var(--k2-ink);
font-size: 20px;
cursor: pointer;
}
.k2-dial .val {
font-family: var(--k2-font-display);
font-size: 30px;
font-weight: 700;
min-width: var(--k2-tap);
text-align: center;
}
/* A léptetők doboza: alapból függőleges (▲ érték ▼), vízszintesen ◀ érték ▶.
A tárcsa felirata mindkét esetben a vezérlők FÖLÖTT marad. */
/* Rugalmas doboz, nem rács: a rácsban az AUTOMATIKUS oszlopnak nincs definiált
szélessége, így a dob százalékos szélessége nullára esett — ez tüntette el a
tárcsát, amikor a léptető gombok lekerültek mellőle (addig ŐK feszítették ki
az oszlopot). Rugalmas dobozban a százalék mindig a doboz szélességéhez mér. */
.k2-dial-ctrl { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.k2-dial-ctrl.horizontal { flex-direction: row; align-items: center; }
.k2-dial-ctrl.horizontal .k2-drum { flex: 1 1 auto; min-width: 0; }
/* vízszintes elrendezésnél a gombok a dob MELLETT állnak: ott ne nyúljanak */
.k2-dial-ctrl.horizontal button { width: var(--k2-tap); }
.k2-dial-sep { align-self: center; font-size: 30px; font-weight: 700; }
/* Forgatható tárcsa (számzár-dob). A számok a dob PALÁSTJÁN ülnek: minden elem
ki van forgatva és kitolva a sugárral, a dobot forgatva jön középre a kívánt
érték. A --k2-drum-item méretet a JS írja, a geometriából. */
.k2-drum {
--k2-drum-item: 36px;
position: relative;
width: calc(var(--k2-drum-item) * 1.25); /* keresztirányban szűk: a szám mellé
nem kell hely, csak a nézőke */
height: calc(var(--k2-drum-item) * 3); /* forgástengely mentén 3 érték fér ki */
perspective: 620px;
/* A keret ugyanazt a színt kapja, mint a kijelölt sávot határoló vonalak
(--k2-accent) — a --k2-line ehhez túl közel van a dob hátteréhez
(#c9b990 vs #e9dec4), és egyszerűen nem olvasódott keretnek. */
border: 1px solid var(--k2-accent);
/* ELLIPTIKUS sarok, nem kör: a százalékos border-radius a vízszintes sugarat
a szélességhez, a függőlegeset a magassághoz méri. A dob ~3:1 arányú, ezért
ugyanaz a szám a HOSSZÚ oldalon messzebbről indítja a letörést, a rövidebben
közelebbről (147x51-nél 37px / 13px, 45x108-nál 11px / 27px). Egyetlen
szabály mindkét elrendezésre — és nem lesz belőle kapszula, ami az azonos
sugarú, kör alakú lekerekítés hibája volt. */
border-radius: 25%;
background: var(--k2-paper-deep);
overflow: hidden;
cursor: grab;
touch-action: none; /* a húzás a dobot forgassa, ne az oldalt görgesse */
user-select: none;
outline-offset: 2px;
}
.k2-drum.horizontal {
width: calc(var(--k2-drum-item) * 3.2);
/* A saját max-width KELL. A `.k2-dial .k2-drum` 1,25 elemnyire fogja a dobot —
az a FÜGGŐLEGES dob mérete, ahol tényleg csak a nézőke kell. Vízszintesen
viszont 3,2 elemnyi a szélesség, hogy a két szomszéd érték kikandikáljon a
széleken. A szűkebb korlát nyert, és csak a középső szám látszott. */
max-width: calc(var(--k2-drum-item) * 3.2);
height: calc(var(--k2-drum-item) * 1.1);
touch-action: pan-y; /* vízszintes dobnál a függőleges lapozás menjen tovább */
}
.k2-drum.dragging { cursor: grabbing; }
.k2-drum-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform .18s cubic-bezier(.2, .9, .3, 1);
}
.k2-drum.dragging .k2-drum-inner { transition: none; }
.k2-drum-item {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--k2-font-display);
font-size: 26px;
font-weight: 700;
color: var(--k2-ink);
backface-visibility: hidden; /* a dob túloldala ne látsszon át */
}
/* A perem felé halványodás adja a hengerességet — elemenkénti számolás helyett
egyetlen maszk a nézőkén, így forgatás közben nincs újrarajzolási költség. */
.k2-drum::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
/* A szomszédos érték a nézőke ~80%-ánál jelenik meg (a mértant a motor
számolja: a dob eleje a képsíkon van). A fátyol ezért csak 92%-nál fed
teljesen — 82%-nál még csak félig, tehát a szomszéd olvasható marad, de
láthatóan másodlagos. Korábban itt már teljes volt a fedés, és a szélső
számok eltűntek. */
background: linear-gradient(var(--k2-paper-deep) 8%, transparent 33%, transparent 67%, var(--k2-paper-deep) 92%);
}
.k2-drum.horizontal::after {
background: linear-gradient(90deg, var(--k2-paper-deep) 8%, transparent 33%, transparent 67%, var(--k2-paper-deep) 92%);
}
/* A kiválasztott érték sávja — ez jelöli, melyik állás "él". */
.k2-drum::before {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
border-color: var(--k2-accent);
border-style: solid;
inset: calc(50% - var(--k2-drum-item) / 2) 0;
border-width: 1px 0;
}
.k2-drum.horizontal::before {
inset: 0 calc(50% - var(--k2-drum-item) / 2);
border-width: 0 1px;
}
@media (prefers-reduced-motion: reduce) {
.k2-drum-inner { transition: none; }
}
/* Gyűrűzár (rings): egymásba ágyazott, forgatható gyűrűk. A rajz SVG, a
színei ezért innen jönnek — a pálya témájával együtt váltanak. */
.k2-rings { max-width: 340px; margin: 14px auto; text-align: center; }
.k2-rings-svg {
width: 100%;
height: auto;
display: block;
touch-action: none; /* a húzás a gyűrűt forgassa, ne az oldalt görgesse */
user-select: none;
cursor: grab;
}
/* A gyűrű sávja: alapban épp csak elválik a laptól; kijelölve a keret-színnel
világít, mert a ⟲/⟳ gombok ERRE a gyűrűre hatnak — látszania kell, melyikre. */
.k2-ring-band { fill: none; stroke: var(--k2-paper-deep); }
.k2-ring-band.sel { stroke: color-mix(in srgb, var(--k2-accent) 22%, var(--k2-paper-deep)); }
.k2-ring-sep { fill: none; stroke: var(--k2-line); stroke-width: 1; }
.k2-ring-glyph {
font-family: var(--k2-font-display);
font-weight: 700;
fill: var(--k2-ink);
}
/* A forgás a csoport CSS-transzformja: az átmenet adja a "kattanás" élményét.
A transform-origin a nézetdoboz origója — a gyűrűk középpontja. */
.k2-ring-g { transition: transform .25s cubic-bezier(.2, .9, .3, 1); transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) {
.k2-ring-g { transition: none; }
}
.k2-ring-marker { fill: var(--k2-accent); }
.k2-ring-marker-line {
stroke: var(--k2-accent);
stroke-width: 1.5;
stroke-dasharray: 4 4;
opacity: .7;
}
.k2-ring-count {
font-family: var(--k2-font-display);
font-size: 26px;
font-weight: 700;
fill: var(--k2-ink);
}
.k2-ring-count.over { fill: var(--k2-accent); }
.k2-ring-ctrl { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.k2-ring-ctrl button { min-width: var(--k2-tap); font-size: 22px; }
/* opciórács (choice / betűzet) */
.k2-optgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
/* Az oszlopszám-osztályok teljes sora. A cols-1 és a cols-4 hiányzott, pedig a
motor kérte őket (fej-kártyák, illetve a számláló képrácsa) — hiányukban a
rács csendben visszaesett az alapértelmezett 5 oszlopra, és 8 kártya 5+3-ban
állt fel 4+4 helyett. */
.k2-optgrid.cols-1 { grid-template-columns: 1fr; }
.k2-optgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.k2-optgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.k2-optgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.k2-optgrid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.k2-optgrid.cols-6 { grid-template-columns: repeat(6, 1fr); }
/* Fej-kártyák: a `cell_rows` PARANCS, nem javaslat.
Volt egy kísérletem rugalmas tördelésre (`auto-fit` + alsó méret-korlát),
hogy a túl kicsi arcképeket megmentse. Rossz volt: az `auto-fit` az
oszlopszámot a KORLÁTBÓL számolja, nem a kért értékből — tehát vagy a
magyar 4+4 törik szét 3+1-re, vagy az angol 5-ös sor marad szűk. A kettő
ugyanazon a szélességen nem fér meg egy szabályban.
A sorbontás ezért marad a tartalomé: a `cell_rows` mondja meg, és a
validátor szól, ha egy sor annyira hosszú, hogy a képek olvashatatlanná
válnak (`heads_row_too_wide`). Az elrendezést nem vesszük el attól, aki
a feladatot megtervezte. */
/* Fordítható kártya: a hátoldal a kártya MÖGÖTT van, nem a kép alatt. Így a
kártya magassága nem ugrik meg a szám megjelenésekor. */
.k2-flipcard { perspective: 700px; cursor: pointer; }
.k2-flipcard-inner {
position: relative;
transform-style: preserve-3d;
transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.k2-flipcard.flipped .k2-flipcard-inner { transform: rotateY(180deg); }
.k2-flipcard-face { backface-visibility: hidden; border-radius: 4px; overflow: hidden; }
.k2-flipcard-face.front { position: relative; } /* ez adja a kártya magasságát */
.k2-flipcard-face.front img { width: 100%; display: block; }
.k2-flipcard-face.back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
}
/* A fej-kártyák hátlapja két félre oszlik (felső/alsó szám). Ez CSAK rájuk
vonatkozik — a személykártyák hátlapja szöveges, nem számpár. */
.k2-headcell .k2-flipcard-face.back {
display: grid;
grid-template-rows: 1fr 1fr;
border: 1px solid var(--k2-line);
}
.k2-flipcard-num {
display: grid;
place-items: center;
font-family: var(--k2-font-display);
font-weight: 700;
font-size: clamp(16px, 5.5vw, 30px);
line-height: 1;
}
.k2-flipcard-num.top { background: var(--k2-accent); color: var(--k2-accent-ink); }
.k2-flipcard-num.bottom { background: var(--k2-success); color: var(--k2-paper); }
.k2-flipcard:focus-visible { outline: 2px solid var(--k2-accent); outline-offset: 2px; border-radius: 6px; }
/* Személykártya (choice flipcard): elöl név + kép + "Részletek…", hátul ugyanaz
a név + a leírás + "Vissza". A kártyára koppintás VÁLASZT, a gombok fordítanak. */
.k2-pcard {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
background: var(--k2-surface);
overflow: hidden;
}
.k2-pcard-head {
/* MINDIG két sornyi hely, akkor is, ha a név egy sorba fér. Enélkül a rövid
nevű kártya fejléce alacsonyabb, a kép feljebb csúszik, és a kártyák
egymáshoz képest elcsúsznak. A név középen áll, tehát egy sornál sem lóg el.
A tartalomban NEM lehet
-rel tördelni: ez a mező a válasz értéke is. */
display: grid;
place-items: center;
text-align: center;
line-height: 1.2;
min-height: calc(2 * 1.2em + 12px);
padding: 6px 8px;
font-family: var(--k2-font-display);
font-weight: 700;
font-size: 15px;
color: var(--k2-ink);
border-bottom: 1px solid var(--k2-line);
}
.k2-pcard.sel .k2-pcard-head { background: var(--k2-accent); color: var(--k2-accent-ink); }
.k2-pcard-body {
flex: 1;
display: grid;
place-items: center;
padding: 8px;
min-height: 0;
}
.k2-pcard-body.text {
display: block;
overflow: auto; /* a hosszú leírás görgethető, ahogy az 1.0-ban */
text-align: left;
font-size: 13px;
line-height: 1.45;
color: var(--k2-ink);
}
.k2-pcard-body img { max-width: 78%; border-radius: 50%; border: 2px solid var(--k2-accent); }
.k2-pcard-foot { padding: 6px; border-top: 1px solid var(--k2-line); }
.k2-pcard-foot .k2-btn { width: 100%; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.k2-flipcard.sel { outline: 3px solid var(--k2-accent); outline-offset: 2px; border-radius: 8px; }
/* Fej-cella: a kártya, a fordítógomb és a betűmező együtt — ez az egység mozog
a sorba rakásnál. */
.k2-headcell { position: relative; }
.k2-flipbtn {
position: absolute;
top: 4px; right: 4px;
width: 26px; height: 26px;
display: grid; place-items: center;
border: 1px solid var(--k2-line);
border-radius: 50%;
background: var(--k2-surface);
color: var(--k2-ink-soft);
font-size: 14px; line-height: 1;
cursor: pointer;
}
/* Megfordított kártyán a gomb a KÉT SZÁM KÖZÉ áll. Fent a felső számot takarta
— kis kártyán teljesen —, és épp azt, amiért a játékos megfordította. A
hátlap két fele közti varraton viszont nincs mit eltakarni. */
.k2-headcell:has(.k2-flipcard.flipped) .k2-flipbtn {
top: 50%;
transform: translateY(-50%);
}
/* A 2. fázisban a kártya törzse a rendezésé: ezt a fogó-kurzor és a kijelölés
jelzi. Szöveges magyarázat nélkül is érthető, és nem kell fordítani. */
.k2-headcell.k2-sortable .k2-flipcard { cursor: grab; }
.k2-headcell.sel { outline: 3px solid var(--k2-accent); outline-offset: 3px; border-radius: 6px; }
/* Betűmező a fej alatt. Eltalált betűnél nem csak halvány zöld háttér, hanem
ZÖLD KERET és sötétebb betűszín is — a puszta háttérszín könnyen elsikkad. */
.k2-headletter {
width: 100%;
height: 36px;
margin-top: 4px;
text-align: center;
font-family: var(--k2-font-display);
font-weight: 700;
font-size: 18px;
border: 1px solid var(--k2-line);
border-radius: 4px;
background: var(--k2-paper);
color: var(--k2-ink);
transition: background var(--k2-t-fast), border-color var(--k2-t-fast);
}
.k2-headletter.ok {
background: var(--k2-success-soft);
border: 2px solid var(--k2-success);
color: var(--k2-success);
}
/* rövid felvillanás a találat pillanatában */
.k2-headletter.pop { animation: k2-pop .38s ease-out; }
@keyframes k2-pop {
0% { transform: scale(1); box-shadow: 0 0 0 0 var(--k2-success); }
40% { transform: scale(1.14); box-shadow: 0 0 0 6px transparent; }
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
/* Teljes fordulat a fázisváltáskor: a hátoldal felvillan, de a kártya arccal áll
meg. Nem a .flipped osztályt használjuk, mert az MEGÁLLNA a számos oldalon. */
.k2-flipcard.k2-spin .k2-flipcard-inner { animation: k2-spin360 .8s cubic-bezier(.3, .8, .3, 1); }
@keyframes k2-spin360 {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.k2-flipcard.k2-spin .k2-flipcard-inner { animation: none; }
}
/* A 2. fázis jelzése: a rendezhető cellák bal felső sarkában csere-jel. Ez az
egyetlen tartósan látható nyoma annak, hogy a kártyák mostantól mozgathatók. */
.k2-headcell.k2-sortable::after {
content: '\21c4';
position: absolute;
top: 4px; left: 4px;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--k2-accent);
color: var(--k2-accent-ink);
font-size: 15px; line-height: 1;
pointer-events: none;
}
/* Az átvezető mondat halkan úszik be, hogy észre lehessen venni. */
.k2-phase2-in { animation: k2-phase2 .5s ease-out; }
@keyframes k2-phase2 {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* A csere közben az elem a helyére csúszik (FLIP-animáció). Minden átrendezős
feladat ezt használja: fej-kártyák, kirakó-darabok, feliratos képcsere. */
.k2-swapping {
transition: transform .34s cubic-bezier(.2, .9, .3, 1);
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.k2-headletter.pop { animation: none; }
.k2-swapping { transition: none; }
.k2-phase2-in { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.k2-flipcard-inner { transition: none; }
}
.k2-opt {
min-height: var(--k2-tap);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
background: var(--k2-paper);
font-family: var(--k2-font-display);
font-size: 17px;
cursor: pointer;
user-select: none;
transition: background var(--k2-t-fast), border-color var(--k2-t-fast);
text-align: center;
}
/* Pár-jelölő: a párosított elemek MINDKÉT tagján ugyanaz a szám és szín. A szín
magában kevés volt — négy pár után ismétlődik, fénykép mellett a keret alig
látszik, és színtévesztéssel megkülönböztethetetlen. A szám a dobozon BELÜL
ül, hogy a rács ne vághassa le. */
.k2-par-jel {
position: absolute;
top: 3px;
right: 3px;
min-width: 22px;
height: 22px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
font-family: var(--k2-font-ui);
font-size: 13px;
font-weight: 700;
line-height: 1;
/* A szám színe a palettával EGYÜTT fordul: világos háttéren fehér, sötét
módban (ahol a pár-színek világosak) sötét. */
color: var(--k2-par-ink, #fff);
box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.k2-opt.sel { border-color: var(--k2-accent); background: var(--k2-danger-soft); font-weight: 700; }
.k2-opt.good { border-color: var(--k2-success); background: var(--k2-success-soft); }
.k2-opt img { max-width: 100%; border-radius: 4px; }
/* lista-választó */
.k2-optlist { display: grid; gap: 8px; margin: 12px 0; text-align: left; }
.k2-optlist .k2-opt { justify-content: flex-start; font-family: var(--k2-font-body); }
/* Betűépítő CÉLMEZŐJE — ide kell tenni a betűket.
A keret korábban a `--k2-line`-ból dolgozott, ami több pályán nagyon halvány
(budaivár: #bfe0e6), és az áttetsző üveg-kártyán gyakorlatilag eltűnt.
A javítás CSAK a szín ereje, nem a vonal súlya: marad az 1px-es szaggatott
keret, de a SZÖVEGSZÍNBŐL hígítva — az minden témában olvasható, míg a
`line` egy pályánként hangolt, halvány dísz-szín. Vastag vonal és kitöltött
panel helyett épp csak annyi, hogy a doboz széle látszódjon. */
.k2-drop {
display: flex;
flex-wrap: wrap;
gap: 4px;
min-height: 52px;
padding: 6px;
border: 1px dashed color-mix(in srgb, var(--k2-ink-soft) 55%, transparent);
border-radius: var(--k2-radius);
/* alig érzékelhető árnyalat: elválik a kártyától, de nem lesz belőle tábla */
background: color-mix(in srgb, var(--k2-ink-soft) 4%, transparent);
}
/* A doboz végén álló, mindig szabad hely — ez fogadja a következő betűt.
Halkabb a doboz kereténél: jelzés, nem külön elem. */
.k2-opt-hely {
flex: 1 0 38px;
min-height: 38px;
border: 1px dashed color-mix(in srgb, var(--k2-ink-soft) 32%, transparent);
border-radius: var(--k2-radius);
}
/* cellás beírás (char-grid) */
/* A betűcellák sora is összetartozik (egy szó betűi) — a közös .k2-fitrow elv
szerint zsugorodnak, és inkább görgethetők, mint hogy kettétörjenek.
A cell_rows továbbra is felülírja, ha a tartalom SZÁNDÉKOSAN tördel. */
/* Az alsó korlát a CELLASZÁMHOZ igazodik, nem fix.
Fix 34px-mel tíz cella 10*34 + 9*8 = 412px-et kért, miközben 375px-es
kijelzőn ~347px a hely: a 10. cella lelógott, és a játékos KILENC mezőt
látott egy tízbetűs megfejtéshez. Görgetni lehetett volna, de semmi nem
jelezte, hogy van még — a hiányzó cella nem létezőnek látszott.
Így a cella pontosan annyira zsugorodik, amennyi hely jut rá, de 20px alá
nem megy. A darabszámot a renderelő írja be (--k2-cells), mert csak ő tudja. */
.k2-cells {
/* Középre igazítás auto margóval, NEM justify-content-tel — de csak itt, a
betűcelláknál. A `justify-content: center` túlcsorduláskor mindkét oldalon
kilóg, és a bal oldalhoz a görgetés nem tud eljutni (nem megy negatívba),
tehát pont az ELSŐ cella válik elérhetetlenné. Auto margóval: ha van hely,
középen van; ha nincs, balról indul és végig görgethető.
A .k2-dials NEM kapja meg: ott a tárcsák szélessége máshogy áll össze, és
a globális átállítás elvitte a vízszintes dob szomszéd-értékeit. */
justify-content: flex-start;
--k2-fitrow-gap: 6px;
--k2-fitrow-min: clamp(20px,
calc((100% - (var(--k2-cells, 6) - 1) * 6px) / var(--k2-cells, 6)),
34px);
--k2-fitrow-max: 72px;
/* A cella EGYETLEN, közös szélessége. Minden mező egy karaktert vár, tehát
egyformának is kell lennie — több sorra tördelve is. A méretet a LEGHOSSZABB
sor adja (a `--k2-cells` azt hordozza), és minden sor ezt használja; a
rövidebb sor nem nyúlik szét, hanem középre kerül (auto margó).
72px-nél megáll: egy egykarakteres mezőnek ennél nagyobbnak nincs értelme. */
--k2-cell-w: clamp(20px,
calc((100% - (var(--k2-cells, 6) - 1) * 6px) / var(--k2-cells, 6)),
72px);
margin: 14px 0;
}
.k2-cells > :first-child { margin-inline-start: auto; }
.k2-cells > :last-child { margin-inline-end: auto; }
/* Fix szélesség, nem növekedés: enélkül a háromcellás sor 72px-esre nyúlt,
miközben a kilenccellás 29px-en állt — ugyanannak a megfejtésnek a betűi
két különböző méretben. */
.k2-cells > .k2-cell { flex: 0 0 var(--k2-cell-w); max-width: none; }
/* A cella 40px-ig zsugorodik és 72px-ig nő. A tördelést a flex-basis dönti el,
ezért fontos, hogy az a KISEBBIK méret legyen: fix 72px-nél négy cella már
375px-en (iPhone X) átment a következő sorba, 40-es alappal viszont egy
sorban marad, és utána nő vissza a helykihasználásig. */
.k2-cell { display: grid; gap: 6px; justify-items: center; flex: 1 1 40px; max-width: 72px; }
.k2-cell img { width: 100%; border-radius: 4px; border: 1px solid var(--k2-line); }
.k2-cell input {
width: 100%; height: var(--k2-tap);
/* iOS Safari saját vízszintes paddingot és belső mezőstílust ad a beviteli
mezőnek. Egy keskeny cellában ez elviszi a tartalomdoboz nagy részét, és a
beírt betű egyszerűen kicsúszik belőle — a Chrome mobil-emulációja viszont
nem ezt rajzolja, ezért ott hibátlannak látszott. A `min-width: 0` azért
kell, mert a mező alapértelmezett belső szélessége nem engedné zsugorodni. */
padding: 0;
min-width: 0;
-webkit-appearance: none;
appearance: none;
text-align: center;
font-family: var(--k2-font-display);
/* A cella keskeny kijelzőn 40px köré szűkül; a fix 24px ott már nem fér el.
A beírt betű így a cellához igazodik, és marad olvasható. */
font-size: clamp(16px, 5vw, 22px);
font-weight: 700;
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
background: var(--k2-paper);
color: var(--k2-ink);
}
/* A helykitöltő SORSZÁM (1. … 12.) nem a beírandó betű: halkabb és kisebb, és
nem a display-betűtípussal, ami félkövéren tömzsi. Három karakter ("12.")
különben szétfeszíti a cellát. */
.k2-cell input::placeholder {
font-family: var(--k2-font-ui);
font-size: 12px;
font-weight: 400;
color: var(--k2-ink-soft);
opacity: .75;
}
.k2-cell input.good { background: var(--k2-success-soft); border-color: var(--k2-success); }
/* A fókuszjel BEFELÉ rajzolódik, nem kifelé.
A cellasor görgethető doboz (overflow-x: auto), ami levágja mindazt, ami a
dobozon kívülre kerül — a szélső cella fókuszjelének fele így eltűnt. Keskeny
cellánál ráadásul a kifelé rajzolt 3px+2px belelógott a szomszéd résébe, és
a jelölés összemosódott. Befelé rajzolva a cellán belül marad, tehát sem
levágni, sem takarni nem tud semmi. */
.k2-cells input:focus-visible {
outline-width: 2px;
outline-offset: -2px;
}
/* fájlkezelő-nézet (choice, icon: file) — az ablakkeret rajzolt, nem kép */
.k2-filewin {
margin: 14px 0;
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
overflow: hidden;
background: var(--k2-paper);
box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}
.k2-filewin-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: var(--k2-paper-deep);
border-bottom: 1px solid var(--k2-line);
color: var(--k2-ink-soft);
font-family: var(--k2-font-ui);
font-size: 13px;
}
.k2-filewin-nav { letter-spacing: 4px; }
.k2-filewin-title { flex: 1; text-align: center; font-family: var(--k2-font-display); }
/* három ablakpont: egy elem, a másik kettő box-shadow — nem foglal helyet */
.k2-filewin-dots {
width: 7px; height: 7px; border-radius: 50%;
background: var(--k2-line);
box-shadow: 11px 0 0 var(--k2-line), 22px 0 0 var(--k2-line);
margin-right: 22px;
}
.k2-filewin-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 6px;
padding: 10px;
}
.k2-file {
display: grid;
justify-items: center;
gap: 4px;
padding: 8px 4px;
border: 1px solid transparent;
border-radius: var(--k2-radius);
cursor: pointer;
text-align: center;
transition: background var(--k2-t-fast), border-color var(--k2-t-fast);
}
.k2-file:hover { background: var(--k2-paper-deep); }
.k2-file.sel { border-color: var(--k2-accent); background: var(--k2-danger-soft); font-weight: 700; }
.k2-file-icon { display: block; color: var(--k2-ink-soft); }
.k2-file.sel .k2-file-icon { color: var(--k2-accent); }
/* a fájlnevek hosszúak és nincs bennük szóköz — muszáj bárhol törni */
.k2-file-name { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
/* fotó-sorozat */
.k2-photo-stage { display: grid; grid-template-columns: var(--k2-tap) 1fr var(--k2-tap); gap: 8px; align-items: center; margin: 12px 0; }
.k2-photo-stage img { width: 100%; max-width: 240px; margin: 0 auto; display: block; border: 1px solid var(--k2-line); border-radius: var(--k2-radius); }
.k2-photo-stage .k2-btn { min-width: var(--k2-tap); padding: 8px; }
.k2-photo-topbot { display: flex; justify-content: center; margin: 8px 0; }
/* időzített kvíz */
.k2-timer { width: 100%; height: 10px; border-radius: 5px; background: var(--k2-line); overflow: hidden; margin: 10px 0; }
.k2-timer i { display: block; height: 100%; width: 100%; background: var(--k2-accent); transition: width 1s linear; }
.k2-quiz-q { text-align: left; margin: 14px 0; }
.k2-quiz-q .q { font-weight: 700; margin-bottom: 6px; }
/* memória-felvillantás */
.k2-flash-grid { display: grid; grid-template-columns: repeat(var(--k2-flash-cols, 2), 1fr); gap: 10px; margin: 12px 0; }
.k2-flash-item { position: relative; cursor: pointer; }
.k2-flash-item img { width: 100%; border-radius: var(--k2-radius); border: 1px solid var(--k2-line); }
.k2-flash-item ul {
position: absolute; inset: 0;
margin: 0; padding: 10px 10px 10px 26px;
background: var(--k2-surface);
border: 1px solid var(--k2-accent);
border-radius: var(--k2-radius);
font-size: 14px;
text-align: left;
overflow: auto;
display: none;
}
.k2-flash-item.revealed ul { display: block; }
/* jelölőnégyzetes lista */
.k2-checks { display: grid; gap: 6px; text-align: left; margin: 12px 0; font-family: var(--k2-font-ui); font-size: 15px; }
.k2-checks label {
display: flex; gap: 10px; align-items: center;
min-height: var(--k2-tap);
padding: 4px 10px;
border: 1px solid var(--k2-line);
border-radius: var(--k2-radius);
background: var(--k2-paper);
}
.k2-checks input { width: 22px; height: 22px; accent-color: var(--k2-accent); }
/* staged-choice számtábla */
.k2-marktable { width: 100%; border-collapse: collapse; margin: 12px 0; }
.k2-marktable td { border: 1px solid var(--k2-line); padding: 8px; vertical-align: middle; text-align: left; font-size: 15px; }
.k2-marktable .digits { white-space: nowrap; }
/* A számtáblában a jegyek mellett még a magyarázó szöveg oszlopa is elfér(ne):
6 jegy 38px-esével ~274px, a hasznos hely 375px-es kijelzőn ~290px. A jegyek
ezért itt keskenyebbek lehetnek — a nowrap marad, mert a szám egyben olvasandó. */
.k2-marktable .k2-digit {
width: clamp(22px, 6.4vw, 38px);
height: clamp(22px, 6.4vw, 38px);
margin-right: 4px;
font-size: clamp(13px, 3.4vw, 20px);
}
.k2-digit {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; margin-right: 6px;
border: 1px solid var(--k2-line); border-radius: 6px;
font-family: var(--k2-font-display); font-size: 20px; font-weight: 700;
cursor: pointer; user-select: none;
}
.k2-digit.mark { border-color: var(--k2-accent); background: var(--k2-danger-soft); }
.k2-digit.good { border-color: var(--k2-success); background: var(--k2-success-soft); }
/* Körhintás galéria: a kép nagyban, alatta a sorszáma — a válasz arra hivatkozik. */
.k2-gallery-big { max-width: 100%; max-height: 240px; border-radius: 4px; display: block; margin: 0 auto; }
.k2-gallery-num {
font-family: var(--k2-font-display);
font-size: 22px;
font-weight: 700;
color: var(--k2-ink);
margin-top: 6px;
}
/* Choice carousel: sín, amit eltolunk — nem laponkénti újraépítés. A takarásban
lévő lapok is felépülnek, csak kilógnak a nézőkéből. */
.k2-carousel-view { overflow: hidden; border-radius: var(--k2-radius); touch-action: pan-y; }
.k2-carousel-track {
display: flex;
transition: transform .32s cubic-bezier(.2, .9, .3, 1);
will-change: transform;
}
.k2-carousel-track.dragging { transition: none; }
/* Minden lap teljes szélességű, akármi is van benne (opció-kártya, meghatározás). */
.k2-carousel-track > * { flex: 0 0 100%; min-width: 0; }
.k2-carousel-nav {
display: flex; align-items: center; justify-content: center;
gap: 14px; margin-top: 10px;
}
/* Pöttyös helyzetjelző — kevés lapnál beszédesebb, mint egy "3 / 5" számláló,
és kattintva ugorhatsz is vele (ahogy az 1.0-ban). */
.k2-carousel-dots { display: flex; gap: 8px; align-items: center; }
.k2-carousel-dot {
width: 10px; height: 10px; padding: 0;
border: 1px solid var(--k2-line);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background var(--k2-t-fast), border-color var(--k2-t-fast);
}
.k2-carousel-dot.on { background: var(--k2-accent); border-color: var(--k2-accent); }
/* A körhinta lapjai EGYFORMA magasak: enélkül a doboz ugrál, ahogy a rövid és a
hosszú meghatározás közt lapozol (28 és 89 karakter között). Az 1.0 ugyanezért
kötötte fixre a magasságot. A szöveg függőlegesen középen áll, és ha mégis
hosszabb, görgethető. */
/* A lapok magassága a LEGMAGASABBHOZ igazodik magától: a sín flex-sor, az elemek
alapból nyúlnak. Fix magasság és görgetés nem kell — sőt kifejezetten ártott:
a hosszabb meghatározásnál a "Térkép" gomb kicsúszott a lap aljára, és nem
látszott. */
.k2-carousel-part {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 8px 10px;
text-align: center;
}
.k2-carousel-part > p { margin: 0; }
/* Betűrács: a cellák MEGTARTJÁK a méretüket, és a rács oldalirányban görgethető
— ahogy az 1.0-ban is. Zsugorítva 13 oszlop 19px-es cellákká esne szét, ami
olvashatatlan; egy keresztrejtvénynél a görgetés a helyes megoldás.
A lényeg, hogy CSAK A RÁCS görögjön, ne az oldal: ezt a max-width:100% és a
soron lévő width:max-content adja. Enélkül a 426px-es sor kiszélesíti az egész
lapot, amitől a rögzített válaszsáv is elcsúszik. */
.k2-wordgrid {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding-bottom: 6px;
margin: 12px 0;
}
.k2-wordgrid-row { display: flex; gap: 3px; width: max-content; margin: 3px 0; }
/* Címkés változat (char-grid rows): a meghatározás a sor elején, utána az előtét,
ami pontosan annyi cellányi, hogy az oszlopok egy vonalban maradjanak. */
.k2-wordgrid-label { min-width: 64px; flex: none; text-align: left; }
.k2-wordgrid-pre { flex: none; width: calc((30px + 3px) * var(--k2-pre, 0)); }
.k2-wordcell {
flex: none;
width: 30px;
height: 34px;
text-align: center;
font-family: var(--k2-font-display);
font-weight: 700;
font-size: 17px;
border: 1px solid var(--k2-line);
border-radius: 4px;
background: var(--k2-paper);
color: var(--k2-ink);
}
.k2-wordcell.off { visibility: hidden; }
.k2-wordcell.sol { background: var(--k2-danger-soft); border-color: var(--k2-accent); }
.k2-wordcell::placeholder { font-family: var(--k2-font-ui); font-size: 10px; color: var(--k2-ink-soft); opacity: .7; }
.k2-carousel-part { text-align: left; padding: 0 4px; }
@media (prefers-reduced-motion: reduce) {
.k2-carousel-track { transition: none; }
}
/* Csillagos értékelés. Öt csillag egymás mellett; a méret a kijelzőhöz igazodik,
hogy 375px-en is elférjen (5 x 30px + térköz ~ 206px). */
.k2-rateblock { margin-bottom: 14px; }
.k2-stars { display: flex; justify-content: center; gap: 4px; }
.k2-star {
background: none; border: 0; padding: 2px 4px;
font-size: clamp(28px, 8vw, 38px); line-height: 1;
color: var(--k2-line);
cursor: pointer;
transition: color var(--k2-t-fast), transform var(--k2-t-fast);
}
.k2-star.on { color: var(--k2-accent); }
.k2-star:active { transform: scale(0.92); }
.k2-star:focus-visible { outline: 2px solid var(--k2-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
.k2-star { transition: none; }
}
/* Blokk-szintű szövegtartalom (technikai infó példatáblái). A bekezdés-térköz
ugyanaz, mint a -nél, hogy a sima és a táblás bekezdés együtt jól nézzen ki. */
.k2-rich { margin: 0 0 12px; }
.k2-rich > :last-child { margin-bottom: 0; }
/* Példarács: a Playfair-szabályok szemléltetése. Az oszlopok osztoznak a helyen,
így keskeny kijelzőn is elfér — ugyanaz az elv, mint a rejtjeltáblánál. */
.k2-ex {
border-collapse: separate; border-spacing: 3px;
width: 100%; max-width: 260px; margin: 6px auto;
table-layout: fixed;
}
.k2-ex td {
aspect-ratio: 1;
text-align: center; vertical-align: middle;
border: 1px solid var(--k2-line); border-radius: 4px;
font-family: var(--k2-font-display); font-weight: 700;
font-size: clamp(11px, 3vw, 15px);
color: var(--k2-ink-soft);
}
.k2-ex td.on { color: var(--k2-accent); border-color: var(--k2-accent); }
.k2-ex-map {
text-align: center; font-family: var(--k2-font-display);
font-size: 15px; margin: 4px 0 0;
}
/* A gyűjtőhöz tartozó kérdés. A gyűjtő dobozában van, nem a feladat kártyáján:
így látszik, hogy erre a kérdésre a rekeszbe kell válaszolni, nem a feladat
válaszmezőjébe. */
.k2-final-q {
margin: 8px 0 10px;
font-family: var(--k2-font-body);
font-size: 15px;
color: var(--k2-ink);
}
/* Playfair */
/* A tábla oszlopszáma nyelvenként más: a magyar 9 oszlopos, az angol/német 6.
Fix 40px csempével a magyar 384px-et kért (9x40 + 8x3), ami 375px-es kijelzőn
túllógott. A csempe ezért osztozik a soron: lefelé zsugorodik, fölfelé 40px-nél
megáll, és a sor középre igazodik — így 6 és 9 oszlopnál is jó, anélkül hogy a
CSS-nek tudnia kellene az oszlopszámot. */
.k2-pf-table { display: grid; gap: 3px; width: 100%; margin: 12px auto; }
.k2-pf-row { display: flex; gap: 3px; justify-content: center; }
/* A rács cellái (keresztrejtvény és Playfair-tábla).
A keret ugyanabba a csapdába esett, mint a betűépítő célmezője: a `--k2-line`
pályánként hangolt, halvány dísz-szín (budaivárnál #bfe0e6), az áttetsző
üveg-kártyán tehát eltűnik. Ráadásul a cellának HÁTTERE sem volt, így a
háttérkép sütött át rajta — a rács így nem rácsnak látszott, hanem foltnak.
A vonal marad 1px, csak a szöveg-színből hígítjuk; a halvány papír-kitöltés
pedig a beírt betűt is olvashatóvá teszi. */
.k2-pf-cell {
flex: 1 1 0; min-width: 0; max-width: 40px;
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
border: 1px solid color-mix(in srgb, var(--k2-ink-soft) 50%, transparent);
background: color-mix(in srgb, var(--k2-paper) 72%, transparent);
border-radius: 4px;
font-family: var(--k2-font-display); font-weight: 700;
font-size: clamp(13px, 3.8vw, 18px);
cursor: pointer; user-select: none;
}
.k2-pf-cell.decoded { background: var(--k2-success-soft); border-color: var(--k2-success); }
/* A csapatnév-kód villogó cellái. A `coded` a `decoded` UTÁN áll, mert a
megfejtett cellák mindig azok is: azonos súly mellett a KÉSŐBBI nyer, és így
a villanás korábban nem is látszott — a háttér végig a megfejtett zöld
maradt, csak a betű váltott számra.
Ezért nem finom a jelzés: pecsétvörös mező, vastag keret, fehér szám. A
játékosnak a rácsban kell megtalálnia, mely betűk adják a kódot. */
.k2-pf-cell.coded {
background: var(--k2-accent);
border-color: var(--k2-danger);
/* a lap saját tokene a pecséten álló szövegre — sötét módban is olvasható */
color: var(--k2-accent-ink);
box-shadow: 0 0 0 3px var(--k2-danger-soft);
/* a szomszéd cellák FÖLÉ nőjön, különben a keretét levágják */
position: relative; z-index: 1;
transform: scale(1.06);
}
.k2-pf-coded {
font-family: var(--k2-font-display); font-size: 19px; letter-spacing: .05em;
margin: 10px 0; line-height: 1.9; word-break: break-word;
}
.k2-pf-coded .pair { padding: 2px 4px; border-radius: 4px; }
.k2-pf-coded .pair.selpair { background: var(--k2-danger-soft); color: var(--k2-accent); font-weight: 700; }
.k2-pf-coded .pair.donepair { color: var(--k2-success); }
/* dosszié-accordion */
.k2-acc { border: 1px solid var(--k2-line); border-radius: var(--k2-radius); overflow: hidden; margin: 8px 0; }
.k2-acc > button {
width: 100%; min-height: var(--k2-tap);
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: var(--k2-paper-deep); color: var(--k2-ink);
border: 0; font-family: var(--k2-font-ui); font-size: 15px; font-weight: 700;
cursor: pointer;
}
.k2-acc > div { padding: 12px 14px; display: none; text-align: left; }
.k2-acc.open > div { display: block; }
/* Dosszié-csoport (docs/64 §3): 14 elemnél a lapos lista már nem olvasható,
ezért az azonos csoportú iratok egy behúzott csomópont alá kerülnek. A
belső elemek maradnak rendes dosszié-elemek — a kép is kép, tehát a
cédulája is megmarad rajta. */
.k2-acc-group > button { letter-spacing: .04em; text-transform: uppercase; }
.k2-acc-group > .k2-acc-inner { padding: 2px 10px 6px; }
.k2-acc-group > .k2-acc-inner > .k2-acc { margin: 6px 0; }
/* térkép */
.k2-map { width: 100%; height: 62dvh; border: 1px solid var(--k2-line); border-radius: var(--k2-radius); }
/* hotspot — koppintós kép / eltérés-kereső */
.k2-hotspot { position: relative; width: 100%; line-height: 0; }
.k2-hotspot-grid { display: grid; gap: 0; width: 100%; }
.k2-hotspot-layer { position: absolute; inset: 0; cursor: crosshair; }
.k2-hotspot-mark {
position: absolute; width: 30px; height: 30px; border-radius: 50%;
transform: translate(-50%, -50%); box-sizing: border-box; pointer-events: none;
}
.k2-hotspot-mark.ok { border: 3px solid var(--k2-success); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 1px 6px rgba(0, 0, 0, .35); }
.k2-hotspot-mark.bad { border: 3px solid var(--k2-danger); animation: k2-hotspot-bad .6s ease-out; }
/* A javító kép ÖNMAGA a jelölés: a tartalomban a megtalált részlet képébe bele
van rajzolva a karika (az 1.0 sem tett rá semmit — ott a megtalált csempe
`correct` osztályt kapott, de img-re nincs stílus). Zöld kerettel dupla
jelölés lenne: kör a képen, négyzet a keretből. */
.k2-hotspot-fix { position: absolute; object-fit: cover; border-radius: 2px; animation: k2-hotspot-fix-in .35s ease-out; }
@keyframes k2-hotspot-fix-in { 0% { opacity: 0; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes k2-hotspot-bad { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
/* "Megvan mind" — a különbségkereső lezárása. A számláló zöldre vált, hogy a
képnél is látszódjon, és a megfejtés kiemelt dobozban jön, nem halvány
jegyzetként. */
.k2-hotspot-done { animation: k2-hotspot-done-in .4s ease-out; }
/* A lezárás a KÉPRE kerül, felsőbb rétegen: a kép alatti sáv a hajtás alatt van,
és a rögzített válaszsáv is takarja. A .k2-hotspot line-height:0, ezért itt
vissza kell állítani, különben a szöveg összelapul. */
.k2-hotspot-overlay {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-content: center;
gap: 4px;
line-height: 1.3;
cursor: pointer;
background: color-mix(in srgb, var(--k2-paper) 62%, transparent);
animation: k2-hotspot-done-in .4s ease-out;
}
.k2-hotspot-reveal {
text-align: center;
font-family: var(--k2-font-display);
font-size: clamp(18px, 5.5vw, 26px);
font-weight: 700;
color: var(--k2-success);
padding: 0 10px;
}
@keyframes k2-hotspot-done-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.k2-note.done {
color: var(--k2-success);
font-weight: 700;
font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
.k2-hotspot-done { animation: none; }
}
/* scratch-reveal — dörzskép */
.k2-scratch { position: relative; width: 100%; line-height: 0; }
.k2-scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; border-radius: var(--k2-radius); }
/* decoder-lens — nyomozó-lencse */
.k2-lens-stage { position: relative; width: 100%; line-height: 0; touch-action: none; }
.k2-lens {
position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
border: 3px solid var(--k2-accent); box-shadow: 0 0 0 2px #fff, 0 2px 12px rgba(0, 0, 0, .45);
cursor: grab; pointer-events: none; overflow: hidden;
}
.k2-lens-glass {
position: absolute; inset: 0; border-radius: 50%;
background-repeat: no-repeat;
}
/* rossz fényforrás: derengés — látszik, HOGY van ott valami, de nem
olvasható. Sötét folt + világítón elmosott formák (screen-blend), hogy a
hatás akkor is üssön, ha a rejtett réteg tónusa hasonlít az alapéra. */
.k2-lens-glass.ghost {
background-color: #0e0b08;
background-blend-mode: screen;
filter: blur(6px) grayscale(1) brightness(1.25) contrast(1.6);
opacity: .78;
}
.k2-lens-tint { position: absolute; inset: 0; border-radius: 50%; opacity: .16; }
/* fizikai nagyító (games docs/35): a lapra vetett árnyék a lencse ALATT */
.k2-lens-shadow {
position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
pointer-events: none;
}
.k2-lens-slider { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.k2-lens-slider-cimke { font-size: 14px; color: var(--k2-ink-soft); flex: none; }
.k2-lens-slider .k2-slider { flex: 1; }
.k2-lamp-row { --k2-fitrow-gap: 6px; justify-content: center; margin-bottom: 8px; }
.k2-lamp-chip {
padding: 6px 12px; border: 2px solid var(--k2-line); border-radius: 999px;
background: var(--k2-paper-deep); color: var(--k2-ink); font-size: 14px; cursor: pointer;
}
.k2-lamp-chip.sel { border-color: var(--k2-accent); background: var(--k2-paper); font-weight: 700; }
/* overlay-align — rétegek összecsúsztatása */
.k2-align-stage { position: relative; width: 100%; touch-action: none; line-height: 0; }
/* max-width: a mozgó lap sosem lehet szélesebb a színpadnál — utolsó védvonal
a képpontban írt `mov_width` ellen (docs/117), a motor levágása mellett. */
.k2-align-mov { position: absolute; top: 0; left: 0; max-width: 100%; cursor: grab; opacity: .9; }
.k2-align-mov.aligned { opacity: 1; outline: 3px solid var(--k2-success); }
/* camera-mask — élő kamera + maszk */
.k2-cam-stage { position: relative; width: 100%; }
.k2-cam-video { width: 100%; display: block; border-radius: var(--k2-radius); background: #000; }
.k2-cam-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* tilt-aim — iránytű */
.k2-tilt { width: 130px; height: 130px; border-radius: 50%; border: 3px solid var(--k2-line); position: relative; margin: 12px auto; background: var(--k2-surface); }
.k2-tilt::after { content: "▲"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: var(--k2-accent); font-size: 14px; }
.k2-tilt-needle { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 42%; background: var(--k2-accent); transform-origin: bottom center; transform: translateX(-50%); border-radius: 2px; }
/* segéd */
.k2-center { text-align: center; }
.k2-note { font-family: var(--k2-font-ui); font-size: 14px; color: var(--k2-ink-soft); }
.k2-alert {
padding: 10px 12px; border-radius: var(--k2-radius);
font-family: var(--k2-font-ui); font-size: 14px;
background: var(--k2-danger-soft); color: var(--k2-danger);
margin: 10px 0;
}
.k2-alert.info { background: var(--k2-success-soft); color: var(--k2-success); }
/* Kattintható értesítés (technikai információ): maga a felirat nyitja a modált.
Gomb-elem, hogy billentyűzetről is elérhető legyen — a gomb-alapstílusokat
itt vissza kell venni, hogy pontosan úgy nézzen ki, mint a sima .k2-alert. */
button.k2-alert {
display: block; width: 100%; text-align: left;
border: 0; cursor: pointer; font: inherit;
font-family: var(--k2-font-ui); font-size: 14px;
text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-style: dotted;
}
button.k2-alert:hover { filter: brightness(0.96); text-decoration-style: solid; }
button.k2-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hidden { display: none !important; }
/* írógép-effekt kurzor */
.k2-type::after { content: "▌"; animation: k2-blink 1s steps(1) infinite; }
.k2-type.done::after { content: ""; }
@keyframes k2-blink { 50% { opacity: 0; } }
/* ---------- Csapat-panel (docs/26): chat + reakciók + közös hívás ---------- */
/* A chat gombja is a chip-sorban ül (l. .k2-statusbar-chips). A `relative` a
pötty-jelzőnek kell: az abszolút pozíciójú, és eddig a `fixed` adta a
viszonyítási pontot. */
.k2-chat-chip {
position: relative;
margin-left: auto; /* a sor jobb szélére, a szerep-jelzőtől elválasztva */
flex: none;
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
border: 1px solid var(--k2-line); background: var(--k2-paper-deep);
font-size: 17px; cursor: pointer; padding: 0;
}
.k2-chat-dot {
position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
border-radius: 50%; background: var(--k2-danger, #c0392b); display: none;
}
.k2-chat-dot.van { display: block; }
/* Sötétítő réteg a chat mögé — ugyanaz a tónus, mint a modaloknál: a felugró
csak akkor felugró, ha a lap hátrébb lép mögötte. Koppintásra zárul. */
.k2-chat-back {
position: fixed;
inset: 0;
/* Rétegsorrend: a chat a sávok (20/30) FÖLÖTT, de a modal (50) ALATT.
Eddig 9000-en állt, tehát a modalokat is eltakarta — amíg nem sötétített,
ez nem tűnt fel; sötétítéssel egy felugró modal a homályba került volna.
A modal a döntést kéri, tehát az van elöl. */
z-index: 40;
display: none;
background: rgba(12, 8, 4, .72);
animation: k2-fade var(--k2-t-fast) ease-out;
}
.k2-chat-back.open { display: block; }
/* A panel háttere eddig PONTOSAN a lap háttérszíne volt (--k2-paper), tehát
a felugró beleolvadt a képernyőbe. A felugró felületek egységesen a
kártya-felületet (--k2-surface) kapják, kiemelt kerettel és árnyékkal.
A helye a válaszsáv fölé igazodik: a gombja már nem ott lebeg alatta. */
.k2-chat-panel {
position: fixed; right: 10px; bottom: calc(var(--k2-answerbar-h, 0px) + 14px); z-index: 41;
width: min(340px, calc(100vw - 20px)); max-height: min(55vh, 480px);
display: none; flex-direction: column;
background: var(--k2-surface); color: var(--k2-ink);
border: 1px solid color-mix(in srgb, var(--k2-line) 70%, var(--k2-ink));
border-radius: var(--k2-radius, 10px);
box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.k2-chat-panel.open { display: flex; }
.k2-chat-head {
display: flex; align-items: center; gap: .5rem;
padding: 8px 10px; border-bottom: 1px solid var(--k2-line);
}
.k2-chat-call { margin-left: auto; font-size: .85rem; padding: 4px 10px; }
.k2-chat-close { background: none; border: 0; color: var(--k2-ink); font-size: 22px; cursor: pointer; }
.k2-chat-list { overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 90px; }
.k2-chat-msg { max-width: 85%; align-self: flex-start; }
.k2-chat-msg.own { align-self: flex-end; text-align: right; }
.k2-chat-msg.react .k2-chat-react { font-size: 26px; line-height: 1.1; }
.k2-chat-msg.react .k2-chat-meta { margin-left: .4rem; }
.k2-chat-meta { font-size: .68rem; color: var(--k2-ink-soft); }
.k2-chat-body {
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: 10px; padding: 6px 9px; font-size: .9rem;
white-space: pre-wrap; word-break: break-word; text-align: left;
}
.k2-chat-msg.own .k2-chat-body { background: var(--k2-surface, var(--k2-paper-deep)); }
.k2-chat-input { border-top: 1px solid var(--k2-line); padding: 8px 10px; }
.k2-chat-reacts { display: flex; gap: 6px; margin-bottom: 6px; }
.k2-chat-reactbtn {
border: 1px solid var(--k2-line); background: var(--k2-paper-deep);
border-radius: 8px; font-size: 20px; padding: 2px 8px; cursor: pointer;
}
.k2-chat-sendrow { display: flex; gap: 6px; }
.k2-chat-field {
flex: 1; min-width: 0; padding: 8px; font-size: .9rem;
border: 1px solid var(--k2-line); border-radius: 8px;
background: var(--k2-paper-deep); color: var(--k2-ink);
}
/* Szerep-chip (docs/27): bal alsó sarok — a jobb alsóban a csapat-chip él. */
/* A szerep-jelző és a csapat-chat gombja az ÁLLAPOTSÁV alján, a haladás-sáv
alatt (tulajdonosi döntés a beta-tesztből). Lebegő elemként rátakartak a
„Tovább a feladathoz" gombra, és mivel a modal fölött álltak, a
szerepválasztó gombjaira is. A sáv része, tehát semmi alá és fölé nem
csúszhat. */
.k2-statusbar-chips {
display: flex;
align-items: center;
gap: 8px;
}
/* „Ki viszi éppen" a szerepválasztó gombján — jelzés, nem tiltás: a gomb
ugyanúgy választható marad (docs/27). */
.k2-role-taken {
font-weight: 400;
font-size: .85em;
opacity: .75;
}
.k2-role-chip {
min-width: 0; /* a hosszú szerepnév zsugorodjon, ne tolja szét a sort */
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--k2-line);
background: var(--k2-paper-deep);
color: var(--k2-ink);
font-family: var(--k2-font-ui);
font-size: 13px;
cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rádió-hangolás (docs/28 B1): frekvencia-kijelző + térerő + csúszka. */
.k2-radio { max-width: 340px; margin: 14px auto; text-align: center; }
.k2-radio-freq {
font-family: var(--k2-font-display);
font-size: 34px; font-weight: 700; letter-spacing: .08em;
color: var(--k2-ink);
background: var(--k2-paper-deep);
border: 1px solid var(--k2-line); border-radius: var(--k2-radius, 8px);
padding: 6px 0; margin-bottom: 8px;
}
.k2-radio.locked .k2-radio-freq { color: var(--k2-accent); border-color: var(--k2-accent); }
.k2-radio-bars { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.k2-radio-bars i {
width: 10px; border-radius: 2px; background: var(--k2-line); display: block;
}
.k2-radio-bars i:nth-child(1) { height: 8px; }
.k2-radio-bars i:nth-child(2) { height: 13px; }
.k2-radio-bars i:nth-child(3) { height: 18px; }
.k2-radio-bars i:nth-child(4) { height: 23px; }
.k2-radio-bars i.on { background: var(--k2-accent); }
.k2-radio-slider { width: 100%; accent-color: var(--k2-accent); touch-action: none; }
.k2-radio-scale {
display: flex; justify-content: space-between;
font-size: .72rem; color: var(--k2-ink-soft); margin-top: 2px;
}
/* Hallgatózás-hotspot (docs/28 B8): a kép fölött az ujj a sztetoszkóp. */
.k2-listen .k2-hotspot { cursor: crosshair; touch-action: none; }
/* Nyomozótábla (docs/28 B3): kártyák + fonal-réteg. */
.k2-pinboard { position: relative; margin: 14px 0; }
.k2-pinboard-grid { display: grid; gap: 14px; }
.k2-pinboard-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.k2-pinboard-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.k2-pinboard-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.k2-pincard {
position: relative; z-index: 1;
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: 6px; padding: 6px; cursor: pointer; text-align: center;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.k2-pincard img { width: 100%; display: block; border-radius: 4px; }
.k2-pincard-label { font-size: .8rem; margin-top: 4px; color: var(--k2-ink); }
.k2-pincard.sel { outline: 3px solid var(--k2-accent); }
/* rajzszög a kártya tetején — ettől parafatábla */
.k2-pincard::before {
content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: var(--k2-accent); box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.k2-pinboard-yarn {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 2;
}
.k2-yarn-line {
stroke: var(--k2-danger, #c0392b); stroke-width: 3; stroke-linecap: round;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
/* Hang-kirakó (docs/28 B6): hangdarab-kártyák sorban, cserélgetéssel. */
.k2-audiopuzzle { margin: 14px 0; text-align: center; }
.k2-audiopuzzle-row { --k2-fitrow-gap: 10px; margin-bottom: 10px; align-items: stretch; }
.k2-audiocard {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: 8px; padding: 10px 8px; cursor: pointer; min-width: 64px;
}
.k2-audiocard-play {
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--k2-accent); background: transparent;
color: var(--k2-accent); font-size: 16px; cursor: pointer;
}
.k2-audiocard-label { font-size: .78rem; color: var(--k2-ink-soft); }
/* Morze-kopogó (docs/28 B2). */
.k2-morse { max-width: 300px; margin: 14px auto; text-align: center; }
.k2-morse-out {
font-family: var(--k2-font-display); font-size: 28px; font-weight: 700;
letter-spacing: .18em; min-height: 38px; color: var(--k2-ink);
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: var(--k2-radius, 8px); padding: 4px 8px;
}
.k2-morse-signs { font-size: 22px; letter-spacing: .3em; min-height: 30px; color: var(--k2-accent); }
.k2-morse-row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.k2-morse-key {
width: 88px; height: 88px; border-radius: 50%;
border: 2px solid var(--k2-accent); background: var(--k2-paper-deep);
color: var(--k2-accent); font-size: 30px; cursor: pointer;
touch-action: none; user-select: none;
}
.k2-morse-key.down { background: var(--k2-accent); color: var(--k2-accent-ink); }
/* Fókuszálás (docs/28 B9): elmosott kép + élesség-csúszka. */
.k2-focus { max-width: 340px; margin: 14px auto; text-align: center; }
.k2-focus-img { width: 100%; display: block; border-radius: var(--k2-radius, 8px); transition: filter .12s linear; }
.k2-focus.locked .k2-focus-img { outline: 2px solid var(--k2-accent); }
/* Idővonal (docs/28 B7): kártyák a függőleges idő-sínen. */
.k2-timeline { position: relative; max-width: 320px; margin: 14px auto; padding-left: 22px; }
.k2-timeline::before {
content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px;
background: var(--k2-line); border-radius: 2px;
}
.k2-timeline-col { display: flex; flex-direction: column; gap: 10px; }
.k2-timecard {
position: relative;
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: 6px; padding: 8px; cursor: pointer;
}
.k2-timecard::before {
content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: var(--k2-accent); border: 2px solid var(--k2-paper);
}
.k2-timecard img { width: 100%; display: block; border-radius: 4px; }
.k2-timecard-label { font-size: .85rem; margin-top: 4px; color: var(--k2-ink); }
/* Csővezeték (docs/28 B5): forgatható csempék — a bőr (cső/áramkör) szín kérdése. */
.k2-pipes { max-width: 320px; margin: 14px auto; }
.k2-pipes-grid { display: grid; gap: 4px; }
.k2-pipe-cell {
aspect-ratio: 1; padding: 0; border: 1px solid var(--k2-line);
border-radius: 6px; background: var(--k2-paper-deep); cursor: pointer;
}
.k2-pipe-cell.start { box-shadow: inset 0 0 0 2px var(--k2-success, #2e7d32); }
.k2-pipe-cell.end { box-shadow: inset 0 0 0 2px var(--k2-accent); }
.k2-pipe-draw { width: 100%; height: 100%; display: block; transition: transform .18s ease; }
.k2-pipe-line { stroke: var(--k2-accent); stroke-width: 14; stroke-linecap: round; }
.k2-pipe-dot { fill: var(--k2-accent); }
.k2-pipes .done .k2-pipe-line { stroke: var(--k2-success, #2e7d32); }
/* Kétserpenyős mérleg (docs/28 B4). */
.k2-scale { margin: 14px 0; text-align: center; }
.k2-scale-beam {
display: flex; justify-content: space-between; max-width: 260px; margin: 0 auto 4px;
border-top: 4px solid var(--k2-ink-soft); padding-top: 14px; position: relative;
transition: transform .25s ease; transform-origin: 50% 0;
}
.k2-scale-beam::before {
content: ''; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
width: 4px; height: 14px; background: var(--k2-ink-soft);
}
.k2-scale-beam.tilt-left { transform: rotate(-6deg); }
.k2-scale-beam.tilt-right { transform: rotate(6deg); }
.k2-scale-pan {
min-width: 74px; padding: 8px; border-radius: 0 0 34px 34px;
border: 1px solid var(--k2-line); background: var(--k2-paper-deep);
color: var(--k2-ink); font-size: .82rem; cursor: pointer;
}
.k2-scale-shelf { --k2-fitrow-gap: 10px; margin-top: 12px; align-items: stretch; }
.k2-scalecard {
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: var(--k2-paper-deep); border: 1px solid var(--k2-line);
border-radius: 8px; padding: 8px; cursor: pointer; min-width: 64px;
}
.k2-scalecard img { width: 56px; border-radius: 4px; }
.k2-scalecard-label { font-size: .78rem; color: var(--k2-ink); }
.k2-scalecard-weigh {
border: 1px solid var(--k2-accent); background: transparent; color: var(--k2-accent);
border-radius: 6px; font-size: 15px; padding: 2px 10px; cursor: pointer;
}
/* Réteges restaurálás (docs/28 C1): kapar-canvas + repedés-figyelmeztetés. */
.k2-lscratch { position: relative; max-width: 340px; margin: 14px auto; }
.k2-lscratch .k2-scratch-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.k2-lscratch-crack {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
transition: opacity .2s linear;
background:
linear-gradient(105deg, transparent 46%, rgba(140,47,36,.85) 48%, transparent 50%),
linear-gradient(63deg, transparent 60%, rgba(140,47,36,.7) 61.5%, transparent 63%);
}
/* Műszerfal (docs/28 C2): tű-műszerek + szabályzók. */
.k2-dash { margin: 14px 0; }
.k2-dash-gauges { --k2-fitrow-gap: 12px; justify-content: center; margin-bottom: 12px; }
.k2-dash-gauge { text-align: center; }
.k2-dash-scale {
position: relative; width: 74px; height: 40px; overflow: hidden;
border: 1px solid var(--k2-line); border-radius: 74px 74px 0 0;
background: var(--k2-paper-deep);
}
.k2-dash-scale.ok { border-color: var(--k2-success, #2e7d32); box-shadow: inset 0 0 8px rgba(46,125,50,.35); }
.k2-dash-needle {
position: absolute; left: 50%; bottom: 0; width: 2px; height: 32px;
background: var(--k2-accent); transform-origin: 50% 100%;
transition: transform .15s ease; display: block;
}
.k2-dash-label { font-size: .72rem; color: var(--k2-ink-soft); margin-top: 3px; }
.k2-dash-ctrl { margin: 6px 0; }
.k2-dash.locked .k2-dash-scale { border-color: var(--k2-success, #2e7d32); }
/* Súrlófény (docs/28 C3): árnyék-irat + vándorló fénysáv. */
.k2-light { max-width: 340px; margin: 14px auto; text-align: center; }
.k2-light-stage { position: relative; overflow: hidden; border-radius: var(--k2-radius, 8px); }
.k2-light-reveal { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .12s linear; }
.k2-light-sheen {
position: absolute; top: 0; bottom: 0; width: 34%; left: 0;
transform: translateX(-50%); pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,244,214,.28), transparent);
transition: left .1s linear;
}
.k2-light.locked .k2-light-reveal { opacity: 1; }
/* Fejtő-pad (docs/28 C4): gyakoriság-sáv + jel-cellák + betű-választó. */
.k2-crypto { margin: 14px 0; }
.k2-crypto-freq { --k2-fitrow-gap: 6px; justify-content: center; align-items: flex-end; margin-bottom: 10px; }
.k2-crypto-bar { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.k2-crypto-bar i { width: 10px; background: var(--k2-accent); border-radius: 2px 2px 0 0; display: block; }
.k2-crypto-bar span { font-size: .8rem; color: var(--k2-ink-soft); }
.k2-crypto-text { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }
.k2-crypto-space { width: 12px; }
.k2-crypto-glyph {
display: flex; flex-direction: column; align-items: center; padding: 3px 5px;
border: 1px solid var(--k2-line); border-radius: 5px;
background: var(--k2-paper-deep); cursor: pointer;
}
.k2-crypto-glyph.sel { outline: 2px solid var(--k2-accent); }
.k2-crypto-glyph.van .k2-crypto-letter { color: var(--k2-success, #2e7d32); }
.k2-crypto-letter { font-weight: 700; font-size: 15px; color: var(--k2-ink-soft); min-height: 18px; }
.k2-crypto-sign { font-size: 13px; color: var(--k2-ink); }
.k2-crypto-keys { --k2-fitrow-gap: 4px; justify-content: center; }
.k2-crypto-key {
min-width: 30px; padding: 5px 4px; border: 1px solid var(--k2-line);
border-radius: 5px; background: var(--k2-paper-deep); color: var(--k2-ink);
font-size: 14px; cursor: pointer;
}
/* ---------- nyomozófüzet-kiértékelés (collect mód, docs/36) ---------- */
.k2-case-row {
text-align: left; margin: 12px 0; padding: 10px 12px;
border: 1px solid var(--k2-line); border-radius: var(--k2-radius, 8px);
background: var(--k2-paper-deep);
}
.k2-case-row.conclusion { border-color: var(--k2-accent); border-width: 2px; }
.k2-case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.k2-case-title { font-family: var(--k2-font-display); font-weight: 700; }
.k2-case-verdict { font-size: 18px; font-weight: 700; }
.k2-case-verdict.ok { color: var(--k2-success, #2e7d32); }
.k2-case-verdict.bad { color: var(--k2-danger); }
.k2-case-answer { margin: 6px 0; }
/* A nyomozó jegyzetei (menet közbeni visszanézés) — a füzet-sorok halkabb
rokona: nincs verdikt-szín, csak cím és a saját válasz. */
.k2-jegyzet-sor {
text-align: left; margin: 10px 0; padding: 8px 12px;
border: 1px solid var(--k2-line); border-radius: var(--k2-radius, 8px);
background: var(--k2-paper-deep);
}
.k2-jegyzet-sor p { margin: 4px 0 0; }
/* ---------- fényszög-egység (docs/5-gyartas/45) ---------- */
.k2-langle-stage {
position: relative; margin: 10px 0; touch-action: none; user-select: none;
-webkit-user-select: none; cursor: grab;
}
.k2-langle-stage:active { cursor: grabbing; }
.k2-langle-kep { width: 100%; display: block; border-radius: 8px; }
/* a köztes fázis rétege: a két szomszédos kép egymásba úszik */
.k2-langle-kozti {
position: absolute; inset: 0; width: 100%; display: block;
border-radius: 8px; pointer-events: none; opacity: 0;
will-change: opacity; /* húzás közben minden mozdulat írja — saját réteget kap */
}
/* a felülről eső (ráeső) fény rétege — lágyan vált a súrló és a merőleges közt */
.k2-langle-felul {
position: absolute; inset: 0; width: 100%; display: block;
border-radius: 8px; pointer-events: none; opacity: 0;
will-change: opacity;
/* nincs átmenet: az áttetszőséget a húzás folyamatosan vezérli */
}
/* Az udvar a lámpával mozgó ELEM (a gradiens fix, a közepe a lámpa alatt) —
a korábbi teljes-színpados gradiens-újraszövés minden mozdulatnál drága
repaint volt: ettől lett "nehéz" a lámpa a lupéval együtt. */
.k2-langle-udvar {
position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
transform: translate(-50%, -50%); pointer-events: none;
}
.k2-langle-lamp {
position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, #fff7dd 0%, #ffd970 45%, rgba(255, 200, 90, 0) 72%);
box-shadow: 0 0 10px 4px rgba(255, 214, 120, .85), 0 0 26px 10px rgba(255, 214, 120, .35);
/* átmenet NINCS: a .1s-es simítás késve követő, "nehéz" fogót adott */
}
/* ---------- vizsgálati színpad (docs/5-gyartas/48) ---------- */
.k2-exam-stage {
position: relative; margin: 10px 0; overflow: hidden; border-radius: 8px;
touch-action: none; user-select: none; -webkit-user-select: none;
}
.k2-exam-kep { width: 100%; display: block; }
.k2-exam-folt { position: absolute; inset: 0; pointer-events: none; }
/* Fedvény-összevető (E4): a felső lap az alsóra ül, a csúszka úsztatja.
A `touch-action: auto` a csúszkán KELL: a színpad tiltja az érintés-
gesztusokat (a lámpa és a lupé miatt), és enélkül a húzás nem fogna. */
.k2-fedveny-stage { touch-action: auto; }
.k2-fedveny-felso {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block; object-fit: fill;
pointer-events: none;
}
.k2-fedveny-sor { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.k2-fedveny-csuszka { flex: 1; touch-action: auto; accent-color: var(--k2-accent); }
/* fény-fátyol (tint-eszközök): a fény színe üli meg a felületet */
.k2-exam-tint {
position: absolute; inset: 0; pointer-events: none;
opacity: .30; mix-blend-mode: multiply;
}
/* ---------- lupé-réteg (docs/5-gyartas/50) ---------- */
.k2-loupe {
position: absolute; border-radius: 50%; cursor: grab;
border: 3px solid #d9c9a8;
/* a vetett árnyékot a widget számolja: irány a fényből, méret a távolságból */
touch-action: none;
}
.k2-loupe:active { cursor: grabbing; }
/* az üveg külön réteg: a homály (élesség-sáv) csak a képet éri, a keret éles */
.k2-loupe-glass {
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
background-repeat: no-repeat; background-color: #0e0b08; pointer-events: none;
}
/* távolság-ív: szaggatott alsó félkör a palást körül + fogógomb */
.k2-loupe-sav {
position: absolute; inset: -13px; border-radius: 50%;
border: 2px dashed rgba(217, 201, 168, .55);
clip-path: inset(0 0 50% 0); /* felső félkör: a nyél alul van */
pointer-events: none;
}
/* a nagyító nyele: ezzel mozgatod a lencsét — 45°-ban nyúlik ki a palástból */
.k2-loupe-nyel {
position: absolute; height: 15px; border-radius: 8px;
transform: rotate(45deg); transform-origin: 0 50%; margin-top: -7px;
background: linear-gradient(90deg, #8a734d, #6d5a3c);
border: 1px solid #4f4028; box-shadow: 0 2px 6px rgba(14, 11, 8, .5);
cursor: grab; touch-action: none;
}
.k2-loupe-nyel:active { cursor: grabbing; }
.k2-loupe-gomb {
position: absolute; width: 22px; height: 22px; border-radius: 50%;
transform: translate(-50%, -50%); cursor: grab;
background: #d9c9a8; border: 2px solid #8a734d;
box-shadow: 0 2px 6px rgba(14, 11, 8, .5);
touch-action: none;
}
.k2-loupe-gomb:active { cursor: grabbing; }
/* ---------- átirat-cédula (docs/61–63) ----------
A dokumentum-lapok egyetlen, ANGOL képkészletben készülnek; a fordítás a
cédulára koppintva nyíló átiratban él. A jel ezért a UI-ban van, a kép fölé
rétegezve — beégetve nyelvenként újra kellene gyártani mind a 29 lapot, és
nem is volna koppintható. */
.k2-transcript-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.k2-transcript-badge {
position: absolute;
z-index: 4;
display: grid;
padding: 0;
border: 0;
background: none;
cursor: pointer;
line-height: 0;
filter: drop-shadow(0 2px 4px rgba(14, 11, 8, .45));
}
/* a grafika és a felirat EGY cellában ül: a felirat a cédulára kerül, nem alá */
.k2-transcript-badge > * { grid-area: 1 / 1; }
/* Laponként állítható sarok: 29 különböző kompozíciónál a fix jobb-felső
rátakarna valahol — a melléklet-lapokon ott a pecsétbetű, a dossziékon a
sorszám (docs/63). */
.k2-transcript-badge.sarok-tr { top: 6px; right: 6px; }
.k2-transcript-badge.sarok-tl { top: 6px; left: 6px; }
.k2-transcript-badge.sarok-br { bottom: 6px; right: 6px; }
.k2-transcript-badge.sarok-bl { bottom: 6px; left: 6px; }
.k2-transcript-badge img { display: block; width: 92px; height: auto; }
/* Grafika nélkül a felirat MAGA a cédula — így a nézet a cédula-grafika
megérkezése előtt is működik. */
.k2-transcript-badge-cimke {
align-self: center;
justify-self: center;
padding: 4px 9px;
border: 1px solid #8a734d;
border-radius: 2px;
background: #e8dcc0;
color: #3a2f1f;
font-family: var(--k2-font-display);
font-size: 11px;
letter-spacing: .08em;
line-height: 1;
}
.k2-transcript-badge.van-kep .k2-transcript-badge-cimke {
padding: 0;
border: 0;
background: none;
}
/* Felolvasás-gomb (docs/76): keret nélküli ikon a fejléc jobb szélén. Azért
ABSZOLÚT, mert a cím a TELJES szélességhez képest marad középen — sorba
téve a gomb eltolná. A negatív oldalmargót (l. .k2-modal h3) a 18px
jobb-eltartás egyenlíti ki. */
.k2-tts {
position: absolute;
right: 18px;
/* A függőleges középre állítás a SZÖVEG dobozához igazodik, nem a
padding-dobozhoz: a h3-nak 8px alsó paddingja van, és a `top: 50%`
ahhoz mérve csúsztatta el a gombot. */
top: 0;
bottom: 8px;
display: flex;
align-items: center;
padding: 0 4px;
border: 0;
background: none;
color: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.k2-transcript-text { line-height: 1.5; }
.k2-transcript-text p { margin: 0 0 10px; }
.k2-transcript-text em { color: var(--k2-ink-soft); }
/* Az eredeti lap NATÍV felbontásban, saját görgethető keretben (docs/63 §0):
a modal szélességére zsugorítva a kézírás ugyanúgy olvashatatlan lenne,
mint a kártyán — márpedig az angol kiadásban a lap maga az olvasnivaló. */
.k2-transcript-doc {
max-height: 62dvh;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--k2-line);
border-radius: 4px;
background: rgba(14, 11, 8, .18);
}
.k2-transcript-doc img { display: block; max-width: none; }
/* Az átirat FEJLÉCE (docs/91): a rendőrségi jegyzőkönyv fejadata. A képernyőn
ugyanaz a dokumentum, mint eddig — csak külön kulcson él, hogy felolvasva
más hangot kaphasson. Halványabb és elválasztott, ahogy az iraton is. */
.k2-transcript-intro {
margin-bottom: .7em;
padding-bottom: .5em;
border-bottom: 1px solid var(--k2-line);
color: var(--k2-muted);
font-size: .92em;
}
/* A lap ALJÁN a ceruzás rendőri jegyzet (docs/94): ugyanaz a szerep, mint a
fejlécé, csak a törzs után — az irattáré, nem a tanúé. */
.k2-transcript-outro {
margin-top: .7em;
padding-top: .5em;
border-top: 1px solid var(--k2-line);
color: var(--k2-muted);
font-size: .92em;
}
/* KI mondja ezt a szakaszt (docs/105). Halk megnevezés a szöveg fölött: a
hangban három szólam van, írásban eddig egy tömb volt. Nem aláírás a
szöveg alján, mert azt a gépi felolvasó kimondaná — itt a jelölés nem
szöveg, tehát nem is hangzik el. */
.k2-transcript-by {
margin-bottom: .25em;
font-size: .78em;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--k2-muted);
}
/* ---------- kitöltős lap (fill / widget: "document", docs/108) ----------
Az irat maga az űrlap. A rés a lapon áll, a lista a réshez nyílik: a
játékos szeme nem megy le a kép alá és vissza.
A tinta itt SZÁNDÉKOSAN nem a `--k2-ink` token. Az a token sötét módban
világosra vált — a szkennelt lap viszont ott is világos marad, tehát a
beírt szó kifakulna rajta. Ami a KÉPEN ül, az a kép világához igazodik,
nem a felületéhez. */
.k2-doc { --k2-doc-ink: #2a2118; --k2-doc-paper: #f6efe2; }
/* A lap KERETET kap, hogy a felirat láthatóan a saját képéhez tartozzon. Két
kártya közé írt szöveg különben egyforma távolságra áll mindkettőtől, és a
játékosnak kell kitalálnia, melyikről beszél. A ház stílusa ugyanez a
kártya-alak (`.k2-timecard`): mély papír, halvány vonal, lekerekítés. */
.k2-doc-page {
position: relative;
width: 100%;
margin: 0 0 14px;
padding: 8px;
background: var(--k2-paper-deep);
border: 1px solid var(--k2-line);
border-radius: 6px;
}
/* A kép és a rés-réteg saját doboza: a rések 0..1 aránya EHHEZ igazodik.
A felirat ezen kívül van, különben lejjebb tolná az összes rést. */
.k2-doc-sheet { position: relative; width: 100%; line-height: 0; }
.k2-doc-layer { position: absolute; inset: 0; }
/* A lap felirata: a képen ANGOL kézírás áll, a fordítás itt olvasható. */
.k2-doc-caption {
padding: 5px 2px 0;
font-family: var(--k2-font-ui);
font-size: 14px;
line-height: 1.35;
color: var(--k2-ink);
text-align: center;
}
.k2-doc-slot {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
line-height: 1.1;
font-family: var(--k2-font-display);
font-size: clamp(11px, 3.2vw, 19px);
color: var(--k2-doc-ink);
background: rgba(255, 255, 255, .35);
border: 1px dashed rgba(42, 33, 24, .55);
border-radius: 2px;
cursor: pointer;
}
.k2-doc-slot:hover { background: rgba(255, 255, 255, .55); }
.k2-doc-slot:focus-visible { outline: 2px solid var(--k2-accent); outline-offset: 2px; }
/* kitöltve: a keret eltűnik, a szó marad — az irat így lesz „kész" */
.k2-doc-slot.filled {
background: transparent;
border-color: transparent;
animation: k2-doc-ink-in .3s ease-out;
}
@keyframes k2-doc-ink-in { 0% { opacity: 0; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
.k2-doc-menu {
position: absolute;
z-index: 4;
min-width: 96px;
max-width: 70%;
margin-top: 4px;
display: flex;
flex-direction: column;
line-height: 1.3;
background: var(--k2-doc-paper);
border: 1px solid rgba(42, 33, 24, .35);
border-radius: 4px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
overflow: hidden;
}
.k2-doc-opt {
padding: 9px 12px;
font-family: var(--k2-font-ui);
font-size: 15px;
text-align: left;
color: var(--k2-doc-ink);
background: transparent;
border: 0;
border-bottom: 1px solid rgba(42, 33, 24, .12);
cursor: pointer;
}
.k2-doc-opt:last-child { border-bottom: 0; }
.k2-doc-opt:hover { background: rgba(140, 47, 36, .12); }
/* Átrakható lap (docs/112): a lap maga a fogantyú. A kijelölést a swapBoard
mag rajzolja (körvonal), itt csak a megfoghatóság látszik. */
.k2-doc-page.movable { cursor: pointer; }
.k2-doc-page.movable:focus-visible { outline: 2px solid var(--k2-accent); outline-offset: 3px; }
.k2-doc-page.k2-swapping { z-index: 2; }
/* A helyét vesztett rés (hiányos koordináta): a lap ALJÁRA kerül, címkével.
Nem esik ki, mert a válasz egyik tagja — kihagyva a füzér elcsúszna. A lapon
BELÜL marad, hogy az átrakás ne szakítsa el attól, amihez tartozik; a szülő
line-height:0-ját tehát itt vissza kell állítani. */
.k2-doc-loose { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; line-height: 1.3; }
.k2-doc-looserow { display: flex; align-items: center; gap: 8px; }
.k2-doc-looserow .k2-doc-slot { position: static; min-width: 92px; min-height: 34px; }