:root{
  --bg:#0e0e16; --panel:#171722; --panel2:#1f1f2e; --line:#2c2c3e;
  --text:#e7e9ef; --muted:#9aa0ad; --cyan:#00f0ff; --accent:#6d28d9; --accent2:#a855f7;
  --gold:#c9a24a; --gold-bright:#f0d080; --paper:#efe6d2;
  --card-w:64px; --card-h:92px; --label-w:76px; --label-fs:1.05rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #18182a 0%, var(--bg) 60%) fixed;
  color:var(--text); font-family:'Exo 2',system-ui,sans-serif; min-height:100vh;
  -webkit-text-size-adjust:100%;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

.tl-wrap{max-width:980px;margin:0 auto;padding:54px 16px 80px;position:relative}
.tl-title{font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:3px;text-align:center;
  margin:0 0 6px;font-size:clamp(1.4rem,5vw,2.3rem);
  background:linear-gradient(90deg,#00f0ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-sub{text-align:center;color:var(--muted);margin:0 0 26px;font-size:.95rem}

/* ── контролы шапки ── */
.tl-head-controls{margin-bottom:14px}
.tl-profile-row{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.tl-profile-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.tl-input{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);
  padding:11px 14px;font-family:inherit;font-size:.95rem;outline:none;transition:.15s;min-width:0}
.tl-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.12)}
.tl-profile-row .tl-input{flex:1 1 auto;width:100%}
.tl-check{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.9rem;cursor:pointer;user-select:none;white-space:nowrap}
.tl-check input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}
.tl-prof-status{text-align:center;color:var(--muted);font-size:.85rem;min-height:1.1em;margin-top:8px}
.tl-prof-status.err{color:#ff7a7a}

/* ── поиск ── */
.tl-search-wrap{position:relative;margin:0 auto 22px;max-width:560px}
.tl-search-wrap .tl-input{width:100%}
.tl-search-drop{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  max-height:340px;overflow-y:auto;display:none;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.tl-search-drop.open{display:block}
.tl-sd-item{display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;transition:.12s}
.tl-sd-item:hover,.tl-sd-item.active{background:rgba(0,240,255,.1)}
.tl-sd-item img{width:46px;height:auto;border-radius:5px;flex:0 0 auto;background:#000;aspect-ratio:2/3;object-fit:cover}
.tl-sd-item span{font-size:.92rem;line-height:1.25}
.tl-sd-empty{padding:12px 14px;color:var(--muted);font-size:.88rem}

/* ── доска тиров ── */
.tl-board{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;overflow:hidden}
.tl-board-head{display:flex;align-items:center;gap:12px;padding:6px 8px 12px;position:relative}
.tl-avatar{width:46px;height:46px;border-radius:10px;border:2px solid var(--line);object-fit:cover}
.tl-nick{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.5px}
.tl-count{margin-left:auto;color:#8a93a3;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:1px}
.tl-watermark{color:#4d5366;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:1px}

.tl-tiers{display:flex;flex-direction:column;gap:6px}
.tl-row{display:flex;align-items:stretch;gap:0;background:var(--panel2);border-radius:8px;overflow:hidden;min-height:calc(var(--card-h) + 12px)}
.tl-label{
  flex:0 0 auto;width:auto;min-width:var(--label-w);max-width:calc(var(--label-w)*1.5);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:calc(var(--label-fs) * var(--label-mul,1));color:#1a1208;
  padding:4px;word-break:break-word;line-height:1.05;outline:none;cursor:text;
  text-shadow:0 1px 1px rgba(255,255,255,.25)}
.tl-label.lm80{--label-mul:.8}
.tl-label.lm60{--label-mul:.6}
.tl-label:focus{box-shadow:inset 0 0 0 2px rgba(0,0,0,.45)}
.tl-area{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:5px;padding:6px;align-content:flex-start;min-width:0}
.tl-area.tl-hot{background:rgba(0,240,255,.12);outline:2px dashed rgba(0,240,255,.5);outline-offset:-2px}
.tl-row-tools{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 4px}
.tl-del{background:transparent;border:none;color:#6b7080;font-size:1.3rem;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px;transition:.12s}
.tl-del:hover{color:#ff6a6a;background:rgba(255,106,106,.12)}

/* ── карточка игры ── */
.tl-card{
  position:relative;width:var(--card-w);height:var(--card-h);border-radius:6px;overflow:hidden;
  background:#0c0c14 center/cover no-repeat;border:1px solid #000;cursor:grab;flex:0 0 auto;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
.tl-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tl-card img.tl-cover-h{object-fit:contain;background:#000}
.tl-card-name{
  position:absolute;left:0;right:0;bottom:0;padding:2px 3px;font-size:8px;line-height:1.05;
  background:linear-gradient(transparent, rgba(0,0,0,.5) 35%, rgba(0,0,0,.95));color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none}
.tl-card.tl-dragging{opacity:.32}
.tl-drag-clone{border-radius:6px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.6);transform-origin:top left;
  will-change:transform;border:2px solid var(--cyan)}
.tl-grabbing,.tl-grabbing *{cursor:grabbing !important}

/* ── банк ── */
.tl-tier-tools{display:flex;gap:10px;justify-content:center;margin:14px 0 8px;flex-wrap:wrap}
.tl-bank-title{font-family:'Orbitron',sans-serif;font-size:.9rem;letter-spacing:1px;color:var(--muted);text-align:center;margin:20px 0 10px;text-transform:uppercase}
.tl-bank{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:calc(var(--card-h) + 20px);
  background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:12px}
.tl-bank.tl-hot{background:rgba(0,240,255,.1);border-color:var(--cyan)}
.tl-bank-empty{color:#565c6b;font-size:.86rem;align-self:center;margin:auto;padding:12px}

/* ── кнопки ── */
.tl-btn{font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:.6px;border-radius:10px;cursor:pointer;
  border:none;padding:11px 20px;font-size:.86rem;transition:.16s;color:#fff}
.tl-btn-ghost{background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:.8rem;padding:9px 15px;font-weight:600}
.tl-btn-ghost:hover{border-color:var(--cyan);color:#fff}
.tl-btn-main{background:linear-gradient(135deg,#0891b2,#06b6d4);box-shadow:0 6px 18px rgba(8,145,178,.35)}
.tl-btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(8,145,178,.5)}
.tl-btn-roast{background:linear-gradient(135deg,#b91c1c,#f97316);box-shadow:0 6px 18px rgba(249,115,22,.32)}
.tl-btn-roast:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,.5)}
.tl-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.tl-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}

.tl-roast-out{
  margin:12px 4px 4px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.35);
  border-left:3px solid #f97316;border-radius:10px;padding:14px 16px;white-space:pre-wrap;
  line-height:1.55;font-size:.95rem;color:#f0ddca}
.tl-roast-out::before{content:'🔥 'attr(data-label);display:block;font-family:'Orbitron',sans-serif;
  font-size:.72rem;letter-spacing:1.5px;color:#f97316;margin-bottom:8px;text-transform:uppercase}

.tl-foot{text-align:center;margin-top:34px;color:var(--muted);font-size:.9rem}

/* ── спиннер ── */
.tl-busy{position:fixed;inset:0;background:rgba(8,8,14,.6);backdrop-filter:blur(3px);z-index:100000;display:flex;align-items:center;justify-content:center}
.tl-spin{width:46px;height:46px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--cyan);border-radius:50%;animation:tlspin .8s linear infinite}
@keyframes tlspin{to{transform:rotate(360deg)}}

/* ── мобилка ── */
@media(max-width:680px){
  :root{--card-w:46px;--card-h:68px;--label-w:48px}
  .tl-wrap{padding:48px 10px 70px}
  .tl-label{font-size:.92rem}
  .tl-card-name{font-size:7px}
  .tl-profile-row .tl-input{flex:1 1 100%}
  .tl-check{justify-content:center;flex:1 1 100%}
  .tl-btn-main,.tl-btn-roast{flex:1 1 100%}
}


/* ── ШАПКА-ПАНЕЛЬ (рамка своего оттенка + вкладки на ней, как на других страницах) ── */
.tl-panel{ position:relative; z-index:10; max-width:860px; margin:0 auto 22px;
  background:rgba(18,18,30,0.92); backdrop-filter:blur(20px);
  border:1px solid var(--cyan); border-radius:20px; padding:26px 30px 22px;
  box-shadow:0 0 50px rgba(0,240,255,0.12), inset 0 0 30px rgba(0,240,255,0.03); }

/* ── БОКОВАЯ НАВИГАЦИЯ — продолжение рамки панели ── */
.nav-side-btn{ position:absolute; top:24px; display:flex; align-items:center; height:46px;
  text-decoration:none; white-space:nowrap; overflow:hidden; color:var(--text);
  font-family:'Orbitron',sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:1px;
  background:rgba(18,18,30,0.94); backdrop-filter:blur(10px); z-index:30;
  transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1); }
.nav-left{ left:-46px; width:46px; border:1px solid var(--cyan); border-right:none;
  border-radius:12px 0 0 12px; box-shadow:-6px 0 18px rgba(0,240,255,0.18); flex-direction:row-reverse; }
.nav-left:hover{ width:188px; left:-188px; background:rgba(0,240,255,0.10); border-color:#7df3ff; }
.nav-side-btn:hover, .nav-side-btn:focus{ text-decoration:none; }
.nav-text, .nav-icon{ text-decoration:none; }
.nav-right{ right:-46px; width:46px; border:1px solid var(--cyan); border-left:none;
  border-radius:0 12px 12px 0; box-shadow:6px 0 18px rgba(0,240,255,0.18); flex-direction:row; }
.nav-right:hover{ width:188px; right:-188px; background:rgba(0,240,255,0.10); border-color:#7df3ff; }
.nav-right2{ top:80px; right:-46px; width:46px; border:1px solid var(--cyan); border-left:none;
  border-radius:0 12px 12px 0; box-shadow:6px 0 18px rgba(0,240,255,0.18); flex-direction:row; }
.nav-right2:hover{ width:188px; right:-188px; background:rgba(0,240,255,0.10); border-color:#7df3ff; }
.nav-right2.nav-w{ top:136px; }
.nav-icon{ width:46px; display:flex; justify-content:center; align-items:center; font-size:1.25rem; flex-shrink:0; }
.nav-text{ opacity:0; transition:opacity 0.3s; text-transform:none; padding:0 8px; }
.nav-side-btn:hover .nav-text{ opacity:1; transition-delay:0.1s; }

/* ── плейсхолдер при перетаскивании (карты раздвигаются) ── */
.tl-placeholder{ width:var(--card-w); height:var(--card-h); border-radius:6px; flex:0 0 auto;
  border:2px dashed var(--cyan); background:rgba(0,240,255,.12); pointer-events:none;
  box-shadow:0 0 12px rgba(0,240,255,.25) inset; }

.tl-hint{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:12px }

/* ── ссылка-пермалинк (под доской, появляется после сохранения / при открытии по коду) ── */
.tl-share{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; max-width:980px; margin:14px auto 0;
  background:rgba(0,240,255,.05); border:1px solid var(--cyan); border-radius:12px; padding:10px 14px;
  box-shadow:0 0 24px rgba(0,240,255,.10) inset; }
.tl-share-label{ font-family:'Orbitron',sans-serif; font-size:.74rem; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
.tl-share-url{ flex:1 1 240px; min-width:0; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-size:.95rem; padding:8px 10px; }
.tl-share-url:focus{ outline:none; border-color:var(--cyan); }
.tl-share-copy{ flex:0 0 auto; cursor:pointer; font-family:'Orbitron',sans-serif; font-size:.78rem; letter-spacing:1px;
  background:var(--cyan); color:#06121a; border:none; border-radius:8px; padding:9px 16px; font-weight:700; transition:filter .2s; }
.tl-share-copy:hover{ filter:brightness(1.12); }
@media(max-width:680px){ .tl-share-label{ flex:1 1 100%; } }

@media(max-width:1260px){
  /* на узких экранах прячем выезжающие вкладки, чтобы не лезли на контент */
  .nav-side-btn{ display:none; }
}

.tl-sd-item.tl-sd-added{ opacity:.5 }
.tl-sd-item.tl-sd-added span{ color:var(--muted) }


/* ── масштаб под большие мониторы (2K/27" и крупнее) ── */
/* масштаб только доски/банка/карточек/ярлыков — шапка-панель фиксированного размера */
@media(min-width:1440px){
  :root{ --card-w:78px; --card-h:112px; --label-w:90px; --label-fs:1.18rem; }
  .tl-wrap{ max-width:1120px; }
  .tl-card-name{ font-size:9px; }
}
@media(min-width:1900px){
  :root{ --card-w:94px; --card-h:134px; --label-w:106px; --label-fs:1.4rem; }
  .tl-wrap{ max-width:1340px; }
  .tl-card-name{ font-size:10px; }
}
@media(min-width:2400px){
  :root{ --card-w:110px; --card-h:158px; --label-w:122px; --label-fs:1.6rem; }
  .tl-wrap{ max-width:1560px; }
  .tl-card-name{ font-size:11px; }
}


/* ── модалка подтверждения удаления тира ── */
.tl-modal-overlay{ position:fixed; inset:0; background:rgba(6,6,12,.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100000; padding:20px }
.tl-modal-overlay.open{ display:flex }
.tl-modal{ background:var(--panel); border:1px solid var(--cyan); border-radius:16px;
  padding:24px 26px; max-width:380px; width:100%; text-align:center;
  box-shadow:0 0 40px rgba(0,240,255,.15) }
.tl-modal h3{ font-family:'Orbitron',sans-serif; margin:0 0 10px; font-size:1.1rem; color:var(--text) }
.tl-modal p{ color:var(--muted); margin:0 0 18px; font-size:.92rem; line-height:1.5 }
.tl-modal-btns{ display:flex; gap:10px; justify-content:center }
.tl-modal-btns button{ flex:1; padding:11px 14px; border-radius:9px; border:1px solid var(--line);
  font-family:'Orbitron',sans-serif; font-size:.85rem; cursor:pointer; transition:all .15s }
.tl-modal-yes{ background:#b3261e; color:#fff; border-color:#b3261e }
.tl-modal-yes:hover{ background:#cf3329 }
.tl-modal-no{ background:transparent; color:var(--text) }
.tl-modal-no:hover{ background:rgba(255,255,255,.06) }

/* ── источник RAWG (консольные и т.п.) ── */
.tl-sd-plat{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px;
  background:rgba(123,224,160,.15); border:1px solid rgba(123,224,160,.4); color:#9fe9c0;
  font-size:.7rem; vertical-align:middle }
.tl-card{ position:relative }
.tl-card.tl-card-rawg::after{ content:''; position:absolute; top:3px; left:3px; width:7px; height:7px;
  border-radius:50%; background:#7be0a0; box-shadow:0 0 5px #7be0a0; z-index:2 }

/* ── вердикт-титул нейроразбора ── */
.tl-verdict{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.04rem;
  color:#ffcf8f; margin-bottom:9px; line-height:1.3; text-shadow:0 0 12px rgba(255,180,90,.25) }
.tl-roast-body{ white-space:pre-wrap }

/* ── поиск по банку ── */
.tl-bank-search{ display:block; margin:0 auto 12px; max-width:480px }

/* ── режим сохранения: убираем источники швов html2canvas (тени + flex-gap -> margin) ── */
.tl-saving .tl-row{ overflow:visible; box-shadow:none; background:#000 }
.tl-saving .tl-card-name{ background:linear-gradient(transparent, rgba(0,0,0,.55) 30%, #000); font-size:8px }
.tl-saving .tl-label{ font-size:var(--label-fs,1.05rem) }
.tl-saving .tl-card{ box-shadow:none; margin:2.5px; border-color:transparent }
.tl-saving .tl-area{ gap:0; padding:4px }
.tl-saving .tl-drag-clone{ display:none }

/* ── крестик закрытия нейроразбора (в браузере; в фото скрыт) ── */
.tl-roast-out{ position:relative }
.tl-roast-close{ position:absolute; top:6px; right:8px; background:transparent; border:none;
  color:#c98a5a; font-size:1.4rem; line-height:1; cursor:pointer; padding:2px 7px; border-radius:6px; transition:.12s }
.tl-roast-close:hover{ background:rgba(249,115,22,.18); color:#ffcf8f }

/* ── подпись под спиннером загрузки ── */
.tl-busy{ flex-direction:column }
.tl-busy-text{ margin-top:14px; max-width:300px; text-align:center; color:#cfd3dc; font-size:.9rem; line-height:1.45 }

/* ── в сохранённом фото прячем UI-только элементы ── */
.tl-saving .tl-row-tools{ display:none }
.tl-saving .tl-roast-close{ display:none }

/* ── на больших тир-листах шапка и разбор крупнее (--save-scale задаётся при сохранении) ── */
.tl-saving .tl-nick{ font-size:calc(1.05rem * var(--save-scale,1)) }
.tl-saving .tl-count, .tl-saving .tl-watermark{ font-size:calc(.72rem * var(--save-scale,1)) }
.tl-saving .tl-avatar{ width:calc(46px * var(--save-scale,1)); height:calc(46px * var(--save-scale,1)) }
.tl-saving .tl-board-head{ gap:calc(12px * var(--save-scale,1)) }
.tl-saving .tl-roast-out{ font-size:calc(.95rem * var(--save-scale,1)); padding:calc(14px * var(--save-scale,1)) calc(16px * var(--save-scale,1)) }
.tl-saving .tl-verdict{ font-size:calc(1.04rem * var(--save-scale,1)) }
.tl-saving .tl-roast-out::before{ font-size:calc(.72rem * var(--save-scale,1)) }

/* ── ручка перетаскивания тира + выбор цвета плашки (скрыты в сохранённом фото через .tl-saving) ── */
.tl-row-grip{ background:transparent; border:none; color:#6b7080; font-size:1rem; cursor:grab; line-height:1;
  padding:2px 6px; border-radius:6px; touch-action:none; transition:.12s }
.tl-row-grip:hover{ color:#cfd3dc; background:rgba(255,255,255,.06) }
.tl-row-grip:active{ cursor:grabbing }
.tl-row-color{ width:22px; height:22px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:6px;
  background:transparent; cursor:pointer }
.tl-row-color::-webkit-color-swatch-wrapper{ padding:0 }
.tl-row-color::-webkit-color-swatch{ border:none; border-radius:5px }
.tl-row-color::-moz-color-swatch{ border:none; border-radius:5px }
.tl-row.tl-row-dragging{ opacity:.55; box-shadow:0 10px 26px rgba(0,0,0,.55) }