/* Talents & Tree Builder CSS cloned from cod-tracker.com */



    .hero-avatar-wrap.rar-5 { background-image: url('/icons/hero_rare_5.png') }



    .hero-avatar-wrap.rar-4 { background-image: url('/icons/hero_rare_4.png') }



    .hero-avatar-wrap.rar-low { background-image: url('/icons/hero_rare_3.png') }



    .hd-avatar-wrap.rar-5 { background-image: url('/icons/hero_rare_5.png') }



    .hd-avatar-wrap.rar-4 { background-image: url('/icons/hero_rare_4.png') }



    .hd-avatar-wrap.rar-low { background-image: url('/icons/hero_rare_3.png') }



    .tl-art.rar-5 { background-image: url('/icons/hero_rare_5.png') }



    .tl-art.rar-4 { background-image: url('/icons/hero_rare_4.png') }



    .tl-art.rar-low { background-image: url('/icons/hero_rare_3.png') }





/* ── Talent Calculator (Tools → Tính Tài Năng) ───────────────────────── */

/* When this tool is mounted, strip .app's padding/max-width so the tool

   spans the full content width on every screen size. */

/* z-index 250 lifts .app's whole stacking context above the sidebar (100),

   mobile-topbar (190), and sidebar drawer (200). Otherwise the modal's

   z-index 300 is sealed inside .app's z:1 context and sidebar wins.

   Mobile: only lift while the skill modal is open — otherwise the

   mobile-topbar (190) is buried under .app and the user can't tap the

   hamburger to switch tabs. */

body.tlt-active .app { padding: 0 !important; max-width: none !important; }



  body.tlt-active .app { z-index: 250 !important; }



  body.tlt-active.tlt-modal-open .app { z-index: 250 !important; }



body.tlt-active #tab-tools { min-height: 0 !important; }



/* footer rule removed */



/* Match the panel bg on the root surfaces so iOS rubber-band over-scroll

   and any rounding gap don't reveal the page bg as a black band. */

