/* Strona główna → „Współpraca”: klikalne szkoły i okno PIN-u wejścia do EscapeVerse (media/schools.js). Animacje tylko transform/opacity. */
.coop-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .75rem; }
.coop-head .icard-lbl { margin-bottom: 0; }
.coop-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; white-space: nowrap;
  font: 600 .68rem 'Space Grotesk', sans-serif; letter-spacing: .04em; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent); }
.coop-tag svg { width: 12px; height: 12px; }

/* kafelki szkół: szklane karty z monogramem na gradiencie; uniesienie, odblask i strzałka w gradiencie po najechaniu */
#wspolpraca .coop-list { display: flex; flex-direction: column; gap: .55rem; }
.coop-list li, .coop-list li:first-child, .coop-list li:last-child { padding: 0 !important; border: 0 !important; }
.coop-btn { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: .85rem; width: 100%; box-sizing: border-box; margin: 0; padding: .7rem .75rem .7rem .7rem;
  border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), color-mix(in srgb, var(--purple) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--border));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
body.light .coop-btn { background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--blue) 4%, #fff)); border-color: rgba(0, 86, 204, .12); box-shadow: 0 1px 2px rgba(15, 22, 40, .04); }
.coop-btn::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg) translateX(0); transition: transform .7s ease, opacity .3s; }
.coop-btn:hover, .coop-btn:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mc) 45%, transparent);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--mc) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--mc) 12%, transparent) inset; }
.coop-btn:hover::after, .coop-btn:focus-visible::after { opacity: 1; transform: skewX(-18deg) translateX(380%); }
.coop-btn:focus-visible { outline: 2px solid var(--mc); outline-offset: 2px; }
.coop-btn:active { transform: translateY(0) scale(.99); }
.coop-btn .fact-txt strong { font-size: 1rem; letter-spacing: -.01em; }
/* skrót szkoły: każdy kwadrat w tym samym lekkim stylu – jasne tło, napis i ramka w kolorze szkoły (--mc z panelu, domyślnie niebieski);
   pełny kolor dopiero po najechaniu. Kolor szkoły podkreśla też ramkę, cień i strzałkę kafelka */
