/* ============================================================
   1 Milion Pikseli — publiczny front-end
   ============================================================ */
:root {
  --paper:#f6f7f9; --surface:#fff; --surface-2:#eef1f6;
  --ink:#12161d; --muted:#5a626e; --line:#e4e7ee; --line-2:#d3d9e2;
  --accent:#1a9d54; --accent-ink:#137a3f; --accent-soft:#e3f4ea;
  --gold:#b0791a; --good:#1c905a;
  --shadow: 0 1px 2px rgba(18,22,29,.04), 0 8px 24px rgba(18,22,29,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --maxw: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0c0f15; --surface:#141821; --surface-2:#1b212c;
    --ink:#e9edf4; --muted:#98a2b1; --line:#232a35; --line-2:#303947;
    --accent:#40cf82; --accent-ink:#74dfa0; --accent-soft:#12291d;
    --gold:#e0ac55; --good:#34be7c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="light"]{--paper:#f6f7f9;--surface:#fff;--surface-2:#eef1f6;--ink:#12161d;--muted:#5a626e;--line:#e4e7ee;--line-2:#d3d9e2;--accent:#1a9d54;--accent-ink:#137a3f;--accent-soft:#e3f4ea;--gold:#b0791a;--good:#1c905a;--shadow:0 1px 2px rgba(18,22,29,.04),0 8px 24px rgba(18,22,29,.06);}
:root[data-theme="dark"]{--paper:#0c0f15;--surface:#141821;--surface-2:#1b212c;--ink:#e9edf4;--muted:#98a2b1;--line:#232a35;--line-2:#303947;--accent:#40cf82;--accent-ink:#74dfa0;--accent-soft:#12291d;--gold:#e0ac55;--good:#34be7c;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.45);}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background-color:var(--paper); color:var(--ink);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size:30px 30px;
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }

.logo { width:24px; height:24px; display:inline-block; vertical-align:middle; flex:none;
  background:url("/favicon.svg") center/contain no-repeat; }

/* ---------- Header ---------- */
.site-head { position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line); }
.site-head .inner, .site-foot .inner {
  max-width:var(--maxw); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800;
  letter-spacing:-0.02em; color:var(--ink); font-size:1.06rem; }
.brand:hover { text-decoration:none; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text small { font-weight:600; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent-ink); margin-top:3px; }
.site-nav { margin-left:auto; display:flex; gap:6px; }
.site-nav a { padding:7px 13px; border-radius:8px; color:var(--muted); font-weight:500; font-size:.94rem; }
.site-nav a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.site-nav a.active { color:var(--accent-ink); background:var(--accent-soft); font-weight:600; }

/* ---------- Layout ---------- */
.site-main { max-width:var(--maxw); margin:0 auto; padding:40px 22px 72px; }
.narrow { max-width:760px; margin-inline:auto; }
h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; letter-spacing:-0.02em; margin:0 0 12px; text-wrap:balance; }
h2 { font-size:1.5rem; letter-spacing:-0.01em; margin:2.2em 0 .6em; }
h3 { font-size:1.2rem; margin:1.6em 0 .5em; }
p { margin:0 0 1.1em; }
.muted { color:var(--muted); }
.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 12px; }

/* ---------- Hero (home) ---------- */
.hero { text-align:center; padding:34px 0 12px; }
.hero h1 { font-size:clamp(2.1rem,6vw,3.4rem); }
.hero h1 span { color:var(--accent); }
.hero .lede { color:var(--muted); font-size:1.12rem; max-width:52ch; margin:0 auto 22px; }
.progress { max-width:520px; margin:26px auto 6px; }
.bar { height:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.bar > i { display:block; height:100%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 5px,var(--accent-ink) 5px 7px); }
.progress .cap { font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-top:10px; text-align:center; }
.progress .cap b { color:var(--ink); font-variant-numeric:tabular-nums; }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:11px 20px;
  border-radius:9px; font-weight:600; box-shadow:var(--shadow); }
.btn:hover { filter:brightness(1.07); text-decoration:none; }
.btn.ghost { background:transparent; color:var(--accent-ink); border:1px solid var(--line-2); box-shadow:none; }
.cta-row { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ---------- Sekcje ---------- */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:52px 0 20px; }
.section-head h2 { margin:0; }
.section-head a { font-size:.92rem; }

