/* ══════════════════════════════════════════════════════════════════════

   Šachy na Smetance — Modern Chessboard & Match Layouts

   ══════════════════════════════════════════════════════════════════════ */



.play-lobby {

  max-width: 480px;

  margin: 36px auto;

}



.divider {

  display: flex;

  align-items: center;

  gap: 14px;

  color: var(--subtle);

  font-size: 12px;

  margin: 20px 0;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  font-weight: 700;

}

.divider::before, .divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--line);

}



.game {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 340px;

  gap: 24px;

  align-items: start;

}

@media (max-width: 900px) {

  .game { grid-template-columns: 1fr; }

}



.board-wrap {

  background: var(--panel);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 16px;

  box-shadow: var(--shadow-lg);

}



.board {

  width: 100%;

  aspect-ratio: 1;

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  grid-template-rows: repeat(8, 1fr);

  border-radius: var(--radius-sm);

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);

}



.sq {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  user-select: none;

  transition: background-color 0.12s ease;

}



/* Contrast Squares */

.sq.light {

  background: #383c48;

}

.sq.dark  {

  background: #1c1e26;

}



.sq .piece {

  font-size: min(8.6vw, 48px);

  line-height: 1;

  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: 2;

}



.sq .piece.w {

  color: #ffffff;

  filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)) drop-shadow(0 3px 6px rgba(0,0,0,0.7));

}

.sq .piece.b {

  color: #0c0d12;

  filter: drop-shadow(0 0 1px rgba(255,255,255,0.85)) drop-shadow(0 0 3px rgba(255,255,255,0.4));

}



.sq .piece[draggable="true"] {

  cursor: grab;

}

.sq .piece[draggable="true"]:active {

  cursor: grabbing;

}



.sq.last {

  box-shadow: inset 0 0 0 1000px rgba(99, 102, 241, 0.28);

}

.sq.sel {

  box-shadow: inset 0 0 0 3px #818cf8;

  background-color: rgba(99, 102, 241, 0.35) !important;

}

.sq.check {

  box-shadow: inset 0 0 0 1000px rgba(244, 63, 94, 0.45);

}



/* Move Destination Hints */

.sq .dot {

  position: absolute;

  width: 24%;

  height: 24%;

  border-radius: 50%;

  z-index: 3;

  pointer-events: none;

}

.sq.light .dot { background: rgba(255, 255, 255, 0.4); }

.sq.dark  .dot { background: rgba(255, 255, 255, 0.3); }



.sq.occupied .dot {

  width: 82%;

  height: 82%;

  background: none;

  border: 4px solid;

  border-radius: 50%;

}

.sq.light.occupied .dot { border-color: rgba(255, 255, 255, 0.45); }

.sq.dark.occupied  .dot { border-color: rgba(255, 255, 255, 0.35); }



.sq .coord {

  position: absolute;

  font-size: 10px;

  font-family: var(--mono);

  font-weight: 700;

  pointer-events: none;

  z-index: 1;

}

.sq .coord.file { bottom: 3px; right: 4px; }

.sq .coord.rank { top: 3px; left: 4px; }

.sq.light .coord { color: rgba(255, 255, 255, 0.45); }

.sq.dark  .coord { color: rgba(255, 255, 255, 0.35); }



/* Sidebar & Player Info */

.side {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.pcard {

  background: var(--panel);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 14px 18px;

  box-shadow: var(--shadow-sm);

  transition: all 0.2s ease;

}

.pcard .pname {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 15px;

}

.pcard.turn {

  border-color: var(--accent-light);

  box-shadow: 0 0 20px var(--accent-glow), var(--shadow-sm);

  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, var(--panel) 100%);

}



.statusbar {

  text-align: center;

  font-weight: 700;

  font-size: 14px;

  padding: 12px 16px;

  border-radius: var(--radius-sm);

  background: var(--panel-2);

  border: 1px solid var(--line);

  color: var(--ink);

}



/* Moves History Notation */

.moves {

  font-family: var(--mono);

  font-size: 13px;

  max-height: 180px;

  overflow-y: auto;

  background: var(--panel-2);

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  padding: 10px 12px;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

  gap: 4px;

}

.moves .mv {

  display: inline-flex;

  align-items: center;

  gap: 4px;

}

.moves .mv-ply {

  cursor: pointer;

  border-radius: 4px;

  padding: 2px 5px;

  color: var(--muted);

  transition: all 0.12s ease;

}

.moves .mv-ply:hover {

  background: var(--panel-3);

  color: #fff;

}

.moves .mv-ply.now {

  background: var(--accent);

  color: #ffffff;

  font-weight: 700;

  box-shadow: 0 0 10px var(--accent-glow);

}



/* Replay Scrubber Bar */

.replay-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 12px;

  padding: 10px 14px;

  background: var(--panel-2);

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

}



/* Group & Game Chat */

