/* Pisaczek Rozrywka — wygląd „kosmiczny” (marker PNP_PISACZEK_GAMES_CSS_V1, wersja 4 — 13.10: skopiowane ze strony głównej pisaczek.pl v3:
   gwiazdy lecące na widza, przyciski-klawisze 3D, talia 3D za myszką, reflektor na kartach, świecące bryły; + unoszące się figury). Tekst ≥ 18 px (seniorzy). Każdy ekran Rozrywki używa tych klas. */
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/gry.php?font=exo2-cyrillicext') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/gry.php?font=exo2-cyrillic') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/gry.php?font=exo2-vietnamese') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/gry.php?font=exo2-latinext') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/gry.php?font=exo2-latin') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; font-display: swap; src: url('/gry.php?font=audiowide-latinext') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Audiowide'; font-style: normal; font-weight: 400; font-display: swap; src: url('/gry.php?font=audiowide-latin') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@property --gm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --gm-bg: #07080c; --gm-ink: #F3EEE2; --gm-mute: #CFC8B8; --gm-gold: #E3C46A; --gm-gold2: #C7A23E; --gm-gold3: #FFF1C2; --gm-teal: #56D6C8; --gm-kick: #B9A67A;
  --gm-line: rgba(227,196,106,.28); --gm-glass: rgba(255,255,255,.045); --gm-sq-l: #D9E1E8; --gm-sq-d: #46536A; --dx: 6deg; --dy: -6deg; --mx: 50%; --my: 50%; --gm-body: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif; --gm-head: "Audiowide", "Exo 2", "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body.gm { min-height: 100vh; background: radial-gradient(120vw 70vh at 50% 110%, rgba(12,30,85,.28), transparent 60%) fixed, linear-gradient(180deg, #020410 0%, #040c28 38%, #061236 62%, #040b24 85%, #020614 100%) fixed, #030a1f; color: var(--gm-ink); font: 18px/1.5 var(--gm-body); overflow-x: hidden; }