/* ---------- Grid artykułów ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(18,22,29,.10), 0 18px 40px rgba(18,22,29,.12); }
.card a.thumb { display:block; aspect-ratio:16/10; background:var(--surface-2); overflow:hidden; }
.card a.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.card:hover a.thumb img { transform:scale(1.04); }
.card .body { padding:16px 17px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .date { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.card h3 { margin:0; font-size:1.08rem; line-height:1.3; letter-spacing:-0.01em; }
.card h3 a { color:var(--ink); }
.card h3 a:hover { color:var(--accent-ink); text-decoration:none; }
.card .ex { color:var(--muted); font-size:.9rem; margin:0; }
.card .more { margin-top:auto; font-size:.86rem; font-weight:600; color:var(--accent-ink); }

/* ---------- Artykuł ---------- */
.article-head { margin-bottom:24px; }
.article-head .date { font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
.article-hero { border-radius:16px; overflow:hidden; margin:8px 0 28px; box-shadow:var(--shadow); border:1px solid var(--line); }
.article-hero img { width:100%; max-height:440px; object-fit:cover; }
.article-hero.ph { display:grid; place-items:center; text-align:center; padding:34px 24px; aspect-ratio:20/7; position:relative;
  background:linear-gradient(135deg, hsl(var(--h) 58% 50%), hsl(calc(var(--h) + 45) 60% 38%)); }
.article-hero.ph::after { content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:20px 20px; mix-blend-mode:soft-light; }
.article-hero.ph .ph-txt { position:relative; z-index:1; font-family:"Press Start 2P", var(--font); color:#fff;
  font-size:clamp(.7rem, 2.4vw, 1.05rem); line-height:1.6; letter-spacing:.02em; text-shadow:0 2px 0 rgba(0,0,0,.3);
  max-width:24ch; }
.prose { font-size:1.06rem; }
.prose img { border-radius:12px; margin:1.4em 0; }
.prose h2, .prose h3 { letter-spacing:-0.01em; }
.prose a { text-decoration:underline; text-underline-offset:2px; }
.prose ul, .prose ol { padding-left:1.3em; margin:0 0 1.1em; }
.prose li { margin:.3em 0; }
.prose blockquote { border-left:3px solid var(--accent); margin:1.4em 0; padding:.4em 0 .4em 1.1em; color:var(--muted); }
.prose figure { margin:1.4em 0; }
.prose table { border-collapse:collapse; width:100%; }
.prose td, .prose th { border:1px solid var(--line); padding:8px 10px; }
.backlink { display:inline-block; margin-top:36px; font-weight:600; }

/* ---------- Zagadki ---------- */
.riddles { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.riddle { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow); }
.riddle .q { font-weight:650; font-size:1.05rem; margin:0 0 10px; }
.riddle details summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft); padding:6px 12px; border-radius:20px; }
.riddle details summary::-webkit-details-marker { display:none; }
.riddle details[open] summary { color:var(--gold); background:color-mix(in srgb,var(--gold) 15%, transparent); }
.riddle .a { margin:12px 0 0; font-size:1.05rem; font-weight:600; color:var(--gold); }

