/* chess.suby.pl — design system „salon szachowy”
   Tokeny: filcowa zieleń stołu + mosiądz + kość słoniowa. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  --bg: 160 18% 7%;             /* głęboka zieleń filcu, prawie czerń */
  --bg-raise: 158 14% 10%;      /* powierzchnie: karty, panele */
  --bg-raise2: 156 12% 13%;
  --ink: 42 36% 90%;            /* kość słoniowa */
  --ink-dim: 42 15% 62%;
  --brass: 41 62% 56%;          /* mosiądz — akcent główny */
  --brass-dim: 41 40% 40%;
  --felt: 158 28% 24%;          /* zieleń filcu jaśniejsza */
  --wine: 355 55% 42%;          /* bordo — akcent ostrzegawczy/B */
  --line: 156 10% 20%;
  --shadow: 0 14px 40px -18px hsl(160 30% 2% / .9);
  --radius: 10px;
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body: 'Alegreya Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 700px at 75% -10%, hsl(var(--felt) / .22), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, hsl(var(--wine) / .10), transparent 55%),
    hsl(var(--bg));
  color: hsl(var(--ink));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* subtelna szachownica w tle nagłówka */
.checker-veil {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image:
    linear-gradient(45deg, hsl(var(--ink)) 25%, transparent 25%, transparent 75%, hsl(var(--ink)) 75%),
    linear-gradient(45deg, hsl(var(--ink)) 25%, transparent 25%, transparent 75%, hsl(var(--ink)) 75%);
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

a { color: hsl(var(--brass)); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── nagłówek ── */
header.site {
  position: relative; overflow: hidden;
  border-bottom: 1px solid hsl(var(--line));
  background: linear-gradient(to bottom, hsl(var(--bg-raise)), transparent);
}
.site-bar { display: flex; align-items: center; gap: 18px; padding: 18px 0 14px; flex-wrap: wrap; }
.logo { display: flex; align-items: baseline; gap: 12px; }
.logo .glyph { font-size: 34px; line-height: 1; color: hsl(var(--brass)); text-shadow: 0 2px 12px hsl(var(--brass)/.45); }
.logo h1 { margin: 0; font-size: 26px; }
.logo .sub { color: hsl(var(--ink-dim)); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.spacer { flex: 1; }

.nickbox { display: flex; align-items: center; gap: 8px; background: hsl(var(--bg-raise2)); border: 1px solid hsl(var(--line)); border-radius: var(--radius); padding: 6px 10px; }
.nickbox label { color: hsl(var(--ink-dim)); font-size: 13px; }
.nickbox input {
  background: transparent; border: none; outline: none; color: hsl(var(--ink));
  font-family: var(--font-body); font-size: 15px; width: 130px;
}

/* ── przyciski ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: hsl(var(--bg-raise2)); color: hsl(var(--ink));
  border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  padding: 9px 16px; font-family: var(--font-body); font-size: 15px; font-weight: 500;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover { border-color: hsl(var(--brass-dim)); background: hsl(var(--bg-raise)); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(160deg, hsl(var(--brass)), hsl(41 55% 46%));
  color: hsl(160 25% 8%); border-color: hsl(var(--brass));
  font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { border-color: hsl(var(--wine)); color: hsl(355 70% 72%); }
.btn.danger:hover { background: hsl(var(--wine) / .15); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── sekcje / karty ── */
section.block { margin: 34px 0; }
.block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.block-head h2 { margin: 0; font-size: 20px; color: hsl(var(--brass)); }
.block-head .hint { color: hsl(var(--ink-dim)); font-size: 14px; }

.card {
  background: hsl(var(--bg-raise)); border: 1px solid hsl(var(--line));
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* ── siatka gier ── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters input[type=search] {
  background: hsl(var(--bg-raise2)); border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  color: hsl(var(--ink)); font-family: var(--font-body); font-size: 15px; padding: 8px 12px; width: 240px;
}
.chip {
  background: transparent; color: hsl(var(--ink-dim)); border: 1px solid hsl(var(--line));
  border-radius: 999px; padding: 5px 14px; font-size: 13.5px; cursor: pointer; font-family: var(--font-body);
}
.chip.active { color: hsl(160 25% 8%); background: hsl(var(--brass)); border-color: hsl(var(--brass)); font-weight: 700; }

.game-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px;
}
.game-tile {
  position: relative; overflow: hidden; cursor: pointer;
  background: hsl(var(--bg-raise)); border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  transition: transform .14s, border-color .14s, box-shadow .14s;
  display: flex; flex-direction: column;
}
.game-tile:hover { transform: translateY(-3px); border-color: hsl(var(--brass-dim)); box-shadow: var(--shadow); }
.game-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: hsl(var(--bg-raise2)); display: block; }
.game-tile .t-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; padding: 8px 10px 2px; }
.game-tile .t-sum { color: hsl(var(--ink-dim)); font-size: 12.5px; padding: 0 10px 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-tile .t-badge {
  position: absolute; top: 8px; left: 8px; background: hsl(var(--bg) / .82); border: 1px solid hsl(var(--brass-dim));
  color: hsl(var(--brass)); font-size: 11px; padding: 2px 8px; border-radius: 999px; letter-spacing: .06em;
}

/* ── listy pokojów / replayów ── */
.rowlist { display: flex; flex-direction: column; }
.rowlist .row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--line));
}
.rowlist .row:last-child { border-bottom: none; }
.rowlist .row .grow { flex: 1; min-width: 0; }
.rowlist .row .title { font-weight: 700; }
.rowlist .row .meta { color: hsl(var(--ink-dim)); font-size: 13px; }
.rowlist .empty { padding: 22px 16px; color: hsl(var(--ink-dim)); font-style: italic; }

