/* ═══════════════════════════════════════════════════════════════════════════
   SpeedChess — Global Stylesheet
   Used by all pages (puzzle.html, live.html, analyze.html, settings, etc.)
   The homepage (index.html) has its own inline styles; this file is for
   the rest of the app which use the shell / sidebar / board layout.
═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --bg-app:    #161512;
  --bg-panel:  #262421;
  --bg-card:   #21201d;
  --accent:    #c3a05e;
  --text-1:    #ffffff;
  --text-2:    #bababa;
  --text-3:    #7d7d7d;
  --danger:    #b33434;
  --light-sq:  #ebecd0;
  --dark-sq:   #b58863; /* default classic theme — matches settings-loader default */
  --last-move: rgba(205, 210, 20, 0.75);
  --selected:  rgba(20, 85, 30, 0.5);
  --legal:     rgba(0, 0, 0, 0.15);
  --check:     radial-gradient(circle, #ff5e5e 0%, rgba(255, 0, 0, 0) 80%);
  --board:     600px;
  --sq:        75px;
  --topbar-h:  44px;
  --sidebar-w: 56px;

  /* Aliases */
  --bg:        #161512;
  --bg2:       #262421;
  --bg3:       #21201d;
  --bg4:       #1a1917;
  --text:      #ffffff;
  --text2:     #bababa;
  --text3:     #7d7d7d;
  --border:    rgba(255,255,255,0.08);
  --green:     #81b64c;
}

/* Override pentru Tema Dark (implicită) */
html.theme-dark,
body.theme-dark {
  --bg-app:    #161512;
  --bg-panel:  #262421;
  --bg-card:   #21201d;
  --bg:        #161512;
  --bg2:       #262421;
  --bg3:       #21201d;
  --bg4:       #1a1917;
  --text-1:    #ffffff;
  --text-2:    #bababa;
  --text-3:    #7d7d7d;
  --text:      #ffffff;
  --text2:     #bababa;
  --text3:     #7d7d7d;
  --accent:    #c3a05e;
  --border:    rgba(255,255,255,0.08);
  --light-sq:  #ebecd0;
  --dark-sq:   #b58863;
  --last-move: rgba(205, 210, 20, 0.75);
}

/* Override pentru Tema Light */
html.theme-light,
body.theme-light {
  --bg-app:    #f0f0f0;
  --bg-panel:  #ffffff;
  --bg-card:   #e6e6e6;
  --bg:        #f0f0f0;
  --bg2:       #ffffff;
  --bg3:       #e6e6e6;
  --bg4:       #d9d9d9;
  --text-1:    #1a1a1a;
  --text-2:    #4a4a4a;
  --text-3:    #707070;
  --text:      #1a1a1a;
  --text2:     #4a4a4a;
  --text3:     #707070;
  --accent:    #9c7d42;
  --border:    rgba(0,0,0,0.12);
  --light-sq:  #e2e2e2;
  --dark-sq:   #607080;
}

/* Tema Slate */
html.theme-slate,
body.theme-slate {
  --bg-app:    #272e36;
  --bg-panel:  #313942;
  --bg-card:   #3a444e;
  --accent:    #607d8b;
  --text-1:    #eceff1;
  --text-2:    #b0bec5;
  --border:    rgba(255,255,255,0.1);
}

/* Tema Walnut */
html.theme-walnut,
body.theme-walnut {
  --bg-app:    #2b211a;
  --bg-panel:  #3d2f25;
  --bg-card:   #4a3a2e;
  --accent:    #8b5e3c;
  --text-1:    #f5e6d3;
  --text-2:    #d7ccc8;
  --border:    rgba(255,255,255,0.1);
}

/* Tema Ice */
html.theme-ice,
body.theme-ice {
  --bg-app:    #f0f9ff;
  --bg-panel:  #ffffff;
  --bg-card:   #e0f2fe;
  --accent:    #0ea5e9;
  --text-1:    #0c4a6e;
  --text-2:    #075985;
  --border:    rgba(14, 165, 233, 0.2);
}

/* Tema Arena Green */
html.theme-arena-green,
body.theme-arena-green {
  --bg-app:    #1e2924;
  --bg-panel:  #26322d;
  --bg-card:   #2a3a33;
  --accent:    #81b64c;
  --text-1:    #ffffff;
  --text-2:    #bababa;
  --border:    rgba(255,255,255,0.1);
}

