.trn-hero{padding:40px 20px 24px;}
.trn-hero h1{font-size:clamp(32px,5vw,52px); margin:12px 0 8px;}
.trn-hero p{max-width:620px; margin:0;}
.live-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#e04b4b; margin-right:5px; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Seçilmiş canlı oyun */
.feat{display:grid; grid-template-columns:minmax(280px,440px) 1fr; gap:28px; padding:24px; align-items:start;}
.feat-board-col{min-width:0;}
.board-lite .p3{cursor:default;}
.pl-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 2px; min-height:38px;}
.pl-id{display:flex; align-items:center; gap:8px; min-width:0;}
.pl-title{font:700 10px var(--mono); color:var(--gold); background:rgba(231,180,74,.12); border:1px solid rgba(231,180,74,.3); padding:2px 6px; border-radius:5px;}
.pl-name{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pl-rat{font:12px var(--mono); color:var(--muted);}
.pl-clock{font:700 15px var(--mono); background:var(--ink-2); border:1px solid var(--line); padding:5px 12px; border-radius:8px; color:var(--text); flex-shrink:0;}
.pl-clock.low{color:#e04b4b; border-color:rgba(224,75,75,.45);}
.feat-side{display:flex; flex-direction:column; min-width:0;}
.feat-badge{display:inline-flex; align-items:center; gap:4px; align-self:flex-start; font:700 10px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:#e04b4b; background:rgba(224,75,75,.1); border:1px solid rgba(224,75,75,.3); padding:5px 11px; border-radius:20px; margin-bottom:12px;}
.feat-side h3{font-size:20px; margin:0; line-height:1.3;}
.standing{border:1px solid var(--line-soft); border-radius:12px; overflow:hidden;}
.standing .sh{font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:9px 14px; border-bottom:1px solid var(--line-soft); background:var(--ink-2);}
.st-row{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:13px;}
.st-row:last-child{border-bottom:0;}
.st-rank{font:700 11px var(--mono); color:var(--muted-2); width:18px;}
.st-name{flex:1; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.st-score{font:700 13px var(--mono); color:var(--teal);}

/* Kateqoriyalar */
.trn-browse{padding:44px 20px 60px;}
.trn-tabs{display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line-soft); padding-bottom:14px; margin-bottom:16px;}
.ttab{background:none; border:1px solid var(--line); color:var(--muted); font-family:var(--body); font-size:14px; font-weight:600;
  padding:9px 16px; border-radius:10px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.ttab:hover{color:var(--text); border-color:var(--muted);}
.ttab.active{background:var(--teal); color:#04222a; border-color:var(--teal);}
.ttab.active .live-dot{background:#04222a;}
.ttab b{font:700 11px var(--mono); opacity:.8;}
.ttab-pro{margin-left:auto;}
.trn-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:22px;}
.chip{background:var(--ink-2); border:1px solid var(--line); color:var(--muted); font-size:12.5px; font-weight:600; font-family:var(--body);
  padding:6px 13px; border-radius:18px; cursor:pointer; transition:.14s;}
.chip:hover{color:var(--text);} .chip.active{background:var(--panel-2); color:var(--teal); border-color:var(--teal);}
.trn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px;}
.tcard{background:var(--panel); border:1px solid var(--line-soft); border-radius:15px; padding:17px 18px; cursor:pointer; transition:.16s; text-align:left; font-family:var(--body); color:inherit; display:flex; flex-direction:column; gap:9px;}
.tcard:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28);}
.tcard.active{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset;}
.tc-top{display:flex; justify-content:space-between; align-items:center;}
.tc-badge{font:700 9.5px var(--mono); letter-spacing:.1em; padding:3px 8px; border-radius:12px;}
.tc-badge.live{color:#e04b4b; background:rgba(224,75,75,.1);}
.tc-badge.soon{color:var(--gold); background:rgba(231,180,74,.1);}
.tc-badge.past{color:var(--muted-2); background:var(--ink-2);}
.tc-speed{font:11px var(--mono); color:var(--muted-2);}
.tc-name{font-weight:600; font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tc-meta{display:flex; gap:12px; font:11.5px var(--mono); color:var(--muted); margin-top:auto;}
.tc-loc{font-size:12px; color:var(--teal); display:flex; align-items:center; gap:5px;}
.tc-note{font-size:12px; color:var(--muted-2);}
.trn-empty{grid-column:1/-1; text-align:center; padding:44px; border:1px dashed var(--line); border-radius:14px; color:var(--muted);}

/* Lövhə (paylaşılan) */
.board3{position:relative; width:100%; aspect-ratio:1/1; border-radius:9px; overflow:hidden; border:6px solid #292f38; box-shadow:0 18px 45px rgba(0,0,0,.75); container-type:size; user-select:none;}
.b3-squares{position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);}
.b3-squares .sq{position:relative;}
.b3-squares .sq.light{background:linear-gradient(135deg,#626a73,#454c54);} .b3-squares .sq.dark{background:linear-gradient(135deg,#252b33,#171c22);}
.b3-squares .sq.last{box-shadow:inset 0 0 0 999px rgba(231,180,74,.14);}
.b3-squares .sq .cf,.b3-squares .sq .cr{position:absolute; font:700 2.4cqmin var(--mono); mix-blend-mode:difference; color:#fff; opacity:.75;}
.b3-squares .sq .cf{right:3%; bottom:1%;} .b3-squares .sq .cr{left:3%; top:1%;}
.b3-pieces{position:absolute; inset:0; z-index:2;}
.p3{position:absolute; width:12.5%; height:12.5%; display:flex; align-items:center; justify-content:center; transition:transform .22s cubic-bezier(.2,.8,.2,1);}
.p3 .g{font-size:11cqmin; line-height:1;}
.p3 .g.w{color:#f4f1e8; text-shadow:0 2px 2px #000, 0 3px 6px rgba(0,0,0,.7), 0 0 8px rgba(255,255,255,.15);}
.p3 .g.b{color:#17191d; text-shadow:0 1px 1px rgba(255,255,255,.3), 0 4px 7px rgba(0,0,0,.9);}

@media(max-width:960px){ .feat{grid-template-columns:1fr;} .ttab-pro{margin-left:0;} }
.ttab-afen{border-color:rgba(31,199,199,.4);}
.ttab-afen.active{background:var(--teal); color:#04222a;}
.tcard-afen{border-color:rgba(31,199,199,.25);}
.tcard-afen:hover{border-color:var(--teal);}
.afen-join{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; padding:14px;}
.afen-join-txt{font-size:12.5px; color:var(--muted); line-height:1.5;}
.chip .chip-n{font:700 10px var(--mono); opacity:.55; margin-left:2px;}
.chip.active .chip-n{opacity:.75;}

/* Mənbə istinadı — Lichess */
.src-note{font-size:11px; line-height:1.6; color:var(--muted-2); text-align:center; margin:12px 0 0;}
.src-note a{color:var(--muted); text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.src-note a:hover{color:var(--teal);}

/* Canlı oyunlar siyahısı (tamaşaçı rejimi) */
.lg-row{width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:9px; margin-bottom:6px; cursor:pointer; transition:.15s; text-align:left;}
.lg-row:hover{border-color:var(--teal); background:var(--panel-2);}
.lg-row:last-child{margin-bottom:0;}
.lg-names{flex:1; min-width:0; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);}
.lg-clocks{font-size:11px; color:var(--muted); flex-shrink:0;}
.lg-eye{flex-shrink:0; opacity:.6;}
.lg-row:hover .lg-eye{opacity:1;}