/* Kartentisch: its own look inside the lab, like a game box on paper. Chunky rounded Nunito, buttons and cards
   like stickers with a thick lower edge that press in, the lab's blue for what you do and its yellow for what
   you pick. One light theme on purpose; the header and footer come from lab.css and take these colours. */

@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url(../../fonts/nunito-var-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url(../../fonts/nunito-var-latin.woff2) 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;
}

html:has(body.kt-body) { background: #fbfbf8; color-scheme: light; }
body.kt-body {
  /* paper, ink and the lines between things */
  --paper: #fbfbf8; --paper2: #f2f3f7; --ink: #141a33; --soft: #5f6680; --edge: #e1e4ee;
  /* p: what you do (blue), a: what you pick (yellow) */
  --p: #2f7bd2; --p-lip: #1f5ea8; --p-text: #2563b0; --p-soft: #e2eefc;
  --a: #f2c72e; --a-mid: #f2d873; --a-soft: #fff6d2; --a-text: #8a6a00;
  --night: #0d1f4a;
  --round: "Nunito", system-ui, sans-serif;
  /* what lab.css uses for header and footer */
  --bg: var(--paper); --surface: var(--paper); --text: var(--ink); --muted: var(--soft); --accent: var(--p); --border: var(--edge); --line: transparent;
  color-scheme: light;
  background: var(--paper);
  font: 500 17px/1.5 var(--round);
  color: var(--ink);
}
.kt-body #theme-toggle { display: none; }
.kt-body header.scrolled { box-shadow: 0 2px 0 var(--edge); }

.kt { max-width: 1120px; }
.kt section { padding: 0; }
.kt h2 { font: 900 clamp(30px, 4vw, 44px)/1.15 var(--round); letter-spacing: -0.02em; color: var(--night); margin-bottom: 20px; }
.kt h3 { font: 800 19px/1.3 var(--round); color: var(--ink); margin-bottom: 0; }
.kt p { color: var(--soft); }
.kt .lab-back { font: 700 13px var(--round); color: var(--soft); }
.kt .lab-back:hover { color: var(--p-text); }
.kt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; }
.kt .lab-sound { font: 700 12px var(--round); color: var(--soft); background: #fff; border: 2px solid var(--edge); border-radius: 10px; padding: 3px 9px; }

/* ---------- buttons: stickers with a lower edge that press in ---------- */
.kt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 16px; cursor: pointer;
  font: 800 15px/1 var(--round); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  background: #fff; color: var(--a-text); border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge); transition: transform 0.1s, box-shadow 0.1s, filter 0.15s; }
.kt-btn--main { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 4px 0 var(--p-lip); }
.kt-btn--quiet { color: var(--soft); }
.kt-btn:hover { filter: brightness(1.04); }
.kt-btn:active { transform: translateY(4px); box-shadow: none; }
.kt-btn:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }
.kt-btn[hidden] { display: none; }

/* ---------- the top: a question, why, a great tit with a hand of cards ---------- */
.kt-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; padding: 24px 0 72px !important; }
.kt-hero[hidden] { display: none; }
.kt-kicker { display: block; font: 800 13px var(--round); text-transform: uppercase; letter-spacing: 0.06em; color: var(--a-text); margin-bottom: 14px; }
.kt-hero h1 { font: 900 clamp(40px, 6vw, 64px)/1.08 var(--round); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 18px; }
.kt-hero h1 em { font-style: normal; color: var(--p-text); }
.kt-hero .lab-desc { font-size: 17px; max-width: 46ch; margin-bottom: 26px; }
.kt-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.kt-art { position: relative; aspect-ratio: 1 / 0.86; z-index: 0; }
.kt-art::before { content: ""; position: absolute; left: 8%; right: 4%; top: 8%; bottom: 4%; border-radius: 40% 46% 42% 48%; background: var(--p-soft); z-index: -1; }
.kt-bird { position: absolute; width: 50%; left: 6%; bottom: 8%; z-index: 2; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08)); animation: kt-bob 3.4s ease-in-out infinite; }
.kt-fan { position: absolute; right: 4%; top: 6%; width: 64%; height: 76%; }
.kt-fan > div { position: absolute; left: 50%; bottom: 0; width: 38%; aspect-ratio: 140 / 196; margin-left: -19%; transform-origin: 50% 120%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); }
.kt-fan svg { width: 100%; height: 100%; display: block; }
@keyframes kt-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }

