:root{
  /* MindLounge.gg — Midnight Blue/Charcoal + neon mint (дії) + neon purple (соц./Zen) */
  --ink:#171f36;
  --panel:#1e2847;
  --panel-2:#263054;
  --line:#333e6a;
  --parchment:#f6f7fc;
  --muted:#a8afcc;
  --brass:#33f2b0;
  --brass-dim:#1f8f6b;
  --clock-green:#33f2b0;
  --danger:#e0685f;
  --purple:#a76bff;
  --purple-dim:#6b3fb0;
  --font-display:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

.font-display{ font-weight:600; }

body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--font-body);
}

main{
  max-width:none;
  margin:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

nav a{color:inherit;text-decoration:none;}

a{color:inherit;}
::selection{background:var(--brass);color:var(--ink);}

*:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

.text-parchment{color:var(--parchment);}
.text-muted-warm{color:var(--muted);}

.ledger-rule{
  height:1px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
  border:0;
  margin:1.5rem 0;
}

.brand-mark{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:.01em;
  color:var(--parchment);
}
.brand-mark .stone{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--brass);
  margin-right:.4rem;
  vertical-align:middle;
}
.brand-sub{
  font-size:.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.mg-sidebar{
  background:var(--panel);
  border-right:1px solid var(--line);
  min-height:100vh;
}

.mg-nav .nav-link{
  color:var(--muted);
  font-size:.92rem;
  border-radius:0;
  border-left:2px solid transparent;
  padding:.55rem .9rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.mg-nav .nav-link i{font-size:1.05rem;width:1.1rem;text-align:center;}
.mg-nav .nav-link:hover{color:var(--parchment);background:var(--panel-2);}
.mg-nav .nav-link.active{
  color:var(--parchment);
  border-left-color:var(--brass);
  background:var(--panel-2);
  font-weight:500;
}

.mg-user-card{
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin-top:auto;
}
.mg-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--brass-dim);
  color:var(--parchment);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  flex-shrink:0;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--clock-green);
  display:inline-block;
  margin-right:.3rem;
}

.mg-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.75rem;
}

.quick-play-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--brass-dim);
  border-radius:.6rem;
  padding:1rem 1.1rem;
  height:100%;
  transition:border-color .15s ease,transform .15s ease;
}
.quick-play-card:hover{
  border-left-color:var(--brass);
  transform:translateY(-2px);
}
.quick-play-card i{color:var(--brass);font-size:1.35rem;}
.quick-play-card .btn{
  --bs-btn-padding-y:.3rem;
  --bs-btn-font-size:.82rem;
}

.stat-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.6rem;
  padding:.9rem 1rem;
}
.stat-label{
  font-size:.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.stat-value{
  font-family:var(--font-mono);
  font-size:1.5rem;
  color:var(--parchment);
}

.rating-clock{
  background:#0d1c12;
  border:1px solid #223528;
  border-radius:.6rem;
  padding:.9rem 1rem;
}
.rating-clock .stat-label{color:#6f8f77;}
.rating-clock .stat-value{
  color:var(--clock-green);
  letter-spacing:.03em;
}

.ledger-table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--parchment);
  border-color:var(--line);
  font-size:.92rem;
}
.ledger-table thead th{
  color:var(--muted);
  font-weight:500;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--line);
}
.ledger-table td{
  vertical-align:middle;
  border-color:var(--line);
}
.ledger-table tbody tr:hover{background:var(--panel-2);}

.ad-slot{
  border:1px dashed var(--line);
  border-radius:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:.8rem;
  position:relative;
}
.ad-slot .ad-tag{
  position:absolute;
  top:.4rem;left:.6rem;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.ad-slot-infeed{min-height:120px;}
.ad-slot-rect{min-height:280px;}

.promo-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:.6rem;
  padding:.9rem 1rem;
}
.promo-card .badge{
  background:rgba(193,144,63,.15);
  color:var(--brass);
  border:1px solid rgba(193,144,63,.4);
  font-weight:500;
}

.mobile-sticky-ad{
  position:fixed;
  left:0;right:0;bottom:0;
  height:50px;
  background:var(--panel);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-size:.72rem;
  z-index:1030;
}

