:root{
  --bg:#0a0f0e;
  --bg-alt:#0d1413;
  --card:#111a19;
  --border:rgba(255,255,255,.08);
  --text:#eef3f1;
  --text-dim:#8a9895;
  --teal:#2dd4bf;
  --teal-2:#5eead4;
  --radius:14px;
  --font-display:"Bebas Neue", sans-serif;
  --font-body:"Inter", sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.accent{ color:var(--teal); }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-weight:700; font-size:13.5px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:.2s; }
.btn--primary{ background:var(--teal); color:#04120f; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(45,212,191,.55); }
.btn--sm{ padding:10px 16px; font-size:12px; }
.btn--ghost{ background:transparent; border:1px solid var(--border); color:var(--text-dim); }
.btn--ghost:hover{ color:var(--text); border-color:var(--text-dim); }
.btn--outline2{ background:transparent; border:1px solid var(--teal); color:var(--teal); }
.btn--outline2:hover{ background:rgba(45,212,191,.1); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* App shell */
.app{ display:flex; min-height:100vh; }

/* Sidebar */
.sidebar{
  width:230px; flex-shrink:0; background:var(--bg-alt); border-right:1px solid var(--border);
  padding:26px 20px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:24px; letter-spacing:.04em; color:var(--teal); margin-bottom:40px; }
.brand span{ color:var(--text); font-size:19px; }
.sidenav{ display:flex; flex-direction:column; gap:6px; flex:1; }
.sidenav__item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-dim); }
.sidenav__item i{ font-style:normal; width:18px; text-align:center; color:var(--text-dim); }
.sidenav__item:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.sidenav__item.active{ background:rgba(45,212,191,.12); color:var(--teal); }
.sidenav__item.active i{ color:var(--teal); }

