/* ==== css/main.css ==== */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  background: #f7f7f7;
  color: #222;
}

header, footer {
  background: #222;
  color: #fff;
  padding: 10px 20px;
}

nav a {
  color: #fff;
  margin-right: 10px;
  text-decoration: none;
}

main {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.flashes {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  color: #b33;
}

#board pre {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}

.profile-header {
  background: #f0f0f0;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.profile-posts ul,
.profile-games ul {
  list-style: none;
  padding-left: 0;
}

.profile-posts li,
.profile-games li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.post-list {
  list-style: none;
  padding-left: 0;
}

.post-item {
  padding: 15px 0;
  border-bottom: 1px solid #ddd;
}

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.post-content {
  margin-bottom: 10px;
}

.delete-btn {
  background: #c33;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.settings-section {
  margin-bottom: 30px;
}

.settings-section form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.settings-section input {
  margin-bottom: 10px;
  padding: 8px;
}

.settings-section button {
  padding: 8px 12px;
}

button.danger {
  background: #c33;
  color: #fff;
  border: none;
  border-radius: 4px;
}


.game-create-section {
  background: #f0f0f0;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  max-width: 400px;
}

.game-create-section form {
  display: flex;
  flex-direction: column;
}

.game-create-section select,
.game-create-section input {
  margin-bottom: 10px;
  padding: 8px;
}

.game-list {
  list-style: none;
  padding-left: 0;
}

.game-list li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

/* ==== css/mindlounge.css ==== */
: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;
  /* Сімейства шрифтів — у shell.css (--font-serif/--font-sans/--font-mono) */
  --font-display:var(--font-serif);
  --font-body:var(--font-sans);
}

.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-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);
}

/* Явний захист для середньої колонки: за замовчуванням 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;
}

/* ==== css/shell.css ==== */
/* ===========================================================
   SHELL (docs/specs/shell.md): шапка, типи макета, рейка, нижні вкладки, підвал
   =========================================================== */

:root{
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ml-header-h:64px;
  --ml-tabs-h:64px;
}

/* Типографіка: заголовки й довгий текст — serif, інтерфейс — sans (shell.md §8) */
h1, h2, h3, .font-display{ font-family:var(--font-serif); }
.mg-avatar, .stat-value, .ml-tab, .btn, .badge{ font-family:var(--font-sans); }
.ml-layout-reading .ml-main p,
.ml-layout-reading .ml-main li{ font-family:var(--font-serif); font-size:1.075rem; line-height:1.7; }
/* article (Journal): свою двоколонкову сітку будує сама сторінка (.jr-grid) */

.ml-skip{ position:absolute; left:.5rem; top:.5rem; z-index:2000; background:var(--panel); padding:.5rem .75rem; border-radius:6px; }

/* ---------- Шапка ---------- */
.ml-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  min-height:var(--ml-header-h);
  position:sticky; top:0; z-index:1020;
}
.ml-header-inner{
  max-width:1280px; margin:0 auto; padding:0 1rem;
  min-height:var(--ml-header-h);
  display:flex; align-items:center; gap:1rem;
}
.ml-logo{
  font-family:var(--font-serif);
  font-weight:600; font-size:1.3rem; letter-spacing:.005em;
  color:var(--parchment); text-decoration:none; white-space:nowrap;
}
.ml-nav-h{ display:flex; gap:.25rem; margin-left:1rem; }
.ml-header-tools{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.ml-tool-btn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:.35rem .7rem; font-size:.82rem; font-family:var(--font-mono);
  display:inline-flex; align-items:center; gap:.4rem;
}
.ml-tool-btn:hover{ border-color:var(--purple); color:var(--parchment); }
.ml-avatar-btn{ background:none; border:0; padding:0; border-radius:50%; }
.ml-avatar-btn .mg-avatar{ width:34px; height:34px; font-size:.78rem; }
.ml-signup{ background:var(--brass); color:var(--ink); font-weight:500; }
.ml-signup:hover{ background:var(--brass); color:var(--ink); filter:brightness(1.08); }
.ml-menu-langs{ display:flex; gap:.75rem; padding:.25rem 1rem; font-family:var(--font-mono); font-size:.8rem; }
.ml-menu-langs a{ color:var(--muted); text-decoration:none; }
.ml-menu-langs a.active{ color:var(--brass); }

@media (max-width:991.98px){
  :root{ --ml-header-h:52px; }
  .ml-logo{ font-size:1.2rem; }
}

/* ---------- Сторінка / типи макета ---------- */
.ml-page-inner{
  margin:0 auto;
  padding:1.5rem 1rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:minmax(0,1fr);
}
.ml-main{ min-width:0; }
.ml-rail, .ml-col-left{ min-width:0; display:flex; flex-direction:column; gap:.75rem; }

/* today: 25/50/25 */
.ml-layout-today .ml-page-inner{ max-width:1280px; }
/* reading: текст ≤ 700px + панель 320px */
.ml-layout-reading .ml-page-inner{ max-width:1120px; }
.ml-layout-article .ml-page-inner{ max-width:1120px; }
/* wide: до 1200px (+ рейка 300px) */
.ml-layout-wide .ml-page-inner{ max-width:1200px; }
/* narrow: колонка 560px, без рейки */
.ml-layout-narrow .ml-page-inner{ max-width:560px; }