/* ---------- Paginacja ---------- */
.pager { display:flex; gap:8px; justify-content:center; align-items:center; margin:44px 0 0; flex-wrap:wrap; }
.pager a, .pager span { min-width:40px; text-align:center; padding:9px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); font-variant-numeric:tabular-nums; font-size:.92rem; }
.pager a:hover { border-color:var(--accent); text-decoration:none; }
.pager .cur { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
.pager .dots { border:none; background:none; color:var(--muted); }

/* ---------- Empty / notice ---------- */
.notice { text-align:center; padding:56px 20px; color:var(--muted);
  border:1px dashed var(--line-2); border-radius:14px; background:var(--surface); }
.notice b { color:var(--ink); }

/* ---------- Plansza ---------- */
.plansza-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; }
.board-col { min-width:0; }
.board-frame { border:1px solid var(--line-2); border-radius:0; background:var(--surface-2); box-shadow:var(--shadow); overflow:hidden; }
#board { display:block; width:100%; height:auto; image-rendering:pixelated; cursor:crosshair; touch-action:none; user-select:none; }
.board-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tool { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); border-radius:8px; font-size:.85rem; font-weight:600; cursor:pointer; }
.tool:hover:not(:disabled) { border-color:var(--accent); }
.tool.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tool:disabled { opacity:.45; cursor:default; }
.tool-sep { width:1px; align-self:stretch; min-height:20px; background:var(--line); margin:0 4px; }
.hint-drag { margin-left:auto; font-style:italic; }
.legend { display:flex; gap:18px; margin-top:12px; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.legend .sw { display:inline-block; width:12px; height:12px; border:1px solid var(--line-2); vertical-align:middle; margin-right:5px; border-radius:2px; }
.legend .sw.free { background:var(--surface-2); }
.legend .sw.sel { background:var(--accent); border-color:var(--accent); }
.legend .sw.taken { background:#9aa4b2; }
.board-side { position:sticky; top:80px; display:flex; flex-direction:column; gap:16px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.panel h3 { margin:0 0 12px; font-size:1.05rem; }
.pick-row { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; color:var(--muted); font-size:.92rem; }
.pick-row b { color:var(--ink); font-variant-numeric:tabular-nums; }
.pick-row.total { border-top:1px solid var(--line); margin-top:4px; padding-top:12px; font-size:1rem; }
.pick-row.total b { color:var(--accent-ink); font-size:1.25rem; font-weight:800; }
.board-side .btn { width:100%; margin-top:10px; text-align:center; }
.form label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:12px; }
.form input, .form textarea { padding:9px 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; font-size:.92rem; width:100%; }
.form input:focus, .form textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.form .row-actions { display:flex; gap:8px; }
.form .row-actions .btn { margin-top:0; }
.res-msg { margin:12px 0 0; padding:10px 12px; border-radius:8px; font-size:.9rem; }
.res-msg.ok { background:color-mix(in srgb,var(--good) 15%,transparent); color:var(--good); }
.res-msg.err { background:color-mix(in srgb,#c23a2f 16%,transparent); color:#c23a2f; }
.crop-box { margin:2px 0 8px; }
.crop-box .crop-hint { font-size:.78rem; color:var(--muted); margin:0 0 8px; }
#cropCanvas { display:block; width:100%; max-width:300px; height:auto; border:1px solid var(--line-2);
  border-radius:8px; cursor:grab; touch-action:none; background:var(--surface-2); }
#cropCanvas:active { cursor:grabbing; }
#cropZoom { width:100%; max-width:300px; margin-top:10px; accent-color:var(--accent); display:block; }
.form input[type=file] { padding:8px 10px; font-size:.88rem; }
.board-tip { position:fixed; z-index:50; pointer-events:none; background:var(--ink); color:var(--paper);
  padding:6px 9px; border-radius:6px; font-size:.8rem; line-height:1.3; box-shadow:var(--shadow); }
.board-tip.drag { background:var(--accent); color:#fff; padding:8px 11px; font-size:.82rem; line-height:1.4; }
.board-tip.drag.erase { background:#c23a2f; }
.board-tip.drag b { font-size:.95rem; font-variant-numeric:tabular-nums; }
@media (max-width:820px){ .plansza-layout { grid-template-columns:1fr; } .board-side { position:static; } }
.plansza-section { margin-top:44px; }

/* ---------- Komunikat na stronie głównej ---------- */
.notice-bar { display:flex; align-items:center; gap:14px; margin:0 0 26px; padding:13px 18px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius:12px; }
.notice-bar p { margin:0; font-size:.94rem; color:var(--ink); }
.notice-bar .nb-badge { flex:none; font-family:"Press Start 2P", var(--font); font-size:.58rem;
  background:var(--accent); color:#fff; padding:8px 9px; border-radius:6px; }

/* ---------- Kolorowe, pikselowe kafelki artykułów ---------- */
.card a.thumb.ph { display:grid; place-items:center; padding:16px; text-align:center; aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(135deg, hsl(var(--h) 58% 52%), hsl(calc(var(--h) + 45) 60% 40%)); }
.card a.thumb.ph::after { content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:14px 14px; mix-blend-mode:soft-light; }
.card a.thumb.ph .ph-txt { position:relative; z-index:1; font-family:"Press Start 2P", var(--font);
  color:#fff; font-size:.6rem; line-height:1.55; letter-spacing:.02em; text-shadow:0 2px 0 rgba(0,0,0,.28);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Czcionka pikselowa (krótkie ozdobne teksty) ---------- */
.brand { font-family:"Press Start 2P", var(--font); font-size:.8rem; line-height:1.35; letter-spacing:0; }
.brand-text small { font-family:var(--font); }
.hero .eyebrow { font-family:"Press Start 2P", var(--font); font-size:.6rem; letter-spacing:.06em; line-height:1.6; }

/* ---------- Tabela firm pod planszą ---------- */
.firms-section { margin-top:44px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
table.firms { border-collapse:collapse; width:100%; min-width:420px; }
table.firms th, table.firms td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); }
table.firms thead th { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }
table.firms td.lp { color:var(--muted); font-variant-numeric:tabular-nums; width:48px; }
table.firms th.px, table.firms td.px { text-align:right; }
table.firms td.px { font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent-ink); }
table.firms tbody tr:last-child td { border-bottom:none; }
table.firms tbody tr:hover { background:var(--surface-2); }
table.firms td a { color:var(--ink); font-weight:600; }
table.firms td a:hover { color:var(--accent-ink); }

/* ---------- Footer ---------- */
.site-foot { border-top:1px solid var(--line); margin-top:40px; background:var(--surface); }
.site-foot .inner { flex-wrap:wrap; gap:14px 26px; padding-block:26px; }
.foot-brand { display:flex; align-items:center; gap:8px; font-weight:700; }
.foot-links { display:flex; gap:16px; flex-wrap:wrap; }
.foot-links a { color:var(--muted); font-size:.9rem; }
.foot-copy { margin-left:auto; color:var(--muted); font-size:.85rem; font-family:var(--mono); }

@media (max-width:860px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .riddles { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .site-nav { gap:2px; }
  .site-nav a { padding:6px 9px; font-size:.88rem; }
  .foot-copy { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto; }
}