@media (min-width:992px){
  .mobile-sticky-ad{display:none;}
}

@media (max-width:991.98px){
  .mg-sidebar{display:none;}
  .mg-right-sidebar{order:3;}
  body{padding-bottom:60px;}
}

@media (prefers-reduced-motion:reduce){
  .quick-play-card{transition:none;}
  .quick-play-card:hover{transform:none;}
}

/* ===========================================================
   MINDLOUNGE HEADER (замінює лівий сайдбар повністю)
   =========================================================== */

.ml-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.ml-logo{
  font-weight:600;
  font-size:1.15rem;
  color:var(--parchment);
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
}
.ml-logo .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 8px var(--brass);
  flex-shrink:0;
}

.ml-nav-h{
  display:flex;
  gap:.25rem;
}
.ml-nav-h a{
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
  padding:.5rem .75rem;
  border-radius:6px;
  white-space:nowrap;
  transition:color .15s ease, background-color .15s ease;
}
.ml-nav-h a:hover{ color:var(--parchment); background:var(--panel-2); }
.ml-nav-h a.active{ color:var(--brass); background:rgba(51,242,176,.08); }

.ml-header-quote-row{
  font-size:.82rem;
  color:var(--muted);
  font-style:italic;
}

.ml-zen-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:8px;
  padding:.35rem .7rem;
  font-size:.82rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  transition:all .15s ease;
}
.ml-zen-btn:hover{ border-color:var(--purple); color:var(--parchment); }
.ml-zen-btn.active{
  background:rgba(167,107,255,.12);
  border-color:var(--purple);
  color:var(--purple);
}

.ml-lang{
  display:flex;
  gap:.35rem;
  font-family:var(--font-mono);
  font-size:.72rem;
}
.ml-lang a{ color:var(--muted); text-decoration:none; padding:.15rem .3rem; }
.ml-lang a.active{ color:var(--brass); font-weight:500; }

/* ===========================================================
   ГЛОБАЛЬНА 3-КОЛОНКОВА СІТКА (25/50/25) — на всіх сторінках
   =========================================================== */

.ml-grid{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap:1.25rem;
  padding:1.5rem;
}

/* Zen Mode: ховає ОБИДВІ бічні колонки (стрічка+реклама зліва, промо+реклама справа).
   Без збереження стану — це чиста CSS-класова перемикачка на клієнті,
   ніякого localStorage/сесії/поля в User. Скидається при кожному заході.

   ПРИМІТКА (друга ітерація фіксу): попередній варіант міняв самі треки
   сітки (0px 1fr 0px) — але відсоткова ширина `<main>` (width:100%)
   рахується від ширини ВЛАСНОГО ТРЕКА, а не від усієї сітки, тож якщо
   трек порахувався вузьким, width:100% просто заповнював вузький трек,
   не виправляючи причину. Натомість тепер треки сітки НЕ змінюються —
   <main> просто розтягується на всі 3 колонки через grid-column,
   що не залежить від розмірів прихованих сусідніх треків. */
.ml-grid.zen{
  gap:0;
}
.ml-grid.zen .ml-left,
.ml-grid.zen .ml-aside{ display:none; }
.ml-grid.zen main{
  grid-column: 1 / -1;
}

.ml-left, .ml-aside{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  min-width:0;
}

/* Явний захист для середньої колонки: за замовчуванням grid-item має
   min-width:auto, що резолвиться в content-based мінімум і може змусити
   браузер порахувати колонку значно вужчою за фактичну 1fr/2fr частку,
   якщо всередині є елементи з нестандартною внутрішньою шириною
   (наприклад, шахова дошка з фіксованим px-розміром у games/chess.html). */
main{
  min-width:0;
  width:100%;
}

.ml-col-label{
  font-family:var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.ml-post-card .who{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:.35rem;
  font-size:.75rem;
  color:var(--muted);
}
.ml-post-card .who .dot2{
  width:20px;height:20px;border-radius:50%;
  background:var(--purple-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--parchment);font-family:var(--font-mono);
  flex-shrink:0;
}

@media (max-width:991.98px){
  .ml-grid{ grid-template-columns:1fr; padding:1rem; }
  .ml-left, .ml-aside{ display:none; }
}