/* Override pentru Tema Darker */
html.theme-darker,
body.theme-darker {
  --bg-app:    #0a0a0a;
  --bg-panel:  #141414;
  --bg-card:   #111111;
  --bg:        #0a0a0a;
  --bg2:       #141414;
  --bg3:       #111111;
  --bg4:       #000000;
  --text-1:    #e0e0e0;
  --text-2:    #a0a0a0;
  --border:    rgba(255,255,255,0.05);
  --accent:    #9c7d42;
}

/* Override pentru Tema Midnight Blue */
html.theme-midnight,
body.theme-midnight {
  --bg-app:    #0f172a;
  --bg-panel:  #1e293b;
  --bg-card:   #1e293b;
  --bg:        #0f172a;
  --bg2:       #1e293b;
  --bg3:       #1e293b;
  --bg4:       #334155;
  --text-1:    #f8fafc;
  --text-2:    #cbd5e1;
  --text-3:    #94a3b8;
  --text:      #f8fafc;
  --text2:     #cbd5e1;
  --text3:     #94a3b8;
  --accent:    #38bdf8;
  --border:    rgba(255,255,255,0.1);
}

/* Override pentru Tema Classic */
html.theme-classic,
body.theme-classic {
  --bg-app:    #312e2b;
  --bg-panel:  #262421;
  --bg-card:   #2d2b28;
  --bg:        #312e2b;
  --bg2:       #262421;
  --bg3:       #2d2b28;
  --text-1:    #bababa;
  --text:      #bababa;
  --accent:    #769656;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg-app);
  color: var(--text-1);
  font-family: 'Segoe UI', 'Segoe UI Emoji', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  height: 100vh;
  /* CONFLICT 1 FIX (definitive):
     body must NOT be display:flex. flex with no direction = row, which
     turns .shell into a row-flex item causing the blank left column in
     the screenshot. Each page manages its own flex context:
     .shell for shell-pages, .az-layout for the analyze page. */
  overflow: hidden;
}

/* ── Mobile: permite scroll pe paginile de content ── */
@media (max-width: 768px) {
  body.page-scrollable {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.page-scrollable .shell {
    height: auto !important;
    overflow: visible !important;
    min-height: calc(100vh - 44px);
  }
  body.page-scrollable .az-layout {
    height: auto !important;
    overflow: visible !important;
    min-height: calc(100vh - 44px - 54px);
  }
}

a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--accent); }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell {
  /* CONFLICT 2 FIX (definitive):
     body is display:block (not flex), so .shell fills viewport via width:100%.
     It is a flex column container for its own children (topnav + content row).
     analyze.html never uses .shell — it uses .az-layout directly on body. */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--topbar-h);
  height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
}

.az-layout {
  /* CONFLICT 3 FIX (definitive):
     style.css owns ONLY the positional/size props for .az-layout:
       margin-left + width  → offset the fixed 56px icon-sidebar
       height               → fill the viewport
     display/flex-direction/padding-top are set in analyze.html's own
     <style> block (padding-top:topbar-h, display:flex, overflow:hidden).
     Setting them here too caused specificity races visible in screenshot
     (board rendered behind topnav, blank left column).
     box-sizing ensures analyze.html's padding-top doesn't add extra height. */
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  height: 100vh;
  box-sizing: border-box;
}

/* ── Topnav ────────────────────────────────────────────────────────────── */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  z-index: 200;
  padding: 0 12px 0 0;
}

.topnav-logo {
  width: var(--sidebar-w);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 15px;
  flex: 1;
}

.tnl {
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}
.tnl:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-1);
}
.tnl.active {
  color: var(--accent);
  background: rgba(195, 160, 94, 0.1);
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Icon Sidebar ──────────────────────────────────────────────────────── */
.icon-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
  overflow-y: auto;
  overflow-x: auto;
  position: fixed;
  left: 0;
  top: var(--topbar-h);
  bottom: 0;
  z-index: 190;
}

.sbi {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  gap: 2px;
  color: var(--text-3);
  text-decoration: none;
  font-size: 20px;
  transition: all .15s ease;
  background: transparent;
  border: none;
}
.sbi:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-1);
}
.sbi.active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(195, 160, 94, 0.2);
}