.coop-btn { --mc: var(--blue); --mc2: var(--purple); }
.coop-btn.custom { --mc2: color-mix(in srgb, var(--mc) 70%, #000); }
.coop-mono { position: relative; isolation: isolate; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  font: 700 .86rem 'Space Grotesk', sans-serif; letter-spacing: -.01em; color: color-mix(in srgb, var(--mc) 55%, #fff);
  background: color-mix(in srgb, var(--mc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 38%, transparent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .3s, border-color .3s; }
body.light .coop-mono { color: color-mix(in srgb, var(--mc) 78%, #000); background: color-mix(in srgb, var(--mc) 9%, #fff); border-color: color-mix(in srgb, var(--mc) 26%, transparent); }
.coop-mono::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--mc), var(--mc2)); opacity: 0; transition: opacity .3s; }
.coop-mono.long { font-size: .74rem; }
.coop-mono.xlong { font-size: .62rem; letter-spacing: -.02em; }
.coop-btn:hover .coop-mono, .coop-btn:focus-visible .coop-mono { transform: rotate(-4deg) scale(1.05); color: #fff; border-color: transparent; }
.coop-btn:hover .coop-mono::before, .coop-btn:focus-visible .coop-mono::before { opacity: 1; }
.coop-go { flex: none; margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--text);
  border: 1px solid var(--border); background: var(--glass); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s, border-color .3s; }
body.light .coop-go { background: #fff; }
.coop-go svg { width: 15px; height: 15px; }
.coop-btn:hover .coop-go, .coop-btn:focus-visible .coop-go { transform: translateX(3px); color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--mc), var(--mc2)); }
.coop-hint { position: relative; margin: .9rem 0 0; padding: .65rem .8rem .65rem 2.15rem; border-radius: 12px; font-size: .8rem; line-height: 1.5; color: var(--muted);
  background: color-mix(in srgb, var(--blue) 5%, transparent); border: 1px dashed color-mix(in srgb, var(--blue) 25%, transparent); }
.coop-hint::before { content: ''; position: absolute; left: .8rem; top: .8rem; width: 15px; height: 15px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.coop-hint b { color: var(--text); font-weight: 600; }
@media (max-width: 600px) { .coop-head { flex-wrap: wrap; } .coop-mono { width: 40px; height: 40px; border-radius: 12px; } .coop-go { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .coop-btn, .coop-btn::after, .coop-mono, .coop-go { transition: none; } .coop-btn:hover { transform: none; } }

/* szkoła zalogowana na tym urządzeniu: zielona kropka w rogu kwadratu (pulsuje tylko opacity) i napis pod nazwą */
.coop-btn.is-live { border-color: color-mix(in srgb, #2B8A3E 45%, transparent); }
.coop-mono { overflow: visible; }
.coop-mono::before { border-radius: inherit; }
.coop-on { position: absolute; top: -4px; right: -4px; z-index: 2; width: 13px; height: 13px; border-radius: 50%; background: #2FB344; border: 2px solid var(--bg2); }
body.light .coop-on { border-color: #fff; }
.coop-on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: #2FB344; opacity: 0; animation: coop-ping 2s ease-out infinite; }
@keyframes coop-ping { 0% { opacity: .5; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
.coop-live { display: block; font: 600 .74rem/1.3 'Inter', sans-serif; color: #2FB344; }
body.light .coop-live { color: #237A35; }
.coop-user { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; font-size: .78rem; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, #F59F00 12%, transparent); border: 1px solid color-mix(in srgb, #F59F00 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .coop-on::after { animation: none; } }

/* pasek u góry z zalogowaną szkołą: media/school-nav.css + school-nav.js (wspólne ze wszystkimi podstronami) */

/* ── Więcej niż 4 szkoły: wyszukiwarka-pigułka + kafelki w 2 kolumnach z przewijaniem (media/schools.js → many) ── */
.coop-search { position: relative; margin-bottom: .7rem; }
.coop-search svg { position: absolute; left: .9rem; top: 1.3rem; width: 16px; height: 16px; transform: translateY(-50%); color: var(--blue); pointer-events: none; }
.coop-search input { width: 100%; height: 2.6rem; box-sizing: border-box; padding: 0 5.2rem 0 2.5rem; border-radius: 999px; font: 500 .88rem 'Inter', sans-serif; color: var(--text);
  background: var(--glass); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border)); outline: none; transition: border-color .2s, box-shadow .2s; }
body.light .coop-search input { background: #fff; border-color: rgba(0, 86, 204, .16); }
.coop-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
.coop-search input::placeholder { color: var(--muted); }
.coop-search input::-webkit-search-cancel-button { cursor: pointer; }
.coop-count { position: absolute; right: .45rem; top: 1.3rem; transform: translateY(-50%); padding: .2rem .6rem; border-radius: 999px; pointer-events: none;
  font: 600 .7rem 'Space Grotesk', sans-serif; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.coop-none { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
#wspolpraca .coop-list.coop-many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-height: 272px; overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px 16px 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blue) 35%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.coop-many li[hidden] { display: none; }
.coop-many .coop-btn { height: 100%; padding: .6rem .6rem; gap: .6rem; border-radius: 14px; }
.coop-many .coop-mono { width: 42px; height: 42px; border-radius: 12px; font-size: .84rem; }
.coop-many .coop-mono.long { font-size: .72rem; }
.coop-many .coop-mono.xlong { font-size: .56rem; }
.coop-many .fact-txt strong { font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coop-many .fact-txt small { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coop-many .coop-go { display: none; }
@media (max-width: 600px) { #wspolpraca .coop-list.coop-many { grid-template-columns: minmax(0, 1fr); } .coop-many .coop-go { display: grid; width: 28px; height: 28px; } }

/* ── Okno PIN-u ── */
/* na środku ekranu: reset strony (* { margin: 0 }) zerował automatyczny margines okna dialogowego */
.coop-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(430px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: transparent; color: var(--text); overflow: visible; }
.coop-dlg::backdrop { background: rgba(4, 8, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.coop-dlg[open] .coop-box { animation: coop-in .32s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes coop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.coop-box { position: relative; overflow: hidden; padding: 1.6rem 1.5rem 1.4rem; border-radius: 24px; text-align: center;
  background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--blue) 16%, var(--bg2)), var(--bg2) 60%);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.coop-box::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--purple) 70%, transparent); box-shadow: 0 0 12px var(--blue); }
body.light .coop-box { background: radial-gradient(120% 80% at 50% -20%, #E6F0FF, #fff 60%); border-color: rgba(0, 86, 204, .18); box-shadow: 0 30px 80px -30px rgba(15, 22, 40, .45); }
.coop-x { position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--muted); background: var(--glass); border: 1px solid var(--border); }
.coop-x:hover { color: var(--text); }
.coop-x svg { width: 15px; height: 15px; }
.coop-app { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
  font: 700 .82rem 'Space Grotesk', sans-serif; color: var(--text); background: var(--glass2); border: 1px solid var(--border); }
.coop-app i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-style: normal; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.coop-app i svg { width: 15px; height: 15px; }
.coop-app small { font-weight: 500; color: var(--muted); }
.coop-school-ico { width: 64px; height: 64px; margin: 0 auto .75rem; display: grid; place-items: center; border-radius: 20px; color: var(--blue);
  background: var(--glow-b); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); }
.coop-school-ico svg { width: 30px; height: 30px; }
.coop-box h3 { margin: 0; font: 700 1.3rem/1.25 'Space Grotesk', sans-serif; }
.coop-sub { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.coop-lbl { display: block; margin: 1.4rem 0 .6rem; font: 600 .72rem 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.coop-pin { display: flex; justify-content: center; gap: .5rem; }
.coop-pin input { width: 3.1rem; height: 3.6rem; padding: 0; text-align: center; border-radius: 14px; font: 700 1.6rem 'Space Grotesk', sans-serif; color: var(--text); caret-color: var(--blue);
  background: var(--glass); border: 1.5px solid var(--border); transition: border-color .2s, box-shadow .2s, transform .2s; -webkit-text-security: disc; }
body.light .coop-pin input { background: #fff; border-color: rgba(15, 22, 40, .18); }
.coop-pin input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.coop-pin input.on { border-color: color-mix(in srgb, var(--blue) 60%, transparent); }
.coop-pin.bad input { border-color: #E03131; }
.coop-pin.bad { animation: coop-shake .4s ease; }
@keyframes coop-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.coop-pin.ok input { border-color: #2B8A3E; }
.coop-msg { min-height: 1.3rem; margin: .7rem 0 0; font-size: .85rem; font-weight: 500; }
.coop-msg.err { color: #FF6B6B; } body.light .coop-msg.err { color: #C92A2A; }
.coop-msg.ok { color: #51CF66; } body.light .coop-msg.ok { color: #2B8A3E; }
.coop-row { display: flex; gap: .6rem; margin-top: 1rem; }
.coop-row button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem 1rem; border-radius: 12px; cursor: pointer; font: 700 .92rem 'Space Grotesk', sans-serif; }
.coop-cancel { color: var(--text); background: var(--glass); border: 1px solid var(--border); }
.coop-go-btn { color: #fff; border: 0; background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 12px 28px -14px var(--blue); }
body.light .coop-go-btn { background: linear-gradient(135deg, #0056CC, #5B1FA5); }
.coop-go-btn:disabled { opacity: .6; cursor: progress; }
.coop-go-btn svg { width: 16px; height: 16px; }
.coop-note { margin: 1rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 420px) { .coop-pin { gap: .35rem; } .coop-pin input { width: 2.7rem; height: 3.2rem; font-size: 1.35rem; } .coop-box { padding: 1.4rem 1.1rem 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .coop-dlg[open] .coop-box, .coop-pin.bad { animation: none; } }

/* strzałki kafelków jak w kartach „Program”: co 4 s dwa lekkie kroki w prawo + rozchodzący się pierścień; kafelki po kolei (co 0,5 s), na komputerze i telefonie,
   po najechaniu – zwykłe przesunięcie kółka; tylko transform/opacity; bez ruchu przy „ogranicz ruch” */
.coop-go { position: relative; }
.coop-go::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--mc, #0056CC); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .coop-go svg { animation: coop-nudge 4s ease-in-out 1s infinite; }
  .coop-go::after { animation: coop-ring 4s ease-out 1s infinite; }
  .coop-list li:nth-child(2) .coop-go svg, .coop-list li:nth-child(2) .coop-go::after { animation-delay: 1.5s; }
  .coop-list li:nth-child(3) .coop-go svg, .coop-list li:nth-child(3) .coop-go::after { animation-delay: 2s; }
  .coop-list li:nth-child(4) .coop-go svg, .coop-list li:nth-child(4) .coop-go::after { animation-delay: 2.5s; }
  .coop-list li:nth-child(n+5) .coop-go svg, .coop-list li:nth-child(n+5) .coop-go::after { animation-delay: 3s; }
  .coop-btn:hover .coop-go svg, .coop-btn:hover .coop-go::after { animation: none; }
}
@keyframes coop-nudge { 0%, 62%, 100% { transform: none; } 70% { transform: translateX(3px); } 78% { transform: none; } 84% { transform: translateX(2px); } 90% { transform: none; } }
@keyframes coop-ring { 0%, 64% { opacity: 0; transform: scale(1); } 68% { opacity: .45; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1.5); } }

/* telefon: nazwa szkoły w jednej linii („Szkoła Podstawowa nr 10” – „nr 10” jest sklejone twardą spacją, więc przeskakiwało razem do drugiej linii):
   ciaśniejszy kafelek, mniejszy kwadrat i strzałka, czcionka nazwy zależna od szerokości ekranu; bardzo długie nazwy nadal łamią się normalnie */
@media (max-width: 600px) {
  .coop-btn, .coop-many .coop-btn { gap: .55rem; padding: .6rem .55rem .6rem .5rem; }
  .coop-mono, .coop-many .coop-mono { width: 38px; height: 38px; border-radius: 11px; font-size: .78rem; }
  .coop-mono.long, .coop-many .coop-mono.long { font-size: .66rem; }
  .coop-go, .coop-many .coop-go { width: 28px; height: 28px; }
  .coop-go svg { width: 13px; height: 13px; }
  .coop-btn .fact-txt strong { font-size: clamp(.76rem, 3.9vw, 1rem); letter-spacing: -.015em; }
}