.gm-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gm-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* słońce (v7: mniejsze, realne — bez rysunkowych promieni): biała tarcza z rozmytą krawędzią i blaskiem; wokół niego niebo rozjaśnia się jak za dnia (ciepło przy tarczy → błękit → noc) */
.gm-sunlight { position: absolute; right: calc(7vw + clamp(32px, 3.25vw, 52px) - 24vw); top: calc(6vh + clamp(32px, 3.25vw, 52px) - 24vw); width: 48vw; height: 48vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,196,.55) 0%, rgba(255,205,140,.36) 12%, rgba(140,185,255,.26) 26%, rgba(70,110,210,.12) 40%, transparent 58%); animation: gmBreath 12s ease-in-out infinite; }
.gm-sun { position: absolute; right: 7vw; top: 6vh; width: clamp(64px, 6.5vw, 104px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFFBEE 34%, #FFF0B8 58%, rgba(255,226,150,.75) 80%, rgba(255,210,120,0) 100%);
  box-shadow: 0 0 26px 8px rgba(255,246,214,.95), 0 0 80px 34px rgba(255,220,140,.55), 0 0 220px 90px rgba(255,180,90,.24); animation: gmSun 8s ease-in-out infinite; }
.gm-sun::before { content: ""; position: absolute; left: -140%; right: -140%; top: 42%; height: 16%; background: linear-gradient(90deg, transparent, rgba(255,240,205,.32) 35%, rgba(255,250,235,.5) 50%, rgba(255,240,205,.32) 65%, transparent); filter: blur(5px); border-radius: 50%; }
.gm-sun::after { content: ""; position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, transparent 46%, rgba(255,238,200,.14) 50%, transparent 58%); }
.gm-moonlight { position: absolute; left: calc(6vw + clamp(40px, 4.5vw, 70px) - 18vw); bottom: calc(10vh + clamp(40px, 4.5vw, 70px) - 18vw); width: 36vw; height: 36vw; border-radius: 50%; background: radial-gradient(circle, rgba(190,210,255,.30) 0%, rgba(130,160,255,.14) 28%, rgba(90,120,220,.06) 44%, transparent 60%); }
.gm-moon { position: absolute; left: 6vw; bottom: 10vh; width: clamp(80px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 62% 30%, rgba(96,108,140,.55) 0 5.5%, transparent 6.5%), radial-gradient(circle at 30% 58%, rgba(96,108,140,.5) 0 9%, transparent 10%), radial-gradient(circle at 70% 70%, rgba(96,108,140,.45) 0 4.5%, transparent 5.5%), radial-gradient(circle at 48% 80%, rgba(96,108,140,.35) 0 3.5%, transparent 4.5%), radial-gradient(circle at 36% 34%, #FFFFFF 0%, #E9EEF9 24%, #BFC9DE 60%, #8893AE 100%);
  box-shadow: inset -16px -12px 30px rgba(28,36,70,.75), 0 0 28px 8px rgba(205,222,255,.35), 0 0 110px 42px rgba(140,170,255,.16); animation: gmFloat 14s ease-in-out infinite; }
.gm-main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 44px) 56px; display: flex; flex-direction: column; gap: 28px; }
.gm-in { animation: gmIn .8s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: var(--d, 0s); }
.gm-kicker { font-family: var(--gm-head); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gm-kick); }
.gm-head h1 { margin: 4px 0 0; font-family: var(--gm-head); font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; font-weight: 400; letter-spacing: .01em; }
.gm-gl { background: linear-gradient(100deg, var(--gm-gold2), var(--gm-gold) 35%, var(--gm-gold3) 50%, var(--gm-gold) 65%, var(--gm-gold2)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gmShine 6s linear infinite; }
.gm-lead { margin: 10px 0 0; color: var(--gm-mute); max-width: 60ch; }
.gm-tabs { display: flex; flex-wrap: wrap; gap: 12px; perspective: 700px; padding-top: 6px; }
.gm-tabs button { position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: .02em; min-height: 48px; padding: 9px 20px 9px 16px; border-radius: 14px; cursor: pointer; color: var(--gm-ink); will-change: transform;
  background: linear-gradient(180deg, rgba(255,241,194,.20), rgba(227,196,106,.08) 55%, rgba(86,214,200,.14)); border: 1px solid rgba(227,196,106,.65); border-bottom-color: rgba(86,214,200,.7); backdrop-filter: blur(8px);
  transform: perspective(500px) rotateX(16deg) translateZ(8px); transition: transform .35s cubic-bezier(.2,.9,.3,1.35), box-shadow .35s, color .2s, background .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(86,214,200,.10), 0 2px 0 #3A2E12, 0 4px 0 #2B220D, 0 6px 0 #1A1408, 0 14px 26px rgba(0,0,0,.6), 0 0 22px rgba(227,196,106,.28); }
.gm-tabs button svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--gm-teal); filter: drop-shadow(0 0 6px rgba(86,214,200,.8)); }
.gm-tabs button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); background-size: 260% 100%; animation: gmSweep 5.5s ease-in-out infinite; animation-delay: var(--sw, 0s); }
.gm-tabs button:nth-child(2) { --sw: .6s; } .gm-tabs button:nth-child(3) { --sw: 1.2s; } .gm-tabs button:nth-child(4) { --sw: 1.8s; } .gm-tabs button:nth-child(5) { --sw: 2.4s; } .gm-tabs button:nth-child(6) { --sw: 3s; }
.gm-tabs button:hover, .gm-tabs button:focus-visible { z-index: 3; color: var(--gm-gold); transform: perspective(500px) rotateX(-6deg) translateZ(70px) translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #3A2E12, 0 4px 0 #2B220D, 0 7px 0 #1A1408, 0 40px 40px -10px rgba(0,0,0,.85), 0 0 40px rgba(217,180,107,.45); outline: none; }
.gm-tabs button:active { transform: perspective(500px) rotateX(10deg) translateZ(0) translateY(2px); }
.gm-tabs button[aria-selected="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; }
.gm-tabs button[aria-selected="true"] svg { color: #15120A; filter: none; }
.gm-tabs button[aria-selected="true"] { 
  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-btn:focus-visible { outline: 3px solid var(--gm-teal); outline-offset: 2px; }
.gm-note { padding: 16px 20px; border-radius: 16px; background: var(--gm-glass); border: 1px dashed rgba(86,214,200,.45); color: var(--gm-mute); }
.gm-stage { perspective: 1600px; }
.gm-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 30px; transform-style: preserve-3d; transform: rotateX(var(--dx)) rotateY(var(--dy)); transition: transform .25s ease-out; }
/* kafel = przestrzenny panel HUD: szklana tafla z liniami skanowania, złote narożniki, bryła z grubością (piętrowe cienie), krążąca obwódka, reflektor; całość w perspektywie jak w kokpicie */
.gm-tile { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 30px; border-radius: 16px; color: var(--gm-ink);
  background:
    linear-gradient(var(--gm-gold), var(--gm-gold)) 12px 12px / 26px 2px no-repeat, linear-gradient(var(--gm-gold), var(--gm-gold)) 12px 12px / 2px 26px no-repeat,
    linear-gradient(var(--gm-gold), var(--gm-gold)) calc(100% - 12px) 12px / 26px 2px no-repeat, linear-gradient(var(--gm-gold), var(--gm-gold)) calc(100% - 12px) 12px / 2px 26px no-repeat,
    linear-gradient(var(--gm-gold), var(--gm-gold)) 12px calc(100% - 12px) / 26px 2px no-repeat, linear-gradient(var(--gm-gold), var(--gm-gold)) 12px calc(100% - 12px) / 2px 26px no-repeat,
    linear-gradient(var(--gm-gold), var(--gm-gold)) calc(100% - 12px) calc(100% - 12px) / 26px 2px no-repeat, linear-gradient(var(--gm-gold), var(--gm-gold)) calc(100% - 12px) calc(100% - 12px) / 2px 26px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, rgba(86,214,200,.16), rgba(14,24,64,.62) 45%, rgba(227,196,106,.12));
  border: 1px solid rgba(227,196,106,.5); border-top-color: rgba(255,241,194,.75); /* bez backdrop-filter: w preserve-3d z dziećmi translateZ dawał jasny pas (Chromium) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(86,214,200,.35), inset 0 0 40px rgba(86,214,200,.08),
    0 3px 0 #2E2812, 0 7px 0 #0B1230, 0 11px 0 #070C22, 0 15px 0 #04071a, 0 44px 70px rgba(0,0,0,.7), 0 0 60px rgba(86,214,200,.12);
  transform-style: preserve-3d; transform: translateZ(var(--z, 0px)) rotateY(var(--ty, 0deg)); transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s; animation: gmFloat 9s ease-in-out infinite; }
.gm-tile:nth-child(1) { --z: 30px; } .gm-tile:nth-child(2) { --z: 10px; animation-delay: -4.5s; } /* v12: bez stałego rotateY ±7° — Chromium rysował przez obrócony kafel pionowy pas (talia nadal pochyla się za wskaźnikiem) */
.gm-tile:hover { transform: translateZ(calc(var(--z, 0px) + 40px)) rotateY(calc(var(--ty, 0deg) * .4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(86,214,200,.5), inset 0 0 50px rgba(86,214,200,.14), 0 3px 0 #2E2812, 0 7px 0 #0B1230, 0 11px 0 #070C22, 0 15px 0 #04071a, 0 70px 90px rgba(0,0,0,.75), 0 0 90px rgba(86,214,200,.26); }
.gm-tile::before { content: ""; position: absolute; inset: -2px; border-radius: 17px; padding: 1.5px; background: conic-gradient(from var(--gm-a), transparent, rgba(227,196,106,.95), transparent 30%, rgba(86,214,200,.85) 60%, transparent 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; pointer-events: none; animation: gmRing 10s linear infinite; }
.gm-tile::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,241,194,.14), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.gm-tile:hover::after { opacity: 1; }
/* obiekt unosi się nad podstawą projektora: świecący dysk + stożek światła (hologram) */
.gm-art { position: relative; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; width: 240px; height: 250px; max-width: 100%; margin-inline: auto; padding-bottom: 22px; transform: translateZ(50px); }
/* stożek = miękka poświata od podstawy w górę (bez clip-path i filter — w 3D dawały pas na kaflu) */
.gm-art::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 92%; height: 96%; translate: -50% 0; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(86,214,200,.36) 0%, rgba(86,214,200,.14) 38%, rgba(86,214,200,.04) 62%, transparent 76%); z-index: -1; animation: gmBeam 4s ease-in-out infinite; }
.gm-art::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 78%; height: 22px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(190,255,245,.95) 0%, rgba(86,214,200,.7) 18%, rgba(86,214,200,.22) 48%, transparent 72%); box-shadow: 0 0 18px 4px rgba(86,214,200,.45), 0 0 0 1px rgba(86,214,200,.5) inset; z-index: -1; animation: gmPulse 4s ease-in-out infinite; }
.gm-cube3d { width: 150px; height: 150px; perspective: 700px; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }
.gm-cubeBox { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; animation: gmCube 16s ease-in-out infinite; }
.gm-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; background: #0a0a0c; border-radius: 10px; backface-visibility: hidden; }
.gm-face i { border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -8px 14px rgba(0,0,0,.25), 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
.gm-face.U { transform: rotateX(90deg) translateZ(75px); } .gm-face.D { transform: rotateX(-90deg) translateZ(75px); }
.gm-face.F { transform: translateZ(75px); } .gm-face.B { transform: rotateY(180deg) translateZ(75px); }
.gm-face.R { transform: rotateY(90deg) translateZ(75px); } .gm-face.L { transform: rotateY(-90deg) translateZ(75px); }
.gm-boardWrap { perspective: 900px; }
.gm-board { direction: ltr; width: 224px; height: 224px; display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 12px; overflow: hidden; transform: rotateX(22deg) rotateZ(-4deg); box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(227,196,106,.5), 0 0 34px rgba(86,214,200,.18); }
.gm-board i { display: flex; align-items: center; justify-content: center; }
.gm-board i.l { background: var(--gm-sq-l); } .gm-board i.d { background: var(--gm-sq-d); }
.gm-board img { width: 100%; height: 100%; }
.gm-info { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; transform: translateZ(24px); }
.gm-info h2 { margin: 0; font-family: var(--gm-head); font-size: 32px; line-height: 1.15; font-weight: 400; }
.gm-info p { margin: 0; color: var(--gm-mute); }
.gm-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(86,214,200,.12); border: 1px solid rgba(86,214,200,.6); color: #BFF0E8; font-size: 16px; }
.gm-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gm-teal); box-shadow: 0 0 12px var(--gm-teal); animation: gmPulse 1.8s ease-in-out infinite; }
.gm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 14px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; transition: transform .15s, box-shadow .2s; }
.gm-gold { background: linear-gradient(135deg, var(--gm-gold3), var(--gm-gold) 40%, var(--gm-gold2)); color: #15120A; box-shadow: 0 10px 30px rgba(227,196,106,.3); }
.gm-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(227,196,106,.45); }
.gm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; perspective: 1100px; }
.gm-card { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; border-radius: 12px; transform: rotateX(8deg); transform-style: preserve-3d;
  background:
    linear-gradient(var(--gm-teal), var(--gm-teal)) 9px 9px / 18px 2px no-repeat, linear-gradient(var(--gm-teal), var(--gm-teal)) 9px 9px / 2px 18px no-repeat,
    linear-gradient(var(--gm-teal), var(--gm-teal)) calc(100% - 9px) calc(100% - 9px) / 18px 2px no-repeat, linear-gradient(var(--gm-teal), var(--gm-teal)) calc(100% - 9px) calc(100% - 9px) / 2px 18px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, rgba(86,214,200,.18), rgba(10,20,56,.68) 55%, rgba(217,180,107,.10));
  border: 1px solid rgba(86,214,200,.45); border-top-color: rgba(190,255,245,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 26px rgba(86,214,200,.14), 0 3px 0 #0E3A38, 0 6px 0 #0B1230, 0 9px 0 #06091c, 0 26px 44px rgba(0,0,0,.6);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.35), box-shadow .3s, border-color .2s; }
.gm-card:hover { border-color: rgba(86,214,200,.9); transform: rotateX(0deg) translateZ(34px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 32px rgba(86,214,200,.22), 0 3px 0 #0E3A38, 0 6px 0 #0B1230, 0 9px 0 #06091c, 0 40px 60px rgba(0,0,0,.65), 0 0 36px rgba(86,214,200,.3); }
.gm-card svg { flex: 0 0 44px; width: 44px; height: 44px; color: var(--gm-teal); filter: drop-shadow(0 0 10px rgba(86,214,200,.6)); }
.gm-card p { margin: 6px 0 0; color: var(--gm-mute); }
.gm-empty { margin: 12vh auto 0; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gm-empty h1 { margin: 0; font-family: var(--gm-head); font-size: 30px; line-height: 1.2; font-weight: 400; }
.gm-empty p { margin: 0; color: var(--gm-mute); }
[hidden] { display: none !important; }
@keyframes gmShine { to { background-position: -200% 0; } }
@keyframes gmFloat { 50% { translate: 0 -10px; } }
@keyframes gmBeam { 50% { opacity: .55; } }
@keyframes gmSun { 50% { transform: scale(1.02); box-shadow: 0 0 32px 10px rgba(255,246,214,1), 0 0 96px 40px rgba(255,220,140,.62), 0 0 250px 100px rgba(255,180,90,.28); } }
@keyframes gmSweep { 0%, 55% { background-position: 120% 0; } 100% { background-position: -140% 0; } }
@keyframes gmBreath { 50% { transform: translate(4%, 3%) scale(1.08); opacity: .75; } }
@keyframes gmPulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes gmRing { to { --gm-a: 360deg; } }
@keyframes gmIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes gmCube { 0% { transform: rotateX(-28deg) rotateY(-35deg); } 50% { transform: rotateX(-18deg) rotateY(145deg); } 100% { transform: rotateX(-28deg) rotateY(325deg); } }
/* RTL: słońce i księżyc lustrzanie (nagłówek jest po prawej) */
[dir="rtl"] .gm-sun { right: auto; left: 7vw; } [dir="rtl"] .gm-sunlight { right: auto; left: calc(7vw + clamp(32px, 3.25vw, 52px) - 24vw); } [dir="rtl"] .gm-moon { left: auto; right: 6vw; } [dir="rtl"] .gm-moonlight { left: auto; right: calc(6vw + clamp(40px, 4.5vw, 70px) - 18vw); }
@media (max-width: 560px) { .gm-tile { --ty: 0deg; --z: 0px; } .gm-card { transform: none; } .gm-sun { right: 5vw; top: 2vh; width: 62px; } [dir="rtl"] .gm-sun { left: 5vw; } .gm-sunlight { right: calc(5vw + 31px - 45vw); top: calc(2vh + 31px - 45vw); width: 90vw; height: 90vw; } [dir="rtl"] .gm-sunlight { left: calc(5vw + 31px - 45vw); } .gm-moon { left: -4vw; bottom: 16vh; width: 84px; } [dir="rtl"] .gm-moon { right: -4vw; } .gm-moonlight { left: calc(-4vw + 42px - 35vw); bottom: calc(16vh + 42px - 35vw); width: 70vw; height: 70vw; } [dir="rtl"] .gm-moonlight { right: calc(-4vw + 42px - 35vw); } .gm-head { padding-inline-end: 76px; } .gm-art { width: 200px; height: 200px; } .gm-board { width: 196px; height: 196px; } .gm-info h2 { font-size: 30px; }  .gm-deck { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .gm-deck, .gm-tabs button, .gm-card { transform: none; } .gm-tile { transform: none; } .gm-cubeBox { transform: rotateX(-28deg) rotateY(-35deg); } .gm-tabs button::after { display: none; } }
/* Start v8: cały kafelek jest wejściem do gry (link), bez osobnych przycisków; „wkrótce” bez linku */
a.gm-tile { text-decoration: none; color: var(--gm-ink); cursor: pointer; }
a.gm-tile:focus-visible { outline: 3px solid var(--gm-gold); outline-offset: 4px; }
.gm-enter { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--gm-head); font-size: 20px; color: var(--gm-gold); }
.gm-enter::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--gm-gold); border-bottom: 2px solid var(--gm-gold); transform: rotate(-45deg); }
.gm-tile:hover .gm-enter { text-shadow: 0 0 14px rgba(227,196,106,.7); }
/* Start v9: karta „Dzisiejszy trening” prowadzi do Treningu kostki */
a.gm-cardLink { text-decoration: none; color: inherit; cursor: pointer; } a.gm-cardLink:hover { filter: brightness(1.08); }
/* Start v10 (E): panele Osiągnięcia / Statystyki / Znajomi */
.gm-panel { padding: 26px 28px; border-radius: 16px; background: rgba(10,18,40,.55); border: 1px solid rgba(227,196,106,.35); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.gm-panel h2 { margin: 0 0 4px; font-family: var(--gm-head); font-weight: 400; font-size: 32px; color: var(--gm-gold); } .gm-panel h3 { margin: 16px 0 6px; font-family: var(--gm-head); font-weight: 400; font-size: 22px; color: var(--gm-ink); }
.gm-panel .gm-lead { margin: 0 0 16px; } .gm-muted { color: var(--gm-mute); font-size: 18px; } .gm-err { color: #FFB4A8; }
.gm-achGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.gm-ach { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); opacity: .75; }
.gm-achOn { opacity: 1; background: rgba(227,196,106,.1); border-color: rgba(227,196,106,.6); }
.gm-achIcon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gm-mute); background: rgba(255,255,255,.06); }
.gm-achOn .gm-achIcon { color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); }
.gm-achBody b { display: block; font-size: 19px; } .gm-achBody p { margin: 4px 0 6px; font-size: 16px; color: var(--gm-mute); } .gm-achDate { font-size: 14px; color: var(--gm-gold); }
.gm-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; } .gm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gm-gold3), var(--gm-gold2)); }
.gm-statGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-bottom: 18px; }
.gm-stat { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 4px; }
.gm-stat b { font-family: var(--gm-head); font-weight: 400; font-size: 30px; color: var(--gm-gold); } .gm-stat span { font-size: 16px; color: var(--gm-mute); }
.gm-days14Wrap { display: flex; flex-direction: column; gap: 8px; } .gm-days14 { display: flex; gap: 6px; align-items: flex-end; height: 90px; }
.gm-dayCol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .gm-dayCol i { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: rgba(255,255,255,.12); } .gm-dayCol i.on { background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold2)); } .gm-dayCol span { font-size: 13px; color: var(--gm-mute); }
.gm-chBox { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; } .gm-chIncoming { border-color: rgba(227,196,106,.7); background: rgba(227,196,106,.1); }
.gm-chBox h3 { margin: 0 0 4px; } .gm-chBox p { margin: 4px 0 10px; font-size: 17px; }
.gm-chActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gm-chLink { margin-top: 12px; } .gm-chLinkRow { display: flex; flex-wrap: wrap; gap: 8px; } .gm-chLinkRow input { flex: 1 1 260px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(227,196,106,.5); background: rgba(0,0,0,.3); color: var(--gm-ink); font: inherit; font-size: 16px; }
.gm-chCopied { color: var(--gm-teal); min-height: 1.4em; }
.gm-chList { display: flex; flex-direction: column; gap: 10px; } .gm-ch { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); } .gm-ch b { font-size: 18px; } .gm-ch p { margin: 4px 0 0; font-size: 16px; color: var(--gm-mute); } .gm-chResult { color: var(--gm-gold); font-size: 18px; }
/* PNP_GAMES_TABS_V2 (16.10.2026, sesja Szachy, polecenie użytkownika): zakładki górne w CAŁEJ Rozrywce = płaski pasek segmentowy zamiast klawiszy 3D
   (3D: obrót i „wyskakiwanie” przy najechaniu zmieniało pole kliknięcia → chybione stuknięcia, zwłaszcza na dotyku; trudny do odczytania stan wybrany).
   Zasady: zero transformacji, duże pole (≥ 52 px), wybrana = złota, reszta = szkło, wyraźny focus; na telefonie działa dotychczasowy przycisk-lista (.gm-open). */