.sbi-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .4px;
  color: inherit;
  text-transform: uppercase;
}

.sbi-divider {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 8px 0;
  flex-shrink: 0;
}

/* ── Live games page ───────────────────────────────────────────────────── */
.live-container {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-top: 20px;
}

.live-title h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.5px;
}

.live-count {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  background: rgba(195, 160, 94, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

.live-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 350px;
}

.search-box input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-1);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(195, 160, 94, 0.1);
}

.search-box button {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
}

.rating-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating-filters span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.rating-filters button {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.rating-filters button:hover { background: #2a2d35; color: #fff; }
.rating-filters button.active {
  background: var(--accent);
  color: var(--bg-app);
  border-color: var(--accent);
}

/* ── Games table ───────────────────────────────────────────────────────── */
.games-card {
  background: var(--bg-panel);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.games-table {
  width: 100%;
  border-collapse: collapse;
}
.games-table th {
  padding: 15px 20px;
  background: rgba(0,0,0,0.15);
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}
.games-table td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
}

.player-info { display: flex; align-items: center; gap: 12px; }
.player-avatar {
  width: 34px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.white { background: var(--light-sq); color: #000; }
.black { background: var(--dark-sq);  color: #e21414; }

.vs {
  color: var(--text-3); font-weight: 800; font-size: 11px;
  text-align: center; min-width: 40px;
}

.live-badge {
  color: #ff4d4d; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; gap: 8px; text-transform: uppercase;
}
.pulse-dot {
  width: 7px; height: 7px; background: #ff4d4d; border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,77,77,0.5);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.95); opacity: 1; }
  50%  { transform: scale(1.2);  opacity: 0.5; }
  100% { transform: scale(0.95); opacity: 1; }
}

.watch-btn {
  background: var(--bg-card); color: var(--text-2);
  padding: 8px 20px; border-radius: 4px; font-weight: 700;
  font-size: 12px; border: 1px solid rgba(255,255,255,0.1); transition: .2s;
}
.watch-btn:hover {
  background: var(--accent); color: var(--bg-app); border-color: var(--accent);
}

.no-games, .error-row {
  text-align: center; padding: 80px 20px;
  color: var(--text-3); font-weight: 600;
}

/* ── Board pieces (shared) ─────────────────────────────────────────────── */
.piece-ghost {
  position: fixed; pointer-events: none; z-index: 9999;
  opacity: 0.9; transform: translate(-50%, -50%);
  will-change: transform; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.piece.dragging { opacity: 0 !important; }

/* ── Efect 3D ridicare piesa la mousedown ── */
.piece.is-lifted {
  transform: scale(1.28) translateY(-18%) !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.55)) drop-shadow(0 4px 6px rgba(0,0,0,0.35)) !important;
  cursor: grabbing !important;
  z-index: 50 !important;
  transition: transform 0.06s ease, filter 0.06s ease !important;
}
.drag-layer {
  position: fixed; z-index: 99999; pointer-events: none;
  transform: translate(-50%, -50%);
}

.sq {
  /* CONFLICT FIX: removed width/height:var(--sq).
     settings-loader.js sets --sq:60px on :root for every page, overriding
     analyze.html's flex+aspect-ratio squares with a fixed 60px box.
     Sizing is now page-scoped: #chessBoard uses --sq (play page),
     #azBoard squares use width:100% + aspect-ratio (analyze page inline styles). */
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* Play page only — squares sized by --sq from settings-loader */
 #chessBoard .sq {
   width: var(--sq); height: var(--sq);
 }

 /* Drag-over highlight (magnet snap target) */
 .sq.drag-over {
   outline: 3px solid var(--accent);
   outline-offset: -3px;
   box-shadow: inset 0 0 8px rgba(195,160,94,0.3);
 }

 .review-badge {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-family: system-ui, sans-serif;
  font-weight: 800; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-app); z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  background: var(--accent);
}

.piece {
  position: relative; width: 100%; height: 100%;
  z-index: 2; cursor: grab; user-select: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.piece { z-index: 5 !important; transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); }
/* Piesele nu depasesc patratele */
.piece img.piece-img, .piece-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.review-badge { z-index: 15 !important; }

/* ── Eval bar ──────────────────────────────────────────────────────────── */
#evBar {
  width: 14px; height: 100%;
  background-color: #fff; position: relative;
  border-radius: 2px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 2; margin-right: 15px;
}
#evBarFill {
  width: 100%; height: 50%;
  background-color: #1a1917;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#evBarScore {
  position: absolute; width: 100%; text-align: center;
  font-size: 10px; font-weight: 900; bottom: 8px;
  color: var(--text-3); z-index: 3; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#azBoard {
  /* CONFLICT FIX: removed width/height:var(--board).
     settings-loader.js sets --board:480px (sqSize*8) on :root unconditionally.
     analyze.html's board is sized by .az-board-pos { flex; aspect-ratio:1/1 }
     and #azBoard fills it via display:grid in .az-grid.
     Explicit width/height here fought the flex layout causing the fixed
     480px centered board with blank space visible in the screenshot. */
  position: relative; overflow: visible;
}
#arrowSvg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 10; pointer-events: none;
}
#arrowhead polygon { fill: var(--accent); }