.level-badge{ display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:20px; transition:border-color .2s; }
.level-badge:hover{ border-color:var(--teal); }
.level-badge__top{ display:flex; justify-content:space-between; align-items:baseline; }
.level-badge__top span{ font-size:10px; letter-spacing:.1em; color:var(--text-dim); }
.level-badge__top b{ font-family:var(--font-display); font-size:22px; color:var(--teal); }
.level-badge__label{ font-size:12px; font-weight:700; margin:2px 0 10px; }
.xp-bar{ height:5px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.xp-bar__fill{ height:100%; background:var(--teal); }
.level-badge small{ font-size:10.5px; color:var(--text-dim); }

/* Main */
.main{ flex:1; min-width:0; padding:26px 32px 60px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px; }
.menu-btn{ display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 12px; font-size:16px; cursor:pointer; }
.topbar__greeting span{ display:block; font-size:11px; letter-spacing:.1em; color:var(--text-dim); }
.topbar__greeting b{ font-family:var(--font-display); font-size:22px; letter-spacing:.03em; }
.topbar__right{ display:flex; align-items:center; gap:16px; }
.bell-wrap{ position:relative; }
.bell{ position:relative; font-size:16px; background:none; border:none; color:var(--text); cursor:pointer; padding:6px; }
.bell i{ position:absolute; top:-2px; right:-4px; background:var(--teal); color:#04120f; font-style:normal; font-size:9px; font-weight:800; min-width:16px; height:16px; padding:0 3px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.bell-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; width:260px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px; z-index:150; box-shadow:0 20px 40px -14px rgba(0,0,0,.6);
}
.bell-dropdown p{ font-size:12.5px; color:var(--text-dim); padding:8px 0; border-bottom:1px solid var(--border); }
.bell-dropdown p:last-child{ border-bottom:none; padding-bottom:0; }
.lightning{ font-size:13px; font-weight:700; color:var(--text-dim); }
.avatar-ring{ width:38px; height:38px; border-radius:50%; border:2px solid var(--teal); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }

/* Hero */
.hero{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:400px; display:flex; align-items:center; margin-bottom:24px; border:1px solid var(--border); }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,15,14,.92) 20%, rgba(10,15,14,.35) 70%, transparent 100%); }
.hero__content{ position:relative; z-index:1; padding:50px; max-width:560px; }
.hero__title{ font-family:var(--font-display); font-size:clamp(32px,4.6vw,54px); line-height:1.02; letter-spacing:.01em; -webkit-text-stroke:.5px rgba(255,255,255,.15); }
.hero__desc{ margin:18px 0 28px; font-size:15px; color:#dfe6e4; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn--ghost2{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(6px); }
.btn--ghost2:hover{ background:rgba(255,255,255,.14); }
.stats-link{ text-align:right; margin:-10px 0 24px; }
.stats-link a{ font-size:12.5px; font-weight:700; color:var(--teal); }
.stats-link a:hover{ text-decoration:underline; }
.hero__quote{ position:relative; z-index:1; margin-left:auto; padding:40px; text-align:right; font-family:var(--font-display); font-size:20px; line-height:1.15; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }

/* Stats */
.stats{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:18px; margin-bottom:24px; }
.stat-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.stat-card--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.stat-card__head span{ font-size:10.5px; letter-spacing:.08em; color:var(--text-dim); font-weight:700; }
.stat-card__main{ display:flex; align-items:baseline; gap:10px; margin:10px 0 12px; }
.stat-card__main b{ font-family:var(--font-display); font-size:32px; }
.stat-card__main em{ font-style:normal; font-size:12px; font-weight:800; }
.up{ color:var(--teal); }
.spark{ width:100%; height:34px; margin-bottom:12px; }
.spark polyline{ fill:none; stroke:var(--teal); stroke-width:2; }
.stat-card__foot{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; }
.win{ color:var(--teal); }
.loss{ color:#f87171; }
.big{ font-family:var(--font-display); font-size:34px; margin:12px 0 8px; }
.big small{ font-size:14px; color:var(--text-dim); }
.stars{ color:var(--teal); letter-spacing:.1em; }
.stat-card__sub{ font-size:11px; color:var(--text-dim); margin-top:8px; }

.donut{ position:relative; width:84px; height:84px; margin:10px auto; }
.donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.donut__bg{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:9; }
.donut__fill{ fill:none; stroke:var(--teal); stroke-width:9; stroke-dasharray:264; stroke-dashoffset:66; stroke-linecap:round; }
.donut__label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; }

/* Quote banner */
.quote-banner{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:280px; margin-bottom:24px; border:1px solid var(--border); }
.quote-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote-banner__overlay{ position:relative; z-index:1; background:linear-gradient(0deg, rgba(10,15,14,.85), rgba(10,15,14,.2)); height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; }
.quote-banner__overlay p{ font-family:var(--font-display); font-size:clamp(20px,3vw,30px); line-height:1.2; color:#fff; margin-bottom:10px; }
.quote-banner__overlay span{ font-size:12px; color:var(--text-dim); font-weight:600; }

/* Challenge */
.challenge{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:24px; }
.challenge__label{ font-size:11px; letter-spacing:.1em; font-weight:800; color:var(--teal); margin-bottom:18px; }
.challenge__grid{ display:grid; grid-template-columns:130px 1fr auto; gap:26px; align-items:center; }
.challenge__board{ width:130px; height:130px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.challenge__board img{ width:100%; height:100%; object-fit:cover; }
.challenge__mid h3{ font-family:var(--font-display); font-size:20px; letter-spacing:.02em; margin-bottom:6px; }
.challenge__mid p{ font-size:13px; color:var(--text-dim); margin-bottom:14px; }
.timer{ font-family:var(--font-display); font-size:22px; letter-spacing:.05em; color:var(--teal); margin-bottom:14px; }
.challenge__side{ display:flex; flex-direction:column; gap:18px; text-align:right; }
.challenge__side span{ display:block; font-size:10px; letter-spacing:.08em; color:var(--text-dim); margin-bottom:4px; }
.challenge__side b{ font-family:var(--font-display); font-size:20px; color:var(--teal); }
.diff{ display:flex; gap:3px; justify-content:flex-end; margin-bottom:4px; }
.diff i{ width:14px; height:6px; border-radius:2px; background:rgba(255,255,255,.12); }
.diff i.on{ background:#f87171; }
.challenge__side small{ font-size:10px; color:var(--text-dim); }

/* Mindset footer */
.mindset{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:20px; border-top:1px solid var(--border); }
.mindset__text{ font-size:13.5px; font-weight:600; }
.mindset__nav{ display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--text-dim); }
.mindset__nav a:hover{ color:var(--teal); }

/* ===== Play page ===== */
.playbar{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:24px; }
.playbar__group label{ display:block; font-size:10.5px; letter-spacing:.08em; color:var(--text-dim); margin-bottom:8px; font-weight:700; text-transform:uppercase; }
.segmented{ display:flex; background:var(--bg-alt); border-radius:10px; padding:4px; gap:4px; }
.segmented__btn{ background:none; border:none; color:var(--text-dim); font-size:12.5px; font-weight:700; padding:9px 14px; border-radius:8px; cursor:pointer; }
.segmented__btn.active{ background:var(--teal); color:#04120f; }
.playbar__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; align-items:flex-end; }

.playarea{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.boardwrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.capturedRow{ min-height:24px; display:flex; flex-wrap:wrap; gap:2px; width:100%; max-width:560px; }
.mini-piece{ font-size:18px; opacity:.8; }
.statusline{ font-family:var(--font-display); font-size:17px; letter-spacing:.03em; margin-top:4px; }
.statusline--check{ color:#f87171; }
.statusline--over{ color:var(--teal); }

.board{
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  width:100%; max-width:560px; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); margin:0 auto; box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.square{ position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.square--light{ background:#25332f; }
.square--dark{ background:#131c1a; }
.square--last::before{ content:''; position:absolute; inset:0; background:rgba(45,212,191,.16); }
.square--check{ background:rgba(248,113,113,.4) !important; }
.square--selected{ box-shadow:inset 0 0 0 3px var(--teal); }
.square--legal::after{ content:''; position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(45,212,191,.6); z-index:1; }
.square--capture::after{ content:''; position:absolute; inset:7%; border:4px solid rgba(248,113,113,.8); border-radius:50%; z-index:1; }
.piece{ position:relative; z-index:2; font-size:clamp(24px,4.2vw,40px); line-height:1; user-select:none; }
.piece--w{ color:#f5f8f7; -webkit-text-stroke:1px rgba(0,0,0,.35); }
.piece--b{ color:#0c1615; -webkit-text-stroke:1px rgba(255,255,255,.55); }
.coord{ position:absolute; font-size:9px; font-weight:800; opacity:.5; z-index:1; }
.coord--rank{ top:3px; left:4px; }
.coord--file{ bottom:2px; right:5px; }

.sidepanel{ display:flex; flex-direction:column; gap:16px; }
.sidepanel__block{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.sidepanel__block h4{ font-family:var(--font-display); font-size:14px; letter-spacing:.05em; margin-bottom:10px; color:var(--text-dim); }
.movelist{ list-style:none; max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.movelist li{ display:flex; gap:8px; padding:5px 6px; border-radius:6px; }
.movelist li:nth-child(odd){ background:rgba(255,255,255,.02); }
.mv-num{ color:var(--text-dim); width:24px; flex-shrink:0; }
.mv-w, .mv-b{ flex:1; font-weight:600; }
.sidepanel__hint{ text-align:center; color:var(--teal); font-size:13px; font-weight:700; }

/* Modals */
.modal{ position:fixed; inset:0; background:rgba(4,8,7,.72); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px; }
.modal[hidden]{ display:none; }
.modal__card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px; max-width:380px; width:100%; text-align:center; }
.modal__card h3{ font-family:var(--font-display); font-size:26px; margin-bottom:10px; letter-spacing:.02em; }
.modal__card p{ color:var(--text-dim); font-size:14px; margin-bottom:22px; }
.modal__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.promo-choices{ display:flex; gap:12px; justify-content:center; }
.promo-choice{ width:58px; height:58px; font-size:30px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--border); cursor:pointer; color:var(--text); }
.promo-choice:hover{ border-color:var(--teal); }

/* ===== Puzzles page ===== */
.solved-badge{ font-size:12px; font-weight:800; color:var(--teal); background:rgba(45,212,191,.1); border:1px solid var(--border); padding:9px 14px; border-radius:999px; }
.puzzlearea{ display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start; }
.puzzlelist{ display:flex; flex-direction:column; gap:10px; }
.puzzlecard{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px;
  color:var(--text); cursor:pointer; font-family:inherit;
}
.puzzlecard:hover{ border-color:var(--teal); }
.puzzlecard.active{ border-color:var(--teal); background:rgba(45,212,191,.08); }
.puzzlecard__num{ font-family:var(--font-display); font-size:16px; color:var(--text-dim); width:22px; }
.puzzlecard__body{ flex:1; display:flex; flex-direction:column; }
.puzzlecard__body b{ font-size:13px; }
.puzzlecard__body small{ font-size:11px; color:var(--text-dim); }
.puzzlecard__check{ color:var(--teal); font-weight:800; }
.puzzlecard.is-solved{ opacity:.75; }

.puzzlepanel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.puzzlepanel__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.puzzlepanel__theme{ font-family:var(--font-display); font-size:20px; letter-spacing:.02em; margin-right:10px; }
.puzzlepanel__diff{ font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); vertical-align:middle; }
.diff--easy{ color:#5eead4; background:rgba(45,212,191,.15); }
.diff--medium{ color:#fbbf24; background:rgba(251,191,36,.15); }
.diff--hard{ color:#f87171; background:rgba(248,113,113,.15); }
.puzzlepanel__prompt{ font-size:13px; color:var(--text-dim); font-weight:600; }
.board--puzzle{ max-width:460px; }
.square--hint{ box-shadow:inset 0 0 0 3px #fbbf24; }
.puzzlepanel__feedback{ min-height:22px; text-align:center; font-weight:700; font-size:14px; margin-top:14px; }
.puzzlepanel__feedback--good{ color:var(--teal); }
.puzzlepanel__feedback--bad{ color:#f87171; }
.puzzlepanel__actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

/* ===== Learn page ===== */
.learnblock{ margin-bottom:54px; }
.learnblock__title{ font-family:var(--font-display); font-size:24px; letter-spacing:.02em; margin-bottom:6px; }
.learnblock__sub{ font-size:13.5px; color:var(--text-dim); margin-bottom:24px; }

.openings{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.opening-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.opening-card__board{ display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--border); margin-bottom:14px; pointer-events:none; }
.opening-card h4{ font-family:var(--font-display); font-size:15px; margin-bottom:4px; }
.opening-card__moves{ font-size:11.5px; color:var(--teal); font-weight:700; margin-bottom:6px; }
.opening-card__tip{ font-size:12px; color:var(--text-dim); }

.motifs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.motif{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.motif i{ font-style:normal; font-size:22px; display:block; margin-bottom:12px; }
.motif h4{ font-family:var(--font-display); font-size:16px; margin-bottom:8px; }
.motif p{ font-size:12.5px; color:var(--text-dim); }

.endgames{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.endgame-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; }
.endgame-card h4{ font-family:var(--font-display); font-size:17px; margin-bottom:8px; }
.endgame-card__tip{ font-size:12.5px; color:var(--text-dim); margin-bottom:16px; }
.board--mini{ max-width:320px; margin:0 auto 12px; }
.statusline--sm{ font-size:13px; margin-bottom:14px; }

.practicebar{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.practicebar label{ font-size:11px; letter-spacing:.08em; color:var(--text-dim); font-weight:700; text-transform:uppercase; }
.practicebar select{ background:var(--card); border:1px solid var(--border); color:var(--text); padding:11px 14px; border-radius:9px; font-family:inherit; font-size:13px; }
.board--practice{ max-width:520px; }

/* ===== Stats page ===== */
.statspanel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:24px; }
.statspanel__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.statspanel h3{ font-family:var(--font-display); font-size:17px; letter-spacing:.03em; margin-bottom:14px; }
.statspanel__head h3{ margin-bottom:0; }
.down{ color:#f87171; font-weight:800; font-size:12px; }
.ratingchart{ width:100%; height:200px; display:block; }

.statsrow{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
.statspanel--wide{ margin-bottom:0; }

.resultbar{ display:flex; height:14px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); margin-bottom:16px; }
.resultbar__seg--win{ background:var(--teal); }
.resultbar__seg--loss{ background:#f87171; }
.resultbar__seg--draw{ background:#fbbf24; }
.resultbar__seg--empty{ background:rgba(255,255,255,.06); }
.resultlegend{ display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--text-dim); font-weight:600; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.dot--win{ background:var(--teal); }
.dot--loss{ background:#f87171; }
.dot--draw{ background:#fbbf24; }

#puzzleDonutWrap{ margin:6px auto 0; }

.historytable-wrap{ overflow-x:auto; }
.historytable{ width:100%; border-collapse:collapse; font-size:13px; }
.historytable th{ text-align:left; font-size:10.5px; letter-spacing:.06em; color:var(--text-dim); text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--border); }
.historytable td{ padding:12px; border-bottom:1px solid var(--border); }
.result-badge{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.result-badge--win{ background:rgba(45,212,191,.15); color:var(--teal); }
.result-badge--loss{ background:rgba(248,113,113,.15); color:#f87171; }
.result-badge--draw{ background:rgba(251,191,36,.15); color:#fbbf24; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--text-dim); }
.empty-state p{ margin-bottom:16px; }

/* ===== Community page ===== */
.communitygrid{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.leaderboard-wrap{ overflow-x:auto; }
.leaderboard__you td{ background:rgba(45,212,191,.08); font-weight:800; color:var(--teal); }
.postform{ display:flex; gap:10px; align-items:flex-end; margin-bottom:18px; }
.postform textarea{
  flex:1; background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  color:var(--text); font-family:var(--font-body); font-size:13.5px; resize:vertical;
}
.postform textarea:focus{ outline:none; border-color:var(--teal); }
.feed{ display:flex; flex-direction:column; gap:12px; max-height:420px; overflow-y:auto; }
.feeditem{ background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.feeditem--you{ border-color:var(--teal); }
.feeditem__head{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.feeditem__head b{ font-size:13px; }
.feeditem__head span{ color:var(--text-dim); }
.feeditem p{ font-size:13.5px; color:#dbe6e3; line-height:1.5; }

/* Responsive */
@media (max-width:980px){
  .sidebar{ position:fixed; left:0; top:0; z-index:200; transform:translateX(-100%); transition:transform .25s ease; }
  .sidebar.is-open{ transform:translateX(0); }
  .menu-btn{ display:inline-flex; }
  .main{ padding:20px 18px 50px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero__content{ padding:30px; }
  .hero__quote{ display:none; }
  .challenge__grid{ grid-template-columns:1fr; text-align:left; }
  .challenge__board{ width:100%; height:160px; }
  .challenge__side{ flex-direction:row; justify-content:space-between; text-align:left; }
  .playarea{ grid-template-columns:1fr; }
  .playbar__actions{ margin-left:0; width:100%; }
  .puzzlearea{ grid-template-columns:1fr; }
  .openings{ grid-template-columns:1fr 1fr; }
  .motifs{ grid-template-columns:1fr 1fr; }
  .endgames{ grid-template-columns:1fr; }
  .statsrow{ grid-template-columns:1fr; }
  .communitygrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .openings{ grid-template-columns:1fr; }
  .motifs{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; }
  .hero{ min-height:320px; }
  .mindset{ flex-direction:column; align-items:flex-start; }
  .playbar{ flex-direction:column; align-items:stretch; }
  .playbar__actions{ margin-left:0; }
  .piece{ font-size:clamp(20px,8vw,34px); }
}