.gm-main .gm-tabs { perspective: none; display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(6,12,36,.55); border: 1px solid rgba(227,196,106,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.4); }
.gm-main .gm-tabs[hidden] { display: none; }
.gm-main .gm-tabs button, .gm-main .gm-tabs button:hover, .gm-main .gm-tabs button:active, .gm-main .gm-tabs button:focus-visible { transform: none; will-change: auto; backdrop-filter: none; box-shadow: none; border: 1px solid transparent; background: transparent; color: var(--gm-ink); min-height: 52px; padding: 10px 22px; border-radius: 15px; font-size: 18px; font-weight: 700; overflow: visible; transition: background .15s, color .15s, box-shadow .15s; }
.gm-main .gm-tabs button::after { display: none; }
.gm-main .gm-tabs button:hover { background: rgba(227,196,106,.12); color: var(--gm-gold3); }
.gm-main .gm-tabs button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gm-teal); }
.gm-main .gm-tabs button[aria-selected="true"], .gm-main .gm-tabs button[aria-pressed="true"], .gm-main .gm-tabs button[aria-selected="true"]:hover, .gm-main .gm-tabs button[aria-pressed="true"]:hover { color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold) 55%, var(--gm-gold2)); border-color: rgba(255,241,194,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(227,196,106,.35); }
.gm-main .gm-tabs button[aria-selected="true"] svg, .gm-main .gm-tabs button[aria-pressed="true"] svg { color: #15120A; filter: none; }
.gm-main .gm-tabs button svg { width: 22px; height: 22px; flex: 0 0 22px; }
.gm-main .gm-tabs button[data-soon="1"] { opacity: .7; }
@media (max-width: 900px) { .gm-main .gm-tabs:not(.gm-open) { display: none; } .gm-main .gm-tabs.gm-open { display: flex; flex-direction: column; align-items: stretch; } .gm-main .gm-tabs.gm-open button { justify-content: flex-start; } }
/* v32 (telefon ≤ 850 px): pasek u góry „‹ Pisaczek” i dolny pasek modułów jak w Notatkach; na komputerze ukryte */
.gm-backTop, .gm-mbar { display: none; }
@media (max-width: 850px) {
  .gm-backTop { display: inline-flex; align-items: center; gap: 6px; position: fixed; top: 10px; left: 10px; z-index: 45; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(10,18,40,.82); border: 1px solid rgba(227,196,106,.6); color: var(--gm-gold); text-decoration: none; font-size: 17px; font-weight: 600; backdrop-filter: blur(10px); }
  .gm-backTop span { font-size: 24px; line-height: 1; }
  body.gm .gm-main { padding-top: 62px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .gm-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid #e4e6eb; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .gm-mbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border-radius: 12px; color: #4b5563; text-decoration: none; font-size: 12px; font-weight: 600; }
  .gm-mbar a svg { width: 24px; height: 24px; } .gm-mbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .gm-mbar a.on { color: #5145b8; background: #efedff; }
}
/* R5.9 (17.10): Kontynuuj ostatnią grę, Ostatnio grane, grupy gier wg kategorii, kafel Sudoku, tarcza osiągnięć. Duże cele (≥ 56 px), tekst ≥ 18 px. */
.gm-resume { display: flex; flex-direction: column; gap: 18px; }
.gm-resume[hidden], .gm-recentWrap[hidden], .gm-allH[hidden] { display: none; }
.gm-cont { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; color: var(--gm-ink); text-decoration: none; background: linear-gradient(135deg, rgba(227,196,106,.16), rgba(10,22,60,.75) 55%); border: 1.5px solid rgba(227,196,106,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.45); }
.gm-cont:hover { border-color: var(--gm-gold3); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 3px rgba(227,196,106,.25), 0 14px 40px rgba(0,0,0,.45); }
.gm-cont:focus-visible { outline: 3px solid var(--gm-teal); outline-offset: 3px; }
.gm-contIco { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #15120A; background: linear-gradient(180deg, var(--gm-gold3), var(--gm-gold) 55%, var(--gm-gold2)); box-shadow: 0 6px 20px rgba(227,196,106,.4); }
.gm-contIco svg { width: 30px; height: 30px; margin-inline-start: 4px; }
[dir="rtl"] .gm-contIco svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 4px; }
.gm-contTxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-contTxt b { font-family: var(--gm-head); font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--gm-gold3); }
.gm-contTxt > span:last-child { font-size: 18px; color: var(--gm-mute); }
.gm-contBtn { flex: 0 0 auto; min-height: 56px; font-size: 19px; pointer-events: none; }
.gm-groupH { margin: 0; font-family: var(--gm-head); font-weight: 400; font-size: 22px; letter-spacing: .04em; color: var(--gm-ink); }
.gm-catH { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-kick); }
.gm-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.gm-recentItem { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border-radius: 14px; color: var(--gm-ink); text-decoration: none; background: rgba(6,12,36,.62); border: 1px solid rgba(227,196,106,.3); }
.gm-recentItem:hover { border-color: rgba(227,196,106,.8); background: rgba(227,196,106,.1); }
.gm-recentItem:focus-visible { outline: 3px solid var(--gm-teal); outline-offset: 2px; }
.gm-recentIco { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gm-gold3); background: rgba(227,196,106,.12); }
.gm-recentIco svg { width: 28px; height: 28px; }
.gm-recentTxt { display: flex; flex-direction: column; min-width: 0; }
.gm-recentTxt b { font-size: 19px; }
.gm-recentTxt span { font-size: 17px; color: var(--gm-mute); }
.gm-sdkArt { display: grid; grid-template-columns: repeat(9, 1fr); width: 200px; height: 200px; padding: 4px; gap: 1px; border-radius: 10px; background: #0B1638; border: 2px solid var(--gm-gold); box-shadow: 0 0 30px rgba(86,214,200,.25), inset 0 0 0 1px rgba(255,241,194,.25); transform: rotateX(18deg); }
.gm-sdkArt i { display: flex; align-items: center; justify-content: center; font-style: normal; font: 700 15px/1 var(--gm-body); color: #10204A; background: #EEF2F7; border-radius: 2px; }
.gm-sdkArt i.b { background: #D4DEEA; }
.gm-achIcon svg { width: 28px; height: 28px; }
.gm-achOn .gm-achIcon { background: rgba(227,196,106,.14); }
@media (max-width: 560px) { .gm-cont { flex-wrap: wrap; padding: 16px; gap: 14px; } .gm-contIco { flex-basis: 54px; width: 54px; height: 54px; } .gm-contBtn { width: 100%; } .gm-sdkArt { width: 180px; height: 180px; } }