/* ── Hamburger button ──────────────────────────────────────────────────── */
.mob-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--text-2); font-size: 22px;
  cursor: pointer; margin-left: 4px; flex-shrink: 0;
  border-radius: 6px; transition: background .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  user-select: none;
}
.mob-menu-btn:hover { background: rgba(255,255,255,0.06); }

/* ── Mobile nav drawer ─────────────────────────────────────────────────── */
.mob-nav {
  display: none;
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 998;
  flex-direction: column;
  padding: 8px 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.mob-nav.open { display: flex; }
.mob-nav a {
  padding: 14px 20px; color: var(--text-2); text-decoration: none;
  font-size: 14px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: all .2s;
}
.mob-nav a:last-child { border-bottom: none; }
.mob-nav a:hover, .mob-nav a.active {
  background: var(--bg-card); color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --topbar-h: 48px; }

  /* Topnav */
  .mob-menu-btn { display: flex !important; }
  .topnav-links { display: none !important; }
  .topnav { padding-right: 10px; }
  .topnav-logo { width: 44px; border-right: none; }

  /* Sidebar → bottom tab bar */
  .icon-sidebar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: unset !important;
    height: 56px !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    padding: 0 5px !important;
    gap: 2px !important;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1000;
    background: var(--bg-panel);
  }

  .icon-sidebar .sbi-divider { display: none; }
  .icon-sidebar .sbi {
    width: auto !important;
    flex: 1; 
    min-width: 50px;
    height: 100% !important;
    font-size: 18px !important;
    border-radius: 6px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .icon-sidebar .sbi-label { font-size: 10px !important; margin-top: 2px; }

  /* Shell & layout */
  .shell { padding-left: 0 !important; background: var(--bg-app); }
  /* FIX CONFLICT 4: Replaced hardcoded padding-bottom:58px with a CSS variable
     --mob-tab-h (default 58px). analyze.html sets --mob-tab-h:70px on its <body>
     because its mobile tab bar is taller. This ends the !important override war
     between style.css and analyze.html's own media query. */
  :root { --mob-tab-h: 58px; }
  .az-layout { margin-left: 0 !important; width: 100% !important; padding-bottom: var(--mob-tab-h); }

  /* Board area */
  .board-area {
    min-height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
  }

  #chessBoard {
  min-width: 200px;
  min-height: 200px;
  contain: paint;
  }

  /* Settings */
  .s-layout { flex-direction: column !important; height: auto !important; overflow: visible !important; padding-bottom: 80px; }
  .s-side {
    width: 100% !important; height: auto !important;
    flex-direction: row !important; flex-wrap: wrap !important;
    overflow: visible !important; border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: var(--bg-panel); padding: 8px;
    justify-content: center;
  }
  .s-main { padding: 15px !important; height: auto !important; overflow: visible !important; }

  /* Profile */
  .profile-hero { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; padding: 20px !important; }
  .profile-hero > div:last-child { text-align: left !important; }
  .rating-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-cards   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Live page */
  .live-container { padding: 0 12px; }
  .live-controls  { flex-direction: column; align-items: stretch; padding: 10px; }
  .search-box     { max-width: 100%; }
  .rating-filters { overflow-x: auto; padding-bottom: 5px; }
  .games-table th:nth-child(3), .games-table td:nth-child(3) { display: none; }

  /* Grids */
  .board-theme-grid { grid-template-columns: repeat(4,1fr) !important; gap: 8px !important; }
  .preset-grid      { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .piece-set-grid   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small phones (≤480px)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .rating-cards     { grid-template-columns: 1fr !important; }
  .stat-cards       { grid-template-columns: 1fr 1fr !important; }
  .preset-grid      { grid-template-columns: 1fr !important; }
  .piece-set-grid   { grid-template-columns: 1fr 1fr !important; }
  .games-table th:nth-child(3), .games-table td:nth-child(3) { display: none; }
}