/* ── modale ── */
dialog {
  background: hsl(var(--bg-raise)); color: hsl(var(--ink));
  border: 1px solid hsl(var(--line)); border-radius: 14px; box-shadow: var(--shadow);
  padding: 26px; max-width: 460px; width: calc(100vw - 40px);
}
dialog::backdrop { background: hsl(160 30% 2% / .7); backdrop-filter: blur(3px); }
dialog h3 { margin: 0 0 16px; color: hsl(var(--brass)); font-size: 19px; }
.field { margin: 12px 0; }
.field label { display: block; color: hsl(var(--ink-dim)); font-size: 13.5px; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: hsl(var(--bg-raise2)); border: 1px solid hsl(var(--line)); border-radius: 8px;
  color: hsl(var(--ink)); font-family: var(--font-body); font-size: 15px; padding: 9px 12px;
}
.field textarea { resize: vertical; min-height: 70px; }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.seg { display: flex; border: 1px solid hsl(var(--line)); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; background: transparent; color: hsl(var(--ink-dim)); border: none; padding: 8px; cursor: pointer; font-family: var(--font-body); font-size: 14px; }
.seg button.active { background: hsl(var(--brass)); color: hsl(160 25% 8%); font-weight: 700; }

/* ── strona partii ── */
.play-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 18px;
  padding: 18px 0; align-items: start;
}
#board-area {
  width: 100%; aspect-ratio: 1.15; min-height: 420px; max-height: calc(100vh - 130px);
  background: hsl(var(--bg-raise)); border: 1px solid hsl(var(--line)); border-radius: var(--radius);
  overflow: hidden; position: relative;
}
#board-area iframe { border-radius: var(--radius); }
.side-panel { display: flex; flex-direction: column; gap: 12px; }
.panel { padding: 14px 16px; }
.panel h3 { margin: 0 0 10px; font-size: 15px; color: hsl(var(--brass)); letter-spacing: .06em; }
.players { display: flex; flex-direction: column; gap: 8px; }
.player-line { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: hsl(var(--bg-raise2)); border: 1px solid transparent; }
.player-line.active-turn { border-color: hsl(var(--brass)); box-shadow: 0 0 14px hsl(var(--brass)/.25) inset; }
.player-line .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid hsl(var(--line)); }
.player-line .dot.A { background: hsl(42 40% 88%); }
.player-line .dot.B { background: hsl(160 12% 16%); }
.player-line .who { flex: 1; font-weight: 500; }
.player-line .tag { color: hsl(var(--ink-dim)); font-size: 12px; }

#movelist {
  max-height: 200px; overflow-y: auto; font-size: 14px; line-height: 1.8;
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 0 10px;
}
#movelist .mnum { color: hsl(var(--ink-dim)); }
#movelist .mv { cursor: default; }
#movelist .mv.last { color: hsl(var(--brass)); font-weight: 700; }

#chatlog { max-height: 180px; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
#chatlog .c-nick { color: hsl(var(--brass)); font-weight: 700; }
.chat-input { display: flex; gap: 8px; margin-top: 8px; }
.chat-input input { flex: 1; background: hsl(var(--bg-raise2)); border: 1px solid hsl(var(--line)); border-radius: 8px; color: hsl(var(--ink)); padding: 7px 10px; font-family: var(--font-body); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }

/* replay */
.replay-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.replay-bar input[type=range] { flex: 1; accent-color: hsl(var(--brass)); }
.replay-bar .rb-pos { color: hsl(var(--ink-dim)); font-size: 13px; min-width: 70px; text-align: right; }

/* status / toast */
#status-line { color: hsl(var(--ink-dim)); font-size: 14px; min-height: 20px; }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: hsl(var(--bg-raise2)); border: 1px solid hsl(var(--brass-dim)); color: hsl(var(--ink));
  border-radius: 10px; padding: 10px 18px; box-shadow: var(--shadow); z-index: 50;
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

footer.site { border-top: 1px solid hsl(var(--line)); margin-top: 50px; padding: 22px 0 30px; color: hsl(var(--ink-dim)); font-size: 13.5px; }
footer.site .wrap { display: flex; gap: 18px; flex-wrap: wrap; }

/* mobile */
@media (max-width: 900px) {
  .play-layout { grid-template-columns: 1fr; }
  #board-area { max-height: 70vh; }
  .filters input[type=search] { width: 100%; }
}