/* ---------- boxes and fields ---------- */
.kt-box { background: #fff; border: 2px solid var(--edge); border-radius: 22px; box-shadow: 0 4px 0 var(--edge); padding: 24px; display: grid; gap: 16px; align-content: start; }
.kt-lobby { padding: 0 0 72px !important; }
.kt-lobby[hidden], .kt-room[hidden] { display: none; }
.kt-lobby-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.kt-field { display: grid; gap: 8px; font: 700 13px var(--round); color: var(--soft); }
.kt-field input { width: 100%; min-width: 0; font: 600 17px var(--round); color: var(--ink); background: var(--paper2); border: 2px solid var(--edge); border-radius: 14px; padding: 12px 14px; outline: none; }
.kt-field input:focus { border-color: var(--p); }
.kt-field .kt-codein { font: 900 30px var(--round); letter-spacing: 0.35em; text-transform: uppercase; text-align: center; padding: 10px 0 10px 0.35em; }
.kt-box > .kt-btn { justify-self: start; }
.kt-err { margin-top: 16px; font-weight: 700; color: #c0392b; min-height: 1.5em; }

/* ---------- picking game, cards and table ---------- */
.kt-pick { display: grid; gap: 8px; }
.kt-pl { font: 700 13px var(--round); color: var(--soft); margin-top: 6px; }
.kt-games, .kt-decks, .kt-tables { display: grid; gap: 8px; }
.kt-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kt-decks { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); max-width: 440px; }
.kt-tables { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.kt-pick button { display: grid; gap: 6px; padding: 8px; text-align: left; cursor: pointer; font: 700 13px var(--round); color: var(--ink);
  background: #fff; border: 2px solid var(--edge); border-radius: 16px; box-shadow: 0 3px 0 var(--edge); transition: transform 0.15s; }
.kt-games button { padding: 12px; font-size: 15px; }
.kt-pick button:hover:not(:disabled) { transform: translateY(-2px); }
.kt-pick button[aria-pressed="true"] { background: var(--a-soft); border-color: var(--a-mid); box-shadow: 0 3px 0 var(--a-mid); color: var(--a-text); }
.kt-pick button:disabled { cursor: default; opacity: 0.5; }
.kt-pick button[aria-pressed="true"]:disabled { opacity: 0.85; }
.kt-pick button:focus-visible { outline: 3px solid var(--p); outline-offset: 2px; }
.kt-soon { font-size: 11px; font-weight: 600; color: var(--soft); }
.kt-mini { display: block; width: 46px; aspect-ratio: 140 / 196; border-radius: 5px; overflow: hidden; }
.kt-mini svg { width: 100%; height: 100%; display: block; }
.kt-tables img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 620; border-radius: 10px; background: var(--paper2); }

/* ---------- at the table ---------- */
.kt-room { padding: 24px 0 72px !important; }
.kt-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.kt-codebox { display: flex; align-items: baseline; gap: 12px; margin-right: auto; font: 700 13px var(--round); color: var(--soft); }
.kt-codebox b { font: 900 40px/1 var(--round); letter-spacing: 0.18em; color: var(--p-text); }
.kt-msg { margin: 16px 0 0 !important; padding: 12px 16px; border-radius: 14px; background: var(--p-soft); color: var(--p-text) !important; font-weight: 800; min-height: 1.5em; max-width: none !important; }
.kt-look { margin-top: 16px; }
.kt-look summary { cursor: pointer; font: 800 15px var(--round); color: var(--ink); list-style: none; display: flex; align-items: center; gap: 10px; }
.kt-look summary::-webkit-details-marker { display: none; }
.kt-look summary::before { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--a-soft); color: var(--a-text); font-weight: 900; transition: transform 0.2s; }
.kt-look[open] summary::before { transform: rotate(45deg); }
.kt-look p { margin: 0; font-size: 15px; }

/* the table: a drawn surface (karten-tische.js) under a stage of 3D cards, both in one fixed coordinate system scaled to fit */
.kt-table { position: relative; width: 100%; height: 420px; overflow: hidden; border: 2px solid var(--edge); border-radius: 22px; box-shadow: 0 6px 0 var(--edge); background: #2a1a10;
  --tink: #eef2ff; --tsub: #cfd6ea; --tsh: 0 1px 2px rgba(0, 0, 0, 0.5); --tplate: rgba(12, 10, 24, 0.42); }
.kt-table.kt-light { --tink: #1d2235; --tsub: #4c5270; --tsh: none; --tplate: rgba(255, 252, 244, 0.85); }
.kt-decor, .kt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kt-decor { pointer-events: none; }
.kt-decor svg { display: block; }
.kt-stage { perspective: 1500px; perspective-origin: 50% 35%; }
.kt-c { position: absolute; left: 0; top: 0; width: 84px; height: 118px; margin: -59px 0 0 -42px; transform-style: preserve-3d; will-change: transform; --sh: 0 2px 4px rgba(0, 0, 0, 0.35); }
.kt-c .f, .kt-c .b { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--sh); }
.kt-c .b { transform: rotateY(180deg); }
.kt-c svg { width: 100%; height: 100%; display: block; }
.kt-c.mine { cursor: pointer; }
.kt-c.mine:focus-visible { outline: none; }
.kt-c.mine:focus-visible .f { box-shadow: var(--sh), 0 0 0 3px var(--p); }
.kt-c.mine.no { cursor: default; }
.kt-c.mine.no .f { filter: brightness(0.68) saturate(0.8); }
.kt-c.mine.yes .f { box-shadow: var(--sh), 0 0 0 3px var(--a); }
.kt-c.win .f { box-shadow: var(--sh), 0 0 0 3px var(--a), 0 0 26px rgba(242, 199, 46, 0.85); }
.kt-spark { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--a); pointer-events: none; z-index: 950; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s; }
.kt-lbl { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; font: 800 14px/1.3 var(--round); color: var(--tink); text-shadow: var(--tsh); background: var(--tplate); border: 2px solid transparent; border-radius: 12px; padding: 4px 10px; white-space: nowrap; z-index: 900; pointer-events: none; }
.kt-lbl[hidden] { display: none; }
.kt-lbl small { font-size: 11px; font-weight: 600; color: var(--tsub); }
.kt-lbl.turn { border-color: var(--a); background: linear-gradient(rgba(242, 199, 46, 0.2), rgba(242, 199, 46, 0.2)), var(--tplate); }
.kt-empty { font-style: italic; opacity: 0.8; }
.kt-add, .kt-x { pointer-events: auto; font: 800 13px var(--round); color: inherit; background: transparent; border: 2px dashed currentColor; border-radius: 10px; padding: 5px 9px; cursor: pointer; }
.kt-x { border: 0; padding: 0 0 0 6px; font-size: 16px; line-height: 1; color: #ff8f7e; }
.kt-add:hover { border-style: solid; }

/* ---------- how it works ---------- */
.kt-how { padding: 0 0 72px !important; }
.kt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.kt-step { gap: 10px; }
.kt-n { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--a-soft); color: var(--a-text); font: 900 19px var(--round); }
.kt-step p, .kt-rules p { font-size: 15px; margin: 0; max-width: none; }

/* ---------- the band at the bottom ---------- */
.kt-band { background: var(--night); color: #fff; border-radius: 26px; padding: clamp(28px, 5vw, 48px) !important; margin-bottom: 48px; }
.kt .kt-band h2 { color: #fff; }
.kt .kt-band p { color: #b8c7ec; max-width: 70ch; margin: 0; font-size: 15px; }

@media (max-width: 860px) {
  .kt-hero, .kt-lobby-grid { grid-template-columns: minmax(0, 1fr); }
  .kt-art { max-width: 380px; width: 100%; justify-self: center; }
  .kt-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .kt-box { padding: 18px; }
  .kt-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-codebox b { font-size: 32px; }
}

/* ---------- little movements on the drawn tables ---------- */
.tb-steam { animation: tbSteam 3.2s ease-in-out infinite; opacity: 0; }
@keyframes tbSteam { 0% { opacity: 0; transform: translateY(6px); } 35% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(-18px); } }
.tb-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: tbFlame 1.4s ease-in-out infinite; }
@keyframes tbFlame { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(0.9, 1.1) rotate(-4deg); } 50% { transform: scale(1.06, 0.94) rotate(1deg); } 75% { transform: scale(0.94, 1.07) rotate(3deg); } }
.tb-glow { animation: tbGlow 2.2s ease-in-out infinite alternate; }
@keyframes tbGlow { from { opacity: 0.55; } to { opacity: 1; } }
.tb-breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: tbBreathe 3.6s ease-in-out infinite; }
@keyframes tbBreathe { 50% { transform: scale(1.015, 1.05); } }
.tb-tail { animation: tbTail 5s ease-in-out infinite; }
@keyframes tbTail { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-5deg); } 86% { transform: rotate(3deg); } }
.tb-z { animation: tbZ 3.6s ease-out infinite; opacity: 0; }
@keyframes tbZ { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translate(12px, -26px); } }
.tb-bob { animation: tbBob 4.5s ease-in-out infinite; }
@keyframes tbBob { 50% { transform: translateY(16px); } }
.tb-peek { animation: tbPeek 7s ease-in-out infinite; }
@keyframes tbPeek { 0%, 100% { transform: translateX(-30px); } 30%, 70% { transform: translateX(6px) rotate(-3deg); } 50% { transform: translateX(10px) rotate(2deg); } }
.tb-look { animation: tbLook 7s ease-in-out infinite; }
@keyframes tbLook { 0%, 40% { transform: translateX(0); } 50%, 70% { transform: translateX(-5px); } }
.tb-orbit { animation: tbOrbit 26s linear infinite; }
.tb-orbit.tb-slow { animation-duration: 44s; }
@keyframes tbOrbit { to { transform: rotate(360deg); } }
.tb-peck { animation: tbPeck 4.2s ease-in-out infinite; }
@keyframes tbPeck { 0%, 55%, 100% { transform: rotate(0); } 60%, 70% { transform: rotate(-24deg); } 65%, 75% { transform: rotate(-8deg); } 80% { transform: rotate(0); } }
.tb-crawl { animation: tbCrawl 60s linear infinite; }
@keyframes tbCrawl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-90px); } }
.tb-flip { animation: tbFlip 60s steps(1) infinite; }
@keyframes tbFlip { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.tb-feel { animation: tbFeel 2.6s ease-in-out infinite; }
@keyframes tbFeel { 50% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .kt-decor *, .kt-bird { animation: none !important; }
  .tb-steam, .tb-z { opacity: 0.5; }
  .kt-btn, .kt-pick button { transition: none; }
}