html.tlt-active, body.tlt-active { background: #1a2a4a !important; }



  /* overflow rule removed */



  body.tlt-active .main-wrap { min-height: 100vh; height: 100vh; height: 100dvh; }



  body.tlt-active .app { min-height: 0 !important; height: 100%; overflow: hidden; }



  body.tlt-active #tab-tools { height: 100%; }





.tlt-root { display:flex; flex-direction:column; height:100%; width:100%; background:#0a1628; color:#e8eef8; box-shadow:0 4px 16px rgba(0,0,0,.3); }

 .tlt-root { overflow:hidden; }



.tlt-loading { padding:40px; text-align:center; color:#7c8ba8; font-style:italic; }



.tlt-topbar { background:#1a2a4a; min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; gap:14px; flex-shrink:0; border-bottom:1px solid #0a1628; flex-wrap:nowrap; }

 .tlt-topbar { padding-right:80px; }



.tlt-tb-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }



.tlt-tb-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }



.tlt-title { color:#f5c84a; font-weight:bold; font-size:15px; letter-spacing:1px; margin-right:6px; flex-shrink:0; white-space:nowrap; }



.tlt-tb-lbl { color:#9bb0d4; font-size:12px; flex-shrink:0; white-space:nowrap; }



.tlt-tb-sel { background:#0e1a30; color:#e8eef8; border:1px solid #2c3e63; border-radius:4px; padding:5px 8px; font-size:13px; min-width:0; max-width:100%; }



.tlt-tb-sel:focus { outline:none; border-color:#c9a14a; }



.tlt-tb-hero { flex:1 1 240px; min-width:140px; max-width:520px; text-overflow:ellipsis; }



.tlt-tb-faction { width:120px; flex-shrink:0; }



.tlt-tb-btn { background:#0e1a30; color:#e8eef8; border:1px solid #2c3e63; border-radius:4px; padding:5px 12px; font-size:12px; cursor:pointer; white-space:nowrap; }



.tlt-tb-btn:hover { background:#162640; border-color:#c9a14a; }



.tlt-tb-reset { color:#ff9b9b; }



.tlt-points { color:#f5c84a; font-weight:bold; font-size:13px; padding:0 6px; white-space:nowrap; }



.tlt-body { display:flex; flex:1; min-height:0; }



.tlt-canvas-wrap { flex:1; position:relative; background:#0a1628; min-width:0; min-height:0; overflow:hidden; }



.tlt-canvas-wrap canvas { width:100%; height:100%; display:block; cursor:default; touch-action:none; user-select:none; -webkit-user-select:none; }



.tlt-rightpanel { width:300px; background:#1a2a4a; border-left:1px solid #0a1628; display:flex; flex-direction:column; flex-shrink:0; position:relative; }



/* 3-stripe drag handle — hidden on desktop, only appears when the body

   is stacked (canvas above, stats below) at mobile/narrow widths. */

.tlt-rightpanel-resizer { display:none; }



  /* Sticky just below the mobile-topbar (54px) so it remains tappable

     even when the user scrolls down through a long stats list. Without

     this, position:absolute let the handle scroll off-screen with the

     panel — user couldn't drag once they passed the canvas area. */

  /* Anchored to canvas-wrap's bottom via position:absolute — robust on

     iOS Safari (no fixed-position viewport quirks, no need to recompute

     `top` on scroll/URL-bar collapse). Trade-off: handle scrolls away

     with canvas, but alignment is always pixel-perfect at canvas

     bottom. */

  /* Drag-resize feature disabled on mobile — iOS Safari has too many

     positioning quirks (sticky/fixed/absolute all had reliability

     issues across URL bar collapse, flex shrink, and overflow:visible

     parents). Mobile uses default layout: canvas + page scroll for

     panel. Desktop modal resizer is unaffected. */

  .tlt-rightpanel-resizer { display:none; }



.tlt-stats-hdr { color:#f5c84a; font-weight:bold; font-size:13px; letter-spacing:1.5px; padding:14px 12px 6px; }



.tlt-stats-body { flex:1; overflow-y:auto; padding:0 6px 14px; }



.tlt-group-hdr { color:#9bb0d4; font-weight:bold; font-size:12px; padding:10px 8px 3px; }



.tlt-stat-line { color:#e8eef8; font-size:12px; padding:2px 10px; line-height:1.45; }



.tlt-special-name { color:#f5c84a; font-weight:bold; font-size:12px; padding:4px 10px 0; }



.tlt-special-desc { color:#7c8ba8; font-size:11px; padding:0 16px 3px; line-height:1.35; }



.tlt-empty { color:#7c8ba8; font-style:italic; text-align:center; padding:24px 12px; font-size:12px; }





/* ── KỸ NĂNG topbar button (green, distinct from gold RESET) ── */

.tlt-tb-skill { background:#205c2c !important; color:#d6f5dc !important; border-color:#2f8a3f !important; font-weight:bold; }



.tlt-tb-skill:hover { background:#2a7639 !important; }





/* ── Skill modal ── */

/* z-index 300 sits above mobile-topbar (190), sidebar drawer (200), and

   the desktop sidebar (100) — the modal must never be obscured. */

.tlt-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; }



.tlt-modal-backdrop { position:absolute; inset:0; background:rgba(5,12,24,.78); backdrop-filter:blur(2px); }



.tlt-modal-dialog { position:relative; z-index:1; background:#0e1a30; border:1px solid #2c3e63; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(201,161,74,.25); width:min(1080px, calc(100vw - 48px)); max-width:1080px; height:min(720px, calc(100vh - 60px)); max-height:calc(100vh - 60px); display:flex; flex-direction:column; overflow:hidden; }
.tlt-modal-resizer { display:none; }



.tlt-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #1a2a4a; background:#1a2a4a; flex-shrink:0; }



.tlt-modal-title { color:#f5c84a; font-weight:bold; font-size:14px; letter-spacing:.5px; }



.tlt-modal-x { background:transparent; border:none; color:#9bb0d4; font-size:18px; cursor:pointer; padding:0 6px; }



.tlt-modal-x:hover { color:#fff; }



.tlt-modal-body { flex:1; display:flex; min-height:0; overflow:hidden; }



.tlt-modal-main { flex:1 1 60%; overflow-y:auto; padding:14px 16px; min-width:0; }



.tlt-modal-side { width:380px; flex-shrink:0; background:#0a1628; border-left:1px solid #1a2a4a; overflow-y:auto; padding:14px 16px; }



.tlt-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; border-top:1px solid #1a2a4a; background:#1a2a4a; flex-shrink:0; }





/* Section headers inside modal (KỸ NĂNG TƯỚNG, THỨC TỈNH, TỔNG QUAN BUFF) */

.tlt-section-hdr { color:#f5c84a; font-weight:bold; font-size:12px; letter-spacing:1.5px; padding:12px 4px 6px; border-bottom:1px solid #1a2a4a; margin-bottom:6px; }





/* Top row holds hero card + artifact card side-by-side on desktop, stacks

   on narrower viewports. */

.tlt-toprow { display:flex; gap:12px; align-items:stretch; padding:4px 0 8px; }



.tlt-toprow > * { flex:1; min-width:0; }





/* Hero card */

.tlt-hero-card { display:flex; gap:14px; padding:10px 4px 14px; align-items:center; }



.tlt-hero-portrait { position:relative; width:80px; height:80px; flex-shrink:0; background:center/contain no-repeat; }



.tlt-hero-portrait img { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:64px; height:68px; object-fit:cover; object-position:center 30%; border-radius:4px 4px 8px 8px / 4px 4px 12px 12px; }



.tlt-hero-portrait.rar-5 { background-image: url('/icons/hero_rare_5.png'); }



.tlt-hero-portrait.rar-4 { background-image: url('/icons/hero_rare_4.png'); }



.tlt-hero-portrait.rar-low { background-image: url('/icons/hero_rare_3.png'); }



.tlt-hero-meta { flex:1; min-width:0; }



.tlt-hero-name { color:#f5c84a; font-weight:bold; font-size:15px; }



.tlt-hero-stars { color:#f5c84a; font-size:12px; margin-left:4px; }



.tlt-hero-sub { color:#9bb0d4; font-size:11px; margin:3px 0 6px; }



.tlt-hero-tags { display:flex; gap:5px; flex-wrap:wrap; }



.tlt-hero-tag { font-size:10px; color:#c9d6ee; background:#1a2a4a; border:1px solid #2c3e63; padding:2px 8px; border-radius:10px; }





/* Artifact card */

.tlt-art-card { display:flex; gap:12px; padding:10px 8px 14px; border:1px solid #c9a14a; border-radius:8px; background:rgba(245,200,74,.05); align-items:flex-start; }



.tlt-art-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }



.tlt-art-hdr { padding:0; border-bottom:none; margin:0; }



.tlt-art-sel { background:#0e1a30; color:#e8eef8; border:1px solid #2c3e63; border-radius:4px; padding:6px 8px; font-size:12px; width:100%; min-width:0; }



.tlt-art-sel:focus { outline:none; border-color:#c9a14a; }



.tlt-art-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }



.tlt-art-lv { background:#0e1a30; color:#f5c84a; border:1px solid #2c3e63; border-radius:4px; padding:5px 8px; font-size:12px; font-weight:bold; }



.tlt-art-red { display:flex; align-items:center; gap:6px; color:#ff9b9b; font-size:12px; font-weight:bold; cursor:pointer; user-select:none; }



.tlt-art-red input { accent-color:#ff5050; }



.tlt-art-red-disabled { color:#445575; cursor:not-allowed; }



.tlt-art-iconwrap { width:120px; height:120px; flex-shrink:0; background:#0e1a30; border:1px solid #c9a14a; border-radius:6px; position:relative; overflow:hidden; }



.tlt-art-iconwrap > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }



.tlt-art-iconwrap .tlt-art-bg    { z-index:1; }



.tlt-art-iconwrap .tlt-art-icon  { z-index:2; padding:14%; }



.tlt-art-iconwrap .tlt-art-frame { z-index:3; pointer-events:none; }



.tlt-art-iconwrap.tlt-art-red-on { border-color:#ff5050; box-shadow:0 0 8px rgba(255,80,80,.3); }



.tlt-art-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#7c8ba8; font-size:11px; font-style:italic; }





/* Skill rows in the modal */

.tlt-skill-list { padding-bottom:8px; }



.tlt-skill-row { display:flex; gap:10px; padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.04); }



.tlt-skill-row.tlt-skill-awaken { background:rgba(245,200,74,.04); }



.tlt-skill-row.tlt-skill-awaken-on { background:rgba(245,200,74,.10); }



.tlt-skill-iconwrap { width:56px; height:56px; flex-shrink:0; background:#1a2a4a; border:1px solid #2c3e63; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; }



.tlt-skill-icon { width:100%; height:100%; object-fit:contain; }



.tlt-skill-info { flex:1; min-width:0; }



.tlt-skill-head { display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }



.tlt-skill-slot { color:#9bb0d4; font-size:10px; letter-spacing:.5px; text-transform:uppercase; font-weight:bold; }



.tlt-skill-typetag { font-size:9px; padding:1px 6px; border-radius:6px; background:#1a2a4a; color:#7c8ba8; }



.tlt-skill-typetag-passive { color:#5ad6a0; }



.tlt-skill-sel { margin-left:auto; background:#1a2a4a; color:#f5c84a; border:1px solid #2c3e63; border-radius:4px; padding:3px 8px; font-size:12px; font-weight:bold; }



.tlt-skill-sel:focus { outline:none; border-color:#f5c84a; }



.tlt-awaken-on { color:#f5c84a; font-weight:bold; font-size:11px; margin-left:auto; }



.tlt-awaken-off { color:#7c8ba8; font-size:11px; margin-left:auto; font-style:italic; }



/* Use overflow-wrap (standard) instead of word-break:break-word — Safari

   iOS treats the latter as break-all, splitting every character to its

   own line on narrow cells. overflow-wrap:anywhere only breaks when a

   word can't fit, preserving "Ngọn Giáo Phán Quyết" on one line when

   there's room and wrapping on word boundaries otherwise. */

.tlt-skill-name { color:#e8eef8; font-size:13px; font-weight:bold; margin-bottom:3px; overflow-wrap:anywhere; word-break:normal; }



.tlt-skill-desc { color:#9bb0d4; font-size:11px; line-height:1.4; overflow-wrap:anywhere; word-break:normal; }





/* Pair-mode (Deputy / Tướng Phụ) — 2-col skill grid */

.tlt-skill-grid-header { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:end; padding:6px 4px 8px; border-bottom:1px solid #2c3e63; margin-bottom:6px; }



.tlt-skill-grid-header > .tlt-skill-col-title:first-child { border-right:1px solid #2c3e63; padding-right:10px; }



.tlt-skill-grid-header > .tlt-skill-col-title:last-child { padding-left:10px; }



.tlt-skill-col-title { color:#f5c84a; font-weight:bold; font-size:11.5px; letter-spacing:.5px; display:flex; align-items:center; gap:8px; }



.tlt-skill-col-hero { color:#9bb0d4; font-weight:normal; font-size:10.5px; }



.tlt-sub-hero-sel { margin-left:auto; background:#1a2a4a; color:#f5c84a; border:1px solid #2c3e63; border-radius:4px; padding:3px 8px; font-size:11.5px; max-width:60%; }



.tlt-sub-hero-sel:focus { outline:none; border-color:#f5c84a; }



.tlt-skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; column-gap:20px; }



/* Each row's height = max of the 2 cells in that row → main + sub align

   row-by-row regardless of desc length differences. */

.tlt-skill-cell { padding:4px 6px; min-width:0; width:100%; box-sizing:border-box; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.04); display:flex; flex-direction:column; }



.tlt-skill-cell-main { border-right:1px solid #2c3e63; padding-right:14px; }



.tlt-skill-cell-sub  { padding-left:4px; }



.tlt-skill-cell-awaken { background:rgba(245,200,74,.04); }



.tlt-skill-cell-empty { color:#7c8ba8; font-size:11px; font-style:italic; align-items:center; justify-content:center; text-align:center; padding:8px; min-height:60px; }



.tlt-skill-cell .tlt-skill-row { border-bottom:none; padding:6px 2px; flex:1; }



.tlt-skill-cell .tlt-skill-info { min-width:0; }



.tlt-skill-cell .tlt-skill-head { flex-wrap:wrap; gap:4px 8px; }



.tlt-skill-cell .tlt-skill-sel { margin-left:auto; }



.tlt-summary-cond { color:#9bb0d4; font-style:italic; }



.tlt-summary-hero { color:#9bb0d4; font-weight:normal; font-size:10.5px; font-style:italic; }





/* Summary panel inside modal (TỔNG QUAN BUFF) */

.tlt-summary-body { color:#e8eef8; font-size:12px; }



.tlt-summary-group { color:#9bb0d4; font-weight:bold; font-size:11px; padding:10px 0 4px; letter-spacing:.5px; }



.tlt-summary-line { padding:2px 4px 0; font-size:13px; font-weight:bold; }



.tlt-summary-pos { color:#f5c84a; }



.tlt-summary-neg { color:#ff9b9b; }



.tlt-summary-sub { color:#7c8ba8; font-size:10.5px; padding:0 4px 6px 12px; border-bottom:1px solid #1a2a4a; margin-bottom:2px; }



/* Suppress body scroll when modal is open */
body.tlt-modal-open { overflow:hidden !important; }

@media (max-width: 900px) {
  /* Stack: drop grid placement → flex column → all main first, then sub. */
  .tlt-skill-grid { display:flex; flex-direction:column; column-gap:0; }
  .tlt-skill-grid > .tlt-skill-cell { grid-row:auto !important; grid-column:auto !important; }
  .tlt-skill-cell-main { border-right:none; padding-right:6px; }
  .tlt-skill-cell-sub { padding-left:6px; }
  .tlt-skill-grid > .tlt-skill-cell-sub:first-of-type { border-top:2px dashed #c9a14a; margin-top:8px; padding-top:10px; }
  .tlt-skill-grid-header { grid-template-columns:1fr; gap:4px; }
  .tlt-skill-grid-header > .tlt-skill-col-title:first-child { border-right:none; border-bottom:1px dashed #2c3e63; padding:0 0 4px; }
  .tlt-skill-grid-header > .tlt-skill-col-title:last-child { padding:4px 0 0; }
  .tlt-sub-hero-sel { max-width:70%; }

  .tlt-modal-dialog { width:min(95vw, 640px) !important; max-width:95vw !important; height:min(90vh, 760px) !important; max-height:90vh !important; border-radius:10px !important; border:1px solid #2c3e63 !important; }
  .tlt-modal-body { flex-direction:column; overflow-y:auto; }
  .tlt-modal-main { flex:1 1 auto; min-height:0; }
  .tlt-modal-side { width:auto; flex:0 0 auto; max-height:45%; height:45%; border-left:none; border-top:2px solid #c9a14a; position:relative; padding-top:24px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .tlt-modal-resizer {
    display:flex;
    position:absolute; top:0; left:0; right:0; height:22px;
    cursor:row-resize; touch-action:none; z-index:2;
    align-items:center; justify-content:center;
  }
  .tlt-modal-resizer::before {
    content:""; width:48px; height:10px;
    background-image: linear-gradient(#c9a14a,#c9a14a), linear-gradient(#c9a14a,#c9a14a), linear-gradient(#c9a14a,#c9a14a);
    background-size:48px 2px; background-repeat:no-repeat;
    background-position:left 0, left 4px, left 8px;
  }
  .tlt-modal-resizer:hover::before, .tlt-modal-resizer:active::before { filter:brightness(1.3); }
  .tlt-modal-header { padding:10px 12px; }
  .tlt-toprow { flex-direction:column; }
  .tlt-art-card { padding:8px; }
  .tlt-art-iconwrap { width:96px; height:96px; }
  .tlt-skill-row { padding:8px 4px; gap:8px; }
  .tlt-skill-iconwrap { width:48px; height:48px; }
  .tlt-skill-name { font-size:12px; }
  .tlt-skill-desc { font-size:10.5px; }
  .tlt-summary-line { font-size:12px; }
  .tlt-tb-skill { font-size:11px; padding:5px 10px; }
}



.tlt-tooltip { position:absolute; z-index:50; background:#0e1a30; border:1px solid #c9a14a; border-radius:4px; padding:10px 14px; max-width:min(340px, calc(100vw - 32px)); pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.5); font-size:12px; color:#c9d6ee; }



.tlt-tip-header { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; }



.tlt-tip-name { color:#e8eef8; font-weight:bold; font-size:13px; }



.tlt-tip-lv { color:#f5c84a; font-weight:bold; font-size:13px; white-space:nowrap; }



.tlt-tip-desc { color:#c9d6ee; line-height:1.45; margin-bottom:4px; word-wrap:break-word; }



.tlt-tip-divider { height:1px; background:#c9a14a; opacity:.5; margin:6px 0; }



.tlt-tip-section-hdr { color:#f5c84a; font-weight:bold; font-size:12px; margin-bottom:3px; }



.tlt-prog { display:flex; flex-wrap:wrap; align-items:center; }



.tlt-prog-cell { color:#c9d6ee; }



.tlt-prog-cur { color:#f5c84a; font-weight:bold; }



.tlt-prog-sep { color:#445575; }



.tlt-cond { padding:1px 0; font-size:12px; line-height:1.4; word-wrap:break-word; }



/* --- DESKTOP TALENT LAYOUT (Full height within container) --- */
.tlt-root {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  background: #0a1628;
  color: #e8eef8;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  position: relative;
}

.tlt-topbar {
  background: #1a2a4a;
  min-height: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #0a1628;
  z-index: 10;
  flex-wrap: nowrap;
}

.tlt-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 0% !important;
  height: calc(100% - 52px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative;
}

.tlt-canvas-viewport {
  flex: 1 1 0% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #0a1628;
}

.tlt-canvas-wrap {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  background: #0a1628;
  overflow: auto !important;
}

/* Thanh cuộn hiện đại cao cấp cho khung vẽ thiên phú khi phóng to */
.tlt-canvas-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.tlt-canvas-wrap::-webkit-scrollbar-track {
  background: #070e1b;
  border-radius: 5px;
}
.tlt-canvas-wrap::-webkit-scrollbar-thumb {
  background: #1e3352;
  border-radius: 5px;
  border: 1px solid #2e4d7a;
}
.tlt-canvas-wrap::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
  border-color: #fbbf24;
}
.tlt-canvas-wrap::-webkit-scrollbar-corner {
  background: #070e1b;
}

.tlt-canvas-wrap canvas {
  display: block;
}

.tlt-rightpanel {
  width: 310px !important;
  flex: 0 0 310px !important;
  height: 100% !important;
  background: #1a2a4a;
  border-left: 1px solid #0a1628;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  overflow: hidden;
}

.tlt-stats-hdr {
  color: #f5c84a;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #0a1628;
  flex-shrink: 0;
}

.tlt-stats-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 10px 16px;
}

.talent-tool-container.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* --- RESPONSIVE CONTROLS & AUTO-FIT STYLES --- */
.tlt-canvas-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tlt-ctrl-btn {
  width: 36px;
  height: 36px;
  background: rgba(14, 26, 48, 0.9);
  border: 1px solid #2c3e63;
  color: #f5c84a;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  user-select: none;
}
.tlt-ctrl-btn:hover {
  background: #243a5c;
  color: #ffffff;
  border-color: #f5c84a;
  transform: translateY(-1px);
}
.tlt-ctrl-btn:active {
  transform: translateY(1px);
}

@media (max-width: 991px) {
  .tlt-topbar {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .tlt-tb-left {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .tlt-tb-right {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .tlt-body {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .tlt-canvas-viewport {
    height: 52vh !important;
    min-height: 380px !important;
    width: 100% !important;
    flex: none !important;
  }
  .tlt-canvas-wrap {
    height: 100% !important;
    width: 100% !important;
  }
  .tlt-rightpanel {
    width: 100% !important;
    border-left: none !important;
    border-top: 2px solid #0a1628 !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    flex: none !important;
  }
  .tlt-modal-dialog {
    width: min(96vw, 720px) !important;
    max-width: 96vw !important;
    height: min(90vh, 760px) !important;
    max-height: 90vh !important;
  }
  .tlt-modal-body {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  .tlt-modal-side {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #1a2a4a !important;
  }
}

@media (max-width: 576px) {
  .tlt-canvas-viewport {
    height: 48vh !important;
    min-height: 320px !important;
  }
  .tlt-title {
    font-size: 13px !important;
  }
  .tlt-tb-sel {
    font-size: 12px !important;
    padding: 4px 6px !important;
  }
  .tlt-tb-btn {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}