.legal-dot {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.15); /* un gri transparent */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* ca să poți face click prin punct */
}

.legal-capture {
    width: 85%;
    height: 85%;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.user-dropdown {
    display: none;
    flex-direction: column;
}

/* Afișat doar când părintele are clasa .open */
.user-menu.open .user-dropdown {
    display: flex !important;
}

/* Stiluri de bază pentru elementele din meniu */
.dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: #bababa; /* sau variabila ta var(--text-2) */
    text-decoration: none;
    font-size: 13px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}

.dd-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.dd-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 3px 0;
}
/* ── Compatibility aliases (pentru about.html, terms.html, etc.) ────────── */
:root {
  /* Alias-uri pentru variabile vechi / inconsistente */
  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);
  --border:         rgba(255, 255, 255, 0.07);
  --accent-blue:    #4f7cff;
  --accent-green:   #7fa650;
  --bg-card2:       #2a2927;
}

/* ── FIX BUG 3: In-square coordinate labels (used by play.js renderBoard) ── */
/* These labels appear inside the corner squares of the chess board */
.label-rank {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  color: inherit;
  opacity: 0.75;
}
.sq.light .label-rank,
.sq.light .label-file { color: #b58863; }
.sq.dark  .label-rank,
.sq.dark  .label-file { color: #f0d9b5; }

.label-file {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  color: inherit;
  opacity: 0.75;
}

/* ── Chat Muted State ── */
.chat-msgs.muted {
  opacity: 0.3;
  pointer-events: none;
}
.chat-msgs.muted .chat-msg {
  display: none;
}

/* ── Ensure sq has position:relative for label positioning ── */
#chessBoard .sq {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SpeedChess Design System v1 — Support Page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Support: Hero ─────────────────────────────────────────────────────── */
.support-hero {
  text-align: center;
  padding: 48px 16px 36px;
  border-bottom: 1px solid var(--border);
}
.support-hero-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
.support-hero h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.support-hero-sub {
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: 0.15px;
}

/* ── Support: Tiers ────────────────────────────────────────────────────── */
.support-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  justify-content: center;
}
.support-tier {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  transition: transform 180ms, border-color 180ms, background 180ms;
  position: relative;
}
.support-tier:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  background: #162033;
}
.support-tier.featured {
  border-color: rgba(122, 217, 122, 0.25);
  background: linear-gradient(145deg, #162033 0%, #1a2e22 100%);
}
.tier-icon {
  font-size: 32px;
  margin-bottom: 8px;
  line-height: 1;
}
.tier-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.15px;
}
.tier-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  margin: 6px 0 4px;
}
.tier-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  margin-left: 6px;
}
.tier-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  flex: 1;
}
.tier-features li {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  padding: 3px 0;
  letter-spacing: 0.05px;
}
.tier-badge-popular {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #7AD97A;
  color: #0B0F14;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* ── Support: Buttons ──────────────────────────────────────────────────── */
.support-tier .btn-full {
  margin-top: auto;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background 150ms, transform 150ms;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.support-tier .btn-full:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.support-tier .btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-1);
}
.support-tier .btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-hover);
}
.support-tier .btn-primary {
  background: #7AD97A;
  color: #0B0F14;
}
.support-tier .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* ── Support: Warning / Note card ─────────────────────────────────────── */
.support-warning {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 4px;
}
.support-warning .card-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.support-warning .card-body li {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  padding: 3px 0;
  letter-spacing: 0.05px;
}

/* ── Support: Footer secure note ──────────────────────────────────────── */
.support-secure-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.05px;
  margin: 0;
  opacity: 0.7;
}