@media (min-width:992px){
  /* today: колонки 25/50/25 будує сама сторінка (css/today.css, .td-grid) — щоб єдиний рекламний
     елемент можна було переставляти на мобільному; тому зовнішня сітка тут одноколонкова. */
  .ml-layout-today .ml-page-inner{ grid-template-columns:minmax(0,1fr); }
  .ml-layout-reading .ml-page-inner{ grid-template-columns:minmax(0,700px) 320px; justify-content:center; }
  .ml-layout-reading .ml-page-inner:not(.has-rail){ grid-template-columns:minmax(0,700px); }
  .ml-layout-wide .ml-page-inner.has-rail{ grid-template-columns:minmax(0,1fr) 300px; }
}

/* Мобільний: рейка НЕ ховається (display:none заборонено для рекламного
   контейнера, shell.md S3), а стоїть після вмісту. Для today — порядок:
   основний вміст → ліва колонка → рейка. */
@media (max-width:991.98px){
  .ml-page-inner{ padding:1rem; }
  .ml-main{ order:1; }
  .ml-col-left{ order:2; }
  .ml-rail{ order:3; }
}

/* ---------- Zen (клас на <body>) ---------- */
body.zen .ml-ad,
body.zen .ml-social,
body.zen .ml-rail,
body.zen .ml-col-left{ display:none; }
body.zen .ml-page-inner{ grid-template-columns:minmax(0,1fr); max-width:1200px; }
body.zen .ml-layout-reading .ml-page-inner{ max-width:700px; }
.ml-zen-btn.active{ background:rgba(167,107,255,.12); border-color:var(--purple); color:var(--purple); }

/* ---------- Нижня панель вкладок (мобільний) ---------- */
.ml-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex;
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.ml-tab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--ml-tabs-h);
  color:var(--muted); text-decoration:none; font-size:.7rem;
}
.ml-tab i{ font-size:1.25rem; line-height:1; }
.ml-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; }
.ml-tab.active{ color:var(--brass); }
body.has-tabs{ padding-bottom:calc(var(--ml-tabs-h) + env(safe-area-inset-bottom)); }
@media (min-width:992px){
  body.has-tabs{ padding-bottom:0; }
}

/* ---------- Підвал ---------- */
.ml-footer{
  border-top:1px solid var(--line);
  margin-top:1.5rem; padding:1.5rem 1rem;
  text-align:center; font-size:.85rem; color:var(--muted);
}
.ml-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.25rem; margin-bottom:.75rem; }
.ml-footer a{ color:var(--muted); text-decoration:none; }
.ml-footer a:hover{ color:var(--parchment); }
.ml-footer-langs{ display:flex; justify-content:center; gap:.75rem; font-family:var(--font-mono); font-size:.75rem; margin-bottom:.5rem; }
.ml-footer-langs a.active{ color:var(--brass); }

/* ---------- Липкий підвал: сторінка мінімум на висоту вікна ---------- */
.ml-body{ min-height:100vh; display:flex; flex-direction:column; }
.ml-page{ flex:1 0 auto; width:100%; }
.ml-footer{ background:transparent; flex-shrink:0; }

/* ---------- Вкладки (Community) та посилання-акценти ---------- */
.ml-main .nav-tabs{ border-bottom-color:var(--line); }
.ml-main .nav-tabs .nav-link{ color:var(--muted); border-color:transparent; }
.ml-main .nav-tabs .nav-link:hover{ color:var(--parchment); border-color:transparent transparent var(--line); }
.ml-main .nav-tabs .nav-link.active{
  color:var(--brass); background:var(--panel);
  border-color:var(--line) var(--line) var(--panel);
}
.ml-link{ color:var(--brass); text-decoration:none; }
.ml-link:hover{ color:var(--parchment); text-decoration:underline; }

/* Контраст (Lighthouse a11y): Bootstrap-сірий #6c757d на темних панелях дає 3:1 */
.btn-outline-secondary{
  --bs-btn-color:var(--muted);
  --bs-btn-border-color:var(--line);
  --bs-btn-hover-color:var(--parchment);
  --bs-btn-hover-bg:var(--panel-2);
  --bs-btn-hover-border-color:var(--muted);
  --bs-btn-active-color:var(--parchment);
  --bs-btn-active-bg:var(--panel-2);
  --bs-btn-active-border-color:var(--muted);
  --bs-btn-disabled-color:var(--muted);
  --bs-btn-disabled-border-color:var(--line);
}

/* Honeypot (app/antibot.py): поле поза екраном; не display:none — деякі боти його пропускають */
.ml-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* F1: смуга «Confirm your email…» для акаунта без підтвердженої адреси — тиха, один рядок, закривається на сесію */
.ml-confirm-bar{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.35rem .75rem; background:var(--panel-2); border-bottom:1px solid var(--line);
  font-size:.82rem; color:var(--muted); line-height:1.3;
}
.ml-confirm-text{ min-width:0; text-align:center; }
.ml-confirm-form{ margin:0; flex:0 0 auto; }
.ml-confirm-resend{
  background:none; border:0; padding:.15rem .25rem; color:var(--brass); font:inherit; cursor:pointer; text-decoration:underline;
}
.ml-confirm-resend:hover{ color:var(--parchment); }
.ml-confirm-close{
  background:none; border:0; padding:0 .35rem; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer;
}
.ml-confirm-close:hover{ color:var(--parchment); }