@font-face{font-family:"Nority";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/nority.woff2) format("woff2");}

  :root {
    --bg:#fdf1ee; --paper:#fffdfb; --paper-2:#f8e9e3;
    --ink:#2b2350; --ink-soft:#6f6789;
    --pink:#f5308d; --teal:#4f6ad4; --orange:#f5891b; --lilac:#7a63ee;
    --line:#ece1cd; --header:rgba(253,241,238,.85); --header-fg:#2b2350; --shadow:rgba(43,35,80,.2);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#211b33; --paper:#2b2442; --paper-2:#342c4e;
      --ink:#f3eee2; --ink-soft:#b3aac6;
      --pink:#ff67ad; --teal:#7d97f0; --orange:#ffab4d; --lilac:#a99bff;
      --line:#3d3557; --header:rgba(33,27,51,.85); --header-fg:#f3eee2; --shadow:rgba(0,0,0,.45);
    }
  }
  :root[data-theme="light"] {
    --bg:#fdf1ee; --paper:#fffdfb; --paper-2:#f8e9e3;
    --ink:#2b2350; --ink-soft:#6f6789;
    --pink:#f5308d; --teal:#4f6ad4; --orange:#f5891b; --lilac:#7a63ee;
    --line:#ece1cd; --header:rgba(253,241,238,.85); --header-fg:#2b2350; --shadow:rgba(43,35,80,.2);
  }
  :root[data-theme="dark"] {
    --bg:#211b33; --paper:#2b2442; --paper-2:#342c4e;
    --ink:#f3eee2; --ink-soft:#b3aac6;
    --pink:#ff67ad; --teal:#7d97f0; --orange:#ffab4d; --lilac:#a99bff;
    --line:#3d3557; --header:rgba(33,27,51,.85); --header-fg:#f3eee2; --shadow:rgba(0,0,0,.45);
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  .page {
    --display: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --body: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg); color: var(--ink);
    font-family: var(--body); line-height: 1.62; min-height: 100vh;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word;
  }

  /* ---------- HEADER / MENU ---------- */
  .site-header { position: sticky; top: 0; z-index: 50; background: var(--header); backdrop-filter: blur(10px); }
  .checker { height: 14px; background-color: var(--orange); background-image: conic-gradient(var(--teal) 90deg, transparent 90deg 180deg, var(--teal) 180deg 270deg, transparent 270deg 360deg); background-size: 16px 16px; }
  .nav { max-width: 940px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px,4vw,28px); }
  .brand { font-family: "Nority", var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 1.2rem; color: var(--header-fg); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; flex: none; }
  .brand .bmk { color: var(--pink); font-size: 1.15rem; }
  .navlinks { display: flex; gap: 3px; margin-left: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { font-family: var(--display); font-size: .84rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; padding: 6px 13px; border-radius: 999px; transition: background .15s, color .15s; }
  .navlinks a:hover, .navlinks a:focus-visible { background: var(--paper-2); color: var(--ink); outline: none; }
  .navlinks a.active { background: var(--pink); color: #fff; }
  .nav-toggle { display: none; }

  .wrap { max-width: 820px; margin: 0 auto; padding: 0 clamp(16px,5vw,40px) 60px; }

  /* ---------- HERO ---------- */
  .hero { text-align: center; padding: clamp(20px,4vw,40px) 0 clamp(24px,5vw,40px); }
  .hero-banner { display:block; width:100%; height:clamp(150px,32vw,300px); object-fit:cover; border-radius:22px; margin:0 auto clamp(18px,4vw,30px); }
  .hero .eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .26em; font-size: .74rem; font-weight: 800; color: var(--teal); margin: 0 0 18px; }
  .hero h1 { font-family: "Nority", var(--display); font-size: clamp(2rem,9vw,4.6rem); line-height: .98; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 20px; }
  .hero h1 .a { color: var(--ink); } .hero h1 .b { color: var(--pink); }
  .hero p.lede { font-size: clamp(1.05rem,2.4vw,1.24rem); color: var(--ink-soft); max-width: 44ch; margin: 0 auto; text-wrap: balance; }
  .hero .suits { display: flex; justify-content: center; gap: 16px; margin-top: 24px; font-size: 1.5rem; }
  .hero .suits span:nth-child(1){color:var(--ink)} .hero .suits span:nth-child(2){color:var(--pink)}
  .hero .suits span:nth-child(3){color:var(--orange)} .hero .suits span:nth-child(4){color:var(--teal)}

  .group-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 12px; margin: 38px 0 18px; }
  .group-label .chip { background: var(--ink); color: var(--bg); padding: 4px 13px; border-radius: 999px; font-size: .72rem; letter-spacing: .06em; }
  .group-label span { color: var(--ink-soft); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .82rem; }
  .group-label::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }

  .searchbar { max-width: 520px; margin: 6px auto 0; }
  .searchbar input { width: 100%; font-family: var(--body); font-size: 1.05rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 999px; padding: 13px 22px; outline: none; transition: border-color .15s, box-shadow .15s; }
  .searchbar input::placeholder { color: var(--ink-soft); font-weight: 500; }
  .searchbar input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent); }
  .noresult { text-align: center; color: var(--ink-soft); margin: 34px 0; font-size: 1.05rem; }
  .catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px,1fr)); gap: 16px; }
  .tile { --accent: var(--pink); display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 18px; box-shadow: 0 14px 28px -18px var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .tile:hover, .tile:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 36px -18px var(--shadow); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); outline: none; }
  .tile .tmark { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .1em; color: var(--accent); margin-bottom: 13px; }
  .tile .tname { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 1.2rem; line-height: 1.05; margin: 0 0 4px; display: block; }
  .tile .tmeta { color: var(--ink-soft); font-size: .85rem; display: block; }
  .tile .tdiff { margin-top: 13px; font-size: .78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
  .tile .dots { letter-spacing: 3px; }
  .tile .dots .on { color: var(--accent); } .tile .dots .off { color: var(--line); }

  /* ---------- CATEGORY / GLOSSARY HEAD ---------- */
  .cathead { padding: clamp(30px,5vw,50px) 0 8px; }
  .cathead h1 { font-family: var(--display); font-size: clamp(2.2rem,6vw,3.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 0 0 8px; }
  .cathead h1 .u { color: var(--pink); }
  .cathead p { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 22px; max-width: 48ch; }

  /* ---------- GLOSSARY ---------- */
  .glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
  .term { --accent: var(--teal); background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 17px; box-shadow: 0 10px 22px -16px var(--shadow); }
  .term dt { font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--accent); margin: 0 0 5px; }
  .term dd { margin: 0; color: var(--ink); font-size: .93rem; }

  /* ---------- GAME PAGE ---------- */
  .game { --accent: var(--pink); padding-top: clamp(28px,5vw,44px); }
  .crumb { display: inline-block; font-family: var(--display); font-weight: 700; font-size: .84rem; color: var(--ink-soft); text-decoration: none; margin-bottom: 22px; }
  .crumb:hover { color: var(--accent); }
  .game .top { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
  .game .mark { width: clamp(54px,12vw,66px); height: clamp(54px,12vw,66px); flex: none; display: grid; place-items: center; border-radius: 17px; font-size: 1.9rem; color: #fff; background: var(--accent); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--accent) 70%, var(--shadow)); }
  .game .kicker { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; font-weight: 800; color: var(--accent); margin: 0 0 4px; }
  .game h2 { font-family: var(--display); font-size: clamp(2rem,5.8vw,2.9rem); font-weight: 800; letter-spacing: -.015em; margin: 0; line-height: 1.02; }
  .game .aka { color: var(--ink-soft); font-size: .95rem; }

  .badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
  .badge { font-family: var(--display); font-weight: 700; font-size: .8rem; background: var(--paper); border: 1.5px solid var(--line); color: var(--ink); padding: 5px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
  .badge b { color: var(--accent); font-weight: 800; }
  .dots { letter-spacing: 3px; font-size: .8rem; }
  .dots .on { color: var(--accent); } .dots .off { color: var(--line); }

  .lead { font-size: clamp(1.12rem,2.6vw,1.32rem); color: var(--ink); margin: 0 0 28px; font-weight: 600; line-height: 1.45; }

  .terms { background: var(--paper-2); border-radius: 16px; padding: 18px 22px; margin: 0 0 28px; }
  .terms h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 800; color: var(--accent); margin: 0 0 12px; }
  .terms dl { margin: 0; display: grid; gap: 9px; }
  .terms div { display: grid; grid-template-columns: 140px 1fr; gap: 4px 16px; }
  .terms dt { font-family: var(--display); font-weight: 700; color: var(--ink); }
  .terms dd { margin: 0; color: var(--ink-soft); }

  .steps { display: grid; gap: 22px; }
  .steps section { display: grid; grid-template-columns: 150px 1fr; gap: 4px 24px; }
  .steps h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 800; color: var(--accent); margin: 4px 0 0; }
  .steps p { margin: 0 0 9px; }
  .steps ol, .steps ul { margin: 0; padding-left: 1.2em; }
  .steps li { margin: 0 0 9px; }
  .steps li::marker { color: var(--accent); }
  .steps b { color: var(--ink); font-weight: 700; }
  .eg { color: var(--ink-soft); font-style: italic; }

  .example { margin-top: 6px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 24px -16px var(--shadow); }
  .example b { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; color: var(--accent); display: block; margin-bottom: 5px; }

  .tip { margin-top: 28px; background: color-mix(in srgb, var(--orange) 18%, var(--paper)); border-radius: 14px; padding: 16px 18px; font-size: .98rem; }
  .tip b { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: color-mix(in srgb, var(--orange) 55%, var(--ink)); display: block; margin-bottom: 4px; }
  .note { margin-top: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-radius: 14px; padding: 16px 18px; font-size: .98rem; }
  .note b { color: var(--accent); }

  .scroll { overflow-x: auto; margin: 4px 0; }
  table { border-collapse: collapse; width: 100%; font-size: .94rem; }
  th, td { text-align: left; padding: 8px 12px; border-bottom: 1.5px solid var(--line); }
  th { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; color: var(--ink-soft); font-weight: 800; }
  td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; }

  .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1.5px solid var(--line); }
  .pager a { font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--ink-soft); text-decoration: none; }
  .pager a:hover { color: var(--accent); }
  .pager a.next { margin-left: auto; text-align: right; }

  .site-footer { border-top: 1.5px solid var(--line); margin-top: 60px; padding: 32px 0; text-align: center; color: var(--ink-soft); }
  .site-footer small { font-size: .82rem; }
  .site-footer a { color: var(--pink); text-decoration: none; font-weight: 700; }

  @media (max-width: 760px) {
    .nav { gap: 12px; padding: 11px clamp(14px,4vw,28px); }
    .brand { font-size: 1.05rem; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
    .navlinks { display: none; }
    .site-header.menu-open .navlinks { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 10px clamp(16px,4vw,28px) 16px; box-shadow: 0 20px 30px -18px var(--shadow); overflow: visible; }
    .site-header.menu-open .navlinks a { padding: 13px 14px; font-size: 1.02rem; border-radius: 10px; }
    .catalog { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
  }
  @media (max-width: 600px) {
    .hero { padding-top: clamp(32px,8vw,60px); }
    .steps section { grid-template-columns: 1fr; gap: 2px; }
    .steps h3 { margin-top: 12px; }
    .terms div { grid-template-columns: 1fr; }
    .terms dt { margin-top: 4px; }
    .game .top { gap: 12px; }
    .game .mark { width: 48px; height: 48px; font-size: 1.5rem; }
  }
  @media (max-width: 400px) {
    .catalog { grid-template-columns: 1fr; }
  }

/* ---- Playing-card tiles ---- */
.tile { position: relative; text-align: center; min-height: 205px; padding: 46px 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.tile .corner { position: absolute; font-family: var(--display); font-weight: 800; line-height: .86; color: var(--accent); display: flex; flex-direction: column; align-items: center; font-size: 1.05rem; }
.tile .corner .s { font-size: .95em; }
.tile .corner.tl { top: 13px; left: 15px; }
.tile .corner.br { bottom: 13px; right: 15px; transform: rotate(180deg); }
.tile .cbody { display: flex; flex-direction: column; gap: 5px; align-items: center; max-width: 100%; }
.tile .tname { margin: 0; }
.tile .tmeta { margin: 0; }
.tile .tdiff { justify-content: center; margin-top: 6px; }
/* ---- Intro ---- */
.intro { max-width: 640px; margin: 50px auto 8px; text-align: center; }
.intro h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem,4vw,2rem); letter-spacing: -.01em; margin: 0 0 14px; }
.intro p { color: var(--ink-soft); font-size: 1.06rem; margin: 0 0 14px; }
/* ---- FAQ ---- */
.faq { max-width: 720px; margin: 46px auto 8px; }
.faq h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem,4vw,2rem); text-align: center; margin: 0 0 22px; }
.faq details { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 2px 20px; margin: 0 0 12px; }
.faq summary { font-family: var(--display); font-weight: 700; font-size: 1.05rem; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--pink); font-weight: 800; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 18px; color: var(--ink-soft); }
/* ---- SEO text block ---- */
.seo-text { max-width: 720px; text-align: left; }
.seo-text h2 { text-align: left; font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin: 30px 0 10px; }
.seo-text h2:first-child { margin-top: 0; }
.seo-text p { text-align: left; }
.seo-text a { color: var(--pink); font-weight: 600; text-decoration: none; }
.seo-text a:hover { text-decoration: underline; }
/* ---- Kontakt form ---- */
.kontakt-form { max-width: 560px; margin: 8px auto 40px; display: flex; flex-direction: column; gap: 16px; }
.kontakt-form label { display: flex; flex-direction: column; gap: 7px; font-family: var(--display); font-weight: 700; font-size: .98rem; }
.kontakt-form input, .kontakt-form textarea { font: inherit; font-weight: 400; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--pink); }
.kontakt-form textarea { resize: vertical; min-height: 130px; }
.kontakt-form button { align-self: flex-start; font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: #fff; background: var(--pink); border: none; border-radius: 999px; padding: 14px 30px; cursor: pointer; }
.kontakt-form button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kontakt-form .hp { position: absolute; left: -9999px; }