/* Pisaczek Rozrywka — ekran Kostka 3×3 (marker PNP_PISACZEK_GAMES_CUBE_CSS_V1), v5: tryby Wirtualna / Naucz się / Rozwiąż / Na czas / Wzory / Wyniki. Dziedziczy gm-* z games-v1.css; tekst ≥ 18 px, przyciski ≥ 48 px (seniorzy). */
:root { --cube-U: #F4F4F4; --cube-R: #D93030; --cube-F: #2E9E4F; --cube-D: #F2C417; --cube-L: #F08A1D; --cube-B: #2563EB; }
.gm-back { color: var(--gm-gold); text-decoration: none; font-size: 17px; }
.gm-back:hover { color: var(--gm-gold3); }
.gm-tabs button[data-soon="1"] { opacity: .78; }
.gm-soonTag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #BFF0E8; background: rgba(86,214,200,.16); border: 1px solid rgba(86,214,200,.5); border-radius: 999px; padding: 2px 8px; margin-inline-start: 4px; }
.gm-tabs button[aria-pressed="true"] { color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold) 45%, var(--gm-gold2)); border-color: rgba(255,241,194,.6); border-bottom-color: #5B4A2E; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #7A6224, 0 4px 0 #5B4A2E, 0 6px 0 #3A2E12, 0 12px 24px rgba(227,196,106,.35); }
.gm-tabs button[aria-pressed="true"] svg { color: #15120A; filter: none; }
.gm-cube .gm-stage { perspective: none; }
.gm-cubePanel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); gap: 28px; align-items: start; animation: none; --z: 0px; transform: none; }
.gm-cubeView { position: relative; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.gm-cubeHost { position: relative; width: 100%; aspect-ratio: 1; max-height: 70vh; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 72%, rgba(86,214,200,.16), transparent 60%); touch-action: none; }
.gm-cubeHost twisty-player { width: 100%; height: 100%; }
.gm-cubeHost::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: 62%; height: 7%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(190,255,245,.9) 0%, rgba(86,214,200,.6) 20%, rgba(86,214,200,.18) 50%, transparent 72%); box-shadow: 0 0 22px 6px rgba(86,214,200,.4); pointer-events: none; animation: gmPulse 4s ease-in-out infinite; }
.gm-cubeHints { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; color: var(--gm-mute); }
.gm-cubeSide { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gm-cubeSide h2 { margin: 0; font-family: var(--gm-head); font-size: 28px; font-weight: 400; line-height: 1.15; }
.gm-cubeSide h3 { margin: 0; font-family: var(--gm-head); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--gm-gold3); }
.gm-cubeSide p { margin: 0; color: var(--gm-mute); font-size: 18px; line-height: 1.5; }
.gm-moveGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gm-move { font: inherit; font-family: var(--gm-head); font-size: 22px; min-height: 56px; border-radius: 14px; cursor: pointer; color: var(--gm-ink); background: linear-gradient(180deg, rgba(255,241,194,.18), rgba(14,24,64,.6)); border: 1px solid rgba(227,196,106,.55); border-bottom-color: rgba(86,214,200,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #2E2812, 0 6px 0 #0B1230, 0 10px 18px rgba(0,0,0,.55); transition: transform .12s, box-shadow .12s; }
.gm-move:hover { color: var(--gm-gold3); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #2E2812, 0 6px 0 #0B1230, 0 10px 18px rgba(0,0,0,.55), 0 0 22px rgba(227,196,106,.35); }
.gm-move:active { filter: brightness(.85); box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 1px 0 #2E2812, 0 2px 0 #0B1230; }
.gm-moveInv { color: var(--gm-teal); }
.gm-moveGridSmall .gm-move { min-height: 50px; font-size: 20px; }
.gm-cubeActions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gm-ghost { background: rgba(255,255,255,.04); color: var(--gm-ink); border: 1px solid rgba(227,196,106,.45); }
.gm-ghost:hover { border-color: var(--gm-gold); }
/* bez przesuwania przycisków przy :hover/:active — przesunięty przycisk „ucieka” spod szybkiego kliknięcia (hit-test), zwłaszcza na słabszych komputerach */
.gm-cube .gm-btn, .gm-cube .gm-btn:hover, .gm-cube .gm-btn:active, .gm-cube .gm-move, .gm-cube .gm-move:hover, .gm-cube .gm-move:active, .gm-cube .gm-pill, .gm-cube .gm-lessonBtn, .gm-cube .gm-swatch { transform: none !important; transition: box-shadow .12s, filter .12s, border-color .12s; }
.gm-cube .gm-btn:hover { filter: brightness(1.08); }
.gm-cube .gm-btn:active, .gm-cube .gm-pill:active, .gm-cube .gm-lessonBtn:active { filter: brightness(.85); }
.gm-btn[disabled] { opacity: .5; cursor: default; transform: none; }
.gm-big { font-size: 24px; min-height: 64px; padding-inline: 34px; }
.gm-movesLine { display: flex; flex-direction: column; gap: 6px; }
.gm-movesLine code, .gm-scrLine code { font: 17px/1.6 ui-monospace, Consolas, monospace; color: var(--gm-ink); word-break: break-word; min-height: 1.6em; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); display: block; }
.gm-scrLine { display: flex; flex-direction: column; gap: 8px; }
.gm-scrLine code { font-size: 20px; letter-spacing: .04em; }
.gm-solvedTag { align-self: flex-start; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 18px; color: #06150D; background: linear-gradient(135deg, #BFF0E8, #56D6C8); box-shadow: 0 0 26px rgba(86,214,200,.6); animation: gmIn .5s both; }
.gm-err { color: #FFB4A8; }
.gm-status { min-height: 1.5em; font-size: 18px; }
.gm-status:empty { display: none; }
.gm-ver { margin-inline-start: auto; font-size: 12px; letter-spacing: .1em; color: rgba(207,200,184,.55); }
.gm-cubeLoading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--gm-mute); font-size: 18px; pointer-events: none; }
.gm-spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(86,214,200,.25); border-top-color: var(--gm-teal); animation: gmSpin 1s linear infinite; }
@keyframes gmSpin { to { transform: rotate(360deg); } }
/* lekcje / wzory — lista */
.gm-lessonList { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gm-lessonBtn { font: inherit; font-size: 17px; line-height: 1.3; text-align: start; min-height: 56px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--gm-ink); background: rgba(255,255,255,.04); border: 1px solid rgba(227,196,106,.35); display: flex; align-items: center; gap: 10px; }
.gm-lessonBtn:hover { border-color: var(--gm-gold); }
.gm-lessonBtn[aria-pressed="true"] { border-color: var(--gm-teal); box-shadow: 0 0 18px rgba(86,214,200,.35); }
.gm-lessonBtn .gm-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--gm-head); color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); }
.gm-lessonBtn[data-done="1"] .gm-num { background: linear-gradient(135deg, #BFF0E8, #56D6C8); }
.gm-lessonCard { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.gm-algLine { display: flex; flex-direction: column; gap: 6px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-chip { font: 18px/1 ui-monospace, Consolas, monospace; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); color: var(--gm-ink); }
.gm-chip[data-state="done"] { background: rgba(86,214,200,.25); border-color: var(--gm-teal); color: #BFF0E8; }
.gm-chip[data-state="now"] { background: rgba(227,196,106,.28); border-color: var(--gm-gold); color: var(--gm-gold3); box-shadow: 0 0 14px rgba(227,196,106,.4); }
.gm-chip[data-state="wrong"] { background: rgba(217,48,48,.3); border-color: #FFB4A8; }
.gm-chipsBig .gm-chip { font-size: 20px; padding: 10px 12px; }
.gm-stepBig { font-family: var(--gm-head); font-size: 30px !important; color: var(--gm-gold3) !important; line-height: 1.2; }
.gm-playerBar { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-playerBar .gm-btn { min-width: 56px; }
.gm-speed { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gm-pill { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 16px; border-radius: 999px; cursor: pointer; color: var(--gm-ink); background: rgba(255,255,255,.05); border: 1px solid rgba(227,196,106,.4); }
.gm-pill[aria-pressed="true"] { color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); }
/* ręczne kolory */
.gm-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-swatch { font: inherit; font-size: 15px; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer; color: var(--gm-ink); background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.15); }
.gm-swatch i { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.gm-swatch[aria-checked="true"] { border-color: var(--gm-gold); box-shadow: 0 0 16px rgba(227,196,106,.5); }
.gm-net { display: grid; grid-template-columns: repeat(4, max-content); grid-template-areas: ". U . ." "L F R B" ". D . ."; gap: 10px; justify-content: start; }
.gm-nf { display: flex; flex-direction: column; gap: 4px; }
.gm-nf-U { grid-area: U; } .gm-nf-L { grid-area: L; } .gm-nf-F { grid-area: F; } .gm-nf-R { grid-area: R; } .gm-nf-B { grid-area: B; } .gm-nf-D { grid-area: D; }
.gm-nfName { font-size: 13px; color: var(--gm-mute); white-space: nowrap; }
.gm-nfGrid { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; padding: 4px; border-radius: 8px; background: #0B0F1E; }
.gm-sticker { width: 34px; height: 34px; border-radius: 6px; border: 1px solid rgba(0,0,0,.45); background: #3A3F55; cursor: pointer; padding: 0; }
.gm-sticker[data-c="U"] { background: var(--cube-U); } .gm-sticker[data-c="R"] { background: var(--cube-R); } .gm-sticker[data-c="F"] { background: var(--cube-F); } .gm-sticker[data-c="D"] { background: var(--cube-D); } .gm-sticker[data-c="L"] { background: var(--cube-L); } .gm-sticker[data-c="B"] { background: var(--cube-B); }
.gm-sticker[disabled] { cursor: default; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.gm-sticker[data-bad="1"] { outline: 3px solid #FFB4A8; outline-offset: 1px; }
.gm-sticker:focus-visible { outline: 3px solid var(--gm-gold); }
/* stoper */
.gm-clock { font-family: var(--gm-head); font-size: 72px; line-height: 1; letter-spacing: .04em; color: var(--gm-gold3); text-shadow: 0 0 30px rgba(227,196,106,.45); font-variant-numeric: tabular-nums; }
.gm-clock[data-run="1"] { color: #BFF0E8; text-shadow: 0 0 30px rgba(86,214,200,.6); }
.gm-clock[data-run="2"] { color: #FFB4A8; }
.gm-check { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; color: var(--gm-mute); min-height: 48px; cursor: pointer; }
.gm-check input { width: 24px; height: 24px; accent-color: var(--gm-gold); }
.gm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.gm-stats div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.gm-stats b { font-family: var(--gm-head); font-size: 26px; font-weight: 400; color: var(--gm-gold3); font-variant-numeric: tabular-nums; }
.gm-stats span { font-size: 14px; color: var(--gm-mute); }
.gm-timeList { margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; color: var(--gm-ink); font-variant-numeric: tabular-nums; }
.gm-timeList:empty::before { content: attr(data-empty); display: block; margin-inline-start: -26px; color: var(--gm-mute); }
.gm-timeList li small { color: var(--gm-mute); font-size: 14px; margin-inline-start: 8px; }
.gm-timeList li[data-pen="dnf"] { text-decoration: line-through; color: var(--gm-mute); }
@media (max-width: 900px) { .gm-cubePanel { grid-template-columns: 1fr; } .gm-onlyDesktop { display: none; } .gm-cubeHost { max-height: 60vh; } .gm-cubeView { position: static; } .gm-clock { font-size: 60px; } }
@media (max-width: 560px) { .gm-moveGrid { gap: 8px; } .gm-move { min-height: 50px; font-size: 20px; } .gm-net { grid-template-columns: repeat(3, max-content); grid-template-areas: "U R F" "D L B"; justify-content: center; } .gm-nfGrid { grid-template-columns: repeat(3, 30px); } .gm-sticker { width: 30px; height: 30px; } .gm-nfName { font-size: 12px; } .gm-lessonList { grid-template-columns: 1fr 1fr; } }
/* v6: obrazki ruchów, lektor, kolorowy tekst (opisy jak dla dzieci) */
.gm-mvIcon { width: 34px; height: 36px; flex: none; vertical-align: middle; }
.gm-mvFace { fill: #1C2448; stroke: #0B0F1E; stroke-width: 1; } .gm-mvFace-U { fill: #2A3566; } .gm-mvFace-R { fill: #151C3A; }
.gm-mvHl { fill: rgba(227,196,106,.75); stroke: #FFF1C2; stroke-width: .6; }
.gm-mvArrow { stroke: #56D6C8; stroke-width: 3; stroke-linecap: round; } .gm-mvHead { fill: #56D6C8; }
.gm-mvTwo { font: 700 11px sans-serif; fill: #BFF0E8; }
.gm-moveGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-move { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 6px 4px; font-family: inherit; }
.gm-move .gm-mvIcon { width: 48px; height: 50px; } .gm-mvWord { font-size: 15px; line-height: 1.15; font-weight: 700; text-align: center; } .gm-mvKey { font-size: 12px; color: var(--gm-mute); font-family: ui-monospace, Consolas, monospace; }
.gm-moveInv .gm-mvWord { color: var(--gm-teal); }
.gm-say { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(227,196,106,.35); font-size: 20px; color: var(--gm-ink); }
.gm-say .gm-mvIcon { width: 44px; height: 46px; } .gm-say b { color: var(--gm-gold3); font-family: var(--gm-head); font-weight: 400; font-size: 24px; } .gm-sayPre { color: var(--gm-mute); }
.gm-col { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: .92em; line-height: 1.4; border: 1px solid rgba(0,0,0,.35); color: #111; vertical-align: baseline; }
.gm-col[data-c="U"] { background: var(--cube-U); } .gm-col[data-c="R"] { background: var(--cube-R); color: #fff; } .gm-col[data-c="F"] { background: var(--cube-F); color: #fff; } .gm-col[data-c="D"] { background: var(--cube-D); } .gm-col[data-c="L"] { background: var(--cube-L); } .gm-col[data-c="B"] { background: var(--cube-B); color: #fff; }
.gm-mv { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; margin: 1px 0; border-radius: 999px; background: rgba(227,196,106,.14); border: 1px solid rgba(227,196,106,.4); color: var(--gm-gold3); font-weight: 700; font-size: .92em; white-space: nowrap; vertical-align: middle; }
.gm-mv .gm-mvIcon { width: 26px; height: 28px; }
.gm-chip { display: inline-flex; align-items: center; gap: 4px; } .gm-chip .gm-mvIcon { width: 24px; height: 26px; }
@media (max-width: 560px) { .gm-moveGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm-move { min-height: 78px; } .gm-mvWord { font-size: 14px; } }
/* v8: mały napis „przód” na środkowym polu (podąża za kostką); kursory: łapka obok kostki, strzałki na ściance */
.gm-frontLbl { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 999px; font: 700 12px/1.3 sans-serif; letter-spacing: .06em; text-transform: lowercase; color: #15120A; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gm-cubeHost { cursor: grab; }
.gm-say[hidden] { display: flex; visibility: hidden; } /* lektor zawsze zajmuje miejsce — kostka nie skacze, gdy pojawia się napis */
/* v9: realistyczne obrazki ruchów (render 3D) + powiększenie po najechaniu / przytrzymaniu */
.gm-mvImg { object-fit: contain; border-radius: 10px; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.10), transparent 70%); transition: transform .18s ease, box-shadow .18s ease; transform-origin: 50% 60%; }
.gm-move .gm-mvImg { width: 76px; height: 76px; } .gm-move { min-height: 124px; gap: 4px; overflow: visible; position: relative; }
.gm-move:hover { z-index: 20; } .gm-move:hover .gm-mvImg, .gm-move:focus-visible .gm-mvImg { transform: scale(2.6); box-shadow: 0 18px 40px rgba(0,0,0,.65); border-radius: 14px; background: #0B1230; }
.gm-chip { position: relative; } .gm-chip .gm-mvImg { width: 34px; height: 34px; } .gm-chip:hover { z-index: 20; } .gm-chip:hover .gm-mvImg { transform: scale(4.2); box-shadow: 0 18px 40px rgba(0,0,0,.65); background: #0B1230; }
.gm-mv .gm-mvImg { width: 34px; height: 34px; } .gm-mv { position: relative; } .gm-mv:hover { z-index: 20; } .gm-mv:hover .gm-mvImg { transform: scale(4); box-shadow: 0 18px 40px rgba(0,0,0,.65); background: #0B1230; }
.gm-say .gm-mvImg { width: 96px; height: 96px; } .gm-say { min-height: 104px; }
.gm-moveGrid { overflow: visible; }
@media (max-width: 560px) { .gm-move .gm-mvImg { width: 64px; height: 64px; } .gm-move { min-height: 112px; } .gm-say .gm-mvImg { width: 72px; height: 72px; } }
/* v10: prowadzenie krok po kroku (Naucz się) */
.gm-guide { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.gm-guideHead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--gm-gold); }
.gm-guideNext { display: flex; align-items: center; gap: 14px; min-height: 100px; padding: 8px 12px; border-radius: 14px; background: rgba(227,196,106,.10); border: 1px solid rgba(227,196,106,.35); font-family: var(--gm-head); font-size: 26px; color: var(--gm-gold3); }
.gm-guideNext .gm-mvImg { width: 96px; height: 96px; } .gm-guideNext .gm-mvIcon { width: 72px; height: 76px; }
.gm-guideNext[data-auto="1"] { border-color: var(--gm-teal); color: #BFF0E8; }
#guideWarn:not(:empty) { padding: 8px 12px; border-radius: 12px; background: rgba(217,48,48,.18); border: 1px solid rgba(255,180,168,.5); font-weight: 700; }
.gm-say[data-tone="wrong"] { border-color: #FFB4A8; background: rgba(217,48,48,.18); } .gm-say[data-tone="wrong"] b { color: #FFB4A8; }
.gm-guideNext:empty { display: none; } /* po ułożeniu pusta ramka znika */
/* v11: żywe miniatury + sygnał „Dobrze!” i „Jeszcze raz” */
canvas.gm-mvThumb { background: transparent; }
.gm-guideAgain { font-size: 18px; color: var(--gm-teal); margin-inline-end: 4px; }
.gm-say[data-tone="ok"] { border-color: var(--gm-teal); background: rgba(86,214,200,.16); } .gm-say[data-tone="ok"] .gm-sayPre { color: #BFF0E8; font-weight: 700; }
@keyframes gmPulse2 { 0% { box-shadow: 0 0 0 0 rgba(86,214,200,.7); } 100% { box-shadow: 0 0 0 16px rgba(86,214,200,0); } }
.gm-pulse { animation: gmPulse2 .7s ease-out 1; }
/* v12: goście (podgląd z blokadą), prosta instrukcja, lista ruchów etapu */
.gm-lock { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(14,24,64,.96), rgba(8,14,40,.96)); border: 1px solid var(--gm-gold); box-shadow: 0 10px 30px rgba(0,0,0,.6); margin-bottom: 12px; }
.gm-lock h3 { margin: 0; font-family: var(--gm-head); font-size: 24px; font-weight: 400; color: var(--gm-gold3); } .gm-lock p { margin: 0; color: var(--gm-ink); font-size: 18px; }
.gm-locked > :not(.gm-lock) { pointer-events: none; opacity: .5; filter: saturate(.6); }
.gm-guestNote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 16px; }
.gm-hintSimple { font-size: 18px; color: var(--gm-ink); }
.gm-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.gm-stepChip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); font-size: 11px; line-height: 1.15; text-align: center; color: var(--gm-mute); }
.gm-stepChip img, .gm-stepChip .gm-mvIcon { width: 56px; height: 56px; }
.gm-stepChip[data-state="done"] { border-color: #56D6C8; background: rgba(86,214,200,.18); color: #BFF0E8; }
.gm-stepChip[data-state="done"]::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-weight: 700; color: #BFF0E8; }
.gm-stepChip[data-state="now"] { border-color: var(--gm-gold); background: rgba(227,196,106,.2); color: var(--gm-gold3); box-shadow: 0 0 14px rgba(227,196,106,.5); transform: scale(1.06); }
.gm-stepChip[data-state="todo"] { opacity: .6; }
.gm-stepChip .gm-num { position: absolute; top: 2px; left: 6px; font-size: 10px; color: var(--gm-mute); }
/* v13: numery kroków, zakładki pod ikonką na telefonie, tryb skupienia (tylko kostka + krok) */
.gm-stepNo { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-gold); font-weight: 700; }
.gm-chip .gm-stepNo { font-family: inherit; font-size: 10px; margin-inline-end: 2px; }
.gm-guideNext .gm-stepNo { font-family: var(--gm-head); font-size: 18px; }
.gm-say .gm-stepNo { font-size: 14px; }
.gm-tabsToggle { display: none; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: 18px; min-height: 52px; padding: 8px 16px; border-radius: 14px; color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); border: 1px solid rgba(255,241,194,.6); cursor: pointer; margin-bottom: 12px; }
.gm-tabsToggle svg { width: 26px; height: 26px; }
.gm-solveOffer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; }
@media (max-width: 900px) {
  .gm-tabsToggle { display: inline-flex; }
  .gm-tabs { display: none; } .gm-tabs.gm-open { display: flex; flex-direction: column; align-items: stretch; }
  .gm-tabs.gm-open button { justify-content: flex-start; }
  body.gm-focus .gm-head, body.gm-focus .gm-cubeHints, body.gm-focus #guideIntro, body.gm-focus #guideText, body.gm-focus #guideHint, body.gm-focus .gm-guideHead, body.gm-focus #guideStart, body.gm-focus .gm-lead { display: none !important; } /* nagłówek ma styl inline display:flex */
  body.gm-focus .gm-cubeHost { max-height: 80vh; }
  body.gm-focus .gm-say { font-size: 22px; } body.gm-focus .gm-say b { font-size: 28px; } body.gm-focus .gm-say .gm-mvImg { width: 110px; height: 110px; }
  body.gm-focus .gm-main { padding-top: 8px; }
}
/* v14: telefon — kostka na całą szerokość ekranu (wąskie marginesy) */
@media (max-width: 900px) {
  .gm-cube .gm-main { padding-left: 6px; padding-right: 6px; gap: 14px; }
  .gm-cube .gm-cubePanel.gm-tile { padding: 10px 6px; }
  .gm-cube .gm-cubeHost { max-height: none; }
  body.gm-focus .gm-cubeHost { max-height: none; }
}
/* v15: automat układania w Wirtualnej kostce */
.gm-auto { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(227,196,106,.35); display: flex; flex-direction: column; gap: 10px; }
.gm-auto h3 { margin: 0; font-family: var(--gm-head); font-weight: 400; font-size: 22px; color: var(--gm-gold); }
.gm-auto .gm-autoP { margin: 0; font-size: 17px; line-height: 1.4; color: var(--gm-mute); }
.gm-auto .gm-cubeActions { margin-top: 0; }
.gm-autoMsg { margin: 0; min-height: 1.4em; font-size: 18px; line-height: 1.4; color: var(--gm-ink); } .gm-autoMsg.gm-err { color: #FFB4A8; } .gm-autoMsg:empty { display: none; }
/* v16: wspólne opcje nad kostką */
.gm-opts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(227,196,106,.3); }
.gm-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .gm-opt .gm-kicker { white-space: nowrap; }
.gm-pills { display: flex; flex-wrap: wrap; gap: 6px; } .gm-opts .gm-pill { min-height: 40px; padding: 4px 14px; font-size: 16px; }
.gm-optsToggle { display: inline-flex; margin-bottom: 10px; } /* v17: na komputerze też przycisk, opcje = okienko */
.gm-cubeHost.gm-sizeS { width: 64%; margin: 0 auto; max-height: 50vh; }
#patternSpeed, #solvePlayer .gm-speed, #virtualSpeed { display: none !important; } /* prędkość jest wspólna nad kostką */
body.gm-focus #cubeOpts, body.gm-focus #cubeOptsToggle { display: none !important; }
@media (max-width: 900px) {
  .gm-opts.gm-open { flex-direction: column; align-items: stretch; gap: 10px; }
  .gm-cubeHost.gm-sizeS { width: 76%; }
}
/* v17: opcje jako okienko nad kostką: krzyżyk, kliknięcie obok lub Esc zamyka */
.gm-optsWrap { position: relative; }
.gm-opts { display: none; }
.gm-opts.gm-open { display: flex; position: absolute; top: 100%; left: 0; z-index: 40; width: min(100%, 640px); margin: 0; padding-right: 52px; background: #101B35; border-color: rgba(227,196,106,.6); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.gm-optsClose { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(227,196,106,.5); background: rgba(255,255,255,.06); color: var(--gm-ink); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gm-optsClose:hover { background: rgba(227,196,106,.25); }
/* v20: Trening */
.gm-trainToday { margin: 10px 0 14px; padding: 14px 16px; border-radius: 14px; background: rgba(227,196,106,.08); border: 1px solid rgba(227,196,106,.45); }
.gm-trainToday h3 { margin: 4px 0 6px; font-family: var(--gm-head); font-weight: 400; font-size: 24px; color: var(--gm-gold); }
.gm-trainTag { margin-left: 8px; }
.gm-trainWeek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.gm-week { display: flex; gap: 6px; }
.gm-day { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--gm-mute); border: 1px solid rgba(255,255,255,.18); }
.gm-dayDone { color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); border-color: transparent; }
.gm-dayNow { outline: 2px solid var(--gm-gold); outline-offset: 2px; }
.gm-streak { font-size: 17px; color: var(--gm-ink); }
#trainStages .gm-lessonBtn { display: flex; align-items: center; gap: 10px; }
/* v21: „Nie wiem, gdzie jestem” */
.gm-lost { margin: 6px 0 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,120,100,.08); border: 1px solid rgba(255,140,120,.5); }
.gm-lost h4 { margin: 0 0 4px; font-family: var(--gm-head); font-weight: 400; font-size: 22px; color: #FFB4A8; }
.gm-lostNets { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.gm-netMini { display: flex; flex-direction: column; gap: 4px; }
.gm-netSvg { width: 180px; height: 135px; display: block; }
.gm-netBad { stroke: #FF3B2F; stroke-width: 2; }
.gm-lostWays { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gm-lostWays .gm-way { font: inherit; text-align: start; cursor: pointer; }
.gm-lostWays .gm-way b { font-family: var(--gm-head); font-weight: 400; font-size: 20px; } .gm-lostWays .gm-way span { font-size: 15px; }
.gm-lostWays .gm-way { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold) 45%, var(--gm-gold2)); border: 1px solid rgba(255,241,194,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #7A6224; }
.gm-lostWays .gm-way span { color: #2B2410; } .gm-lostWays .gm-way:hover { filter: brightness(1.06); }
.gm-lostWays .gm-wayPlay { background: rgba(255,255,255,.05); color: var(--gm-ink); border: 1px solid rgba(227,196,106,.5); box-shadow: none; } .gm-lostWays .gm-wayPlay span { color: var(--gm-mute); }
/* v23: duże litery i mocne kontrasty (opcja w okienku) */
body.gm-hi .gm-cube { font-size: 20px; }
body.gm-hi .gm-cube .gm-rich, body.gm-hi .gm-cube p, body.gm-hi .gm-cube .gm-status, body.gm-hi .gm-cube .gm-autoP { font-size: 20px; line-height: 1.5; }
body.gm-hi .gm-cube .gm-kicker { font-size: 15px; color: var(--gm-gold); }
body.gm-hi .gm-cube .gm-btn, body.gm-hi .gm-cube .gm-pill, body.gm-hi .gm-cube .gm-lessonBtn { font-size: 19px; min-height: 50px; }
body.gm-hi .gm-cube .gm-cubeSide, body.gm-hi .gm-cube .gm-lost, body.gm-hi .gm-cube .gm-auto, body.gm-hi .gm-cube .gm-opts, body.gm-hi .gm-cube .gm-trainToday, body.gm-hi .gm-cube .gm-guideNext, body.gm-hi .gm-cube .gm-stepChip { border-color: rgba(255,255,255,.55); }
body.gm-hi .gm-cube .gm-say { font-size: 24px; } body.gm-hi .gm-cube .gm-say b { font-size: 30px; }
body.gm-hi .gm-cube .gm-stepChip { font-size: 18px; } body.gm-hi .gm-cube .gm-stepNo { font-size: 16px; }
body.gm-hi .gm-cube .gm-guideNext b, body.gm-hi .gm-cube .gm-guideNext span { font-size: 26px; }
body.gm-hi .gm-cube :is(p, span, b, li, td, label, h2, h3, h4) { color: #FFFFFF; } body.gm-hi .gm-cube .gm-kicker { color: var(--gm-gold3); }
body.gm-hi .gm-cube .gm-move { border-width: 2px; }
/* v24: Trener AI */
.gm-coachQuick { margin-bottom: 10px; }
.gm-coachAnswer { margin: 8px 0 14px; padding: 14px 16px; border-radius: 14px; background: rgba(86,214,200,.08); border: 1px solid rgba(86,214,200,.45); } .gm-coachAnswer p { margin: 0; font-size: 19px; line-height: 1.5; }
.gm-coachAi { background: rgba(227,196,106,.08); border-color: rgba(227,196,106,.5); }
.gm-coachForm { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.gm-coachForm textarea { flex: 1 1 240px; min-height: 60px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(227,196,106,.5); background: rgba(0,0,0,.3); color: var(--gm-ink); font: inherit; font-size: 18px; resize: vertical; }
.gm-coachWho { margin-top: 14px; font-size: 15px; color: var(--gm-mute); }
/* v26: dopisek „to wiedza ogólna” pod odpowiedzią Trenera */
.gm-coachNote { margin-top: 8px !important; font-size: 15px !important; color: var(--gm-mute) !important; }
/* v27: skan kamerą */
.gm-scan { position: fixed; inset: 0; z-index: 90; background: rgba(5,10,24,.9); display: flex; align-items: center; justify-content: center; padding: 12px; }
.gm-scanBox { position: relative; width: min(100%, 560px); max-height: 100%; overflow: auto; padding: 18px 20px 14px; border-radius: 16px; background: #101B35; border: 1px solid rgba(227,196,106,.6); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.gm-scanBox h3 { margin: 0 36px 4px 0; font-family: var(--gm-head); font-weight: 400; font-size: 24px; color: var(--gm-gold); }
.gm-scanView { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #000; margin: 8px 0; }
.gm-scanView video { width: 100%; height: 100%; object-fit: cover; }
.gm-scanGrid { position: absolute; top: 50%; left: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; pointer-events: none; }
.gm-scanGrid i { border: 2px solid rgba(255,255,255,.85); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; }
.gm-scanFaces { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.gm-scanChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 15px; color: var(--gm-mute); border: 1px solid rgba(255,255,255,.15); }
.gm-scanChip::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--cube-U); } .gm-scanChip[data-c="R"]::before { background: var(--cube-R); } .gm-scanChip[data-c="F"]::before { background: var(--cube-F); } .gm-scanChip[data-c="D"]::before { background: var(--cube-D); } .gm-scanChip[data-c="L"]::before { background: var(--cube-L); } .gm-scanChip[data-c="B"]::before { background: var(--cube-B); }
.gm-scanNow { color: var(--gm-ink); border-color: var(--gm-gold); } .gm-scanDone { color: var(--gm-teal); }
.gm-scanPriv { margin: 8px 0 0; font-size: 14px; color: var(--gm-mute); }
@media (max-width: 900px) { .gm-scanView { aspect-ratio: 1; } }
/* v28: Rozwiąż — skan jako główna droga, większe pola siatki */
.gm-solveScan { margin: 8px 0 14px; padding: 14px 16px; border-radius: 14px; background: rgba(227,196,106,.08); border: 1px solid rgba(227,196,106,.45); }
.gm-solveScan h3, .gm-solveManualH { margin: 0 0 8px; font-family: var(--gm-head); font-weight: 400; font-size: 22px; color: var(--gm-gold); }
.gm-solveManualH { margin-top: 6px; }
.gm-cube .gm-nfGrid { grid-template-columns: repeat(3, 44px); gap: 4px; } .gm-cube .gm-sticker { width: 44px; height: 44px; border-radius: 8px; }
@media (max-width: 560px) { .gm-cube .gm-nfGrid { grid-template-columns: repeat(3, 36px); gap: 3px; } .gm-cube .gm-sticker { width: 36px; height: 36px; } }
/* v29: wzory — grupy i miniatury */
.gm-patHead { width: 100%; margin: 6px 0 2px; }
.gm-patBtn { display: flex; align-items: center; gap: 10px; }
.gm-patThumb { flex: 0 0 72px; width: 72px; height: 54px; display: block; border-radius: 6px; background: rgba(0,0,0,.25); } .gm-patThumb svg { width: 72px; height: 54px; display: block; }
.gm-patName { flex: 1 1 auto; }
/* v29b: lista wzorów — nagłówek grupy na całą szerokość, 2 kolumny (telefon 1), żeby miniatura i nazwa się mieściły */
.gm-cube #patternList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-cube #patternList .gm-patHead { grid-column: 1 / -1; }
.gm-cube .gm-patName { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .gm-cube #patternList { grid-template-columns: 1fr; } }
/* v29c: nazwa wzoru bez łamania w środku słowa; mniejsza miniatura */
.gm-cube .gm-patName { overflow-wrap: normal; word-break: normal; font-size: 16px; line-height: 1.25; }
.gm-cube .gm-patThumb { flex-basis: 64px; width: 64px; height: 48px; } .gm-cube .gm-patThumb svg { width: 64px; height: 48px; }
/* v31: szukanie wzorów */
.gm-patTools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 10px; }
.gm-patSearch { flex: 1 1 220px; min-height: 46px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(227,196,106,.5); background: rgba(0,0,0,.3); color: var(--gm-ink); font: inherit; font-size: 17px; }
.gm-patEasy { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; cursor: pointer; } .gm-patEasy input { width: 22px; height: 22px; accent-color: #E3C46A; }
/* v33: Wzory — wybrany wzór (miniatura + nazwa + powrót), ramka prowadzenia jak w „Naucz się”; tryb skupienia na telefonie także w Wzorach */
.gm-patPick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 10px; } .gm-patPick b { font-size: 22px; } .gm-cube .gm-patPick .gm-patThumb { flex-basis: 96px; width: 96px; height: 72px; } .gm-cube .gm-patPick .gm-patThumb svg { width: 96px; height: 72px; }
body.gm-focus #panel-patterns > h2, body.gm-focus #patternIntro, body.gm-focus #patternCount { display: none !important; } /* v34: pasek wzoru z „Wróć do listy” zostaje u góry także w trybie skupienia */
.gm-cube .gm-net { grid-template-columns: repeat(3, max-content); grid-template-areas: "U R F" "D L B"; justify-content: center; } /* v33: siatka 3+3 także na komputerze — 4 ścianki obok siebie nie mieściły się w panelu */
/* v34: duży podgląd miniatury wzoru po najechaniu myszką; większa miniatura w widoku wzoru */
.gm-patZoom { position: absolute; z-index: 2147482000; width: 340px; height: 260px; box-sizing: border-box; padding: 12px; border-radius: 16px; background: #0B0F1E; border: 2px solid rgba(241,210,122,.85); box-shadow: 0 12px 40px rgba(0,0,0,.6); pointer-events: none; } .gm-patZoom[hidden] { display: none; } .gm-patZoom svg { width: 100%; height: 100%; display: block; }
.gm-cube .gm-patThumb { cursor: zoom-in; } .gm-cube .gm-patPick .gm-patThumb { flex-basis: 128px; width: 128px; height: 96px; } .gm-cube .gm-patPick .gm-patThumb svg { width: 128px; height: 96px; }
/* v35: dawny Trening w „Naucz się” — chowa się razem z przyciskami startu (gdy trwa prowadzenie) */
#guideStart[hidden] ~ #learnHome { display: none; }
.gm-stagePick { margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); } .gm-stagePick h3 { margin: 0 0 6px; }
/* v36: Lekcje układania w „Naucz się” — następna lekcja złota, zaliczone z zielonym ✓ */
.gm-lessons { margin: 4px 0 14px; } .gm-lessons h3 { margin: 0 0 6px; font-family: var(--gm-head); font-weight: 400; font-size: 24px; color: var(--gm-gold); }
.gm-lesList { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .gm-lesCard { position: relative; text-align: start; } .gm-lesCard .gm-lesName { font-size: 18px; }
.gm-lesCard.gm-lesNext { border-color: rgba(241,210,122,.95); box-shadow: 0 0 0 2px rgba(241,210,122,.35); } .gm-lesCard.gm-lesDone { border-color: rgba(91,227,166,.55); }
.gm-lesTick { margin-inline-start: auto; font-size: 22px; font-weight: 700; color: #5be3a6; }
.gm-lessonEnd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; } .gm-lessonEnd[hidden] { display: none; }
@media (max-width: 560px) { .gm-lesList { grid-template-columns: 1fr; } }
.gm-lesCard { display: flex; align-items: center; gap: 10px; }