.chat {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.chat-log {

  height: 180px;

  overflow-y: auto;

  background: var(--panel-2);

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  padding: 12px;

  font-size: 13px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.chat-log .sys {

  color: var(--subtle);

  font-style: italic;

  font-size: 12px;

}

.chat-log b { color: var(--ink); }

.code-pill {

  font-family: var(--mono);

  font-weight: 700;

  letter-spacing: 0.12em;

  cursor: pointer;

  color: var(--accent-light);

}



/* Group Chat Messages */

.chat-msg {

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding: 8px 12px;

  border-radius: var(--radius-sm);

  background: var(--panel-3);

  border-left: 3px solid transparent;

}

.chat-msg .chat-who {

  display: flex;

  align-items: center;

  gap: 8px;

}

.chat-msg .chat-who b {

  color: var(--ink);

  font-weight: 700;

}

.chat-msg .chat-time {

  margin-left: auto;

  font-size: 11px;

  color: var(--subtle);

}

.chat-msg .chat-text {

  color: var(--ink-soft);

  word-break: break-word;

}

.chat-msg.mine {

  background: rgba(99, 102, 241, 0.12);

  border-left-color: var(--accent-light);

}

.chat-msg.staff {

  border-left-color: var(--gold);

  background: rgba(245, 158, 11, 0.1);

}

.chat-badge {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 2px 8px;

  border-radius: var(--radius-full);

  background: var(--gold);

  color: #000;

  font-weight: 800;

}



/* Modal Overlay */

.overlay {

  position: fixed;

  inset: 0;

  background: rgba(9, 10, 15, 0.85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 200;

  padding: 20px;

}

.overlay .card {

  text-align: center;

  max-width: 440px;

  width: 100%;

  animation: pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.hidden { display: none !important; }



/* Mini Board Preview */

.mini-board {

  width: 100%;

  aspect-ratio: 1;

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  grid-template-rows: repeat(8, 1fr);

  border-radius: var(--radius-sm);

  overflow: hidden;

  border: 1px solid var(--line);

}

.mini-board .ms {

  display: flex;

  align-items: center;

  justify-content: center;

}

.mini-board .ms.light { background: #383c48; }

.mini-board .ms.dark  { background: #1c1e26; }

.mini-board .mp { font-size: min(4.4vw, 22px); line-height: 1; }

.mini-board .mp.w { color: #ffffff; filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }

.mini-board .mp.b { color: #0c0d12; filter: drop-shadow(0 0 1px rgba(255,255,255,0.8)); }



/* Board Editor & Task Wizard */

.editor-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 360px;

  gap: 24px;

  align-items: start;

}

@media (max-width: 860px) {

  .editor-grid { grid-template-columns: 1fr; }

}



.editor-grid .board-wrap { padding: 14px; }



.palette {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 8px;

}

.pal {

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  background: var(--panel-2);

  cursor: grab;

  transition: all 0.15s ease;

}

.pal:hover {

  transform: translateY(-2px);

  border-color: var(--line-strong);

  background: var(--panel-3);

}

.pal.sel {

  border-color: var(--accent-light);

  background: rgba(99, 102, 241, 0.2);

  box-shadow: 0 0 14px var(--accent-glow);

}

.pal.w { color: #ffffff; filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }

.pal.b { color: #cbd5e1; }

.pal.erase {

  grid-column: span 2;

  font-size: 16px;

  color: var(--muted);

  cursor: pointer;

}



textarea.pgn-drop {

  transition: all 0.15s ease;

}

textarea.pgn-drop.drop-hover {

  border-color: var(--accent-light);

  background: rgba(99, 102, 241, 0.1);

}



/* Stepper Wizard */

.stepper {

  display: flex;

  gap: 8px;

  margin-bottom: 20px;

}

.stepper-step {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 8px;

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  background: var(--panel-2);

  color: var(--muted);

  font-family: var(--font);

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s ease;

}

.stepper-step:hover {

  border-color: var(--line-strong);

  color: var(--ink);

}

.stepper-step.is-active {

  border-color: var(--accent-light);

  color: #fff;

  background: rgba(99, 102, 241, 0.15);

  box-shadow: 0 0 14px var(--accent-glow);

}

.stepper-step.is-done {

  color: #34d399;

  border-color: rgba(16, 185, 129, 0.4);

}

.stepper-num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  font-size: 12px;

  background: var(--panel-3);

  color: var(--ink);

}

.stepper-step.is-active .stepper-num {

  background: var(--accent);

  color: #ffffff;

}

.stepper-step.is-done .stepper-num {

  background: var(--good);

  color: #000;

  font-weight: 800;

}



.editor-step {

  animation: editor-fade 0.2s ease;

}

@keyframes editor-fade {

  from { opacity: 0; transform: translateY(4px); }

  to { opacity: 1; transform: none; }

}

.editor-sub {

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--muted);

  margin: 16px 0 10px;

}

.editor-nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-top: 20px;

}



/* Animations */

@media (prefers-reduced-motion: no-preference) {

  .sq:hover .piece {

    transform: translateY(-2px) scale(1.06);

  }

  .sq.sel {

    animation: sq-pulse 1.4s ease-in-out infinite;

  }

}

@keyframes sq-pulse {

  0%, 100% { box-shadow: inset 0 0 0 3px #818cf8; }

  50%      { box-shadow: inset 0 0 0 3px #6366f1, 0 0 16px var(--accent-glow); }

}